docs(polaris): 同步设计与部署文档现状

对齐深色玻璃样式、响应式布局、数据规模与配置生效范围。
明确仅由 polaris-v* 标签触发发布,并保留历史规格说明。
This commit is contained in:
2026-10-14 16:38:07 +08:00
parent d53dbac88e
commit 86f6eb39b2
6 changed files with 287 additions and 118 deletions
@@ -4,6 +4,17 @@
> [Polaris 项目说明文档](./Polaris%20项目说明文档.md) —— 项目定位、技术选型、数据结构、开发阶段
> [Polaris 首页设计文档](./Polaris%20首页设计文档.md) —— 首页布局与搜索交互
## 0. 当前实现状态(2026-10-14 校对)
本章为现状说明。第 1–23 章保留立项时的历史设计意图;其中浅色玻璃样式、白色大面板容器和数据示例均为历史方案,视觉细节以本章与 `src/app/globals.css` 为准。
- **路由**:`/categories/[categoryId]` 已实现,8 个分类全部静态预生成,未知分类返回 404。
- **布局**:左侧边栏与首页一致(桌面固定悬浮;≤767px 变为顶部横栏,折叠按钮隐藏、导航横向滚动)。主内容区**不再是一整块白色玻璃面板**——面板容器透明,使背景素材保持清晰,玻璃只压在承载文字的元素上:标题与描述带轻边框和文字投影,「全部工具」列表放在一层薄纱视口(rgba(5, 14, 29, 0.18)、圆角 20px)内,工具卡片为深色玻璃。
- **滚动**:桌面端页面高度固定为 `100svh`,工具列表在内部视口滚动(`overscroll-behavior: contain`、可聚焦);视口过矮(`max-height` 断点)或移动端回退为整页滚动。
- **网格现状**:工具网格基础为两列;≥1280px 升为三列,≤999px 降为单列,即 1000–1279px 保持两列。手机顶部横栏与单列已完成;平板/中等窗口的两列已实现,与历史计划(768px–1279px 两列)的差异仅剩 768px–999px 区间当前同为单列。
- **视觉**:深色玻璃主题,tokens 与首页共用(见[首页设计文档](./Polaris%20首页设计文档.md)第 0 章);背景素材可整体替换,背景层显示与遮罩样式由现有 CSS 管理,素材类型/路径/画面不作为设计规范。
- **数据现状**:全站 8 个分类共 51 条链接;本文以「开发工具」为例的数据(15 条)为立项期示意,当前该分类实际 12 条。
## 1. 页面定位
Polaris 的分类页用于展示某一类导航资源,例如:
@@ -72,6 +83,8 @@ Figma
其他分类页面复用相同结构,只需要替换分类名称、描述和链接数据。
> 2026-10-14 说明:本节与第 12 节的链接清单、数量均为立项期示意数据,不代表当前 `src/data/` 内容。
---
## 3. 与首页的关系
@@ -198,6 +211,8 @@ background: rgba(99, 102, 241, 0.1);
color: #2563eb;
```
> 2026-10-14 实现状态:上方浅蓝紫数值为历史方案。当前选中态为 `--primary-soft`(rgba(147, 190, 255, 0.15))底色 + `--primary-hover` 文字色 + 一圈淡色内描边,圆角 16px 不变。
图标和文字同时高亮。
选中项圆角:
@@ -279,6 +294,8 @@ border-radius: 24px;
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.1);
```
> 2026-10-14 实现状态:上方白色玻璃面板为历史方案。当前面板容器已透明化(见第 0 章):`GlassPanel` 结构保留,但边框、背景、阴影与 backdrop-filter 均被覆盖为透明或无,背景素材直接可见。
容器与页面边距:
```css
@@ -482,7 +499,7 @@ grid-template-columns: repeat(2, minmax(0, 1fr));
}
```
> 移动端单列布局为后续阶段工作,第一版仅适配桌面端与桌面窗口缩窄场景。
> 历史说明:立项时移动端单列为后续阶段工作。当前状态(2026-10-14):两列为基础布局,≥1280px 升为三列,≤999px(含手机及 768px–999px 窗口)降为单列;历史计划的「768px–1279px 两列」已基本实现,仅 768px–999px 区间为单列。
---
@@ -573,6 +590,8 @@ border-radius: 18px;
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
```
> 2026-10-14 实现状态:上方浅色样式为历史方案。当前工具卡为深色玻璃 rgba(12, 24, 42, 0.65) + blur(10px),高 82px、圆角 18px,hover 提亮为 rgba(25, 43, 65, 0.84) 并轻微上浮。
Hover 状态:
```css
@@ -678,6 +697,8 @@ JavaScript 包管理器
## 12. 开发工具页数据示例
> 2026-10-14 说明:本节数据为立项期示例(15 条),不代表当前 `src/data/`;当前全站 8 类 51 条链接,开发工具分类 12 条。字段结构与现行 `NavLink` 类型一致,仍可作为格式参考。
### 12.1 分类数据
```json
@@ -955,11 +976,15 @@ Hover 时只做轻微反馈:
768px - 1279px:两列
```
当前实现(2026-10-14):两列为基础布局,≥1280px 三列、≤999px 单列;历史计划的「768px–1279px 两列」已基本实现,仅其中 768px–999px 区间当前为单列(见第 0 章)。
---
### 14.2 平板与移动端(后续阶段)
### 14.2 平板与移动端
第一版仅适配桌面端。平板与移动端适配为后续阶段工作,届时参考以下方向:
> 2026-10-14 实现状态:移动端适配已完成——≤767px 时侧边栏变为**常驻顶部横栏**(Logo + 横向滚动导航,非抽屉),工具卡片单列,短屏与移动端回退整页滚动;平板方向的「边栏宽度略小(220px)」与「工具卡片两列」已实现(两列覆盖 1000px–1279px,768px–999px 区间为单列),下列历史方向中的「抽屉式边栏」未采用。
立项时(仅适配桌面端)的参考方向:
```text
平板端:边栏宽度略小(200px - 220px),工具卡片两列
@@ -1201,6 +1226,8 @@ type CategoryPageData = {
侧边栏移动端适配
```
> 2026-10-14 实现状态:「平板两列」(1000px–1279px 区间,768px–999px 除外)、「移动端一列」与「侧边栏移动端适配」已完成(见第 0 章)。
---
### 第三阶段