style: 精简主题提示并优化分镜工具栏与分隔线

This commit is contained in:
GouJ
2026-09-02 10:03:10 +08:00
parent 4229426339
commit a125164103
10 changed files with 205 additions and 98 deletions
+10 -15
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, h, ref } from 'vue'
import { NButton, NDropdown, NTooltip } from 'naive-ui'
import { NButton, NDropdown } from 'naive-ui'
import { Monitor, Moon, Sun } from '@lucide/vue'
import type { ThemePreference } from '../../composables/useTheme'
@@ -23,19 +23,14 @@ function selectTheme(key: string | number) {
<template>
<NDropdown v-model:show="open" trigger="click" :value="preference" :options="options" @select="selectTheme">
<NTooltip :disabled="open">
<template #trigger>
<NButton
quaternary
class="theme-toggle icon-button"
:aria-label="`主题模式:${current.label}`"
aria-haspopup="menu"
:aria-expanded="open"
>
<template #icon><component :is="current.icon" :size="18" aria-hidden="true" /></template>
</NButton>
</template>
{{ current.label }} · 切换主题
</NTooltip>
<NButton
quaternary
class="theme-toggle icon-button"
:aria-label="`主题模式:${current.label}`"
aria-haspopup="menu"
:aria-expanded="open"
>
<template #icon><component :is="current.icon" :size="18" aria-hidden="true" /></template>
</NButton>
</NDropdown>
</template>