# 量化学习项目讨论记录

## 项目目标
搭建一个基于 HTML, CSS, JavaScript 的本地量化学习知识库，旨在系统化整理量化交易相关的知识，包括数学基础、编程实现、策略开发及回测等。

## 1. 目录结构方案 (Proposal)

为了保证项目的可维护性和扩展性，建议采用以下结构：

```text
/
├── index.html              # 首页：学习路径路线图 (Roadmap)
├── discussion_log.md       # 讨论记录与进度跟踪
├── assets/                 # 公共静态资源 (CSS, JS, Images)
├── modules/                # 核心知识模块 (按学习阶段排序)
│   ├── 01-concepts/        # 基础概念 (交易心经、K线、MACD、风控等)
│   ├── 02-python-basics/   # Python 编程基础 (环境搭建、基础语法)
│   ├── 03-python-fin/      # Python 金融数据处理 (Pandas, Numpy)
│   ├── 04-strategies/      # 量化策略库 (重点区域，持续更新)
│   └── 05-tools/           # 实用工具/链接 (常用 API、平台链接)
└── shared/                 # 共享组件 (Header, Sidebar, Glossary)
```

## 2. UI/UX 设计理念

### 视觉风格
- **专业金融感**：采用深色模式（Dark Mode）或极致简洁的专业浅色模式。
- **配色方案**：深蓝色/深灰色背景，搭配亮色文字，重点突出（如：涨红跌绿的辅助色）。
- **字体**：使用无衬线字体（如 Inter, Roboto）保证屏幕阅读的清晰度。

### 功能布局
- **侧边栏 (Sidebar)**：多层级导航，支持折叠，方便在不同知识点间快速切换。
- **内容区 (Main Content)**：
    - **Markdown 风格**：文本排版清晰，支持代码块（Highlight.js）。
    - **公式渲染**：集成 KaTeX 或 MathJax 渲染数学公式。
    - **交互图表**：预留 ECharts 或 Chart.js 接口，展示回测曲线或统计分布。
- **顶部工具栏**：全局搜索、外部资源链接（如 JoinQuant, RiceQuant 官网）。

## 3. 针对“零基础”学习者的优化与 Taste-Skill 引入

### 视觉升级 (Taste-Skill Principles)
- **Anti-Slop 准则**：拒绝通用模版感，强化排版 (Typography) 和呼吸感 (Spacing)。
- **微动效 (Motion)**：引入 `cubic-bezier` 缓动函数，让悬停和切换更丝滑。
- **毛玻璃 (Glassmorphism)**：利用 `backdrop-filter` 提升界面的通透度。

### 学习路径导航 (Learning Roadmap)
- **首页设计**：不再是简单的文件列表，而是一个引导式的“闯关”路线图。
- **阶段划分**：
    - **第一阶段：初窥门径**（基础概念、指标、交易心态）。
    - **第二阶段：磨刀砍柴**（Python 编程环境、金融库）。
    - **第三阶段：实战演练**（各类策略的构建与回测）。

### UI 特色功能
- **词汇表浮窗 (Glossary Tooltip)**：针对小白不熟悉的专业名词（如“仓位管理”、“MACD背离”），在内容中点击或悬停即可查看解释。
- **策略更新流 (Strategy Stream)**：策略模块采用“卡片流”形式，方便展示最新更新的策略及其核心逻辑摘要。
- **代码演示区**：Python 基础部分支持“一键复制代码”到本地编辑器运行。

## 4. 核心功能点讨论
- [ ] 路线图样式的 HTML/CSS 实现。
- [ ] 词汇表 JSON 数据的构建方案。
- [ ] 策略卡片的动态布局。
- [ ] 响应式布局：适配 iPad/笔记本屏幕。

---
*最后更新时间：2026-05-11*