Files
ibs-fullstack/ruoyi-ui/CLAUDE.md

169 lines
4.7 KiB
Markdown
Raw Normal View History

# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## 项目概述
**数字支行辅助管理系统** - 基于 RuoYi-Vue 框架的银行客户网格化管理平台。
这是一个全栈项目:
- **前端**: `ruoyi-ui/` - Vue 2.6 + Element UI
- **后端**: `../ibs/` - Java Spring Boot (若依框架)
## 常用命令
### 开发
```bash
# 安装依赖(建议使用国内镜像)
npm install --registry=https://registry.npmmirror.com
# 启动开发服务器 (默认端口80)
npm run dev
# Node.js 版本兼容性问题的启动方式
npm run dev_t
```
### 构建
```bash
# 构建生产环境
npm run build:prod
# 构建测试环境
npm run build:stage
# 构建预发布环境
npm run build:pre
```
### 代码质量
```bash
# ESLint 检查
npm run lint
```
### Mock 服务
```bash
# 启动 Mock 服务器
npm run mock
```
## 项目架构
### 目录结构
```
ruoyi-ui/
├── src/
│ ├── api/ # API 接口层,按业务模块分组
│ ├── assets/ # 静态资源图片、样式、图标SVG
│ ├── components/ # 全局通用组件
│ ├── directive/ # Vue 自定义指令
│ ├── layout/ # 布局组件(侧边栏、头部等)
│ ├── map/ # 地图相关工具/配置
│ ├── plugins/ # 插件配置
│ ├── router/ # 路由配置
│ ├── store/ # Vuex 状态管理
│ ├── utils/ # 工具函数
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
│ └── permission.js # 路由权限控制
├── public/
│ ├── baidu/ # 百度地图静态资源
│ └── index.html
├── mock/ # Mock 数据
├── .env.development # 开发环境配置
├── .env.production # 生产环境配置
└── .env.staging # 测试环境配置
```
### 核心业务模块
| 目录 | 功能 |
|------|------|
| `views/grid/` | 网格管理(创建、列表、地图、走访、绩效) |
| `views/customer/` | 客户管理360视图、建档、客群、标签 |
| `views/system/` | 系统管理(用户、角色、菜单、字典) |
| `views/monitor/` | 系统监控(日志、在线用户、服务监控) |
| `views/configure/` | 配置管理(级别配置、参数设置、模板) |
| `views/approveCenter/` | 审批中心 |
| `views/gridSearch/` | 网格搜索(管户、绩效、公海池) |
### API 层组织
API 请求按业务模块组织在 `src/api/` 目录:
- 每个模块导出具体的请求函数
- 使用 `src/utils/request.js` 中的 axios 实例
- 默认添加 Bearer Token 认证
- 统一错误处理401/500/601等状态码
### 状态管理 (Vuex)
Store 模块位于 `src/store/modules/`
- `app` - 应用状态(侧边栏、设备类型)
- `user` - 用户信息
- `permission` - 权限路由
- `settings` - 系统设置
- `dict` - 字典数据
- `tagsView` - 标签页视图
- `featuredAreas` - 特色区域
- `rate` - 汇率相关
使用 `vuex-persistedstate` 将 settings 持久化到 localStorage。
### 路由系统
- 路由分为 `constantRoutes`(静态路由)和 `dynamicRoutes`(动态路由)
- 动态路由基于用户权限permissions动态加载
- 使用 `src/permission.js` 进行路由守卫和权限控制
- 支持嵌套路由和路由元信息配置
### 百度地图集成
项目深度集成百度地图 API
- 静态资源位于 `public/baidu/`
- 地图相关 API 在 `src/api/grid/`
- 支持 WebGL 渲染、绘制管理器、热力图等
## 环境变量配置
| 变量 | 说明 |
|------|------|
| `VUE_APP_BASE_API` | 后端 API 基础路径 |
| `VUE_APP_MOCK_API` | Mock API 路径 |
| `VUE_APP_MOCK` | 是否启用 Mock |
| `VUE_APP_STAGE_URL` | 测试环境地址 |
| `VUE_APP_BAIDU_URL` | 百度地图服务地址 |
| `VUE_APP_SHARP_URL` | SHARP 服务地址 |
## 代码规范
- ESLint 配置基于 `plugin:vue/recommended`
- 使用单引号、2空格缩进
- 组件名使用 PascalCase
- pre-commit 钩子自动执行 lint-staged
## 全局组件
以下组件已全局注册,可直接使用:
- `Pagination` - 分页组件
- `RightToolbar` - 表格工具栏
- `Editor` - 富文本编辑器
- `FileUpload` - 文件上传
- `ImageUpload` - 图片上传
- `ImagePreview` - 图片预览
- `DictTag` - 字典标签
- `treeselect` - 树形选择器
- `DownloadBtn` - 下载按钮
## 全局方法
通过 `Vue.prototype` 挂载的全局方法:
- `getDicts()` - 获取字典数据
- `getConfigKey()` - 获取配置项
- `parseTime()` - 时间格式化
- `resetForm()` - 重置表单
- `download()` - 文件下载
- `handleTree()` - 处理树形数据