feat: 添加员工门户项目及相关后端改造
- 新增 hzhub-portal-employee 员工门户前端项目(基于 Vue3 + Element Plus) - 后端登录接口增加返回 nickName 字段 - 移除 KnowledgeInfoController 的 @SaCheckPermission 注解 - 删除 hzhub-portal-company 旧门户项目 - 更新项目文档和架构说明 - 添加后台运行管理脚本(start-all.sh / status-all.sh / stop-all.sh) - 更新 docker-compose 配置 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
169
hzhub-portal-employee/docs/COMPANY_NAME_CONFIG.md
Normal file
169
hzhub-portal-employee/docs/COMPANY_NAME_CONFIG.md
Normal file
@@ -0,0 +1,169 @@
|
||||
# 动态公司名称配置说明
|
||||
|
||||
## 修改内容
|
||||
|
||||
已将员工门户的左上角标题从固定的"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图标
|
||||
Reference in New Issue
Block a user