diff --git a/ALRIGHT-DESIGN.md b/ALRIGHT-DESIGN.md
index 364deb1..8e25683 100644
--- a/ALRIGHT-DESIGN.md
+++ b/ALRIGHT-DESIGN.md
@@ -100,48 +100,16 @@ CSS 变量 `--font-sans` / `--font-mono` 定义在 `index.css`。
 
 ## 3. 图标
 
-### 3.1 图标字体
+图标统一来自组件库 `@stash/ui`：
 
-主题使用自建 iconfont（线性风格，Project id 4809463）。
-Stash 自托管了一份 **只含所需字形** 的子集：
+```tsx
+import { Icon } from '@stash/ui'
 
-- 字体文件：[`stash-web/src/assets/iconfont.woff2`](stash-web/src/assets/iconfont.woff2)
-- 样式：[`stash-web/src/iconfont.css`](stash-web/src/iconfont.css)
-- 组件封装：[`stash-web/src/components/common/Icon.tsx`](stash-web/src/components/common/Icon.tsx)
-
-| 用途 | 主题字形 | 码点 | Stash 类名 |
-| --- | --- | --- | --- |
-| 搜索 | `search_3_line` | `\e942` | `.icon-search` |
-| 用户 / 登录 | `user_3_line` | `\e966` | `.icon-user` |
-| 重新扫描 | `refresh_3_line` | `\e93d` | `.icon-refresh` |
-| 查看接口 | `link_line` | `\ea37` | `.icon-link` |
-| 跳转 | `arrow_right_up_line` | `\e8be` | `.icon-external` |
-| 浏览量 | `eye_line` | `\e8fd` | `.icon-eye` |
-| 点赞 | `thumb_up_2_line` | `\e957` | `.icon-thumb-up` |
-| 分享 | `share_3_line` | `\e946` | `.icon-share` |
-| 清空搜索 | `close_line` | `\e8e4` | `.icon-close` |
-| 分区更多 | `more_3_line` | `\e91f` | `.icon-more` |
-| 回到顶部 | `arrow_to_up_line` | `\e8c1` | `.icon-arrow-up` |
-| 返回 | `arrow_left_line` | `\e8b5` | `.icon-arrow-left` |
-| 导航展开 | `arrow_down_line` | `\e8b7` | `.icon-arrow-down`（未使用，见下） |
-
-用法：`<i className="iconfont icon-search" />`，尺寸用 `font-size`、颜色用 `color` 控制。
-
-### 3.2 CSS 绘制的箭头
-
-主题的**导航折叠箭头不是图标字体**，而是一个 6×6 的描边方块旋转而成：
-
-```css
-.nav-link.has-children::after {
-  content: '';
-  width: 6px; height: 6px;
-  border-left: 1px solid currentColor;
-  border-bottom: 1px solid currentColor;
-  transform: rotate(315deg);   /* 展开时 135deg */
-  opacity: 0.4;
-}
+<Icon name="search_3_line" />
 ```
 
+可用名称见 `@stash/ui` 导出的 `ICON_NAMES`，尺寸与颜色分别由 `size` / CSS `color` 控制。`stash-web` 不再维护本地 iconfont 或 `Icon.tsx`。
+
 ---
 
 ## 4. 布局
@@ -311,10 +279,10 @@ background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 60%, tran
 | 需求 | 改动位置 |
 | --- | --- |
 | 改主色 / 灰阶 / 圆角 | [`stash-web/src/index.css`](stash-web/src/index.css) 的 `:root` |
-| 新增图标 | 把 codepoint 加进 [`stash-web/src/iconfont.css`](stash-web/src/iconfont.css)，在 `Icon.tsx` 包一个组件 |
-| 新增分类 | 内容库 `category` 表（首次启动前可改 [`src/db/seed.json`](src/db/seed.json)），首页与明细页自动适配 |
-| 调整侧栏导航 | 内容库 `nav_entry` 表，标签 / 层级 / 跳转目标都可在库里改 |
-| 新增卡片类型 | 在 `data/types.ts` 增加 kind，`HomeView` / `DetailView` 各加一个分支 |
+| 新增图标 | 在 `@stash/ui` 的 iconfont 中补图标，再通过 `<Icon name>` 使用 |
+| 新增分组 | 后台「分组管理」新建根分组 / 子分组，内容挂在分组上 |
+| 调整侧栏导航 | 后台「侧边栏」勾选要显示的卡片与分组 |
+| 新增卡片类型 | 在 `AppNext.tsx` 的 `renderEntries` / `renderCard` 增加分支 |
 | 调整分区样式 | [`stash-web/src/App.css`](stash-web/src/App.css) 的「分区卡片」段落 |
 | 换背景图 | 替换 `stash-web/src/assets/site-bg.jpg` |
 
diff --git a/README.md b/README.md
index 7a0978d..810ee23 100644
--- a/README.md
+++ b/README.md
@@ -109,7 +109,7 @@ cargo run -- --root ./sites --host 0.0.0.0 --port 3000
   （`src/server.rs` 的 `SPA_PREFIXES` / `SPA_PAGES`），托管目录里写错的地址仍然是 404 页面——
   不做「所有未命中都返回 200」的万能回落，否则分不清是路由拼错还是文件真的不存在；
 - 地址转换规则在 [`stash-web/src/data/view.ts`](stash-web/src/data/view.ts)，
-  与 history 打交道的部分在 [`stash-web/src/useViewRoute.ts`](stash-web/src/useViewRoute.ts)。
+  实际解析与跳转在 [`stash-web/src/AppNext.tsx`](stash-web/src/AppNext.tsx) 的 `useRoute` / `navigate`。
   新增一类页面时两处都要改：前端加前缀，服务端把它加进 `SPA_PREFIXES` 或 `SPA_PAGES`；
 - 站内跳转统一走 `navigate()`（`AppNext.tsx`），不整页刷新；按住 Ctrl/Cmd 点卡片或链接仍可新标签打开。
 
@@ -153,12 +153,6 @@ cargo run -- --root ./sites --host 0.0.0.0 --port 3000
 ../stash-ui/                # 同级目录：@stash/ui 组件库（令牌 / 组件 / 展示站）
 ```
 
-`templates/` 与 `assets/` 是上一版 Askama 控制台留下的文件，当前已无任何代码引用，
-可以直接删除。
-
-`templates/` 与 `assets/` 是上一版 Askama 控制台留下的文件，当前已无任何代码引用，
-可以直接删除。
-
 ## 前端怎么被内嵌
 
 1. `npm run build` 产出 `stash-web/dist`；
diff --git a/assets/dashboard.css b/assets/dashboard.css
deleted file mode 100644
index f7c67c8..0000000
--- a/assets/dashboard.css
+++ /dev/null
@@ -1,1018 +0,0 @@
-:root {
-    --bg: #f7f8fa;
-    --surface: #ffffff;
-    --surface-soft: #fbfbfd;
-    --ink: #1d2129;
-    --text: #2c343c;
-    --text-secondary: #4e5969;
-    --muted: #86909c;
-    --faint: #c9cdd4;
-    --border: #eef0f3;
-    --border-strong: #e6e8ec;
-    --primary: #3858f6;
-    --primary-dark: #2947db;
-    --primary-soft: #eef1ff;
-    --primary-wash: rgba(56, 88, 246, 0.09);
-    --warm: #ffba3a;
-    --warm-soft: #fff7df;
-    --success: #4abd86;
-    --danger: #ff3e3e;
-    --shadow-card: 0 12px 38px rgba(27, 26, 49, 0.045);
-    --shadow-hover: 0 20px 52px rgba(27, 26, 49, 0.09);
-    --radius-sm: 10px;
-    --radius-md: 16px;
-    --radius-lg: 24px;
-    --ease: cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-html {
-    min-width: 320px;
-    background: var(--bg);
-}
-
-body {
-    position: relative;
-    min-height: 100vh;
-    overflow-x: hidden;
-    background:
-        radial-gradient(circle at -5% 0%, rgba(255, 186, 58, 0.12), transparent 28rem),
-        radial-gradient(circle at 104% 7%, rgba(56, 88, 246, 0.1), transparent 34rem),
-        var(--bg);
-    color: var(--text);
-    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-}
-
-a {
-    color: inherit;
-}
-
-button,
-input {
-    font: inherit;
-}
-
-.ambient {
-    position: fixed;
-    z-index: -1;
-    border-radius: 999px;
-    pointer-events: none;
-    filter: blur(1px);
-}
-
-.ambient-blue {
-    top: -120px;
-    right: 8%;
-    width: 360px;
-    height: 360px;
-    border: 1px solid rgba(56, 88, 246, 0.07);
-    background: rgba(56, 88, 246, 0.035);
-}
-
-.ambient-warm {
-    bottom: -170px;
-    left: -130px;
-    width: 320px;
-    height: 320px;
-    background: rgba(255, 186, 58, 0.045);
-}
-
-.workspace {
-    display: grid;
-    grid-template-columns: 286px minmax(0, 1fr);
-    gap: 28px;
-    width: min(1320px, calc(100% - 64px));
-    min-width: 0;
-    margin: 0 auto;
-    padding: 32px 0;
-}
-
-.sidebar {
-    position: sticky;
-    top: 32px;
-    display: flex;
-    flex-direction: column;
-    align-self: start;
-    min-width: 0;
-    min-height: calc(100vh - 64px);
-    padding: 26px;
-    border: 1px solid rgba(255, 255, 255, 0.9);
-    border-radius: var(--radius-lg);
-    background: rgba(255, 255, 255, 0.96);
-    box-shadow: var(--shadow-card);
-    backdrop-filter: blur(16px);
-}
-
-.sidebar-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-}
-
-.brand {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    color: var(--ink);
-    text-decoration: none;
-}
-
-.brand-mark {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 38px;
-    height: 38px;
-    border-radius: 12px;
-    background: var(--ink);
-    color: #ffffff;
-    box-shadow: 0 8px 20px rgba(29, 33, 41, 0.16);
-}
-
-.brand-name {
-    font-size: 23px;
-    font-weight: 750;
-    letter-spacing: -1.1px;
-}
-
-.brand-name span {
-    color: var(--primary);
-}
-
-.local-badge {
-    padding: 6px 9px;
-    border-radius: 999px;
-    background: var(--primary-soft);
-    color: var(--primary);
-    font-size: 9px;
-    font-weight: 800;
-    letter-spacing: 1.4px;
-}
-
-.sidebar-intro {
-    margin-top: 58px;
-}
-
-.eyebrow {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--muted);
-    font-size: 10px;
-    font-weight: 750;
-    letter-spacing: 1.8px;
-    line-height: 1.4;
-    text-transform: uppercase;
-}
-
-.eyebrow-dot {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--warm);
-    box-shadow: 0 0 0 4px var(--warm-soft);
-}
-
-.sidebar-intro h1 {
-    margin-top: 16px;
-    color: var(--ink);
-    font-size: clamp(34px, 3vw, 42px);
-    font-weight: 760;
-    letter-spacing: -2px;
-    line-height: 1.16;
-}
-
-.sidebar-lead {
-    margin-top: 18px;
-    color: var(--muted);
-    font-size: 13px;
-    line-height: 1.85;
-}
-
-.overview-card {
-    min-width: 0;
-    margin-top: 34px;
-    padding: 19px 20px 18px;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    background:
-        radial-gradient(circle at 100% 0%, rgba(56, 88, 246, 0.09), transparent 9rem),
-        var(--surface-soft);
-}
-
-.overview-label {
-    color: var(--muted);
-    font-size: 11px;
-    font-weight: 600;
-}
-
-.project-total {
-    display: flex;
-    align-items: baseline;
-    gap: 8px;
-    margin-top: 8px;
-}
-
-.project-total strong {
-    color: var(--primary);
-    font-size: 52px;
-    font-weight: 760;
-    letter-spacing: -3px;
-    line-height: 1;
-}
-
-.project-total span {
-    color: var(--text-secondary);
-    font-size: 12px;
-    font-weight: 600;
-}
-
-.service-status {
-    display: flex;
-    align-items: center;
-    gap: 9px;
-    margin-top: 16px;
-    padding-top: 14px;
-    border-top: 1px solid var(--border);
-    color: var(--text-secondary);
-    font-size: 11px;
-}
-
-.status-dot {
-    display: inline-block;
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    background: var(--success);
-    box-shadow: 0 0 0 5px rgba(74, 189, 134, 0.12);
-}
-
-.sidebar-actions {
-    margin-top: 18px;
-}
-
-.refresh-button {
-    align-items: center;
-    justify-content: center;
-    gap: 9px;
-    width: 100%;
-    padding: 12px 16px;
-    border: 0;
-    border-radius: 12px;
-    background: var(--primary);
-    box-shadow: 0 9px 20px rgba(56, 88, 246, 0.2);
-    color: #ffffff;
-    font-size: 12px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
-}
-
-.refresh-button:hover {
-    background: var(--primary-dark);
-    box-shadow: 0 12px 24px rgba(56, 88, 246, 0.26);
-    transform: translateY(-1px);
-}
-
-.refresh-button:focus-visible {
-    outline: 3px solid rgba(56, 88, 246, 0.24);
-    outline-offset: 3px;
-}
-
-.refresh-button:disabled {
-    cursor: wait;
-    opacity: 0.7;
-    transform: none;
-}
-
-.refresh-button.is-loading svg {
-    animation: spin 0.8s linear infinite;
-}
-
-.js-only {
-    display: none;
-}
-
-.is-enhanced .js-only {
-    display: flex;
-}
-
-.sidebar-hint {
-    margin-top: 12px;
-    color: var(--muted);
-    font-size: 10px;
-    line-height: 1.65;
-    text-align: center;
-}
-
-.sidebar-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin-top: auto;
-    padding-top: 22px;
-    border-top: 1px solid var(--border);
-    color: var(--faint);
-    font-size: 8px;
-    font-weight: 750;
-    letter-spacing: 1.3px;
-}
-
-.footer-ready {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    color: var(--text-secondary);
-}
-
-.footer-ready i {
-    display: inline-block;
-    width: 5px;
-    height: 5px;
-    border-radius: 50%;
-    background: var(--success);
-}
-
-.content {
-    min-width: 0;
-    padding: 13px 2px 28px;
-}
-
-.content-header {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: 28px;
-    margin: 0 4px 28px;
-}
-
-.content-heading h2 {
-    margin-top: 9px;
-    color: var(--ink);
-    font-size: clamp(29px, 3vw, 36px);
-    font-weight: 760;
-    letter-spacing: -1.6px;
-    line-height: 1.15;
-}
-
-.content-heading > p:last-child {
-    margin-top: 9px;
-    color: var(--muted);
-    font-size: 12px;
-    line-height: 1.7;
-}
-
-.content-meta {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: 8px;
-    padding-bottom: 3px;
-}
-
-.live-pill,
-.count-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    min-height: 32px;
-    padding: 7px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.9);
-    border-radius: 999px;
-    background: rgba(255, 255, 255, 0.84);
-    box-shadow: 0 4px 16px rgba(27, 26, 49, 0.035);
-    color: var(--text-secondary);
-    font-size: 10px;
-    font-weight: 650;
-    backdrop-filter: blur(10px);
-}
-
-.live-pill i {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--success);
-    box-shadow: 0 0 0 4px rgba(74, 189, 134, 0.11);
-}
-
-.live-pill.is-live i {
-    animation: live-pulse 2.2s ease-out infinite;
-}
-
-.live-pill.is-reconnecting i {
-    background: var(--warm);
-    box-shadow: 0 0 0 4px rgba(255, 186, 58, 0.13);
-    animation: none;
-}
-
-.count-pill strong {
-    color: var(--primary);
-    font-size: 13px;
-    font-weight: 800;
-}
-
-.site-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
-    gap: 18px;
-}
-
-.site-item {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    min-height: 212px;
-    overflow: hidden;
-    padding: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.94);
-    border-radius: 18px;
-    background: rgba(255, 255, 255, 0.96);
-    box-shadow: var(--shadow-card);
-    text-decoration: none;
-    opacity: 0;
-    transform: translateY(10px);
-    animation: card-arrive 0.55s var(--ease) forwards;
-    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease);
-}
-
-.site-item::before {
-    position: absolute;
-    top: 0;
-    right: 24px;
-    left: 24px;
-    height: 2px;
-    border-radius: 0 0 4px 4px;
-    background: linear-gradient(90deg, transparent, var(--primary), transparent);
-    content: "";
-    opacity: 0;
-    transition: opacity 0.25s ease;
-}
-
-.site-item:hover {
-    border-color: rgba(56, 88, 246, 0.16);
-    box-shadow: var(--shadow-hover);
-    transform: translateY(-4px);
-}
-
-.site-item:hover::before {
-    opacity: 1;
-}
-
-.site-item:focus-visible {
-    outline: 3px solid rgba(56, 88, 246, 0.22);
-    outline-offset: 3px;
-}
-
-.site-item:nth-child(2) {
-    animation-delay: 45ms;
-}
-
-.site-item:nth-child(3) {
-    animation-delay: 90ms;
-}
-
-.site-item:nth-child(4) {
-    animation-delay: 135ms;
-}
-
-.site-item:nth-child(5) {
-    animation-delay: 180ms;
-}
-
-.site-item:nth-child(6) {
-    animation-delay: 225ms;
-}
-
-.site-item:nth-child(n + 7) {
-    animation-delay: 270ms;
-}
-
-.site-card-top {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-}
-
-.site-avatar {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border: 1px solid rgba(56, 88, 246, 0.08);
-    border-radius: 15px;
-    background:
-        linear-gradient(145deg, rgba(255, 255, 255, 0.6), transparent),
-        var(--primary-soft);
-    color: var(--primary);
-    font-size: 19px;
-    font-weight: 780;
-}
-
-.site-open {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 34px;
-    height: 34px;
-    border-radius: 50%;
-    background: var(--bg);
-    color: var(--muted);
-    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease);
-}
-
-.site-item:hover .site-open {
-    background: var(--primary);
-    color: #ffffff;
-    transform: translate(2px, -2px);
-}
-
-.site-info {
-    margin-top: 25px;
-    min-width: 0;
-}
-
-.site-name {
-    overflow: hidden;
-    color: var(--ink);
-    font-size: 18px;
-    font-weight: 720;
-    letter-spacing: -0.45px;
-    line-height: 1.3;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.site-desc {
-    display: block;
-    margin-top: 5px;
-    color: var(--muted);
-    font-size: 11px;
-}
-
-.site-card-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin-top: auto;
-    padding-top: 17px;
-    border-top: 1px solid var(--border);
-}
-
-.site-path {
-    max-width: calc(100% - 62px);
-    overflow: hidden;
-    color: var(--text-secondary);
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-    font-size: 9.5px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.site-ready {
-    flex-shrink: 0;
-    color: var(--primary);
-    font-size: 8px;
-    font-weight: 800;
-    letter-spacing: 1.1px;
-}
-
-.empty-state {
-    grid-column: 1 / -1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 430px;
-    padding: 54px 28px;
-    border: 1px solid rgba(255, 255, 255, 0.94);
-    border-radius: 22px;
-    background: rgba(255, 255, 255, 0.88);
-    box-shadow: var(--shadow-card);
-    text-align: center;
-    animation: card-arrive 0.5s var(--ease) both;
-}
-
-.empty-visual {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 78px;
-    height: 78px;
-    border: 1px solid rgba(56, 88, 246, 0.09);
-    border-radius: 24px;
-    background: var(--primary-soft);
-    color: var(--primary);
-    transform: rotate(-4deg);
-}
-
-.empty-state h3 {
-    margin-top: 24px;
-    color: var(--ink);
-    font-size: 20px;
-    font-weight: 730;
-    letter-spacing: -0.5px;
-}
-
-.empty-state p {
-    max-width: 410px;
-    margin-top: 9px;
-    color: var(--muted);
-    font-size: 12px;
-    line-height: 1.8;
-}
-
-.empty-state code {
-    padding: 2px 6px;
-    border-radius: 5px;
-    background: var(--bg);
-    color: var(--text-secondary);
-    font-family: "SFMono-Regular", Consolas, monospace;
-    font-size: 10px;
-}
-
-.refresh-status {
-    min-height: 18px;
-    margin-top: 14px;
-    padding-right: 3px;
-    color: var(--muted);
-    font-size: 10px;
-    text-align: right;
-}
-
-.error-page {
-    display: grid;
-    place-items: center;
-    padding: 28px;
-}
-
-.error-page::before {
-    position: fixed;
-    top: 15%;
-    right: 13%;
-    width: 240px;
-    height: 240px;
-    border-radius: 50%;
-    background: rgba(56, 88, 246, 0.065);
-    content: "";
-    filter: blur(2px);
-}
-
-.error-box {
-    position: relative;
-    width: min(100%, 480px);
-    overflow: hidden;
-    padding: 46px 42px 42px;
-    border: 1px solid rgba(255, 255, 255, 0.94);
-    border-radius: 26px;
-    background: rgba(255, 255, 255, 0.96);
-    box-shadow: var(--shadow-card);
-    text-align: center;
-}
-
-.error-box::before {
-    display: block;
-    margin-bottom: 30px;
-    color: var(--muted);
-    content: "STASH · 404";
-    font-size: 9px;
-    font-weight: 800;
-    letter-spacing: 2.2px;
-}
-
-.error-box::after {
-    position: absolute;
-    top: 0;
-    right: 25%;
-    left: 25%;
-    height: 3px;
-    border-radius: 0 0 4px 4px;
-    background: linear-gradient(90deg, transparent, var(--primary), transparent);
-    content: "";
-}
-
-.error-code {
-    margin-bottom: 15px;
-    background: linear-gradient(135deg, var(--primary), #6f88ff);
-    background-clip: text;
-    color: transparent;
-    font-size: 86px;
-    font-weight: 780;
-    letter-spacing: -6px;
-    line-height: 0.92;
-}
-
-.error-box h1 {
-    color: var(--ink);
-    font-size: 23px;
-    font-weight: 740;
-    letter-spacing: -0.7px;
-}
-
-.error-box p {
-    margin-top: 12px;
-    margin-bottom: 28px;
-    color: var(--muted);
-    font-size: 12px;
-    line-height: 1.75;
-    overflow-wrap: anywhere;
-}
-
-.error-box code {
-    padding: 3px 7px;
-    border-radius: 6px;
-    background: var(--bg);
-    color: var(--text-secondary);
-    font-family: "SFMono-Regular", Consolas, monospace;
-    font-size: 10px;
-}
-
-.button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 42px;
-    padding: 10px 24px;
-    border-radius: 12px;
-    background: var(--primary);
-    box-shadow: 0 9px 20px rgba(56, 88, 246, 0.2);
-    color: #ffffff;
-    font-size: 12px;
-    font-weight: 700;
-    text-decoration: none;
-    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
-}
-
-.button:hover {
-    background: var(--primary-dark);
-    box-shadow: 0 12px 24px rgba(56, 88, 246, 0.26);
-    transform: translateY(-1px);
-}
-
-.button:focus-visible {
-    outline: 3px solid rgba(56, 88, 246, 0.24);
-    outline-offset: 3px;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes card-arrive {
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes live-pulse {
-    0%,
-    100% {
-        box-shadow: 0 0 0 4px rgba(74, 189, 134, 0.11);
-    }
-
-    50% {
-        box-shadow: 0 0 0 7px rgba(74, 189, 134, 0.04);
-    }
-}
-
-@media (max-width: 1080px) {
-    .workspace {
-        grid-template-columns: 252px minmax(0, 1fr);
-        gap: 22px;
-        width: min(100% - 40px, 1180px);
-    }
-
-    .sidebar {
-        padding: 22px;
-    }
-
-    .sidebar-intro {
-        margin-top: 44px;
-    }
-
-    .sidebar-intro h1 {
-        font-size: 34px;
-    }
-
-    .site-grid {
-        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-        gap: 15px;
-    }
-}
-
-@media (max-width: 820px) {
-    .workspace {
-        grid-template-columns: minmax(0, 1fr);
-        width: min(100% - 36px, 720px);
-        padding: 20px 0 28px;
-    }
-
-    .sidebar {
-        position: static;
-        min-height: 0;
-        padding: 22px;
-    }
-
-    .sidebar-intro {
-        margin-top: 34px;
-    }
-
-    .sidebar-intro h1 {
-        font-size: 36px;
-    }
-
-    .sidebar-lead {
-        max-width: 470px;
-    }
-
-    .overview-card {
-        margin-top: 24px;
-    }
-
-    .sidebar-actions {
-        display: flex;
-        align-items: center;
-        gap: 16px;
-    }
-
-    .refresh-button {
-        width: auto;
-        min-width: 142px;
-        flex-shrink: 0;
-    }
-
-    .sidebar-hint {
-        margin-top: 0;
-        text-align: left;
-    }
-
-    .sidebar-footer {
-        margin-top: 24px;
-    }
-
-    .content {
-        padding-top: 8px;
-    }
-}
-
-@media (max-width: 560px) {
-    body {
-        background:
-            radial-gradient(circle at 100% 0%, rgba(56, 88, 246, 0.09), transparent 23rem),
-            var(--bg);
-    }
-
-    .workspace {
-        width: calc(100% - 24px);
-        padding-top: 12px;
-    }
-
-    .sidebar {
-        padding: 18px;
-        border-radius: 20px;
-    }
-
-    .brand-mark {
-        width: 35px;
-        height: 35px;
-        border-radius: 11px;
-    }
-
-    .brand-name {
-        font-size: 21px;
-    }
-
-    .sidebar-intro {
-        margin-top: 24px;
-    }
-
-    .sidebar-intro h1 {
-        margin-top: 12px;
-        font-size: 29px;
-        letter-spacing: -1.4px;
-    }
-
-    .sidebar-intro h1 br {
-        display: none;
-    }
-
-    .sidebar-lead {
-        display: -webkit-box;
-        margin-top: 11px;
-        overflow: hidden;
-        font-size: 11.5px;
-        line-height: 1.65;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-    }
-
-    .overview-card {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) auto;
-        align-items: center;
-        gap: 2px 16px;
-        margin-top: 16px;
-        padding: 13px 15px;
-    }
-
-    .overview-label {
-        grid-column: 1;
-        font-size: 10px;
-    }
-
-    .project-total {
-        grid-column: 1;
-        margin-top: 2px;
-    }
-
-    .project-total strong {
-        font-size: 38px;
-    }
-
-    .service-status {
-        grid-column: 2;
-        grid-row: 1 / 3;
-        margin-top: 0;
-        padding-top: 0;
-        border-top: 0;
-        font-size: 10px;
-        white-space: nowrap;
-    }
-
-    .sidebar-actions {
-        display: block;
-        margin-top: 12px;
-    }
-
-    .refresh-button {
-        width: 100%;
-    }
-
-    .sidebar-hint {
-        display: none;
-    }
-
-    .sidebar-footer {
-        display: none;
-    }
-
-    .content-header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 16px;
-        margin-bottom: 20px;
-    }
-
-    .content-meta {
-        justify-content: flex-start;
-    }
-
-    .site-grid {
-        grid-template-columns: minmax(0, 1fr);
-        gap: 13px;
-    }
-
-    .site-item {
-        min-height: 200px;
-    }
-
-    .empty-state {
-        min-height: 380px;
-    }
-
-    .error-page {
-        padding: 14px;
-    }
-
-    .error-box {
-        padding: 38px 24px 34px;
-        border-radius: 22px;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        scroll-behavior: auto !important;
-        transition-duration: 0.01ms !important;
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-    }
-}
diff --git a/assets/dashboard.js b/assets/dashboard.js
deleted file mode 100644
index 988d76f..0000000
--- a/assets/dashboard.js
+++ /dev/null
@@ -1,198 +0,0 @@
-(() => {
-    "use strict";
-
-    const grid = document.querySelector("#project-grid");
-    const refreshButton = document.querySelector("#refresh-projects");
-    const status = document.querySelector("#refresh-status");
-    const projectCounts = document.querySelectorAll("[data-project-count]");
-    const liveStatus = document.querySelector("#live-status");
-    const liveStatusLabel = document.querySelector("#live-status-label");
-
-    if (!grid || !refreshButton || !status || !liveStatus || !liveStatusLabel) {
-        return;
-    }
-
-    document.body.classList.add("is-enhanced");
-
-    const createProjectCard = (project) => {
-        if (
-            typeof project.name !== "string" ||
-            typeof project.route_path !== "string" ||
-            !project.route_path.startsWith("/") ||
-            project.route_path.startsWith("//")
-        ) {
-            return null;
-        }
-
-        const link = document.createElement("a");
-        link.className = "site-item";
-        link.href = project.route_path;
-        link.title = project.name;
-
-        const cardTop = document.createElement("div");
-        cardTop.className = "site-card-top";
-
-        const avatar = document.createElement("span");
-        avatar.className = "site-avatar";
-        avatar.setAttribute("aria-hidden", "true");
-        avatar.textContent = Array.from(project.name)[0]?.toUpperCase() || "A";
-
-        const open = document.createElement("span");
-        open.className = "site-open";
-        open.setAttribute("aria-hidden", "true");
-        open.innerHTML = `
-            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M7 17 17 7M8 7h9v9"></path>
-            </svg>
-        `;
-        cardTop.append(avatar, open);
-
-        const info = document.createElement("div");
-        info.className = "site-info";
-
-        const name = document.createElement("h3");
-        name.className = "site-name";
-        name.textContent = project.name;
-
-        const description = document.createElement("span");
-        description.className = "site-desc";
-        description.textContent = "本地静态应用";
-        info.append(name, description);
-
-        const footer = document.createElement("div");
-        footer.className = "site-card-footer";
-
-        const path = document.createElement("span");
-        path.className = "site-path";
-        path.textContent = project.route_path;
-
-        const ready = document.createElement("span");
-        ready.className = "site-ready";
-        ready.textContent = "READY";
-
-        footer.append(path, ready);
-        link.append(cardTop, info, footer);
-        return link;
-    };
-
-    let renderedSignature = JSON.stringify(
-        Array.from(grid.querySelectorAll(".site-item")).map((link) => [
-            link.title,
-            link.getAttribute("href"),
-        ]),
-    );
-
-    const projectsSignature = (projects) =>
-        JSON.stringify(
-            projects.map((project) => [project.name, project.route_path]),
-        );
-
-    const renderProjects = (projects) => {
-        const nextSignature = projectsSignature(projects);
-        if (nextSignature === renderedSignature) {
-            return false;
-        }
-
-        grid.replaceChildren();
-
-        if (projects.length === 0) {
-            const emptyState = document.createElement("div");
-            emptyState.className = "empty-state";
-            emptyState.innerHTML = `
-                <span class="empty-visual" aria-hidden="true">
-                    <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path>
-                        <path d="M8 13h8M8 16h5"></path>
-                    </svg>
-                </span>
-                <h3>这里还没有项目</h3>
-                <p>在托管根目录下创建子目录，并放入 <code>index.html</code>，刷新后即可在这里看到它。</p>
-            `;
-            grid.append(emptyState);
-            renderedSignature = nextSignature;
-            return true;
-        }
-
-        const cards = projects.map(createProjectCard).filter(Boolean);
-        grid.append(...cards);
-        renderedSignature = nextSignature;
-        return true;
-    };
-
-    const updateProjectCounts = (count) => {
-        projectCounts.forEach((element) => {
-            element.textContent = String(count);
-        });
-    };
-
-    refreshButton.addEventListener("click", async () => {
-        refreshButton.disabled = true;
-        refreshButton.classList.add("is-loading");
-        grid.setAttribute("aria-busy", "true");
-        status.textContent = "正在重新扫描项目...";
-
-        try {
-            const response = await fetch("/api/projects", {
-                cache: "no-store",
-                headers: { Accept: "application/json" },
-            });
-
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}`);
-            }
-
-            const payload = await response.json();
-            if (!Array.isArray(payload.projects)) {
-                throw new Error("项目列表格式无效");
-            }
-
-            const changed = renderProjects(payload.projects);
-            updateProjectCounts(payload.projects.length);
-            status.textContent = changed ? "项目列表已刷新" : "项目列表已是最新";
-        } catch (error) {
-            console.error("刷新项目列表失败", error);
-            status.textContent = "刷新失败，请稍后重试";
-        } finally {
-            refreshButton.disabled = false;
-            refreshButton.classList.remove("is-loading");
-            grid.removeAttribute("aria-busy");
-        }
-    });
-
-    if (!("EventSource" in window)) {
-        liveStatusLabel.textContent = "手动刷新";
-        return;
-    }
-
-    const eventSource = new EventSource("/api/projects/events");
-
-    eventSource.addEventListener("open", () => {
-        liveStatusLabel.textContent = "实时同步";
-        liveStatus.classList.add("is-live");
-        liveStatus.classList.remove("is-reconnecting");
-    });
-
-    eventSource.addEventListener("projects", (event) => {
-        try {
-            const payload = JSON.parse(event.data);
-            if (!Array.isArray(payload.projects)) {
-                throw new Error("项目列表格式无效");
-            }
-
-            const changed = renderProjects(payload.projects);
-            updateProjectCounts(payload.projects.length);
-            if (changed) {
-                status.textContent = "检测到目录变化，项目列表已自动更新";
-            }
-        } catch (error) {
-            console.error("处理项目更新事件失败", error);
-            status.textContent = "收到项目更新，但无法解析";
-        }
-    });
-
-    eventSource.addEventListener("error", () => {
-        liveStatusLabel.textContent = "同步重连中";
-        liveStatus.classList.remove("is-live");
-        liveStatus.classList.add("is-reconnecting");
-    });
-})();
diff --git a/stash-web/src/components/common/CountBadge.tsx b/stash-web/src/components/common/CountBadge.tsx
deleted file mode 100644
index 4c8212e..0000000
--- a/stash-web/src/components/common/CountBadge.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Badge } from '@stash/ui'
-
-/**
- * 数量角标：贴在分区标题旁边的小红标。
- * 组件库的 Badge 已经处理了两位数和 99+ 的宽度，这里只做语义封装。
- */
-type CountBadgeProps = {
-  count: number
-}
-
-export function CountBadge({ count }: CountBadgeProps) {
-  return <Badge count={count} tone="danger" />
-}
diff --git a/stash-web/src/components/common/Icon.tsx b/stash-web/src/components/common/Icon.tsx
deleted file mode 100644
index 6151b46..0000000
--- a/stash-web/src/components/common/Icon.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Icon } from '@stash/ui'
-
-/**
- * 语义图标：stash 内部一直按用途引用（SearchIcon / RefreshIcon…），
- * 这里统一映射到 @stash/ui 的 iconfont 字形，避免各页面记字形名。
- */
-type IconProps = {
-  className?: string
-}
-
-export function SearchIcon({ className }: IconProps) {
-  return <Icon name="search_3_line" className={className} />
-}
-
-export function UserIcon({ className }: IconProps) {
-  return <Icon name="user_3_line" className={className} />
-}
-
-export function RefreshIcon({ className }: IconProps) {
-  return <Icon name="refresh_3_line" className={className} />
-}
-
-export function LinkIcon({ className }: IconProps) {
-  return <Icon name="link_3_line" className={className} />
-}
-
-export function ExternalIcon({ className }: IconProps) {
-  return <Icon name="a-external_link_line1" className={className} />
-}
-
-export function EyeIcon({ className }: IconProps) {
-  return <Icon name="eye_line" className={className} />
-}
-
-export function ThumbUpIcon({ className }: IconProps) {
-  return <Icon name="thumb_up_2_line" className={className} />
-}
-
-export function ShareIcon({ className }: IconProps) {
-  return <Icon name="share_3_line" className={className} />
-}
-
-export function CloseIcon({ className }: IconProps) {
-  return <Icon name="close_line" className={className} />
-}
-
-export function MoreIcon({ className }: IconProps) {
-  return <Icon name="more_1_line" className={className} />
-}
-
-export function ArrowUpIcon({ className }: IconProps) {
-  return <Icon name="arrow_up_line" className={className} />
-}
-
-export function ArrowDownIcon({ className }: IconProps) {
-  return <Icon name="arrow_down_line" className={className} />
-}
diff --git a/stash-web/src/components/content/ArticleCard.tsx b/stash-web/src/components/content/ArticleCard.tsx
deleted file mode 100644
index f96f8eb..0000000
--- a/stash-web/src/components/content/ArticleCard.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Cover } from '@stash/ui'
-import type { ArticleItem } from '../../data/types'
-
-/**
- * 首页图文卡：4:3 封面 + 底部渐变条上的标题。
- * 传入 onOpen 时整张卡变成按钮，点击进入文章详情。
- */
-type ArticleCardProps = {
-  item: ArticleItem
-  onOpen?: (itemId: string) => void
-}
-
-export function ArticleCard({ item, onOpen }: ArticleCardProps) {
-  return (
-    <Cover
-      src={item.cover}
-      alt={item.title}
-      caption={item.title}
-      ratio="article"
-      onClick={onOpen === undefined ? undefined : () => onOpen(item.id)}
-    />
-  )
-}
diff --git a/stash-web/src/components/content/ArticleGrid.tsx b/stash-web/src/components/content/ArticleGrid.tsx
deleted file mode 100644
index 59e7d75..0000000
--- a/stash-web/src/components/content/ArticleGrid.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Grid } from '@stash/ui'
-import type { ArticleItem } from '../../data/types'
-import { ArticleCard } from './ArticleCard'
-
-/** 图文网格：桌面 4 列，平板 2 列，手机 1 列 */
-type ArticleGridProps = {
-  items: ArticleItem[]
-  /** 点击卡片打开文章详情 */
-  onOpen?: (itemId: string) => void
-}
-
-export function ArticleGrid({ items, onOpen }: ArticleGridProps) {
-  return (
-    <Grid columns={4} tabletColumns={2} mobileColumns={1} gap="md">
-      {items.map((item) => (
-        <ArticleCard key={item.id} item={item} onOpen={onOpen} />
-      ))}
-    </Grid>
-  )
-}
diff --git a/stash-web/src/components/content/DetailView.tsx b/stash-web/src/components/content/DetailView.tsx
deleted file mode 100644
index a4dbbab..0000000
--- a/stash-web/src/components/content/DetailView.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { Breadcrumb, Card, Empty, Space, Title } from '@stash/ui'
-import {
-  categoryCount,
-  type AppItem,
-  type ArticleItem,
-  type Category,
-  type PosterItem,
-} from '../../data/types'
-import { viewPath } from '../../data/view'
-import { AppGrid } from './AppGrid'
-import { CesCardGrid } from './CesCardGrid'
-import { GroupBlock } from './GroupBlock'
-import { PosterGrid } from './PosterGrid'
-
-/**
- * 分类明细视图：面包屑 + hero（图标 / 标题 / 数量）+ 内容区。
- *
- * 内容区按分类类型切换：
- * - apps：指定分组时只渲染该组，否则单组扁平渲染、多组带小标题分组渲染；
- * - posters：6 列海报；
- * - articles：上图下文白卡网格。
- */
-type DetailViewProps = {
-  category: Category
-  /** 从侧栏子菜单进入时指定的分组 */
-  groupId?: string
-  /** 点击面包屑中间项（SPA 路由） */
-  onNavigate: (href: string) => void
-  /** 点击卡片 / 海报进入条目详情 */
-  onOpenItem: (itemId: string) => void
-}
-
-export function DetailView({ category, groupId, onNavigate, onOpenItem }: DetailViewProps) {
-  // 三种类型共用「分区 → 分组 → 条目」结构；这里抹平联合类型，渲染时再按 kind 分派
-  type RenderItem = AppItem | PosterItem | ArticleItem
-  const groups = category.groups as {
-    id: string
-    name: string
-    items: RenderItem[]
-  }[]
-  const activeGroup =
-    groupId !== undefined ? groups.find((group) => group.id === groupId) : undefined
-
-  const title = activeGroup?.name ?? category.title
-  const count = activeGroup !== undefined ? activeGroup.items.length : categoryCount(category)
-  const crumbs =
-    activeGroup !== undefined
-      ? [
-          { label: '首页', href: '/' },
-          { label: category.title, href: viewPath({ type: 'detail', categoryId: category.id }) },
-          { label: activeGroup.name },
-        ]
-      : [
-          { label: '首页', href: '/' },
-          { label: category.title, href: viewPath({ type: 'detail', categoryId: category.id }) },
-        ]
-
-  /** 按类型渲染一组条目 */
-  function renderItems(items: RenderItem[]) {
-    if (category.kind === 'posters') {
-      return <PosterGrid items={items as PosterItem[]} variant="detail" onOpen={onOpenItem} />
-    }
-
-    if (category.kind === 'articles') {
-      return <CesCardGrid items={items as ArticleItem[]} onOpen={onOpenItem} />
-    }
-
-    return <AppGrid items={items as AppItem[]} variant="detail" onOpen={onOpenItem} />
-  }
-
-  function renderBody() {
-    if (activeGroup !== undefined) {
-      return renderItems(activeGroup.items)
-    }
-
-    const direct = (category.items ?? []) as RenderItem[]
-    // 空分组不占篇幅（管理后台仍然保留，之后可以往里加条目）
-    const filledGroups = groups.filter((group) => group.items.length > 0)
-
-    if (filledGroups.length === 0) {
-      return direct.length > 0 ? (
-        renderItems(direct)
-      ) : (
-        <Empty text={'emptyText' in category ? (category.emptyText ?? '暂无内容') : '暂无内容'} />
-      )
-    }
-
-    if (filledGroups.length === 1 && direct.length === 0) {
-      return renderItems(filledGroups[0].items)
-    }
-
-    return (
-      <Space direction="column" gap="lg" align="stretch">
-        {filledGroups.map((group) => (
-          <GroupBlock
-            key={group.id}
-            name={group.name}
-            barColor={category.barColor !== '' ? category.barColor : undefined}
-          >
-            {renderItems(group.items)}
-          </GroupBlock>
-        ))}
-        {direct.length > 0 && (
-          <GroupBlock
-            name="未分组"
-            barColor={category.barColor !== '' ? category.barColor : undefined}
-          >
-            {renderItems(direct)}
-          </GroupBlock>
-        )}
-      </Space>
-    )
-  }
-
-  return (
-    <div className="detail-view">
-      <Card padding="none" className="detail-nav">
-        <Breadcrumb
-          className="detail-breadcrumb"
-          items={crumbs}
-          onNavigate={onNavigate}
-        />
-      </Card>
-
-      <div className="detail-hero">
-        <span className="detail-hero-icon" aria-hidden="true">
-          {category.icon}
-        </span>
-        <Title level={1} as="h2" weight="strong" className="detail-hero-title">
-          {title}
-        </Title>
-        <span className="detail-hero-count">[{count}]</span>
-      </div>
-
-      {renderBody()}
-    </div>
-  )
-}
diff --git a/stash-web/src/components/content/GroupBlock.tsx b/stash-web/src/components/content/GroupBlock.tsx
deleted file mode 100644
index 8ebb020..0000000
--- a/stash-web/src/components/content/GroupBlock.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Space, Title } from '@stash/ui'
-import type { ReactNode } from 'react'
-
-/**
- * 明细页的分组块：色条 + 小标题 + 该组的内容网格。
- *
- * 色条沿用分区的 `barColor`，与首页卡片标题保持同一套视觉语言；
- * 具体网格由调用方传入（应用 / 海报 / 图文共用同一层外壳）。
- */
-type GroupBlockProps = {
-  name: string
-  /** 分区色条颜色；缺省用主题主色 */
-  barColor?: string
-  children: ReactNode
-}
-
-export function GroupBlock({ name, barColor, children }: GroupBlockProps) {
-  return (
-    <Space direction="column" gap="sm" align="stretch" className="group-block">
-      <div className="group-title">
-        <span
-          className="group-bar"
-          style={barColor !== undefined ? { backgroundColor: barColor } : undefined}
-          aria-hidden="true"
-        />
-        <Title level={4} as="h3">
-          {name}
-        </Title>
-      </div>
-      {children}
-    </Space>
-  )
-}
diff --git a/stash-web/src/components/content/HomeView.tsx b/stash-web/src/components/content/HomeView.tsx
deleted file mode 100644
index f7ea448..0000000
--- a/stash-web/src/components/content/HomeView.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { categoryCount, flattenAppItems, type Category } from '../../data/types'
-import { AppGrid } from './AppGrid'
-import { ArticleGrid } from './ArticleGrid'
-import { Empty } from '@stash/ui'
-import { PosterGrid } from './PosterGrid'
-import { SectionCard } from './SectionCard'
-import {
-  applySectionSettings,
-  sectionLimit,
-  sectionTitle,
-  type SectionSettings,
-} from '../../settings'
-
-/**
- * 首页：把每个分类渲染成一张分区卡片。
- *
- * 每个分区只展示前若干条；标题、条数、顺序与显隐都可以在 `/admin`
- * 的「首页卡片」里覆盖（见 settings.sections）。
- */
-type HomeViewProps = {
-  categories: Category[]
-  sections: SectionSettings
-  onOpenDetail: (categoryId: string) => void
-  onOpenItem: (categoryId: string, itemId: string) => void
-}
-
-export function HomeView({ categories, sections, onOpenDetail, onOpenItem }: HomeViewProps) {
-  const cards = applySectionSettings(categories, sections)
-
-  return (
-    <div className="home-view">
-      {cards.map((category) => (
-        <SectionCard
-          key={category.id}
-          // 卡片标题跟着实际展示的内容走：配了展示块就用块标题（如「常用站点」），
-          // 没配（如「本地服务」）才用分类标题；设置里的覆盖值优先
-          title={sectionTitle(
-            category.id,
-            category.block?.title ?? category.title,
-            sections,
-          )}
-          count={cardCount(category)}
-          barColor={category.barColor}
-          onMore={() => onOpenDetail(category.id)}
-        >
-          {renderPreview(category, sections, onOpenItem)}
-        </SectionCard>
-      ))}
-    </div>
-  )
-}
-
-/**
- * 卡片右上角的数量角标。
- *
- * 配了「分组展示块」时，卡片实际展示的是那个分组，所以数量也应该只数它；
- * 否则（电影 / 文章 / 本地服务）数整个分区。
- */
-function cardCount(category: Category): number {
-  if (category.block !== undefined) {
-    const group = category.groups.find((item) => item.id === category.block?.nodeKey)
-    if (group !== undefined) return group.items.length
-  }
-
-  return categoryCount(category)
-}
-
-/** 某个分区配的「首页预览分组」；没配或找不到返回 undefined */
-function blockGroup<T>(category: { block?: { nodeKey?: string }; groups: { id: string; items: T[] }[] }) {
-  if (category.block?.nodeKey === undefined) return undefined
-  return category.groups.find((group) => group.id === category.block?.nodeKey)
-}
-
-/** 按分类类型输出对应的预览网格；应用类为空时给出提示文案 */
-function renderPreview(
-  category: Category,
-  sections: SectionSettings,
-  onOpenItem: (categoryId: string, itemId: string) => void,
-) {
-  if (category.kind === 'apps') {
-    // 配了展示块且指向分组时只展示该组；展示块指向分区本身（「整个分区」）时展示全部条目
-    const group = blockGroup(category)
-    const source = group !== undefined ? group.items : flattenAppItems(category)
-    const fallback = category.block?.previewLimit ?? category.previewLimit ?? 4
-    const limit = sectionLimit(category.id, fallback, sections)
-    const items = source.slice(0, limit)
-
-    if (items.length === 0) {
-      return <Empty text={category.emptyText ?? '暂无内容'} />
-    }
-
-    return <AppGrid items={items} onOpen={(itemId) => onOpenItem(category.id, itemId)} />
-  }
-
-  if (category.kind === 'posters') {
-    const group = blockGroup(category)
-    const source = group
-      ? group.items
-      : [...category.items, ...category.groups.flatMap((item) => item.items)]
-    return (
-      <PosterGrid
-        items={source.slice(0, sectionLimit(category.id, category.previewLimit ?? 6, sections))}
-        onOpen={(itemId) => onOpenItem(category.id, itemId)}
-      />
-    )
-  }
-
-  const group = blockGroup(category)
-  const source = group
-    ? group.items
-    : [...category.items, ...category.groups.flatMap((item) => item.items)]
-  return (
-    <ArticleGrid
-      items={source.slice(0, sectionLimit(category.id, category.previewLimit ?? 4, sections))}
-      onOpen={(itemId) => onOpenItem(category.id, itemId)}
-    />
-  )
-}
diff --git a/stash-web/src/data/filter.ts b/stash-web/src/data/filter.ts
deleted file mode 100644
index 029fc6e..0000000
--- a/stash-web/src/data/filter.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { Category } from './types'
-
-/**
- * 按关键字过滤分类内容。
- *
- * 应用类分类会逐组过滤并丢掉空组，海报 / 图文类按标题或描述匹配；
- * 空关键字直接原样返回，避免无谓的对象重建。
- */
-export function filterCategories(categories: Category[], keyword: string): Category[] {
-  const query = keyword.trim().toLowerCase()
-  if (query === '') return categories
-
-  const result: Category[] = []
-
-  for (const category of categories) {
-    if (category.kind === 'apps') {
-      const groups = category.groups
-        .map((group) => ({
-          ...group,
-          items: group.items.filter((item) => matches(query, item.name, item.desc)),
-        }))
-        .filter((group) => group.items.length > 0)
-
-      if (groups.length > 0) {
-        result.push({ ...category, groups })
-      }
-      continue
-    }
-
-    if (category.kind === 'posters') {
-      const items = category.items.filter((item) => matches(query, item.title))
-      if (items.length > 0) {
-        result.push({ ...category, items })
-      }
-      continue
-    }
-
-    const items = category.items.filter((item) => matches(query, item.title, item.desc))
-    if (items.length > 0) {
-      result.push({ ...category, items })
-    }
-  }
-
-  return result
-}
-
-function matches(query: string, ...fields: string[]): boolean {
-  return fields.some((field) => field.toLowerCase().includes(query))
-}
diff --git a/stash-web/src/data/local.ts b/stash-web/src/data/local.ts
deleted file mode 100644
index e01ba74..0000000
--- a/stash-web/src/data/local.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { AppCategory, AppItem, Category } from './types'
-
-/**
- * 「本地服务」分类的组装逻辑。
- *
- * 这一块不来自内容库：托管目录里有哪些项目是由文件系统决定的，
- * 后端每次扫描后通过 `/api/projects` 推送，所以本地分类始终在前端拼出来，
- * 内容库只负责其余的分类（常用推荐 / 推荐电影 / CES 现场报道）。
- */
-
-/** 后端 `/api/projects` 返回的项目结构 */
-export type HostedProject = {
-  name: string
-  route_path: string
-}
-
-/**
- * 把托管项目映射成应用条目。
- *
- * id 用项目名（就是目录名）：它在前端各处（首页卡片、明细、详情）唯一，
- * 又正好是可以直接放进地址栏的一段——条目详情地址是 `/c/local/<分组>/i/<项目名>`。
- * 访问地址仍然用 `route_path`（`/demo/`），两者不再混用。
- * 本地项目没有封面图，详情页会退化成字符头像。
- */
-function toLocalItem(project: HostedProject): AppItem {
-  return {
-    id: project.name,
-    name: project.name,
-    desc: project.route_path,
-    icon: project.name.slice(0, 1).toUpperCase(),
-    href: project.route_path,
-    comment: '本地静态站点，由 Stash 直接托管。',
-    badge: '本地项目',
-    views: 0,
-    likes: 0,
-  }
-}
-
-/** 生成「本地服务」分类；没有项目时给出一句引导文案 */
-export function buildLocalCategory(projects: HostedProject[]): AppCategory {
-  const items = projects.map(toLocalItem)
-
-  return {
-    id: 'local',
-    kind: 'apps',
-    title: '本地服务',
-    barColor: '#3858f6',
-    icon: '🖥️',
-    groups: items.length > 0 ? [{ id: 'local-all', name: '全部项目', items }] : [],
-    previewLimit: 8,
-    emptyText: '还没有项目：在托管目录下建一个子目录并放入 index.html，刷新后就会出现在这里。',
-  }
-}
-
-/**
- * 拼接首页全部分类：本地服务永远排第一，其后跟进内容库返回的分类。
- */
-export function withLocalCategory(
-  projects: HostedProject[],
-  categories: Category[],
-): Category[] {
-  return [buildLocalCategory(projects), ...categories]
-}
diff --git a/stash-web/src/data/nav.ts b/stash-web/src/data/nav.ts
deleted file mode 100644
index 09f3073..0000000
--- a/stash-web/src/data/nav.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * 导航目标。
- *
- * 侧栏现在直接由内容树（分区 → 分组）派生，不再有独立的导航数据模型；
- * 这里只保留「点击后要去哪」的最小类型。
- */
-
-export type NavTarget = {
-  categoryId: string
-  /** 指定后明细页只展示该分组 */
-  groupId?: string
-}
diff --git a/stash-web/src/profile.ts b/stash-web/src/profile.ts
deleted file mode 100644
index 9e36bd2..0000000
--- a/stash-web/src/profile.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * 登录后展示的用户模块数据。
- *
- * 后端目前没有鉴权 / 用户信息接口，这里先用占位数据，
- * 等类似 `/api/me` 的接口就绪后替换为真实数据即可。
- */
-export type UserProfile = {
-  name: string
-  role: string
-  bio: string
-  location: string
-}
-
-export const PLACEHOLDER_PROFILE: UserProfile = {
-  name: '本地管理员',
-  role: '管理员',
-  bio: '本地静态站点托管与预览，所有项目都运行在这台机器上。',
-  location: '局域网',
-}
diff --git a/stash-web/src/useCatalog.ts b/stash-web/src/useCatalog.ts
deleted file mode 100644
index 1f0f5c3..0000000
--- a/stash-web/src/useCatalog.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { fetchCatalog, subscribeCatalog } from './api'
-import type { Category } from './data/types'
-
-export type CatalogStatus = 'loading' | 'ready' | 'error'
-
-export type CatalogState = {
-  status: CatalogStatus
-  categories: Category[]
-  error: string | null
-}
-
-export type CatalogController = CatalogState & {
-  /** 手动重新拉取；内容库被外部修改后也会自动调用 */
-  reload: () => void
-}
-
-function toErrorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : String(error)
-}
-
-/**
- * 内容目录：首屏拉取 + 监听服务端推送 + 手动重载。
- *
- * 与 `useProjects` 的区别是失败策略：项目列表失败会保留旧数据，
- * 内容目录同样保留旧数据 —— 用户正在改库时偶尔读到坏 JSON 不应该把页面清空。
- */
-export function useCatalog(): CatalogController {
-  const [state, setState] = useState<CatalogState>({
-    status: 'loading',
-    categories: [],
-    error: null,
-  })
-  const controllerRef = useRef<AbortController | null>(null)
-
-  /**
-   * 拉一次内容目录。
-   *
-   * 用 ref 保存当前的 AbortController：外部改动可能连续触发多次刷新，
-   * 只保留最后一次请求，避免旧响应把新数据覆盖回去。
-   */
-  const load = useCallback(() => {
-    controllerRef.current?.abort()
-    const controller = new AbortController()
-    controllerRef.current = controller
-
-    fetchCatalog(controller.signal)
-      .then((catalog) => {
-        if (!controller.signal.aborted) {
-          setState({
-            status: 'ready',
-            categories: catalog.categories,
-            error: null,
-          })
-        }
-      })
-      .catch((error: unknown) => {
-        if (!controller.signal.aborted) {
-          setState((previous) => ({
-            // 已经有内容时只提示错误，不清空列表
-            status: previous.categories.length > 0 ? 'ready' : 'error',
-            categories: previous.categories,
-            error: toErrorMessage(error),
-          }))
-        }
-      })
-  }, [])
-
-  // 首屏加载：setState 只发生在 Promise 回调里，避免 effect 内同步 setState
-  useEffect(() => {
-    load()
-    return () => controllerRef.current?.abort()
-  }, [load])
-
-  // 内容库被外部修改时，服务端推送一次「变了」，这里重新拉取
-  useEffect(() => subscribeCatalog(load), [load])
-
-  return { ...state, reload: load }
-}
diff --git a/stash-web/src/useViewRoute.ts b/stash-web/src/useViewRoute.ts
deleted file mode 100644
index 0fa2853..0000000
--- a/stash-web/src/useViewRoute.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-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 }
-}
diff --git a/templates/404.html b/templates/404.html
deleted file mode 100644
index 462d4d2..0000000
--- a/templates/404.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>404 - 资源未找到</title>
-    <link rel="stylesheet" href="/__stash__/dashboard.css">
-</head>
-<body class="error-page">
-<main class="error-box">
-    <div class="error-code">404</div>
-    <h1>资源或页面不存在</h1>
-    <p>请求的路径 <code>{{ path }}</code> 不存在或缺少 index.html</p>
-    <a href="/public" class="button">返回应用大厅</a>
-</main>
-</body>
-</html>
diff --git a/templates/index.html b/templates/index.html
deleted file mode 100644
index 380452e..0000000
--- a/templates/index.html
+++ /dev/null
@@ -1,120 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="color-scheme" content="light">
-    <meta name="theme-color" content="#f7f8fa">
-    <title>Stash · 本地应用工作区</title>
-    <link rel="stylesheet" href="/__stash__/dashboard.css">
-    <script src="/__stash__/dashboard.js" defer></script>
-</head>
-<body class="dashboard-page">
-<div class="ambient ambient-blue" aria-hidden="true"></div>
-<div class="ambient ambient-warm" aria-hidden="true"></div>
-
-<div class="workspace">
-    <aside class="sidebar">
-        <header class="sidebar-header">
-            <a class="brand" href="/public" aria-label="Stash 首页">
-                <span class="brand-mark" aria-hidden="true">
-                    <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                        <rect x="3" y="3" width="7" height="7" rx="2"></rect>
-                        <rect x="14" y="3" width="7" height="7" rx="2"></rect>
-                        <rect x="3" y="14" width="7" height="7" rx="2"></rect>
-                        <path d="M17.5 14v7M14 17.5h7"></path>
-                    </svg>
-                </span>
-                <span class="brand-name">stash<span>.</span></span>
-            </a>
-            <span class="local-badge">LOCAL</span>
-        </header>
-
-        <div class="sidebar-intro">
-            <p class="eyebrow"><span class="eyebrow-dot"></span>YOUR WORKSPACE</p>
-            <h1>把项目，<br>放在手边。</h1>
-            <p class="sidebar-lead">Stash 正在整理当前目录下的静态前端应用，让每次预览都从一个清爽入口开始。</p>
-        </div>
-
-        <section class="overview-card" aria-label="工作区概览">
-            <div class="overview-label">项目概览</div>
-            <div class="project-total">
-                <strong data-project-count>{{ projects.len() }}</strong>
-                <span>个应用</span>
-            </div>
-            <div class="service-status">
-                <span class="status-dot"></span>
-                <span>本地服务运行中</span>
-            </div>
-        </section>
-
-        <div class="sidebar-actions">
-            <button class="refresh-button js-only" id="refresh-projects" type="button" aria-label="重新扫描项目">
-                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                    <path d="M20 11a8.1 8.1 0 0 0-15.5-2M4 4v5h5"></path>
-                    <path d="M4 13a8.1 8.1 0 0 0 15.5 2M20 20v-5h-5"></path>
-                </svg>
-                <span>重新扫描</span>
-            </button>
-            <p class="sidebar-hint">目录变化会自动同步，也可以手动重新扫描。</p>
-        </div>
-
-        <footer class="sidebar-footer">
-            <span>STATIC HOSTING</span>
-            <span class="footer-ready"><i></i>READY</span>
-        </footer>
-    </aside>
-
-    <main class="content">
-        <header class="content-header">
-            <div class="content-heading">
-                <p class="eyebrow">PROJECT LIBRARY</p>
-                <h2>本地应用</h2>
-                <p>一个入口，快速抵达每个正在开发或预览的页面。</p>
-            </div>
-            <div class="content-meta">
-                <span class="live-pill" id="live-status"><i></i><span id="live-status-label">服务在线</span></span>
-                <span class="count-pill"><strong data-project-count>{{ projects.len() }}</strong> 个项目</span>
-            </div>
-        </header>
-
-        <section class="site-grid" id="project-grid" aria-live="polite">
-            {% if projects.is_empty() %}
-            <div class="empty-state">
-                <span class="empty-visual" aria-hidden="true">
-                    <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path>
-                        <path d="M8 13h8M8 16h5"></path>
-                    </svg>
-                </span>
-                <h3>这里还没有项目</h3>
-                <p>在托管根目录下创建子目录，并放入 <code>index.html</code>，刷新后即可在这里看到它。</p>
-            </div>
-            {% else %}
-            {% for project in projects %}
-            <a class="site-item" href="{{ project.route_path }}" title="{{ project.name }}">
-                <div class="site-card-top">
-                    <span class="site-avatar" aria-hidden="true">{{ project.initial() }}</span>
-                    <span class="site-open" aria-hidden="true">
-                        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M7 17 17 7M8 7h9v9"></path>
-                        </svg>
-                    </span>
-                </div>
-                <div class="site-info">
-                    <h3 class="site-name">{{ project.name }}</h3>
-                    <span class="site-desc">本地静态应用</span>
-                </div>
-                <div class="site-card-footer">
-                    <span class="site-path">{{ project.route_path }}</span>
-                    <span class="site-ready">READY</span>
-                </div>
-            </a>
-            {% endfor %}
-            {% endif %}
-        </section>
-        <p class="refresh-status" id="refresh-status" role="status" aria-live="polite"></p>
-    </main>
-</div>
-</body>
-</html>
diff --git a/templates/index2.html b/templates/index2.html
deleted file mode 100644
index b117b3d..0000000
--- a/templates/index2.html
+++ /dev/null
@@ -1,499 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>服务与推荐列表完整布局</title>
-    <style>
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-
-        body {
-            background-color: #f5f6f8;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            padding: 24px;
-            color: #333;
-        }
-
-        .container {
-            max-width: 1100px;
-            margin: 0 auto;
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-
-        /* 统一外框卡片（图二样式） */
-        .section-card {
-            background-color: #ffffff;
-            border-radius: 12px;
-            padding: 20px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-            border: 1px solid #f0f0f0;
-        }
-
-        /* 顶部标题栏 */
-        .section-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 16px;
-        }
-
-        .section-title-wrapper {
-            display: flex;
-            align-items: center;
-        }
-
-        /* 蓝色指示条/图标 */
-        .title-bar {
-            width: 4px;
-            height: 16px;
-            background-color: #1677ff;
-            border-radius: 2px;
-            margin-right: 8px;
-        }
-
-        /* 标题容器，方便角标定位 */
-        .title-text-container {
-            position: relative;
-            display: inline-flex;
-            align-items: center;
-        }
-
-        .section-title {
-            font-size: 16px;
-            font-weight: 600;
-            color: #1f2329;
-            line-height: 1.2;
-        }
-
-        /* 右上角红色角标 */
-        .badge {
-            position: absolute;
-            top: -8px;
-            right: -18px;
-            background-color: #ff4d4f;
-            color: #ffffff;
-            font-size: 11px;
-            font-weight: bold;
-            height: 16px;
-            min-width: 16px;
-            padding: 0 4px;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            line-height: 1;
-            box-shadow: 0 1px 3px rgba(255, 77, 79, 0.3);
-        }
-
-        /* 卡片右上角更多按钮 */
-        .more-icon {
-            color: #8c8c8c;
-            font-size: 18px;
-            cursor: pointer;
-            user-select: none;
-            letter-spacing: 2px;
-        }
-
-        .more-icon:hover {
-            color: #595959;
-        }
-
-        /* ------------------- 样式 1：常规应用卡片网格 ------------------- */
-        .app-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-            gap: 12px;
-        }
-
-        .app-item {
-            display: flex;
-            align-items: center;
-            padding: 12px 14px;
-            background-color: #f9f9fb;
-            border-radius: 8px;
-            border: 1px solid #f0f0f0;
-            transition: all 0.2s ease;
-            cursor: pointer;
-        }
-
-        .app-item:hover {
-            background-color: #ffffff;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
-            border-color: #e6e6e6;
-            transform: translateY(-1px);
-        }
-
-        .app-icon {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background-color: #e8f3ff;
-            color: #1677ff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-            font-size: 16px;
-            margin-right: 12px;
-            flex-shrink: 0;
-        }
-
-        .app-info {
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-
-        .app-name {
-            font-size: 14px;
-            font-weight: 600;
-            color: #262626;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .app-desc {
-            font-size: 12px;
-            color: #8c8c8c;
-            margin-top: 2px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        /* ------------------- 样式 2：图四 推荐电影（竖版海报卡片） ------------------- */
-        .movie-grid {
-            display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 12px;
-        }
-
-        @media (max-width: 900px) {
-            .movie-grid { grid-template-columns: repeat(3, 1fr); }
-        }
-
-        .movie-item {
-            position: relative;
-            border-radius: 8px;
-            overflow: hidden;
-            aspect-ratio: 2 / 3; /* 经典电影海报高宽比 */
-            background-color: #e0e0e0;
-            cursor: pointer;
-            transition: transform 0.2s ease;
-        }
-
-        .movie-item:hover {
-            transform: translateY(-2px);
-        }
-
-        .movie-cover {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            display: block;
-        }
-
-        /* 底部文字渐变蒙层 */
-        .movie-info {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 20px 8px 8px;
-            background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
-            color: #ffffff;
-        }
-
-        .movie-title {
-            font-size: 12px;
-            font-weight: 500;
-            line-height: 1.3;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-
-        /* ------------------- 样式 3：图五 现场报道/文章（横版网格卡片） ------------------- */
-        .article-grid {
-            display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 10px;
-        }
-
-        @media (max-width: 900px) {
-            .article-grid { grid-template-columns: repeat(3, 1fr); }
-        }
-
-        .article-item {
-            position: relative;
-            border-radius: 6px;
-            overflow: hidden;
-            aspect-ratio: 4 / 3; /* 横版比例 */
-            background-color: #e0e0e0;
-            cursor: pointer;
-            transition: transform 0.2s ease;
-        }
-
-        .article-item:hover {
-            transform: translateY(-2px);
-        }
-
-        .article-cover {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            display: block;
-        }
-
-        /* 底部文字渐变蒙层 */
-        .article-info {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 16px 6px 6px;
-            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
-            color: #ffffff;
-        }
-
-        .article-title {
-            font-size: 11px;
-            line-height: 1.3;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            opacity: 0.95;
-        }
-    </style>
-</head>
-<body>
-
-<div class="container">
-
-    <!-- 1. 本地服务 -->
-    <div class="section-card">
-        <div class="section-header">
-            <div class="section-title-wrapper">
-                <div class="title-bar"></div>
-                <div class="title-text-container">
-                    <span class="section-title">本地服务</span>
-                    <span class="badge">1</span>
-                </div>
-            </div>
-            <div class="more-icon">•••</div>
-        </div>
-
-        <div class="app-grid">
-            <div class="app-item">
-                <div class="app-icon">G</div>
-                <div class="app-info">
-                    <div class="app-name">git_helper</div>
-                    <div class="app-desc">/git_helper/</div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- 2. 常用推荐 -->
-    <div class="section-card">
-        <div class="section-header">
-            <div class="section-title-wrapper">
-                <div class="title-bar"></div>
-                <div class="title-text-container">
-                    <span class="section-title">常用推荐</span>
-                    <span class="badge">4</span>
-                </div>
-            </div>
-            <div class="more-icon">•••</div>
-        </div>
-
-        <div class="app-grid">
-            <div class="app-item">
-                <div class="app-icon">G</div>
-                <div class="app-info">
-                    <div class="app-name">GitHub</div>
-                    <div class="app-desc">代码托管与开源社区</div>
-                </div>
-            </div>
-            <div class="app-item">
-                <div class="app-icon" style="background-color: #e6f7ff; color: #1890ff;">Z</div>
-                <div class="app-info">
-                    <div class="app-name">知乎</div>
-                    <div class="app-desc">深度内容问答社区</div>
-                </div>
-            </div>
-            <div class="app-item">
-                <div class="app-icon" style="background-color: #fff0f6; color: #eb2f96;">B</div>
-                <div class="app-info">
-                    <div class="app-name">哔哩哔哩</div>
-                    <div class="app-desc">弹幕视频分享网站</div>
-                </div>
-            </div>
-            <div class="app-item">
-                <div class="app-icon" style="background-color: #f6ffed; color: #52c41a;">V</div>
-                <div class="app-info">
-                    <div class="app-name">V2EX</div>
-                    <div class="app-desc">创意工作者讨论社区</div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- 3. 图四样式：推荐电影（竖版海报卡片） -->
-    <div class="section-card">
-        <div class="section-header">
-            <div class="section-title-wrapper">
-                <div class="title-bar" style="background-color: #722ed1;"></div>
-                <div class="title-text-container">
-                    <span class="section-title">推荐电影</span>
-                    <span class="badge">6</span>
-                </div>
-            </div>
-            <div class="more-icon">•••</div>
-        </div>
-
-        <div class="movie-grid">
-            <div class="movie-item">
-                <img class="movie-cover" src="https://picsum.photos/seed/m1/300/450" alt="海报">
-                <div class="movie-info">
-                    <div class="movie-title">千与千寻 千と千尋の神隠し (2001)</div>
-                </div>
-            </div>
-            <div class="movie-item">
-                <img class="movie-cover" src="https://picsum.photos/seed/m2/300/450" alt="海报">
-                <div class="movie-info">
-                    <div class="movie-title">美丽人生 La vita è bella (1997)</div>
-                </div>
-            </div>
-            <div class="movie-item">
-                <img class="movie-cover" src="https://picsum.photos/seed/m3/300/450" alt="海报">
-                <div class="movie-info">
-                    <div class="movie-title">这个杀手不太冷 Léon (1994)</div>
-                </div>
-            </div>
-            <div class="movie-item">
-                <img class="movie-cover" src="https://picsum.photos/seed/m4/300/450" alt="海报">
-                <div class="movie-info">
-                    <div class="movie-title">阿甘正传 Forrest Gump (1994)</div>
-                </div>
-            </div>
-            <div class="movie-item">
-                <img class="movie-cover" src="https://picsum.photos/seed/m5/300/450" alt="海报">
-                <div class="movie-info">
-                    <div class="movie-title">霸王别姬 (1993)</div>
-                </div>
-            </div>
-            <div class="movie-item">
-                <img class="movie-cover" src="https://picsum.photos/seed/m6/300/450" alt="海报">
-                <div class="movie-info">
-                    <div class="movie-title">肖申克的救赎 The Shawshank...</div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- 4. 图五样式：CES 现场报道（横版图片两行网格） -->
-    <div class="section-card">
-        <div class="section-header">
-            <div class="section-title-wrapper">
-                <div class="title-bar" style="background-color: #fa8c16;"></div>
-                <div class="title-text-container">
-                    <span class="section-title">CES 现场报道</span>
-                    <span class="badge">12</span>
-                </div>
-            </div>
-            <div class="more-icon">•••</div>
-        </div>
-
-        <div class="article-grid">
-            <!-- 第一行 -->
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a1/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">可塑性极强的玻璃，在设计师手里有了更多可能</div>
-                </div>
-            </div>
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a2/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">废旧共享单车如何变成微型共享书屋？</div>
-                </div>
-            </div>
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a3/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">荧光灯管与混凝土块的组合，可以玩出多少花样？</div>
-                </div>
-            </div>
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a4/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">混凝土做的模块化收纳框，还能改成搁架用</div>
-                </div>
-            </div>
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a5/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">这个用拉伸材料做的头盔，还能帮你呼叫救护车</div>
-                </div>
-            </div>
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a6/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">你如何选择字体，简单易读还是好看有趣？</div>
-                </div>
-            </div>
-
-            <!-- 第二行 -->
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a7/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">家里空间小？你需要几把可以悬挂在墙上的椅子</div>
-                </div>
-            </div>
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a8/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">宜家厨房家具又被改造了，色彩是亮点</div>
-                </div>
-            </div>
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a9/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">这款诞生50年的扶手椅，推出了特别版配色</div>
-                </div>
-            </div>
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a10/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">让家和办公室界限变得模糊的一组家具</div>
-                </div>
-            </div>
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a11/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">这个酒店设计奖，挖掘过去一年体验最好的酒店</div>
-                </div>
-            </div>
-            <div class="article-item">
-                <img class="article-cover" src="https://picsum.photos/seed/a12/300/225" alt="文章图片">
-                <div class="article-info">
-                    <div class="article-title">一款可移动办公桌，挂墙上当作白板就能写写画画</div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-</div>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/templates/index3.html b/templates/index3.html
deleted file mode 100644
index 3caf41b..0000000
--- a/templates/index3.html
+++ /dev/null
@@ -1,920 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>STASH - 完整联动与版心对齐布局</title>
-    <style>
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-
-        html {
-            scroll-behavior: smooth; /* 启用原生平滑滚动 */
-        }
-
-        body {
-            background-color: #f5f6f8;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            color: #333;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-
-        /* 统一版心最大宽度约束 */
-        .layout-container {
-            max-width: 1380px;
-            width: 100%;
-            margin: 0 auto;
-            padding: 0 20px;
-        }
-
-        /* ------------------ 1. 顶部 Header 组件 (宽度对齐下方) ------------------ */
-        .header-outer {
-            background-color: #ffffff;
-            border-bottom: 1px solid #e8e8e8;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-        }
-
-        .header-inner {
-            height: 60px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .header-left {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .logo-icon {
-            width: 32px;
-            height: 32px;
-            background-color: #0f172a;
-            color: #fff;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-            font-size: 16px;
-        }
-
-        .logo-text {
-            font-size: 18px;
-            font-weight: 800;
-            color: #0f172a;
-            letter-spacing: 0.5px;
-        }
-
-        .header-center-info {
-            display: flex;
-            align-items: center;
-            gap: 20px;
-            font-size: 13px;
-            color: #64748b;
-        }
-
-        .info-tag {
-            display: inline-flex;
-            align-items: center;
-            padding: 2px 8px;
-            border-radius: 4px;
-            background-color: #e6f4ff;
-            color: #1677ff;
-            font-size: 12px;
-            margin-right: 6px;
-        }
-
-        .info-item {
-            display: flex;
-            align-items: center;
-        }
-
-        .header-right {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            color: #64748b;
-        }
-
-        .header-icon-btn {
-            cursor: pointer;
-            padding: 6px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: background-color 0.2s;
-        }
-
-        .header-icon-btn:hover {
-            background-color: #f1f5f9;
-            color: #0f172a;
-        }
-
-        /* 搜索栏区域（宽度与下方卡片版心保持对齐） */
-        .search-container {
-            padding: 16px 0 0;
-            display: flex;
-            justify-content: center;
-        }
-
-        .search-box {
-            width: 100%;
-            max-width: 520px;
-            position: relative;
-            display: flex;
-            align-items: center;
-        }
-
-        .search-input {
-            width: 100%;
-            height: 40px;
-            padding: 0 16px 0 40px;
-            border-radius: 20px;
-            border: 1px solid #e2e8f0;
-            background-color: #ffffff;
-            font-size: 13px;
-            outline: none;
-            transition: all 0.2s;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
-        }
-
-        .search-input:focus {
-            border-color: #1677ff;
-            box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
-        }
-
-        .search-icon {
-            position: absolute;
-            left: 14px;
-            color: #94a3b8;
-            font-size: 14px;
-            pointer-events: none;
-        }
-
-        /* ------------------ 主体 Layout 布局 ------------------ */
-        .main-layout {
-            display: flex;
-            margin: 20px auto 40px;
-            gap: 20px;
-        }
-
-        /* ------------------ 2. 左侧侧边栏组件 ------------------ */
-        .sidebar {
-            width: 260px;
-            flex-shrink: 0;
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            position: sticky;
-            top: 76px;
-            align-self: flex-start;
-        }
-
-        .sidebar-card {
-            background-color: #ffffff;
-            border-radius: 12px;
-            padding: 18px;
-            border: 1px solid #f0f0f0;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
-        }
-
-        /* 用户卡片 */
-        .user-card {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-        }
-
-        .avatar-wrapper {
-            position: relative;
-            margin-bottom: 10px;
-        }
-
-        .avatar {
-            width: 64px;
-            height: 64px;
-            border-radius: 50%;
-            background-color: #dbeafe;
-            color: #1d4ed8;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 30px;
-        }
-
-        .verified-badge {
-            position: absolute;
-            bottom: 0;
-            right: 2px;
-            width: 18px;
-            height: 18px;
-            background-color: #f59e0b;
-            color: #fff;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 10px;
-            border: 2px solid #fff;
-        }
-
-        .user-name {
-            font-size: 15px;
-            font-weight: 700;
-            color: #1e293b;
-        }
-
-        .user-role {
-            font-size: 11px;
-            color: #64748b;
-            background-color: #f1f5f9;
-            padding: 2px 8px;
-            border-radius: 10px;
-            margin: 6px 0 10px;
-            border: 1px solid #e2e8f0;
-        }
-
-        .user-desc {
-            font-size: 12px;
-            color: #64748b;
-            line-height: 1.5;
-            margin-bottom: 8px;
-        }
-
-        .user-ip {
-            font-size: 12px;
-            color: #94a3b8;
-        }
-
-        /* 本地服务状态卡片 */
-        .status-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 12px;
-        }
-
-        .status-title {
-            font-size: 14px;
-            font-weight: 700;
-            color: #1e293b;
-        }
-
-        .status-pill {
-            font-size: 11px;
-            padding: 2px 8px;
-            border-radius: 12px;
-            background-color: #f1f5f9;
-            color: #64748b;
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .status-pill::before {
-            content: '';
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background-color: #94a3b8;
-        }
-
-        .status-info-row {
-            display: flex;
-            justify-content: space-between;
-            font-size: 13px;
-            margin-bottom: 8px;
-        }
-
-        .status-label {
-            color: #64748b;
-        }
-
-        .status-value {
-            font-weight: 600;
-            color: #1e293b;
-        }
-
-        .status-actions {
-            display: flex;
-            gap: 8px;
-            margin-top: 14px;
-        }
-
-        .action-btn {
-            flex: 1;
-            padding: 6px 0;
-            border-radius: 16px;
-            border: 1px solid #e2e8f0;
-            background-color: #fff;
-            font-size: 12px;
-            color: #475569;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-            transition: all 0.2s;
-        }
-
-        .action-btn:hover {
-            border-color: #cbd5e1;
-            background-color: #f8fafc;
-        }
-
-        /* 侧边分类导航菜单（对应右侧主标题） */
-        .menu-card {
-            padding: 10px;
-        }
-
-        .menu-group-title {
-            font-size: 12px;
-            font-weight: 600;
-            color: #94a3b8;
-            padding: 6px 10px;
-            text-transform: uppercase;
-        }
-
-        .menu-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 12px;
-            font-size: 13px;
-            color: #334155;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.2s;
-            text-decoration: none;
-            margin-bottom: 2px;
-        }
-
-        .menu-item:hover {
-            background-color: #f8fafc;
-            color: #1677ff;
-        }
-
-        .menu-item.active {
-            background-color: #e6f4ff;
-            color: #1677ff;
-            font-weight: 600;
-        }
-
-        /* ------------------ 3. 右侧主内容区域 ------------------ */
-        .content-area {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-            min-width: 0;
-        }
-
-        /* 大框样式（图二规范） */
-        .section-card {
-            background-color: #ffffff;
-            border-radius: 12px;
-            padding: 20px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
-            border: 1px solid #f0f0f0;
-            scroll-margin-top: 80px; /* 留出顶部固定 Header 的高度避免遮挡 */
-        }
-
-        .section-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 16px;
-        }
-
-        .section-title-wrapper {
-            display: flex;
-            align-items: center;
-        }
-
-        .title-bar {
-            width: 4px;
-            height: 16px;
-            background-color: #1677ff;
-            border-radius: 2px;
-            margin-right: 8px;
-        }
-
-        .title-text-container {
-            position: relative;
-            display: inline-flex;
-            align-items: center;
-        }
-
-        .section-title {
-            font-size: 16px;
-            font-weight: 600;
-            color: #1f2329;
-            line-height: 1.2;
-        }
-
-        /* 角标相对于标题右上角定位 */
-        .badge {
-            position: absolute;
-            top: -8px;
-            right: -18px;
-            background-color: #ff4d4f;
-            color: #ffffff;
-            font-size: 11px;
-            font-weight: bold;
-            height: 16px;
-            min-width: 16px;
-            padding: 0 4px;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            line-height: 1;
-            box-shadow: 0 1px 3px rgba(255, 77, 79, 0.3);
-        }
-
-        .more-icon {
-            color: #8c8c8c;
-            font-size: 18px;
-            cursor: pointer;
-            letter-spacing: 2px;
-            padding: 2px 6px;
-            border-radius: 4px;
-            transition: background 0.2s;
-        }
-
-        .more-icon:hover {
-            color: #595959;
-            background-color: #f5f5f5;
-        }
-
-        /* 常规卡片网格 */
-        .app-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
-            gap: 12px;
-        }
-
-        .app-item {
-            display: flex;
-            align-items: center;
-            padding: 12px 14px;
-            background-color: #f9f9fb;
-            border-radius: 8px;
-            border: 1px solid #f0f0f0;
-            transition: all 0.2s ease;
-            cursor: pointer;
-        }
-
-        .app-item:hover {
-            background-color: #ffffff;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
-            border-color: #e6e6e6;
-            transform: translateY(-1px);
-        }
-
-        .app-icon {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background-color: #e8f3ff;
-            color: #1677ff;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-            font-size: 16px;
-            margin-right: 12px;
-            flex-shrink: 0;
-        }
-
-        .app-info {
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-
-        .app-name {
-            font-size: 14px;
-            font-weight: 600;
-            color: #262626;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .app-desc {
-            font-size: 12px;
-            color: #8c8c8c;
-            margin-top: 2px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        /* 推荐电影网格 */
-        .movie-grid {
-            display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 12px;
-        }
-
-        @media (max-width: 1100px) {
-            .movie-grid { grid-template-columns: repeat(3, 1fr); }
-        }
-
-        .movie-item {
-            position: relative;
-            border-radius: 8px;
-            overflow: hidden;
-            aspect-ratio: 2 / 3;
-            background-color: #e0e0e0;
-            cursor: pointer;
-            transition: transform 0.2s ease;
-        }
-
-        .movie-item:hover {
-            transform: translateY(-2px);
-        }
-
-        .movie-cover {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            display: block;
-        }
-
-        .movie-info {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 20px 8px 8px;
-            background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
-            color: #ffffff;
-        }
-
-        .movie-title {
-            font-size: 12px;
-            font-weight: 500;
-            line-height: 1.3;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-
-        /* CES 现场报道网格 */
-        .article-grid {
-            display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 10px;
-        }
-
-        @media (max-width: 1100px) {
-            .article-grid { grid-template-columns: repeat(3, 1fr); }
-        }
-
-        .article-item {
-            position: relative;
-            border-radius: 6px;
-            overflow: hidden;
-            aspect-ratio: 4 / 3;
-            background-color: #e0e0e0;
-            cursor: pointer;
-            transition: transform 0.2s ease;
-        }
-
-        .article-item:hover {
-            transform: translateY(-2px);
-        }
-
-        .article-cover {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            display: block;
-        }
-
-        .article-info {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 16px 6px 6px;
-            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
-            color: #ffffff;
-        }
-
-        .article-title {
-            font-size: 11px;
-            line-height: 1.3;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-    </style>
-</head>
-<body>
-
-<!-- 1. 顶部 Header (固定顶部且与下方容器宽度一致) -->
-<header class="header-outer">
-    <div class="layout-container header-inner">
-        <div class="header-left">
-            <div class="logo-icon">S</div>
-            <span class="logo-text">STASH</span>
-        </div>
-
-        <div class="header-center-info">
-            <div class="info-item">
-                <span>共 1 个本地应用</span>
-            </div>
-            <div class="info-item">
-                <span class="info-tag">本地</span>
-                <span>git_helper</span>
-            </div>
-            <div class="info-item">
-                <span class="info-tag" style="background-color: #f0fdf4; color: #16a34a;">状态</span>
-                <span>等待服务连接</span>
-            </div>
-        </div>
-
-        <div class="header-right">
-            <div class="header-icon-btn" title="搜索">🔍</div>
-            <div class="header-icon-btn" title="个人账户">👤</div>
-        </div>
-    </div>
-</header>
-
-<!-- 搜索框区域 -->
-<div class="layout-container search-container">
-    <div class="search-box">
-        <span class="search-icon">🔍</span>
-        <input type="text" class="search-input" placeholder="搜索本地项目...">
-    </div>
-</div>
-
-<!-- 主体布局 -->
-<div class="layout-container main-layout">
-
-    <!-- 2. 左侧侧边栏组件 -->
-    <aside class="sidebar">
-
-        <!-- 用户信息卡片 -->
-        <div class="sidebar-card user-card">
-            <div class="avatar-wrapper">
-                <div class="avatar">👤</div>
-                <div class="verified-badge">✓</div>
-            </div>
-            <div class="user-name">本地管理员</div>
-            <div class="user-role">管理员</div>
-            <div class="user-desc">本地静态站点托管与预览，所有项目都运行在这台机器上。</div>
-            <div class="user-ip">IP地址: 局域网</div>
-        </div>
-
-        <!-- 本地服务状态卡片 -->
-        <div class="sidebar-card">
-            <div class="status-header">
-                <span class="status-title">本地服务</span>
-                <span class="status-pill">未连接</span>
-            </div>
-            <div class="status-info-row">
-                <span class="status-label">项目数</span>
-                <span class="status-value">1</span>
-            </div>
-            <div class="status-info-row">
-                <span class="status-label">访问地址</span>
-                <span class="status-value">127.0.0.1:8080</span>
-            </div>
-            <div class="status-actions">
-                <button class="action-btn">🔄 重新扫描</button>
-                <button class="action-btn">🔗 查看接口</button>
-            </div>
-        </div>
-
-        <!-- 分类导航菜单（与右侧主标题一致） -->
-        <div class="sidebar-card menu-card">
-            <div class="menu-group-title">快速导航</div>
-
-            <a href="#section-local" class="menu-item active" onclick="setActive(this)">
-                <span>本地服务</span>
-                <span style="font-size: 11px;">1</span>
-            </a>
-            <a href="#section-recommend" class="menu-item" onclick="setActive(this)">
-                <span>常用推荐</span>
-                <span style="font-size: 11px;">4</span>
-            </a>
-            <a href="#section-movie" class="menu-item" onclick="setActive(this)">
-                <span>推荐电影</span>
-                <span style="font-size: 11px;">6</span>
-            </a>
-            <a href="#section-ces" class="menu-item" onclick="setActive(this)">
-                <span>CES 现场报道</span>
-                <span style="font-size: 11px;">12</span>
-            </a>
-        </div>
-
-    </aside>
-
-    <!-- 3. 右侧主内容区域 -->
-    <main class="content-area">
-
-        <!-- 1. 本地服务 -->
-        <section id="section-local" class="section-card">
-            <div class="section-header">
-                <div class="section-title-wrapper">
-                    <div class="title-bar"></div>
-                    <div class="title-text-container">
-                        <span class="section-title">本地服务</span>
-                        <span class="badge">1</span>
-                    </div>
-                </div>
-                <div class="more-icon" title="更多操作">•••</div>
-            </div>
-
-            <div class="app-grid">
-                <div class="app-item">
-                    <div class="app-icon">G</div>
-                    <div class="app-info">
-                        <div class="app-name">git_helper</div>
-                        <div class="app-desc">/git_helper/</div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- 2. 常用推荐 -->
-        <section id="section-recommend" class="section-card">
-            <div class="section-header">
-                <div class="section-title-wrapper">
-                    <div class="title-bar"></div>
-                    <div class="title-text-container">
-                        <span class="section-title">常用推荐</span>
-                        <span class="badge">4</span>
-                    </div>
-                </div>
-                <div class="more-icon" title="更多操作">•••</div>
-            </div>
-
-            <div class="app-grid">
-                <div class="app-item">
-                    <div class="app-icon">G</div>
-                    <div class="app-info">
-                        <div class="app-name">GitHub</div>
-                        <div class="app-desc">代码托管与开源社区</div>
-                    </div>
-                </div>
-                <div class="app-item">
-                    <div class="app-icon" style="background-color: #e6f7ff; color: #1890ff;">Z</div>
-                    <div class="app-info">
-                        <div class="app-name">知乎</div>
-                        <div class="app-desc">深度内容问答社区</div>
-                    </div>
-                </div>
-                <div class="app-item">
-                    <div class="app-icon" style="background-color: #fff0f6; color: #eb2f96;">B</div>
-                    <div class="app-info">
-                        <div class="app-name">哔哩哔哩</div>
-                        <div class="app-desc">弹幕视频分享网站</div>
-                    </div>
-                </div>
-                <div class="app-item">
-                    <div class="app-icon" style="background-color: #f6ffed; color: #52c41a;">V</div>
-                    <div class="app-info">
-                        <div class="app-name">V2EX</div>
-                        <div class="app-desc">创意工作者讨论社区</div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- 3. 推荐电影 -->
-        <section id="section-movie" class="section-card">
-            <div class="section-header">
-                <div class="section-title-wrapper">
-                    <div class="title-bar" style="background-color: #722ed1;"></div>
-                    <div class="title-text-container">
-                        <span class="section-title">推荐电影</span>
-                        <span class="badge">6</span>
-                    </div>
-                </div>
-                <div class="more-icon" title="更多操作">•••</div>
-            </div>
-
-            <div class="movie-grid">
-                <div class="movie-item">
-                    <img class="movie-cover" src="https://picsum.photos/seed/m1/300/450" alt="海报">
-                    <div class="movie-info">
-                        <div class="movie-title">千与千寻 千と千尋の神隠し (2001)</div>
-                    </div>
-                </div>
-                <div class="movie-item">
-                    <img class="movie-cover" src="https://picsum.photos/seed/m2/300/450" alt="海报">
-                    <div class="movie-info">
-                        <div class="movie-title">美丽人生 La vita è bella (1997)</div>
-                    </div>
-                </div>
-                <div class="movie-item">
-                    <img class="movie-cover" src="https://picsum.photos/seed/m3/300/450" alt="海报">
-                    <div class="movie-info">
-                        <div class="movie-title">这个杀手不太冷 Léon (1994)</div>
-                    </div>
-                </div>
-                <div class="movie-item">
-                    <img class="movie-cover" src="https://picsum.photos/seed/m4/300/450" alt="海报">
-                    <div class="movie-info">
-                        <div class="movie-title">阿甘正传 Forrest Gump (1994)</div>
-                    </div>
-                </div>
-                <div class="movie-item">
-                    <img class="movie-cover" src="https://picsum.photos/seed/m5/300/450" alt="海报">
-                    <div class="movie-info">
-                        <div class="movie-title">霸王别姬 (1993)</div>
-                    </div>
-                </div>
-                <div class="movie-item">
-                    <img class="movie-cover" src="https://picsum.photos/seed/m6/300/450" alt="海报">
-                    <div class="movie-info">
-                        <div class="movie-title">肖申克的救赎 The Shawshank...</div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- 4. CES 现场报道 -->
-        <section id="section-ces" class="section-card">
-            <div class="section-header">
-                <div class="section-title-wrapper">
-                    <div class="title-bar" style="background-color: #fa8c16;"></div>
-                    <div class="title-text-container">
-                        <span class="section-title">CES 现场报道</span>
-                        <span class="badge">12</span>
-                    </div>
-                </div>
-                <div class="more-icon" title="更多操作">•••</div>
-            </div>
-
-            <div class="article-grid">
-                <div class="article-item">
-                    <img class="article-cover" src="https://picsum.photos/seed/a1/300/225" alt="文章图片">
-                    <div class="article-info">
-                        <div class="article-title">可塑性极强的玻璃，在设计师手里有了更多可能</div>
-                    </div>
-                </div>
-                <div class="article-item">
-                    <img class="article-cover" src="https://picsum.photos/seed/a2/300/225" alt="文章图片">
-                    <div class="article-info">
-                        <div class="article-title">废旧共享单车如何变成微型共享书屋？</div>
-                    </div>
-                </div>
-                <div class="article-item">
-                    <img class="article-cover" src="https://picsum.photos/seed/a3/300/225" alt="文章图片">
-                    <div class="article-info">
-                        <div class="article-title">荧光灯管与混凝土块的组合，可以玩出多少花样？</div>
-                    </div>
-                </div>
-                <div class="article-item">
-                    <img class="article-cover" src="https://picsum.photos/seed/a4/300/225" alt="文章图片">
-                    <div class="article-info">
-                        <div class="article-title">混凝土做的模块化收纳框，还能改成搁架用</div>
-                    </div>
-                </div>
-                <div class="article-item">
-                    <img class="article-cover" src="https://picsum.photos/seed/a5/300/225" alt="文章图片">
-                    <div class="article-info">
-                        <div class="article-title">这个用拉伸材料做的头盔，还能帮你呼叫救护车</div>
-                    </div>
-                </div>
-                <div class="article-item">
-                    <img class="article-cover" src="https://picsum.photos/seed/a6/300/225" alt="文章图片">
-                    <div class="article-info">
-                        <div class="article-title">你如何选择字体，简单易读还是好看有趣？</div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-    </main>
-</div>
-
-<script>
-    // 切换左侧菜单激活高亮样式
-    function setActive(element) {
-        const items = document.querySelectorAll('.menu-item');
-        items.forEach(item => item.classList.remove('active'));
-        element.classList.add('active');
-    }
-</script>
-</body>
-</html>
\ No newline at end of file
diff --git a/templates/index4.html b/templates/index4.html
deleted file mode 100644
index 29ee5bf..0000000
--- a/templates/index4.html
+++ /dev/null
@@ -1,1378 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>STASH - 完整联动 dashboard</title>
-  <style>
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    body {
-      background-color: #f5f6f8;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-      color: #333;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    /* 版心统一宽度约束 */
-    .layout-container {
-      max-width: 1380px;
-      width: 100%;
-      margin: 0 auto;
-      padding: 0 20px;
-    }
-
-    /* ------------------ 1. 顶部 Header 组件 ------------------ */
-    .header-outer {
-      background-color: #ffffff;
-      border-bottom: 1px solid #e8e8e8;
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-
-    .header-inner {
-      height: 60px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-
-    .logo-icon {
-      width: 32px;
-      height: 32px;
-      background-color: #0f172a;
-      color: #fff;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: bold;
-      font-size: 16px;
-    }
-
-    .logo-text {
-      font-size: 18px;
-      font-weight: 800;
-      color: #0f172a;
-      letter-spacing: 0.5px;
-    }
-
-    .header-center-info {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      font-size: 13px;
-      color: #64748b;
-    }
-
-    .info-tag {
-      display: inline-flex;
-      align-items: center;
-      padding: 2px 8px;
-      border-radius: 4px;
-      background-color: #e6f4ff;
-      color: #1677ff;
-      font-size: 12px;
-      margin-right: 6px;
-    }
-
-    .info-item {
-      display: flex;
-      align-items: center;
-    }
-
-    .header-right {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      color: #64748b;
-    }
-
-    .header-icon-btn {
-      cursor: pointer;
-      padding: 6px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background-color 0.2s;
-    }
-
-    .header-icon-btn:hover {
-      background-color: #f1f5f9;
-      color: #0f172a;
-    }
-
-    /* 搜索栏区域 */
-    .search-container {
-      padding: 16px 0 0;
-      display: flex;
-      justify-content: center;
-    }
-
-    .search-box {
-      width: 100%;
-      max-width: 520px;
-      position: relative;
-      display: flex;
-      align-items: center;
-    }
-
-    .search-input {
-      width: 100%;
-      height: 40px;
-      padding: 0 16px 0 40px;
-      border-radius: 20px;
-      border: 1px solid #e2e8f0;
-      background-color: #ffffff;
-      font-size: 13px;
-      outline: none;
-      transition: all 0.2s;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
-    }
-
-    .search-input:focus {
-      border-color: #1677ff;
-      box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.1);
-    }
-
-    .search-icon {
-      position: absolute;
-      left: 14px;
-      color: #94a3b8;
-      font-size: 14px;
-      pointer-events: none;
-    }
-
-    /* ------------------ 主体 Layout 布局 ------------------ */
-    .main-layout {
-      display: flex;
-      margin: 20px auto 40px;
-      gap: 20px;
-    }
-
-    /* ------------------ 2. 左侧侧边栏组件 ------------------ */
-    .sidebar {
-      width: 260px;
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      position: sticky;
-      top: 76px;
-      align-self: flex-start;
-    }
-
-    .sidebar-card {
-      background-color: #ffffff;
-      border-radius: 12px;
-      padding: 18px;
-      border: 1px solid #f0f0f0;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
-    }
-
-    /* 用户卡片 */
-    .user-card {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-    }
-
-    .avatar-wrapper {
-      position: relative;
-      margin-bottom: 10px;
-    }
-
-    .avatar {
-      width: 64px;
-      height: 64px;
-      border-radius: 50%;
-      background-color: #dbeafe;
-      color: #1d4ed8;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 30px;
-    }
-
-    .verified-badge {
-      position: absolute;
-      bottom: 0;
-      right: 2px;
-      width: 18px;
-      height: 18px;
-      background-color: #f59e0b;
-      color: #fff;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 10px;
-      border: 2px solid #fff;
-    }
-
-    .user-name {
-      font-size: 15px;
-      font-weight: 700;
-      color: #1e293b;
-    }
-
-    .user-role {
-      font-size: 11px;
-      color: #64748b;
-      background-color: #f1f5f9;
-      padding: 2px 8px;
-      border-radius: 10px;
-      margin: 6px 0 10px;
-      border: 1px solid #e2e8f0;
-    }
-
-    .user-desc {
-      font-size: 12px;
-      color: #64748b;
-      line-height: 1.5;
-      margin-bottom: 8px;
-    }
-
-    .user-ip {
-      font-size: 12px;
-      color: #94a3b8;
-    }
-
-    /* 本地服务状态卡片 */
-    .status-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 12px;
-    }
-
-    .status-title {
-      font-size: 14px;
-      font-weight: 700;
-      color: #1e293b;
-    }
-
-    .status-pill {
-      font-size: 11px;
-      padding: 2px 8px;
-      border-radius: 12px;
-      background-color: #f1f5f9;
-      color: #64748b;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-
-    .status-pill::before {
-      content: '';
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: #94a3b8;
-    }
-
-    .status-info-row {
-      display: flex;
-      justify-content: space-between;
-      font-size: 13px;
-      margin-bottom: 8px;
-    }
-
-    .status-label {
-      color: #64748b;
-    }
-
-    .status-value {
-      font-weight: 600;
-      color: #1e293b;
-    }
-
-    .status-actions {
-      display: flex;
-      gap: 8px;
-      margin-top: 14px;
-    }
-
-    .action-btn {
-      flex: 1;
-      padding: 6px 0;
-      border-radius: 16px;
-      border: 1px solid #e2e8f0;
-      background-color: #fff;
-      font-size: 12px;
-      color: #475569;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 4px;
-      transition: all 0.2s;
-    }
-
-    .action-btn:hover {
-      border-color: #cbd5e1;
-      background-color: #f8fafc;
-    }
-
-    /* 分类导航树结构 */
-    .menu-card {
-      padding: 12px 10px;
-    }
-
-    .nav-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 8px 10px;
-      font-size: 13px;
-      color: #334155;
-      border-radius: 8px;
-      cursor: pointer;
-      transition: all 0.2s;
-      user-select: none;
-      margin-bottom: 2px;
-    }
-
-    .nav-item:hover {
-      background-color: #f8fafc;
-      color: #1677ff;
-    }
-
-    .nav-item.active {
-      background-color: #e6f4ff;
-      color: #1677ff;
-      font-weight: 600;
-    }
-
-    .arrow-icon {
-      font-size: 10px;
-      color: #94a3b8;
-      transition: transform 0.2s;
-    }
-
-    .arrow-icon.open {
-      transform: rotate(180deg);
-    }
-
-    .sub-menu {
-      padding-left: 12px;
-      display: none;
-      flex-direction: column;
-      gap: 2px;
-      margin-top: 2px;
-    }
-
-    .sub-menu.show {
-      display: flex;
-    }
-
-    .sub-nav-item {
-      padding: 7px 12px;
-      font-size: 12px;
-      color: #64748b;
-      border-radius: 6px;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-
-    .sub-nav-item:hover {
-      background-color: #f1f5f9;
-      color: #1e293b;
-    }
-
-    .sub-nav-item.active {
-      background-color: #e6f4ff;
-      color: #1677ff;
-      font-weight: 600;
-    }
-
-    /* ------------------ 3. 右侧主内容区域 ------------------ */
-    .content-area {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-      min-width: 0;
-    }
-
-    /* 首页大框基础样式 */
-    .section-card {
-      background-color: #ffffff;
-      border-radius: 12px;
-      padding: 20px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
-      border: 1px solid #f0f0f0;
-    }
-
-    .section-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 16px;
-    }
-
-    .section-title-wrapper {
-      display: flex;
-      align-items: center;
-    }
-
-    .title-bar {
-      width: 4px;
-      height: 16px;
-      background-color: #1677ff;
-      border-radius: 2px;
-      margin-right: 8px;
-    }
-
-    .title-text-container {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .section-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: #1f2329;
-      line-height: 1.2;
-    }
-
-    /* 角标位于标题右上角 */
-    .badge {
-      position: absolute;
-      top: -8px;
-      right: -18px;
-      background-color: #ff4d4f;
-      color: #ffffff;
-      font-size: 11px;
-      font-weight: bold;
-      height: 16px;
-      min-width: 16px;
-      padding: 0 4px;
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      line-height: 1;
-      box-shadow: 0 1px 3px rgba(255, 77, 79, 0.3);
-    }
-
-    .more-icon {
-      color: #8c8c8c;
-      font-size: 18px;
-      cursor: pointer;
-      letter-spacing: 2px;
-      padding: 2px 6px;
-      border-radius: 4px;
-      transition: background 0.2s;
-    }
-
-    .more-icon:hover {
-      color: #595959;
-      background-color: #f5f5f5;
-    }
-
-    /* 首页常规 4 列网格布局 */
-    .app-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 12px;
-    }
-
-    @media (max-width: 1100px) {
-      .app-grid { grid-template-columns: repeat(2, 1fr); }
-    }
-
-    .app-item {
-      display: flex;
-      align-items: center;
-      padding: 12px 14px;
-      background-color: #f9f9fb;
-      border-radius: 8px;
-      border: 1px solid #f0f0f0;
-      transition: all 0.2s ease;
-      cursor: pointer;
-    }
-
-    .app-item:hover {
-      background-color: #ffffff;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
-      border-color: #e6e6e6;
-      transform: translateY(-1px);
-    }
-
-    .app-icon {
-      width: 36px;
-      height: 36px;
-      border-radius: 8px;
-      background-color: #e8f3ff;
-      color: #1677ff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: bold;
-      font-size: 16px;
-      margin-right: 12px;
-      flex-shrink: 0;
-    }
-
-    .app-info {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .app-name {
-      font-size: 14px;
-      font-weight: 600;
-      color: #262626;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .app-desc {
-      font-size: 12px;
-      color: #8c8c8c;
-      margin-top: 2px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    /* 推荐电影 6列网格 */
-    .movie-grid {
-      display: grid;
-      grid-template-columns: repeat(6, 1fr);
-      gap: 12px;
-    }
-
-    @media (max-width: 1100px) {
-      .movie-grid { grid-template-columns: repeat(3, 1fr); }
-    }
-
-    .movie-item {
-      position: relative;
-      border-radius: 8px;
-      overflow: hidden;
-      aspect-ratio: 2 / 3;
-      background-color: #e0e0e0;
-      cursor: pointer;
-      transition: transform 0.2s ease;
-    }
-
-    .movie-item:hover {
-      transform: translateY(-2px);
-    }
-
-    .movie-cover {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-    }
-
-    .movie-info {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 20px 8px 8px;
-      background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
-      color: #ffffff;
-    }
-
-    .movie-title {
-      font-size: 12px;
-      font-weight: 500;
-      line-height: 1.3;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-
-    /* CES 现场报道网格 */
-    .article-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 12px;
-    }
-
-    @media (max-width: 1100px) {
-      .article-grid { grid-template-columns: repeat(2, 1fr); }
-    }
-
-    .article-item {
-      position: relative;
-      border-radius: 6px;
-      overflow: hidden;
-      aspect-ratio: 4 / 3;
-      background-color: #e0e0e0;
-      cursor: pointer;
-      transition: transform 0.2s ease;
-    }
-
-    .article-item:hover {
-      transform: translateY(-2px);
-    }
-
-    .article-cover {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-    }
-
-    .article-info {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 16px 6px 6px;
-      background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
-      color: #ffffff;
-    }
-
-    .article-title {
-      font-size: 11px;
-      line-height: 1.3;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-
-    /* ------------------ 4. 右侧明细页面面板 (全屏联动视图) ------------------ */
-    .detail-view {
-      display: none;
-      flex-direction: column;
-      gap: 20px;
-    }
-
-    .detail-header-nav {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      background-color: #fff;
-      padding: 12px 20px;
-      border-radius: 12px;
-      border: 1px solid #f0f0f0;
-    }
-
-    .back-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      color: #1677ff;
-      font-size: 13px;
-      cursor: pointer;
-      font-weight: 500;
-    }
-
-    .back-btn:hover {
-      text-decoration: underline;
-    }
-
-    .detail-page-hero {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      padding: 24px 0 12px;
-      text-align: center;
-    }
-
-    .hero-badge-icon {
-      width: 44px;
-      height: 44px;
-      background-color: #e6f4ff;
-      color: #1677ff;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 22px;
-      margin-bottom: 8px;
-    }
-
-    .hero-title {
-      font-size: 22px;
-      font-weight: 700;
-      color: #1f2329;
-    }
-
-    .hero-count {
-      font-size: 13px;
-      color: #8c8c8c;
-      margin-top: 4px;
-    }
-
-    /* 明细页大网格：一排4列 */
-    .detail-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 16px;
-    }
-
-    @media (max-width: 1100px) {
-      .detail-grid { grid-template-columns: repeat(2, 1fr); }
-    }
-
-    .sub-group-block {
-      margin-bottom: 12px;
-    }
-
-    .sub-group-header {
-      font-size: 15px;
-      font-weight: 600;
-      color: #1f2329;
-      margin-bottom: 12px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .sub-group-header::before {
-      content: '';
-      width: 3px;
-      height: 14px;
-      background-color: #1677ff;
-      border-radius: 2px;
-    }
-
-    /* 图一：CES 明细页上图下文白色卡片布局 */
-    .ces-card-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 16px;
-    }
-
-    @media (max-width: 1100px) {
-      .ces-card-grid { grid-template-columns: repeat(2, 1fr); }
-    }
-
-    .ces-card-item {
-      background-color: #ffffff;
-      border-radius: 10px;
-      overflow: hidden;
-      border: 1px solid #f0f0f0;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
-      display: flex;
-      flex-direction: column;
-      cursor: pointer;
-      transition: transform 0.2s, box-shadow 0.2s;
-    }
-
-    .ces-card-item:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
-    }
-
-    .ces-card-cover {
-      width: 100%;
-      aspect-ratio: 16 / 10;
-      object-fit: cover;
-      display: block;
-      background-color: #f0f0f0;
-    }
-
-    .ces-card-body {
-      padding: 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-
-    .ces-card-title {
-      font-size: 13px;
-      font-weight: 500;
-      color: #1f2329;
-      line-height: 1.4;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-
-    .ces-card-desc {
-      font-size: 11px;
-      color: #8c8c8c;
-      margin-top: 2px;
-    }
-
-    /* 图二：推荐电影明细页 6列竖版海报网格 */
-    .movie-detail-grid {
-      display: grid;
-      grid-template-columns: repeat(6, 1fr);
-      gap: 14px;
-    }
-
-    @media (max-width: 1100px) {
-      .movie-detail-grid { grid-template-columns: repeat(3, 1fr); }
-    }
-  </style>
-</head>
-<body>
-
-<!-- 1. 顶部 Header (支持严格宽限制对齐) -->
-<header class="header-outer">
-  <div class="layout-container header-inner">
-    <div class="header-left">
-      <div class="logo-icon">S</div>
-      <span class="logo-text">STASH</span>
-    </div>
-
-    <div class="header-center-info">
-      <div class="info-item">
-        <span>共 1 个本地应用</span>
-      </div>
-      <div class="info-item">
-        <span class="info-tag">本地</span>
-        <span>git_helper</span>
-      </div>
-      <div class="info-item">
-        <span class="info-tag" style="background-color: #f0fdf4; color: #16a34a;">状态</span>
-        <span>等待服务连接</span>
-      </div>
-    </div>
-
-    <div class="header-right">
-      <div class="header-icon-btn" title="搜索">🔍</div>
-      <div class="header-icon-btn" title="个人账户">👤</div>
-    </div>
-  </div>
-</header>
-
-<!-- 搜索框区域 -->
-<div class="layout-container search-container">
-  <div class="search-box">
-    <span class="search-icon">🔍</span>
-    <input type="text" class="search-input" placeholder="搜索本地项目...">
-  </div>
-</div>
-
-<!-- 主体布局 -->
-<div class="layout-container main-layout">
-
-  <!-- 2. 左侧侧边栏 -->
-  <aside class="sidebar">
-
-    <!-- 用户信息卡片 -->
-    <div class="sidebar-card user-card">
-      <div class="avatar-wrapper">
-        <div class="avatar">👤</div>
-        <div class="verified-badge">✓</div>
-      </div>
-      <div class="user-name">本地管理员</div>
-      <div class="user-role">管理员</div>
-      <div class="user-desc">本地静态站点托管与预览，所有项目都运行在这台机器上。</div>
-      <div class="user-ip">IP地址: 局域网</div>
-    </div>
-
-    <!-- 本地服务状态卡片 -->
-    <div class="sidebar-card">
-      <div class="status-header">
-        <span class="status-title">本地服务</span>
-        <span class="status-pill">未连接</span>
-      </div>
-      <div class="status-info-row">
-        <span class="status-label">项目数</span>
-        <span class="status-value">1</span>
-      </div>
-      <div class="status-info-row">
-        <span class="status-label">访问地址</span>
-        <span class="status-value">127.0.0.1:8080</span>
-      </div>
-      <div class="status-actions">
-        <button class="action-btn">🔄 重新扫描</button>
-        <button class="action-btn">🔗 查看接口</button>
-      </div>
-    </div>
-
-    <!-- 左侧分类导航（不带网页数） -->
-    <div class="sidebar-card menu-card">
-      <div class="nav-item active" onclick="showHomeView()">
-        <span>首页</span>
-      </div>
-
-      <div class="nav-item" onclick="openMainDetail('local')">
-        <span>本地服务</span>
-      </div>
-
-      <!-- 常用推荐（带子菜单） -->
-      <div>
-        <div class="nav-item" onclick="toggleSubMenu('menu-recommend', this)">
-          <span>常用推荐</span>
-          <span class="arrow-icon" id="arrow-recommend">˅</span>
-        </div>
-        <div class="sub-menu" id="menu-recommend">
-          <div class="sub-nav-item" onclick="openSubDetail('material')">素材资源</div>
-          <div class="sub-nav-item" style="padding-left: 20px;" onclick="openSubDetail('ui')">UI 设计资源</div>
-          <div class="sub-nav-item" style="padding-left: 20px;" onclick="openSubDetail('vector')">矢量图标</div>
-          <div class="sub-nav-item" style="padding-left: 20px;" onclick="openSubDetail('wallpaper')">免费壁纸</div>
-          <div class="sub-nav-item" onclick="openSubDetail('dev')">开发工具</div>
-        </div>
-      </div>
-
-      <!-- 推荐电影（带子菜单） -->
-      <div>
-        <div class="nav-item" onclick="toggleSubMenu('menu-movie', this)">
-          <span>推荐电影</span>
-          <span class="arrow-icon" id="arrow-movie">˅</span>
-        </div>
-        <div class="sub-menu" id="menu-movie">
-          <div class="sub-nav-item" onclick="openSubDetail('classic_movie')">经典高分</div>
-          <div class="sub-nav-item" onclick="openSubDetail('hot_movie')">热门电影</div>
-        </div>
-      </div>
-
-      <!-- CES 现场报道（带子菜单） -->
-      <div>
-        <div class="nav-item" onclick="toggleSubMenu('menu-ces', this)">
-          <span>CES 现场报道</span>
-          <span class="arrow-icon" id="arrow-ces">˅</span>
-        </div>
-        <div class="sub-menu" id="menu-ces">
-          <div class="sub-nav-item" onclick="openSubDetail('tech_ces')">前沿科技</div>
-          <div class="sub-nav-item" onclick="openSubDetail('design_ces')">工业设计</div>
-        </div>
-      </div>
-    </div>
-
-  </aside>
-
-  <!-- 3. 右侧主内容区域 -->
-  <main class="content-area">
-
-    <!-- A. 首页卡片视图 (默认展示) -->
-    <div id="home-view" style="display: flex; flex-direction: column; gap: 20px;">
-
-      <!-- 本地服务 -->
-      <section class="section-card">
-        <div class="section-header">
-          <div class="section-title-wrapper">
-            <div class="title-bar"></div>
-            <div class="title-text-container">
-              <span class="section-title">本地服务</span>
-              <span class="badge">1</span>
-            </div>
-          </div>
-          <div class="more-icon" onclick="openMainDetail('local')">•••</div>
-        </div>
-        <div class="app-grid">
-          <div class="app-item">
-            <div class="app-icon">G</div>
-            <div class="app-info">
-              <div class="app-name">git_helper</div>
-              <div class="app-desc">/git_helper/</div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- 常用推荐（首页仅显示前4个） -->
-      <section class="section-card">
-        <div class="section-header">
-          <div class="section-title-wrapper">
-            <div class="title-bar"></div>
-            <div class="title-text-container">
-              <span class="section-title">常用推荐</span>
-              <span class="badge">4</span>
-            </div>
-          </div>
-          <div class="more-icon" onclick="openMainDetail('recommend')">•••</div>
-        </div>
-        <div class="app-grid">
-          <div class="app-item">
-            <div class="app-icon">G</div>
-            <div class="app-info">
-              <div class="app-name">GitHub</div>
-              <div class="app-desc">代码托管与开源社区</div>
-            </div>
-          </div>
-          <div class="app-item">
-            <div class="app-icon" style="background-color: #e6f7ff; color: #1890ff;">Z</div>
-            <div class="app-info">
-              <div class="app-name">知乎</div>
-              <div class="app-desc">深度内容问答社区</div>
-            </div>
-          </div>
-          <div class="app-item">
-            <div class="app-icon" style="background-color: #fff0f6; color: #eb2f96;">B</div>
-            <div class="app-info">
-              <div class="app-name">哔哩哔哩</div>
-              <div class="app-desc">弹幕视频分享网站</div>
-            </div>
-          </div>
-          <div class="app-item">
-            <div class="app-icon" style="background-color: #f6ffed; color: #52c41a;">V</div>
-            <div class="app-info">
-              <div class="app-name">V2EX</div>
-              <div class="app-desc">创意工作者讨论社区</div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- 推荐电影（首页精选前6项） -->
-      <section class="section-card">
-        <div class="section-header">
-          <div class="section-title-wrapper">
-            <div class="title-bar" style="background-color: #722ed1;"></div>
-            <div class="title-text-container">
-              <span class="section-title">推荐电影</span>
-              <span class="badge">6</span>
-            </div>
-          </div>
-          <div class="more-icon" onclick="openMainDetail('movie')">•••</div>
-        </div>
-        <div class="movie-grid">
-          <div class="movie-item">
-            <img class="movie-cover" src="https://picsum.photos/seed/m1/300/450" alt="海报">
-            <div class="movie-info"><div class="movie-title">千与千寻 (2001)</div></div>
-          </div>
-          <div class="movie-item">
-            <img class="movie-cover" src="https://picsum.photos/seed/m2/300/450" alt="海报">
-            <div class="movie-info"><div class="movie-title">美丽人生 (1997)</div></div>
-          </div>
-          <div class="movie-item">
-            <img class="movie-cover" src="https://picsum.photos/seed/m3/300/450" alt="海报">
-            <div class="movie-info"><div class="movie-title">这个杀手不太冷 (1994)</div></div>
-          </div>
-          <div class="movie-item">
-            <img class="movie-cover" src="https://picsum.photos/seed/m4/300/450" alt="海报">
-            <div class="movie-info"><div class="movie-title">阿甘正传 (1994)</div></div>
-          </div>
-          <div class="movie-item">
-            <img class="movie-cover" src="https://picsum.photos/seed/m5/300/450" alt="海报">
-            <div class="movie-info"><div class="movie-title">霸王别姬 (1993)</div></div>
-          </div>
-          <div class="movie-item">
-            <img class="movie-cover" src="https://picsum.photos/seed/m6/300/450" alt="海报">
-            <div class="movie-info"><div class="movie-title">肖申克的救赎</div></div>
-          </div>
-        </div>
-      </section>
-
-      <!-- CES 现场报道（首页展示前4个） -->
-      <section class="section-card">
-        <div class="section-header">
-          <div class="section-title-wrapper">
-            <div class="title-bar" style="background-color: #fa8c16;"></div>
-            <div class="title-text-container">
-              <span class="section-title">CES 现场报道</span>
-              <span class="badge">4</span>
-            </div>
-          </div>
-          <div class="more-icon" onclick="openMainDetail('ces')">•••</div>
-        </div>
-        <div class="article-grid">
-          <div class="article-item">
-            <img class="article-cover" src="https://picsum.photos/seed/a1/300/225" alt="图片">
-            <div class="article-info"><div class="article-title">可塑性极强的玻璃设计</div></div>
-          </div>
-          <div class="article-item">
-            <img class="article-cover" src="https://picsum.photos/seed/a2/300/225" alt="图片">
-            <div class="article-info"><div class="article-title">废旧共享单车变微型书屋</div></div>
-          </div>
-          <div class="article-item">
-            <img class="article-cover" src="https://picsum.photos/seed/a3/300/225" alt="图片">
-            <div class="article-info"><div class="article-title">荧光灯管与混凝土块的组合</div></div>
-          </div>
-          <div class="article-item">
-            <img class="article-cover" src="https://picsum.photos/seed/a4/300/225" alt="图片">
-            <div class="article-info"><div class="article-title">混凝土模块化收纳框</div></div>
-          </div>
-        </div>
-      </section>
-
-    </div>
-
-    <!-- B. 右侧明细页面视图 (点击三个点或菜单时平滑切换显示) -->
-    <div id="detail-view" class="detail-view">
-
-      <div class="detail-header-nav">
-        <div class="back-btn" onclick="showHomeView()">返回首页</div>
-        <div style="font-size: 12px; color: #94a3b8;" id="detail-breadcrumb">首页 / 分类明细</div>
-      </div>
-
-      <div class="detail-page-hero">
-        <div class="hero-badge-icon" id="detail-hero-icon">📌</div>
-        <h2 class="hero-title" id="detail-title">推荐好站</h2>
-        <div class="hero-count" id="detail-count">[11]</div>
-      </div>
-
-      <!-- 渲染明细列表容器 -->
-      <div id="detail-content-container"></div>
-
-    </div>
-
-  </main>
-</div>
-
-<script>
-  // --- 模拟所有数据集 ---
-  const DATABASE = {
-    recommend: {
-      title: "常用推荐",
-      icon: "🔖",
-      type: "app-group",
-      groups: [
-        {
-          name: "UI 设计资源",
-          items: [
-            { name: "Wallhaven", desc: "WallBase 创办人失踪后推出的精选壁纸站", icon: "W" },
-            { name: "500px", desc: "有着世界上最好的照片分享社区", icon: "5" },
-            { name: "创意人", desc: "去掉了形式主义描述的原创社区", icon: "C" },
-            { name: "顶尖文案", desc: "全球顶尖创意分享平台 OPEN YOUR EYES", icon: "T" },
-            { name: "UI中国", desc: "前身为 iconfans，国内专业的UI设计平台", icon: "U" }
-          ]
-        },
-        {
-          name: "矢量图标",
-          items: [
-            { name: "Iconfont", desc: "阿里妈妈矢量图标库", icon: "I" },
-            { name: "Feather Icons", desc: "简单漂亮的开源图标库", icon: "F" },
-            { name: "FontAwesome", desc: "图标字体与CSS框架", icon: "A" }
-          ]
-        },
-        {
-          name: "免费壁纸",
-          items: [
-            { name: "Unsplash", desc: "免费高清无版权摄影图片", icon: "U" },
-            { name: "Pexels", desc: "才华横溢的摄影师分享的素材", icon: "P" },
-            { name: "Pixabay", desc: "超过2.7百万张优质图片和视频", icon: "X" }
-          ]
-        },
-        {
-          name: "开发工具",
-          items: [
-            { name: "GitHub", desc: "代码托管与开源协作社区", icon: "G" },
-            { name: "CodePen", desc: "前端在线代码演示和练习场", icon: "C" },
-            { name: "Stack Overflow", desc: "全球程序员技术问答社区", icon: "S" }
-          ]
-        }
-      ]
-    },
-    ces: {
-      title: "CES 现场报道",
-      icon: "🏷️",
-      type: "ces-card", // 图一页面效果：独立白色卡片
-      countText: "[18]",
-      items: [
-        { title: "可塑性极强的玻璃，在设计师手里有了更多可能 | 这个设计了不起", desc: "前沿科技", img: "https://picsum.photos/seed/a1/400/250" },
-        { title: "废旧共享单车如何变成微型共享书屋？| 这个设计了不起", desc: "环保设计", img: "https://picsum.photos/seed/a2/400/250" },
-        { title: "荧光灯管与混凝土块的组合，可以玩出多少花样？| 这个设计了不起", desc: "材料探索", img: "https://picsum.photos/seed/a3/400/250" },
-        { title: "混凝土做的模块化收纳框，还能改成搁架用 | 这个设计了不起", desc: "家居模块", img: "https://picsum.photos/seed/a4/400/250" },
-        { title: "这个用拉伸材料做的头盔，还能帮你呼叫救护车 | 这个设计了不起", desc: "智能穿戴", img: "https://picsum.photos/seed/a5/400/250" },
-        { title: "你如何选择字体，简单易读还是好看有趣？| 这个设计了不起", desc: "视觉体验", img: "https://picsum.photos/seed/a6/400/250" },
-        { title: "家里空间小？你需要几把可以悬挂在墙上的椅子 | 这个设计了不起", desc: "空间收纳", img: "https://picsum.photos/seed/a7/400/250" },
-        { title: "宜家厨房家具又被改造了，色彩是亮点 | 这个设计了不起", desc: "色彩灵感", img: "https://picsum.photos/seed/a8/400/250" },
-        { title: "这款诞生50年的扶手椅，推出了特别版配色 | 这个设计了不起", desc: "经典产品", img: "https://picsum.photos/seed/a9/400/250" },
-        { title: "让家和办公室界限变得模糊的一组家具 | 这个设计了不起", desc: "办公家具", img: "https://picsum.photos/seed/a10/400/250" },
-        { title: "这个酒店设计奖，挖掘过去一年体验最好的酒店 | 这个设计了不起", desc: "空间建筑", img: "https://picsum.photos/seed/a11/400/250" },
-        { title: "一款可移动办公桌，挂墙上当作白板就能写写画画 | 这个设计了不起", desc: "移动办公", img: "https://picsum.photos/seed/a12/400/250" }
-      ]
-    },
-    movie: {
-      title: "推荐电影",
-      icon: "🎬",
-      type: "movie-card", // 图二页面效果：沉浸式多行竖版海报
-      countText: "[12]",
-      items: [
-        { title: "千与千寻 千と千尋の神隠し (2001)", img: "https://picsum.photos/seed/m1/300/450" },
-        { title: "美丽人生 La vita è bella (1997)", img: "https://picsum.photos/seed/m2/300/450" },
-        { title: "这个杀手不太冷 Léon (1994)", img: "https://picsum.photos/seed/m3/300/450" },
-        { title: "阿甘正传 Forrest Gump (1994)", img: "https://picsum.photos/seed/m4/300/450" },
-        { title: "霸王别姬 (1993)", img: "https://picsum.photos/seed/m5/300/450" },
-        { title: "肖申克的救赎 The Shawshank Redemption", img: "https://picsum.photos/seed/m6/300/450" },
-        { title: "泰坦尼克号 Titanic (1997)", img: "https://picsum.photos/seed/m7/300/450" },
-        { title: "盗梦空间 Inception (2010)", img: "https://picsum.photos/seed/m8/300/450" },
-        { title: "星际穿越 Interstellar (2014)", img: "https://picsum.photos/seed/m9/300/450" },
-        { title: "楚门的世界 The Truman Show (1998)", img: "https://picsum.photos/seed/m10/300/450" },
-        { title: "疯狂动物城 Zootopia (2016)", img: "https://picsum.photos/seed/m11/300/450" },
-        { title: "大话西游之大圣娶亲 (1995)", img: "https://picsum.photos/seed/m12/300/450" }
-      ]
-    }
-  };
-
-  // --- 左侧折叠菜单交互 ---
-  function toggleSubMenu(menuId, el) {
-    const menu = document.getElementById(menuId);
-    const arrow = el.querySelector('.arrow-icon');
-    const isOpen = menu.classList.contains('show');
-
-    if (isOpen) {
-      menu.classList.remove('show');
-      arrow.classList.remove('open');
-    } else {
-      menu.classList.add('show');
-      arrow.classList.add('open');
-    }
-  }
-
-  // --- 切回首页视图 ---
-  function showHomeView() {
-    document.getElementById('home-view').style.display = 'flex';
-    document.getElementById('detail-view').style.display = 'none';
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  }
-
-  // --- 打开主分类明细（如点击常用推荐、CES现场报道、推荐电影标题右侧的 •••） ---
-  function openMainDetail(categoryKey) {
-    const data = DATABASE[categoryKey];
-    if (!data) return;
-
-    document.getElementById('home-view').style.display = 'none';
-    document.getElementById('detail-view').style.display = 'flex';
-
-    document.getElementById('detail-hero-icon').innerText = data.icon;
-    document.getElementById('detail-title').innerText = data.title;
-    document.getElementById('detail-breadcrumb').innerText = `首页 / ${data.title}`;
-
-    const container = document.getElementById('detail-content-container');
-    container.innerHTML = '';
-
-    // 图一 CES 现场报道卡片网格渲染
-    if (data.type === 'ces-card') {
-      document.getElementById('detail-count').innerText = data.countText || `[${data.items.length}]`;
-
-      let html = '<div class="ces-card-grid">';
-      data.items.forEach(item => {
-        html += `
-                        <div class="ces-card-item">
-                            <img class="ces-card-cover" src="${item.img}" alt="cover">
-                            <div class="ces-card-body">
-                                <div class="ces-card-title">${item.title}</div>
-                                <div class="ces-card-desc">${item.desc}</div>
-                            </div>
-                        </div>
-                    `;
-      });
-      html += '</div>';
-      container.innerHTML = html;
-    }
-    // 图二 推荐电影竖版海报网格渲染
-    else if (data.type === 'movie-card') {
-      document.getElementById('detail-count').innerText = data.countText || `[${data.items.length}]`;
-
-      let html = '<div class="movie-detail-grid">';
-      data.items.forEach(item => {
-        html += `
-                        <div class="movie-item">
-                            <img class="movie-cover" src="${item.img}" alt="poster">
-                            <div class="movie-info">
-                                <div class="movie-title">${item.title}</div>
-                            </div>
-                        </div>
-                    `;
-      });
-      html += '</div>';
-      container.innerHTML = html;
-    }
-    // 常用推荐/APP应用分组明细
-    else if (data.type === 'app-group') {
-      let totalCount = 0;
-      data.groups.forEach(g => totalCount += g.items.length);
-      document.getElementById('detail-count').innerText = `[${totalCount}]`;
-
-      data.groups.forEach(group => {
-        const block = document.createElement('div');
-        block.className = 'sub-group-block';
-
-        let groupHtml = `<div class="sub-group-header">${group.name}</div><div class="detail-grid">`;
-        group.items.forEach(item => {
-          groupHtml += `
-                            <div class="app-item">
-                                <div class="app-icon">${item.icon}</div>
-                                <div class="app-info">
-                                    <div class="app-name">${item.name}</div>
-                                    <div class="app-desc">${item.desc}</div>
-                                </div>
-                            </div>
-                        `;
-        });
-        groupHtml += '</div>';
-        block.innerHTML = groupHtml;
-        container.appendChild(block);
-      });
-    }
-
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  }
-
-  // --- 点击左侧具体子菜单精确过滤 ---
-  function openSubDetail(subKey) {
-    document.getElementById('home-view').style.display = 'none';
-    document.getElementById('detail-view').style.display = 'flex';
-
-    const container = document.getElementById('detail-content-container');
-    container.innerHTML = '';
-
-    let targetItems = [];
-    let titleName = "";
-
-    if (subKey === 'ui') {
-      titleName = "UI 设计资源";
-      targetItems = DATABASE.recommend.groups[0].items;
-    } else if (subKey === 'vector') {
-      titleName = "矢量图标";
-      targetItems = DATABASE.recommend.groups[1].items;
-    } else if (subKey === 'wallpaper') {
-      titleName = "免费壁纸";
-      targetItems = DATABASE.recommend.groups[2].items;
-    } else if (subKey === 'dev') {
-      titleName = "开发工具";
-      targetItems = DATABASE.recommend.groups[3].items;
-    } else if (subKey === 'material') {
-      openMainDetail('recommend');
-      return;
-    } else if (subKey === 'tech_ces' || subKey === 'design_ces') {
-      openMainDetail('ces');
-      return;
-    } else if (subKey === 'classic_movie' || subKey === 'hot_movie') {
-      openMainDetail('movie');
-      return;
-    }
-
-    document.getElementById('detail-hero-icon').innerText = "📌";
-    document.getElementById('detail-title').innerText = titleName;
-    document.getElementById('detail-count').innerText = `[${targetItems.length}]`;
-    document.getElementById('detail-breadcrumb').innerText = `首页 / 常用推荐 / ${titleName}`;
-
-    let html = '<div class="detail-grid">';
-    targetItems.forEach(item => {
-      html += `
-                    <div class="app-item">
-                        <div class="app-icon">${item.icon}</div>
-                        <div class="app-info">
-                            <div class="app-name">${item.name}</div>
-                            <div class="app-desc">${item.desc}</div>
-                        </div>
-                    </div>
-                `;
-    });
-    html += '</div>';
-    container.innerHTML = html;
-
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  }
-</script>
-</body>
-</html>
\ No newline at end of file
diff --git a/templates/index9.html b/templates/index9.html
deleted file mode 100644
index 49700e9..0000000
--- a/templates/index9.html
+++ /dev/null
@@ -1,741 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>导航主页</title>
-    <style>
-        :root {
-            --bg-color: #f7f9fb;
-            --card-bg: #ffffff;
-            --primary-color: #3b82f6;
-            --text-main: #1e293b;
-            --text-sub: #64748b;
-            --border-color: #e2e8f0;
-            --radius-main: 12px;
-            --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
-            --shadow-hover: 0 10px 20px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.03);
-            
-            --sidebar-width: 240px;
-            --top-nav-height: 60px;
-        }
-
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-
-        /* 1. 锁死大窗口，禁止全局滚动 */
-        html, body {
-            width: 100vw;
-            height: 100vh;
-            overflow: hidden;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            background-color: var(--bg-color);
-            color: var(--text-main);
-        }
-
-        /* 通用卡片容器 */
-        .card-box {
-            background-color: var(--card-bg);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius-main);
-            box-shadow: var(--shadow-card);
-        }
-
-        /* 2. 顶部直角导航栏 */
-        .top-header-bar {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: var(--top-nav-height);
-            background-color: var(--card-bg);
-            border-bottom: 1px solid var(--border-color);
-            border-radius: 0 !important;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 24px;
-            z-index: 200;
-        }
-
-        .site-logo {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-weight: 800;
-            font-size: 18px;
-            color: #0f172a;
-            text-decoration: none;
-            width: 180px;
-            flex-shrink: 0;
-        }
-
-        .logo-icon {
-            width: 32px;
-            height: 32px;
-            background-color: #000;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #fff;
-            font-size: 16px;
-            font-weight: bold;
-        }
-
-        .ticker-wrapper {
-            flex: 1;
-            max-width: 550px;
-            height: 36px;
-            overflow: hidden;
-            position: relative;
-            margin: 0 20px;
-            display: flex;
-            align-items: center;
-            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-        }
-
-        .ticker-content {
-            display: flex;
-            gap: 40px;
-            white-space: nowrap;
-            animation: ticker 18s linear infinite;
-        }
-
-        .ticker-wrapper:hover .ticker-content {
-            animation-play-state: paused;
-        }
-
-        .ticker-item {
-            font-size: 13.5px;
-            color: var(--text-sub);
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .ticker-tag {
-            background-color: #eff6ff;
-            color: var(--primary-color);
-            font-size: 11px;
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-weight: 600;
-        }
-
-        @keyframes ticker {
-            0% { transform: translateX(0); }
-            100% { transform: translateX(-50%); }
-        }
-
-        .top-actions {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            flex-shrink: 0;
-        }
-
-        .action-btn {
-            background: transparent;
-            border: none;
-            cursor: pointer;
-            color: #475569;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 6px;
-            border-radius: 50%;
-            transition: all 0.2s;
-        }
-
-        .action-btn:hover {
-            background-color: #f1f5f9;
-            color: var(--primary-color);
-        }
-
-        .action-btn svg {
-            width: 19px;
-            height: 19px;
-            stroke-width: 2;
-            stroke: currentColor;
-            fill: none;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-        }
-
-        /* ---------------- 搜索框：全局固定且全屏水平居中 ---------------- */
-        .search-row {
-            position: fixed;
-            top: 76px;
-            left: 50%;
-            transform: translateX(-50%);
-            z-index: 100;
-            width: 480px;
-            height: 44px;
-            pointer-events: auto;
-        }
-
-        .search-bar {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            height: 100%;
-            width: 100%;
-            padding: 0 12px;
-        }
-
-        .engine-btn {
-            background: transparent;
-            border: none;
-            color: var(--text-sub);
-            cursor: pointer;
-            width: 28px;
-            height: 28px;
-            border-radius: 6px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s;
-        }
-
-        .engine-btn:hover {
-            background-color: #f1f5f9;
-            color: var(--primary-color);
-        }
-
-        .engine-btn svg {
-            width: 16px;
-            height: 16px;
-            stroke-width: 2;
-            stroke: currentColor;
-            fill: none;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-        }
-
-        .search-input {
-            width: 100%;
-            height: 36px;
-            font-size: 13.5px;
-            border: none;
-            background: transparent;
-            outline: none;
-            color: var(--text-main);
-        }
-
-        /* ---------------- 3. 双列核心网格 ---------------- */
-        .layout-grid {
-            margin-top: var(--top-nav-height);
-            height: calc(100vh - var(--top-nav-height));
-            padding: 36px 24px 0 20px; 
-            display: grid;
-            grid-template-columns: var(--sidebar-width) 1fr;
-            gap: 20px;
-            align-items: start;
-        }
-
-        .left-column {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            flex-shrink: 0;
-            margin-top: 68px;
-        }
-
-        .right-column {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            height: 100%;
-            overflow: hidden;
-            padding-top: 52px;
-        }
-
-        .user-card {
-            height: 52px;
-            padding: 0 12px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .avatar {
-            width: 34px;
-            height: 34px;
-            border-radius: 8px;
-            background-color: #eff6ff;
-            color: var(--primary-color);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 700;
-            font-size: 15px;
-        }
-
-        .user-name {
-            font-size: 13.5px;
-            font-weight: 600;
-            color: var(--text-main);
-            line-height: 1.2;
-        }
-
-        .user-desc {
-            font-size: 11.5px;
-            color: var(--text-sub);
-            margin-top: 2px;
-        }
-
-        .nav-card {
-            padding: 8px;
-            height: auto;
-        }
-
-        .nav-group {
-            list-style: none;
-        }
-
-        .nav-item-wrapper {
-            margin-bottom: 4px;
-        }
-
-        .nav-link {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 9px 12px;
-            color: var(--text-sub);
-            text-decoration: none;
-            border-radius: 8px;
-            font-size: 13.5px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .nav-link:hover, .nav-link.active {
-            background-color: #eff6ff;
-            color: var(--primary-color);
-        }
-
-        .arrow-icon {
-            font-size: 13px;
-            transition: transform 0.3s;
-            color: #94a3b8;
-            font-family: monospace;
-            font-weight: bold;
-        }
-
-        .nav-item-wrapper.open > .nav-link .arrow-icon {
-            transform: rotate(90deg);
-        }
-
-        .sub-menu {
-            list-style: none;
-            padding-left: 12px;
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
-        }
-
-        .nav-item-wrapper.open .sub-menu {
-            max-height: 500px;
-            transition: max-height 0.3s ease-in-out;
-        }
-
-        .sub-menu .nav-link {
-            padding: 7px 12.5px;
-            font-size: 12.5px;
-        }
-
-        .submit-card {
-            padding: 6px;
-        }
-
-        .submit-btn {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 9px 12px;
-            color: var(--text-sub);
-            text-decoration: none;
-            border-radius: 8px;
-            font-size: 13.5px;
-            font-weight: 500;
-        }
-
-        .submit-btn:hover {
-            background-color: #eff6ff;
-            color: var(--primary-color);
-        }
-
-        /* 4. 右侧独立滚动区域 */
-        .main-content {
-            flex: 1;
-            overflow-y: auto;
-            padding-right: 4px;
-            padding-top: 16px;
-            padding-bottom: 40px;
-            
-            -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 22px, black 100%);
-            mask-image: linear-gradient(to bottom, transparent 0px, black 22px, black 100%);
-            
-            -ms-overflow-style: none;
-            scrollbar-width: none;
-        }
-
-        .main-content::-webkit-scrollbar {
-            display: none !important;
-            width: 0 !important;
-        }
-
-        .section-group {
-            margin-bottom: 24px;
-        }
-
-        .section-title {
-            font-size: 15px;
-            font-weight: 600;
-            color: var(--text-main);
-            display: flex;
-            align-items: center;
-            line-height: 1;
-            margin-bottom: 16px;
-            padding-top: 2px;
-        }
-
-        .section-title::before {
-            content: "";
-            display: inline-block;
-            width: 4px;
-            height: 15px;
-            background-color: var(--primary-color);
-            margin-right: 8px;
-            border-radius: 2px;
-        }
-
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-            gap: 16px;
-        }
-
-        .card {
-            background-color: var(--card-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 10px;
-            padding: 12px 14px;
-            display: flex;
-            align-items: center;
-            text-decoration: none;
-            color: inherit;
-            box-shadow: var(--shadow-card);
-            transition: transform 0.2s, box-shadow 0.2s;
-        }
-
-        .card:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-hover);
-        }
-
-        .card-icon {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background-color: #f1f5f9;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 600;
-            color: var(--primary-color);
-            margin-right: 12px;
-            flex-shrink: 0;
-        }
-
-        .card-title {
-            font-size: 14px;
-            font-weight: 600;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .card-desc {
-            font-size: 12px;
-            color: var(--text-sub);
-            margin-top: 2px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .back-to-top {
-            position: fixed;
-            bottom: 30px;
-            right: 30px;
-            width: 40px;
-            height: 40px;
-            background-color: #e2e8f0;
-            border-radius: 50%;
-            color: #1e293b;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            box-shadow: var(--shadow-card);
-            transition: all 0.2s ease;
-            text-decoration: none;
-            z-index: 90;
-        }
-
-        .back-to-top:hover {
-            background-color: #cbd5e1;
-            transform: translateY(-2px);
-        }
-
-        .back-to-top svg {
-            width: 18px;
-            height: 18px;
-            stroke: currentColor;
-            stroke-width: 2.5;
-            fill: none;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-        }
-    </style>
-</head>
-<body>
-
-    <!-- 顶栏 -->
-    <header class="top-header-bar">
-        <a href="#" class="site-logo">
-            <div class="logo-icon">S</div>
-            <span>SUXING</span>
-        </a>
-
-        <div class="ticker-wrapper">
-            <div class="ticker-content">
-                <a href="#" class="ticker-item"><span class="ticker-tag">公告</span> 欢迎使用最新版个人导航站！</a>
-                <a href="#" class="ticker-item"><span class="ticker-tag">更新</span> WordPress 主题升级至 v3.2 版本</a>
-                <a href="#" class="ticker-item"><span class="ticker-tag">推荐</span> 常用前端工具箱已更新资源</a>
-                <a href="#" class="ticker-item"><span class="ticker-tag">公告</span> 欢迎使用最新版个人导航站！</a>
-                <a href="#" class="ticker-item"><span class="ticker-tag">更新</span> WordPress 主题升级至 v3.2 版本</a>
-            </div>
-        </div>
-
-        <div class="top-actions">
-            <button class="action-btn" title="暗黑模式">
-                <svg viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-            </button>
-            <button class="action-btn" title="快捷方式">
-                <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
-            </button>
-            <button class="action-btn" title="全局搜索">
-                <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-            </button>
-        </div>
-    </header>
-
-    <!-- 搜索框独立置于全屏水平居中位置 -->
-    <div class="search-row">
-        <div class="search-bar card-box">
-            <button class="engine-btn" title="切换搜索引擎">
-                <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-            </button>
-            <input type="text" class="search-input" placeholder="输入关键字搜索全网资源...">
-        </div>
-    </div>
-
-    <!-- 主布局网格 -->
-    <div class="layout-grid">
-        
-        <!-- 左侧固定边栏 -->
-        <div class="left-column">
-            <div class="user-card card-box">
-                <div class="avatar">S</div>
-                <div>
-                    <div class="user-name">Suxing Admin</div>
-                    <div class="user-desc">个人导航站</div>
-                </div>
-            </div>
-
-            <div class="nav-card card-box">
-                <ul class="nav-group">
-                    <li class="nav-item-wrapper">
-                        <a href="#common" class="nav-link active">
-                            <span>常用推荐</span>
-                        </a>
-                    </li>
-                    <li class="nav-item-wrapper">
-                        <div class="nav-link has-sub">
-                            <span>素材资源</span>
-                            <span class="arrow-icon">›</span>
-                        </div>
-                        <ul class="sub-menu">
-                            <li><a href="#design" class="nav-link"><span>UI 设计资源</span></a></li>
-                            <li><a href="#icon" class="nav-link"><span>矢量图标</span></a></li>
-                            <li><a href="#photo" class="nav-link"><span>免费壁纸</span></a></li>
-                        </ul>
-                    </li>
-                    <li class="nav-item-wrapper">
-                        <div class="nav-link has-sub">
-                            <span>开发工具</span>
-                            <span class="arrow-icon">›</span>
-                        </div>
-                        <ul class="sub-menu">
-                            <li><a href="#dev" class="nav-link"><span>前端调试工具</span></a></li>
-                            <li><a href="#code" class="nav-link"><span>在线编辑器</span></a></li>
-                        </ul>
-                    </li>
-                </ul>
-            </div>
-
-            <div class="submit-card card-box">
-                <a href="#submit" class="submit-btn">提交网站</a>
-            </div>
-        </div>
-
-        <!-- 右侧区域 -->
-        <div class="right-column">
-            <!-- 右侧独立滚动内容 -->
-            <main class="main-content" id="scrollContainer">
-                <div id="common" class="section-group">
-                    <div class="section-title">常用推荐</div>
-                    <div class="grid">
-                        <a href="#" class="card">
-                            <div class="card-icon">G</div>
-                            <div>
-                                <div class="card-title">GitHub</div>
-                                <div class="card-desc">代码托管与开源社区</div>
-                            </div>
-                        </a>
-                        <a href="#" class="card">
-                            <div class="card-icon">Z</div>
-                            <div>
-                                <div class="card-title">知乎</div>
-                                <div class="card-desc">深度内容问答社区</div>
-                            </div>
-                        </a>
-                        <a href="#" class="card">
-                            <div class="card-icon">B</div>
-                            <div>
-                                <div class="card-title">哔哩哔哩</div>
-                                <div class="card-desc">弹幕视频分享网站</div>
-                            </div>
-                        </a>
-                        <a href="#" class="card">
-                            <div class="card-icon">V</div>
-                            <div>
-                                <div class="card-title">V2EX</div>
-                                <div class="card-desc">创意工作者讨论社区</div>
-                            </div>
-                        </a>
-                    </div>
-                </div>
-
-                <div id="dev" class="section-group">
-                    <div class="section-title">前端调试工具 (开发工具)</div>
-                    <div class="grid">
-                        <a href="#" class="card">
-                            <div class="card-icon">S</div>
-                            <div>
-                                <div class="card-title">Stack Overflow</div>
-                                <div class="card-desc">程序员技术问答</div>
-                            </div>
-                        </a>
-                        <a href="#" class="card">
-                            <div class="card-icon">J</div>
-                            <div>
-                                <div class="card-title">掘金</div>
-                                <div class="card-desc">开发者技术社区</div>
-                            </div>
-                        </a>
-                    </div>
-                </div>
-
-                <div id="code" class="section-group">
-                    <div class="section-title">在线编辑器</div>
-                    <div class="grid">
-                        <a href="#" class="card">
-                            <div class="card-icon">C</div>
-                            <div>
-                                <div class="card-title">CodePen</div>
-                                <div class="card-desc">前端在线代码演练场</div>
-                            </div>
-                        </a>
-                    </div>
-                </div>
-
-                <div id="design" class="section-group">
-                    <div class="section-title">UI 设计资源</div>
-                    <div class="grid">
-                        <a href="#" class="card">
-                            <div class="card-icon">D</div>
-                            <div>
-                                <div class="card-title">Dribbble</div>
-                                <div class="card-desc">全球设计作品分享社区</div>
-                            </div>
-                        </a>
-                    </div>
-                </div>
-            </main>
-        </div>
-
-    </div>
-
-    <!-- 回到顶部按钮 -->
-    <a href="javascript:void(0)" class="back-to-top" id="backToTopBtn" title="回到顶部">
-        <svg viewBox="0 0 24 24">
-            <line x1="5" y1="4" x2="19" y2="4"></line>
-            <path d="M12 20V8M6 14l6-6 6 6"></path>
-        </svg>
-    </a>
-
-    <script>
-        document.querySelectorAll('.has-sub').forEach(trigger => {
-            trigger.addEventListener('click', () => {
-                trigger.closest('.nav-item-wrapper').classList.toggle('open');
-            });
-        });
-
-        const scrollContainer = document.getElementById('scrollContainer');
-        const backToTopBtn = document.getElementById('backToTopBtn');
-
-        backToTopBtn.addEventListener('click', () => {
-            scrollContainer.scrollTo({
-                top: 0,
-                behavior: 'smooth'
-            });
-        });
-
-        document.querySelectorAll('a.nav-link[href^="#"]').forEach(link => {
-            link.addEventListener('click', function(e) {
-                const targetId = this.getAttribute('href');
-                if (targetId === '#') return;
-                
-                const targetElement = document.querySelector(targetId);
-                if (targetElement) {
-                    e.preventDefault();
-                    
-                    const containerTop = scrollContainer.getBoundingClientRect().top;
-                    const elementTop = targetElement.getBoundingClientRect().top;
-                    const currentScroll = scrollContainer.scrollTop;
-                    const offsetPosition = currentScroll + (elementTop - containerTop) - 24;
-
-                    scrollContainer.scrollTo({
-                        top: offsetPosition,
-                        behavior: 'smooth'
-                    });
-
-                    document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('active'));
-                    this.classList.add('active');
-                }
-            });
-        });
-    </script>
-</body>
-</html>
\ No newline at end of file