Guwan
/
yl-backend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(图书初步): 图书初步 

图书初步
This commit is contained in:
ovo 2024-12-15 22:44:49 +08:00
parent 256743d3b9
commit 8154807f90
1 changed files with 65 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/main/resources/static/daxz.html
View File

@ -9,13 +9,8 @@
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f4f4f9; background-color: #f4f4f9;
margin: 0; margin: 0;
padding: 0; padding: 20px;
display: flex; min-height: 100vh;
justify-content: center;
align-items: center;
height: 100vh;
text-align: left;
padding-left: 20px;
} }
.container { .container {
@ -24,9 +19,7 @@
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px; padding: 20px;
max-width: 800px; max-width: 800px;
width: 100%; margin: 0 auto;
height: 90%;
overflow-y: auto;
} }
h1 { h1 {
@ -39,13 +32,10 @@
padding: 15px; padding: 15px;
background-color: #f9f9f9; background-color: #f9f9f9;
border-radius: 8px; border-radius: 8px;
min-height: 200px;
font-size: 16px; font-size: 16px;
color: #555; color: #555;
white-space: pre-wrap; white-space: pre-wrap;
line-height: 1.8; line-height: 1.8;
max-height: 420px;
overflow-y: auto;
} }
#comments p { #comments p {
@ -55,6 +45,15 @@
.button-container { .button-container {
margin-top: 20px; margin-top: 20px;
position: sticky;
bottom: 20px;
background: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
display: flex;
justify-content: center;
gap: 10px;
} }
button { button {
@ -65,7 +64,6 @@
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
margin: 0 10px;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
@ -77,6 +75,16 @@
background-color: #ddd; background-color: #ddd;
cursor: not-allowed; cursor: not-allowed;
} }
#pageTitle {
position: sticky;
top: 0;
background: white;
padding: 10px;
margin: 0;
z-index: 100;
border-bottom: 1px solid #eee;
}
</style> </style>
</head> </head>
<body> <body>
@ -92,76 +100,86 @@
</div> </div>
<script> <script>
let bookId = 1; // Default book ID let bookId = 1;
let currentPage = 1; // Current page number let currentPage = 1;
// Get bookId from URL parameters
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
bookId = urlParams.get('id') || 1; // Get id from query string or default to 1 bookId = urlParams.get('id') || 1;
async function getComment() { async function getComment() {
try { try {
// 先清空内容，显示加载状态
document.getElementById("comments").innerHTML = "Loading...";
const response = await fetch(`/common/getBookCommentByPath?id=${bookId}`); const response = await fetch(`/common/getBookCommentByPath?id=${bookId}`);
const data = await response.json(); const data = await response.json();
if (data && data.data) { if (data && data.data) {
console.log(data.data)
// 拼接卷和节作为标题
const volumeTitle = data.data.volume || 'Unknown Volume'; const volumeTitle = data.data.volume || 'Unknown Volume';
const sectionTitle = data.data.section || 'Unknown Section'; const sectionTitle = data.data.section || 'Unknown Section';
const fullTitle = `${volumeTitle} - ${sectionTitle}`; const fullTitle = `${volumeTitle} - ${sectionTitle}`;
// 设置页面标题 document.title = fullTitle;
document.title = fullTitle; // 设置浏览器标签页标题
document.getElementById("pageTitle").innerHTML = fullTitle; document.getElementById("pageTitle").innerHTML = fullTitle;
// 设置评论内容
document.getElementById("comments").innerHTML = formatContent(data.data.sectionContent); document.getElementById("comments").innerHTML = formatContent(data.data.sectionContent);
checkButtonState();
// Scroll to top after content is loaded // 强制滚动到顶部
scrollToTop(); window.scrollTo({
top: 0,
behavior: 'smooth'
});
checkButtonState();
} else { } else {
document.getElementById("comments").innerHTML = "No comments found."; document.getElementById("comments").innerHTML = "No comments found.";
} }
} catch (error) { } catch (error) {
console.log("Error fetching data:", error); console.error("Error fetching data:", error);
document.getElementById("comments").innerHTML = "Error loading content.";
} }
} }
// Format content to add indent and paragraph spacing
function formatContent(content) { function formatContent(content) {
const paragraphs = content.split('\n').map(paragraph => `<p>${paragraph}</p>`).join(''); if (!content) return '';
return paragraphs; return content.split('\n')
.filter(para => para.trim())
.map(para => `<p>${para}</p>`)
.join('');
} }
// Navigation function to go to previous or next comment
function navigateComment(direction) { function navigateComment(direction) {
if (direction === 'prev') { if (direction === 'prev' && currentPage > 1) {
currentPage = Math.max(1, currentPage - 1); // Ensure page number doesn't go below 1 currentPage--;
} else if (direction === 'next') { } else if (direction === 'next' && currentPage < 100000) {
currentPage = currentPage + 1; // Increment for next page currentPage++;
} }
// Update URL and reload comment
bookId = currentPage; bookId = currentPage;
// 更新URL，但不刷新页面
const newUrl = new URL(window.location);
newUrl.searchParams.set('id', bookId);
window.history.pushState({}, '', newUrl);
getComment(); getComment();
} }
// Check button state based on the current page
function checkButtonState() { function checkButtonState() {
document.getElementById("prevButton").disabled = currentPage === 1; document.getElementById("prevButton").disabled = currentPage === 1;
document.getElementById("nextButton").disabled = currentPage === 100000; // Adjust as needed document.getElementById("nextButton").disabled = currentPage === 100000;
} }
// Scroll the page to the top // 初始加载
function scrollToTop() {
console.log("Scrolling to top..."); // Debug log
window.scrollTo(0, 0); // Scroll to the top of the page
}
// Load comments when the page is ready
getComment(); getComment();
// 监听浏览器前进后退
window.onpopstate = function(event) {
const newId = new URLSearchParams(window.location.search).get('id') || 1;
if (bookId !== newId) {
bookId = newId;
currentPage = parseInt(newId);
getComment();
}
};
</script> </script>
</body> </body>