docs: 更新前端 AI 配置,支持多种技术栈

- admin-ui: Vue3 + Vite
- cashier-mobile: 技术栈待定(uni-app/React Native/Flutter)
- customer-mobile: 技术栈待定
- 添加各框架的 HTTP 调用示例
This commit is contained in:
2026-06-04 08:27:19 +08:00
parent 509812e9b0
commit a8d6fafb71
6 changed files with 60 additions and 16 deletions
+33 -16
View File
@@ -5,9 +5,9 @@
## 🎯 本仓库职责
**rui-frontend** 是睿核科技的前端工程集合,包含:
- `admin-ui` - 管理后台(Vue3 + TypeScript
- `cashier-mobile` - 收银移动端
- `customer-mobile` - 顾客移动端
- `admin-ui` - 管理后台(Vue3 + TypeScript + Vite
- `cashier-mobile` - 收银移动端(技术栈待定,可能是 uni-app、React Native 等)
- `customer-mobile` - 顾客移动端(技术栈待定,可能是 uni-app、React Native 等)
## 🚫 绝对禁止
@@ -20,12 +20,9 @@
```
rui-frontend/
├── admin-ui/ ✅ 可修改
│ ├── src/
│ ├── public/
│ └── package.json
├── cashier-mobile/ ✅ 可修改
├── customer-mobile/ ✅ 可修改
├── admin-ui/ ✅ 可修改Vue3 管理后台)
├── cashier-mobile/ ✅ 可修改(收银移动端)
├── customer-mobile/ ✅ 可修改(顾客移动端)
├── package.json ✅ 可修改(根配置)
└── pnpm-workspace.yaml ✅ 可修改
```
@@ -33,21 +30,27 @@ rui-frontend/
## 🔗 与后端通信规范
### 1. API 调用方式
- 使用 **Axios****Fetch** 发送 HTTP 请求
- 使用 **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 接口
- 前端自行定义 TypeScript 接口或各框架的类型定义
- 与后端 DTO 保持一致(但不直接引用)
```typescript
@@ -61,10 +64,24 @@ interface UserDTO {
## 📝 编码规范
1. **框架**Vue 3 + TypeScript + Vite
2. **包管理器**pnpm(强制使用)
3. **代码风格**:遵循项目现有 ESLint 配置
4. **组件规范**:使用组合式 APIsetup 语法)
### admin-ui(管理后台)
- **框架**Vue 3 + TypeScript + Vite
- **包管理器**:pnpm(强制使用)
- **组件规范**组合式 APIsetup 语法)
### 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 等)
## 🔔 当需要后端支持时