截图模块初始化

src/modules/clipboard/ClipboardModule.vue

@@ -3,12 +3,12 @@ import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import {
   ClipboardList, Copy, Pin, PinOff, Trash2, Search, Image as ImageIcon,
   FileText, Files, Settings as SettingsIcon, Loader2, Eraser, Check, Keyboard,
-  ChevronLeft, ChevronRight,
 } from '@lucide/vue'
 import { toast } from 'vue-sonner'
-import { useClipboardStore, type ClipboardItem, type ClipboardKind } from '@/stores/clipboardStore'
+import { useClipboardStore, type ClipboardItem, type ClipboardKind, type ClipboardItemDetail } from '@/stores/clipboardStore'
 import { useModuleTabs } from '@/lib/useModuleTabs'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import { Card, CardContent } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -22,6 +22,9 @@ import {
   AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription,
   AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
+import {
+  Pagination, PaginationContent, PaginationItem, PaginationEllipsis,
+} from '@/components/ui/pagination'
 
 const store = useClipboardStore()
 
@@ -66,7 +69,7 @@ const gotoPage = async (p: number) => {
 // 详情弹窗
 const detailOpen = ref(false)
 const detailLoading = ref(false)
-const detail = ref<ReturnType<typeof Object> & { content?: string | null; imageBase64?: string | null; kind?: string } | null>(null)
+const detail = ref<ClipboardItemDetail | null>(null)
 const openDetail = async (item: ClipboardItem) => {
   detailOpen.value = true
   detailLoading.value = true
@@ -76,6 +79,15 @@ const openDetail = async (item: ClipboardItem) => {
   detailLoading.value = false
 }
 
+/** 根据 base64 前缀判断图片 MIME 类型（dib_to_png 可能直接透传 PNG/JPEG） */
+const imageSrc = computed(() => {
+  const b64 = detail.value?.imageBase64
+  if (!b64) return ''
+  // PNG base64 以 iVBORw0KGgo 开头，JPEG 以 /9j/ 开头
+  const mime = b64.startsWith('/9j/') ? 'image/jpeg' : 'image/png'
+  return `data:${mime};base64,${b64}`
+})
+
 // 清空确认
 const clearOpen = ref(false)
 
@@ -226,7 +238,6 @@ onUnmounted(() => {
           </div>
           <div class="flex-1" />
           <Badge variant="secondary">
-            <Loader2 v-if="store.status.running" class="h-3 w-3 mr-1 animate-spin" />
             {{ store.historyTotal }} 条
           </Badge>
           <Button variant="outline" size="sm" @click="clearOpen = true" :disabled="!historyList.length">
@@ -234,10 +245,40 @@ onUnmounted(() => {
           </Button>
         </div>
 
-        <div class="flex-1 min-h-0 overflow-y-auto space-y-1.5 pr-1">
+        <!-- 分页（置于列表上方，靠左显示） -->
+        <div v-if="totalPages > 1" class="flex items-center justify-start pb-2 shrink-0">
+          <Pagination
+            v-slot="{ page }"
+            :page="currentPage"
+            :total="store.historyTotal"
+            :items-per-page="PAGE_SIZE"
+            :sibling-count="1"
+            show-edges
+            @update:page="gotoPage"
+            class="justify-start"
+          >
+            <PaginationContent v-slot="{ items }" class="gap-1">
+              <template v-for="(item, index) in items" :key="index">
+                <PaginationItem
+                  v-if="item.type === 'page'"
+                  :value="item.value"
+                  :is-active="item.value === page"
+                  size="icon"
+                  class="size-7 text-xs"
+                >
+                  {{ item.value }}
+                </PaginationItem>
+                <PaginationEllipsis v-else class="size-7" />
+              </template>
+            </PaginationContent>
+          </Pagination>
+        </div>
+        
+        <ScrollArea class="flex-1 min-h-0">
+          <div class="space-y-1.5 pr-2">
           <div
             v-if="!historyList.length"
-            class="flex flex-col items-center justify-center h-full text-muted-foreground"
+            class="flex flex-col items-center justify-center text-muted-foreground py-12"
           >
             <ClipboardList class="h-12 w-12 mb-3 opacity-40" />
             <p class="text-sm">暂无历史记录，复制内容后将自动收录</p>
@@ -270,18 +311,8 @@ onUnmounted(() => {
               </div>
             </CardContent>
           </Card>
-        </div>
-
-        <!-- 分页 -->
-        <div v-if="totalPages > 1" class="flex items-center justify-center gap-2 pt-3 shrink-0">
-          <Button variant="outline" size="icon" class="h-7 w-7" :disabled="currentPage <= 1" @click="gotoPage(currentPage - 1)">
-            <ChevronLeft class="h-4 w-4" />
-          </Button>
-          <span class="text-xs text-muted-foreground tabular-nums">{{ currentPage }} / {{ totalPages }}</span>
-          <Button variant="outline" size="icon" class="h-7 w-7" :disabled="currentPage >= totalPages" @click="gotoPage(currentPage + 1)">
-            <ChevronRight class="h-4 w-4" />
-          </Button>
-        </div>
+          </div>
+        </ScrollArea>
       </TabsContent>
 
       <!-- 固定 -->
@@ -428,11 +459,14 @@ onUnmounted(() => {
           </div>
           <template v-else-if="detail">
             <img
-              v-if="detail.kind === 'image' && detail.imageBase64"
-              :src="`data:image/png;base64,${detail.imageBase64}`"
+              v-if="detail.kind === 'image' && imageSrc"
+              :src="imageSrc"
               class="max-w-full max-h-[60vh] mx-auto rounded"
               alt="剪贴板图片"
             />
+            <p v-else-if="detail.kind === 'image'" class="text-sm text-muted-foreground text-center py-8">
+              图片预览不可用
+            </p>
             <pre v-else-if="detail.kind === 'text'" class="text-sm whitespace-pre-wrap break-all font-mono bg-muted/50 p-3 rounded">{{ detail.content }}</pre>
             <ul v-else-if="detail.kind === 'files'" class="space-y-1 text-sm">
               <li