feat(web): consolidate navigation IA shell
Some checks failed
Code Review / ai-code-review (push) Successful in 13s
CD Pipeline / tests (push) Successful in 1m45s
CD Pipeline / build-and-deploy (push) Successful in 5m15s
Ansible / Reboot Recovery Contract / validate (push) Has been cancelled
CD Pipeline / post-deploy-checks (push) Has been cancelled

This commit is contained in:
Your Name
2026-06-25 11:43:21 +08:00
parent c3631c35a2
commit 93c4b81cca
7 changed files with 216 additions and 45 deletions

View File

@@ -71,6 +71,9 @@
"governance": "AI 治理",
"awooop": "AwoooP",
"awooopHome": "AwoooP 總覽",
"awooopWorkbench": "AwoooP 操作台",
"knowledgeAutomation": "知識與自動化",
"governanceSecurity": "治理與安全",
"workItems": "工作鏈路",
"runMonitor": "Run 監控",
"approvalQueue": "審批佇列",
@@ -1821,6 +1824,8 @@
}
},
"navSection": {
"workspaces": "主工作區",
"system": "系統工具",
"queues": "處理佇列",
"truth": "真相與治理",
"legacy": "系統與相容",
@@ -2850,6 +2855,8 @@
"actionGoApprovals": "前往授權中心",
"actionGoIwooos": "前往 IwoooS 資安主控台",
"actionGoAwoooP": "前往 AwoooP 總覽",
"actionGoKnowledgeAutomation": "前往知識與自動化",
"actionGoGovernanceSecurity": "前往 IwoooS 治理與安全",
"actionGoWorkItems": "前往工作鏈路",
"actionGoRuns": "前往 Run 監控",
"actionGoApprovalQueue": "前往審批佇列"
@@ -7540,6 +7547,7 @@
"mode": "影子模式優先",
"operator": "操作員",
"navLabel": "AwoooP 主導航",
"workflowRailLabel": "AwoooP 工作流程導覽",
"sectionMenuLabel": "AwoooP 主導航",
"sectionEyebrow": "目前工作面",
"tabsLabel": "AwoooP 內容視角",

View File

@@ -71,6 +71,9 @@
"governance": "AI 治理",
"awooop": "AwoooP",
"awooopHome": "AwoooP 總覽",
"awooopWorkbench": "AwoooP 操作台",
"knowledgeAutomation": "知識與自動化",
"governanceSecurity": "治理與安全",
"workItems": "工作鏈路",
"runMonitor": "Run 監控",
"approvalQueue": "審批佇列",
@@ -1821,6 +1824,8 @@
}
},
"navSection": {
"workspaces": "主工作區",
"system": "系統工具",
"queues": "處理佇列",
"truth": "真相與治理",
"legacy": "系統與相容",
@@ -2850,6 +2855,8 @@
"actionGoApprovals": "前往授權中心",
"actionGoIwooos": "前往 IwoooS 資安主控台",
"actionGoAwoooP": "前往 AwoooP 總覽",
"actionGoKnowledgeAutomation": "前往知識與自動化",
"actionGoGovernanceSecurity": "前往 IwoooS 治理與安全",
"actionGoWorkItems": "前往工作鏈路",
"actionGoRuns": "前往 Run 監控",
"actionGoApprovalQueue": "前往審批佇列"
@@ -7540,6 +7547,7 @@
"mode": "影子模式優先",
"operator": "操作員",
"navLabel": "AwoooP 主導航",
"workflowRailLabel": "AwoooP 工作流程導覽",
"sectionMenuLabel": "AwoooP 主導航",
"sectionEyebrow": "目前工作面",
"tabsLabel": "AwoooP 內容視角",

View File

@@ -8,7 +8,7 @@
"use client";
import { AppLayout } from "@/components/layout";
import { usePathname } from "@/i18n/routing";
import { Link, usePathname } from "@/i18n/routing";
import {
BrainCircuit,
CalendarDays,
@@ -115,6 +115,30 @@ export default function AwoooPLayout({
<span>{t("status.budget")}</span>
<span>{t("status.score")}</span>
</div>
<nav
aria-label={t("workflowRailLabel")}
className="flex max-w-full flex-wrap gap-1 overflow-hidden border-t border-[#e0ddd4] px-3 py-2 sm:px-5"
>
{navItems.map((item) => {
const active = activeItem.href === item.href;
return (
<Link
key={item.href}
href={item.href}
aria-current={active ? "page" : undefined}
className={[
"shrink-0 rounded-button border px-3 py-1.5 text-xs font-semibold transition-colors",
active
? "border-[#d97757] bg-[#fff7ed] text-[#141413]"
: "border-[#d8d3c7] bg-white text-[#6f6b62] hover:border-[#c8c1b3] hover:text-[#141413]",
].join(" ")}
>
{t(`nav.${item.labelKey}`)}
</Link>
);
})}
</nav>
</div>
<div className="w-full max-w-full">

View File

@@ -42,6 +42,7 @@ interface PaletteItem {
icon: React.ReactNode
action: () => void
keywords?: string[]
secondary?: boolean
}
export function CommandPalette() {
@@ -88,6 +89,7 @@ export function CommandPalette() {
icon: <Zap size={14} />,
action: () => nav('/authorizations'),
keywords: ['授權', 'approve', '批准', 'authorization'],
secondary: true,
},
{
id: 'observability',
@@ -105,6 +107,22 @@ export function CommandPalette() {
action: () => nav('/awooop'),
keywords: ['awooop', 'operator', 'console', '操作控制台', '總覽'],
},
{
id: 'knowledge-automation',
label: t('actionGoKnowledgeAutomation'),
group: t('groupNav'),
icon: <BookOpen size={14} />,
action: () => nav('/knowledge-base'),
keywords: ['knowledge', 'automation', '自動化', '知識', 'kb', 'playbook', 'runbook'],
},
{
id: 'governance-security',
label: t('actionGoGovernanceSecurity'),
group: t('groupNav'),
icon: <ShieldCheck size={14} />,
action: () => nav('/governance'),
keywords: ['governance', 'security', 'iwooos', 'code review', '治理', '安全', '資安', '審查'],
},
{
id: 'awooop-work-items',
label: t('actionGoWorkItems'),
@@ -112,6 +130,7 @@ export function CommandPalette() {
icon: <ClipboardList size={14} />,
action: () => nav('/awooop/work-items'),
keywords: ['work items', '工作鏈路', '工作項', 'recurrence'],
secondary: true,
},
{
id: 'awooop-runs',
@@ -120,6 +139,7 @@ export function CommandPalette() {
icon: <Activity size={14} />,
action: () => nav('/awooop/runs'),
keywords: ['runs', 'run monitor', '執行監控', 'run 監控'],
secondary: true,
},
{
id: 'awooop-approvals',
@@ -128,6 +148,7 @@ export function CommandPalette() {
icon: <ShieldCheck size={14} />,
action: () => nav('/awooop/approvals'),
keywords: ['approval queue', '審批佇列', '人工閘門', 'approve'],
secondary: true,
},
{
id: 'automation',
@@ -136,6 +157,7 @@ export function CommandPalette() {
icon: <Wrench size={14} />,
action: () => nav('/automation'),
keywords: ['automation', '自動化', 'auto'],
secondary: true,
},
{
id: 'operations',
@@ -162,14 +184,16 @@ export function CommandPalette() {
'資安網',
'資安態勢',
],
secondary: true,
},
{
id: 'knowledge',
label: t('actionGoKnowledge'),
group: t('groupNav'),
icon: <BookOpen size={14} />,
action: () => nav('/knowledge'),
action: () => nav('/knowledge-base'),
keywords: ['knowledge', '知識', '殿堂', 'kb'],
secondary: true,
},
{
id: 'settings',
@@ -178,6 +202,7 @@ export function CommandPalette() {
icon: <Settings size={14} />,
action: () => nav('/settings'),
keywords: ['settings', '設定', 'config'],
secondary: true,
},
{
id: 'terminal-page',
@@ -186,11 +211,12 @@ export function CommandPalette() {
icon: <Terminal size={14} />,
action: () => nav('/terminal'),
keywords: ['terminal', '終端', 'shell'],
secondary: true,
},
]
const filtered = query.trim() === ''
? items
? items.filter(item => !item.secondary)
: items.filter(item => {
const q = query.toLowerCase()
return item.label.toLowerCase().includes(q) ||

View File

@@ -26,28 +26,18 @@ import { usePathname } from 'next/navigation'
import Link from 'next/link'
import { cn } from '@/lib/utils'
import {
Activity,
Bell,
BookOpen,
BrainCircuit,
Building2,
ChevronLeft,
ChevronRight,
ClipboardList,
DollarSign,
FileText,
GitBranch,
HelpCircle,
LayoutDashboard,
Monitor,
Package,
Radar,
Route,
Settings,
ShieldCheck,
Terminal,
Ticket,
Wrench,
} from 'lucide-react'
// Phase 8.0 #15: 改用 approval store SSE (移除 polling)
import { useApprovalStore } from '@/stores/approval.store'
@@ -70,6 +60,7 @@ type NavItemConfig = {
labelKey: string
Icon: typeof LayoutDashboard
aliases?: string[]
relatedPaths?: string[]
exact?: boolean
badge?: boolean // 是否顯示動態徽章
}
@@ -88,45 +79,63 @@ type NavSection = {
const NAV_SECTIONS: NavSection[] = [
{
sectionKey: 'queues',
sectionKey: 'workspaces',
items: [
{ id: 'command-center', href: '/', labelKey: 'commandCenter', Icon: LayoutDashboard },
{ id: 'awooop-home', href: '/awooop', labelKey: 'awooopHome', Icon: BrainCircuit, exact: true },
{ id: 'awooop-work-items', href: '/awooop/work-items', labelKey: 'workItems', Icon: ClipboardList },
{ id: 'awooop-runs', href: '/awooop/runs', labelKey: 'runMonitor', Icon: Activity },
{ id: 'awooop-approvals', href: '/awooop/approvals', labelKey: 'approvalQueue', Icon: ShieldCheck, badge: true },
{ id: 'awooop-contracts', href: '/awooop/contracts', labelKey: 'contracts', Icon: FileText },
{ id: 'awooop-tenants', href: '/awooop/tenants', labelKey: 'tenants', Icon: Building2 },
{ id: 'alerts', href: '/alerts', labelKey: 'alerts', Icon: Bell },
{
id: 'awooop-workbench',
href: '/awooop',
labelKey: 'awooopWorkbench',
Icon: BrainCircuit,
exact: true,
badge: true,
aliases: [
'/awooop/work-items',
'/awooop/runs',
'/awooop/approvals',
'/awooop/contracts',
'/awooop/tenants',
'/alerts',
'/authorizations',
],
},
{
id: 'observability',
href: '/observability',
labelKey: 'observability',
Icon: Monitor,
aliases: ['/monitoring', '/apm', '/errors', '/apps', '/services', '/topology'],
},
{
id: 'knowledge-automation',
href: '/knowledge-base',
labelKey: 'knowledgeAutomation',
Icon: BookOpen,
aliases: ['/knowledge', '/automation', '/auto-repair', '/drift', '/neural-command'],
},
{
id: 'iwooos-security',
href: '/governance',
labelKey: 'iwooos',
Icon: ShieldCheck,
aliases: ['/security-compliance'],
relatedPaths: ['/iwooos', '/code-review', '/security', '/compliance'],
},
{
id: 'operations',
href: '/operations',
labelKey: 'operationsOverview',
Icon: Package,
aliases: ['/deployments', '/tickets', '/cost', '/billing', '/action-logs', '/reports'],
},
],
},
{
sectionKey: 'truth',
items: [
{ id: 'observability', href: '/observability', labelKey: 'observability', Icon: Monitor },
{ id: 'automation', href: '/automation', labelKey: 'automation', Icon: Wrench },
{ id: 'governance', href: '/governance', labelKey: 'governance', Icon: ShieldCheck },
{ id: 'knowledge', href: '/knowledge', labelKey: 'knowledge', Icon: BookOpen },
{ id: 'iwooos-security', href: '/iwooos', labelKey: 'iwooos', Icon: Radar, aliases: ['/security-compliance'] },
],
},
{
sectionKey: 'ops',
items: [
{ id: 'operations', href: '/operations', labelKey: 'operationsOverview', Icon: Package },
{ id: 'topology', href: '/topology', labelKey: 'topology', Icon: Route },
{ id: 'deployments', href: '/deployments', labelKey: 'deployments', Icon: GitBranch },
{ id: 'tickets', href: '/tickets', labelKey: 'tickets', Icon: Ticket },
{ id: 'cost', href: '/cost', labelKey: 'cost', Icon: DollarSign },
],
},
{
// Legacy: 經典 AI 中心 (既有決策保留)
sectionKey: 'legacy',
sectionKey: 'system',
items: [
{ id: 'terminal', href: '/terminal', labelKey: 'terminal', Icon: Terminal },
{ id: 'settings', href: '/settings', labelKey: 'settings', Icon: Settings },
{ id: 'classic', href: '/classic', labelKey: 'classicAICenter', Icon: LayoutDashboard },
{ id: 'classic', href: '/classic', labelKey: 'classicAICenter', Icon: Radar },
],
},
]
@@ -173,7 +182,9 @@ export function Sidebar({
}
const isActive = (item: NavItemConfig) => (
isRouteActive(item.href, item.exact) || item.aliases?.some(alias => isRouteActive(alias)) === true
isRouteActive(item.href, item.exact) ||
item.aliases?.some(alias => isRouteActive(alias)) === true ||
item.relatedPaths?.some(path => isRouteActive(path)) === true
)
const sidebarWidth = compact && collapsed ? 48 : collapsed ? 64 : 224

View File

@@ -32,6 +32,25 @@
**邊界**:本輪只修 repo / 前台 / 文件 / guard 狀態一致性;沒有讀 Wazuh secret、沒有保存 raw log、沒有重新註冊 agent、沒有重啟 Wazuh、沒有修改 Dashboard stored API、RBAC、TLS、Nginx、Docker、K8s、firewall 或 host config也沒有 active response 或 Kali active scan。
## 2026-06-25AWOOOI 導航與頁面 IA 第一刀整合
**背景**:使用者要求把所有導航列菜單、頁面、二層菜單與頁內 tabs 做專業整合,明確判斷哪些該調整、刪除、合併、新增,不再讓全站呈現大量重複頁面與文字堆疊。
**完成**
- 新增 `docs/workplans/2026-06-25-awoooi-navigation-ia-consolidation.md`固定主工作區、吸收頁、deep link、redirect 條件與下一輪拆頁策略。
- 全域 Sidebar 從多個散頁入口改為主工作區導向指令中心、AwoooP 操作台、可觀測性、知識與自動化、IwoooS治理與安全、營運、系統工具。
- AwoooP 子頁入口從全域 Sidebar 改到 AwoooP contextual workflow rail總覽、工作鏈路、Run 監控、審批佇列、合約、租戶。
- Command Palette 空查詢時只顯示主工作區與快速動作AwoooP 子頁、終端、設定等仍可搜尋直達,但不再預設攤開。
- Sidebar `/knowledge` 入口改為 `/knowledge-base`,避免使用者進入中介 redirect 頁。
**目前 IA 完成度同步**
- 導航 / IA 整合:`64% -> 72%`
- 全站 UI/UX 專業化:`42% -> 45%`
- AwoooP 操作台產品化:`52% -> 57%`
- 舊頁 redirect / 實際刪除:`0%`,需等父頁 parity 與 production smoke 完成。
**邊界**本段只改前端導航曝光、AwoooP shell、Command Palette 與 docs不刪除 route、不改 API、不改 runtime、不發 Telegram、不開 action button、不提升 owner response 或 runtime gate。
## 2026-06-25AWOOOI 全面工作盤點與 UI/UX 專業化基準
**背景**:使用者指出 AWOOOI 已推進一個多月但實際產品體感仍是大量文字、重複頁面、告警多數需要人工、KM / PlayBook / 腳本 / 排程沉澱不可見,並要求重新完整盤點所有工作與市場主流 AI 產品化方向。

View File

@@ -0,0 +1,75 @@
# AWOOOI 導航與頁面資訊架構整合決策表
> 日期2026-06-25台北時間
> 基線:`gitea/main=3466fa995944b25ff627046c40f9121a449538f3`
> 目標把左側導航、AwoooP 二層菜單、頁內 tabs 與重複頁面整合成專業 AI 營運產品資訊架構。
> 邊界:本輪先調整導航曝光與 AwoooP contextual rail不刪除路由、不改 API、不開 runtime gate。
## 1. 設計原則
1. 左側 Sidebar 只放「主工作區」,不再列出所有下鑽頁。
2. 子頁入口放在對應工作區的 contextual rail不和全域導航重複。
3. Page tabs 只做「同一頁的視角切換」,不能再承擔主導航。
4. 舊頁保留為 deep link / redirect / tab panel直到資料鏈與 smoke 完成後才刪除。
5. 所有新增頁面必須先有 API truth / read model不允許只做靜態展示頁。
## 2. 新主導航
| 主工作區 | 入口 | 吸收 / 別名頁 | 角色 |
|---|---|---|---|
| 指令中心 | `/` | 首頁 tabs | 全域狀況與最重要 action-required。 |
| AwoooP 操作台 | `/awooop` | `/awooop/work-items``/awooop/runs``/awooop/approvals``/awooop/contracts``/awooop/tenants``/alerts``/authorizations` | AI 自動化、事故、工作項、批准與全產品資產入口。 |
| 可觀測性 | `/observability` | `/monitoring``/apm``/errors``/apps``/services``/topology` | 主機、服務、網站、工具、SLO、告警與 blast radius 拓樸。 |
| 知識與自動化 | `/knowledge-base` | `/knowledge``/automation``/auto-repair``/drift``/neural-command` | KM、PlayBook、腳本、排程、dry-run worker 與自動化候選。 |
| IwoooS治理與安全 | `/governance` | `/iwooos``/code-review``/security-compliance``/security``/compliance` | Owner gate、資安 posture、Agent market、Code Review / release safetySidebar 保留 `iwooos-security` sentinel。 |
| 營運 | `/operations` | `/deployments``/tickets``/cost``/billing``/action-logs``/reports` | 部署、工單、成本、帳務、報表與 action ledger。 |
| 系統工具 | `/terminal``/settings``/classic``/help` | hidden / bottom | 低頻管理與相容入口。 |
## 3. 頁面處置決策
| 頁面 | 決策 | 何時刪除或 redirect | 下一步 |
|---|---|---|---|
| `/awooop` | 保留為 AwoooP command overview | 不刪 | 改成 Situation Strip + Agent Flow + Risk Matrix + Action Rail。 |
| `/awooop/work-items` | 保留下鑽 | 不刪 | 改成 operator queuemanual item 必須有 SOP rail。 |
| `/awooop/runs` | 保留下鑽 | 不刪 | 改成 execution timelineraw evidence 進 drawer。 |
| `/awooop/approvals` | 保留下鑽 | 不刪 | 改成 decision treestuck approval 要顯示 owner / next action。 |
| `/awooop/contracts` | 保留下鑽 | 不刪 | 合約與 gate 改為 matrix不再純表格。 |
| `/awooop/tenants` | 保留並升級 | 不刪 | 變成全產品 coverage heatmap + topology吸收各產品納管狀態。 |
| `/alerts` | 降級為 AwoooP / Observability 下鑽 | 等 AwoooP incident center 完成後 redirect | 告警不再單獨成主頁;與 incident timeline 串接。 |
| `/authorizations` | 降級為 AwoooP Approvals 別名 | Approvals parity 完成後 redirect | 合併批准狀態鏈與 owner gate。 |
| `/observability` | 保留主工作區 | 不刪 | 加入 host / service / product topology 與 SLO heatmap。 |
| `/monitoring``/apm``/errors``/apps``/services` | 合併為 Observability tabs | Observability tabs 完成 parity 後 redirect | 保留深連結到 `?tab=`。 |
| `/topology` | 合併為 Observability topology view | Topology parity 完成後 redirect | 改為拓樸 tab 或 drawer。 |
| `/knowledge-base` | 保留主工作區 | 不刪 | 修資料鏈,顯示 KM / PlayBook / scripts / schedules trust ledger。 |
| `/knowledge` | redirect / alias | 已是 redirect 候選 | Sidebar 改指 `/knowledge-base`。 |
| `/automation` | 合併為 Knowledge & Automation tabs | 自動化 tabs 完成 parity 後 redirect | Auto-repair / drift / neural command 改為同一頁視角。 |
| `/auto-repair``/drift``/neural-command` | 降級為 Knowledge & Automation 下鑽 | parity 完成後 redirect | 不再當主導航。 |
| `/governance` | 保留主工作區 | 不刪 | 改成 AgentOps governance cockpit減少長文字卡。 |
| `/iwooos` | 保留安全 posture 下鑽 | 不刪 | 改成 governance / security 的 security posture view。 |
| `/code-review` | 保留 release safety 下鑽 | 不刪 | 合併全產品 pre/post deploy gate。 |
| `/security-compliance``/security``/compliance` | 合併到 Governance / Security | parity 完成後 redirect | 不再重複展示 IwoooS / compliance 資訊。 |
| `/operations` | 保留主工作區 | 不刪 | 部署 / 工單 / 成本 / 日誌 / 帳務統一入口。 |
| `/deployments``/tickets``/cost``/billing``/action-logs``/reports` | 合併為 Operations tabs | parity 完成後 redirect | 保留可搜尋 deep link。 |
| `/terminal``/settings``/help` | 系統工具 | 不刪 | 從主流程分離。 |
| `/classic``/demo` | 相容 / legacy | 有替代頁後移除主導航 | 不再推為主要產品入口。 |
| `/users``/notifications` | Admin candidate | 等 Admin 工作區設計 | 暫不新增主導航,避免膨脹。 |
## 4. 本輪已實作
| 項目 | 狀態 |
|---|---|
| Sidebar 改為主工作區導向 | 完成 |
| AwoooP 子頁搬到 contextual workflow rail | 完成 |
| Command Palette 空查詢只顯示主工作區與快速動作 | 完成 |
| `/knowledge` sidebar 入口改指 `/knowledge-base` | 完成 |
| 子頁 deep link 保留 | 完成 |
## 5. 下一輪必做
| 優先級 | 工作 | 驗收 |
|---|---|---|
| P0 | AwoooP Overview / Runs / Work Items / Approvals 共用 Situation Strip / Agent Flow / Action Rail | desktop / mobile 首屏能一眼看懂卡點與下一步 |
| P0 | Tenants coverage heatmap | 16 產品、31 routes、10 repos、owner / smoke / runtime gate 一張圖看懂 |
| P0 | Observability topology | 主機 / 服務 / 網站 / 告警 / SLO 關聯可視化 |
| P0 | Knowledge / Automation trust ledger | KM、PlayBook、腳本、排程、dry-run、verifier 有統一沉澱面板 |
| P1 | 開始 redirect 舊頁 | 只有在父頁 `?tab=` parity 與 production smoke 通過後執行 |