组件/CMS 内容管理

CMS 内容管理

带状态筛选、批量操作与抽屉编辑的内容后台

自 0.6.0BETA

当前组件文档正在开发中

该页面正在持续迁移,示例与 API 可能会继续调整。

用法

内容工作台

筛选、排序与翻页模拟取数;点一行打开编辑抽屉。图中为示例数据。

示例加载中...

看板排期

按流转看同一批文章的四列看板,适合每周排期会看全局,不适合逐条改字段。

拖动卡片排序或换列,展开后可拖到本周某天排期。图中为示例数据。

示例加载中...

概述

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阶段、日期、清单与评论