Skip to content

Latest commit

 

History

History
 
 

frontend

README.md

TradingAgents-CN 前端应用

现代化的Vue3前端界面，为TradingAgents-CN提供优秀的用户体验。

🚀 快速开始

环境要求

  • Node.js >= 18.0.0
  • npm >= 8.0.0

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:3000

构建生产版本

npm run build

预览生产版本

npm run preview

📁 项目结构

frontend/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API接口
│   ├── components/        # 组件
│   │   ├── Global/       # 全局组件
│   │   └── Layout/       # 布局组件
│   ├── layouts/          # 页面布局
│   ├── router/           # 路由配置
│   ├── stores/           # 状态管理
│   ├── styles/           # 样式文件
│   ├── types/            # 类型定义
│   ├── utils/            # 工具函数
│   ├── views/            # 页面组件
│   ├── App.vue           # 根组件
│   └── main.ts           # 应用入口
├── index.html            # HTML模板
├── package.json          # 项目配置
├── tsconfig.json         # TypeScript配置
├── vite.config.ts        # Vite配置
└── README.md             # 说明文档

🎨 主要功能

📊 仪表板

  • 数据概览和统计
  • 快速操作入口
  • 系统状态监控
  • 最近分析记录

🔍 股票筛选

  • 多维度筛选条件
  • 实时结果展示
  • 批量操作支持
  • 筛选结果导出

📈 股票分析

  • 单股深度分析
  • 批量分析处理
  • 分析历史查看
  • 进度实时跟踪

📋 队列管理

  • 任务队列监控
  • 实时状态更新
  • 任务优先级管理
  • 批量操作支持

📄 分析报告

  • 报告生成和管理
  • 多格式导出支持
  • 报告分享功能
  • 历史报告查看

⚙️ 系统设置

  • 个人偏好配置
  • 主题和外观设置
  • 分析参数配置
  • 安全设置管理

🛠️ 技术栈

核心框架

  • Vue 3 - 渐进式JavaScript框架
  • TypeScript - 类型安全的JavaScript
  • Vite - 现代化构建工具

UI组件库

  • Element Plus - 企业级Vue组件库
  • @element-plus/icons-vue - 图标组件

状态管理

  • Pinia - Vue官方状态管理库
  • @vueuse/core - Vue组合式API工具集

路由和网络

  • Vue Router 4 - 官方路由管理器
  • Axios - HTTP客户端

开发工具

  • ESLint - 代码质量检查
  • Prettier - 代码格式化
  • unplugin-auto-import - 自动导入
  • unplugin-vue-components - 组件自动导入

🎯 特色功能

🌈 现代化设计

  • 响应式布局设计
  • 明暗主题切换
  • 流畅的动画效果
  • 移动端适配

🔧 开发体验

  • TypeScript类型安全
  • 组件自动导入
  • 热模块替换
  • 代码分割优化

🚀 性能优化

  • 路由懒加载
  • 组件按需加载
  • 图片懒加载
  • 缓存策略优化

🔒 安全特性

  • JWT认证集成
  • 权限路由守卫
  • XSS防护
  • CSRF保护

📱 响应式设计

支持多种设备尺寸：

  • 桌面端: >= 1200px
  • 平板端: 768px - 1199px
  • 手机端: < 768px

🎨 主题定制

支持多种主题模式：

  • 浅色主题: 适合白天使用
  • 深色主题: 适合夜间使用
  • 自动模式: 跟随系统设置

🔧 配置说明

环境变量

创建 .env.local 文件：

# API基础URL
VITE_API_BASE_URL=http://localhost:8000/api

# 应用标题
VITE_APP_TITLE=TradingAgents-CN

代理配置

开发环境自动代理API请求到后端服务：

// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true
    }
  }
}

🚀 部署指南

构建应用

npm run build

部署到Nginx

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

🤝 开发指南

添加新页面

  1. 在 src/views/ 创建页面组件
  2. 在 src/router/index.ts 添加路由
  3. 在侧边栏菜单中添加导航

添加新API

  1. 在 src/types/ 定义类型
  2. 在 src/api/ 创建API模块
  3. 在组件中使用API

状态管理

使用Pinia进行状态管理：

// 定义store
export const useExampleStore = defineStore('example', {
  state: () => ({
    data: []
  }),
  actions: {
    async fetchData() {
      // 获取数据逻辑
    }
  }
})

// 在组件中使用
const exampleStore = useExampleStore()

📝 代码规范

命名规范

  • 组件名：PascalCase
  • 文件名：kebab-case
  • 变量名：camelCase
  • 常量名：UPPER_SNAKE_CASE

提交规范

  • feat: 新功能
  • fix: 修复bug
  • docs: 文档更新
  • style: 代码格式调整
  • refactor: 代码重构
  • test: 测试相关
  • chore: 构建过程或辅助工具的变动

🐛 问题排查

常见问题

  1. 依赖安装失败

    rm -rf node_modules package-lock.json
npm install

  2. 端口被占用

    # 修改端口
npm run dev -- --port 3001

  3. 类型错误

    # 重新生成类型文件
npm run type-check

📞 技术支持

如有问题，请通过以下方式联系：

  • 📧 邮箱: hsliup@163.com
  • 💬 微信群: 扫描README中的二维码
  • 🐛 问题反馈: GitHub Issues

TradingAgents-CN Frontend v1.0.0-preview - 现代化的股票分析平台前端