# CLAUDE.md This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. 项目：缠论研习社——缠中说禅《教你炒股票》原文与杂文的沉浸式阅读站。 ## 命令 ```bash pnpm install # 安装依赖（需 Node 20+ 与 pnpm） pnpm dev # 开发服务器 → http://localhost:5173（vite open 自动开浏览器） pnpm build # vue-tsc -b 类型检查 + vite 生产构建 pnpm build:only # 跳过类型检查，仅 vite build pnpm typecheck # 仅 vue-tsc -b 类型检查（改完 TS/Vue 先跑这个） pnpm preview # 预览生产构建 ``` 本机 pnpm v11 用 `pnpm-workspace.yaml` 的 `allowBuilds`（不是 `onlyBuiltDependencies`）放行 esbuild / vue-demi 的构建脚本；新增带构建脚本的 devDep 时需在此手动放行，否则安装会被拦。 ## 样式约定（重要） ### 每个用 Tailwind 写的元素必须带一个「标记类名」 用 Tailwind 工具类写样式时，**必须给每个有独立含义的元素加一个语义化的标记 class，并放在 class 列表最前面**。这样用户在对话里能精确指代「改哪个 div」。 ```vue
``` 命名规则：`<组件或区块名>__<部位>`，如 `home-hero__title`、`reader-meta`、`article-card__tags`。一个 `.vue` 文件内的标记类名以该组件的功能名为前缀，保证跨组件不撞。 > 现存组件（如 `ArticleCard.vue`）尚未遵循此约定；**新建或重写元素时一律补上**，改动既有元素时顺手补。 ### 颜色必须走设计 Token，禁止裸色值 所有颜色用 `src/style.css` 里 `@theme inline` 定义的语义类，**不要写 `bg-white` / `text-gray-500` / `#fff` 这类**： - 背景：`bg-app`（应用底）/ `bg-background`（卡片）/ `bg-surface` / `bg-surface-2` / `bg-hover` - 文本：`text-foreground` / `text-muted` / `text-subtle` / `text-faint` - 品牌/语义：`text-primary` / `bg-primary-soft` / `text-success` / `text-warning` / `text-danger` - 边框：`border-line` / `border-line-strong` / `border-line-card` - 圆角用 `rounded-xs/sm/md/lg/xl/2xl`（4/8/12/16/20/24），阴影用 `shadow-xs/sm/soft/md/lg/xl` 亮/暗主题切换靠 ``，所有语义色自动适配——**只要用 Token，就不用单独写 dark: 变体**。 ### class 合并用 `cn()` `src/utils/cn.ts` 的 `cn()` = clsx（条件）+ tailwind-merge（冲突后写覆盖前写，如 `px-2 px-4 → px-4`）。有条件 class 或动态拼接时用它，别手写字符串拼接。 ## 架构（需要跨文件理解的） **技术栈**：Vue 3 `