hzhub/hzhub-portal-employee/docs/COMPANY_NAME_CONFIG.md

# 动态公司名称配置说明

## 修改内容

已将员工门户的左上角标题从固定的"HZHub 企业员工门户"改为动态显示"登录用户对应公司名称 + 企业员工门户"。

## 修改文件

### 1. Aside侧边栏组件

**文件**: `src/layouts/components/Aside/index.vue`

**修改内容**:
- 引入 `useUserStore` 获取用户信息
- 创建 `tenantNameMap` 映射租户ID到公司名称
- 使用 `computed` 计算属性动态获取公司名称
- 将固定的 "HZHub" 改为动态的 `{{ companyName }}`

**关键代码**:
```typescript
import { useUserStore } from '@/stores';
import { computed } from 'vue';

const userStore = useUserStore();

// 租户ID到公司名称的映射
const tenantNameMap: Record<string, string> = {
  '000001': '集团总部',
  '000002': '汇亚公司',
  '000003': '恒福公司',
  '000004': '玛缇公司',
};

// 计算当前用户的公司名称
const companyName = computed(() => {
  const tenantId = userStore.userInfo?.tenantId;
  return tenantId ? tenantNameMap[tenantId] || 'HZHub' : 'HZHub';
});
```

### 2. 登录页面

**文件**: `src/pages/login/index.vue`

**修改内容**:
- 从URL参数获取 `tenant` 参数
- 使用相同的 `tenantNameMap` 映射
- 根据URL参数动态显示公司名称

**关键代码**:
```typescript
import { useRoute } from 'vue-router';
import { computed } from 'vue';

const route = useRoute();

// 从URL参数获取租户ID，并映射到公司名称
const companyName = computed(() => {
  const tenantId = route.query.tenant as string;
  return tenantId ? tenantNameMap[tenantId] || 'HZHub' : 'HZHub';
});
```

## 公司名称映射关系

| 租户ID | 公司名称 | 登录URL示例 |
|--------|----------|-------------|
| 000001 | 集团总部 | http://localhost:5137/login?tenant=000001 |
| 000002 | 汇亚公司 | http://localhost:5137/login?tenant=000002 |
| 000003 | 恒福公司 | http://localhost:5137/login?tenant=000003 |
| 000004 | 玛缇公司 | http://localhost:5137/login?tenant=000004 |

## 显示效果

### 登录页面
- **集团总部用户**: 左上角显示 "集团总部 企业员工门户"
- **汇亚公司用户**: 左上角显示 "汇亚公司 企业员工门户"
- **恒福公司用户**: 左上角显示 "恒福公司 企业员工门户"
- **玛缇公司用户**: 左上角显示 "玛缇公司 企业员工门户"

### 主界面侧边栏
登录后，侧边栏顶部会显示对应公司的名称：
```
[公司名称]
企业员工门户
```

## 扩展性

### 添加新公司

如果需要添加新的公司，只需在两个组件的 `tenantNameMap` 中添加映射：

```typescript
const tenantNameMap: Record<string, string> = {
  '000001': '集团总部',
  '000002': '汇亚公司',
  '000003': '恒福公司',
  '000004': '玛缇公司',
  '000005': '新公司名称',  // 添加新公司
};
```

### 从后端获取公司名称

如果需要从后端动态获取公司名称，可以：

1. **修改 LoginUser 类型**，添加 `companyName` 字段：
```typescript
export interface LoginUser {
  // ... 现有字段
  companyName?: string;  // 新增公司名称字段
}
```

2. **修改 Aside 组件**，直接使用 `companyName`：
```typescript
const companyName = computed(() => {
  return userStore.userInfo?.companyName || 'HZHub';
});
```

3. **后端接口**：在登录接口返回用户信息时，包含 `companyName` 字段

## 测试验证

### 测试步骤

1. **登录页面测试**：
   - 访问 `http://localhost:5137/login?tenant=000002`
   - 检查登录页面左上角是否显示 "汇亚公司 企业员工门户"

2. **主界面测试**：
   - 使用不同公司的账号登录
   - 检查侧边栏顶部是否显示对应公司名称

3. **切换租户测试**：
   - 登录汇亚公司账号
   - 退出登录
   - 用恒福公司账号登录
   - 检查标题是否正确切换

### 预期结果

- ✅ 登录页面根据URL参数显示对应公司名称
- ✅ 主界面侧边栏显示登录用户的公司名称
- ✅ 切换不同公司登录时，标题正确更新
- ✅ 未识别的租户ID显示为默认值 "HZHub"

## 注意事项

1. **租户ID一致性**：确保 `tenantId` 与数据库 `sys_tenant` 表中的 `tenant_id` 字段一致
2. **映射完整性**：所有可能的租户ID都应该在 `tenantNameMap` 中有对应映射
3. **默认值**：未识别的租户ID会显示默认值 "HZHub"
4. **性能优化**：使用 `computed` 计算属性，避免不必要的重复计算

## 相关文件

- `src/layouts/components/Aside/index.vue` - 侧边栏组件
- `src/pages/login/index.vue` - 登录页面
- `src/stores/modules/user.ts` - 用户状态管理
- `src/api/auth/types.ts` - 用户类型定义

## 后续优化建议

1. **统一管理映射关系**：将 `tenantNameMap` 提取到统一的配置文件
2. **支持多语言**：添加国际化支持，显示不同语言的公司名称
3. **动态获取**：从后端API动态获取公司名称，避免硬编码
4. **Logo定制**：不同公司使用不同的Logo图标