Files
vue-ts-example-2025/src/layouts/base-layout/base-layout-header/components/ThemeSwitchButton.vue
严浩 86920da611
All checks were successful
CI/CD Pipeline / playwright (push) Successful in 2m17s
CI/CD Pipeline / build-and-deploy (push) Successful in 1m50s
refactor: update component names to PascalCase and improve structure
- Changed component names from kebab-case to PascalCase in various files for consistency.
- Updated `<router-view>` and `<transition>` to `<RouterView>` and `<Transition>` respectively in App.vue and base-layout.vue.
- Refactored AppNaiveUIProvider.vue to use PascalCase for Naive UI providers.
- Adjusted language and theme switch buttons to use PascalCase for icon components.
- Updated button components in demo pages to use PascalCase for Naive UI buttons.
- Modified ESLint rules in route message files to use perfectionist/sort-objects for better key sorting.
- Enhanced Vite plugin files to export loadPlugin functions for better plugin management.
- Improved plugin loading logic to handle errors and warnings more effectively.
2025-12-10 22:52:23 +08:00

31 lines
799 B
Vue

<script setup lang="ts">
const appStore = useAppStore();
const themeLabels: Record<AppThemeMode, string> = {
light: '浅色',
dark: '深色',
auto: '跟随系统',
};
</script>
<template>
<NTooltip :disabled="appStore.isMobile" placement="bottom-end">
{{ themeLabels[appStore.themeMode] }}
<template #trigger>
<NButton quaternary @click="appStore.cycleTheme()">
<IconLineMdSunnyFilledLoopToMoonFilledLoopTransition
v-if="appStore.themeMode === 'light'"
w-4.5
h-4.5
/>
<IconLineMdMoonFilledToSunnyFilledLoopTransition
v-else-if="appStore.themeMode === 'dark'"
w-4.5
h-4.5
/>
<IconLineMdComputer v-else w-4.5 h-4.5 />
</NButton>
</template>
</NTooltip>
</template>