21 lines
3.4 KiB
Markdown
21 lines
3.4 KiB
Markdown
# 文档站参考研究 · 2026-10-27
|
||
|
||
实际使用浏览器访问并截图；Linear 使用顶部 Toggle theme 切换浅色，Tailwind 在页脚选择 Light theme，Supabase 在右上菜单选择 Light，React 页继承同域浅色设置。截图为 1280×720，未复制品牌文案或资源。
|
||
|
||
| 页面 | 截图 | 观察与落地 |
|
||
| -------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||
| [Linear Projects](https://linear.app/docs/projects) | linear-projects-light.png | 64px 顶栏、280px 左目录、约670px 正文、右侧细线目录；纯白与浅灰边界、32px 标题和14–16px正文、节制强调。落地固定顶栏、安静三栏、青绿当前项。 |
|
||
| [Tailwind Editor setup](https://tailwindcss.com/docs/editor-setup) | tailwind-editor-light-top.png、tailwind-editor-light.png | 56px顶栏、约288px左栏、约560px正文；等宽分类标签、竖线当前项、段落间宽留白、右侧章节列表；页脚显式主题选择。落地目录分组、章节锚点、精确等宽代码与语言标签。 |
|
||
| [Supabase Docs](https://supabase.com/docs) | supabase-home-light.png | 50px横向全站导航和搜索；首页标题与命令入口左右布局，下面分区标题+多列入口，边框浅而有序。落地首页快速启动、三个档案分区、明确描述和阅读入口。 |
|
||
| [Supabase React](https://supabase.com/docs/guides/getting-started/quickstarts/reactjs) | supabase-react-light.png、supabase-react-code-light.png | 左侧约316px、中间约605px、右侧目录；面包屑和大标题引导；步骤标题、带语言与复制操作的浅色代码块、低对比提示框。落地面包屑、带复制反馈的代码、独立草案提示、上下篇。 |
|
||
|
||
## 统一设计决定
|
||
|
||
- 默认浅色，系统本地字体，无 CDN。正文16px/1.9，中文阅读栏最大720px，导航13px，标题32–40px。青绿只用于品牌、链接、当前状态。
|
||
- 首页以「理解、构建、记录」为主线，突出入门，再按开始使用/架构设计/图形档案组织现有内容；不制造未存在的产品页。
|
||
- 全站顶部品牌返回首页，档案入口和仓库链接；本地全文检索支持 Cmd/Ctrl K、Escape、方向键，不向外部服务发送查询。
|
||
- 宽屏三栏、平板隐藏右目录、小屏使用可展开文档菜单与页内目录；代码和表格各自滚动，正文不溢出。
|
||
- 保持 Pages Router、pnpm、uv 与现有 CI/CD、镜像缓存、回退和18135部署入口。截图仅为研究证据，不进入站点资源。
|
||
|
||
响应式交互是对以上设计规律的本地实现决定；参考站的手机布局未单独测量。Tabularium 的手机截图和实测记录见 ../verification。
|