6ef0b1121c
- 集成 Element Plus（on-demand resolver + 中文 locale + 暗黑 css-vars） - 布局壳组件（ty-header/ty-mixbar/ty-sidebar/ty-tabs/ty-breadcrumb/ty-footer/ty-setting/ty-setting-panel），中划线 + ty 前缀 + 自动导入，props/emits 解耦 - 5 种布局/导航模式 + 主题色(#2E7FA3) + 暗黑 + 侧栏折叠/宽度 + 固定顶栏/底栏 + 面包屑/多页签/全屏/手风琴 - 默认值集中配置 src/config/layout.ts；菜单字段对齐后端 resource（src/types/resource.ts + src/config/menu.ts） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<template>
|
|
<aside class="ty-mixbar">
|
|
<div
|
|
v-for="item in menus"
|
|
:key="item.code"
|
|
class="ty-mixbar__item"
|
|
:class="{ 'is-active': item.code === activeCode }"
|
|
:title="item.name"
|
|
@click="emit('select', item.code)"
|
|
>
|
|
<icon type="iconify" :icon="item.icon ?? 'mdi:menu'" />
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ResourceNode } from '@/types/resource'
|
|
|
|
defineOptions({ name: 'TyMixbar' })
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
/** 一级菜单（用于展示图标）。 */
|
|
menus: ResourceNode[]
|
|
/** 当前激活的一级 code。 */
|
|
activeCode?: string
|
|
}>(),
|
|
{
|
|
activeCode: '',
|
|
},
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'select', code: string): void
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.ty-mixbar {
|
|
position: sticky;
|
|
top: var(--ty-sidebar-top, 0);
|
|
align-self: flex-start;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 64px;
|
|
flex-shrink: 0;
|
|
height: var(--ty-sidebar-height, 100vh);
|
|
padding-top: 8px;
|
|
background: var(--wm-bg-color-base);
|
|
border-right: 1px solid var(--wm-border-color-light);
|
|
|
|
&__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 4px;
|
|
border-radius: var(--wm-border-radius-base);
|
|
font-size: 22px;
|
|
color: var(--wm-color-text-regular);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: var(--wm-bg-color-page);
|
|
}
|
|
|
|
&.is-active {
|
|
color: var(--el-color-primary);
|
|
background: var(--el-color-primary-light-9);
|
|
}
|
|
}
|
|
}
|
|
</style>
|