vifo
a8d6fafb71
- admin-ui: Vue3 + Vite - cashier-mobile: 技术栈待定（uni-app/React Native/Flutter） - customer-mobile: 技术栈待定 - 添加各框架的 HTTP 调用示例
101 lines
3.2 KiB
Markdown
101 lines
3.2 KiB
Markdown
# AI 开发边界配置 - 前端仓库
|
||
|
||
> **警告**：本文件定义 AI 的开发边界，AI 必须严格遵守！
|
||
|
||
## 🎯 本仓库职责
|
||
|
||
**rui-frontend** 是睿核科技的前端工程集合，包含：
|
||
- `admin-ui` - 管理后台（Vue3 + TypeScript + Vite）
|
||
- `cashier-mobile` - 收银移动端（技术栈待定，可能是 uni-app、React Native 等）
|
||
- `customer-mobile` - 顾客移动端（技术栈待定，可能是 uni-app、React Native 等）
|
||
|
||
## 🚫 绝对禁止
|
||
|
||
1. **禁止修改后端代码** - 本仓库只有前端代码
|
||
2. **禁止修改 API 接口定义** - 接口定义在后端仓库
|
||
3. **禁止直接访问数据库** - 必须通过 REST API
|
||
4. **禁止引入后端依赖** - 如 Spring, MyBatis 等
|
||
|
||
## ✅ 允许范围
|
||
|
||
```
|
||
rui-frontend/
|
||
├── admin-ui/ ✅ 可修改（Vue3 管理后台）
|
||
├── cashier-mobile/ ✅ 可修改（收银移动端）
|
||
├── customer-mobile/ ✅ 可修改（顾客移动端）
|
||
├── package.json ✅ 可修改（根配置）
|
||
└── pnpm-workspace.yaml ✅ 可修改
|
||
```
|
||
|
||
## 🔗 与后端通信规范
|
||
|
||
### 1. API 调用方式
|
||
- 使用 **Axios**、**Fetch** 或各框架提供的 HTTP 客户端发送请求
|
||
- 禁止直接引用后端 Java 类
|
||
|
||
### 2. 接口地址规范
|
||
```typescript
|
||
// 正确示例（axios）
|
||
const API_BASE = '/api'; // 通过网关转发
|
||
const userApi = {
|
||
getList: () => axios.get(`${API_BASE}/user/list`),
|
||
create: (data) => axios.post(`${API_BASE}/user`, data)
|
||
};
|
||
|
||
// 正确示例（uni-app）
|
||
const userApi = {
|
||
getList: () => uni.request({ url: `${API_BASE}/user/list` }),
|
||
create: (data) => uni.request({ url: `${API_BASE}/user`, method: 'POST', data })
|
||
};
|
||
```
|
||
|
||
### 3. 数据类型定义
|
||
- 前端自行定义 TypeScript 接口或各框架的类型定义
|
||
- 与后端 DTO 保持一致（但不直接引用）
|
||
|
||
```typescript
|
||
// 前端自定义类型
|
||
interface UserDTO {
|
||
id: number;
|
||
username: string;
|
||
// ...
|
||
}
|
||
```
|
||
|
||
## 📝 编码规范
|
||
|
||
### admin-ui（管理后台）
|
||
- **框架**：Vue 3 + TypeScript + Vite
|
||
- **包管理器**：pnpm（强制使用）
|
||
- **组件规范**：组合式 API（setup 语法）
|
||
|
||
### cashier-mobile / customer-mobile（移动端）
|
||
- **框架**：待定（根据需求选择 uni-app、React Native、Flutter 等）
|
||
- **选型原则**：
|
||
- uni-app：跨平台、快速开发、适合小程序+H5+App
|
||
- React Native：性能要求高、需要原生能力
|
||
- Flutter：高性能、自定义 UI
|
||
- **包管理器**：pnpm（推荐）或 npm
|
||
|
||
### 通用规范
|
||
1. **代码风格**：遵循项目现有 ESLint/Prettier 配置
|
||
2. **HTTP 客户端**：统一封装请求拦截器（处理 Token、错误等）
|
||
3. **路由管理**：各项目自行管理前端路由
|
||
4. **状态管理**：根据框架选择（Pinia、Vuex、Redux、Zustand 等）
|
||
|
||
## 🔔 当需要后端支持时
|
||
|
||
如果前端需要新的 API 接口：
|
||
1. **不要自己创建后端代码**
|
||
2. 在后端仓库的 Issue 中提需求
|
||
3. 等待后端提供接口后再联调
|
||
|
||
## 📞 协作方式
|
||
|
||
- **前端 AI**：只负责 rui-frontend 仓库
|
||
- **后端 AI**：负责 spring-ai 仓库提供 API
|
||
- **沟通方式**：通过 Gitea Issue / 钉钉通知
|
||
|
||
---
|
||
|
||
> **最后提醒**：AI 必须严格限制在本仓库范围内开发，禁止跨仓库修改代码！ |