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

动态公司名称配置说明

修改内容

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

修改文件

1. Aside侧边栏组件

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

修改内容:

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

关键代码:

import { computed } from 'vue';
import { useUserStore } from '@/stores';

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参数动态显示公司名称

关键代码:

import { computed } from 'vue';
import { useRoute } from 'vue-router';

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 中添加映射：

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

从后端获取公司名称

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

1. 修改 LoginUser 类型，添加 companyName 字段：

export interface LoginUser {
  // ... 现有字段
  companyName?: string; // 新增公司名称字段
}

2. 修改 Aside 组件，直接使用 companyName：

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图标