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

refactor(layout): 重构基础布局头部组件结构

Browse Source
This commit is contained in:
严浩
2025-10-25 22:46:11 +08:00
parent cc49ce2beb
commit a1160bc394
10 changed files with 141 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
AGENTS.md
View File

@@ -6,6 +6,10 @@ This file provides guidance to AI when working with code in this repository.
Vue 3 TypeScript application with Vite.
## 开发服务器
- **不要启动开发服务器**: 开发服务器通常已经由用户启动。除非特别要求，否则不要执行 `pnpm dev` 之类的命令。
### Routing & Layouts
- **File-based routing**: Uses `unplugin-vue-router` with `.page.vue` and `.page.md` extensions in `src/pages/`

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

@@ -1,71 +0,0 @@
<script setup lang="ts">
const buttonRef = useTemplateRef('buttonRef');
const appStore = useAppStore();
function toggleCollapsed() {
// https://github.com/tusen-ai/naive-ui/issues/3688
// hover style 鼠标移出就会消失 如果是点击 button 会聚焦需要失去焦点才会恢复
buttonRef.value?.$el.blur();
appStore.toggleSidebar();
}
const themeLabels: Record<AppThemeMode, string> = {
light: '浅色',
dark: '深色',
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>
<template>
<div class="h-full flex items-center justify-between px-12px shadow-header dark:shadow-gray-700">
<div>
<NTooltip :disabled="appStore.isMobile" placement="bottom-start">
{{ appStore.sidebarCollapsed ? '展开菜单' : '收起菜单' }}
<template #trigger>
<NButton ref="buttonRef" quaternary @click="toggleCollapsed">
<icon-line-md:menu-fold-right v-if="appStore.sidebarCollapsed" w-4.5 h-4.5 />
<icon-line-md:menu-fold-left v-else w-4.5 h-4.5 />
</NButton>
</template>
</NTooltip>
</div>
<div class="flex items-center">
<NTooltip :disabled="appStore.isMobile" placement="bottom-end">
{{ languageLabels[locale] }}
<template #trigger>
<NButton quaternary @click="toggleLanguage">
<icon-clarity:language-line w-4.5 h-4.5 />
</NButton>
</template>
</NTooltip>
<NTooltip :disabled="appStore.isMobile" placement="bottom-end">
{{ themeLabels[appStore.themeMode] }}
<template #trigger>
<NButton quaternary @click="appStore.cycleTheme">
<icon-line-md:sunny-filled-loop-to-moon-filled-loop-transition
v-if="appStore.themeMode === 'light'"
w-4.5
h-4.5
/>
<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>
</template>

16
src/layouts/base-layout/base-layout-header/base-layout-header.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup lang="ts">
import LanguageSwitchButton from './components/LanguageSwitchButton.vue';
import ThemeSwitchButton from './components/ThemeSwitchButton.vue';
import ToggleSiderButton from './components/ToggleSiderButton.vue';
</script>
<template>
<div class="h-full flex items-center justify-between px-12px shadow-header dark:shadow-gray-700">
<ToggleSiderButton />
<div class="flex items-center">
<LanguageSwitchButton />
<ThemeSwitchButton />
</div>
</div>
</template>

33
src/layouts/base-layout/base-layout-header/components/LanguageSwitchButton.vue Normal file
View File

@@ -0,0 +1,33 @@
<script setup lang="ts">
import type { DropdownOption } from 'naive-ui';
const { locale, availableLocales } = useI18n({ useScope: 'global' });
const languageLabels: Record<string, string> = {
'en-US': 'English',
'zh-CN': '简体中文',
};
const options = computed<DropdownOption[]>(() =>
availableLocales.map((lang) => ({
label: languageLabels[lang] || lang,
key: lang,
disabled: locale.value === lang,
})),
);
function handleSelect(key: string) {
locale.value = key;
}
</script>
<template>
<NDropdown trigger="hover" placement="bottom-end" :options="options" @select="handleSelect">
<NButton quaternary class="flex items-center gap-1">
<template #icon>
<icon-clarity:language-line w-4.5 h-4.5 />
</template>
<span>{{ languageLabels[locale] }}</span>
</NButton>
</NDropdown>
</template>

30
src/layouts/base-layout/base-layout-header/components/ThemeSwitchButton.vue Normal file
View File

@@ -0,0 +1,30 @@
<script setup lang="ts">
const appStore = useAppStore();
const themeLabels: Record<AppThemeMode, string> = {
light: '浅色',
dark: '深色',
system: '跟随系统',
};
</script>
<template>
<NTooltip :disabled="appStore.isMobile" placement="bottom-end">
{{ themeLabels[appStore.themeMode] }}
<template #trigger>
<NButton quaternary @click="appStore.cycleTheme">
<icon-line-md:sunny-filled-loop-to-moon-filled-loop-transition
v-if="appStore.themeMode === 'light'"
w-4.5
h-4.5
/>
<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>
</template>

23
src/layouts/base-layout/base-layout-header/components/ToggleSiderButton.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup lang="ts">
const buttonRef = useTemplateRef('buttonRef');
const appStore = useAppStore();
function toggleCollapsed() {
// https://github.com/tusen-ai/naive-ui/issues/3688
// hover style 鼠标移出就会消失 如果是点击 button 会聚焦需要失去焦点才会恢复
buttonRef.value?.$el.blur();
appStore.toggleSidebar();
}
</script>
<template>
<NTooltip :disabled="appStore.isMobile" placement="bottom-start">
{{ appStore.sidebarCollapsed ? '展开菜单' : '收起菜单' }}
<template #trigger>
<NButton ref="buttonRef" quaternary @click="toggleCollapsed">
<icon-line-md:menu-fold-right v-if="appStore.sidebarCollapsed" w-4.5 h-4.5 />
<icon-line-md:menu-fold-left v-else w-4.5 h-4.5 />
</NButton>
</template>
</NTooltip>
</template>

2
src/layouts/base-layout/base-layout.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { AdminLayout } from '@sa/materials';
import BaseLayoutHeader from './base-layout-header.vue';
import BaseLayoutHeader from './base-layout-header/base-layout-header.vue';
import BaseLayoutSider from './base-layout-sider.vue';
const appStore = useAppStore();

8
src/plugins/00.vueI18n-plugin.ts
View File

@@ -3,12 +3,12 @@
* at once using the import syntax
*/
import messages from '@intlify/unplugin-vue-i18n/messages';
import { createI18n } from 'vue-i18n';
export function install({ app }: { app: import('vue').App<Element> }) {
app.use(
// https://vue-i18n.intlify.dev/guide/essentials/started.html#registering-the-i18n-plugin
createI18n({
const i18n = createI18n({
legacy: false, // you must set `false`, to use Composition API
locale: navigator.language,
fallbackRoot: false,
@@ -20,6 +20,6 @@ export function install({ app }: { app: import('vue').App<Element> }) {
missingWarn: !true,
fallbackWarn: !true,
messages,
}),
);
});
app.use(i18n);
}

3
vite-plugins/02.unplugin-auto-import.ts
View File

@@ -112,6 +112,9 @@ export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
NaiveUiResolver(),
],
}),
// https://github.com/unplugin/unplugin-icons?tab=readme-ov-file
// https://icon-sets.iconify.design
Icons({
autoInstall: true,
customCollections: {

16
vite.config.ts
View File

@@ -121,8 +121,18 @@ export default defineConfig(async (configEnv) => {
// https://www.npmjs.com/package/utils4u/v/2.19.2?activeTab=code
manualChunks: (id: string, _meta: ManualChunkMeta) => {
if (!id.includes('node_modules')) return;
/* 有一个问题: dynamic import will not move module into another chunk.
if (['/src/layouts'].some((prefix) => id.includes(prefix))) {
return 'layouts';
}
*/
if (id.includes('index.page.vue')) {
const parentDir = path.basename(path.dirname(id));
return `${parentDir}-index.page`;
}
if (!id.includes('node_modules')) return;
// 处理 pnpm 的特殊路径结构
let packageName;
if (id.includes('.pnpm')) {
@@ -140,6 +150,10 @@ export default defineConfig(async (configEnv) => {
}
if (packageName) {
if (['highlight.js'].includes(packageName)) {
return 'lib-hljs';
}
// 根据包名分组
if (['consola', 'lodash', '@juggle+resize-observer'].includes(packageName)) {
return 'lib-vendor';