缠论研习社
缠中说禅《教你炒股票》原文与杂文的沉浸式阅读站 · Vue 3 + Tailwind v4
专注缠论的系统性研习：从分型、笔、线段，到走势中枢、背驰、买卖点。亮/暗双主题、衬线正文阅读优化、目录导航、字号字体可调。
技术栈
| 维度 | 选型 |
|---|---|
| 框架 | Vue 3（<script setup> + Composition API） |
| 构建 | Vite 6 |
| 样式 | Tailwind CSS v4（CSS-first @theme） |
| 语言 | TypeScript（strict） |
| 路由 | Vue Router 4 |
| 状态 | Pinia（主题、阅读偏好） |
| 图标 | lucide-vue-next |
| 正文 | markdown-it |
快速开始
pnpm install # 安装依赖
pnpm dev # 启动开发服务器 → http://localhost:5173
pnpm build # 类型检查 + 生产构建
pnpm preview # 预览生产构建
pnpm typecheck # 仅类型检查
需要 Node 20+ 与 pnpm。首次安装若提示构建脚本，已通过
pnpm-workspace.yaml自动放行 esbuild / vue-demi。
目录结构
src/
├── components/
│ ├── ui/ # 基础组件：BaseButton / Badge / Card / SearchInput
│ ├── layout/ # AppHeader / AppFooter
│ ├── ArticleCard.vue # 文章列表卡片
│ ├── TableOfContents.vue
│ ├── ThemeToggle.vue / ReaderSettings.vue / ReadingProgress.vue
├── composables/
│ ├── useArticles.ts # 文章数据访问层（列表/查找/相邻/搜索）
│ └── useMarkdown.ts # markdown 渲染 + 目录提取
├── data/
│ ├── chanlun.ts # 缠论 108 课（示例数据）
│ ├── essays.ts # 杂谈随笔（示例数据）
│ └── categories.ts # 分类信息
├── layouts/
│ ├── DefaultLayout.vue # 顶栏 + 内容 + 页脚
│ └── ReaderLayout.vue # 沉浸阅读布局
├── views/ # 5 个页面
├── stores/ # theme / reading（Pinia）
├── types/article.ts # 类型定义
├── utils/ # cn / slug
└── style.css # 设计系统：玄鉴 Token + 亮暗主题 + 正文排版
接入你抓取的真实数据
数据层是完全解耦的。当前 src/data/chanlun.ts 与 src/data/essays.ts 是示例数据，替换它们即可接入真实抓取内容。
每篇文章的结构（见 src/types/article.ts）：
interface Article {
id: string // 唯一 id
slug: string // URL 标识
category: 'chanlun' | 'essay' | 'notes'
title: string
subtitle?: string
lesson?: number // 仅缠论系列：第几课
date: string // ISO 日期，如 '2006-06-07'
tags: string[]
excerpt: string // 摘要
readingTime: number // 预计阅读分钟
content: string // markdown 正文
}
正文为 markdown 字符串——抓取的 HTML 可在入库时转换为 markdown（如 turndown），或扩展 useMarkdown.ts 支持直接渲染 HTML。后续若接入后端 API，只需把 useArticles.ts 的静态数据源改为异步请求即可，页面无需改动。
设计系统
采用「玄鉴」设计语言（克制、安静、可信），映射到 Tailwind v4 语义 Token：
- 颜色：
bg-app / bg-background / bg-surface、text-foreground / muted / subtle / faint、text-primary(#4d95ff) / bg-primary-soft、text-success / warning / danger、border-line / line-strong / line-card - 亮/暗双主题：通过
<html class="dark">切换，所有颜色自动适配 - 正文：
.prose-chan衬线排版，字号/字体由阅读设置驱动（小/中/大/特大 · 衬线/黑体）
后续规划
- 「我的理解」分区：结合当下股市的缠论实战笔记
- 全文搜索、书签与阅读进度记录
- 走势图可视化（分型/笔/中枢标注）
- 后端 API 接入与内容管理
内容仅供学习研究，不构成任何投资建议。市场有风险，入市需谨慎。