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

169 lines
4.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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()` - 处理树形数据