diff --git a/.gitignore b/.gitignore
index 8ee54e8..2d29e0a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@ node_modules
 dist
 dist-ssr
 coverage
+output
 *.local
 
 /cypress/videos/
diff --git a/scripts/check-architecture.mjs b/scripts/check-architecture.mjs
index b5d7c35..b0eb0d8 100644
--- a/scripts/check-architecture.mjs
+++ b/scripts/check-architecture.mjs
@@ -110,6 +110,7 @@ const rules = [
       /^src\/utils\/auth-storage\.ts$/,
       /^src\/utils\/config-storage\.ts$/,
       /^src\/utils\/preference-storage\.ts$/,
+      /^src\/utils\/record-storage\.ts$/,
     ],
   },
   {
diff --git a/src/App.vue b/src/App.vue
index 7d60b64..5ee48b8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,14 @@ import LanguageSwitcher from './components/common/LanguageSwitcher.vue'
 import AlertComponent from '@/components/common/AlertComponent.vue'
 import { useAppShell } from '@/composables'
 
-const { isDarkMode, isLoading, route, showGlobalControls } = useAppShell()
+const {
+  isDarkMode,
+  isLoading,
+  routeTransitionMode,
+  routeTransitionName,
+  routeViewKey,
+  showGlobalControls
+} = useAppShell()
 </script>
 
 <template>
@@ -18,8 +25,8 @@ const { isDarkMode, isLoading, route, showGlobalControls } = useAppShell()
       <div class="loading-spinner"></div>
     </div>
     <RouterView v-slot="{ Component }">
-      <transition name="fade" mode="out-in">
-        <component :is="Component" :key="route.fullPath" />
+      <transition :name="routeTransitionName" :mode="routeTransitionMode">
+        <component :is="Component" :key="routeViewKey" />
       </transition>
     </RouterView>
 
@@ -52,6 +59,30 @@ const { isDarkMode, isLoading, route, showGlobalControls } = useAppShell()
   opacity: 0;
 }
 
+.transfer-fade-enter-active,
+.transfer-fade-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.transfer-fade-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.transfer-fade-leave-active {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  pointer-events: none;
+}
+
+.transfer-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
 .loading-overlay {
   position: fixed;
   top: 0;
diff --git a/src/components/common/FileUploadArea.vue b/src/components/common/FileUploadArea.vue
index a10d3dd..cff37d5 100644
--- a/src/components/common/FileUploadArea.vue
+++ b/src/components/common/FileUploadArea.vue
@@ -1,14 +1,26 @@
 <template>
   <div
-    class="rounded-xl p-8 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-300 group cursor-pointer relative"
+    class="rounded-2xl p-8 flex flex-col items-center justify-center border-2 border-dashed transition-all duration-300 group cursor-pointer relative min-h-72 overflow-hidden"
     :class="[
       isDarkMode
-        ? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
-        : 'bg-gray-100 border-gray-300 hover:border-indigo-500',
+        ? 'bg-gray-800/60 border-gray-600 hover:border-indigo-400'
+        : 'bg-white/80 border-gray-300 hover:border-indigo-500',
+      isDragActive
+        ? isDarkMode
+          ? 'border-indigo-400 bg-indigo-500/10 shadow-lg shadow-indigo-900/30'
+          : 'border-indigo-500 bg-indigo-50 shadow-lg shadow-indigo-100'
+        : '',
       statusClass
     ]"
+    role="button"
+    tabindex="0"
+    :aria-busy="isUploading"
     @click="triggerFileUpload"
-    @dragover.prevent
+    @keydown.enter.prevent="triggerFileUpload"
+    @keydown.space.prevent="triggerFileUpload"
+    @dragenter.prevent="handleDragEnter"
+    @dragover.prevent="handleDragOver"
+    @dragleave.prevent="handleDragLeave"
     @drop.prevent="handleFileDrop"
   >
     <input
@@ -20,6 +32,18 @@
       :disabled="isUploading"
       multiple
     />
+    <div
+      class="absolute inset-0 opacity-0 transition-opacity duration-300"
+      :class="[isDragActive ? 'opacity-100' : '']"
+    >
+      <div
+        class="absolute inset-3 rounded-2xl border"
+        :class="[
+          isDarkMode ? 'border-indigo-300/30 bg-indigo-400/5' : 'border-indigo-300 bg-indigo-50/80'
+        ]"
+      ></div>
+    </div>
+
     <div class="absolute inset-0 w-full h-full" v-if="progress > 0">
       <BorderProgressBar :progress="progress" />
     </div>
@@ -27,24 +51,20 @@
     <!-- 上传状态图标 -->
     <component
       :is="statusIcon"
-      :class="['w-16 h-16 transition-colors duration-300', statusIconClass]"
+      :class="['relative z-10 w-16 h-16 transition-colors duration-300', statusIconClass]"
     />
 
     <!-- 文件名或占位文本 -->
     <p
       :class="[
-        'mt-4 text-sm transition-colors duration-300 w-full text-center',
+        'relative z-10 mt-4 text-sm transition-colors duration-300 w-full text-center',
         isDarkMode
           ? 'text-gray-400 group-hover:text-indigo-400'
           : 'text-gray-600 group-hover:text-indigo-600'
       ]"
     >
       <span v-if="selectedFiles && selectedFiles.length > 1" class="block">
-        <span
-          v-for="(f, i) in selectedFiles"
-          :key="i"
-          class="block truncate"
-        >{{ f.name }}</span>
+        <span v-for="(f, i) in selectedFiles" :key="i" class="block truncate">{{ f.name }}</span>
       </span>
       <span v-else class="block truncate">
         {{ displayText }}
@@ -52,12 +72,33 @@
     </p>
 
     <!-- 状态描述或默认描述 -->
-    <p :class="['mt-2 text-xs', statusDescriptionClass]">
+    <p :class="['relative z-10 mt-2 text-xs text-center leading-5', statusDescriptionClass]">
       {{ statusDescription }}
     </p>
 
+    <div
+      v-if="selectedFiles.length > 1"
+      class="relative z-10 mt-4 flex flex-wrap items-center justify-center gap-2"
+    >
+      <span
+        v-for="file in selectedFiles.slice(0, 3)"
+        :key="`${file.name}-${file.size}`"
+        class="max-w-40 truncate rounded-full px-3 py-1 text-xs"
+        :class="[isDarkMode ? 'bg-gray-700/80 text-gray-200' : 'bg-gray-100 text-gray-700']"
+      >
+        {{ file.name }}
+      </span>
+      <span
+        v-if="selectedFiles.length > 3"
+        class="rounded-full px-3 py-1 text-xs"
+        :class="[isDarkMode ? 'bg-indigo-500/20 text-indigo-200' : 'bg-indigo-100 text-indigo-700']"
+      >
+        +{{ selectedFiles.length - 3 }}
+      </span>
+    </div>
+
     <!-- 进度详情（上传中显示） -->
-    <div v-if="isUploading && showProgressDetails" class="mt-3 w-full">
+    <div v-if="isUploading && showProgressDetails" class="relative z-10 mt-3 w-full">
       <div
         class="flex justify-between text-xs mb-1"
         :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
@@ -78,7 +119,7 @@
           : 'bg-indigo-500 hover:bg-indigo-600 text-white'
       ]"
     >
-      {{ retryText }}
+      {{ retryLabel }}
     </button>
   </div>
 </template>
@@ -136,7 +177,7 @@ const props = withDefaults(defineProps<Props>(), {
   totalBytes: 0,
   errorMessage: '',
   allowRetry: true,
-  retryText: '重试',
+  retryText: '',
   showProgressDetails: true
 })
 
@@ -147,7 +188,9 @@ const isDarkMode = useInjectedDarkMode()
 // 使用computed属性处理多语言文本
 const placeholderText = computed(() => props.placeholder || t('send.uploadArea.placeholder'))
 const descriptionText = computed(() => props.description || t('send.uploadArea.description'))
+const retryLabel = computed(() => props.retryText || t('send.uploadArea.retry'))
 const fileInput = ref<HTMLInputElement | null>(null)
+const isDragActive = ref(false)
 
 const isUploading = computed(() => {
   return ['uploading', 'initializing', 'confirming'].includes(props.uploadStatus)
@@ -162,7 +205,7 @@ const displayText = computed(() => {
     return props.selectedFiles[0].name
   }
   if (props.selectedFiles && props.selectedFiles.length > 1) {
-    return `已选择 ${props.selectedFiles.length} 个文件`
+    return t('send.uploadArea.selectedFiles', { count: props.selectedFiles.length })
   }
   if (props.selectedFile) {
     return props.selectedFile.name
@@ -207,16 +250,16 @@ const statusDescription = computed(() => {
     return props.errorMessage
   }
   if (props.uploadStatus === 'initializing') {
-    return '正在初始化上传...'
+    return t('send.uploadArea.status.initializing')
   }
   if (props.uploadStatus === 'uploading') {
-    return '正在上传文件...'
+    return t('send.uploadArea.status.uploading')
   }
   if (props.uploadStatus === 'confirming') {
-    return '正在确认上传...'
+    return t('send.uploadArea.status.confirming')
   }
   if (isSuccess.value) {
-    return '上传成功！'
+    return t('send.uploadArea.status.success')
   }
   return descriptionText.value
 })
@@ -245,6 +288,24 @@ const triggerFileUpload = () => {
   fileInput.value?.click()
 }
 
+const handleDragEnter = () => {
+  if (isUploading.value) return
+  isDragActive.value = true
+}
+
+const handleDragOver = () => {
+  if (isUploading.value) return
+  isDragActive.value = true
+}
+
+const handleDragLeave = (event: DragEvent) => {
+  const target = event.currentTarget as HTMLElement
+  const relatedTarget = event.relatedTarget as Node | null
+  if (!relatedTarget || !target.contains(relatedTarget)) {
+    isDragActive.value = false
+  }
+}
+
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement
   const files = target.files
@@ -261,6 +322,7 @@ const handleFileUpload = (event: Event) => {
 
 const handleFileDrop = (event: DragEvent) => {
   // 上传中不允许拖放
+  isDragActive.value = false
   if (isUploading.value) return
   emit('fileDrop', event)
 }
diff --git a/src/composables/index.ts b/src/composables/index.ts
index 5086761..c894854 100644
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -1,5 +1,6 @@
 export { useAdminFiles } from './useAdminFiles'
 export { useAdminLogin } from './useAdminLogin'
+export { useAdminSession } from './useAdminSession'
 export { useAppShell } from './useAppShell'
 export { useDashboardStats } from './useDashboardStats'
 export { useInjectedDarkMode } from './useInjectedDarkMode'
diff --git a/src/composables/useAdminFiles.ts b/src/composables/useAdminFiles.ts
index 936441a..91a3b1e 100644
--- a/src/composables/useAdminFiles.ts
+++ b/src/composables/useAdminFiles.ts
@@ -2,11 +2,206 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { FileService } from '@/services'
 import { useAlertStore } from '@/stores/alertStore'
-import type { AdminFileViewItem, FileEditForm, FileListItem } from '@/types'
+import type {
+  AdminBatchEditForm,
+  AdminBatchDeleteFilesResponse,
+  AdminBatchPolicyActionRequest,
+  AdminBatchPolicyActionResponse,
+  AdminBatchUpdateFilesRequest,
+  AdminBatchUpdateFilesResponse,
+  AdminFileDetailResponse,
+  AdminFileDetailTimelineItem,
+  AdminFileDetailViewItem,
+  AdminFileMetadataRequest,
+  AdminFileInsightSeverity,
+  AdminFilePatchPayload,
+  AdminFileHealthFilter,
+  AdminFileListParams,
+  AdminFilePolicyAction,
+  AdminFilePolicyActionRequest,
+  AdminFileStatusFilter,
+  AdminFileSummary,
+  AdminFileTypeFilter,
+  AdminFileViewPreset,
+  AdminFileViewPresetParams,
+  AdminFileViewPresetRequest,
+  AdminFileViewItem,
+  ApiResponse,
+  FileEditForm,
+  FileListItem
+} from '@/types'
 import { copyToClipboard } from '@/utils/clipboard'
-import { formatFileSize, formatTimestamp, getErrorMessage } from '@/utils/common'
+import { formatDuration, formatFileSize, formatTimestamp, getErrorMessage } from '@/utils/common'
+import {
+  downloadAdminManagedFile,
+  exportAdminTextFile,
+  getSafeFilename
+} from '@/utils/download-action'
+import { buildRetrieveUrl } from '@/utils/share-url'
 
-const TEXT_PREVIEW_THRESHOLD = 30
+const emptySummary = (): AdminFileSummary => ({
+  totalFiles: 0,
+  activeCount: 0,
+  expiredCount: 0,
+  textCount: 0,
+  fileCount: 0,
+  chunkedCount: 0,
+  healthAttentionCount: 0,
+  healthDangerCount: 0,
+  healthWarningCount: 0,
+  expiringSoonCount: 0,
+  storageIssueCount: 0,
+  neverRetrievedCount: 0,
+  healthyCount: 0,
+  permanentCount: 0,
+  storageUsed: 0,
+  usedCount: 0
+})
+
+const normalizeCount = (value: number | string | null | undefined) => Number(value || 0)
+
+const isExpiredByDate = (value: string | null | undefined) => {
+  if (!value) return false
+  const timestamp = new Date(value).getTime()
+  return Number.isFinite(timestamp) && timestamp < Date.now()
+}
+
+type ErrorWithResponse = {
+  response?: {
+    status?: number
+  }
+}
+
+const isLegacyEndpointUnavailable = (error: unknown) => {
+  const status = (error as ErrorWithResponse)?.response?.status
+  return status === 404 || status === 405
+}
+
+const legacyForeverExpiresAt = '2099-12-31T23:59'
+const detailPolicyDownloadLimit = 5
+const dayInMilliseconds = 24 * 60 * 60 * 1000
+
+type DetailPolicyActionOption = {
+  action: AdminFilePolicyAction
+  label: string
+  description: string
+}
+
+type BatchPolicyActionOption = DetailPolicyActionOption
+
+type HealthFilterOption = {
+  value: AdminFileHealthFilter
+  label: string
+  count?: number
+}
+
+const emptyBatchEditForm = (): AdminBatchEditForm => ({
+  mode: 'expiresAt',
+  expired_at: '',
+  expired_count: null
+})
+
+const metadataTagSeparatorPattern = /[,，\n]+/
+
+const emptyDetailMetadataForm = () => ({
+  note: '',
+  tagsText: ''
+})
+
+const padDatePart = (value: number) => String(value).padStart(2, '0')
+
+const formatLocalDateTime = (date: Date) => {
+  const year = date.getFullYear()
+  const month = padDatePart(date.getMonth() + 1)
+  const day = padDatePart(date.getDate())
+  const hours = padDatePart(date.getHours())
+  const minutes = padDatePart(date.getMinutes())
+
+  return `${year}-${month}-${day}T${hours}:${minutes}`
+}
+
+const builtInAllViewPresetId = 'built_in_all'
+const adminFileStatusFilters: AdminFileStatusFilter[] = ['all', 'active', 'expired']
+const adminFileTypeFilters: AdminFileTypeFilter[] = ['all', 'file', 'text', 'chunked']
+const adminFileHealthFilters: AdminFileHealthFilter[] = [
+  'all',
+  'attention',
+  'danger',
+  'warning',
+  'healthy',
+  'expired',
+  'expiring_soon',
+  'storage_issue',
+  'never_retrieved',
+  'permanent'
+]
+const adminFileSortFields = [
+  'created_at',
+  'expired_at',
+  'name',
+  'size',
+  'used_count',
+  'code'
+] as const
+const adminFileSortOrders = ['asc', 'desc'] as const
+
+type RawViewPresetParams = Partial<
+  Record<keyof AdminFileViewPresetParams | 'sort_by' | 'sort_order', unknown>
+>
+
+const normalizePresetChoice = <T extends string>(
+  value: unknown,
+  allowedValues: readonly T[],
+  fallback: T
+): T => {
+  const normalizedValue = String(value ?? fallback)
+    .replace('-', '_')
+    .trim()
+    .toLowerCase()
+  return allowedValues.includes(normalizedValue as T) ? (normalizedValue as T) : fallback
+}
+
+const normalizePresetSize = (value: unknown) => {
+  const normalizedSize = Number(value)
+  if (!Number.isFinite(normalizedSize)) return 10
+  return Math.min(Math.max(Math.trunc(normalizedSize), 1), 100)
+}
+
+const buildDefaultViewPresetParams = (): AdminFileViewPresetParams => ({
+  keyword: '',
+  status: 'all',
+  type: 'all',
+  health: 'all',
+  sortBy: 'created_at',
+  sortOrder: 'desc',
+  size: 10
+})
+
+const normalizeViewPresetParams = (params: unknown): AdminFileViewPresetParams => {
+  const defaults = buildDefaultViewPresetParams()
+  const rawParams =
+    params && typeof params === 'object'
+      ? (params as RawViewPresetParams)
+      : ({} as RawViewPresetParams)
+
+  return {
+    keyword: String(rawParams.keyword ?? defaults.keyword).trim(),
+    status: normalizePresetChoice(rawParams.status, adminFileStatusFilters, defaults.status),
+    type: normalizePresetChoice(rawParams.type, adminFileTypeFilters, defaults.type),
+    health: normalizePresetChoice(rawParams.health, adminFileHealthFilters, defaults.health),
+    sortBy: normalizePresetChoice(
+      rawParams.sortBy ?? rawParams.sort_by,
+      adminFileSortFields,
+      defaults.sortBy
+    ),
+    sortOrder: normalizePresetChoice(
+      rawParams.sortOrder ?? rawParams.sort_order,
+      adminFileSortOrders,
+      defaults.sortOrder
+    ),
+    size: normalizePresetSize(rawParams.size ?? defaults.size)
+  }
+}
 
 export function useAdminFiles() {
   const { t } = useI18n()
@@ -14,11 +209,19 @@ export function useAdminFiles() {
 
   const tableData = ref<AdminFileViewItem[]>([])
   const hasLoadError = ref(false)
-  const params = ref({
+  const isLoading = ref(false)
+  const isSaving = ref(false)
+  const summary = ref<AdminFileSummary>(emptySummary())
+  const params = ref<AdminFileListParams & { total: number }>({
     page: 1,
     size: 10,
     total: 0,
-    keyword: ''
+    keyword: '',
+    status: 'all',
+    type: 'all',
+    health: 'all',
+    sortBy: 'created_at',
+    sortOrder: 'desc'
   })
 
   const showEditModal = ref(false)
@@ -30,20 +233,536 @@ export function useAdminFiles() {
     expired_at: '',
     expired_count: null
   })
+  const showBatchEditModal = ref(false)
+  const batchEditForm = ref<AdminBatchEditForm>(emptyBatchEditForm())
 
   const showTextPreview = ref(false)
   const previewText = ref('')
-  const totalPages = computed(() => Math.ceil(params.value.total / params.value.size))
+  const previewFile = ref<AdminFileViewItem | null>(null)
+  const previewMetaText = ref('')
+  const isPreviewLoading = ref(false)
+  const showFileDetailModal = ref(false)
+  const selectedFileDetail = ref<AdminFileDetailViewItem | null>(null)
+  const isDetailLoading = ref(false)
+  const isDetailPolicyActionRunning = ref(false)
+  const isDetailMetadataSaving = ref(false)
+  const detailMetadataForm = ref(emptyDetailMetadataForm())
+  const downloadingFileId = ref<number | null>(null)
+  const selectedFileIds = ref<Set<number>>(new Set())
+  const isBatchDeleting = ref(false)
+  const isBatchUpdating = ref(false)
+  const isBatchPolicyActionRunning = ref(false)
+  const savedViewPresets = ref<AdminFileViewPreset[]>([])
+  const selectedViewPresetId = ref(builtInAllViewPresetId)
+  const isViewPresetLoading = ref(false)
+  const isViewPresetSaving = ref(false)
+  const isViewPresetDeleting = ref(false)
+  let detailRequestSerial = 0
+  const isBatchActionRunning = computed(
+    () => isBatchDeleting.value || isBatchUpdating.value || isBatchPolicyActionRunning.value
+  )
+  const totalPages = computed(() => Math.max(Math.ceil(params.value.total / params.value.size), 1))
+  const storageUsedText = computed(() => formatFileSize(summary.value.storageUsed))
+  const currentPageSelectedCount = computed(
+    () => tableData.value.filter((file) => selectedFileIds.value.has(file.id)).length
+  )
+  const selectedCount = computed(() => selectedFileIds.value.size)
+  const hasSelectedFiles = computed(() => selectedCount.value > 0)
+  const isAllCurrentPageSelected = computed(
+    () => tableData.value.length > 0 && currentPageSelectedCount.value === tableData.value.length
+  )
+  const isCurrentPagePartiallySelected = computed(
+    () => currentPageSelectedCount.value > 0 && !isAllCurrentPageSelected.value
+  )
 
-  const createFileViewItem = (file: FileListItem): AdminFileViewItem => ({
-    ...file,
-    displaySize: formatFileSize(file.size),
-    displayExpiredAt: file.expired_at
-      ? formatTimestamp(file.expired_at)
-      : t('send.expiration.units.forever'),
-    canPreviewText: Boolean(file.text && file.text.length > TEXT_PREVIEW_THRESHOLD)
+  const requestParams = computed<AdminFileListParams>(() => ({
+    page: params.value.page,
+    size: params.value.size,
+    keyword: params.value.keyword,
+    status: params.value.status === 'all' ? undefined : params.value.status,
+    type: params.value.type === 'all' ? undefined : params.value.type,
+    health: params.value.health === 'all' ? undefined : params.value.health,
+    sortBy: params.value.sortBy,
+    sortOrder: params.value.sortOrder
+  }))
+
+  const hasActiveFilters = computed(
+    () =>
+      Boolean(params.value.keyword?.trim()) ||
+      params.value.status !== 'all' ||
+      params.value.type !== 'all' ||
+      params.value.health !== 'all'
+  )
+
+  const buildCurrentViewPresetParams = (): AdminFileViewPresetParams => ({
+    keyword: params.value.keyword || '',
+    status: params.value.status || 'all',
+    type: params.value.type || 'all',
+    health: params.value.health || 'all',
+    sortBy: params.value.sortBy || 'created_at',
+    sortOrder: params.value.sortOrder || 'desc',
+    size: params.value.size || 10
   })
 
+  const buildBuiltInViewPreset = (
+    id: string,
+    nameKey: string,
+    filters: Partial<AdminFileViewPresetParams> = {}
+  ): AdminFileViewPreset => {
+    const presetFilters = normalizeViewPresetParams({
+      ...buildDefaultViewPresetParams(),
+      ...filters
+    })
+
+    return {
+      id,
+      name: t(nameKey),
+      filters: presetFilters,
+      params: presetFilters,
+      isBuiltIn: true,
+      isDefault: id === builtInAllViewPresetId,
+      is_default: id === builtInAllViewPresetId
+    }
+  }
+
+  const builtInViewPresets = computed<AdminFileViewPreset[]>(() => [
+    buildBuiltInViewPreset(builtInAllViewPresetId, 'fileManage.viewPresetAll'),
+    buildBuiltInViewPreset('built_in_attention', 'fileManage.viewPresetAttention', {
+      health: 'attention'
+    }),
+    buildBuiltInViewPreset('built_in_expiring_soon', 'fileManage.viewPresetExpiringSoon', {
+      health: 'expiring_soon'
+    }),
+    buildBuiltInViewPreset('built_in_storage_issue', 'fileManage.viewPresetStorageIssue', {
+      health: 'storage_issue'
+    }),
+    buildBuiltInViewPreset('built_in_never_retrieved', 'fileManage.viewPresetNeverRetrieved', {
+      health: 'never_retrieved'
+    }),
+    buildBuiltInViewPreset('built_in_permanent', 'fileManage.viewPresetPermanent', {
+      health: 'permanent'
+    })
+  ])
+
+  const viewPresets = computed<AdminFileViewPreset[]>(() => [
+    ...builtInViewPresets.value,
+    ...savedViewPresets.value
+  ])
+
+  const healthFilterOptions = computed<HealthFilterOption[]>(() => [
+    { value: 'all', label: t('fileManage.healthFilters.all'), count: summary.value.totalFiles },
+    {
+      value: 'attention',
+      label: t('fileManage.healthFilters.attention'),
+      count: summary.value.healthAttentionCount
+    },
+    {
+      value: 'danger',
+      label: t('fileManage.healthFilters.danger'),
+      count: summary.value.healthDangerCount
+    },
+    {
+      value: 'warning',
+      label: t('fileManage.healthFilters.warning'),
+      count: summary.value.healthWarningCount
+    },
+    {
+      value: 'expiring_soon',
+      label: t('fileManage.healthFilters.expiringSoon'),
+      count: summary.value.expiringSoonCount
+    },
+    {
+      value: 'storage_issue',
+      label: t('fileManage.healthFilters.storageIssue'),
+      count: summary.value.storageIssueCount
+    },
+    {
+      value: 'never_retrieved',
+      label: t('fileManage.healthFilters.neverRetrieved'),
+      count: summary.value.neverRetrievedCount
+    },
+    {
+      value: 'healthy',
+      label: t('fileManage.healthFilters.healthy'),
+      count: summary.value.healthyCount
+    },
+    {
+      value: 'permanent',
+      label: t('fileManage.healthFilters.permanent'),
+      count: summary.value.permanentCount
+    }
+  ])
+
+  const detailPolicyActionOptions = computed<DetailPolicyActionOption[]>(() => [
+    {
+      action: 'extend_24h',
+      label: t('fileManage.policyActions.extend24h'),
+      description: t('fileManage.policyActionDescriptions.extend24h')
+    },
+    {
+      action: 'extend_7d',
+      label: t('fileManage.policyActions.extend7d'),
+      description: t('fileManage.policyActionDescriptions.extend7d')
+    },
+    {
+      action: 'make_permanent',
+      label: t('fileManage.policyActions.makePermanent'),
+      description: t('fileManage.policyActionDescriptions.makePermanent')
+    },
+    {
+      action: 'reset_download_limit',
+      label: t('fileManage.policyActions.resetDownloadLimit', {
+        count: detailPolicyDownloadLimit
+      }),
+      description: t('fileManage.policyActionDescriptions.resetDownloadLimit', {
+        count: detailPolicyDownloadLimit
+      })
+    }
+  ])
+
+  const batchPolicyActionOptions = computed<BatchPolicyActionOption[]>(
+    () => detailPolicyActionOptions.value
+  )
+
+  const inferIsText = (file: FileListItem) => {
+    if (typeof file.isText === 'boolean') return file.isText
+    if (typeof file.is_text === 'boolean') return file.is_text
+    if (file.type) return file.type === 'text'
+    return Boolean(file.text)
+  }
+
+  const inferIsExpired = (file: FileListItem) => {
+    if (typeof file.isExpired === 'boolean') return file.isExpired
+    if (typeof file.is_expired === 'boolean') return file.is_expired
+    if (
+      file.expired_count !== null &&
+      file.expired_count !== undefined &&
+      file.expired_count === 0
+    ) {
+      return true
+    }
+    return isExpiredByDate(file.expired_at)
+  }
+
+  const inferIsChunked = (file: FileListItem) => Boolean(file.isChunked ?? file.is_chunked)
+
+  const getRemainingDownloads = (file: FileListItem) => {
+    if (file.remainingDownloads !== undefined) return file.remainingDownloads
+    if (file.remaining_downloads !== undefined) return file.remaining_downloads
+    if (
+      file.expired_count !== null &&
+      file.expired_count !== undefined &&
+      file.expired_count >= 0
+    ) {
+      return Math.max(file.expired_count, 0)
+    }
+    return null
+  }
+
+  const buildFallbackSummary = (files: AdminFileViewItem[], total: number): AdminFileSummary => ({
+    totalFiles: total,
+    activeCount: files.filter((file) => !file.isExpiredFile).length,
+    expiredCount: files.filter((file) => file.isExpiredFile).length,
+    textCount: files.filter((file) => file.isTextFile).length,
+    fileCount: files.filter((file) => !file.isTextFile).length,
+    chunkedCount: files.filter((file) => file.isChunkedFile).length,
+    healthAttentionCount: files.filter((file) =>
+      ['danger', 'warning'].includes(file.statusInsightSeverity)
+    ).length,
+    healthDangerCount: files.filter((file) => file.statusInsightSeverity === 'danger').length,
+    healthWarningCount: files.filter((file) => file.statusInsightSeverity === 'warning').length,
+    expiringSoonCount: files.filter((file) => file.statusInsightReasons.includes('expires_soon'))
+      .length,
+    storageIssueCount: files.filter((file) =>
+      file.statusInsightReasons.includes('storage_metadata_incomplete')
+    ).length,
+    neverRetrievedCount: files.filter((file) =>
+      file.statusInsightReasons.includes('never_retrieved')
+    ).length,
+    healthyCount: files.filter((file) => file.statusInsightSeverity === 'success').length,
+    permanentCount: files.filter((file) => file.statusInsightState === 'permanent').length,
+    storageUsed: files.reduce((totalSize, file) => totalSize + normalizeCount(file.size), 0),
+    usedCount: files.reduce(
+      (totalUsed, file) => totalUsed + normalizeCount(file.usedCount ?? file.used_count),
+      0
+    )
+  })
+
+  const normalizeSummary = (
+    rawSummary: Partial<AdminFileSummary> | undefined,
+    files: AdminFileViewItem[],
+    total: number
+  ): AdminFileSummary => {
+    const fallback = buildFallbackSummary(files, total)
+    if (!rawSummary) return fallback
+
+    return {
+      totalFiles: normalizeCount(rawSummary.totalFiles ?? fallback.totalFiles),
+      activeCount: normalizeCount(rawSummary.activeCount ?? fallback.activeCount),
+      expiredCount: normalizeCount(rawSummary.expiredCount ?? fallback.expiredCount),
+      textCount: normalizeCount(rawSummary.textCount ?? fallback.textCount),
+      fileCount: normalizeCount(rawSummary.fileCount ?? fallback.fileCount),
+      chunkedCount: normalizeCount(rawSummary.chunkedCount ?? fallback.chunkedCount),
+      healthAttentionCount: normalizeCount(
+        rawSummary.healthAttentionCount ?? fallback.healthAttentionCount
+      ),
+      healthDangerCount: normalizeCount(rawSummary.healthDangerCount ?? fallback.healthDangerCount),
+      healthWarningCount: normalizeCount(
+        rawSummary.healthWarningCount ?? fallback.healthWarningCount
+      ),
+      expiringSoonCount: normalizeCount(rawSummary.expiringSoonCount ?? fallback.expiringSoonCount),
+      storageIssueCount: normalizeCount(rawSummary.storageIssueCount ?? fallback.storageIssueCount),
+      neverRetrievedCount: normalizeCount(
+        rawSummary.neverRetrievedCount ?? fallback.neverRetrievedCount
+      ),
+      healthyCount: normalizeCount(rawSummary.healthyCount ?? fallback.healthyCount),
+      permanentCount: normalizeCount(rawSummary.permanentCount ?? fallback.permanentCount),
+      storageUsed: normalizeCount(rawSummary.storageUsed ?? fallback.storageUsed),
+      usedCount: normalizeCount(rawSummary.usedCount ?? fallback.usedCount)
+    }
+  }
+
+  const normalizeInsightSeverity = (
+    severity: AdminFileInsightSeverity | undefined
+  ): AdminFileInsightSeverity => {
+    if (severity === 'success' || severity === 'warning' || severity === 'danger') {
+      return severity
+    }
+    if (severity === 'info' || severity === 'neutral') {
+      return severity
+    }
+    return 'neutral'
+  }
+
+  const createFileViewItem = (file: FileListItem): AdminFileViewItem => {
+    const isTextFile = inferIsText(file)
+    const isExpiredFile = inferIsExpired(file)
+    const isChunkedFile = inferIsChunked(file)
+    const remainingDownloadsValue = getRemainingDownloads(file)
+    const usedCount = normalizeCount(file.usedCount ?? file.used_count)
+    const statusInsights = file.statusInsights ?? file.status_insights
+    const isPermanentFile =
+      !file.expired_at &&
+      (file.expired_count === null || file.expired_count === undefined || file.expired_count < 0)
+    const statusInsightState =
+      statusInsights?.state ??
+      (isExpiredFile ? 'expired' : isPermanentFile ? 'permanent' : 'available')
+    const statusInsightNextAction =
+      statusInsights?.nextAction ?? statusInsights?.next_action ?? 'monitor'
+    const statusInsightSeverity = normalizeInsightSeverity(statusInsights?.severity)
+
+    return {
+      ...file,
+      displayName: file.name || `${file.prefix}${file.suffix}` || file.code,
+      displaySize: formatFileSize(file.size),
+      displayExpiredAt: file.expired_at
+        ? formatTimestamp(file.expired_at)
+        : t('send.expiration.units.forever'),
+      displayUsage: `${usedCount} ${t('common.times')}`,
+      displayHealthState: t(`fileManage.insightStates.${statusInsightState}`),
+      displayHealthAction: t(`fileManage.insightActions.${statusInsightNextAction}`),
+      isTextFile,
+      isExpiredFile,
+      isChunkedFile,
+      remainingDownloadsValue,
+      canPreviewText: isTextFile,
+      statusInsightSeverity,
+      statusInsightState,
+      statusInsightNextAction,
+      statusInsightReasons: statusInsights?.reasons || []
+    }
+  }
+
+  const formatTimelineValue = (item: AdminFileDetailTimelineItem) => {
+    if (item.key === 'download_limit') {
+      if (item.status === 'unlimited') return t('fileManage.unlimited')
+      if (typeof item.value === 'number') return t('fileManage.remaining', { count: item.value })
+    }
+
+    if (item.key === 'retrieved' && typeof item.value === 'number') {
+      return `${item.value} ${t('common.times')}`
+    }
+
+    if (item.key === 'expiration_policy') {
+      if (item.status === 'unlimited') return t('send.expiration.units.forever')
+      if (typeof item.value === 'number') {
+        const duration = formatDuration(Math.abs(item.value), (key) => t(key))
+        return item.value <= 0
+          ? t('fileManage.timeline.expiration_policy.overdue', { time: duration })
+          : t('fileManage.timeline.expiration_policy.remaining', { time: duration })
+      }
+    }
+
+    if (item.detail) return item.detail
+    if (item.value !== null && item.value !== undefined) return String(item.value)
+    return ''
+  }
+
+  const createTimelineViewItems = (items: AdminFileDetailTimelineItem[] = []) =>
+    items.map((item) => {
+      const timestampText = item.timestamp ? formatTimestamp(item.timestamp) : ''
+      const valueText = formatTimelineValue(item)
+      const metaParts = [timestampText, valueText].filter(Boolean)
+      return {
+        ...item,
+        severity: normalizeInsightSeverity(item.severity),
+        displayTitle: t(`fileManage.timeline.${item.key}.title`),
+        displayDescription: t(`fileManage.timeline.${item.key}.description`, {
+          status: t(`fileManage.timeline.status.${item.status || 'pending'}`),
+          detail: item.detail || '',
+          value: valueText || ''
+        }),
+        displayMeta: metaParts.length > 0 ? metaParts.join(' · ') : '-'
+      }
+    })
+
+  const normalizeMetadataTags = (tags: string[] | undefined) =>
+    Array.isArray(tags) ? tags.map((tag) => String(tag).trim()).filter(Boolean) : []
+
+  const parseMetadataTags = (value: string) =>
+    normalizeMetadataTags(value.split(metadataTagSeparatorPattern))
+
+  const formatMetadataTags = (tags: string[]) => normalizeMetadataTags(tags).join(', ')
+
+  const createFileDetailViewItem = (
+    file: FileListItem | AdminFileDetailResponse
+  ): AdminFileDetailViewItem => {
+    const detail = file as AdminFileDetailResponse
+    const policy = detail.policy
+    const storage = detail.storage
+    const expiredAt = policy?.expiredAt ?? policy?.expired_at ?? file.expired_at ?? null
+    const expiredCount = policy?.expiredCount ?? policy?.expired_count ?? file.expired_count ?? null
+    const displayName =
+      detail.displayName ??
+      detail.display_name ??
+      detail.filename ??
+      file.name ??
+      `${file.prefix}${file.suffix}` ??
+      file.code
+    const normalizedFile: FileListItem = {
+      ...file,
+      name: displayName,
+      expired_at: expiredAt,
+      expired_count: expiredCount
+    }
+    const viewItem = createFileViewItem(normalizedFile)
+    const remainingDownloadsValue =
+      policy?.remainingDownloads ?? policy?.remaining_downloads ?? viewItem.remainingDownloadsValue
+    const canPreviewText =
+      detail.canPreviewText ?? detail.can_preview_text ?? viewItem.canPreviewText
+    const canDownloadFile = detail.canDownload ?? detail.can_download ?? !viewItem.isExpiredFile
+    const textLengthValue = normalizeCount(
+      detail.textLength ?? detail.text_length ?? detail.text?.length
+    )
+    const isPermanentFile =
+      detail.isPermanent ??
+      detail.is_permanent ??
+      policy?.isPermanent ??
+      policy?.is_permanent ??
+      (!expiredAt && (expiredCount === null || expiredCount === undefined || expiredCount < 0))
+    const hasDownloadLimitFile =
+      detail.hasDownloadLimit ??
+      detail.has_download_limit ??
+      (expiredCount !== null && expiredCount !== undefined && expiredCount >= 0)
+    const hasExpirationTimeFile =
+      detail.hasExpirationTime ?? detail.has_expiration_time ?? Boolean(expiredAt)
+    const storageBackendValue =
+      storage?.backend ?? detail.storageBackend ?? detail.storage_backend ?? '-'
+    const isChunkedStorage = storage?.isChunked ?? storage?.is_chunked ?? viewItem.isChunkedFile
+    const statusInsights = detail.statusInsights ?? detail.status_insights
+    const statusInsightState =
+      statusInsights?.state ??
+      (viewItem.isExpiredFile ? 'expired' : isPermanentFile ? 'permanent' : 'available')
+    const statusInsightNextAction =
+      statusInsights?.nextAction ?? statusInsights?.next_action ?? 'monitor'
+    const metadata = detail.metadata ?? detail.meta
+    const metadataNote = detail.note ?? metadata?.note ?? ''
+    const metadataTags = normalizeMetadataTags(detail.tags ?? metadata?.tags)
+    const metadataUpdatedAt =
+      detail.metadataUpdatedAt ??
+      detail.metadata_updated_at ??
+      metadata?.updatedAt ??
+      metadata?.updated_at ??
+      null
+
+    return {
+      ...viewItem,
+      displayName,
+      displayExpiredAt: expiredAt ? formatTimestamp(expiredAt) : t('send.expiration.units.forever'),
+      displayCreatedAt: file.created_at ? formatTimestamp(file.created_at) : '-',
+      displayRetrieveUrl: buildRetrieveUrl(file.code),
+      remainingDownloadsValue,
+      canPreviewText,
+      textLengthValue,
+      canDownloadFile,
+      isPermanentFile,
+      hasDownloadLimitFile,
+      hasExpirationTimeFile,
+      isChunkedStorage: Boolean(isChunkedStorage),
+      storageBackendValue,
+      fileHashValue: storage?.fileHash ?? storage?.file_hash ?? detail.fileHash ?? detail.file_hash,
+      filePathValue: storage?.filePath ?? storage?.file_path ?? detail.filePath ?? detail.file_path,
+      uuidFileNameValue:
+        storage?.uuidFileName ??
+        storage?.uuid_file_name ??
+        detail.uuidFileName ??
+        detail.uuid_file_name,
+      uploadIdValue: storage?.uploadId ?? storage?.upload_id ?? detail.uploadId ?? detail.upload_id,
+      metadataNote,
+      metadataTags,
+      metadataUpdatedAt,
+      statusInsightSeverity: normalizeInsightSeverity(statusInsights?.severity),
+      statusInsightState,
+      statusInsightNextAction,
+      statusInsightReasons: statusInsights?.reasons || [],
+      statusInsightMetrics: statusInsights?.metrics,
+      detailTimeline: createTimelineViewItems(detail.timeline || [])
+    }
+  }
+
+  const syncDetailMetadataForm = (file: AdminFileDetailViewItem | null) => {
+    detailMetadataForm.value = {
+      note: file?.metadataNote || '',
+      tagsText: file ? formatMetadataTags(file.metadataTags) : ''
+    }
+  }
+
+  const setSelectedFileDetail = (file: FileListItem | AdminFileDetailResponse) => {
+    const nextFile = createFileDetailViewItem(file)
+    selectedFileDetail.value = nextFile
+    syncDetailMetadataForm(nextFile)
+  }
+
+  const syncSelectedFilesWithCurrentPage = () => {
+    const visibleIds = new Set(tableData.value.map((file) => file.id))
+    selectedFileIds.value = new Set(
+      Array.from(selectedFileIds.value).filter((id) => visibleIds.has(id))
+    )
+  }
+
+  const clearSelection = () => {
+    selectedFileIds.value = new Set()
+  }
+
+  const toggleFileSelection = (id: number) => {
+    const nextSelectedIds = new Set(selectedFileIds.value)
+    if (nextSelectedIds.has(id)) {
+      nextSelectedIds.delete(id)
+    } else {
+      nextSelectedIds.add(id)
+    }
+    selectedFileIds.value = nextSelectedIds
+  }
+
+  const toggleCurrentPageSelection = () => {
+    if (isAllCurrentPageSelected.value) {
+      clearSelection()
+      return
+    }
+
+    selectedFileIds.value = new Set(tableData.value.map((file) => file.id))
+  }
+
   const resetEditForm = () => {
     editForm.value = {
       id: null,
@@ -55,21 +774,384 @@ export function useAdminFiles() {
     }
   }
 
+  const resetBatchEditForm = () => {
+    batchEditForm.value = emptyBatchEditForm()
+  }
+
+  const openBatchEditModal = () => {
+    if (!hasSelectedFiles.value || isBatchActionRunning.value) return
+
+    resetBatchEditForm()
+    showBatchEditModal.value = true
+  }
+
+  const closeBatchEditModal = (force = false) => {
+    if (isBatchUpdating.value && !force) return
+
+    showBatchEditModal.value = false
+    resetBatchEditForm()
+  }
+
+  const buildBatchUpdatePayload = (ids: number[]): AdminBatchUpdateFilesRequest | null => {
+    const form = batchEditForm.value
+
+    if (form.mode === 'expiresAt') {
+      if (!form.expired_at) return null
+      return {
+        ids,
+        expired_at: form.expired_at
+      }
+    }
+
+    if (form.mode === 'downloadLimit') {
+      if (form.expired_count === null || !Number.isFinite(form.expired_count)) return null
+      return {
+        ids,
+        expired_count: form.expired_count
+      }
+    }
+
+    return {
+      ids,
+      clearExpiredAt: true,
+      clear_expired_at: true
+    }
+  }
+
+  const buildLegacyBatchPatchPayload = (
+    id: number,
+    payload: AdminBatchUpdateFilesRequest
+  ): AdminFilePatchPayload => {
+    if (payload.clearExpiredAt || payload.clear_expired_at) {
+      return {
+        id,
+        expired_at: legacyForeverExpiresAt,
+        expired_count: -1
+      }
+    }
+
+    const patchPayload: AdminFilePatchPayload = { id }
+    if (payload.expired_at !== undefined) {
+      patchPayload.expired_at = payload.expired_at
+    }
+    if (payload.expired_count !== undefined) {
+      patchPayload.expired_count = payload.expired_count
+    }
+    return patchPayload
+  }
+
+  const buildPolicyActionRequest = (
+    file: AdminFileDetailViewItem,
+    action: AdminFilePolicyAction
+  ): AdminFilePolicyActionRequest => {
+    const request: AdminFilePolicyActionRequest = {
+      id: file.id,
+      action
+    }
+
+    if (action === 'reset_download_limit') {
+      request.downloadLimit = detailPolicyDownloadLimit
+      request.download_limit = detailPolicyDownloadLimit
+    }
+
+    return request
+  }
+
+  const buildBatchPolicyActionRequest = (
+    ids: number[],
+    action: AdminFilePolicyAction
+  ): AdminBatchPolicyActionRequest => {
+    const request: AdminBatchPolicyActionRequest = {
+      ids,
+      action
+    }
+
+    if (action === 'reset_download_limit') {
+      request.downloadLimit = detailPolicyDownloadLimit
+      request.download_limit = detailPolicyDownloadLimit
+    }
+
+    return request
+  }
+
+  const getPolicyActionBaseDate = (file: Pick<FileListItem, 'expired_at'>) => {
+    const now = new Date()
+    const expiredAt = file.expired_at ? new Date(file.expired_at) : null
+    if (!expiredAt || Number.isNaN(expiredAt.getTime()) || expiredAt.getTime() < now.getTime()) {
+      return now
+    }
+    return expiredAt
+  }
+
+  const buildLegacyPolicyActionPayload = (
+    file: Pick<FileListItem, 'id' | 'expired_at'>,
+    action: AdminFilePolicyAction
+  ): AdminFilePatchPayload => {
+    if (action === 'make_permanent') {
+      return {
+        id: file.id,
+        expired_at: legacyForeverExpiresAt,
+        expired_count: -1
+      }
+    }
+
+    if (action === 'reset_download_limit') {
+      return {
+        id: file.id,
+        expired_count: detailPolicyDownloadLimit
+      }
+    }
+
+    const offsetDays = action === 'extend_7d' ? 7 : 1
+    const nextExpiredAt = new Date(
+      getPolicyActionBaseDate(file).getTime() + offsetDays * dayInMilliseconds
+    )
+    return {
+      id: file.id,
+      expired_at: formatLocalDateTime(nextExpiredAt)
+    }
+  }
+
+  const getPresetParams = (preset: AdminFileViewPreset) =>
+    normalizeViewPresetParams(preset.filters ?? preset.params)
+
+  const normalizeSavedViewPreset = (preset: AdminFileViewPreset): AdminFileViewPreset | null => {
+    const id = String(preset.id || '').trim()
+    const name = String(preset.name || '').trim()
+    if (!id || !name) return null
+
+    const presetParams = getPresetParams(preset)
+    return {
+      ...preset,
+      id,
+      name,
+      filters: presetParams,
+      params: presetParams,
+      isBuiltIn: false
+    }
+  }
+
+  const upsertSavedViewPreset = (preset: AdminFileViewPreset) => {
+    const normalizedPreset = normalizeSavedViewPreset(preset)
+    if (!normalizedPreset) return null
+
+    savedViewPresets.value = [
+      ...savedViewPresets.value.filter((item) => item.id !== normalizedPreset.id),
+      normalizedPreset
+    ]
+    return normalizedPreset
+  }
+
+  const buildViewPresetRequest = (name: string, id?: string): AdminFileViewPresetRequest | null => {
+    const normalizedName = name.trim()
+    if (!normalizedName) return null
+
+    const filters = normalizeViewPresetParams(buildCurrentViewPresetParams())
+    return {
+      id,
+      name: normalizedName,
+      filters,
+      params: filters
+    }
+  }
+
+  const markViewPresetDirty = () => {
+    selectedViewPresetId.value = ''
+  }
+
+  const loadViewPresets = async () => {
+    isViewPresetLoading.value = true
+    try {
+      const response = await FileService.getAdminFileViewPresets()
+      const rawPresets = response.detail?.presets ?? response.detail?.items ?? []
+      savedViewPresets.value = rawPresets
+        .map((preset) => normalizeSavedViewPreset(preset))
+        .filter((preset): preset is AdminFileViewPreset => Boolean(preset))
+
+      if (
+        selectedViewPresetId.value &&
+        !viewPresets.value.some((preset) => preset.id === selectedViewPresetId.value)
+      ) {
+        selectedViewPresetId.value = builtInAllViewPresetId
+      }
+    } catch (error: unknown) {
+      savedViewPresets.value = []
+      alertStore.showAlert(
+        isLegacyEndpointUnavailable(error)
+          ? t('fileManage.viewPresetLoadFailed')
+          : getErrorMessage(error, t('fileManage.viewPresetLoadFailed')),
+        'warning'
+      )
+    } finally {
+      isViewPresetLoading.value = false
+    }
+  }
+
+  const applyViewPreset = async (idOrPreset: string | AdminFileViewPreset) => {
+    const preset =
+      typeof idOrPreset === 'string'
+        ? viewPresets.value.find((item) => item.id === idOrPreset)
+        : idOrPreset
+    if (!preset) return
+
+    const presetParams = getPresetParams(preset)
+    params.value.keyword = presetParams.keyword
+    params.value.status = presetParams.status
+    params.value.type = presetParams.type
+    params.value.health = presetParams.health
+    params.value.sortBy = presetParams.sortBy
+    params.value.sortOrder = presetParams.sortOrder
+    params.value.size = presetParams.size
+    params.value.page = 1
+    selectedViewPresetId.value = preset.id
+    clearSelection()
+    await loadFiles()
+  }
+
+  const saveCurrentViewPreset = async (name: string) => {
+    const request = buildViewPresetRequest(name)
+    if (!request || isViewPresetSaving.value) return null
+
+    isViewPresetSaving.value = true
+    try {
+      const response = await FileService.saveAdminFileViewPreset(request)
+      const savedPreset = response.detail ? upsertSavedViewPreset(response.detail) : null
+      selectedViewPresetId.value = savedPreset?.id || selectedViewPresetId.value
+      alertStore.showAlert(t('fileManage.viewPresetSaveSuccess'), 'success')
+      return savedPreset
+    } catch (error: unknown) {
+      alertStore.showAlert(getErrorMessage(error, t('fileManage.viewPresetSaveFailed')), 'error')
+      return null
+    } finally {
+      isViewPresetSaving.value = false
+    }
+  }
+
+  const updateSelectedViewPreset = async () => {
+    const preset = savedViewPresets.value.find((item) => item.id === selectedViewPresetId.value)
+    if (!preset || isViewPresetSaving.value) return null
+
+    const request = buildViewPresetRequest(preset.name, preset.id)
+    if (!request) return null
+
+    isViewPresetSaving.value = true
+    try {
+      const response = await FileService.saveAdminFileViewPreset(request)
+      const savedPreset = response.detail ? upsertSavedViewPreset(response.detail) : null
+      selectedViewPresetId.value = savedPreset?.id || preset.id
+      alertStore.showAlert(t('fileManage.viewPresetSaveSuccess'), 'success')
+      return savedPreset
+    } catch (error: unknown) {
+      alertStore.showAlert(getErrorMessage(error, t('fileManage.viewPresetSaveFailed')), 'error')
+      return null
+    } finally {
+      isViewPresetSaving.value = false
+    }
+  }
+
+  const deleteSelectedViewPreset = async () => {
+    const preset = savedViewPresets.value.find((item) => item.id === selectedViewPresetId.value)
+    if (!preset || isViewPresetDeleting.value) return
+    if (!window.confirm(t('fileManage.viewPresetDeleteConfirm', { name: preset.name }))) return
+
+    isViewPresetDeleting.value = true
+    try {
+      await FileService.deleteAdminFileViewPreset(preset.id)
+      savedViewPresets.value = savedViewPresets.value.filter((item) => item.id !== preset.id)
+      markViewPresetDirty()
+      alertStore.showAlert(t('fileManage.viewPresetDeleteSuccess'), 'success')
+    } catch (error: unknown) {
+      alertStore.showAlert(getErrorMessage(error, t('fileManage.viewPresetDeleteFailed')), 'error')
+    } finally {
+      isViewPresetDeleting.value = false
+    }
+  }
+
+  const refreshSelectedFileDetail = async (fileId: number, detail?: AdminFileDetailResponse) => {
+    if (detail) {
+      setSelectedFileDetail(detail)
+      return
+    }
+
+    const fallbackFile = tableData.value.find((file) => file.id === fileId)
+    if (fallbackFile) {
+      setSelectedFileDetail(fallbackFile)
+    }
+
+    try {
+      const response = await FileService.getAdminFileDetail(fileId)
+      if (response.detail) {
+        setSelectedFileDetail(response.detail)
+      }
+    } catch (error: unknown) {
+      if (!isLegacyEndpointUnavailable(error)) {
+        throw error
+      }
+    }
+  }
+
   const loadFiles = async () => {
+    isLoading.value = true
     try {
       hasLoadError.value = false
-      const res = await FileService.getAdminFileList(params.value)
+      const res = await FileService.getAdminFileList(requestParams.value)
       if (!res.detail) return
 
       tableData.value = res.detail.data.map(createFileViewItem)
       params.value.total = res.detail.total
+      summary.value = normalizeSummary(res.detail.summary, tableData.value, res.detail.total)
+      syncSelectedFilesWithCurrentPage()
     } catch (error) {
       hasLoadError.value = true
-      alertStore.showAlert(getErrorMessage(error, t('manage.fileManage.loadFileListFailed')), 'error')
+      alertStore.showAlert(
+        getErrorMessage(error, t('manage.fileManage.loadFileListFailed')),
+        'error'
+      )
+    } finally {
+      isLoading.value = false
     }
   }
 
   const handleSearch = async () => {
+    markViewPresetDirty()
+    params.value.page = 1
+    await loadFiles()
+  }
+
+  const refreshFiles = async () => {
+    await loadFiles()
+  }
+
+  const resetFilters = async () => {
+    params.value.page = 1
+    params.value.keyword = ''
+    params.value.status = 'all'
+    params.value.type = 'all'
+    params.value.health = 'all'
+    params.value.sortBy = 'created_at'
+    params.value.sortOrder = 'desc'
+    selectedViewPresetId.value = builtInAllViewPresetId
+    clearSelection()
+    await loadFiles()
+  }
+
+  const setStatusFilter = async (status: AdminFileStatusFilter) => {
+    markViewPresetDirty()
+    params.value.status = status
+    params.value.page = 1
+    await loadFiles()
+  }
+
+  const setTypeFilter = async (type: AdminFileTypeFilter) => {
+    markViewPresetDirty()
+    params.value.type = type
+    params.value.page = 1
+    await loadFiles()
+  }
+
+  const setHealthFilter = async (health: AdminFileHealthFilter) => {
+    markViewPresetDirty()
+    params.value.health = health
     params.value.page = 1
     await loadFiles()
   }
@@ -100,12 +1182,17 @@ export function useAdminFiles() {
   }
 
   const handleUpdate = async () => {
+    if (isSaving.value) return
+
+    isSaving.value = true
     try {
       await FileService.updateFile(editForm.value)
       await loadFiles()
       closeEditModal()
     } catch (error: unknown) {
       alertStore.showAlert(getErrorMessage(error, t('manage.fileManage.updateFailed')), 'error')
+    } finally {
+      isSaving.value = false
     }
   }
 
@@ -116,20 +1203,380 @@ export function useAdminFiles() {
 
     try {
       await FileService.deleteAdminFile(id)
+      if (tableData.value.length === 1 && params.value.page > 1) {
+        params.value.page -= 1
+      }
+      selectedFileIds.value.delete(id)
+      selectedFileIds.value = new Set(selectedFileIds.value)
       await loadFiles()
     } catch (error: unknown) {
       alertStore.showAlert(getErrorMessage(error, t('manage.fileManage.deleteFailed')), 'error')
     }
   }
 
-  const openTextPreview = (text: string) => {
-    previewText.value = text
+  const deleteAdminFilesWithFallback = async (
+    ids: number[]
+  ): Promise<ApiResponse<AdminBatchDeleteFilesResponse>> => {
+    try {
+      return await FileService.deleteAdminFiles(ids)
+    } catch (error: unknown) {
+      if (!isLegacyEndpointUnavailable(error)) {
+        throw error
+      }
+
+      await Promise.all(ids.map((id) => FileService.deleteAdminFile(id)))
+      return {
+        code: 200,
+        detail: {
+          deletedCount: ids.length,
+          deleted_count: ids.length,
+          deleted: ids,
+          missing: [],
+          failed: []
+        }
+      }
+    }
+  }
+
+  const updateAdminFilesWithFallback = async (
+    ids: number[],
+    payload: AdminBatchUpdateFilesRequest
+  ): Promise<ApiResponse<AdminBatchUpdateFilesResponse>> => {
+    try {
+      return await FileService.updateAdminFiles(payload)
+    } catch (error: unknown) {
+      if (!isLegacyEndpointUnavailable(error)) {
+        throw error
+      }
+
+      await Promise.all(
+        ids.map((id) => FileService.updateFile(buildLegacyBatchPatchPayload(id, payload)))
+      )
+
+      return {
+        code: 200,
+        detail: {
+          updatedCount: ids.length,
+          updated_count: ids.length,
+          updated: ids,
+          missing: [],
+          failed: []
+        }
+      }
+    }
+  }
+
+  const applyAdminFilesPolicyActionWithFallback = async (
+    ids: number[],
+    action: AdminFilePolicyAction
+  ): Promise<ApiResponse<AdminBatchPolicyActionResponse>> => {
+    const request = buildBatchPolicyActionRequest(ids, action)
+    try {
+      return await FileService.applyAdminFilesPolicyAction(request)
+    } catch (error: unknown) {
+      if (!isLegacyEndpointUnavailable(error)) {
+        throw error
+      }
+
+      const filesById = new Map(tableData.value.map((file) => [file.id, file]))
+      const updated: number[] = []
+      const missing: number[] = []
+      const failed: { id: number; reason: string }[] = []
+
+      for (const id of ids) {
+        const file = filesById.get(id)
+        if (!file) {
+          missing.push(id)
+          continue
+        }
+
+        try {
+          await FileService.updateFile(buildLegacyPolicyActionPayload(file, action))
+          updated.push(id)
+        } catch (legacyError: unknown) {
+          failed.push({ id, reason: getErrorMessage(legacyError, t('common.unknownError')) })
+        }
+      }
+
+      return {
+        code: 200,
+        detail: {
+          requestedCount: ids.length,
+          requested_count: ids.length,
+          uniqueCount: ids.length,
+          unique_count: ids.length,
+          updatedCount: updated.length,
+          updated_count: updated.length,
+          missingCount: missing.length,
+          missing_count: missing.length,
+          failedCount: failed.length,
+          failed_count: failed.length,
+          action,
+          updated,
+          missing,
+          failed
+        }
+      }
+    }
+  }
+
+  const deleteSelectedFiles = async () => {
+    if (!hasSelectedFiles.value || isBatchActionRunning.value) return
+
+    const ids = Array.from(selectedFileIds.value)
+    if (!window.confirm(t('fileManage.batchDeleteConfirm', { count: ids.length }))) {
+      return
+    }
+
+    isBatchDeleting.value = true
+    try {
+      const response = await deleteAdminFilesWithFallback(ids)
+      const detail = response.detail
+      const deletedCount = detail?.deletedCount ?? detail?.deleted_count ?? ids.length
+      const failedCount = detail?.failedCount ?? detail?.failed_count ?? 0
+
+      if (tableData.value.length <= deletedCount && params.value.page > 1) {
+        params.value.page -= 1
+      }
+
+      clearSelection()
+      await loadFiles()
+      alertStore.showAlert(
+        t(
+          failedCount > 0
+            ? 'fileManage.batchDeletePartialSuccess'
+            : 'fileManage.batchDeleteSuccess',
+          {
+            count: deletedCount,
+            failed: failedCount
+          }
+        ),
+        failedCount > 0 ? 'warning' : 'success'
+      )
+    } catch (error: unknown) {
+      alertStore.showAlert(getErrorMessage(error, t('fileManage.batchDeleteFailed')), 'error')
+    } finally {
+      isBatchDeleting.value = false
+    }
+  }
+
+  const handleBatchUpdate = async () => {
+    if (!hasSelectedFiles.value || isBatchActionRunning.value) return
+
+    const ids = Array.from(selectedFileIds.value)
+    const payload = buildBatchUpdatePayload(ids)
+    if (!payload) {
+      alertStore.showAlert(t('fileManage.batchUpdateNoFields'), 'warning')
+      return
+    }
+
+    if (!window.confirm(t('fileManage.batchUpdateConfirm', { count: ids.length }))) {
+      return
+    }
+
+    isBatchUpdating.value = true
+    try {
+      const response = await updateAdminFilesWithFallback(ids, payload)
+      const detail = response.detail
+      const updatedCount = detail?.updatedCount ?? detail?.updated_count ?? ids.length
+      const failedCount = detail?.failedCount ?? detail?.failed_count ?? 0
+
+      clearSelection()
+      await loadFiles()
+      closeBatchEditModal(true)
+      alertStore.showAlert(
+        t(
+          failedCount > 0
+            ? 'fileManage.batchUpdatePartialSuccess'
+            : 'fileManage.batchUpdateSuccess',
+          {
+            count: updatedCount,
+            failed: failedCount
+          }
+        ),
+        failedCount > 0 ? 'warning' : 'success'
+      )
+    } catch (error: unknown) {
+      alertStore.showAlert(getErrorMessage(error, t('fileManage.batchUpdateFailed')), 'error')
+    } finally {
+      isBatchUpdating.value = false
+    }
+  }
+
+  const applySelectedPolicyAction = async (action: AdminFilePolicyAction) => {
+    if (!hasSelectedFiles.value || isBatchActionRunning.value) return
+
+    const ids = Array.from(selectedFileIds.value)
+    const actionLabel =
+      batchPolicyActionOptions.value.find((option) => option.action === action)?.label || action
+    if (
+      !window.confirm(
+        t('fileManage.batchPolicyActionConfirm', {
+          count: ids.length,
+          action: actionLabel
+        })
+      )
+    ) {
+      return
+    }
+
+    isBatchPolicyActionRunning.value = true
+    try {
+      const response = await applyAdminFilesPolicyActionWithFallback(ids, action)
+      const detail = response.detail
+      const updatedCount = detail?.updatedCount ?? detail?.updated_count ?? ids.length
+      const failedCount =
+        (detail?.failedCount ?? detail?.failed_count ?? 0) +
+        (detail?.missingCount ?? detail?.missing_count ?? 0)
+
+      clearSelection()
+      await loadFiles()
+      alertStore.showAlert(
+        t(
+          failedCount > 0
+            ? 'fileManage.batchPolicyActionPartialSuccess'
+            : 'fileManage.batchPolicyActionSuccess',
+          {
+            count: updatedCount,
+            failed: failedCount
+          }
+        ),
+        failedCount > 0 ? 'warning' : 'success'
+      )
+    } catch (error: unknown) {
+      alertStore.showAlert(getErrorMessage(error, t('fileManage.batchPolicyActionFailed')), 'error')
+    } finally {
+      isBatchPolicyActionRunning.value = false
+    }
+  }
+
+  const openTextPreview = async (file: AdminFileViewItem) => {
+    if (!file.isTextFile || isPreviewLoading.value) return
+
+    previewFile.value = file
+    previewText.value = file.text || ''
+    previewMetaText.value = ''
     showTextPreview.value = true
+    isPreviewLoading.value = true
+
+    try {
+      const response = await FileService.previewAdminFile(file.id)
+      if (!response.detail) {
+        throw new Error(t('fileManage.previewFailed'))
+      }
+
+      previewText.value = response.detail.content
+      previewMetaText.value = response.detail.truncated
+        ? t('fileManage.previewTruncated', {
+            shown: response.detail.previewLength ?? response.detail.preview_length ?? 0,
+            total: response.detail.length
+          })
+        : t('fileManage.previewComplete', { count: response.detail.length })
+    } catch (error: unknown) {
+      if (file.text) {
+        previewText.value = file.text
+        previewMetaText.value = t('fileManage.previewFallback')
+        return
+      }
+
+      closeTextPreview()
+      alertStore.showAlert(getErrorMessage(error, t('fileManage.previewFailed')), 'error')
+    } finally {
+      isPreviewLoading.value = false
+    }
   }
 
   const closeTextPreview = () => {
     showTextPreview.value = false
     previewText.value = ''
+    previewFile.value = null
+    previewMetaText.value = ''
+  }
+
+  const openFileDetail = async (file: AdminFileViewItem) => {
+    const requestSerial = ++detailRequestSerial
+    setSelectedFileDetail(file)
+    showFileDetailModal.value = true
+    isDetailLoading.value = true
+
+    try {
+      const response = await FileService.getAdminFileDetail(file.id)
+      if (response.detail && requestSerial === detailRequestSerial) {
+        setSelectedFileDetail(response.detail)
+      }
+    } catch (error: unknown) {
+      if (isLegacyEndpointUnavailable(error)) return
+
+      alertStore.showAlert(getErrorMessage(error, t('fileManage.detailFailed')), 'error')
+    } finally {
+      if (requestSerial === detailRequestSerial) {
+        isDetailLoading.value = false
+      }
+    }
+  }
+
+  const applyDetailPolicyAction = async (action: AdminFilePolicyAction) => {
+    const file = selectedFileDetail.value
+    if (!file || isDetailPolicyActionRunning.value) return
+
+    isDetailPolicyActionRunning.value = true
+    try {
+      let nextDetail: AdminFileDetailResponse | undefined
+
+      try {
+        const response = await FileService.applyAdminFilePolicyAction(
+          buildPolicyActionRequest(file, action)
+        )
+        nextDetail = response.detail
+      } catch (error: unknown) {
+        if (!isLegacyEndpointUnavailable(error)) {
+          throw error
+        }
+        await FileService.updateFile(buildLegacyPolicyActionPayload(file, action))
+      }
+
+      await loadFiles()
+      await refreshSelectedFileDetail(file.id, nextDetail)
+      alertStore.showAlert(t('fileManage.policyActionSuccess'), 'success')
+    } catch (error: unknown) {
+      alertStore.showAlert(getErrorMessage(error, t('fileManage.policyActionFailed')), 'error')
+    } finally {
+      isDetailPolicyActionRunning.value = false
+    }
+  }
+
+  const updateDetailMetadata = async () => {
+    const file = selectedFileDetail.value
+    if (!file || isDetailMetadataSaving.value) return
+
+    const payload: AdminFileMetadataRequest = {
+      id: file.id,
+      note: detailMetadataForm.value.note,
+      tags: parseMetadataTags(detailMetadataForm.value.tagsText)
+    }
+
+    isDetailMetadataSaving.value = true
+    try {
+      const response = await FileService.updateAdminFileMetadata(payload)
+      if (response.detail) {
+        setSelectedFileDetail(response.detail)
+      } else {
+        await refreshSelectedFileDetail(file.id)
+      }
+      alertStore.showAlert(t('fileManage.metadataSaveSuccess'), 'success')
+    } catch (error: unknown) {
+      alertStore.showAlert(getErrorMessage(error, t('fileManage.metadataSaveFailed')), 'error')
+    } finally {
+      isDetailMetadataSaving.value = false
+    }
+  }
+
+  const closeFileDetail = () => {
+    detailRequestSerial += 1
+    showFileDetailModal.value = false
+    selectedFileDetail.value = null
+    syncDetailMetadataForm(null)
+    isDetailLoading.value = false
   }
 
   const copyText = async () => {
@@ -140,24 +1587,129 @@ export function useAdminFiles() {
     })
   }
 
+  const copyDetailRetrieveCode = async () => {
+    if (!selectedFileDetail.value) return
+
+    await copyToClipboard(selectedFileDetail.value.code, {
+      successMsg: t('fileManage.copyCodeSuccess'),
+      errorMsg: t('fileManage.copyFailed'),
+      notify: (message, type) => alertStore.showAlert(message, type)
+    })
+  }
+
+  const copyDetailRetrieveLink = async () => {
+    if (!selectedFileDetail.value) return
+
+    await copyToClipboard(selectedFileDetail.value.displayRetrieveUrl, {
+      successMsg: t('fileManage.copyLinkSuccess'),
+      errorMsg: t('fileManage.copyFailed'),
+      notify: (message, type) => alertStore.showAlert(message, type)
+    })
+  }
+
+  const exportPreviewText = () => {
+    if (!previewFile.value || !previewText.value) return
+    exportAdminTextFile(previewFile.value, previewText.value)
+  }
+
+  const downloadFile = async (file: AdminFileViewItem) => {
+    if (downloadingFileId.value) return
+
+    downloadingFileId.value = file.id
+    try {
+      const response = await FileService.downloadAdminFile(file.id)
+      await downloadAdminManagedFile(file, response)
+      alertStore.showAlert(
+        t(file.isTextFile ? 'fileManage.exportSuccess' : 'fileManage.downloadSuccess', {
+          name: getSafeFilename(file.displayName || file.code)
+        }),
+        'success'
+      )
+    } catch (error: unknown) {
+      alertStore.showAlert(getErrorMessage(error, t('fileManage.downloadFailed')), 'error')
+    } finally {
+      downloadingFileId.value = null
+    }
+  }
+
   return {
     tableData,
     hasLoadError,
+    hasActiveFilters,
+    isLoading,
+    isAllCurrentPageSelected,
+    isBatchActionRunning,
+    isBatchDeleting,
+    isBatchPolicyActionRunning,
+    isBatchUpdating,
+    isCurrentPagePartiallySelected,
+    isDetailLoading,
+    isDetailMetadataSaving,
+    isDetailPolicyActionRunning,
+    isPreviewLoading,
+    isSaving,
+    isViewPresetDeleting,
+    isViewPresetLoading,
+    isViewPresetSaving,
+    batchEditForm,
+    batchPolicyActionOptions,
+    detailPolicyActionOptions,
+    detailMetadataForm,
+    downloadingFileId,
+    healthFilterOptions,
+    hasSelectedFiles,
     params,
+    previewFile,
+    previewMetaText,
+    selectedFileDetail,
+    selectedCount,
+    selectedFileIds,
+    selectedViewPresetId,
+    storageUsedText,
+    summary,
+    showBatchEditModal,
     showEditModal,
+    showFileDetailModal,
     editForm,
     showTextPreview,
     previewText,
     totalPages,
+    viewPresets,
+    applyViewPreset,
     closeEditModal,
+    closeBatchEditModal,
+    closeFileDetail,
     closeTextPreview,
+    copyDetailRetrieveCode,
+    copyDetailRetrieveLink,
     copyText,
+    clearSelection,
     deleteFile,
+    deleteSelectedFiles,
+    deleteSelectedViewPreset,
+    downloadFile,
+    exportPreviewText,
     handlePageChange,
     handleSearch,
+    applyDetailPolicyAction,
+    applySelectedPolicyAction,
+    handleBatchUpdate,
     handleUpdate,
+    loadViewPresets,
     loadFiles,
+    openBatchEditModal,
     openEditModal,
-    openTextPreview
+    openFileDetail,
+    openTextPreview,
+    refreshFiles,
+    resetFilters,
+    saveCurrentViewPreset,
+    setHealthFilter,
+    setStatusFilter,
+    setTypeFilter,
+    updateSelectedViewPreset,
+    updateDetailMetadata,
+    toggleCurrentPageSelection,
+    toggleFileSelection
   }
 }
diff --git a/src/composables/useAdminLogin.ts b/src/composables/useAdminLogin.ts
index 7c81627..ce6a219 100644
--- a/src/composables/useAdminLogin.ts
+++ b/src/composables/useAdminLogin.ts
@@ -35,7 +35,13 @@ export function useAdminLogin() {
         return false
       }
 
-      adminStore.setToken(response.detail.token)
+      adminStore.login({
+        id: response.detail.id || 'admin',
+        username: response.detail.username || 'admin',
+        token: response.detail.token,
+        token_type: response.detail.token_type,
+        expires_at: response.detail.expires_at
+      })
       return true
     } catch (error: unknown) {
       alertStore.showAlert(getErrorMessage(error, '登录失败'), 'error')
diff --git a/src/composables/useAdminSession.ts b/src/composables/useAdminSession.ts
new file mode 100644
index 0000000..9333146
--- /dev/null
+++ b/src/composables/useAdminSession.ts
@@ -0,0 +1,35 @@
+import { AuthService } from '@/services'
+import { useAdminStore } from '@/stores/adminStore'
+
+export function useAdminSession() {
+  const adminStore = useAdminStore()
+
+  const verifySession = async () => {
+    if (!adminStore.hasToken) return false
+
+    try {
+      const response = await AuthService.verifyToken()
+      if (response.code === 200 && response.detail?.token) {
+        adminStore.login(response.detail)
+        return true
+      }
+    } catch {
+      adminStore.logout()
+    }
+
+    return false
+  }
+
+  const logout = async () => {
+    try {
+      await AuthService.logout()
+    } finally {
+      adminStore.logout()
+    }
+  }
+
+  return {
+    verifySession,
+    logout
+  }
+}
diff --git a/src/composables/useAppShell.ts b/src/composables/useAppShell.ts
index dee134a..434a2af 100644
--- a/src/composables/useAppShell.ts
+++ b/src/composables/useAppShell.ts
@@ -13,6 +13,13 @@ export function useAppShell() {
   const { isLoading, setupRouteLoading } = useRouteLoading(router)
   const { syncPublicConfig } = usePublicConfigBootstrap()
   const showGlobalControls = computed(() => route.meta.showGlobalControls !== false)
+  const routeTransitionName = computed(() => String(route.meta.routeTransition || 'fade'))
+  const routeTransitionMode = computed(() => (route.meta.routeTransition ? undefined : 'out-in'))
+  const routeViewKey = computed(() =>
+    route.path === ROUTES.ADMIN || route.path.startsWith(`${ROUTES.ADMIN}/`)
+      ? ROUTES.ADMIN
+      : route.fullPath
+  )
 
   let cleanupThemeListener: (() => void) | null = null
 
@@ -47,6 +54,9 @@ export function useAppShell() {
     isDarkMode,
     isLoading,
     route,
+    routeTransitionMode,
+    routeTransitionName,
+    routeViewKey,
     showGlobalControls
   }
 }
diff --git a/src/composables/useDashboardStats.ts b/src/composables/useDashboardStats.ts
index 452fc92..9de8ab7 100644
--- a/src/composables/useDashboardStats.ts
+++ b/src/composables/useDashboardStats.ts
@@ -1,7 +1,11 @@
-import { reactive } from 'vue'
+import { computed, ref, reactive } from 'vue'
 import { StatsService } from '@/services'
-import type { DashboardViewData } from '@/types'
-import { formatFileSize } from '@/utils/common'
+import type { DashboardData, DashboardHealthSummary, DashboardViewData } from '@/types'
+import { formatFileSize, getErrorMessage } from '@/utils/common'
+
+type UseDashboardStatsOptions = {
+  loadFailedMessage?: string
+}
 
 const emptyDashboardData = (): DashboardViewData => ({
   hasExtendedStats: false,
@@ -23,8 +27,14 @@ const emptyDashboardData = (): DashboardViewData => ({
   openUpload: 0,
   enableChunk: 0,
   maxSaveSeconds: 0,
-  topSuffixes: [],
-  recentFiles: [],
+  healthAttentionCount: 0,
+  healthDangerCount: 0,
+  healthWarningCount: 0,
+  expiringSoonCount: 0,
+  storageIssueCount: 0,
+  neverRetrievedCount: 0,
+  healthyCount: 0,
+  permanentCount: 0,
   storageUsedText: '0 Bytes',
   yesterdaySizeText: '0 Bytes',
   todaySizeText: '0 Bytes',
@@ -33,6 +43,8 @@ const emptyDashboardData = (): DashboardViewData => ({
   activeRatio: 0,
   textRatio: 0,
   fileRatio: 0,
+  healthyRatio: 0,
+  healthAttentionRatio: 0,
   todaySizeRatio: 0
 })
 
@@ -50,59 +62,119 @@ const formatDuration = (startTimestamp: number | null) => {
   return `${days}天${hours}小时`
 }
 
-export function useDashboardStats() {
+const healthSummaryKeys: (keyof DashboardHealthSummary)[] = [
+  'healthAttentionCount',
+  'healthDangerCount',
+  'healthWarningCount',
+  'expiringSoonCount',
+  'storageIssueCount',
+  'neverRetrievedCount',
+  'healthyCount',
+  'permanentCount'
+]
+
+const normalizeHealthSummary = (detail: DashboardData): DashboardHealthSummary => ({
+  healthAttentionCount: toNumber(
+    detail.healthSummary?.healthAttentionCount ?? detail.healthAttentionCount
+  ),
+  healthDangerCount: toNumber(detail.healthSummary?.healthDangerCount ?? detail.healthDangerCount),
+  healthWarningCount: toNumber(
+    detail.healthSummary?.healthWarningCount ?? detail.healthWarningCount
+  ),
+  expiringSoonCount: toNumber(detail.healthSummary?.expiringSoonCount ?? detail.expiringSoonCount),
+  storageIssueCount: toNumber(detail.healthSummary?.storageIssueCount ?? detail.storageIssueCount),
+  neverRetrievedCount: toNumber(
+    detail.healthSummary?.neverRetrievedCount ?? detail.neverRetrievedCount
+  ),
+  healthyCount: toNumber(detail.healthSummary?.healthyCount ?? detail.healthyCount),
+  permanentCount: toNumber(detail.healthSummary?.permanentCount ?? detail.permanentCount)
+})
+
+export function useDashboardStats(options: UseDashboardStatsOptions = {}) {
   const dashboardData = reactive<DashboardViewData>(emptyDashboardData())
+  const isLoading = ref(false)
+  const errorMessage = ref('')
+  const lastUpdatedAt = ref<Date | null>(null)
+  const lastUpdatedText = computed(() =>
+    lastUpdatedAt.value ? lastUpdatedAt.value.toLocaleString() : '-'
+  )
 
   const fetchDashboardData = async () => {
-    const response = await StatsService.getDashboard()
-    if (!response.detail) return
+    isLoading.value = true
+    errorMessage.value = ''
 
-    const detail = response.detail
-    dashboardData.totalFiles = toNumber(detail.totalFiles)
-    dashboardData.storageUsed = toNumber(detail.storageUsed)
-    dashboardData.yesterdayCount = toNumber(detail.yesterdayCount)
-    dashboardData.todayCount = toNumber(detail.todayCount)
-    dashboardData.yesterdaySize = toNumber(detail.yesterdaySize)
-    dashboardData.todaySize = toNumber(detail.todaySize)
-    dashboardData.sysUptime = detail.sysUptime
-    dashboardData.hasExtendedStats = hasOwn(detail, 'activeCount')
-    dashboardData.activeCount = dashboardData.hasExtendedStats
-      ? toNumber(detail.activeCount)
-      : dashboardData.totalFiles
-    dashboardData.expiredCount = toNumber(detail.expiredCount)
-    dashboardData.textCount = toNumber(detail.textCount)
-    dashboardData.fileCount = toNumber(detail.fileCount)
-    dashboardData.chunkedCount = toNumber(detail.chunkedCount)
-    dashboardData.usedCount = toNumber(detail.usedCount)
-    dashboardData.storageBackend = detail.storageBackend || '-'
-    dashboardData.uploadSizeLimit = toNumber(detail.uploadSizeLimit)
-    dashboardData.openUpload = toNumber(detail.openUpload)
-    dashboardData.enableChunk = toNumber(detail.enableChunk)
-    dashboardData.maxSaveSeconds = toNumber(detail.maxSaveSeconds)
-    dashboardData.topSuffixes = detail.topSuffixes || []
-    dashboardData.recentFiles = detail.recentFiles || []
+    try {
+      const response = await StatsService.getDashboard()
+      if (!response.detail) {
+        throw new Error('No dashboard data')
+      }
 
-    dashboardData.storageUsedText = formatFileSize(dashboardData.storageUsed)
-    dashboardData.yesterdaySizeText = formatFileSize(dashboardData.yesterdaySize)
-    dashboardData.todaySizeText = formatFileSize(dashboardData.todaySize)
-    dashboardData.uploadSizeLimitText = formatFileSize(dashboardData.uploadSizeLimit)
-    dashboardData.sysUptimeText = formatDuration(dashboardData.sysUptime)
-    dashboardData.activeRatio = dashboardData.totalFiles
-      ? clampRatio((dashboardData.activeCount / dashboardData.totalFiles) * 100)
-      : 0
-    dashboardData.textRatio = dashboardData.totalFiles
-      ? clampRatio((dashboardData.textCount / dashboardData.totalFiles) * 100)
-      : 0
-    dashboardData.fileRatio = dashboardData.totalFiles
-      ? clampRatio((dashboardData.fileCount / dashboardData.totalFiles) * 100)
-      : 0
-    dashboardData.todaySizeRatio = dashboardData.uploadSizeLimit
-      ? clampRatio((dashboardData.todaySize / dashboardData.uploadSizeLimit) * 100)
-      : 0
+      const detail = response.detail
+      dashboardData.totalFiles = toNumber(detail.totalFiles)
+      dashboardData.storageUsed = toNumber(detail.storageUsed)
+      dashboardData.yesterdayCount = toNumber(detail.yesterdayCount)
+      dashboardData.todayCount = toNumber(detail.todayCount)
+      dashboardData.yesterdaySize = toNumber(detail.yesterdaySize)
+      dashboardData.todaySize = toNumber(detail.todaySize)
+      dashboardData.sysUptime = detail.sysUptime
+      dashboardData.hasExtendedStats = hasOwn(detail, 'activeCount')
+      dashboardData.activeCount = dashboardData.hasExtendedStats
+        ? toNumber(detail.activeCount)
+        : dashboardData.totalFiles
+      dashboardData.expiredCount = toNumber(detail.expiredCount)
+      dashboardData.textCount = toNumber(detail.textCount)
+      dashboardData.fileCount = toNumber(detail.fileCount)
+      dashboardData.chunkedCount = toNumber(detail.chunkedCount)
+      dashboardData.usedCount = toNumber(detail.usedCount)
+      dashboardData.storageBackend = detail.storageBackend || '-'
+      dashboardData.uploadSizeLimit = toNumber(detail.uploadSizeLimit)
+      dashboardData.openUpload = toNumber(detail.openUpload)
+      dashboardData.enableChunk = toNumber(detail.enableChunk)
+      dashboardData.maxSaveSeconds = toNumber(detail.maxSaveSeconds)
+      const healthSummary = normalizeHealthSummary(detail)
+      healthSummaryKeys.forEach((key) => {
+        dashboardData[key] = healthSummary[key]
+      })
+
+      dashboardData.storageUsedText = formatFileSize(dashboardData.storageUsed)
+      dashboardData.yesterdaySizeText = formatFileSize(dashboardData.yesterdaySize)
+      dashboardData.todaySizeText = formatFileSize(dashboardData.todaySize)
+      dashboardData.uploadSizeLimitText = formatFileSize(dashboardData.uploadSizeLimit)
+      dashboardData.sysUptimeText = formatDuration(dashboardData.sysUptime)
+      dashboardData.activeRatio = dashboardData.totalFiles
+        ? clampRatio((dashboardData.activeCount / dashboardData.totalFiles) * 100)
+        : 0
+      dashboardData.textRatio = dashboardData.totalFiles
+        ? clampRatio((dashboardData.textCount / dashboardData.totalFiles) * 100)
+        : 0
+      dashboardData.fileRatio = dashboardData.totalFiles
+        ? clampRatio((dashboardData.fileCount / dashboardData.totalFiles) * 100)
+        : 0
+      dashboardData.healthyRatio = dashboardData.totalFiles
+        ? clampRatio((dashboardData.healthyCount / dashboardData.totalFiles) * 100)
+        : 0
+      dashboardData.healthAttentionRatio = dashboardData.totalFiles
+        ? clampRatio((dashboardData.healthAttentionCount / dashboardData.totalFiles) * 100)
+        : 0
+      dashboardData.todaySizeRatio = dashboardData.uploadSizeLimit
+        ? clampRatio((dashboardData.todaySize / dashboardData.uploadSizeLimit) * 100)
+        : 0
+      lastUpdatedAt.value = new Date()
+    } catch (error) {
+      errorMessage.value = getErrorMessage(
+        error,
+        options.loadFailedMessage || 'Failed to load dashboard data'
+      )
+    } finally {
+      isLoading.value = false
+    }
   }
 
   return {
     dashboardData,
-    fetchDashboardData
+    errorMessage,
+    fetchDashboardData,
+    isLoading,
+    lastUpdatedText
   }
 }
diff --git a/src/composables/usePresignedUpload.ts b/src/composables/usePresignedUpload.ts
index 2ff2035..97630af 100644
--- a/src/composables/usePresignedUpload.ts
+++ b/src/composables/usePresignedUpload.ts
@@ -213,10 +213,13 @@ export function usePresignedUpload(options: UsePresignedUploadOptions = {}) {
       presignStatus.value = PRESIGN_UPLOAD_STATUS.UPLOADING
 
       const progressHandler = createProgressHandler(options?.onProgress)
+      const uploadUrl =
+        session.proxy_upload_url || session.upload_url || session.legacy_proxy_upload_url
       const response = await PresignUploadService.proxyUpload(
         session.upload_id,
         file,
-        progressHandler
+        progressHandler,
+        uploadUrl
       )
 
       if (response.code === 200 && response.detail?.code) {
diff --git a/src/composables/usePublicConfigBootstrap.ts b/src/composables/usePublicConfigBootstrap.ts
index 43b5482..d32c536 100644
--- a/src/composables/usePublicConfigBootstrap.ts
+++ b/src/composables/usePublicConfigBootstrap.ts
@@ -13,7 +13,8 @@ export function usePublicConfigBootstrap() {
       return
     }
 
-    const notifyMessage = configStore.applyRemoteConfig(res.detail)
+    configStore.applyPublicMeta(res.detail.meta)
+    const notifyMessage = configStore.applyRemoteConfig(res.detail.config)
     if (notifyMessage) {
       alertStore.showAlert(notifyMessage, 'success')
     }
diff --git a/src/composables/useRetrieveFlow.ts b/src/composables/useRetrieveFlow.ts
index 60dc4ef..e287a84 100644
--- a/src/composables/useRetrieveFlow.ts
+++ b/src/composables/useRetrieveFlow.ts
@@ -1,10 +1,10 @@
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { storeToRefs } from 'pinia'
 import { FileService } from '@/services'
 import { useAlertStore } from '@/stores/alertStore'
 import { useFileDataStore } from '@/stores/fileData'
-import type { ReceivedFileRecord } from '@/types'
+import type { ReceivedFileRecord, ShareMetadataResponse, ShareSelectResponse } from '@/types'
 import { copyToClipboard } from '@/utils/clipboard'
 import { getErrorMessage } from '@/utils/common'
 import { renderMarkdownPreview } from '@/utils/content-preview'
@@ -22,6 +22,9 @@ export function useRetrieveFlow() {
   const { receiveData: records } = storeToRefs(fileStore)
 
   const code = ref('')
+  const inspectedFile = ref<ShareMetadataResponse | null>(null)
+  const isInspecting = ref(false)
+  const isRetrieving = ref(false)
   const inputStatus = ref<InputStatus>({
     readonly: false,
     loading: false
@@ -31,6 +34,9 @@ export function useRetrieveFlow() {
   const showDrawer = ref(false)
   const showPreview = ref(false)
   const renderedContent = ref('')
+  const normalizedCode = computed(() => code.value.trim())
+  const isWorking = computed(() => isInspecting.value || isRetrieving.value)
+  const hasValidCode = computed(() => normalizedCode.value.length === 5)
 
   const formatFileSize = (bytes: number) => {
     if (bytes === 0) return '0 ' + t('fileSize.bytes')
@@ -46,52 +52,103 @@ export function useRetrieveFlow() {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
   }
 
-  const createRecord = (detail: {
-    code: string
-    name: string
-    text: string
-    size: number
-  }): ReceivedFileRecord => {
-    const isFile = detail.text.startsWith('/share/download') || detail.name !== 'Text'
+  const createRecord = (detail: ShareSelectResponse): ReceivedFileRecord => {
+    const isText =
+      typeof detail.is_text === 'boolean'
+        ? detail.is_text
+        : detail.type
+          ? detail.type === 'text'
+          : detail.name === 'Text' && !detail.text.startsWith('/share/download')
+    const content = isText ? (detail.content ?? detail.text) : null
+    const downloadUrl = isText ? null : (detail.download_url ?? detail.text)
+
     return {
       id: Date.now(),
       code: detail.code,
       filename: detail.name,
       size: formatFileSize(detail.size),
-      downloadUrl: isFile ? detail.text : null,
-      content: isFile ? null : detail.text,
-      date: new Date().toLocaleString()
+      downloadUrl,
+      content,
+      date: new Date().toLocaleString(),
+      type: isText ? 'text' : 'file',
+      remainingDownloads: detail.remaining_downloads
     }
   }
 
-  const handleSubmit = async () => {
-    if (code.value.length !== 5) {
+  const resetInspection = () => {
+    inspectedFile.value = null
+    error.value = ''
+  }
+
+  const inspectCode = async () => {
+    if (!hasValidCode.value) {
       alertStore.showAlert(t('retrieve.messages.invalidCode'), 'error')
       return
     }
 
+    isInspecting.value = true
     inputStatus.value.readonly = true
     inputStatus.value.loading = true
+    error.value = ''
 
     try {
-      const res = await FileService.selectFile(code.value)
+      const res = await FileService.inspectFile(normalizedCode.value)
+      if (res.code === 200 && res.detail) {
+        inspectedFile.value = res.detail
+      } else {
+        inspectedFile.value = null
+        error.value = String(res.detail || res.message || '')
+        alertStore.showAlert(t('retrieve.messages.retrieveFailure') + error.value, 'error')
+      }
+    } catch {
+      inspectedFile.value = null
+      error.value = t('retrieve.messages.previewUnavailable')
+      alertStore.showAlert(error.value, 'warning')
+    } finally {
+      isInspecting.value = false
+      inputStatus.value.readonly = false
+      inputStatus.value.loading = false
+    }
+  }
+
+  const handleSubmit = async () => {
+    if (!hasValidCode.value) {
+      alertStore.showAlert(t('retrieve.messages.invalidCode'), 'error')
+      return
+    }
+
+    isRetrieving.value = true
+    inputStatus.value.readonly = true
+    inputStatus.value.loading = true
+    error.value = ''
+
+    try {
+      const res = await FileService.selectFile(normalizedCode.value)
       if (res.code === 200 && res.detail) {
         const newFileData = createRecord(res.detail)
-        if (!fileStore.receiveData.some((file) => file.code === newFileData.code)) {
-          fileStore.addReceiveData(newFileData)
+        const existingIndex = fileStore.receiveData.findIndex(
+          (file) => file.code === newFileData.code
+        )
+        if (existingIndex !== -1) {
+          fileStore.deleteReceiveData(existingIndex)
         }
+        fileStore.addReceiveData(newFileData)
         selectedRecord.value = newFileData
         if (newFileData.content) {
           showPreview.value = true
         }
+        inspectedFile.value = null
         alertStore.showAlert(t('retrieve.messages.retrieveSuccess'), 'success')
       } else {
-        alertStore.showAlert(t('retrieve.messages.retrieveFailure') + res.detail, 'error')
+        error.value = String(res.detail || '')
+        alertStore.showAlert(t('retrieve.messages.retrieveFailure') + error.value, 'error')
       }
     } catch (err: unknown) {
       const errorMessage = getErrorMessage(err, t('retrieve.messages.unknownError'))
+      error.value = errorMessage
       alertStore.showAlert(t('retrieve.messages.networkError') + errorMessage, 'error')
     } finally {
+      isRetrieving.value = false
       inputStatus.value.readonly = false
       inputStatus.value.loading = false
       code.value = ''
@@ -151,8 +208,23 @@ export function useRetrieveFlow() {
     { immediate: true }
   )
 
+  watch(normalizedCode, (nextCode) => {
+    if (inspectedFile.value && inspectedFile.value.code !== nextCode) {
+      resetInspection()
+    }
+
+    if (nextCode.length < 5 && error.value) {
+      error.value = ''
+    }
+  })
+
   return {
     code,
+    inspectedFile,
+    isInspecting,
+    isRetrieving,
+    isWorking,
+    hasValidCode,
     inputStatus,
     error,
     records,
@@ -166,6 +238,8 @@ export function useRetrieveFlow() {
     deleteRecord,
     downloadRecord,
     handleSubmit,
+    inspectCode,
+    resetInspection,
     showContentPreview,
     toggleDrawer,
     viewDetails
diff --git a/src/composables/useSendFlow.ts b/src/composables/useSendFlow.ts
index a798816..3f6a6b8 100644
--- a/src/composables/useSendFlow.ts
+++ b/src/composables/useSendFlow.ts
@@ -32,8 +32,10 @@ export function useSendFlow() {
   const isSubmitting = ref(false)
   const fileHash = ref('')
   const sendRecords = computed(() => fileDataStore.shareData)
-  const uploadDescription = computed(
-    () => `支持各种常见格式，最大${getStorageUnit(config.value.uploadSize)}`
+  const uploadDescription = computed(() =>
+    t('send.uploadArea.descriptionWithLimit', {
+      size: getStorageUnit(config.value.uploadSize)
+    })
   )
   const expirationOptions = computed(() =>
     config.value.expireStyle.map((value) => ({
diff --git a/src/composables/useSystemConfig.ts b/src/composables/useSystemConfig.ts
index 5b8ec87..1d27030 100644
--- a/src/composables/useSystemConfig.ts
+++ b/src/composables/useSystemConfig.ts
@@ -18,39 +18,78 @@ type ConfigFlagKey = 'enableChunk' | 's3_proxy' | 'openUpload'
 export function useSystemConfig() {
   const alertStore = useAlertStore()
   const configStore = useConfigStore()
-  
+
   // 状态管理
   const config = ref<ConfigState>({ ...DEFAULT_CONFIG_STATE })
-  const isLoading = ref(false)
+  const isRefreshing = ref(false)
+  const isSaving = ref(false)
+  const savedPayloadSnapshot = ref('')
   const fileSize = ref(1)
   const sizeUnit = ref<FileSizeUnit>('MB')
   const saveTime = ref(1)
   const saveTimeUnit = ref<SaveTimeUnit>('天')
-  
+
+  const isLoading = computed(() => isRefreshing.value || isSaving.value)
+
+  const buildSubmitPayload = (): Partial<ConfigState> => {
+    const payload: Partial<ConfigState> = buildConfigSubmitPayload(
+      config.value,
+      { value: fileSize.value, unit: sizeUnit.value },
+      { value: saveTime.value, unit: saveTimeUnit.value }
+    )
+
+    if (!payload.admin_token) {
+      delete payload.admin_token
+    }
+
+    return payload
+  }
+
+  const snapshotPayload = (payload: Partial<ConfigState>) => JSON.stringify(payload)
+
+  const normalizeEditableConfig = (nextConfig: Partial<ConfigState>): ConfigState => ({
+    ...DEFAULT_CONFIG_STATE,
+    ...nextConfig,
+    admin_token: ''
+  })
+
+  const markConfigSaved = () => {
+    savedPayloadSnapshot.value = snapshotPayload(buildSubmitPayload())
+  }
+
+  const isDirty = computed(() => {
+    if (!savedPayloadSnapshot.value) {
+      return false
+    }
+
+    return snapshotPayload(buildSubmitPayload()) !== savedPayloadSnapshot.value
+  })
+
   // 从本地存储获取配置
   const getStoredConfig = (): ConfigState | null => {
-    return readStoredConfig<ConfigState>()
+    const storedConfig = readStoredConfig<Partial<ConfigState>>()
+    return storedConfig ? normalizeEditableConfig(storedConfig) : null
   }
-  
+
   // 保存配置到本地存储
   const saveConfigToStorage = (configData: ConfigState) => {
     configStore.updateConfig(configData)
   }
-  
+
   // 获取系统配置
   const fetchConfig = async (): Promise<ConfigState | null> => {
     try {
-      isLoading.value = true
-      
+      isRefreshing.value = true
+
       const response = await ConfigService.getConfig()
-      
+
       if (response.code === 200 && response.detail) {
-        config.value = { ...DEFAULT_CONFIG_STATE, ...response.detail }
+        config.value = normalizeEditableConfig(response.detail)
         const notifyMessage = configStore.applyRemoteConfig(config.value)
         if (notifyMessage) {
           alertStore.showAlert(notifyMessage, 'success')
         }
-        
+
         return config.value
       } else {
         throw new Error(response.message || '获取配置失败')
@@ -62,23 +101,25 @@ export function useSystemConfig() {
         config.value = storedConfig
         return config.value
       }
-      
+
       alertStore.showAlert(getErrorMessage(error, '获取配置失败'), 'error')
       return null
     } finally {
-      isLoading.value = false
+      isRefreshing.value = false
     }
   }
-  
+
   // 更新系统配置
   const updateConfig = async (newConfig: Partial<ConfigState>): Promise<boolean> => {
     try {
-      isLoading.value = true
-      
+      isSaving.value = true
+
       const response = await ConfigService.updateConfig(newConfig)
-      
+
       if (response.code === 200) {
-        config.value = { ...config.value, ...newConfig }
+        config.value = normalizeEditableConfig({ ...config.value, ...newConfig })
+        syncConfigForm(config.value)
+        markConfigSaved()
         saveConfigToStorage(config.value)
         alertStore.showAlert('配置更新成功！', 'success')
         return true
@@ -89,7 +130,7 @@ export function useSystemConfig() {
       alertStore.showAlert(getErrorMessage(error, '更新配置失败'), 'error')
       return false
     } finally {
-      isLoading.value = false
+      isSaving.value = false
     }
   }
 
@@ -111,52 +152,57 @@ export function useSystemConfig() {
     const latestConfig = await fetchConfig()
     if (latestConfig) {
       syncConfigForm(latestConfig)
+      markConfigSaved()
     }
   }
 
-  const submitConfig = () =>
-    updateConfig(
-      buildConfigSubmitPayload(
-        config.value,
-        { value: fileSize.value, unit: sizeUnit.value },
-        { value: saveTime.value, unit: saveTimeUnit.value }
-      )
-    )
-  
+  const submitConfig = () => {
+    if (!isDirty.value || isSaving.value) {
+      return Promise.resolve(false)
+    }
+
+    return updateConfig(buildSubmitPayload())
+  }
+
   // 初始化配置
   const initConfig = async () => {
     // 先尝试从本地存储加载
     const storedConfig = getStoredConfig()
     if (storedConfig) {
       config.value = storedConfig
+      syncConfigForm(storedConfig)
+      markConfigSaved()
     }
-    
+
     // 然后从服务器获取最新配置
-    await fetchConfig()
+    await refreshConfig()
   }
-  
+
   // 计算属性
   const maxFileSizeMB = computed(() => {
     return Math.round(config.value.uploadSize / 1024 / 1024)
   })
-  
+
   const isConfigLoaded = computed(() => {
     return config.value.name !== DEFAULT_CONFIG_STATE.name || !isLoading.value
   })
-  
+
   return {
     // 状态
     config,
     isLoading,
+    isRefreshing,
+    isSaving,
+    isDirty,
     fileSize,
     sizeUnit,
     saveTime,
     saveTimeUnit,
-    
+
     // 计算属性
     maxFileSizeMB,
     isConfigLoaded,
-    
+
     // 方法
     fetchConfig,
     updateConfig,
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index c0aa755..ebeb8f5 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -65,8 +65,14 @@ export default {
       yesterdayShares: 'Yesterday: {count}',
       serverUptime: 'Uptime',
       refresh: 'Refresh',
+      refreshing: 'Refreshing',
+      lastUpdated: 'Last updated: {time}',
+      loadFailed: 'Failed to load dashboard data',
+      footerProduct: 'FileCodeBox Admin Console',
+      runtimeVersion: 'Runtime Version',
+      versionPending: 'Pending sync',
       fileHealth: 'File Health',
-      fileHealthDesc: 'Real file records grouped by availability, expiry, and type.',
+      fileHealthDesc: 'Status insights for available, risky, and pending file queues.',
       activeFileRatio: 'Active Ratio',
       fileShareRatio: 'File Ratio',
       textShareRatio: 'Text Ratio',
@@ -83,16 +89,27 @@ export default {
       maxSaveTime: 'Max Retention',
       noSaveLimit: 'Unlimited',
       todayCapacityReference: 'Today Size / Single File Limit',
-      fileTypeDistribution: 'Type Distribution',
-      textType: 'Text',
-      recentFiles: 'Recent Shares',
-      recentFilesDesc: 'Recently created share records for quick status checks.',
-      available: 'Available',
-      table: {
-        file: 'File',
-        size: 'Size',
-        usage: 'Retrievals',
-        status: 'Status'
+      healthActions: {
+        attention: {
+          title: 'Needs Attention',
+          description: 'Handle issue and warning files together'
+        },
+        storageIssue: {
+          title: 'Storage Issues',
+          description: 'Review files missing download metadata'
+        },
+        expiringSoon: {
+          title: 'Expiring Soon',
+          description: 'Extend shares that should stay available'
+        },
+        neverRetrieved: {
+          title: 'Never Retrieved',
+          description: 'Find shares that have not been retrieved yet'
+        },
+        permanent: {
+          title: 'Permanent',
+          description: 'View long-retention share records'
+        }
       }
     },
     fileManage: {
@@ -202,7 +219,39 @@ export default {
       invalidCodeError: 'Invalid retrieval code',
       retrieveFailure: 'Failed to retrieve file: ',
       networkError: 'Retrieval failed, please try again later: ',
-      unknownError: 'Unknown error'
+      unknownError: 'Unknown error',
+      previewUnavailable: 'Preview is unavailable, you can still retrieve directly'
+    },
+    workspace: {
+      sendFile: 'Send File',
+      inspect: 'Preview',
+      inspecting: 'Previewing',
+      retrieving: 'Retrieving',
+      ready: 'Ready',
+      noPreview: 'Waiting for a code',
+      noPreviewDesc:
+        'Enter a 5-character retrieval code to preview file details before consuming a retrieval.',
+      latestRecord: 'Latest Retrieval',
+      noRecord: 'No retrieval records yet',
+      currentCode: 'Code',
+      fileSize: 'File Size',
+      viewDetail: 'View Detail',
+      historyCount: '{count} records',
+      openRecords: 'Open retrieval records',
+      security: 'Safe Retrieval',
+      securityState:
+        'Previewing does not consume retrieval count. Access is recorded only after confirmation.',
+      noExpiry: 'No limit',
+      unlimited: 'Unlimited',
+      remainingCount: '{count} left',
+      textType: 'Text Content',
+      fileType: 'File Download',
+      expiresAt: 'Expires At',
+      remainingDownloads: 'Remaining',
+      usedCount: 'Retrieved',
+      emptyCode: 'Empty',
+      previewState: 'Preview State',
+      waiting: 'Waiting'
     }
   },
 
@@ -215,13 +264,45 @@ export default {
       clickText: 'click to select files',
       textInput: 'Enter text to send here...',
       placeholder: 'Click or drag files here to upload',
-      description: 'Supports various common formats'
+      description: 'Supports various common formats',
+      descriptionWithLimit: 'Supports common formats, up to {size}',
+      retry: 'Retry',
+      selectedFiles: '{count} files selected',
+      status: {
+        initializing: 'Preparing upload...',
+        uploading: 'Uploading files...',
+        confirming: 'Confirming upload...',
+        success: 'Upload complete!'
+      }
     },
     submit: 'Secure Send',
     submitting: 'Sending...',
     needRetrieveFile: 'Need to retrieve? Click here',
     sendRecords: 'Send Records',
     secureEncryption: 'Secure Encryption',
+    workspace: {
+      uploadLimit: 'Single File Limit',
+      uploadMode: 'Upload Mode',
+      standardMode: 'Standard',
+      chunkMode: 'Chunked',
+      guestPolicy: 'Guest Upload',
+      guestOpen: 'Allowed',
+      guestClosed: 'Disabled',
+      currentTask: 'Current Task',
+      awaitingFile: 'Waiting for files',
+      fileReady: '{count} files ready',
+      textDraft: 'Text draft, {count} chars',
+      payload: 'Payload',
+      expirationPreview: 'Expiration',
+      security: 'Security',
+      latestRecord: 'Latest Send',
+      noRecord: 'No records yet',
+      copyLink: 'Copy Link',
+      viewDetail: 'View Detail',
+      historyTitle: 'Send History',
+      historyCount: '{count} records',
+      openRecords: 'Open send records'
+    },
     fileDetails: 'File Details',
     expirationMethod: 'Expiration Method',
     expiration: {
@@ -311,24 +392,246 @@ export default {
   // File Management
   fileManage: {
     title: 'File Management',
-    searchPlaceholder: 'Search file name, description...',
+    subtitle: '{count} share records. Filter by status, type, and usage.',
+    searchPlaceholder: 'Search code, name, or text...',
     allFiles: 'All Files',
+    detail: 'Details',
+    detailTitle: 'File Details',
+    detailLoading: 'Loading details...',
+    detailFailed: 'Failed to load details',
     editFileInfo: 'Edit File Information',
     saveChanges: 'Save Changes',
+    refresh: 'Refresh List',
+    resetFilters: 'Reset Filters',
+    totalFiles: 'All Records',
+    activeFiles: 'Available',
+    expiredFiles: 'Expired',
+    storageUsed: 'Storage Used',
+    statusLabel: 'Status',
+    typeLabel: 'Type',
+    healthLabel: 'Health',
+    viewPreset: 'View',
+    viewPresetCustom: 'Custom Filters',
+    viewPresetAll: 'All Files',
+    viewPresetAttention: 'Needs Attention',
+    viewPresetExpiringSoon: 'Expiring Soon',
+    viewPresetStorageIssue: 'Storage Issues',
+    viewPresetNeverRetrieved: 'Never Retrieved',
+    viewPresetPermanent: 'Permanent',
+    saveViewPreset: 'Save View',
+    updateViewPreset: 'Update View',
+    deleteViewPreset: 'Delete View',
+    viewPresetNamePrompt: 'Enter a view name',
+    viewPresetSaveSuccess: 'View saved',
+    viewPresetSaveFailed: 'Failed to save view',
+    viewPresetDeleteConfirm: 'Delete view "{name}"?',
+    viewPresetDeleteSuccess: 'View deleted',
+    viewPresetDeleteFailed: 'Failed to delete view',
+    viewPresetLoadFailed: 'Failed to load saved views; using built-in views',
+    all: 'All',
+    active: 'Available',
+    expired: 'Expired',
+    fileType: 'File',
+    textType: 'Text',
+    chunkedType: 'Chunked',
+    healthFilters: {
+      all: 'All',
+      attention: 'Needs Attention',
+      danger: 'Issues',
+      warning: 'Warnings',
+      expiringSoon: 'Expiring Soon',
+      storageIssue: 'Storage Issues',
+      neverRetrieved: 'Never Retrieved',
+      healthy: 'Healthy',
+      permanent: 'Permanent'
+    },
+    sortBy: 'Sort',
+    sortOrder: 'Direction',
+    unlimited: 'Unlimited',
+    remaining: '{count} left',
+    loadError: 'Failed to load file list',
+    noMatches: 'No matching files',
     viewText: 'View',
     textPreview: 'Text Preview',
     copyText: 'Copy Text',
+    copyCode: 'Copy Code',
+    copyLink: 'Copy Link',
     copySuccess: 'Text copied to clipboard',
+    copyCodeSuccess: 'Retrieve code copied to clipboard',
+    copyLinkSuccess: 'Retrieve link copied to clipboard',
     copyFailed: 'Copy failed, please try again',
     charCount: '{count} characters',
+    downloadFile: 'Download File',
+    exportText: 'Export Text',
+    downloadSuccess: 'Downloaded: {name}',
+    exportSuccess: 'Exported: {name}',
+    downloadFailed: 'Download failed',
+    previewFailed: 'Failed to load preview',
+    loadingPreview: 'Loading preview...',
+    previewComplete: 'Loaded full content, {count} characters',
+    previewTruncated: 'Showing {shown} / {total} characters',
+    previewFallback: 'Preview endpoint unavailable; using text from the list',
+    selectCurrentPage: 'Select current page',
+    selectedCount: '{count} selected',
+    selectFile: 'Select {name}',
+    clearSelection: 'Clear Selection',
+    batchDelete: 'Batch Delete',
+    batchDeleteConfirm: 'Delete the selected {count} files? This action cannot be undone.',
+    batchDeleteSuccess: 'Deleted {count} files',
+    batchDeletePartialSuccess: 'Deleted {count} files, {failed} failed',
+    batchDeleteFailed: 'Batch delete failed',
+    batchEdit: 'Batch Edit',
+    batchEditTitle: 'Batch Edit File Policy',
+    batchEditSelected: 'Update the selected {count} files',
+    batchEditMode: 'Update Mode',
+    batchEditExpiresAt: 'Set Expiration Time',
+    batchEditDownloadLimit: 'Set Retrieval Limit',
+    batchEditForever: 'Make Permanent',
+    batchEditForeverHint: 'Clear the expiration time and make retrievals unlimited.',
+    batchUpdateConfirm: 'Update the selected {count} files?',
+    batchUpdateSuccess: 'Updated {count} files',
+    batchUpdatePartialSuccess: 'Updated {count} files, {failed} failed',
+    batchUpdateFailed: 'Batch update failed',
+    batchUpdateNoFields: 'Choose a policy to update',
+    batchPolicyActionConfirm: 'Apply "{action}" to the selected {count} files?',
+    batchPolicyActionSuccess: 'Processed {count} files',
+    batchPolicyActionPartialSuccess: 'Processed {count} files, {failed} failed',
+    batchPolicyActionFailed: 'Batch policy action failed',
+    policyActionSuccess: 'File policy updated',
+    policyActionFailed: 'Failed to apply policy action',
+    metadataInfo: 'Operations Notes',
+    metadataHint:
+      'Visible to admins only. Use it for handling notes, archive tags, and follow-up actions.',
+    metadataNote: 'Note',
+    metadataNotePlaceholder: 'Record context, handling history, or ownership...',
+    metadataTags: 'Tags',
+    metadataTagsPlaceholder: 'Comma-separated, e.g. Client A, Renew, Important',
+    metadataUpdatedAt: 'Last saved: {time}',
+    metadataNeverUpdated: 'No notes saved yet',
+    saveMetadata: 'Save Notes',
+    metadataSaveSuccess: 'Notes and tags saved',
+    metadataSaveFailed: 'Failed to save notes',
+    policyActions: {
+      extend24h: 'Extend 24h',
+      extend7d: 'Extend 7d',
+      makePermanent: 'Make Permanent',
+      resetDownloadLimit: 'Reset to {count}'
+    },
+    policyActionDescriptions: {
+      extend24h: 'Add one day from the active expiration',
+      extend7d: 'Good for a one-week temporary extension',
+      makePermanent: 'Clear expiration time and retrieval limits',
+      resetDownloadLimit: 'Restore retrievals to {count}'
+    },
+    applyBatchEdit: 'Apply Changes',
+    overview: 'Overview',
+    policyInfo: 'Policy',
+    storageInfo: 'Storage',
+    statusInsight: 'Status Insight',
+    nextAction: 'Next Action',
+    lifecycle: 'Lifecycle',
+    permanent: 'Permanent',
+    createdAt: 'Created Time',
+    remainingDownloads: 'Remaining Downloads',
+    textLength: 'Text Length',
+    hasDownloadLimit: 'Has Retrieval Limit',
+    hasExpirationTime: 'Has Expiration',
+    canPreviewText: 'Can Preview Text',
+    canDownload: 'Can Download',
+    storageBackend: 'Storage Backend',
+    fileHash: 'File Hash',
+    isChunked: 'Chunked Upload',
+    filePath: 'Storage Path',
+    uuidFileName: 'Stored File Name',
+    uploadId: 'Upload Session',
+    yes: 'Yes',
+    no: 'No',
+    insightSeverity: {
+      success: 'Healthy',
+      warning: 'Needs Attention',
+      danger: 'Issue',
+      info: 'Info',
+      neutral: 'Watch'
+    },
+    insightStates: {
+      available: 'Available for retrieval',
+      expired: 'Unavailable for retrieval',
+      storage_incomplete: 'Storage metadata incomplete',
+      expiring_soon: 'Expiring soon',
+      permanent: 'Permanent'
+    },
+    insightActions: {
+      monitor: 'Keep monitoring',
+      extend_or_delete: 'Extend retention or clean up',
+      inspect_storage: 'Inspect storage path and file name',
+      extend_expiration: 'Extend expiration if needed'
+    },
+    insightReasons: {
+      expired: 'Past expiration time',
+      download_limit_exhausted: 'Retrieval limit exhausted',
+      expires_soon: 'Expires within 24 hours',
+      never_retrieved: 'Never retrieved',
+      storage_metadata_incomplete: 'Missing downloadable storage metadata',
+      chunked_upload: 'Created by chunked upload'
+    },
+    timeline: {
+      status: {
+        done: 'Done',
+        pending: 'Pending',
+        active: 'Active',
+        expired: 'Expired',
+        exhausted: 'Exhausted',
+        unlimited: 'Unlimited'
+      },
+      created: {
+        title: 'Record Created',
+        description: 'The share record has been created and is currently {status}.'
+      },
+      content_ready: {
+        title: 'Content Ready',
+        description: 'Content type is {detail}; current status is {status}.'
+      },
+      upload_session: {
+        title: 'Upload Session',
+        description: 'Upload session recorded: {detail}.'
+      },
+      expiration_policy: {
+        title: 'Expiration Policy',
+        description: 'Expiration policy is currently {status}.',
+        remaining: '{time} left',
+        overdue: '{time} overdue'
+      },
+      download_limit: {
+        title: 'Retrieval Limit',
+        description: 'Retrieval limit is currently {status}; {value}.'
+      },
+      retrieved: {
+        title: 'Retrieval History',
+        description: 'Retrieved {value}; current status is {status}.'
+      }
+    },
     headers: {
+      select: 'Select',
       code: 'Retrieve Code',
       name: 'Name',
+      type: 'Type',
       size: 'Size',
+      usage: 'Retrievals',
+      status: 'Status',
       description: 'Description',
       expiration: 'Expiration',
       actions: 'Actions'
     },
+    sort: {
+      createdAt: 'Created Time',
+      expiredAt: 'Expiration',
+      name: 'Name',
+      size: 'Size',
+      usedCount: 'Retrievals',
+      code: 'Retrieve Code',
+      desc: 'Descending',
+      asc: 'Ascending'
+    },
     form: {
       code: 'Retrieve Code',
       codePlaceholder: 'Enter retrieve code',
@@ -414,7 +717,13 @@ export default {
         mb: 'MB',
         gb: 'GB'
       },
-      saveChanges: 'Save Settings'
+      saveChanges: 'Save Settings',
+      refreshConfig: 'Refresh Config',
+      refreshing: 'Refreshing',
+      saving: 'Saving',
+      unsavedChanges: 'Unsaved configuration changes',
+      allChangesSaved: 'All configuration changes are saved',
+      refreshBlocked: 'Save current changes before refreshing'
     },
     systemSettings: {
       title: 'System Settings',
@@ -494,7 +803,7 @@ export default {
       serverUptime: 'Uptime',
       refresh: 'Refresh',
       fileHealth: 'File Health',
-      fileHealthDesc: 'Real file records grouped by availability, expiry, and type.',
+      fileHealthDesc: 'Status insights for available, risky, and pending file queues.',
       activeFileRatio: 'Active Ratio',
       fileShareRatio: 'File Ratio',
       textShareRatio: 'Text Ratio',
@@ -510,18 +819,7 @@ export default {
       guestUpload: 'Guest Upload',
       maxSaveTime: 'Max Retention',
       noSaveLimit: 'Unlimited',
-      todayCapacityReference: 'Today Size / Single File Limit',
-      fileTypeDistribution: 'Type Distribution',
-      textType: 'Text',
-      recentFiles: 'Recent Shares',
-      recentFilesDesc: 'Recently created share records for quick status checks.',
-      available: 'Available',
-      table: {
-        file: 'File',
-        size: 'Size',
-        usage: 'Retrievals',
-        status: 'Status'
-      }
+      todayCapacityReference: 'Today Size / Single File Limit'
     },
     fileManage: {
       title: 'File Management',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index ca5e9b8..98347f7 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -65,8 +65,14 @@ export default {
       yesterdayShares: '昨日分享：{count}',
       serverUptime: '运行时间',
       refresh: '刷新数据',
+      refreshing: '刷新中',
+      lastUpdated: '最近更新：{time}',
+      loadFailed: '仪表盘数据加载失败',
+      footerProduct: 'FileCodeBox 管理后台',
+      runtimeVersion: '运行版本',
+      versionPending: '待同步',
       fileHealth: '文件健康',
-      fileHealthDesc: '基于真实文件记录统计有效、过期和类型分布。',
+      fileHealthDesc: '基于状态洞察统计可取件、风险与待处理队列。',
       activeFileRatio: '有效占比',
       fileShareRatio: '文件占比',
       textShareRatio: '文本占比',
@@ -83,16 +89,27 @@ export default {
       maxSaveTime: '最长保存',
       noSaveLimit: '不限制',
       todayCapacityReference: '今日容量 / 单文件上限',
-      fileTypeDistribution: '类型分布',
-      textType: '文本',
-      recentFiles: '最近分享',
-      recentFilesDesc: '最近创建的分享记录，便于快速核对状态。',
-      available: '可取件',
-      table: {
-        file: '文件',
-        size: '大小',
-        usage: '取件',
-        status: '状态'
+      healthActions: {
+        attention: {
+          title: '需关注',
+          description: '集中处理异常和预警文件'
+        },
+        storageIssue: {
+          title: '存储异常',
+          description: '检查缺少下载信息的文件'
+        },
+        expiringSoon: {
+          title: '即将过期',
+          description: '优先续期仍需保留的分享'
+        },
+        neverRetrieved: {
+          title: '未取件',
+          description: '识别创建后尚未被取件的记录'
+        },
+        permanent: {
+          title: '永久有效',
+          description: '查看长期保留的分享记录'
+        }
       }
     },
     fileManage: {
@@ -202,7 +219,37 @@ export default {
       invalidCodeError: '无效的取件码',
       retrieveFailure: '获取文件失败：',
       networkError: '取件失败，请稍后重试：',
-      unknownError: '未知错误'
+      unknownError: '未知错误',
+      previewUnavailable: '暂时无法预览文件信息，可直接取件'
+    },
+    workspace: {
+      sendFile: '发送文件',
+      inspect: '预览',
+      inspecting: '预览中',
+      retrieving: '取件中',
+      ready: '可取件',
+      noPreview: '等待取件码',
+      noPreviewDesc: '输入 5 位取件码后会先读取文件信息，确认后再消耗取件次数。',
+      latestRecord: '最近取件',
+      noRecord: '暂无取件记录',
+      currentCode: '取件码',
+      fileSize: '文件大小',
+      viewDetail: '查看详情',
+      historyCount: '{count} 条记录',
+      openRecords: '打开取件记录',
+      security: '安全取件',
+      securityState: '预览不会消耗取件次数，确认取件后才会记录访问。',
+      noExpiry: '不限制',
+      unlimited: '不限次数',
+      remainingCount: '剩余 {count} 次',
+      textType: '文本内容',
+      fileType: '文件下载',
+      expiresAt: '过期时间',
+      remainingDownloads: '剩余次数',
+      usedCount: '已取件',
+      emptyCode: '未输入',
+      previewState: '预览状态',
+      waiting: '等待输入'
     }
   },
 
@@ -217,13 +264,45 @@ export default {
       clickText: '点击选择文件',
       textInput: '在此输入要发送的文本...',
       placeholder: '点击或拖放文件到此处上传',
-      description: '支持各种常见格式'
+      description: '支持各种常见格式',
+      descriptionWithLimit: '支持各种常见格式，最大{size}',
+      retry: '重试',
+      selectedFiles: '已选择 {count} 个文件',
+      status: {
+        initializing: '正在初始化上传...',
+        uploading: '正在上传文件...',
+        confirming: '正在确认上传...',
+        success: '上传成功！'
+      }
     },
     submit: '安全寄送',
     submitting: '发送中...',
     needRetrieveFile: '需要取件？点击这里',
     sendRecords: '发件记录',
     secureEncryption: '安全加密',
+    workspace: {
+      uploadLimit: '单文件上限',
+      uploadMode: '上传模式',
+      standardMode: '标准上传',
+      chunkMode: '分片上传',
+      guestPolicy: '游客上传',
+      guestOpen: '允许',
+      guestClosed: '已关闭',
+      currentTask: '当前任务',
+      awaitingFile: '等待选择文件',
+      fileReady: '已选择 {count} 个文件',
+      textDraft: '文本草稿 {count} 字',
+      payload: '发送内容',
+      expirationPreview: '有效期',
+      security: '安全状态',
+      latestRecord: '最近一次发送',
+      noRecord: '暂无记录',
+      copyLink: '复制链接',
+      viewDetail: '查看详情',
+      historyTitle: '发送历史',
+      historyCount: '{count} 条记录',
+      openRecords: '打开发送记录'
+    },
     fileDetail: {
       title: '文件详情',
       content: '文件内容',
@@ -311,24 +390,245 @@ export default {
   // 文件管理
   fileManage: {
     title: '文件管理',
-    searchPlaceholder: '搜索文件名称、描述...',
+    subtitle: '共 {count} 条分享记录，可按状态、类型和使用情况快速筛选。',
+    searchPlaceholder: '搜索取件码、名称或文本...',
     allFiles: '所有文件',
+    detail: '详情',
+    detailTitle: '文件详情',
+    detailLoading: '正在加载详情...',
+    detailFailed: '详情加载失败',
     editFileInfo: '编辑文件信息',
     saveChanges: '保存更改',
+    refresh: '刷新列表',
+    resetFilters: '重置筛选',
+    totalFiles: '全部记录',
+    activeFiles: '可取件',
+    expiredFiles: '已过期',
+    storageUsed: '占用空间',
+    statusLabel: '状态',
+    typeLabel: '类型',
+    healthLabel: '健康',
+    viewPreset: '视图',
+    viewPresetCustom: '自定义筛选',
+    viewPresetAll: '全部文件',
+    viewPresetAttention: '需关注',
+    viewPresetExpiringSoon: '即将过期',
+    viewPresetStorageIssue: '存储异常',
+    viewPresetNeverRetrieved: '未取件',
+    viewPresetPermanent: '永久有效',
+    saveViewPreset: '保存视图',
+    updateViewPreset: '覆盖视图',
+    deleteViewPreset: '删除视图',
+    viewPresetNamePrompt: '输入视图名称',
+    viewPresetSaveSuccess: '视图已保存',
+    viewPresetSaveFailed: '视图保存失败',
+    viewPresetDeleteConfirm: '确认删除视图“{name}”？',
+    viewPresetDeleteSuccess: '视图已删除',
+    viewPresetDeleteFailed: '视图删除失败',
+    viewPresetLoadFailed: '视图预设加载失败，已使用内置视图',
+    all: '全部',
+    active: '可取件',
+    expired: '已过期',
+    fileType: '文件',
+    textType: '文本',
+    chunkedType: '分片',
+    healthFilters: {
+      all: '全部',
+      attention: '需关注',
+      danger: '异常',
+      warning: '预警',
+      expiringSoon: '即将过期',
+      storageIssue: '存储异常',
+      neverRetrieved: '未取件',
+      healthy: '健康',
+      permanent: '永久有效'
+    },
+    sortBy: '排序',
+    sortOrder: '方向',
+    unlimited: '不限次数',
+    remaining: '剩余 {count} 次',
+    loadError: '文件列表加载失败',
+    noMatches: '没有匹配的文件',
     viewText: '查看',
     textPreview: '文本预览',
     copyText: '复制文本',
+    copyCode: '复制取件码',
+    copyLink: '复制取件链接',
     copySuccess: '文本已复制到剪贴板',
+    copyCodeSuccess: '取件码已复制到剪贴板',
+    copyLinkSuccess: '取件链接已复制到剪贴板',
     copyFailed: '复制失败，请重试',
     charCount: '共 {count} 个字符',
+    downloadFile: '下载文件',
+    exportText: '导出文本',
+    downloadSuccess: '已下载：{name}',
+    exportSuccess: '已导出：{name}',
+    downloadFailed: '下载失败',
+    previewFailed: '预览加载失败',
+    loadingPreview: '正在加载预览...',
+    previewComplete: '已加载完整内容，共 {count} 个字符',
+    previewTruncated: '已显示 {shown} / {total} 个字符',
+    previewFallback: '预览接口不可用，已使用列表中的文本内容',
+    selectCurrentPage: '选择当前页',
+    selectedCount: '已选择 {count} 项',
+    selectFile: '选择 {name}',
+    clearSelection: '清空选择',
+    batchDelete: '批量删除',
+    batchDeleteConfirm: '确认删除选中的 {count} 个文件？此操作不可撤销。',
+    batchDeleteSuccess: '已删除 {count} 个文件',
+    batchDeletePartialSuccess: '已删除 {count} 个文件，{failed} 个失败',
+    batchDeleteFailed: '批量删除失败',
+    batchEdit: '批量编辑',
+    batchEditTitle: '批量编辑文件策略',
+    batchEditSelected: '将更新选中的 {count} 个文件',
+    batchEditMode: '更新方式',
+    batchEditExpiresAt: '设置过期时间',
+    batchEditDownloadLimit: '设置取件次数',
+    batchEditForever: '设为永久有效',
+    batchEditForeverHint: '清空过期时间，并将取件次数设为不限。',
+    batchUpdateConfirm: '确认更新选中的 {count} 个文件？',
+    batchUpdateSuccess: '已更新 {count} 个文件',
+    batchUpdatePartialSuccess: '已更新 {count} 个文件，{failed} 个失败',
+    batchUpdateFailed: '批量更新失败',
+    batchUpdateNoFields: '请选择要更新的策略',
+    batchPolicyActionConfirm: '确认对选中的 {count} 个文件执行“{action}”？',
+    batchPolicyActionSuccess: '已处理 {count} 个文件',
+    batchPolicyActionPartialSuccess: '已处理 {count} 个文件，{failed} 个失败',
+    batchPolicyActionFailed: '批量策略动作执行失败',
+    policyActionSuccess: '文件策略已更新',
+    policyActionFailed: '策略动作执行失败',
+    metadataInfo: '运营备注',
+    metadataHint: '仅管理员可见，用于记录处理线索、归档标签和后续动作。',
+    metadataNote: '备注',
+    metadataNotePlaceholder: '记录这个分享的背景、处理记录或负责人...',
+    metadataTags: '标签',
+    metadataTagsPlaceholder: '逗号分隔，例如：客户A, 待续期, 重要',
+    metadataUpdatedAt: '最近保存：{time}',
+    metadataNeverUpdated: '尚未保存备注',
+    saveMetadata: '保存备注',
+    metadataSaveSuccess: '备注和标签已保存',
+    metadataSaveFailed: '备注保存失败',
+    policyActions: {
+      extend24h: '延长 24 小时',
+      extend7d: '延长 7 天',
+      makePermanent: '设为永久',
+      resetDownloadLimit: '重置为 {count} 次'
+    },
+    policyActionDescriptions: {
+      extend24h: '从当前有效期继续追加一天',
+      extend7d: '适合临时续期一周',
+      makePermanent: '清空过期时间和次数限制',
+      resetDownloadLimit: '恢复可取件次数到 {count} 次'
+    },
+    applyBatchEdit: '应用更改',
+    overview: '概览',
+    policyInfo: '策略信息',
+    storageInfo: '存储信息',
+    statusInsight: '状态洞察',
+    nextAction: '建议动作',
+    lifecycle: '生命周期',
+    permanent: '永久有效',
+    createdAt: '创建时间',
+    remainingDownloads: '剩余次数',
+    textLength: '文本长度',
+    hasDownloadLimit: '限制取件次数',
+    hasExpirationTime: '限制过期时间',
+    canPreviewText: '可预览文本',
+    canDownload: '可下载',
+    storageBackend: '存储后端',
+    fileHash: '文件哈希',
+    isChunked: '分片上传',
+    filePath: '存储路径',
+    uuidFileName: '存储文件名',
+    uploadId: '上传会话',
+    yes: '是',
+    no: '否',
+    insightSeverity: {
+      success: '正常',
+      warning: '需关注',
+      danger: '异常',
+      info: '提示',
+      neutral: '待观察'
+    },
+    insightStates: {
+      available: '当前可正常取件',
+      expired: '当前已不可取件',
+      storage_incomplete: '存储信息不完整',
+      expiring_soon: '即将过期',
+      permanent: '永久有效'
+    },
+    insightActions: {
+      monitor: '保持观察',
+      extend_or_delete: '延长有效期或清理记录',
+      inspect_storage: '检查存储路径与文件名',
+      extend_expiration: '按需延长过期时间'
+    },
+    insightReasons: {
+      expired: '已超过过期时间',
+      download_limit_exhausted: '取件次数已用尽',
+      expires_soon: '24 小时内过期',
+      never_retrieved: '尚未被取件',
+      storage_metadata_incomplete: '缺少可下载存储信息',
+      chunked_upload: '由分片上传生成'
+    },
+    timeline: {
+      status: {
+        done: '已完成',
+        pending: '等待中',
+        active: '生效中',
+        expired: '已过期',
+        exhausted: '已用尽',
+        unlimited: '不限'
+      },
+      created: {
+        title: '记录创建',
+        description: '分享记录已创建，当前状态为 {status}。'
+      },
+      content_ready: {
+        title: '内容就绪',
+        description: '内容类型为 {detail}，当前状态为 {status}。'
+      },
+      upload_session: {
+        title: '上传会话',
+        description: '上传会话已记录：{detail}。'
+      },
+      expiration_policy: {
+        title: '过期策略',
+        description: '过期策略当前为 {status}。',
+        remaining: '还剩 {time}',
+        overdue: '已超时 {time}'
+      },
+      download_limit: {
+        title: '取件次数',
+        description: '取件次数策略当前为 {status}，{value}。'
+      },
+      retrieved: {
+        title: '取件记录',
+        description: '累计取件 {value}，当前状态为 {status}。'
+      }
+    },
     headers: {
+      select: '选择',
       code: '取件码',
       name: '名称',
+      type: '类型',
       size: '大小',
+      usage: '取件',
+      status: '状态',
       description: '描述',
       expiration: '过期时间',
       actions: '操作'
     },
+    sort: {
+      createdAt: '创建时间',
+      expiredAt: '过期时间',
+      name: '名称',
+      size: '大小',
+      usedCount: '取件次数',
+      code: '取件码',
+      desc: '降序',
+      asc: '升序'
+    },
     form: {
       code: '取件码',
       codePlaceholder: '输入取件码',
@@ -445,7 +745,13 @@ export default {
       errorLimits: '访问保护',
       errorPerMinute: '检测时间窗口（在此时间内统计错误次数）',
       errorCountLimit: '允许错误次数（超过后临时封禁）',
-      saveChanges: '保存设置'
+      saveChanges: '保存设置',
+      refreshConfig: '刷新配置',
+      refreshing: '刷新中',
+      saving: '保存中',
+      unsavedChanges: '有未保存的配置变更',
+      allChangesSaved: '所有配置已保存',
+      refreshBlocked: '请先保存当前变更再刷新'
     },
     dashboard: {
       title: '仪表盘',
@@ -459,7 +765,7 @@ export default {
       serverUptime: '运行时间',
       refresh: '刷新数据',
       fileHealth: '文件健康',
-      fileHealthDesc: '基于真实文件记录统计有效、过期和类型分布。',
+      fileHealthDesc: '基于状态洞察统计可取件、风险与待处理队列。',
       activeFileRatio: '有效占比',
       fileShareRatio: '文件占比',
       textShareRatio: '文本占比',
@@ -475,18 +781,7 @@ export default {
       guestUpload: '游客上传',
       maxSaveTime: '最长保存',
       noSaveLimit: '不限制',
-      todayCapacityReference: '今日容量 / 单文件上限',
-      fileTypeDistribution: '类型分布',
-      textType: '文本',
-      recentFiles: '最近分享',
-      recentFilesDesc: '最近创建的分享记录，便于快速核对状态。',
-      available: '可取件',
-      table: {
-        file: '文件',
-        size: '大小',
-        usage: '取件',
-        status: '状态'
-      }
+      todayCapacityReference: '今日容量 / 单文件上限'
     },
     fileManage: {
       title: '文件管理',
diff --git a/src/layout/AdminLayout/AdminLayout.vue b/src/layout/AdminLayout/AdminLayout.vue
index 6eb588f..2c72d6e 100644
--- a/src/layout/AdminLayout/AdminLayout.vue
+++ b/src/layout/AdminLayout/AdminLayout.vue
@@ -1,14 +1,17 @@
 <template>
   <div
-    class="h-screen flex flex-col lg:flex-row transition-colors duration-300"
+    class="flex h-screen overflow-hidden flex-col transition-colors duration-300 lg:flex-row"
     :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
   >
     <!-- Sidebar -->
     <aside
-      class="fixed inset-y-0 border-transparent left-0 z-50 w-64 transform transition-all duration-300 ease-in-out lg:relative lg:translate-x-0 border-r flex flex-col h-full lg:h-screen"
+      class="fixed inset-y-0 left-0 z-50 flex h-full w-64 shrink-0 transform flex-col border-r lg:relative lg:h-screen lg:translate-x-0"
       :class="[
-        isDarkMode ? 'bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-xl ' : 'bg-white ',
-        { '-translate-x-full': !isSidebarOpen }
+        isDarkMode
+          ? 'border-gray-700 bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-xl'
+          : 'border-gray-200 bg-white',
+        isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
+        'transition-transform duration-300 ease-in-out lg:transition-none'
       ]"
     >
       <!-- Logo区域 -->
@@ -46,18 +49,18 @@
           <li v-for="item in menuItems" :key="item.id">
             <RouterLink
               :to="item.redirect"
-              class="flex items-center p-2 rounded-lg transition-colors duration-200"
+              class="flex h-10 w-full items-center rounded-lg border-l-4 px-3 text-sm font-medium"
               :class="[
                 route.name === item.id
                   ? isDarkMode
-                    ? 'bg-indigo-900 text-indigo-400'
-                    : 'bg-indigo-100 text-indigo-600'
+                    ? 'border-indigo-400 bg-gray-700/70 text-indigo-200'
+                    : 'border-indigo-500 bg-gray-100 text-indigo-700'
                   : isDarkMode
-                    ? 'text-gray-400 hover:bg-gray-700'
-                    : 'text-gray-600 hover:bg-gray-100'
+                    ? 'border-transparent text-gray-400 hover:bg-gray-700'
+                    : 'border-transparent text-gray-600 hover:bg-gray-100'
               ]"
             >
-              <component :is="item.icon" class="w-5 h-5 mr-3" />
+              <component :is="item.icon" class="mr-3 h-5 w-5 shrink-0" />
               {{ item.name }}
             </RouterLink>
           </li>
@@ -82,7 +85,7 @@
     </aside>
 
     <!-- Main Content -->
-    <div class="flex-1 flex flex-col h-full">
+    <div class="flex h-full min-h-0 min-w-0 flex-1 flex-col">
       <!-- Header -->
       <header
         class="shadow-md border-b transition-colors duration-300 h-16"
@@ -97,7 +100,7 @@
 
       <!-- Content -->
       <main
-        class="overflow-y-auto transition-colors duration-300 custom-scrollbar"
+        class="min-h-0 flex-1 overflow-y-auto transition-colors duration-300 custom-scrollbar"
         :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
       >
         <router-view />
@@ -120,7 +123,7 @@ import {
 import { RouterLink, useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { ROUTE_NAMES, ROUTES } from '@/constants'
-import { useAdminStore } from '@/stores/adminStore'
+import { useAdminSession } from '@/composables'
 
 interface MenuItem {
   id: string
@@ -133,7 +136,7 @@ const router = useRouter()
 const route = useRoute()
 const { t } = useI18n()
 const isDarkMode = inject('isDarkMode')
-const adminStore = useAdminStore()
+const { verifySession, logout } = useAdminSession()
 const menuItems: MenuItem[] = [
   {
     id: ROUTE_NAMES.DASHBOARD,
@@ -172,6 +175,11 @@ const handleResize = () => {
 onMounted(() => {
   handleResize()
   window.addEventListener('resize', handleResize)
+  void verifySession().then((isValid) => {
+    if (!isValid) {
+      void router.push(ROUTES.LOGIN)
+    }
+  })
 })
 
 onUnmounted(() => {
@@ -179,9 +187,9 @@ onUnmounted(() => {
 })
 
 // 登出处理
-const handleLogout = () => {
-  adminStore.logout()
-  router.push(ROUTES.LOGIN)
+const handleLogout = async () => {
+  await logout()
+  await router.push(ROUTES.LOGIN)
 }
 </script>
 
diff --git a/src/router/index.ts b/src/router/index.ts
index b918d6e..294931b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,13 +5,14 @@ import { readStoredToken } from '@/utils/auth-storage'
 
 const publicPageMeta = {
   showGlobalControls: true,
-  showRouteLoading: true
+  showRouteLoading: false,
+  routeTransition: 'transfer-fade'
 }
 
 const adminPageMeta = {
   requiresAuth: true,
   showGlobalControls: false,
-  showRouteLoading: true
+  showRouteLoading: false
 }
 
 const routes: RouteRecordRaw[] = [
diff --git a/src/services/config.ts b/src/services/config.ts
index 9d60b75..4a48b6a 100644
--- a/src/services/config.ts
+++ b/src/services/config.ts
@@ -1,13 +1,49 @@
 import api from './client'
-import type { ApiResponse, ConfigState } from '@/types'
+import type { ApiResponse, ConfigState, PublicConfigPayload } from '@/types'
+
+const isPublicConfigEnvelope = (
+  detail: ConfigState | PublicConfigPayload | null | undefined
+): detail is PublicConfigPayload => {
+  return !!detail && typeof detail === 'object' && 'config' in detail
+}
+
+const normalizeUserConfigResponse = (
+  response: ApiResponse<ConfigState | PublicConfigPayload>
+): ApiResponse<PublicConfigPayload> => {
+  if (isPublicConfigEnvelope(response.detail)) {
+    return {
+      ...response,
+      detail: {
+        config: response.detail.config,
+        meta: response.detail.meta
+      }
+    }
+  }
+
+  return {
+    ...response,
+    detail: {
+      config: response.detail ?? {}
+    }
+  }
+}
 
 export class ConfigService {
   static async getConfig(): Promise<ApiResponse<ConfigState>> {
     return api.get('/admin/config/get')
   }
 
-  static async getUserConfig(): Promise<ApiResponse<ConfigState>> {
-    return api.post('/')
+  static async getUserConfig(): Promise<ApiResponse<PublicConfigPayload>> {
+    try {
+      const response = (await api.get('/api/v1/config')) as ApiResponse<
+        ConfigState | PublicConfigPayload
+      >
+
+      return normalizeUserConfigResponse(response)
+    } catch {
+      const response = (await api.post('/')) as ApiResponse<ConfigState>
+      return normalizeUserConfigResponse(response)
+    }
   }
 
   static async updateConfig(config: Partial<ConfigState>): Promise<ApiResponse> {
diff --git a/src/services/file.ts b/src/services/file.ts
index 979855b..b1eef53 100644
--- a/src/services/file.ts
+++ b/src/services/file.ts
@@ -1,6 +1,20 @@
 import api, { rawApiClient } from './client'
 import { multipartUploadConfig } from './shared'
 import type {
+  AdminBatchDeleteFilesResponse,
+  AdminBatchPolicyActionRequest,
+  AdminBatchPolicyActionResponse,
+  AdminBatchUpdateFilesRequest,
+  AdminBatchUpdateFilesResponse,
+  AdminFilePatchPayload,
+  AdminFileDetailResponse,
+  AdminFileListParams,
+  AdminFileMetadataRequest,
+  AdminFilePolicyActionRequest,
+  AdminFilePreviewResponse,
+  AdminFileViewPreset,
+  AdminFileViewPresetRequest,
+  AdminFileViewPresetsResponse,
   ApiResponse,
   ChunkUploadCompleteRequest,
   ChunkUploadInitRequest,
@@ -10,6 +24,7 @@ import type {
   FileInfo,
   FileListResponse,
   FileUploadResponse,
+  ShareMetadataResponse,
   ShareSelectResponse,
   TextSendResponse,
   UploadProgress
@@ -29,6 +44,11 @@ const toUrlEncodedForm = (data: Record<string, string | number>) => {
   return form
 }
 
+const isMethodFallbackError = (error: unknown) => {
+  const status = (error as { response?: { status?: number } })?.response?.status
+  return status === 404 || status === 405
+}
+
 export class FileService {
   static async uploadFile(
     file: File,
@@ -100,6 +120,10 @@ export class FileService {
     return api.post('/share/select/', { code })
   }
 
+  static async inspectFile(code: string): Promise<ApiResponse<ShareMetadataResponse>> {
+    return api.post('/share/metadata/', { code })
+  }
+
   static async getFile(code: string): Promise<ApiResponse<FileInfo>> {
     return api.get(`/file/${code}`)
   }
@@ -111,24 +135,116 @@ export class FileService {
     return response.data
   }
 
-  static async getAdminFileList(params: {
-    page: number
-    size: number
-    keyword?: string
-  }): Promise<ApiResponse<FileListResponse>> {
+  static async getAdminFileList(
+    params: AdminFileListParams
+  ): Promise<ApiResponse<FileListResponse>> {
     return api.get('/admin/file/list', { params })
   }
 
-  static async updateFile(data: FileEditForm): Promise<ApiResponse> {
+  static async getAdminFileDetail(id: number): Promise<ApiResponse<AdminFileDetailResponse>> {
+    return api.get('/admin/file/detail', {
+      params: { id }
+    })
+  }
+
+  static async updateFile(data: FileEditForm | AdminFilePatchPayload): Promise<ApiResponse> {
     return api.patch('/admin/file/update', data)
   }
 
+  static async applyAdminFilePolicyAction(
+    data: AdminFilePolicyActionRequest
+  ): Promise<ApiResponse<AdminFileDetailResponse>> {
+    try {
+      return await api.patch('/admin/file/policy-action', data)
+    } catch (error: unknown) {
+      if (!isMethodFallbackError(error)) {
+        throw error
+      }
+
+      return api.post('/admin/file/policy-action', data)
+    }
+  }
+
+  static async applyAdminFilesPolicyAction(
+    data: AdminBatchPolicyActionRequest
+  ): Promise<ApiResponse<AdminBatchPolicyActionResponse>> {
+    try {
+      return await api.patch('/admin/file/batch-policy-action', data)
+    } catch (error: unknown) {
+      if (!isMethodFallbackError(error)) {
+        throw error
+      }
+
+      return api.post('/admin/file/batch-policy-action', data)
+    }
+  }
+
+  static async updateAdminFileMetadata(
+    data: AdminFileMetadataRequest
+  ): Promise<ApiResponse<AdminFileDetailResponse>> {
+    try {
+      return await api.patch('/admin/file/metadata', data)
+    } catch (error: unknown) {
+      if (!isMethodFallbackError(error)) {
+        throw error
+      }
+
+      return api.post('/admin/file/metadata', data)
+    }
+  }
+
+  static async getAdminFileViewPresets(): Promise<ApiResponse<AdminFileViewPresetsResponse>> {
+    return api.get('/admin/file/view-presets')
+  }
+
+  static async saveAdminFileViewPreset(
+    data: AdminFileViewPresetRequest
+  ): Promise<ApiResponse<AdminFileViewPreset>> {
+    try {
+      return await api.patch('/admin/file/view-presets', data)
+    } catch (error: unknown) {
+      if (!isMethodFallbackError(error)) {
+        throw error
+      }
+
+      return api.post('/admin/file/view-presets', data)
+    }
+  }
+
+  static async updateAdminFiles(
+    data: AdminBatchUpdateFilesRequest
+  ): Promise<ApiResponse<AdminBatchUpdateFilesResponse>> {
+    return api.patch('/admin/file/batch-update', data)
+  }
+
   static async deleteAdminFile(id: number): Promise<ApiResponse> {
     return api.delete('/admin/file/delete', {
       data: { id }
     })
   }
 
+  static async deleteAdminFiles(
+    ids: number[]
+  ): Promise<ApiResponse<AdminBatchDeleteFilesResponse>> {
+    return api.delete('/admin/file/batch-delete', {
+      data: { ids }
+    })
+  }
+
+  static async deleteAdminFileViewPreset(id: string): Promise<ApiResponse> {
+    try {
+      return await api.delete('/admin/file/view-presets', {
+        data: { id }
+      })
+    } catch (error: unknown) {
+      if (!isMethodFallbackError(error)) {
+        throw error
+      }
+
+      return api.post('/admin/file/view-presets/delete', { id })
+    }
+  }
+
   static async downloadAdminFile(
     id: number
   ): Promise<{ data: Blob; headers: Record<string, string> }> {
@@ -141,4 +257,16 @@ export class FileService {
       headers: response.headers as Record<string, string>
     }
   }
+
+  static async previewAdminFile(
+    id: number,
+    maxChars = 20000
+  ): Promise<ApiResponse<AdminFilePreviewResponse>> {
+    return api.get('/admin/file/preview', {
+      params: {
+        id,
+        maxChars
+      }
+    })
+  }
 }
diff --git a/src/services/presign-upload.ts b/src/services/presign-upload.ts
index 3d1def8..47c6684 100644
--- a/src/services/presign-upload.ts
+++ b/src/services/presign-upload.ts
@@ -19,12 +19,17 @@ export class PresignUploadService {
   static async proxyUpload(
     uploadId: string,
     file: File,
-    onProgress?: (progress: UploadProgress) => void
+    onProgress?: (progress: UploadProgress) => void,
+    uploadUrl?: string
   ): Promise<ApiResponse<PresignUploadResult>> {
     const formData = new FormData()
     formData.append('file', file)
 
-    return api.put(`/presign/upload/proxy/${uploadId}`, formData, multipartUploadConfig(onProgress))
+    return api.put(
+      uploadUrl || `/presign/upload/proxy/${uploadId}`,
+      formData,
+      multipartUploadConfig(onProgress)
+    )
   }
 
   static async confirmUpload(
diff --git a/src/stores/configStore.ts b/src/stores/configStore.ts
index 6cd4d68..6400f4b 100644
--- a/src/stores/configStore.ts
+++ b/src/stores/configStore.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
-import type { ConfigState } from '@/types'
+import type { ConfigState, PublicConfigMeta } from '@/types'
 import {
   DEFAULT_PUBLIC_CONFIG,
   readNotifyKey,
@@ -16,8 +16,10 @@ export const useConfigStore = defineStore('config', () => {
     ...DEFAULT_PUBLIC_CONFIG,
     ...toPublicConfig(readStoredConfig<Partial<ConfigState>>())
   })
+  const publicMeta = ref<PublicConfigMeta>({})
 
   const uploadSizeLimit = computed(() => config.value.uploadSize)
+  const appVersion = computed(() => publicMeta.value.version || '')
 
   const updateConfig = (nextConfig: Partial<ConfigState>) => {
     config.value = {
@@ -45,6 +47,15 @@ export const useConfigStore = defineStore('config', () => {
     return `${notifyTitle}: ${notifyContent}`
   }
 
+  const applyPublicMeta = (nextMeta: PublicConfigMeta | undefined) => {
+    if (!nextMeta) return
+
+    publicMeta.value = {
+      ...publicMeta.value,
+      ...nextMeta
+    }
+  }
+
   const reloadStoredConfig = () => {
     config.value = {
       ...DEFAULT_PUBLIC_CONFIG,
@@ -53,8 +64,11 @@ export const useConfigStore = defineStore('config', () => {
   }
 
   return {
+    appVersion,
     config,
+    publicMeta,
     uploadSizeLimit,
+    applyPublicMeta,
     applyRemoteConfig,
     updateConfig,
     reloadStoredConfig
diff --git a/src/types/api.ts b/src/types/api.ts
index 3ae1779..ebb6f43 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -1,6 +1,7 @@
 export interface ApiResponse<T = unknown> {
   code: number
   message?: string
+  msg?: string
   detail?: T
 }
 
diff --git a/src/types/auth.ts b/src/types/auth.ts
index 8558757..800740b 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -2,4 +2,6 @@ export interface AdminUser {
   id: string
   username: string
   token: string
+  token_type?: string
+  expires_at?: number
 }
diff --git a/src/types/config.ts b/src/types/config.ts
index 1272c0d..cedc534 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -15,6 +15,18 @@ export interface ThemeChoice {
   version: string
 }
 
+export interface PublicConfigMeta {
+  version?: string
+  api?: Record<string, string>
+  features?: Record<string, unknown>
+  limits?: Record<string, unknown>
+}
+
+export interface PublicConfigPayload {
+  config: Partial<ConfigState>
+  meta?: PublicConfigMeta
+}
+
 export interface ConfigState {
   name: string
   description: string
diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts
index 5d402d3..6c10d0a 100644
--- a/src/types/dashboard.ts
+++ b/src/types/dashboard.ts
@@ -1,54 +1,98 @@
+import type { AdminFileHealthFilter } from './file'
+
+export interface DashboardHealthSummary {
+  healthAttentionCount: number
+  healthDangerCount: number
+  healthWarningCount: number
+  expiringSoonCount: number
+  storageIssueCount: number
+  neverRetrievedCount: number
+  healthyCount: number
+  permanentCount: number
+}
+
 export interface DashboardData {
   totalFiles: number
-  storageUsed: number
+  storageUsed: number | string
   yesterdayCount: number
   todayCount: number
-  yesterdaySize: number
-  todaySize: number
+  yesterdaySize: number | string
+  todaySize: number | string
   sysUptime: number | null
-  activeCount: number
-  expiredCount: number
-  textCount: number
-  fileCount: number
-  chunkedCount: number
-  usedCount: number
-  storageBackend: string
-  uploadSizeLimit: number
-  openUpload: number
-  enableChunk: number
-  maxSaveSeconds: number
-  topSuffixes: DashboardSuffixStat[]
-  recentFiles: DashboardRecentFile[]
+  activeCount?: number
+  expiredCount?: number
+  textCount?: number
+  fileCount?: number
+  chunkedCount?: number
+  usedCount?: number
+  storageBackend?: string
+  uploadSizeLimit?: number
+  openUpload?: number
+  enableChunk?: number
+  maxSaveSeconds?: number
+  healthAttentionCount?: number
+  healthDangerCount?: number
+  healthWarningCount?: number
+  expiringSoonCount?: number
+  storageIssueCount?: number
+  neverRetrievedCount?: number
+  healthyCount?: number
+  permanentCount?: number
+  healthSummary?: Partial<DashboardHealthSummary>
 }
 
-export interface DashboardSuffixStat {
-  suffix: string
+export type DashboardViewData = Omit<
+  DashboardData,
+  | keyof DashboardHealthSummary
+  | 'activeCount'
+  | 'expiredCount'
+  | 'textCount'
+  | 'fileCount'
+  | 'chunkedCount'
+  | 'usedCount'
+  | 'storageBackend'
+  | 'uploadSizeLimit'
+  | 'openUpload'
+  | 'enableChunk'
+  | 'maxSaveSeconds'
+  | 'storageUsed'
+  | 'yesterdaySize'
+  | 'todaySize'
+> &
+  DashboardHealthSummary & {
+    hasExtendedStats: boolean
+    activeCount: number
+    expiredCount: number
+    textCount: number
+    fileCount: number
+    chunkedCount: number
+    usedCount: number
+    storageBackend: string
+    uploadSizeLimit: number
+    openUpload: number
+    enableChunk: number
+    maxSaveSeconds: number
+    storageUsed: number
+    yesterdaySize: number
+    todaySize: number
+    storageUsedText: string
+    yesterdaySizeText: string
+    todaySizeText: string
+    uploadSizeLimitText: string
+    sysUptimeText: string
+    activeRatio: number
+    textRatio: number
+    fileRatio: number
+    healthyRatio: number
+    healthAttentionRatio: number
+    todaySizeRatio: number
+  }
+
+export interface DashboardHealthAction {
+  key: string
+  label: string
+  description: string
   count: number
-}
-
-export interface DashboardRecentFile {
-  id: number
-  code: string
-  name: string
-  suffix: string
-  size: number
-  text: boolean
-  expiredAt: string | null
-  expiredCount: number
-  usedCount: number
-  createdAt: string | null
-  isExpired: boolean
-}
-
-export interface DashboardViewData extends DashboardData {
-  hasExtendedStats: boolean
-  storageUsedText: string
-  yesterdaySizeText: string
-  todaySizeText: string
-  uploadSizeLimitText: string
-  sysUptimeText: string
-  activeRatio: number
-  textRatio: number
-  fileRatio: number
-  todaySizeRatio: number
+  health: AdminFileHealthFilter
+  tone: 'danger' | 'warning' | 'success' | 'neutral'
 }
diff --git a/src/types/file.ts b/src/types/file.ts
index 4102f0d..50fc5a4 100644
--- a/src/types/file.ts
+++ b/src/types/file.ts
@@ -16,15 +16,127 @@ export interface FileListItem {
   size: number
   text?: string
   description?: string
-  expired_at: string
+  expired_at: string | null
   expired_count: number | null
   created_at: string
+  name?: string
+  type?: 'text' | 'file'
+  status?: 'active' | 'expired'
+  isText?: boolean
+  is_text?: boolean
+  isExpired?: boolean
+  is_expired?: boolean
+  isChunked?: boolean
+  is_chunked?: boolean
+  statusInsights?: AdminFileDetailStatusInsights
+  status_insights?: AdminFileDetailStatusInsights
+  remainingDownloads?: number | null
+  remaining_downloads?: number | null
+  usedCount?: number
+  used_count?: number
+  fileHash?: string | null
+  file_hash?: string | null
 }
 
 export interface AdminFileViewItem extends FileListItem {
+  displayName: string
   displaySize: string
   displayExpiredAt: string
+  displayUsage: string
+  displayHealthState: string
+  displayHealthAction: string
+  isTextFile: boolean
+  isExpiredFile: boolean
+  isChunkedFile: boolean
+  remainingDownloadsValue: number | null
   canPreviewText: boolean
+  statusInsightSeverity: AdminFileInsightSeverity
+  statusInsightState: string
+  statusInsightNextAction: string
+  statusInsightReasons: string[]
+}
+
+export interface AdminFileSummary {
+  totalFiles: number
+  activeCount: number
+  expiredCount: number
+  textCount: number
+  fileCount: number
+  chunkedCount: number
+  healthAttentionCount: number
+  healthDangerCount: number
+  healthWarningCount: number
+  expiringSoonCount: number
+  storageIssueCount: number
+  neverRetrievedCount: number
+  healthyCount: number
+  permanentCount: number
+  storageUsed: number
+  usedCount: number
+}
+
+export type AdminFileStatusFilter = 'all' | 'active' | 'expired'
+export type AdminFileTypeFilter = 'all' | 'file' | 'text' | 'chunked'
+export type AdminFileHealthFilter =
+  | 'all'
+  | 'attention'
+  | 'danger'
+  | 'warning'
+  | 'healthy'
+  | 'expired'
+  | 'expiring_soon'
+  | 'storage_issue'
+  | 'never_retrieved'
+  | 'permanent'
+export type AdminFileSortBy = 'created_at' | 'expired_at' | 'name' | 'size' | 'used_count' | 'code'
+export type AdminFileSortOrder = 'asc' | 'desc'
+
+export interface AdminFileListParams {
+  page: number
+  size: number
+  keyword?: string
+  status?: AdminFileStatusFilter
+  type?: AdminFileTypeFilter
+  health?: AdminFileHealthFilter
+  sortBy?: AdminFileSortBy
+  sortOrder?: AdminFileSortOrder
+}
+
+export interface AdminFileViewPresetParams {
+  keyword: string
+  status: AdminFileStatusFilter
+  type: AdminFileTypeFilter
+  health: AdminFileHealthFilter
+  sortBy: AdminFileSortBy
+  sortOrder: AdminFileSortOrder
+  size: number
+}
+
+export interface AdminFileViewPreset {
+  id: string
+  name: string
+  filters?: AdminFileViewPresetParams
+  params?: AdminFileViewPresetParams
+  isBuiltIn?: boolean
+  isDefault?: boolean
+  is_default?: boolean
+  createdAt?: string | null
+  created_at?: string | null
+  updatedAt?: string | null
+  updated_at?: string | null
+}
+
+export interface AdminFileViewPresetRequest {
+  id?: string
+  name: string
+  filters: AdminFileViewPresetParams
+  params?: AdminFileViewPresetParams
+}
+
+export interface AdminFileViewPresetsResponse {
+  presets?: AdminFileViewPreset[]
+  items?: AdminFileViewPreset[]
+  total?: number
 }
 
 export interface FileEditForm {
@@ -36,11 +148,257 @@ export interface FileEditForm {
   expired_count: number | null
 }
 
+export interface AdminFilePatchPayload {
+  id: number
+  code?: string
+  prefix?: string
+  suffix?: string
+  expired_at?: string | null
+  expired_count?: number | null
+}
+
+export type AdminFilePolicyAction =
+  | 'extend_24h'
+  | 'extend_7d'
+  | 'make_permanent'
+  | 'reset_download_limit'
+
+export interface AdminFilePolicyActionRequest {
+  id: number
+  action: AdminFilePolicyAction
+  downloadLimit?: number
+  download_limit?: number
+}
+
+export interface AdminFileMetadata {
+  note: string
+  tags: string[]
+  updatedAt?: string | null
+  updated_at?: string | null
+}
+
+export interface AdminFileMetadataRequest {
+  id: number
+  note?: string
+  tags?: string[]
+}
+
 export interface FileListResponse {
   data: FileListItem[]
   total: number
   page: number
   size: number
+  summary?: AdminFileSummary
+}
+
+export interface AdminFilePreviewResponse {
+  id: number
+  code: string
+  name: string
+  type: 'text'
+  content: string
+  length: number
+  previewLength?: number
+  preview_length?: number
+  truncated: boolean
+  maxChars?: number
+  max_chars?: number
+  createdAt?: string | null
+  created_at?: string | null
+  expiredAt?: string | null
+  expired_at?: string | null
+}
+
+export interface AdminFileDetailPolicy {
+  expiredAt?: string | null
+  expired_at?: string | null
+  expiredCount?: number | null
+  expired_count?: number | null
+  remainingDownloads?: number | null
+  remaining_downloads?: number | null
+  isExpired?: boolean
+  is_expired?: boolean
+  isPermanent?: boolean
+  is_permanent?: boolean
+}
+
+export interface AdminFileDetailStorage {
+  backend?: string
+  filePath?: string | null
+  file_path?: string | null
+  uuidFileName?: string | null
+  uuid_file_name?: string | null
+  fileHash?: string | null
+  file_hash?: string | null
+  isChunked?: boolean
+  is_chunked?: boolean
+  uploadId?: string | null
+  upload_id?: string | null
+}
+
+export type AdminFileInsightSeverity = 'success' | 'warning' | 'danger' | 'info' | 'neutral'
+
+export interface AdminFileDetailInsightMetrics {
+  ageSeconds?: number
+  age_seconds?: number
+  secondsUntilExpiration?: number | null
+  seconds_until_expiration?: number | null
+  remainingDownloads?: number | null
+  remaining_downloads?: number | null
+  usedCount?: number
+  used_count?: number
+}
+
+export interface AdminFileDetailStatusInsights {
+  severity?: AdminFileInsightSeverity
+  state?: string
+  nextAction?: string
+  next_action?: string
+  reasons?: string[]
+  metrics?: AdminFileDetailInsightMetrics
+}
+
+export interface AdminFileDetailTimelineItem {
+  key: string
+  status?: string
+  severity?: AdminFileInsightSeverity
+  timestamp?: string | null
+  value?: number | string | null
+  detail?: string | null
+}
+
+export interface AdminFileDetailTimelineViewItem extends AdminFileDetailTimelineItem {
+  severity: AdminFileInsightSeverity
+  displayTitle: string
+  displayDescription: string
+  displayMeta: string
+}
+
+export interface AdminFileDetailResponse extends FileListItem {
+  filename?: string
+  displayName?: string
+  display_name?: string
+  isPermanent?: boolean
+  is_permanent?: boolean
+  hasDownloadLimit?: boolean
+  has_download_limit?: boolean
+  hasExpirationTime?: boolean
+  has_expiration_time?: boolean
+  textLength?: number
+  text_length?: number
+  canPreviewText?: boolean
+  can_preview_text?: boolean
+  canDownload?: boolean
+  can_download?: boolean
+  storageBackend?: string
+  storage_backend?: string
+  filePath?: string | null
+  file_path?: string | null
+  uuidFileName?: string | null
+  uuid_file_name?: string | null
+  uploadId?: string | null
+  upload_id?: string | null
+  policy?: AdminFileDetailPolicy
+  storage?: AdminFileDetailStorage
+  metadata?: AdminFileMetadata
+  meta?: AdminFileMetadata
+  note?: string
+  tags?: string[]
+  metadataUpdatedAt?: string | null
+  metadata_updated_at?: string | null
+  statusInsights?: AdminFileDetailStatusInsights
+  status_insights?: AdminFileDetailStatusInsights
+  timeline?: AdminFileDetailTimelineItem[]
+}
+
+export interface AdminFileDetailViewItem extends AdminFileViewItem {
+  displayCreatedAt: string
+  displayRetrieveUrl: string
+  textLengthValue: number
+  canDownloadFile: boolean
+  isPermanentFile: boolean
+  hasDownloadLimitFile: boolean
+  hasExpirationTimeFile: boolean
+  isChunkedStorage: boolean
+  storageBackendValue: string
+  fileHashValue?: string | null
+  filePathValue?: string | null
+  uuidFileNameValue?: string | null
+  uploadIdValue?: string | null
+  metadataNote: string
+  metadataTags: string[]
+  metadataUpdatedAt: string | null
+  statusInsightMetrics?: AdminFileDetailInsightMetrics
+  detailTimeline: AdminFileDetailTimelineViewItem[]
+}
+
+export interface AdminBatchDeleteFileFailure {
+  id: number
+  reason: string
+}
+
+export interface AdminBatchDeleteFilesResponse {
+  requestedCount?: number
+  requested_count?: number
+  uniqueCount?: number
+  unique_count?: number
+  deletedCount?: number
+  deleted_count?: number
+  missingCount?: number
+  missing_count?: number
+  failedCount?: number
+  failed_count?: number
+  deleted?: number[]
+  missing?: number[]
+  failed?: AdminBatchDeleteFileFailure[]
+}
+
+export interface AdminBatchUpdateFileFailure {
+  id: number
+  reason: string
+}
+
+export interface AdminBatchUpdateFilesRequest {
+  ids: number[]
+  expired_at?: string | null
+  expired_count?: number | null
+  clearExpiredAt?: boolean
+  clear_expired_at?: boolean
+}
+
+export interface AdminBatchUpdateFilesResponse {
+  requestedCount?: number
+  requested_count?: number
+  uniqueCount?: number
+  unique_count?: number
+  updatedCount?: number
+  updated_count?: number
+  missingCount?: number
+  missing_count?: number
+  failedCount?: number
+  failed_count?: number
+  updated?: number[]
+  missing?: number[]
+  failed?: AdminBatchUpdateFileFailure[]
+}
+
+export interface AdminBatchPolicyActionRequest {
+  ids: number[]
+  action: AdminFilePolicyAction
+  downloadLimit?: number
+  download_limit?: number
+}
+
+export interface AdminBatchPolicyActionResponse extends AdminBatchUpdateFilesResponse {
+  action?: AdminFilePolicyAction | string
+}
+
+export type AdminBatchEditMode = 'expiresAt' | 'downloadLimit' | 'forever'
+
+export interface AdminBatchEditForm {
+  mode: AdminBatchEditMode
+  expired_at: string
+  expired_count: number | null
 }
 
 export interface FileUploadResponse {
@@ -57,6 +415,30 @@ export interface ShareSelectResponse {
   name: string
   text: string
   size: number
+  type?: 'file' | 'text'
+  is_text?: boolean
+  content?: string | null
+  download_url?: string | null
+  created_at?: string | null
+  expired_at?: string | null
+  expires_at?: string | null
+  expired_count?: number | null
+  used_count?: number
+  remaining_downloads?: number | null
+}
+
+export interface ShareMetadataResponse {
+  code: string
+  name: string
+  size: number
+  type: 'file' | 'text'
+  is_text: boolean
+  created_at?: string | null
+  expired_at?: string | null
+  expires_at?: string | null
+  expired_count?: number | null
+  used_count?: number
+  remaining_downloads?: number | null
 }
 
 export interface ReceivedFileRecord {
@@ -67,6 +449,8 @@ export interface ReceivedFileRecord {
   downloadUrl: string | null
   content: string | null
   date: string
+  type?: 'file' | 'text'
+  remainingDownloads?: number | null
 }
 
 export interface SentFileRecord {
diff --git a/src/types/presign-upload.ts b/src/types/presign-upload.ts
index 8f38144..abb09ea 100644
--- a/src/types/presign-upload.ts
+++ b/src/types/presign-upload.ts
@@ -22,6 +22,8 @@ export interface PresignInitRequest {
 export interface PresignInitResponse {
   upload_id: string
   upload_url: string
+  proxy_upload_url?: string
+  legacy_proxy_upload_url?: string
   mode: PresignUploadMode
   expires_in: number
 }
diff --git a/src/utils/download-action.ts b/src/utils/download-action.ts
index be34bef..3e14409 100644
--- a/src/utils/download-action.ts
+++ b/src/utils/download-action.ts
@@ -1,5 +1,5 @@
 import { saveAs } from 'file-saver'
-import type { ReceivedFileRecord } from '@/types'
+import type { AdminFileViewItem, ApiResponse, ReceivedFileRecord } from '@/types'
 import { buildDownloadUrl } from '@/utils/share-url'
 
 export function downloadReceivedRecord(record: ReceivedFileRecord): void {
@@ -13,3 +13,67 @@ export function downloadReceivedRecord(record: ReceivedFileRecord): void {
     saveAs(blob, `${record.filename}.txt`)
   }
 }
+
+export const getSafeFilename = (name: string) =>
+  name
+    .replace(/[\\/:*?"<>|\x00-\x1F]/g, '_')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, 180) || 'download'
+
+const getFilenameFromDisposition = (disposition?: string) => {
+  if (!disposition) return ''
+
+  const utf8Match = disposition.match(/filename\*=UTF-8''([^;]+)/i)
+  if (utf8Match?.[1]) {
+    try {
+      return decodeURIComponent(utf8Match[1])
+    } catch {
+      return utf8Match[1]
+    }
+  }
+
+  const asciiMatch = disposition.match(/filename="?([^"]+)"?/i)
+  return asciiMatch?.[1] || ''
+}
+
+const readBlobAsText = (blob: Blob): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result || ''))
+    reader.onerror = () => reject(reader.error)
+    reader.readAsText(blob)
+  })
+
+export function exportAdminTextFile(file: AdminFileViewItem, content: string): void {
+  const filename = getSafeFilename(file.displayName || file.code)
+  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
+  saveAs(blob, `${filename}.txt`)
+}
+
+export async function downloadAdminManagedFile(
+  file: AdminFileViewItem,
+  response: { data: Blob; headers: Record<string, string> }
+): Promise<void> {
+  if (file.isTextFile) {
+    const text = await readBlobAsText(response.data)
+    let content = text
+
+    try {
+      const payload = JSON.parse(text) as ApiResponse<string>
+      content = typeof payload.detail === 'string' ? payload.detail : text
+    } catch {
+      content = text
+    }
+
+    exportAdminTextFile(file, content)
+    return
+  }
+
+  const disposition =
+    response.headers['content-disposition'] || response.headers['Content-Disposition']
+  const filename = getSafeFilename(
+    getFilenameFromDisposition(disposition) || file.displayName || file.code
+  )
+  saveAs(response.data, filename)
+}
diff --git a/src/utils/record-storage.ts b/src/utils/record-storage.ts
new file mode 100644
index 0000000..6aba34b
--- /dev/null
+++ b/src/utils/record-storage.ts
@@ -0,0 +1,23 @@
+export function readStoredRecords<T>(key: string): T[] {
+  if (typeof window === 'undefined') return []
+
+  try {
+    const raw = localStorage.getItem(key)
+    if (!raw) return []
+
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed) ? (parsed as T[]) : []
+  } catch {
+    return []
+  }
+}
+
+export function writeStoredRecords<T>(key: string, records: T[]) {
+  if (typeof window === 'undefined') return
+
+  try {
+    localStorage.setItem(key, JSON.stringify(records))
+  } catch {
+    // 本地存储不可用时保持内存记录，不影响当前会话。
+  }
+}
diff --git a/src/views/RetrievewFileView.vue b/src/views/RetrievewFileView.vue
index 9430646..8448a37 100644
--- a/src/views/RetrievewFileView.vue
+++ b/src/views/RetrievewFileView.vue
@@ -45,7 +45,7 @@
       @close="closeDetails"
       @preview-content="showContentPreview"
     />
-    
+
     <ContentPreviewModal
       :visible="showPreview"
       :rendered-content="renderedContent"
diff --git a/src/views/SendFileView.vue b/src/views/SendFileView.vue
index a65be2c..7334f15 100644
--- a/src/views/SendFileView.vue
+++ b/src/views/SendFileView.vue
@@ -22,6 +22,7 @@
           <transition name="fade" mode="out-in">
             <div v-if="sendType === 'file'" key="file" class="grid grid-cols-1 gap-8">
               <FileUploadArea
+                class="payload-panel"
                 :selected-file="selectedFile"
                 :selected-files="selectedFiles"
                 :progress="uploadProgress"
@@ -32,7 +33,11 @@
               />
             </div>
             <div v-else key="text" class="grid grid-cols-1 gap-8">
-              <TextInputArea v-model="textContent" :placeholder="t('send.uploadArea.textInput')" />
+              <TextInputArea
+                v-model="textContent"
+                class="payload-panel"
+                :placeholder="t('send.uploadArea.textInput')"
+              />
             </div>
           </transition>
           <ExpirationSelector
@@ -202,6 +207,15 @@ const toRetrieve = () => {
   transform: translateY(0);
 }
 
+:deep(.payload-panel) {
+  height: 12rem;
+  min-height: 12rem;
+}
+
+:deep(.payload-panel textarea) {
+  height: 100%;
+}
+
 select option {
   padding: 8px;
   margin: 4px;
diff --git a/src/views/manage/DashboardView.vue b/src/views/manage/DashboardView.vue
index e5cf014..676a494 100644
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -1,27 +1,43 @@
 <template>
-  <div class="p-6 overflow-y-auto custom-scrollbar">
+  <div class="p-6">
     <div class="mb-6 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
       <div>
         <p class="text-sm" :class="[mutedTextClass]">FileCodeBox Admin</p>
         <h2 class="text-2xl font-bold" :class="[primaryTextClass]">
           {{ t('admin.dashboard.title') }}
         </h2>
+        <p class="mt-1 text-xs" :class="[mutedTextClass]">
+          {{ t('admin.dashboard.lastUpdated', { time: lastUpdatedText }) }}
+        </p>
       </div>
       <button
         type="button"
+        :disabled="isLoading"
         @click="fetchDashboardData"
-        class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors"
+        class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-70"
         :class="[
           isDarkMode
             ? 'bg-gray-800 text-gray-200 hover:bg-gray-700'
             : 'bg-white text-gray-700 shadow-sm hover:bg-gray-50'
         ]"
       >
-        <RefreshCwIcon class="mr-2 h-4 w-4" />
-        {{ t('admin.dashboard.refresh') }}
+        <RefreshCwIcon class="mr-2 h-4 w-4" :class="{ 'animate-spin': isLoading }" />
+        {{ isLoading ? t('admin.dashboard.refreshing') : t('admin.dashboard.refresh') }}
       </button>
     </div>
 
+    <div
+      v-if="errorMessage"
+      class="mb-6 rounded-lg border px-4 py-3 text-sm"
+      :class="[
+        isDarkMode
+          ? 'border-red-900/50 bg-red-950/30 text-red-200'
+          : 'border-red-200 bg-red-50 text-red-700'
+      ]"
+    >
+      {{ errorMessage }}
+    </div>
+
     <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
       <StatCard
         :title="t('admin.dashboard.totalFiles')"
@@ -79,7 +95,10 @@
               {{ t('admin.dashboard.fileHealthDesc') }}
             </p>
           </div>
-          <ActivityIcon class="h-5 w-5" :class="[isDarkMode ? 'text-indigo-300' : 'text-indigo-500']" />
+          <ActivityIcon
+            class="h-5 w-5"
+            :class="[isDarkMode ? 'text-indigo-300' : 'text-indigo-500']"
+          />
         </div>
 
         <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
@@ -103,6 +122,31 @@
           />
         </div>
 
+        <div class="mt-6 grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-5">
+          <button
+            v-for="action in healthActions"
+            :key="action.key"
+            type="button"
+            class="group flex min-h-28 flex-col justify-between rounded-lg border p-4 text-left transition-colors"
+            :class="getHealthActionClass(action.tone)"
+            @click="openHealthQueue(action.health)"
+          >
+            <span class="flex items-start justify-between gap-3">
+              <span>
+                <span class="block text-2xl font-semibold">{{ action.count }}</span>
+                <span class="mt-1 block text-sm font-medium">{{ action.label }}</span>
+              </span>
+              <component :is="getHealthActionIcon(action.tone)" class="h-5 w-5 shrink-0" />
+            </span>
+            <span class="mt-3 flex items-center justify-between gap-2 text-xs">
+              <span class="line-clamp-2">{{ action.description }}</span>
+              <ArrowRightIcon
+                class="h-4 w-4 shrink-0 transition-transform group-hover:translate-x-0.5"
+              />
+            </span>
+          </button>
+        </div>
+
         <div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
           <div class="rounded-lg border p-4" :class="[subtlePanelClass]">
             <p class="text-sm" :class="[mutedTextClass]">
@@ -157,10 +201,7 @@
             :label="t('admin.dashboard.guestUpload')"
             :value="dashboardData.openUpload ? t('common.enabled') : t('common.disabled')"
           />
-          <PolicyRow
-            :label="t('admin.dashboard.maxSaveTime')"
-            :value="maxSaveTimeText"
-          />
+          <PolicyRow :label="t('admin.dashboard.maxSaveTime')" :value="maxSaveTimeText" />
         </div>
 
         <div class="mt-5">
@@ -168,7 +209,10 @@
             <span :class="[mutedTextClass]">{{ t('admin.dashboard.todayCapacityReference') }}</span>
             <span :class="[primaryTextClass]">{{ dashboardData.todaySizeRatio }}%</span>
           </div>
-          <div class="h-2 overflow-hidden rounded-full" :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']">
+          <div
+            class="h-2 overflow-hidden rounded-full"
+            :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']"
+          >
             <div
               class="h-full rounded-full bg-indigo-500"
               :style="{ width: `${dashboardData.todaySizeRatio}%` }"
@@ -178,147 +222,71 @@
       </section>
     </div>
 
-    <div v-if="dashboardData.hasExtendedStats" class="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-3">
-      <section class="rounded-lg p-5 shadow-sm" :class="[panelClass]">
-        <h3 class="text-lg font-semibold" :class="[primaryTextClass]">
-          {{ t('admin.dashboard.fileTypeDistribution') }}
-        </h3>
-        <div class="mt-4 space-y-3">
-          <div v-if="dashboardData.topSuffixes.length === 0" class="text-sm" :class="[mutedTextClass]">
-            {{ t('common.noData') }}
-          </div>
-          <div v-for="item in dashboardData.topSuffixes" :key="item.suffix" class="space-y-1">
-            <div class="flex items-center justify-between text-sm">
-              <span :class="[primaryTextClass]">{{ item.suffix || t('admin.dashboard.textType') }}</span>
-              <span :class="[mutedTextClass]">{{ item.count }}</span>
-            </div>
-            <div class="h-2 overflow-hidden rounded-full" :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']">
-              <div
-                class="h-full rounded-full bg-purple-500"
-                :style="{ width: `${getSuffixRatio(item.count)}%` }"
-              ></div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section class="xl:col-span-2 rounded-lg p-5 shadow-sm" :class="[panelClass]">
-        <div class="mb-4 flex items-center justify-between">
-          <div>
-            <h3 class="text-lg font-semibold" :class="[primaryTextClass]">
-              {{ t('admin.dashboard.recentFiles') }}
-            </h3>
-            <p class="text-sm" :class="[mutedTextClass]">
-              {{ t('admin.dashboard.recentFilesDesc') }}
-            </p>
-          </div>
-        </div>
-
-        <div class="overflow-hidden rounded-lg border" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-          <table class="min-w-full divide-y" :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']">
-            <thead :class="[isDarkMode ? 'bg-gray-900/50' : 'bg-gray-50']">
-              <tr>
-                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider" :class="[mutedTextClass]">
-                  {{ t('admin.dashboard.table.file') }}
-                </th>
-                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider" :class="[mutedTextClass]">
-                  {{ t('admin.dashboard.table.size') }}
-                </th>
-                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider" :class="[mutedTextClass]">
-                  {{ t('admin.dashboard.table.usage') }}
-                </th>
-                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider" :class="[mutedTextClass]">
-                  {{ t('admin.dashboard.table.status') }}
-                </th>
-              </tr>
-            </thead>
-            <tbody class="divide-y" :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-100']">
-              <tr v-if="dashboardData.recentFiles.length === 0">
-                <td colspan="4" class="px-4 py-6 text-center text-sm" :class="[mutedTextClass]">
-                  {{ t('common.noData') }}
-                </td>
-              </tr>
-              <tr v-for="file in dashboardData.recentFiles" :key="file.id">
-                <td class="px-4 py-3">
-                  <div class="flex items-center gap-3">
-                    <div class="rounded-lg p-2" :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']">
-                      <FileTextIcon v-if="file.text" class="h-4 w-4" :class="[mutedTextClass]" />
-                      <FileIcon v-else class="h-4 w-4" :class="[mutedTextClass]" />
-                    </div>
-                    <div class="min-w-0">
-                      <p class="truncate text-sm font-medium" :class="[primaryTextClass]">
-                        {{ file.name || file.code }}
-                      </p>
-                      <p class="text-xs" :class="[mutedTextClass]">
-                        {{ file.code }} · {{ formatCreatedAt(file.createdAt) }}
-                      </p>
-                    </div>
-                  </div>
-                </td>
-                <td class="px-4 py-3 text-sm" :class="[primaryTextClass]">
-                  {{ formatFileSize(file.size) }}
-                </td>
-                <td class="px-4 py-3 text-sm" :class="[primaryTextClass]">
-                  {{ file.usedCount }} {{ t('common.times') }}
-                </td>
-                <td class="px-4 py-3">
-                  <span
-                    class="inline-flex rounded-full px-2.5 py-1 text-xs font-medium"
-                    :class="[
-                      file.isExpired
-                        ? isDarkMode
-                          ? 'bg-red-900/40 text-red-300'
-                          : 'bg-red-100 text-red-700'
-                        : isDarkMode
-                          ? 'bg-green-900/40 text-green-300'
-                          : 'bg-green-100 text-green-700'
-                    ]"
-                  >
-                    {{ file.isExpired ? t('common.expiredFile') : t('admin.dashboard.available') }}
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-    </div>
+    <footer
+      class="mt-6 flex flex-col gap-2 border-t pt-4 text-xs sm:flex-row sm:items-center sm:justify-between"
+      :class="[isDarkMode ? 'border-gray-800 text-gray-500' : 'border-gray-200 text-gray-500']"
+    >
+      <span>{{ t('admin.dashboard.footerProduct') }}</span>
+      <span class="inline-flex items-center gap-2">
+        <span>{{ t('admin.dashboard.runtimeVersion') }}</span>
+        <span
+          class="rounded-md border px-2 py-0.5 font-medium"
+          :class="[
+            isDarkMode
+              ? 'border-gray-700 bg-gray-800/70 text-gray-300'
+              : 'border-gray-200 bg-white text-gray-700'
+          ]"
+        >
+          {{ versionText }}
+        </span>
+      </span>
+    </footer>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, defineComponent, h, onMounted } from 'vue'
-import type { PropType } from 'vue'
+import type { Component, PropType } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
 import {
   ActivityIcon,
+  AlertTriangleIcon,
+  ArrowRightIcon,
+  CheckCircleIcon,
   DownloadCloudIcon,
-  FileIcon,
   FilesIcon,
-  FileTextIcon,
   HardDriveIcon,
   RefreshCwIcon,
+  ShieldCheckIcon,
   UploadCloudIcon
 } from 'lucide-vue-next'
 import StatCard from '@/components/common/StatCard.vue'
 import { useDashboardStats, useInjectedDarkMode } from '@/composables'
 import { useI18n } from 'vue-i18n'
-import { formatFileSize, formatTimestamp } from '@/utils/common'
+import { ROUTES } from '@/constants'
+import { useConfigStore } from '@/stores/configStore'
+import type { DashboardHealthAction } from '@/types'
 
 const isDarkMode = useInjectedDarkMode()
 const { t } = useI18n()
-const { dashboardData, fetchDashboardData } = useDashboardStats()
+const router = useRouter()
+const configStore = useConfigStore()
+const { appVersion } = storeToRefs(configStore)
+const { dashboardData, errorMessage, fetchDashboardData, isLoading, lastUpdatedText } =
+  useDashboardStats({
+    loadFailedMessage: t('admin.dashboard.loadFailed')
+  })
 
 const primaryTextClass = computed(() => (isDarkMode.value ? 'text-white' : 'text-gray-900'))
 const mutedTextClass = computed(() => (isDarkMode.value ? 'text-gray-400' : 'text-gray-500'))
+const versionText = computed(() => appVersion.value || t('admin.dashboard.versionPending'))
 const panelClass = computed(() =>
   isDarkMode.value ? 'bg-gray-800/80 border border-gray-700' : 'bg-white border border-gray-100'
 )
 const subtlePanelClass = computed(() =>
   isDarkMode.value ? 'border-gray-700 bg-gray-900/30' : 'border-gray-100 bg-gray-50'
 )
-const maxSuffixCount = computed(() =>
-  Math.max(...dashboardData.topSuffixes.map((item) => item.count), 1)
-)
 const maxSaveTimeText = computed(() => {
   if (!dashboardData.maxSaveSeconds) return t('admin.dashboard.noSaveLimit')
   const days = Math.floor(dashboardData.maxSaveSeconds / 86400)
@@ -328,11 +296,80 @@ const maxSaveTimeText = computed(() => {
   return `${Math.floor(dashboardData.maxSaveSeconds / 60)}${t('common.minute')}`
 })
 
-const getSuffixRatio = (count: number) => Math.round((count / maxSuffixCount.value) * 100)
+const healthActions = computed<DashboardHealthAction[]>(() => [
+  {
+    key: 'attention',
+    label: t('admin.dashboard.healthActions.attention.title'),
+    description: t('admin.dashboard.healthActions.attention.description'),
+    count: dashboardData.healthAttentionCount,
+    health: 'attention',
+    tone: dashboardData.healthAttentionCount > 0 ? 'danger' : 'success'
+  },
+  {
+    key: 'storageIssue',
+    label: t('admin.dashboard.healthActions.storageIssue.title'),
+    description: t('admin.dashboard.healthActions.storageIssue.description'),
+    count: dashboardData.storageIssueCount,
+    health: 'storage_issue',
+    tone: dashboardData.storageIssueCount > 0 ? 'danger' : 'success'
+  },
+  {
+    key: 'expiringSoon',
+    label: t('admin.dashboard.healthActions.expiringSoon.title'),
+    description: t('admin.dashboard.healthActions.expiringSoon.description'),
+    count: dashboardData.expiringSoonCount,
+    health: 'expiring_soon',
+    tone: dashboardData.expiringSoonCount > 0 ? 'warning' : 'success'
+  },
+  {
+    key: 'neverRetrieved',
+    label: t('admin.dashboard.healthActions.neverRetrieved.title'),
+    description: t('admin.dashboard.healthActions.neverRetrieved.description'),
+    count: dashboardData.neverRetrievedCount,
+    health: 'never_retrieved',
+    tone: dashboardData.neverRetrievedCount > 0 ? 'neutral' : 'success'
+  },
+  {
+    key: 'permanent',
+    label: t('admin.dashboard.healthActions.permanent.title'),
+    description: t('admin.dashboard.healthActions.permanent.description'),
+    count: dashboardData.permanentCount,
+    health: 'permanent',
+    tone: 'success'
+  }
+])
 
-const formatCreatedAt = (value: string | null) => {
-  if (!value) return '-'
-  return formatTimestamp(value, 'datetime')
+const healthActionIconMap: Record<DashboardHealthAction['tone'], Component> = {
+  danger: AlertTriangleIcon,
+  warning: AlertTriangleIcon,
+  success: CheckCircleIcon,
+  neutral: ShieldCheckIcon
+}
+
+const getHealthActionIcon = (tone: DashboardHealthAction['tone']) => healthActionIconMap[tone]
+
+const getHealthActionClass = (tone: DashboardHealthAction['tone']) => {
+  const darkClasses: Record<DashboardHealthAction['tone'], string> = {
+    danger: 'border-red-500/20 bg-red-500/10 text-red-200 hover:border-red-400/40',
+    warning: 'border-amber-500/20 bg-amber-500/10 text-amber-200 hover:border-amber-400/40',
+    success: 'border-emerald-500/20 bg-emerald-500/10 text-emerald-200 hover:border-emerald-400/40',
+    neutral: 'border-gray-700 bg-gray-900/30 text-gray-300 hover:border-gray-600'
+  }
+  const lightClasses: Record<DashboardHealthAction['tone'], string> = {
+    danger: 'border-red-100 bg-red-50 text-red-700 hover:border-red-200',
+    warning: 'border-amber-100 bg-amber-50 text-amber-700 hover:border-amber-200',
+    success: 'border-emerald-100 bg-emerald-50 text-emerald-700 hover:border-emerald-200',
+    neutral: 'border-gray-100 bg-gray-50 text-gray-700 hover:border-gray-200'
+  }
+
+  return isDarkMode.value ? darkClasses[tone] : lightClasses[tone]
+}
+
+const openHealthQueue = (health: DashboardHealthAction['health']) => {
+  void router.push({
+    path: ROUTES.FILE_MANAGE,
+    query: { health }
+  })
 }
 
 const MetricProgress = defineComponent({
@@ -381,10 +418,17 @@ const PolicyRow = defineComponent({
   },
   setup(props) {
     return () =>
-      h('div', { class: 'flex items-center justify-between gap-4 border-b border-gray-200/60 pb-3 last:border-b-0 dark:border-gray-700' }, [
-        h('span', { class: 'text-sm text-gray-500 dark:text-gray-400' }, props.label),
-        h('span', { class: 'text-sm font-medium text-gray-900 dark:text-white' }, props.value)
-      ])
+      h(
+        'div',
+        {
+          class:
+            'flex items-center justify-between gap-4 border-b border-gray-200/60 pb-3 last:border-b-0 dark:border-gray-700'
+        },
+        [
+          h('span', { class: 'text-sm text-gray-500 dark:text-gray-400' }, props.label),
+          h('span', { class: 'text-sm font-medium text-gray-900 dark:text-white' }, props.value)
+        ]
+      )
   }
 })
 
diff --git a/src/views/manage/FileManageView.vue b/src/views/manage/FileManageView.vue
index 7913afb..786a8c7 100644
--- a/src/views/manage/FileManageView.vue
+++ b/src/views/manage/FileManageView.vue
@@ -1,125 +1,557 @@
 <template>
-  <div class="p-6 overflow-y-auto custom-scrollbar">
-    <!-- 页面标题和统计信息 -->
-    <div class="mb-8">
-      <h2 class="text-2xl font-bold mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-        {{ t('fileManage.title') }}
-      </h2>
-    </div>
-
-    <!-- 搜索和操作栏 -->
-    <div
-      class="mb-6 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between bg-opacity-70 p-4 rounded-lg shadow-sm"
-      :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
-      <div class="flex flex-1 gap-4 w-full sm:w-auto">
-        <div class="relative flex-1">
-          <input type="text" v-model="params.keyword" @keyup.enter="handleSearch" :class="[
-            isDarkMode
-              ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
-              : 'bg-white border-gray-300 text-gray-900 placeholder-gray-400',
-            'w-full pl-10 pr-4 py-2.5 rounded-lg border focus:ring-2 focus:ring-indigo-500 focus:border-transparent'
-          ]" :placeholder="t('fileManage.searchPlaceholder')" />
-          <SearchIcon class="absolute left-3 top-3 w-5 h-5" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
-        </div>
-        <button @click="handleSearch"
-          class="px-4 py-2.5 rounded-lg inline-flex items-center transition-all duration-200 bg-indigo-600 hover:bg-indigo-700 text-white shadow-sm">
-          <SearchIcon class="w-5 h-5 mr-2" />
-          {{ t('common.search') }}
-        </button>
+  <div class="p-6">
+    <div class="mb-6 flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+      <div>
+        <h2 class="text-2xl font-bold" :class="[primaryTextClass]">
+          {{ t('fileManage.title') }}
+        </h2>
+        <p class="mt-1 text-sm" :class="[mutedTextClass]">
+          {{ t('fileManage.subtitle', { count: summary.totalFiles }) }}
+        </p>
+      </div>
+      <div class="flex flex-wrap items-center gap-2">
+        <BaseButton variant="secondary" :loading="isLoading" @click="refreshFiles">
+          <template #icon>
+            <RefreshCwIcon class="mr-2 h-4 w-4" />
+          </template>
+          {{ t('fileManage.refresh') }}
+        </BaseButton>
+        <BaseButton
+          v-if="hasActiveFilters"
+          variant="outline"
+          :disabled="isLoading"
+          @click="handleResetFilters"
+        >
+          <template #icon>
+            <XIcon class="mr-2 h-4 w-4" />
+          </template>
+          {{ t('fileManage.resetFilters') }}
+        </BaseButton>
       </div>
     </div>
 
-    <!-- 文件列表 -->
-    <DataTable :title="t('fileManage.allFiles')" :headers="fileTableHeaders">
-      <template #body>
-        <tr v-for="file in tableData" :key="file.id" class="hover:bg-opacity-50 transition-colors duration-200"
-          :class="[isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50']">
-          <td class="px-6 py-4 whitespace-nowrap">
-            <div class="flex items-center">
-              <span class="font-medium select-all" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
-                {{ file.code }}
-              </span>
-            </div>
-          </td>
-          <td class="px-6 py-4">
-            <div class="flex items-center group relative">
-              <FileIcon class="w-5 h-5 mr-2 flex-shrink-0"
-                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']" />
-              <span class="font-medium truncate max-w-[200px]"
-                :class="[isDarkMode ? 'text-white' : 'text-gray-900']" :title="file.prefix">
-                {{ file.prefix }}
-              </span>
-              <!-- 悬浮提示 -->
-              <div
-                class="absolute left-0 -top-2 -translate-y-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
-                <div class="bg-gray-900 text-white text-sm rounded px-2 py-1 max-w-xs break-all">
-                  {{ file.prefix }}
-                </div>
-              </div>
-            </div>
-          </td>
-          <td class="px-6 py-4 whitespace-nowrap">
-            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
-              :class="[isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-800']">
-              {{ file.displaySize }}
-            </span>
-          </td>
-          <td class="px-6 py-4">
-            <div class="flex items-center gap-2">
-              <span class="block truncate max-w-[200px]" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
-                {{ file.text || '-' }}
-              </span>
-              <!-- 查看全文按钮 - 仅当文本超过一定长度时显示 -->
-              <button
-                v-if="file.canPreviewText"
-                @click="openTextPreview(file.text || '')"
-                class="flex-shrink-0 inline-flex items-center px-2 py-1 rounded text-xs transition-colors duration-200"
+    <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+      <div
+        v-for="card in summaryCards"
+        :key="card.label"
+        class="rounded-lg border p-4"
+        :class="[panelClass]"
+      >
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <p class="text-sm" :class="[mutedTextClass]">{{ card.label }}</p>
+            <p class="mt-2 text-2xl font-semibold" :class="[primaryTextClass]">
+              {{ card.value }}
+            </p>
+          </div>
+          <div class="rounded-lg p-2" :class="[card.iconClass]">
+            <component :is="card.icon" class="h-5 w-5" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <section class="mb-6 rounded-lg border p-4" :class="[panelClass]">
+      <div class="grid gap-4">
+        <div class="flex flex-col gap-3 lg:flex-row lg:items-center">
+          <label class="min-w-0 flex-1">
+            <span class="sr-only">{{ t('fileManage.searchPlaceholder') }}</span>
+            <span class="relative block">
+              <SearchIcon
+                class="absolute left-3 top-3 h-4 w-4"
+                :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
+              />
+              <input
+                v-model="params.keyword"
+                type="text"
+                :placeholder="t('fileManage.searchPlaceholder')"
+                class="w-full rounded-lg border py-2.5 pl-10 pr-4 text-sm focus:border-transparent focus:ring-2 focus:ring-indigo-500"
                 :class="[
                   isDarkMode
-                    ? 'bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white'
-                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                    ? 'border-gray-600 bg-gray-700 text-white placeholder-gray-400'
+                    : 'border-gray-300 bg-white text-gray-900 placeholder-gray-400'
                 ]"
-              >
-                <EyeIcon class="w-3 h-3 mr-1" />
-                {{ t('fileManage.viewText') }}
-              </button>
-            </div>
-          </td>
-          <td class="px-6 py-4 whitespace-nowrap">
-            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" :class="[
-              file.expired_at
-                ? (isDarkMode ? 'bg-yellow-900/30 text-yellow-400' : 'bg-yellow-100 text-yellow-800')
-                : (isDarkMode ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-800')
-            ]">
-              {{ file.displayExpiredAt }}
+                @keyup.enter="handleSearch"
+              />
             </span>
-          </td>
-          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-            <div class="flex items-center space-x-2">
-              <button @click="openEditModal(file)"
-                class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
-                  isDarkMode
-                    ? 'bg-blue-900/20 text-blue-400 hover:bg-blue-900/30'
-                    : 'bg-blue-50 text-blue-600 hover:bg-blue-100'
-                ]">
-                <PencilIcon class="w-4 h-4 mr-1.5" />
-                {{ t('common.edit') }}
-              </button>
-              <button @click="deleteFile(file.id)"
-                class="inline-flex items-center px-3 py-1.5 rounded-md transition-colors duration-200" :class="[
-                  isDarkMode
-                    ? 'bg-red-900/20 text-red-400 hover:bg-red-900/30'
-                    : 'bg-red-50 text-red-600 hover:bg-red-100'
-                ]">
-                <TrashIcon class="w-4 h-4 mr-1.5" />
-                {{ t('common.delete') }}
-              </button>
+          </label>
+          <BaseButton :loading="isLoading" @click="handleSearch">
+            <template #icon>
+              <SearchIcon class="mr-2 h-4 w-4" />
+            </template>
+            {{ t('common.search') }}
+          </BaseButton>
+        </div>
+
+        <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-6">
+          <label class="space-y-1">
+            <span class="flex items-center text-xs font-medium" :class="[mutedTextClass]">
+              <FilterIcon class="mr-1 h-3.5 w-3.5" />
+              {{ t('fileManage.statusLabel') }}
+            </span>
+            <select
+              :value="params.status"
+              class="w-full rounded-lg border px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-indigo-500"
+              :class="[fieldClass]"
+              @change="handleStatusFilterChange"
+            >
+              <option
+                v-for="option in statusFilterOptions"
+                :key="option.value"
+                :value="option.value"
+              >
+                {{ option.label }}
+              </option>
+            </select>
+          </label>
+
+          <label class="space-y-1">
+            <span class="flex items-center text-xs font-medium" :class="[mutedTextClass]">
+              <ActivityIcon class="mr-1 h-3.5 w-3.5" />
+              {{ t('fileManage.healthLabel') }}
+            </span>
+            <select
+              :value="params.health"
+              class="w-full rounded-lg border px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-indigo-500"
+              :class="[fieldClass]"
+              @change="handleHealthFilterSelect"
+            >
+              <option
+                v-for="option in healthFilterOptions"
+                :key="option.value"
+                :value="option.value"
+              >
+                {{ formatFilterOptionLabel(option) }}
+              </option>
+            </select>
+          </label>
+
+          <label class="space-y-1">
+            <span class="flex items-center text-xs font-medium" :class="[mutedTextClass]">
+              <ArchiveIcon class="mr-1 h-3.5 w-3.5" />
+              {{ t('fileManage.typeLabel') }}
+            </span>
+            <select
+              :value="params.type"
+              class="w-full rounded-lg border px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-indigo-500"
+              :class="[fieldClass]"
+              @change="handleTypeFilterChange"
+            >
+              <option v-for="option in typeFilterOptions" :key="option.value" :value="option.value">
+                {{ option.label }}
+              </option>
+            </select>
+          </label>
+
+          <label class="space-y-1">
+            <span class="flex items-center text-xs font-medium" :class="[mutedTextClass]">
+              <ClockIcon class="mr-1 h-3.5 w-3.5" />
+              {{ t('fileManage.sortBy') }}
+            </span>
+            <select
+              v-model="params.sortBy"
+              class="w-full rounded-lg border px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-indigo-500"
+              :class="[fieldClass]"
+              @change="handleSearch"
+            >
+              <option v-for="option in sortOptions" :key="option.value" :value="option.value">
+                {{ option.label }}
+              </option>
+            </select>
+          </label>
+
+          <label class="space-y-1">
+            <span class="flex items-center text-xs font-medium" :class="[mutedTextClass]">
+              <ArrowDownUpIcon class="mr-1 h-3.5 w-3.5" />
+              {{ t('fileManage.sortOrder') }}
+            </span>
+            <select
+              v-model="params.sortOrder"
+              class="w-full rounded-lg border px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-indigo-500"
+              :class="[fieldClass]"
+              @change="handleSearch"
+            >
+              <option v-for="option in sortOrderOptions" :key="option.value" :value="option.value">
+                {{ option.label }}
+              </option>
+            </select>
+          </label>
+
+          <label class="space-y-1">
+            <span class="flex items-center text-xs font-medium" :class="[mutedTextClass]">
+              <FilterIcon class="mr-1 h-3.5 w-3.5" />
+              {{ t('fileManage.viewPreset') }}
+            </span>
+            <select
+              :value="selectedViewPresetId"
+              class="w-full rounded-lg border px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-indigo-500"
+              :class="[fieldClass]"
+              :disabled="isViewPresetLoading"
+              @change="handleViewPresetChange"
+            >
+              <option value="">{{ t('fileManage.viewPresetCustom') }}</option>
+              <option v-for="preset in viewPresets" :key="preset.id" :value="preset.id">
+                {{ preset.name }}
+              </option>
+            </select>
+          </label>
+        </div>
+
+        <div class="flex flex-wrap items-center justify-end gap-2">
+          <BaseButton
+            size="sm"
+            variant="secondary"
+            :title="t('fileManage.saveViewPreset')"
+            :loading="isViewPresetSaving"
+            @click="handleSaveViewPreset"
+          >
+            <template #icon>
+              <CheckIcon class="mr-2 h-4 w-4" />
+            </template>
+            {{ t('fileManage.saveViewPreset') }}
+          </BaseButton>
+          <BaseButton
+            size="sm"
+            variant="outline"
+            :title="t('fileManage.updateViewPreset')"
+            :disabled="!canModifySelectedViewPreset"
+            :loading="isViewPresetSaving"
+            @click="updateSelectedViewPreset"
+          >
+            <template #icon>
+              <PencilIcon class="mr-2 h-4 w-4" />
+            </template>
+            {{ t('fileManage.updateViewPreset') }}
+          </BaseButton>
+          <BaseButton
+            size="sm"
+            variant="danger"
+            :title="t('fileManage.deleteViewPreset')"
+            :disabled="!canModifySelectedViewPreset"
+            :loading="isViewPresetDeleting"
+            @click="deleteSelectedViewPreset"
+          >
+            <template #icon>
+              <TrashIcon class="mr-2 h-4 w-4" />
+            </template>
+            {{ t('fileManage.deleteViewPreset') }}
+          </BaseButton>
+        </div>
+      </div>
+    </section>
+
+    <section
+      v-if="tableData.length > 0"
+      class="mb-4 flex flex-col gap-3 rounded-lg border px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+      :class="[panelClass]"
+    >
+      <label class="inline-flex items-center gap-2 text-sm" :class="[primaryTextClass]">
+        <input
+          type="checkbox"
+          class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+          :checked="isAllCurrentPageSelected"
+          :disabled="isBatchActionRunning"
+          :indeterminate="isCurrentPagePartiallySelected"
+          @change="toggleCurrentPageSelection"
+        />
+        <span>
+          {{
+            hasSelectedFiles
+              ? t('fileManage.selectedCount', { count: selectedCount })
+              : t('fileManage.selectCurrentPage')
+          }}
+        </span>
+      </label>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <BaseButton
+          v-if="hasSelectedFiles"
+          variant="outline"
+          size="sm"
+          :disabled="isBatchActionRunning"
+          @click="clearSelection"
+        >
+          <template #icon>
+            <XIcon class="mr-2 h-4 w-4" />
+          </template>
+          {{ t('fileManage.clearSelection') }}
+        </BaseButton>
+        <BaseButton
+          v-for="option in batchPolicyActionOptions"
+          :key="option.action"
+          variant="outline"
+          size="sm"
+          :title="option.description"
+          :disabled="!hasSelectedFiles || isBatchDeleting || isBatchUpdating"
+          :loading="isBatchPolicyActionRunning"
+          @click="applySelectedPolicyAction(option.action)"
+        >
+          <template #icon>
+            <component :is="getDetailPolicyActionIcon(option.action)" class="mr-2 h-4 w-4" />
+          </template>
+          {{ option.label }}
+        </BaseButton>
+        <BaseButton
+          variant="secondary"
+          size="sm"
+          :disabled="!hasSelectedFiles || isBatchDeleting || isBatchPolicyActionRunning"
+          :loading="isBatchUpdating"
+          @click="openBatchEditModal"
+        >
+          <template #icon>
+            <ClockIcon class="mr-2 h-4 w-4" />
+          </template>
+          {{ t('fileManage.batchEdit') }}
+        </BaseButton>
+        <BaseButton
+          variant="danger"
+          size="sm"
+          :disabled="!hasSelectedFiles || isBatchUpdating || isBatchPolicyActionRunning"
+          :loading="isBatchDeleting"
+          @click="deleteSelectedFiles"
+        >
+          <template #icon>
+            <TrashIcon class="mr-2 h-4 w-4" />
+          </template>
+          {{ t('fileManage.batchDelete') }}
+        </BaseButton>
+      </div>
+    </section>
+
+    <DataTable :title="t('fileManage.allFiles')" :headers="fileTableHeaders">
+      <template #body>
+        <tr v-if="isLoading">
+          <td :colspan="fileTableHeaders.length" class="px-6 py-12 text-center">
+            <div class="inline-flex items-center text-sm" :class="[mutedTextClass]">
+              <RefreshCwIcon class="mr-2 h-4 w-4 animate-spin" />
+              {{ t('common.loading') }}
             </div>
           </td>
         </tr>
+
+        <tr v-else-if="hasLoadError">
+          <td :colspan="fileTableHeaders.length" class="px-6 py-12 text-center">
+            <div class="mx-auto max-w-sm">
+              <p class="font-medium" :class="[primaryTextClass]">
+                {{ t('fileManage.loadError') }}
+              </p>
+              <BaseButton class="mt-4" variant="secondary" @click="refreshFiles">
+                <template #icon>
+                  <RefreshCwIcon class="mr-2 h-4 w-4" />
+                </template>
+                {{ t('fileManage.refresh') }}
+              </BaseButton>
+            </div>
+          </td>
+        </tr>
+
+        <tr v-else-if="tableData.length === 0">
+          <td :colspan="fileTableHeaders.length" class="px-6 py-12 text-center">
+            <div class="mx-auto max-w-sm">
+              <p class="font-medium" :class="[primaryTextClass]">
+                {{ hasActiveFilters ? t('fileManage.noMatches') : t('common.noData') }}
+              </p>
+              <BaseButton
+                v-if="hasActiveFilters"
+                class="mt-4"
+                variant="secondary"
+                @click="handleResetFilters"
+              >
+                <template #icon>
+                  <XIcon class="mr-2 h-4 w-4" />
+                </template>
+                {{ t('fileManage.resetFilters') }}
+              </BaseButton>
+            </div>
+          </td>
+        </tr>
+
+        <template v-else>
+          <tr
+            v-for="file in tableData"
+            :key="file.id"
+            class="transition-colors duration-200"
+            :class="[
+              selectedFileIds.has(file.id)
+                ? isDarkMode
+                  ? 'bg-indigo-950/30'
+                  : 'bg-indigo-50/70'
+                : '',
+              isDarkMode ? 'hover:bg-gray-700/70' : 'hover:bg-gray-50'
+            ]"
+          >
+            <td class="px-6 py-4 whitespace-nowrap">
+              <input
+                type="checkbox"
+                class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                :checked="selectedFileIds.has(file.id)"
+                :disabled="isBatchActionRunning"
+                :aria-label="t('fileManage.selectFile', { name: file.displayName })"
+                @change="toggleFileSelection(file.id)"
+              />
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <span class="font-medium select-all" :class="[primaryTextClass]">
+                {{ file.code }}
+              </span>
+            </td>
+            <td class="px-6 py-4">
+              <div class="flex min-w-0 items-center gap-3">
+                <div class="rounded-lg p-2" :class="[isDarkMode ? 'bg-gray-700' : 'bg-gray-100']">
+                  <FileTextIcon v-if="file.isTextFile" class="h-4 w-4" :class="[mutedTextClass]" />
+                  <FileIcon v-else class="h-4 w-4" :class="[mutedTextClass]" />
+                </div>
+                <div class="min-w-0">
+                  <p class="truncate text-sm font-medium" :class="[primaryTextClass]">
+                    {{ file.displayName }}
+                  </p>
+                  <p class="mt-0.5 truncate text-xs" :class="[mutedTextClass]">
+                    {{ file.suffix || t('fileManage.textType') }}
+                  </p>
+                  <div class="mt-2 flex max-w-sm flex-wrap items-center gap-1.5">
+                    <span
+                      class="inline-flex max-w-full items-center rounded-full px-2 py-0.5 text-xs font-medium"
+                      :class="getInsightBadgeClass(file.statusInsightSeverity)"
+                      :title="file.displayHealthAction"
+                    >
+                      {{ file.displayHealthState }}
+                    </span>
+                    <span
+                      class="max-w-[16rem] truncate text-xs"
+                      :class="[mutedTextClass]"
+                      :title="file.displayHealthAction"
+                    >
+                      {{ file.displayHealthAction }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <span
+                class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium"
+                :class="getTypeBadgeClass(file)"
+              >
+                {{ getTypeLabel(file) }}
+              </span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <span
+                class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium"
+                :class="[isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-800']"
+              >
+                {{ file.displaySize }}
+              </span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <div class="text-sm" :class="[primaryTextClass]">{{ file.displayUsage }}</div>
+              <div class="mt-0.5 text-xs" :class="[mutedTextClass]">
+                {{
+                  file.remainingDownloadsValue === null
+                    ? t('fileManage.unlimited')
+                    : t('fileManage.remaining', { count: file.remainingDownloadsValue })
+                }}
+              </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <span class="text-sm" :class="[primaryTextClass]">
+                {{ file.displayExpiredAt }}
+              </span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <span
+                class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium"
+                :class="getStatusBadgeClass(file)"
+              >
+                {{ file.isExpiredFile ? t('fileManage.expired') : t('fileManage.active') }}
+              </span>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+              <div class="flex items-center justify-end gap-2">
+                <button
+                  type="button"
+                  :title="t('fileManage.detail')"
+                  class="inline-flex items-center rounded-md px-3 py-1.5 transition-colors duration-200"
+                  :class="[
+                    isDarkMode
+                      ? 'bg-indigo-900/20 text-indigo-300 hover:bg-indigo-900/30'
+                      : 'bg-indigo-50 text-indigo-700 hover:bg-indigo-100'
+                  ]"
+                  @click="openFileDetail(file)"
+                >
+                  <FileTextIcon class="mr-1.5 h-4 w-4" />
+                  {{ t('fileManage.detail') }}
+                </button>
+                <button
+                  v-if="file.canPreviewText"
+                  type="button"
+                  :title="t('fileManage.viewText')"
+                  class="inline-flex items-center rounded-md px-3 py-1.5 transition-colors duration-200"
+                  :class="[
+                    isDarkMode
+                      ? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  ]"
+                  @click="openTextPreview(file)"
+                >
+                  <EyeIcon class="mr-1.5 h-4 w-4" />
+                  {{ t('fileManage.viewText') }}
+                </button>
+                <button
+                  type="button"
+                  :title="
+                    file.isTextFile ? t('fileManage.exportText') : t('fileManage.downloadFile')
+                  "
+                  :disabled="Boolean(downloadingFileId)"
+                  class="inline-flex items-center rounded-md px-3 py-1.5 transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-60"
+                  :class="[
+                    isDarkMode
+                      ? 'bg-emerald-900/20 text-emerald-300 hover:bg-emerald-900/30'
+                      : 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100'
+                  ]"
+                  @click="downloadFile(file)"
+                >
+                  <RefreshCwIcon
+                    v-if="downloadingFileId === file.id"
+                    class="mr-1.5 h-4 w-4 animate-spin"
+                  />
+                  <DownloadIcon v-else class="mr-1.5 h-4 w-4" />
+                  {{ file.isTextFile ? t('fileManage.exportText') : t('fileManage.downloadFile') }}
+                </button>
+                <button
+                  type="button"
+                  class="inline-flex items-center rounded-md px-3 py-1.5 transition-colors duration-200"
+                  :class="[
+                    isDarkMode
+                      ? 'bg-blue-900/20 text-blue-300 hover:bg-blue-900/30'
+                      : 'bg-blue-50 text-blue-600 hover:bg-blue-100'
+                  ]"
+                  @click="openEditModal(file)"
+                >
+                  <PencilIcon class="mr-1.5 h-4 w-4" />
+                  {{ t('common.edit') }}
+                </button>
+                <button
+                  type="button"
+                  class="inline-flex items-center rounded-md px-3 py-1.5 transition-colors duration-200"
+                  :class="[
+                    isDarkMode
+                      ? 'bg-red-900/20 text-red-300 hover:bg-red-900/30'
+                      : 'bg-red-50 text-red-600 hover:bg-red-100'
+                  ]"
+                  @click="deleteFile(file.id)"
+                >
+                  <TrashIcon class="mr-1.5 h-4 w-4" />
+                  {{ t('common.delete') }}
+                </button>
+              </div>
+            </td>
+          </tr>
+        </template>
       </template>
       <template #footer>
         <DataPagination
+          v-if="params.total > 0"
           :current-page="params.page"
           :page-size="params.size"
           :total="params.total"
@@ -128,247 +560,1190 @@
       </template>
     </DataTable>
 
-    <!-- 添加编辑模态框 -->
-    <div v-if="showEditModal" class="fixed inset-0 z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-      <!-- 背景遮罩 - 添加高斯模糊和渐变效果 -->
-      <div
-        class="fixed inset-0 bg-gradient-to-br from-gray-900/90 to-black/90 backdrop-blur-sm transition-opacity duration-300"
-        @click="closeEditModal"></div>
+    <BaseModal :show="showFileDetailModal" size="xl" @close="closeFileDetail">
+      <template #header>
+        <div class="flex min-w-0 items-center space-x-3">
+          <div class="rounded-lg p-2" :class="[isDarkMode ? 'bg-indigo-500/10' : 'bg-indigo-50']">
+            <FileTextIcon
+              class="h-5 w-5"
+              :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+            />
+          </div>
+          <div class="min-w-0">
+            <h3
+              class="truncate text-xl font-semibold leading-6"
+              :class="[isDarkMode ? 'text-white' : 'text-gray-900']"
+            >
+              {{ t('fileManage.detailTitle') }}
+            </h3>
+            <p v-if="selectedFileDetail" class="mt-1 truncate text-sm" :class="[mutedTextClass]">
+              {{ selectedFileDetail.displayName }}
+            </p>
+          </div>
+        </div>
+      </template>
+
+      <div v-if="selectedFileDetail" class="space-y-5">
+        <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div class="flex min-w-0 items-start gap-3">
+            <div
+              class="rounded-lg p-3"
+              :class="[isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-700']"
+            >
+              <FileTextIcon v-if="selectedFileDetail.isTextFile" class="h-5 w-5" />
+              <FileIcon v-else class="h-5 w-5" />
+            </div>
+            <div class="min-w-0">
+              <h4 class="break-words text-lg font-semibold" :class="[primaryTextClass]">
+                {{ selectedFileDetail.displayName }}
+              </h4>
+              <div class="mt-2 flex flex-wrap items-center gap-2">
+                <span
+                  class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium"
+                  :class="getTypeBadgeClass(selectedFileDetail)"
+                >
+                  {{ getTypeLabel(selectedFileDetail) }}
+                </span>
+                <span
+                  class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium"
+                  :class="getStatusBadgeClass(selectedFileDetail)"
+                >
+                  {{
+                    selectedFileDetail.isExpiredFile
+                      ? t('fileManage.expired')
+                      : t('fileManage.active')
+                  }}
+                </span>
+                <span
+                  v-if="selectedFileDetail.isPermanentFile"
+                  class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium"
+                  :class="
+                    isDarkMode
+                      ? 'bg-emerald-900/30 text-emerald-300'
+                      : 'bg-emerald-100 text-emerald-700'
+                  "
+                >
+                  {{ t('fileManage.permanent') }}
+                </span>
+              </div>
+            </div>
+          </div>
 
-      <!-- 模态框容器 - 添加缩放动画效果 -->
-      <div class="fixed inset-0 z-10 overflow-y-auto">
-        <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
           <div
-            class="relative transform overflow-hidden rounded-2xl text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-xl animate-modal-scale"
-            :class="[isDarkMode ? 'bg-gray-800/95 backdrop-blur-md' : 'bg-white']">
+            v-if="isDetailLoading"
+            class="inline-flex items-center text-sm"
+            :class="[mutedTextClass]"
+          >
+            <RefreshCwIcon class="mr-2 h-4 w-4 animate-spin" />
+            {{ t('fileManage.detailLoading') }}
+          </div>
+        </div>
 
-            <!-- 模态框头部 - 添加渐变背景 -->
-            <div class="relative px-6 pt-6 pb-4"
-              :class="[isDarkMode ? 'bg-gradient-to-r from-gray-800/50 to-gray-700/50' : 'bg-gradient-to-r from-gray-50 to-white']">
-              <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-3">
-                  <div class="p-2 rounded-lg" :class="[isDarkMode ? 'bg-indigo-500/10' : 'bg-indigo-50']">
-                    <PencilIcon class="w-5 h-5" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                  </div>
-                  <h3 class="text-xl font-semibold leading-6" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
-                    {{ t('fileManage.editFileInfo') }}
-                  </h3>
-                </div>
-                <!-- 优化的关闭按钮 -->
-                <button @click="closeEditModal" class="rounded-lg p-2 transition-all duration-200 hover:rotate-90"
-                  :class="[isDarkMode ? 'text-gray-400 hover:text-white hover:bg-white/10' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100']">
-                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </button>
-              </div>
+        <div
+          class="rounded-lg border px-4 py-3"
+          :class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-gray-50']"
+        >
+          <div class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
+            <div class="min-w-0">
+              <p class="text-xs font-medium uppercase" :class="[mutedTextClass]">
+                {{ t('fileManage.form.code') }}
+              </p>
+              <p class="mt-1 select-all text-lg font-semibold" :class="[primaryTextClass]">
+                {{ selectedFileDetail.code }}
+              </p>
+              <p class="mt-1 truncate text-xs" :class="[mutedTextClass]">
+                {{ selectedFileDetail.displayRetrieveUrl }}
+              </p>
             </div>
-
-            <!-- 表单内容 -->
-            <div class="px-6 py-5">
-              <div class="grid gap-6">
-                <FileEditField
-                  v-model="editForm.code"
-                  :label="t('fileManage.form.code')"
-                  :placeholder="t('fileManage.form.codePlaceholder')"
-                />
-                <FileEditField
-                  v-model="editForm.prefix"
-                  :label="t('fileManage.form.filename')"
-                  :placeholder="t('fileManage.form.filenamePlaceholder')"
-                />
-                <FileEditField
-                  v-model="editForm.suffix"
-                  :label="t('fileManage.form.suffix')"
-                  :placeholder="t('fileManage.form.suffixPlaceholder')"
-                />
-                <FileEditField
-                  v-model="editForm.expired_at"
-                  type="datetime-local"
-                  :label="t('send.expiration.label')"
-                />
-                <FileEditField
-                  v-model="editForm.expired_count"
-                  type="number"
-                  :label="t('fileManage.form.downloadLimit')"
-                  :placeholder="t('fileManage.form.downloadLimitPlaceholder')"
-                />
-              </div>
-            </div>
-
-            <!-- 优化的操作按钮区域 -->
-            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t bg-gradient-to-b"
-              :class="[isDarkMode ? 'border-gray-700/50 from-gray-800/50 to-gray-800' : 'border-gray-200 from-gray-50 to-white']">
-              <button @click="closeEditModal"
-                class="inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200"
-                :class="[
-                  isDarkMode
-                    ? 'bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                ]">
-                {{ t('common.cancel') }}
-              </button>
-              <button @click="handleUpdate"
-                class="inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200 bg-gradient-to-r from-indigo-600 to-indigo-500 hover:from-indigo-500 hover:to-indigo-600 text-white shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/35">
-                <CheckIcon class="w-4 h-4 mr-2" />
-                {{ t('fileManage.saveChanges') }}
-              </button>
+            <div class="flex flex-wrap items-center gap-2">
+              <BaseButton size="sm" variant="secondary" @click="copyDetailRetrieveCode">
+                <template #icon>
+                  <CopyIcon class="mr-2 h-4 w-4" />
+                </template>
+                {{ t('fileManage.copyCode') }}
+              </BaseButton>
+              <BaseButton size="sm" variant="secondary" @click="copyDetailRetrieveLink">
+                <template #icon>
+                  <CopyIcon class="mr-2 h-4 w-4" />
+                </template>
+                {{ t('fileManage.copyLink') }}
+              </BaseButton>
             </div>
           </div>
         </div>
-      </div>
-    </div>
 
-    <!-- 文本预览模态框 -->
-    <div v-if="showTextPreview" class="fixed inset-0 z-50" aria-labelledby="text-preview-title" role="dialog" aria-modal="true">
-      <!-- 背景遮罩 -->
-      <div
-        class="fixed inset-0 bg-gradient-to-br from-gray-900/90 to-black/90 backdrop-blur-sm transition-opacity duration-300"
-        @click="closeTextPreview"></div>
+        <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+          <button
+            type="button"
+            class="flex min-h-12 items-center justify-center rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+            :class="detailActionClass"
+            @click="openDetailEditModal"
+          >
+            <PencilIcon class="mr-2 h-4 w-4" />
+            {{ t('common.edit') }}
+          </button>
+          <button
+            v-if="selectedFileDetail.canPreviewText"
+            type="button"
+            class="flex min-h-12 items-center justify-center rounded-lg border px-3 py-2 text-sm font-medium transition-colors"
+            :class="detailActionClass"
+            @click="openDetailTextPreview"
+          >
+            <EyeIcon class="mr-2 h-4 w-4" />
+            {{ t('fileManage.viewText') }}
+          </button>
+          <button
+            type="button"
+            class="flex min-h-12 items-center justify-center rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+            :class="detailActionClass"
+            :disabled="!selectedFileDetail.canDownloadFile || Boolean(downloadingFileId)"
+            @click="downloadFile(selectedFileDetail)"
+          >
+            <RefreshCwIcon
+              v-if="downloadingFileId === selectedFileDetail.id"
+              class="mr-2 h-4 w-4 animate-spin"
+            />
+            <DownloadIcon v-else class="mr-2 h-4 w-4" />
+            {{
+              selectedFileDetail.isTextFile
+                ? t('fileManage.exportText')
+                : t('fileManage.downloadFile')
+            }}
+          </button>
+        </div>
 
-      <!-- 模态框容器 -->
-      <div class="fixed inset-0 z-10 overflow-y-auto">
-        <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
-          <div
-            class="relative transform overflow-hidden rounded-2xl text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl animate-modal-scale"
-            :class="[isDarkMode ? 'bg-gray-800/95 backdrop-blur-md' : 'bg-white']">
-
-            <!-- 模态框头部 -->
-            <div class="relative px-6 pt-6 pb-4"
-              :class="[isDarkMode ? 'bg-gradient-to-r from-gray-800/50 to-gray-700/50' : 'bg-gradient-to-r from-gray-50 to-white']">
-              <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-3">
-                  <div class="p-2 rounded-lg" :class="[isDarkMode ? 'bg-indigo-500/10' : 'bg-indigo-50']">
-                    <FileTextIcon class="w-5 h-5" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-                  </div>
-                  <h3 class="text-xl font-semibold leading-6" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
-                    {{ t('fileManage.textPreview') }}
-                  </h3>
-                </div>
-                <!-- 关闭按钮 -->
-                <button @click="closeTextPreview" class="rounded-lg p-2 transition-all duration-200 hover:rotate-90"
-                  :class="[isDarkMode ? 'text-gray-400 hover:text-white hover:bg-white/10' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100']">
-                  <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </button>
-              </div>
+        <section class="space-y-3 rounded-lg border px-4 py-4" :class="[subtleSectionClass]">
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+            <div>
+              <h4 class="text-sm font-semibold" :class="[primaryTextClass]">
+                {{ t('fileManage.metadataInfo') }}
+              </h4>
+              <p class="mt-1 text-xs" :class="[mutedTextClass]">
+                {{ t('fileManage.metadataHint') }}
+              </p>
             </div>
+            <BaseButton
+              size="sm"
+              :loading="isDetailMetadataSaving"
+              :disabled="isDetailLoading"
+              @click="updateDetailMetadata"
+            >
+              <template #icon>
+                <CheckIcon class="mr-2 h-4 w-4" />
+              </template>
+              {{ t('fileManage.saveMetadata') }}
+            </BaseButton>
+          </div>
 
-            <!-- 文本内容区域 -->
-            <div class="px-6 py-4">
+          <div class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(220px,0.55fr)]">
+            <label class="space-y-1">
+              <span class="text-xs font-medium" :class="[mutedTextClass]">
+                {{ t('fileManage.metadataNote') }}
+              </span>
+              <textarea
+                v-model="detailMetadataForm.note"
+                rows="4"
+                maxlength="2000"
+                class="w-full resize-y rounded-lg border px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-indigo-500"
+                :class="[fieldClass]"
+                :placeholder="t('fileManage.metadataNotePlaceholder')"
+              ></textarea>
+            </label>
+            <label class="space-y-1">
+              <span class="text-xs font-medium" :class="[mutedTextClass]">
+                {{ t('fileManage.metadataTags') }}
+              </span>
+              <input
+                v-model="detailMetadataForm.tagsText"
+                type="text"
+                class="w-full rounded-lg border px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-indigo-500"
+                :class="[fieldClass]"
+                :placeholder="t('fileManage.metadataTagsPlaceholder')"
+              />
+              <span class="block text-xs" :class="[mutedTextClass]">
+                {{
+                  selectedFileDetail.metadataUpdatedAt
+                    ? t('fileManage.metadataUpdatedAt', {
+                        time: formatMetadataUpdatedAt(selectedFileDetail.metadataUpdatedAt)
+                      })
+                    : t('fileManage.metadataNeverUpdated')
+                }}
+              </span>
+            </label>
+          </div>
+        </section>
+
+        <section
+          class="rounded-lg border px-4 py-4"
+          :class="getInsightPanelClass(selectedFileDetail.statusInsightSeverity)"
+        >
+          <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+            <div class="min-w-0">
+              <p class="text-xs font-medium uppercase" :class="[mutedTextClass]">
+                {{ t('fileManage.statusInsight') }}
+              </p>
+              <h4 class="mt-1 text-base font-semibold" :class="[primaryTextClass]">
+                {{ getInsightStateLabel(selectedFileDetail.statusInsightState) }}
+              </h4>
+              <p class="mt-1 text-sm" :class="[mutedTextClass]">
+                {{ t('fileManage.nextAction') }}:
+                {{ getInsightActionLabel(selectedFileDetail.statusInsightNextAction) }}
+              </p>
+            </div>
+            <span
+              class="inline-flex w-fit items-center rounded-full px-2.5 py-1 text-xs font-medium"
+              :class="getInsightBadgeClass(selectedFileDetail.statusInsightSeverity)"
+            >
+              {{ getInsightSeverityLabel(selectedFileDetail.statusInsightSeverity) }}
+            </span>
+          </div>
+
+          <div v-if="detailInsightReasonLabels.length > 0" class="mt-3 flex flex-wrap gap-2">
+            <span
+              v-for="reason in detailInsightReasonLabels"
+              :key="reason"
+              class="rounded-full px-2.5 py-1 text-xs font-medium"
+              :class="isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-white text-gray-600 shadow-sm'"
+            >
+              {{ reason }}
+            </span>
+          </div>
+
+          <div class="mt-4 grid gap-2 sm:grid-cols-2 xl:grid-cols-4">
+            <button
+              v-for="action in detailPolicyActionOptions"
+              :key="action.action"
+              type="button"
+              class="flex min-h-16 items-start gap-2 rounded-lg border px-3 py-2 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+              :class="detailPolicyActionClass"
+              :disabled="isDetailPolicyActionRunning || isDetailLoading"
+              :title="action.description"
+              @click="applyDetailPolicyAction(action.action)"
+            >
+              <RefreshCwIcon
+                v-if="isDetailPolicyActionRunning"
+                class="mt-0.5 h-4 w-4 shrink-0 animate-spin"
+              />
+              <component
+                :is="getDetailPolicyActionIcon(action.action)"
+                v-else
+                class="mt-0.5 h-4 w-4 shrink-0"
+              />
+              <span class="min-w-0">
+                <span class="block text-sm font-medium">{{ action.label }}</span>
+                <span class="mt-0.5 block text-xs leading-4" :class="[mutedTextClass]">
+                  {{ action.description }}
+                </span>
+              </span>
+            </button>
+          </div>
+        </section>
+
+        <section class="space-y-3">
+          <h4 class="text-sm font-semibold" :class="[primaryTextClass]">
+            {{ t('fileManage.overview') }}
+          </h4>
+          <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+            <div
+              v-for="item in detailOverviewItems"
+              :key="item.label"
+              class="rounded-lg border px-4 py-3"
+              :class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-white']"
+            >
+              <p class="text-xs" :class="[mutedTextClass]">{{ item.label }}</p>
+              <p class="mt-1 break-words text-sm font-medium" :class="[primaryTextClass]">
+                {{ item.value }}
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section class="space-y-3">
+          <h4 class="text-sm font-semibold" :class="[primaryTextClass]">
+            {{ t('fileManage.policyInfo') }}
+          </h4>
+          <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+            <div
+              v-for="item in detailPolicyItems"
+              :key="item.label"
+              class="rounded-lg border px-4 py-3"
+              :class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-white']"
+            >
+              <p class="text-xs" :class="[mutedTextClass]">{{ item.label }}</p>
+              <p class="mt-1 break-words text-sm font-medium" :class="[primaryTextClass]">
+                {{ item.value }}
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section v-if="selectedFileDetail.detailTimeline.length > 0" class="space-y-3">
+          <h4 class="text-sm font-semibold" :class="[primaryTextClass]">
+            {{ t('fileManage.lifecycle') }}
+          </h4>
+          <div
+            class="rounded-lg border px-4 py-4"
+            :class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-white']"
+          >
+            <div
+              v-for="(item, index) in selectedFileDetail.detailTimeline"
+              :key="`${item.key}-${index}`"
+              class="grid grid-cols-[auto_minmax(0,1fr)] gap-3"
+            >
+              <div class="flex flex-col items-center">
+                <span
+                  class="mt-1 h-3 w-3 rounded-full"
+                  :class="getTimelineDotClass(item.severity)"
+                />
+                <span
+                  v-if="index < selectedFileDetail.detailTimeline.length - 1"
+                  class="my-1 w-px flex-1"
+                  :class="[isDarkMode ? 'bg-gray-600' : 'bg-gray-200']"
+                />
+              </div>
               <div
-                class="max-h-[60vh] overflow-y-auto rounded-lg p-4 custom-scrollbar"
-                :class="[isDarkMode ? 'bg-gray-700/50' : 'bg-gray-50']">
-                <pre
-                  class="whitespace-pre-wrap break-words text-sm font-mono"
-                  :class="[isDarkMode ? 'text-gray-200' : 'text-gray-700']"
-                >{{ previewText }}</pre>
-              </div>
-              <!-- 字符统计 -->
-              <div class="mt-2 text-xs" :class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']">
-                {{ t('fileManage.charCount', { count: previewText.length }) }}
-              </div>
-            </div>
-
-            <!-- 操作按钮区域 -->
-            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t"
-              :class="[isDarkMode ? 'border-gray-700/50' : 'border-gray-200']">
-              <button @click="copyText"
-                class="inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200"
+                class="mb-3 rounded-lg border px-3 py-2 last:mb-0"
                 :class="[
-                  isDarkMode
-                    ? 'bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                ]">
-                <CopyIcon class="w-4 h-4 mr-2" />
-                {{ t('fileManage.copyText') }}
-              </button>
-              <button @click="closeTextPreview"
-                class="inline-flex items-center justify-center rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200 bg-gradient-to-r from-indigo-600 to-indigo-500 hover:from-indigo-500 hover:to-indigo-600 text-white shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/35">
-                {{ t('common.close') }}
-              </button>
+                  isDarkMode ? 'border-gray-700 bg-gray-800/60' : 'border-gray-100 bg-gray-50'
+                ]"
+              >
+                <div class="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
+                  <p class="text-sm font-medium" :class="[primaryTextClass]">
+                    {{ item.displayTitle }}
+                  </p>
+                  <p class="text-xs" :class="[mutedTextClass]">
+                    {{ item.displayMeta }}
+                  </p>
+                </div>
+                <p class="mt-1 text-sm" :class="[mutedTextClass]">
+                  {{ item.displayDescription }}
+                </p>
+              </div>
             </div>
           </div>
+        </section>
+
+        <section class="space-y-3">
+          <h4 class="text-sm font-semibold" :class="[primaryTextClass]">
+            {{ t('fileManage.storageInfo') }}
+          </h4>
+          <div class="grid gap-3">
+            <div
+              v-for="item in detailStorageItems"
+              :key="item.label"
+              class="grid gap-1 rounded-lg border px-4 py-3 sm:grid-cols-[160px_minmax(0,1fr)] sm:items-center"
+              :class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-white']"
+            >
+              <p class="text-xs" :class="[mutedTextClass]">{{ item.label }}</p>
+              <p
+                class="break-all text-sm font-medium"
+                :class="[item.mono ? 'font-mono' : '', primaryTextClass]"
+              >
+                {{ item.value }}
+              </p>
+            </div>
+          </div>
+        </section>
+      </div>
+      <div
+        v-else
+        class="flex min-h-32 items-center justify-center text-sm"
+        :class="[mutedTextClass]"
+      >
+        <RefreshCwIcon class="mr-2 h-4 w-4 animate-spin" />
+        {{ t('fileManage.detailLoading') }}
+      </div>
+
+      <template #footer>
+        <BaseButton variant="secondary" @click="closeFileDetail">
+          {{ t('common.close') }}
+        </BaseButton>
+      </template>
+    </BaseModal>
+
+    <BaseModal :show="showEditModal" size="lg" @close="closeEditModal">
+      <template #header>
+        <div class="flex items-center space-x-3">
+          <div class="p-2 rounded-lg" :class="[isDarkMode ? 'bg-indigo-500/10' : 'bg-indigo-50']">
+            <PencilIcon
+              class="w-5 h-5"
+              :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+            />
+          </div>
+          <h3
+            class="text-xl font-semibold leading-6"
+            :class="[isDarkMode ? 'text-white' : 'text-gray-900']"
+          >
+            {{ t('fileManage.editFileInfo') }}
+          </h3>
+        </div>
+      </template>
+
+      <div class="grid gap-6">
+        <FileEditField
+          v-model="editForm.code"
+          :label="t('fileManage.form.code')"
+          :placeholder="t('fileManage.form.codePlaceholder')"
+        />
+        <FileEditField
+          v-model="editForm.prefix"
+          :label="t('fileManage.form.filename')"
+          :placeholder="t('fileManage.form.filenamePlaceholder')"
+        />
+        <FileEditField
+          v-model="editForm.suffix"
+          :label="t('fileManage.form.suffix')"
+          :placeholder="t('fileManage.form.suffixPlaceholder')"
+        />
+        <FileEditField
+          v-model="editForm.expired_at"
+          type="datetime-local"
+          :label="t('send.expiration.label')"
+        />
+        <FileEditField
+          v-model="editForm.expired_count"
+          type="number"
+          :label="t('fileManage.form.downloadLimit')"
+          :placeholder="t('fileManage.form.downloadLimitPlaceholder')"
+        />
+      </div>
+
+      <template #footer>
+        <BaseButton variant="secondary" :disabled="isSaving" @click="closeEditModal">
+          {{ t('common.cancel') }}
+        </BaseButton>
+        <BaseButton :loading="isSaving" @click="handleUpdate">
+          <template #icon>
+            <CheckIcon class="w-4 h-4 mr-2" />
+          </template>
+          {{ t('fileManage.saveChanges') }}
+        </BaseButton>
+      </template>
+    </BaseModal>
+
+    <BaseModal :show="showBatchEditModal" size="lg" @close="closeBatchEditModal()">
+      <template #header>
+        <div class="flex items-center space-x-3">
+          <div class="p-2 rounded-lg" :class="[isDarkMode ? 'bg-indigo-500/10' : 'bg-indigo-50']">
+            <ClockIcon
+              class="w-5 h-5"
+              :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+            />
+          </div>
+          <h3
+            class="text-xl font-semibold leading-6"
+            :class="[isDarkMode ? 'text-white' : 'text-gray-900']"
+          >
+            {{ t('fileManage.batchEditTitle') }}
+          </h3>
+        </div>
+      </template>
+
+      <div class="space-y-5">
+        <div
+          class="rounded-lg border px-4 py-3 text-sm"
+          :class="[
+            isDarkMode
+              ? 'border-indigo-500/20 bg-indigo-500/10 text-indigo-200'
+              : 'border-indigo-100 bg-indigo-50 text-indigo-700'
+          ]"
+        >
+          {{ t('fileManage.batchEditSelected', { count: selectedCount }) }}
+        </div>
+
+        <div class="space-y-3">
+          <p class="text-sm font-medium" :class="[primaryTextClass]">
+            {{ t('fileManage.batchEditMode') }}
+          </p>
+          <div class="grid gap-2 sm:grid-cols-3">
+            <button
+              v-for="option in batchEditModeOptions"
+              :key="option.value"
+              type="button"
+              class="flex min-h-12 items-center justify-center rounded-lg border px-3 py-2 text-sm font-medium transition-colors"
+              :class="getBatchEditModeClass(option.value)"
+              :disabled="isBatchUpdating"
+              @click="batchEditForm.mode = option.value"
+            >
+              <component :is="option.icon" class="mr-2 h-4 w-4" />
+              <span>{{ option.label }}</span>
+            </button>
+          </div>
+        </div>
+
+        <FileEditField
+          v-if="batchEditForm.mode === 'expiresAt'"
+          v-model="batchEditForm.expired_at"
+          type="datetime-local"
+          :label="t('fileManage.batchEditExpiresAt')"
+        />
+        <FileEditField
+          v-else-if="batchEditForm.mode === 'downloadLimit'"
+          v-model="batchEditForm.expired_count"
+          type="number"
+          :label="t('fileManage.batchEditDownloadLimit')"
+          :placeholder="t('fileManage.form.downloadLimitPlaceholder')"
+        />
+        <div
+          v-else
+          class="rounded-lg border px-4 py-3 text-sm"
+          :class="[
+            isDarkMode
+              ? 'border-gray-700 bg-gray-700/50 text-gray-300'
+              : 'border-gray-200 bg-gray-50 text-gray-600'
+          ]"
+        >
+          {{ t('fileManage.batchEditForeverHint') }}
         </div>
       </div>
-    </div>
+
+      <template #footer>
+        <BaseButton variant="secondary" :disabled="isBatchUpdating" @click="closeBatchEditModal()">
+          {{ t('common.cancel') }}
+        </BaseButton>
+        <BaseButton :loading="isBatchUpdating" @click="handleBatchUpdate">
+          <template #icon>
+            <CheckIcon class="w-4 h-4 mr-2" />
+          </template>
+          {{ t('fileManage.applyBatchEdit') }}
+        </BaseButton>
+      </template>
+    </BaseModal>
+
+    <BaseModal :show="showTextPreview" size="lg" @close="closeTextPreview">
+      <template #header>
+        <div class="flex items-center space-x-3">
+          <div class="p-2 rounded-lg" :class="[isDarkMode ? 'bg-indigo-500/10' : 'bg-indigo-50']">
+            <FileTextIcon
+              class="w-5 h-5"
+              :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+            />
+          </div>
+          <h3
+            class="text-xl font-semibold leading-6"
+            :class="[isDarkMode ? 'text-white' : 'text-gray-900']"
+          >
+            {{ previewFile?.displayName || t('fileManage.textPreview') }}
+          </h3>
+        </div>
+      </template>
+
+      <div
+        class="max-h-[60vh] overflow-y-auto rounded-lg p-4 custom-scrollbar"
+        :class="[isDarkMode ? 'bg-gray-700/50' : 'bg-gray-50']"
+      >
+        <div
+          v-if="isPreviewLoading"
+          class="flex min-h-32 items-center justify-center text-sm"
+          :class="[mutedTextClass]"
+        >
+          <RefreshCwIcon class="mr-2 h-4 w-4 animate-spin" />
+          {{ t('fileManage.loadingPreview') }}
+        </div>
+        <pre
+          v-else
+          class="whitespace-pre-wrap break-words text-sm font-mono"
+          :class="[isDarkMode ? 'text-gray-200' : 'text-gray-700']"
+          >{{ previewText }}</pre
+        >
+      </div>
+      <div class="mt-2 text-xs" :class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']">
+        {{ previewMetaText || t('fileManage.charCount', { count: previewText.length }) }}
+      </div>
+
+      <template #footer>
+        <BaseButton
+          variant="secondary"
+          :disabled="isPreviewLoading || !previewText"
+          @click="exportPreviewText"
+        >
+          <template #icon>
+            <DownloadIcon class="w-4 h-4 mr-2" />
+          </template>
+          {{ t('fileManage.exportText') }}
+        </BaseButton>
+        <BaseButton
+          variant="secondary"
+          :disabled="isPreviewLoading || !previewText"
+          @click="copyText"
+        >
+          <template #icon>
+            <CopyIcon class="w-4 h-4 mr-2" />
+          </template>
+          {{ t('fileManage.copyText') }}
+        </BaseButton>
+        <BaseButton @click="closeTextPreview">
+          {{ t('common.close') }}
+        </BaseButton>
+      </template>
+    </BaseModal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { inject, computed, onMounted } from 'vue'
+import { computed, onMounted, watch, type Component } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import type {
+  AdminBatchEditMode,
+  AdminFileHealthFilter,
+  AdminFileInsightSeverity,
+  AdminFilePolicyAction,
+  AdminFileSortBy,
+  AdminFileSortOrder,
+  AdminFileStatusFilter,
+  AdminFileTypeFilter,
+  AdminFileViewItem
+} from '@/types'
 import {
+  ActivityIcon,
+  ArchiveIcon,
+  ArrowDownUpIcon,
+  CheckIcon,
+  ClockIcon,
+  CopyIcon,
+  DownloadIcon,
+  EyeIcon,
   FileIcon,
+  FileTextIcon,
+  FilterIcon,
+  HardDriveIcon,
+  InfinityIcon,
+  PencilIcon,
+  RefreshCwIcon,
+  RotateCcwIcon,
   SearchIcon,
   TrashIcon,
-  PencilIcon,
-  CheckIcon,
-  EyeIcon,
-  CopyIcon,
-  FileTextIcon,
+  XIcon
 } from 'lucide-vue-next'
 import DataTable from '@/components/common/DataTable.vue'
 import DataPagination from '@/components/common/DataPagination.vue'
 import FileEditField from '@/components/common/FileEditField.vue'
-import { useAdminFiles } from '@/composables'
+import BaseModal from '@/components/common/BaseModal.vue'
+import BaseButton from '@/components/common/BaseButton.vue'
+import { useAdminFiles, useInjectedDarkMode } from '@/composables'
+import { formatTimestamp } from '@/utils/common'
 
 const { t } = useI18n()
-const isDarkMode = inject('isDarkMode')
-// 修改文件表头
+const isDarkMode = useInjectedDarkMode()
+const route = useRoute()
+const router = useRouter()
+
 const fileTableHeaders = computed(() => [
+  t('fileManage.headers.select'),
   t('fileManage.headers.code'),
   t('fileManage.headers.name'),
+  t('fileManage.headers.type'),
   t('fileManage.headers.size'),
-  t('fileManage.headers.description'),
+  t('fileManage.headers.usage'),
   t('fileManage.headers.expiration'),
+  t('fileManage.headers.status'),
   t('fileManage.headers.actions')
 ])
 
 const {
   tableData,
+  hasActiveFilters,
+  hasLoadError,
+  isLoading,
+  isAllCurrentPageSelected,
+  isBatchActionRunning,
+  isBatchDeleting,
+  isBatchPolicyActionRunning,
+  isBatchUpdating,
+  isCurrentPagePartiallySelected,
+  isDetailLoading,
+  isDetailMetadataSaving,
+  isDetailPolicyActionRunning,
+  isPreviewLoading,
+  isSaving,
+  isViewPresetDeleting,
+  isViewPresetLoading,
+  isViewPresetSaving,
+  batchEditForm,
+  batchPolicyActionOptions,
+  detailPolicyActionOptions,
+  detailMetadataForm,
+  downloadingFileId,
+  healthFilterOptions,
+  hasSelectedFiles,
   params,
+  previewFile,
+  previewMetaText,
+  selectedFileDetail,
+  selectedCount,
+  selectedFileIds,
+  selectedViewPresetId,
+  storageUsedText,
+  summary,
+  showBatchEditModal,
   showEditModal,
+  showFileDetailModal,
   editForm,
   showTextPreview,
   previewText,
+  viewPresets,
+  applyViewPreset,
+  closeBatchEditModal,
   closeEditModal,
+  closeFileDetail,
   closeTextPreview,
+  copyDetailRetrieveCode,
+  copyDetailRetrieveLink,
   copyText,
+  clearSelection,
   deleteFile,
+  deleteSelectedFiles,
+  deleteSelectedViewPreset,
+  downloadFile,
+  exportPreviewText,
   handlePageChange,
   handleSearch,
+  applyDetailPolicyAction,
+  applySelectedPolicyAction,
+  handleBatchUpdate,
   handleUpdate,
+  loadViewPresets,
   loadFiles,
+  openBatchEditModal,
   openEditModal,
-  openTextPreview
+  openFileDetail,
+  openTextPreview,
+  refreshFiles,
+  resetFilters,
+  saveCurrentViewPreset,
+  setHealthFilter,
+  setStatusFilter,
+  setTypeFilter,
+  updateSelectedViewPreset,
+  updateDetailMetadata,
+  toggleCurrentPageSelection,
+  toggleFileSelection
 } = useAdminFiles()
 
+const primaryTextClass = computed(() => (isDarkMode.value ? 'text-white' : 'text-gray-900'))
+const mutedTextClass = computed(() => (isDarkMode.value ? 'text-gray-400' : 'text-gray-500'))
+const panelClass = computed(() =>
+  isDarkMode.value ? 'border-gray-700 bg-gray-800/80' : 'border-gray-100 bg-white'
+)
+const fieldClass = computed(() =>
+  isDarkMode.value
+    ? 'border-gray-600 bg-gray-700 text-white'
+    : 'border-gray-300 bg-white text-gray-900'
+)
+const detailActionClass = computed(() =>
+  isDarkMode.value
+    ? 'border-gray-700 bg-gray-700/50 text-gray-300 hover:border-gray-600 hover:bg-gray-700'
+    : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50'
+)
+const detailPolicyActionClass = computed(() =>
+  isDarkMode.value
+    ? 'border-gray-700 bg-gray-800/70 text-gray-200 hover:border-blue-500/40 hover:bg-blue-500/10'
+    : 'border-gray-200 bg-white text-gray-700 hover:border-blue-200 hover:bg-blue-50'
+)
+const subtleSectionClass = computed(() =>
+  isDarkMode.value ? 'border-gray-700 bg-gray-900/30' : 'border-gray-200 bg-gray-50'
+)
+
+type DetailInfoItem = {
+  label: string
+  value: string
+  mono?: boolean
+}
+
+const emptyDetailValue = '-'
+const getBooleanLabel = (value: boolean) => t(value ? 'fileManage.yes' : 'fileManage.no')
+const formatDetailValue = (value: string | number | null | undefined) => {
+  if (value === null || value === undefined || value === '') return emptyDetailValue
+  return String(value)
+}
+const formatMetadataUpdatedAt = (value: string) => formatTimestamp(value)
+
+const detailOverviewItems = computed<DetailInfoItem[]>(() => {
+  const file = selectedFileDetail.value
+  if (!file) return []
+
+  return [
+    { label: t('fileManage.form.code'), value: file.code, mono: true },
+    { label: t('fileManage.createdAt'), value: file.displayCreatedAt },
+    { label: t('fileManage.headers.size'), value: file.displaySize },
+    { label: t('fileManage.headers.usage'), value: file.displayUsage },
+    {
+      label: t('fileManage.remainingDownloads'),
+      value:
+        file.remainingDownloadsValue === null
+          ? t('fileManage.unlimited')
+          : t('fileManage.remaining', { count: file.remainingDownloadsValue })
+    },
+    {
+      label: t('fileManage.textLength'),
+      value: file.isTextFile
+        ? t('fileManage.charCount', { count: file.textLengthValue })
+        : emptyDetailValue
+    }
+  ]
+})
+
+const detailPolicyItems = computed<DetailInfoItem[]>(() => {
+  const file = selectedFileDetail.value
+  if (!file) return []
+
+  return [
+    { label: t('fileManage.permanent'), value: getBooleanLabel(file.isPermanentFile) },
+    {
+      label: t('fileManage.hasDownloadLimit'),
+      value: getBooleanLabel(file.hasDownloadLimitFile)
+    },
+    {
+      label: t('fileManage.hasExpirationTime'),
+      value: getBooleanLabel(file.hasExpirationTimeFile)
+    },
+    { label: t('fileManage.headers.expiration'), value: file.displayExpiredAt },
+    {
+      label: t('fileManage.canPreviewText'),
+      value: getBooleanLabel(file.canPreviewText)
+    },
+    {
+      label: t('fileManage.canDownload'),
+      value: getBooleanLabel(file.canDownloadFile)
+    }
+  ]
+})
+
+const detailStorageItems = computed<DetailInfoItem[]>(() => {
+  const file = selectedFileDetail.value
+  if (!file) return []
+
+  return [
+    {
+      label: t('fileManage.storageBackend'),
+      value: formatDetailValue(file.storageBackendValue)
+    },
+    {
+      label: t('fileManage.fileHash'),
+      value: formatDetailValue(file.fileHashValue),
+      mono: true
+    },
+    {
+      label: t('fileManage.isChunked'),
+      value: getBooleanLabel(file.isChunkedStorage)
+    },
+    {
+      label: t('fileManage.filePath'),
+      value: formatDetailValue(file.filePathValue),
+      mono: true
+    },
+    {
+      label: t('fileManage.uuidFileName'),
+      value: formatDetailValue(file.uuidFileNameValue),
+      mono: true
+    },
+    {
+      label: t('fileManage.uploadId'),
+      value: formatDetailValue(file.uploadIdValue),
+      mono: true
+    }
+  ]
+})
+
+const detailInsightReasonLabels = computed(() => {
+  const file = selectedFileDetail.value
+  if (!file) return []
+
+  return file.statusInsightReasons.map((reason) => t(`fileManage.insightReasons.${reason}`))
+})
+
+const canModifySelectedViewPreset = computed(() => {
+  const preset = viewPresets.value.find((item) => item.id === selectedViewPresetId.value)
+  return Boolean(preset && !preset.isBuiltIn)
+})
+
+const openDetailEditModal = () => {
+  if (!selectedFileDetail.value) return
+
+  const file = selectedFileDetail.value
+  closeFileDetail()
+  openEditModal(file)
+}
+
+const openDetailTextPreview = () => {
+  if (!selectedFileDetail.value) return
+
+  const file = selectedFileDetail.value
+  closeFileDetail()
+  void openTextPreview(file)
+}
+
+const summaryCards = computed(() => [
+  {
+    label: t('fileManage.totalFiles'),
+    value: summary.value.totalFiles,
+    icon: ArchiveIcon,
+    iconClass: isDarkMode.value
+      ? 'bg-indigo-900/30 text-indigo-300'
+      : 'bg-indigo-50 text-indigo-600'
+  },
+  {
+    label: t('fileManage.activeFiles'),
+    value: summary.value.activeCount,
+    icon: ActivityIcon,
+    iconClass: isDarkMode.value ? 'bg-green-900/30 text-green-300' : 'bg-green-50 text-green-600'
+  },
+  {
+    label: t('fileManage.expiredFiles'),
+    value: summary.value.expiredCount,
+    icon: ClockIcon,
+    iconClass: isDarkMode.value ? 'bg-red-900/30 text-red-300' : 'bg-red-50 text-red-600'
+  },
+  {
+    label: t('fileManage.storageUsed'),
+    value: storageUsedText.value,
+    icon: HardDriveIcon,
+    iconClass: isDarkMode.value
+      ? 'bg-purple-900/30 text-purple-300'
+      : 'bg-purple-50 text-purple-600'
+  }
+])
+
+const statusFilterOptions = computed<{ value: AdminFileStatusFilter; label: string }[]>(() => [
+  { value: 'all', label: t('fileManage.all') },
+  { value: 'active', label: t('fileManage.active') },
+  { value: 'expired', label: t('fileManage.expired') }
+])
+
+const typeFilterOptions = computed<{ value: AdminFileTypeFilter; label: string }[]>(() => [
+  { value: 'all', label: t('fileManage.all') },
+  { value: 'file', label: t('fileManage.fileType') },
+  { value: 'text', label: t('fileManage.textType') },
+  { value: 'chunked', label: t('fileManage.chunkedType') }
+])
+
+const sortOptions = computed<{ value: AdminFileSortBy; label: string }[]>(() => [
+  { value: 'created_at', label: t('fileManage.sort.createdAt') },
+  { value: 'expired_at', label: t('fileManage.sort.expiredAt') },
+  { value: 'name', label: t('fileManage.sort.name') },
+  { value: 'size', label: t('fileManage.sort.size') },
+  { value: 'used_count', label: t('fileManage.sort.usedCount') },
+  { value: 'code', label: t('fileManage.sort.code') }
+])
+
+const sortOrderOptions = computed<{ value: AdminFileSortOrder; label: string }[]>(() => [
+  { value: 'desc', label: t('fileManage.sort.desc') },
+  { value: 'asc', label: t('fileManage.sort.asc') }
+])
+
+const healthFilterValues: AdminFileHealthFilter[] = [
+  'all',
+  'attention',
+  'danger',
+  'warning',
+  'healthy',
+  'expired',
+  'expiring_soon',
+  'storage_issue',
+  'never_retrieved',
+  'permanent'
+]
+
+const getRouteHealthFilter = (): AdminFileHealthFilter => {
+  const health = route.query.health
+  if (typeof health === 'string' && healthFilterValues.includes(health as AdminFileHealthFilter)) {
+    return health as AdminFileHealthFilter
+  }
+  return 'all'
+}
+
+const syncHealthFilterQuery = async (health: AdminFileHealthFilter) => {
+  const query = { ...route.query }
+  if (health === 'all') {
+    delete query.health
+  } else {
+    query.health = health
+  }
+  await router.replace({ query })
+}
+
+const handleHealthFilterChange = async (health: AdminFileHealthFilter) => {
+  await setHealthFilter(health)
+  await syncHealthFilterQuery(health)
+}
+
+const handleStatusFilterChange = async (event: Event) => {
+  const target = event.target as HTMLSelectElement
+  await setStatusFilter(target.value as AdminFileStatusFilter)
+}
+
+const handleTypeFilterChange = async (event: Event) => {
+  const target = event.target as HTMLSelectElement
+  await setTypeFilter(target.value as AdminFileTypeFilter)
+}
+
+const handleHealthFilterSelect = async (event: Event) => {
+  const target = event.target as HTMLSelectElement
+  await handleHealthFilterChange(target.value as AdminFileHealthFilter)
+}
+
+const handleResetFilters = async () => {
+  await resetFilters()
+  await syncHealthFilterQuery('all')
+}
+
+const handleViewPresetChange = async (event: Event) => {
+  const target = event.target as HTMLSelectElement
+  if (!target.value) {
+    selectedViewPresetId.value = ''
+    return
+  }
+
+  await applyViewPreset(target.value)
+  await syncHealthFilterQuery(params.value.health || 'all')
+}
+
+const handleSaveViewPreset = async () => {
+  const name = window.prompt(t('fileManage.viewPresetNamePrompt'))
+  if (!name) return
+
+  await saveCurrentViewPreset(name)
+}
+
+const batchEditModeOptions = computed<
+  { value: AdminBatchEditMode; label: string; icon: Component }[]
+>(() => [
+  {
+    value: 'expiresAt',
+    label: t('fileManage.batchEditExpiresAt'),
+    icon: ClockIcon
+  },
+  {
+    value: 'downloadLimit',
+    label: t('fileManage.batchEditDownloadLimit'),
+    icon: DownloadIcon
+  },
+  {
+    value: 'forever',
+    label: t('fileManage.batchEditForever'),
+    icon: CheckIcon
+  }
+])
+
+const detailPolicyActionIconMap: Record<AdminFilePolicyAction, Component> = {
+  extend_24h: ClockIcon,
+  extend_7d: ClockIcon,
+  make_permanent: InfinityIcon,
+  reset_download_limit: RotateCcwIcon
+}
+
+const getDetailPolicyActionIcon = (action: AdminFilePolicyAction) =>
+  detailPolicyActionIconMap[action]
+
+const formatFilterOptionLabel = (option: { label: string; count?: number }) => {
+  if (typeof option.count !== 'number') return option.label
+  return `${option.label} (${option.count})`
+}
+
+const getBatchEditModeClass = (value: AdminBatchEditMode) => {
+  if (batchEditForm.value.mode === value) {
+    return isDarkMode.value
+      ? 'border-indigo-500 bg-indigo-500/20 text-indigo-200'
+      : 'border-indigo-500 bg-indigo-50 text-indigo-700'
+  }
+
+  return isDarkMode.value
+    ? 'border-gray-700 bg-gray-700/50 text-gray-300 hover:border-gray-600 hover:bg-gray-700'
+    : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50'
+}
+
+const getTypeLabel = (file: AdminFileViewItem) => {
+  if (file.isChunkedFile) return t('fileManage.chunkedType')
+  return file.isTextFile ? t('fileManage.textType') : t('fileManage.fileType')
+}
+
+const getTypeBadgeClass = (file: AdminFileViewItem) => {
+  if (file.isChunkedFile) {
+    return isDarkMode.value ? 'bg-blue-900/30 text-blue-300' : 'bg-blue-100 text-blue-700'
+  }
+  if (file.isTextFile) {
+    return isDarkMode.value ? 'bg-purple-900/30 text-purple-300' : 'bg-purple-100 text-purple-700'
+  }
+  return isDarkMode.value ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-700'
+}
+
+const getStatusBadgeClass = (file: AdminFileViewItem) => {
+  if (file.isExpiredFile) {
+    return isDarkMode.value ? 'bg-red-900/30 text-red-300' : 'bg-red-100 text-red-700'
+  }
+  return isDarkMode.value ? 'bg-green-900/30 text-green-300' : 'bg-green-100 text-green-700'
+}
+
+const getInsightSeverityLabel = (severity: AdminFileInsightSeverity) =>
+  t(`fileManage.insightSeverity.${severity}`)
+
+const getInsightStateLabel = (state: string) => t(`fileManage.insightStates.${state}`)
+
+const getInsightActionLabel = (action: string) => t(`fileManage.insightActions.${action}`)
+
+const getInsightPanelClass = (severity: AdminFileInsightSeverity) => {
+  const darkClasses: Record<AdminFileInsightSeverity, string> = {
+    success: 'border-emerald-500/20 bg-emerald-500/10',
+    warning: 'border-amber-500/20 bg-amber-500/10',
+    danger: 'border-red-500/20 bg-red-500/10',
+    info: 'border-blue-500/20 bg-blue-500/10',
+    neutral: 'border-gray-700 bg-gray-700/30'
+  }
+  const lightClasses: Record<AdminFileInsightSeverity, string> = {
+    success: 'border-emerald-100 bg-emerald-50',
+    warning: 'border-amber-100 bg-amber-50',
+    danger: 'border-red-100 bg-red-50',
+    info: 'border-blue-100 bg-blue-50',
+    neutral: 'border-gray-200 bg-gray-50'
+  }
+
+  return isDarkMode.value ? darkClasses[severity] : lightClasses[severity]
+}
+
+const getInsightBadgeClass = (severity: AdminFileInsightSeverity) => {
+  const darkClasses: Record<AdminFileInsightSeverity, string> = {
+    success: 'bg-emerald-900/40 text-emerald-200',
+    warning: 'bg-amber-900/40 text-amber-200',
+    danger: 'bg-red-900/40 text-red-200',
+    info: 'bg-blue-900/40 text-blue-200',
+    neutral: 'bg-gray-700 text-gray-300'
+  }
+  const lightClasses: Record<AdminFileInsightSeverity, string> = {
+    success: 'bg-emerald-100 text-emerald-700',
+    warning: 'bg-amber-100 text-amber-700',
+    danger: 'bg-red-100 text-red-700',
+    info: 'bg-blue-100 text-blue-700',
+    neutral: 'bg-gray-100 text-gray-700'
+  }
+
+  return isDarkMode.value ? darkClasses[severity] : lightClasses[severity]
+}
+
+const getTimelineDotClass = (severity: AdminFileInsightSeverity) => {
+  const classes: Record<AdminFileInsightSeverity, string> = {
+    success: 'bg-emerald-500',
+    warning: 'bg-amber-500',
+    danger: 'bg-red-500',
+    info: 'bg-blue-500',
+    neutral: isDarkMode.value ? 'bg-gray-500' : 'bg-gray-300'
+  }
+
+  return classes[severity]
+}
+
+watch(
+  () => route.query.health,
+  async () => {
+    const health = getRouteHealthFilter()
+    if (params.value.health === health) return
+    await setHealthFilter(health)
+  }
+)
+
 onMounted(() => {
+  params.value.health = getRouteHealthFilter()
+  void loadViewPresets()
   void loadFiles()
 })
 </script>
-
-<style>
-.animate-modal-scale {
-  animation: modal-scale 0.3s ease-out;
-}
-
-@keyframes modal-scale {
-  from {
-    transform: scale(0.95);
-    opacity: 0;
-  }
-
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* 添加输入框聚焦时的微妙缩放效果 */
-input:focus {
-  transform: scale(1.002);
-}
-</style>
diff --git a/src/views/manage/SystemSettingsView.vue b/src/views/manage/SystemSettingsView.vue
index e2b7153..2b64fd7 100644
--- a/src/views/manage/SystemSettingsView.vue
+++ b/src/views/manage/SystemSettingsView.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { inject, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { RefreshCwIcon, SaveIcon } from 'lucide-vue-next'
+import BaseButton from '@/components/common/BaseButton.vue'
 import SettingNumberInput from '@/components/common/SettingNumberInput.vue'
 import SettingSwitch from '@/components/common/SettingSwitch.vue'
 import { useSystemConfig } from '@/composables'
@@ -9,6 +11,9 @@ const isDarkMode = inject('isDarkMode')
 const { t } = useI18n()
 const {
   config,
+  isRefreshing,
+  isSaving,
+  isDirty,
   fileSize,
   sizeUnit,
   saveTime,
@@ -24,12 +29,62 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 h-screen overflow-y-auto custom-scrollbar">
-    <h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
-      {{ t('admin.settings.title') }}
-    </h2>
+  <div class="p-6">
+    <div
+      class="sticky top-0 z-20 -mx-6 -mt-6 mb-6 border-b px-6 py-4 backdrop-blur"
+      :class="[isDarkMode ? 'border-gray-700 bg-gray-900/85' : 'border-gray-200 bg-gray-50/90']"
+    >
+      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <h2 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+            {{ t('admin.settings.title') }}
+          </h2>
+          <p
+            class="mt-1 text-sm"
+            :class="[isDirty ? 'text-amber-500' : isDarkMode ? 'text-gray-400' : 'text-gray-500']"
+          >
+            {{
+              isDirty ? t('manage.settings.unsavedChanges') : t('manage.settings.allChangesSaved')
+            }}
+          </p>
+        </div>
 
-    <div class="space-y-6 rounded-lg shadow-md p-6" :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
+        <div class="flex flex-wrap items-center gap-3">
+          <BaseButton
+            variant="secondary"
+            :loading="isRefreshing"
+            :disabled="isSaving || isDirty"
+            :title="
+              isDirty ? t('manage.settings.refreshBlocked') : t('manage.settings.refreshConfig')
+            "
+            @click="refreshConfig"
+          >
+            <template #icon>
+              <RefreshCwIcon class="mr-2 h-4 w-4" />
+            </template>
+            {{
+              isRefreshing ? t('manage.settings.refreshing') : t('manage.settings.refreshConfig')
+            }}
+          </BaseButton>
+
+          <BaseButton
+            :loading="isSaving"
+            :disabled="!isDirty || isRefreshing"
+            @click="submitConfig"
+          >
+            <template #icon>
+              <SaveIcon class="mr-2 h-4 w-4" />
+            </template>
+            {{ isSaving ? t('manage.settings.saving') : t('manage.settings.saveChanges') }}
+          </BaseButton>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="space-y-6 rounded-lg shadow-md p-6"
+      :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
+    >
       <!-- 基本设置 -->
       <section class="space-y-4">
         <h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
@@ -39,158 +94,226 @@ onMounted(() => {
         <!-- 网基本信息 -->
         <div class="grid grid-cols-1 gap-6">
           <div class="space-y-2">
-            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
               {{ t('admin.settings.siteName') }}
             </label>
-            <input type="text" v-model="config.name"
+            <input
+              type="text"
+              v-model="config.name"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]" />
+              ]"
+            />
           </div>
 
           <div class="space-y-2">
-            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
               {{ t('admin.settings.websiteDescription') }}
             </label>
-            <input type="text" v-model="config.description"
+            <input
+              type="text"
+              v-model="config.description"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]" />
+              ]"
+            />
           </div>
 
           <div class="space-y-2">
-            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
               {{ t('admin.settings.adminPassword') }}
             </label>
             <div class="relative">
-              <input type="password" minlength="6" v-model="config.admin_token" :placeholder="t('admin.settings.passwordPlaceholder')"
+              <input
+                type="password"
+                minlength="6"
+                v-model="config.admin_token"
+                :placeholder="t('admin.settings.passwordPlaceholder')"
                 class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                 :class="[
                   isDarkMode
                     ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                     : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                ]" />
-              <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-gray-400"
-                :class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']">
+                ]"
+              />
+              <div
+                class="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-gray-400"
+                :class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']"
+              >
                 <span class="text-xs">{{ t('admin.settings.passwordNote') }}</span>
               </div>
             </div>
           </div>
 
           <div class="space-y-2">
-            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
               {{ t('admin.settings.keywords') }}
             </label>
-            <input type="text" v-model="config.keywords"
+            <input
+              type="text"
+              v-model="config.keywords"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]" />
+              ]"
+            />
           </div>
 
           <!-- 主题选择 -->
           <div class="space-y-2">
-            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
               {{ t('manage.settings.themeSelection') }}
             </label>
-            <select v-model="config.themesSelect"
+            <select
+              v-model="config.themesSelect"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border appearance-none bg-no-repeat bg-right focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none cursor-pointer"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400'
-              ]" style="
+              ]"
+              style="
                 background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M7%208l3%203%203-3%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
-              ">
+              "
+            >
               <option v-for="item in config.themesChoices" :value="item.key" :key="item.key">
                 {{ item.name }} (by {{ item.author }} V{{ item.version }})
               </option>
             </select>
           </div>
           <div class="space-y-2">
-            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
               {{ t('manage.settings.robotsFile') }}
             </label>
-            <textarea v-model="config.robotsText" rows="3"
+            <textarea
+              v-model="config.robotsText"
+              rows="3"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border resize-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]"></textarea>
+              ]"
+            ></textarea>
           </div>
         </div>
 
         <!-- 通知设置 -->
         <div class="grid grid-cols-1 gap-6 mt-8">
           <div class="space-y-2">
-            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
               {{ t('manage.settings.notificationTitle') }}
             </label>
-            <input type="text" v-model="config.notify_title"
+            <input
+              type="text"
+              v-model="config.notify_title"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]" />
+              ]"
+            />
           </div>
 
           <div class="space-y-2">
-            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
               {{ t('manage.settings.notificationContent') }}
             </label>
-            <textarea v-model="config.notify_content" rows="3"
+            <textarea
+              v-model="config.notify_content"
+              rows="3"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border resize-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]"></textarea>
+              ]"
+            ></textarea>
           </div>
         </div>
 
         <!-- 存储设置 -->
         <div class="space-y-4">
-          <h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+          <h3
+            class="text-lg font-medium mb-4"
+            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+          >
             {{ t('manage.settings.storageSettings') }}
           </h3>
           <!-- 通知设置 -->
           <div class="space-y-2">
-            <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+            <label
+              class="block text-sm font-medium"
+              :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+            >
               {{ t('manage.settings.storagePath') }}
             </label>
-            <input type="text" :placeholder="t('manage.settings.storagePathPlaceholder')" v-model="config.storage_path"
+            <input
+              type="text"
+              :placeholder="t('manage.settings.storagePathPlaceholder')"
+              v-model="config.storage_path"
               class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
               :class="[
                 isDarkMode
                   ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                   : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-              ]" />
+              ]"
+            />
           </div>
 
           <div class="space-y-4">
             <div class="space-y-2">
-              <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+              <label
+                class="block text-sm font-medium"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
                 {{ t('manage.settings.storageMethod') }}
               </label>
-              <select v-model="config.file_storage"
+              <select
+                v-model="config.file_storage"
                 class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border appearance-none bg-no-repeat bg-right focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none cursor-pointer"
                 :class="[
                   isDarkMode
                     ? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
                     : 'border-gray-300 hover:border-gray-400'
-                ]" style="
+                ]"
+                style="
                   background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M7%208l3%203%203-3%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
-                ">
+                "
+              >
                 <option value="local">{{ t('manage.settings.localStorage') }}</option>
                 <option value="s3">{{ t('manage.settings.s3Storage') }}</option>
                 <option value="webdav">{{ t('manage.settings.webdavStorage') }}</option>
@@ -207,42 +330,63 @@ onMounted(() => {
             <div v-if="config.file_storage === 'webdav'" class="space-y-4">
               <!-- 通知设置 -->
               <div class="space-y-2">
-                <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                <label
+                  class="block text-sm font-medium"
+                  :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                >
                   Webdav URL
                 </label>
-                <input type="text" :placeholder="t('manage.settings.webdavUrlPlaceholder')" v-model="config.webdav_url"
+                <input
+                  type="text"
+                  :placeholder="t('manage.settings.webdavUrlPlaceholder')"
+                  v-model="config.webdav_url"
                   class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                  ]" />
+                  ]"
+                />
               </div>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div class="space-y-2">
-                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                  <label
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
                     Webdav Username
                   </label>
-                  <input type="text" :placeholder="t('manage.settings.webdavUsernamePlaceholder')" v-model="config.webdav_username"
+                  <input
+                    type="text"
+                    :placeholder="t('manage.settings.webdavUsernamePlaceholder')"
+                    v-model="config.webdav_username"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]" />
+                    ]"
+                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                  <label
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
                     Webdav Password
                   </label>
-                  <input type="password" :placeholder="t('manage.settings.webdavPasswordPlaceholder')" v-model="config.webdav_password"
+                  <input
+                    type="password"
+                    :placeholder="t('manage.settings.webdavPasswordPlaceholder')"
+                    v-model="config.webdav_password"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]" />
+                    ]"
+                  />
                 </div>
               </div>
             </div>
@@ -250,97 +394,139 @@ onMounted(() => {
             <div v-if="config.file_storage === 's3'" class="space-y-4">
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div class="space-y-2">
-                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                  <label
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
                     {{ t('manage.settings.s3AccessKeyId') }}
                   </label>
-                  <input type="text" v-model="config.s3_access_key_id"
+                  <input
+                    type="text"
+                    v-model="config.s3_access_key_id"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]" />
+                    ]"
+                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                  <label
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
                     {{ t('manage.settings.s3SecretAccessKey') }}
                   </label>
-                  <input type="password" v-model="config.s3_secret_access_key"
+                  <input
+                    type="password"
+                    v-model="config.s3_secret_access_key"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]" />
+                    ]"
+                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                  <label
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
                     {{ t('manage.settings.s3BucketName') }}
                   </label>
-                  <input type="text" v-model="config.s3_bucket_name"
+                  <input
+                    type="text"
+                    v-model="config.s3_bucket_name"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]" />
+                    ]"
+                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                  <label
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
                     {{ t('manage.settings.s3EndpointUrl') }}
                   </label>
-                  <input type="text" v-model="config.s3_endpoint_url"
+                  <input
+                    type="text"
+                    v-model="config.s3_endpoint_url"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]" />
+                    ]"
+                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                  <label
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
                     {{ t('manage.settings.s3RegionName') }}
                   </label>
-                  <input type="text" v-model="config.s3_region_name" :placeholder="t('manage.settings.autoPlaceholder')"
+                  <input
+                    type="text"
+                    v-model="config.s3_region_name"
+                    :placeholder="t('manage.settings.autoPlaceholder')"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]" />
+                    ]"
+                  />
                 </div>
 
                 <div class="space-y-2">
-                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                  <label
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
                     {{ t('manage.settings.s3SignatureVersion') }}
                   </label>
-                  <select v-model="config.s3_signature_version"
+                  <select
+                    v-model="config.s3_signature_version"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400'
-                    ]">
+                    ]"
+                  >
                     <option value="s3v2">{{ t('manage.settings.s3v2') }}</option>
                     <option value="s3v4">{{ t('manage.settings.s3v4') }}</option>
                   </select>
                 </div>
 
                 <div class="space-y-2">
-                  <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+                  <label
+                    class="block text-sm font-medium"
+                    :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+                  >
                     {{ t('manage.settings.s3Hostname') }}
                   </label>
-                  <input type="text" v-model="config.s3_hostname"
+                  <input
+                    type="text"
+                    v-model="config.s3_hostname"
                     class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                     :class="[
                       isDarkMode
                         ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                         : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                    ]" />
+                    ]"
+                  />
                 </div>
 
                 <SettingSwitch
@@ -365,7 +551,10 @@ onMounted(() => {
 
         <!-- 上传限制 -->
         <div class="mt-8">
-          <h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+          <h3
+            class="text-lg font-medium mb-4"
+            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+          >
             {{ t('manage.settings.uploadLimits') }}
           </h3>
 
@@ -383,48 +572,70 @@ onMounted(() => {
             />
 
             <div class="space-y-2">
-              <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+              <label
+                class="block text-sm font-medium"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
                 {{ t('manage.settings.fileSizeLimit') }}
               </label>
               <div class="flex items-center space-x-2">
-                <input type="number" v-model="fileSize"
+                <input
+                  type="number"
+                  v-model="fileSize"
                   class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                  ]" />
-                <select v-model="sizeUnit"
+                  ]"
+                />
+                <select
+                  v-model="sizeUnit"
                   class="rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400'
-                  ]">
+                  ]"
+                >
                   <option value="KB">{{ t('manage.settings.fileSizeUnits.kb') }}</option>
-              <option value="MB">{{ t('manage.settings.fileSizeUnits.mb') }}</option>
-              <option value="GB">{{ t('manage.settings.fileSizeUnits.gb') }}</option>
+                  <option value="MB">{{ t('manage.settings.fileSizeUnits.mb') }}</option>
+                  <option value="GB">{{ t('manage.settings.fileSizeUnits.gb') }}</option>
                 </select>
               </div>
             </div>
 
             <div class="space-y-2">
-              <label class="block text-sm font-medium mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+              <label
+                class="block text-sm font-medium mb-2"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
                 {{ t('manage.settings.expirationType') }}
               </label>
               <div class="flex flex-wrap gap-3">
-                <label v-for="style in ['day', 'hour', 'minute', 'forever', 'count']" :key="style"
-                  class="relative inline-flex items-center group cursor-pointer">
-                  <input type="checkbox" :value="style" v-model="config.expireStyle" class="peer sr-only" />
-                  <div class="px-4 py-2 rounded-full border-2 transition-all duration-200 select-none" :class="[
-                    config.expireStyle.includes(style)
-                      ? isDarkMode
-                        ? 'bg-indigo-600 border-indigo-600 text-white'
-                        : 'bg-indigo-600 border-indigo-600 text-white'
-                      : isDarkMode
-                        ? 'bg-gray-700 border-gray-600 text-gray-300 hover:border-indigo-500'
-                        : 'bg-white border-gray-300 text-gray-700 hover:border-indigo-500'
-                  ]">
+                <label
+                  v-for="style in ['day', 'hour', 'minute', 'forever', 'count']"
+                  :key="style"
+                  class="relative inline-flex items-center group cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    :value="style"
+                    v-model="config.expireStyle"
+                    class="peer sr-only"
+                  />
+                  <div
+                    class="px-4 py-2 rounded-full border-2 transition-all duration-200 select-none"
+                    :class="[
+                      config.expireStyle.includes(style)
+                        ? isDarkMode
+                          ? 'bg-indigo-600 border-indigo-600 text-white'
+                          : 'bg-indigo-600 border-indigo-600 text-white'
+                        : isDarkMode
+                          ? 'bg-gray-700 border-gray-600 text-gray-300 hover:border-indigo-500'
+                          : 'bg-white border-gray-300 text-gray-700 hover:border-indigo-500'
+                    ]"
+                  >
                     {{ t(`manage.settings.expiration.${style}`) }}
                   </div>
                 </label>
@@ -432,24 +643,32 @@ onMounted(() => {
             </div>
 
             <div class="space-y-2">
-              <label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
+              <label
+                class="block text-sm font-medium"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
+              >
                 {{ t('manage.settings.maxSaveTime') }}
               </label>
               <div class="flex items-center space-x-2">
-                <input type="number" v-model="saveTime"
+                <input
+                  type="number"
+                  v-model="saveTime"
                   class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
-                  ]" />
-                <select v-model="saveTimeUnit"
+                  ]"
+                />
+                <select
+                  v-model="saveTimeUnit"
                   class="rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                   :class="[
                     isDarkMode
                       ? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
                       : 'border-gray-300 hover:border-gray-400'
-                  ]">
+                  ]"
+                >
                   <option value="秒">{{ t('common.second') }}</option>
                   <option value="分">{{ t('common.minute') }}</option>
                   <option value="时">{{ t('common.hour') }}</option>
@@ -470,7 +689,10 @@ onMounted(() => {
 
         <!-- 错误限制 -->
         <div class="mt-8">
-          <h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+          <h3
+            class="text-lg font-medium mb-4"
+            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+          >
             {{ t('manage.settings.errorLimits') }}
           </h3>
 
@@ -488,14 +710,6 @@ onMounted(() => {
             />
           </div>
         </div>
-
-        <!-- 保存按钮 -->
-        <div class="flex justify-end mt-8">
-          <button @click="submitConfig"
-            class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
-            {{ t('manage.settings.saveChanges') }}
-          </button>
-        </div>
       </section>
     </div>
   </div>