┌─────────────────────────┐
│      TitleLogo          │  ← 品牌 Logo + 标题 (顶部)
├─────────────────────────┤
│                         │
│   Nav (导航区域)        │  ← 主导航菜单 (上部分)
│   - 首页                │
│   - 其他导航项          │
│                         │
├─────────────────────────┤
│                         │
│   Menu (功能菜单)       │  ← 功能菜单 (下部分)
│   - 对话历史            │
│   - 绘画历史            │
│   - 客服中心            │
│                         │
├─────────────────────────┤
│    ChangeTheme          │  ← 切换风格按钮 (底部)
└─────────────────────────┘

sidebar/index.vue (主容器)
├── title-logo.vue      (品牌 Logo)
├── nav.vue             (主导航)
│   └── nav-item (NuxtLink)
├── menu.vue            (功能菜单)
│   └── menu-item.vue   (菜单项)
│       └── Server.vue  (客服组件)
└── change-theme.vue    (切换主题)

<template>
    <div
        :class="['layout-sidebar', settingStore.sideTheme]"
        :style="styleVars"
    >
        <div class="h-full flex flex-col">
            <TitleLogo />
            <ElScrollbar>
                <div class="flex-1 h-full flex justify-between flex-col">
                    <Nav class="mb-auto" />
                    <Menu />
                </div>
            </ElScrollbar>
            <ChangeTheme />
        </div>
    </div>
</template>

<script setup>
const styleVars = computed(() => {
    if (settingStore.sideTheme == 'light') {
        return {
            '--aside-bg-color': '#fff',
            '--aside-color': '#333'
        }
    } else {
        return {
            '--aside-bg-color': '#0D0F10',
            '--aside-color': '#fff',
            '--el-border-color-extra-light': '#2B2D31'
        }
    }
})
</script>

<style scoped>
.layout-sidebar {
    width: var(--sidebar-width);
    height: 100%;
    border-radius: 0 16px 16px 0;
    color: var(--aside-color);
    background-color: var(--aside-bg-color);
}
</style>

<template>
    <div class="nav">
        <div class="px-[10px]">
            <NuxtLink
                v-for="(item, index) in nav"
                :to="getLink(item)"
                class="nav-item"
                :class="{ active: currentIndex === index }"
                @click="currentIndex = index"
            >
                <img :src="currentIndex === index ? item.selected : item.unselected" />
                <div class="ml-[10px] line-clamp-1">{{ item.name }}</div>
            </NuxtLink>
        </div>
    </div>
</template>

<template>
    <NuxtLink :to="getLink" :target="typeof getLink == 'string' ? '_blank' : '_self'">
        <div
            class="menu-item"
            :class="{ 'menu-item--active': isActive }"
        >
            <Icon v-if="icon" :name="icon" :size="16" />
            <img v-else :src="isActive ? selected : unselected" />
            <span class="ml-[6px] line-clamp-1">{{ name }}</span>
        </div>
    </NuxtLink>
</template>

pc/layouts/components/aside/
├── index.vue           # 侧边栏主容器
└── sidebar/
    ├── index.vue       # Sidebar 主组件
    ├── title-logo.vue  # 品牌 Logo
    ├── nav.vue         # 主导航
    ├── menu.vue        # 功能菜单
    ├── menu-item.vue   # 菜单项
    ├── change-theme.vue # 切换主题
    ├── server.vue      # 客服组件
    └── version.vue     # 版本信息