# 用户显示名称统一使用昵称功能说明

## 功能概述
将前端所有显示用户名称的地方统一改为显示 **nickName（昵称）**，而不是 userName（登录账号）。

## 业务背景
- **userName**：用户登录账号，通常是工号或英文账号，不适合在界面上显示
- **nickName**：用户昵称，通常是中文姓名，更友好、更适合界面显示

## 实现方案

### 1. 存储层扩展（constant.js）
**文件路径**：`app/utils/constant.js`

**修改内容**：
```javascript
const constant = {
   userId: 'vuex_userId',
   avatar: 'vuex_avatar',
   name: 'vuex_name',          // 保留：存储 userName（登录账号）
   nickName: 'vuex_nickName',   // 新增：存储 nickName（昵称）
   roles: 'vuex_roles',
   permissions: 'vuex_permissions',
   deptId: 'vuex_deptId',
   branchCompanyId: 'vuex_branchCompanyId',
   branchCompanyName: 'vuex_branchCompanyName',
   oaUserId: 'vuex_oaUserId'
}
```

**说明**：添加 `nickName` 常量，用于 localStorage 持久化存储

### 2. Vuex Store 状态管理（user.js）
**文件路径**：`app/store/modules/user.js`

#### 2.1 State 扩展
```javascript
state: {
  token: getToken(),
  userId: storage.get(constant.userId),
  name: storage.get(constant.name),           // userName（登录账号）
  nickName: storage.get(constant.nickName),   // nickName（昵称）- 新增
  avatar: storage.get(constant.avatar),
  // ... 其他状态
}
```

#### 2.2 Mutations 扩展
```javascript
SET_NICK_NAME: (state, nickName) => {
  state.nickName = nickName
  storage.set(constant.nickName, nickName)
}
```

#### 2.3 GetInfo Action 修改
```javascript
getInfo().then(res => {
  const user = res.user
  const username = (user == null || user.userName == "" || user.userName == null) ? "" : user.userName
  const nickname = (user == null || user.nickName == "" || user.nickName == null) ? username : user.nickName
  
  // 保存两个字段
  commit('SET_NAME', username)      // 保存 userName
  commit('SET_NICK_NAME', nickname) // 保存 nickName，如果为空则使用 userName
  // ...
})
```

**逻辑说明**：
- 优先使用 `user.nickName`
- 如果 nickName 为空，则回退使用 `userName`
- 确保显示名称始终有值

### 3. 页面显示修改

#### 3.1 首页（index.vue）
**文件路径**：`app/pages/index.vue`

**修改内容**：
```javascript
computed: {
  ...mapState({
    userName: state => state.user.nickName,  // 改为使用 nickName
    currentUser: state => state.user
  }),
  // ...
}
```

**显示内容**：
- 用户昵称（nickName）
- 所在分公司（branchCompanyName）
- 关联车牌号（boundVehicle）

#### 3.2 个人中心页（mine/index.vue）
**文件路径**：`app/pages/mine/index.vue`

**修改内容**：
```javascript
// data 初始化
name: this.$store.state.user.nickName,

// onShow 方法
this.name = this.$store.state.user.nickName || '未登录'
```

#### 3.3 急救转运任务创建页（create-emergency.vue）
**文件路径**：`app/pages/task/create-emergency.vue`

**修改内容**：
```javascript
computed: {
  ...mapState({
    name: state => state.user.nickName || '张三',
    nickName: state => state.user.nickName || '张三',
    // ...
  })
}
```

#### 3.4 普通任务创建页（create-normal.vue）
**文件路径**：`app/pages/task/create-normal.vue`

**修改内容**：
```javascript
computed: {
  ...mapState({
    name: state => state.user.nickName || '张三',
    // ...
  })
}
```

#### 3.5 福祉车任务创建页（create-welfare.vue）
**文件路径**：`app/pages/task/create-welfare.vue`

**修改内容**：
```javascript
computed: {
  ...mapState({
    name: state => state.user.nickName || '张三',
    // ...
  })
}
```

## 数据流程

```mermaid
graph LR
    A[用户登录] --> B[调用getInfo接口]
    B --> C[获取user.userName和user.nickName]
    C --> D[存储到Vuex State]
    D --> E[持久化到localStorage]
    E --> F[页面从state.user.nickName读取]
    F --> G[界面显示昵称]
```

## 后端接口要求

### getInfo 接口返回数据结构
```json
{
  "code": 200,
  "user": {
    "userId": 1,
    "userName": "admin",          // 登录账号
    "nickName": "管理员",          // 昵称（必须返回）
    "avatar": "/profile/avatar.jpg",
    "deptId": 103,
    "branchCompanyId": 100,
    "branchCompanyName": "广州分公司"
  },
  "roles": ["admin"],
  "permissions": ["*:*:*"]
}
```

**重要说明**：
- `userName`：用户登录账号，用于系统认证
- `nickName`：用户昵称，用于界面显示
- 如果后端未设置 nickName，前端会自动使用 userName 作为显示名称

## 修改文件清单

| 文件路径 | 修改类型 | 说明 |
|---------|---------|------|
| `app/utils/constant.js` | 新增 | 添加 nickName 常量 |
| `app/store/modules/user.js` | 扩展 | 添加 nickName 状态管理 |
| `app/pages/index.vue` | 修改 | 首页显示昵称 |
| `app/pages/mine/index.vue` | 修改 | 个人中心显示昵称 |
| `app/pages/task/create-emergency.vue` | 修改 | 任务创建页使用昵称 |
| `app/pages/task/create-normal.vue` | 修改 | 任务创建页使用昵称 |
| `app/pages/task/create-welfare.vue` | 修改 | 任务创建页使用昵称 |

## 兼容性说明

### 数据兼容
- ✅ 如果后端返回 nickName，优先使用
- ✅ 如果后端未返回 nickName，自动回退使用 userName
- ✅ 确保界面显示始终有值

### 功能兼容
- ✅ 不影响登录功能（登录仍使用 userName）
- ✅ 不影响权限验证
- ✅ 保留 state.user.name 字段，避免其他模块引用报错

### 存储兼容
- ✅ 新增字段不影响现有存储
- ✅ localStorage 增量更新

## 测试要点

### 功能测试
1. ✅ 用户登录后，首页正确显示昵称
2. ✅ 个人中心正确显示昵称
3. ✅ 各任务创建页面正确显示昵称
4. ✅ 所在分公司信息正确显示

### 边界测试
1. ✅ 昵称为空时，显示登录账号
2. ✅ 未登录时，显示"未登录"
3. ✅ 登录账号切换后，昵称正确更新

### 兼容性测试
1. ✅ 旧版本数据迁移正常
2. ✅ 退出登录后数据正确清除
3. ✅ 下次登录数据正确加载

## 用户体验改进

### 改进前
- 显示：`admin`、`u001`、`zhangsan` 等登录账号
- 问题：不友好，不直观

### 改进后
- 显示：`管理员`、`张三`、`李四` 等中文姓名
- 优点：友好、直观、符合中文使用习惯

## 注意事项

1. **后端配置**：确保 getInfo 接口返回 nickName 字段
2. **数据填充**：建议在用户管理后台补充所有用户的昵称
3. **显示规则**：昵称 > 登录账号 > "未登录"
4. **一致性**：所有页面统一使用 `state.user.nickName`

## 总结

本次修改实现了前端用户显示名称的统一规范：
- ✅ 所有界面统一显示昵称（nickName）
- ✅ 登录账号（userName）仅用于系统认证
- ✅ 完善的数据回退机制
- ✅ 良好的兼容性和用户体验