记录 DouUI 打算做哪些组件、按什么顺序做，以及每一批要先解决的基础设施。随进度更新。只放在仓库里，不进入文档站。
先原子，后组合 ：先把按钮、输入框、选择控件这些“最小单位”做扎实，复杂组件由它们拼出来。先解决基础设施，再做依赖它的组件 ：浮层定位、焦点管理、层级管理先于下拉框、对话框。每个组件一次做完 ：实现、样式、测试、文档、playground 一起交付，不留“之后再补文档”。只做自己会用到的 ：路线图上的组件是真实项目里会用到的，不追求数量。
组件 / 能力
状态
工具链（Bun、oxlint、Vitest、构建）
✅
主题 Token 与视觉语言
✅
Button 按钮
✅
最小可用的一组：能拼出一个设置页或登录表单。已完成（#4）。
组件
分类
状态
备注
Icon 图标
基础
✅
只提供容器，不内置图标集
Text 文本
基础
✅
variant × tone，截断、等宽
Link 链接
基础
✅
墨色 + 淡下划线，安全的外链，浅色底（soft）行内引用
Divider 分割线
布局
✅
水平 / 垂直 / 带文字
Space 间距
布局
✅
新增 space Token
Tag 标签
数据展示
✅
soft / outline / solid，可移除
Input 输入框
表单
✅
前后缀、可清空、无效状态
Checkbox / CheckboxGroup
表单
✅
部分选中
Radio / RadioGroup
表单
✅
原生 name 分组
Switch 开关
表单
✅
role="switch"，加载中可聚焦
先补一层表单上下文 ：Form / FormItem 负责标签、说明、校验信息与 aria-describedby 关联，并向内部控件下发 size、disabled、invalid。同时决定全局配置 （ConfigProvider）的形态。
上下文与全局配置先行交付（#5），其余控件基于它们实现（#6），一律通过 useFormItem() 接入表单。已完成。
组件
状态
备注
Form / FormItem 表单
✅
内置规则 + 自定义校验，水平布局标签自动对齐
ConfigProvider 全局配置
✅
默认尺寸、语言包（zhCN / en）、浮层层级
Textarea 多行输入
✅
自适应高度、字数统计，单行与输入框等高
InputNumber 数字输入
✅
步进、精度、键盘、长按连续步进
Slider 滑块
✅
单值 / 范围、刻度、键盘
SegmentedControl 分段
✅
Radio 的另一种外观，选中块滑动
基础设施先行 ：自研轻量的浮层定位（翻转、贴边、跟随）、Teleport 渲染与主题继承、浮层栈（Esc 只关最上层、点击外部识别嵌套浮层）、焦点陷阱与滚动锁定。层级从全局配置的 zIndex 起递增（useZIndex()，第 2 批已提供）。约定写在 浮层 。
分两步交付：基础设施与锚定 / 模态浮层先行（#7），选择器与反馈类组件随后（#8）。已完成。
组件
状态
备注
Tooltip 文字提示
✅
指向 / 聚焦，aria-describedby
Popover 气泡卡片
✅
非模态，Tab 进出卡片
Dropdown 下拉菜单
✅
menu 语义，方向键、首字母跳转
Dialog 对话框
✅
焦点陷阱、滚动锁定、beforeClose
Drawer 抽屉
✅
四个方向，只有内容区滚动
Select 选择器
✅
单选 / 多选 / 可搜索，combobox 语义
Toast 轻提示
✅
函数式调用，六个位置，悬停暂停
Alert 提示条
✅
语气色只用于图标、底色与描边
Spinner / Progress
✅
偶数尺寸；进度条支持不确定状态
Skeleton 骨架屏
✅
行距与真实文字一致
分两步交付：先是不依赖交互状态的展示类组件（Card、Avatar、Badge、Kbd、Empty、Descriptions），再是带键盘交互的导航与表格（Tabs、Breadcrumb、Pagination、Table）。表格的空状态直接复用 Empty，分页的每页条数复用 Select。两步合在一个 PR 里交付（#9），已完成。
组件
状态
备注
Card 卡片
✅
默认只有细描边，raised 才有阴影
Avatar 头像
✅
图片 → 首字母 → 图标逐级回退，头像组叠压
Badge 徽标
✅
默认墨色，语气色只给有含义的计数
Kbd 键盘按键
✅
细描边键帽，底边稍重
Empty 空状态
✅
线条图标 + 标题 + 下一步，不用插画
Descriptions 描述列表
✅
原生 <dl>，网格布局，可画成表格
Tabs 标签页
✅
tablist 语义，下划线滑动，面板首次显示才渲染
Breadcrumb 面包屑
✅
数据驱动，长路径折叠为可展开的省略号
Pagination 分页
✅
页码个数恒定，翻页时按钮不挪位置
Table 表格
✅
展示、排序、多选、固定表头、加载与空状态
分两步交付。第一步是数据量与层级（#10）：虚拟列表先行，树的虚拟滚动直接复用它；上传不内置任何网络代码，由使用者提供 request。第二步是日期与命令：日期选择复用 Select 的弹出与表单约定，值一律是不带时区的字符串；命令面板对话框直接建在 Dialog 上。已完成。
组件
状态
备注
VirtualList 虚拟列表
✅
高度事先已知，滚动条不跳；到底事件用于滚动加载
Tree 树
✅
平铺渲染 + aria-level，级联勾选、筛选、懒加载
Upload 上传
✅
自带 request 函数，拖拽、进度、重试、数量与大小限制
DatePicker 日期选择
✅
日 / 月 / 年与范围，可直接输入；日历可单独使用
Command 命令面板
✅
模糊匹配并标出命中字母，⌘K 唤起的对话框
前五批覆盖了“能拼出页面”的大部分场景，但对照一个日常使用的应用还差几块：后台的侧边导航、分步流程、时间与颜色这类输入、确认与结果页。下面三批补齐这些，之后再发第一个版本。挑选标准仍是“自己的项目里会用到”：轮播、水印、漫游引导这类偶尔才用的暂不列入（后来在第 19 批补上）。
每批一个 PR，评审通过后再开始下一批。
应用骨架里最常见的几块。菜单的弹出子菜单（水平模式与折叠模式）直接复用 Dropdown，不再写第二套浮层；展开动画由 Collapse 与 Menu 共用。已完成（#13）。
组件
状态
备注
Menu 导航菜单
✅
数据驱动，垂直 / 水平，可折叠为图标栏，子菜单与分组
Collapse 折叠面板
✅
手风琴模式，高度过渡，原生按钮 + aria-expanded
Steps 步骤条
✅
水平 / 垂直，完成、进行中、出错，可点击回到前面的步骤
Timeline 时间线
✅
细线串起的节点，语气色只给节点，支持进行中的末尾
StatusDot 状态点
✅
小圆点加文字表示状态，可开纯 CSS 涟漪，Timeline 当前步骤复用它
Grid 栅格
✅
CSS Grid，列数与间距随断点变化，子项可跨列
都通过 useFormItem() 接入表单，浮层沿用 Select 的弹出与键盘约定。时间、级联、颜色三个选择器共用一套字段与弹出层样式；穿梭框的两列直接建在 VirtualList 与 Checkbox 上。已完成（#14）。
组件
状态
备注
Autocomplete 自动补全
✅
输入框 + 建议列表，支持异步取建议
Cascader 级联选择
✅
多列面板，懒加载，可搜索完整路径
TimePicker 时间选择
✅
时 / 分 / 秒滚动列，可直接输入，范围
Rate 评分
✅
半星，键盘步进，role="slider"
ColorPicker 颜色选择
✅
饱和度面板 + 色相 + 透明度，预设色，可输入值
Transfer 穿梭框
✅
两列列表复用 Checkbox，可搜索，大数据用虚拟列表
Popconfirm 直接建在 Popover 上，Result 与 Empty 共用一套图标画法；图片预览复用 Dialog 的模态层（焦点、滚动锁定、Esc）。已完成（#15）。
组件
状态
备注
Popconfirm 气泡确认
✅
建在 Popover 上，确认按钮支持异步
Result 结果
✅
和 Empty 同一套线条图标，用于操作结果页
Statistic 统计数值
✅
千分位、前后缀、趋势，等宽数字
Image 图片与预览
✅
懒加载、占位与失败回退，预览支持缩放与切换
Affix / BackTop
✅
固钉与回到顶部，监听最近的滚动容器
Splitter 分割面板
✅
拖拽与键盘调整，最小尺寸，可折叠
目标是让文档站自己用 DouUI 的组件搭起来：先补齐文档页面需要、而组件库还没有的几块，并确认所有组件都能在服务端渲染。随后单独一个 PR 把文档站换成了用 DouUI 写的自定义主题，原先为了和默认主题共存而写的样式补丁一并删掉。
组件
状态
备注
Anchor 锚点导航
✅
本页目录，滚动高亮当前小节，点击平滑跳转并更新地址栏
Typography 排版
✅
.dou-prose 给整段 Markdown 正文排版，不影响内部组件
CopyButton 复制按钮
✅
代码块等处的复制按钮，复制后短暂显示“已复制”并通知读屏
服务端渲染检查
✅
所有组件都在服务端渲染并水合一遍，不出现不一致警告
文档站换成自定义主题
✅
顶栏、侧边栏、目录、搜索、代码复制都用 DouUI 组件
盘点后补上的几块：日常写应用时最先撞上的一次性确认与加载遮罩，以及让按需使用不再手写 import 的解析器。组件内部原先各自手绘的图标也统一换成了 @dou-ui/icons，和图标库同一套画法与线宽。
组件 / 能力
状态
备注
Dialog 函数式调用
✅
dialog.confirm / alert / prompt 返回 Promise，支持异步确认与校验
Loading 加载遮罩
✅
包裹组件 + v-loading 指令，全屏模式，延迟显示防闪烁
@dou-ui/resolver✅
组件、指令与函数的按需自动导入，连同每个组件的样式入口
组件样式入口
✅
dou-ui/components/<name>/style，自动带上内部用到的组件样式
内部图标换成 @dou-ui/icons
✅
28 个组件与文档站顶栏；复选框勾、评分星等组件专属图形保留
后台页面最常用的两类组件补齐进阶能力。固定列、合计行用 position: sticky 实现，不复制表格；虚拟滚动的表格与选择器都只渲染看得见的行，并用 aria-rowcount / aria-setsize 告诉读屏总数。TreeSelect 直接组合 Select 的字段与 Tree。
组件
状态
备注
Table 进阶
✅
固定列、展开行、树形数据、列宽拖拽、合计行、虚拟滚动
Select 进阶
✅
远程搜索与加载态、可创建选项、分组、大数据虚拟滚动
TreeSelect 树选择
✅
Tree 放进 Select 的弹出层，单选 / 多选与级联勾选
写应用页面时紧接着会用到的几块：整页骨架与暗色下也协调的细滚动条，两种常见的特殊输入，倒计时，以及右键菜单。ContextMenu 直接复用 Dropdown 的菜单项与键盘处理，Countdown 建在 Statistic 上。
组件
状态
备注
Layout 布局
✅
顶栏 / 侧栏 / 主区 / 页脚，可收起的侧栏，吸顶
Scrollbar 滚动条
✅
原生滚动 + 画在上方的细滚动条，可拖拽，悬停与滚动时出现
InputTag 标签输入
✅
回车或分隔符成标签，粘贴拆分，校验与上限，两段式退格删除
InputOTP 验证码输入
✅
一个原生输入框驱动多格显示，短信验证码自动填充，分组与遮盖
Countdown 倒计时
✅
格式记号，整秒对齐，useCountdown 组合式函数
ContextMenu 右键菜单
✅
在指针处打开，复用 DouDropdownItem，菜单键也能打开
盘点里剩下的较大组件。CalendarView 与日期选择共用同一套日期运算；QRCode 的编码器自己实现，不引入依赖。Mention 提及暂不做纯文本版，留待富文本编辑器，作为编辑器的扩展提供（插入的提及是一个整体，可带头像与链接）。
组件
状态
备注
CalendarView 日历视图
✅
月视图格子放日程，跨天日程、折叠“还有 N 项”，网格键盘导航
QRCode 二维码
✅
版本 1–40、四档纠错、自动掩码，中心图标，过期与加载状态
几块小而通用的东西：页面级的颜色模式切换，把控件拼成一体的组合，常用的“头像 + 名字”信息块，铺在页面里的列表选择，以及侧栏在手机上的去处。ColorPicker 的格式菜单顺势换成了 Select 与输入框的组合。
组件
状态
备注
ColorMode 颜色模式
✅
useColorMode 记住选择、跟随系统、跨标签页同步；按钮 / 开关 / 下拉三种外观，首屏脚本防闪烁
FieldGroup 组合
✅
按钮组与输入组合，边框重叠、圆角合并，统一尺寸；DouFieldGroupText 放固定文字
User 用户
✅
头像 + 名字 + 说明，三档尺寸，可替换各部分
Listbox 列表选择
✅
单选 / 多选、分组、搜索、限高，完整键盘操作与首字母跳转
Layout 窄屏抽屉
✅
侧栏在断点以下变成抽屉，DouLayoutAsideTrigger 打开
不再加新组件，而是把常用组件的能力补深：日期时间一起选，表格能分组表头、合并单元格、按列筛选，选择器能折叠标签、选对象值，再加上一个页头。已完成（#31）。
组件 / 能力
状态
备注
DatePicker 日期时间
✅
datetime / 日期时间范围、按周选择（ISO 周）、shortcuts 快捷选项、defaultTime
Table 进阶
✅
多级表头、spanMethod 合并单元格、列筛选、当前行高亮与行样式、懒加载子行、行 / 单元格事件与实例方法
Select 进阶
✅
maxTagCount 折叠、multipleLimit、valueKey 对象值、header / footer / tag / label 插槽
Cascader 多选
✅
multiple、checkStrictly、标签折叠
Input
✅
showPassword 明文切换、showCount 字数统计
Tabs
✅
可关闭、可新增、竖排（placement）、beforeLeave
Upload 照片墙
✅
listType="picture-card"，悬停预览 / 删除，上传中进度遮罩
PageHeader 页头
✅
返回、标题与副标题、面包屑 / 操作 / 内容插槽
把已有的组件整体打磨一遍：属性透传、可访问性与发版配置。首个版本何时发布另行确定。拆成几个可单独审阅的 PR：
事项
状态
备注
属性透传
✅
class / style / 其他属性落点统一，所有组件有测试覆盖
文档站样式隔离
✅
文档站改用 DouUI 自建的主题（#17）后，不再有外部样式覆盖组件
可访问性审查
✅
全部文档页亮 / 暗两套主题 axe 扫描，文字对比度达到 AA
发版准备
✅
包元数据与导出、许可证、更新日志与 bun run release、中文 README；按需样式入口已在第 10 批完成
发布到 npm 需要单独确认，不随这些 PR 自动进行。
按依赖关系展示一组节点：发布流程、任务编排、项目里程碑。只读展示，不做拖拽编辑。已完成（#42）。
组件 / 能力
状态
备注
NodeGraph 节点图
✅
自写分层布局（从左到右或从上到下，长边穿过空隙、减少交叉、偶数像素对齐）；单行 / 卡片节点，节点各部分插槽
状态与标记
✅
五种状态（含“依赖项未完成”，可自动推断）、里程碑、进度条、未完成子任务标记
交互
✅
选中、悬停高亮上下游、悬停详情弹层、平移（默认开）、缩放（默认关）、键盘沿连线移动
NodeGraphLegend 图例
✅
按实际用到的类型和状态生成，也可单独使用
几块日常写应用时会用到的新组件：长列表滚动加载、拖拽排序、头像裁剪，以及公告条、可选标签、文本省略这类小件。ColorPicker 的面板拆成了可以单独使用的 ColorPanel。
组件 / 能力
状态
备注
InfiniteScroll 滚动加载
✅
组件带加载中 / 失败重试 / 没有更多的底部提示；另有 v-infinite-scroll 指令
Sortable 拖拽排序
✅
指针与键盘排序、拖拽手柄、网格、同组列表之间移动、边缘自动滚动；useSortable
ImageCropper 图片裁剪
✅
固定裁剪框，拖动、滚轮 / 双指缩放、旋转，圆形遮罩，输出 Blob 或画布
Banner 公告条
✅
贴顶整行，浅色 / 实色，可关闭
CheckTag 可选标签
✅
单个切换与标签组，单选 / 多选，aria-pressed
Ellipsis 文本省略
✅
多行截断，末尾展开 / 收起，截断时悬停提示
ColorPanel 取色面板
✅
从 ColorPicker 拆出，可直接放在页面里
需要大量手动录入日期和时间的表单，用分段输入比弹出选择器更快。两者与 DatePicker、TimePicker 使用同样的值格式。
组件 / 能力
状态
备注
InputDate 日期输入
✅
年 / 月 / 日分段键入，自动跳段，方向键增减，可配合弹出日历
InputTime 时间输入
✅
时 / 分 / 秒分段键入，输入方式与 InputDate 相同
组件清单已经基本齐全，这一批不加新组件，补的是已有组件的能力深度，其中树和表格的拖拽复用了第 17 批的拖拽排序。
组件 / 能力
状态
备注
Tree 拖拽
✅
拖到节点前 / 后 / 里面，allowDrag / allowDrop，Alt + 方向键移动
Table 行拖拽排序
✅
拖动手柄列，键盘排序；排序、筛选生效时暂停
Dropdown 子菜单
✅
DouDropdownSub 可嵌套，悬停或 → 展开；右键菜单里同样可用
DropdownButton 分裂按钮
✅
主操作 + 箭头菜单，两半共用外观
Progress 环形 / 仪表盘
✅
type="circle" / "dashboard"，中间放百分比或任意内容
Slider 竖向 / 带输入框
✅
vertical 从下往上；show-input 旁边放同步的数字输入框
Dialog 拖动与全屏
✅
拖标题栏移动（不出视口），v-model:fullscreen 与标题栏切换按钮
Drawer 拖边调整大小
✅
拖内侧边缘或用方向键，v-model:size，min-size / max-size
Image 预览工具栏
✅
水平 / 垂直翻转，downloadable 下载
搭建 AI 对话界面用的一组组件。只负责界面，请求模型、解析流式响应、保存记录都由应用自己完成。已完成（#51）。
组件 / 能力
状态
备注
ChatMessage 对话消息
✅
按片段渲染一条回复，复制、编辑后重发、版本切换
ChatSteps 执行步骤
✅
收成一行摘要，展开为时间线
ChatPlan 任务计划
✅
五种状态的步骤清单，完成计数
ChatSources 引用来源
✅
来源列表与正文角标，悬停预览
ChatArtifact 产物卡片
✅
文档 / 代码 / 图片等类型，生成中状态，配合侧边面板
ChatConfirm 操作确认
✅
允许 / 总是允许 / 拒绝，危险操作
ChatQuestion 选项提问
✅
助手提问，用户从几个选项中选一个回答；等待中 / 已回答 / 已撤回
ChatContextMeter 上下文用量
✅
圆环显示用量，警告与危险阈值
ChatBubble 消息气泡
✅
左 / 右 / 居中三种位置，浅色底 / 边框 / 无气泡，加载中圆点，底部操作
ChatList 消息列表
✅
停在底部时跟随新内容，上翻后停止跟随并显示回到底部按钮，到顶事件
ChatInput 对话输入框
✅
回车 / Ctrl+回车发送，输入法组词不发送，生成中可停止或继续输入，/ 命令与 @ 引用，粘贴拖入文件
StreamText 流式文字
✅
逐字平滑显示，积压时自动加快，不拆开表情符号，插槽自定义渲染
ChatReasoning 思考过程
✅
思考中扫光并展开，结束后显示用时并收起
ChatToolCall 工具调用
✅
四种状态，参数和结果格式化显示，等待确认时的操作区
ChatSuggestions 提示建议
✅
胶囊与卡片两种样式
ChatAttachments 附件列表
✅
图片缩略图、按类型的文件图标、上传进度与失败状态
Shimmer 微光文字
✅
扫光状态文字，减弱动态效果时静止
Markdown 流式渲染
✅
增量解析、写了一半的语法按最终样子显示、渐显；按类型替换渲染，::: 自定义块（#297）
ChatMessage markdown
✅
文字与思考过程片段按 Markdown 渲染，[1] 显示为来源角标，markdown-* 插槽透传（#297）
CodeBlock streaming
🚧
流式时只高亮完整的行，异步高亮返回前保留已高亮的行（#297）
补上之前暂缓的三个组件，收尾几项已有组件的小能力，并把主题、全局配置与组合式函数这些基础能力补完整。
组件 / 能力
状态
备注
Watermark 水印
✅
文字 / 图片，旋转、间距、交错排布；颜色跟随主题，水印层被删改后自动恢复
Carousel 轮播
✅
横向 / 纵向、滑动 / 淡入淡出，拖动切换，自动播放可暂停，循环时不跨轨道飞过
Tour 漫游引导
✅
遮罩挖空目标，卡片贴近目标或居中，方向键切换，actions 插槽自定义按钮
createTheme 从品牌色生成
✅
亮暗两套主题，在 OKLCH 中只调明度，保证文字对比度 4.5:1
ConfigProvider 补深
✅
defaults 按组件设置默认属性，teleport 统一浮层渲染位置
组合式函数
✅
导出 useFloating、useLayer、useFocusTrap、useScrollLock，新增指南页
Tooltip 跟随鼠标
✅
followCursor；interactive 控制能否移入
Slider 数值气泡
✅
tooltip，拖动或聚焦时显示，'always' 常驻
Progress 条内文字与分段色
✅
textInside；color 接受颜色、分段数组或函数
Tree 手风琴
✅
accordion 同一层级只展开一个
Transfer 右侧顺序
✅
targetOrder：原顺序 / 追加到末尾 / 插到开头
表单接入通用的 schema 规范，日期与数字的写法交给语言包，补三个展示类小组件。
组件 / 能力
状态
备注
Form 接 Standard Schema
✅
字段规则与整表 schema 都可直接用 schema，只依赖规范接口
语言包的地区约定
✅
region：每周第一天、日期与时间格式、千分位与小数点
DatePicker 显示格式
✅
displayFormat，默认跟随语言包，值的形式不变
国际化指南
✅
切换语言、自定义语言包、地区约定、与应用的国际化方案配合
Marquee 跑马灯
✅
横向 / 纵向无缝循环，悬停暂停，两端渐隐，减弱动效时停止
ProgressGroup 分段进度
✅
一条进度条中按占比显示多段，图例（可竖排）与悬停提示
Highlight 关键词高亮
✅
多关键词、整词匹配；Autocomplete 与 Tree 的筛选高亮改为同一套切分逻辑
CalendarView 补上按时间排布的视图，再补几个写应用时常要自己实现的能力。
组件 / 能力
状态
备注
CalendarView 周视图与日视图
✅
v-model:view；纵向时间轴，重叠的日程并排，全天一行，当前时间线，hours 设置时段
useHotkey 快捷键✅
mod 按平台取 ⌘ 或 Ctrl，组合键与按键序列，输入时不触发，卸载自动解绑；CommandDialog 改用它
Kbd keys
✅
按平台显示同一个快捷键
Table 列的显示与顺序
✅
v-model:column-keys；文档示例用 Popover、Checkbox、Sortable 拼出列设置面板
Statistic 数值过渡
✅
animated，按精度取整，减弱动效时直接跳变
Upload 粘贴与文件夹
✅
paste-target 粘贴加入文件；directory 选择或拖入文件夹，保留相对路径
先把断点整理成基础规范，再补上几项之前搁置的小事和一个新组件。
组件 / 能力
状态
备注
断点规范
✅
指南新增“断点”页；@dou-ui/theme 导出 breakpoints，Grid、Layout、Banner 使用同一组断点
useBreakpoints / useClipboard✅
读取当前断点；复制文本并给出 copied 状态，CopyButton 改用它
繁体中文语言包 zhTW
✅
每周从周日开始，日期写作 YYYY/MM/DD
表单动态增减字段
✅
“增删联系人”示例；出错的字段在值变化时（例如增删行）重新校验
DatePicker 季度
✅
type="quarter"，值为 YYYY-Qn；月份、季度、年份也支持 range
Masonry 瀑布流
✅
放进最矮的一列，columns 按断点取值，高度变化后重新排布，DOM 顺序与数据一致
补上可按下的按钮和工具栏，新增展示代码的组件，再做几项文档工作。
组件 / 能力
状态
备注
Toggle / ToggleGroup
✅
可按下的按钮，v-model:pressed 与 aria-pressed；按钮组分单选和多选
Toolbar 工具栏
✅
role="toolbar"，方向键在控件之间移动焦点，只有一个控件在 Tab 顺序里；可放分隔线
useRovingFocus✅
一组控件共用一个 Tab 位置，方向键移动焦点，Toolbar 与 ToggleGroup 使用它
CodeBlock 代码块
✅
文件名、复制、行号、标记行、折叠与换行；highlight 接入高亮工具，接口按 shiki 设计，也支持它的行标记与差异
主题编辑器
✅
指南新增页面：调整颜色、中性色倾向、圆角和字号，实时预览亮暗两套主题并给出代码
Table 行内编辑、分步表单
✅
两个文档示例：表格单元格内编辑并校验；Steps 配合 Form 分步校验后提交
第 24 批 · 菜单栏、热力图、相对时间与区块 ✅ 两个新组件和一个小组件，文档新增“区块”栏目，用完整页面展示组件的组合方式。
组件 / 能力
状态
备注
Menubar 菜单栏
✅
一排菜单按钮，打开一个后悬停切换；方向键在按钮和菜单之间移动，菜单内容与 Dropdown 相同
菜单项勾选、单选与快捷键
✅
DouDropdownItem 支持 v-model:checked 与 shortcut，新增 DouDropdownRadioGroup
带说明的菜单项
✅
DouDropdownItem 与 ContextMenuItem 的 description，名字下面一行说明，图标与快捷键对齐名字
CalendarHeatmap 日历热力图
✅
按天显示数值，颜色分档由语气色推出；悬停提示，键盘逐天浏览，每周第一天跟随语言包
RelativeTime 相对时间
✅
“3 分钟前”，按需自动刷新，超过一定时间改为日期；新增 useNow
文档“区块”栏目
✅
登录页、设置页（未保存提示条）、数据管理页（筛选、多选、批量删除、抽屉编辑、分页）
一个轻量的数据展示组件，“区块”栏目再加三页。富文本编辑器的方案单独讨论，确认后另行分批实现。
组件 / 能力
状态
备注
Sparkline 迷你图
✅
折线、面积、柱状；SVG 绘制，无依赖；长序列按宽度保留每段的最高和最低点，标记与描述按完整数据计算
区块：仪表盘
✅
统计卡片加迷你图、部署日历、最近动态、带走势的服务列表
区块：AI 对话页
✅
对话记录（新建、重命名、删除）、流式回复、欢迎页；窄时对话记录收进抽屉
区块：错误页
✅
404、403、500 与网络断开
第 26 批 · 滑动抽屉、行内编辑与更多区块 ✅ 手机上常用的抽屉手势、一个通用的行内编辑组件和两个组合式函数，“区块”栏目再加两页。
组件 / 能力
状态
备注
Drawer 滑动关闭与停靠点
✅
swipeable 向边缘拖动关闭；snap-points 与 v-model:snap，内容滚到顶后才拖动抽屉
Editable 行内编辑
✅
文字原处变成输入框，Enter 保存、Esc 取消，validate 校验，多行与双击打开
useElementSize / useIntersection✅
另有 useResizeObserver；Sparkline、Ellipsis、Marquee 改用它们
区块：看板
✅
卡片跨列拖动、行内重命名、抽屉查看详情；窄屏时列横向滑动，详情从底部弹出
区块：文件管理
✅
目录树、列表与网格视图、拖入上传、右键菜单与批量操作
修掉手机上实测出的浮层问题，并让表单可以整张只读展示。
组件 / 能力
状态
备注
DatePicker 窄屏面板
✅
窄屏时范围只显示一个月，快捷选项排成一行、时间列移到日历下方，面板超出可用高度时在内部滚动
Cascader 窄屏逐级选择
✅
窄屏时一次只显示当前一级，顶部显示已选路径并可返回上一级
ContextMenu 长按
✅
触摸屏长按打开，并在按下处发出 contextmenu 事件，“针对某一项”的写法照样可用
ContextMenu 按目标决定打开
✅
v-model:target 每次右键先清空，beforeOpen 返回 false 不打开；里面已处理的右键不再打开
Form readonly
✅
下发给内部所有输入类控件；各选择器、勾选类控件、滑块等都补上 readonly，勾选类控件补上 invalid
Switch 自定义值与切换前确认
✅
checked-value / unchecked-value，before-change 等待期间显示加载
补齐分页、标签页、提示、数字输入和时间选择上常被问到的能力。
组件 / 能力
状态
备注
Pagination 跳页
✅
点省略号列出被省略的页码（虚拟滚动，键盘可选），show-jumper 显示页码输入框
Tabs 标签较多时
✅
横向滚动，选中的标签自动滚入视野，两侧渐隐并显示翻页按钮
Toast 进行中的任务
✅
toast.loading、toast.promise，以及原地改写的 update
InputNumber 显示格式与清空
✅
format 支持千分位、货币、百分比或函数，聚焦时显示原始数字；clearable
禁用时间
✅
TimePicker disabled-time 按列给规则；DatePicker 的 datetime 按日子给规则
ChatBubble 变体改名
✅
soft / outline / ghost，与按钮、标签的命名一致
新包 @dou-ui/editor，以 ProseMirror 为内核的块编辑器。内核按协同编辑的要求设计（随机 UUID 作为块 id、状态都存在文档里、撤销记录可替换），协同扩展在第二阶段提供。
组件 / 能力
状态
备注
块数据模型
✅
v-model 绑定块数组；块可以嵌套，id 在拆分、合并、移动时保持不变
基础块
✅
正文、一到三级标题、无序和有序列表、待办事项、引用、代码、分隔线
斜杠菜单
✅
输入 / 或中文输入法下的 、 打开，支持拼音筛选
块手柄与块菜单
✅
+ 添加块，拖动移动块（可以跨层级，靠近边缘时自动滚动），菜单里转换、复制、移动、删除
块选择
✅
Esc 选中整块，方向键移动和扩大选区，整块删除、复制、移动、缩进
格式工具栏
✅
选中文字后出现：粗体、斜体、下划线、删除线、行内代码、链接，以及转换块类型
Markdown 快捷输入
✅
标题、列表、待办、引用、代码、分隔线，以及粗体、斜体、删除线、行内代码
粘贴
✅
保留嵌套列表和任务列表；只接受安全的链接地址
扩展系统
✅
editorKit 按需取舍，defineEditorExtension 编写扩展，defineBlock 用 Vue 组件写自定义块
组件 / 能力
状态
备注
协同编辑（Yjs）
✅
@dou-ui/editor/collaboration：同步（移动、缩进与并发编辑不会互相覆盖）、带名字的远端光标与选区、只撤销自己的修改
图片块
✅
上传、粘贴、拖入、链接嵌入，拖动调整宽度，说明文字
代码块高亮
✅
高亮函数与 CodeBlock 相同，可在 ConfigProvider 中统一设置；语言选择与复制按钮
提示块、折叠块
✅
提示块四种语气；折叠块的展开状态只属于当前读者，只读时也能展开
提及
✅
输入 @ 搜索并插入，搜索可以是异步的；名字与标识一起保存
导入导出
✅
HTML 与 Markdown 的导入导出，写法由各扩展声明；Markdown 解析使用可选的 markdown-it
组件 / 能力
状态
备注
表格
✅
行列菜单、列宽、对齐、表头行与表头列、合并单元格、HTML 与 Markdown 导入导出
表格的协同编辑
✅
行、列、格子分开存储，移动行列与编辑格子不会互相覆盖
手机上的表格与拖动
✅
触摸友好的把手，拖动把手移动整行整列
组件 / 能力
状态
备注
按块修改的方法
✅
insertBlocks、updateBlock、removeBlocks、moveBlocks、focusBlock，每次一步撤销；transact 合成一步；撤销重做方法
修改与光标事件
✅
transaction 给出新增、删除、修改、移动的块和来源；v-model:selection 给出光标所在的块
大文档性能
✅
2000 个块（含表格、代码块、折叠块）的基准，输入一个字约 12ms
常用格式和块
✅
文字颜色与高亮、段落对齐、附件块、嵌入块，打开链接前的 linkOpen 事件
组件 / 能力
状态
备注
白板与流程图块
✅
@dou-ui/editor/flow：whiteboardBlock、flowBlock，文档里显示预览，全屏编辑，撤销用文档的记录，可调高度（#429）
属性按条目合并
✅
块 spec 的 mergeProps：协同编辑时列表属性按 id 逐项、data 按键合并，顺序一致；checkProps 供 checkDocument 用
收起分组同步
⏳
收起分组目前只在本人的全屏编辑器里有效，不随文档保存；之后看是否需要按人保存
组件 / 能力
状态
备注
评论讨论卡片
✅
DouCommentThread：回复、编辑、删除、解决与重新打开；修改以 CommentAction 描述，可在服务端重放
块编辑器评论
✅
被评论的文字随文档保存，讨论在 v-model:comments；只读时也能评论；协同扩展同步讨论；白板和流程图块里的图形和连线可以评论；自定义块用 defineBlock({ comments }) 接入块里的讨论
电子表格评论
✅
单元格 comment，与批注并存；只读时也能评论；协同扩展同步讨论
流程图评论
✅
节点和连线的 comments，一处可有多条讨论；只读时也能评论。尚未包含：画布空白处的讨论、协同扩展同步讨论内容
历史版本
✅
编辑器与表格的对比视图、可撤销且会同步的恢复
组件 / 能力
状态
备注
画布与节点
✅
@dou-ui/flow：平移、缩放、触屏手势；选择、框选、拖动，对齐参考线、端口吸附与网格吸附；撤销重做；键盘操作
端口连线
✅
拖出连线、改接、端口类型与连接规则、键盘连线、复制粘贴、节点内表单
扩展与附属组件
✅
扩展系统、小地图、一键整理、AI 工作流示例
组件 / 能力
状态
备注
编辑交互
✅
从任意元素拖入节点（触屏长按拖出）、拖线到空白处建节点、右键 / 长按菜单、选中节点上方的工具栏
连线与大图
✅
贝塞尔、折线、直线，连线标签与流动动画；视口外不渲染，缩小后的简化形态，500 节点基准
分组框
✅
内置 group 节点，拖进拖出、一起移动、折叠、调整大小，键盘编组与读屏播报
协同编辑
✅
@dou-ui/flow/collaboration：字段级合并、拖动松手才写入、显示他人的选中和拖动、只撤销自己的修改
整理与长连线
✅
直链对齐、长连线绕开节点（points）、不相连的几组分开排（#312）
宽层折行
⏳
某一层（常见是第一层的起点）节点很多时限宽或折成两行，免得整理后图太宽
扇出标签避让
⏳
一个节点分出几条带标签的连线时，标签落在同一横带上，长了会叠在一起；按标签宽度加宽同层间距或错开标签
链头对齐
⏳
扇出里的一个节点再接一条直链时（如 A→B→C→D），B 被拉到父节点和下一节点之间，第一段是斜的
折线长连线
⏳
折线走 points 时，几条长短连线在层间共用同一条横线，标签压线
缩放取整漂移
⏳
非 100% 缩放下连续整理两次，奇数宽度的节点可能挪 1px（端口度量随缩放取整）
组件 / 能力
状态
备注
形状、便签与连接线
✅
@dou-ui/flow/whiteboard：工具栏、矩形 / 椭圆 / 菱形、便签、文字，锚点吸附的连接线
画笔、图片与变换
✅
压感画笔、橡皮、图片、缩放与旋转、层级
导出与示例
✅
exportSVG / exportPNG（节点类型的 draw），头脑风暴区块，白板协同示例
连接线样式
✅
走向（直线 / 折线 / 曲线）、线型（实线 / 虚线 / 点线 / 点划线）、箭头位置，连线工具栏
多选整体变换
⏳
多选时包住整组的框，整体缩放与旋转
整理
✅
按连接线画的方向排，连线挪到相对两边，回头线外侧绕回，标注跟着贴着的形状走（#374）
组件 / 能力
状态
备注
内核与展示
✅
@dou-ui/gantt：时间精确到分钟，工作日历（含调休），小时到年六级刻度与连续缩放，任务表格与时间轴双栏，纵横虚拟渲染，汇总任务、里程碑与依赖线
拖拽编辑
✅
拖动与调整、拖进度、拉线建依赖（含原因提示）、为未排期任务画日期、事务与撤销重做
扩展与键盘
✅
defineGanttExtension（列、依赖与移动规则、快捷键、标记线、图层）、useGantt()、标记线、键盘移动与建依赖、读屏播报
组件 / 能力
状态
备注
自动排期与关键路径
✅
scheduling="auto"、拖动时预览被推动的任务、schedule()、关键路径、未满足依赖的提示
表格编辑与菜单
✅
行拖动排序与缩进、行内编辑、右键 / 长按菜单接口、触屏手柄放大
协同与性能
✅
@dou-ui/gantt/collaboration（只撤销自己的修改、显示他人的选中和拖动）、1 万条任务的性能基准
组件 / 能力
状态
备注
资源排期
✅
@dou-ui/gantt/scheduler：按人员或会议室分行、负载条与超载提示、跨行拖动、框选空白时间段
基线与导出
✅
计划与实际对比、导出 PNG / SVG / CSV、打印样式，以及“产品发布排期”“会议室预约”两个完整示例
导入 CSV
✅
importCSV / readCSV 读回 toCSV 的列，按 ID 更新任务并保留依赖，一步撤销；Excel 文件经 @dou-ui/sheet-xlsx 转成 CSV 后导入
数据是按行的二维数组，修改只复制改动的行，组件按行判断是否重绘。
组件 / 能力
状态
备注
网格与编辑内核
✅
横纵虚拟滚动、冻结行列、多区域选择与键盘导航、直接输入（含输入法）、数字与日期格式、样式、事务与撤销
剪贴板与行列操作
✅
复制粘贴与其他表格软件互通、填充柄、行列宽高拖动与自适应、插入删除隐藏移动行列、右键菜单
扩展与附属组件
✅
defineSheetExtension、单元格类型（日期、下拉、勾选）、合并单元格、多工作表与标签栏、CSV、格式工具栏
组件 / 能力
状态
备注
公式引擎
✅
自研解析与按需、增量计算，129 个常用函数，自定义函数，@dou-ui/sheet/formula
公式编辑
✅
编辑栏、引用着色、点选和方向键插入引用、函数名补全与参数提示
数据整理
✅
排序、筛选、条件格式、数据验证，区块“部门预算”“门店排班”
协同编辑
✅
@dou-ui/sheet/collaboration：行列 id 稳定，公式和规则按行列 id 保存，并发插删行不错位，显示他人的选区和正在编辑的格子，只撤销自己的修改
导出与打印
✅
exportSVG、exportPNG 按表格的样子画出单元格；print 按 A4 分页，冻结的行列每页重复
分组折叠行列
✅
整行、整列分组，最多嵌套 8 层，括线与折叠按钮、层级按钮，Alt + Shift + → / ←，只读时只折叠当前显示
批注
✅
单元格 note，右上角标记，悬停或点按查看，Shift + F2 编辑，随复制、填充、排序移动
第二批函数
✅
统计（MEDIAN、RANK、STDEV 等）、取整与对数、SWITCH、TEXTBEFORE、工作日与周数、XMATCH、PMT 等 65 个
扩展可以加命令、工具栏按钮和读写文件的方式，表格自己的功能也走同一套机制。
组件 / 能力
状态
备注
命令与工具栏
✅
defineSheetCommand，按键、右键菜单、工具栏按名字使用命令，扩展可以替换内置命令，useSheet().commands
导出器与导入器
✅
defineSheetExporter、defineSheetImporter，工具栏导出菜单与导入按钮，拖入文件，组件外 exportWorkbook，不含组件的入口 @dou-ui/sheet/core（Worker、服务端）
更多扩展钩子
⏳
扩展的 update、transformPaste、绘制层 layers，以及单元格类型的 draw
@dou-ui/sheet-xlsx✅
不依赖第三方库读写 .xlsx：值、公式、格式、样式、合并、冻结、分组、批注、验证、条件格式、筛选；导入时列出放不下的内容
透视表与仪表盘导出
⏳
透视表、仪表盘的表格部件直接使用表格的导出器
组件 / 能力
状态
备注
内核与折线图
✅
@dou-ui/chart：组合式子组件、canvas 画系列、刻度和标签用 DOM 文字（可选中、可读屏）、线性 / 对数 / 时间 / 类目轴、折线与面积图
更多图表类型
✅
柱状图（堆叠、负值、横向）、散点与气泡图、饼图与环形图、组合图与双数值轴、defineChartSeries 自定义系列
提示框与交互
✅
DouChartTooltip、点击选中、悬停事件 hover、图例开关与 v-model:hidden、键盘浏览与读屏、入场和更新动画
组件 / 能力
状态
备注
缩放与框选
✅
DouChartZoom（滚轮、拖动、双指、键盘，多图联动）、DouChartBrush、DouChartRange 区间条
大数据与实时
✅
百万点抽稀、按列给数据、实时追加、空闲时建索引，性能基准进入 CI
组件 / 能力
状态
备注
标注、导出与服务端渲染
✅
DouChartMarker（参考线、区间、点）、exportSVG / exportPNG、加载状态、服务端输出静态 SVG
区块与按行上色
✅
“经营看板”“实时监控”“门店对比”三个区块，柱状图和散点图按行上色
组件 / 能力
状态
备注
数据细节
✅
数据标签、百分比堆叠、阶梯线、区间面积（y0）、悬停突出系列
联动与无障碍
✅
提示框联动（group）、数据表视图（v-model:table）、自定义色板、图例位置
热力图、雷达图、漏斗图
✅
DouChartHeatmap（连续色阶）、DouChartRadar、DouChartFunnel（转化率）
更多图表与坐标轴
✅
瀑布图、直方图、箱线图、仪表盘、矩形树图、旭日图；坐标轴反向与类目排序；饼图起止角度与玫瑰图；图案填充
组件 / 能力
状态
备注
描述与渲染器
✅
@dou-ui/form-builder：JSON 表单描述、DouFormRenderer、按表单宽度变化的栅格、分组、规则、自定义字段类型
表达式与联动
✅
安全的表达式（不执行任意代码）、显示 / 禁用 / 必填 / 公式、表达式校验、选项来源
标签页、分步与列表
✅
分步校验、可增删排序的列表字段、提交时去掉隐藏字段的值、描述结构校验与版本迁移
组件 / 能力
状态
备注
设计器内核
✅
字段面板、画布、属性面板、结构树、事务与撤销重做、多选、键盘操作
拖拽与布局
✅
拖入、排序、跨分组移动、拖动调整宽度、手机长按拖动与抽屉式面板；页签拖动排序后续补上
规则与预览
✅
可视化条件编辑、表达式补全与即时检查、校验规则编辑、多端预览、导入导出 JSON、扩展
协同编辑
✅
@dou-ui/form-builder/collaboration：按字段合并、移动只写入被移动的节点、显示他人的选中、只撤销自己的修改
区块示例
✅
活动报名表 、设备报修单 ；大表单压测进入性能预算；分步表单的读屏
组件 / 能力
状态
备注
编辑内核
✅
@dou-ui/code：按行的平衡树、事务与撤销、只绘制可见行、输入法内联组字、多选区、键盘与触控
语言与编辑命令
✅
增量分词与语法色变量（CodeBlock 共用）、内置轻量语言、自动缩进、括号闭合、注释、移动行
多光标与查找替换
✅
选中相同的词、上下加光标、列选择、查找替换与滚动条标记
折叠、换行与触控
✅
自动换行、折叠、手机上的选区把手与符号栏
扩展、补全与对比
✅
装饰与侧栏、诊断、补全与片段、代码输入框、对比视图
协同与集成
✅
Yjs 协同、Shiki 适配、编辑器代码块与表格公式接入、代码练习与配置编辑区块
超大文件
✅
worker 分词、百万行压测、可选的小地图
语言服务
✅
@dou-ui/code/lsp：补全、悬停、参数提示、推送与拉取的问题、跳转定义（含触屏工具栏入口）；worker 示例。尚未包含：补全项的附加修改与按需取说明、代码操作、重命名、格式化
行号栏触屏点击区
⏳
可点击的行号栏格子只有 16×20，低于 40px 点击区；CodeDiff 批注示例要在手机上点它。计划在触屏上扩大点击区或另给入口
组件 / 能力
状态
备注
内核与透视表
✅
@dou-ui/pivot：列式汇总内核、小计与总计、多级表头、展开折叠、排序筛选、双向虚拟滚动
字段面板与常用分析
✅
拖动字段到行 / 列 / 值 / 筛选、筛选弹层、日期与数值分组、表格式布局、列宽调整
Worker 与大数据
✅
百万条记录在 worker 中汇总、列数据转移、加载态、自定义引擎（服务端汇总）
显示方式与条件格式
✅
占比 / 差值 / 累计 / 排名等显示方式、计算值、数据条与色阶、前 N 项与按值筛选
明细与衔接
✅
查看明细、复制与导出、与表格和图表衔接
示例与区块
✅
销售分析 、工单统计 ；选中、复制、展开折叠的读屏播报
组件 / 能力
状态
备注
网格布局
✅
@dou-ui/dashboard：布局引擎（压紧、碰撞、并排互换、锁定项）、拖动与缩放、触屏长按、键盘与读屏
断点与拖入
✅
按容器宽度切换列数并分别保存布局、手机上的单列排序、从外部拖入新格子
仪表盘与编辑
✅
文档模型、格子类型注册、格子外框、编辑与查看模式、撤销重做、添加格子的面板
数据源与筛选联动
✅
按数据源去重请求、视口外延迟加载、定时刷新、筛选栏、格子之间互相筛选
常用格子与协同
✅
统计数字、文字、表格格子，图表与透视表适配；Yjs 协同
示例与区块
✅
运营大盘 、服务大盘 、可自定义的首页 ；200 格子拖动进入性能预算
仪表盘评论
✅
格子标题栏的评论按钮显示讨论条数，讨论 id 随格子保存；不能编辑时也能评论；activeComment 与侧栏联动。图表数据点上的评论 ⏳
格子设置校验
⏳
格子类型提供 props 的校验（或 JSON Schema），checkDocument 据此报 bad-props，程序或 AI 生成的仪表盘保存前就能查出类型不对的设置
来自业务反馈 #363，设计见 PR 描述。
组件 / 能力
状态
备注
Tabs 拖动排序
✅
draggable、Alt 加方向键、触屏长按；group + name 跨组拖动，统一的 move 事件
Dock 停靠面板
✅
可存成 JSON 的二叉布局树，拖到边缘拆分、拖到中间并入、空组合并、从外部元素拖入；moveDockTab 等函数；每组的 extra 插槽，v-model:active-group 记最近用过的组
跨 Dock 与浮动面板
⏳
在两个 Dock 之间拖动、把标签拖出成为浮动面板
移动时保留内容状态
⏳
标签换组时内容会重新渲染，计划让内容在组之间移动而不重建
拖动细节
⏳
拖到组底边最下面约 4px 时没有高亮；手机上拖动的标签靠右时，跟着指针的那块被屏幕边缘截掉
键盘跨组移动
⏳
现在只能在组内用 Alt 加方向键挪动，跨组需要使用方用 splitDockTab / moveDockTab 做菜单
国际化 ：组件自己渲染的文字一律放进语言包（Locale），通过 ConfigProvider 或 app.use(DouUI, { locale }) 替换。新组件引入新文案时，同时补齐 zhCN、zhTW 与 en。暗色模式核对 ：每个组件都在亮 / 暗两套主题下截图确认。可访问性 ：每个组件写明键盘与读屏行为，并在测试中覆盖关键的 ARIA 属性。英文文案的单复数（⏳） ：{count} comments 一类英文文案在数量为 1 时读作“1 comments”（仪表盘、流程图评论等全库的 {count} xxx 文案都是如此）。计划让语言包支持按数量选择单复数的写法，各组件共用。流程图工具栏翻到下方时避开相邻节点（⏳） ：选中较窄的节点、上方放不下工具栏时，工具栏翻到节点下方，可能盖住下面相邻的节点。计划让翻到下方时也避开周围的节点（连线工具栏已经这样做），放不下时再横向让开。触屏查看被截断的文字（⏳） ：Tag、ProgressGroup 图例、ChatQuestion 回答后的选项文字等以省略号截断的文字，桌面上悬停可以看到全文，触屏上还看不到。计划统一提供点按查看全文的方式，各组件共用。