4.1 KiB
界面自适应
DBX 风格全站主题
2026-09-24 在原紧凑布局上加入功能与状态配色：核心入口、选中导航和主操作使用蓝色，状态与风险采用绿/橙/红，统计卡增加彩色边框和浅底。手机保留图标和文字可访问名称，详细规则见 功能重要性与状态配色。以下中性灰描述及受限验证为历史记录。
全部工作区页面、登录、通用控件和编辑器改为统一的紧凑中性灰界面，详见 界面设计与验证边界。桌面侧栏默认 224px，可调整至 192–420px，中等宽度为 192px，手机为 52px；手机导航使用可访问名称和线性 SVG 图标，按钮高度仍至少 44px。顶部工具栏容纳资源搜索、版本、环境状态和主题选择，不再使用覆盖内容的悬浮主题控件。资源树在手机通过工作区子页面展开，工作区标签可横向滚动，编辑器内提供标签切换入口。
theme.css 提供深浅色与海蓝令牌，controls.css 统一公共控件，responsive.css 继续处理断点。连接编辑器使用工作区可用宽度、固定操作区与原有键盘交互，并保留参数区、标签切换和内联测试反馈。本轮类型检查已通过，但生产构建和完整浏览器验证受 spawn EPERM 限制，不能沿用下方历史回归记录声称已通过；实际情况见设计文档和变更记录。
连接配置子页面
目标服务与网关服务的新建、编辑入口统一使用工作区子页面。页面保留顶部工作区栏和左侧导航，正文在可用区域内使用稳定宽度；手机占满侧栏之外的剩余空间。标题、配置分组与底部操作固定，页面正文独立滚动，长表单不会把测试连接或保存按钮推到窗口外。
目标配置使用“连接信息 / TLS/SSL / SSH 隧道/代理 / 高级 / 账号”分组（SSH/SFTP 隐藏 TLS/SSL），网关沿用“网关与访问 / 账号”分组。公共配置仅在基础信息页显示，账号页保留完整多账号编辑空间。顶部页签支持方向键、Home/End 切换。返回按钮、Escape 和取消继续经过未保存确认；表单校验可切换页签并聚焦错误字段，测试结果子页面关闭后返回当前草稿。URL 导入与字段行为见 连接配置。
样式与容器位于 ConnectionEditorDialog.vue 和 WorkspacePage.vue，App.vue 继续管理表单状态及保存逻辑。页面容器本身仅调整展示；URL 与数据库字段变化单独记录在连接配置文档。响应式回归验证工作区边界、滚动时页签和页脚固定，以及 320/390/768/1920px 窗口中的可用性；多账号用例继续验证小屏账号编辑可达。实际验证结果见 变更原因。
全局自适应规则集中在 web/src/responsive.css，在基础主题样式后加载，覆盖工作区各页面、登录页和通用控件；子页面容器样式由 WorkspacePage.vue 维护。
- 宽屏内容随工作区伸缩；筛选、操作栏和协议选项按可用空间换行。
- 720px 及以下使用图标导航、单列表单和网关卡片，保留配置管理、多端同步、监控运维、密码解密与退出登录入口。
- 低高度窗口的侧边导航与工作区子页面独立滚动，内容滚动时仍可访问固定底部操作。
- 左侧菜单支持按名称和常用关键词搜索（如 WebDAV、备份）；桌面直接筛选，手机点击搜索图标打开菜单选择面板。搜索结果仅包含当前角色可访问的菜单，清空或按 Escape 恢复菜单列表，Enter 打开首个匹配项。
- 宽表格和拖拽画布在各自区域横向滚动，1050px 及以下取消固定表格操作列，避免遮挡数据。
- 输入、日期选择器、文件控件和长名称限制在容器内，手机端筛选控件使用整行宽度。
web/tests/responsive.spec.ts 检查 320、390、768、1920px 下的所有主要导航页面，并检查目标、网关、代理、资产编辑器，以及登录和手机端退出登录。测试仅使用隔离数据库中的临时目标和网关，不连接真实目标服务。