iaun 8f52c214eb Add: 支持通过执行脚本抓取资源并上传至系统抓取报告		vor 2 Monaten
..
src	8f52c214eb Add: 支持通过执行脚本抓取资源并上传至系统抓取报告	vor 2 Monaten
README_SETUP.md	58fa5e1a41 first commit	vor 3 Monaten
index.html	58fa5e1a41 first commit	vor 3 Monaten
package-lock.json	7590dc8d71 Fix: 优化细节	vor 3 Monaten
package.json	58fa5e1a41 first commit	vor 3 Monaten
setup.bat	58fa5e1a41 first commit	vor 3 Monaten
setup.sh	58fa5e1a41 first commit	vor 3 Monaten
tsconfig.json	58fa5e1a41 first commit	vor 3 Monaten
tsconfig.node.json	58fa5e1a41 first commit	vor 3 Monaten
verify_setup.js	58fa5e1a41 first commit	vor 3 Monaten
vite.config.ts	58fa5e1a41 first commit	vor 3 Monaten
yarn.lock	7590dc8d71 Fix: 优化细节	vor 3 Monaten

🎉 Frontend 环境设置完成！

设置摘要

✅ Node.js v22.20.0 - 版本符合要求
✅ npm v10.9.3 - 包管理器正常
✅ Yarn - 已安装并配置
✅ 依赖包 - 已安装所有必需包
✅ 开发服务器 - 已启动并运行在 http://localhost:3000

快速开始

1. 启动开发服务器

# 使用yarn (推荐)
yarn dev

# 或使用npm
npm run dev

2. 访问应用

前端地址: http://localhost:3000
后端API: http://localhost:5000 (需要单独启动backend)

3. 其他命令

# 构建生产版本
yarn build

# 运行测试
yarn test

# 代码检查
yarn lint

# 预览构建结果
yarn preview

项目结构

frontend/
├── node_modules/          # 依赖包
├── src/                   # 源代码
│   ├── components/        # React组件
│   ├── pages/            # 页面组件
│   ├── contexts/         # React Context
│   ├── utils/            # 工具函数
│   └── types/            # TypeScript类型定义
├── public/               # 静态资源
├── package.json          # 项目配置
├── vite.config.ts        # Vite配置
├── tsconfig.json         # TypeScript配置
└── yarn.lock            # 依赖锁定文件

技术栈

核心框架

React 18.3 - UI框架
TypeScript 5.6 - 类型安全
Vite 5.4 - 构建工具

UI组件库

Ant Design 5.21 - UI组件库
@ant-design/icons - 图标库

路由和状态

React Router 6.28 - 路由管理
React Context - 状态管理

网络请求

Axios 1.7 - HTTP客户端
Day.js 1.11 - 日期处理

开发工具

ESLint 9.0 - 代码检查
Vitest 2.0 - 测试框架

开发指南

启动完整应用

启动后端 (在backend目录):

# 激活Python虚拟环境
activate_venv.bat

# 启动Flask应用
python run.py

启动前端 (在frontend目录):
```
# 启动开发服务器
yarn dev
```
访问应用:
前端: http://localhost:3000
后端API: http://localhost:5000

代码规范

# 运行ESLint检查
yarn lint

# 自动修复可修复的问题
yarn lint --fix

测试

# 运行所有测试
yarn test

# 监听模式运行测试
yarn test --watch

# 生成覆盖率报告
yarn test --coverage

构建部署

# 构建生产版本
yarn build

# 预览构建结果
yarn preview

构建文件将生成在 dist/ 目录中。

环境配置

开发环境变量

创建 .env.local 文件 (可选):

# API基础URL
VITE_API_BASE_URL=http://localhost:5000

# 应用标题
VITE_APP_TITLE=AWS Resource Scanner

# 调试模式
VITE_DEBUG=true

生产环境变量

创建 .env.production 文件:

# 生产API URL
VITE_API_BASE_URL=https://your-api-domain.com

# 应用标题
VITE_APP_TITLE=AWS Resource Scanner

# 关闭调试
VITE_DEBUG=false

API集成

配置API基础URL

在 src/utils/api.ts 中配置:

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000';

认证配置

应用使用JWT认证，token存储在localStorage中。

故障排除

常见问题

依赖安装失败

# 清理并重新安装
yarn cache clean
rm -rf node_modules yarn.lock
yarn install

端口冲突

# 使用不同端口启动
yarn dev --port 3001

TypeScript错误

# 检查TypeScript配置
npx tsc --noEmit

ESLint错误
```
# 自动修复
yarn lint --fix
```

重置环境

# 完全重置
rm -rf node_modules yarn.lock
yarn cache clean
yarn install

开发工具推荐

VS Code扩展

ES7+ React/Redux/React-Native snippets
TypeScript Importer
ESLint
Prettier
Auto Rename Tag
Bracket Pair Colorizer

浏览器扩展

React Developer Tools
Redux DevTools (如果使用Redux)

部署

静态部署 (推荐)

构建应用:
```
yarn build
```
部署 dist/ 目录到静态服务器 (Nginx, Apache, CDN等)

Docker部署

创建 Dockerfile:

FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY . .
RUN yarn build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

性能优化

代码分割

使用 React.lazy() 进行组件懒加载
路由级别的代码分割

构建优化

Vite自动进行Tree Shaking
自动压缩和优化资源

运行时优化

使用React.memo优化组件渲染
合理使用useCallback和useMemo

🚀 前端环境已就绪，开始开发吧！

访问 http://localhost:3000 查看应用

README_SETUP.md