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:
163
hzhub-portal-employee/src/pages/login/index.vue
Normal file
163
hzhub-portal-employee/src/pages/login/index.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-container">
|
||||
<div class="left-section">
|
||||
<div class="logo-wrap">
|
||||
<svg width="40" height="40" viewBox="0 0 28 28" fill="none">
|
||||
<rect width="28" height="28" rx="8" fill="#1d5af3"/>
|
||||
<path d="M8 14L12 10L16 14L20 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8 18L12 14L16 18L20 14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<span class="logo-text">{{ companyName }} 企业员工门户</span>
|
||||
</div>
|
||||
<div class="ad-banner">
|
||||
<el-icon :size="200" color="#1d5af3">
|
||||
<User />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-section">
|
||||
<div class="content-wrapper">
|
||||
<div class="form-container">
|
||||
<span class="content-title">登录后访问完整功能</span>
|
||||
<el-divider content-position="center">
|
||||
账号密码登录
|
||||
</el-divider>
|
||||
<TenantAccountPassword @success="handleLoginSuccess" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { computed } from 'vue';
|
||||
import TenantAccountPassword from './components/TenantAccountPassword.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
// 租户ID到公司名称的映射
|
||||
const tenantNameMap: Record<string, string> = {
|
||||
'000001': '集团总部',
|
||||
'000002': '汇亚公司',
|
||||
'000003': '恒福公司',
|
||||
'000004': '玛缇公司',
|
||||
};
|
||||
|
||||
// 从URL参数获取租户ID,并映射到公司名称
|
||||
const companyName = computed(() => {
|
||||
const tenantId = route.query.tenant as string;
|
||||
return tenantId ? tenantNameMap[tenantId] || 'HZHub' : 'HZHub';
|
||||
});
|
||||
|
||||
function handleLoginSuccess() {
|
||||
// 登录成功后跳转到首页或 redirect 页面
|
||||
const redirect = router.currentRoute.value.query.redirect as string;
|
||||
router.push(redirect || '/');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #f5f3f0 0%, #e8e6e1 100%);
|
||||
}
|
||||
|
||||
.login-container {
|
||||
display: flex;
|
||||
width: 738px;
|
||||
max-width: 90%;
|
||||
height: 416px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.left-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
padding: 32px;
|
||||
background: linear-gradient(233deg, rgba(113, 161, 255, 0.6) 17.67%, rgba(154, 219, 255, 0.6) 70.4%);
|
||||
|
||||
.logo-wrap {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.ad-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
padding: 32px;
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 800px) {
|
||||
.left-section {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
height: auto;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user