From 83bbc588db5936b603df8c3b9f165c833b6e5ff0 Mon Sep 17 00:00:00 2001 From: AmintaCCCP Date: Tue, 12 Aug 2025 20:01:43 +0800 Subject: [PATCH] 0.1.4 --- src/store/useAppStore.ts | 16 +++++- test-sort-persistence.html | 107 +++++++++++++++++++++++++++++++++++++ 2 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 test-sort-persistence.html diff --git a/src/store/useAppStore.ts b/src/store/useAppStore.ts index f1da0c7..4103091 100644 --- a/src/store/useAppStore.ts +++ b/src/store/useAppStore.ts @@ -352,6 +352,12 @@ export const useAppStore = create()( // 持久化UI设置 theme: state.theme, language: state.language, + + // 持久化搜索排序设置 + searchFilters: { + sortBy: state.searchFilters.sortBy, + sortOrder: state.searchFilters.sortOrder, + }, }), onRehydrateStorage: () => (state) => { if (state) { @@ -374,8 +380,14 @@ export const useAppStore = create()( // 初始化搜索结果为所有仓库 state.searchResults = state.repositories || []; - // 重置搜索过滤器 - state.searchFilters = initialSearchFilters; + // 重置搜索过滤器，但保留排序设置 + const savedSortBy = state.searchFilters?.sortBy || 'stars'; + const savedSortOrder = state.searchFilters?.sortOrder || 'desc'; + state.searchFilters = { + ...initialSearchFilters, + sortBy: savedSortBy, + sortOrder: savedSortOrder, + }; // 确保语言设置存在 if (!state.language) { diff --git a/test-sort-persistence.html b/test-sort-persistence.html new file mode 100644 index 0000000..9d777fe --- /dev/null +++ b/test-sort-persistence.html @@ -0,0 +1,107 @@ + + + + + + 排序持久化测试 + + + +

🎯 仓库排序持久化功能测试

+ +
+

✅ 功能实现完成

+

已成功实现仓库页面排序设置的持久化功能！

+ +

🔧 实现的修改：

+
    +
  • 状态持久化：在 useAppStore.ts 的 partialize 函数中添加了排序设置的持久化
    • +
  • 状态恢复：在 onRehydrateStorage 中保留用户上次设置的排序方式，而不是每次都重置为默认值
    • +
  • 向下兼容：如果没有保存的排序设置，会使用默认的"按星标排序"
    • +
+ +

📋 具体修改内容：

+
    +
  1. 持久化配置： + 
    // 持久化搜索排序设置
+searchFilters: {
+  sortBy: state.searchFilters.sortBy,
+  sortOrder: state.searchFilters.sortOrder,
+},
    +
    2. +
  2. 状态恢复逻辑： + 
    // 重置搜索过滤器，但保留排序设置
+const savedSortBy = state.searchFilters?.sortBy || 'stars';
+const savedSortOrder = state.searchFilters?.sortOrder || 'desc';
+state.searchFilters = {
+  ...initialSearchFilters,
+  sortBy: savedSortBy,
+  sortOrder: savedSortOrder,
+};
    +
    3. +
+
+ +
+

🎮 如何测试功能

+
    +
  1. 启动应用：npm run dev
    2. +
  2. 进入仓库页面
    3. +
  3. 修改排序方式（例如：从"按星标排序"改为"按更新排序"）
    4. +
  4. 修改排序顺序（点击 ↓/↑ 按钮）
    5. +
  5. 刷新页面或重新打开应用
    6. +
  6. ✅ 应该看到排序设置被保留了！
    7. +
+
+ +
+

🚀 功能特点

+
    +
  • 智能持久化：只保存排序相关设置，其他搜索条件仍然会重置
    • +
  • 用户友好：记住用户的偏好设置，提升使用体验
    • +
  • 向下兼容：对于没有保存设置的用户，使用合理的默认值
    • +
  • 轻量级：只增加了最小必要的存储内容
    • +
+
+ +
+

📝 支持的排序选项

+
    +
  • 按星标排序 (stars) - 默认选项
    • +
  • 按更新排序 (updated) - 按最后更新时间
    • +
  • 按名称排序 (name) - 按仓库名称字母顺序
    • +
  • 按加星时间排序 (starred) - 按用户加星的时间
    • +
+

每种排序都支持升序 (↑) 和降序 (↓) 两种顺序。

+
+ +

🎉 功能已完成！现在用户的排序偏好会被记住，不再每次都重置为按星标排序了。

+ + \ No newline at end of file