refactor: 将当前类别状态从settingsSlice移动到新的uiSlice

Author: weizwz

components/navigation/CategorySidebar.tsx

@@ -22,7 +22,7 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
-import { setCurrentCategory } from '@/store/slices/settingsSlice';
+import { setCurrentCategory } from '@/store/slices/uiSlice';
 import {
   addCategory,
   deleteCategory,
@@ -135,7 +135,7 @@ const DraggableCategoryItem: React.FC<DraggableCategoryItemProps> = ({
  */
 const CategorySidebarBase: React.FC<CategorySidebarProps> = ({ className, style }) => {
   const dispatch = useAppDispatch();
-  const currentCategory = useAppSelector((state) => state.settings.currentCategory || '主页');
+  const currentCategory = useAppSelector((state) => state.ui.currentCategory || '主页');
   const categories = useAppSelector((state) => state.categories.items);
   const links = useAppSelector((state) => state.links.items);
   const [mounted, setMounted] = useState(false);

components/navigation/LinkGrid.tsx

@@ -21,7 +21,6 @@ import { reorderLinks } from '@/store/slices/linksSlice';
 import { LinkCard } from './LinkCard';
 import { Link } from '@/types/link';
 import { showSuccess } from '@/utils/feedback';
-import { getDefaultCategoryName } from '@/services/defaultData';
 
 interface LinkGridProps {
   onEdit?: (link: Link) => void;
@@ -36,15 +35,10 @@ interface LinkGridProps {
  * 支持根据分类和搜索状态过滤链接
  * 使用 React.memo 和 useMemo 优化性能
  */
-const LinkGridBase: React.FC<LinkGridProps> = ({ 
-  onEdit, 
-  onDelete,
-  className,
-  style 
-}) => {
+const LinkGridBase: React.FC<LinkGridProps> = ({ onEdit, onDelete, className, style }) => {
   const dispatch = useAppDispatch();
   const links = useAppSelector((state) => state.links.items);
-  const currentCategory = useAppSelector((state) => state.settings.currentCategory || getDefaultCategoryName());
+  const currentCategory = useAppSelector((state) => state.ui.currentCategory || '主页');
   const searchQuery = useAppSelector((state) => state.search.query);
   const searchResults = useAppSelector((state) => state.search.results);
 
@@ -97,20 +91,23 @@ const LinkGridBase: React.FC<LinkGridProps> = ({
   }, [links, currentCategory, searchQuery, searchResults]);
 
   // 处理拖拽结束
-  const handleDragEnd = useCallback((event: DragEndEvent) => {
-    const { active, over } = event;
-
-    if (over && active.id !== over.id) {
-      // 在所有链接中查找索引（不是 displayedLinks）
-      const oldIndex = links.findIndex((link) => link.id === active.id);
-      const newIndex = links.findIndex((link) => link.id === over.id);
-
-      if (oldIndex !== -1 && newIndex !== -1) {
-        dispatch(reorderLinks({ fromIndex: oldIndex, toIndex: newIndex }));
-        showSuccess('链接排序已更新');
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      if (over && active.id !== over.id) {
+        // 在所有链接中查找索引（不是 displayedLinks）
+        const oldIndex = links.findIndex((link) => link.id === active.id);
+        const newIndex = links.findIndex((link) => link.id === over.id);
+
+        if (oldIndex !== -1 && newIndex !== -1) {
+          dispatch(reorderLinks({ fromIndex: oldIndex, toIndex: newIndex }));
+          showSuccess('链接排序已更新');
+        }
       }
-    }
-  }, [links, dispatch]);
+    },
+    [links, dispatch]
+  );
 
   // 空状态判断
   const isEmpty = displayedLinks.length === 0;
@@ -121,24 +118,34 @@ const LinkGridBase: React.FC<LinkGridProps> = ({
   if (isEmpty) {
     if (isSearchEmpty) {
       return (
-        <div className={className} style={{ ...style, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '400px' }}>
-          <Empty
-            description={
-              <span>
-                没有找到与 &quot;{searchQuery}&quot; 相关的链接
-              </span>
-            }
-          />
+        <div
+          className={className}
+          style={{
+            ...style,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '400px',
+          }}
+        >
+          <Empty description={<span>没有找到与 &quot;{searchQuery}&quot; 相关的链接</span>} />
         </div>
       );
     }
 
     if (isCategoryEmpty) {
       return (
-        <div className={className} style={{ ...style, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '400px' }}>
-          <Empty
-            description={`${currentCategory}分类暂无链接`}
-          />
+        <div
+          className={className}
+          style={{
+            ...style,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '400px',
+          }}
+        >
+          <Empty description={`${currentCategory}分类暂无链接`} />
         </div>
       );
     }
@@ -159,11 +166,17 @@ const LinkGridBase: React.FC<LinkGridProps> = ({
         strategy={rectSortingStrategy}
         disabled={!isDraggingEnabled}
       >
-        <div 
-          className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 4xl:grid-cols-7 5xl:grid-cols-8 6xl:grid-cols-9 7xl:grid-cols-10 gap-x-8 gap-y-6 p-4 sm:p-8 md:px-10 max-w-full ${className || ''}`}
+        <div
+          className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 4xl:grid-cols-7 5xl:grid-cols-8 6xl:grid-cols-9 7xl:grid-cols-10 gap-x-8 gap-y-6 p-4 sm:p-8 md:px-10 max-w-full ${
+            className || ''
+          }`}
           style={{ ...style, width: '100%', boxSizing: 'border-box' }}
           role="region"
-          aria-label={searchQuery.trim() ? `搜索结果：${displayedLinks.length} 个链接` : `${currentCategory}分类：${displayedLinks.length} 个链接`}
+          aria-label={
+            searchQuery.trim()
+              ? `搜索结果：${displayedLinks.length} 个链接`
+              : `${currentCategory}分类：${displayedLinks.length} 个链接`
+          }
         >
           {displayedLinks.map((link) => (
             <LinkCard

store/index.ts

@@ -3,6 +3,7 @@ import linksReducer from './slices/linksSlice';
 import searchReducer from './slices/searchSlice';
 import settingsReducer from './slices/settingsSlice';
 import categoriesReducer from './slices/categoriesSlice';
+import uiReducer from './slices/uiSlice';
 import { storageService } from '@/services/storage';
 
 /**
@@ -12,10 +13,10 @@ import { storageService } from '@/services/storage';
  */
 const localStorageSyncMiddleware: Middleware = (store) => (next) => (action) => {
   const result = next(action);
-  
+
   // 获取 action 的类型
   const actionType = (action as { type?: string }).type || '';
-  
+
   // 如果是 links 相关的 action，同步 links 数据
   if (typeof actionType === 'string' && actionType.startsWith('links/')) {
     const state = store.getState();
@@ -28,7 +29,7 @@ const localStorageSyncMiddleware: Middleware = (store) => (next) => (action) =>
       console.error('Failed to sync links to LocalStorage:', error);
     }
   }
-  
+
   // 如果是 categories 相关的 action，同步 categories 数据
   if (typeof actionType === 'string' && actionType.startsWith('categories/')) {
     const state = store.getState();
@@ -38,7 +39,7 @@ const localStorageSyncMiddleware: Middleware = (store) => (next) => (action) =>
       console.error('Failed to sync categories to LocalStorage:', error);
     }
   }
-  
+
   // 如果是 settings 相关的 action，同步 settings 数据
   if (typeof actionType === 'string' && actionType.startsWith('settings/')) {
     const state = store.getState();
@@ -53,7 +54,7 @@ const localStorageSyncMiddleware: Middleware = (store) => (next) => (action) =>
       console.error('Failed to sync settings to LocalStorage:', error);
     }
   }
-  
+
   return result;
 };
 
@@ -66,6 +67,7 @@ export const store = configureStore({
     search: searchReducer,
     settings: settingsReducer,
     categories: categoriesReducer,
+    ui: uiReducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({

store/slices/settingsSlice.ts

@@ -1,6 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Settings, ThemeMode, LayoutMode, UpdateSettingsInput } from '@/types';
-import { getDefaultCategoryName } from '@/services/defaultData';
 
 /**
  * Settings 状态接口
@@ -19,7 +18,6 @@ const defaultSettings: Settings = {
   theme: 'system',
   searchEngine: 'google',
   layout: 'grid',
-  currentCategory: getDefaultCategoryName(),
   showDescription: true,
   gridColumns: 6,
 };
@@ -65,14 +63,6 @@ const settingsSlice = createSlice({
       state.error = null;
     },
 
-    /**
-     * 设置当前分类
-     */
-    setCurrentCategory: (state, action: PayloadAction<string>) => {
-      state.currentCategory = action.payload;
-      state.error = null;
-    },
-
     /**
      * 设置是否显示描述
      */
@@ -148,7 +138,6 @@ export const {
   setTheme,
   setSearchEngine,
   setLayout,
-  setCurrentCategory,
   setShowDescription,
   setGridColumns,
   updateSettings,

store/slices/uiSlice.ts

@@ -0,0 +1,47 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { getDefaultCategoryName } from '@/services/defaultData';
+
+/**
+ * UI 状态接口
+ * 用于管理非持久化的 UI 状态
+ */
+interface UiState {
+  /** 当前选中的分类 */
+  currentCategory: string;
+}
+
+/**
+ * 初始状态
+ */
+const initialState: UiState = {
+  currentCategory: getDefaultCategoryName(),
+};
+
+/**
+ * UI Slice
+ * 管理 UI 相关的临时状态
+ */
+const uiSlice = createSlice({
+  name: 'ui',
+  initialState,
+  reducers: {
+    /**
+     * 设置当前分类
+     */
+    setCurrentCategory: (state, action: PayloadAction<string>) => {
+      state.currentCategory = action.payload;
+    },
+  },
+});
+
+/**
+ * 导出 actions
+ */
+export const {
+  setCurrentCategory,
+} = uiSlice.actions;
+
+/**
+ * 导出 reducer
+ */
+export default uiSlice.reducer;

types/settings.ts

@@ -15,19 +15,16 @@ export type LayoutMode = 'grid' | 'list';
 export interface Settings {
   /** 主题模式 */
   theme: ThemeMode;
-  
+
   /** 当前搜索引擎 ID */
   searchEngine: string;
-  
+
   /** 布局模式 */
   layout: LayoutMode;
-  
-  /** 当前选中的分类 */
-  currentCategory?: string;
-  
+
   /** 是否显示描述 */
   showDescription?: boolean;
-  
+
   /** 每行显示的卡片数量（仅在 grid 模式下） */
   gridColumns?: number;
 }