diff --git a/Client/src/components/start/QuickLinks.tsx b/Client/src/components/start/QuickLinks.tsx index eb84ab3..cbf980e 100644 --- a/Client/src/components/start/QuickLinks.tsx +++ b/Client/src/components/start/QuickLinks.tsx @@ -1,39 +1,96 @@ import { motion } from 'framer-motion' +import type { ReactNode } from 'react' -// 预留 10 个快捷入口，先全部留空。后续每项填 { icon, label, href } 即可。 +// 快捷入口：第一行 5 个网站，第二行 3 个文档。每项 { icon, label, href }。 interface Shortcut { label?: string href?: string + icon?: ReactNode } -const SHORTCUTS: Shortcut[] = Array.from({ length: 10 }, () => ({})) +// 品牌图标：单 path，fill=currentColor，跟随文字颜色。 +const GithubIcon = ( + + + +) + +const DeepSeekIcon = ( + + + +) + +const BilibiliIcon = ( + + + +) + +const ZhihuIcon = ( + + + +) + +// FMHY 不在 simple-icons 图标库里，用字标，跟其余图标同色同风格。 +const FmhyIcon = ( + + FMHY + +) + +const RustIcon = ( + + + +) + +const CppIcon = ( + + + +) + +const CsharpIcon = ( + + + +) + +const SHORTCUTS: Shortcut[] = [ + { label: 'DeepSeek', href: 'https://chat.deepseek.com', icon: DeepSeekIcon }, + { label: 'GitHub', href: 'https://github.com', icon: GithubIcon }, + { label: 'Bilibili', href: 'https://www.bilibili.com', icon: BilibiliIcon }, + { label: '知乎', href: 'https://www.zhihu.com', icon: ZhihuIcon }, + { label: 'FMHY', href: 'https://fm-hy.top', icon: FmhyIcon }, + { label: 'Rust 文档', href: 'https://rustwiki.org/zh-CN/book/', icon: RustIcon }, + { label: 'C++ 文档', href: 'https://en.cppreference.com/', icon: CppIcon }, + { label: 'C# 文档', href: 'https://learn.microsoft.com/dotnet/csharp/', icon: CsharpIcon }, +] export function QuickLinks() { return ( + // grid-cols-5：8 个入口自然排成第一行 5 个、第二行 3 个（左对齐）。
{SHORTCUTS.map((item, i) => ( - - {/* 占位「+」：填入图标前的空槽 */} - - - - + {item.icon} + ))}
) diff --git a/docs/startpage-quicklinks.md b/docs/startpage-quicklinks.md new file mode 100644 index 0000000..67602c0 --- /dev/null +++ b/docs/startpage-quicklinks.md @@ -0,0 +1,55 @@ +# 起始页：搜索框 + 快捷入口（已实现） + +导航起始页在问候语 / 天气行下方有两块：可切换搜索引擎的**搜索框**， +以及一组**快捷入口**（第一行 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 个，每个用 `` 新标签页打开： + + | 行 | 入口 | 链接 | + |----|------|------| + | 一 | 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` 用 `` 字标。 +2. 往 `SHORTCUTS` 加 `{ label, href, icon }`。 +3. 调整居中：第二行第一个入口要带 `col-start-N`。当前规则写死在 `i === 5` + （第 6 个起是第二行）；若每行个数变了，按新的「第二行起始下标 / 居中起始列」改这两处。 + +## 部署 + +纯前端改动，按 `docs/startpage-weather-location.md`「只改前端」一节： +`npm run build` → 清空服务器 `static/` → 上传 `dist/*`，后端进程不用动。