✨ 优化管理页交互与历史同步

2026-06-05 16:03:54 +08:00
parent 90321a5ca4
commit 2cde31f822
6 changed files with 131 additions and 76 deletions
@@ -10,12 +10,6 @@
        </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"
@@ -262,6 +256,14 @@
    </section>

    <DataTable :title="t('fileManage.allFiles')" :headers="fileTableHeaders">
+      <template #actions>
+        <BaseButton variant="secondary" :loading="isLoading" @click="refreshFileList">
+          <template #icon>
+            <RefreshCwIcon class="mr-2 h-4 w-4" />
+          </template>
+          {{ t('fileManage.refresh') }}
+        </BaseButton>
+      </template>
      <template #toolbar>
        <div
          v-if="tableData.length > 0"
@@ -306,7 +308,7 @@
              :title="option.description"
              :disabled="option.disabled || !hasSelectedFiles || isBatchDeleting || isBatchUpdating"
              :loading="isBatchPolicyActionRunning"
-              @click="applySelectedPolicyAction(option.action)"
+              @click="applySelectedPolicyActionAndRefreshHistory(option.action)"
            >
              <template #icon>
                <component :is="getDetailPolicyActionIcon(option.action)" class="mr-2 h-4 w-4" />
@@ -330,7 +332,7 @@
              size="sm"
              :disabled="!hasSelectedFiles || isBatchUpdating || isBatchPolicyActionRunning"
              :loading="isBatchDeleting"
-              @click="deleteSelectedFiles"
+              @click="deleteSelectedFilesAndRefreshHistory"
            >
              <template #icon>
                <TrashIcon class="mr-2 h-4 w-4" />
@@ -357,7 +359,7 @@
              <p class="font-medium" :class="[primaryTextClass]">
                {{ t('fileManage.loadError') }}
              </p>
-              <BaseButton class="mt-4" variant="secondary" @click="refreshFiles">
+              <BaseButton class="mt-4" variant="secondary" @click="refreshFileList">
                <template #icon>
                  <RefreshCwIcon class="mr-2 h-4 w-4" />
                </template>
@@ -437,6 +439,12 @@
                    >
                      {{ file.displayHealthState }}
                    </span>
+                    <span
+                      class="inline-flex max-w-full items-center rounded-full px-2 py-0.5 text-xs font-medium"
+                      :class="getInsightActionBadgeClass(file.statusInsightNextAction)"
+                    >
+                      {{ file.displayHealthAction }}
+                    </span>
                  </div>
                </div>
              </div>
@@ -553,7 +561,7 @@
                      ? 'bg-[#dc2626] text-white shadow-[#7f1d1d]/35 hover:bg-[#b91c1c]'
                      : 'bg-[#dc2626] text-white shadow-[#f87171]/35 hover:bg-[#b91c1c]'
                  ]"
-                  @click="deleteFile(file.id)"
+                  @click="deleteFileAndRefreshHistory(file.id)"
                >
                  <TrashIcon class="mr-1.5 h-4 w-4" />
                  {{ t('common.delete') }}
@@ -942,12 +950,20 @@
                {{ getInsightStateLabel(selectedFileDetail.statusInsightState) }}
              </h4>
            </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 class="flex flex-wrap items-center gap-2">
+              <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>
+              <span
+                class="inline-flex w-fit items-center rounded-full px-2.5 py-1 text-xs font-medium"
+                :class="getInsightActionBadgeClass(selectedFileDetail.statusInsightNextAction)"
+              >
+                {{ selectedFileDetail.displayHealthAction }}
+              </span>
+            </div>
          </div>

          <div v-if="detailInsightReasonLabels.length > 0" class="mt-3 flex flex-wrap gap-2">
@@ -966,11 +982,11 @@
              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"
+              class="theme-2026-card-hover flex min-h-16 items-start gap-2 rounded-[30px] border px-3 py-2 text-left shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:translate-y-0 disabled:hover:shadow-md"
+              :class="[detailPolicyActionClass, cardHoverClass]"
              :disabled="isDetailPolicyActionRunning || isDetailLoading || action.disabled"
              :title="action.description"
-              @click="applyDetailPolicyAction(action.action)"
+              @click="applyDetailPolicyActionAndRefreshHistory(action.action)"
            >
              <RefreshCwIcon
                v-if="isDetailPolicyActionRunning"
@@ -1185,7 +1201,7 @@
        <BaseButton variant="secondary" :disabled="isSaving" @click="closeEditModal">
          {{ t('common.cancel') }}
        </BaseButton>
-        <BaseButton :loading="isSaving" @click="handleUpdate">
+        <BaseButton :loading="isSaving" @click="handleUpdateAndRefreshHistory">
          <template #icon>
            <CheckIcon class="w-4 h-4 mr-2" />
          </template>
@@ -1330,7 +1346,7 @@
        <BaseButton variant="secondary" :disabled="isBatchUpdating" @click="closeBatchEditModal()">
          {{ t('common.cancel') }}
        </BaseButton>
-        <BaseButton :loading="isBatchUpdating" @click="handleBatchUpdate">
+        <BaseButton :loading="isBatchUpdating" @click="handleBatchUpdateAndRefreshHistory">
          <template #icon>
            <CheckIcon class="w-4 h-4 mr-2" />
          </template>
@@ -1525,25 +1541,25 @@ const {
  copyDetailRetrieveLink,
  copyText,
  clearSelection,
-  deleteFile,
-  deleteSelectedFiles,
+  deleteFile: deleteFileRaw,
+  deleteSelectedFiles: deleteSelectedFilesRaw,
  deleteSelectedViewPreset,
  downloadFile,
  exportPreviewText,
  handlePageChange,
  handlePageSizeChange,
  handleSearch,
-  applyDetailPolicyAction,
-  applySelectedPolicyAction,
-  handleBatchUpdate,
-  handleUpdate,
+  applyDetailPolicyAction: applyDetailPolicyActionRaw,
+  applySelectedPolicyAction: applySelectedPolicyActionRaw,
+  handleBatchUpdate: handleBatchUpdateRaw,
+  handleUpdate: handleUpdateRaw,
  loadViewPresets,
  loadFiles,
  openBatchEditModal,
  openEditModal,
  openFileDetail,
  openTextPreview,
-  refreshFiles,
+  refreshFiles: refreshFileList,
  resetFilters,
  saveCurrentViewPreset,
  setHealthFilter,
@@ -1575,6 +1591,21 @@ const loadHistoryFiles = async () => {
    isHistoryLoading.value = false
  }
 }
+const runFileMutationAndRefreshHistory = async (operation: () => Promise<void>) => {
+  await operation()
+  await loadHistoryFiles()
+}
+const handleUpdateAndRefreshHistory = () => runFileMutationAndRefreshHistory(handleUpdateRaw)
+const handleBatchUpdateAndRefreshHistory = () =>
+  runFileMutationAndRefreshHistory(handleBatchUpdateRaw)
+const deleteFileAndRefreshHistory = (id: number) =>
+  runFileMutationAndRefreshHistory(() => deleteFileRaw(id))
+const deleteSelectedFilesAndRefreshHistory = () =>
+  runFileMutationAndRefreshHistory(deleteSelectedFilesRaw)
+const applySelectedPolicyActionAndRefreshHistory = (action: AdminFilePolicyAction) =>
+  runFileMutationAndRefreshHistory(() => applySelectedPolicyActionRaw(action))
+const applyDetailPolicyActionAndRefreshHistory = (action: AdminFilePolicyAction) =>
+  runFileMutationAndRefreshHistory(() => applyDetailPolicyActionRaw(action))
 const handleHistoryPageSizeChange = (size: number) => {
  historyPageSize.value = size
  historyPage.value = 1
@@ -1992,6 +2023,16 @@ const getInsightBadgeClass = (severity: AdminFileInsightSeverity) => {
  return isDarkMode.value ? darkClasses[severity] : lightClasses[severity]
 }

+const getInsightActionBadgeClass = (action: string) => {
+  if (action === 'extend_or_delete' || action === 'extend_expiration') {
+    return isDarkMode.value ? 'bg-amber-900/40 text-amber-200' : 'bg-amber-100 text-amber-700'
+  }
+  if (action === 'inspect_storage') {
+    return isDarkMode.value ? 'bg-red-900/40 text-red-200' : 'bg-red-100 text-red-700'
+  }
+  return isDarkMode.value ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-700'
+}
+
 const getTimelineDotClass = (severity: AdminFileInsightSeverity) => {
  const classes: Record<AdminFileInsightSeverity, string> = {
    success: 'bg-emerald-500',