# 起始页：搜索框 + 底部分类抽屉（已实现）

导航起始页竖直居中的是问候语 / 天气行下方的**搜索框**；原先搜索框下方那组
快捷入口宫格已**移除**，改为屏幕**底部的分类抽屉**（`CategoryDock`）——一排玻璃
分类胶囊，鼠标悬停某类时菜单从胶囊里向上「抽」出来。

- 前端：
  - `Client/src/components/start/SearchBar.tsx`：搜索框 + 引擎下拉
  - `Client/src/components/start/CategoryDock.tsx`：底部分类抽屉
  - `Client/src/components/StartPage.tsx`：装配三块（问候 / 搜索框 / 占位），并在页底渲染 `CategoryDock`

## 搜索框（`SearchBar.tsx`）

- 内置 4 个引擎，默认 **Bing**：Bing / Google / 百度 / DuckDuckGo。
  每个引擎是 `{ name, url }`，`url` 后直接拼 `encodeURIComponent(query)`。
- 选中的引擎存 `localStorage`（键 `ip.startpage.engine`），下次进页面记住。
- 提交后 `window.location.href` 跳到引擎搜索结果（当前标签页）。
- 要加引擎：往 `ENGINES` 里加一项即可，下拉会自动多一行。

## 底部分类抽屉（`CategoryDock.tsx`）

固定在视口底部居中（`fixed inset-x-0 bottom-6`，外层 `pointer-events-none`、
仅胶囊 `pointer-events-auto`，不挡页面其它点击）。数据是 `CATEGORIES: Category[]`，
顺序即从左到右，每类 `{ id, label, glyph, links }`，`link = { label, href, icon }`。

当前分类与内容：

| 分类 | 站点 |
|------|------|
| 社交 | 知乎、微博、X |
| 娱乐 | Bilibili、YouTube、FMHY |
| 开发 | GitHub、DeepSeek、Rust 文档、C++ 文档、C# 文档 |
| 游戏 | Steam、Epic Games |

### 交互（抽屉动画）

- **悬停展开**：同一时刻只展开一个，状态是单个 `active: string | null`。
  鼠标进入某类的包裹层 → `setActive(id)`，离开 → 清空。
- **从胶囊里向上抽出**：抽屉 `absolute bottom-full`（下沿贴住胶囊上沿），
  动画 `transformOrigin: 'bottom'` + 弹簧 `scaleY 0.82→1` / `y 10→0`，
  里面的链接再按 `delay` 逐个错位浮现（`role="menu"` / `menuitem`）。
- **悬停桥**：抽屉容器留 `pb-2.5`，把胶囊与菜单之间的视觉间隙纳入同一悬停命中区，
  鼠标从胶囊移到菜单时不会断开。
- **触屏 / 键盘**：点击胶囊 `toggle`（触屏可开合）；`focus`/`blur`（带
  `relatedTarget` 包含判断）支持键盘聚焦展开、移出收起。
- **降级**：`prefers-reduced-motion` 下抽屉与列表项退化为纯淡入。

### 图标

- 品牌 logo 用 [simple-icons](https://simpleicons.org/) 的单 `path`，内联成 SVG、
  `fill=currentColor` 跟随文字色（默认 `white/75`、悬停纯白），与玻璃风统一、零依赖。
- 没有可靠官方 `path` 的站点（微博 / Rust / C++ / C# / Epic）用紧凑字标
  `Wordmark('…')` 占位（同色同风格，沿用原 FMHY 字标做法）。
- 分类胶囊左侧的小图标（社交 / 娱乐 / 开发 / 游戏）是**通用线性图形**（聊天气泡 /
  播放三角 / `</>` / 手柄），非品牌、安全自绘。

### 增 / 删一个分类或站点

1. **加站点**：若是品牌站，去 simple-icons 复制 `path d="…"` 照现有 `XxxIcon`
   写一个内联 SVG 常量（`width/height≈20`、`fill=currentColor`）；没有官方图标就
   用 `Wordmark('字标')`。然后往对应分类的 `links` 加 `{ label, href, icon }`。
2. **加分类**：往 `CATEGORIES` 加一项 `{ id, label, glyph, links }`，`glyph` 仿现有
   线性小图标自绘即可；数组顺序就是底部从左到右的顺序。

## 起始页布局占位

`StartPage.tsx` 在搜索框下方保留了一块透明占位 `<div className="h-44 sm:h-48">`：
补回原快捷入口宫格腾出的高度，让居中的问候 / 搜索框停在删除前的垂直位置与比例，
不因居中重排被撑到页面正中。底部入口已交由 `CategoryDock` 承载。

## 部署

纯前端改动，按 `docs/startpage-weather-location.md`「只改前端」一节：
WSL 里 `npm run build` → 清空服务器 `static/` → 上传 `dist/*`，后端进程不用动。