前端页面细节优化

src/components/ui/NavBar.vue

@@ -5,7 +5,11 @@
         <!-- 左侧：站点信息 -->
         <div class="flex items-center space-x-4">
           <router-link to="/" class="flex items-center space-x-3">
-            <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <!-- Logo -->
+            <div v-if="config.site?.logo" class="w-8 h-8 rounded-lg overflow-hidden flex items-center justify-center">
+              <img :src="config.site.logo" :alt="config.site?.name || '文件中转站'" class="w-full h-full object-contain" />
+            </div>
+            <div v-else class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
               <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
               </svg>
@@ -37,17 +41,6 @@
               发送
             </Button>
           </router-link>
-
-          <!-- 管理员入口 -->
-          <router-link v-if="!isAdminRoute" to="/admin" class="ml-4">
-            <Button variant="outline" size="sm">
-              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-              </svg>
-              管理
-            </Button>
-          </router-link>
         </div>
       </div>
     </div>
@@ -55,8 +48,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
 import { usePublicConfig } from '@/composables/usePublicConfig'
 import { Button } from '@/components/ui/button'
 
@@ -64,8 +55,5 @@ defineProps<{
   showDescription?: boolean
 }>()
 
-const route = useRoute()
 const { config } = usePublicConfig()
-
-const isAdminRoute = computed(() => route.path.includes('/admin'))
 </script>

src/components/ui/calendar/Calendar.vue

@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { CalendarRootEmits, CalendarRootProps, DateValue } from "reka-ui"
+import type { HTMLAttributes, Ref } from "vue"
+import type { LayoutTypes } from "."
+import { getLocalTimeZone, today } from "@internationalized/date"
+import { createReusableTemplate, reactiveOmit, useVModel } from "@vueuse/core"
+import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from "reka-ui"
+import { createYear, createYearRange, toDate } from "reka-ui/date"
+import { computed, toRaw } from "vue"
+import { cn } from "@/lib/utils"
+import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "."
+
+const props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes["class"], layout?: LayoutTypes, yearRange?: DateValue[] }>(), {
+  modelValue: undefined,
+  layout: undefined,
+})
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "layout", "placeholder")
+
+const placeholder = useVModel(props, "placeholder", emits, {
+  passive: true,
+  defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),
+}) as Ref<DateValue>
+
+const formatter = useDateFormatter(props.locale ?? "en")
+
+const yearRange = computed(() => {
+  return props.yearRange ?? createYearRange({
+    start: props?.minValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
+      .cycle("year", -100),
+
+    end: props?.maxValue ?? (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))
+      .cycle("year", 10),
+  })
+})
+
+const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>()
+const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>()
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DefineMonthTemplate v-slot="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
+          {{ formatter.custom(toDate(date), { month: 'short' }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="(e: Event) => {
+            placeholder = placeholder.set({
+              month: Number((e?.target as any)?.value),
+            })
+          }"
+        >
+          <NativeSelectOption v-for="(month) in createYear({ dateObj: date })" :key="month.toString()" :value="month.month" :selected="date.month === month.month">
+            {{ formatter.custom(toDate(month), { month: 'short' }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineMonthTemplate>
+
+  <DefineYearTemplate v-slot="{ date }">
+    <div class="**:data-[slot=native-select-icon]:right-1">
+      <div class="relative">
+        <div class="absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none">
+          {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+        </div>
+        <NativeSelect
+          class="text-xs h-8 pr-6 pl-2 text-transparent relative"
+          @change="(e: Event) => {
+            placeholder = placeholder.set({
+              year: Number((e?.target as any)?.value),
+            })
+          }"
+        >
+          <NativeSelectOption v-for="(year) in yearRange" :key="year.toString()" :value="year.year" :selected="date.year === year.year">
+            {{ formatter.custom(toDate(year), { year: 'numeric' }) }}
+          </NativeSelectOption>
+        </NativeSelect>
+      </div>
+    </div>
+  </DefineYearTemplate>
+
+  <CalendarRoot
+    v-slot="{ grid, weekDays, date }"
+    v-bind="forwarded"
+    v-model:placeholder="placeholder"
+    data-slot="calendar"
+    :class="cn('p-3', props.class)"
+  >
+    <CalendarHeader class="pt-0">
+      <nav class="flex items-center gap-1 absolute top-0 inset-x-0 justify-between">
+        <CalendarPrevButton>
+          <slot name="calendar-prev-icon" />
+        </CalendarPrevButton>
+        <CalendarNextButton>
+          <slot name="calendar-next-icon" />
+        </CalendarNextButton>
+      </nav>
+
+      <slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
+        <template v-if="layout === 'month-and-year'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else-if="layout === 'month-only'">
+          <div class="flex items-center justify-center gap-1">
+            <ReuseMonthTemplate :date="date" />
+            {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
+          </div>
+        </template>
+        <template v-else-if="layout === 'year-only'">
+          <div class="flex items-center justify-center gap-1">
+            {{ formatter.custom(toDate(date), { month: 'short' }) }}
+            <ReuseYearTemplate :date="date" />
+          </div>
+        </template>
+        <template v-else>
+          <CalendarHeading />
+        </template>
+      </slot>
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>

src/components/ui/calendar/CalendarCell.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    data-slot="calendar-cell"
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>

src/components/ui/calendar/CalendarCellTrigger.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarCellTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "button",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    data-slot="calendar-cell-trigger"
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>

src/components/ui/calendar/CalendarGrid.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarGridProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarGrid, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    data-slot="calendar-grid"
+    :class="cn('w-full border-collapse space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>

src/components/ui/calendar/CalendarGridBody.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { CalendarGridBodyProps } from "reka-ui"
+import { CalendarGridBody } from "reka-ui"
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody
+    data-slot="calendar-grid-body"
+    v-bind="props"
+  >
+    <slot />
+  </CalendarGridBody>
+</template>

src/components/ui/calendar/CalendarGridHead.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { CalendarGridHeadProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { CalendarGridHead } from "reka-ui"
+
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <CalendarGridHead
+    data-slot="calendar-grid-head"
+    v-bind="props"
+  >
+    <slot />
+  </CalendarGridHead>
+</template>

src/components/ui/calendar/CalendarGridRow.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { CalendarGridRowProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarGridRow, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow
+    data-slot="calendar-grid-row"
+    :class="cn('flex', props.class)" v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGridRow>
+</template>

src/components/ui/calendar/CalendarHeadCell.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarHeadCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeadCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell
+    data-slot="calendar-head-cell"
+    :class="cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeadCell>
+</template>

src/components/ui/calendar/CalendarHeader.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarHeaderProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeader, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader
+    data-slot="calendar-header"
+    :class="cn('flex justify-center pt-1 relative items-center w-full px-8', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarHeader>
+</template>

src/components/ui/calendar/CalendarHeading.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { CalendarHeadingProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CalendarHeading, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    data-slot="calendar-heading"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>

src/components/ui/calendar/CalendarNextButton.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { CalendarNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { CalendarNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    data-slot="calendar-next-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="size-4" />
+    </slot>
+  </CalendarNext>
+</template>

src/components/ui/calendar/CalendarPrevButton.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { CalendarPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeft } from "lucide-vue-next"
+import { CalendarPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    data-slot="calendar-prev-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="size-4" />
+    </slot>
+  </CalendarPrev>
+</template>

src/components/ui/calendar/index.ts

@@ -0,0 +1,14 @@
+export { default as Calendar } from "./Calendar.vue"
+export { default as CalendarCell } from "./CalendarCell.vue"
+export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue"
+export { default as CalendarGrid } from "./CalendarGrid.vue"
+export { default as CalendarGridBody } from "./CalendarGridBody.vue"
+export { default as CalendarGridHead } from "./CalendarGridHead.vue"
+export { default as CalendarGridRow } from "./CalendarGridRow.vue"
+export { default as CalendarHeadCell } from "./CalendarHeadCell.vue"
+export { default as CalendarHeader } from "./CalendarHeader.vue"
+export { default as CalendarHeading } from "./CalendarHeading.vue"
+export { default as CalendarNextButton } from "./CalendarNextButton.vue"
+export { default as CalendarPrevButton } from "./CalendarPrevButton.vue"
+
+export type LayoutTypes = "month-and-year" | "month-only" | "year-only" | undefined

src/components/ui/native-select/NativeSelect.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { AcceptableValue } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit, useVModel } from "@vueuse/core"
+import { ChevronDownIcon } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes["class"] }>()
+
+const emit = defineEmits<{
+  "update:modelValue": AcceptableValue
+}>()
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: "",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <div
+    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+    data-slot="native-select-wrapper"
+  >
+    <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      v-model="modelValue"
+      data-slot="native-select"
+      :class="cn(
+        'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class,
+      )"
+    >
+      <slot />
+    </select>
+    <ChevronDownIcon
+      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </div>
+</template>

src/components/ui/native-select/NativeSelectOptGroup.vue

@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <optgroup v-bind="{ 'data-slot': 'native-select-optgroup' }" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </optgroup>
+</template>

src/components/ui/native-select/NativeSelectOption.vue

@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <option v-bind="{ 'data-slot': 'native-select-option' }" :class="cn('bg-popover text-popover-foreground', props.class)">
+    <slot />
+  </option>
+</template>

src/components/ui/native-select/index.ts

@@ -0,0 +1,3 @@
+export { default as NativeSelect } from "./NativeSelect.vue"
+export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.vue"
+export { default as NativeSelectOption } from "./NativeSelectOption.vue"

src/components/ui/popover/Popover.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot
+    v-slot="slotProps"
+    data-slot="popover"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </PopoverRoot>
+</template>

src/components/ui/popover/PopoverAnchor.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from "reka-ui"
+import { PopoverAnchor } from "reka-ui"
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+  <PopoverAnchor
+    data-slot="popover-anchor"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverAnchor>
+</template>

src/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

src/components/ui/popover/PopoverTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger
+    data-slot="popover-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>

src/components/ui/popover/index.ts

@@ -0,0 +1,4 @@
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverAnchor } from "./PopoverAnchor.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
+export { default as PopoverTrigger } from "./PopoverTrigger.vue"

src/lib/api.ts

@@ -103,6 +103,7 @@ interface APIToken {
 interface SiteConfig {
   name: string
   description: string
+  logo?: string
 }
 
 interface UploadConfig {
@@ -284,7 +285,7 @@ export const adminApi = {
   },
 
   // 获取系统配置
-  getConfig: (): Promise<AxiosResponse<SystemConfig>> => {
+  getConfig: (): Promise<AxiosResponse<ApiResponse<SystemConfig>>> => {
     return api.get('/admin/config')
   },
 

src/style.css

@@ -118,3 +118,33 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* 优化表单元素间距 */
+@layer components {
+  /* 减小Label后面的表单元素的上边距 */
+  label + input,
+  label + textarea,
+  label + select,
+  label + .mt-2 {
+    margin-top: 0.375rem !important; /* 6px instead of 8px */
+  }
+  
+  /* Select组件特殊处理 - 使用data-slot属性选择器 */
+  label + [data-slot="select"],
+  [data-slot="label"] + [data-slot="select"] {
+    margin-top: 0.375rem !important;
+  }
+  
+  /* Card内容区域的表单间距优化 */
+  [data-slot="card-content"] .space-y-5 > div > label + *,
+  [data-slot="card-content"] .space-y-4 > div > label + *,
+  [data-slot="card-content"] .space-y-3 > div > label + * {
+    margin-top: 0.375rem !important;
+  }
+  
+  /* 确保Card内的Select也有间距 */
+  [data-slot="card-content"] [data-slot="label"] + [data-slot="select"],
+  [data-slot="card-content"] label + [data-slot="select"] {
+    margin-top: 0.375rem !important;
+  }
+}

src/views/HomePage.vue

@@ -1,46 +1,94 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
+  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
     <NavBar :showDescription="true" />
-    <div class="container mx-auto px-4 py-8">
+    <div class="container mx-auto px-4" :class="!batchData ? 'flex items-center min-h-[calc(100vh-4rem)]' : 'py-6'">
       <!-- 主要内容区域 -->
-      <div class="max-w-2xl mx-auto">
+      <div class="max-w-2xl mx-auto" :class="!batchData ? 'w-full' : ''">
         <!-- 取件区域 -->
-        <Card v-if="!batchData" class="shadow-lg border-0 mb-6">
-          <CardContent class="pt-8 pb-6">
-            <div class="text-center mb-6">
-              <h2 class="text-2xl font-semibold text-gray-900 mb-2">文件取件</h2>
-              <p class="text-gray-600">请输入您的取件码</p>
+        <Card v-if="!batchData" class="shadow-2xl border-0 overflow-hidden">
+          <CardContent class="pt-12 pb-10">
+            <div class="text-center mb-10">
+              <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 mb-6 shadow-lg">
+                <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
+                </svg>
+              </div>
+              <h2 class="text-3xl font-bold text-gray-900 mb-3">文件取件</h2>
+              <p class="text-base text-gray-600">输入取件码即可安全获取文件</p>
             </div>
             
-            <div class="space-y-4">
-              <div class="flex flex-col sm:flex-row gap-3">
-                <Input
+            <div class="flex flex-col items-center space-y-6">
+              <!-- InputOTP 组件 -->
+              <div class="flex justify-center p-6 bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl shadow-inner">
+                <InputOTP
                   v-model="pickupCode"
-                  placeholder="请输入取件码..."
-                  class="flex-1 text-center text-lg py-3 tracking-widest"
-                  @keyup.enter="handlePickup"
-                  maxlength="20"
-                />
-                <Button 
-                  @click="handlePickup" 
-                  :disabled="!pickupCode || loading" 
-                  size="lg" 
-                  class="px-8"
+                  :maxlength="pickupCodeLength"
+                  :disabled="loading"
                 >
-                  <svg v-if="loading" class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                  </svg>
-                  {{ loading ? '获取中...' : '提取文件' }}
-                </Button>
+                  <InputOTPGroup>
+                    <InputOTPSlot
+                      v-for="index in pickupCodeLength"
+                      :key="index"
+                      :index="index - 1"
+                    />
+                  </InputOTPGroup>
+                </InputOTP>
               </div>
               
-              <div class="text-center">
-                <Button variant="outline" @click="pasteFromClipboard" size="sm">
+              <!-- 加载提示 -->
+              <div v-if="loading" class="text-center text-base text-blue-600 flex items-center animate-pulse">
+                <svg class="animate-spin -ml-1 mr-3 h-5 w-5" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                正在获取文件，请稍候...
+              </div>
+              
+              <div v-else class="text-center">
+                <div class="inline-flex items-center px-5 py-2.5 rounded-full transition-all" :class="pickupCode === '' ? 'bg-gray-100' : 'bg-gradient-to-r from-blue-100 to-purple-100'">
+                  <svg v-if="pickupCode === ''" class="w-5 h-5 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                  </svg>
+                  <svg v-else class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
+                  </svg>
+                  <span class="text-sm font-medium" :class="pickupCode === '' ? 'text-gray-600' : 'text-blue-700'">
+                    <template v-if="pickupCode === ''">
+                      请输入 {{ pickupCodeLength }} 位取件码
+                    </template>
+                    <template v-else>
+                      {{ pickupCode.length }} / {{ pickupCodeLength }}
+                    </template>
+                  </span>
+                </div>
+              </div>
+              
+              <!-- 粘贴和清空按钮 -->
+              <div class="flex items-center justify-center gap-3">
+                <Button 
+                  variant="ghost" 
+                  @click="pasteFromClipboard" 
+                  size="default"
+                  class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-all"
+                >
                   <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                   </svg>
-                  粘贴取件码
+                  从剪贴板粘贴
+                </Button>
+                
+                <!-- 清空按钮 -->
+                <Button 
+                  v-if="pickupCode" 
+                  variant="ghost" 
+                  @click="pickupCode = ''" 
+                  size="default"
+                  class="text-gray-600 hover:text-red-600 hover:bg-red-50 transition-all"
+                >
+                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                  </svg>
+                  清空重试
                 </Button>
               </div>
             </div>
@@ -48,164 +96,231 @@
         </Card>
 
         <!-- 文件展示区域 -->
-        <div v-if="batchData" class="space-y-6">
+        <div v-if="batchData" class="space-y-4">
           <!-- 批次信息 -->
-          <Card class="shadow-lg border-0">
-            <CardHeader>
-              <div class="flex items-center justify-between">
+          <Card class="shadow-md">
+            <CardHeader class="pb-4">
+              <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                 <div>
-                  <CardTitle class="flex items-center">
-                    <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <CardTitle class="flex items-center text-base mb-1.5">
+                    <svg class="w-4 h-4 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                     </svg>
                     提取成功
                   </CardTitle>
-                  <CardDescription>
-                    取件码: {{ currentCode }}
-                  </CardDescription>
-                </div>
-                <div class="flex items-center space-x-2">
-                  <Badge :variant="batchData.download_count < (batchData.max_downloads || Infinity) ? 'default' : 'secondary'">
-                    {{ batchData.type === 'text' ? '文本内容' : `${batchData.files?.length || 0} 个文件` }}
-                  </Badge>
-                  <Button variant="outline" size="sm" @click="reset">
-                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-                    </svg>
-                    重新取件
-                  </Button>
+                  <div class="flex items-center gap-2">
+                    <CardDescription class="text-xs">
+                      取件码: {{ currentCode }}
+                    </CardDescription>
+                    <Badge :variant="batchData.download_count < (batchData.max_downloads || Infinity) ? 'default' : 'secondary'" class="text-xs">
+                      {{ batchData.type === 'text' ? '文本' : `${batchData.files?.length || 0}个文件` }}
+                    </Badge>
+                  </div>
                 </div>
+                <Button variant="outline" size="sm" @click="reset" class="h-8 text-xs w-full sm:w-auto">
+                  <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+                  </svg>
+                  重新取件
+                </Button>
               </div>
             </CardHeader>
-            <CardContent>
-              <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-                <div class="flex justify-between">
-                  <span class="text-gray-600">类型:</span>
-                  <span>{{ batchData.type === 'text' ? '文本' : '文件' }}</span>
+            <CardContent class="pt-0">
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs">
+                <div class="flex items-center gap-2">
+                  <span class="text-gray-600 font-medium min-w-[60px]">类型</span>
+                  <span class="text-gray-900">{{ batchData.type === 'text' ? '文本' : '文件' }}</span>
                 </div>
-                <div class="flex justify-between">
-                  <span class="text-gray-600">下载次数:</span>
-                  <span>{{ batchData.download_count }}{{ batchData.max_downloads ? ` / ${batchData.max_downloads}` : '' }}</span>
+                <div class="flex items-center gap-2">
+                  <span class="text-gray-600 font-medium min-w-[60px]">下载次数</span>
+                  <span class="text-gray-900">{{ batchData.download_count }}{{ batchData.max_downloads ? ` / ${batchData.max_downloads}` : '' }}</span>
                 </div>
-                <div v-if="batchData.expire_at" class="flex justify-between">
-                  <span class="text-gray-600">过期时间:</span>
-                  <span>{{ formatDate(batchData.expire_at) }}</span>
+                <div v-if="batchData.expire_at" class="flex items-center gap-2">
+                  <span class="text-gray-600 font-medium min-w-[60px]">过期时间</span>
+                  <span class="text-gray-900">{{ formatDate(batchData.expire_at) }}</span>
                 </div>
-                <div v-if="batchData.remark" class="flex justify-between">
-                  <span class="text-gray-600">备注:</span>
-                  <span class="truncate">{{ batchData.remark }}</span>
+                <div v-if="batchData.remark" class="flex items-center gap-2">
+                  <span class="text-gray-600 font-medium min-w-[60px]">备注</span>
+                  <span class="text-gray-900 truncate">{{ batchData.remark }}</span>
                 </div>
               </div>
             </CardContent>
           </Card>
 
           <!-- 文本内容 -->
-          <Card v-if="batchData.type === 'text'" class="shadow-lg border-0">
-            <CardHeader>
+          <Card v-if="batchData.type === 'text'" class="shadow-md">
+            <CardHeader class="pb-3">
               <div class="flex items-center justify-between">
-                <CardTitle>文本内容</CardTitle>
-                <Button @click="copyText" size="sm">
-                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <CardTitle class="text-base">文本内容</CardTitle>
+                <Button @click="copyText" size="sm" class="h-8 text-xs">
+                  <svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                   </svg>
-                  复制文本
+                  复制
                 </Button>
               </div>
             </CardHeader>
-            <CardContent>
-              <div class="bg-gray-50 p-4 rounded-lg border max-h-96 overflow-y-auto">
-                <pre class="whitespace-pre-wrap text-sm">{{ batchData.content }}</pre>
+            <CardContent class="pt-3">
+              <div class="bg-gray-50 p-3 rounded-lg border max-h-80 overflow-y-auto">
+                <pre class="whitespace-pre-wrap text-sm text-gray-800">{{ batchData.content }}</pre>
               </div>
             </CardContent>
           </Card>
 
           <!-- 文件列表 -->
-          <Card v-if="batchData.type === 'file' && batchData.files" class="shadow-lg border-0">
-            <CardHeader>
+          <Card v-if="batchData.type === 'file' && batchData.files" class="shadow-md">
+            <CardHeader class="pb-3">
               <div class="flex items-center justify-between">
                 <div>
-                  <CardTitle>文件列表</CardTitle>
-                  <CardDescription>
-                    共 {{ batchData.files.length }} 个文件，总大小 {{ totalFileSize }}
+                  <CardTitle class="text-base">文件列表</CardTitle>
+                  <CardDescription class="text-xs">
+                    共 {{ batchData.files.length }} 个文件，{{ totalFileSize }}
                   </CardDescription>
                 </div>
                 <Button 
                   @click="downloadAll" 
                   :disabled="downloading"
                   size="sm"
+                  class="h-8 text-xs"
                 >
-                  <svg v-if="downloading" class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
+                  <svg v-if="downloading" class="animate-spin -ml-1 mr-1.5 h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                   </svg>
-                  <svg v-else class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg v-else class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M7 7h10a2 2 0 012 2v6a2 2 0 01-2 2H7a2 2 0 01-2-2V9a2 2 0 012-2z"></path>
                   </svg>
-                  {{ downloading ? '打包中...' : '打包下载' }}
+                  {{ downloading ? '打包中' : '打包下载' }}
                 </Button>
               </div>
             </CardHeader>
-            <CardContent>
-              <div class="space-y-3">
+            <CardContent class="pt-3">
+              <div class="space-y-2">
                 <div
                   v-for="file in batchData.files"
                   :key="file.id"
                   class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
                 >
                   <div class="flex items-center space-x-3 flex-1">
-                    <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
+                    <div class="w-9 h-9 rounded-lg bg-blue-100 flex items-center justify-center">
                       <component :is="getFileIconComponent(file.original_name)" class="w-5 h-5 text-blue-600" />
                     </div>
                     <div class="flex-1 min-w-0">
                       <h4 class="text-sm font-medium text-gray-900 truncate">
                         {{ file.original_name }}
                       </h4>
-                      <div class="flex items-center space-x-4 text-xs text-gray-500">
+                      <div class="flex items-center space-x-3 text-xs text-gray-500 mt-0.5">
                         <span>{{ formatFileSize(file.size) }}</span>
                         <span>{{ file.mime_type }}</span>
                       </div>
                     </div>
                   </div>
-                  <Button 
-                    @click="downloadFile(file)" 
-                    :disabled="downloadingFiles.has(file.id)"
-                    variant="outline" 
-                    size="sm"
-                  >
-                    <svg v-if="downloadingFiles.has(file.id)" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
-                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                    <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-                    </svg>
-                  </Button>
+                  <div class="flex items-center gap-2">
+                    <Button 
+                      @click="downloadFile(file)" 
+                      :disabled="downloadingFiles.has(file.id)"
+                      size="sm"
+                      class="h-8 text-xs"
+                    >
+                      <svg v-if="downloadingFiles.has(file.id)" class="animate-spin h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                      <svg v-else class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                      </svg>
+                    </Button>
+                    
+                    <Popover>
+                      <PopoverTrigger as-child>
+                        <Button 
+                          variant="outline"
+                          size="sm"
+                          class="h-8 w-8 p-0"
+                          title="复制下载命令"
+                        >
+                          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                          </svg>
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent class="w-80" align="end">
+                        <div class="space-y-3">
+                          <div>
+                            <h4 class="font-medium text-sm mb-2">复制下载命令</h4>
+                            <p class="text-xs text-gray-500 mb-3">选择一种命令行工具复制下载命令</p>
+                          </div>
+                          
+                          <div class="space-y-2">
+                            <Button 
+                              variant="outline" 
+                              size="sm"
+                              class="w-full justify-start text-xs font-mono"
+                              @click="copyToClipboard(getDownloadCommands(file).url, '下载链接')"
+                            >
+                              <svg class="w-3.5 h-3.5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
+                              </svg>
+                              复制 URL
+                            </Button>
+                            
+                            <Button 
+                              variant="outline" 
+                              size="sm"
+                              class="w-full justify-start text-xs font-mono"
+                              @click="copyToClipboard(getDownloadCommands(file).wget, 'wget 命令')"
+                            >
+                              <svg class="w-3.5 h-3.5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                              </svg>
+                              wget
+                            </Button>
+                            
+                            <Button 
+                              variant="outline" 
+                              size="sm"
+                              class="w-full justify-start text-xs font-mono"
+                              @click="copyToClipboard(getDownloadCommands(file).curl, 'curl 命令')"
+                            >
+                              <svg class="w-3.5 h-3.5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                              </svg>
+                              curl
+                            </Button>
+                            
+                            <Button 
+                              variant="outline" 
+                              size="sm"
+                              class="w-full justify-start text-xs font-mono"
+                              @click="copyToClipboard(getDownloadCommands(file).powershell, 'PowerShell 命令')"
+                            >
+                              <svg class="w-3.5 h-3.5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                              </svg>
+                              PowerShell
+                            </Button>
+                            
+                            <Button 
+                              variant="outline" 
+                              size="sm"
+                              class="w-full justify-start text-xs font-mono"
+                              @click="copyToClipboard(getDownloadCommands(file).aria2c, 'aria2c 命令')"
+                            >
+                              <svg class="w-3.5 h-3.5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path>
+                              </svg>
+                              aria2c
+                            </Button>
+                          </div>
+                        </div>
+                      </PopoverContent>
+                    </Popover>
+                  </div>
                 </div>
               </div>
             </CardContent>
           </Card>
         </div>
-
-        <!-- 发送文件入口 -->
-        <div v-if="!batchData" class="text-center">
-          <div class="relative">
-            <div class="absolute inset-0 flex items-center">
-              <div class="w-full border-t border-gray-300" />
-            </div>
-            <div class="relative flex justify-center text-sm">
-              <span class="bg-gray-50 px-4 text-gray-500">或者</span>
-            </div>
-          </div>
-
-          <div class="mt-6">
-            <Button @click="router.push('/upload')" size="lg" variant="outline" class="w-full sm:w-auto">
-              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
-              </svg>
-              发送文件或文本
-            </Button>
-          </div>
-        </div>
       </div>
     </div>
 
@@ -215,21 +330,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, h } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, computed, h, watch, onMounted } from 'vue'
 import { toast } from 'vue-sonner'
 
 // 组件导入
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Toaster } from '@/components/ui/sonner'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import NavBar from '@/components/ui/NavBar.vue'
 // API 和工具导入
 import { publicApi, utils, type PickupResponse, type FileItem } from '@/lib/api'
+import { usePublicConfig } from '@/composables/usePublicConfig'
 
-const router = useRouter()
+const { config, loadConfig } = usePublicConfig()
 
 // 响应式数据
 const pickupCode = ref('')
@@ -239,6 +355,9 @@ const loading = ref(false)
 const downloading = ref(false)
 const downloadingFiles = ref(new Set<string>())
 
+// 计算取件码长度
+const pickupCodeLength = computed(() => config.value.security?.pickup_code_length || 6)
+
 // 计算属性
 const totalFileSize = computed(() => {
   if (!batchData.value?.files) return '0 B'
@@ -265,20 +384,34 @@ const handlePickup = async () => {
       throw new Error(response.data.msg || '获取失败')
     }
   } catch (error: any) {
+    // 查询失败后清空输入框，方便用户重新输入
+    const errorCode = pickupCode.value
+    pickupCode.value = ''
+    
     // 不在控制台显示业务异常（如404等）
     if (error.response?.status >= 400 && error.response?.status < 500) {
       // 客户端错误，只显示toast，不打印到控制台
       if (error.response?.status === 404) {
-        toast.error('取件码不存在或已过期')
+        toast.error('取件码不存在或已过期，请检查后重新输入', {
+          duration: 4000,
+          description: `输入的取件码：${errorCode}`
+        })
       } else if (error.response?.status === 410) {
-        toast.error('文件已过期或达到下载限制')
+        toast.error('文件已过期或达到下载限制', {
+          duration: 4000,
+          description: `取件码：${errorCode}`
+        })
       } else {
-        toast.error(error.response?.data?.msg || '获取失败，请重试')
+        toast.error(error.response?.data?.msg || '获取失败，请重试', {
+          duration: 3000
+        })
       }
     } else {
       // 服务器错误或网络错误，记录到控制台用于调试
       console.error('获取批次失败:', error)
-      toast.error(error.response?.data?.msg || '获取失败，请重试')
+      toast.error(error.response?.data?.msg || '获取失败，请重试', {
+        duration: 3000
+      })
     }
   } finally {
     loading.value = false
@@ -289,8 +422,12 @@ const pasteFromClipboard = async () => {
   try {
     const text = await navigator.clipboard.readText()
     if (text.trim()) {
-      pickupCode.value = text.trim()
+      const trimmedText = text.trim()
+      pickupCode.value = trimmedText
       toast.success('已粘贴取件码')
+      
+      // watch监听会自动触发查询，无需手动调用handlePickup
+      // 如果长度匹配，watch会立即触发handlePickup()
     } else {
       toast.warning('剪贴板中没有内容')
     }
@@ -310,12 +447,35 @@ const copyText = async () => {
   }
 }
 
+// 刷新批次详情
+const refreshBatchData = async () => {
+  if (!currentCode.value) return
+  
+  try {
+    const response = await publicApi.getBatch(currentCode.value)
+    if (response.data.code === 200) {
+      batchData.value = response.data.data
+    }
+  } catch (error) {
+    // 刷新失败不显示错误，避免影响用户体验
+    console.error('刷新批次详情失败:', error)
+  }
+}
+
 const downloadFile = async (file: FileItem) => {
   downloadingFiles.value.add(file.id)
   try {
     const response = await publicApi.downloadFile(file.id)
     utils.downloadBlob(response.data, file.original_name)
     toast.success(`下载 ${file.original_name} 成功`)
+    
+    // 仅文件类型的批次下载后刷新，避免文本类型增加查询次数
+    // 文件下载成功后需要刷新批次信息以更新下载次数
+    if (batchData.value?.type === 'file') {
+      // 稍微延迟一下再刷新，确保后端已经更新了下载次数
+      await new Promise(resolve => setTimeout(resolve, 100))
+      await refreshBatchData()
+    }
   } catch (error: any) {
     // 不在控制台显示业务异常（如404等）
     if (error.response?.status >= 400 && error.response?.status < 500) {
@@ -337,6 +497,31 @@ const downloadFile = async (file: FileItem) => {
   }
 }
 
+// 生成下载命令
+const getDownloadCommands = (file: FileItem) => {
+  const baseUrl = window.location.origin
+  const downloadUrl = `${baseUrl}/api/files/${file.id}/download`
+  const filename = file.original_name
+  
+  return {
+    url: downloadUrl,
+    wget: `wget -O "${filename}" "${downloadUrl}"`,
+    curl: `curl -o "${filename}" "${downloadUrl}"`,
+    powershell: `Invoke-WebRequest -Uri "${downloadUrl}" -OutFile "${filename}"`,
+    aria2c: `aria2c -o "${filename}" "${downloadUrl}"`
+  }
+}
+
+// 复制到剪贴板
+const copyToClipboard = async (text: string, label: string) => {
+  try {
+    await navigator.clipboard.writeText(text)
+    toast.success(`${label}已复制到剪贴板`)
+  } catch (error) {
+    toast.error('复制失败，请手动复制')
+  }
+}
+
 const downloadAll = async () => {
   if (!currentCode.value) return
 
@@ -346,6 +531,14 @@ const downloadAll = async () => {
     const filename = `files_${currentCode.value}.zip`
     utils.downloadBlob(response.data, filename)
     toast.success('打包下载成功')
+    
+    // 仅文件类型的批次下载后刷新，避免文本类型增加查询次数
+    // 打包下载成功后需要刷新批次信息以更新下载次数
+    if (batchData.value?.type === 'file') {
+      // 稍微延迟一下再刷新，确保后端已经更新了下载次数
+      await new Promise(resolve => setTimeout(resolve, 100))
+      await refreshBatchData()
+    }
   } catch (error: any) {
     // 不在控制台显示业务异常（如404等）
     if (error.response?.status >= 400 && error.response?.status < 500) {
@@ -382,6 +575,18 @@ const formatDate = (dateString: string): string => {
 }
 
 // 图标组件映射
+// 监听取件码变化，自动触发提取
+watch(pickupCode, (newCode) => {
+  if (newCode.length === pickupCodeLength.value) {
+    handlePickup()
+  }
+})
+
+// 组件挂载时加载配置
+onMounted(() => {
+  loadConfig()
+})
+
 const getFileIconComponent = (filename: string) => {
   const icon = utils.getFileTypeIcon(filename)
   

src/views/PickupPage.vue

@@ -304,14 +304,26 @@ const fetchBatch = async (code?: string) => {
       throw new Error(response.data.msg || '获取失败')
     }
   } catch (error: any) {
+    // 查询失败后清空输入框，方便用户重新输入
+    const errorCode = pickupCode
+    inputCode.value = ''
+    
     console.error('获取批次失败:', error)
     
     if (error.response?.status === 404) {
-      toast.error('取件码不存在或已过期')
+      toast.error('取件码不存在或已过期，请检查后重新输入', {
+        duration: 4000,
+        description: `输入的取件码：${errorCode}`
+      })
     } else if (error.response?.status === 410) {
-      toast.error('文件已过期或达到下载限制')
+      toast.error('文件已过期或达到下载限制', {
+        duration: 4000,
+        description: `取件码：${errorCode}`
+      })
     } else {
-      toast.error(error.response?.data?.msg || '获取失败，请重试')
+      toast.error(error.response?.data?.msg || '获取失败，请重试', {
+        duration: 3000
+      })
     }
   } finally {
     loading.value = false

src/views/UploadPage.vue

@@ -1,22 +1,22 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
-    <NavBar />
-    <div class="container mx-auto px-4 py-8">
+  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+    <NavBar :showDescription="true" />
+    <div class="container mx-auto px-4 py-6">
       <div class="max-w-4xl mx-auto">
+        
         <!-- 上传类型切换 -->
         <div class="w-full">
-          <!-- 自定义Tab组件 -->
-          <div class="flex rounded-lg bg-gray-100 p-1 mb-8">
+          <div class="flex gap-2 mb-6">
             <button
               @click="activeTab = 'file'"
               :class="[
-                'flex-1 flex items-center justify-center py-3 px-4 text-lg font-medium rounded-md transition-all duration-200',
+                'flex-1 flex items-center justify-center py-2.5 px-4 text-sm font-medium rounded-lg transition-colors',
                 activeTab === 'file' 
-                  ? 'bg-white text-gray-900 shadow-sm' 
-                  : 'text-gray-500 hover:text-gray-700'
+                  ? 'bg-blue-600 text-white' 
+                  : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
               ]"
             >
-              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
               </svg>
               文件上传
@@ -24,13 +24,13 @@
             <button
               @click="activeTab = 'text'"
               :class="[
-                'flex-1 flex items-center justify-center py-3 px-4 text-lg font-medium rounded-md transition-all duration-200',
+                'flex-1 flex items-center justify-center py-2.5 px-4 text-sm font-medium rounded-lg transition-colors',
                 activeTab === 'text'
-                  ? 'bg-white text-gray-900 shadow-sm'
-                  : 'text-gray-500 hover:text-gray-700'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
               ]"
             >
-              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
               </svg>
               文本保存
@@ -38,23 +38,23 @@
           </div>
 
           <!-- 内容区域 -->
-          <div class="space-y-8">
+          <div class="space-y-4">
             <!-- 文件上传界面 -->
-            <div v-show="activeTab === 'file'" class="space-y-6">
+            <div v-show="activeTab === 'file'" class="space-y-3">
               <!-- 文件选择区域 -->
-              <Card class="border-0 shadow-lg">
-                <CardHeader>
-                  <CardTitle>选择文件</CardTitle>
-                  <CardDescription>
-                    支持拖拽或点击选择文件，可批量上传多个文件
+              <Card class="shadow-sm">
+                <CardHeader class="pb-2">
+                  <CardTitle class="text-base font-semibold">选择文件</CardTitle>
+                  <CardDescription class="text-xs">
+                    支持拖拽或点击选择，可批量上传
                   </CardDescription>
                 </CardHeader>
-                <CardContent>
+                <CardContent class="pt-2">
                   <div
-                    class="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center hover:border-gray-400 transition-colors cursor-pointer"
+                    class="border-2 border-dashed rounded-lg p-6 text-center transition-colors cursor-pointer"
                     :class="{
-                      'border-blue-400 bg-blue-50': isDragging,
-                      'border-gray-300': !isDragging
+                      'border-blue-500 bg-blue-50': isDragging,
+                      'border-gray-300 hover:border-blue-400 hover:bg-gray-50': !isDragging
                     }"
                     @click="triggerFileInput"
                     @dragover.prevent="isDragging = true"
@@ -69,89 +69,83 @@
                       @change="handleFileSelect"
                     />
                     
-                    <svg class="mx-auto h-16 w-16 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <svg class="mx-auto h-10 w-10 mb-2" :class="isDragging ? 'text-blue-600' : 'text-gray-400'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                     </svg>
                     
-                    <div class="space-y-2">
-                      <p class="text-lg text-gray-600">
-                        {{ isDragging ? '释放文件到此处' : '点击选择文件或拖拽到此处' }}
+                    <div class="space-y-0.5">
+                      <p class="text-sm font-medium" :class="isDragging ? 'text-blue-600' : 'text-gray-700'">
+                        {{ isDragging ? '释放文件到此处' : '点击或拖拽文件到此处' }}
                       </p>
-                      <p class="text-sm text-gray-400">
+                      <p class="text-xs text-gray-500">
                         支持任意格式文件，单文件最大 {{ publicConfig.getFileSizeLimit() }}，最多 {{ config.upload?.max_batch_files || 10 }} 个文件
                       </p>
                     </div>
                   </div>
 
                   <!-- 已选择的文件列表 -->
-                  <div v-if="selectedFiles.length > 0" class="mt-6">
-                    <h3 class="text-sm font-medium text-gray-900 mb-3">
-                      已选择 {{ selectedFiles.length }} 个文件 
-                      <span class="text-gray-500">({{ totalSize }})</span>
-                    </h3>
+                  <div v-if="selectedFiles.length > 0" class="mt-4">
+                    <div class="flex items-center justify-between mb-2">
+                      <h3 class="text-xs font-medium text-gray-700">
+                        已选择 {{ selectedFiles.length }} 个文件 ({{ totalSize }})
+                      </h3>
+                      <Button
+                        @click="clearFiles"
+                        variant="ghost"
+                        size="sm"
+                        class="h-7 text-xs"
+                      >
+                        清空
+                      </Button>
+                    </div>
                     
-                    <div class="space-y-2 max-h-64 overflow-y-auto">
+                    <div class="space-y-1.5 max-h-40 overflow-y-auto">
                       <div
                         v-for="(file, index) in selectedFiles"
                         :key="index"
-                        class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+                        class="flex items-center justify-between p-2 bg-gray-50 rounded hover:bg-gray-100"
                       >
-                        <div class="flex items-center space-x-3 flex-1 min-w-0">
-                          <div class="w-8 h-8 rounded bg-blue-100 flex items-center justify-center flex-shrink-0">
-                            <component :is="getFileIconComponent(file.name)" class="w-4 h-4 text-blue-600" />
+                        <div class="flex items-center space-x-2 flex-1 min-w-0">
+                          <div class="w-7 h-7 rounded bg-blue-100 flex items-center justify-center flex-shrink-0">
+                            <component :is="getFileIconComponent(file.name)" class="w-3.5 h-3.5 text-blue-600" />
                           </div>
                           <div class="flex-1 min-w-0">
-                            <p class="text-sm font-medium text-gray-900 truncate">
-                              {{ file.name }}
-                            </p>
-                            <p class="text-xs text-gray-500">
-                              {{ formatFileSize(file.size) }}
-                            </p>
+                            <p class="text-xs font-medium text-gray-900 truncate">{{ file.name }}</p>
+                            <p class="text-xs text-gray-500">{{ formatFileSize(file.size) }}</p>
                           </div>
                         </div>
                         
-                        <Button
+                        <button
                           @click="removeFile(index)"
-                          variant="ghost"
-                          size="sm"
-                          class="text-red-600 hover:text-red-700"
+                          class="p-1 text-gray-400 hover:text-red-600 transition-colors"
                         >
                           <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                           </svg>
-                        </Button>
+                        </button>
                       </div>
                     </div>
-
-                    <Button
-                      @click="clearFiles"
-                      variant="outline"
-                      size="sm"
-                      class="mt-3"
-                    >
-                      清空列表
-                    </Button>
                   </div>
                 </CardContent>
               </Card>
             </div>
 
             <!-- 文本保存界面 -->
-            <div v-show="activeTab === 'text'" class="space-y-6">
-              <Card class="border-0 shadow-lg">
-                <CardHeader>
-                  <CardTitle>输入文本内容</CardTitle>
-                  <CardDescription>
-                    输入要保存和分享的文本内容
+            <div v-show="activeTab === 'text'" class="space-y-3">
+              <Card class="shadow-sm">
+                <CardHeader class="pb-2">
+                  <CardTitle class="text-base font-semibold">输入文本内容</CardTitle>
+                  <CardDescription class="text-xs">
+                    输入要保存和分享的文本
                   </CardDescription>
                 </CardHeader>
-                <CardContent>
+                <CardContent class="pt-2">
                   <div>
                     <Textarea
                       v-model="textContent"
                       placeholder="请输入要保存的文本内容..."
-                      class="min-h-[300px] resize-none"
-                      rows="12"
+                      class="min-h-[180px] resize-none text-sm"
+                      rows="8"
                     />
                     
                     <div class="mt-2 flex justify-between text-sm text-gray-500">
@@ -169,75 +163,78 @@
             </div>
 
             <!-- 共用配置区域 -->
-            <Card v-if="activeTab === 'file' ? selectedFiles.length > 0 : textContent.trim()" class="border-0 shadow-lg">
-              <CardHeader>
-                <CardTitle>{{ activeTab === 'file' ? '上传' : '保存' }}配置</CardTitle>
-                <CardDescription>
-                  设置过期策略和备注信息
-                </CardDescription>
+            <Card v-if="activeTab === 'file' ? selectedFiles.length > 0 : textContent.trim()" class="shadow-sm border-t-2 border-t-blue-500">
+              <CardHeader class="pb-3">
+                <CardTitle class="text-base font-semibold">{{ activeTab === 'file' ? '上传' : '保存' }}配置</CardTitle>
+                <CardDescription class="text-xs">设置过期策略和备注信息</CardDescription>
               </CardHeader>
-              <CardContent class="space-y-6">
+              <CardContent class="space-y-4 pt-0">
                 <!-- 过期策略 -->
                 <div>
-                  <Label class="text-sm font-medium">过期策略</Label>
-                  <RadioGroup v-model="expireType" class="mt-3">
-                    <div class="flex items-center space-x-2">
-                      <RadioGroupItem value="time" id="expire-time" />
-                      <Label for="expire-time">按时间过期</Label>
-                    </div>
-                    <div v-if="expireType === 'time'" class="ml-6 mt-2">
-                      <Select v-model="expireDays">
-                        <SelectTrigger class="w-48">
-                          <SelectValue placeholder="选择过期时间" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem v-for="option in publicConfig.getExpireOptions().filter(opt => opt.value > 0)" :key="option.value" :value="String(option.value)">
-                            {{ option.label }}后
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
+                  <Label class="text-sm font-semibold text-gray-900 mb-3 block">过期策略</Label>
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <!-- 按时间过期选项 -->
+                    <div>
+                      <div class="text-xs text-gray-600 mb-2 font-medium">按时间过期</div>
+                      <div class="flex flex-wrap gap-1.5">
+                        <button
+                          v-for="option in publicConfig.getExpireOptions().filter(opt => opt.value > 0)"
+                          :key="'time-' + option.value"
+                          @click="expireType = 'time'; expireDays = String(option.value)"
+                          :class="[
+                            'px-2.5 py-1 text-xs font-medium rounded-full transition-all',
+                            expireType === 'time' && expireDays === String(option.value)
+                              ? 'bg-blue-600 text-white shadow-sm'
+                              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                          ]"
+                        >
+                          {{ option.label }}后
+                        </button>
+                      </div>
                     </div>
                     
-                    <div class="flex items-center space-x-2">
-                      <RadioGroupItem value="download" id="expire-download" />
-                      <Label for="expire-download">按{{ activeTab === 'file' ? '下载' : '访问' }}次数</Label>
+                    <!-- 按次数过期选项 -->
+                    <div>
+                      <div class="text-xs text-gray-600 mb-2 font-medium">按次数删除</div>
+                      <div class="flex flex-wrap gap-1.5">
+                        <button
+                          v-for="option in publicConfig.getDownloadOptions().filter(opt => opt.value > 0)"
+                          :key="'download-' + option.value"
+                          @click="expireType = 'download'; maxDownloads = String(option.value)"
+                          :class="[
+                            'px-2.5 py-1 text-xs font-medium rounded-full transition-all',
+                            expireType === 'download' && maxDownloads === String(option.value)
+                              ? 'bg-purple-600 text-white shadow-sm'
+                              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                          ]"
+                        >
+                          {{ option.label }}后删除
+                        </button>
+                      </div>
                     </div>
-                    <div v-if="expireType === 'download'" class="ml-6 mt-2">
-                      <Select v-model="maxDownloads">
-                        <SelectTrigger class="w-48">
-                          <SelectValue placeholder="选择次数限制" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem v-for="option in publicConfig.getDownloadOptions().filter(opt => opt.value > 0)" :key="option.value" :value="String(option.value)">
-                            {{ option.label }}后删除
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </RadioGroup>
+                  </div>
                 </div>
 
                 <!-- 备注信息 -->
                 <div>
-                  <Label for="remark" class="text-sm font-medium">备注信息</Label>
+                  <Label for="remark" class="text-sm font-semibold text-gray-900 mb-2 block">备注（可选）</Label>
                   <Textarea
                     id="remark"
                     v-model="remark"
-                    placeholder="可选：添加备注说明..."
-                    class="mt-2 resize-none"
-                    rows="3"
+                    placeholder="添加备注说明..."
+                    class="resize-none text-sm h-16"
+                    rows="2"
                   />
                 </div>
 
                 <!-- 操作按钮 -->
-                <div class="flex flex-col sm:flex-row gap-3 pt-4">
+                <div class="flex gap-2 pt-2">
                   <Button
                     @click="activeTab === 'file' ? uploadFiles() : uploadText()"
                     :disabled="uploading || (activeTab === 'file' ? selectedFiles.length === 0 : !textContent.trim())"
-                    class="flex-1"
-                    size="lg"
+                    class="flex-1 bg-blue-600 hover:bg-blue-700"
                   >
-                    <svg v-if="uploading" class="animate-spin -ml-1 mr-3 h-5 w-5" fill="none" viewBox="0 0 24 24">
+                    <svg v-if="uploading" class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
                       <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                       <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                     </svg>
@@ -247,19 +244,19 @@
                   <Button
                     @click="router.push('/')"
                     variant="outline"
-                    size="lg"
                   >
-                    返回首页
+                    返回
                   </Button>
                 </div>
 
                 <!-- 上传进度 -->
-                <div v-if="uploading" class="space-y-2">
-                  <div class="flex justify-between text-sm">
-                    <span>{{ activeTab === 'file' ? '上传' : '保存' }}进度</span>
-                    <span>{{ uploadProgress }}%</span>
+                <div v-if="uploading" class="space-y-2 mt-3 p-3 bg-blue-50 rounded-lg">
+                  <div class="flex justify-between text-xs font-medium">
+                    <span class="text-blue-600">{{ activeTab === 'file' ? '上传' : '保存' }}进度</span>
+                    <span class="text-blue-700">{{ uploadProgress }}%</span>
                   </div>
                   <Progress :value="uploadProgress" class="h-2" />
+                  <p class="text-xs text-blue-600 text-center">请勿关闭页面</p>
                 </div>
               </CardContent>
             </Card>
@@ -268,50 +265,60 @@
 
         <!-- 成功对话框 -->
         <Dialog :open="showSuccessDialog">
-          <DialogContent class="sm:max-w-[425px]" @interact-outside="$event.preventDefault()" @escape-key-down="$event.preventDefault()">
+          <DialogContent class="sm:max-w-[500px]" @interact-outside="$event.preventDefault()" @escape-key-down="$event.preventDefault()">
             <DialogHeader>
-              <DialogTitle class="text-green-600">
-                <svg class="w-6 h-6 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                </svg>
-                {{ activeTab === 'file' ? '文件上传成功' : '文本保存成功' }}
-              </DialogTitle>
-              <DialogDescription>
-                您的内容已成功保存，请保存以下取件码
+              <div class="flex flex-col items-center mb-4">
+                <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-4">
+                  <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                  </svg>
+                </div>
+                <DialogTitle class="text-2xl text-gray-900 text-center">
+                  {{ activeTab === 'file' ? '文件上传成功' : '文本保存成功' }}
+                </DialogTitle>
+              </div>
+              <DialogDescription class="text-center">
+                您的内容已成功保存，请妥善保管取件码
               </DialogDescription>
             </DialogHeader>
             
-            <div class="py-4">
-              <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
-                <div class="flex items-center justify-between">
-                  <div>
-                    <p class="text-sm text-gray-600 mb-1">取件码</p>
-                    <p class="text-2xl font-mono font-bold text-gray-900 tracking-widest">
-                      {{ uploadResult?.pickup_code }}
-                    </p>
-                  </div>
-                  <Button @click="copyPickupCode" variant="outline" size="sm">
+            <div class="py-6">
+              <div class="bg-gradient-to-br from-blue-50 to-purple-50 p-6 rounded-xl border-2 border-blue-200 shadow-inner">
+                <div class="text-center">
+                  <p class="text-sm text-gray-600 mb-3 font-medium">取件码</p>
+                  <p class="text-3xl font-mono font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 tracking-[0.3em] mb-4">
+                    {{ uploadResult?.pickup_code }}
+                  </p>
+                  <Button @click="copyPickupCode" class="w-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white shadow-lg">
                     <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                     </svg>
-                    复制
+                    复制取件码
                   </Button>
                 </div>
               </div>
               
-              <div v-if="uploadResult?.expire_at" class="mt-3 text-sm text-gray-600">
-                过期时间: {{ formatDate(uploadResult.expire_at) }}
-              </div>
-              <div v-if="uploadResult?.max_downloads" class="mt-1 text-sm text-gray-600">
-                最大访问次数: {{ uploadResult.max_downloads }}
+              <div class="mt-6 space-y-2 bg-gray-50 p-4 rounded-lg">
+                <div v-if="uploadResult?.expire_at" class="flex items-center text-sm text-gray-600">
+                  <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                  </svg>
+                  过期时间: {{ formatDate(uploadResult.expire_at) }}
+                </div>
+                <div v-if="uploadResult?.max_downloads" class="flex items-center text-sm text-gray-600">
+                  <svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
+                  </svg>
+                  最大访问次数: {{ uploadResult.max_downloads }}
+                </div>
               </div>
             </div>
 
-            <DialogFooter class="space-x-2">
-              <Button @click="continueUpload" variant="outline">
+            <DialogFooter class="sm:space-x-2 space-y-2 sm:space-y-0">
+              <Button @click="continueUpload" variant="outline" class="w-full sm:w-auto">
                 继续{{ activeTab === 'file' ? '上传' : '保存' }}
               </Button>
-              <Button @click="router.push('/')">
+              <Button @click="router.push('/')" class="w-full sm:w-auto bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white">
                 返回首页
               </Button>
             </DialogFooter>
@@ -336,8 +343,6 @@ import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Progress } from '@/components/ui/progress'
 import { Toaster } from '@/components/ui/sonner'
 import NavBar from '@/components/ui/NavBar.vue'

src/views/admin/BatchManagement.vue

@@ -25,7 +25,7 @@
               <div>
                 <Label for="status-filter">状态筛选</Label>
                 <Select v-model="filters.status">
-                  <SelectTrigger>
+                  <SelectTrigger class="mt-1.5">
                     <SelectValue placeholder="全部状态" />
                   </SelectTrigger>
                   <SelectContent>
@@ -187,6 +187,205 @@
           </CardContent>
         </Card>
 
+    <!-- 批次编辑对话框 -->
+    <Dialog :open="showEditDialog" @update:open="showEditDialog = $event">
+      <DialogContent class="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>编辑批次</DialogTitle>
+          <DialogDescription>
+            修改批次的类型、内容、过期策略和状态等信息
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div v-if="editingBatch" class="space-y-4 py-4">
+          <div>
+            <Label>取件码</Label>
+            <Input :model-value="editingBatch.pickup_code" disabled class="mt-1.5 bg-gray-50" />
+            <p class="text-xs text-gray-500 mt-1">当前系统配置的取件码长度：{{ configLimits.pickupCodeLength }} 位</p>
+          </div>
+
+          <div>
+            <Label for="edit-type">批次类型</Label>
+            <Select v-model="editForm.type">
+              <SelectTrigger id="edit-type" class="mt-1.5">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="file">文件</SelectItem>
+                <SelectItem value="text">文本</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div v-if="editForm.type === 'text'">
+            <Label for="edit-content">文本内容</Label>
+            <Textarea
+              id="edit-content"
+              v-model="editForm.content"
+              placeholder="文本内容..."
+              class="mt-1.5 resize-none"
+              rows="4"
+              :maxlength="1000000"
+            />
+            <p class="text-xs text-gray-500 mt-1">当前字符数：{{ editForm.content.length }}</p>
+          </div>
+
+          <div>
+            <Label for="edit-remark">备注信息</Label>
+            <Textarea
+              id="edit-remark"
+              v-model="editForm.remark"
+              placeholder="添加备注说明..."
+              class="mt-1.5 resize-none"
+              rows="3"
+            />
+          </div>
+
+          <div>
+            <Label for="edit-expire-type">过期策略</Label>
+            <Select v-model="editForm.expire_type">
+              <SelectTrigger id="edit-expire-type" class="mt-1.5">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="permanent">永久</SelectItem>
+                <SelectItem value="time">时间过期</SelectItem>
+                <SelectItem value="download">下载过期</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div v-if="editForm.expire_type === 'time'">
+            <Label>过期时间</Label>
+            <div class="flex gap-2 mt-1.5">
+              <div class="flex-1">
+                <Popover v-model:open="datePickerOpen">
+                  <PopoverTrigger as-child>
+                    <Button
+                      variant="outline"
+                      class="w-full justify-start font-normal"
+                    >
+                      <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                      </svg>
+                      {{ expireDateValue ? expireDateValue.toDate(getLocalTimeZone()).toLocaleDateString('zh-CN') : '选择日期' }}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent class="w-auto overflow-hidden p-0" align="start">
+                    <Calendar
+                      :model-value="expireDateValue"
+                      layout="month-and-year"
+                      @update:model-value="(value) => {
+                        if (value) {
+                          expireDateValue = value
+                          datePickerOpen = false
+                        }
+                      }"
+                      locale="zh-CN"
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+              <div class="w-32">
+                <Input
+                  v-model="expireTime"
+                  type="text"
+                  placeholder="23:59"
+                  maxlength="5"
+                  class="bg-background"
+                  @blur="validateTimeFormat"
+                />
+              </div>
+            </div>
+            <p class="text-xs text-gray-500 mt-1">最长保存时间不超过 {{ configLimits.maxRetentionDays }} 天，时间格式：HH:MM</p>
+          </div>
+
+          <div v-if="editForm.expire_type === 'download'">
+            <Label for="edit-max-downloads">最大下载次数</Label>
+            <Input
+              id="edit-max-downloads"
+              v-model.number="editForm.max_downloads"
+              type="number"
+              min="1"
+              max="9999"
+              placeholder="最大下载次数"
+              class="mt-1.5"
+            />
+            <p class="text-xs text-gray-500 mt-1">设置下载次数范围：1-9999</p>
+          </div>
+
+          <div>
+            <Label for="edit-status">批次状态</Label>
+            <Select v-model="editForm.status">
+              <SelectTrigger id="edit-status" class="mt-1.5">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="active">活跃</SelectItem>
+                <SelectItem value="expired">已过期</SelectItem>
+                <SelectItem value="deleted">已删除</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <Label for="edit-download-count">已下载次数</Label>
+            <div class="flex items-center gap-2 mt-1.5">
+              <Input
+                id="edit-download-count"
+                v-model.number="editForm.download_count"
+                type="number"
+                disabled
+                class="bg-gray-50"
+              />
+              <Button
+                variant="outline"
+                size="sm"
+                @click="editForm.download_count = 0"
+                :disabled="editForm.download_count === 0"
+              >
+                重置
+              </Button>
+            </div>
+            <p class="text-xs text-gray-500 mt-1">点击重置按钮将已下载次数设为0</p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" @click="showEditDialog = false">
+            取消
+          </Button>
+          <Button @click="saveEdit" :disabled="saving">
+            <svg v-if="saving" class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            {{ saving ? '保存中...' : '保存' }}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+
+    <!-- 删除确认对话框 -->
+    <AlertDialog :open="showDeleteDialog" @update:open="showDeleteDialog = $event">
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>确认删除</AlertDialogTitle>
+          <AlertDialogDescription>
+            确定要删除批次 <strong class="text-gray-900">{{ deletingBatch?.pickup_code }}</strong> 吗？
+            <br />
+            此操作将<strong class="text-red-600">永久删除</strong>该批次及其所有文件，且<strong class="text-red-600">不可撤销</strong>。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction @click="confirmDelete" class="bg-red-600 hover:bg-red-700">
+            删除
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+
     <!-- 批次详情对话框 -->
     <Dialog :open="showDetailDialog" @update:open="showDetailDialog = $event">
       <DialogContent class="sm:max-w-[600px]">
@@ -259,25 +458,34 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { toast } from 'vue-sonner'
+import { usePublicConfig } from '@/composables/usePublicConfig'
+import type { DateValue } from '@internationalized/date'
+import { getLocalTimeZone, fromDate } from '@internationalized/date'
 
 // 组件导入
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Badge } from '@/components/ui/badge'
+import { Textarea } from '@/components/ui/textarea'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Skeleton } from '@/components/ui/skeleton'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
 import { Toaster } from '@/components/ui/sonner'
 import AdminLayout from '@/layouts/AdminLayout.vue'
 
 // API 和工具导入
 import { adminApi, utils, type FileBatch } from '@/lib/api'
 
+const { config: publicConfig } = usePublicConfig()
+
 // 响应式数据
 const loading = ref(true)
 const batches = ref<FileBatch[]>([])
@@ -285,6 +493,38 @@ const selectedBatch = ref<FileBatch | null>(null)
 const showDetailDialog = ref(false)
 const deleting = ref(new Set<string>())
 
+// 编辑相关
+const showEditDialog = ref(false)
+const editingBatch = ref<FileBatch | null>(null)
+const saving = ref(false)
+const editForm = reactive({
+  type: 'file' as 'file' | 'text',
+  content: '',
+  remark: '',
+  expire_type: 'permanent' as 'time' | 'download' | 'permanent',
+  expire_at: '',
+  max_downloads: 0,
+  download_count: 0,
+  status: 'active' as 'active' | 'expired' | 'deleted'
+})
+
+// 日期时间选择器状态
+const expireDateValue = ref<DateValue | undefined>()
+const expireTime = ref('23:59')
+const datePickerOpen = ref(false)
+
+// 配置约束计算属性
+const configLimits = computed(() => ({
+  pickupCodeLength: publicConfig.value?.security?.pickup_code_length || 6,
+  maxFileSize: publicConfig.value?.upload?.max_file_size_mb || 100,
+  maxBatchFiles: publicConfig.value?.upload?.max_batch_files || 10,
+  maxRetentionDays: publicConfig.value?.upload?.max_retention_days || 30
+}))
+
+// 删除确认相关
+const showDeleteDialog = ref(false)
+const deletingBatch = ref<FileBatch | null>(null)
+
 const filters = reactive({
   status: 'all',
   pickupCode: ''
@@ -366,23 +606,149 @@ const showBatchDetail = async (batch: FileBatch) => {
   }
 }
 
-const editBatch = (_batch: FileBatch) => {
-  // TODO: 实现批次编辑功能
-  toast.info('批次编辑功能开发中...')
+const editBatch = async (batch: FileBatch) => {
+  try {
+    // 获取批次详细信息以便编辑
+    const response = await adminApi.getBatchDetail(batch.id)
+    if (response.data.code === 200) {
+      editingBatch.value = response.data.data
+      
+      // 填充编辑表单
+      editForm.type = editingBatch.value.type
+      editForm.content = editingBatch.value.content || ''
+      editForm.remark = editingBatch.value.remark || ''
+      editForm.expire_type = editingBatch.value.expire_type
+      editForm.max_downloads = editingBatch.value.max_downloads || 0
+      editForm.download_count = editingBatch.value.download_count || 0
+      editForm.status = editingBatch.value.status
+      
+      // 处理过期时间格式
+      if (editingBatch.value.expire_at) {
+        const date = new Date(editingBatch.value.expire_at)
+        // 设置日期选择器的值
+        expireDateValue.value = fromDate(date, getLocalTimeZone())
+        // 设置时间
+        const hours = String(date.getHours()).padStart(2, '0')
+        const minutes = String(date.getMinutes()).padStart(2, '0')
+        expireTime.value = `${hours}:${minutes}`
+        // 同时设置editForm.expire_at以兼容
+        const year = date.getFullYear()
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+        editForm.expire_at = `${year}-${month}-${day}T${hours}:${minutes}`
+      } else {
+        expireDateValue.value = undefined
+        expireTime.value = '23:59'
+        editForm.expire_at = ''
+      }
+      
+      showEditDialog.value = true
+    }
+  } catch (error: any) {
+    toast.error('获取批次信息失败')
+  }
 }
 
-const deleteBatch = async (batch: FileBatch) => {
-  if (!confirm(`确定要删除批次 ${batch.pickup_code} 吗？此操作不可撤销。`)) {
+const saveEdit = async () => {
+  if (!editingBatch.value) return
+
+  // 数据验证
+  if (editForm.type === 'text' && !editForm.content.trim()) {
+    toast.error('文本内容不能为空')
     return
   }
 
-  deleting.value.add(batch.id)
+  if (editForm.expire_type === 'time' && editForm.expire_at) {
+    const expireDate = new Date(editForm.expire_at)
+    const maxDate = new Date()
+    maxDate.setDate(maxDate.getDate() + configLimits.value.maxRetentionDays)
+    
+    if (expireDate > maxDate) {
+      toast.error(`过期时间不能超过 ${configLimits.value.maxRetentionDays} 天`)
+      return
+    }
+
+    if (expireDate < new Date()) {
+      toast.error('过期时间不能早于当前时间')
+      return
+    }
+  }
+
+  if (editForm.expire_type === 'download') {
+    if (!editForm.max_downloads || editForm.max_downloads < 1) {
+      toast.error('最大下载次数至少为1次')
+      return
+    }
+    if (editForm.max_downloads > 9999) {
+      toast.error('最大下载次数不能超过9999次')
+      return
+    }
+  }
+
+  if (editForm.download_count < 0) {
+    toast.error('已下载次数不能为负数')
+    return
+  }
+
+  saving.value = true
 
   try {
-    const response = await adminApi.deleteBatch(batch.id)
+    const updateData: any = {
+      type: editForm.type,
+      content: editForm.type === 'text' ? editForm.content : undefined,
+      remark: editForm.remark || null,
+      expire_type: editForm.expire_type,
+      max_downloads: editForm.max_downloads || 0,
+      download_count: editForm.download_count,
+      status: editForm.status
+    }
+
+    // 处理过期时间
+    if (editForm.expire_type === 'time' && expireDateValue.value) {
+      // 组合日期和时间
+      const dateObj = expireDateValue.value.toDate(getLocalTimeZone())
+      const [hours = '0', minutes = '0'] = expireTime.value.split(':')
+      dateObj.setHours(parseInt(hours), parseInt(minutes), 0, 0)
+      updateData.expire_at = dateObj.toISOString()
+    } else {
+      updateData.expire_at = null
+    }
+
+    const response = await adminApi.updateBatch(editingBatch.value.id, updateData)
+    
+    if (response.data.code === 200) {
+      toast.success('批次更新成功')
+      showEditDialog.value = false
+      fetchBatches()
+    } else {
+      throw new Error(response.data.msg || '更新失败')
+    }
+  } catch (error: any) {
+    console.error('更新批次失败:', error)
+    toast.error(error.response?.data?.msg || '更新批次失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+const deleteBatch = (batch: FileBatch) => {
+  deletingBatch.value = batch
+  showDeleteDialog.value = true
+}
+
+const confirmDelete = async () => {
+  if (!deletingBatch.value) return
+
+  const batchId = deletingBatch.value.id
+  deleting.value.add(batchId)
+
+  try {
+    const response = await adminApi.deleteBatch(batchId)
     
     if (response.data.code === 200) {
       toast.success('批次删除成功')
+      showDeleteDialog.value = false
+      deletingBatch.value = null
       fetchBatches()
     } else {
       throw new Error(response.data.msg || '删除失败')
@@ -391,7 +757,7 @@ const deleteBatch = async (batch: FileBatch) => {
     console.error('删除批次失败:', error)
     toast.error(error.response?.data?.msg || '删除批次失败')
   } finally {
-    deleting.value.delete(batch.id)
+    deleting.value.delete(batchId)
   }
 }
 
@@ -442,6 +808,40 @@ const formatFileSize = (bytes: number): string => {
   return utils.formatFileSize(bytes)
 }
 
+// 验证和格式化时间输入
+const validateTimeFormat = () => {
+  const timePattern = /^([0-1]?[0-9]|2[0-3]):([0-5][0-9])$/
+  
+  if (!expireTime.value) {
+    expireTime.value = '23:59'
+    return
+  }
+  
+  // 尝试自动补全格式
+  let time = expireTime.value.replace(/[^\d:]/g, '')
+  
+  // 如果只输入了数字，尝试智能解析
+  if (!time.includes(':')) {
+    if (time.length === 3) {
+      // 如 "959" -> "9:59"
+      time = time[0] + ':' + time.slice(1)
+    } else if (time.length === 4) {
+      // 如 "2359" -> "23:59"
+      time = time.slice(0, 2) + ':' + time.slice(2)
+    }
+  }
+  
+  // 验证格式
+  if (timePattern.test(time)) {
+    // 格式化为标准的 HH:MM 格式
+    const [h = '0', m = '0'] = time.split(':')
+    expireTime.value = `${h.padStart(2, '0')}:${m.padStart(2, '0')}`
+  } else {
+    toast.error('时间格式不正确，请使用 HH:MM 格式（如 23:59）')
+    expireTime.value = '23:59'
+  }
+}
+
 // 组件挂载
 onMounted(() => {
   fetchBatches()

src/views/admin/ConfigManagement.vue

@@ -65,6 +65,16 @@
                 rows="3"
               />
             </div>
+            <div>
+              <Label for="siteLogo" class="text-sm font-medium">站点 Logo URL</Label>
+              <Input 
+                id="siteLogo"
+                v-model="config.site.logo" 
+                placeholder="输入站点 Logo 图片地址，例如：https://example.com/logo.png"
+                class="mt-2"
+              />
+              <p class="text-xs text-muted-foreground mt-1">留空将使用默认图标，建议使用正方形图片</p>
+            </div>
           </CardContent>
         </Card>
 
@@ -460,7 +470,8 @@ const originalConfig = ref<SystemConfig>()
 const config = reactive<SystemConfig>({
   site: {
     name: '',
-    description: ''
+    description: '',
+    logo: ''
   },
   upload: {
     max_file_size_mb: 100,
@@ -508,7 +519,7 @@ const loadConfig = async () => {
   try {
     loading.value = true
     const response = await adminApi.getConfig()
-    const configData = response.data
+    const configData = response.data.data  // 从ApiResponse中提取data字段
     
     // 直接赋值，保持 snake_case 格式
     Object.assign(config, configData)

src/views/admin/TokenManagement.vue

@@ -181,7 +181,7 @@
           <div>
             <Label for="token-scope">权限范围</Label>
             <Select v-model="createForm.scope">
-              <SelectTrigger>
+              <SelectTrigger class="mt-1.5">
                 <SelectValue placeholder="选择权限范围" />
               </SelectTrigger>
               <SelectContent>
@@ -199,7 +199,7 @@
           <div>
             <Label for="token-expire">过期时间</Label>
             <Select v-model="createForm.expireType">
-              <SelectTrigger>
+              <SelectTrigger class="mt-1.5">
                 <SelectValue placeholder="选择过期策略" />
               </SelectTrigger>
               <SelectContent>