23 KiB
Polaris 首页设计文档
关联文档： Polaris 项目说明文档 —— 项目定位、技术选型、数据结构、开发阶段 Polaris 分类页设计文档 —— 分类页布局与交互
配套设计图：Polaris 页面设计图（示意图，视觉细节以本文档文字规范为准）
0. 当前实现状态（2026-10-14 校对）
本章为现状说明。第 1–13 章保留立项时的历史设计意图，其中「浅色玻璃」「CSS 渐变背景」「仅适配桌面端」等表述均为历史方案，不代表当前实现；样式细节以本章与 src/app/globals.css 为准。
视觉主题：当前为深色玻璃主题（color-scheme: dark），没有浅色/深色切换。稳定的设计 tokens：
--background: #101a2a;
--text-primary: #f4f7fc;
--text-secondary: #d7e2f0;
--text-muted: #bfd0e4;
--primary: #a9c9ff;
--primary-hover: #d3e3ff;
--primary-soft: rgba(147, 190, 255, 0.15);
--border-glass: rgba(222, 234, 255, 0.17);
--radius-card: 20px;
--radius-panel: 24px;
玻璃表面：侧边栏、搜索框、常用链接卡片均为深色半透明渐变（--surface-sidebar / --surface-search / --surface-card / --surface-card-hover），配合 backdrop-filter: blur(16px - 20px) saturate(108% - 134%) 与带内描边高光的软阴影，形成悬浮玻璃面板感。
背景：背景素材可整体替换（用户会不定期更换），背景层的显示与遮罩样式由现有 CSS 管理——body 背景层（fixed + cover）之上叠加一层固定的深色渐变遮罩保证前景可读；素材的类型、路径与画面内容不属于设计规范。settings.theme 与 settings.background 目前仅有数据模型与校验逻辑，不驱动任何样式。
响应式（已实现）：
桌面默认：侧栏展开 240px / 折叠 72px，常用链接 4 列
≤1199px：侧栏展开宽度 220px，常用链接 2 列
≤767px：侧边栏变为顶部横栏（Logo + 横向滚动导航，折叠按钮隐藏），
首页与分类页改为顶部横栏下方的常规滚动布局
≤420px：常用链接 1 列，搜索快捷键提示隐藏
另已支持 prefers-reduced-motion 降低动效。
数据现状：8 个分类（含后增的「游戏资料」）、51 条链接、6 条 pinned 常用链接。
1. 页面定位
Polaris 首页是一个浏览器起始页，不是后台管理系统，也不是信息密集型 Dashboard。
一个具有个人审美、可自定义背景、可快速搜索和访问常用链接的浏览器起始页。
首页应给人的感觉是：
私人入口
浏览器首页
轻量工具启动页
个人网址导航
安静、高效、有氛围感
而不是：
后台系统
资源管理平台
复杂书签管理器
信息看板
数据仪表盘
2. 整体视觉风格
首页推荐采用：
轻量玻璃感 + 极简浏览器起始页 + 柔和个人空间感
2026-10-14 实现状态：该方向已落地，但配色从浅色玻璃改为深色玻璃（深蓝底、冷白文字，见第 0 章）；关键词中「玻璃感、低饱和、可换背景、安静」依然成立。
设计关键词：
极简
半透明
玻璃感
柔和阴影
大留白
低饱和
可换背景
个人化
安静
高级感
整体视觉应避免过重的管理系统风格。
首页不应常驻展示以下元素：
设置按钮
编辑按钮
管理按钮
新增按钮
统计数据
用户头像
访问次数
站点域名副标题
复杂分类卡片
这些能力在后续阶段通过隐藏入口、独立配置页或快捷键面板实现。
3. 首页整体布局
首页采用左右结构：
┌──────────────────┬────────────────────────────────────────────┐
│ 左侧边栏 │ 主内容区域 │
│ │ │
│ Logo + 折叠按钮 │ 问候语 + 当前时间 │
│ 首页 │ 日期 / 星期 │
│ AI 工具 │ 搜索框 │
│ 开发工具 │ 常用链接 │
│ 设计资源 │ │
│ 学习资料 │ │
│ 效率工具 │ │
│ 娱乐媒体 │ │
│ 生活服务 │ │
└──────────────────┴────────────────────────────────────────────┘
布局原则：
- 左侧边栏负责分类导航；
- 主内容区域只展示最高频内容；
- 首页不展示分类卡片；
- 首页不展示编辑、设置、管理类按钮；
- 常用链接只做轻量展示。
主内容整体居中，视觉重心位于页面中上方。
推荐信息层级：
1. 当前时间 / 问候语
2. 搜索框
3. 常用链接
4. 左侧分类导航
5. 背景氛围
4. 左侧边栏设计
4.1 边栏内容
左侧边栏从上到下依次展示：
Logo
折叠按钮
首页
AI 工具
开发工具
设计资源
学习资料
效率工具
娱乐媒体
生活服务
2026-10-14 实现状态：当前侧边栏为「首页 + 8 个分类」，新增了「游戏资料」分类，上表为立项时的 7 分类历史列表；折叠时导航项只显示图标并提供 Tooltip，移动端顶部横栏下不显示折叠按钮。
「首页」指向 /，各分类指向 /categories/{categoryId}。当前路由对应的导航项处于选中态，选中样式见分类页设计文档 6.2 节。
暂时不展示：
设置
关于
编辑
管理
新增分类
账户信息
4.2 折叠按钮位置
折叠按钮放在侧边栏顶部右侧，与 Logo 位于同一行。
示意：
┌──────────────────────┐
│ Logo ≪ │
└──────────────────────┘
不采用侧边栏中间悬浮按钮。
原因：
- 中间悬浮按钮视觉上突兀；
- 容易产生后台管理系统的感觉；
- 会破坏页面边界的干净感；
- 顶部右侧更符合用户对全局控制按钮的认知。
4.3 边栏宽度
展开状态：
推荐宽度：240px
可选范围：220px - 260px
折叠状态：
推荐宽度：72px
可选范围：68px - 80px
展开时显示图标和文字。
折叠时只显示图标。
折叠状态持久化到 localStorage，刷新后保持。
4.4 边栏视觉样式
推荐样式：
background: rgba(255, 255, 255, 0.68);
backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.45);
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.1);
border-radius: 24px;
2026-10-14 实现状态：上方浅色样式为历史方案。当前侧边栏为深色渐变玻璃（
--surface-sidebar，blur(20px) saturate(108%)，--shadow-panel阴影），悬浮边距仍为 20px；宽度见第 0 章响应式。
边栏与页面边缘保持一定距离，形成悬浮玻璃面板感。
推荐边距：
left: 20px;
top: 20px;
bottom: 20px;
5. 时间与问候语
首页顶部展示问候语和当前时间。
示例：
晚上好，21:56
2026 年 8 月 20 日 星期四
问候语规则：
05:00 - 11:59 早上好
12:00 - 13:59 中午好
14:00 - 17:59 下午好
18:00 - 23:59 晚上好
00:00 - 04:59 夜深了
推荐样式：
font-size: 56px;
font-weight: 700;
color: #0f172a;
2026-10-14 实现状态：当前问候语字号为 clamp(44px, 4.2vw, 56px)、冷白色（rgba(248, 250, 252, 0.98)）并带文字投影，日期为 rgba(241, 245, 249, 0.86)；上方 #0f172a / #64748b 为历史浅色方案。
日期样式：
font-size: 16px;
color: #64748b;
时间为客户端实时时钟，每分钟更新。
6. 搜索框设计
6.1 搜索框定位
搜索框是 Polaris 首页最核心的交互组件。
搜索框位于时间与日期下方，居中展示，首页加载后自动聚焦。
6.2 搜索范围
首页搜索框支持以下四种搜索方式：
Google 搜索
Bing 搜索
GitHub 搜索
本地搜索
其中：
- Google 搜索：使用 Google 搜索引擎搜索输入内容；
- Bing 搜索：使用 Bing 搜索引擎搜索输入内容；
- GitHub 搜索：在 GitHub 中搜索输入内容；
- 本地搜索：搜索 Polaris 本地配置中的链接、分类和名称。
第一版不支持：
直接输入 URL 跳转
自定义搜索引擎
多搜索引擎聚合结果
AI 搜索
站外爬取搜索
全文索引搜索
这些能力作为后续扩展。
6.3 搜索框尺寸
桌面端推荐：
width: 760px;
height: 68px;
可选范围：
宽度：720px - 860px
高度：64px - 72px
历史说明：立项时移动端尺寸未定义。当前移动端已适配：搜索框宽度随容器收缩，≤420px 时隐藏快捷键提示（见第 0 章）。
6.4 搜索框视觉样式
推荐样式：
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(22px);
border: 1px solid rgba(255, 255, 255, 0.65);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
2026-10-14 实现状态：上方浅色样式为历史方案。当前搜索框为深色玻璃（
--surface-search渐变 + blur(20px) saturate(108%)），聚焦时出现 rgba(147, 197, 253, 0.17) 的 focus 环；尺寸仍为最大 760px × 68px。
placeholder 统一为：
搜索网站、书签或关键词...
右侧展示快捷键提示，按平台检测显示：
macOS：⌘K
Windows / Linux：Ctrl K
快捷键行为：按下后聚焦搜索框（详见 7.4）。
6.5 搜索模式切换
搜索模式可以通过以下方式切换：
搜索框左侧下拉选择
快捷键切换
命令面板中选择
默认使用上一次选择的搜索方式
第一版采用简单方案：
搜索框左侧或右侧提供当前搜索模式标识
点击后可切换 Google / Bing / GitHub / 本地
6.6 本地搜索范围
本地搜索的数据来自本地数据配置。
搜索范围包括：
链接标题
链接关键词
链接描述
分类名称
分类 ID
链接数据预留 keywords 字段，完整数据结构见项目说明文档。
7. 搜索功能设计
7.1 搜索 Provider
支持四个 provider：
export type SearchProvider = "google" | "bing" | "github" | "local"
7.2 搜索行为
Google：
https://www.google.com/search?q={keyword}
Bing：
https://www.bing.com/search?q={keyword}
GitHub：
https://github.com/search?q={keyword}
Local：
在本地 links / categories 数据中搜索
7.3 本地搜索匹配规则
本地搜索匹配字段：
title
keywords
categoryId
category title
推荐匹配逻辑（权重从高到低）：
完全匹配优先
标题匹配其次
关键词匹配再次
分类匹配最后
搜索结果展示：
图标
标题
所属分类
搜索行为按模式严格分离：选择使用哪个搜索引擎，就只用它搜索。
Google / Bing / GitHub 模式：回车直接跳转对应引擎搜索，不显示任何下拉
Local 模式：输入时实时显示本地结果下拉（见 7.5）
Local 模式回车行为：
如果只有一个高匹配本地结果，回车打开该链接
如果有多个结果，↑ / ↓ 选择后回车打开选中项（默认选中第一项）
如果没有结果，展示空状态
7.4 快捷键
Ctrl K（macOS 为 ⌘K）：聚焦搜索框
Esc：清空输入 / 关闭结果列表
快捷键仅在首页生效，分类页不响应。
7.5 结果下拉面板（仅 Local 模式）
面板出现在搜索框正下方，与搜索框同宽，间距 8px，视觉上与搜索框衔接为一体。
面板样式：
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(22px);
border: 1px solid rgba(255, 255, 255, 0.65);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
2026-10-14 实现状态：上方浅色样式为历史方案。当前结果面板为更实的深色玻璃 rgba(19, 31, 49, 0.95)，最大高度 min(520px, 100vh − 220px)，选中项使用
--primary-soft底色。
列表项内容：
图标（遵循统一图标方案）
标题
所属分类
交互：
↑ / ↓ 在结果间移动选中项
回车打开选中项（新标签页）
Esc 关闭面板
鼠标点击直接打开
选中项背景 rgba(59, 130, 246, 0.10)
结果数量上限 8 条；无匹配时面板内展示空状态「没有匹配的网站」。
8. 常用链接区域
8.1 区域定位
常用链接用于展示用户最高频访问的网站。
首页不展示分类卡片，以保持页面干净。
第一版展示 8 个常用链接：
GitHub
ChatGPT
Gmail
Notion
Figma
YouTube
Vercel
Bilibili
实际项目中根据个人习惯调整。
2026-10-14 实现状态：当前 pinned 链接为 6 条，按
pinnedSort排序展示：GitHub、ChatGPT、Gmail、Notion、YouTube、Bilibili；服务层默认上限仍为 8 条（getPinnedLinks(limit = 8)）。下文「第一版展示 8 个常用链接」及 8 条 pinned 的数据构成为立项时的历史方案。
数据来源：pinned: true 的链接，按 pinnedSort 排序取前 8 个；超出 8 个时按 4 列网格换行展示。sort 仅用于分类内排序，避免首页顺序与分类页顺序相互约束。
第一版数据构成（8 条 pinned 分布于各分类，归入真实分类）：
GitHub → 开发工具（dev）
Vercel → 开发工具（dev）
Figma → 开发工具（dev）
ChatGPT → AI 工具（ai）
Gmail → 效率工具（efficiency）
Notion → 效率工具（efficiency）
YouTube → 娱乐媒体（media）
Bilibili → 娱乐媒体（media）
其中 ChatGPT、Gmail、Notion、YouTube、Bilibili 5 条是为首页常用链接补入的跨分类条目。受此影响，AI 工具、效率工具、娱乐媒体三个分类页会展示少量链接而非空状态；纯空状态分类为设计资源、学习资料、生活服务。
8.2 链接卡片内容
常用链接卡片只展示：
图标
名称
不展示：
域名
描述
编辑按钮
更多按钮
拖拽按钮
访问统计
图标来源遵循统一图标方案（见项目说明文档）：自定义图标 → Simple Icons / 本地图标库 → favicon 自动抓取 → 文字占位兜底。
8.3 链接卡片样式
推荐样式：
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.56);
border-radius: 20px;
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.1);
2026-10-14 实现状态：上方浅色样式为历史方案。当前卡片为深色玻璃（
--surface-card+ blur(16px) saturate(134%)），高 76px、圆角 20px，hover 上浮与过渡不变。
推荐尺寸：
width: 200px;
height: 76px;
推荐布局：
两行四列
示意：
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ GitHub │ │ChatGPT │ │ Gmail │ │ Notion │
└────────┘ └────────┘ └────────┘ └────────┘
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ Figma │ │YouTube │ │ Vercel │ │Bilibili│
└────────┘ └────────┘ └────────┘ └────────┘
Hover 效果：
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
transition: all 180ms ease;
点击卡片在新标签页打开链接。
9. 背景设计
9.1 背景类型
Polaris 支持背景自定义的设计预留。
第一版默认背景为 CSS 低饱和青蓝渐变（模拟晨雾 / 天空氛围），不依赖图片资产。
2026-10-14 实现状态（重要）：背景已不再是 CSS 渐变，改为可替换的背景素材层 + 深色遮罩（由
body背景层加载，见第 0 章）；背景层显示与遮罩样式由现有 CSS 管理，素材的类型、路径、画面与题材由用户自行选择、不定期更换，不写入设计规范。下方「图片背景建议」仅作当时的设计联想，不构成约束。settings.background.type目前仅有数据模型与校验，未接入渲染；「CSS 低饱和青蓝渐变」为历史方案。
后续支持：
静态图片背景
渐变背景
纯色背景
本地上传背景
远程图片背景
深色背景
图片背景建议：
湖面
雪山
晨雾
天空
抽象渐变
低对比度风景图
背景类型通过 settings.background.type（gradient / image）配置。
9.2 背景遮罩
由于用户未来可能更换任意背景，因此需要增加背景遮罩层，保证内容可读。
2026-10-14 实现状态：遮罩已实现，但形态与下方两侧历史值不同——当前为固定深色渐变（顶部 rgba(5, 12, 25, 0.43) → 中部 0.37 → 底部 0.47，无 backdrop blur）；浅色遮罩值为历史方案，「深色主题（后续阶段预留）」未按该形式落地。
浅色主题：
background-overlay: rgba(255, 255, 255, 0.32);
backdrop-filter: blur(8px);
深色主题（后续阶段预留）：
background-overlay: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(8px);
10. 配色系统
2026-10-14 实现状态：当前默认为深色玻璃主题（无主题切换），tokens 直接定义在
globals.css的:root，未使用[data-theme]覆盖；settings.theme未接入样式。现行值见第 0 章；下方「推荐 CSS 变量」为立项时的浅色方案，仅作历史参考。
历史方案（浅色玻璃）推荐 CSS 变量：
:root {
--color-text-primary: #0f172a;
--color-text-secondary: #64748b;
--color-text-muted: #94a3b8;
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
--color-primary-soft: rgba(59, 130, 246, 0.1);
--color-surface-sidebar: rgba(255, 255, 255, 0.68);
--color-surface-card: rgba(255, 255, 255, 0.62);
--color-surface-search: rgba(255, 255, 255, 0.72);
--color-border-light: rgba(255, 255, 255, 0.56);
--color-border-subtle: rgba(15, 23, 42, 0.08);
--shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.1);
--shadow-medium: 0 20px 60px rgba(15, 23, 42, 0.12);
}
历史说明：上段为立项时的双主题规划。实际实现未走
[data-theme]覆盖路线，深色值自当前版本起直接作为默认主题（见第 0 章与globals.css）。
11. 字体建议
推荐字体栈：
font-family:
Inter,
"SF Pro Display",
"SF Pro Text",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"PingFang SC",
"Hiragino Sans GB",
"Microsoft YaHei",
sans-serif;
2026-10-14 实现状态：当前字体栈以 Avenir Next / Avenir 开头，未引入 Inter；中文回退与上方一致。
字体原则：
标题清晰
正文轻盈
导航可读
不要使用过度装饰性字体
12. 首页线框
┌──────────────────────┬────────────────────────────────────────────────────┐
│ │ │
│ LOGO ≪ │ │
│ │ │
│ ⌂ 首页 │ │
│ ✦ AI 工具 │ 晚上好，21:56 │
│ <> 开发工具 │ 2026 年 8 月 20 日 星期四 │
│ ◌ 设计资源 │ │
│ 📖 学习资料 │ ┌────────────────────────────────────┐ │
│ ⚡ 效率工具 │ │ 🔍 搜索网站、书签或关键词... Ctrl K │ │
│ ▶ 娱乐媒体 │ └────────────────────────────────────┘ │
│ ☕ 生活服务 │ │
│ │ 常用链接 │
│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ │ GitHub │ │ChatGPT │ │ Gmail │ │ Notion │ │
│ │ └────────┘ └────────┘ └────────┘ └────────┘ │
│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ │ Figma │ │YouTube │ │ Vercel │ │Bilibili│ │
│ │ └────────┘ └────────┘ └────────┘ └────────┘ │
│ │ │
└──────────────────────┴────────────────────────────────────────────────────┘
13. 设计原则总结
首页遵循以下原则：
首页只放最高频内容
搜索框是核心入口
搜索范围保持克制
常用链接轻量展示
分类入口放在左侧边栏
首页不展示分类卡片
首页不展示编辑和设置按钮
背景可换，但内容必须始终清晰
玻璃感要轻，不要炫技
交互动效要柔和，不要夸张
整体像浏览器起始页，不像后台系统
第一版数据本地配置，后续平滑切换到 Go 后端
第一版仅实现浅色主题、仅适配桌面端
历史说明：末行「仅浅色主题、仅适配桌面端」为第一版约束，已被后续实现取代——当前为深色玻璃默认主题，移动端适配已完成。
最终目标：
打开 Polaris 后，用户可以立刻搜索、立刻访问常用网站，也可以通过侧边栏进入分类页面。页面具有个人氛围，但保持干净、高效、克制。