# 项目文件结构

```
quantBuddy_assetRating_demo/
│
├── 📁 components/                    # React 组件
│   ├── Logo.tsx                     # Logo 组件
│   ├── Sidebar.tsx                  # 侧边栏组件（暂未使用）
│   └── StockChart.tsx               # 图表组件（基于 Recharts）
│
├── 📁 pages/                        # 页面组件
│   ├── SearchPage.tsx               # ✨ 起始页（搜索+模版选择）
│   ├── DashboardPage.tsx            # ✨ 评级详情页（多维度分析）
│   └── DetailPage.tsx               # 详细分析页（单维度深度分析）
│
├── 📁 data/                         # 数据层
│   └── mockData.ts                  # 模拟数据生成器
│
├── 📁 docs/                         # 📚 文档目录
│   ├── QUICK_START.md               # 快速启动指南
│   ├── USER_GUIDE.md                # 用户使用手册
│   ├── UI_IMPROVEMENTS.md           # UI 改进说明
│   └── TEST_CHECKLIST.md            # 功能测试清单
│
├── 📁 dist/                         # 构建输出目录
│   ├── assets/                      # 静态资源
│   │   ├── css/                     # 样式文件
│   │   ├── js/                      # JavaScript 文件
│   │   └── ...                      # 图片、字体等
│   └── index.html                   # 入口 HTML
│
├── 📁 node_modules/                 # npm 依赖包
│
├── 📁 src/                          # 源码目录（未使用）
│   └── index.css                    # 基础样式
│
├── 📄 App.tsx                       # 根组件
├── 📄 index.tsx                     # 应用入口
├── 📄 types.ts                      # TypeScript 类型定义
│
├── 📄 package.json                  # 项目配置
├── 📄 tsconfig.json                 # TypeScript 配置
├── 📄 vite.config.ts                # Vite 构建配置
├── 📄 tailwind.config.js            # Tailwind CSS 配置
├── 📄 postcss.config.js             # PostCSS 配置
│
├── 📄 README.md                     # 项目说明
├── 📄 CHANGELOG.md                  # 更新日志
├── 📄 README_DEPLOY.md              # 部署指南
│
└── 📄 index.html                    # HTML 入口文件

```

## 核心文件说明

### 🎯 关键页面组件

#### SearchPage.tsx
**起始页 - 搜索和模版选择**

```typescript
功能：
- 股票搜索输入框
- 4 种评级模版展示（默认、消费股、科技股、快速诊断）
- 模版选择交互
- 跳转到评级详情页

改进亮点：
✅ 从展示股票改为展示模版
✅ 清晰的操作流程引导
✅ 动态提示文字
```

#### DashboardPage.tsx
**评级详情页 - 多维度分析**

```typescript
功能：
- 左侧：资产评级表（4大维度，多个指标）
- 右侧：图表详情（默认展开）
- 编辑模式：拖拽排序、添加删除
- 模板库和另存为功能

改进亮点：
✅ 默认展开右侧图表区域
✅ 默认渲染图表（无需点击）
✅ 左右联动交互
```

#### DetailPage.tsx
**详细分析页 - 单维度深度分析**

```typescript
功能：
- 大图表展示
- 研判结论和图表说明
- 多标签页切换
- AI 修改输入框

特点：
- 更大的图表显示区域
- 详细的分析说明
- 支持自然语言修改参数
```

### 📊 数据层

#### mockData.ts
**模拟数据生成器**

```typescript
导出：
- generateChartData()        // 图表数据生成函数
- STOCK_DATA_CONFIG           // 股票数据配置对象
  ├── valuation               // 估值维度
  ├── macro                   // 宏观维度
  ├── assets                  // 资产维度
  └── capital                 // 资金维度

每个维度包含：
- id: 唯一标识
- dimension: 维度名称
- items: 指标数组
  ├── id: 指标ID
  ├── label: 指标名称
  ├── summary: 研判摘要
  ├── chartData: 图表数据
  └── color: 主题色
```

### 🎨 组件层

#### StockChart.tsx
**图表组件（基于 Recharts）**

```typescript
Props:
- data: 图表数据
- color: 线条颜色
- height: 图表高度
- legend: 图例文字

特点：
- 响应式设计
- 自适应容器大小
- 美观的样式配置
```

### 📚 文档层

| 文档 | 用途 | 读者 |
|------|------|------|
| QUICK_START.md | 快速上手 | 新用户 |
| USER_GUIDE.md | 详细使用说明 | 所有用户 |
| UI_IMPROVEMENTS.md | UI 改进说明 | 开发者/产品经理 |
| TEST_CHECKLIST.md | 测试清单 | 测试人员 |
| CHANGELOG.md | 版本更新日志 | 所有人 |
| README.md | 项目概览 | 所有人 |

## 配置文件说明

### package.json
```json
{
  "scripts": {
    "dev": "vite",           // 开发服务器
    "build": "vite build",   // 生产构建
    "preview": "vite preview" // 预览构建结果
  },
  "dependencies": {
    "react": "^18.x",
    "react-router-dom": "^6.x",
    "recharts": "^2.x",
    "lucide-react": "^0.x"
  }
}
```

### vite.config.ts
```typescript
// Vite 构建配置
- 开发服务器设置
- 构建优化选项
- 插件配置
```

### tsconfig.json
```json
// TypeScript 配置
- 编译选项
- 路径别名
- 类型检查规则
```

### tailwind.config.js
```javascript
// Tailwind CSS 配置
- 主题定制
- 颜色方案
- 响应式断点
- 插件扩展
```

## 构建产物说明

### dist/ 目录
```
dist/
├── assets/
│   ├── index.[hash].js      # 应用主逻辑
│   ├── index.[hash].css     # 样式文件
│   └── vendor.[hash].js     # 第三方库
└── index.html               # 入口 HTML（注入资源）
```

## 开发工作流

```mermaid
graph LR
    A[修改源码] --> B[Vite 热更新]
    B --> C[浏览器自动刷新]
    C --> D[查看效果]
    D --> A
```

## 部署流程

```bash
# 1. 构建生产版本
npm run build

# 2. dist/ 目录上传到服务器
# 支持任何静态网站托管服务

# 3. 访问部署后的 URL
```

## 技术栈一览

| 技术 | 版本 | 用途 |
|------|------|------|
| React | 18.x | UI 框架 |
| TypeScript | 5.x | 类型安全 |
| Vite | 5.x | 构建工具 |
| React Router | 6.x | 路由管理 |
| Tailwind CSS | 3.x | 样式方案 |
| Recharts | 2.x | 图表库 |
| Lucide React | 最新 | 图标库 |

## 项目特点

✨ **模版化思维**：从选股票到选模版+选股票  
🚀 **即时反馈**：进入页面立即看到图表  
🎨 **美观易用**：现代化 UI 设计  
📱 **响应式**：完美适配桌面、平板、手机  
⚡ **高性能**：Vite 构建，快速加载  
🔧 **可定制**：编辑模式自由调整配置  
💾 **可保存**：模版持久化（规划中）  
📊 **可视化**：Recharts 驱动的精美图表  

## 下一步计划

- [ ] 接入真实金融数据 API
- [ ] 实现模版的完整 CRUD
- [ ] 添加更多行业专用模版
- [ ] 支持多股票对比
- [ ] 移动端优化
- [ ] 性能优化和代码分割
- [ ] 单元测试覆盖

---

**最后更新时间**：2026-01-26  
**当前版本**：v1.1