AppConfigDrawer

路径：frontend/src/components/app/app-config-drawer/AppConfigDrawer.vue

导出：import { AppConfigDrawer } from '@/components/app'（见 components/app/index.ts）。

封装目标

在 NDrawer 中集中提供应用级偏好设置 UI，与 useAppSettingsStore（stores/app-settings.ts）双向同步，包括：

• 语言：NSelect，选项为 zh-CN、en-US、zh-TW、ja-JP、ko-KR，与 vue-i18n locale 一致。
• 主题：深色开关（themeDark），以及主题色预设 THEME_COLOR_PRESETS（点击色块设置 primaryPresetId）。
• 导航模式：sidebar / top / mixed（NavLayoutMode），由布局壳读取。
• 显示：灰度模式（grayscale）、侧栏 Logo（sidebarLogo）。

抽屉标题与区块文案使用 vue-i18n（如 t('config.drawerTitle')）。

Props 与事件

类型	名称	说明
Prop	show	是否显示抽屉
事件	update:show	同步显示状态（v-model:show）

内部用 showProxy 计算属性桥接 props.show 与 emit('update:show')。

使用方式

在布局或顶栏中：

<script setup lang="ts">
import { ref } from 'vue';
import { AppConfigDrawer } from '@/components/app';

const configOpen = ref(false);
</script>

<template>
  <NButton @click="configOpen = true">设置</NButton>
  <AppConfigDrawer v-model:show="configOpen" />
</template>

与全局主题的关系

Naive UI 的 NConfigProvider 应在应用根部根据 app-settings 注入 theme / theme-overrides（具体见 App.vue 与 store 中的 GlobalThemeOverrides）。本组件只负责修改 store，不负责应用级 Provider 的挂载。