101 lines
3.9 KiB
Markdown
101 lines
3.9 KiB
Markdown
# 缠论研习社
|
||
|
||
> 缠中说禅《教你炒股票》原文与杂文的沉浸式阅读站 · 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 / 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 接入与内容管理
|
||
|
||
---
|
||
|
||
内容仅供学习研究，不构成任何投资建议。市场有风险，入市需谨慎。
|