docs: 更新前端 AI 配置,支持多种技术栈
- admin-ui: Vue3 + Vite - cashier-mobile: 技术栈待定(uni-app/React Native/Flutter) - customer-mobile: 技术栈待定 - 添加各框架的 HTTP 调用示例
This commit is contained in:
@@ -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. **组件规范**:使用组合式 API(setup 语法)
|
||||
### 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 等)
|
||||
|
||||
## 🔔 当需要后端支持时
|
||||
|
||||
|
||||
Reference in New Issue
Block a user