From 49c130f3913f13b7a58622ec05f480f8675f22f4 Mon Sep 17 00:00:00 2001 From: Rogee Date: Tue, 22 Sep 2026 17:34:28 +0800 Subject: [PATCH] =?UTF-8?q?style(web):=20=E4=BE=A7=E6=A0=8F=E4=BB=85?= =?UTF-8?q?=E4=BF=9D=E7=95=99=E6=A8=A1=E5=9D=97=E8=8F=9C=E5=8D=95=E5=B9=B6?= =?UTF-8?q?=E8=A1=A5=E5=9B=BE=E6=A0=87=EF=BC=9B=E5=86=85=E5=AE=B9=E5=8C=BA?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=20Card=20wrapper=20=E4=B8=8E=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E8=83=8C=E6=99=AF=E5=8C=BA=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 侧栏 menuHeaderRender=false，折叠菜单只剩模块链接（标题由 TopNav 呈现） - 菜单补齐 10 个常用语义图标（账号导入/我的账号/监控账号/竞品分析/工作台/采集设置/任务中心/运行环境/网络出口/网关管理） - 列表与详情/新建/编辑页主内容统一 包裹，对齐 pro 官方预览的灰底+白卡层次（17 处） - metadata.ts → metadata.tsx（菜单 icon 需 JSX）；ScanEyeOutlined/ChatSettingsOutlined 在当前 @ant-design/icons 不存在，改用 EyeOutlined/CommentOutlined --- .../accounts/AccountManagementList.tsx | 5 +-- web/src/layouts/index.tsx | 17 ++------- web/src/pages/accounts/$id/edit.tsx | 4 +-- web/src/pages/accounts/$id/index.tsx | 4 +-- web/src/pages/accounts/import.tsx | 5 +-- web/src/pages/attempts/$id/index.tsx | 4 +-- web/src/pages/browsers/$id/index.tsx | 4 +-- web/src/pages/browsers/index.tsx | 6 ++-- web/src/pages/browsers/new.tsx | 4 +-- web/src/pages/creator/competitors/index.tsx | 4 +-- web/src/pages/creator/settings/index.tsx | 4 +-- web/src/pages/creator/workbench/index.tsx | 4 +-- web/src/pages/drafts/$id/index.tsx | 4 +-- web/src/pages/gateways/index.tsx | 6 ++-- web/src/pages/network-exits/$id/index.tsx | 4 +-- web/src/pages/network-exits/index.tsx | 6 ++-- web/src/pages/tasks/$id/index.tsx | 4 +-- web/src/pages/tasks/index.tsx | 6 ++-- web/src/utils/{metadata.ts => metadata.tsx} | 35 +++++++++++++------ 19 files changed, 67 insertions(+), 63 deletions(-) rename web/src/utils/{metadata.ts => metadata.tsx} (77%) diff --git a/web/src/components/accounts/AccountManagementList.tsx b/web/src/components/accounts/AccountManagementList.tsx index b4921f7..6e6609b 100644 --- a/web/src/components/accounts/AccountManagementList.tsx +++ b/web/src/components/accounts/AccountManagementList.tsx @@ -3,6 +3,7 @@ import { history } from '@umijs/max'; import { Alert, Button, + Card, Form, Input, Modal, @@ -223,7 +224,7 @@ export default function AccountManagementList({ mode }: { mode: 'owned' | 'monit ]; return ( -
+ {contextHolder}
@@ -266,6 +267,6 @@ export default function AccountManagementList({ mode }: { mode: 'owned' | 'monit -
+ ); } diff --git a/web/src/layouts/index.tsx b/web/src/layouts/index.tsx index a9414d8..4a537b4 100644 --- a/web/src/layouts/index.tsx +++ b/web/src/layouts/index.tsx @@ -4,8 +4,7 @@ import { Dropdown } from 'antd'; import { LogoutOutlined } from '@ant-design/icons'; import { menu } from '@/utils/metadata'; -// 菜单结构与 web.archived/src/app/Layout.jsx 完全一致（运营 / 资源 两组），页头标题规则对齐 pageMetadataRules。 -// /login 独立页：不走 ProLayout（对齐归档版布局分支）。 +// 菜单结构对齐 web.archived/src/app/Layout.jsx（运营 / 资源 两组）；侧栏仅保留模块链接菜单，标题由 TopNav 呈现。 // Umi 4（react-router 6）全局布局：location 用 useLocation()，子路由用 渲染 // （渲染器不传 children prop，用 children 会导致整页空白且无任何报错）。 export default function Layout() { @@ -20,21 +19,11 @@ export default function Layout() { fixSiderbar route={{ routes: menu } as any} location={location} + // 不渲染侧栏品牌区（logo/标题），折叠菜单仅保留模块链接。 + menuHeaderRender={false} menuItemRender={(item, dom) => ( item.path && history.push(item.path)}>{dom} )} - menuHeaderRender={(logo, title) => ( - history.push('/accounts')} - > - {logo} - -
{title}
-
运营控制台
- - - )} avatarProps={{ icon: , size: 'small', diff --git a/web/src/pages/accounts/$id/edit.tsx b/web/src/pages/accounts/$id/edit.tsx index 6828357..55ff42e 100644 --- a/web/src/pages/accounts/$id/edit.tsx +++ b/web/src/pages/accounts/$id/edit.tsx @@ -477,7 +477,7 @@ export default function Page() { ); return ( -
+ {contextHolder}
@@ -497,6 +497,6 @@ export default function Page() { { key: 'strategy', label: '自动响应策略', children: strategyTab }, ]} /> -
+ ); } diff --git a/web/src/pages/accounts/$id/index.tsx b/web/src/pages/accounts/$id/index.tsx index 2dba860..822f0e7 100644 --- a/web/src/pages/accounts/$id/index.tsx +++ b/web/src/pages/accounts/$id/index.tsx @@ -223,7 +223,7 @@ export default function Page() { ]; return ( -
+ {contextHolder}
@@ -255,6 +255,6 @@ export default function Page() { >

{`暂停账号 ${account.name}？待领取任务将进入 hold，恢复账号不会自动恢复既有 hold。`}

-
+ ); } diff --git a/web/src/pages/accounts/import.tsx b/web/src/pages/accounts/import.tsx index b6f4c54..e1f5c3d 100644 --- a/web/src/pages/accounts/import.tsx +++ b/web/src/pages/accounts/import.tsx @@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react'; import { Alert, Button, + Card, Form, Input, Modal, @@ -157,7 +158,7 @@ export default function Page() { ]; return ( -
+ {contextHolder}
+ ); } diff --git a/web/src/pages/attempts/$id/index.tsx b/web/src/pages/attempts/$id/index.tsx index 6ec6e99..bc7d145 100644 --- a/web/src/pages/attempts/$id/index.tsx +++ b/web/src/pages/attempts/$id/index.tsx @@ -35,7 +35,7 @@ export default function Page() { if (!attempt) return null; return ( -
+
Attempt 详情 @@ -66,6 +66,6 @@ export default function Page() { -
+ ); } diff --git a/web/src/pages/browsers/$id/index.tsx b/web/src/pages/browsers/$id/index.tsx index 12f6328..1d1d158 100644 --- a/web/src/pages/browsers/$id/index.tsx +++ b/web/src/pages/browsers/$id/index.tsx @@ -47,7 +47,7 @@ export default function Page() { if (error || !runtime) return ; return ( -
+
{`${runtime.name}（${runtime.alias}）`} @@ -106,6 +106,6 @@ export default function Page() { -
+ ); } diff --git a/web/src/pages/browsers/index.tsx b/web/src/pages/browsers/index.tsx index e79bf28..454f677 100644 --- a/web/src/pages/browsers/index.tsx +++ b/web/src/pages/browsers/index.tsx @@ -2,7 +2,7 @@ // 动作保持显式动词（start/stop/recycle），启停禁用条件与归档版一致。 import { useCallback, useEffect, useState } from 'react'; import { history } from '@umijs/max'; -import { Alert, Button, Popconfirm, Space, Table, Tag, Typography, message } from 'antd'; +import { Alert, Button, Card, Popconfirm, Space, Table, Tag, Typography, message } from 'antd'; import { CopyOutlined, PlusOutlined } from '@ant-design/icons'; import type { ColumnsType } from 'antd/es/table'; import { browserAction, getList } from '@/services/api'; @@ -160,7 +160,7 @@ export default function Page() { ]; return ( -
+ {contextHolder}
启动、停止并回收隔离的指纹浏览器运行环境 @@ -179,6 +179,6 @@ export default function Page() { pagination={false} locale={{ emptyText: '暂无运行环境，创建第一个隔离 Profile。' }} /> -
+ ); } diff --git a/web/src/pages/browsers/new.tsx b/web/src/pages/browsers/new.tsx index 6f4cf08..55bb0a9 100644 --- a/web/src/pages/browsers/new.tsx +++ b/web/src/pages/browsers/new.tsx @@ -102,7 +102,7 @@ export default function Page() { } return ( -
+ {contextHolder}
为已授权且暂停的账号绑定网关、指纹与网络出口 @@ -201,6 +201,6 @@ export default function Page() { -
+ ); } diff --git a/web/src/pages/creator/competitors/index.tsx b/web/src/pages/creator/competitors/index.tsx index b821e45..94e4d45 100644 --- a/web/src/pages/creator/competitors/index.tsx +++ b/web/src/pages/creator/competitors/index.tsx @@ -262,7 +262,7 @@ export default function Page() { !['not_started', 'running', 'failed'].includes(material.transcription_status); return ( -
+ {contextHolder} 共 {workPageInfo.total} 条}> 时间窗口、指标阈值和“不可用”字段由后端原样保留。 @@ -408,6 +408,6 @@ export default function Page() { > 当前素材文稿尚未保存，确定放弃并切换吗？ -
+ ); } diff --git a/web/src/pages/creator/settings/index.tsx b/web/src/pages/creator/settings/index.tsx index 96a86b3..8601b83 100644 --- a/web/src/pages/creator/settings/index.tsx +++ b/web/src/pages/creator/settings/index.tsx @@ -74,7 +74,7 @@ export default function Page() { if (error) return 重试} />; return ( -
+ {contextHolder} 按配置类别管理 UTC 采集窗口、指标采集和已批准的服务。 @@ -158,6 +158,6 @@ export default function Page() {
-
+ ); } diff --git a/web/src/pages/creator/workbench/index.tsx b/web/src/pages/creator/workbench/index.tsx index 05f7d50..b6cc212 100644 --- a/web/src/pages/creator/workbench/index.tsx +++ b/web/src/pages/creator/workbench/index.tsx @@ -1001,7 +1001,7 @@ export default function Page() { ); return ( -
+ {contextHolder} 当前私信文案尚未发送，放弃后再切换吗？ -
+ ); } diff --git a/web/src/pages/drafts/$id/index.tsx b/web/src/pages/drafts/$id/index.tsx index eee5e7a..2d94b55 100644 --- a/web/src/pages/drafts/$id/index.tsx +++ b/web/src/pages/drafts/$id/index.tsx @@ -110,7 +110,7 @@ export default function Page() { } return ( -
+ {contextHolder}
@@ -222,6 +222,6 @@ export default function Page() { {binding?.network_exit_id || '当前机器直连'} 的只读确认快照。版本变化后必须重新确认。

-
+ ); } diff --git a/web/src/pages/gateways/index.tsx b/web/src/pages/gateways/index.tsx index b3e76ad..a325209 100644 --- a/web/src/pages/gateways/index.tsx +++ b/web/src/pages/gateways/index.tsx @@ -1,6 +1,6 @@ // 网关管理：语义对齐 web.archived GatewaysPage.jsx（注册/编辑 Modal、令牌显隐复制、删除）。 import { useCallback, useEffect, useState } from 'react'; -import { Alert, Button, Form, Input, Modal, Popconfirm, Space, Table, Typography, message } from 'antd'; +import { Alert, Button, Card, Form, Input, Modal, Popconfirm, Space, Table, Typography, message } from 'antd'; import { CopyOutlined, EyeInvisibleOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons'; import type { ColumnsType } from 'antd/es/table'; import { create, getList, remove, update } from '@/services/api'; @@ -170,7 +170,7 @@ export default function Page() { ]; return ( -
+ {contextHolder}
注册宿主机 native browser gateway；令牌须与 gateway 进程的 GATEWAY_TOKEN 一致 @@ -223,7 +223,7 @@ export default function Page() { onCancel={() => setEditing(null)} onSubmit={updateGateway} /> -
+ ); } diff --git a/web/src/pages/network-exits/$id/index.tsx b/web/src/pages/network-exits/$id/index.tsx index b71411f..e96782b 100644 --- a/web/src/pages/network-exits/$id/index.tsx +++ b/web/src/pages/network-exits/$id/index.tsx @@ -42,7 +42,7 @@ export default function Page() { const known = Object.hasOwn(healthText, exit.health_status ?? ''); return ( -
+
网络出口详情 @@ -71,6 +71,6 @@ export default function Page() { -
+ ); } diff --git a/web/src/pages/network-exits/index.tsx b/web/src/pages/network-exits/index.tsx index abde3f1..9e242ba 100644 --- a/web/src/pages/network-exits/index.tsx +++ b/web/src/pages/network-exits/index.tsx @@ -1,7 +1,7 @@ // 网络出口：语义对齐 web.archived NetworkExitsPage.jsx（列表 + 创建/编辑 Modal + 检测/启停/删除动作 + 出口详情页）。 import { useCallback, useEffect, useMemo, useState } from 'react'; import { history } from '@umijs/max'; -import { Alert, Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Table, Tag, Typography, message } from 'antd'; +import { Alert, Button, Card, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Table, Tag, Typography, message } from 'antd'; import { PlusOutlined } from '@ant-design/icons'; import type { ColumnsType } from 'antd/es/table'; import { create, getOne, getList, networkExitAction, remove, update } from '@/services/api'; @@ -278,7 +278,7 @@ export default function Page() { ]; return ( -
+ {contextHolder}
维护固定出口、健康观测与账号绑定 @@ -332,6 +332,6 @@ export default function Page() { onCancel={() => setEditing(null)} onSubmit={updateExit} /> -
+ ); } diff --git a/web/src/pages/tasks/$id/index.tsx b/web/src/pages/tasks/$id/index.tsx index ead848f..292ce67 100644 --- a/web/src/pages/tasks/$id/index.tsx +++ b/web/src/pages/tasks/$id/index.tsx @@ -222,7 +222,7 @@ export default function Page() { ]; return ( -
+ {contextHolder}
@@ -253,6 +253,6 @@ export default function Page() { 尚未产生执行尝试。 )} -
+ ); } diff --git a/web/src/pages/tasks/index.tsx b/web/src/pages/tasks/index.tsx index 3e8f94f..55a89f7 100644 --- a/web/src/pages/tasks/index.tsx +++ b/web/src/pages/tasks/index.tsx @@ -1,7 +1,7 @@ // 任务中心列表：语义对齐 web.archived TasksPage.jsx 的 TaskList。 import { useCallback, useEffect, useState } from 'react'; import { history } from '@umijs/max'; -import { Alert, Button, Input, Select, Space, Table, Tag, Typography } from 'antd'; +import { Alert, Button, Card, Input, Select, Space, Table, Tag, Typography } from 'antd'; import type { ColumnsType } from 'antd/es/table'; import { getList } from '@/services/api'; import { dateTime } from '@/utils/helpers'; @@ -110,7 +110,7 @@ export default function Page() { ]; return ( -
+ 逐条处理暂停、版本变化与未知执行结果；不会自动重试或更换出口 -
+ ); } diff --git a/web/src/utils/metadata.ts b/web/src/utils/metadata.tsx similarity index 77% rename from web/src/utils/metadata.ts rename to web/src/utils/metadata.tsx index 973a7f9..59cb681 100644 --- a/web/src/utils/metadata.ts +++ b/web/src/utils/metadata.tsx @@ -1,4 +1,16 @@ import type { MenuDataItem } from '@ant-design/pro-components'; +import { + CloudDownloadOutlined, + UserOutlined, + EyeOutlined, + LineChartOutlined, + CommentOutlined, + SettingOutlined, + ProfileOutlined, + LaptopOutlined, + ClusterOutlined, + GatewayOutlined, +} from '@ant-design/icons'; // 页头标题/副标题规则：语义对齐 web.archived/src/app/Layout.jsx 的 pageMetadataRules。 const rules: Array<{ test: (path: string) => boolean; title: string; subtitle: string }> = [ @@ -25,26 +37,27 @@ const rules: Array<{ test: (path: string) => boolean; title: string; subtitle: s { test: (p) => p.startsWith('/gateways/'), title: '网关详情', subtitle: '查看网关连接信息和运行状态。' }, ]; -// 菜单结构：与 web.archived/src/app/Layout.jsx 完全一致（运营 / 资源 两组）。 +// 菜单结构：与 web.archived/src/app/Layout.jsx 完全一致（运营 / 资源 两组）； +// icon 选用 antd 图标库里语义常见、用户一眼可识别的隐喻。 export const menu: MenuDataItem[] = [ { name: '运营', children: [ - { path: '/accounts/import', name: '账号导入' }, - { path: '/accounts', name: '我的账号' }, - { path: '/accounts/monitoring', name: '监控账号' }, - { path: '/creator/competitors', name: '竞品分析' }, - { path: '/creator/workbench', name: '运营工作台' }, - { path: '/creator/settings', name: '采集设置' }, - { path: '/tasks', name: '任务中心' }, + { path: '/accounts/import', name: '账号导入', icon: }, + { path: '/accounts', name: '我的账号', icon: }, + { path: '/accounts/monitoring', name: '监控账号', icon: }, + { path: '/creator/competitors', name: '竞品分析', icon: }, + { path: '/creator/workbench', name: '运营工作台', icon: }, + { path: '/creator/settings', name: '采集设置', icon: }, + { path: '/tasks', name: '任务中心', icon: }, ], }, { name: '资源', children: [ - { path: '/browsers', name: '运行环境' }, - { path: '/network-exits', name: '网络出口' }, - { path: '/gateways', name: '网关管理' }, + { path: '/browsers', name: '运行环境', icon: }, + { path: '/network-exits', name: '网络出口', icon: }, + { path: '/gateways', name: '网关管理', icon: }, ], }, ];