Merge pull request #8 from weizwz/dev

Dev

Author: weizwz

app/globals.css

@@ -71,6 +71,12 @@
   /* 卡片阴影 */
   --card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --card-shadow-hover: 0 4px 12px 0 rgba(0, 0, 0, 0.5);
+
+  /* Ant Design 变量覆盖 - 解决暗黑模式闪烁问题 */
+  --ant-color-bg-container: #141414;
+  --ant-color-bg-layout: #000000;
+  --ant-color-text: rgba(255, 255, 255, 0.85);
+  --ant-color-text-base: #fff;
 }
 
 /* 基础样式 */

components/Providers.tsx

@@ -30,6 +30,7 @@ function AntdThemeProvider({ children }: { children: React.ReactNode }) {
       locale={zhCN}
       theme={{
         algorithm: isDark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
+        cssVar: true,
         token: {
           colorPrimary: '#1890ff',
           borderRadius: 8,

components/layout/ThemeToggle.tsx

@@ -23,12 +23,15 @@ export default function ThemeToggle() {
     setMounted(true);
   }, []);
 
-  // 同步 Redux 主题到 next-themes
+  // 同步 next-themes 主题到 Redux
+  // next-themes 是单一事实来源，Redux 只是为了保持状态一致性以便其他组件使用
   useEffect(() => {
-    if (reduxTheme && nextTheme !== reduxTheme) {
-      setNextTheme(reduxTheme);
+    if (nextTheme && (nextTheme === 'light' || nextTheme === 'dark' || nextTheme === 'system')) {
+      if (reduxTheme !== nextTheme) {
+        dispatch(setTheme(nextTheme as ThemeMode));
+      }
     }
-  }, [reduxTheme, nextTheme, setNextTheme]);
+  }, [nextTheme, reduxTheme, dispatch]);
 
   // 确定当前实际显示的主题
   const currentTheme = nextTheme === 'system' ? systemTheme : nextTheme;
@@ -55,13 +58,10 @@ export default function ThemeToggle() {
    */
   const toggleTheme = () => {
     // 在 light 和 dark 之间切换
-    const newTheme: ThemeMode = isDark ? 'light' : 'dark';
-    
-    // 更新 next-themes
+    const newTheme = isDark ? 'light' : 'dark';
+
+    // 只更新 next-themes，useEffect 会自动同步到 Redux
     setNextTheme(newTheme);
-    
-    // 更新 Redux store（会自动保存到 LocalStorage）
-    dispatch(setTheme(newTheme));
   };
 
   /**
@@ -76,7 +76,7 @@ export default function ThemeToggle() {
       <Button
         type="text"
         icon={isDark ? <SunOutlined aria-hidden="true" /> : <MoonOutlined aria-hidden="true" />}
-        size='large'
+        size="large"
         onClick={toggleTheme}
         className="transition-theme flex items-center justify-center"
         aria-label={getTooltipTitle()}

components/management/DataTable.tsx

@@ -51,8 +51,6 @@ export const DataTable: React.FC<DataTableProps> = ({
   onSelectionChange,
 }) => {
   const [internalSelectedRowKeys, setInternalSelectedRowKeys] = useState<React.Key[]>([]);
-  const [pageSize, setPageSize] = useState(100);
-  const [currentPage, setCurrentPage] = useState(1);
   const [expandedRowKeys, setExpandedRowKeys] = useState<React.Key[]>([]);
 
   // 获取分类数据
@@ -339,21 +337,7 @@ export const DataTable: React.FC<DataTableProps> = ({
           onExpandedRowsChange: (keys) => setExpandedRowKeys([...keys]),
           // defaultExpandAllRows: true,
         }}
-        pagination={{
-          current: currentPage,
-          pageSize: pageSize,
-          showSizeChanger: true,
-          showTotal: () => {
-            const categoryCount = treeData.length;
-            const linkCount = links.length;
-            return `共 ${categoryCount} 个分类，${linkCount} 条链接`;
-          },
-          onChange: (page, size) => {
-            setCurrentPage(page);
-            setPageSize(size);
-          },
-          pageSizeOptions: ['10', '20', '50', '100'],
-        }}
+        pagination={false}
         scroll={{ x: 1200 }}
       />
     </div>