列表页 List Page

客户列表 / 零件报价共用的 list-page 规范组件。样式由 @rd-element/ui 内置 list-page.css 提供。

页头统计 RdListPageHero

整卡统一内边距（--page-hero-pad-x/y）。 统计区用 #stats 放入 RdMetricCard； 主题内容放 #content（同卡内，可放筛选 + 表格等）。

完整 · 统计 + 操作 + #content（筛选 + 表格）

客户

管理全球客户，跟踪合作关系与业务进展

12客户总数

9活跃客户

4企业客户

$2.6M累计金额

关键词

状态

全部

简洁 · 标题 + 操作

订单

查看与管理全部销售订单

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Users, CheckCircle, Building2, TrendingUp, User, Plus, Download, RefreshCw } from '@lucide/vue'
import {
  RdListPageHero,
  RdListPageScopeTabs,
  RdMetricCard,
  RdInputGroup,
  toast,
} from '@rd-element/ui'

const scopeTab = ref<'mine' | 'team'>('mine')
const scopeTabs = [
  { label: '我的客户', value: 'mine' as const, count: 5, icon: User },
  { label: '团队客户', value: 'team' as const, count: 42, icon: Users },
]
const stats = [
  { key: 'total', label: '客户总数', value: '12', icon: Users, tone: 'primary' as const },
  { key: 'active', label: '活跃客户', value: '9', icon: CheckCircle, tone: 'success' as const },
  { key: 'enterprise', label: '企业客户', value: '4', icon: Building2, tone: 'violet' as const },
  { key: 'value', label: '累计金额', value: '$2.6M', icon: TrendingUp, tone: 'accent' as const },
]

const keyword = ref('')
const status = ref('')
const tier = ref('')
const loading = ref(false)
const rows = ref([
  { company: 'Pacific Trade', contact: 'Alice Chen', country: 'SG', status: '活跃', tier: '企业' },
  { company: 'Nordic Metal', contact: 'Erik Lund', country: 'SE', status: '活跃', tier: '商业' },
  { company: 'Sakura Parts', contact: 'Yuki Sato', country: 'JP', status: '潜在', tier: '入门' },
  { company: 'Rhine Logistics', contact: 'Anna Weber', country: 'DE', status: '未活跃', tier: '商业' },
])

const filteredRows = computed(() => {
  const kw = keyword.value.trim().toLowerCase()
  return rows.value.filter((row) => {
    if (kw && !(row.company + row.contact).toLowerCase().includes(kw)) return false
    if (status.value && row.status !== status.value) return false
    if (tier.value && row.tier !== tier.value) return false
    return true
  })
})

async function refreshTable() {
  loading.value = true
  await new Promise((r) => setTimeout(r, 450))
  loading.value = false
  toast.success('已刷新', '共 ' + filteredRows.value.length + ' 条')
}
</script>

<template>
  <RdListPageHero
    title="客户"
    subtitle="管理全球客户，跟踪合作关系与业务进展"
    stats-label="客户指标概览"
  >
    <template #title-extra>
      <RdListPageScopeTabs v-model="scopeTab" :tabs="scopeTabs" size="small" aria-label="客户范围" />
    </template>
    <template #actions>
      <el-button :icon="Download">导出</el-button>
      <el-button type="primary" :icon="Plus">新增客户</el-button>
    </template>
    <template #stats>
      <RdMetricCard
        v-for="card in stats"
        :key="card.key"
        :icon="card.icon"
        :title="card.value"
        :caption="card.label"
        :tone="card.tone"
      />
    </template>
    <template #content>
      <div style="display:flex;flex-wrap:wrap;gap:10px;align-items:center">
        <RdInputGroup style="min-width:200px;flex:1">
          <template #left>关键词</template>
          <el-input v-model="keyword" placeholder="公司 / 联系人" clearable />
        </RdInputGroup>
        <RdInputGroup style="width:160px">
          <template #left>状态</template>
          <el-select v-model="status" placeholder="全部" clearable>
            <el-option label="活跃" value="活跃" />
            <el-option label="潜在" value="潜在" />
            <el-option label="未活跃" value="未活跃" />
          </el-select>
        </RdInputGroup>
        <RdInputGroup style="width:160px">
          <template #left>等级</template>
          <el-select v-model="tier" placeholder="全部" clearable>
            <el-option label="企业" value="企业" />
            <el-option label="商业" value="商业" />
            <el-option label="入门" value="入门" />
          </el-select>
        </RdInputGroup>
        <el-button :loading="loading" @click="refreshTable">
          <RefreshCw :size="14" />
          刷新
        </el-button>
      </div>
      <el-table v-loading="loading" :data="filteredRows" stripe style="width:100%">
        <el-table-column prop="company" label="公司" min-width="140" />
        <el-table-column prop="contact" label="联系人" min-width="110" />
        <el-table-column prop="country" label="国家" width="80" />
        <el-table-column prop="status" label="状态" width="90" />
        <el-table-column prop="tier" label="等级" width="90" />
      </el-table>
    </template>
  </RdListPageHero>

  <RdListPageHero title="订单" subtitle="查看与管理全部销售订单">
    <template #actions>
      <el-button :icon="Download">导出</el-button>
      <el-button type="primary" :icon="Plus">新建订单</el-button>
    </template>
  </RdListPageHero>
</template>

Attributes

属性名	说明	类型	默认值
title	主标题	string	—
subtitle	副标题	string	—
statsLabel	#stats 区域 aria-label	string	—

Slots

插槽名	说明
leading	标题左侧前置区（图标等）
title-extra	标题文案下方扩展（如 ScopeTabs）
actions	右上角操作按钮
meta	标题行下方元信息区
stats	指标卡片区（常放 RdMetricCard）
content	同卡主题区（筛选 + 表格，或 ContentRow）

客群侧栏 RdListPageSidebar

只负责树形数据与选中；面板标题 / 收起由 RdListPageContentRow 提供。

<script setup lang="ts">
import { ref } from 'vue'
import { RdListPageSidebar, type SidebarGroup } from '@rd-element/ui'

const sidebarId = ref('value:strategic')
const groups: SidebarGroup[] = [
  {
    key: 'value',
    label: '客户价值模型',
    nodes: [
      { id: 'value:strategic', label: '战略级', count: 4, tone: 'primary' },
      { id: 'value:key', label: '重要级', count: 3, tone: 'violet' },
    ],
  },
]
</script>

<template>
  <RdListPageSidebar
    v-model="sidebarId"
    :groups="groups"
    :total-count="12"
    total-label="全部客户"
  />
</template>

Attributes

属性名	说明	类型	默认值
v-model / modelValue	当前选中节点 id；空串表示「全部」	string	—
groups	分组树数据	SidebarGroup[]	—
totalCount	「全部」行计数	number	—
totalLabel	「全部」行文案	string	'全部'

Events

事件名	说明	类型
update:modelValue	选中变更；再点同一节点清空为「全部」	(id: string) => void

RdListPageSidebarNode

仅在 RdListPageSidebar 内使用。

属性名	说明	类型	默认值
node	侧边栏节点（须在 Sidebar 内）	SidebarNode	—
depth	嵌套深度（缩进）	number	0

内容行 RdListPageContentRow

左右布局壳：左侧可收起，右侧放 RdListPageDataPanel。merged 时合成一张大卡片。#aside 内放 RdListPageSidebar；编辑等操作放 #aside-actions。

客群列表

客户列表12 条结果

选中客群后展示表格

演示 ContentRow + DataPanel

<script setup lang="ts">
import { ref } from 'vue'
import { Pencil } from '@lucide/vue'
import {
  RdListPageContentRow,
  RdListPageSidebar,
  RdListPageDataPanel,
  RdListPagePanelHeader,
  RdListPageStatusTabs,
  RdListPageTableEmpty,
  type SidebarGroup,
} from '@rd-element/ui'

const sidebarId = ref('value:strategic')
const statusTab = ref('All')
const groups: SidebarGroup[] = [/* … */]
const statusTabs = [
  { label: '全部', value: 'All', count: 48 },
  { label: '待报价', value: 'Pending', count: 12 },
]
</script>

<template>
  <RdListPageContentRow
    aside-title="客群列表"
    :aside-active="!!sidebarId"
    merged
  >
    <template #aside-actions>
      <button type="button" class="lp-sidebar__edit-btn" title="编辑">
        <Pencil :size="14" />
      </button>
    </template>
    <template #aside>
      <RdListPageSidebar
        v-model="sidebarId"
        :groups="groups"
        :total-count="12"
        total-label="全部客户"
      />
    </template>
    <RdListPageDataPanel>
      <template #header>
        <RdListPagePanelHeader title="客户列表" :count="12" />
        <RdListPageStatusTabs v-model="statusTab" :tabs="statusTabs" />
      </template>
      <RdListPageTableEmpty title="选中客群后展示表格" />
    </RdListPageDataPanel>
  </RdListPageContentRow>
</template>

Attributes

属性名	说明	类型	默认值
showAside	是否渲染左侧栏	boolean	true
asideTitle	左侧标题（展开栏 / 收起竖条）	string	'客群列表'
collapsible	是否允许收起左侧	boolean	true
defaultCollapsed	初始是否收起	boolean	false
asideActive	收起态是否显示选中小圆点	boolean	false
merged	是否合并为大卡片外观	boolean	true

Events

事件名	说明	类型
update:collapsed	左侧收起状态变更	(value: boolean) => void

Slots

插槽名	说明
aside	左侧栏内容（展开时，常放 Sidebar）
aside-actions	左侧工具栏右侧操作
default	主内容区（常放 DataPanel）

范围切换 RdListPageScopeTabs

<script setup lang="ts">
import { ref } from 'vue'
import { User, Users } from '@lucide/vue'
import { RdListPageScopeTabs } from '@rd-element/ui'

const scopeTab = ref<'mine' | 'team'>('mine')
const tabs = [
  { label: '我的客户', value: 'mine' as const, count: 5, icon: User },
  { label: '团队客户', value: 'team' as const, count: 42, icon: Users },
]
</script>

<template>
  <RdListPageScopeTabs v-model="scopeTab" :tabs="tabs" aria-label="客户范围" />
</template>

Attributes

属性名	说明	类型	默认值
v-model / modelValue	当前范围值	string	—
tabs	范围 Tab（胶囊型）	ListPageScopeTab[]	—
ariaLabel	tablist aria-label	string	'数据范围'
size	尺寸	'md' | 'sm'	'md'
bordered	是否显示外框边框	boolean	true

Events

事件名	说明	类型
update:modelValue	范围切换	(value: string) => void

状态切换 RdListPageStatusTabs

<script setup lang="ts">
import { ref } from 'vue'
import { RdListPageStatusTabs } from '@rd-element/ui'

const statusTab = ref('All')
const tabs = [
  { label: '全部', value: 'All', count: 48 },
  { label: '待报价', value: 'Pending', count: 12 },
  { label: '报价中', value: 'InProgress', count: 6 },
  { label: '已报价', value: 'Quoted', count: 24 },
  { label: '已确认', value: 'Confirmed', count: 0 },
  { label: '已失效', value: 'Expired', count: 2 },
]
</script>

<template>
  <RdListPageStatusTabs v-model="statusTab" :tabs="tabs" />
</template>

Attributes

属性名	说明	类型	默认值
v-model / modelValue	当前状态值	string	—
tabs	状态 Tab 列表	ListPageStatusTab[]	—

Events

事件名	说明	类型
update:modelValue	状态切换	(value: string) => void

数据面板 RdListPageDataPanel

组合 PanelHeader、FilterBar、FilterChips 与表格。Tab（全部 / 活跃 / 潜在）、关键词、等级、全部筛选与表格列文案一致并联动。

8 条结果

关键词

等级

全部

<script setup lang="ts">
import { ref, computed } from 'vue'
import { X } from '@lucide/vue'
import {
  RdListPageDataPanel,
  RdListPagePanelHeader,
  RdListPageFilterBar,
  RdListPageFilterChips,
  RdListPageStatusTabs,
  RdListPageTableArea,
  RdListPageTableEmpty,
  RdListPageFilterDrawer,
  RdInputGroup,
  toast,
} from '@rd-element/ui'

type PanelStatus = '活跃' | '潜在' | '未活跃'
type Row = {
  company: string
  contact: string
  country: string
  status: PanelStatus
  tier: string
  email: string
}

const allRows: Row[] = [
  { company: 'Pacific Trade', contact: 'Alice Chen', country: 'SG', status: '活跃', tier: '企业', email: 'alice@pacific.sg' },
  { company: 'Nordic Metal', contact: 'Erik Lund', country: 'SE', status: '活跃', tier: '商业', email: 'erik@nordic.se' },
  { company: 'Sakura Parts', contact: 'Yuki Sato', country: 'JP', status: '潜在', tier: '入门', email: 'yuki@sakura.jp' },
  { company: 'Rhine Logistics', contact: 'Anna Weber', country: 'DE', status: '未活跃', tier: '商业', email: 'anna@rhine.de' },
  { company: 'Maple Supply', contact: 'James Wu', country: 'CA', status: '活跃', tier: '企业', email: 'james@maple.ca' },
  { company: 'Aurora Tech', contact: 'Li Wei', country: 'CN', status: '活跃', tier: '企业', email: 'li@aurora.cn' },
  { company: 'Desert Parts', contact: 'Omar Ali', country: 'AE', status: '潜在', tier: '商业', email: 'omar@desert.ae' },
  { company: 'Blue Harbor', contact: 'Emma Ross', country: 'US', status: '活跃', tier: '入门', email: 'emma@blue.us' },
]

const statusTab = ref<'All' | '活跃' | '潜在'>('All')
const keyword = ref('')
const statuses = ref<string[]>([])
const tier = ref('')
const drawerVisible = ref(false)
const drawerTab = ref<'filters' | 'layout'>('filters')
const drawerKeyword = ref('')
const drawerStatus = ref<string[]>([])
const drawerTier = ref('')

const columnDefaults = [
  { key: 'company', label: '公司', visible: true, fixed: true, tableFixed: 'left' as const },
  { key: 'contact', label: '联系人', visible: true },
  { key: 'country', label: '国家', visible: true },
  { key: 'status', label: '状态', visible: true },
  { key: 'tier', label: '等级', visible: true },
  { key: 'email', label: '邮箱', visible: true },
]
const columnItems = ref(columnDefaults.map((i) => ({ ...i })))
const columnsCustomized = ref(false)
const visibleColumns = computed(() => columnItems.value.filter((c) => c.visible))

function matchBase(row: Row) {
  const kw = keyword.value.trim().toLowerCase()
  if (kw && !(row.company + ' ' + row.contact + ' ' + row.email + ' ' + row.country).toLowerCase().includes(kw)) return false
  if (statuses.value.length && !statuses.value.includes(row.status)) return false
  if (tier.value && row.tier !== tier.value) return false
  return true
}

const statusTabs = computed(() => {
  const base = allRows.filter(matchBase)
  const countOf = (v: 'All' | '活跃' | '潜在') =>
    v === 'All' ? base.length : base.filter((r) => r.status === v).length
  return [
    { label: '全部', value: 'All' as const, count: countOf('All') },
    { label: '活跃', value: '活跃' as const, count: countOf('活跃') },
    { label: '潜在', value: '潜在' as const, count: countOf('潜在') },
  ]
})

const rows = computed(() =>
  allRows.filter((row) => {
    if (!matchBase(row)) return false
    if (statusTab.value !== 'All' && row.status !== statusTab.value) return false
    return true
  }),
)

const filterCount = computed(() => {
  let n = 0
  if (keyword.value.trim()) n += 1
  if (statuses.value.length) n += 1
  if (tier.value) n += 1
  return n
})

const filterTags = computed(() => {
  const tags: { key: string; label: string; remove: () => void }[] = []
  if (keyword.value.trim()) {
    tags.push({
      key: 'search',
      label: '关键词：' + keyword.value.trim(),
      remove: () => { keyword.value = ''; drawerKeyword.value = '' },
    })
  }
  if (statuses.value.length) {
    tags.push({
      key: 'status',
      label: '状态：' + statuses.value.join('、'),
      remove: () => { statuses.value = []; drawerStatus.value = [] },
    })
  }
  if (tier.value) {
    tags.push({
      key: 'tier',
      label: '等级：' + tier.value,
      remove: () => { tier.value = ''; drawerTier.value = '' },
    })
  }
  return tags
})

function clearFilters() {
  keyword.value = ''
  statuses.value = []
  tier.value = ''
  statusTab.value = 'All'
  drawerKeyword.value = ''
  drawerStatus.value = []
  drawerTier.value = ''
}

function openDrawer() {
  drawerTab.value = 'filters'
  drawerKeyword.value = keyword.value
  drawerStatus.value = [...statuses.value]
  drawerTier.value = tier.value
  drawerVisible.value = true
}

function applyDrawer() {
  keyword.value = drawerKeyword.value
  statuses.value = [...drawerStatus.value]
  tier.value = drawerTier.value
  drawerVisible.value = false
  toast.success('已应用', '筛选条件已更新')
}

function toggleColumn(key: string) {
  const item = columnItems.value.find((i) => i.key === key)
  if (!item || item.fixed) return
  item.visible = !item.visible
  if (!item.visible && item.tableFixed) delete item.tableFixed
  columnsCustomized.value = true
}

function toggleColumnTableFixed(key: string, side: 'left' | 'right') {
  const item = columnItems.value.find((i) => i.key === key)
  if (!item || !item.visible) return
  if (item.tableFixed === side) delete item.tableFixed
  else item.tableFixed = side
  columnsCustomized.value = true
}

function reorderColumns(fromIndex: number, toIndex: number) {
  const list = [...columnItems.value]
  const [moved] = list.splice(fromIndex, 1)
  if (!moved) return
  list.splice(toIndex, 0, moved)
  columnItems.value = list
  columnsCustomized.value = true
}

function resetColumns() {
  columnItems.value = columnDefaults.map((i) => ({ ...i }))
  columnsCustomized.value = false
}
</script>

<template>
  <RdListPageDataPanel>
    <template #header>
      <RdListPagePanelHeader tabs>
        <template #left>
          <RdListPageStatusTabs v-model="statusTab" :tabs="statusTabs" />
        </template>
        <template #right>
          <span class="data-panel__count">{{ rows.length }} 条结果</span>
          <button
            v-if="filterCount || statusTab !== 'All'"
            type="button"
            class="text-action-btn"
            @click="clearFilters"
          >
            <X :size="13" /> 清除筛选
          </button>
        </template>
      </RdListPagePanelHeader>
    </template>
    <RdListPageFilterBar
      :column-items="columnItems"
      :columns-customized="columnsCustomized"
      :drawer-filter-count="filterCount"
      show-pin-right
      @open-drawer="openDrawer"
      @toggle-column="toggleColumn"
      @toggle-column-table-fixed="toggleColumnTableFixed"
      @reorder-columns="reorderColumns"
      @reset-columns="resetColumns"
    >
      <RdInputGroup style="min-width:200px;flex:1">
        <template #left>关键词</template>
        <el-input v-model="keyword" placeholder="公司 / 联系人 / 邮箱" clearable />
      </RdInputGroup>
      <RdInputGroup style="width:160px">
        <template #left>等级</template>
        <el-select v-model="tier" placeholder="全部" clearable>
          <el-option label="企业" value="企业" />
          <el-option label="商业" value="商业" />
          <el-option label="入门" value="入门" />
        </el-select>
      </RdInputGroup>
    </RdListPageFilterBar>
    <RdListPageFilterChips v-if="filterTags.length" :tags="filterTags" />
    <RdListPageTableArea :header-sticky="false">
      <el-table v-if="rows.length" :data="rows" stripe style="width:100%" max-height="280">
        <el-table-column
          v-for="col in visibleColumns"
          :key="col.key"
          :prop="col.key"
          :label="col.label"
          :fixed="col.tableFixed"
          :min-width="col.key === 'email' ? 180 : 120"
        />
      </el-table>
      <RdListPageTableEmpty
        v-else
        title="未找到匹配的数据"
        hint="试试调整关键词或清除筛选"
        show-action
        action-label="清除筛选"
        @action="clearFilters"
      />
    </RdListPageTableArea>
  </RdListPageDataPanel>

  <RdListPageFilterDrawer
    v-model:visible="drawerVisible"
    v-model:tab="drawerTab"
    @apply="applyDrawer"
    @reset="() => { drawerKeyword = ''; drawerStatus = []; drawerTier = '' }"
  >
    <template #filters>
      <RdInputGroup>
        <template #left>关键词</template>
        <el-input v-model="drawerKeyword" placeholder="公司、联系人、邮箱" clearable />
      </RdInputGroup>
      <RdInputGroup>
        <template #left>状态</template>
        <el-select v-model="drawerStatus" placeholder="全部" multiple collapse-tags :max-collapse-tags="1" clearable>
          <el-option label="活跃" value="活跃" />
          <el-option label="未活跃" value="未活跃" />
          <el-option label="潜在" value="潜在" />
        </el-select>
      </RdInputGroup>
      <RdInputGroup>
        <template #left>等级</template>
        <el-select v-model="drawerTier" placeholder="全部" clearable>
          <el-option label="企业" value="企业" />
          <el-option label="商业" value="商业" />
          <el-option label="入门" value="入门" />
        </el-select>
      </RdInputGroup>
    </template>
  </RdListPageFilterDrawer>
</template>

RdListPageDataPanel Slots

无业务 props；通过插槽拼装。

插槽名	说明
header	粘性顶栏：面板头（PanelHeader / StatusTabs）
toolbar	粘性顶栏：筛选工具条
default	表格 / 主体内容
footer	底部分页等

RdListPagePanelHeader

属性名	说明	类型	默认值
tabs	是否按 tabs 行样式	boolean	—
title	左侧默认标题	string	—
count	结果条数（默认渲染「N 条结果」）	number	—
showClear	右侧默认「清除筛选」按钮	boolean	—

事件名	说明	类型
clear	点击清除筛选	() => void

插槽名	说明
left	覆盖左侧默认 title/count
right	覆盖右侧默认清除按钮

RdListPageFilterBar

属性名	说明	类型	默认值
drawerFilterCount	「全部筛选」按钮角标数	number	—
columnItems	列设置项	TableColumnSettingItem[]	—
columnsCustomized	列设置是否已自定义（启用「恢复默认」）	boolean	—
showPinLeft	是否展示「固定左侧」（透传列设置）	boolean	true
showPinRight	是否展示「固定右侧」（透传列设置）	boolean	false
extraActions	自定义动作列（透传列设置）	TableColumnSettingAction[]	[]
columnSettingsHint	列设置面板提示文案（透传 hint）	string	—

事件名	说明	类型
openDrawer	打开全部筛选抽屉	() => void
toggleColumn	切换列显隐	(key: string) => void
toggleColumnTableFixed	切换列表格固定（左/右互斥）	(key: string, side: 'left' | 'right') => void
toggleColumnAction	切换自定义动作开关	(columnKey: string, actionKey: string) => void
reorderColumns	拖拽重排列	(fromIndex: number, toIndex: number) => void
resetColumns	重置列配置	() => void

插槽名	说明
default	主筛选项（RdInputGroup 等）
append	列设置按钮右侧的扩展操作（透传至 RdTableColumnSettings）

RdListPageFilterChips

ListPageFilterTag：{ key, label, remove: () => void }；关闭走 tag.remove()。

属性名	说明	类型	默认值
tags	已选筛选标签；空数组不渲染	ListPageFilterTag[]	—

RdListPageTableEmpty

属性名	说明	类型	默认值
title	空态标题	string	—
hint	空态说明	string	—
showAction	是否显示操作按钮	boolean	—
actionLabel	操作按钮文案	string	—

事件名	说明	类型
action	点击空态操作	() => void

全部筛选 RdListPageFilterDrawer

也可从上方「数据面板」中的「全部筛选」按钮打开同一抽屉实例。

<script setup lang="ts">
import { ref } from 'vue'
import { Filter } from '@lucide/vue'
import {
  RdInputGroup,
  RdListPageFilterDrawer,
  toast,
  type FilterFieldSettingItem,
} from '@rd-element/ui'

const visible = ref(false)
const tab = ref<'filters' | 'layout'>('filters')
const keyword = ref('')
const status = ref<string[]>([])
const layoutItems = ref<FilterFieldSettingItem[]>([
  { key: 'search', label: '关键词', inlineVisible: true, order: 0, fixed: true, quick: true },
  { key: 'status', label: '状态', inlineVisible: true, order: 1, quick: true },
  { key: 'tier', label: '等级', inlineVisible: true, order: 2 },
  { key: 'region', label: '地区', inlineVisible: false, order: 3 },
])
const layoutCustomized = ref(false)

function openFilters() {
  tab.value = 'filters'
  visible.value = true
}
</script>

<template>
  <el-button type="primary" @click="openFilters">
    <Filter :size="14" />
    打开全部筛选
  </el-button>

  <RdListPageFilterDrawer
    v-model:visible="visible"
    v-model:tab="tab"
    :filter-layout-items="layoutItems"
    :filter-layout-customized="layoutCustomized"
    @apply="() => { visible = false; toast.success('已应用', '筛选条件已更新') }"
    @reset="() => { keyword = ''; status = [] }"
  >
    <template #filters>
      <RdInputGroup>
        <template #left>关键词</template>
        <el-input v-model="keyword" placeholder="公司、联系人、邮箱" clearable />
      </RdInputGroup>
      <RdInputGroup>
        <template #left>状态</template>
        <el-select v-model="status" placeholder="全部" multiple collapse-tags clearable>
          <el-option label="活跃" value="Active" />
          <el-option label="未活跃" value="Inactive" />
        </el-select>
      </RdInputGroup>
    </template>
  </RdListPageFilterDrawer>
</template>

Attributes

属性名	说明	类型	默认值
v-model:visible	是否显示	boolean	—
v-model:tab	当前 Tab	'filters' | 'layout'	'filters'
filterLayoutItems	筛选项布局配置	FilterFieldSettingItem[]	—
filterLayoutCustomized	筛选项布局是否已自定义	boolean	—
title	抽屉标题	string	'全部筛选'

Events

事件名	说明	类型
apply	确定应用筛选	() => void
reset	重置筛选条件	() => void
toggleFilter	切换筛选项显隐	(key: string) => void
toggleFilterQuick	切换是否为快捷筛选项	(key: string) => void
reorderFilters	拖拽重排筛选项	(fromIndex: number, toIndex: number) => void
resetFilterLayout	重置筛选项布局	() => void

Slots

插槽名	说明
filters	「筛选条件」Tab 内容

批量操作栏 RdListPageBulkBar

已选 3 条

<script setup lang="ts">
import { ref } from 'vue'
import { RdListPageBulkBar, toast } from '@rd-element/ui'

const count = ref(3)
</script>

<template>
  <el-button size="small" @click="count = count ? 0 : 3">
    {{ count ? '隐藏' : '显示' }}
  </el-button>
  <RdListPageBulkBar
    :count="count"
    flush
    show-cross-page
    :cross-page-total="48"
    @clear="count = 0"
    @toggle-cross-page="toast.info('跨页', '演示切换')"
  >
    <template #actions>
      <button type="button" class="bulk-action-btn">修改状态</button>
      <button type="button" class="bulk-action-btn bulk-action-btn--danger">删除</button>
    </template>
  </RdListPageBulkBar>
</template>

Attributes

属性名	说明	类型	默认值
count	已选条数；≤0 不显示	number	—
showCrossPage	是否展示跨页全选入口	boolean	false
crossPageActive	跨页是否已全选	boolean	false
crossPageTotal	筛选结果总数（跨页文案）	number	0
flush	去掉左右外边距（嵌套演示）	boolean	false

Events

事件名	说明	类型
clear	取消选择	() => void
toggleCrossPage	切换跨页全选	() => void

Slots

插槽名	说明
left-extra	左侧计数旁扩展
actions	右侧批量操作按钮

页壳与表格区

无独立演示；列表页拼装时常用。

RdListPageLayout

属性名	说明	类型	默认值
loading	true 时渲染 skeleton 槽，否则正文	boolean	—

插槽名	说明
skeleton	loading 时骨架屏
default	页面正文（loading=false）

RdListPageTableArea

属性名	说明	类型	默认值
loading	表格区 loading 样式	boolean	—
headerSticky	表头吸顶：'page' 相对页面滚动（默认，top=滤板高度−内容区 pad）；'container' 相对最近滚动容器；false 关闭库 sticky，交给 EP height/max-height。抽屉/弹层内 page 自动按 container 处理，不减外层页头偏移	'page' | 'container' | false	'page'

插槽名	说明
default	表格内容（el-table 等）

抽屉内表头吸顶

默认 headerSticky="page" 在 RdDrawer / RdDialog 内会自动按 container 处理（不减外层内容区 pad），避免表头下移盖住首行。 表内 height / max-height 滚动请传 :header-sticky="false"。

<script setup lang="ts">
import { ref } from 'vue'
import { RdDrawer, RdListPageTableArea } from '@rd-element/ui'

const open = ref(false)
const rows = Array.from({ length: 12 }, (_, i) => ({
  id: `SP-DEMO-${i + 1}`,
  name: `${i + 1}.stp`,
  method: i % 2 ? 'CNC' : 'CNC (Metal)',
  material: i % 3 ? 'Aluminum 6061-T6' : 'Phosphor Bronze C54400',
}))
</script>

<template>
  <el-button type="primary" @click="open = true">打开含表格的 workspace 抽屉</el-button>
  <RdDrawer
    v-model:visible="open"
    variant="workspace"
    title="销售明细"
    with-header
    :mask-closable="true"
    size="80%"
  >
    <div class="rd-drawer__workspace-body" style="padding: 0">
      <RdListPageTableArea>
        <el-table :data="rows" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="64" />
          <el-table-column prop="id" label="RD-ID" min-width="140" />
          <el-table-column prop="name" label="零件名称" min-width="120" />
          <el-table-column prop="method" label="加工方式" min-width="140" />
          <el-table-column prop="material" label="材料" min-width="160" />
        </el-table>
      </RdListPageTableArea>
    </div>
    <template #footer>
      <el-button @click="open = false">关闭</el-button>
    </template>
  </RdDrawer>
</template>

说明

• 列设置与筛选项配置详见 配置面板 Settings
• 表格行内编辑、分页等详见 表格增强 Table
• 表头吸顶（RdListPageTableArea 的 headerSticky）：
  • 默认 'page'：相对列表页滚动吸顶，不设 el-table 的 height / max-height
  • 抽屉 / 弹层内会自动按 'container' 处理（不减外层内容区 pad）；也可显式传 headerSticky="container"
  • 使用表内滚动（height / max-height）时传 :header-sticky="false"，交给 Element Plus 冻结表头