<script lang="ts" setup>
|
/**
|
* TMS 系统首页（门户设计链接地址：x/tms/home/index）
|
* 学员 / 管理视图切换（本期手动切换，偏好落 localStorage）
|
*/
|
import { computed, ref, watch } from 'vue';
|
|
import { useUserStore } from '@vben/stores';
|
|
import AdminHome from './AdminHome.vue';
|
import TraineeHome from './TraineeHome.vue';
|
|
import '#/views/x/tms/shared/page.css';
|
import './home.css';
|
|
defineOptions({ name: 'TmsHome' });
|
|
type HomeViewMode = 'trainee' | 'admin';
|
|
const VIEW_MODE_KEY = 'tms.home.viewMode';
|
|
const userStore = useUserStore();
|
|
function readStoredMode(): HomeViewMode {
|
try {
|
const v = localStorage.getItem(VIEW_MODE_KEY);
|
return v === 'admin' ? 'admin' : 'trainee';
|
} catch {
|
return 'trainee';
|
}
|
}
|
|
const viewMode = ref<HomeViewMode>(readStoredMode());
|
|
watch(viewMode, (mode) => {
|
try {
|
localStorage.setItem(VIEW_MODE_KEY, mode);
|
} catch {
|
/* ignore */
|
}
|
});
|
|
const displayName = computed(() => {
|
const info: any = userStore.getUserInfo || {};
|
return info.realName || info.userName || info.userAccount || '同事';
|
});
|
|
const todayText = computed(() => {
|
const d = new Date();
|
const week = ['日', '一', '二', '三', '四', '五', '六'][d.getDay()];
|
const pad = (n: number) => String(n).padStart(2, '0');
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} 星期${week}`;
|
});
|
|
function setMode(mode: HomeViewMode) {
|
viewMode.value = mode;
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper tms-scroll-page tms-home-page">
|
<div class="jnpf-content-wrapper-center tms-scroll-center">
|
<div class="jnpf-content-wrapper-content tms-scroll-body tms-home-body">
|
<div class="home-mode-bar">
|
<div class="home-mode-bar__hint">首页视图</div>
|
<div class="home-mode-switch">
|
<button
|
type="button"
|
class="home-mode-btn"
|
:class="{ 'home-mode-btn--active': viewMode === 'trainee' }"
|
@click="setMode('trainee')"
|
>
|
学员视图
|
</button>
|
<button
|
type="button"
|
class="home-mode-btn"
|
:class="{ 'home-mode-btn--active': viewMode === 'admin' }"
|
@click="setMode('admin')"
|
>
|
管理视图
|
</button>
|
</div>
|
</div>
|
|
<TraineeHome
|
v-if="viewMode === 'trainee'"
|
:display-name="displayName"
|
:today-text="todayText"
|
/>
|
<AdminHome v-else :display-name="displayName" :today-text="todayText" />
|
</div>
|
</div>
|
</div>
|
</template>
|
