julian/chrom-tool
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

op history table

Browse Source
This commit is contained in:
Julian Freeman
2026-04-18 11:41:03 -04:00
parent 68bdf51909
commit f7611f2e65
1 changed files with 65 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/browser-data/HistoryCleanupList.vue
View File

@@ -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) }}
</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>
<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>
<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>