first commit

2026-08-11 16:17:49 +08:00
commit 21d086aa23
170 changed files with 13204 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,100 @@
+# 缠论研习社
+
+> 缠中说禅《教你炒股票》原文与杂文的沉浸式阅读站 · 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 |
+
+## 快速开始
+
+```bash
+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 / AppSidebar / 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`）：
+
+```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 接入与内容管理
+
+---
+
+内容仅供学习研究，不构成任何投资建议。市场有风险，入市需谨慎。