Skip to content

Commit 7ead35e

Browse files
xiaojilele-glitchxiaojilele-glitch
committed
feat(web): refresh tasks pages for Feishu
1 parent c126576 commit 7ead35e

2 files changed

Lines changed: 117 additions & 16 deletions

File tree

‎src/web/src/pages/tasks/page.tsx‎

Lines changed: 114 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,20 @@ body {
7777
margin: 0 auto;
7878
}
7979
.task-detail-topbar {
80+
position: sticky;
81+
top: 14px;
82+
z-index: 30;
8083
display: flex;
8184
align-items: center;
8285
justify-content: space-between;
8386
gap: 12px;
8487
flex-wrap: wrap;
88+
padding: 10px 12px;
89+
border-radius: 18px;
90+
border: 1px solid var(--task-border);
91+
background: rgba(255, 251, 246, 0.84);
92+
box-shadow: 0 18px 52px rgba(84, 67, 48, 0.08);
93+
backdrop-filter: blur(18px);
8594
}
8695
.task-detail-grid {
8796
display: grid;
@@ -358,6 +367,38 @@ body {
358367
.task-active-item {
359368
width: 100%;
360369
font: inherit;
370+
position: relative;
371+
text-align: left;
372+
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
373+
}
374+
.task-active-item::before {
375+
content: "";
376+
position: absolute;
377+
left: 10px;
378+
top: 10px;
379+
bottom: 10px;
380+
width: 4px;
381+
border-radius: 999px;
382+
background: rgba(154, 138, 119, 0.5);
383+
opacity: 0.9;
384+
}
385+
.task-active-item[data-status="running"]::before {
386+
background: color-mix(in srgb, var(--task-orange) 72%, rgba(255, 255, 255, 0.3));
387+
}
388+
.task-active-item[data-status="waiting"]::before {
389+
background: color-mix(in srgb, var(--task-purple) 72%, rgba(255, 255, 255, 0.3));
390+
}
391+
.task-active-item[data-status="done"]::before {
392+
background: color-mix(in srgb, var(--task-accent) 70%, rgba(255, 255, 255, 0.3));
393+
}
394+
.task-active-item[data-status="failed"]::before {
395+
background: color-mix(in srgb, var(--task-red) 74%, rgba(255, 255, 255, 0.3));
396+
}
397+
.task-active-item:hover {
398+
transform: translateY(-1px);
399+
border-color: color-mix(in srgb, var(--task-blue) 28%, var(--task-border));
400+
background: rgba(255, 255, 255, 0.86);
401+
box-shadow: 0 18px 44px rgba(84, 67, 48, 0.1);
361402
}
362403
.task-legend-item {
363404
display: flex;
@@ -525,22 +566,49 @@ body {
525566
gap: 8px;
526567
}
527568
.task-item {
528-
padding: 12px;
529-
border-radius: 14px;
569+
position: relative;
570+
padding: 12px 12px 12px 22px;
571+
border-radius: 16px;
530572
border: 1px solid var(--task-border);
531573
background: var(--task-card);
532574
cursor: pointer;
533-
transition: 0.18s ease;
575+
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
534576
color: inherit;
535577
text-align: left;
578+
box-shadow: 0 12px 32px rgba(84, 67, 48, 0.06);
579+
}
580+
.task-item::before {
581+
content: "";
582+
position: absolute;
583+
left: 10px;
584+
top: 12px;
585+
bottom: 12px;
586+
width: 4px;
587+
border-radius: 999px;
588+
background: rgba(154, 138, 119, 0.5);
589+
opacity: 0.9;
590+
}
591+
.task-item[data-status="running"]::before {
592+
background: color-mix(in srgb, var(--task-orange) 72%, rgba(255, 255, 255, 0.3));
593+
}
594+
.task-item[data-status="waiting"]::before {
595+
background: color-mix(in srgb, var(--task-purple) 72%, rgba(255, 255, 255, 0.3));
596+
}
597+
.task-item[data-status="done"]::before {
598+
background: color-mix(in srgb, var(--task-accent) 70%, rgba(255, 255, 255, 0.3));
599+
}
600+
.task-item[data-status="failed"]::before {
601+
background: color-mix(in srgb, var(--task-red) 74%, rgba(255, 255, 255, 0.3));
536602
}
537603
.task-item:hover,
538604
.task-item.active {
605+
transform: translateY(-1px);
539606
background: var(--task-hover);
540-
border-color: color-mix(in srgb, var(--task-accent) 42%, var(--task-border));
607+
border-color: color-mix(in srgb, var(--task-accent) 36%, var(--task-border));
608+
box-shadow: 0 20px 52px rgba(84, 67, 48, 0.12);
541609
}
542610
.task-title {
543-
font-weight: 700;
611+
font-weight: 850;
544612
font-size: 14px;
545613
line-height: 1.45;
546614
}
@@ -576,6 +644,25 @@ body {
576644
.badge.waiting { color: var(--task-orange); }
577645
.badge.done { color: var(--task-blue); }
578646
.badge.archived { color: var(--task-muted); }
647+
.badge.running {
648+
border-color: color-mix(in srgb, var(--task-accent) 22%, var(--task-border));
649+
background: rgba(46, 107, 89, 0.08);
650+
}
651+
.badge.waiting {
652+
border-color: color-mix(in srgb, var(--task-orange) 22%, var(--task-border));
653+
background: rgba(183, 128, 52, 0.1);
654+
}
655+
.badge.done {
656+
border-color: color-mix(in srgb, var(--task-blue) 22%, var(--task-border));
657+
background: rgba(86, 116, 143, 0.1);
658+
}
659+
.badge.failed {
660+
border-color: color-mix(in srgb, var(--task-red) 22%, var(--task-border));
661+
background: rgba(185, 90, 74, 0.08);
662+
}
663+
.badge.archived {
664+
background: rgba(151, 130, 105, 0.08);
665+
}
579666
.task-planet {
580667
cursor: pointer;
581668
transition: transform 0.18s ease;
@@ -608,6 +695,18 @@ body {
608695
border: 1px solid var(--task-border);
609696
background: var(--task-card);
610697
}
698+
.task-detail-hero[data-status="running"] {
699+
border-color: color-mix(in srgb, var(--task-accent) 26%, var(--task-border));
700+
}
701+
.task-detail-hero[data-status="waiting"] {
702+
border-color: color-mix(in srgb, var(--task-orange) 26%, var(--task-border));
703+
}
704+
.task-detail-hero[data-status="done"] {
705+
border-color: color-mix(in srgb, var(--task-blue) 26%, var(--task-border));
706+
}
707+
.task-detail-hero[data-status="failed"] {
708+
border-color: color-mix(in srgb, var(--task-red) 26%, var(--task-border));
709+
}
611710
.summary-card {
612711
padding: 18px;
613712
border-color: color-mix(in srgb, var(--task-accent) 20%, var(--task-border));
@@ -1836,7 +1935,7 @@ export default function TasksPage() {
18361935

18371936
{selectedTask ? (
18381937
<>
1839-
<section className="task-shell task-detail-hero">
1938+
<section className="task-shell task-detail-hero" data-status={selectedTask.status}>
18401939
<div style={{ color: 'var(--task-dim)', fontSize: 12, letterSpacing: '0.12em', fontWeight: 700 }}>
18411940
TASK DETAIL
18421941
</div>
@@ -2183,13 +2282,14 @@ export default function TasksPage() {
21832282

21842283
<div className="task-active-list">
21852284
{activePlanets.length > 0 ? activePlanets.map((planet) => (
2186-
<button
2187-
key={planet.id}
2188-
type="button"
2189-
className="task-active-item"
2190-
style={{ color: 'inherit', textAlign: 'left', cursor: 'pointer', background: 'var(--task-card)' }}
2191-
onClick={() => navigate(`/tasks/${planet.id}`)}
2192-
>
2285+
<button
2286+
key={planet.id}
2287+
type="button"
2288+
className="task-active-item"
2289+
data-status={planet.status}
2290+
style={{ color: 'inherit', textAlign: 'left', cursor: 'pointer', background: 'var(--task-card)' }}
2291+
onClick={() => navigate(`/tasks/${planet.id}`)}
2292+
>
21932293
<div style={{ fontWeight: 700 }}>{planet.title}</div>
21942294
<div className="meta">
21952295
{getStatusLabel(planet.status)} · {planet.progress}% · {planet.currentStageLabel ? getStageLabel(planet.currentStageLabel, planet.currentStageKey) : getKindLabel(planet.kind)}
@@ -2219,6 +2319,7 @@ export default function TasksPage() {
22192319
<button
22202320
key={task.id}
22212321
className={`task-item ${task.id === selectedTask?.id ? 'active' : ''}`}
2322+
data-status={task.status}
22222323
type="button"
22232324
onClick={() => navigate(`/tasks/${task.id}`)}
22242325
>

‎src/web/src/shared/platform.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function supportsWebGL(): boolean {
3636
* when heavy WebGL scenes initialize. Prefer 2D to keep the task detail usable.
3737
*/
3838
export function shouldPrefer2D(): boolean {
39-
if (!isProbablyIOS()) return false;
40-
return true;
39+
if (isFeishuInAppBrowser()) return true;
40+
if (isProbablyIOS()) return true;
41+
return false;
4142
}
42-

0 commit comments

Comments
 (0)