uitocode/design/BaseInfo.md

项目结构

project-root/
├── design/                  # 设计文档
│   ├── DESIGN.md            # 设计规范
│   └── Page.md              # 页面设计
├── public/                  # 静态资源
├── src/
│   ├── assets/              # 项目资源文件
│   │   ├── images/          # 图片资源
│   │   └── icons/           # 图标资源
│   ├── components/          # 公共组件
│   │   ├── ui/              # 基础UI组件
│   │   └── layout/          # 布局组件
│   ├── pages/               # 页面组件
│   │   ├── auth/            # 认证相关页面
│   │   │   ├── Login.tsx    # 登录页面
│   │   │   └── Register.tsx # 注册页面
│   │   ├── dashboard/       # 首页
│   │   ├── project/         # 项目管理
│   │   │   ├── _components/ # 页面级组件
│   │   │   ├── ProjectList.tsx # 项目列表
│   │   │   └── ProjectDetail.tsx # 项目详情
│   │   └── settings/        # 设置页面
│   ├── services/            # 服务层
│   │   ├── api/             # API 调用
│   │   └── auth/            # 认证服务
│   ├── utils/               # 工具函数
│   ├── constants/           # 常量定义
│   ├── hooks/               # 自定义 hooks
│   ├── types/               # TypeScript 类型定义
│   ├── i18n/                # 国际化文件
│   │   ├── en.json          # 英语
│   │   └── zh.json          # 中文
│   ├── App.tsx              # 应用入口组件
│   ├── main.tsx             # 入口文件
│   └── routes.tsx           # 路由配置
├── .gitignore               # 忽略文件
├── .eslintrc.js             # ESLint 配置
├── .prettierrc.js           # Prettier 配置
├── tsconfig.json            # TypeScript 配置
├── vite.config.ts           # Vite 配置
├── package.json             # 项目依赖
└── README.md                # 项目说明

设计规范

整体风格

• 风格：meta-light 风格，严格按照design/DESIGN.md中的light-mode设计规范
• 布局：响应式设计，以 1920*1080 分辨率为主

组件规范

• 设计规范：严格按照design/DESIGN.md中的设计规范

国际化

• 支持语言：中文、英语，默认使用中文
• 实现方式：i18next
• 翻译文件位置：src/i18n/
• 组件内使用：useTranslation hook

性能优化

• 代码分割：使用 React.lazy 和 Suspense
• 状态管理优化：合理使用 memo、useCallback、useMemo
• 图片优化：使用适当的图片格式和大小
• 网络请求优化：使用 axios 拦截器，合理缓存