842 lines
23 KiB
Markdown
842 lines
23 KiB
Markdown
# Polaris 首页设计文档
|
||
|
||
> 关联文档：
|
||
> [Polaris 项目说明文档](./Polaris%20项目说明文档.md) —— 项目定位、技术选型、数据结构、开发阶段
|
||
> [Polaris 分类页设计文档](./Polaris%20分类页设计文档.md) —— 分类页布局与交互
|
||
>
|
||
> 配套设计图：[Polaris 页面设计图](../assets/Polaris页面设计图.png)（示意图，视觉细节以本文档文字规范为准）
|
||
|
||
## 0. 当前实现状态（2026-10-14 校对）
|
||
|
||
本章为现状说明。第 1–13 章保留立项时的历史设计意图，其中「浅色玻璃」「CSS 渐变背景」「仅适配桌面端」等表述均为历史方案，不代表当前实现；样式细节以本章与 `src/app/globals.css` 为准。
|
||
|
||
**视觉主题**：当前为深色玻璃主题（`color-scheme: dark`），没有浅色/深色切换。稳定的设计 tokens：
|
||
|
||
```css
|
||
--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` 目前仅有数据模型与校验逻辑，不驱动任何样式。
|
||
|
||
**响应式（已实现）**：
|
||
|
||
```text
|
||
桌面默认：侧栏展开 240px / 折叠 72px，常用链接 4 列
|
||
≤1199px：侧栏展开宽度 220px，常用链接 2 列
|
||
≤767px：侧边栏变为顶部横栏（Logo + 横向滚动导航，折叠按钮隐藏），
|
||
首页与分类页改为顶部横栏下方的常规滚动布局
|
||
≤420px：常用链接 1 列，搜索快捷键提示隐藏
|
||
```
|
||
|
||
另已支持 `prefers-reduced-motion` 降低动效。
|
||
|
||
**数据现状**：8 个分类（含后增的「游戏资料」）、51 条链接、6 条 pinned 常用链接。
|
||
|
||
## 1. 页面定位
|
||
|
||
Polaris 首页是一个**浏览器起始页**，不是后台管理系统，也不是信息密集型 Dashboard。
|
||
|
||
> 一个具有个人审美、可自定义背景、可快速搜索和访问常用链接的浏览器起始页。
|
||
|
||
首页应给人的感觉是：
|
||
|
||
```text
|
||
私人入口
|
||
浏览器首页
|
||
轻量工具启动页
|
||
个人网址导航
|
||
安静、高效、有氛围感
|
||
```
|
||
|
||
而不是：
|
||
|
||
```text
|
||
后台系统
|
||
资源管理平台
|
||
复杂书签管理器
|
||
信息看板
|
||
数据仪表盘
|
||
```
|
||
|
||
---
|
||
|
||
## 2. 整体视觉风格
|
||
|
||
首页推荐采用：
|
||
|
||
> 轻量玻璃感 + 极简浏览器起始页 + 柔和个人空间感
|
||
|
||
> 2026-10-14 实现状态：该方向已落地，但配色从浅色玻璃改为**深色玻璃**（深蓝底、冷白文字，见第 0 章）；关键词中「玻璃感、低饱和、可换背景、安静」依然成立。
|
||
|
||
设计关键词：
|
||
|
||
```text
|
||
极简
|
||
半透明
|
||
玻璃感
|
||
柔和阴影
|
||
大留白
|
||
低饱和
|
||
可换背景
|
||
个人化
|
||
安静
|
||
高级感
|
||
```
|
||
|
||
整体视觉应避免过重的管理系统风格。
|
||
|
||
首页不应常驻展示以下元素：
|
||
|
||
```text
|
||
设置按钮
|
||
编辑按钮
|
||
管理按钮
|
||
新增按钮
|
||
统计数据
|
||
用户头像
|
||
访问次数
|
||
站点域名副标题
|
||
复杂分类卡片
|
||
```
|
||
|
||
这些能力在后续阶段通过隐藏入口、独立配置页或快捷键面板实现。
|
||
|
||
---
|
||
|
||
## 3. 首页整体布局
|
||
|
||
首页采用左右结构：
|
||
|
||
```text
|
||
┌──────────────────┬────────────────────────────────────────────┐
|
||
│ 左侧边栏 │ 主内容区域 │
|
||
│ │ │
|
||
│ Logo + 折叠按钮 │ 问候语 + 当前时间 │
|
||
│ 首页 │ 日期 / 星期 │
|
||
│ AI 工具 │ 搜索框 │
|
||
│ 开发工具 │ 常用链接 │
|
||
│ 设计资源 │ │
|
||
│ 学习资料 │ │
|
||
│ 效率工具 │ │
|
||
│ 娱乐媒体 │ │
|
||
│ 生活服务 │ │
|
||
└──────────────────┴────────────────────────────────────────────┘
|
||
```
|
||
|
||
布局原则：
|
||
|
||
1. 左侧边栏负责分类导航；
|
||
2. 主内容区域只展示最高频内容；
|
||
3. 首页不展示分类卡片；
|
||
4. 首页不展示编辑、设置、管理类按钮；
|
||
5. 常用链接只做轻量展示。
|
||
|
||
主内容整体居中，视觉重心位于页面中上方。
|
||
|
||
推荐信息层级：
|
||
|
||
```text
|
||
1. 当前时间 / 问候语
|
||
2. 搜索框
|
||
3. 常用链接
|
||
4. 左侧分类导航
|
||
5. 背景氛围
|
||
```
|
||
|
||
---
|
||
|
||
## 4. 左侧边栏设计
|
||
|
||
### 4.1 边栏内容
|
||
|
||
左侧边栏从上到下依次展示：
|
||
|
||
```text
|
||
Logo
|
||
折叠按钮
|
||
首页
|
||
AI 工具
|
||
开发工具
|
||
设计资源
|
||
学习资料
|
||
效率工具
|
||
娱乐媒体
|
||
生活服务
|
||
```
|
||
|
||
> 2026-10-14 实现状态：当前侧边栏为「首页 + 8 个分类」，新增了「游戏资料」分类，上表为立项时的 7 分类历史列表；折叠时导航项只显示图标并提供 Tooltip，移动端顶部横栏下不显示折叠按钮。
|
||
|
||
「首页」指向 `/`，各分类指向 `/categories/{categoryId}`。当前路由对应的导航项处于选中态，选中样式见[分类页设计文档](./Polaris%20分类页设计文档.md) 6.2 节。
|
||
|
||
暂时不展示：
|
||
|
||
```text
|
||
设置
|
||
关于
|
||
编辑
|
||
管理
|
||
新增分类
|
||
账户信息
|
||
```
|
||
|
||
### 4.2 折叠按钮位置
|
||
|
||
折叠按钮放在侧边栏顶部右侧，与 Logo 位于同一行。
|
||
|
||
示意：
|
||
|
||
```text
|
||
┌──────────────────────┐
|
||
│ Logo ≪ │
|
||
└──────────────────────┘
|
||
```
|
||
|
||
不采用侧边栏中间悬浮按钮。
|
||
|
||
原因：
|
||
|
||
1. 中间悬浮按钮视觉上突兀；
|
||
2. 容易产生后台管理系统的感觉；
|
||
3. 会破坏页面边界的干净感；
|
||
4. 顶部右侧更符合用户对全局控制按钮的认知。
|
||
|
||
### 4.3 边栏宽度
|
||
|
||
展开状态：
|
||
|
||
```text
|
||
推荐宽度：240px
|
||
可选范围：220px - 260px
|
||
```
|
||
|
||
折叠状态：
|
||
|
||
```text
|
||
推荐宽度：72px
|
||
可选范围：68px - 80px
|
||
```
|
||
|
||
展开时显示图标和文字。
|
||
|
||
折叠时只显示图标。
|
||
|
||
折叠状态持久化到 `localStorage`，刷新后保持。
|
||
|
||
### 4.4 边栏视觉样式
|
||
|
||
推荐样式：
|
||
|
||
```css
|
||
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 章响应式。
|
||
|
||
边栏与页面边缘保持一定距离，形成悬浮玻璃面板感。
|
||
|
||
推荐边距：
|
||
|
||
```text
|
||
left: 20px;
|
||
top: 20px;
|
||
bottom: 20px;
|
||
```
|
||
|
||
---
|
||
|
||
## 5. 时间与问候语
|
||
|
||
首页顶部展示问候语和当前时间。
|
||
|
||
示例：
|
||
|
||
```text
|
||
晚上好，21:56
|
||
2026 年 8 月 20 日 星期四
|
||
```
|
||
|
||
问候语规则：
|
||
|
||
```text
|
||
05:00 - 11:59 早上好
|
||
12:00 - 13:59 中午好
|
||
14:00 - 17:59 下午好
|
||
18:00 - 23:59 晚上好
|
||
00:00 - 04:59 夜深了
|
||
```
|
||
|
||
推荐样式：
|
||
|
||
```css
|
||
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 为历史浅色方案。
|
||
|
||
日期样式：
|
||
|
||
```css
|
||
font-size: 16px;
|
||
color: #64748b;
|
||
```
|
||
|
||
时间为客户端实时时钟，每分钟更新。
|
||
|
||
---
|
||
|
||
## 6. 搜索框设计
|
||
|
||
### 6.1 搜索框定位
|
||
|
||
搜索框是 Polaris 首页最核心的交互组件。
|
||
|
||
搜索框位于时间与日期下方，居中展示，首页加载后**自动聚焦**。
|
||
|
||
### 6.2 搜索范围
|
||
|
||
首页搜索框支持以下四种搜索方式：
|
||
|
||
```text
|
||
Google 搜索
|
||
Bing 搜索
|
||
GitHub 搜索
|
||
本地搜索
|
||
```
|
||
|
||
其中：
|
||
|
||
1. **Google 搜索**：使用 Google 搜索引擎搜索输入内容；
|
||
2. **Bing 搜索**：使用 Bing 搜索引擎搜索输入内容；
|
||
3. **GitHub 搜索**：在 GitHub 中搜索输入内容；
|
||
4. **本地搜索**：搜索 Polaris 本地配置中的链接、分类和名称。
|
||
|
||
第一版不支持：
|
||
|
||
```text
|
||
直接输入 URL 跳转
|
||
自定义搜索引擎
|
||
多搜索引擎聚合结果
|
||
AI 搜索
|
||
站外爬取搜索
|
||
全文索引搜索
|
||
```
|
||
|
||
这些能力作为后续扩展。
|
||
|
||
### 6.3 搜索框尺寸
|
||
|
||
桌面端推荐：
|
||
|
||
```text
|
||
width: 760px;
|
||
height: 68px;
|
||
```
|
||
|
||
可选范围：
|
||
|
||
```text
|
||
宽度：720px - 860px
|
||
高度：64px - 72px
|
||
```
|
||
|
||
> 历史说明：立项时移动端尺寸未定义。当前移动端已适配：搜索框宽度随容器收缩，≤420px 时隐藏快捷键提示（见第 0 章）。
|
||
|
||
### 6.4 搜索框视觉样式
|
||
|
||
推荐样式：
|
||
|
||
```css
|
||
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 统一为：
|
||
|
||
```text
|
||
搜索网站、书签或关键词...
|
||
```
|
||
|
||
右侧展示快捷键提示，**按平台检测显示**：
|
||
|
||
```text
|
||
macOS：⌘K
|
||
Windows / Linux：Ctrl K
|
||
```
|
||
|
||
快捷键行为：按下后聚焦搜索框（详见 7.4）。
|
||
|
||
### 6.5 搜索模式切换
|
||
|
||
搜索模式可以通过以下方式切换：
|
||
|
||
```text
|
||
搜索框左侧下拉选择
|
||
快捷键切换
|
||
命令面板中选择
|
||
默认使用上一次选择的搜索方式
|
||
```
|
||
|
||
第一版采用简单方案：
|
||
|
||
```text
|
||
搜索框左侧或右侧提供当前搜索模式标识
|
||
点击后可切换 Google / Bing / GitHub / 本地
|
||
```
|
||
|
||
### 6.6 本地搜索范围
|
||
|
||
本地搜索的数据来自本地数据配置。
|
||
|
||
搜索范围包括：
|
||
|
||
```text
|
||
链接标题
|
||
链接关键词
|
||
链接描述
|
||
分类名称
|
||
分类 ID
|
||
```
|
||
|
||
链接数据预留 `keywords` 字段，完整数据结构见[项目说明文档](./Polaris%20项目说明文档.md)。
|
||
|
||
---
|
||
|
||
## 7. 搜索功能设计
|
||
|
||
### 7.1 搜索 Provider
|
||
|
||
支持四个 provider：
|
||
|
||
```ts
|
||
export type SearchProvider = "google" | "bing" | "github" | "local"
|
||
```
|
||
|
||
### 7.2 搜索行为
|
||
|
||
Google：
|
||
|
||
```text
|
||
https://www.google.com/search?q={keyword}
|
||
```
|
||
|
||
Bing：
|
||
|
||
```text
|
||
https://www.bing.com/search?q={keyword}
|
||
```
|
||
|
||
GitHub：
|
||
|
||
```text
|
||
https://github.com/search?q={keyword}
|
||
```
|
||
|
||
Local：
|
||
|
||
```text
|
||
在本地 links / categories 数据中搜索
|
||
```
|
||
|
||
### 7.3 本地搜索匹配规则
|
||
|
||
本地搜索匹配字段：
|
||
|
||
```text
|
||
title
|
||
keywords
|
||
categoryId
|
||
category title
|
||
```
|
||
|
||
推荐匹配逻辑（权重从高到低）：
|
||
|
||
```text
|
||
完全匹配优先
|
||
标题匹配其次
|
||
关键词匹配再次
|
||
分类匹配最后
|
||
```
|
||
|
||
搜索结果展示：
|
||
|
||
```text
|
||
图标
|
||
标题
|
||
所属分类
|
||
```
|
||
|
||
搜索行为**按模式严格分离**：选择使用哪个搜索引擎，就只用它搜索。
|
||
|
||
```text
|
||
Google / Bing / GitHub 模式：回车直接跳转对应引擎搜索，不显示任何下拉
|
||
Local 模式：输入时实时显示本地结果下拉（见 7.5）
|
||
```
|
||
|
||
Local 模式回车行为：
|
||
|
||
```text
|
||
如果只有一个高匹配本地结果，回车打开该链接
|
||
如果有多个结果，↑ / ↓ 选择后回车打开选中项（默认选中第一项）
|
||
如果没有结果，展示空状态
|
||
```
|
||
|
||
### 7.4 快捷键
|
||
|
||
```text
|
||
Ctrl K（macOS 为 ⌘K）：聚焦搜索框
|
||
Esc：清空输入 / 关闭结果列表
|
||
```
|
||
|
||
快捷键仅在首页生效，分类页不响应。
|
||
|
||
---
|
||
|
||
### 7.5 结果下拉面板（仅 Local 模式）
|
||
|
||
面板出现在搜索框正下方，与搜索框同宽，间距 8px，视觉上与搜索框衔接为一体。
|
||
|
||
面板样式：
|
||
|
||
```css
|
||
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` 底色。
|
||
|
||
列表项内容：
|
||
|
||
```text
|
||
图标（遵循统一图标方案）
|
||
标题
|
||
所属分类
|
||
```
|
||
|
||
交互：
|
||
|
||
```text
|
||
↑ / ↓ 在结果间移动选中项
|
||
回车打开选中项（新标签页）
|
||
Esc 关闭面板
|
||
鼠标点击直接打开
|
||
选中项背景 rgba(59, 130, 246, 0.10)
|
||
```
|
||
|
||
结果数量上限 8 条；无匹配时面板内展示空状态「没有匹配的网站」。
|
||
|
||
---
|
||
|
||
## 8. 常用链接区域
|
||
|
||
### 8.1 区域定位
|
||
|
||
常用链接用于展示用户最高频访问的网站。
|
||
|
||
首页不展示分类卡片，以保持页面干净。
|
||
|
||
第一版展示 8 个常用链接：
|
||
|
||
```text
|
||
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 分布于各分类，归入真实分类）：
|
||
|
||
```text
|
||
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 链接卡片内容
|
||
|
||
常用链接卡片只展示：
|
||
|
||
```text
|
||
图标
|
||
名称
|
||
```
|
||
|
||
不展示：
|
||
|
||
```text
|
||
域名
|
||
描述
|
||
编辑按钮
|
||
更多按钮
|
||
拖拽按钮
|
||
访问统计
|
||
```
|
||
|
||
图标来源遵循统一图标方案（见[项目说明文档](./Polaris%20项目说明文档.md)）：自定义图标 → Simple Icons / 本地图标库 → favicon 自动抓取 → 文字占位兜底。
|
||
|
||
### 8.3 链接卡片样式
|
||
|
||
推荐样式：
|
||
|
||
```css
|
||
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 上浮与过渡不变。
|
||
|
||
推荐尺寸：
|
||
|
||
```text
|
||
width: 200px;
|
||
height: 76px;
|
||
```
|
||
|
||
推荐布局：
|
||
|
||
```text
|
||
两行四列
|
||
```
|
||
|
||
示意：
|
||
|
||
```text
|
||
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
|
||
│ GitHub │ │ChatGPT │ │ Gmail │ │ Notion │
|
||
└────────┘ └────────┘ └────────┘ └────────┘
|
||
|
||
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
|
||
│ Figma │ │YouTube │ │ Vercel │ │Bilibili│
|
||
└────────┘ └────────┘ └────────┘ └────────┘
|
||
```
|
||
|
||
Hover 效果：
|
||
|
||
```css
|
||
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 低饱和青蓝渐变」为历史方案。
|
||
|
||
后续支持：
|
||
|
||
```text
|
||
静态图片背景
|
||
渐变背景
|
||
纯色背景
|
||
本地上传背景
|
||
远程图片背景
|
||
深色背景
|
||
```
|
||
|
||
图片背景建议：
|
||
|
||
```text
|
||
湖面
|
||
雪山
|
||
晨雾
|
||
天空
|
||
抽象渐变
|
||
低对比度风景图
|
||
```
|
||
|
||
背景类型通过 `settings.background.type`（`gradient` / `image`）配置。
|
||
|
||
### 9.2 背景遮罩
|
||
|
||
由于用户未来可能更换任意背景，因此需要增加背景遮罩层，保证内容可读。
|
||
|
||
> 2026-10-14 实现状态：遮罩已实现，但形态与下方两侧历史值不同——当前为固定深色渐变（顶部 rgba(5, 12, 25, 0.43) → 中部 0.37 → 底部 0.47，无 backdrop blur）；浅色遮罩值为历史方案，「深色主题（后续阶段预留）」未按该形式落地。
|
||
|
||
浅色主题：
|
||
|
||
```css
|
||
background-overlay: rgba(255, 255, 255, 0.32);
|
||
backdrop-filter: blur(8px);
|
||
```
|
||
|
||
深色主题（后续阶段预留）：
|
||
|
||
```css
|
||
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 变量：
|
||
|
||
```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. 字体建议
|
||
|
||
推荐字体栈：
|
||
|
||
```css
|
||
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；中文回退与上方一致。
|
||
|
||
字体原则：
|
||
|
||
```text
|
||
标题清晰
|
||
正文轻盈
|
||
导航可读
|
||
不要使用过度装饰性字体
|
||
```
|
||
|
||
---
|
||
|
||
## 12. 首页线框
|
||
|
||
```text
|
||
┌──────────────────────┬────────────────────────────────────────────────────┐
|
||
│ │ │
|
||
│ LOGO ≪ │ │
|
||
│ │ │
|
||
│ ⌂ 首页 │ │
|
||
│ ✦ AI 工具 │ 晚上好，21:56 │
|
||
│ <> 开发工具 │ 2026 年 8 月 20 日 星期四 │
|
||
│ ◌ 设计资源 │ │
|
||
│ 📖 学习资料 │ ┌────────────────────────────────────┐ │
|
||
│ ⚡ 效率工具 │ │ 🔍 搜索网站、书签或关键词... Ctrl K │ │
|
||
│ ▶ 娱乐媒体 │ └────────────────────────────────────┘ │
|
||
│ ☕ 生活服务 │ │
|
||
│ │ 常用链接 │
|
||
│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
|
||
│ │ │ GitHub │ │ChatGPT │ │ Gmail │ │ Notion │ │
|
||
│ │ └────────┘ └────────┘ └────────┘ └────────┘ │
|
||
│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
|
||
│ │ │ Figma │ │YouTube │ │ Vercel │ │Bilibili│ │
|
||
│ │ └────────┘ └────────┘ └────────┘ └────────┘ │
|
||
│ │ │
|
||
└──────────────────────┴────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 13. 设计原则总结
|
||
|
||
首页遵循以下原则：
|
||
|
||
```text
|
||
首页只放最高频内容
|
||
搜索框是核心入口
|
||
搜索范围保持克制
|
||
常用链接轻量展示
|
||
分类入口放在左侧边栏
|
||
首页不展示分类卡片
|
||
首页不展示编辑和设置按钮
|
||
背景可换，但内容必须始终清晰
|
||
玻璃感要轻，不要炫技
|
||
交互动效要柔和，不要夸张
|
||
整体像浏览器起始页，不像后台系统
|
||
第一版数据本地配置，后续平滑切换到 Go 后端
|
||
第一版仅实现浅色主题、仅适配桌面端
|
||
```
|
||
|
||
> 历史说明：末行「仅浅色主题、仅适配桌面端」为第一版约束，已被后续实现取代——当前为深色玻璃默认主题，移动端适配已完成。
|
||
|
||
最终目标：
|
||
|
||
> 打开 Polaris 后，用户可以立刻搜索、立刻访问常用网站，也可以通过侧边栏进入分类页面。页面具有个人氛围，但保持干净、高效、克制。
|