56 lines
2.9 KiB
Markdown
56 lines
2.9 KiB
Markdown
|
# 起始页：搜索框 + 快捷入口（已实现）
|
|||
|
|
|
|||
|
|
导航起始页在问候语 / 天气行下方有两块：可切换搜索引擎的**搜索框**，
|
|||
|
|
以及一组**快捷入口**（第一行 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/*`，后端进程不用动。
|