op history table

src/components/browser-data/HistoryCleanupList.vue

@@ -37,14 +37,6 @@ const allSelected = computed(
     ),
 );
 
-function statusLabel(status: CleanupFileStatus) {
-  return status === "found" ? "存在" : "缺失";
-}
-
-function statusClass(status: CleanupFileStatus) {
-  return status === "found" ? "found" : "missing";
-}
-
 function isSelected(profileId: string) {
   return props.selectedProfileIds.includes(profileId);
 }
@@ -62,6 +54,18 @@ function isSelectable(profile: ProfileSummary) {
 function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
   return statuses.some((status) => status === "found");
 }
+
+function cleanupItems(profile: ProfileSummary) {
+  const items = [
+    { key: "history", label: "历史记录", status: profile.historyCleanup.history },
+    { key: "top-sites", label: "热门站点", status: profile.historyCleanup.topSites },
+    { key: "visited-links", label: "访问链接", status: profile.historyCleanup.visitedLinks },
+    { key: "shortcuts", label: "快捷方式", status: profile.historyCleanup.shortcuts },
+    { key: "sessions", label: "会话", status: profile.historyCleanup.sessions },
+  ];
+
+  return items.filter((item) => item.status === "found");
+}
 </script>
 
 <template>
@@ -97,11 +101,7 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
         <div class="header-cell checkbox-cell">选择</div>
         <div class="header-cell icon-cell">头像</div>
         <div class="header-cell">资料</div>
-        <div class="header-cell">历史记录</div>
-        <div class="header-cell">热门站点</div>
-        <div class="header-cell">访问链接</div>
-        <div class="header-cell">快捷方式</div>
-        <div class="header-cell">会话</div>
+        <div class="header-cell">可清理项</div>
         <div class="header-cell actions-cell">操作</div>
       </div>
       <div class="data-table-body styled-scrollbar">
@@ -134,30 +134,17 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
             <strong>{{ profile.name }}</strong>
             <span class="subtle-line">{{ profile.id }}</span>
           </div>
-          <div class="row-cell">
-            <span class="status-pill" :class="statusClass(profile.historyCleanup.history)">
-              {{ statusLabel(profile.historyCleanup.history) }}
+          <div class="row-cell cleanup-summary-cell">
+            <div v-if="cleanupItems(profile).length" class="cleanup-tag-list">
+              <span
+                v-for="item in cleanupItems(profile)"
+                :key="item.key"
+                class="cleanup-tag"
+              >
+                {{ item.label }}
               </span>
             </div>
-          <div class="row-cell">
-            <span class="status-pill" :class="statusClass(profile.historyCleanup.topSites)">
-              {{ statusLabel(profile.historyCleanup.topSites) }}
-            </span>
-          </div>
-          <div class="row-cell">
-            <span class="status-pill" :class="statusClass(profile.historyCleanup.visitedLinks)">
-              {{ statusLabel(profile.historyCleanup.visitedLinks) }}
-            </span>
-          </div>
-          <div class="row-cell">
-            <span class="status-pill" :class="statusClass(profile.historyCleanup.shortcuts)">
-              {{ statusLabel(profile.historyCleanup.shortcuts) }}
-            </span>
-          </div>
-          <div class="row-cell">
-            <span class="status-pill" :class="statusClass(profile.historyCleanup.sessions)">
-              {{ statusLabel(profile.historyCleanup.sessions) }}
-            </span>
+            <span v-else class="cleanup-empty">没有可清理项</span>
           </div>
           <div class="row-cell actions-cell">
             <button
@@ -299,7 +286,7 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
 
 .history-grid {
   display: grid;
-  grid-template-columns: 52px 56px minmax(170px, 1fr) 108px 108px 118px 108px 108px 108px;
+  grid-template-columns: 52px 56px minmax(200px, 0.95fr) minmax(260px, 1.4fr) 108px;
   gap: 12px;
   align-items: center;
 }
@@ -377,6 +364,12 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
   line-height: 1.3;
 }
 
+.cleanup-summary-cell {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+}
+
 .subtle-line {
   display: block;
   margin-top: 3px;
@@ -384,25 +377,39 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
   font-size: 0.8rem;
 }
 
-.status-pill {
+.cleanup-tag-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.cleanup-tag {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  min-width: 78px;
-  padding: 6px 10px;
+  gap: 6px;
+  padding: 5px 9px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
   border-radius: 999px;
-  font-size: 0.79rem;
-  font-weight: 700;
+  background: rgba(248, 250, 252, 0.88);
+  color: #475569;
+  font-size: 0.77rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
 }
 
-.status-pill.found {
-  background: rgba(37, 99, 235, 0.12);
-  color: #1d4ed8;
+.cleanup-tag::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #60a5fa;
+  opacity: 0.85;
 }
 
-.status-pill.missing {
-  background: rgba(226, 232, 240, 0.7);
-  color: var(--badge-text);
+.cleanup-empty {
+  color: var(--muted);
+  font-size: 0.85rem;
 }
 
 .actions-cell {
@@ -416,7 +423,7 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
 
 @media (max-width: 900px) {
   .history-grid {
-    grid-template-columns: 52px 56px minmax(160px, 1fr) 100px 100px 110px 100px 100px 100px;
+    grid-template-columns: 52px 56px minmax(160px, 0.9fr) minmax(220px, 1.2fr) 100px;
   }
 }
 
@@ -427,15 +434,16 @@ function hasAnyHistoryFile(statuses: CleanupFileStatus[]) {
   }
 
   .history-grid {
-    grid-template-columns: 52px 56px minmax(0, 1fr) 108px;
+    grid-template-columns: 52px minmax(0, 1fr) 108px;
   }
 
-  .history-grid > :nth-child(5),
-  .history-grid > :nth-child(6),
-  .history-grid > :nth-child(7),
-  .history-grid > :nth-child(8),
-  .history-grid > :nth-child(9) {
+  .history-grid > :nth-child(2) {
     display: none;
   }
+
+  .cleanup-summary-cell {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
 }
 </style>