Milestone 29 多模型管理工作台重设计提案

状态：全量设计深化中，不修改 web/src，不代表已经进入实现。当前已覆盖 M29 八模型工作台、共享操作层、Studio 原生桥和 VS Code 子集；页面清单见 screen-matrix.md，交互原型见 prototype/index.html。

设计判断

现有页面的问题不是单个组件尺寸，而是三个层级同时争夺首屏：站点导航、数据库资源树、模型专用工作台都在横向和纵向持续展开。MQ 页面又把概览、消费者、吞吐、消息列表和检查器平铺在同一视口，最终只能依靠 10-12px 字号和窄控件维持布局。

新版采用工具型 IDE 框架：

64px 全局导航轨只承载一级模块，Studio 内不重复主站菜单。
304px 资源浏览器拥有固定工具栏、独立滚动区和固定状态栏；长树不会挤出视口。
数据对象以工作区页签打开，允许同时保留 SQL、MQ topic、关系表等上下文。
每个模型使用自己的二级页签。MQ 拆成概览、消息、消费者组、配置，不再一次展示全部信息。
详情检查器按需显示在右侧，可收起；结果、历史、维护和高风险操作进入抽屉或明确命令入口。
默认正文 14px，树节点 40px，工具栏控件 36px，主标题 20px；不再用微小字号换取容量。

借鉴与取舍

参考产品	借鉴	SonnetDB 取舍
DBeaver	Database Navigator、过滤、Collapse All、Link with editor、对象编辑页签	多模型对象共用一棵资源树；增加简单/详细视图，默认不展示冗长 metadata
RedisInsight	数据类型专用 Browser、命名空间浏览、内容格式切换、底部工具入口	KV 保留专用工作台；全局工具不和资源树混排
MongoDB Compass	Collection 内部按 Documents / Schema / Indexes 分区、详情查看	文档工作台按任务分区，validator 和导入导出不占用默认浏览首屏
MinIO Console	Bucket/Object 渐进浏览、详情面板、治理动作独立	对象检查器放右侧，policy/lifecycle/retention 进入专用页签
Kafka UI	Topic → Messages / Consumer Groups / Config 的任务式导航	MQ 概览、消息、消费者和配置分开；只在概览页展示完整监控

框架尺寸

区域	默认值	行为
全局导航轨	64px	固定，可通过图标和 tooltip 识别模块
全局顶部栏	56px	固定，包含面包屑、命令搜索、连接和用户状态
资源浏览器	304px	可收起，可拖拽调整，树区独立滚动
工作区页签	44px	对象在此打开、切换和关闭
详情检查器	384px	按模型和选择状态出现，可收起和调整
正文字号	14px	辅助信息不小于 12px，主要字段 14-15px
控件高度	36px	紧凑模式最低 32px，不再使用 22-24px 主操作控件

深浅主题

深色与浅色模式共用完全相同的框架尺寸、信息架构和交互位置，不允许因主题切换造成布局跳动。

深色模式

以 concept-mq.png 为确认基准：深色顶部栏和功能轨承载全局导航，资源浏览器、工作区和检查器使用高对比浅色表面；青绿色用于 Studio 激活状态和主要选中状态。

Microsoft 365 浅色模式

以 concept-framework-microsoft365-light.png 为确认基准：

外层画布和框架 chrome 使用近白基底，并叠加低饱和冰蓝、薄荷绿、蜜桃和淡紫珠光环境色。
资源树、数据表和检查器保持白色或近白高对比表面，柔和彩色不得进入大面积数据单元格。
#0F6CBD 用于 Fluent 蓝交互状态，#061F2C 用于主要操作，#512BD4 只用于少量 Studio/.NET 识别。
健康、告警和危险状态分别使用 #107C10、#F7630C、#C50F1F，不依赖主题背景表达状态。
Copilot 多色只允许出现在 AI 入口等小尺寸识别元素，不作为页面主背景。

原型中的关键行为

点击资源树中的 Measurement、Table、Collection、KV Keyspace、Vector Index、FullText Index、MQ Topic 或 Object Bucket，可切换八种模型工作台。
每个模型的二级页签均按任务拆分；关系、文档、MQ 和对象治理不会在默认浏览页平铺全部功能。
资源浏览器可以整体收起，数据库分组可以展开或折叠。
搜索框会过滤树中的对象名称和类型。
MQ 的二级页签只呈现当前任务；消息详情检查器可以收起。
结果与历史作为共享抽屉出现；所有危险动作进入 staged preview 写审批层。
顶部连接菜单展示 Remote、Managed Local、Studio bridge 和本地 Server 健康状态。
独立 VS Code 原型只保留 Remote Explorer、SQL 三视图、只读多模型预览与 Copilot。
所有工作台沿用同一外壳，证明框架不是为单个模型定制。

全量设计资产

README.md：设计包入口与查看方式。
design-system.md：视觉 token、状态、响应式和可访问性。
screen-matrix.md：M29 页面与状态全覆盖矩阵。
interaction-spec.md：导航、检查器、结果、历史、审批和导入导出规范。
prototype/index.html：Web Admin / Studio 可交互原型。
prototype/vscode.html：VS Code Remote-first 子集原型。
prompts/README.md：17 张高保真关键帧的生成清单与提示词索引。

实现边界建议

确认原型后再拆成实现任务。第一批只改共享外壳、Explorer、字号/密度 token 和 SQL/MQ/关系表的布局挂载，不改 API、权限、写审批、历史和模型语义；文档、KV、向量、全文和对象工作台按共享框架逐个迁移。Studio bridge 只调整呈现入口，VS Code 维持开发者子集，避免把视觉重构扩大成跨交付面重写。