yelan
@@ -96,19 +96,17 @@ TanStack Vue Query、PDF 预览、报表图表、自动化测试和签字板适
|
||||
|
||||
ClinicalLayout
|
||||
├─ 工作台
|
||||
│ ├─ /workbench/home 首页总览
|
||||
│ ├─ /workbench/signing 签署工作台
|
||||
│ ├─ /management/documents 文档库管理
|
||||
│ └─ /management/reports 报表分析
|
||||
│ ├─ /workbench/home 首页
|
||||
│ └─ /workbench/signing 签署工作台
|
||||
└─ 管理
|
||||
├─ /management/documents 文档库管理
|
||||
├─ /management/reports 报表分析
|
||||
├─ /management/users 用户与权限
|
||||
├─ /management/document-permissions 文档权限
|
||||
└─ /management/settings 系统设置
|
||||
```
|
||||
|
||||
菜单分组按原型呈现，与路由 path 前缀不完全对应：文档库管理和报表分析归入侧边栏「工作台」分栏，但路径仍保留在 `/management` 下。
|
||||
|
||||
布局拆分为 `Menu`、`Header` 和 `Container` 三个公共组件，页面内容由各自的 View 负责；侧边栏与顶栏共用 `components/layout/AppIcon.vue` 提供图标。
|
||||
布局拆分为 `Menu`、`Header` 和 `Container` 三个公共组件，页面内容由各自的 View 负责。
|
||||
|
||||
页面目录按业务域组织：`auth` 保留登录页；工作台页面位于 `views/workbench`；管理页面位于 `views/management`。每个具体页面目录都有 `index.vue` 入口和 `components` 目录，用于继续拆分当前页面组件。
|
||||
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
/**
|
||||
* 布局层图标组件。
|
||||
* 图标节点与新版原型保持一致，采用 lucide 图标数据（24 视图框、描边风格），
|
||||
* 避免引入额外依赖，同时保证侧边栏与顶栏的图标细节可以逐像素对齐原型。
|
||||
*/
|
||||
type IconNode = readonly [string, Record<string, string | number>]
|
||||
|
||||
const icons: Record<string, readonly IconNode[]> = {
|
||||
'layout-dashboard': [
|
||||
['rect', { width: 7, height: 9, x: 3, y: 3, rx: 1 }],
|
||||
['rect', { width: 7, height: 5, x: 14, y: 3, rx: 1 }],
|
||||
['rect', { width: 7, height: 9, x: 14, y: 12, rx: 1 }],
|
||||
['rect', { width: 7, height: 5, x: 3, y: 16, rx: 1 }],
|
||||
],
|
||||
'file-pen-line': [
|
||||
[
|
||||
'path',
|
||||
{
|
||||
d: 'M14.364 13.634a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506l4.013-4.009a1 1 0 0 0-3.004-3.004z',
|
||||
},
|
||||
],
|
||||
['path', { d: 'M14.487 7.858A1 1 0 0 1 14 7V2' }],
|
||||
[
|
||||
'path',
|
||||
{
|
||||
d: 'M20 19.645V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l2.516 2.516',
|
||||
},
|
||||
],
|
||||
['path', { d: 'M8 18h1' }],
|
||||
],
|
||||
'clipboard-check': [
|
||||
['rect', { width: 8, height: 4, x: 8, y: 2, rx: 1, ry: 1 }],
|
||||
['path', { d: 'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' }],
|
||||
['path', { d: 'm9 14 2 2 4-4' }],
|
||||
],
|
||||
activity: [
|
||||
[
|
||||
'path',
|
||||
{
|
||||
d: 'M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2',
|
||||
},
|
||||
],
|
||||
],
|
||||
'users-round': [
|
||||
['path', { d: 'M18 21a8 8 0 0 0-16 0' }],
|
||||
['circle', { cx: 10, cy: 8, r: 5 }],
|
||||
['path', { d: 'M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3' }],
|
||||
],
|
||||
'lock-keyhole': [
|
||||
['circle', { cx: 12, cy: 16, r: 1 }],
|
||||
['rect', { x: 3, y: 10, width: 18, height: 12, rx: 2 }],
|
||||
['path', { d: 'M7 10V7a5 5 0 0 1 10 0v3' }],
|
||||
],
|
||||
settings: [
|
||||
[
|
||||
'path',
|
||||
{
|
||||
d: 'M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915',
|
||||
},
|
||||
],
|
||||
['circle', { cx: 12, cy: 12, r: 3 }],
|
||||
],
|
||||
stethoscope: [
|
||||
['path', { d: 'M11 2v2' }],
|
||||
['path', { d: 'M5 2v2' }],
|
||||
['path', { d: 'M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1' }],
|
||||
['path', { d: 'M8 15a6 6 0 0 0 12 0v-3' }],
|
||||
['circle', { cx: 20, cy: 10, r: 2 }],
|
||||
],
|
||||
ellipsis: [
|
||||
['circle', { cx: 12, cy: 12, r: 1 }],
|
||||
['circle', { cx: 19, cy: 12, r: 1 }],
|
||||
['circle', { cx: 5, cy: 12, r: 1 }],
|
||||
],
|
||||
bell: [
|
||||
['path', { d: 'M10.268 21a2 2 0 0 0 3.464 0' }],
|
||||
[
|
||||
'path',
|
||||
{
|
||||
d: 'M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326',
|
||||
},
|
||||
],
|
||||
],
|
||||
'building-2': [
|
||||
['path', { d: 'M10 12h4' }],
|
||||
['path', { d: 'M10 8h4' }],
|
||||
['path', { d: 'M14 21v-3a2 2 0 0 0-4 0v3' }],
|
||||
['path', { d: 'M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2' }],
|
||||
['path', { d: 'M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16' }],
|
||||
],
|
||||
'chevron-down': [['path', { d: 'm6 9 6 6 6-6' }]],
|
||||
}
|
||||
|
||||
const props = defineProps<{ name: string }>()
|
||||
|
||||
const nodes = computed(() => icons[props.name] ?? [])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
class="app-icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.85"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
width="24"
|
||||
height="24"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<component :is="node[0]" v-for="(node, index) in nodes" :key="index" v-bind="node[1]" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-icon {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -8,13 +8,13 @@
|
||||
.clinical-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 18px 30px;
|
||||
padding: 18px 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.clinical-container {
|
||||
padding: 16px 20px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
import AppIcon from '@/components/layout/AppIcon.vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
const route = useRoute()
|
||||
@@ -23,17 +21,6 @@ const campusPlaceholder = computed(() => {
|
||||
return appStore.campusLoadFailed ? '院区加载失败' : '暂无可用院区'
|
||||
})
|
||||
|
||||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||||
const todayText = computed(() => {
|
||||
const now = new Date()
|
||||
|
||||
return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${weekdays[now.getDay()]}`
|
||||
})
|
||||
|
||||
function handleMessages() {
|
||||
ElMessage.info('暂无新消息')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void appStore.loadCampuses()
|
||||
})
|
||||
@@ -42,34 +29,26 @@ onMounted(() => {
|
||||
<template>
|
||||
<header class="clinical-header">
|
||||
<div class="header-page">
|
||||
<p class="header-subtitle">{{ pageGroup }} · 医签通平台</p>
|
||||
<h1 class="header-title">{{ pageTitle }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<label class="campus-scope">
|
||||
<AppIcon name="building-2" class="scope-icon" />
|
||||
<select
|
||||
v-model="selectedCampusId"
|
||||
:disabled="appStore.campusLoading || !appStore.campusRecords.length"
|
||||
aria-label="选择院区"
|
||||
>
|
||||
<option v-if="!appStore.campusRecords.length" value="">
|
||||
{{ campusPlaceholder }}
|
||||
</option>
|
||||
<option v-for="campus in appStore.campusRecords" :key="campus.id" :value="campus.id">
|
||||
{{ campus.name }}
|
||||
</option>
|
||||
</select>
|
||||
<AppIcon name="chevron-down" class="scope-arrow" />
|
||||
</label>
|
||||
|
||||
<button class="icon-button" type="button" aria-label="查看消息" @click="handleMessages">
|
||||
<AppIcon name="bell" class="icon-button-icon" />
|
||||
</button>
|
||||
|
||||
<span class="header-date">{{ todayText }}</span>
|
||||
<span class="header-title">{{ pageTitle }}</span>
|
||||
<span class="header-breadcrumb">{{ pageGroup }} / {{ pageTitle }}</span>
|
||||
</div>
|
||||
<span class="header-spacer" />
|
||||
<label class="campus-selector">
|
||||
<span class="campus-label">院区</span>
|
||||
<select
|
||||
v-model="selectedCampusId"
|
||||
:disabled="appStore.campusLoading || !appStore.campusRecords.length"
|
||||
aria-label="选择院区"
|
||||
>
|
||||
<option v-if="!appStore.campusRecords.length" value="">
|
||||
{{ campusPlaceholder }}
|
||||
</option>
|
||||
<option v-for="campus in appStore.campusRecords" :key="campus.id" :value="campus.id">
|
||||
{{ campus.name }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<span class="environment-badge">{{ appStore.environment }}</span>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
@@ -77,109 +56,69 @@ onMounted(() => {
|
||||
.clinical-header {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--header-height);
|
||||
padding: 0 30px;
|
||||
background: rgb(255 255 255 / 93%);
|
||||
padding: 0 20px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--line);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.header-page {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: baseline;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
margin: 0;
|
||||
color: #82969f;
|
||||
font-size: 10px;
|
||||
.header-title {
|
||||
flex-shrink: 0;
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
margin: 3px 0 0;
|
||||
.header-breadcrumb {
|
||||
overflow: hidden;
|
||||
color: var(--ink);
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
.header-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.campus-selector {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
color: #6e828b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.campus-scope {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 9px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.scope-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
.campus-label {
|
||||
color: var(--mut);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.scope-arrow {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.campus-scope select {
|
||||
.campus-selector select {
|
||||
width: auto;
|
||||
max-width: 150px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: #4d6873;
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.campus-scope select:disabled {
|
||||
color: #9aabb3;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
color: #506c77;
|
||||
place-items: center;
|
||||
background: #edf4f6;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
color: #08788d;
|
||||
background: #def0f3;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.icon-button-icon {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.header-date {
|
||||
color: #6e828b;
|
||||
padding: 4px 8px;
|
||||
color: var(--brand-d);
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
background: var(--brand-l);
|
||||
border: 1px solid var(--brand);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.environment-badge {
|
||||
flex-shrink: 0;
|
||||
padding: 3px 8px;
|
||||
color: var(--warn);
|
||||
font-size: 11px;
|
||||
background: var(--warn-l);
|
||||
border-radius: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,56 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { RouterLink, useRouter } from 'vue-router'
|
||||
|
||||
import AppIcon from '@/components/layout/AppIcon.vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useLoginStore } from '@/stores/login'
|
||||
|
||||
interface MenuItem {
|
||||
path: string
|
||||
label: string
|
||||
icon: string
|
||||
permission?: string
|
||||
}
|
||||
|
||||
interface MenuGroup {
|
||||
label: string
|
||||
ariaLabel: string
|
||||
items: MenuItem[]
|
||||
}
|
||||
|
||||
const loginStore = useLoginStore()
|
||||
const appStore = useAppStore()
|
||||
const router = useRouter()
|
||||
|
||||
const menuGroups: MenuGroup[] = [
|
||||
{
|
||||
label: '工作台',
|
||||
ariaLabel: '主要导航',
|
||||
items: [
|
||||
{ path: '/workbench/home', label: '首页总览', icon: 'layout-dashboard' },
|
||||
{ path: '/workbench/signing', label: '签署工作台', icon: 'file-pen-line' },
|
||||
{ path: '/management/documents', label: '文档库管理', icon: 'clipboard-check' },
|
||||
{ path: '/management/reports', label: '报表分析', icon: 'activity' },
|
||||
{ path: '/workbench/home', label: '首页' },
|
||||
{ path: '/workbench/signing', label: '签署工作台' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '管理',
|
||||
ariaLabel: '管理导航',
|
||||
items: [
|
||||
{
|
||||
path: '/management/users',
|
||||
label: '用户与权限',
|
||||
icon: 'users-round',
|
||||
permission: 'system:user:query',
|
||||
},
|
||||
{ path: '/management/documents', label: '文档库管理' },
|
||||
{ path: '/management/reports', label: '报表分析' },
|
||||
{ path: '/management/users', label: '用户与权限', permission: 'system:user:query' },
|
||||
{
|
||||
path: '/management/document-permissions',
|
||||
label: '文档权限',
|
||||
icon: 'lock-keyhole',
|
||||
permission: 'sign:template:permission:query',
|
||||
},
|
||||
{ path: '/management/settings', label: '系统设置', icon: 'settings' },
|
||||
{ path: '/management/settings', label: '系统设置' },
|
||||
],
|
||||
},
|
||||
]
|
||||
@@ -66,28 +53,7 @@ const visibleMenuGroups = computed(() =>
|
||||
.filter((group) => group.items.length),
|
||||
)
|
||||
|
||||
const avatarText = computed(() => loginStore.userName.slice(0, 1))
|
||||
const userMenuOpen = ref(false)
|
||||
|
||||
function toggleUserMenu() {
|
||||
userMenuOpen.value = !userMenuOpen.value
|
||||
}
|
||||
|
||||
function closeUserMenu() {
|
||||
userMenuOpen.value = false
|
||||
}
|
||||
|
||||
function handleDocumentClick(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement | null
|
||||
|
||||
if (target && !target.closest('.menu-user')) {
|
||||
closeUserMenu()
|
||||
}
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
closeUserMenu()
|
||||
|
||||
try {
|
||||
await loginStore.logout()
|
||||
} catch {
|
||||
@@ -96,70 +62,57 @@ async function handleLogout() {
|
||||
await router.push('/login')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleDocumentClick)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', handleDocumentClick)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="clinical-menu">
|
||||
<div class="brand-lockup">
|
||||
<span class="brand-mark">
|
||||
<AppIcon name="stethoscope" class="brand-mark-icon" />
|
||||
</span>
|
||||
<div class="brand-copy">
|
||||
<div class="menu-brand">
|
||||
<div class="menu-brand-icon" aria-hidden="true">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M14 3v5h5M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z"
|
||||
stroke="#fff"
|
||||
stroke-width="1.7"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="m9 13.5 2.5 2.5 4-4.5"
|
||||
stroke="#fff"
|
||||
stroke-width="1.7"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="menu-brand-copy">
|
||||
<strong>医签通</strong>
|
||||
<small>MEDISIGN V2.0</small>
|
||||
<span>MEDISIGN</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-scroll">
|
||||
<nav class="menu-nav" aria-label="主导航">
|
||||
<div v-for="group in visibleMenuGroups" :key="group.label" class="menu-group">
|
||||
<p class="nav-caption">{{ group.label }}</p>
|
||||
<nav class="menu-nav" :aria-label="group.ariaLabel">
|
||||
<RouterLink
|
||||
v-for="item in group.items"
|
||||
:key="item.path"
|
||||
:to="item.path"
|
||||
class="nav-item"
|
||||
active-class="is-active"
|
||||
>
|
||||
<AppIcon :name="item.icon" class="nav-icon" />
|
||||
<span class="nav-label">{{ item.label }}</span>
|
||||
</RouterLink>
|
||||
</nav>
|
||||
<div class="menu-group-title">{{ group.label }}</div>
|
||||
<RouterLink
|
||||
v-for="item in group.items"
|
||||
:key="item.path"
|
||||
:to="item.path"
|
||||
class="menu-item"
|
||||
active-class="is-active"
|
||||
>
|
||||
<span class="menu-dot" aria-hidden="true" />
|
||||
<span>{{ item.label }}</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="connection">
|
||||
<i aria-hidden="true" />
|
||||
<span>{{ appStore.environment }}</span>
|
||||
</div>
|
||||
|
||||
<div class="menu-user">
|
||||
<button
|
||||
class="user-card"
|
||||
type="button"
|
||||
:aria-expanded="userMenuOpen"
|
||||
aria-haspopup="menu"
|
||||
@click="toggleUserMenu"
|
||||
>
|
||||
<span class="user-avatar">{{ avatarText }}</span>
|
||||
<div class="user-copy">
|
||||
<strong>{{ loginStore.userName }}</strong>
|
||||
<small>{{ loginStore.department }}</small>
|
||||
</div>
|
||||
<AppIcon name="ellipsis" class="user-more" />
|
||||
</button>
|
||||
|
||||
<div v-if="userMenuOpen" class="user-pop" role="menu">
|
||||
<button type="button" role="menuitem" @click="handleLogout">退出登录</button>
|
||||
<div class="menu-profile">
|
||||
<div class="menu-profile-avatar">{{ loginStore.userName.slice(0, 1) }}</div>
|
||||
<div class="menu-profile-copy">
|
||||
<strong>{{ loginStore.userName }}</strong>
|
||||
<span>{{ loginStore.department }}</span>
|
||||
</div>
|
||||
<button class="menu-logout" type="button" @click="handleLogout">退出</button>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
@@ -170,237 +123,152 @@ onBeforeUnmount(() => {
|
||||
flex: 0 0 var(--sidebar-width);
|
||||
flex-direction: column;
|
||||
width: var(--sidebar-width);
|
||||
padding: 21px 13px 14px;
|
||||
color: #d8edf3;
|
||||
background: linear-gradient(#0b455a 0%, #072e3e 100%);
|
||||
box-shadow: 8px 0 32px rgb(5 37 49 / 7%);
|
||||
color: #c8dde6;
|
||||
background: var(--side);
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
.menu-brand {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: 11px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 0 8px 20px;
|
||||
border-bottom: 1px solid rgb(255 255 255 / 9%);
|
||||
padding: 18px 16px 16px;
|
||||
border-bottom: 1px solid rgb(255 255 255 / 8%);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
.menu-brand-icon {
|
||||
display: grid;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
background: linear-gradient(145deg, #0f7590, #18a6a6);
|
||||
border: 1px solid rgb(255 255 255 / 20%);
|
||||
border-radius: 11px;
|
||||
box-shadow: 0 8px 20px rgb(0 21 31 / 33%);
|
||||
border-radius: 9px;
|
||||
background: linear-gradient(135deg, #18a0c0, var(--brand));
|
||||
}
|
||||
|
||||
.brand-mark-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand-copy strong {
|
||||
.menu-brand-copy strong,
|
||||
.menu-brand-copy span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-brand-copy strong {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.brand-copy small {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
color: #8fb7c4;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.menu-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-caption {
|
||||
margin: 0;
|
||||
padding: 17px 12px 6px;
|
||||
color: #759ba8;
|
||||
.menu-brand-copy span {
|
||||
color: #8fb3c2;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.menu-nav {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
padding: 12px 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
.menu-group-title {
|
||||
padding: 10px 10px 6px;
|
||||
color: #7ba2b3;
|
||||
font-size: 11px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
gap: 11px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
height: 42px;
|
||||
padding: 0 12px;
|
||||
color: #bcd3db;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
margin-bottom: 2px;
|
||||
padding: 10px 12px;
|
||||
color: #c8dde6;
|
||||
font-size: 13.5px;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
transition: all 0.22s;
|
||||
border-radius: 8px;
|
||||
transition:
|
||||
color 0.15s ease,
|
||||
background 0.15s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
.menu-item:hover {
|
||||
color: #fff;
|
||||
background: rgb(255 255 255 / 5%);
|
||||
transform: translateX(2px);
|
||||
background: rgb(255 255 255 / 7%);
|
||||
}
|
||||
|
||||
.nav-item.is-active {
|
||||
.menu-item.is-active {
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #137f98, #0f6a82);
|
||||
box-shadow: 0 8px 20px rgb(0 20 30 / 25%);
|
||||
font-weight: 700;
|
||||
background: var(--brand);
|
||||
}
|
||||
|
||||
.nav-item.is-active::before {
|
||||
position: absolute;
|
||||
left: -13px;
|
||||
width: 3px;
|
||||
height: 22px;
|
||||
background: #65d9d0;
|
||||
border-radius: 0 3px 3px 0;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.connection {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
margin: auto 0 12px 8px;
|
||||
color: #79a8b5;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.connection i {
|
||||
.menu-dot {
|
||||
flex-shrink: 0;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #45d4a5;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 4px rgb(69 212 165 / 11%);
|
||||
}
|
||||
|
||||
.connection span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.menu-item.is-active .menu-dot {
|
||||
background: #5ee0a8;
|
||||
}
|
||||
|
||||
.menu-user {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
.menu-profile {
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
flex-shrink: 0;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 10px 9px;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
background: rgb(255 255 255 / 3%);
|
||||
border: 1px solid rgb(255 255 255 / 7%);
|
||||
border-radius: 11px;
|
||||
transition: all 0.2s;
|
||||
padding: 14px 16px;
|
||||
border-top: 1px solid rgb(255 255 255 / 8%);
|
||||
}
|
||||
|
||||
.user-card:hover {
|
||||
background: rgb(255 255 255 / 6%);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
.menu-profile-avatar {
|
||||
display: grid;
|
||||
flex-shrink: 0;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
place-items: center;
|
||||
background: #18a5a6;
|
||||
border-radius: 50%;
|
||||
background: #18a0c0;
|
||||
}
|
||||
|
||||
.user-copy {
|
||||
.menu-profile-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-copy strong {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.user-copy small {
|
||||
.menu-profile-copy strong,
|
||||
.menu-profile-copy span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin-top: 2px;
|
||||
color: #8fb7c4;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.1em;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-more {
|
||||
.menu-profile-copy strong {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.menu-profile-copy span {
|
||||
margin-top: 2px;
|
||||
color: #8fb3c2;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.menu-logout {
|
||||
flex-shrink: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: auto;
|
||||
color: #78a0ac;
|
||||
}
|
||||
|
||||
.user-pop {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: calc(100% + 8px);
|
||||
left: 0;
|
||||
padding: 6px;
|
||||
background: #fff;
|
||||
border-radius: 11px;
|
||||
box-shadow: 0 18px 45px rgb(3 25 34 / 45%);
|
||||
}
|
||||
|
||||
.user-pop button {
|
||||
width: 100%;
|
||||
padding: 9px 10px;
|
||||
color: #25505f;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
color: #8fb3c2;
|
||||
font-size: 11px;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.user-pop button:hover {
|
||||
background: #eef6f8;
|
||||
.menu-logout:hover {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -36,7 +36,7 @@ const router = createRouter({
|
||||
path: 'home',
|
||||
name: 'workbench-home',
|
||||
component: DashboardView,
|
||||
meta: { title: '首页总览', group: '工作台' },
|
||||
meta: { title: '首页', group: '工作台' },
|
||||
},
|
||||
{
|
||||
path: 'signing',
|
||||
|
||||
@@ -26,6 +26,6 @@
|
||||
--font-sans:
|
||||
'Microsoft YaHei', 'PingFang SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
sans-serif;
|
||||
--sidebar-width: 220px;
|
||||
--header-height: 72px;
|
||||
--sidebar-width: 200px;
|
||||
--header-height: 54px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user