缠论研习社

缠中说禅《教你炒股票》原文与杂文的沉浸式阅读站 · 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 接入与内容管理

内容仅供学习研究，不构成任何投资建议。市场有风险，入市需谨慎。

3.9 KiB Raw Blame History Unescape Escape