feat(workbench): separate stale progress items
This commit is contained in:
@@ -553,6 +553,7 @@
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(78px, 0.44fr) minmax(138px, 0.86fr) minmax(300px, 1.46fr) minmax(92px, auto);
|
||||
align-items: center;
|
||||
@@ -563,6 +564,41 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.progress-row.has-long-duration-divider {
|
||||
margin-top: 13px;
|
||||
padding-top: 13px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.progress-row.has-long-duration-divider::before {
|
||||
content: "10日以上";
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 18px;
|
||||
padding-right: 8px;
|
||||
background: var(--workbench-surface);
|
||||
color: var(--workbench-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-row.has-long-duration-divider::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--workbench-line-soft);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress-time,
|
||||
.progress-identity,
|
||||
.progress-result {
|
||||
|
||||
@@ -203,6 +203,7 @@
|
||||
:key="item.id"
|
||||
type="button"
|
||||
class="progress-row"
|
||||
:class="{ 'has-long-duration-divider': item.hasLongDurationDivider }"
|
||||
@click="openWorkbenchTarget(item)"
|
||||
>
|
||||
<span class="progress-time">
|
||||
@@ -464,12 +465,21 @@ const visibleProgressItems = computed(() => {
|
||||
const rows = Array.isArray(props.workbenchSummary.progressItems)
|
||||
? props.workbenchSummary.progressItems
|
||||
: []
|
||||
return rows.slice(0, 5).map((item) => ({
|
||||
const progressRows = rows.slice(0, 5).map((item) => ({
|
||||
...item,
|
||||
displayTime: formatProgressTime(item?.updatedAt)
|
||||
displayTime: formatProgressTime(item?.updatedAt),
|
||||
isLongDuration: isLongDurationProgress(item?.updatedAt)
|
||||
}))
|
||||
|
||||
return progressRows.map((item, index) => ({
|
||||
...item,
|
||||
hasLongDurationDivider: item.isLongDuration && !progressRows[index - 1]?.isLongDuration
|
||||
}))
|
||||
})
|
||||
|
||||
const LONG_DURATION_DAYS = 10
|
||||
const DAY_MS = 24 * 60 * 60 * 1000
|
||||
|
||||
function formatProgressTime(value) {
|
||||
const text = String(value || '').trim()
|
||||
if (!text) {
|
||||
@@ -484,6 +494,34 @@ function formatProgressTime(value) {
|
||||
return text
|
||||
}
|
||||
|
||||
function parseProgressDate(value) {
|
||||
const text = String(value || '').trim()
|
||||
if (!text) {
|
||||
return null
|
||||
}
|
||||
|
||||
const localDateMatch = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text)
|
||||
if (localDateMatch) {
|
||||
return new Date(
|
||||
Number(localDateMatch[1]),
|
||||
Number(localDateMatch[2]) - 1,
|
||||
Number(localDateMatch[3])
|
||||
)
|
||||
}
|
||||
|
||||
const date = new Date(text)
|
||||
return Number.isNaN(date.getTime()) ? null : date
|
||||
}
|
||||
|
||||
function isLongDurationProgress(value) {
|
||||
const date = parseProgressDate(value)
|
||||
if (!date) {
|
||||
return false
|
||||
}
|
||||
|
||||
return (Date.now() - date.getTime()) / DAY_MS >= LONG_DURATION_DAYS
|
||||
}
|
||||
|
||||
function buildSelectedFileKey(file) {
|
||||
return [file?.name, file?.size, file?.lastModified, file?.type].join('__')
|
||||
}
|
||||
|
||||
@@ -145,10 +145,15 @@ test('workbench submit shows intent recognition feedback before assistant opens'
|
||||
|
||||
test('workbench progress rows show update time first', () => {
|
||||
assert.match(workbench, /class="progress-time"/)
|
||||
assert.match(workbench, /has-long-duration-divider/)
|
||||
assert.match(workbench, /hasLongDurationDivider/)
|
||||
assert.match(workbench, /const LONG_DURATION_DAYS = 10/)
|
||||
assert.match(workbench, /isLongDurationProgress\(item\?\.updatedAt\)/)
|
||||
assert.match(workbench, /<time :datetime="item\.updatedAt \|\| ''">\{\{ item\.displayTime \}\}<\/time>/)
|
||||
assert.match(workbench, /displayTime: formatProgressTime\(item\?\.updatedAt\)/)
|
||||
assert.match(workbench, /function formatProgressTime\(value\)/)
|
||||
assert.match(workbenchStyles, /\.progress-row\s*\{[\s\S]*grid-template-columns:\s*minmax\(78px,\s*0\.44fr\)/)
|
||||
assert.match(workbenchStyles, /\.progress-row\.has-long-duration-divider::before\s*\{[\s\S]*content:\s*"10日以上"/)
|
||||
assert.match(workbenchStyles, /\.progress-time\s*\{[\s\S]*color:\s*var\(--workbench-muted\);/)
|
||||
assert.match(workbenchResponsiveStyles, /grid-template-areas:[\s\S]*"time identity result"[\s\S]*"steps steps steps"/)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user