examples/vue-ts-example-2025
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases Wiki Activity

feat(layout): 添加语言切换功能并优化模板结构
Some checks failed
CI/CD Pipeline / playwright (push) Successful in 2m42s
Details
CI/CD Pipeline / build-and-deploy (push) Successful in 2m56s
Details
测试最新依赖 / build-and-test (push) Failing after 1m38s
Details
测试最新依赖 / playwright (push) Successful in 2m31s
Details

Browse Source
This commit is contained in:
严浩
2025-10-23 23:56:58 +08:00
parent c9b75f55cc
commit d816110b4b
1 changed files with 48 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/layouts/base-layout/base-layout-header.vue
View File

@@ -14,37 +14,58 @@ const themeLabels: Record<AppThemeMode, string> = {
dark: '深色', dark: '深色',
system: '跟随系统', system: '跟随系统',
}; };
const { locale } = useI18n();
const languageLabels: Record<string, string> = {
'en-US': 'English',
'zh-CN': '简体中文',
};
function toggleLanguage() {
locale.value = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN';
}
</script> </script>
<template> <template>
<div class="h-full flex items-center justify-between px-12px shadow-header dark:shadow-gray-700"> <div class="h-full flex items-center justify-between px-12px shadow-header dark:shadow-gray-700">
<NTooltip :disabled="appStore.isMobile" placement="bottom-start"> <div>
{{ appStore.sidebarCollapsed ? '展开菜单' : '收起菜单' }} <NTooltip :disabled="appStore.isMobile" placement="bottom-start">
<template #trigger> {{ appStore.sidebarCollapsed ? '展开菜单' : '收起菜单' }}
<NButton ref="buttonRef" quaternary @click="toggleCollapsed"> <template #trigger>
<icon-line-md:menu-fold-right v-if="appStore.sidebarCollapsed" w-4.5 h-4.5 /> <NButton ref="buttonRef" quaternary @click="toggleCollapsed">
<icon-line-md:menu-fold-left v-else w-4.5 h-4.5 /> <icon-line-md:menu-fold-right v-if="appStore.sidebarCollapsed" w-4.5 h-4.5 />
</NButton> <icon-line-md:menu-fold-left v-else w-4.5 h-4.5 />
</template> </NButton>
</NTooltip> </template>
</NTooltip>
</div>
<NTooltip :disabled="appStore.isMobile" placement="bottom-end"> <div class="flex items-center">
{{ themeLabels[appStore.themeMode] }} <NTooltip :disabled="appStore.isMobile" placement="bottom-end">
<template #trigger> {{ languageLabels[locale] }}
<NButton quaternary @click="appStore.cycleTheme"> <template #trigger>
<icon-line-md:sunny-filled-loop-to-moon-filled-loop-transition <NButton quaternary @click="toggleLanguage">
v-if="appStore.themeMode === 'light'" <icon-clarity:language-line w-4.5 h-4.5 />
w-4.5 </NButton>
h-4.5 </template>
/> </NTooltip>
<icon-line-md:moon-filled-to-sunny-filled-loop-transition <NTooltip :disabled="appStore.isMobile" placement="bottom-end">
v-else-if="appStore.themeMode === 'dark'" {{ themeLabels[appStore.themeMode] }}
w-4.5 <template #trigger>
h-4.5 <NButton quaternary @click="appStore.cycleTheme">
/> <icon-line-md:sunny-filled-loop-to-moon-filled-loop-transition
<icon-line-md:computer v-else w-4.5 h-4.5 /> v-if="appStore.themeMode === 'light'"
</NButton> w-4.5
</template> h-4.5
</NTooltip> />
<icon-line-md:moon-filled-to-sunny-filled-loop-transition
v-else-if="appStore.themeMode === 'dark'"
w-4.5
h-4.5
/>
<icon-line-md:computer v-else w-4.5 h-4.5 />
</NButton>
</template>
</NTooltip>
</div>
</div> </div>
</template> </template>