feat(web): compact homepage delivery matrix
This commit is contained in:
Your Name
@@ -380,6 +380,14 @@
|
||||
"remainingTitle": "仍待推進缺口",
|
||||
"openWorkItems": "打開 Work Items",
|
||||
"openRuns": "打開 Runs",
|
||||
"matrix": {
|
||||
"title": "交付與缺口矩陣",
|
||||
"columns": {
|
||||
"group": "類型",
|
||||
"capability": "能力 / 證據",
|
||||
"status": "狀態"
|
||||
}
|
||||
},
|
||||
"status": {
|
||||
"live": "已上線",
|
||||
"progress": "推進中",
|
||||
|
||||
@@ -380,6 +380,14 @@
|
||||
"remainingTitle": "仍待推進缺口",
|
||||
"openWorkItems": "打開 Work Items",
|
||||
"openRuns": "打開 Runs",
|
||||
"matrix": {
|
||||
"title": "交付與缺口矩陣",
|
||||
"columns": {
|
||||
"group": "類型",
|
||||
"capability": "能力 / 證據",
|
||||
"status": "狀態"
|
||||
}
|
||||
},
|
||||
"status": {
|
||||
"live": "已上線",
|
||||
"progress": "推進中",
|
||||
|
||||
@@ -1243,6 +1243,16 @@ export default function Home({ params }: { params: { locale: string } }) {
|
||||
tone: callbackTraceSummary && missingTraceRecent24h > 0 ? 'progress' : callbackTraceSummary ? 'live' : 'watching',
|
||||
},
|
||||
]
|
||||
const automationDeliveryMatrixRows = [
|
||||
...automationDeliveryItems.map(item => ({
|
||||
...item,
|
||||
group: tDashboard('automationDelivery.deliveredTitle'),
|
||||
})),
|
||||
...automationRemainingItems.map(item => ({
|
||||
...item,
|
||||
group: tDashboard('automationDelivery.remainingTitle'),
|
||||
})),
|
||||
]
|
||||
const productDiagramCards = [
|
||||
{
|
||||
key: 'c4Runtime',
|
||||
@@ -2602,109 +2612,136 @@ export default function Home({ params }: { params: { locale: string } }) {
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: dashboardGridTemplate, gap: compactViewport ? 10 : 14, padding: sectionPadding }}>
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
|
||||
<h2 style={{ margin: 0, fontSize: 14, fontWeight: 800, color: '#141413' }}>
|
||||
{tDashboard('automationDelivery.deliveredTitle')}
|
||||
</h2>
|
||||
<a href={`/${locale}/awooop/work-items?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 700, color: '#1f5b9b', textDecoration: 'none' }}>
|
||||
<div style={{ padding: sectionPadding }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: compactViewport ? 'flex-start' : 'baseline',
|
||||
flexDirection: compactViewport ? 'column' : 'row',
|
||||
justifyContent: 'space-between',
|
||||
gap: 8,
|
||||
marginBottom: 8,
|
||||
}}>
|
||||
<h2 style={{ margin: 0, fontSize: 14, fontWeight: 850, color: '#141413' }}>
|
||||
{tDashboard('automationDelivery.matrix.title')}
|
||||
</h2>
|
||||
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
||||
<a href={`/${locale}/awooop/work-items?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 750, color: '#1f5b9b', textDecoration: 'none' }}>
|
||||
{tDashboard('automationDelivery.openWorkItems')}
|
||||
</a>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gap: 8 }}>
|
||||
{automationDeliveryItems.map(item => {
|
||||
const tone = automationWorkToneStyle[item.tone]
|
||||
return (
|
||||
<a
|
||||
key={item.key}
|
||||
href={item.href}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: workItemGridTemplate,
|
||||
gap: 10,
|
||||
padding: '10px 12px',
|
||||
border: '0.5px solid #e0ddd4',
|
||||
borderRadius: 8,
|
||||
background: '#fbfaf6',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 800, color: '#141413' }}>{item.title}</div>
|
||||
<div style={{ marginTop: 4, fontSize: 11, lineHeight: 1.5, color: '#5f5b52' }}>{item.detail}</div>
|
||||
</div>
|
||||
<span style={{
|
||||
alignSelf: 'start',
|
||||
justifySelf: compactViewport ? 'start' : 'auto',
|
||||
border: `0.5px solid ${tone.border}`,
|
||||
background: tone.bg,
|
||||
color: tone.color,
|
||||
borderRadius: 999,
|
||||
padding: '2px 8px',
|
||||
fontSize: 10,
|
||||
fontWeight: 800,
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{item.status}
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 8 }}>
|
||||
<h2 style={{ margin: 0, fontSize: 14, fontWeight: 800, color: '#141413' }}>
|
||||
{tDashboard('automationDelivery.remainingTitle')}
|
||||
</h2>
|
||||
<a href={`/${locale}/awooop/runs?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 700, color: '#1f5b9b', textDecoration: 'none' }}>
|
||||
<a href={`/${locale}/awooop/runs?project_id=awoooi`} style={{ fontSize: 11, fontWeight: 750, color: '#1f5b9b', textDecoration: 'none' }}>
|
||||
{tDashboard('automationDelivery.openRuns')}
|
||||
</a>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gap: 8 }}>
|
||||
{automationRemainingItems.map(item => {
|
||||
const tone = automationWorkToneStyle[item.tone]
|
||||
return (
|
||||
<a
|
||||
key={item.key}
|
||||
href={item.href}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: workItemGridTemplate,
|
||||
gap: 10,
|
||||
padding: '10px 12px',
|
||||
border: `0.5px solid ${tone.border}`,
|
||||
borderRadius: 8,
|
||||
background: tone.bg,
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 800, color: '#141413' }}>{item.title}</div>
|
||||
<div style={{ marginTop: 4, fontSize: 11, lineHeight: 1.5, color: '#5f5b52' }}>{item.detail}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gap: 1,
|
||||
border: '0.5px solid #e0ddd4',
|
||||
borderRadius: 8,
|
||||
background: '#e0ddd4',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{!compactViewport && (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'minmax(96px, 0.52fr) minmax(0, 1.42fr) minmax(90px, 0.42fr)',
|
||||
gap: 1,
|
||||
background: '#e0ddd4',
|
||||
}}>
|
||||
{[
|
||||
tDashboard('automationDelivery.matrix.columns.group'),
|
||||
tDashboard('automationDelivery.matrix.columns.capability'),
|
||||
tDashboard('automationDelivery.matrix.columns.status'),
|
||||
].map(label => (
|
||||
<div key={label} style={{
|
||||
background: '#faf9f3',
|
||||
padding: '7px 9px',
|
||||
fontSize: 10,
|
||||
fontWeight: 900,
|
||||
color: '#5f5b52',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.35,
|
||||
}}>
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{automationDeliveryMatrixRows.map(item => {
|
||||
const tone = automationWorkToneStyle[item.tone]
|
||||
return (
|
||||
<a
|
||||
key={`matrix-${item.key}`}
|
||||
href={item.href}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: compactViewport ? '1fr' : 'minmax(96px, 0.52fr) minmax(0, 1.42fr) minmax(90px, 0.42fr)',
|
||||
gap: compactViewport ? 6 : 1,
|
||||
background: compactViewport ? '#fff' : '#e0ddd4',
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
background: compactViewport ? tone.bg : '#fff',
|
||||
borderLeft: compactViewport ? `3px solid ${tone.color}` : 'none',
|
||||
padding: compactViewport ? '8px 9px 0' : '8px 9px',
|
||||
minWidth: 0,
|
||||
}}>
|
||||
<span style={{
|
||||
alignSelf: 'start',
|
||||
justifySelf: compactViewport ? 'start' : 'auto',
|
||||
display: 'inline-flex',
|
||||
maxWidth: '100%',
|
||||
border: `0.5px solid ${tone.border}`,
|
||||
background: '#fff',
|
||||
background: tone.bg,
|
||||
color: tone.color,
|
||||
borderRadius: 999,
|
||||
padding: '1px 7px',
|
||||
fontSize: 10,
|
||||
fontWeight: 850,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{item.group}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{
|
||||
background: '#fff',
|
||||
padding: compactViewport ? '2px 9px 0' : '8px 9px',
|
||||
minWidth: 0,
|
||||
}}>
|
||||
<div style={{ fontSize: 12, fontWeight: 850, color: '#141413', lineHeight: 1.3, overflowWrap: 'anywhere' }}>
|
||||
{item.title}
|
||||
</div>
|
||||
<div style={{ marginTop: 3, fontSize: 10, lineHeight: 1.45, color: '#5f5b52', overflowWrap: 'anywhere' }}>
|
||||
{item.detail}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
background: '#fff',
|
||||
padding: compactViewport ? '3px 9px 9px' : '8px 9px',
|
||||
minWidth: 0,
|
||||
}}>
|
||||
<span style={{
|
||||
display: 'inline-flex',
|
||||
maxWidth: '100%',
|
||||
border: `0.5px solid ${tone.border}`,
|
||||
background: tone.bg,
|
||||
color: tone.color,
|
||||
borderRadius: 999,
|
||||
padding: '2px 8px',
|
||||
fontSize: 10,
|
||||
fontWeight: 800,
|
||||
fontWeight: 850,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{item.status}
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,3 +1,31 @@
|
||||
## 2026-06-04｜首頁交付與缺口矩陣
|
||||
|
||||
**背景**：上一階段已把首頁 Command Map 做成 4 條泳道式拓樸；本輪接著處理首頁下方仍偏卡片堆疊的「已上線能力 / 待推進缺口」。目標是用表格矩陣讓 operator 更快掃描能力、證據與狀態，而不是逐張卡閱讀。
|
||||
|
||||
**本輪完成**：
|
||||
- `/zh-TW` 首頁 `automationDelivery` 區塊由兩欄卡片改為單一「交付與缺口矩陣」。
|
||||
- 矩陣欄位：類型、能力 / 證據、狀態。
|
||||
- 既有 5 筆已上線能力與 5 筆待推進缺口仍保留連結與 live detail，不新增假資料。
|
||||
- mobile 改為垂直 row layout，保留狀態色條與 badge，不使用水平 scroll。
|
||||
- 補 `zh-TW` / `en` i18n：`dashboard.automationDelivery.matrix.*`。
|
||||
|
||||
**本機驗證**：
|
||||
- JSON / i18n parity：`json ok`、`i18n parity ok`。
|
||||
- `pnpm --dir apps/web exec tsc --noEmit --tsBuildInfoFile /tmp/home-delivery-matrix-20260604.tsbuildinfo`：通過。
|
||||
- `NEXT_PUBLIC_API_URL=https://awoooi.wooo.work NEXT_PRIVATE_BUILD_WORKER_COUNT=1 SENTRY_SUPPRESS_GLOBAL_ERROR_HANDLER_FILE_WARNING=1 pnpm --dir apps/web run build`：通過；首頁 route size `33.6 kB`。
|
||||
- Playwright local production preview `localhost:3115`：
|
||||
- desktop 1440x1100：矩陣存在、類型/欄位存在、關鍵列存在、可 scroll、`horizontalOverflow=0`。
|
||||
- mobile 390x844：矩陣存在、類型與關鍵列存在、可 scroll、`horizontalOverflow=0`。
|
||||
- 截圖：`/tmp/awoooi-home-matrix-desktop-delivery-matrix-local.png`、`/tmp/awoooi-home-matrix-mobile-delivery-matrix-local.png`。
|
||||
|
||||
**目前整體進度（本階段完成後）**：
|
||||
- 首頁產品化入口：86%；已完成 Command Map 泳道與交付矩陣，仍待把更下方專業圖卡壓成更少層級。
|
||||
- Frontend AI provider health readability：88%；本輪未改 provider API。
|
||||
- AwoooP Runs route visibility：88%；維持已完成狀態。
|
||||
- Work Items route action readability：84%；維持已完成狀態。
|
||||
- Frontend design system / visual grammar：52%；矩陣 pattern 已在首頁落地，但尚未抽共用 component 或套到 Alerts / KM / Approvals。
|
||||
- 完整 AI Agent 自動化飛輪：69%；本輪改善 operator 理解成本，不代表自動執行成功率提升。
|
||||
|
||||
## 2026-06-04｜首頁 Command Map 泳道式拓樸
|
||||
|
||||
**背景**：統帥持續要求前端不要再用大量文字堆疊，要改用圖、表、流程圖、架構圖、拓樸圖，讓 operator 快速理解 AI 自動化現在跑到哪裡、卡在哪裡、下一步誰負責。本輪不新增假數字，沿用既有 production truth-chain / AI route / KM / Ansible / dossier 資料，先把首頁 Command Map 再往產品化視覺前進一格。
|
||||
|
||||
Reference in New Issue
Block a user