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

功能概述

将前端所有显示用户名称的地方统一改为显示 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 扩展

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 扩展

SET_NICK_NAME: (state, nickName) => {
  state.nickName = nickName
  storage.set(constant.nickName, nickName)
}

2.3 GetInfo Action 修改

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 || '张三', // ... }) }

数据流程

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 接口返回数据结构

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

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

修改文件清单

兼容性说明

数据兼容

• ✅ 如果后端返回 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）仅用于系统认证
- ✅ 完善的数据回退机制
- ✅ 良好的兼容性和用户体验