fix

Author: hjy

frontend/src/components/Files/FileViewContainer.tsx

@@ -43,7 +43,7 @@ import { FileGridView } from "./FileGridView"
 import { FileIcon } from "./FileIcon"
 import { FileTableView, type SortField, type SortOrder } from "./FileTableView"
 
-type ViewMode = "grid" | "table" | "mixed"
+export type ViewMode = "grid" | "table" | "mixed"
 
 type PaginationState = {
   page: number
@@ -69,7 +69,6 @@ export function FileViewContainer({
   onSortFieldChange,
   onSortOrderChange,
   pagination,
-  storageKeyPrefix = "file-list",
   toolbarExtra,
   emptyText = "This folder is empty",
 }: {
@@ -84,45 +83,20 @@ export function FileViewContainer({
   onSortFieldChange?: (field: SortField) => void
   onSortOrderChange?: (order: SortOrder) => void
   pagination?: PaginationConfig
-  storageKeyPrefix?: string
   toolbarExtra?: ReactNode
   emptyText?: string
 }) {
   const containerRef = useRef<HTMLDivElement>(null)
   const { t } = useTranslation()
 
-  // View mode & sort state
-  const [viewMode, setViewMode] = useState<ViewMode>(() => {
-    const saved = localStorage.getItem(`${storageKeyPrefix}-view-mode`)
-    if (saved === "details") return "table"
-    return (saved as ViewMode) || initialViewMode
-  })
-  const [internalSortField, setInternalSortField] = useState<SortField>(() => {
-    const saved = localStorage.getItem(`${storageKeyPrefix}-sort-field`)
-    return (saved as SortField) || initialSortField
-  })
-  const [internalSortOrder, setInternalSortOrder] = useState<SortOrder>(() => {
-    const saved = localStorage.getItem(`${storageKeyPrefix}-sort-order`)
-    return (saved as SortOrder) || initialSortOrder
-  })
+  // View mode & sort state — URL params / props are the sole source of truth
+  const [viewMode, setViewMode] = useState<ViewMode>(initialViewMode)
+  const [internalSortField, setInternalSortField] = useState<SortField>(initialSortField)
+  const [internalSortOrder, setInternalSortOrder] = useState<SortOrder>(initialSortOrder)
 
   const sortField = controlledSortField ?? internalSortField
   const sortOrder = controlledSortOrder ?? internalSortOrder
 
-  useEffect(() => {
-    localStorage.setItem(`${storageKeyPrefix}-view-mode`, viewMode)
-  }, [storageKeyPrefix, viewMode])
-  useEffect(() => {
-    if (controlledSortField === undefined) {
-      localStorage.setItem(`${storageKeyPrefix}-sort-field`, internalSortField)
-    }
-  }, [storageKeyPrefix, internalSortField, controlledSortField])
-  useEffect(() => {
-    if (controlledSortOrder === undefined) {
-      localStorage.setItem(`${storageKeyPrefix}-sort-order`, internalSortOrder)
-    }
-  }, [storageKeyPrefix, internalSortOrder, controlledSortOrder])
-
   const setSortField = useCallback(
     (field: SortField) => {
       if (onSortFieldChange) {

frontend/src/routes/_layout/explorer.tsx

@@ -30,6 +30,7 @@ import {
   getParentPath,
 } from "@/lib/path-utils"
 import type { SortField, SortOrder } from "@/components/Files/FileTableView"
+import type { ViewMode } from "@/components/Files/FileViewContainer"
 import "./explorer.css"
 
 export const Route = createFileRoute("/_layout/explorer")({
@@ -51,8 +52,10 @@ export const Route = createFileRoute("/_layout/explorer")({
       "last_read_at",
     ]
     const sortOrderCandidates: SortOrder[] = ["asc", "desc"]
+    const viewModeCandidates: ViewMode[] = ["grid", "table", "mixed"]
     const rawSortField = String(search.sortField || "")
     const rawSortOrder = String(search.sortOrder || "")
+    const rawViewMode = String(search.viewMode || "")
 
     return {
       path: (search.path as string) || "",
@@ -64,6 +67,9 @@ export const Route = createFileRoute("/_layout/explorer")({
       sortOrder: sortOrderCandidates.includes(rawSortOrder as SortOrder)
         ? (rawSortOrder as SortOrder)
         : "desc",
+      viewMode: viewModeCandidates.includes(rawViewMode as ViewMode)
+        ? (rawViewMode as ViewMode)
+        : undefined,
     }
   },
   head: () => ({
@@ -98,7 +104,7 @@ function FilterCheckbox({ id, label, checked, onChange }: FilterCheckboxProps) {
 function Explorer() {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { path, page, pageSize, sortField, sortOrder } = Route.useSearch()
+  const { path, page, pageSize, sortField, sortOrder, viewMode } = Route.useSearch()
   const folderName = path
     ? getBaseName(path, t("nav.explorer"))
     : t("nav.explorer")
@@ -247,7 +253,7 @@ function Explorer() {
         items={filteredItems}
         isLoading={isLoading}
         currentPath={path}
-        initialViewMode="mixed"
+        initialViewMode={viewMode ?? "mixed"}
         sortField={sortField}
         sortOrder={sortOrder}
         onSortFieldChange={(nextSortField) =>
@@ -274,7 +280,6 @@ function Explorer() {
               replace: true,
             }),
         }}
-        storageKeyPrefix="explorer"
         toolbarExtra={
           <>
             {/* 压缩包内容过滤：只显示含视频/音频的 zip */}

frontend/src/routes/_layout/read.tsx

@@ -1,6 +1,5 @@
 /**
- * 图片阅读器 - 支持压缩包和文件夹图片浏览，带缩放、旋转、拖拽功能
- */
+ * 图片阅读�- 支持压缩包和文件夹图片浏览，带缩放、旋转、拖拽功� */
 import { useMutation } from "@/shims/react-query"
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router"
 import {
@@ -64,10 +63,7 @@ export const Route = createFileRoute("/_layout/read")({
     path: (search.path as string) || "",
     page: Number(search.page) || 0,
     source: (search.source as "archive" | "folder") || "archive",
-    // sourceFolderPath: 仅 source=folder 时有效。
-    // 用于从外部（如 explorer 点击某张图片）跳转到阅读器时定位到特定图片。
-    // 解析后会被 replace 成对应的 page 数字，之后 sourceFolderPath 置空。
-    sourceFolderPath: (search.sourceFolderPath as string) || "",
+    // sourceFolderPath: �source=folder 时有效�    // 用于从外部（�explorer 点击某张图片）跳转到阅读器时定位到特定图片�    // 解析后会�replace 成对应的 page 数字，之�sourceFolderPath 置空�    sourceFolderPath: (search.sourceFolderPath as string) || "",
     mode: (search.mode as "audio") || undefined,
   }),
   head: () => ({
@@ -168,7 +164,7 @@ function ReadPage() {
           if (cancelled) return
           setFolderData(currentFolderData)
         } else {
-          // archive: 打开时先解压一次，再拉 archive 列表与 parent 列表
+          // archive: 打开时先解压一次，再拉 archive 列表�parent 列表
           setArchiveImageReady(false)
           const [extractResult, archiveData, parentData] = await Promise.all([
             FilesystemService.extractArchive({ path, page: 0 }),
@@ -235,8 +231,7 @@ function ReadPage() {
       }))
   }, [isFolderSource, folderData, listData])
 
-  // Audio tracks（仅 archive source）
-  const audioTracks = useMemo(() => {
+  // Audio tracks（仅 archive source�  const audioTracks = useMemo(() => {
     if (isFolderSource) return []
     return (listData?.entries || [])
       .filter((e) => e.file_type === "audio")
@@ -427,7 +422,7 @@ function ReadPage() {
         const targetPath = isFolderSource ? path : (extractStatus?.cache_dir || path)
         navigate({
           to: "/explorer",
-          search: { path: targetPath, page: 1, pageSize: 48, sortField: "mtime", sortOrder: "desc" },
+          search: { path: targetPath, page: 1, pageSize: 48, sortField: "name", sortOrder: "asc", viewMode: "table" },
         })
       } else if (key === "v") {
         e.preventDefault()
@@ -499,7 +494,7 @@ function ReadPage() {
   const sizeText = currentPathMeta?.filesize
     ? formatFileSize(currentPathMeta.filesize)
     : "-"
-  // 优先用 extractMutation 实时返回的值，fallback 到父目录列表的 DB 缓存
+  // 优先�extractMutation 实时返回的值，fallback 到父目录列表�DB 缓存
   const avgImageSize = extractStatus?.avg_image_size ?? currentPathMeta?.avg_image_size ?? null
   const avgImageSizeText = avgImageSize != null ? formatFileSize(avgImageSize) : "-"
   const archiveVideoCount = currentPathMeta?.video_count ?? 0
@@ -508,8 +503,7 @@ function ReadPage() {
   const cosers = parseMeta?.cosers ?? []
   const tags = parseMeta?.raw_tags ?? []
 
-  // 文件被移动后自动跳转新路径
-  const hasError = loadError
+  // 文件被移动后自动跳转新路�  const hasError = loadError
   const { resolving, isNotFound, errorMessage } = useResolveMovedFile(
     path,
     hasError ? loadError : null,
@@ -571,7 +565,7 @@ function ReadPage() {
               showFolderIcon={false}
               collapseDirCrumbsAfter={2}
               currentTo="/explorer"
-              currentSearch={{ path: extractStatus?.cache_dir || path, page: 1, pageSize: 48, sortField: "mtime", sortOrder: "desc" }}
+              currentSearch={{ path: extractStatus?.cache_dir || path, page: 1, pageSize: 48, sortField: "name", sortOrder: "asc", viewMode: "table" }}
               currentLabel={fileName}
               currentClassName="reader-toolbar__current-link"
             />
@@ -645,17 +639,16 @@ function ReadPage() {
   }
 
   if (!currentEntry) {
-    // 无图片提示
-    return (
+    // 无图片提�    return (
       <div className="reader-empty-page">
         <PathBreadcrumb
           sourcePath={path}
           homeLabel={t("common.home")}
           separatorClassName="size-4 text-muted-foreground"
             currentTo="/explorer"
             currentSearch={isFolderSource
-              ? { path, page: 1, pageSize: 48, sortField: "mtime", sortOrder: "desc" }
-              : { path: extractStatus?.cache_dir || path, page: 1, pageSize: 48, sortField: "mtime", sortOrder: "desc" }}
+              ? { path, page: 1, pageSize: 48, sortField: "name", sortOrder: "asc", viewMode: "table" }
+              : { path: extractStatus?.cache_dir || path, page: 1, pageSize: 48, sortField: "name", sortOrder: "asc", viewMode: "table" }}
           currentLabel={fileName}
         />
 
@@ -666,7 +659,7 @@ function ReadPage() {
               <>
                 <Link
                   to="/explorer"
-                  search={{ path: extractStatus?.cache_dir || path, page: 1, pageSize: 48, sortField: "mtime", sortOrder: "desc" }}
+                  search={{ path: extractStatus?.cache_dir || path, page: 1, pageSize: 48, sortField: "name", sortOrder: "asc", viewMode: "table" }}
                   className={buttonVariants({
                     variant: "default",
                     size: "sm",
@@ -727,15 +720,14 @@ function ReadPage() {
     : `${OpenAPI.BASE}/api/v1/fs/archive/file?path=${encodeURIComponent(path)}&entry=${encodeURIComponent(currentEntry.entryPath || "")}`
 
   // 图片加载失败时的重试处理
-  // 压缩包文件可能还在后台解压中，404 时自动重试（最多 5 次，递增延迟）
-  const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {
+  // 压缩包文件可能还在后台解压中�04 时自动重试（最�5 次，递增延迟�  const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {
     const img = e.currentTarget
     setImageLoaded(false)
     const retryCount = Number(img.dataset.retry || 0)
     const maxRetries = 5
     if (retryCount < maxRetries) {
       img.dataset.retry = String(retryCount + 1)
-      // 递增延迟：1s, 2s, 3s, 4s, 5s
+      // 递增延迟�s, 2s, 3s, 4s, 5s
       setTimeout(
         () => {
           img.src = `${imageUrl}${imageUrl.includes("?") ? "&" : "?"}_t=${Date.now()}`
@@ -745,8 +737,7 @@ function ReadPage() {
     }
   }
 
-  // 图片加载成功时重置重试计数
-  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+  // 图片加载成功时重置重试计�  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
     e.currentTarget.dataset.retry = "0"
     setImageLoaded(true)
   }
@@ -772,7 +763,7 @@ function ReadPage() {
 
   return (
     <div className="reader-page">
-      {/* ── 顶部工具栏：面包屑导航 + 旋转/全屏/模式切换/文件操作菜单 ── */}
+      {/* ── 顶部工具栏：面包屑导�+ 旋转/全屏/模式切换/文件操作菜单 ── */}
       <nav className="reader-toolbar">
         <div className="reader-toolbar__left">
           <PathBreadcrumb
@@ -788,14 +779,14 @@ function ReadPage() {
             collapseDirCrumbsAfter={2}
             currentTo="/explorer"
             currentSearch={isFolderSource
-              ? { path, page: 1, pageSize: 48, sortField: "mtime", sortOrder: "desc" }
-              : { path: extractStatus?.cache_dir || path, page: 1, pageSize: 48, sortField: "mtime", sortOrder: "desc" }}
+              ? { path, page: 1, pageSize: 48, sortField: "name", sortOrder: "asc", viewMode: "table" }
+              : { path: extractStatus?.cache_dir || path, page: 1, pageSize: 48, sortField: "name", sortOrder: "asc", viewMode: "table" }}
             currentLabel={fileName}
             currentClassName="reader-toolbar__current-link"
           />
         </div>
 
-        {/* 右侧：工具 */}
+        {/* 右侧：工�*/}
         <div className="reader-toolbar__right">
           <div className="reader-toolbar__actions">
             {/* <Button
@@ -805,7 +796,7 @@ function ReadPage() {
             onClick={zoomOut}
             title={t("reader.zoomOut")}
           >
-            <span className="reader-toolbar__button-symbol">−</span>
+            <span className="reader-toolbar__button-symbol">�/span>
           </Button>
           <Button
             variant="ghost"
@@ -859,7 +850,7 @@ function ReadPage() {
               <>
                 <Link
                   to="/explorer"
-                  search={{ path: extractStatus?.cache_dir || path, page: 1, pageSize: 48, sortField: "mtime", sortOrder: "desc" }}
+                  search={{ path: extractStatus?.cache_dir || path, page: 1, pageSize: 48, sortField: "name", sortOrder: "asc", viewMode: "table" }}
                   className={buttonVariants({
                     variant: "ghost",
                     size: "sm",
@@ -960,7 +951,7 @@ function ReadPage() {
         </div>
       </nav>
 
-      {/* ── 图片主舞台：支持鼠标拖拽平移、滚轮缩放、左右翻页按钮、解压进度指示 ── */}
+      {/* ── 图片主舞台：支持鼠标拖拽平移、滚轮缩放、左右翻页按钮、解压进度指�── */}
       <div
         className="reader-image-stage"
         onMouseMove={onMouseMove}
@@ -1020,11 +1011,11 @@ function ReadPage() {
         )}
       </div>
 
-      {/* ── 底部 meta 栏：文件信息（时间/大小/均图大小/视频音频数）+ 作者/coser/tag 可点击跳搜索 + 页码 ── */}
+      {/* ── 底部 meta 栏：文件信息（时�大小/均图大小/视频音频数）+ 作�coser/tag 可点击跳搜索 + 页码 ── */}
       <div className="reader-meta-bar">
         <div className="reader-meta-bar__left">
           <div className="reader-meta-bar__row">
-            {/* 文件元数据：hover title 显示 label，只展示值 */}
+            {/* 文件元数据：hover title 显示 label，只展示�*/}
             <span title={t("reader.mtime")} className="text-foreground cursor-default">{mtimeText}</span>
             <span title={t("reader.size")} className="text-foreground cursor-default">{sizeText}</span>
             <span title={t("reader.avgImageSize")} className="text-foreground cursor-default">{avgImageSizeText}</span>

frontend/src/routes/_layout/search.tsx

@@ -321,7 +321,6 @@ function SearchPage() {
               pageSizeOptions: PAGE_SIZE_OPTIONS,
               pageSizeLabel: "Page size",
             }}
-            storageKeyPrefix="search"
             emptyText={t("search.noResults")}
           />
         </div>

todo.md

@@ -106,4 +106,9 @@ audio
 
 --------------
 1 启动服务需要删除解压的缓存 
-    需要log actitive和一个简单的log在console。
+    需要log actitive和一个简单的log在console。
+
+3 后端加压的文件夹是hash过的我没问题。就是现在文件夹名太长了，你缩短一点 10的length也不会冲突的。
+
+2
+从reader打开exlorer要是默认table view。用文件名排序。如果explorer支持这mode的url参数，你要追加。