- 移除搜索框下方的快捷入口宫格（QuickLinks）
- 新增 CategoryDock：底部玻璃分类胶囊（社交/娱乐/开发/游戏），
  悬停时菜单以 transform-origin:bottom 从胶囊向上抽出，链接错位浮现；
  含悬停桥、点击/焦点开合、reduced-motion 降级
- StartPage 加透明占位，保持问候/搜索框删除前的垂直位置与比例
- 文档：startpage-quicklinks → startpage-category-dock 并重写；
  修正 weather 部署文档过期的 /mnt/f 路径

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-21 21:23:12 +08:00

4.1 KiB

Raw Permalink Blame History

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

导航起始页竖直居中的是问候语 / 天气行下方的搜索框；原先搜索框下方那组快捷入口宫格已移除，改为屏幕底部的分类抽屉（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 的单 path，内联成 SVG、 fill=currentColor 跟随文字色（默认 white/75、悬停纯白），与玻璃风统一、零依赖。
没有可靠官方 path 的站点（微博 / Rust / C++ / C# / Epic）用紧凑字标 Wordmark('…') 占位（同色同风格，沿用原 FMHY 字标做法）。
分类胶囊左侧的小图标（社交 / 娱乐 / 开发 / 游戏）是通用线性图形（聊天气泡 / 播放三角 / </> / 手柄），非品牌、安全自绘。

增 / 删一个分类或站点

加站点：若是品牌站，去 simple-icons 复制 path d="…" 照现有 XxxIcon 写一个内联 SVG 常量（width/height≈20、fill=currentColor）；没有官方图标就用 Wordmark('字标')。然后往对应分类的 links 加 { label, href, icon }。
加分类：往 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/*，后端进程不用动。

4.1 KiB Raw Permalink Blame History Unescape Escape