feat(web): 地址栏驱动视图，刷新详情页不再回首页

- 新增 data/view.ts 与 useViewRoute：视图与地址双向同步，支持前进后退
- 条目地址带上所属分组，刷新 / 收藏后「返回」有确定落点
- 服务端只把 /c/** 回落到 index.html，其余路径仍返回 404
- 明细页返回按钮去掉左侧箭头图标

stash-web/src/useViewRoute.ts

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useState } from 'react'
+import { parseViewPath, viewPath, type View } from './data/view'
+
+/**
+ * 视图 ↔ 地址同步。
+ *
+ * 三个入口都要覆盖：首屏（解析地址）、点击（写地址）、浏览器前进后退（popstate）。
+ * 视图本身仍然放在 React state 里，地址只是它的镜像，避免每次渲染都去读 URL；
+ * 地址与视图的换算规则收在 `data/view.ts`，这里只管 history。
+ */
+
+/** 存在 history.state 里的键：当前这条记录是应用内第几页（0 = 没有上一页） */
+const HISTORY_INDEX_KEY = 'stashIndex'
+
+type StashHistoryState = { [HISTORY_INDEX_KEY]?: number }
+
+/** 读取当前历史深度；不是本应用写的记录一律当作 0 */
+function historyIndex(): number {
+  const state = window.history.state as StashHistoryState | null
+  const index = state === null ? undefined : state[HISTORY_INDEX_KEY]
+  return typeof index === 'number' ? index : 0
+}
+
+/** 当前 history.state 的副本，写入前先保留别人（如浏览器扩展）放的字段 */
+function currentHistoryState(): StashHistoryState {
+  const state = window.history.state as StashHistoryState | null
+  return state === null ? {} : { ...state }
+}
+
+export type ViewRoute = {
+  /** 当前视图，初值来自地址栏 */
+  view: View
+  /** 打开一个视图：默认压一条新历史，`replace` 表示替换当前这条 */
+  go: (view: View, options?: { replace?: boolean }) => void
+  /**
+   * 返回。
+   *
+   * 应用内有上一页时交给浏览器（`history.back()`），
+   * 直接打开条目地址（收藏 / 刷新后没有上一页）时退到 `fallback`，
+   * 这时它替换当前记录，避免在历史里留下一条「自己指向自己」的条目。
+   */
+  back: (fallback: View) => void
+}
+
+export function useViewRoute(): ViewRoute {
+  const [view, setView] = useState<View>(() => parseViewPath(window.location.pathname))
+
+  // 首屏把地址规范化：去掉多余的斜杠 / 尾部斜杠，未知地址归到首页，
+  // 并补上历史深度（直接打开时是 0，说明应用内没有上一页）
+  useEffect(() => {
+    const canonical = viewPath(parseViewPath(window.location.pathname))
+    const state = currentHistoryState()
+    const recorded = state[HISTORY_INDEX_KEY] !== undefined
+
+    if (canonical === window.location.pathname && recorded) return
+
+    window.history.replaceState({ ...state, [HISTORY_INDEX_KEY]: historyIndex() }, '', canonical)
+  }, [])
+
+  // 前进后退：地址变了，视图跟着变
+  useEffect(() => {
+    const handlePopState = () => setView(parseViewPath(window.location.pathname))
+    window.addEventListener('popstate', handlePopState)
+    return () => window.removeEventListener('popstate', handlePopState)
+  }, [])
+
+  const go = useCallback((next: View, options?: { replace?: boolean }) => {
+    const path = viewPath(next)
+    const index = historyIndex()
+
+    // 已经在同一页（例如重复点同一个侧栏项）：不写历史，也不改深度
+    if (path === window.location.pathname) {
+      setView(next)
+      return
+    }
+
+    const replace = options?.replace === true
+    const state: StashHistoryState = {
+      ...currentHistoryState(),
+      [HISTORY_INDEX_KEY]: replace ? index : index + 1,
+    }
+
+    if (replace) {
+      window.history.replaceState(state, '', path)
+    } else {
+      window.history.pushState(state, '', path)
+    }
+
+    setView(next)
+  }, [])
+
+  const back = useCallback(
+    (fallback: View) => {
+      if (historyIndex() > 0) {
+        window.history.back()
+        return
+      }
+
+      go(fallback, { replace: true })
+    },
+    [go],
+  )
+
+  return { view, go, back }
+}