cc
f576b03315
搜索框下方快捷入口由占位空槽改为 8 个实链接： 第一行 DeepSeek/GitHub/Bilibili/知乎/FMHY， 第二行 Rust/C++/C# 文档（col-start-2 居中）。 品牌图标内联 simple-icons 单 path，FMHY 用字标。 新增 docs/startpage-quicklinks.md 记录搜索框 + 入口及增删方法。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2.9 KiB
2.9 KiB
起始页：搜索框 + 快捷入口（已实现）
导航起始页在问候语 / 天气行下方有两块：可切换搜索引擎的搜索框， 以及一组快捷入口（第一行 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 的单
path， 内联成 SVG、fill=currentColor跟随文字颜色（默认white/75、悬停纯白）， 和玻璃风、天气图标统一，零依赖。- FMHY 不在 simple-icons 里，用紧凑
FMHY字标占位（同色同风格）。 - C# 用 simple-icons 的
csharp（六边形 + C#），不是单独的#(sharp)。
- FMHY 不在 simple-icons 里，用紧凑
-
悬停有 framer-motion 弹簧放大上浮动效（与其它起始页元素一致）。
增 / 删一个入口
- 若是品牌站，去 simple-icons 复制对应图标的
path d="…"，照现有XxxIcon写一个内联 SVG 常量（width/height=22、fill=currentColor）；没有官方图标就 仿FmhyIcon用<span>字标。 - 往
SHORTCUTS加{ label, href, icon }。 - 调整居中：第二行第一个入口要带
col-start-N。当前规则写死在i === 5（第 6 个起是第二行）；若每行个数变了，按新的「第二行起始下标 / 居中起始列」改这两处。
部署
纯前端改动，按 docs/startpage-weather-location.md「只改前端」一节：
npm run build → 清空服务器 static/ → 上传 dist/*，后端进程不用动。