82 lines
1.9 KiB
Plaintext
82 lines
1.9 KiB
Plaintext
<template>
|
||
<view class="aside">
|
||
<view class="aside-header">
|
||
<view class="logo">
|
||
<text class="logo-text">{{ collapsed ? '商' : '商城后台' }}</text>
|
||
</view>
|
||
<view class="collapse-btn" @click="$emit('toggle')">
|
||
<text class="collapse-text">{{ collapsed ? '›' : '‹' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="aside-menu">
|
||
<view
|
||
v-for="m in menuList"
|
||
:key="m.id"
|
||
class="aside-item"
|
||
:class="{ active: activeMenuId === m.id }"
|
||
@click="$emit('menu-click', m.id)"
|
||
>
|
||
<image class="aside-icon" :src="m.icon" mode="aspectFit" />
|
||
<text class="aside-title" v-if="!collapsed">{{ m.title }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import type { MenuItem } from '../types.uts'
|
||
|
||
defineProps<{
|
||
collapsed: boolean
|
||
menuList: MenuItem[]
|
||
activeMenuId: string
|
||
}>()
|
||
|
||
defineEmits<{
|
||
(e:'toggle'): void
|
||
(e:'menu-click', menuId: string): void
|
||
}>()
|
||
</script>
|
||
|
||
<style>
|
||
.aside{
|
||
width: 96px;
|
||
background: #1f2a37;
|
||
height: 100vh;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display:flex;
|
||
flex-direction: column;
|
||
z-index: 1000;
|
||
}
|
||
.aside-header{
|
||
height: 56px;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content: space-between;
|
||
padding: 0 12px;
|
||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||
}
|
||
.logo-text{ color:#fff; font-size:14px; font-weight:600; }
|
||
.collapse-btn{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
|
||
.collapse-text{ color:rgba(255,255,255,0.7); }
|
||
|
||
.aside-menu{ padding: 8px 0; }
|
||
.aside-item{
|
||
height: 54px;
|
||
display:flex;
|
||
flex-direction: column;
|
||
align-items:center;
|
||
justify-content:center;
|
||
gap: 6px;
|
||
margin: 6px 10px;
|
||
border-radius: 8px;
|
||
}
|
||
.aside-item.active{ background:#1677ff; }
|
||
.aside-icon{ width:22px; height:22px; }
|
||
.aside-title{ color:#fff; font-size:12px; }
|
||
</style>
|