# 起始页：搜索框 + 快捷入口（已实现）

导航起始页在问候语 / 天气行下方有两块：可切换搜索引擎的**搜索框**，
以及一组**快捷入口**（第一行 5 个网站、第二行 3 个文档，居中）。

- 前端：
  - `Client/src/components/start/SearchBar.tsx`：搜索框 + 引擎下拉
  - `Client/src/components/start/QuickLinks.tsx`：快捷入口宫格

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

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

## 快捷入口（`QuickLinks.tsx`）

- 数据是一个 `SHORTCUTS: Shortcut[]`，每项 `{ label, href, icon }`。
  当前 8 个，每个用 `<motion.a target="_blank">` 新标签页打开：

  | 行 | 入口 | 链接 |
  |----|------|------|
  | 一 | DeepSeek | `https://chat.deepseek.com` |
  | 一 | GitHub | `https://github.com` |
  | 一 | Bilibili | `https://www.bilibili.com` |
  | 一 | 知乎 | `https://www.zhihu.com` |
  | 一 | FMHY | `https://fm-hy.top` |
  | 二 | Rust 文档 | `https://rustwiki.org/zh-CN/book/` |
  | 二 | C++ 文档 | `https://en.cppreference.com/` |
  | 二 | C# 文档 | `https://learn.microsoft.com/dotnet/csharp/` |

- **布局**：容器是 `grid-cols-5`，8 个元素自然排成「第一行 5 个、第二行 3 个」。
  第二行第一个入口加 `col-start-2`，让那 3 个落在第 2/3/4 列即**居中**。
- **图标**：品牌 logo 用 [simple-icons](https://simpleicons.org/) 的单 `path`，
  内联成 SVG、`fill=currentColor` 跟随文字颜色（默认 `white/75`、悬停纯白），
  和玻璃风、天气图标统一，零依赖。
  - **FMHY** 不在 simple-icons 里，用紧凑 `FMHY` 字标占位（同色同风格）。
  - **C#** 用 simple-icons 的 `csharp`（六边形 + C#），不是单独的 `#`(sharp)。
- 悬停有 framer-motion 弹簧放大上浮动效（与其它起始页元素一致）。

### 增 / 删一个入口

1. 若是品牌站，去 simple-icons 复制对应图标的 `path d="…"`，照现有 `XxxIcon`
   写一个内联 SVG 常量（`width/height=22`、`fill=currentColor`）；没有官方图标就
   仿 `FmhyIcon` 用 `<span>` 字标。
2. 往 `SHORTCUTS` 加 `{ label, href, icon }`。
3. 调整居中：第二行第一个入口要带 `col-start-N`。当前规则写死在 `i === 5`
   （第 6 个起是第二行）；若每行个数变了，按新的「第二行起始下标 / 居中起始列」改这两处。

## 部署

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