277 lines
7.1 KiB
Markdown
277 lines
7.1 KiB
Markdown
# 项目文件结构
|
||
|
||
```
|
||
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
|
||
|