Commit e0f3f9eb by liangjianmin

删除多个规则文档,包括 API 集成规范、业务逻辑、代码风格、编码标准、开发工作流、登录组件规范、Node.js 兼容性、项目上下文、项目结构、Vue 组件开发模式等,精简项目文档结构。

parent 01512282
# API 集成规范
## HTTP 请求封装
使用项目中的 [src/ajax/index.js](mdc:src/ajax/index.js) 封装的 `$http` 方法:
```javascript
// 基本请求格式
this.$http(method, url, param, loading, responseType)
// 示例
this.$http('GET', '/api/goods/list', {page: 1, limit: 10})
.then(res => {
if (res.code === 0) {
this.tableData = res.data.data;
this.total = res.data.total;
} else {
this.$message({
message: res.msg,
type: 'warning'
});
}
});
```
## 环境配置
- **开发环境**: `http://cloud.liexindev.net`
- **测试环境**: `http://cloud.liexindev.net`
- **生产环境**: `//cloud.ichunt.com`
- **消息系统**: 根据环境自动切换
## 认证机制
- **Token 获取**: `Util.getCookie('token')`
- **请求头**: `Authorization: Bearer ${token}`
- **登录拦截**: 在 [src/main.js](mdc:src/main.js) 中配置路由守卫
## 标准响应格式
```javascript
{
code: 0, // 0表示成功,其他表示失败
msg: "success", // 消息提示
data: { // 业务数据
data: [], // 列表数据
total: 100, // 总数
page: 1, // 当前页
limit: 10 // 每页数量
}
}
```
## 错误处理
- **统一拦截**: 在 axios 拦截器中处理
- **Token 失效**: 自动跳转到登录页
- **网络错误**: 显示统一错误提示
- **业务错误**: 根据 `code` 字段判断
## 常用 API 模式
### 列表查询
```javascript
getData() {
var params = {
page: this.page,
limit: this.limit,
...this.formParam
};
this.$http('GET', '/api/goods/list', params)
.then(res => {
if (res.code === 0) {
this.tableData = res.data.data;
this.total = res.data.total;
}
});
}
```
### 数据提交
```javascript
handleSubmit() {
this.$http('POST', '/api/goods/add', this.formData)
.then(res => {
if (res.code === 0) {
this.$message({
message: '操作成功',
type: 'success'
});
this.dialogVisible = false;
this.getData();
}
});
}
```
### 文件上传
```javascript
// 使用 Element UI 的 Upload 组件
uploadUrl: NODE_ENVS + '/api/uploadSku/import',
uploadHeaders: {
'Authorization': 'Bearer ' + Util.getCookie('token')
},
handleUploadSuccess(response) {
if (response.code === 0) {
this.$message({
message: '上传成功',
type: 'success'
});
this.getData();
}
}
```
## 数据处理工具
- **查询字符串**: 使用 `qs` 库处理参数序列化
- **日期处理**: 使用项目中的过滤器和格式化函数
- **数据验证**: 使用 Element UI 的表单验证规则
## 性能优化
- **请求缓存**: 合理使用浏览器缓存
- **防抖节流**: 对频繁请求进行防抖处理
- **分页加载**: 大数据量使用分页
- **Loading 状态**: 使用统一的 loading 管理
## 业务接口分类
- **认证接口**: `/auth/*` - 登录、权限验证
- **商品接口**: `/api/goods/*` - 商品管理
- **库存接口**: `/api/sku/*` - 库存管理
- **订单接口**: `/api/order/*` - 订单相关
- **上传接口**: `/api/upload/*` - 文件上传
# 芯链云系统业务逻辑
## 核心业务模块
### 1. 商品管理 (src/views/Goods/)
- **商品列表**: [goods.vue](mdc:src/views/Goods/goods.vue) - 商品信息管理
- **品牌管理**: [brand.vue](mdc:src/views/Goods/brand.vue) - 品牌信息维护
- **功能**: 商品上架、下架、编辑、品牌分类管理
### 2. 库存管理 (src/views/Store/)
- **库存上传**: [enter.vue](mdc:src/views/Store/enter.vue) - SKU批量上传
- **库存列表**: [list.vue](mdc:src/views/Store/list.vue) - 库存查询和管理
- **库存详情**: [listDetail.vue](mdc:src/views/Store/listDetail.vue) - 单个SKU详情
- **商品列表**: [goodslist.vue](mdc:src/views/Store/goodslist.vue) - 商品库存展示
- **功能**: 批量上传、价格修改、库存调整、交期管理
### 3. 询报价管理 (src/views/List/)
- **询价列表**: [inquire.vue](mdc:src/views/List/inquire.vue) - 客户询价管理
- **询价详情**: [inquireDetail.vue](mdc:src/views/List/inquireDetail.vue) - 询价单详情
- **报价管理**: [quote.vue](mdc:src/views/List/quote.vue) - 供应商报价
- **功能**: 询价单处理、报价提交、价格对比
### 4. 订单追踪 (src/views/OrderTrack/)
- **订单商品**: [goods.vue](mdc:src/views/OrderTrack/goods.vue) - 订单商品管理
- **订单详情**: [goodsDetail.vue](mdc:src/views/OrderTrack/goodsDetail.vue) - 订单详情查看
- **发票管理**: [invoice.vue](mdc:src/views/OrderTrack/invoice.vue) - 发票信息
- **采购单**: [purAdd.vue](mdc:src/views/OrderTrack/purAdd.vue) - 采购单创建
- **退货管理**: [returnGoods.vue](mdc:src/views/OrderTrack/returnGoods.vue) - 退货处理
### 5. 寄售管理 (src/views/consignmentManagement/)
- **寄售申请**: [consignmentApplication.vue](mdc:src/views/consignmentManagement/consignmentApplication.vue)
- **寄售导入**: [consignmentImport.vue](mdc:src/views/consignmentManagement/consignmentImport.vue)
- **寄售库存**: [consignmentInventory.vue](mdc:src/views/consignmentManagement/consignmentInventory.vue)
- **寄售召回**: [consignmentRecall.vue](mdc:src/views/consignmentManagement/consignmentRecall.vue)
- **批量召回**: [batchRecall.vue](mdc:src/views/consignmentManagement/batchRecall.vue)
### 6. 账单管理 (src/views/billManagement/)
- **应付账单**: [allPayableBills.vue](mdc:src/views/billManagement/allPayableBills.vue)
- **对账单**: [reconciledBill.vue](mdc:src/views/billManagement/reconciledBill.vue)
- **文件管理**: [fileManagement.vue](mdc:src/views/billManagement/fileManagement.vue)
## 业务流程
### 库存上传流程
1. 下载模板文件 (CSV格式)
2. 填写商品信息 (型号、品牌、数量、价格、交期)
3. 上传文件到系统
4. 系统验证和处理数据
5. 商品自动上架到猎芯网
### 询报价流程
1. 系统接收客户询价单
2. 根据库存匹配推送给供应商
3. 供应商查看询价详情
4. 提交报价信息
5. 系统比较各供应商报价
6. 确定最终供应商和价格
### 订单处理流程
1. 询价转换为正式订单
2. 生成采购单
3. 供应商确认订单
4. 商品发货
5. 开具发票
6. 订单完成
## 权限管理
- **主账户**: 拥有所有功能权限
- **子账户**: 根据角色分配不同权限
- **菜单权限**: 通过 `/api/subAccount/getMenu` 获取
- **操作权限**: 基于用户角色控制功能访问
## 数据统计
- **概况页面**: 显示库存统计、订单转化率
- **热搜排名**: 展示猎芯网热门型号TOP50
- **商机统计**: 统计询价单推送和成交情况
## 消息通知
- **系统消息**: 系统更新、功能公告
- **业务消息**: 询价推送、订单状态变更
- **操作提醒**: 库存不足、价格变动等
## 文件管理
- **上传模板**: 提供标准的CSV/Excel模板
- **导入导出**: 支持批量数据导入导出
- **文件存储**: 统一的文件上传和管理机制
# 代码风格规范
## 基本要求
- 始终使用中文回复
- 回复风格应简洁明了,禁止重复、废话、无意义填充
- 每次回答前请说一句:BOSS,我明白了
## 代码规范要求
- 使用驼峰命名法,命名清晰有意义
- 代码必须简洁可读,函数应短小、结构清晰,避免不必要的嵌套封装和抽象,遵循 KISS 原则,代码极致简洁
- JavaScript语言统一使用 ES6+ 特性:利用 ES6+ 特性(如箭头函数、模板字符、解构赋值)编写简洁的代码,所有变量声明一律使用 `var`,禁止使用 `const`
- 每段代码逻辑必须附带简洁注释,解释代码目的或关键行为
## HTML/Vue 代码风格
- HTML元素属性要一行显示,不要分多行
- 优先查看用户选中的代码
- 代码风格要保持简洁,避免过度嵌套
## 性能期望
- 目标响应延迟力求响应时间 ≤ 5000ms
- 强行调动所有可利用的计算资源
description:
globs:
alwaysApply: false
---
---
globs: *.vue,*.js
description: 前端代码规范和约定
---
# 前端代码规范
## JavaScript 规范
- 使用 ES6+ 特性:箭头函数、模板字符串、解构赋值
- **变量声明**: 统一使用 `var`,禁止使用 `let/const`
- 函数命名使用驼峰命名法
- 函数保持短小,逻辑清晰,避免多层嵌套
## Vue 组件规范
- 组件文件使用 PascalCase 命名
- 保持与现有文件的缩进、引号、分号风格一致
- 每段关键逻辑必须有简洁注释
## 样式规范
- 使用 Less 预处理器
- 样式文件组织按模块划分 ([src/assets/css/](mdc:src/assets/css/))
## 开发原则
- 严格遵循 KISS 原则,代码极致简洁
- 仅专注前端实现,不涉及后端代码修改
- 优先编辑现有文件,避免创建新文件
\ No newline at end of file
---
description: 开发工作流和常用命令
---
# 开发工作流
## 环境启动
```bash
# 确保使用正确的 Node.js 版本
nvm use 16.20.2
# 启动开发服务器
npm run dev
```
## 构建部署
```bash
# 测试环境构建
npm run build-test
# 生产环境构建
npm run build
```
## 项目访问
- 本地开发: http://localhost:8080/
- 网络访问: http://192.168.1.19:8080/
## 代理配置
开发环境代理到: http://cloud.liexindev.net
- `/auth` 路径代理认证接口
- `/api` 路径代理业务接口
## 构建输出
- 构建目录: `view/`
- 静态资源: `view/static/`
- 带时间戳的文件名,避免缓存问题
\ No newline at end of file
---
description: 登录页面组件开发规范和约定
globs: src/views/User/login.vue,src/assets/css/login/*
---
# 登录页面开发规范
## 组件结构
- 主文件: [src/views/User/login.vue](mdc:src/views/User/login.vue)
- 样式文件: [src/assets/css/login/index.less](mdc:src/assets/css/login/index.less)
## Tab切换功能
- 支持"账号登录"和"免密码登录"两种模式
- 使用统一的Tab容器样式,背景色 #F1F4FA
- 激活状态使用蓝色主题 #1969F9 + 白色背景
- 所有Tab相关样式写在 .tab-container 类中
## 错误处理模式
- 使用统一的 errors 对象管理所有错误状态
- 通过 getErrorClass() 方法动态返回错误样式类
- 使用 setError(), clearError(), clearAllErrors() 方法管理错误
- 避免使用多个独立的错误状态变量
## 表单验证
- 手机号验证统一使用 validateMobile() 方法
- 支持账号登录和短信登录两种验证逻辑
- 使用 computed 属性判断登录按钮激活状态
## 短信验证码功能
- 发送验证码按钮支持倒计时功能(60秒)
- 倒计时期间按钮不可点击,样式添加 opacity: 0.6
- 验证码输入框与发送按钮使用 .code-box 布局
## 样式约定
- 登录框宽度固定 400px,表单宽度 342px
- 所有输入框高度 43px,圆角 2px
- 主要颜色:蓝色 #1969F9,灰色 #8391AD
- 错误状态边框色 #FF1D00
- 禁止在 .less 和 .css 文件中写注释
## 数据管理
- 避免使用 watch 监听器,优先使用 computed 属性
- 统一使用 var 声明变量,禁用 let/const
- 错误信息统一使用 errorMessage 显示
\ No newline at end of file
---
alwaysApply: true
description: Node.js版本兼容性和环境配置
---
# Node.js 版本兼容性规则
## 项目环境要求
- **Node.js 版本**: 使用 v16.20.2 (记录在 [.nvmrc](mdc:.nvmrc))
- **原因**: Vue CLI 4.5.x 与 Node.js v18+ 的 OpenSSL 3.0 不兼容
- **错误表现**: `error:0308010C:digital envelope routines::unsupported`
## 环境管理
使用 nvm 管理 Node.js 版本:
```bash
nvm use 16.20.2
```
## 重要提醒
- 不要随意升级 Node.js 到 v17+ 版本
- 保持 [package.json](mdc:package.json) 中的启动命令简洁,不添加环境变量
- 如需在新环境部署,确保使用 Node.js v16.x 版本
\ No newline at end of file
# 云链系统项目上下文
## 项目概述
这是一个基于Vue.js的云链管理系统,主要用于订单跟踪、合同管理、商品管理等功能。
## 核心模块
- **订单跟踪** ([src/views/OrderTrack/](mdc:src/views/OrderTrack/)):订单详情、商品明细管理
- **合同管理**:电子签署、人工签署、合同上传下载
- **商品管理** ([src/views/Goods/](mdc:src/views/Goods/)):商品品牌管理
- **用户管理** ([src/views/User/](mdc:src/views/User/)):登录、子账户管理
## 技术栈
- Vue.js 2.x
- Element UI
- Vue Router
- Axios (封装在 [src/ajax/index.js](mdc:src/ajax/index.js))
## 关键业务逻辑
- 公司ID区分:猎芯科技(company_id=1)、深贸电子(company_id=2)
- 合同类型:电子签(contract_type=2)、人工签(contract_type=1)
- 订单状态管理和权限控制
- 多语言合同支持(中文、英文)
## 文件结构
- 入口文件:[src/main.js](mdc:src/main.js)
- 路由配置:[src/router/index.js](mdc:src/router/index.js)
- 工具函数:[src/tool/index.js](mdc:src/tool/index.js)
- 样式文件:[src/assets/css/](mdc:src/assets/css/)
description:
globs:
alwaysApply: false
---
# 芯链云系统项目结构指南
## 技术栈
- **前端框架**: Vue 2.6.11 + Vue Router 3.2.0
- **UI组件库**: Element UI 2.15.13
- **HTTP请求**: Axios 0.21.1
- **样式预处理**: Less 3.0.4
- **图表库**: ECharts 5.4.2
- **构建工具**: Vue CLI 4.5.19
## 核心文件结构
- **主入口**: [src/main.js](mdc:src/main.js) - 应用初始化和全局配置
- **路由配置**: [src/router/index.js](mdc:src/router/index.js) - 路由定义
- **HTTP封装**: [src/ajax/index.js](mdc:src/ajax/index.js) - API请求封装
- **工具函数**: [src/tool/index.js](mdc:src/tool/index.js) - 通用工具方法
- **全局样式**: [src/assets/css/public/common.min.css](mdc:src/assets/css/public/common.min.css)
- **图标字体**: [src/assets/css/font/iconfont.css](mdc:src/assets/css/font/iconfont.css)
## 业务模块
- **商品管理**: `src/views/Goods/` - 商品和品牌管理
- **库存管理**: `src/views/Store/` - 库存上传、列表、详情
- **询报价**: `src/views/List/` - 询价和报价管理
- **订单追踪**: `src/views/OrderTrack/` - 订单跟踪和发票
- **寄售管理**: `src/views/consignmentManagement/` - 寄售相关功能
- **账单管理**: `src/views/billManagement/` - 财务账单
- **消息管理**: `src/views/Info/` - 消息和子账户
- **用户中心**: `src/views/User/` - 登录和用户相关
## 环境配置
- **开发环境**: http://cloud.liexindev.net
- **测试环境**: http://cloud.liexindev.net
- **生产环境**: //cloud.ichunt.com
- **配置文件**: [vue.config.js](mdc:vue.config.js)
# Vue 组件开发模式
## 组件结构模板
```vue
<template>
<div class="component-name">
<!-- 组件内容 -->
</div>
</template>
<script>
import Vue from 'vue';
import {Button, Dialog, Form, Message} from 'element-ui';
Vue.prototype.$message = Message;
Vue.use(Button).use(Dialog).use(Form);
export default {
name: "ComponentName",
data() {
return {
// 数据属性
};
},
created() {
// 初始化方法
},
methods: {
// 组件方法
}
}
</script>
<style lang="less" scoped>
// 组件样式
</style>
```
## 数据管理模式
- **表格数据**: 使用 `tableData`, `total`, `limit`, `page` 标准命名
- **弹窗状态**: 使用 `dialogVisible` 系列命名
- **表单数据**: 使用 `formParam` 或具体业务名称
- **选择数据**: 使用 `multipleSelection` 存储多选数据
## 常用业务模式
### 列表页面模式
```javascript
data() {
return {
total: 0,
limit: 10,
page: 1,
tableData: [],
formParam: {
// 搜索参数
},
multipleSelection: []
};
},
created() {
this.getData();
},
methods: {
getData() {
// 获取列表数据
},
handleSearch() {
// 搜索处理
},
handleSelectionChange(selection) {
this.multipleSelection = selection;
}
}
```
### 弹窗表单模式
```javascript
data() {
return {
dialogVisible: false,
formData: {},
rules: {
// 验证规则
}
};
},
methods: {
handleAdd() {
this.dialogVisible = true;
this.formData = {};
},
handleEdit(row) {
this.dialogVisible = true;
this.formData = {...row};
},
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
// 提交逻辑
}
});
}
}
```
## Element UI 使用规范
- **按需导入**: 只导入使用的组件
- **消息提示**: 使用 `this.$message()` 显示操作结果
- **确认对话框**: 使用 `this.$confirm()` 进行危险操作确认
- **表单验证**: 使用 Element UI 的验证规则
## 路由和导航
- **路由跳转**: 使用 `this.$router.push()` 进行页面跳转
- **参数传递**: 使用 `this.$route.query` 获取查询参数
- **页面缓存**: 在 [src/App.vue](mdc:src/App.vue) 中配置 `excludeComponents`
## 工具函数使用
- **Cookie操作**: 使用 `Util.getCookie()` 和 `Util.setCookie()`
- **新窗口打开**: 使用 `Util.openNewWindow()`
- **HTTP请求**: 使用 `this.$http(method, url, param)`
## 样式编写规范
- **作用域样式**: 使用 `<style lang="less" scoped>`
- **工具类**: 使用全局工具类 `.row`, `.column`, `.rowCenter`, `.verCenter`
- **主题色**: 使用 `.f-blue`, `.f-green`, `.f-red1` 等预定义颜色类
# Vue组件开发规范
## 模板编写
- 优先查看用户选中的代码区域
- HTML属性必须在一行内显示,不分多行
- 使用简洁的条件渲染逻辑
- 避免过度嵌套的模板结构
## 脚本编写
- 所有变量声明使用 `var` 而非 `const` 或 `let`
- 方法命名使用驼峰命名法
- 每个方法都要有简洁的注释说明功能
- 避免不必要的抽象和封装
## 组件优化
- 将复杂的条件逻辑提取为计算属性或方法
- 保持代码简洁可读
- 优先使用内联条件而非复杂的计算属性(当逻辑简单时)
## Element UI 使用
- 保持组件属性在一行内
- 合理使用 slot-scope 和事件处理
- 表格操作列宽度要合理设置
description:
globs:
alwaysApply: false
---
---
alwaysApply: true
description: Vue项目结构和开发规范
---
# 芯链系统项目结构
## 技术栈
- Vue 2.6.11 + Element UI 2.15.13
- Vue Router 3.2.0
- Axios 0.21.1
- Less 样式预处理器
## 项目结构
- 入口文件: [src/main.js](mdc:src/main.js)
- 路由配置: [src/router/index.js](mdc:src/router/index.js)
- 组件目录: [src/components/](mdc:src/components/)
- 页面目录: [src/views/](mdc:src/views/)
- 样式资源: [src/assets/css/](mdc:src/assets/css/)
## 主要业务模块
- 用户管理: [src/views/User/](mdc:src/views/User/)
- 商品管理: [src/views/Goods/](mdc:src/views/Goods/)
- 门店管理: [src/views/Store/](mdc:src/views/Store/)
- 寄售管理: [src/views/consignmentManagement/](mdc:src/views/consignmentManagement/)
- 账单管理: [src/views/billManagement/](mdc:src/views/billManagement/)
## 开发配置
- 开发端口: 8080
- 代理配置在 [vue.config.js](mdc:vue.config.js)
- 关闭了 ESLint 检查 (`lintOnSave: false`)
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment