feat: code refactor

src/components/common/BaseButton.vue

@@ -0,0 +1,83 @@
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    @click="$emit('click', $event)"
+    class="inline-flex items-center justify-center px-4 py-2 rounded-md font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+    :class="[
+      sizeClasses,
+      variantClasses,
+      loading ? 'cursor-wait' : '',
+      disabled ? 'pointer-events-none' : ''
+    ]"
+  >
+    <slot name="icon" v-if="$slots.icon && !loading"></slot>
+    <div v-if="loading" class="animate-spin rounded-full h-4 w-4 border-2 border-current border-t-transparent mr-2"></div>
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+
+interface Props {
+  variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'outline'
+  size?: 'sm' | 'md' | 'lg'
+  type?: 'button' | 'submit' | 'reset'
+  disabled?: boolean
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md',
+  type: 'button',
+  disabled: false,
+  loading: false
+})
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const isDarkMode = inject('isDarkMode')
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-4 py-2 text-sm',
+    lg: 'px-6 py-3 text-base'
+  }
+  return sizes[props.size]
+})
+
+const variantClasses = computed(() => {
+  const baseClasses = 'focus:ring-2 focus:ring-offset-2'
+  
+  if (props.variant === 'primary') {
+    return `${baseClasses} bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500`
+  }
+  
+  if (props.variant === 'secondary') {
+    return isDarkMode
+      ? `${baseClasses} bg-gray-700 text-gray-300 hover:bg-gray-600 focus:ring-gray-500 border border-gray-600`
+      : `${baseClasses} bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300`
+  }
+  
+  if (props.variant === 'danger') {
+    return `${baseClasses} bg-red-600 text-white hover:bg-red-700 focus:ring-red-500`
+  }
+  
+  if (props.variant === 'success') {
+    return `${baseClasses} bg-green-600 text-white hover:bg-green-700 focus:ring-green-500`
+  }
+  
+  if (props.variant === 'outline') {
+    return isDarkMode
+      ? `${baseClasses} border border-gray-600 text-gray-300 hover:bg-gray-700 focus:ring-gray-500`
+      : `${baseClasses} border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500`
+  }
+  
+  return ''
+})
+</script>

src/components/common/BaseModal.vue

@@ -0,0 +1,130 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal" appear>
+      <div
+        v-if="show"
+        class="fixed inset-0 z-50 overflow-y-auto"
+        @click="handleBackdropClick"
+      >
+        <!-- 背景遮罩 -->
+        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
+        
+        <!-- 模态框容器 -->
+        <div class="flex min-h-full items-center justify-center p-4">
+          <div
+            ref="modalRef"
+            class="relative transform overflow-hidden rounded-lg shadow-xl transition-all"
+            :class="[
+              sizeClasses,
+              isDarkMode ? 'bg-gray-800' : 'bg-white'
+            ]"
+            @click.stop
+          >
+            <!-- 头部 -->
+            <div
+              v-if="$slots.header || title"
+              class="flex items-center justify-between px-6 py-4 border-b"
+              :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
+            >
+              <slot name="header">
+                <h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
+                  {{ title }}
+                </h3>
+              </slot>
+              <button
+                v-if="closable"
+                @click="$emit('close')"
+                class="rounded-md p-2 transition-colors"
+                :class="[
+                  isDarkMode
+                    ? 'text-gray-400 hover:text-gray-300 hover:bg-gray-700'
+                    : 'text-gray-400 hover:text-gray-500 hover:bg-gray-100'
+                ]"
+              >
+                <X class="h-5 w-5" />
+              </button>
+            </div>
+            
+            <!-- 内容 -->
+            <div class="px-6 py-4">
+              <slot></slot>
+            </div>
+            
+            <!-- 底部 -->
+            <div
+              v-if="$slots.footer"
+              class="flex items-center justify-end space-x-3 px-6 py-4 border-t"
+              :class="[isDarkMode ? 'border-gray-700 bg-gray-900/50' : 'border-gray-200 bg-gray-50']"
+            >
+              <slot name="footer"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue'
+import { X } from 'lucide-vue-next'
+
+interface Props {
+  show: boolean
+  title?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  closable?: boolean
+  closeOnBackdrop?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  closable: true,
+  closeOnBackdrop: true
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const isDarkMode = inject('isDarkMode')
+const modalRef = ref<HTMLElement>()
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    sm: 'max-w-md w-full',
+    md: 'max-w-lg w-full',
+    lg: 'max-w-2xl w-full',
+    xl: 'max-w-4xl w-full'
+  }
+  return sizes[props.size]
+})
+
+const handleBackdropClick = (event: MouseEvent) => {
+  if (props.closeOnBackdrop && event.target === event.currentTarget) {
+    emit('close')
+  }
+}
+</script>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-enter-active .relative,
+.modal-leave-active .relative {
+  transition: all 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .relative,
+.modal-leave-to .relative {
+  transform: scale(0.95) translateY(-20px);
+}
+</style>

src/components/common/DataPagination.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="mt-4 flex items-center justify-between px-6 py-4 border-t"
+    :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
+    <div class="flex items-center text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+      显示第 {{ (currentPage - 1) * pageSize + 1 }} 到
+      {{ Math.min(currentPage * pageSize, total) }} 条，共 {{ total }} 条
+    </div>
+
+    <div class="flex items-center space-x-2">
+      <button @click="$emit('page-change', currentPage - 1)" :disabled="currentPage === 1"
+        class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
+          isDarkMode
+            ? currentPage === 1
+              ? 'bg-gray-800 text-gray-600 cursor-not-allowed'
+              : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+            : currentPage === 1
+              ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+        ]">
+        <ChevronLeftIcon class="w-4 h-4" />
+        上一页
+      </button>
+
+      <div class="flex items-center space-x-1">
+        <template v-for="pageNum in displayedPages" :key="pageNum">
+          <button v-if="pageNum !== '...'" @click="$emit('page-change', pageNum as number)"
+            class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
+              currentPage === pageNum
+                ? 'bg-indigo-600 text-white'
+                : isDarkMode
+                  ? 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            ]">
+            {{ pageNum }}
+          </button>
+          <span v-else class="px-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+            ...
+          </span>
+        </template>
+      </div>
+
+      <button @click="$emit('page-change', currentPage + 1)" :disabled="currentPage >= totalPages"
+        class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
+          isDarkMode
+            ? currentPage >= totalPages
+              ? 'bg-gray-800 text-gray-600 cursor-not-allowed'
+              : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+            : currentPage >= totalPages
+              ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+        ]">
+        下一页
+        <ChevronRightIcon class="w-4 h-4" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, computed } from 'vue'
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-vue-next'
+
+interface Props {
+  currentPage: number
+  pageSize: number
+  total: number
+}
+
+const props = defineProps<Props>()
+
+defineEmits<{
+  'page-change': [page: number]
+}>()
+
+const isDarkMode = inject('isDarkMode')
+
+// 计算总页数
+const totalPages = computed(() => Math.ceil(props.total / props.pageSize))
+
+// 计算要显示的页码
+const displayedPages = computed(() => {
+  const current = props.currentPage
+  const total = totalPages.value
+  const delta = 2 // 当前页码前后显示的页码数
+
+  const pages: (number | string)[] = []
+
+  // 始终显示第一页
+  pages.push(1)
+
+  // 计算显示范围
+  const left = Math.max(2, current - delta)
+  const right = Math.min(total - 1, current + delta)
+
+  // 添加省略号和页码
+  if (left > 2) {
+    pages.push('...')
+  }
+
+  for (let i = left; i <= right; i++) {
+    pages.push(i)
+  }
+
+  if (right < total - 1) {
+    pages.push('...')
+  }
+
+  // 始终显示最后一页
+  if (total > 1) {
+    pages.push(total)
+  }
+
+  return pages
+})
+</script>

src/components/common/DataTable.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="rounded-lg shadow-sm overflow-hidden transition-all duration-300"
+    :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
+    <div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
+      <h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+        {{ title }}
+      </h3>
+    </div>
+    <div class="overflow-x-auto">
+      <table class="min-w-full divide-y" :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']">
+        <thead :class="[isDarkMode ? 'bg-gray-900/50' : 'bg-gray-50']">
+          <tr>
+            <th v-for="header in headers" :key="header"
+              class="px-6 py-3.5 text-left text-xs font-medium uppercase tracking-wider"
+              :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+              {{ header }}
+            </th>
+          </tr>
+        </thead>
+        <tbody :class="[
+          isDarkMode
+            ? 'bg-gray-800/50 divide-y divide-gray-700'
+            : 'bg-white divide-y divide-gray-200'
+        ]">
+          <slot name="body"></slot>
+        </tbody>
+      </table>
+    </div>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+
+interface Props {
+  title: string
+  headers: string[]
+}
+
+defineProps<Props>()
+
+const isDarkMode = inject('isDarkMode')
+</script>

src/components/common/FormInput.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="space-y-2">
+    <label v-if="label" class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+      {{ label }}
+      <span v-if="required" class="text-red-500 ml-1">*</span>
+    </label>
+    <div class="relative">
+      <input
+        :type="type"
+        :value="modelValue"
+        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        :placeholder="placeholder"
+        :required="required"
+        :disabled="disabled"
+        :minlength="minlength"
+        :maxlength="maxlength"
+        class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
+        :class="[
+          isDarkMode
+            ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
+            : 'border-gray-300 hover:border-gray-400 placeholder-gray-500',
+          disabled ? 'opacity-50 cursor-not-allowed' : '',
+          error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''
+        ]"
+      />
+      <slot name="suffix"></slot>
+    </div>
+    <p v-if="error" class="text-sm text-red-500">{{ error }}</p>
+    <p v-if="hint" class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">{{ hint }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+
+interface Props {
+  modelValue: string
+  label?: string
+  type?: string
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  error?: string
+  hint?: string
+  minlength?: number
+  maxlength?: number
+}
+
+withDefaults(defineProps<Props>(), {
+  type: 'text',
+  required: false,
+  disabled: false
+})
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const isDarkMode = inject('isDarkMode')
+</script>

src/components/common/PageFooter.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="mb-6 text-center" v-if="linkText && linkTo">
+      <router-link
+        :to="linkTo"
+        class="text-indigo-400 hover:text-indigo-300 transition duration-300"
+      >
+        {{ linkText }}
+      </router-link>
+    </div>
+    
+    <div
+      class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
+      :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
+    >
+      <span
+        class="text-sm flex items-center"
+        :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
+      >
+        <ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
+        安全加密
+      </span>
+      <button
+        @click="$emit('toggle-drawer')"
+        class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
+        :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+      >
+        {{ drawerText }}
+        <ClipboardListIcon class="w-4 h-4 ml-1" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import { ShieldCheckIcon, ClipboardListIcon } from 'lucide-vue-next'
+
+interface Props {
+  linkText?: string
+  linkTo?: string
+  drawerText: string
+}
+
+interface Emits {
+  'toggle-drawer': []
+}
+
+defineProps<Props>()
+defineEmits<Emits>()
+
+const isDarkMode = inject('isDarkMode')
+</script>

src/components/common/PageHeader.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="text-center">
+    <div class="flex justify-center mb-8">
+      <div
+        class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
+      >
+        <div class="rounded-full bg-gray-900 p-2">
+          <BoxIcon class="w-8 h-8 text-white" />
+        </div>
+      </div>
+    </div>
+    <h2
+      @click="$emit('title-click')"
+      class="text-3xl cursor-pointer font-extrabold text-center mb-6"
+      :class="[
+        isDarkMode
+          ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
+          : 'text-indigo-600'
+      ]"
+    >
+      {{ title }}
+    </h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import { BoxIcon } from 'lucide-vue-next'
+
+interface Props {
+  title: string
+}
+
+interface Emits {
+  'title-click': []
+}
+
+defineProps<Props>()
+defineEmits<Emits>()
+
+const isDarkMode = inject('isDarkMode')
+</script>
+
+<style scoped>
+@keyframes spin-slow {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-slow {
+  animation: spin-slow 3s linear infinite;
+}
+</style>

src/components/common/RetrieveForm.vue

@@ -0,0 +1,101 @@
+<template>
+  <form @submit.prevent="$emit('submit')">
+    <div class="mb-6 relative">
+      <label
+        for="code"
+        class="block text-sm font-medium mb-2"
+        :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
+        >取件码</label
+      >
+      <div class="relative">
+        <input
+          id="code"
+          v-model="code"
+          type="text"
+          ref="codeInput"
+          class="w-full px-4 py-3 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 pr-10"
+          :class="[
+            isDarkMode ? 'bg-gray-700 bg-opacity-50' : 'bg-gray-100',
+            { 'ring-2 ring-red-500': error },
+            isDarkMode ? 'text-gray-300' : 'text-gray-800'
+          ]"
+          placeholder="请输入5位取件码"
+          required
+          :readonly="inputStatus.readonly"
+          maxlength="5"
+          @focus="isInputFocused = true"
+          @blur="isInputFocused = false"
+        />
+        <div
+          v-if="inputStatus.loading"
+          class="absolute inset-y-0 right-0 flex items-center pr-3"
+        >
+          <span
+            class="animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-500"
+          ></span>
+        </div>
+      </div>
+      <div
+        class="absolute -bottom-0.5 left-2 h-0.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-300 ease-in-out"
+        :class="{ 'w-97-100': isInputFocused, 'w-0': !isInputFocused }"
+      ></div>
+    </div>
+    <button
+      type="submit"
+      class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-3 px-4 rounded-lg hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
+      :disabled="inputStatus.loading"
+    >
+      <span class="flex items-center justify-center relative z-10">
+        <span>{{ inputStatus.loading ? '处理中...' : '提取文件' }}</span>
+        <ArrowRightIcon
+          class="w-5 h-5 ml-2 transition-transform duration-300 transform group-hover:translate-x-1"
+        />
+      </span>
+      <span
+        class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+      ></span>
+    </button>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, watch } from 'vue'
+import { ArrowRightIcon } from 'lucide-vue-next'
+
+interface InputStatus {
+  readonly: boolean
+  loading: boolean
+}
+
+interface Props {
+  inputStatus: InputStatus
+  error?: boolean
+}
+
+interface Emits {
+  submit: []
+  'update:code': [value: string]
+}
+
+defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const isDarkMode = inject('isDarkMode')
+const code = ref('')
+const isInputFocused = ref(false)
+const codeInput = ref<HTMLInputElement>()
+
+watch(code, (newValue) => {
+  emit('update:code', newValue)
+})
+
+defineExpose({
+  focus: () => codeInput.value?.focus()
+})
+</script>
+
+<style scoped>
+.w-97-100 {
+  width: calc(100% - 1rem);
+}
+</style>

src/components/common/StatCard.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
+    :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
+          {{ title }}
+        </p>
+        <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+          {{ value }}
+        </h3>
+      </div>
+      <div class="p-3 rounded-full" :class="iconBgClass">
+        <component :is="icon" class="w-6 h-6" :class="iconClass" />
+      </div>
+    </div>
+    <p class="text-sm mt-2" :class="descriptionClass">
+      <slot name="description"></slot>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, computed } from 'vue'
+import type { Component } from 'vue'
+
+interface Props {
+  title: string
+  value: string | number
+  icon: Component
+  iconColor: 'indigo' | 'purple' | 'green' | 'blue'
+  descriptionType?: 'success' | 'error' | 'neutral'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  descriptionType: 'neutral'
+})
+
+const isDarkMode = inject('isDarkMode')
+
+const iconBgClass = computed(() => {
+  const colorMap = {
+    indigo: isDarkMode ? 'bg-indigo-900' : 'bg-indigo-100',
+    purple: isDarkMode ? 'bg-purple-900' : 'bg-purple-100',
+    green: isDarkMode ? 'bg-green-900' : 'bg-green-100',
+    blue: isDarkMode ? 'bg-blue-900' : 'bg-blue-100'
+  }
+  return colorMap[props.iconColor]
+})
+
+const iconClass = computed(() => {
+  const colorMap = {
+    indigo: isDarkMode ? 'text-indigo-400' : 'text-indigo-600',
+    purple: isDarkMode ? 'text-purple-400' : 'text-purple-600',
+    green: isDarkMode ? 'text-green-400' : 'text-green-600',
+    blue: isDarkMode ? 'text-blue-400' : 'text-blue-600'
+  }
+  return colorMap[props.iconColor]
+})
+
+const descriptionClass = computed(() => {
+  const typeMap = {
+    success: isDarkMode ? 'text-green-400' : 'text-green-600',
+    error: isDarkMode ? 'text-red-400' : 'text-red-600',
+    neutral: isDarkMode ? 'text-gray-400' : 'text-gray-600'
+  }
+  return typeMap[props.descriptionType]
+})
+</script>

src/utils/common.ts

@@ -0,0 +1,241 @@
+/**
+ * 通用工具函数
+ */
+
+/**
+ * 格式化时间戳为可读格式
+ * @param timestamp 时间戳字符串
+ * @param format 格式类型
+ * @returns 格式化后的时间字符串
+ */
+export function formatTimestamp(timestamp: string, format: 'datetime' | 'date' | 'time' = 'datetime'): string {
+  const date = new Date(timestamp)
+  const year = date.getFullYear()
+  const month = (date.getMonth() + 1).toString().padStart(2, '0')
+  const day = date.getDate().toString().padStart(2, '0')
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+  const seconds = date.getSeconds().toString().padStart(2, '0')
+
+  switch (format) {
+    case 'date':
+      return `${year}-${month}-${day}`
+    case 'time':
+      return `${hours}:${minutes}:${seconds}`
+    case 'datetime':
+    default:
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+  }
+}
+
+/**
+ * 格式化文件大小
+ * @param bytes 字节数
+ * @param decimals 小数位数
+ * @returns 格式化后的文件大小字符串
+ */
+export function formatFileSize(bytes: number, decimals: number = 2): string {
+  if (bytes === 0) return '0 Bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
+
+/**
+ * 格式化持续时间
+ * @param seconds 秒数
+ * @returns 格式化后的持续时间字符串
+ */
+export function formatDuration(seconds: number): string {
+  if (seconds === 0) return '永久'
+
+  const units = [
+    { name: '天', value: 86400 },
+    { name: '小时', value: 3600 },
+    { name: '分钟', value: 60 },
+    { name: '秒', value: 1 }
+  ]
+
+  for (const unit of units) {
+    if (seconds >= unit.value) {
+      const value = Math.floor(seconds / unit.value)
+      return `${value}${unit.name}`
+    }
+  }
+
+  return `${seconds}秒`
+}
+
+/**
+ * 复制文本到剪贴板
+ * @param text 要复制的文本
+ * @returns Promise<boolean> 是否复制成功
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text)
+      return true
+    } else {
+      // 降级方案
+      const textArea = document.createElement('textarea')
+      textArea.value = text
+      textArea.style.position = 'fixed'
+      textArea.style.left = '-999999px'
+      textArea.style.top = '-999999px'
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      const result = document.execCommand('copy')
+      textArea.remove()
+      return result
+    }
+  } catch (error) {
+    console.error('复制失败:', error)
+    return false
+  }
+}
+
+/**
+ * 防抖函数
+ * @param func 要防抖的函数
+ * @param wait 等待时间（毫秒）
+ * @returns 防抖后的函数
+ */
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: number | null = null
+  
+  return (...args: Parameters<T>) => {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(() => func(...args), wait)
+  }
+}
+
+/**
+ * 节流函数
+ * @param func 要节流的函数
+ * @param limit 限制时间（毫秒）
+ * @returns 节流后的函数
+ */
+export function throttle<T extends (...args: unknown[]) => unknown>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle: boolean = false
+  
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      func(...args)
+      inThrottle = true
+      setTimeout(() => inThrottle = false, limit)
+    }
+  }
+}
+
+/**
+ * 验证邮箱格式
+ * @param email 邮箱地址
+ * @returns 是否为有效邮箱
+ */
+export function isValidEmail(email: string): boolean {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+/**
+ * 验证URL格式
+ * @param url URL地址
+ * @returns 是否为有效URL
+ */
+export function isValidUrl(url: string): boolean {
+  try {
+    new URL(url)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * 生成随机字符串
+ * @param length 字符串长度
+ * @param chars 可选字符集
+ * @returns 随机字符串
+ */
+export function generateRandomString(
+  length: number = 8,
+  chars: string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+): string {
+  let result = ''
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return result
+}
+
+/**
+ * 深度克隆对象
+ * @param obj 要克隆的对象
+ * @returns 克隆后的对象
+ */
+export function deepClone<T>(obj: T): T {
+  if (obj === null || typeof obj !== 'object') {
+    return obj
+  }
+
+  if (obj instanceof Date) {
+    return new Date(obj.getTime()) as T
+  }
+
+  if (obj instanceof Array) {
+    return obj.map(item => deepClone(item)) as T
+  }
+
+  if (typeof obj === 'object') {
+    const clonedObj = {} as T
+    for (const key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        clonedObj[key] = deepClone(obj[key])
+      }
+    }
+    return clonedObj
+  }
+
+  return obj
+}
+
+/**
+ * 获取文件扩展名
+ * @param filename 文件名
+ * @returns 文件扩展名（不包含点）
+ */
+export function getFileExtension(filename: string): string {
+  return filename.slice((filename.lastIndexOf('.') - 1 >>> 0) + 2)
+}
+
+/**
+ * 检查是否为移动设备
+ * @returns 是否为移动设备
+ */
+export function isMobile(): boolean {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+}
+
+/**
+ * 格式化数字，添加千分位分隔符
+ * @param num 数字
+ * @returns 格式化后的数字字符串
+ */
+export function formatNumber(num: number): string {
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}

src/views/RetrievewFileView.vue

@@ -12,363 +12,60 @@
         ]"
       >
         <div class="p-8">
-          <div class="flex justify-center mb-8">
-            <div
-              class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
-            >
-              <div class="rounded-full bg-gray-900 p-2">
-                <BoxIcon class="w-8 h-8 text-white" />
-              </div>
-            </div>
-          </div>
-          <h2
-            @click="toSend"
-            class="text-3xl cursor-pointer font-extrabold text-center mb-6"
-            :class="[
-              isDarkMode
-                ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
-                : 'text-indigo-600'
-            ]"
-          >
-            {{ config.name }}
-          </h2>
-          <form @submit.prevent="handleSubmit">
-            <div class="mb-6 relative">
-              <label
-                for="code"
-                class="block text-sm font-medium mb-2"
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                >取件码</label
-              >
-              <div class="relative">
-                <input
-                  id="code"
-                  v-model="code"
-                  type="text"
-                  ref="codeInput"
-                  class="w-full px-4 py-3 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 pr-10"
-                  :class="[
-                    isDarkMode ? 'bg-gray-700 bg-opacity-50' : 'bg-gray-100',
-                    { 'ring-2 ring-red-500': error },
-                    isDarkMode ? 'text-gray-300' : 'text-gray-800'
-                  ]"
-                  placeholder="请输入5位取件码"
-                  required
-                  :readonly="inputStatus.readonly"
-                  maxlength="5"
-                  @focus="isInputFocused = true"
-                  @blur="isInputFocused = false"
-                />
-                <div
-                  v-if="inputStatus.loading"
-                  class="absolute inset-y-0 right-0 flex items-center pr-3"
-                >
-                  <span
-                    class="animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-500"
-                  ></span>
-                </div>
-              </div>
-              <div
-                class="absolute -bottom-0.5 left-2 h-0.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-300 ease-in-out"
-                :class="{ 'w-97-100': isInputFocused, 'w-0': !isInputFocused }"
-              ></div>
-            </div>
-            <button
-              type="submit"
-              class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-3 px-4 rounded-lg hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
-              :disabled="inputStatus.loading"
-            >
-              <span class="flex items-center justify-center relative z-10">
-                <span>{{ inputStatus.loading ? '处理中...' : '提取文件' }}</span>
-                <ArrowRightIcon
-                  class="w-5 h-5 ml-2 transition-transform duration-300 transform group-hover:translate-x-1"
-                />
-              </span>
-              <span
-                class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-              ></span>
-            </button>
-          </form>
-
-          <div class="mt-6 text-center">
-            <router-link
-              to="/send"
-              class="text-indigo-400 hover:text-indigo-300 transition duration-300"
-            >
-              需要发送文件？点击这里
-            </router-link>
-          </div>
-        </div>
-        <div
-          class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
-          :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
-        >
-          <span
-            class="text-sm flex items-center"
-            :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-          >
-            <ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
-            安全加密
-          </span>
-          <button
-            @click="toggleDrawer"
-            class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
-            :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-          >
-            取件记录
-            <ClipboardListIcon class="w-4 h-4 ml-1" />
-          </button>
+          <PageHeader :title="config.name" @title-click="toSend" />
+          <RetrieveForm
+            :input-status="inputStatus"
+            :error="!!error"
+            @submit="handleSubmit"
+            @update:code="code = $event"
+            ref="retrieveFormRef"
+          />
         </div>
+        <PageFooter
+          link-text="需要发送文件？点击这里"
+          link-to="/send"
+          drawer-text="取件记录"
+          @toggle-drawer="toggleDrawer"
+        />
       </div>
     </div>
 
-    <transition name="drawer">
-      <div
-        v-if="showDrawer"
-        class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
-        :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
-      >
-        <div
-          class="flex justify-between items-center p-6 border-b"
-          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
-        >
-          <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-            取件记录
-          </h3>
-          <button
-            @click="toggleDrawer"
-            class="hover:text-white transition duration-300"
-            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
-          >
-            <XIcon class="w-6 h-6" />
-          </button>
-        </div>
-        <div class="flex-grow overflow-y-auto p-6">
-          <transition-group name="list" tag="div" class="space-y-4">
-            <div
-              v-for="record in records"
-              :key="record.id"
-              class="bg-opacity-50 rounded-lg p-4 flex items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102"
-              :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
-            >
-              <div class="flex-shrink-0 mr-4">
-                <FileIcon
-                  class="w-10 h-10"
-                  :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-                />
-              </div>
-              <div class="flex-grow min-w-0 mr-4">
-                <p
-                  class="font-medium text-lg truncate"
-                  :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-                >
-                  {{ record.filename }}
-                </p>
-                <p
-                  class="text-sm truncate"
-                  :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
-                >
-                  {{ record.date }} · {{ record.size }}
-                </p>
-              </div>
-              <div class="flex-shrink-0 flex space-x-2">
-                <button
-                  @click="viewDetails(record)"
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
-                    isDarkMode
-                      ? 'hover:bg-indigo-400 text-indigo-400'
-                      : 'hover:bg-indigo-100 text-indigo-600'
-                  ]"
-                >
-                  <EyeIcon class="w-5 h-5" />
-                </button>
-                <button
-                  @click="downloadRecord(record)"
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
-                    isDarkMode
-                      ? 'hover:bg-green-400 text-green-400'
-                      : 'hover:bg-green-100 text-green-600'
-                  ]"
-                >
-                  <DownloadIcon class="w-5 h-5" />
-                </button>
-                <button
-                  @click="deleteRecord(record.id)"
-                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
-                  :class="[
-                    isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
-                  ]"
-                >
-                  <TrashIcon class="w-5 h-5" />
-                </button>
-              </div>
-            </div>
-          </transition-group>
-        </div>
-      </div>
-    </transition>
+    <SideDrawer :visible="showDrawer" title="取件记录" @close="toggleDrawer">
+      <FileRecordList
+        :records="records"
+        @view-details="viewDetails"
+        @download-record="downloadRecord"
+        @delete-record="deleteRecord"
+      />
+    </SideDrawer>
 
-    <transition name="fade">
-      <div
-        v-if="selectedRecord"
-        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      >
-        <div
-          class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg overflow-hidden"
-          :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white bg-opacity-95']"
-        >
-          <h3
-            class="text-2xl font-bold mb-6 truncate"
-            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-          >
-            文件详情
-          </h3>
-          <div class="space-y-4">
-            <div class="flex items-center">
-              <FileIcon
-                class="w-6 h-6 mr-3 flex-shrink-0"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
-              <p
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                class="truncate flex-grow"
-              >
-                <span class="font-medium">文件名：</span>{{ selectedRecord.filename }}
-              </p>
-            </div>
-            <div class="flex items-center">
-              <CalendarIcon
-                class="w-6 h-6 mr-3 flex-shrink-0"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
-              <p
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                class="truncate flex-grow"
-              >
-                <span class="font-medium">取件日期：</span>{{ selectedRecord.date }}
-              </p>
-            </div>
-            <div class="flex items-center">
-              <HardDriveIcon
-                class="w-6 h-6 mr-3 flex-shrink-0"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
-              <p
-                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
-                class="truncate flex-grow"
-              >
-                <span class="font-medium">文件大小：</span>{{ selectedRecord.size }}
-              </p>
-            </div>
-            <div class="flex items-center">
-              <DownloadIcon
-                class="w-6 h-6 mr-3"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
-              />
-              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
-                <span class="font-medium">文件内容：</span>
-              </p>
-              <div v-if="selectedRecord.filename === 'Text'" class="ml-2">
-                <button
-                  @click="showContentPreview"
-                  class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300"
-                >
-                  预览内容
-                </button>
-              </div>
-              <div v-else>
-                <a
-                  :href="getDownloadUrl(selectedRecord)"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300"
-                >
-                  点击下载
-                </a>
-              </div>
-            </div>
-          </div>
+    <FileDetailModal
+      :visible="!!selectedRecord"
+      :record="selectedRecord"
+      @close="selectedRecord = null"
+      @show-content-preview="showContentPreview"
+      :get-download-url="getDownloadUrl"
+      :get-qr-code-value="getQRCodeValue"
+    />
     
-          <div class="mt-6 flex flex-col items-center">
-            <h4
-              class="text-lg font-semibold mb-3"
-              :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
-            >
-              取件二维码
-            </h4>
-            <div class="bg-white p-2 rounded-lg shadow-md">
-              <QRCode :value="getQRCodeValue(selectedRecord)" :size="128" level="M" />
-            </div>
-            <p class="mt-2 text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
-              扫描二维码快速取件
-            </p>
-          </div>
-
-          <button
-            @click="selectedRecord = null"
-            class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105"
-          >
-            关闭
-          </button>
-        </div>
-      </div>
-    </transition>
-    <transition name="fade">
-      <div
-        v-if="showPreview"
-        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
-      >
-        <div
-          class="p-6 rounded-2xl max-w-3xl w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70 max-h-[85vh] overflow-hidden flex flex-col"
-          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
-        >
-          <div class="flex justify-between items-center mb-4 flex-shrink-0">
-            <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-              内容预览
-            </h3>
-            <div class="flex items-center gap-3">
-              <button
-                @click="copyContent"
-                class="px-4 py-1.5 rounded-lg transition duration-300 flex items-center gap-2 text-sm font-medium"
-                :class="[
-                  isDarkMode
-                    ? 'bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white'
-                    : 'bg-gray-100 hover:bg-gray-200 text-gray-700 hover:text-gray-900'
-                ]"
-              >
-                <CopyIcon class="w-4 h-4" />
-                复制
-              </button>
-              <button
-                @click="showPreview = false"
-                class="p-1.5 rounded-lg transition duration-300 hover:bg-opacity-10"
-                :class="[
-                  isDarkMode
-                    ? 'text-gray-400 hover:text-white hover:bg-white'
-                    : 'text-gray-500 hover:text-gray-900 hover:bg-black'
-                ]"
-              >
-                <XIcon class="w-5 h-5" />
-              </button>
-            </div>
-          </div>
-          <div class="flex-1 overflow-y-auto custom-scrollbar">
-            <div
-              class="prose max-w-none p-6 rounded-xl break-words overflow-wrap-anywhere"
-              :class="[isDarkMode ? 'prose-invert bg-gray-900 bg-opacity-50' : 'bg-gray-50']"
-              v-html="renderedContent"
-            ></div>
-          </div>
-        </div>
-      </div>
-    </transition>
+    <ContentPreviewModal
+      :visible="showPreview"
+      :rendered-content="renderedContent"
+      @close="showPreview = false"
+      @copy-content="copyContent"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, inject, onMounted, watch } from 'vue'
+import PageHeader from '@/components/common/PageHeader.vue'
+import RetrieveForm from '@/components/common/RetrieveForm.vue'
+import PageFooter from '@/components/common/PageFooter.vue'
+import SideDrawer from '@/components/common/SideDrawer.vue'
+import FileDetailModal from '@/components/common/FileDetailModal.vue'
+import FileRecordList from '@/components/common/FileRecordList.vue'
+import ContentPreviewModal from '@/components/common/ContentPreviewModal.vue'
 
 // 定义数据接口
 interface FileRecord {
@@ -386,22 +83,7 @@ interface InputStatus {
   loading: boolean
 }
 
-import {
-  BoxIcon,
-  EyeIcon,
-  ArrowRightIcon,
-  ShieldCheckIcon,
-  ClipboardListIcon,
-  XIcon,
-  TrashIcon,
-  FileIcon,
-  CalendarIcon,
-  HardDriveIcon,
-  DownloadIcon,
-  CopyIcon
-} from 'lucide-vue-next'
 import { useRouter, useRoute } from 'vue-router'
-import QRCode from 'qrcode.vue'
 import { useFileDataStore } from '@/stores/fileData'
 import { storeToRefs } from 'pinia'
 import api from '@/utils/api'
@@ -431,7 +113,7 @@ const inputStatus = ref<InputStatus>({
   readonly: false,
   loading: false
 })
-const isInputFocused = ref(false)
+
 const error = ref('')
 const selectedRecord = ref<FileRecord | null>(null)
 const showDrawer = ref(false)

src/views/SendFileView.vue

@@ -12,117 +12,28 @@
       ]"
     >
       <div class="p-8">
-        <h2
-          class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300"
-          :class="[
-            isDarkMode
-              ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
-              : 'text-indigo-600'
-          ]"
-          @click="toRetrieve"
-        >
-          {{ config.name }}
-        </h2>
+        <PageHeader :title="config.name" @title-click="toRetrieve" />
         <form @submit.prevent="handleSubmit" class="space-y-8">
-          <!-- 发送类型选择 -->
-          <div class="flex justify-center space-x-4 mb-6">
-            <button
-              type="button"
-              @click="sendType = 'file'"
-              :class="[
-                'px-4 py-2 rounded-lg',
-                sendType === 'file' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
-              ]"
-            >
-              发送文件
-            </button>
-            <button
-              type="button"
-              @click="sendType = 'text'"
-              :class="[
-                'px-4 py-2 rounded-lg',
-                sendType === 'text' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
-              ]"
-            >
-              发送文本
-            </button>
-            <!-- <button
-              type="button"
-              @click="sendType = 'collect'"
-              :class="[
-                'px-4 py-2 rounded-lg',
-                sendType === 'collect' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
-              ]"
-            >
-              收集文件
-            </button> -->
-          </div>
+          <SendTypeSelector
+            :selected-type="sendType as any"
+            @update:selected-type="sendType = $event"
+          />
 
           <transition name="fade" mode="out-in">
             <div v-if="sendType === 'file'" key="file" class="grid grid-cols-1 gap-8">
-              <!-- 文件上传区域 -->
-              <div
-                class="rounded-xl p-8 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-300 group cursor-pointer relative"
-                :class="[
-                  isDarkMode
-                    ? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
-                    : 'bg-gray-100 border-gray-300 hover:border-indigo-500'
-                ]"
-                @click="triggerFileUpload"
-                @dragover.prevent
-                @drop.prevent="handleFileDrop"
-              >
-                <input
-                  id="file-upload"
-                  type="file"
-                  class="hidden"
-                  @change="handleFileUpload"
-                  ref="fileInput"
-                />
-                <div class="absolute inset-0 w-full h-full" v-if="uploadProgress > 0">
-                  <BorderProgressBar :progress="uploadProgress" />
-                </div>
-                <UploadCloudIcon
-                  :class="[
-                    'w-16 h-16 transition-colors duration-300',
-                    isDarkMode
-                      ? 'text-gray-400 group-hover:text-indigo-400'
-                      : 'text-gray-600 group-hover:text-indigo-600'
-                  ]"
-                />
-                <p
-                  :class="[
-                    'mt-4 text-sm transition-colors duration-300 w-full text-center',
-                    isDarkMode
-                      ? 'text-gray-400 group-hover:text-indigo-400'
-                      : 'text-gray-600 group-hover:text-indigo-600'
-                  ]"
-                >
-                  <span class="block truncate">
-                    {{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }}
-                  </span>
-                </p>
-                <p :class="['mt-2 text-xs', isDarkMode ? 'text-gray-500' : 'text-gray-400']">
-                  支持各种常见格式，最大{{ getStorageUnit(config.uploadSize) }}
-                </p>
-              </div>
+              <FileUploadArea
+                :selected-file="selectedFile"
+                :progress="uploadProgress"
+                :description="`支持各种常见格式，最大${getStorageUnit(config.uploadSize)}`"
+                @file-selected="handleFileSelected"
+                @file-drop="handleFileDrop"
+              />
             </div>
             <div v-else key="text" class="grid grid-cols-1 gap-8">
-              <!-- 文本输入区域 -->
-              <div v-if="sendType === 'text'" class="flex flex-col">
-                <textarea
-                  id="text-content"
-                  v-model="textContent"
-                  rows="7"
-                  :class="[
-                    'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none custom-scrollbar',
-                    isDarkMode
-                      ? 'bg-gray-800 bg-opacity-50 text-white'
-                      : 'bg-white text-gray-900 border border-gray-300'
-                  ]"
-                  placeholder="在此输入要发送的文本..."
-                ></textarea>
-              </div>
+              <TextInputArea
+                v-model="textContent"
+                placeholder="在此输入要发送的文本..."
+              />
             </div>
           </transition>
           <!-- 过期方式选择 -->
@@ -576,7 +487,6 @@
 <script setup lang="ts">
 import { ref, inject, onMounted, computed } from 'vue'
 import {
-  UploadCloudIcon,
   SendIcon,
   ClipboardListIcon,
   XIcon,
@@ -589,7 +499,6 @@ import {
   TerminalIcon
 } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
-import BorderProgressBar from '@/components/common/BorderProgressBar.vue'
 import QRCode from 'qrcode.vue'
 import { useFileDataStore } from '@/stores/fileData'
 import { useAlertStore } from '@/stores/alertStore'
@@ -597,6 +506,10 @@ import api from '@/utils/api'
 import type { ApiResponse } from '@/types'
 import { copyRetrieveLink, copyRetrieveCode, copyWgetCommand } from '@/utils/clipboard'
 import { getStorageUnit } from '@/utils/convert'
+import PageHeader from '@/components/common/PageHeader.vue'
+import SendTypeSelector from '@/components/common/SendTypeSelector.vue'
+import FileUploadArea from '@/components/common/FileUploadArea.vue'
+import TextInputArea from '@/components/common/TextInputArea.vue'
 
 interface Config {
   name: string
@@ -627,7 +540,7 @@ const fileDataStore = useFileDataStore()
 const sendType = ref('file')
 const selectedFile = ref<File | null>(null)
 const textContent = ref('')
-const fileInput = ref<HTMLInputElement | null>(null)
+
 const expirationMethod = ref(config.expireStyle?.[0] || 'day')
 const expirationValue = ref('1')
 const uploadProgress = ref(0)
@@ -639,20 +552,13 @@ const sendRecords = computed(() => fileDataStore.shareData)
 
 const fileHash = ref('')
 
-const triggerFileUpload = () => {
-  fileInput.value?.click()
+
+
+const handleFileSelected = (file: File) => {
+  selectedFile.value = file
 }
 
-const handleFileUpload = async (event: Event) => {
-  const target = event.target as HTMLInputElement
-  if (target.files && target.files.length > 0) {
-    const file = target.files[0]
-    selectedFile.value = file
-    if (!checkUpload()) return
-    fileHash.value = await calculateFileHash(file)
-    console.log(fileHash.value)
-  }
-}
+
 
 const handleFileDrop = async (event: DragEvent) => {
   if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {

src/views/manage/DashboardView.vue

@@ -5,93 +5,51 @@
     </h2>
     <!-- 统计卡片区域 -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-      <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
-              总文件数
-            </p>
-            <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-              {{ dashboardData.totalFiles }}
-            </h3>
-          </div>
-          <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-indigo-900' : 'bg-indigo-100']">
-            <FileIcon class="w-6 h-6" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-          </div>
-        </div>
-        <p class="text-sm mt-2" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']">
-          <span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">昨天：</span>
-          <span>{{ dashboardData.yesterdayCount }} </span>
-          <span class="ml-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">今天：</span>
-          <span>{{ dashboardData.todayCount }} </span>
-        </p>
-      </div>
+      <StatCard
+        title="总文件数"
+        :value="dashboardData.totalFiles"
+        :icon="FileIcon"
+        icon-color="indigo"
+        description-type="success">
+        <template #description>
+          <span>昨天：{{ dashboardData.yesterdayCount }}</span>
+          <span class="ml-2">今天：{{ dashboardData.todayCount }}</span>
+        </template>
+      </StatCard>
 
-      <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
-              存储空间
-            </p>
-            <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-              {{ dashboardData.storageUsed }}
-            </h3>
-          </div>
-          <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-purple-900' : 'bg-purple-100']">
-            <HardDriveIcon class="w-6 h-6" :class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']" />
-          </div>
-        </div>
+      <StatCard
+        title="存储空间"
+        :value="dashboardData.storageUsed"
+        :icon="HardDriveIcon"
+        icon-color="purple"
+        description-type="success">
+        <template #description>
+          <span>昨天：{{ dashboardData.yesterdaySize }}</span>
+          <span class="ml-2">今天：{{ dashboardData.todaySize }}</span>
+        </template>
+      </StatCard>
 
-        <p class="text-sm mt-2" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']">
-          <span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">昨天：</span>
-          <span>{{ dashboardData.yesterdaySize }} </span>
-          <span class="ml-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">今天：</span>
-          <span>{{ dashboardData.todaySize }} </span>
-        </p>
-      </div>
+      <StatCard
+        title="活跃用户"
+        value="25"
+        :icon="UsersIcon"
+        icon-color="green"
+        description-type="error">
+        <template #description>
+          <span>↓ 5% 较上周</span>
+        </template>
+      </StatCard>
 
-      <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
-              活跃用户
-            </p>
-            <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-              25
-            </h3>
-          </div>
-          <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-green-900' : 'bg-green-100']">
-            <UsersIcon class="w-6 h-6" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']" />
-          </div>
-        </div>
-        <p class="text-sm mt-2" :class="[isDarkMode ? 'text-red-400' : 'text-red-600']">
-          <span>↓ 5% </span>
-          <span :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">较上周</span>
-        </p>
-      </div>
-
-      <div class="p-6 rounded-lg shadow-md transition-colors duration-300"
-        :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-        <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
-              系统状态
-            </p>
-            <h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-              正常
-            </h3>
-          </div>
-          <div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-blue-900' : 'bg-blue-100']">
-            <ActivityIcon class="w-6 h-6" :class="[isDarkMode ? 'text-blue-400' : 'text-blue-600']" />
-          </div>
-        </div>
-        <p class="text-sm mt-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
+      <StatCard
+        title="系统状态"
+        value="正常"
+        :icon="ActivityIcon"
+        icon-color="blue"
+        description-type="neutral">
+        <template #description>
           服务器运行时间: {{ dashboardData.sysUptime }}
-        </p>
-      </div>
+        </template>
+      </StatCard>
     </div>
 
     <!-- 添加版本和版权信息 -->
@@ -116,6 +74,7 @@ import {
 } from 'lucide-vue-next'
 import { StatsService } from '@/services'
 import type { DashboardData } from '@/types'
+import StatCard from '@/components/common/StatCard.vue'
 const isDarkMode = inject('isDarkMode')
 
 const dashboardData = reactive<DashboardData>({

src/views/manage/FileManageView.vue

@@ -30,168 +30,96 @@
     </div>
 
     <!-- 文件列表 -->
-    <div class="rounded-lg shadow-sm overflow-hidden transition-all duration-300"
-      :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-      <div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-        <h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-          所有文件
-        </h3>
-      </div>
-      <div class="overflow-x-auto">
-        <table class="min-w-full divide-y" :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']">
-          <thead :class="[isDarkMode ? 'bg-gray-900/50' : 'bg-gray-50']">
-            <tr>
-              <th v-for="header in fileTableHeaders" :key="header"
-                class="px-6 py-3.5 text-left text-xs font-medium uppercase tracking-wider"
-                :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
-                {{ header }}
-              </th>
-            </tr>
-          </thead>
-          <tbody :class="[
-            isDarkMode
-              ? 'bg-gray-800/50 divide-y divide-gray-700'
-              : 'bg-white divide-y divide-gray-200'
-          ]">
-            <tr v-for="file in tableData" :key="file.id" class="hover:bg-opacity-50 transition-colors duration-200"
-              :class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50']">
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="flex items-center">
-                  <span class="font-medium select-all" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
-                    {{ file.code }}
-                  </span>
-                </div>
-              </td>
-              <td class="px-6 py-4">
-                <div class="flex items-center group relative">
-                  <FileIcon class="w-5 h-5 mr-2 flex-shrink-0"
-                    :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']" />
-                  <span class="font-medium truncate max-w-[200px]"
-                    :class="[isDarkMode ? 'text-white' : 'text-gray-900']" :title="file.prefix">
-                    {{ file.prefix }}
-                  </span>
-                  <!-- 悬浮提示 -->
-                  <div
-                    class="absolute left-0 -top-2 -translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
-                    <div class="bg-gray-900 text-white text-sm rounded px-2 py-1 max-w-xs break-all">
-                      {{ file.prefix }}
-                    </div>
-                  </div>
-                </div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
-                  :class="[isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-800']">
-                  {{ Math.round((file.size / 1024 / 1024) * 100) / 100 }}MB
-                </span>
-              </td>
-              <td class="px-6 py-4">
-                <div class="group relative">
-                  <span class="block truncate max-w-[250px]" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
-                    {{ file.text }}
-                  </span>
-                  <!-- 悬浮提示 -->
-                  <div
-                    class="absolute left-0 -top-2 -translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10">
-                    <div class="bg-gray-900 text-white text-sm rounded px-2 py-1 max-w-xs break-all">
-                      {{ file.text }}
-                    </div>
-                  </div>
-                </div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" :class="[
-                  file.expired_at
-                    ? (isDarkMode ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-100 text-yellow-800')
-                    : (isDarkMode ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-800')
-                ]">
-                  {{ file.expired_at ? formatTimestamp(file.expired_at) : '永久' }}
-                </span>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                <div class="flex items-center space-x-2">
-                  <button @click="openEditModal(file)"
-                    class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
-                      isDarkMode
-                        ? 'bg-blue-900/20 text-blue-400 hover:bg-blue-900/30'
-                        : 'bg-blue-50 text-blue-600 hover:bg-blue-100'
-                    ]">
-                    <PencilIcon class="w-4 h-4 mr-1.5" />
-                    编辑
-                  </button>
-                  <button @click="deleteFile(file.id)"
-                    class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
-                      isDarkMode
-                        ? 'bg-red-900/20 text-red-400 hover:bg-red-900/30'
-                        : 'bg-red-50 text-red-600 hover:bg-red-100'
-                    ]">
-                    <TrashIcon class="w-4 h-4 mr-1.5" />
-                    删除
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- 分页控件 -->
-      <div class="mt-4 flex items-center justify-between px-6 py-4 border-t"
-        :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-        <div class="flex items-center text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
-          显示第 {{ (params.page - 1) * params.size + 1 }} 到
-          {{ Math.min(params.page * params.size, params.total) }} 条，共 {{ params.total }} 条
-        </div>
-
-        <div class="flex items-center space-x-2">
-          <button @click="handlePageChange(params.page - 1)" :disabled="params.page === 1"
-            class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
-              isDarkMode
-                ? params.page === 1
-                  ? 'bg-gray-800 text-gray-600 cursor-not-allowed'
-                  : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                : params.page === 1
-                  ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-            ]">
-            <ChevronLeftIcon class="w-4 h-4" />
-            上一页
-          </button>
-
-          <div class="flex items-center space-x-1">
-            <template v-for="pageNum in displayedPages" :key="pageNum">
-              <button v-if="pageNum !== '...'" @click="handlePageChange(pageNum)"
-                class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
-                  params.page === pageNum
-                    ? 'bg-indigo-600 text-white'
-                    : isDarkMode
-                      ? 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                ]">
-                {{ pageNum }}
-              </button>
-              <span v-else class="px-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
-                ...
+    <DataTable title="所有文件" :headers="fileTableHeaders">
+      <template #body>
+        <tr v-for="file in tableData" :key="file.id" class="hover:bg-opacity-50 transition-colors duration-200"
+          :class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50']">
+          <td class="px-6 py-4 whitespace-nowrap">
+            <div class="flex items-center">
+              <span class="font-medium select-all" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
+                {{ file.code }}
               </span>
-            </template>
-          </div>
-
-          <button @click="handlePageChange(params.page + 1)" :disabled="params.page >= totalPages"
-            class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
-              isDarkMode
-                ? params.page >= totalPages
-                  ? 'bg-gray-800 text-gray-600 cursor-not-allowed'
-                  : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                : params.page >= totalPages
-                  ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            </div>
+          </td>
+          <td class="px-6 py-4">
+            <div class="flex items-center group relative">
+              <FileIcon class="w-5 h-5 mr-2 flex-shrink-0"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']" />
+              <span class="font-medium truncate max-w-[200px]"
+                :class="[isDarkMode ? 'text-white' : 'text-gray-900']" :title="file.prefix">
+                {{ file.prefix }}
+              </span>
+              <!-- 悬浮提示 -->
+              <div
+                class="absolute left-0 -top-2 -translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
+                <div class="bg-gray-900 text-white text-sm rounded px-2 py-1 max-w-xs break-all">
+                  {{ file.prefix }}
+                </div>
+              </div>
+            </div>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
+              :class="[isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-800']">
+              {{ Math.round((file.size / 1024 / 1024) * 100) / 100 }}MB
+            </span>
+          </td>
+          <td class="px-6 py-4">
+            <div class="group relative">
+              <span class="block truncate max-w-[250px]" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+                {{ file.text }}
+              </span>
+              <!-- 悬浮提示 -->
+              <div
+                class="absolute left-0 -top-2 -translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10">
+                <div class="bg-gray-900 text-white text-sm rounded px-2 py-1 max-w-xs break-all">
+                  {{ file.text }}
+                </div>
+              </div>
+            </div>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" :class="[
+              file.expired_at
+                ? (isDarkMode ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-100 text-yellow-800')
+                : (isDarkMode ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-800')
             ]">
-            下一页
-            <ChevronRightIcon class="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-    </div>
+              {{ file.expired_at ? formatTimestamp(file.expired_at) : '永久' }}
+            </span>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+            <div class="flex items-center space-x-2">
+              <button @click="openEditModal(file)"
+                class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
+                  isDarkMode
+                    ? 'bg-blue-900/20 text-blue-400 hover:bg-blue-900/30'
+                    : 'bg-blue-50 text-blue-600 hover:bg-blue-100'
+                ]">
+                <PencilIcon class="w-4 h-4 mr-1.5" />
+                编辑
+              </button>
+              <button @click="deleteFile(file.id)"
+                class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
+                  isDarkMode
+                    ? 'bg-red-900/20 text-red-400 hover:bg-red-900/30'
+                    : 'bg-red-50 text-red-600 hover:bg-red-100'
+                ]">
+                <TrashIcon class="w-4 h-4 mr-1.5" />
+                删除
+              </button>
+            </div>
+          </td>
+        </tr>
+      </template>
+      <template #footer>
+        <DataPagination
+          :current-page="params.page"
+          :page-size="params.size"
+          :total="params.total"
+          @page-change="handlePageChange"
+        />
+      </template>
+    </DataTable>
 
     <!-- 添加编辑模态框 -->
     <div v-if="showEditModal" class="fixed inset-0 z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
@@ -387,11 +315,11 @@ import {
   FileIcon,
   SearchIcon,
   TrashIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
   PencilIcon,
   CheckIcon,
 } from 'lucide-vue-next'
+import DataTable from '@/components/common/DataTable.vue'
+import DataPagination from '@/components/common/DataPagination.vue'
 import { useAlertStore } from '@/stores/alertStore'
 
 function formatTimestamp(timestamp: string): string {
@@ -550,41 +478,7 @@ loadFiles()
 // 计算总页数
 const totalPages = computed(() => Math.ceil(params.value.total / params.value.size))
 
-// 计算要显示的页码
-const displayedPages = computed(() => {
-  const current = params.value.page
-  const total = totalPages.value
-  const delta = 2 // 当前页码前后显示的页码数
 
-  const pages: (number | string)[] = []
-
-  // 始终显示第一页
-  pages.push(1)
-
-  // 计算显示范围
-  const left = Math.max(2, current - delta)
-  const right = Math.min(total - 1, current + delta)
-
-  // 添加省略号和页码
-  if (left > 2) {
-    pages.push('...')
-  }
-
-  for (let i = left; i <= right; i++) {
-    pages.push(i)
-  }
-
-  if (right < total - 1) {
-    pages.push('...')
-  }
-
-  // 始终显示最后一页
-  if (total > 1) {
-    pages.push(total)
-  }
-
-  return pages
-})
 
 // 添加搜索处理函数
 const handleSearch = async () => {