LinkPort/docs/ui-design.md

Ant Design 默认界面

后续交互排查（2026-10-07）

修复编辑页连接测试与详情页不一致：目标直接测试当前草稿，结果复用详情诊断，明确成功/失败颜色并自动定位；已保存连接的协议下拉明确禁用，并解释需要新建连接，避免“可选择但无反应”。网关测试必须使用明确选择的有效账号，不静默替换。WebDAV 增加刷新/导航草稿保护、请求中的控件禁用、原始同步错误保留及正确的密码保留说明。详情连接测试成功也补充绿色 Alert。

仅调整当前 UI 和已有测试接口的接入，不迁移真实数据；使用新嵌入程序进行浏览器专项，以及现有目标草稿 Go API fixture 验证。实际结果与限制见 testing.md 的后续交互排查记录。

全站表单校验与保存反馈（2026-10-07）

原因：部分保存按钮在缺少名称、账号或文件时直接禁用，用户无法知道缺少什么；长页面和详情页的请求错误也可能出现在视口外。

共享 Field、Area、Pick 现在支持条件必填、Ant Design 错误状态、字段说明和 aria-required/aria-invalid/aria-describedby。useAction 配合 ValidationContext 提供错误汇总；提交校验失败时标红字段并聚焦第一处问题，必要时展开 details；修改该字段后清除其错误，不打断连续输入。服务端错误显示实际原因并滚动到当前可见页面；不会关闭编辑页或清空草稿。未知服务端错误不臆测归因到某个字段。

本轮覆盖代理/文件资产、目标/网关、WebDAV、备份/导入/模板、解密、监控/告警/Token、项目与环境目录及资源详情/画布关联入口。缺项导致的静默禁用改为点击后解释；忙碌、无变更、正在运行的引用保护及同步前保存要求仍保留禁用和相应说明。登录继续使用原生必填检查并显示必填文字，审计筛选保持可选。

目标/网关复用 domain 校验器，账号问题按稳定账号 ID 映射到当前输入字段，切换到相应页签和账号；汇总可点击定位。身份外观字段定位到外观页签。目标账号空密码、Redis 密码认证无需用户名、Kubernetes 无目标 host 以及已保存敏感值留空保留的规则不变。SSH 指纹不作为要求用户填写的缺项，仍自动探测并由用户确认后保存。

数值范围与服务端一致：健康检查为 0 或 10–86400 秒，日志上限 16777216–4294967296 字节，连接检查 1–3 次，WebDAV 间隔 1–10080 分钟；告警阈值/窗口/提醒天数及 Token 到期时间在提交前检查。Webhook 地址使用 URL 输入，不再按密码遮盖。备份口令、JSON 对象、代理类型、SOCKS5 凭据字节长度和 Kubernetes 资产/资源错误均有明确说明。

兼容影响：仅调整当前前端交互与前置校验，不改变 HTTP API、持久化格式或数据库迁移，不部署到真实数据目录。服务端仍为最终校验边界。

实际验证：TypeScript/Vite 与新嵌入程序构建成功；31 项 Playwright 专项通过（32.6 秒），含 420px 小屏、11 页面导航、字段级校验、跨账号页签定位、SSH 确认保存、服务端拒绝后保留草稿及隔离真实 API 的密码保留。另执行 Node domain 检查，24 项通过，两份旧测试因 Vue 依赖/文件已移除而加载失败；详见 testing.md。没有进行真实上游协议连通性或真实数据部署验收。

命令审计查询下拉恢复（2026-10-05）

原因：React 迁移把审计筛选统一渲染成 Field 文本框，丢失旧 Vue 的协议、网关、目标和处理状态选择器；用户要求恢复查询下拉。

结果与范围：增加原生 Ant Design QuerySelect（标签关联、中文可访问名称、按名称搜索、清空、全部选项、非虚拟选项），命令审计恢复网关、目标、协议及处理结果下拉。网关/目标显示名称、提交 ID，按当前项目/环境过滤并按名称及 ID 排序；处理结果使用 allowed/blocked/input 三种既有值，协议沿用实际服务类型值。操作类型仍支持任意协议命令输入，来源 IP、关键词与时间继续为原输入控件。项目/环境使用独立 AuditScopeFields 下拉，包含全部和未分配选项，并保留当前存储中的未列出范围值；范围状态仍由 App.tsx 协调。连接与审计同时复用项目/环境与事件服务下拉，事件服务覆盖同范围网关和目标。AuditFilters 负责独立筛选视图，AuditPage 继续处理查询/分页/详情。

兼容：所有条件仍在同一查询卡片中，保留上一步底色按钮与新 Logo；范围变化时仍重置审计条件，重置仅清除审计字段、保留工作区范围。HTTP 查询参数、CSV 导出、ID 值、权限、存储格式与数据库 schema 不变，无数据迁移，未部署或修改真实 data。网关/目标字段改为名称选择，不需手工输入 ID；其余辅助页和资源页的范围控件不变。

实际验证：TypeScript / Vite 生产构建及 Go 1.27.1 新嵌入 bin/dev-build/audit-selects/linkport.exe 成功，恢复 web/dist/.gitkeep。以 LINKPORT_E2E_BINARY、临时 SQLite、18711/18712 端口执行 React 迁移/domain Playwright，14/14 通过（16.7 秒）；新增回归使用 GET 资源 fixture，验证资源名称下拉、跨项目选项排除、项目/环境/网关 ID/目标 ID/协议/处理结果/关键词实际查询参数，以及重置清除审计条件并保留范围。18721 隔离验收两种审计页 × 两种主题 × 四种屏宽，共 16 组通过，查询字段与动作保持集中，项目/环境选择后与关键词一起提交，无 pageerror 或页面横向溢出；输出 16 张截图。日志和截图在 bin/dev-build/audit-selects，没有连接真实数据库或其他协议目标；git diff --check 通过。构建仍带 Node 22.10.0 版本及约 1.22 MB chunk 提示，成功生成产物。纯前端恢复不重复后端测试，本会话 audit-query 后端全量失败与 vet 通过记录仍保留。

按钮统一使用底色与彩色文字（2026-10-05）

原因：用户截图中详情为描边、编辑为纯文字、启停为实心蓝色、删除为红色描边，要求全部使用背景底色并以不同颜色文字区分动作。

结果与范围：应用级 Button 统一映射为 Ant Design 原生 variant="filled"，即浅底色及对应彩色文字，不添加 CSS 配色或自定义主题。保留旧页面 variant 接口用于默认色语义：原 contained 默认主色，其余默认中性色；显式 error/success/warning/info/secondary 分别映射 red/green/orange/cyan/purple。资源列表详情蓝色、编辑青色、启动绿色、停止橙色、删除红色；批量启停及画布编辑/启停使用相同语义。导航与列设置改为复用统一按钮，选中导航为主色底色、普通导航为中性底色，图标按钮也使用底色。禁用、大小、事件和表单提交行为沿用框架；fullWidth 显式映射到宽度，避免传给 DOM。

兼容：只改变应用操作按钮的外观和语义色，保持 Ant Design 默认浅深算法、原中文名称和请求/确认行为，无接口、数据库或偏好迁移。保留本会话查询条件合并和新 Logo；未部署或修改真实 data。系统内部的关闭、分页箭头等框架控件仍由 Ant Design 管理。

实际验证：TypeScript / Vite 生产构建与 Go 1.27.1 新嵌入 bin/dev-build/button-soft/linkport.exe 成功，恢复 web/dist/.gitkeep；LINKPORT_E2E_BINARY 指向该程序，使用临时 SQLite、18611/18612 端口执行 React 迁移/domain Playwright，13/13 通过（15.6 秒）。另以隔离 18621 端口和 GET 资源响应 fixture 检查浅深主题、1440/390/320px：详情/编辑/启动/停止/删除均使用 filled 和对应语义色，计算样式背景非透明、文字与背景不同，无 pageerror 或页面横向溢出；导出界面及动作区域截图，视觉复核通过。fixture 验收没有执行网关启停或连接真实目标。日志及截图在 bin/dev-build/button-soft，git diff --check 通过。构建仍有 Node 22.10.0 版本与约 1.22 MB chunk 提示，成功生成产物。纯前端外观更新不重复后端测试，沿用本会话 audit-query 全量后端失败与 vet 通过记录，不记为后端全量通过。

完整旧 Playwright 套件另发现 146 项，以新程序、18631/18632 端口及 --max-failures=1 --timeout=15000 执行，首项 account-editor 仍依赖旧 Vue .target-card / “配置目标”而超时，145 项未运行，另有停止后的 suite 级错误提示；不宣称全套通过，详见 bin/dev-build/button-soft/playwright-suite.log。

审计查询条件集中（2026-10-05）

原因：用户截图中的命令审计把项目/环境放在标题上方，审计字段放在标题下方，查询需要在两处操作。

结果与范围：命令审计和连接与审计取消独立的顶部范围栏，将项目、环境与网关、协议、目标、来源、类型、关键词、起止时间等页面适用条件放进标题下同一张查询卡片，使用与资源页一致的响应式字段网格。筛选、重置、导出 CSV、清除范围、管理项目与环境、刷新均集中到卡片内动作栏，筛选为主按钮。移除查询卡片内重复的审计标题，保留页面主标题。App.tsx 仍协调共享范围，AuxiliaryPage 仅传递视图，AuditPage 负责审计查询。

兼容：只调整审计页布局与按钮主次，不修改查询参数、范围变化时重置审计条件、CSV 导出、权限、偏好键或后端协议；无接口/数据库迁移，未部署或修改真实 data。其他辅助页的范围栏及资源页保持原布局。更新已有浏览器用例对事件页面主标题的定位。

实际验证：TypeScript / Vite 生产构建通过，恢复 web/dist/.gitkeep；Go 1.27.1 新嵌入 bin/dev-build/audit-query/linkport.exe，使用 LINKPORT_E2E_BINARY、临时 SQLite 和 18511/18512 端口运行 React 迁移/domain Playwright，13/13 通过（16.2 秒）。隔离 18521 端口另检查两种审计页 × 浅深主题 × 1440/1024/390/320px，共 16 组通过：每页仅一个查询区，项目/环境及全部适用字段和动作均在其中，无独立范围栏、页面横向溢出或 pageerror。真实本机 API 请求确认项目、环境和关键词一起提交。截图和日志位于 bin/dev-build/audit-query；没有连接真实数据库、SSH 或其他协议目标。git diff --check 通过。

补充全量检查：Go 1.27.1 下 go vet ./... 通过；go test ./... -count=1 -timeout=120s 未通过，失败为 API 同步口令保留、cluster MySQL fixture nil panic、desktop 路径用例、pgproxy/TestPreparedRejectsDifferentIdentity 以及 syncjob 两个明文秘密断言，完整细节在 bin/dev-build/audit-query/go-test.log。未将后端全量或协议 fixture 结果当作真实目标服务器验证。完整 Playwright 发现 146 项，使用 --max-failures=1 --timeout=15000 执行后，首项 account-editor 仍依赖旧 Vue .target-card / “配置目标”而超时，145 项未运行，另有停止后的 suite 级错误提示，不记为全套通过。构建保留 Node 22.10.0 版本和约 1.22 MB chunk 提示，仍成功。

界面密度与小屏编辑优化（2026-10-04）

原因：Ant Design 迁移后，查询卡片同时叠加应用 padding 与框架 padding，列设置独占整张卡片，手机编辑器整体高度超过视口，保存与取消需要长距离滚动；导航符号及主题标签也占据重复空间。

结果：查询区删除重复 padding，资源关键词前置，统一收紧字段、页面与标题间距；标题说明使用 Ant Design secondary 文本。列设置改为列表工具栏的 Popover，增加当前筛选结果总数，仍复用原列偏好键。导航使用统一 Ant Design 图标与 Tooltip，保留中文可访问名称、资源计数与小屏图标栏。主题下拉隐藏视觉标签但保留关联 label 和“主题”可访问名称。无资源时提供创建入口，已有资源但筛选为空时提供“清除筛选”，同时清空资源关键词、协议、状态及工作区项目/环境，保留分组和列偏好。

编辑与确认弹窗限制在当前视口内：标题和底部动作固定在弹窗布局中，内容区独立滚动，窄屏底部账号选择独占一行，保存/测试/取消始终可达。使用 Ant Design 默认主题与控件外观，CSS 只调整布局、滚动和视觉隐藏标签。新导航与列设置视图分别位于 WorkspaceNavigation.tsx、resources/ResourceColumns.tsx；App.tsx 继续协调范围状态。

范围与兼容：影响工作区导航、主题工具栏、资源查询/列表及共享弹窗；清除筛选会更新既有非敏感筛选偏好，无新增存储格式、HTTP API 或 SQLite schema 变化，不需数据迁移。凭据省略、未保存确认和请求权限不变；未部署、重启真实服务或修改真实 data。

实际验证：TypeScript / Vite 生产构建通过，恢复 web/dist/.gitkeep；Go 1.27.1 新嵌入 bin/dev-build/ui-polish/linkport-final.exe，以 LINKPORT_E2E_BINARY、临时 SQLite 和 18451/18452 端口运行 React 迁移/domain Playwright，13/13 通过。额外隔离 18431 端口验收空资源创建、空搜索/范围结果清除及列偏好跨刷新保留；11 个菜单 × 浅深主题 × 1440/1024/390/320px 共 88 组检查无 pageerror 或页面横向溢出，8 组编辑器在滚动内容前后保存按钮均完全位于视口内，截图 16 张。浏览器使用本机真实管理 API 和隔离配置；没有连接真实数据库、SSH、Kubernetes 或 WebDAV 目标。日志与截图位于 bin/dev-build/ui-polish。

Go vet ./... 通过。全量 go test ./... -count=1 -timeout=120s 仍失败于 API 的同步口令保留、cluster 的 MySQL fixture nil panic、desktop 的数据路径用例与 syncjob 的两个明文秘密断言，与前轮记录一致；协议包通过但不代表真实服务器验证。首次 Go 与 Playwright 并发时，Go 目录扫描撞上 web/test-results 清理，报目录不存在；浏览器完成后重新执行 Go 检查，上述为重跑结果。

完整旧 Playwright 套件发现 146 项，使用 --max-failures=1 --timeout=15000 运行后，首项 account-editor 因依赖旧 .target-card / “配置目标”失败，145 项未运行，另有停止后的 suite 级错误提示；不能把专项通过视为旧套件全部通过。构建保留 Node 22.10.0 低于 Vite 推荐版本与约 1.22 MB JS chunk 提示。git diff --check 通过。

当前 React + Ant Design（2026-10-04）

按用户最新要求，生产前端使用 React 19 与 Ant Design 6，删除 MUI / Emotion 依赖。App.tsx 通过 ConfigProvider 选择默认浅色或深色算法并提供中文语言包，组件外观来自 Ant Design。web/src/react/components.tsx 将现有页面接口映射到 Input、Select、Switch、Checkbox、Tabs、Modal、Collapse、Card、Table、Alert、Tag 与 Typography，避免组件库替换影响领域逻辑；应用 CSS 仅管理布局。接口、SQLite schema、主题偏好键及秘密省略规则不变，无数据迁移。当前验证见 React 迁移；下面 MUI / HeroUI 记录为历史，不代表当前版本验收。

2026-10-04：按用户最新要求，当前 React 前端采用原生 MUI 9（Material UI）与 Emotion，HeroUI 已移除。ThemeProvider 和 CssBaseline 提供默认浅色/深色外观，createTheme 只设置 palette.mode；按钮、TextField、Select、Checkbox、Switch、Tabs、Dialog、Card、Table、Alert、Chip 与 Typography 直接使用 MUI API。没有自定义主题色、组件圆角、阴影或 CSS 外观覆盖，也没有保留 HeroUI compound 兼容壳。应用 CSS 只负责布局、间距、滚动和断点。

工作区继续保留集中查询条件、宽松留白、浅色/深色/跟随系统及既有非敏感偏好。此轮无 API、SQLite schema 或真实 data 迁移。当前实现、兼容边界及实际验收见 React 迁移 和 测试记录。下文保留 HeroUI 和更早 Vue / DBX 的历史设计，不描述当前生产外观。

当前 MUI 生产构建及新嵌入 bin/dev-build/mui/linkport.exe 的 13 项迁移/domain Playwright 完整复测通过；首次 DialogTitle 重复 id 的可访问名称问题修正后重建并复测。1440、1024、390、320px 无横向溢出或 pageerror，浅深、移动与编辑器截图位于 bin/dev-build/mui。这是界面与真实管理 API 的隔离验收，没有真实远端协议服务器测试。

HeroUI 阶段（历史，2026-10-04）

2026-10-04：当前前端已改用 React 与 HeroUI 默认组件样式，旧 DBX 外观、Vue / Element Plus 和自定义主题 CSS 已移除。仅保留工作区布局 CSS。下文是历史设计记录，不描述当前生产外观；当前职责、兼容变化和验证见 React 迁移。

功能重要性与状态配色（2026-09-24）

在紧凑布局上增加语义颜色层级：主要操作和当前选中项使用蓝色；核心入口（目标、网关）同时显示“核心”文字标记；配置类图标使用紫色，监控类使用青色，辅助功能保留低强调度。浅色背景调整为淡蓝灰，内容面板保持独立层次；深色主题保留石墨底色，以亮蓝、青色和紫色提供强调。

统计卡使用对应彩色顶部边框、浅色底和数字：代理总量蓝色、运行中绿色、活跃连接青色、只读配置紫色。启动操作绿色、停止操作橙色，运行/异常状态使用带文字的色块；异常网关区域仅在有异常时变红。错误和警告提示保留标题、正文及原有图标并增加彩色边线，删除操作沿用红色。颜色不代替文字，不将只读代理数或固定菜单分类误报为告警。

浅色、深色、海蓝及跟随系统均引用共享令牌，沿用已有主题存储键。手机隐藏核心入口的小标签但保留图标颜色、可访问名称和选中状态；按钮禁用、键盘焦点及原有确认流程保持有效。范围限展示，无 API、数据迁移或协议行为变化。本节取代下方历史的黑白主按钮描述；实际验证记录见本次变更原因。

本次生产构建及基于新嵌入程序的全部 124 项 Playwright 测试通过，覆盖主题、移动布局和原有交互；下方 spawn EPERM 为此前记录，不代表当前验证状态。隔离预览位于 bin/dev-build/ui-colors-20260924/light-desktop.png、dark-mobile.png。

linkport 的全部工作区页面采用参考本地 C:\work\github\dbx 的紧凑桌面工具风格。参考范围是视觉体系与通用控件，而不是把 DBX 的数据库编辑器、Tauri 运行时、连接状态或业务功能移植进来。linkport 继续使用 Vue 3、Element Plus 和原有管理 API。

2026-09-20 已进一步实现 清单 中 UI-001 至 UI-011 的代码：资源搜索、资源树、列设置、工作区标签、操作菜单、最近访问，以及独立 URL 参数、高级连接选项、连接标识与测试反馈。工作区操作及生命周期见 工作区交互，协议生效范围见 连接配置。代码实现与运行态验收分开记录，当前浏览器验证仍受环境限制。

设计来源与对应关系

DBX 参考位置	linkport 实现
apps/desktop/src/styles/tokens.css	web/src/theme.css：中性灰配色、深色石墨背景、文字层级、4px 控件圆角、6px 面板圆角
apps/desktop/src/components/layout/AppToolbar.vue、AppSidebar.vue	web/src/App.vue、style.css：紧凑工具栏、浅灰/深灰侧栏、小尺寸线性图标、选中标记
apps/desktop/src/components/ui/button/index.ts、input/Input.vue	web/src/controls.css：按钮、输入框、焦点状态、菜单、表格和浮层的统一外观

不增加 UI 框架或图标依赖，不复制 DBX 品牌标识。AppIcon.vue 提供 linkport 自有的线性 SVG 图标。字体优先使用本地 Geist，未安装时回退到系统中文字体和 Segoe UI；没有新增网络字体请求。

覆盖范围

• 代理管理、目标服务、运行概览、网关服务、连接与审计、命令审计、拖拽连线、监控运维、配置管理、多端同步和密码解密，共 11 个导航页面。代理页维护 Kubeconfig、SSH、SOCKS5 和 sing-box 网络配置，文件仅作为使用处的凭据。SQLite 文件菜单及功能已于 2026-09-25 移除。
• 登录页、菜单搜索、版本信息、主题选择、项目/环境筛选和账号状态。
• 表格、卡片、表单、标签、通知、工作区子页面，以及目标/网关连接编辑器。
• SQL 和命令输出、导入区域、集群配置和同步冲突面板使用相同的等宽字体及圆角令牌。

浅色主题采用白色内容区、浅灰侧栏及深色主按钮；深色主题使用分层石墨背景及浅色主按钮，文字、勾选标记和按钮文字同时适配。成功、警告和失败仍以语义颜色区分，不把所有状态改成灰色。

主题选择器位于工作区顶部工具栏中，不再悬浮遮挡页面信息。登录页保留独立选择器。原有 linkport-theme 存储键以及 light、dark、ocean、system 值不变；light 的显示名称从“浅色 · 森绿”改为“浅色 · 经典”，dark 改为“深色 · 石墨”。海蓝继续提供蓝色强调色，“跟随系统”继续响应系统深浅色变化。

布局与交互

• 桌面侧栏默认 224px，可调整为 192–420px，中等宽度为 192px；720px 及以下使用 52px 图标侧栏和独立资源树子页面。手机导航保留至少 44px 的按钮高度和完整可访问名称。
• 顶部工具栏采用约 44px 高度；工作区减少装饰性留白，保留标题、说明、筛选和主要操作。
• 目标/网关编辑器使用工作区子页面布局，保留固定标题/页签/页脚、页面独立滚动和原有键盘切换。外观使用紧凑标题和分段页签。
• 宽表格和拖拽画布仍在自身容器内滚动，窄屏保留网关卡片与表单换行。版本与主题工具不占据浮动覆盖层。
• 可见焦点样式覆盖导航、按钮、主题选择及输入控件；系统启用减少动态效果时，关闭不必要的界面动画。

视觉层本身不改变协议安全策略。后续功能扩展增加了有白名单和运行支持的目标参数、连接标识以及导航状态，沿用账号权限、凭据加密、启停和未保存确认；兼容与默认值详见连接配置文档。无表结构迁移，不需重置原主题偏好。

维护入口

项目品牌图标单独使用 web/public/linkport.svg，登录、侧栏和浏览器 favicon 共用；普通功能图标仍由 AppIcon.vue 提供。启动 ASCII 标识与资源嵌入说明见 项目标识。

main.ts 按 Element Plus 基础样式、深色变量、theme.css、style.css、controls.css、responsive.css 的顺序加载全局样式。颜色和尺寸定义放在 theme.css；布局放在 style.css；公共 Element Plus 外观放在 controls.css；断点规则放在 responsive.css。独立组件的局部样式应引用这些令牌，不再定义一套硬编码主题色。

ThemePicker.vue 复用原来的 theme.ts 状态，不创建第二套偏好存储。SidebarNavigation.vue 继续使用 App 提供的菜单、计数、搜索和导航事件。

2026-10-02：登录页和顶部工具栏的主题选择器增加太阳/月亮图标按钮，可直接在浅色与深色之间切换，悬停及可访问名称指示目标主题。浅色、深色、海蓝、跟随系统下拉选择保留，继续使用 linkport-theme 存储键。跟随系统时按钮读取实际深浅色状态，点击后保存明确的浅色或深色选择；无 API 或数据迁移。桌面和手机共用此控件，实际验证见变更记录。

验证与边界

• 新增 web/tests/dbx-ui.spec.ts，覆盖 13 个菜单在浅色、深色、海蓝和桌面/手机下的主题颜色、圆角、导航状态、页面宽度及工具栏布局；另覆盖四类编辑器、页签 Home/End 切换、登录主题持久化和系统主题跟随。用例包含截图输出，但本次没有执行成功或生成截图。
• 原 web/tests/responsive.spec.ts 的手机图标断言从字符字号调整为 SVG 可见性与实际宽度，仍保留原有尺寸、固定页脚、登录和退出检查。
• 当前锁定依赖已经可用，vue-tsc --noEmit 全量类型检查通过，7 项新增纯逻辑测试函数在单进程通过；全套 Playwright 测试发现成功，共 88 项。早期离线语法检查不是当前代码的生产构建证明。
• Go 1.25.0 全部后端测试及 go vet ./... 通过。协议新增验证使用本地 fixture；数据使用隔离测试目录，未接触真实目标或工作区 data。
• npm.cmd --prefix web run build 在启动 esbuild 时失败（spawn EPERM），Playwright worker 启动也被拒绝。尚无本轮新前端产物、嵌入程序或浏览器执行/截图；不能使用旧二进制和下方其他文档的历史截图代替验收。

依赖可用后，先运行前端构建，再编译 Go 程序；不要同时替换 web/dist 和构建嵌入资产。随后将 LINKPORT_E2E_BINARY 指向刚生成的可执行文件，使用隔离数据库和空闲端口运行完整 Playwright 套件。