截图模块优化调整

src/components/layout/TitleBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
-import { Search, Settings, ChevronRight, ArrowUp } from '@lucide/vue'
+import { Search, Settings, ChevronRight, ArrowUp, Check, Loader2 } from '@lucide/vue'
 import { Input } from '@/components/ui/input'
 import { invoke } from '@tauri-apps/api/core'
 import { getCurrentWindow } from '@tauri-apps/api/window'
@@ -261,6 +261,21 @@ const handleBlur = () => {
       </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>
+      </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" 
@@ -388,4 +403,15 @@ const handleBlur = () => {
   opacity: 0;
   transform: translateX(-12px);
 }
+
+/* 保存设置按钮进出动画：淡入 + 从右侧滑入（从右向左弹出） */
+.save-btn-enter-active,
+.save-btn-leave-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+.save-btn-enter-from,
+.save-btn-leave-to {
+  opacity: 0;
+  transform: translateX(12px);
+}
 </style>

src/components/ui/slider/Slider.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    v-slot="{ modelValue }"
+    data-slot="slider"
+    :class="cn(
+      'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack
+      data-slot="slider-track"
+      class="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+    >
+      <SliderRange
+        data-slot="slider-range"
+        class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+      />
+    </SliderTrack>
+
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      data-slot="slider-thumb"
+      class="bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+    />
+  </SliderRoot>
+</template>

src/components/ui/slider/index.ts

@@ -0,0 +1 @@
+export { default as Slider } from "./Slider.vue"