diff --git a/README.md b/README.md index 484d3e4..2a2bd38 100644 --- a/README.md +++ b/README.md @@ -117,10 +117,33 @@ $fetch('/api/user/info') → http://localhost:8360/user/info（自动附带 cookie） ``` +## 主题（亮色 / 暗色） + +亮色是基准，暗色是同一套结构换一套取值，切换由页头的 `ThemeToggle` 组件完成。 + +- 颜色令牌集中在 `app/assets/css/theme.css`：`:root` 是亮色（取值与改造前的硬编码色值完全一致），`html.dark` 是暗色。 +- 切换基于 `@nuxtjs/color-mode`（`@nuxt/ui` 自带）：在 `` 上加 `.dark` 类，偏好写入 cookie `ai-color-mode`；默认亮色、不跟随系统（见 `nuxt.config.js` 的 `colorMode`）。 +- **写样式时不要再写死色值**，用令牌： + ```html + +
+ +
+ ``` + 常用令牌：`--c-ffffff` 面板底、`--c-f3f7fb` 页面底、`--c-e8eef7` 边框、`--c-172033` 标题、`--c-4b5b70` 正文、`--c-8a97a8` 弱文字、`--c-0b8cff` 品牌色、`--c-eef7ff` 品牌浅底、`--c-ink` 亮暗一致的深色实底。阴影颜色用 `--sh-*`。 +- 如果新页面不小心又写了硬编码色值才，跑一次 codemod 补齐： + ```bash + node scripts/gen-theme.mjs # 替换源码 + 重新生成 theme.css（可重复执行） + node scripts/gen-theme.mjs --dry # 只看影响范围 + ``` + 脚本按「该色值主要当文字（text）、当描边（border / ring / divide）还是当底色（surface）」决定暗色映射方向 —— 描边必须映射成比面板更亮的线色，否则暗色下边框会和面板同色、直接看不见。关键层级的暗色取值在脚本的 `CURATED` 里人工校准（品牌蓝钉死不变）。 +- 阴影：亮色是「浅灰蓝 + 极低透明度」，暗色下换成近黑并提高透明度；卡片边缘主要靠描边和「面板 / 页面底」明度差来区分。`main.css` 里还给「有投影的白底卡片」在暗色下补了一条 `outline` 内描边，补回亮色靠投影撑出的那圈边缘。 +- `text-white`、`bg-white/10`~`/30`、`bg-black/*` 这类叠在品牌渐变上的装饰色不参与换算，保持原样。 + ## 约定 - **纯 JS**：不用 TypeScript，`.vue` 文件使用 ` diff --git a/app/components/ArticleDetailView.vue b/app/components/ArticleDetailView.vue new file mode 100644 index 0000000..b2de9e0 --- /dev/null +++ b/app/components/ArticleDetailView.vue @@ -0,0 +1,191 @@ + + + + + diff --git a/app/components/ArticleListView.vue b/app/components/ArticleListView.vue new file mode 100644 index 0000000..97fc61f --- /dev/null +++ b/app/components/ArticleListView.vue @@ -0,0 +1,174 @@ + + + diff --git a/app/components/BackToTop.vue b/app/components/BackToTop.vue new file mode 100644 index 0000000..455265f --- /dev/null +++ b/app/components/BackToTop.vue @@ -0,0 +1,126 @@ + + + + + diff --git a/app/components/HeroComparePreview.vue b/app/components/HeroComparePreview.vue new file mode 100644 index 0000000..4d7702c --- /dev/null +++ b/app/components/HeroComparePreview.vue @@ -0,0 +1,47 @@ + + + diff --git a/app/components/InviteShareModal.vue b/app/components/InviteShareModal.vue new file mode 100644 index 0000000..22c4443 --- /dev/null +++ b/app/components/InviteShareModal.vue @@ -0,0 +1,112 @@ + + + + + diff --git a/app/components/LegalDocument.vue b/app/components/LegalDocument.vue new file mode 100644 index 0000000..26b3058 --- /dev/null +++ b/app/components/LegalDocument.vue @@ -0,0 +1,124 @@ + + + + + diff --git a/app/components/LoginModal.vue b/app/components/LoginModal.vue index 75b0cee..892a578 100644 --- a/app/components/LoginModal.vue +++ b/app/components/LoginModal.vue @@ -1,13 +1,20 @@