fix(ui): tighten orphans table layout, truncate keys, clearer actions

Made-with: Cursor

app/pages/me/media/orphans.vue

@@ -209,8 +209,8 @@ async function executeDelete() {
         <USelect v-model="pageSize" :items="pageSizeItems" value-key="value" />
       </UFormField>
       <UButton
-        color="error"
-        variant="soft"
+        :color="batchCount > 0 ? 'error' : 'neutral'"
+        variant="outline"
         :disabled="batchCount === 0"
         @click="openConfirm([...selectedIds])"
       >
@@ -223,38 +223,38 @@ async function executeDelete() {
     </div>
     <UEmpty v-else-if="!items.length" title="暂无记录" description="当前筛选下没有孤儿图片" />
     <div v-else class="overflow-x-auto rounded-lg border border-default">
-      <table class="w-full text-sm">
+      <table class="w-full min-w-[720px] table-fixed text-sm">
         <thead>
           <tr class="text-left text-muted border-b border-default bg-elevated/40">
-            <th class="p-3 w-10">
+            <th class="p-3 w-10 align-middle">
               <UCheckbox
                 v-if="deletableOnPage.length"
                 :model-value="allDeletableOnPageSelected"
                 @update:model-value="toggleSelectAllOnPage(!!$event)"
               />
             </th>
-            <th class="p-3 w-24">
+            <th class="p-3 w-20 align-middle">
               预览
             </th>
-            <th class="p-3 min-w-[8rem]">
-              storageKey
+            <th class="p-3 align-middle w-[32%]">
+              文件
             </th>
-            <th class="p-3 whitespace-nowrap">
+            <th class="p-3 whitespace-nowrap w-16 align-middle">
               大小
             </th>
-            <th class="p-3 whitespace-nowrap">
+            <th class="p-3 whitespace-nowrap w-36 align-middle">
               创建
             </th>
-            <th class="p-3 whitespace-nowrap hidden lg:table-cell">
+            <th class="p-3 whitespace-nowrap hidden lg:table-cell w-36 align-middle">
               首次引用
             </th>
-            <th class="p-3 whitespace-nowrap hidden lg:table-cell">
+            <th class="p-3 whitespace-nowrap hidden lg:table-cell w-36 align-middle">
               解除引用
             </th>
-            <th class="p-3">
+            <th class="p-3 w-24 align-middle whitespace-nowrap">
               状态
             </th>
-            <th class="p-3 text-right w-28">
+            <th class="p-3 text-right w-24 align-middle whitespace-nowrap">
               操作
             </th>
           </tr>
@@ -273,12 +273,17 @@ async function executeDelete() {
               <img
                 :src="row.publicUrl"
                 :alt="row.storageKey"
-                class="h-14 w-14 object-cover rounded border border-default"
+                class="h-14 w-14 shrink-0 object-cover rounded border border-default"
                 loading="lazy"
               >
             </td>
-            <td class="p-3 align-middle font-mono text-xs break-all max-w-[14rem]">
-              {{ row.storageKey }}
+            <td class="p-3 align-middle max-w-0">
+              <div
+                class="truncate font-mono text-xs text-default"
+                :title="row.storageKey"
+              >
+                {{ row.storageKey }}
+              </div>
             </td>
             <td class="p-3 align-middle tabular-nums whitespace-nowrap">
               {{ formatBytes(row.sizeBytes) }}
@@ -293,12 +298,26 @@ async function executeDelete() {
               {{ formatDt(row.dereferencedAt) }}
             </td>
             <td class="p-3 align-middle">
-              <UBadge v-if="row.state === 'deletable'" color="error" variant="subtle">
-                可删除
-              </UBadge>
-              <UBadge v-else color="warning" variant="subtle">
-                宽限期
-              </UBadge>
+              <div class="flex items-center justify-start">
+                <UBadge
+                  v-if="row.state === 'deletable'"
+                  color="error"
+                  variant="subtle"
+                  size="sm"
+                  class="whitespace-nowrap"
+                >
+                  可删除
+                </UBadge>
+                <UBadge
+                  v-else
+                  color="warning"
+                  variant="subtle"
+                  size="sm"
+                  class="whitespace-nowrap"
+                >
+                  宽限期
+                </UBadge>
+              </div>
             </td>
             <td class="p-3 align-middle text-right">
               <UButton
@@ -306,11 +325,18 @@ async function executeDelete() {
                 size="xs"
                 color="error"
                 variant="soft"
+                class="whitespace-nowrap"
                 @click="openConfirm([row.id])"
               >
                 删除
               </UButton>
-              <span v-else class="text-muted text-xs">—</span>
+              <span
+                v-else
+                class="inline-block text-left text-xs text-muted leading-snug max-w-[5.5rem]"
+                title="宽限期未满，不可删除。可在「可删除」筛选中查看已到期项。"
+              >
+                宽限中
+              </span>
             </td>
           </tr>
         </tbody>