ADD：项目创建提示词文件
This commit is contained in:
lilan
parent
d444061e9f
commit
bdd11126e6
|
|
@ -0,0 +1,213 @@
|
|||
## 技术栈
|
||||
- 框架：React 18+
|
||||
- 语言：TypeScript 5.0+
|
||||
- 状态管理：React Context + useReducer
|
||||
- 路由：React Router v6+
|
||||
- HTTP 客户端：Axios
|
||||
- 国际化：i18next
|
||||
- 构建工具：Vite
|
||||
- 样式方案：Tailwind CSS
|
||||
- 代码质量：ESLint + Prettier
|
||||
- 测试：Jest + React Testing Library
|
||||
|
||||
## 项目结构
|
||||
```
|
||||
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 # 路由配置
|
||||
├── .eslintrc.js # ESLint 配置
|
||||
├── .prettierrc.js # Prettier 配置
|
||||
├── tsconfig.json # TypeScript 配置
|
||||
├── vite.config.ts # Vite 配置
|
||||
├── package.json # 项目依赖
|
||||
└── README.md # 项目说明
|
||||
```
|
||||
|
||||
## 设计规范
|
||||
### 整体风格
|
||||
- 风格：meta-light 风格，严格按照design/DESIGN.md中的设计规范
|
||||
- 布局：响应式设计，以 1920*1080 分辨率为主
|
||||
|
||||
### 组件规范
|
||||
- 设计规范：严格按照design/DESIGN.md中的设计规范
|
||||
|
||||
## 页面组成
|
||||
### 1. 登录页面
|
||||
- 元素：
|
||||
- 系统 logo
|
||||
- 用户名输入框（带校验）
|
||||
- 密码输入框（带校验，显示/隐藏密码功能）
|
||||
- 记住我 checkbox
|
||||
- 登录按钮
|
||||
- 注册链接
|
||||
- 忘记密码链接
|
||||
- 交互：
|
||||
- 用户名：必填，格式校验
|
||||
- 密码：必填，长度至少 6 位
|
||||
- 点击登录：提交表单，显示加载状态
|
||||
- 登录失败：显示错误信息
|
||||
- 注册链接：跳转到注册页面
|
||||
|
||||
### 2. 注册页面
|
||||
- 元素：
|
||||
- 系统 logo
|
||||
- 用户名输入框（带校验）
|
||||
- 密码输入框（带校验）
|
||||
- 确认密码输入框（带校验）
|
||||
- 取消按钮
|
||||
- 注册按钮
|
||||
- 返回登录链接
|
||||
- 交互：
|
||||
- 用户名：必填，格式校验，唯一性检查
|
||||
- 密码：必填，长度至少 6 位，包含字母和数字
|
||||
- 确认密码：必须与密码一致
|
||||
- 点击注册：提交表单，显示加载状态
|
||||
- 注册失败：显示错误信息
|
||||
- 取消按钮：返回登录页面
|
||||
|
||||
### 3. 系统布局
|
||||
- 左侧菜单树：
|
||||
- 菜单项：首页、项目管理、设置
|
||||
- 展开/收起功能
|
||||
- 顶部导航栏：
|
||||
- 系统标题
|
||||
- 右侧：通知图标、用户菜单
|
||||
- 主体区域：显示当前选中的页面内容
|
||||
- 响应式：在小屏幕设备上，左侧菜单可折叠
|
||||
|
||||
### 4. 首页
|
||||
- 欢迎信息：显示当前用户名
|
||||
- 项目统计：
|
||||
- 总项目数
|
||||
- 活跃项目数
|
||||
- 最近创建的项目
|
||||
- 快捷操作：创建新项目、查看所有项目
|
||||
- 系统状态：显示系统运行状态
|
||||
|
||||
### 5. 项目管理
|
||||
- 项目列表：
|
||||
- 表格形式展示
|
||||
- 列：项目名称、项目描述、创建时间、操作
|
||||
- 操作：查看、编辑、删除
|
||||
- 搜索和筛选功能
|
||||
- 分页功能
|
||||
- 批量操作：批量删除
|
||||
- 创建新项目按钮
|
||||
|
||||
### 6. 项目详情
|
||||
- 画布区域：
|
||||
- 以固定外框，将html以iframe嵌套的方式显示出来
|
||||
- iframe内的元素可在画布区域内选择和高亮
|
||||
- 添加、删除、修改元素
|
||||
- 拖拽功能
|
||||
- 预览功能
|
||||
- 左侧工具栏（绝对定位，距离屏幕左侧 10px，顶部 10px），抽取为单独组件：
|
||||
- 工具栏可展开/收起
|
||||
- 原型库：查看项目内所有原型，点击弹窗显示详情
|
||||
- 备注：添加、删除、修改项目元素的备注
|
||||
- 资源管理：查看项目内所有资源，点击弹窗显示详情
|
||||
- 全屏预览：查看设计稿的全屏预览
|
||||
- 提示词库：查看项目内所有提示词，点击弹窗显示详情
|
||||
- 右侧AI对话框（绝对定位，距离屏幕右侧10px，底部10px），抽取为单独组件：
|
||||
- 对话框可展开/收起
|
||||
- 中间输出框：显示AI回复
|
||||
- 底部输入框：用户输入问题，AI回复会显示在输出框中
|
||||
- 底部输入框按钮组（相对于底部输入框绝对定位，距离底部 10px）：
|
||||
- 上传附件按钮：点击后调用浏览器上传文件功能,支持上传图片、doc、docx、pdf、PDF、MD等类型文件，上传后显示在输出框中。
|
||||
- 快捷命令按钮：点击后显示快捷命令，图标为“/”
|
||||
- 语言输入图标：点击后切换语言，图标为“语言图标”
|
||||
- 发送按钮：点击后触发AI回复，图标为“发送图标”
|
||||
- 右侧顶部工具栏（绝对定位，距离屏幕右侧10px，顶部10px），抽取为单独组件：
|
||||
- 顶部工具栏可展开/收起
|
||||
- 新建页面：提供新建画布的能力
|
||||
- 保存页面：提供保存画布的能力
|
||||
- 导入页面：提供导入html创建画布的能力
|
||||
- 导出页面：提供导出为html、导出为XD文件的能力
|
||||
|
||||
### 7. 设置页面
|
||||
- 个人信息：
|
||||
- 用户名、邮箱、头像等
|
||||
- 保存按钮
|
||||
- 密码修改：
|
||||
- 旧密码输入框
|
||||
- 新密码输入框
|
||||
- 确认新密码输入框
|
||||
- 保存按钮
|
||||
- 语言设置：
|
||||
- 中文、英语切换
|
||||
- 通知设置：
|
||||
- 邮件通知开关
|
||||
- 系统通知开关
|
||||
|
||||
## 数据流转
|
||||
- 认证流程：
|
||||
- 登录 → 验证 credentials → 生成 token → 存储 token → 跳转到首页
|
||||
- 注册 → 验证表单 → 创建用户 → 登录 → 跳转到首页
|
||||
- 项目流程：
|
||||
- 创建项目 → 保存到服务器 → 更新项目列表
|
||||
- 编辑项目 → 保存到服务器 → 更新项目详情
|
||||
- 删除项目 → 确认对话框 → 从服务器删除 → 更新项目列表
|
||||
|
||||
## 国际化
|
||||
- 支持语言：中文、英语
|
||||
- 实现方式：i18next
|
||||
- 翻译文件位置：src/i18n/
|
||||
- 组件内使用：useTranslation hook
|
||||
|
||||
## 安全考虑
|
||||
- 密码加密：使用 bcrypt 或类似算法
|
||||
- 认证：JWT token
|
||||
- CSRF 防护：使用 CSRF token
|
||||
- XSS 防护：使用 React 的内置防护
|
||||
- 数据验证：前端和后端双重验证
|
||||
|
||||
## 性能优化
|
||||
- 代码分割：使用 React.lazy 和 Suspense
|
||||
- 状态管理优化：合理使用 memo、useCallback、useMemo
|
||||
- 图片优化：使用适当的图片格式和大小
|
||||
- 网络请求优化：使用 axios 拦截器，合理缓存
|
||||
|
||||
## 开发环境搭建
|
||||
1. 初始化项目：`npm create vite@latest project-name -- --template react-ts`
|
||||
2. 安装依赖：`npm install`
|
||||
3. 安装额外依赖：
|
||||
- 路由：`npm install react-router-dom`
|
||||
- HTTP 客户端：`npm install axios`
|
||||
- 国际化：`npm install i18next react-i18next`
|
||||
- 状态管理：`npm install @reduxjs/toolkit react-redux`（可选）
|
||||
- 样式：`npm install tailwindcss postcss autoprefixer`（可选）
|
||||
4. 配置：
|
||||
- Tailwind CSS：`npx tailwindcss init -p`
|
||||
- ESLint 和 Prettier：按照官方文档配置
|
||||
Loading…
Reference in New Issue