CMS 内容管理
带状态筛选、批量操作与抽屉编辑的内容后台
用法
内容工作台
筛选、排序与翻页模拟取数;点一行打开编辑抽屉。图中为示例数据。
示例加载中...
看板排期
按流转看同一批文章的四列看板,适合每周排期会看全局,不适合逐条改字段。
拖动卡片排序或换列,展开后可拖到本周某天排期。图中为示例数据。
示例加载中...
概述
Tuff 文档与博客的内容工作台:按状态找稿件、批量发布或归档、在抽屉里编辑,每次改动都可撤销。
- 筛选、搜索、排序与翻页各模拟约 350ms 的取数:表格先留旧数据,超过 120ms 才换成同版式的骨架行,版面不跳。
- 排序作用于过滤后的全部文章,再切出当前页;翻页或换筛选会清空选择,因为表头全选只覆盖当前页。
- 编辑、发布、归档与删除立即生效,提示停留约 5 秒可「撤销」;抽屉只在保存时校验。
- 列内点行直接打开抽屉;展开后(≥ 960px)增加三列与详情栏;窄于 640px 时只留标题列。
- 看板排期:列内拖动重排,拖到另一列即换状态,展开后拖到本周某天即排期;每次移动都可撤销。
- 看板排期:键盘上每列一个停靠点,空格拿起、↑ / ↓ 移动、← / → 换列、Esc 取消;窄于 640px 时一次只显示一列。
- 看板排期:进入视口后有协作者上线并移动一张卡片;点击或按键即停止;减少动态效果时直接显示最终状态。
自定义
- 接真实接口时,用请求替换模拟取数,并在下一次查询发出时取消上一次。
- 后端分页时保持关闭
sort-on-client,把排序、筛选与页码一起交给接口。 - 新字段优先放进抽屉与详情栏;窄容器里按优先级删列,不横向滚动。
- 需要所见即所得时可换成 TxMarkdownEditor,前提是宿主能生成它的工具栏图标类。
- 看板排期:跨列拖放由宿主处理(放行
dragover、drop只记目标、根节点dragend时改数据);卡片内的按钮要拦下 Enter 与空格。
相关组件
| 区域 | 组件 | 作用 |
|---|---|---|
| 顶栏 | TxSearchInput、TxButton | 搜索与新建文章 |
| 状态筛选 | TxFilterChips | 单选状态与计数 |
| 文章表格 | TxDataTable、TxStatusBadge、TxTag、TxAvatar | 多选、受控排序与吸顶表头 |
| 行菜单 | TxDropdownMenu、TxIconButton | 单行编辑、发布与删除 |
| 加载与空态 | TxSkeleton、TxSearchEmpty | 骨架行与清除筛选 |
| 底栏 | TxPagination、TxButton | 分页与批量操作 |
| 结果提示 | TxToastPanel | 可撤销的结果提示 |
| 详情栏(展开后) | TxCellLink、TxMarkdownView、TxNoSelection | 摘要、元数据与正文预览 |
| 编辑抽屉 | TxDrawer、TxForm、TxInput、TxSelect、TxTagInput、TxDatePicker、TxFlatRadio、TuffSwitch、TxTextarea、TxSplitButton | 带校验的编辑表单 |
| 顶栏(看板排期) | TxAvatarGroup / TxAvatar | 在线协作者 |
| 快捷筛选(看板排期) | TxFilterChips、TxDropdownMenu | 淡化不匹配的卡片 |
| 看板列(看板排期) | TxSortableList、TxBadge、TxTooltip | 列内拖动与在制上限 |
| 卡片(看板排期) | TxTag、TxAvatar、TxDropdownMenu / TxDropdownSubmenu、TxProgressBar | 栏目、作者、时间与菜单 |
| 本周排期(看板排期,展开后) | TxIconButton、TxButton | 拖到某天即排期 |
| 卡片详情(看板排期) | TxModal、TxFlatRadio、TxDatePicker、TxCheckbox、TxStatusBadge、TxInput | 阶段、日期、清单与评论 |