75 lines
4.1 KiB
Markdown
75 lines
4.1 KiB
Markdown
|
# 起始页：搜索框 + 底部分类抽屉（已实现）
|
|||
|
|
|
|||
|
|
导航起始页竖直居中的是问候语 / 天气行下方的**搜索框**；原先搜索框下方那组
|
|||
|
|
快捷入口宫格已**移除**，改为屏幕**底部的分类抽屉**（`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/*`，后端进程不用动。
|