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