优化,贴图

This commit is contained in:
zhongluofeng
2026-08-07 18:09:13 +08:00
parent e09b0567d6
commit d09599fa95
40 changed files with 1627 additions and 493 deletions
+4 -4
View File
@@ -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">
+34 -27
View File
@@ -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
>
+1 -1
View File
@@ -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,
)"
>
+1 -1
View File
@@ -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 />