xiaoye-components

Appearance

管理后台闭环示例 ​

这页用一个单页后台片段，把筛选、列表、覆盖层编辑、详情查看和历史记录放回同一条真实链路里。

如果你还在收口后台项目的浮层、通知和表格样式，先看 后台迁移指南；如果这轮主要卡在弹窗、抽屉、提示和操作菜单，再顺着读 浮层收口指南；如果主要卡在筛选条和输入浮层，再读 筛选面板收口指南，再对照这个页面理解增强层的职责边界。

如果你主要在收口表格和浮层视觉，也可以直接看 Table 表格 的 overview 概览态和 组件总览 里的后台入口。

如果你这轮主要是在收反馈类组件的样式，也可以按 组件总览 -> 后台迁移指南 的顺序走一遍。

筛选栏SearchForm
列表主干ProTable
详情与编辑DetailPanel / OverlayForm
历史与说明AuditTimeline

这个示例覆盖了什么 ​

页面分区

使用 Tabs 让成员台账、账单链路和风控排查共享同一套增强层页面骨架。

筛选 + 列表

SearchForm 和 ProTable 先把后台页的查询、列表、分页和工具栏收进稳定骨架。

详情 + 编辑

收口后的理解方式是 OverlayForm 负责覆盖层编辑，DetailPanel 负责覆盖层详情查看，而不是继续分别记忆多套容器名。

历史 + 说明

AuditTimeline 负责把关键操作、审批节点和补充说明沉淀成稳定历史区。

推荐怎么读 ​

如果你是第一次看这个页面，建议直接先看下面的页面片段，再回过头看上面的能力拆分。

页面片段 ​

完整后台闭环

增强层已经不只是筛选和列表，而是编辑、详情、批量和历史记录一起工作。

这个示例把 SearchForm、ProTable、OverlayForm、DetailPanel、批量动作私有块 和 AuditTimeline 放回同一个单页后台场景里。

增强层闭环已接通

顶部筛选、列表、详情、编辑、批量操作和历史记录已串成一条闭环。

当前视图任务数primary
3

视图：成员台账

处理中 / 审核中warning
1

适合接审批流和任务看板

P0 高优先级danger
1

高优先级事项需要优先回看

成员台账：成员档案、角色和归属关系

事项列表

筛选后的记录进入列表主干，再接详情抽屉、编辑抽屉和批量动作。

当前视图：成员台账
当前在 成员台账 视图下，共命中 3 条记录。
共 3 条

交互约定 ​

  • Tabs 支持 ArrowLeft / ArrowRight / Home / End
  • SearchForm 里的输入框支持 Enter 触发查询
  • AutoComplete 和 Select 都支持方向键、Enter 和 Escape
  • 当前实现里，覆盖层编辑和覆盖层详情都已经统一收进 OverlayForm / DetailPanel 这两条公开链路
  • 页面中的关键动作和说明信息会同步沉淀到 AuditTimeline

从这个页面可以直接复用什么 ​

  1. 后台页骨架可以先用 SearchForm + ProTable 稳住，再按需要接 OverlayForm、DetailPanel 和 AuditTimeline。
  2. 编辑和查看最好先按“覆盖层编辑 / 覆盖层详情”两类能力理解，再根据页面上下文选择抽屉或弹窗实现。
  3. 批量条、头部条、状态条这类局部块更适合作为页面内部片段，而不是优先暴露给使用方的公开选型入口。

继续往增强层迁移 ​

推荐迁移方式

如果你准备把这段示例迁到业务项目里，建议先保留增强层的职责边界，再按业务替换字段、列配置和动作实现。