From cdf60bb8c8e28a6a163ec86c40daf6932de20e25 Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Wed, 1 Apr 2026 22:59:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(pages):=20=E8=A3=9C=E5=85=A8=E6=89=80?=
 =?UTF-8?q?=E6=9C=89=E7=BC=BA=E5=A4=B1=E8=B7=AF=E7=94=B1=E9=A0=81=E9=9D=A2?=
 =?UTF-8?q?=20(15=20=E5=80=8B)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

實作頁面:
- /monitoring: 黃金指標 + 主機狀態 + 服務健康表格
- /alerts: P0-P3 分組 + 嚴重度統計 (已送)
- /terminal: OmniTerminal 路由 (已送)
- /authorizations: LiveApprovalPanel (已送)

佔位頁面 (ComingSoon):
- /apm /topology /security /compliance
- /auto-repair /deployments /tickets /cost /reports
- /apps /services /users /notifications /billing /help

新增 ComingSoon 元件 (極簡動點動畫)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/apm/page.tsx        |  22 ++
 apps/web/src/app/[locale]/apps/page.tsx       |  22 ++
 .../web/src/app/[locale]/auto-repair/page.tsx |  22 ++
 apps/web/src/app/[locale]/billing/page.tsx    |  22 ++
 apps/web/src/app/[locale]/compliance/page.tsx |  22 ++
 apps/web/src/app/[locale]/cost/page.tsx       |  22 ++
 .../web/src/app/[locale]/deployments/page.tsx |  22 ++
 apps/web/src/app/[locale]/help/page.tsx       |  22 ++
 apps/web/src/app/[locale]/monitoring/page.tsx | 265 ++++++++++++++++++
 .../src/app/[locale]/notifications/page.tsx   |  22 ++
 apps/web/src/app/[locale]/reports/page.tsx    |  22 ++
 apps/web/src/app/[locale]/security/page.tsx   |  22 ++
 apps/web/src/app/[locale]/services/page.tsx   |  22 ++
 apps/web/src/app/[locale]/tickets/page.tsx    |  22 ++
 apps/web/src/app/[locale]/topology/page.tsx   |  22 ++
 apps/web/src/app/[locale]/users/page.tsx      |  22 ++
 .../web/src/components/layout/coming-soon.tsx |  52 ++++
 apps/web/src/components/layout/index.ts       |   1 +
 18 files changed, 648 insertions(+)
 create mode 100644 apps/web/src/app/[locale]/apm/page.tsx
 create mode 100644 apps/web/src/app/[locale]/apps/page.tsx
 create mode 100644 apps/web/src/app/[locale]/auto-repair/page.tsx
 create mode 100644 apps/web/src/app/[locale]/billing/page.tsx
 create mode 100644 apps/web/src/app/[locale]/compliance/page.tsx
 create mode 100644 apps/web/src/app/[locale]/cost/page.tsx
 create mode 100644 apps/web/src/app/[locale]/deployments/page.tsx
 create mode 100644 apps/web/src/app/[locale]/help/page.tsx
 create mode 100644 apps/web/src/app/[locale]/monitoring/page.tsx
 create mode 100644 apps/web/src/app/[locale]/notifications/page.tsx
 create mode 100644 apps/web/src/app/[locale]/reports/page.tsx
 create mode 100644 apps/web/src/app/[locale]/security/page.tsx
 create mode 100644 apps/web/src/app/[locale]/services/page.tsx
 create mode 100644 apps/web/src/app/[locale]/tickets/page.tsx
 create mode 100644 apps/web/src/app/[locale]/topology/page.tsx
 create mode 100644 apps/web/src/app/[locale]/users/page.tsx
 create mode 100644 apps/web/src/components/layout/coming-soon.tsx

diff --git a/apps/web/src/app/[locale]/apm/page.tsx b/apps/web/src/app/[locale]/apm/page.tsx
new file mode 100644
index 000000000..32d4dbe9a
--- /dev/null
+++ b/apps/web/src/app/[locale]/apm/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * APM Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { Activity } from 'lucide-react'
+
+export default function ApmPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={Activity}
+        title="APM"
+        description="應用性能監控，SignOz 整合中"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/apps/page.tsx b/apps/web/src/app/[locale]/apps/page.tsx
new file mode 100644
index 000000000..0c84b851d
--- /dev/null
+++ b/apps/web/src/app/[locale]/apps/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 應用 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { AppWindow } from 'lucide-react'
+
+export default function AppsPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={AppWindow}
+        title="應用"
+        description="應用程式目錄"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/auto-repair/page.tsx b/apps/web/src/app/[locale]/auto-repair/page.tsx
new file mode 100644
index 000000000..159902588
--- /dev/null
+++ b/apps/web/src/app/[locale]/auto-repair/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 自動修復 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { Wrench } from 'lucide-react'
+
+export default function AutoRepairPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={Wrench}
+        title="自動修復"
+        description="自動修復任務管理"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/billing/page.tsx b/apps/web/src/app/[locale]/billing/page.tsx
new file mode 100644
index 000000000..ab9728614
--- /dev/null
+++ b/apps/web/src/app/[locale]/billing/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 帳單 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { CreditCard } from 'lucide-react'
+
+export default function BillingPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={CreditCard}
+        title="帳單"
+        description="帳單與用量查詢"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/compliance/page.tsx b/apps/web/src/app/[locale]/compliance/page.tsx
new file mode 100644
index 000000000..3248d4715
--- /dev/null
+++ b/apps/web/src/app/[locale]/compliance/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 合規 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { ClipboardCheck } from 'lucide-react'
+
+export default function CompliancePage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={ClipboardCheck}
+        title="合規"
+        description="合規檢查與稽核報告"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/cost/page.tsx b/apps/web/src/app/[locale]/cost/page.tsx
new file mode 100644
index 000000000..0ae8c04c7
--- /dev/null
+++ b/apps/web/src/app/[locale]/cost/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 成本分析 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { DollarSign } from 'lucide-react'
+
+export default function CostPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={DollarSign}
+        title="成本分析"
+        description="雲端成本分析報表"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/deployments/page.tsx b/apps/web/src/app/[locale]/deployments/page.tsx
new file mode 100644
index 000000000..e11974155
--- /dev/null
+++ b/apps/web/src/app/[locale]/deployments/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 部署管理 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { Package } from 'lucide-react'
+
+export default function DeploymentsPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={Package}
+        title="部署管理"
+        description="K8s 部署管理介面"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/help/page.tsx b/apps/web/src/app/[locale]/help/page.tsx
new file mode 100644
index 000000000..ac59b47fe
--- /dev/null
+++ b/apps/web/src/app/[locale]/help/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 說明文件 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { HelpCircle } from 'lucide-react'
+
+export default function HelpPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={HelpCircle}
+        title="說明文件"
+        description="操作手冊與 FAQ"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/monitoring/page.tsx b/apps/web/src/app/[locale]/monitoring/page.tsx
new file mode 100644
index 000000000..2f2b60328
--- /dev/null
+++ b/apps/web/src/app/[locale]/monitoring/page.tsx
@@ -0,0 +1,265 @@
+'use client'
+
+/**
+ * Monitoring Page - 服務監控
+ * ===========================
+ * 黃金指標 (Gold Metrics) + 四主機狀態 + 服務健康
+ * 資料來源:
+ *   GET /api/v1/metrics/gold
+ *   GET /api/v1/dashboard/hosts
+ *   GET /api/v1/dashboard (SSE 快照)
+ *
+ * @created 2026-04-01 ogt
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { useTranslations } from 'next-intl'
+import { AppLayout } from '@/components/layout'
+import { useGlobalPulseMetrics } from '@/hooks/useGlobalPulseMetrics'
+import { GlobalPulseChart } from '@/components/charts/global-pulse-chart'
+import { HostGrid } from '@/components/infra/host-grid'
+import { cn } from '@/lib/utils'
+import {
+  Monitor, RefreshCw, AlertCircle,
+  CheckCircle2, XCircle, Minus,
+} from 'lucide-react'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+interface ServiceHealth {
+  name: string
+  status: 'healthy' | 'warning' | 'critical' | 'unknown'
+  latency_ms: number | null
+  uptime_pct: number | null
+  last_checked: string
+}
+
+interface DashboardResponse {
+  healthy_count: number
+  warning_count: number
+  critical_count: number
+  total_count: number
+  services: ServiceHealth[]
+  timestamp: string
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+const getApiBaseUrl = () => {
+  if (typeof window === 'undefined') return ''
+  const url = process.env.NEXT_PUBLIC_API_URL
+  if (!url) console.error('[AWOOOI ERROR] Missing NEXT_PUBLIC_API_URL') // eslint-disable-line no-console
+  return url ?? ''
+}
+
+const STATUS_ICON = {
+  healthy: <CheckCircle2 className="w-4 h-4 text-status-healthy" />,
+  warning: <AlertCircle className="w-4 h-4 text-status-warning" />,
+  critical: <XCircle className="w-4 h-4 text-status-critical" />,
+  unknown: <Minus className="w-4 h-4 text-nothing-gray-400" />,
+}
+
+const STATUS_BADGE = {
+  healthy:  'bg-status-healthy/10 text-status-healthy border-status-healthy/20',
+  warning:  'bg-status-warning/10 text-status-warning border-status-warning/20',
+  critical: 'bg-status-critical/10 text-status-critical border-status-critical/20',
+  unknown:  'bg-nothing-gray-100 text-nothing-gray-500 border-nothing-gray-200',
+}
+
+// =============================================================================
+// Sub-component: Health Summary
+// =============================================================================
+
+function HealthSummary({ data }: { data: DashboardResponse }) {
+  const total = data.total_count || 1
+  return (
+    <div className="grid grid-cols-3 gap-3 mb-6">
+      {[
+        { label: '正常', count: data.healthy_count,  color: 'text-status-healthy', bg: 'bg-status-healthy/10' },
+        { label: '警告', count: data.warning_count,  color: 'text-status-warning', bg: 'bg-status-warning/10' },
+        { label: '異常', count: data.critical_count, color: 'text-status-critical', bg: 'bg-status-critical/10' },
+      ].map(item => (
+        <div key={item.label} className={cn('rounded-lg border p-4 text-center', item.bg, 'border-transparent')}>
+          <div className={cn('text-3xl font-bold font-mono tabular-nums', item.color)}>
+            {item.count}
+          </div>
+          <div className="text-[11px] font-mono text-nothing-gray-500 uppercase tracking-wider mt-1">
+            {item.label} · {Math.round(item.count / total * 100)}%
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// =============================================================================
+// Page
+// =============================================================================
+
+export default function MonitoringPage({ params }: { params: { locale: string } }) {
+  const t = useTranslations()
+
+  const { metrics, isLoading: metricsLoading } = useGlobalPulseMetrics({
+    pollInterval: 30000,
+    enablePolling: true,
+  })
+
+  const [dashboard, setDashboard] = useState<DashboardResponse | null>(null)
+  const [dashLoading, setDashLoading] = useState(true)
+  const [dashError, setDashError] = useState<string | null>(null)
+  const abortRef = useRef<AbortController | null>(null)
+
+  const fetchDashboard = useCallback(async () => {
+    const base = getApiBaseUrl()
+    if (!base) return
+
+    abortRef.current?.abort()
+    const ctrl = new AbortController()
+    abortRef.current = ctrl
+
+    setDashLoading(true)
+    setDashError(null)
+    try {
+      const res = await fetch(`${base}/api/v1/dashboard`, { signal: ctrl.signal })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      setDashboard(await res.json())
+    } catch (e) {
+      if (e instanceof Error && e.name === 'AbortError') return
+      setDashError(e instanceof Error ? e.message : 'Unknown error')
+    } finally {
+      setDashLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchDashboard()
+    const id = setInterval(fetchDashboard, 30000)
+    return () => {
+      clearInterval(id)
+      abortRef.current?.abort()
+    }
+  }, [fetchDashboard])
+
+  const isLoading = metricsLoading || dashLoading
+
+  return (
+    <AppLayout locale={params.locale}>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="font-heading text-2xl font-bold text-nothing-black flex items-center gap-2">
+            <Monitor className="w-6 h-6" />
+            {t('nav.monitoring')}
+          </h2>
+          <p className="mt-1 text-sm text-nothing-gray-500 font-mono">
+            {t('alerts.autoRefresh', { seconds: 30 })}
+          </p>
+        </div>
+        <button
+          onClick={fetchDashboard}
+          disabled={isLoading}
+          className={cn(
+            'flex items-center gap-1.5 px-3 py-1.5 rounded-lg',
+            'text-xs font-mono bg-nothing-gray-100 text-nothing-gray-600',
+            'hover:bg-nothing-gray-200 transition-colors',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+          )}
+        >
+          <RefreshCw className={cn('w-3.5 h-3.5', isLoading && 'animate-spin')} />
+          {t('common.refresh')}
+        </button>
+      </div>
+
+      {/* Error */}
+      {dashError && (
+        <div className="mb-4 p-4 rounded-lg bg-status-critical/10 border border-status-critical/20 flex items-center gap-2">
+          <AlertCircle className="w-4 h-4 text-status-critical" />
+          <span className="text-sm font-mono text-status-critical">{dashError}</span>
+        </div>
+      )}
+
+      {/* Health Summary */}
+      {dashboard && <HealthSummary data={dashboard} />}
+
+      {/* Gold Metrics */}
+      <div className="mb-6">
+        <h3 className="text-[11px] font-mono text-nothing-gray-500 uppercase tracking-widest mb-3">
+          黃金指標 (Gold Metrics)
+        </h3>
+        {metricsLoading && metrics.length === 0 ? (
+          <div className="h-32 rounded-lg bg-nothing-gray-50 border border-nothing-gray-200 flex items-center justify-center">
+            <RefreshCw className="w-5 h-5 animate-spin text-nothing-gray-400" />
+          </div>
+        ) : (
+          <GlobalPulseChart metrics={metrics} />
+        )}
+      </div>
+
+      {/* Host Grid */}
+      <div className="mb-6">
+        <h3 className="text-[11px] font-mono text-nothing-gray-500 uppercase tracking-widest mb-3">
+          主機狀態 (Four-Host Architecture)
+        </h3>
+        <HostGrid hosts={[]} />
+      </div>
+
+      {/* Service Table */}
+      {dashboard && dashboard.services && dashboard.services.length > 0 && (
+        <div>
+          <h3 className="text-[11px] font-mono text-nothing-gray-500 uppercase tracking-widest mb-3">
+            服務清單
+          </h3>
+          <div className="rounded-lg border border-nothing-gray-200 overflow-hidden">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="bg-nothing-gray-50 border-b border-nothing-gray-200">
+                  {['服務名稱', '狀態', '延遲', '可用率', '最後檢查'].map(h => (
+                    <th key={h} className="px-4 py-2.5 text-left font-mono text-[10px] uppercase text-nothing-gray-500 tracking-wider">
+                      {h}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {dashboard.services.map((svc, i) => (
+                  <tr key={svc.name} className={cn(
+                    'border-b border-nothing-gray-100 last:border-0',
+                    i % 2 === 0 ? 'bg-white' : 'bg-nothing-gray-50/50'
+                  )}>
+                    <td className="px-4 py-3 font-mono text-sm text-nothing-black font-medium">
+                      {svc.name}
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className={cn(
+                        'inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[11px] font-mono font-bold uppercase',
+                        STATUS_BADGE[svc.status]
+                      )}>
+                        {STATUS_ICON[svc.status]}
+                        {svc.status}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 font-mono text-sm text-nothing-gray-700">
+                      {svc.latency_ms != null ? `${svc.latency_ms}ms` : '--'}
+                    </td>
+                    <td className="px-4 py-3 font-mono text-sm text-nothing-gray-700">
+                      {svc.uptime_pct != null ? `${svc.uptime_pct.toFixed(2)}%` : '--'}
+                    </td>
+                    <td className="px-4 py-3 font-mono text-xs text-nothing-gray-500">
+                      {svc.last_checked
+                        ? new Date(svc.last_checked).toLocaleTimeString()
+                        : '--'}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/notifications/page.tsx b/apps/web/src/app/[locale]/notifications/page.tsx
new file mode 100644
index 000000000..9b0200d6e
--- /dev/null
+++ b/apps/web/src/app/[locale]/notifications/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 通知設定 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { BellRing } from 'lucide-react'
+
+export default function NotificationsPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={BellRing}
+        title="通知設定"
+        description="通知偏好與訂閱設定"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/reports/page.tsx b/apps/web/src/app/[locale]/reports/page.tsx
new file mode 100644
index 000000000..9f1969f98
--- /dev/null
+++ b/apps/web/src/app/[locale]/reports/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 報表 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { FileText } from 'lucide-react'
+
+export default function ReportsPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={FileText}
+        title="報表"
+        description="週期性報告系統"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/security/page.tsx b/apps/web/src/app/[locale]/security/page.tsx
new file mode 100644
index 000000000..600fdb666
--- /dev/null
+++ b/apps/web/src/app/[locale]/security/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 安全 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { Shield } from 'lucide-react'
+
+export default function SecurityPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={Shield}
+        title="安全"
+        description="安全事件與威脅偵測"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/services/page.tsx b/apps/web/src/app/[locale]/services/page.tsx
new file mode 100644
index 000000000..722a6786c
--- /dev/null
+++ b/apps/web/src/app/[locale]/services/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 服務目錄 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { Server } from 'lucide-react'
+
+export default function ServicesPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={Server}
+        title="服務目錄"
+        description="服務登錄中心"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/tickets/page.tsx b/apps/web/src/app/[locale]/tickets/page.tsx
new file mode 100644
index 000000000..ad62ef18e
--- /dev/null
+++ b/apps/web/src/app/[locale]/tickets/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 工單 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { Ticket } from 'lucide-react'
+
+export default function TicketsPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={Ticket}
+        title="工單"
+        description="工單系統整合中"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/topology/page.tsx b/apps/web/src/app/[locale]/topology/page.tsx
new file mode 100644
index 000000000..ab4fc8d3e
--- /dev/null
+++ b/apps/web/src/app/[locale]/topology/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 拓撲圖 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { GitBranch } from 'lucide-react'
+
+export default function TopologyPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={GitBranch}
+        title="拓撲圖"
+        description="服務依賴拓撲，開發中"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/app/[locale]/users/page.tsx b/apps/web/src/app/[locale]/users/page.tsx
new file mode 100644
index 000000000..a86452449
--- /dev/null
+++ b/apps/web/src/app/[locale]/users/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+/**
+ * 使用者管理 Page
+ * @created 2026-04-01 ogt - 路由佔位 (awaiting implementation)
+ */
+
+import { AppLayout } from '@/components/layout'
+import { ComingSoon } from '@/components/layout'
+import { Users } from 'lucide-react'
+
+export default function UsersPage({ params }: { params: { locale: string } }) {
+  return (
+    <AppLayout locale={params.locale}>
+      <ComingSoon
+        icon={Users}
+        title="使用者管理"
+        description="RBAC 使用者與角色管理"
+      />
+    </AppLayout>
+  )
+}
diff --git a/apps/web/src/components/layout/coming-soon.tsx b/apps/web/src/components/layout/coming-soon.tsx
new file mode 100644
index 000000000..f8c26fdac
--- /dev/null
+++ b/apps/web/src/components/layout/coming-soon.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+/**
+ * ComingSoon - 統一的「建設中」佔位元件
+ * ======================================
+ * 用於尚未實作的路由頁面
+ * Nothing.tech 極簡風格
+ *
+ * @created 2026-04-01 ogt
+ */
+
+import { type LucideIcon } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface ComingSoonProps {
+  icon?: LucideIcon
+  title: string
+  description?: string
+  className?: string
+}
+
+export function ComingSoon({ icon: Icon, title, description, className }: ComingSoonProps) {
+  return (
+    <div className={cn(
+      'flex flex-col items-center justify-center min-h-[60vh] text-center',
+      className
+    )}>
+      {Icon && (
+        <div className="w-16 h-16 rounded-2xl bg-nothing-gray-100 flex items-center justify-center mb-5">
+          <Icon className="w-8 h-8 text-nothing-gray-400" />
+        </div>
+      )}
+      <h2 className="font-mono text-lg font-bold text-nothing-gray-700 tracking-tight mb-2">
+        {title}
+      </h2>
+      {description && (
+        <p className="font-mono text-sm text-nothing-gray-400 max-w-xs">
+          {description}
+        </p>
+      )}
+      <div className="mt-6 flex items-center gap-1.5">
+        {[0, 1, 2].map(i => (
+          <div
+            key={i}
+            className="w-1.5 h-1.5 rounded-full bg-nothing-gray-300 animate-pulse"
+            style={{ animationDelay: `${i * 200}ms` }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/components/layout/index.ts b/apps/web/src/components/layout/index.ts
index cd3f87521..56018d367 100644
--- a/apps/web/src/components/layout/index.ts
+++ b/apps/web/src/components/layout/index.ts
@@ -7,3 +7,4 @@
 export { Sidebar } from './sidebar'
 export { Header } from './header'
 export { AppLayout } from './app-layout'
+export { ComingSoon } from './coming-soon'