c96151d2ae
- ty-search-form 折叠默认数 2 → 3 - login/register/forgot/home/ty-header/ty-sidebar/ty-mixbar/ty-tabs/ty-footer/ty-setting-panel/icon/default 布局裸 CSS 转 @apply - 修复背景色工具类误写（bg-base→bg-bg-base、bg-page→bg-bg-page） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
59 lines
1.3 KiB
Vue
59 lines
1.3 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 {
|
|
@apply sticky self-start flex flex-col items-center w-16 shrink-0 bg-bg-base border-r border-solid pt-2;
|
|
top: var(--ty-sidebar-top, 0);
|
|
height: var(--ty-sidebar-height, 100vh);
|
|
border-color: var(--wm-border-color-light);
|
|
|
|
&__item {
|
|
@apply flex items-center justify-center w-12 h-12 mb-1 rounded-base cursor-pointer text-[22px] text-text-regular;
|
|
|
|
&:hover {
|
|
@apply bg-bg-page;
|
|
}
|
|
|
|
&.is-active {
|
|
color: var(--el-color-primary);
|
|
background: var(--el-color-primary-light-9);
|
|
}
|
|
}
|
|
}
|
|
</style>
|