style: 精简主题提示并优化分镜工具栏与分隔线
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user