From 7eaa9e6f80d8a1c1e0350e91ae1300138b99910c Mon Sep 17 00:00:00 2001
From: Spirale <2635131263@qq.com>
Date: Fri, 21 Aug 2026 22:08:14 +0800
Subject: [PATCH] =?UTF-8?q?docs(ts):=20=E9=87=8D=E7=BB=84=20Polaris=20?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E6=96=87=E6=A1=A3=E4=BD=93=E7=B3=BB=E5=B9=B6?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB=E8=87=B3=20nextjs=20=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 拆分为项目说明/首页设计/分类页设计三份文档，职责分离
- 新增项目说明文档：14 条决策记录、技术选型（Next.js 静态导出）、
  数据结构、Go API 草案、通用语法表结构、五阶段规划
- 融入决策：JSON 数据载体、Ctrl+K 仅首页生效、统一图标方案
  （si:/local:/url: 前缀 + 四级 fallback）、搜索按模式严格分离、
  首页补足 8 个常用链接（跨分类归属）
- 目录 ts/web/astro/polaris → ts/web/nextjs/polaris，
  删除过时 README，更新 ts/README.md 框架描述
---
 ts/README.md                                  |    2 +-
 ts/web/astro/polaris/README.md                |   31 -
 .../nextjs/polaris/Polaris 分类页设计文档.md  | 1243 +++++++++++++++++
 ts/web/nextjs/polaris/Polaris 项目说明文档.md |  430 ++++++
 .../polaris/Polaris 首页设计文档.md}          |  984 +++----------
 .../polaris/Polaris页面设计图.png             |  Bin
 ts/web/{astro => nextjs}/polaris/logo.svg     |    0
 7 files changed, 1896 insertions(+), 794 deletions(-)
 delete mode 100644 ts/web/astro/polaris/README.md
 create mode 100644 ts/web/nextjs/polaris/Polaris 分类页设计文档.md
 create mode 100644 ts/web/nextjs/polaris/Polaris 项目说明文档.md
 rename ts/web/{astro/polaris/Polaris 个人导航站项目说明文档.md => nextjs/polaris/Polaris 首页设计文档.md} (52%)
 rename ts/web/{astro => nextjs}/polaris/Polaris页面设计图.png (100%)
 rename ts/web/{astro => nextjs}/polaris/logo.svg (100%)

diff --git a/ts/README.md b/ts/README.md
index d54f5e9..d568bb0 100644
--- a/ts/README.md
+++ b/ts/README.md
@@ -13,7 +13,7 @@
 | 目录 | 放什么 |
 |---|---|
 | `basics/` | 语法基础、类型系统、ES 新特性 |
-| `web/` | 前端框架：Astro、Vite 等 |
+| `web/` | 前端框架：Next.js、Astro、Vite 等 |
 | `node/` | Node.js 后端练习（http、fs、CLI…） |
 | `testing/` | 测试机制（Vitest、Playwright…） |
 | `project/` | 完整小项目（多文件） |
diff --git a/ts/web/astro/polaris/README.md b/ts/web/astro/polaris/README.md
deleted file mode 100644
index f60aad3..0000000
--- a/ts/web/astro/polaris/README.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Polaris（北极星）
-
-个人导航网站（Personal Navigation / 个人主页 + 导航站）。
-
-## 项目背景（记录于开发启动前）
-
-- **项目名**：polaris
-- **定位**：个人导航网站 —— 作为个人门户，聚合常用链接 / 站点导航 / 个人介绍等。
-- **当前状态**：设计尚未完成，仅完成并存放了 Logo（`logo.svg`）。
-- **Logo 风格**：青蓝渐变（`#00F2FE → #3B82F6`）的"极客魔法阵 + 机甲指针"罗盘图形，整体偏深色科技感。
-
-## 技术选型（待定）
-
-- **候选主力框架**：Astro（静态优先、岛屿架构，适合导航站这类以内容/链接为主的站点）。
-- 其余（样式方案、部署平台、数据源等）**尚未确定**。
-
-## 待办 / 未决事项
-
-- [ ] 完成整体设计（页面结构、视觉风格、配色是否沿用 Logo 的深色青蓝科技风）
-- [ ] 确定技术栈细节：Astro 版本、样式方案（如 Tailwind / UnoCSS）、是否引入 UI 组件
-- [ ] 确定内容与数据组织：导航链接的存放方式（Markdown / JSON / 内容集合）
-- [ ] 确定部署方式（如 Vercel / Netlify / Cloudflare Pages / 自有服务器）
-- [ ] 搭建项目骨架并接入现有 Logo
-
-## 目录
-
-```
-polaris/
-├── logo.svg   # 项目 Logo（唯一现有资产）
-└── README.md  # 本项目说明（本文件）
-```
diff --git a/ts/web/nextjs/polaris/Polaris 分类页设计文档.md b/ts/web/nextjs/polaris/Polaris 分类页设计文档.md
new file mode 100644
index 0000000..16f1118
--- /dev/null
+++ b/ts/web/nextjs/polaris/Polaris 分类页设计文档.md	
@@ -0,0 +1,1243 @@
+# Polaris 分类页设计文档
+
+> 关联文档：
+> [Polaris 项目说明文档](./Polaris%20项目说明文档.md) —— 项目定位、技术选型、数据结构、开发阶段
+> [Polaris 首页设计文档](./Polaris%20首页设计文档.md) —— 首页布局与搜索交互
+
+## 1. 页面定位
+
+Polaris 的分类页用于展示某一类导航资源，例如：
+
+```text
+开发工具
+AI 工具
+设计资源
+学习资料
+效率工具
+娱乐媒体
+生活服务
+```
+
+分类页不是后台管理页，也不是资源管理面板，而是首页的延伸页面。
+
+它的核心目标是：
+
+1. 清晰展示当前分类下的所有链接；
+2. 保持和首页一致的轻玻璃视觉风格；
+3. 让用户可以快速浏览并打开目标网站；
+4. 不引入过多管理、筛选、编辑类元素；
+5. 保持页面干净、安静、克制。
+
+分类页应给人的感觉是：
+
+> 我进入了某一类个人收藏资源，可以直接浏览和访问，而不是进入了一个复杂的管理系统。
+
+---
+
+## 2. 页面示例
+
+本文档以 **开发工具页** 为例进行说明。
+
+页面标题：
+
+```text
+开发工具
+```
+
+页面描述：
+
+```text
+高效的开发工具和资源集合，提升你的开发体验和效率。
+```
+
+展示内容示例：
+
+```text
+GitHub
+GitLab
+Bitbucket
+VS Code
+JetBrains
+GoLand
+Postman
+Docker
+Kubernetes
+Vercel
+Netlify
+Render
+npm
+pnpm
+Figma
+```
+
+其他分类页面复用相同结构，只需要替换分类名称、描述和链接数据。
+
+---
+
+## 3. 与首页的关系
+
+首页负责最高频入口：
+
+```text
+时间 / 日期
+全局搜索框
+常用链接
+左侧分类导航
+```
+
+分类页负责分类浏览：
+
+```text
+分类标题
+分类说明
+链接数量
+该分类下的网站卡片
+```
+
+首页有全局搜索框，分类页默认不展示搜索框。
+
+这样可以避免功能重复，也能让分类页更像一个干净的资源浏览页面。
+
+---
+
+## 4. 分类页不保留搜索框
+
+当前分类页不展示顶部搜索框。
+
+原因：
+
+1. 首页已经存在全局搜索框；
+2. 分类页主要任务是浏览当前分类资源；
+3. 再放搜索框会让页面变得像后台或资源管理器；
+4. 搜索框会削弱分类标题和内容列表的视觉层级；
+5. 用户可能困惑搜索范围是全站、当前分类，还是外部搜索引擎。
+
+因此分类页第一版只保留内容展示，不放搜索框。
+
+如果未来某个分类链接数量非常多，例如超过 30 个，可以考虑增加一个轻量的分类内筛选输入框，但它不应该是首页那种大搜索框，也不应该支持 Google、Bing、GitHub 等外部搜索。
+
+未来可选方案：
+
+```text
+仅当前分类内筛选
+小尺寸输入框
+弱视觉权重
+不放在第一视觉中心
+```
+
+当前阶段不实现。
+
+---
+
+## 5. 页面整体布局
+
+分类页整体仍采用左右结构：
+
+```text
+┌──────────────────┬────────────────────────────────────────────┐
+│ 左侧边栏          │ 分类内容区域                                │
+│                  │                                            │
+│ Logo + 折叠按钮   │ 分类标题                                    │
+│ 首页              │ 分类描述                                    │
+│ AI 工具           │                                            │
+│ 开发工具          │ 全部工具  共 15 个                           │
+│ 设计资源          │                                            │
+│ 学习资料          │ 工具卡片网格                                 │
+│ 效率工具          │                                            │
+│ 娱乐媒体          │                                            │
+│ 生活服务          │                                            │
+└──────────────────┴────────────────────────────────────────────┘
+```
+
+布局原则：
+
+1. 左侧边栏保持和首页一致；
+2. 主内容区域使用玻璃面板承载；
+3. 页面顶部展示分类标题和说明；
+4. 内容区展示链接卡片；
+5. 不展示搜索框；
+6. 不展示排列切换；
+7. 不展示编辑按钮；
+8. 不展示设置按钮。
+
+---
+
+## 6. 左侧边栏
+
+### 6.1 边栏内容
+
+左侧边栏和首页保持一致。
+
+展开状态下包含：
+
+```text
+Logo
+折叠按钮
+首页
+AI 工具
+开发工具
+设计资源
+学习资料
+效率工具
+娱乐媒体
+生活服务
+```
+
+开发工具页中，左侧边栏的 **开发工具** 项处于选中状态。
+
+---
+
+### 6.2 选中态
+
+开发工具项选中时，使用浅蓝紫色玻璃背景。
+
+推荐样式：
+
+```css
+background: rgba(99, 102, 241, 0.10);
+color: #2563EB;
+```
+
+图标和文字同时高亮。
+
+选中项圆角：
+
+```css
+border-radius: 16px;
+```
+
+选中态不要使用高饱和、大面积实色块，否则会破坏轻玻璃风格。
+
+---
+
+### 6.3 折叠按钮
+
+折叠按钮仍然放在侧边栏顶部右侧，与 Logo 同一行。
+
+示意：
+
+```text
+┌──────────────────────┐
+│ Logo            ≪    │
+└──────────────────────┘
+```
+
+不使用侧边栏中间悬浮折叠按钮。
+
+按钮样式应低调：
+
+```css
+width: 32px;
+height: 32px;
+border-radius: 10px;
+background: transparent;
+color: #334155;
+```
+
+Hover 状态：
+
+```css
+background: rgba(15, 23, 42, 0.06);
+```
+
+---
+
+## 7. 主内容容器
+
+### 7.1 容器定位
+
+分类页主内容区域使用一个大的玻璃面板承载内容。
+
+该面板与首页视觉风格一致，但内容密度略高。
+
+推荐布局：
+
+```text
+┌────────────────────────────────────────────┐
+│                                            │
+│  开发工具                                  │
+│  高效的开发工具和资源集合，提升你的开发体验... │
+│                                            │
+│  全部工具   共 15 个                        │
+│                                            │
+│  工具卡片网格                               │
+│                                            │
+└────────────────────────────────────────────┘
+```
+
+---
+
+### 7.2 容器样式
+
+推荐样式：
+
+```css
+background: rgba(255, 255, 255, 0.56);
+backdrop-filter: blur(24px);
+border: 1px solid rgba(255, 255, 255, 0.48);
+border-radius: 24px;
+box-shadow: 0 24px 80px rgba(15, 23, 42, 0.10);
+```
+
+容器与页面边距：
+
+```css
+margin: 24px 30px 24px 0;
+```
+
+如果左侧边栏悬浮在页面内，主容器左侧应与边栏保持间距：
+
+```css
+gap: 24px;
+```
+
+---
+
+### 7.3 容器内部间距
+
+推荐内边距：
+
+```css
+padding: 56px 64px;
+```
+
+小屏幕可降低为：
+
+```css
+padding: 32px 24px;
+```
+
+内容区域不应贴边，玻璃面板内部需要足够留白。
+
+---
+
+## 8. 分类标题区域
+
+### 8.1 标题
+
+开发工具页标题为：
+
+```text
+开发工具
+```
+
+标题是页面主视觉之一，但不需要像首页时间那样巨大。
+
+推荐样式：
+
+```css
+font-size: 40px;
+font-weight: 700;
+color: #0F172A;
+letter-spacing: -0.02em;
+```
+
+大屏幕可使用：
+
+```css
+font-size: 44px;
+```
+
+---
+
+### 8.2 描述
+
+标题下方展示分类描述。
+
+示例：
+
+```text
+高效的开发工具和资源集合，提升你的开发体验和效率。
+```
+
+推荐样式：
+
+```css
+font-size: 16px;
+line-height: 1.7;
+color: #64748B;
+margin-top: 12px;
+```
+
+描述文字应简洁，不要写太长。
+
+不同分类可使用类似描述：
+
+```text
+AI 工具：精选常用 AI 工具与服务，辅助创作、开发和效率提升。
+设计资源：常用设计工具、素材与灵感资源集合。
+学习资料：整理常用学习平台、文档、课程和知识资源。
+效率工具：提升日常工作流效率的工具入口。
+娱乐媒体：常用影音、社区和内容平台。
+生活服务：日常生活、服务查询和实用网站入口。
+```
+
+---
+
+## 9. 分组标题区域
+
+分类描述下方展示内容分组标题。
+
+开发工具页第一版只需要一个分组：
+
+```text
+全部工具
+```
+
+旁边展示数量：
+
+```text
+共 15 个
+```
+
+示意：
+
+```text
+全部工具    共 15 个
+```
+
+推荐样式：
+
+```css
+.section-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #0F172A;
+}
+
+.section-count {
+  font-size: 14px;
+  color: #94A3B8;
+  background: rgba(255, 255, 255, 0.42);
+  border-radius: 999px;
+  padding: 4px 10px;
+}
+```
+
+分组标题和工具卡片网格之间保持间距：
+
+```css
+margin-top: 36px;
+margin-bottom: 20px;
+```
+
+---
+
+## 10. 工具卡片网格
+
+### 10.1 网格布局
+
+开发工具页推荐使用三列网格。
+
+桌面端：
+
+```text
+三列网格
+每行 3 个
+共 5 行
+```
+
+示意：
+
+```text
+┌──────────┐ ┌──────────┐ ┌──────────┐
+│ GitHub   │ │ GitLab   │ │ Bitbucket│
+└──────────┘ └──────────┘ └──────────┘
+
+┌──────────┐ ┌──────────┐ ┌──────────┐
+│ VS Code  │ │ JetBrains│ │ GoLand   │
+└──────────┘ └──────────┘ └──────────┘
+
+┌──────────┐ ┌──────────┐ ┌──────────┐
+│ Postman  │ │ Docker   │ │Kubernetes│
+└──────────┘ └──────────┘ └──────────┘
+```
+
+推荐 CSS：
+
+```css
+display: grid;
+grid-template-columns: repeat(3, minmax(0, 1fr));
+gap: 20px 24px;
+```
+
+---
+
+### 10.2 响应式网格
+
+不同屏幕下的网格建议：
+
+```text
+大屏幕（>= 1280px）：3 列
+中等屏幕（768px - 1279px）：2 列
+```
+
+推荐实现：
+
+```css
+grid-template-columns: repeat(2, minmax(0, 1fr));
+
+@media (min-width: 1280px) {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+```
+
+> 移动端单列布局为后续阶段工作，第一版仅适配桌面端与桌面窗口缩窄场景。
+
+---
+
+## 11. 工具卡片设计
+
+### 11.1 卡片内容
+
+每个工具卡片展示：
+
+```text
+工具图标
+工具名称
+简短描述
+外链图标
+```
+
+示例：
+
+```text
+GitHub
+全球最大的代码托管平台
+```
+
+不展示：
+
+```text
+编辑按钮
+删除按钮
+拖拽按钮
+访问统计
+创建时间
+更新时间
+域名副标题
+复杂标签
+```
+
+外链图标可以保留，因为它表达“点击后打开外部网站”，但要足够轻，不要像编辑按钮。
+
+---
+
+### 11.2 卡片结构
+
+推荐结构：
+
+```text
+┌────────────────────────────────────┐
+│ 图标    GitHub                 ↗   │
+│        全球最大的代码托管平台        │
+└────────────────────────────────────┘
+```
+
+图标左侧对齐。
+
+文字区域位于图标右侧。
+
+外链图标位于右上角。
+
+---
+
+### 11.3 卡片尺寸
+
+推荐桌面端尺寸：
+
+```css
+height: 96px;
+min-width: 0;
+```
+
+卡片不需要太高，避免页面显得笨重。
+
+推荐内边距：
+
+```css
+padding: 24px 28px;
+```
+
+---
+
+### 11.4 卡片样式
+
+推荐样式：
+
+```css
+background: rgba(255, 255, 255, 0.58);
+backdrop-filter: blur(20px);
+border: 1px solid rgba(255, 255, 255, 0.52);
+border-radius: 18px;
+box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+```
+
+Hover 状态：
+
+```css
+transform: translateY(-2px);
+background: rgba(255, 255, 255, 0.74);
+box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
+border-color: rgba(255, 255, 255, 0.72);
+```
+
+过渡：
+
+```css
+transition:
+  transform 180ms ease,
+  background 180ms ease,
+  box-shadow 180ms ease,
+  border-color 180ms ease;
+```
+
+---
+
+### 11.5 图标尺寸
+
+工具图标推荐尺寸：
+
+```css
+width: 40px;
+height: 40px;
+```
+
+对于复杂图标，可使用：
+
+```css
+width: 44px;
+height: 44px;
+```
+
+图标区域应统一对齐，不同来源图标大小要视觉统一。
+
+图标来源遵循统一图标方案（见[项目说明文档](./Polaris%20项目说明文档.md)）：
+
+```text
+自定义图标 → Simple Icons / 本地图标库 → favicon 自动抓取 → 文字占位兜底
+```
+
+推荐包裹容器：
+
+```css
+.icon-wrapper {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+```
+
+---
+
+### 11.6 文字样式
+
+工具名称：
+
+```css
+font-size: 17px;
+font-weight: 700;
+color: #0F172A;
+```
+
+工具描述：
+
+```css
+font-size: 14px;
+line-height: 1.5;
+color: #64748B;
+margin-top: 4px;
+```
+
+描述建议控制在 8 到 16 个中文字之间。
+
+示例：
+
+```text
+全球最大的代码托管平台
+一体化 DevOps 平台
+代码托管和协作开发
+强大的代码编辑器
+智能开发工具套件
+Go 语言 IDE
+API 开发和测试工具
+容器化平台
+容器编排平台
+前端部署与托管平台
+现代化的开发平台
+云应用托管平台
+JavaScript 包管理器
+快速的包管理器
+界面设计协作工具
+```
+
+---
+
+## 12. 开发工具页数据示例
+
+### 12.1 分类数据
+
+```json
+{
+  "id": "dev",
+  "title": "开发工具",
+  "description": "高效的开发工具和资源集合，提升你的开发体验和效率。",
+  "icon": "code",
+  "sort": 20
+}
+```
+
+---
+
+### 12.2 链接数据
+
+```json
+[
+  {
+    "id": "github",
+    "title": "GitHub",
+    "description": "全球最大的代码托管平台",
+    "url": "https://github.com",
+    "icon": "si:github",
+    "categoryId": "dev",
+    "pinned": true,
+    "keywords": ["代码", "仓库", "开源", "git"],
+    "sort": 10
+  },
+  {
+    "id": "gitlab",
+    "title": "GitLab",
+    "description": "一体化 DevOps 平台",
+    "url": "https://gitlab.com",
+    "icon": "si:gitlab",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["代码", "仓库", "devops", "ci", "cd"],
+    "sort": 20
+  },
+  {
+    "id": "bitbucket",
+    "title": "Bitbucket",
+    "description": "代码托管和协作开发",
+    "url": "https://bitbucket.org",
+    "icon": "si:bitbucket",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["代码", "仓库", "git"],
+    "sort": 30
+  },
+  {
+    "id": "vscode",
+    "title": "VS Code",
+    "description": "强大的代码编辑器",
+    "url": "https://code.visualstudio.com",
+    "icon": "si:vscode",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["编辑器", "ide", "代码"],
+    "sort": 40
+  },
+  {
+    "id": "jetbrains",
+    "title": "JetBrains",
+    "description": "智能开发工具套件",
+    "url": "https://www.jetbrains.com",
+    "icon": "si:jetbrains",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["ide", "开发工具", "编辑器"],
+    "sort": 50
+  },
+  {
+    "id": "goland",
+    "title": "GoLand",
+    "description": "Go 语言 IDE",
+    "url": "https://www.jetbrains.com/go/",
+    "icon": "si:goland",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["go", "golang", "ide"],
+    "sort": 60
+  },
+  {
+    "id": "postman",
+    "title": "Postman",
+    "description": "API 开发和测试工具",
+    "url": "https://www.postman.com",
+    "icon": "si:postman",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["api", "接口", "测试"],
+    "sort": 70
+  },
+  {
+    "id": "docker",
+    "title": "Docker",
+    "description": "容器化平台",
+    "url": "https://www.docker.com",
+    "icon": "si:docker",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["容器", "部署", "镜像"],
+    "sort": 80
+  },
+  {
+    "id": "kubernetes",
+    "title": "Kubernetes",
+    "description": "容器编排平台",
+    "url": "https://kubernetes.io",
+    "icon": "si:kubernetes",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["k8s", "容器", "编排", "云原生"],
+    "sort": 90
+  },
+  {
+    "id": "vercel",
+    "title": "Vercel",
+    "description": "前端部署与托管平台",
+    "url": "https://vercel.com",
+    "icon": "si:vercel",
+    "categoryId": "dev",
+    "pinned": true,
+    "keywords": ["部署", "前端", "托管"],
+    "sort": 100
+  },
+  {
+    "id": "netlify",
+    "title": "Netlify",
+    "description": "现代化的开发平台",
+    "url": "https://www.netlify.com",
+    "icon": "si:netlify",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["部署", "前端", "托管"],
+    "sort": 110
+  },
+  {
+    "id": "render",
+    "title": "Render",
+    "description": "云应用托管平台",
+    "url": "https://render.com",
+    "icon": "si:render",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["部署", "后端", "托管", "云服务"],
+    "sort": 120
+  },
+  {
+    "id": "npm",
+    "title": "npm",
+    "description": "JavaScript 包管理器",
+    "url": "https://www.npmjs.com",
+    "icon": "si:npm",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["javascript", "node", "包管理"],
+    "sort": 130
+  },
+  {
+    "id": "pnpm",
+    "title": "pnpm",
+    "description": "快速的包管理器",
+    "url": "https://pnpm.io",
+    "icon": "si:pnpm",
+    "categoryId": "dev",
+    "pinned": false,
+    "keywords": ["javascript", "node", "包管理"],
+    "sort": 140
+  },
+  {
+    "id": "figma",
+    "title": "Figma",
+    "description": "界面设计协作工具",
+    "url": "https://www.figma.com",
+    "icon": "si:figma",
+    "categoryId": "dev",
+    "pinned": true,
+    "keywords": ["设计", "ui", "协作"],
+    "sort": 150
+  }
+]
+```
+
+---
+
+## 13. 交互行为
+
+### 13.1 点击卡片
+
+点击工具卡片后，在新标签页打开对应链接。
+
+推荐行为：
+
+```ts
+window.open(url, "_blank", "noopener,noreferrer")
+```
+
+---
+
+### 13.2 外链图标
+
+每个卡片右上角可以保留一个轻量外链图标。
+
+作用：
+
+```text
+提示该卡片会打开外部网站
+```
+
+外链图标不代表编辑，不是更多操作。
+
+推荐样式：
+
+```css
+width: 16px;
+height: 16px;
+color: #64748B;
+opacity: 0.75;
+```
+
+Hover 时：
+
+```css
+color: #2563EB;
+opacity: 1;
+```
+
+---
+
+### 13.3 卡片 hover
+
+Hover 时只做轻微反馈：
+
+```text
+轻微上浮
+背景更亮
+阴影稍增强
+外链图标高亮
+```
+
+不要使用夸张动画。
+
+---
+
+### 13.4 快捷键
+
+分类页不注册任何快捷键。
+
+`Ctrl K`（macOS 为 ⌘K）仅在首页生效；用户需要搜索时，通过侧边栏「首页」回到首页。
+
+---
+
+## 14. 响应式设计
+
+### 14.1 桌面端
+
+桌面端布局：
+
+```text
+左侧边栏固定
+右侧主内容玻璃面板
+工具卡片三列网格
+```
+
+推荐断点：
+
+```text
+>= 1280px：三列
+768px - 1279px：两列
+```
+
+---
+
+### 14.2 平板与移动端（后续阶段）
+
+第一版仅适配桌面端。平板与移动端适配为后续阶段工作，届时参考以下方向：
+
+```text
+平板端：边栏宽度略小（200px - 220px），工具卡片两列
+移动端：顶部 Logo + 菜单按钮（抽屉式边栏），单列工具卡片，
+        主容器改为更轻的背景层（padding: 20px 16px; 卡片高度 84px）
+```
+
+---
+
+## 15. 空状态设计
+
+如果某个分类暂无链接，显示空状态。
+
+示例：
+
+```text
+暂无工具
+这个分类下还没有添加链接。
+```
+
+空状态不展示新增按钮。
+
+原因：
+
+1. 首页和分类页不承担管理功能；
+2. 新增能力未来放在独立管理页；
+3. 保持当前页面纯浏览定位。
+
+空状态样式：
+
+```css
+height: 280px;
+display: flex;
+align-items: center;
+justify-content: center;
+color: #64748B;
+```
+
+---
+
+## 16. 加载状态设计
+
+第一版数据来自本地数据配置，通常不需要明显 loading。
+
+后续接入 Go 后端后，可以增加加载状态。
+
+推荐加载方式：
+
+```text
+骨架屏
+轻微渐入
+不使用大面积转圈 loading
+```
+
+工具卡片骨架：
+
+```css
+height: 96px;
+border-radius: 18px;
+background: rgba(255, 255, 255, 0.36);
+```
+
+---
+
+## 17. 错误状态设计
+
+如果后续从后端加载失败，显示轻量错误提示。
+
+示例：
+
+```text
+资源加载失败
+请稍后重试。
+```
+
+错误状态不要占据过多视觉空间。
+
+可以提供一个轻量重试按钮，但不要设计得像后台系统。
+
+---
+
+## 18. 视觉一致性要求
+
+分类页必须和首页保持一致：
+
+```text
+相同背景
+相同侧边栏
+相同玻璃材质
+相同圆角系统
+相同阴影系统
+相同字体系统
+相同主色系统
+相同导航选中态
+```
+
+分类页相比首页的区别：
+
+```text
+首页强调时间、搜索、常用链接
+分类页强调标题、描述、链接集合
+```
+
+---
+
+## 19. 不建议出现的元素
+
+分类页第一版不建议出现：
+
+```text
+顶部搜索框
+排列方式切换
+表格视图
+编辑按钮
+删除按钮
+拖拽排序
+新增按钮
+管理入口
+筛选器
+复杂标签
+访问统计
+最近访问时间
+用户头像
+登录状态
+```
+
+这些内容会让页面从“个人导航浏览页”变成“后台管理页”。
+
+后续如果需要管理功能，应放入独立管理页面或隐藏入口。
+
+---
+
+## 20. 推荐组件拆分
+
+前端组件可以拆分为：
+
+```text
+CategoryPage
+CategoryHeader
+CategorySectionHeader
+ToolGrid
+ToolCard
+Sidebar
+MainLayout
+```
+
+目录示例：
+
+```text
+src/
+  app/
+    categories/
+      [categoryId]/
+        page.tsx
+
+  components/
+    layout/
+      Sidebar.tsx
+      MainLayout.tsx
+
+    category/
+      CategoryHeader.tsx
+      CategorySectionHeader.tsx
+      ToolGrid.tsx
+      ToolCard.tsx
+
+  services/
+    categories.ts
+    links.ts
+
+  types/
+    navigation.ts
+```
+
+---
+
+## 21. TypeScript 类型建议
+
+```ts
+export type Category = {
+  id: string
+  title: string
+  description: string
+  icon: string
+  sort: number
+}
+
+export type NavLink = {
+  id: string
+  title: string
+  description?: string
+  url: string
+  icon: string
+  categoryId: string
+  pinned: boolean
+  keywords: string[]
+  sort: number
+}
+```
+
+分类页获取数据时：
+
+```ts
+type CategoryPageData = {
+  category: Category
+  links: NavLink[]
+}
+```
+
+---
+
+## 22. 分类页开发优先级
+
+### 第一阶段
+
+完成静态展示：
+
+```text
+分类页路由
+分类标题
+分类描述
+全部工具数量
+工具卡片网格
+空分类展示空状态
+左侧导航选中态
+点击卡片跳转
+```
+
+---
+
+### 第二阶段
+
+完善响应式（后续阶段）：
+
+```text
+平板两列
+移动端一列
+侧边栏移动端适配
+```
+
+---
+
+### 第三阶段
+
+完善状态：
+
+```text
+空状态
+加载状态
+错误状态
+卡片 hover
+外链图标 hover
+```
+
+---
+
+### 第四阶段
+
+接入后端：
+
+```text
+从 Go API 获取分类
+从 Go API 获取链接
+支持按 categoryId 查询
+支持服务层切换数据源
+```
+
+---
+
+## 23. 开发工具页最终目标
+
+开发工具页最终应呈现为：
+
+> 一个安静、清爽、玻璃感的开发资源集合页。用户进入页面后，可以快速知道当前分类是什么，并直接浏览和打开开发相关工具。页面没有搜索框、没有排列切换、没有编辑管理按钮，整体保持和 Polaris 首页一致的个人起始页气质。
+
+核心原则：
+
+```text
+分类页负责浏览
+首页负责搜索
+侧边栏负责导航
+管理功能不进入主视觉
+视觉风格保持轻玻璃和极简
+```
\ No newline at end of file
diff --git a/ts/web/nextjs/polaris/Polaris 项目说明文档.md b/ts/web/nextjs/polaris/Polaris 项目说明文档.md
new file mode 100644
index 0000000..2301e7f
--- /dev/null
+++ b/ts/web/nextjs/polaris/Polaris 项目说明文档.md	
@@ -0,0 +1,430 @@
+# Polaris 项目说明文档
+
+> 关联文档：
+> [Polaris 首页设计文档](./Polaris%20首页设计文档.md) —— 首页布局、搜索交互、视觉规范
+> [Polaris 分类页设计文档](./Polaris%20分类页设计文档.md) —— 分类页布局、卡片、状态设计
+>
+> 配套资产：`logo.svg`（占位 Logo，后续替换）、`Polaris页面设计图.png`
+
+## 1. 项目名称
+
+**Polaris**
+
+Polaris 原意为“北极星”，具有方向、导航、定位、指引的含义。该名称与个人导航站的产品定位非常契合。
+
+本项目的核心目标是打造一个轻量、安静、高效、可长期维护的个人导航站，用于集中管理和访问常用网站、分类资源与个人入口。
+
+---
+
+## 2. 项目定位
+
+Polaris 不是后台管理系统，也不是信息密集型 Dashboard。
+
+> 一个具有个人审美、可自定义背景、可快速搜索和访问常用链接的浏览器起始页。
+
+产品形态是**动态可配置的个人导航站**：第一版可以静态部署，数据写死在本地配置中，但页面具有动态交互（实时时钟、搜索、侧边栏折叠、快捷键等），后续将本地数据源替换为 Go 后端 API，不需要推翻前端整体结构。
+
+---
+
+## 3. 项目目标
+
+第一阶段目标：
+
+1. 提供一个美观的个人导航首页；
+2. 支持快速访问常用链接；
+3. 支持左侧分类导航与分类页；
+4. 支持搜索框（Google / Bing / GitHub / 本地）；
+5. 支持当前时间与日期展示；
+6. 支持左侧边栏折叠（状态持久化）；
+7. 支持背景自定义的设计预留；
+8. 数据第一版写死在本地 JSON 数据配置中；
+9. 代码结构预留未来接入 Go 后端接口的能力。
+
+后续阶段目标：
+
+1. 从 Go 后端 API 获取链接、分类、设置等数据；
+2. 使用数据库持久化配置；
+3. 支持后台或隐藏入口管理链接；
+4. 支持用户自定义背景；
+5. 支持主题色、深色模式、导入导出、移动端适配等个性化能力。
+
+---
+
+## 4. 已确认的关键决策
+
+以下决策已于 2026-08-21 确认，作为实施基线：
+
+| # | 决策项 | 结论 |
+|---|--------|------|
+| 1 | 技术栈 | 以本文档为准：Next.js + TypeScript + Tailwind CSS + shadcn/ui + lucide-react（早期 README 中 Astro 设想作废） |
+| 2 | 渲染策略 | 静态导出（`output: 'export'`），时钟/搜索/侧边栏折叠为 client 岛屿 |
+| 3 | 包管理器 | pnpm |
+| 4 | 项目位置 | `ts/web/nextjs/polaris/` |
+| 5 | Logo | 现有 `logo.svg` 仅作占位，后续替换，不投入设计精力 |
+| 6 | 数据载体 | 本地 JSON 数据文件（`links.json` / `categories.json` / `settings.json`），结构以 Vitest 校验测试兜底 |
+| 7 | 第一版数据范围 | 「开发工具」15 条 + 首页常用链接 8 条（跨分类条目归入真实分类，见首页设计文档 8.1）；设计资源、学习资料、生活服务三个分类展示空状态 |
+| 8 | 默认背景 | CSS 低饱和青蓝渐变，不依赖图片资产；`settings.background.type` 预留 `image` |
+| 9 | 深色模式 | 第一版不做；CSS 变量按双主题友好组织，后续以 `[data-theme="dark"]` 覆盖 |
+| 10 | 移动端 | 第一版不适配，仅桌面端 |
+| 11 | 快捷键 | Ctrl+K（macOS ⌘K）聚焦搜索框，仅首页生效；提示按平台检测显示 |
+| 12 | 图标方案 | 四级 fallback：自定义图标 → Simple Icons / 本地图标库 → favicon 自动抓取 → 文字占位（见 6.4） |
+| 13 | 后端数据库 | PostgreSQL（后续阶段）；表结构不锁死 PG 特有语法（JSON 存通用 TEXT） |
+| 14 | 搜索行为 | 按模式严格分离：选中哪个引擎就只用哪个引擎搜索（回车直跳）；仅 Local 模式显示本地结果下拉 |
+
+---
+
+## 5. 技术选型
+
+### 5.1 前端技术栈
+
+```text
+Next.js（App Router）
+TypeScript
+Tailwind CSS
+shadcn/ui
+lucide-react
+simple-icons
+```
+
+说明：
+
+1. **Next.js**：适合从静态页面起步，后续接入动态接口；
+2. **TypeScript**：适合维护链接、分类、配置等结构化数据；
+3. **Tailwind CSS**：适合快速实现玻璃感、响应式、主题变量；
+4. **shadcn/ui**：用于基础组件，例如 Button、Input、Dialog、Command；
+5. **lucide-react**：用于侧边栏和操作图标；
+6. **simple-icons**：品牌图标库（npm 包，按 slug 引用）。
+
+测试：Vitest + Testing Library，重点覆盖纯函数（问候语分段、本地搜索匹配排序、icon 解析、搜索 URL 模板）与核心交互组件。
+
+### 5.2 渲染策略
+
+采用静态导出：
+
+```ts
+// next.config.ts
+const nextConfig = { output: "export" }
+```
+
+- 首页与全部分类页在构建时从本地数据生成（`generateStaticParams`）；
+- 时钟、搜索、侧边栏折叠等交互以 client 组件实现；
+- 产物为纯静态文件，可部署到任意静态服务器；
+- 后续接 Go 后端时，改造 service 层为 fetch，数据页面改为客户端获取。
+
+### 5.3 数据访问层
+
+**页面组件不直接依赖数据文件，一律通过 service 层获取数据。**
+
+第一版：
+
+```ts
+import links from "@/data/links.json"
+
+export function getLinks(): NavLink[] {
+  return links
+}
+```
+
+后续接 Go 后端时，只需要修改 service 层：
+
+```ts
+export async function getLinks() {
+  const res = await fetch("/api/links")
+  if (!res.ok) {
+    throw new Error("Failed to fetch links")
+  }
+  return res.json()
+}
+```
+
+这样页面组件不用大规模重构。
+
+JSON 缺少编译期类型检查，用 **Vitest 数据校验测试**兜底：校验 `data/*.json` 满足 `Category[]` / `NavLink[]` / `AppSettings` 结构（必填字段齐全、类型正确、categoryId 存在于分类中），字段拼错或漏填在测试阶段即报错。
+
+### 5.4 后端技术栈（后续阶段）
+
+后端由 Go 实现，数据库 PostgreSQL。
+
+候选组合：
+
+```text
+Go + Chi + sqlc     —— 结构清晰、SQL 可控（推荐）
+Go + Gin + GORM     —— 开发更快、上手成本低
+```
+
+---
+
+## 6. 数据结构
+
+### 6.1 分类数据
+
+```ts
+{
+  id: "dev",
+  title: "开发工具",
+  description: "高效的开发工具和资源集合，提升你的开发体验和效率。",
+  icon: "code",
+  sort: 20
+}
+```
+
+字段说明：
+
+```text
+id:          分类唯一标识
+title:       分类名称
+description: 分类描述（分类页标题下方展示）
+icon:        图标名称（侧边栏，lucide 图标名）
+sort:        排序值
+```
+
+### 6.2 链接数据
+
+```ts
+{
+  id: "github",
+  title: "GitHub",
+  description: "全球最大的代码托管平台",
+  url: "https://github.com",
+  icon: "si:github",
+  categoryId: "dev",
+  pinned: true,
+  keywords: ["代码", "仓库", "开源", "git"],
+  sort: 10
+}
+```
+
+字段说明：
+
+```text
+id:          链接唯一标识
+title:       链接名称
+description: 简短描述（分类页卡片展示，8-16 个中文字）
+url:         链接地址
+icon:        图标引用，格式见 6.4
+categoryId:  所属分类
+pinned:      是否展示在首页常用链接区域
+keywords:    本地搜索关键词
+sort:        排序值
+```
+
+### 6.3 设置数据
+
+```ts
+{
+  siteName: "Polaris",
+  theme: "light-glass",
+  search: {
+    defaultProvider: "google",
+    enabledProviders: ["google", "bing", "github", "local"]
+  },
+  background: {
+    type: "gradient",      // "gradient" | "image"
+    url: null,             // type 为 image 时生效
+    blur: 8,
+    overlay: 0.32
+  },
+  sidebar: {
+    defaultCollapsed: false
+  }
+}
+```
+
+### 6.4 统一图标方案
+
+链接卡片与搜索结果的图标按以下顺序解析，逐级 fallback：
+
+```text
+1. 自定义图标       icon: "local:xxx"        → public/icons/xxx.svg
+2. Simple Icons    icon: "si:github"        → simple-icons npm 包按 slug 渲染品牌图标
+3. favicon 抓取    icon: "url:https://..."  → 远程图标；icon 缺省时按链接 url 域名自动抓取
+4. 文字占位         以上全部失败             → 标题首字符 + 圆角玻璃底兜底
+```
+
+侧边栏分类导航图标使用 lucide-react（如 `home` / `code` / `palette`），不参与此 fallback 链。
+
+---
+
+## 7. 未来 Go 后端 API 设计
+
+后续接入 Go 后端时，推荐 API：
+
+```text
+GET /api/categories
+GET /api/links
+GET /api/links?categoryId=dev
+GET /api/settings
+```
+
+后续管理能力：
+
+```text
+POST   /api/links
+PUT    /api/links/:id
+DELETE /api/links/:id
+
+POST   /api/categories
+PUT    /api/categories/:id
+DELETE /api/categories/:id
+
+PUT    /api/settings
+```
+
+背景相关：
+
+```text
+POST /api/backgrounds
+GET  /api/backgrounds
+PUT  /api/settings/background
+```
+
+---
+
+## 8. 数据库表设计草案
+
+> 草案使用跨数据库通用语法；JSON 以 TEXT 存储。PostgreSQL 下可将 `TEXT`（存 JSON）字段替换为 `JSONB` 以获得索引与查询能力。
+
+### 8.1 categories
+
+```sql
+CREATE TABLE categories (
+  id TEXT PRIMARY KEY,
+  title TEXT NOT NULL,
+  description TEXT NOT NULL DEFAULT '',
+  icon TEXT NOT NULL,
+  sort INTEGER NOT NULL DEFAULT 0,
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+### 8.2 links
+
+```sql
+CREATE TABLE links (
+  id TEXT PRIMARY KEY,
+  title TEXT NOT NULL,
+  description TEXT NOT NULL DEFAULT '',
+  url TEXT NOT NULL,
+  icon TEXT,
+  category_id TEXT NOT NULL,
+  pinned BOOLEAN NOT NULL DEFAULT FALSE,
+  keywords TEXT NOT NULL DEFAULT '[]',  -- JSON 数组字符串
+  sort INTEGER NOT NULL DEFAULT 0,
+  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+  CONSTRAINT fk_links_category
+    FOREIGN KEY (category_id)
+    REFERENCES categories(id)
+);
+```
+
+### 8.3 settings
+
+```sql
+CREATE TABLE settings (
+  key TEXT PRIMARY KEY,
+  value TEXT NOT NULL,                  -- JSON 字符串
+  updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+---
+
+## 9. 开发阶段
+
+### 第一阶段：前端静态版（当前阶段）
+
+目标：完成首页与分类页基础体验。
+
+```text
+页面背景（CSS 渐变）与背景遮罩
+左侧边栏 + 折叠（localStorage 持久化）+ 导航选中态
+时间 / 日期 / 问候语
+搜索框（Google / Bing / GitHub / 本地搜索）+ Ctrl+K 快捷键
+常用链接（pinned，8 个）
+分类页路由 + 卡片网格 + 空状态
+桌面端响应式
+```
+
+数据范围：开发工具 15 个链接 + 首页 8 个常用链接（跨分类条目归入真实分类：ChatGPT → AI 工具，Gmail / Notion → 效率工具，YouTube / Bilibili → 娱乐媒体）；设计资源、学习资料、生活服务三个分类展示空状态。
+
+### 第二阶段：数据补全与体验完善
+
+```text
+补全其余 6 个分类的链接数据
+深色玻璃主题
+移动端 / 平板适配
+```
+
+### 第三阶段：数据访问层抽象
+
+```text
+封装 links / categories / settings service
+统一 TypeScript 类型
+统一错误处理与 loading 状态
+```
+
+此阶段完成后，页面组件不直接关心数据来自本地配置还是 API。
+
+### 第四阶段：Go 后端 API
+
+```text
+Go API 服务
+数据库连接（PostgreSQL）
+links / categories / settings 查询接口
+基础 CORS 配置
+Docker 部署预留
+```
+
+### 第五阶段：管理能力
+
+```text
+新增 / 编辑 / 删除链接
+调整排序、修改分类
+修改背景、主题
+导入导出配置
+```
+
+管理能力不进入首页主视觉，放到独立管理页或隐藏入口。
+
+---
+
+## 10. 项目目录结构
+
+```text
+polaris/
+  public/
+    icons/              # 自定义 SVG 图标（icon: "local:xxx" 引用）
+    logo.svg
+
+  src/
+    app/
+      layout.tsx        # 背景层 + 字体
+      page.tsx          # 首页
+      categories/
+        [categoryId]/
+          page.tsx      # 分类页（generateStaticParams 生成）
+      globals.css       # Tailwind + CSS 变量（浅色值，深色预留覆盖位）
+
+    components/
+      layout/           # AppShell / Sidebar / SidebarNavItem
+      home/             # ClockGreeting / SearchBox / SearchResults / QuickLinks
+      category/         # CategoryHeader / ToolGrid / ToolCard
+      common/           # SiteIcon（四级 fallback）/ GlassPanel
+
+    data/               # links.json / categories.json / settings.json
+    services/           # links.ts / categories.ts / settings.ts / search.ts
+    types/              # navigation.ts / settings.ts / search.ts
+    lib/                # cn.ts / greeting.ts / local-search.ts / search-providers.ts / icon.ts（纯函数）
+
+  next.config.ts        # output: 'export'
+  vitest.config.ts
+```
+
+---
+
+## 11. 最终目标
+
+> 打开 Polaris 后，用户可以立刻搜索、立刻访问常用网站，也可以通过侧边栏进入分类页面。页面具有个人氛围，但保持干净、高效、克制。第一版数据本地配置，后续平滑切换到 Go 后端。
diff --git a/ts/web/astro/polaris/Polaris 个人导航站项目说明文档.md b/ts/web/nextjs/polaris/Polaris 首页设计文档.md
similarity index 52%
rename from ts/web/astro/polaris/Polaris 个人导航站项目说明文档.md
rename to ts/web/nextjs/polaris/Polaris 首页设计文档.md
index 551ecfd..b6a8bc6 100644
--- a/ts/web/astro/polaris/Polaris 个人导航站项目说明文档.md	
+++ b/ts/web/nextjs/polaris/Polaris 首页设计文档.md	
@@ -1,24 +1,18 @@
-# Polaris 个人导航站项目说明文档
+# Polaris 首页设计文档
 
-## 1. 项目名称
+> 关联文档：
+> [Polaris 项目说明文档](./Polaris%20项目说明文档.md) —— 项目定位、技术选型、数据结构、开发阶段
+> [Polaris 分类页设计文档](./Polaris%20分类页设计文档.md) —— 分类页布局与交互
+>
+> 配套设计图：`Polaris页面设计图.png`（示意图，视觉细节以本文档文字规范为准）
 
-**Polaris**
+## 1. 页面定位
 
-Polaris 原意为“北极星”，具有方向、导航、定位、指引的含义。该名称与个人导航站的产品定位非常契合。
-
-本项目的核心目标是打造一个轻量、安静、高效、可长期维护的个人导航站，用于集中管理和访问常用网站、分类资源与个人入口。
-
----
-
-## 2. 项目定位
-
-Polaris 不是后台管理系统，也不是信息密集型 Dashboard。
-
-它的定位是：
+Polaris 首页是一个**浏览器起始页**，不是后台管理系统，也不是信息密集型 Dashboard。
 
 > 一个具有个人审美、可自定义背景、可快速搜索和访问常用链接的浏览器起始页。
 
-页面应给人的感觉是：
+首页应给人的感觉是：
 
 ```text
 私人入口
@@ -40,66 +34,9 @@ Polaris 不是后台管理系统，也不是信息密集型 Dashboard。
 
 ---
 
-## 3. 项目目标
+## 2. 整体视觉风格
 
-Polaris 第一阶段目标：
-
-1. 提供一个美观的个人导航首页；
-2. 支持快速访问常用链接；
-3. 支持左侧分类导航；
-4. 支持搜索框；
-5. 支持当前时间与日期展示；
-6. 支持左侧边栏折叠；
-7. 支持背景图更换的设计预留；
-8. 数据第一版写死在本地 JSON 或 TS 配置中；
-9. 代码结构预留未来接入 Go 后端接口的能力。
-
-后续阶段目标：
-
-1. 从 Go 后端 API 获取链接、分类、设置等数据；
-2. 使用数据库持久化配置；
-3. 支持后台或隐藏入口管理链接；
-4. 支持用户自定义背景；
-5. 支持主题色、深色模式、导入导出等个性化能力。
-
----
-
-## 4. 当前方案是否为静态页面
-
-当前方案不是传统意义上的纯静态页面。
-
-更准确地说：
-
-> 第一版可以静态部署，但产品形态是动态可配置的个人导航站。
-
-第一版数据可以写死在本地配置文件中，例如：
-
-```text
-links.json
-categories.json
-settings.json
-```
-
-但页面本身具有动态交互：
-
-```text
-当前时间实时更新
-搜索框交互
-搜索引擎切换
-本地链接搜索
-侧边栏折叠
-导航选中状态
-背景样式预留
-快捷键操作
-```
-
-后续可以将本地 JSON 数据源替换为 Go 后端 API，不需要推翻前端整体结构。
-
----
-
-## 5. 整体视觉风格
-
-Polaris 推荐采用：
+首页推荐采用：
 
 > 轻量玻璃感 + 极简浏览器起始页 + 柔和个人空间感
 
@@ -134,11 +71,11 @@ Polaris 推荐采用：
 复杂分类卡片
 ```
 
-这些能力可以在后续阶段通过隐藏入口、独立配置页或快捷键面板实现。
+这些能力在后续阶段通过隐藏入口、独立配置页或快捷键面板实现。
 
 ---
 
-## 6. 首页整体布局
+## 3. 首页整体布局
 
 首页采用左右结构：
 
@@ -166,11 +103,23 @@ Polaris 推荐采用：
 4. 首页不展示编辑、设置、管理类按钮；
 5. 常用链接只做轻量展示。
 
+主内容整体居中，视觉重心位于页面中上方。
+
+推荐信息层级：
+
+```text
+1. 当前时间 / 问候语
+2. 搜索框
+3. 常用链接
+4. 左侧分类导航
+5. 背景氛围
+```
+
 ---
 
-## 7. 左侧边栏设计
+## 4. 左侧边栏设计
 
-### 7.1 边栏内容
+### 4.1 边栏内容
 
 左侧边栏从上到下依次展示：
 
@@ -187,6 +136,8 @@ AI 工具
 生活服务
 ```
 
+「首页」指向 `/`，各分类指向 `/categories/{categoryId}`。当前路由对应的导航项处于选中态，选中样式见[分类页设计文档](./Polaris%20分类页设计文档.md) 6.2 节。
+
 暂时不展示：
 
 ```text
@@ -198,9 +149,7 @@ AI 工具
 账户信息
 ```
 
----
-
-### 7.2 折叠按钮位置
+### 4.2 折叠按钮位置
 
 折叠按钮放在侧边栏顶部右侧，与 Logo 位于同一行。
 
@@ -221,9 +170,7 @@ AI 工具
 3. 会破坏页面边界的干净感；
 4. 顶部右侧更符合用户对全局控制按钮的认知。
 
----
-
-### 7.3 边栏宽度
+### 4.3 边栏宽度
 
 展开状态：
 
@@ -243,9 +190,9 @@ AI 工具
 
 折叠时只显示图标。
 
----
+折叠状态持久化到 `localStorage`，刷新后保持。
 
-### 7.4 边栏视觉样式
+### 4.4 边栏视觉样式
 
 推荐样式：
 
@@ -269,44 +216,7 @@ bottom: 20px;
 
 ---
 
-## 8. 主内容区域设计
-
-主内容区域展示：
-
-```text
-问候语
-当前时间
-当前日期
-搜索框
-常用链接
-```
-
-不展示：
-
-```text
-分类卡片
-设置入口
-编辑入口
-管理入口
-统计信息
-复杂小组件
-```
-
-主内容整体居中，视觉重心位于页面中上方。
-
-推荐信息层级：
-
-```text
-1. 当前时间 / 问候语
-2. 搜索框
-3. 常用链接
-4. 左侧分类导航
-5. 背景氛围
-```
-
----
-
-## 9. 时间与问候语
+## 5. 时间与问候语
 
 首页顶部展示问候语和当前时间。
 
@@ -342,21 +252,21 @@ font-size: 16px;
 color: #64748B;
 ```
 
+时间为客户端实时时钟，每分钟更新。
+
 ---
 
-## 10. 搜索框设计
+## 6. 搜索框设计
 
-### 10.1 搜索框定位
+### 6.1 搜索框定位
 
 搜索框是 Polaris 首页最核心的交互组件。
 
-搜索框位于时间与日期下方，居中展示。
+搜索框位于时间与日期下方，居中展示，首页加载后**自动聚焦**。
 
----
+### 6.2 搜索范围
 
-### 10.2 搜索范围
-
-Polaris 第一版搜索框仅支持以下四种搜索方式：
+首页搜索框支持以下四种搜索方式：
 
 ```text
 Google 搜索
@@ -383,11 +293,9 @@ AI 搜索
 全文索引搜索
 ```
 
-这些能力可以作为后续扩展。
+这些能力作为后续扩展。
 
----
-
-### 10.3 搜索框尺寸
+### 6.3 搜索框尺寸
 
 桌面端推荐：
 
@@ -403,16 +311,9 @@ height: 68px;
 高度：64px - 72px
 ```
 
-移动端：
+> 移动端尺寸第一版不定义，移动端整体适配为后续阶段工作。
 
-```text
-width: calc(100vw - 32px);
-height: 60px;
-```
-
----
-
-### 10.4 搜索框视觉样式
+### 6.4 搜索框视觉样式
 
 推荐样式：
 
@@ -424,27 +325,22 @@ border-radius: 24px;
 box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
 ```
 
-placeholder 示例：
+placeholder 统一为：
 
 ```text
 搜索网站、书签或关键词...
 ```
 
-右侧可以展示快捷键提示：
+右侧展示快捷键提示，**按平台检测显示**：
 
 ```text
-⌘K
+macOS：⌘K
+Windows / Linux：Ctrl K
 ```
 
-Windows / Linux 环境下可展示：
+快捷键行为：按下后聚焦搜索框（详见 7.4）。
 
-```text
-Ctrl K
-```
-
----
-
-### 10.5 搜索模式切换
+### 6.5 搜索模式切换
 
 搜索模式可以通过以下方式切换：
 
@@ -455,20 +351,16 @@ Ctrl K
 默认使用上一次选择的搜索方式
 ```
 
-推荐第一版采用简单方案：
+第一版采用简单方案：
 
 ```text
 搜索框左侧或右侧提供当前搜索模式标识
 点击后可切换 Google / Bing / GitHub / 本地
 ```
 
-也可以先默认使用 Google，后续再增加模式切换。
+### 6.6 本地搜索范围
 
----
-
-### 10.6 本地搜索范围
-
-本地搜索的数据来自本地配置文件。
+本地搜索的数据来自本地数据配置。
 
 搜索范围包括：
 
@@ -480,34 +372,145 @@ Ctrl K
 分类 ID
 ```
 
-建议链接数据中预留 keywords 字段。
-
-示例：
-
-```json
-{
-  "id": "github",
-  "title": "GitHub",
-  "url": "https://github.com",
-  "categoryId": "dev",
-  "icon": "github",
-  "pinned": true,
-  "keywords": ["代码", "仓库", "开源", "git"],
-  "sort": 10
-}
-```
+链接数据预留 `keywords` 字段，完整数据结构见[项目说明文档](./Polaris%20项目说明文档.md)。
 
 ---
 
-## 11. 常用链接区域
+## 7. 搜索功能设计
 
-### 11.1 区域定位
+### 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);
+```
+
+列表项内容：
+
+```text
+图标（遵循统一图标方案）
+标题
+所属分类
+```
+
+交互：
+
+```text
+↑ / ↓ 在结果间移动选中项
+回车打开选中项（新标签页）
+Esc 关闭面板
+鼠标点击直接打开
+选中项背景 rgba(59, 130, 246, 0.10)
+```
+
+结果数量上限 8 条；无匹配时面板内展示空状态「没有匹配的网站」。
+
+---
+
+## 8. 常用链接区域
+
+### 8.1 区域定位
 
 常用链接用于展示用户最高频访问的网站。
 
 首页不展示分类卡片，以保持页面干净。
 
-推荐第一版展示 8 个常用链接：
+第一版展示 8 个常用链接：
 
 ```text
 GitHub
@@ -520,11 +523,26 @@ Vercel
 Bilibili
 ```
 
-实际项目中可以根据个人习惯调整。
+实际项目中根据个人习惯调整。
 
----
+数据来源：`pinned: true` 的链接，按 `sort` 排序取前 8 个；超出 8 个时按 4 列网格换行展示。
 
-### 11.2 链接卡片内容
+第一版数据构成（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 链接卡片内容
 
 常用链接卡片只展示：
 
@@ -544,9 +562,9 @@ Bilibili
 访问统计
 ```
 
----
+图标来源遵循统一图标方案（见[项目说明文档](./Polaris%20项目说明文档.md)）：自定义图标 → Simple Icons / 本地图标库 → favicon 自动抓取 → 文字占位兜底。
 
-### 11.3 链接卡片样式
+### 8.3 链接卡片样式
 
 推荐样式：
 
@@ -592,15 +610,17 @@ box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
 transition: all 180ms ease;
 ```
 
+点击卡片在新标签页打开链接。
+
 ---
 
-## 12. 背景设计
+## 9. 背景设计
 
-### 12.1 背景类型
+### 9.1 背景类型
 
 Polaris 支持背景自定义的设计预留。
 
-第一版可以先使用默认背景图。
+**第一版默认背景为 CSS 低饱和青蓝渐变**（模拟晨雾 / 天空氛围），不依赖图片资产。
 
 后续支持：
 
@@ -613,7 +633,7 @@ Polaris 支持背景自定义的设计预留。
 深色背景
 ```
 
-默认背景建议：
+图片背景建议：
 
 ```text
 湖面
@@ -624,9 +644,9 @@ Polaris 支持背景自定义的设计预留。
 低对比度风景图
 ```
 
----
+背景类型通过 `settings.background.type`（`gradient` / `image`）配置。
 
-### 12.2 背景遮罩
+### 9.2 背景遮罩
 
 由于用户未来可能更换任意背景，因此需要增加背景遮罩层，保证内容可读。
 
@@ -637,7 +657,7 @@ background-overlay: rgba(255, 255, 255, 0.32);
 backdrop-filter: blur(8px);
 ```
 
-深色主题：
+深色主题（后续阶段预留）：
 
 ```css
 background-overlay: rgba(15, 23, 42, 0.42);
@@ -646,7 +666,7 @@ backdrop-filter: blur(8px);
 
 ---
 
-## 13. 配色系统
+## 10. 配色系统
 
 默认采用浅色玻璃主题。
 
@@ -674,11 +694,11 @@ backdrop-filter: blur(8px);
 }
 ```
 
-后续可支持深色玻璃主题。
+变量按双主题友好方式组织：第一版只实现浅色值；深色玻璃主题为后续阶段，届时以 `[data-theme="dark"]` 覆盖同名变量，组件无需改动。
 
 ---
 
-## 14. 字体建议
+## 11. 字体建议
 
 推荐字体栈：
 
@@ -707,568 +727,7 @@ font-family:
 
 ---
 
-## 15. 技术选型
-
-### 15.1 前端技术栈
-
-推荐前端技术栈：
-
-```text
-Next.js
-TypeScript
-Tailwind CSS
-shadcn/ui
-lucide-react
-```
-
-说明：
-
-1. **Next.js**：适合从静态页面起步，后续接入动态接口；
-2. **TypeScript**：适合维护链接、分类、配置等结构化数据；
-3. **Tailwind CSS**：适合快速实现玻璃感、响应式、主题变量；
-4. **shadcn/ui**：用于基础组件，例如 Button、Input、Dialog、Command；
-5. **lucide-react**：用于侧边栏和操作图标。
-
----
-
-### 15.2 后端技术栈
-
-后端由 Go 实现。
-
-推荐后端技术栈：
-
-```text
-Go
-Gin / Chi
-PostgreSQL / MySQL / SQLite
-sqlc / GORM
-Docker
-```
-
-建议选择：
-
-```text
-Go + Chi + PostgreSQL + sqlc
-```
-
-或者：
-
-```text
-Go + Gin + PostgreSQL + GORM
-```
-
-如果希望结构更清晰、SQL 可控，推荐：
-
-```text
-Chi + sqlc
-```
-
-如果希望开发更快、上手成本更低，推荐：
-
-```text
-Gin + GORM
-```
-
----
-
-### 15.3 第一版数据方案
-
-第一版不接后端。
-
-数据写在前端本地配置中。
-
-推荐目录：
-
-```text
-src/
-  data/
-    links.json
-    categories.json
-    settings.json
-  services/
-    links.ts
-    categories.ts
-    settings.ts
-  types/
-    navigation.ts
-  components/
-    Sidebar.tsx
-    SearchBox.tsx
-    QuickLinks.tsx
-```
-
-注意：页面组件不要直接依赖 JSON 文件。
-
-应该通过 service 层获取数据。
-
-第一版：
-
-```ts
-import links from "@/data/links.json"
-
-export async function getLinks() {
-  return links
-}
-```
-
-后续接 Go 后端时，只需要修改 service 层：
-
-```ts
-export async function getLinks() {
-  const res = await fetch("/api/links")
-  if (!res.ok) {
-    throw new Error("Failed to fetch links")
-  }
-  return res.json()
-}
-```
-
-这样页面组件不用大规模重构。
-
----
-
-## 16. 推荐数据结构
-
-### 16.1 分类数据
-
-```json
-{
-  "id": "dev",
-  "title": "开发工具",
-  "icon": "code",
-  "sort": 20
-}
-```
-
-字段说明：
-
-```text
-id: 分类唯一标识
-title: 分类名称
-icon: 图标名称
-sort: 排序值
-```
-
----
-
-### 16.2 链接数据
-
-```json
-{
-  "id": "github",
-  "title": "GitHub",
-  "url": "https://github.com",
-  "icon": "github",
-  "categoryId": "dev",
-  "pinned": true,
-  "keywords": ["代码", "仓库", "开源", "git"],
-  "sort": 10
-}
-```
-
-字段说明：
-
-```text
-id: 链接唯一标识
-title: 链接名称
-url: 链接地址
-icon: 图标名称或图标 URL
-categoryId: 所属分类
-pinned: 是否展示在首页常用链接区域
-keywords: 本地搜索关键词
-sort: 排序值
-```
-
----
-
-### 16.3 设置数据
-
-```json
-{
-  "siteName": "Polaris",
-  "theme": "light-glass",
-  "search": {
-    "defaultProvider": "google",
-    "enabledProviders": ["google", "bing", "github", "local"]
-  },
-  "background": {
-    "type": "image",
-    "url": "/backgrounds/default.jpg",
-    "blur": 8,
-    "overlay": 0.32
-  },
-  "sidebar": {
-    "defaultCollapsed": false
-  }
-}
-```
-
-字段说明：
-
-```text
-siteName: 站点名称
-theme: 主题名称
-search.defaultProvider: 默认搜索方式
-search.enabledProviders: 启用的搜索方式
-background: 背景配置
-sidebar.defaultCollapsed: 侧边栏默认是否折叠
-```
-
----
-
-## 17. 搜索功能设计
-
-### 17.1 搜索 Provider
-
-第一版支持四个 provider：
-
-```ts
-export type SearchProvider = "google" | "bing" | "github" | "local"
-```
-
----
-
-### 17.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 数据中搜索
-```
-
----
-
-### 17.3 本地搜索匹配规则
-
-本地搜索匹配字段：
-
-```text
-title
-keywords
-categoryId
-category title
-```
-
-推荐匹配逻辑：
-
-```text
-完全匹配优先
-标题匹配其次
-关键词匹配再次
-分类匹配最后
-```
-
-搜索结果可以展示：
-
-```text
-图标
-标题
-所属分类
-```
-
-回车行为：
-
-```text
-如果只有一个高匹配本地结果，回车打开该链接
-如果有多个结果，展示搜索结果列表
-如果没有结果，展示空状态
-```
-
----
-
-## 18. 未来 Go 后端 API 设计
-
-后续接入 Go 后端时，推荐 API：
-
-```text
-GET /api/categories
-GET /api/links
-GET /api/links?categoryId=dev
-GET /api/settings
-```
-
-后续管理能力：
-
-```text
-POST   /api/links
-PUT    /api/links/:id
-DELETE /api/links/:id
-
-POST   /api/categories
-PUT    /api/categories/:id
-DELETE /api/categories/:id
-
-PUT    /api/settings
-```
-
-背景相关：
-
-```text
-POST /api/backgrounds
-GET  /api/backgrounds
-PUT  /api/settings/background
-```
-
----
-
-## 19. 数据库表设计草案
-
-### 19.1 categories
-
-```sql
-CREATE TABLE categories (
-  id TEXT PRIMARY KEY,
-  title TEXT NOT NULL,
-  icon TEXT NOT NULL,
-  sort INTEGER NOT NULL DEFAULT 0,
-  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
-  updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
-);
-```
-
----
-
-### 19.2 links
-
-```sql
-CREATE TABLE links (
-  id TEXT PRIMARY KEY,
-  title TEXT NOT NULL,
-  url TEXT NOT NULL,
-  icon TEXT,
-  category_id TEXT NOT NULL,
-  pinned BOOLEAN NOT NULL DEFAULT FALSE,
-  keywords JSONB,
-  sort INTEGER NOT NULL DEFAULT 0,
-  created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
-  updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
-
-  CONSTRAINT fk_links_category
-    FOREIGN KEY (category_id)
-    REFERENCES categories(id)
-);
-```
-
----
-
-### 19.3 settings
-
-```sql
-CREATE TABLE settings (
-  key TEXT PRIMARY KEY,
-  value JSONB NOT NULL,
-  updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
-);
-```
-
----
-
-## 20. 推荐开发阶段
-
-### 第一阶段：前端静态版
-
-目标：完成 Polaris 首页基础体验。
-
-包含：
-
-```text
-页面背景
-背景遮罩
-左侧边栏
-边栏折叠
-导航选中态
-时间与日期
-搜索框
-Google / Bing / GitHub / 本地搜索
-常用链接
-响应式基础适配
-```
-
-数据来源：
-
-```text
-本地 JSON / TS 配置
-```
-
----
-
-### 第二阶段：分类页面
-
-目标：完成导航站基本内容结构。
-
-包含：
-
-```text
-AI 工具页面
-开发工具页面
-设计资源页面
-学习资料页面
-效率工具页面
-娱乐媒体页面
-生活服务页面
-分类下链接展示
-分类内搜索
-```
-
-数据来源仍可使用本地配置。
-
----
-
-### 第三阶段：数据访问层抽象
-
-目标：为接入 Go 后端做准备。
-
-包含：
-
-```text
-封装 links service
-封装 categories service
-封装 settings service
-统一 TypeScript 类型
-统一错误处理
-统一 loading 状态
-```
-
-此阶段完成后，页面组件不直接关心数据来自 JSON 还是 API。
-
----
-
-### 第四阶段：Go 后端 API
-
-目标：前端从后端读取数据。
-
-包含：
-
-```text
-Go API 服务
-数据库连接
-links 查询接口
-categories 查询接口
-settings 查询接口
-基础 CORS 配置
-Docker 部署预留
-```
-
----
-
-### 第五阶段：管理能力
-
-目标：允许用户维护自己的导航数据。
-
-包含：
-
-```text
-新增链接
-编辑链接
-删除链接
-调整排序
-修改分类
-修改背景
-修改主题
-导入导出配置
-```
-
-管理能力不进入首页主视觉，可以放到独立管理页或隐藏入口中。
-
----
-
-## 21. 推荐项目目录结构
-
-### 21.1 前端目录结构
-
-```text
-polaris-web/
-  src/
-    app/
-      page.tsx
-      layout.tsx
-      globals.css
-
-    components/
-      layout/
-        Sidebar.tsx
-        MainLayout.tsx
-
-      home/
-        ClockGreeting.tsx
-        SearchBox.tsx
-        QuickLinks.tsx
-
-      common/
-        GlassCard.tsx
-        Icon.tsx
-
-    data/
-      links.json
-      categories.json
-      settings.json
-
-    services/
-      links.ts
-      categories.ts
-      settings.ts
-      search.ts
-
-    types/
-      navigation.ts
-      settings.ts
-      search.ts
-
-    lib/
-      cn.ts
-      date.ts
-      search-providers.ts
-
-    styles/
-      theme.css
-```
-
----
-
-### 21.2 后端目录结构
-
-```text
-polaris-api/
-  cmd/
-    server/
-      main.go
-
-  internal/
-    config/
-    database/
-    handler/
-    middleware/
-    model/
-    repository/
-    service/
-
-  migrations/
-  sql/
-  Dockerfile
-  docker-compose.yml
-```
-
----
-
-## 22. 首页线框
+## 12. 首页线框
 
 ```text
 ┌──────────────────────┬────────────────────────────────────────────────────┐
@@ -1280,7 +739,7 @@ polaris-api/
 │   <> 开发工具        │              2026 年 8 月 20 日 星期四              │
 │   ◌  设计资源        │                                                    │
 │   📖 学习资料        │       ┌────────────────────────────────────┐       │
-│   ⚡ 效率工具        │       │  🔍 搜索网站、书签或关键词...   ⌘K  │       │
+│   ⚡ 效率工具        │       │  🔍 搜索网站、书签或关键词... Ctrl K │       │
 │   ▶  娱乐媒体        │       └────────────────────────────────────┘       │
 │   ☕ 生活服务        │                                                    │
 │                      │                 常用链接                           │
@@ -1296,9 +755,9 @@ polaris-api/
 
 ---
 
-## 23. 设计原则总结
+## 13. 设计原则总结
 
-Polaris 首页应遵循以下原则：
+首页遵循以下原则：
 
 ```text
 首页只放最高频内容
@@ -1313,8 +772,9 @@ Polaris 首页应遵循以下原则：
 交互动效要柔和，不要夸张
 整体像浏览器起始页，不像后台系统
 第一版数据本地配置，后续平滑切换到 Go 后端
+第一版仅实现浅色主题、仅适配桌面端
 ```
 
 最终目标：
 
-> 打开 Polaris 后，用户可以立刻搜索、立刻访问常用网站，也可以通过侧边栏进入分类页面。页面具有个人氛围，但保持干净、高效、克制。
\ No newline at end of file
+> 打开 Polaris 后，用户可以立刻搜索、立刻访问常用网站，也可以通过侧边栏进入分类页面。页面具有个人氛围，但保持干净、高效、克制。
diff --git a/ts/web/astro/polaris/Polaris页面设计图.png b/ts/web/nextjs/polaris/Polaris页面设计图.png
similarity index 100%
rename from ts/web/astro/polaris/Polaris页面设计图.png
rename to ts/web/nextjs/polaris/Polaris页面设计图.png
diff --git a/ts/web/astro/polaris/logo.svg b/ts/web/nextjs/polaris/logo.svg
similarity index 100%
rename from ts/web/astro/polaris/logo.svg
rename to ts/web/nextjs/polaris/logo.svg