完成大量美化

2026-05-01 15:44:14 +08:00
parent 6b65b24b0f
commit f0e7e75ffb
36 changed files with 4393 additions and 1506 deletions
--- a/frontend/src/components/SideBarLeft/tabs/WorldBook/WorldBook.css
+++ b/frontend/src/components/SideBarLeft/tabs/WorldBook/WorldBook.css
@@ -754,3 +754,65 @@
  flex-direction: column;
  gap: 8px;
 }
+
+/* ==================== 分页控件样式 ==================== */
+.pagination-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  margin-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.pagination-info {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+
+.pagination-buttons {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.btn-pagination {
+  padding: 6px 12px;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.15s ease;
+  font-weight: 500;
+}
+
+.btn-pagination:hover:not(:disabled) {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: white;
+}
+
+.btn-pagination:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.page-size-select {
+  padding: 6px 10px;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  color: var(--color-text-primary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.page-size-select:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-light);
+}
--- a/frontend/src/components/SideBarLeft/tabs/WorldBook/WorldBook.jsx
+++ b/frontend/src/components/SideBarLeft/tabs/WorldBook/WorldBook.jsx
@@ -10,6 +10,7 @@ const WorldBook = () => {
    currentWorldBook,
    currentEntries,
    currentEntry,
+    entriesPagination,
    loading,
    error,
    success,
@@ -87,6 +88,13 @@ const WorldBook = () => {
    prevActiveTabRef.current = activeTab;
  }, [activeTab, fetchWorldBooks]);

+  // 组件挂载时立即加载世界书列表
+  useEffect(() => {
+    if (worldBooks.length === 0) {
+      fetchWorldBooks();
+    }
+  }, []);
+
  useEffect(() => {
    if (success && message) {
      alert(message);
@@ -134,8 +142,10 @@ const WorldBook = () => {
  const handleSelectWorldBook = async (book) => {
    setCurrentWorldBook(book);
    setShowWorldBookDropdown(false);
+    // 重置分页到第一页
+    setCurrentPage(1);
    try {
-      await fetchWorldBookEntries(book.name);
+      await fetchWorldBookEntries(book.name, 1, pageSize);
    } catch (err) {
      console.error('加载世界书条目失败:', err);
    }
@@ -192,6 +202,8 @@ const WorldBook = () => {

    try {
      await createWorldBookEntry(currentWorldBook.name, entryData);
+      // 添加成功后刷新当前页
+      await fetchWorldBookEntries(currentWorldBook.name, currentPage, pageSize);
      setNewEntry({
        uid: 0,
        content: '',
@@ -234,6 +246,29 @@ const WorldBook = () => {
    setShowEditPanel(true);
  };

+  // 处理页码变化
+  const handlePageChange = async (newPage) => {
+    if (!currentWorldBook) return;
+    setCurrentPage(newPage);
+    try {
+      await fetchWorldBookEntries(currentWorldBook.name, newPage, pageSize);
+    } catch (err) {
+      console.error('加载世界书条目失败:', err);
+    }
+  };
+
+  // 处理每页数量变化
+  const handlePageSizeChange = async (newPageSize) => {
+    if (!currentWorldBook) return;
+    setPageSize(newPageSize);
+    setCurrentPage(1); // 重置到第一页
+    try {
+      await fetchWorldBookEntries(currentWorldBook.name, 1, newPageSize);
+    } catch (err) {
+      console.error('加载世界书条目失败:', err);
+    }
+  };
+
  const handleEntryUpdate = async (field, value) => {
    if (!currentEntry || !currentWorldBook) return;

@@ -241,6 +276,8 @@ const WorldBook = () => {
    try {
      await updateWorldBookEntry(currentWorldBook.name, currentEntry.uid, updatedEntry);
      setCurrentEntry(updatedEntry);
+      // 更新成功后刷新当前页
+      await fetchWorldBookEntries(currentWorldBook.name, currentPage, pageSize);
    } catch (err) {
      console.error('更新条目失败:', err);
    }
@@ -301,27 +338,33 @@ const WorldBook = () => {
  const handleDeleteEntry = async () => {
    if (!currentEntry || !currentWorldBook) return;

-    if (confirm('确定要删除此条目吗？')) {
-      try {
-        await deleteWorldBookEntry(currentWorldBook.name, currentEntry.uid);
-        setShowEditPanel(false);
-        setCurrentEntry(null);
-      } catch (err) {
-        console.error('删除条目失败:', err);
-      }
+    if (!window.confirm('确定要删除此条目吗？')) {
+      return;
+    }
+
+    try {
+      await deleteWorldBookEntry(currentWorldBook.name, currentEntry.uid);
+      setShowEditPanel(false);
+      setCurrentEntry(null);
+      // 删除成功后刷新当前页
+      await fetchWorldBookEntries(currentWorldBook.name, currentPage, pageSize);
+    } catch (err) {
+      console.error('删除条目失败:', err);
    }
  };

  const handleDeleteWorldBook = async () => {
    if (!currentWorldBook) return;

-    if (confirm(`确定要删除世界书 "${currentWorldBook.name}" 吗？`)) {
-      try {
-        await deleteWorldBook(currentWorldBook.name);
-        resetCurrentWorldBook();
-      } catch (err) {
-        console.error('删除世界书失败:', err);
-      }
+    if (!window.confirm(`确定要删除世界书 "${currentWorldBook.name}" 吗？`)) {
+      return;
+    }
+
+    try {
+      await deleteWorldBook(currentWorldBook.name);
+      resetCurrentWorldBook();
+    } catch (err) {
+      console.error('删除世界书失败:', err);
    }
  };

@@ -393,7 +436,7 @@ const WorldBook = () => {
        if (importedBook) {
          handleSelectWorldBook(importedBook);
          // 导入成功后自动加载条目
-          await fetchWorldBookEntries(name);
+          await fetchWorldBookEntries(name, 1, pageSize);
          console.log('✅ 世界书导入成功，已加载条目');
        }
      } catch (err) {
@@ -623,6 +666,42 @@ const WorldBook = () => {
                  ) : (
                      <div className="loading">暂无条目</div>
                  )}
+                  
+                  {/* 分页控件 */}
+                  {entriesPagination.total > 0 && (
+                    <div className="pagination-controls">
+                      <div className="pagination-info">
+                        共 {entriesPagination.total} 条，第 {entriesPagination.page}/{entriesPagination.total_pages} 页
+                      </div>
+                      <div className="pagination-buttons">
+                        <button 
+                          className="btn-pagination"
+                          disabled={entriesPagination.page <= 1}
+                          onClick={() => handlePageChange(entriesPagination.page - 1)}
+                        >
+                          上一页
+                        </button>
+                        <button 
+                          className="btn-pagination"
+                          disabled={entriesPagination.page >= entriesPagination.total_pages}
+                          onClick={() => handlePageChange(entriesPagination.page + 1)}
+                        >
+                          下一页
+                        </button>
+                        <select 
+                          className="page-size-select"
+                          value={pageSize}
+                          onChange={(e) => handlePageSizeChange(parseInt(e.target.value))}
+                        >
+                          <option value={10}>10条/页</option>
+                          <option value={20}>20条/页</option>
+                          <option value={50}>50条/页</option>
+                          <option value={100}>100条/页</option>
+                        </select>
+                      </div>
+                    </div>
+                  )}
+                  
                  <button className="btn btn-primary" onClick={handleAddEntry}>
                    + 添加条目
                  </button>