From 1b7cd7c320244c1e01d2f02d500f560ae12afa79 Mon Sep 17 00:00:00 2001 From: zyycn Date: Mon, 15 Jun 2026 23:29:30 +0800 Subject: [PATCH] feat: restore dashboard layout fidelity Co-authored-by: Codex --- web/index.html | 6 + web/package.json | 1 + web/pnpm-lock.yaml | 8 + web/src/components/base/BaseCard.vue | 25 +-- web/src/components/base/BaseTable.vue | 109 ++++++++---- web/src/layout/components/AppSidebar.vue | 165 ++++++++++++++---- web/src/layout/components/AppTopbar.vue | 93 ++++++++-- web/src/layout/index.vue | 9 +- web/src/styles/base.css | 44 ++++- web/src/styles/tokens.css | 6 +- web/src/views/dashboard/DashboardView.vue | 6 +- .../components/AccountOverviewCard.vue | 63 ++++--- .../dashboard/components/EventLogCard.vue | 83 ++++----- .../views/dashboard/components/MetricCard.vue | 29 +-- .../dashboard/components/RequestTrendCard.vue | 19 +- .../components/ServiceStatusCard.vue | 7 +- web/tests/base-table.test.mjs | 47 +++++ web/tests/dashboard-design.test.mjs | 163 +++++++++++++++-- web/tests/sidebar-design.test.mjs | 50 +++--- 19 files changed, 696 insertions(+), 237 deletions(-) create mode 100644 web/tests/base-table.test.mjs diff --git a/web/index.html b/web/index.html index 58d3af594..4bef0543b 100644 --- a/web/index.html +++ b/web/index.html @@ -3,6 +3,12 @@ + + + Codex Proxy RS diff --git a/web/package.json b/web/package.json index c0cac3f81..4fa50fc80 100644 --- a/web/package.json +++ b/web/package.json @@ -13,6 +13,7 @@ "@lucide/vue": "^1.18.0", "axios": "^1.18.0", "echarts": "^6.1.0", + "gsap": "^3.15.0", "pinia": "^3.0.4", "vue": "^3.5.38", "vue-router": "^5.1.0" diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 094c9eda7..d9aa1bc6e 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: echarts: specifier: ^6.1.0 version: 6.1.0 + gsap: + specifier: ^3.15.0 + version: 3.15.0 pinia: specifier: ^3.0.4 version: 3.0.4(typescript@6.0.3)(vue@3.5.38(typescript@6.0.3)) @@ -571,6 +574,9 @@ packages: graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} + gsap@3.15.0: + resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==} + has-symbols@1.1.0: resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==} engines: {node: '>= 0.4'} @@ -1406,6 +1412,8 @@ snapshots: graceful-fs@4.2.11: {} + gsap@3.15.0: {} + has-symbols@1.1.0: {} has-tostringtag@1.0.2: diff --git a/web/src/components/base/BaseCard.vue b/web/src/components/base/BaseCard.vue index 6106552e6..a23e4d1b0 100644 --- a/web/src/components/base/BaseCard.vue +++ b/web/src/components/base/BaseCard.vue @@ -1,27 +1,32 @@ diff --git a/web/src/components/base/BaseTable.vue b/web/src/components/base/BaseTable.vue index a99c5fda1..a224b48e6 100644 --- a/web/src/components/base/BaseTable.vue +++ b/web/src/components/base/BaseTable.vue @@ -4,12 +4,27 @@ interface TableColumn { label: string width?: string align?: 'left' | 'right' | 'center' + headerClass?: string + cellClass?: string } -defineProps<{ +withDefaults(defineProps<{ columns: TableColumn[] rows: object[] -}>() + tableClass?: string + headerRowClass?: string + bodyRowClass?: string + headerCellClass?: string + bodyCellClass?: string + striped?: boolean +}>(), { + tableClass: 'min-w-[620px]', + headerRowClass: 'h-10 rounded-xl bg-[var(--cp-bg-subtle)] text-[11px] font-bold text-[var(--cp-text-muted)]', + bodyRowClass: 'h-[52px] rounded-[10px]', + headerCellClass: 'min-w-0 overflow-hidden bg-[var(--cp-bg-subtle)] px-3 text-ellipsis whitespace-nowrap first:rounded-l-xl last:rounded-r-xl', + bodyCellClass: 'min-w-0 overflow-hidden px-3 text-ellipsis whitespace-nowrap text-xs font-semibold text-[var(--cp-text-primary)] first:rounded-l-[10px] last:rounded-r-[10px]', + striped: true, +}) function cellValue(row: object, key: string) { return (row as Record)[key] @@ -20,44 +35,72 @@ function rowKey(row: object, index: number) { return typeof id === 'string' || typeof id === 'number' ? id : index } -function gridColumns(columns: TableColumn[]) { - return columns.map((column) => column.width ?? '1fr').join(' ') +function columnWidth(column: TableColumn) { + return column.width ?? 'auto' +} + +function alignClass(column: TableColumn) { + if (column.align === 'center') { + return 'text-center' + } + + if (column.align === 'right') { + return 'text-right' + } + + return 'text-left' +} + +function rowSurfaceClass(index: number, striped: boolean) { + return striped && index % 2 === 1 ? 'bg-[var(--cp-bg-subtle)]' : 'bg-[var(--cp-bg-surface)]' } diff --git a/web/src/layout/components/AppSidebar.vue b/web/src/layout/components/AppSidebar.vue index e026bd43a..e637e48f8 100644 --- a/web/src/layout/components/AppSidebar.vue +++ b/web/src/layout/components/AppSidebar.vue @@ -1,10 +1,13 @@ diff --git a/web/src/layout/components/AppTopbar.vue b/web/src/layout/components/AppTopbar.vue index 8d88bbf0e..d9e5e6e41 100644 --- a/web/src/layout/components/AppTopbar.vue +++ b/web/src/layout/components/AppTopbar.vue @@ -1,4 +1,6 @@ diff --git a/web/src/layout/index.vue b/web/src/layout/index.vue index 5938599b9..0faceb9a2 100644 --- a/web/src/layout/index.vue +++ b/web/src/layout/index.vue @@ -1,13 +1,16 @@