优化,贴图
This commit is contained in:
@@ -31,14 +31,14 @@ const displayModules = computed(() => {
|
||||
<Button
|
||||
:variant="activeModule === module.id ? 'default' : 'ghost'"
|
||||
size="icon"
|
||||
class="h-10 w-10 rounded-lg transition-[background-color,color,box-shadow] duration-300"
|
||||
class="size-10 rounded-lg transition-[background-color,color,box-shadow] duration-300"
|
||||
:class="{
|
||||
'bg-primary text-primary-foreground shadow-md': activeModule === module.id,
|
||||
'hover:bg-secondary/50': activeModule !== module.id
|
||||
}"
|
||||
@click="emit('change', module.id)"
|
||||
>
|
||||
<component :is="getModuleIcon(module.icon)" class="h-5 w-5" />
|
||||
<component :is="getModuleIcon(module.icon)" class="size-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" class="w-fit">
|
||||
@@ -55,14 +55,14 @@ const displayModules = computed(() => {
|
||||
<Button
|
||||
:variant="activeModule === 'settings' ? 'default' : 'ghost'"
|
||||
size="icon"
|
||||
class="h-10 w-10 rounded-lg transition-[background-color,color,box-shadow] duration-300"
|
||||
class="size-10 rounded-lg transition-[background-color,color,box-shadow] duration-300"
|
||||
:class="{
|
||||
'bg-primary text-primary-foreground shadow-md': activeModule === 'settings',
|
||||
'hover:bg-secondary/50': activeModule !== 'settings'
|
||||
}"
|
||||
@click="emit('change', 'settings')"
|
||||
>
|
||||
<Settings class="h-5 w-5" />
|
||||
<Settings class="size-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" class="w-fit">
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { Search, Settings, ChevronRight, ArrowUp, Check, Loader2 } from '@lucide/vue'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
|
||||
import { invoke } from '@tauri-apps/api/core'
|
||||
import { getCurrentWindow } from '@tauri-apps/api/window'
|
||||
import { useSearchStore, type SearchItem } from '@/stores/searchStore'
|
||||
@@ -257,37 +258,43 @@ const handleBlur = () => {
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition name="floating-tabs">
|
||||
<button
|
||||
v-if="showScrollTop"
|
||||
class="flex items-center justify-center h-6 w-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary/60 transition-colors"
|
||||
title="回到顶部"
|
||||
@click="scrollToTop"
|
||||
@mousedown.stop
|
||||
>
|
||||
<ArrowUp class="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<Tooltip v-if="showScrollTop">
|
||||
<TooltipTrigger as-child>
|
||||
<button
|
||||
class="flex items-center justify-center size-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary/60 transition-colors"
|
||||
@click="scrollToTop"
|
||||
@mousedown.stop
|
||||
>
|
||||
<ArrowUp class="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>回到顶部</TooltipContent>
|
||||
</Tooltip>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<div class="flex-1"></div>
|
||||
<!-- 保存设置按钮(当前模块在设置 tab 且注册了保存函数时显示,从右向左弹出) -->
|
||||
<Transition name="save-btn">
|
||||
<button
|
||||
v-if="tabsStore.saveVisible"
|
||||
class="flex items-center gap-1.5 h-7 px-3 mr-1 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-60 disabled:pointer-events-none transition-colors pointer-events-auto"
|
||||
:disabled="tabsStore.saving"
|
||||
title="保存当前模块设置"
|
||||
@click="tabsStore.runSave"
|
||||
@mousedown.stop
|
||||
>
|
||||
<Loader2 v-if="tabsStore.saving" class="size-3.5 animate-spin" />
|
||||
<Check v-else class="size-3.5" />
|
||||
保存设置
|
||||
</button>
|
||||
<Tooltip v-if="tabsStore.saveVisible">
|
||||
<TooltipTrigger as-child>
|
||||
<button
|
||||
class="flex items-center gap-1.5 h-7 px-3 mr-1 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-60 disabled:pointer-events-none transition-colors pointer-events-auto"
|
||||
:disabled="tabsStore.saving"
|
||||
@click="tabsStore.runSave"
|
||||
@mousedown.stop
|
||||
>
|
||||
<Loader2 v-if="tabsStore.saving" class="size-3.5 animate-spin" />
|
||||
<Check v-else class="size-3.5" />
|
||||
保存设置
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>保存当前模块设置</TooltipContent>
|
||||
</Tooltip>
|
||||
</Transition>
|
||||
<div class="relative max-w-xs mr-3 pointer-events-auto">
|
||||
<Search
|
||||
class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
|
||||
class="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-muted-foreground"
|
||||
/>
|
||||
<Input
|
||||
v-model="searchQuery"
|
||||
@@ -325,14 +332,14 @@ const handleBlur = () => {
|
||||
class="w-full px-3 py-2 text-left text-sm hover:bg-accent transition-colors flex items-center gap-2"
|
||||
@click="handleSettingSelect(item)"
|
||||
>
|
||||
<Settings class="h-4 w-4 text-muted-foreground" />
|
||||
<Settings class="size-4 text-muted-foreground" />
|
||||
<div class="flex-1 min-w-0">
|
||||
<span class="truncate">{{ item.title }}</span>
|
||||
<span v-if="item.description" class="block text-xs text-muted-foreground truncate">
|
||||
{{ item.description }}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronRight class="h-4 w-4 text-muted-foreground" />
|
||||
<ChevronRight class="size-4 text-muted-foreground" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
@@ -347,7 +354,7 @@ const handleBlur = () => {
|
||||
|
||||
<div class="flex items-center pointer-events-auto" :class="{ 'hover-suppressed': hoverSuppressed }">
|
||||
<button
|
||||
class="h-10 w-10 flex items-center justify-center hover:bg-foreground/5 transition-colors rounded-sm"
|
||||
class="size-10 flex items-center justify-center hover:bg-foreground/5 transition-colors rounded-sm"
|
||||
@click="minimize"
|
||||
@mousedown.stop
|
||||
>
|
||||
@@ -358,7 +365,7 @@ const handleBlur = () => {
|
||||
</button>
|
||||
<button
|
||||
id="titlebar-maximize"
|
||||
class="h-10 w-10 flex items-center justify-center transition-colors rounded-sm titlebar-maximize-btn"
|
||||
class="size-10 flex items-center justify-center transition-colors rounded-sm titlebar-maximize-btn"
|
||||
@click="maximize"
|
||||
@mousedown.stop
|
||||
>
|
||||
@@ -375,7 +382,7 @@ const handleBlur = () => {
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="h-10 w-10 flex items-center justify-center hover:bg-red-500 hover:text-white text-foreground transition-colors rounded-sm"
|
||||
class="size-10 flex items-center justify-center hover:bg-red-500 hover:text-white text-foreground transition-colors rounded-sm"
|
||||
@click="close"
|
||||
@mousedown.stop
|
||||
>
|
||||
|
||||
@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
data-slot="switch"
|
||||
v-bind="forwarded"
|
||||
:class="cn(
|
||||
'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer hover:data-[state=checked]:bg-primary/90 hover:data-[state=unchecked]:bg-input/70 active:scale-95',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
|
||||
@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
<TooltipContent
|
||||
data-slot="tooltip-content"
|
||||
v-bind="{ ...forwarded, ...$attrs }"
|
||||
:class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
|
||||
:class="cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit max-w-[calc(100vw-2rem)] rounded-md px-3 py-1.5 text-xs', props.class)"
|
||||
>
|
||||
<slot />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user