ibs-fullstack/ruoyi-ui/CLAUDE.md

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 (若依框架)

常用命令

开发

# 安装依赖（建议使用国内镜像）
npm install --registry=https://registry.npmmirror.com

# 启动开发服务器 (默认端口80)
npm run dev

# Node.js 版本兼容性问题的启动方式
npm run dev_t

构建

# 构建生产环境
npm run build:prod

# 构建测试环境
npm run build:stage

# 构建预发布环境
npm run build:pre

代码质量

# ESLint 检查
npm run lint

Mock 服务

# 启动 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() - 处理树形数据