7.1 KiB
7.1 KiB
项目文件结构
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
起始页 - 搜索和模版选择
功能：
- 股票搜索输入框
- 4 种评级模版展示（默认、消费股、科技股、快速诊断）
- 模版选择交互
- 跳转到评级详情页
改进亮点：
✅ 从展示股票改为展示模版
✅ 清晰的操作流程引导
✅ 动态提示文字
DashboardPage.tsx
评级详情页 - 多维度分析
功能：
- 左侧：资产评级表（4大维度，多个指标）
- 右侧：图表详情（默认展开）
- 编辑模式：拖拽排序、添加删除
- 模板库和另存为功能
改进亮点：
✅ 默认展开右侧图表区域
✅ 默认渲染图表（无需点击）
✅ 左右联动交互
DetailPage.tsx
详细分析页 - 单维度深度分析
功能：
- 大图表展示
- 研判结论和图表说明
- 多标签页切换
- AI 修改输入框
特点：
- 更大的图表显示区域
- 详细的分析说明
- 支持自然语言修改参数
📊 数据层
mockData.ts
模拟数据生成器
导出：
- generateChartData() // 图表数据生成函数
- STOCK_DATA_CONFIG // 股票数据配置对象
├── valuation // 估值维度
├── macro // 宏观维度
├── assets // 资产维度
└── capital // 资金维度
每个维度包含：
- id: 唯一标识
- dimension: 维度名称
- items: 指标数组
├── id: 指标ID
├── label: 指标名称
├── summary: 研判摘要
├── chartData: 图表数据
└── color: 主题色
🎨 组件层
StockChart.tsx
图表组件（基于 Recharts）
Props:
- data: 图表数据
- color: 线条颜色
- height: 图表高度
- legend: 图例文字
特点：
- 响应式设计
- 自适应容器大小
- 美观的样式配置
📚 文档层
| 文档 | 用途 | 读者 |
|---|---|---|
| QUICK_START.md | 快速上手 | 新用户 |
| USER_GUIDE.md | 详细使用说明 | 所有用户 |
| UI_IMPROVEMENTS.md | UI 改进说明 | 开发者/产品经理 |
| TEST_CHECKLIST.md | 测试清单 | 测试人员 |
| CHANGELOG.md | 版本更新日志 | 所有人 |
| README.md | 项目概览 | 所有人 |
配置文件说明
package.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
// Vite 构建配置
- 开发服务器设置
- 构建优化选项
- 插件配置
tsconfig.json
// TypeScript 配置
- 编译选项
- 路径别名
- 类型检查规则
tailwind.config.js
// Tailwind CSS 配置
- 主题定制
- 颜色方案
- 响应式断点
- 插件扩展
构建产物说明
dist/ 目录
dist/
├── assets/
│ ├── index.[hash].js # 应用主逻辑
│ ├── index.[hash].css # 样式文件
│ └── vendor.[hash].js # 第三方库
└── index.html # 入口 HTML（注入资源）
开发工作流
graph LR
A[修改源码] --> B[Vite 热更新]
B --> C[浏览器自动刷新]
C --> D[查看效果]
D --> A
部署流程
# 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