Files
LinkPort/docs/responsive-ui.md
T
曾志威 408f346ab1 feat: add WebDAV sync backups and unauthenticated targets
Replace active S3 sync with encrypted WebDAV synchronization and independent backups. Support explicit empty passwords and unauthenticated MongoDB, Redis, HTTP and HTTPS targets. Include migration, design and validation documentation.

Validation: build and go vet passed; Playwright 113 passed with 4 existing failures. Full Go run reproduced the existing cluster discovery test failure. Preserve unrelated SSH fingerprint changes outside this commit.
2026-09-22 14:00:42 +08:00

3.6 KiB

界面自适应

DBX 风格全站主题

全部工作区页面、登录、通用控件和编辑器改为统一的紧凑中性灰界面,详见 界面设计与验证边界。桌面侧栏默认 224px,可调整至 192–420px,中等宽度为 192px,手机为 52px;手机导航使用可访问名称和线性 SVG 图标,按钮高度仍至少 44px。顶部工具栏容纳资源搜索、版本、环境状态和主题选择,不再使用覆盖内容的悬浮主题控件。资源树在手机通过弹窗展开,工作区标签可横向滚动,编辑器内提供标签切换入口。

theme.css 提供深浅色与海蓝令牌,controls.css 统一公共控件,responsive.css 继续处理断点。连接编辑器保留原有尺寸、固定操作区与键盘交互,补上参数区、标签切换和内联测试反馈。本轮类型检查已通过,但生产构建和完整浏览器验证受 spawn EPERM 限制,不能沿用下方历史回归记录声称已通过;实际情况见设计文档和变更记录。

连接配置弹窗

目标服务与网关服务的新建、编辑入口统一使用居中弹窗。桌面最大宽度 920px、高度 820px,同时限制在当前可视窗口内;手机保留 6px 外边距。标题、配置分组与底部操作固定,中间表单独立滚动,长表单不会把测试连接或保存按钮推到窗口外。

目标配置使用“连接信息 / TLS/SSL / SSH 隧道/代理 / 高级 / 账号”分组(SSH/SFTP 隐藏 TLS/SSL),网关沿用“网关与访问 / 账号”分组。公共配置仅在基础信息页显示,账号页保留完整多账号编辑空间。顶部页签支持方向键、Home/End 切换。关闭按钮、Escape、遮罩和取消继续经过未保存确认;表单校验可切换页签并聚焦错误字段,测试结果弹窗关闭后返回当前草稿。URL 导入与字段行为见 连接配置。

样式与容器位于 ConnectionEditorDialog.vue,App.vue 继续管理表单状态及保存逻辑。弹窗容器本身仅调整展示;URL 与数据库字段变化单独记录在连接配置文档。响应式回归验证居中位置、滚动时页签和页脚固定,以及 320/390/768/1920px 窗口中的可用性;多账号用例继续验证小屏下单账号分组无需滚动。实际验证结果见 变更原因。

全局自适应规则集中在 web/src/responsive.css,在基础主题样式后加载,覆盖工作区各页面、登录页,以及弹窗和抽屉。

  • 宽屏内容随工作区伸缩;筛选、操作栏和协议选项按可用空间换行。
  • 720px 及以下使用图标导航、单列表单和网关卡片,保留配置管理、多端同步、监控运维、密码解密与退出登录入口。
  • 低高度窗口的侧边导航独立滚动。弹窗和抽屉限制为可视窗口高度,内容滚动时仍可访问底部操作。
  • 左侧菜单支持按名称和常用关键词搜索(如 WebDAV、备份);桌面直接筛选,手机点击搜索图标打开菜单选择面板。搜索结果仅包含当前角色可访问的菜单,清空或按 Escape 恢复菜单列表,Enter 打开首个匹配项。
  • 宽表格和拖拽画布在各自区域横向滚动,1050px 及以下取消固定表格操作列,避免遮挡数据。
  • 输入、日期选择器、文件控件和长名称限制在容器内,手机端筛选控件使用整行宽度。

web/tests/responsive.spec.ts 检查 320、390、768、1920px 下的所有主要导航页面,并检查目标、网关、代理、资产编辑器,以及登录和手机端退出登录。测试仅使用隔离数据库中的临时目标和网关,不连接真实目标服务。