91 lines
2.4 KiB
Vue
91 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { RouterLink } from 'vue-router'
|
|
|
|
import { useAppStore } from '@/stores/app'
|
|
|
|
interface MenuItem {
|
|
path: string
|
|
label: string
|
|
}
|
|
|
|
interface MenuGroup {
|
|
label: string
|
|
items: MenuItem[]
|
|
}
|
|
|
|
const appStore = useAppStore()
|
|
|
|
const menuGroups: MenuGroup[] = [
|
|
{
|
|
label: '工作台',
|
|
items: [
|
|
{ path: '/workbench/home', label: '首页' },
|
|
{ path: '/workbench/signing', label: '签署工作台' },
|
|
],
|
|
},
|
|
{
|
|
label: '管理',
|
|
items: [
|
|
{ path: '/management/documents', label: '文档库管理' },
|
|
{ path: '/management/reports', label: '报表分析' },
|
|
{ path: '/management/users', label: '用户与权限' },
|
|
{ path: '/management/document-permissions', label: '文档权限' },
|
|
{ path: '/management/settings', label: '系统设置' },
|
|
],
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="clinical-menu">
|
|
<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>
|
|
<span>MEDISIGN</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="menu-nav" aria-label="主导航">
|
|
<div v-for="group in menuGroups" :key="group.label" class="menu-group">
|
|
<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>
|
|
</nav>
|
|
|
|
<div class="menu-profile">
|
|
<div class="menu-profile-avatar">{{ appStore.userName.slice(0, 1) }}</div>
|
|
<div class="menu-profile-copy">
|
|
<strong>{{ appStore.userName }}</strong>
|
|
<span>{{ appStore.department }}</span>
|
|
</div>
|
|
<button class="menu-logout" type="button">退出</button>
|
|
</div>
|
|
</aside>
|
|
</template>
|