DirectSurface UI 正式文档
DirectSurface UI 是一套基于 Canvas 绘制的业务 UI 框架。它以 RenderObject、布局约束、组件组合、命令权限、应用上下文、运行时诊断为核心,目标是支撑复杂桌面式 Web 应用,例如工作台、表格维护、病历编辑、调试工具和大文档阅读。
本套正式文档只面向安装并使用 ds-ui 的业务开发者,所有示例和说明都以包入口公开能力为边界。组件库通过团队提供的 .tgz 制品交付,不依赖公共 npm registry;安装方式见快速开始。
阅读路径
如果你是第一次接触框架,建议按下面顺序阅读:
- 快速开始
- 应用挂载与生命周期
- 创建第一个页面
- 布局系统总览
- 组件清单
- 应用上下文与命令权限
- 表单开发与查询表格页
- 应用导航与工作区
- Vue、React 与现有应用集成
- 业务应用测试与调试
- RenderObject 基础与布局约束
- 性能总览与公共 API
设计系统和框架运行原理属于专题阅读,不应阻断第一次把应用跑起来。已经熟悉基础链路的开发者可按目录直接进入对应主题。
文档分层
正式文档按五类内容组织:
- 入门教程:带你从零完成页面和组件组合。
- 设计系统:说明业务页面如何使用组件 token、状态、交互和信息密度规范。
- 任务指南:解决上下文、命令权限、表格、弹窗、调试等具体开发任务。
- 参考手册:列出组件、参数、事件、公共 API。
- 设计解释:说明框架为什么这样组织,以及如何在复杂系统中长期维护。
目录
开始使用
核心概念
组件设计系统
布局系统
- 布局系统总览
- StackPanel 线性布局
- DockPanel 停靠布局
- GridPanel 网格布局
- Flex 弹性分配
- WrapPanel 自动换行布局
- Masonry 瀑布流布局
- AdaptiveGrid 自适应网格
- Splitter 分割面板
- ScrollViewer 滚动容器
- OverlayHost 覆盖层宿主
- 常用布局模式
- 响应式布局
组件手册
基础组件
- Text 文本
- Border 视觉容器
- Button 按钮
- IconButton 图标按钮
- ProgressBar 进度条
- Badge / Chip / Divider
- Card / Section / PageHeader
- CollapsiblePanelGroup 折叠分区
- ReviewSidebar 审阅侧栏
输入组件
- TextField 文本输入
- TextArea 多行文本
- NumberInput 数字输入
- DatePicker 日期时间
- Checkbox / Switch / Radio
- SegmentedControl 分段选择
- Slider 滑块
- ColorPicker 颜色选择
选择器
- Dropdown 单选下拉
- MultiSelectDropdown 多选下拉
- LookupEdit 查询选择
- DropTreeEdit 树形下拉
- DropTreeGridEdit 树表下拉
- DropCheckTreeEdit 树形多选下拉
数据组件
- GridView 数据表格
- TreeView 树组件
- TreeGrid 树表
- Table 静态表格
- ReportView 报表查看
- ListView 列表
- ItemsControl 项容器
- EntryGrid 键值表格
- PropertyGrid 属性表
导航和工作区
- MenuBar 菜单栏
- NavigationMenu 导航菜单
- Breadcrumb 面包屑
- Tabs 标签
- Pagination 分页
- StatusBar 状态栏
- TabView 使用说明
- TabbedWorkspace 标签工作区
- DockWorkspace 停靠工作区
- DockWorkbench 工作台停靠区
浮层和反馈
命令组件
可视化和文档
- Charts 图表
- Barcode / QRCode
- Printing Components
- ImagePreview 图片预览
- MarkdownViewer
- PlainTextEditor 大文本编辑器
- CodeEditor 代码编辑器
- ClinicalFlowSheet 临床时间流表
业务开发指南
- 常用业务场景组合
- 应用导航与工作区组合
- 应用上下文
- 命令与权限
- 页面上下文与生命周期
- 表单开发
- 查询表格页
- 主从页
- 弹窗编辑
- Tab 工作区
- 浮动窗口
- DevTools 开发工具
- ObjectInspector 对象查看器
- 运行时诊断
示例库
复杂系统接入
性能与调试
- 性能总览
- 渲染管线
- Layout 性能
- Paint 性能
- 虚拟化
- 大表格性能
- 大树性能
- 大文本编辑器性能
- 内存泄露检查清单
- Heap Snapshot 分析
- Runtime Diagnostics Panel