@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/page-patterns/pageListShared.jsx

@@ -0,0 +1,177 @@
+/**
+ * pageListShared — B 端"列表页"模板共享工具
+ *
+ * 把所有列表型页面（变量管理、MCP 管理等）复用的 UI 子组件、列定义、
+ * 数据装配函数集中在这里，方便每个独立模板页直接 import 使用，
+ * 业务接入时只需替换数据源（list）和文案配置（标题/筛选项/按钮）。
+ */
+
+import Checkbox from '../components/Checkbox';
+import FormTitle from '../components/FormTitle';
+import Icon from '../components/Icon';
+import Input from '../components/Input';
+import { TEAM_MEMBERS } from '../teamMembers';
+
+/* 列表页右侧"业务上下文胶囊"统一文案，跟随当前所选业务（这里固定为 demo 文案） */
+export const PAGE_CONTEXT_LABEL = '抖音主端-在线客服&网络呼入';
+export const WHITE_CARD_STYLE = {
+  background: 'var(--color-white, #FFFFFF)',
+  borderRadius: '12px',
+};
+
+/* ── 表格列定义（所有列表型模板共用：名称 / 类型 / 描述 / 创建人 / 状态 / 更新时间 / 操作） ── */
+export const LIST_COLUMNS = [
+  { key: 'name', dataIndex: 'name', title: '工具名称', type: 'text', width: 220 },
+  { key: 'tag', dataIndex: 'tag', title: '类型', type: 'tag', width: 120 },
+  { key: 'desc', dataIndex: 'desc', title: '描述', type: 'text', width: 320 },
+  { key: 'creator', dataIndex: 'creator', title: '创建人', type: 'avatar', width: 152 },
+  { key: 'status', dataIndex: 'status', title: '状态', type: 'status', width: 120 },
+  { key: 'updatedAt', dataIndex: 'updatedAt', title: '更新时间', type: 'datetime', width: 180 },
+  { key: 'actions', dataIndex: 'actions', title: '操作', type: 'actions', width: 168 },
+];
+
+const ACTION_BUTTONS = [
+  { key: 'edit', label: '编辑' },
+  { key: 'detail', label: '详情' },
+  { key: 'more', kind: 'more' },
+];
+
+const CREATOR_POOL = TEAM_MEMBERS;
+
+const STATUS_OPTIONS = [
+  { label: '已启用', tone: 'success' },
+  { label: '调试中', tone: 'warning' },
+  { label: '已停用', tone: 'danger' },
+  { label: '审核中', tone: 'warning' },
+];
+
+const UPDATED_AT_POOL = [
+  '2026-04-21 10:30:00',
+  '2026-04-20 18:45:00',
+  '2026-04-19 14:12:00',
+  '2026-04-18 09:20:00',
+  '2026-04-17 16:05:00',
+  '2026-04-16 11:08:00',
+];
+
+function makeCreator(index) {
+  const base = CREATOR_POOL[index % CREATOR_POOL.length];
+  return {
+    name: base.name,
+    avatarType: 'image',
+    avatarSrc: base.avatarSrc,
+    avatarAlt: `${base.name}头像`,
+  };
+}
+
+function makeStatus(index) {
+  return STATUS_OPTIONS[index % STATUS_OPTIONS.length];
+}
+
+/**
+ * 把"业务原始数据"批量套上 mock 的创建人 / 状态 / 更新时间 / 操作按钮，
+ * 形成 Table 可直接消费的 dataSource。
+ *
+ * @param {string} keyPrefix — 行 id 前缀（建议跟模板 key 一致，便于 React diff）
+ * @param {Array<{name: string, tag: string, desc: string}>} list — 业务原始数据
+ */
+export function buildListDataSource(keyPrefix, list) {
+  if (!Array.isArray(list)) return [];
+  return list.map((item, index) => ({
+    id: `${keyPrefix}-${index}`,
+    name: item.name,
+    tag: [{ label: item.tag, variant: 'white' }],
+    desc: item.desc,
+    creator: makeCreator(index),
+    status: makeStatus(index),
+    updatedAt: UPDATED_AT_POOL[index % UPDATED_AT_POOL.length],
+    actions: ACTION_BUTTONS.map((action) => ({ ...action, onClick: () => {} })),
+  }));
+}
+
+/**
+ * 页面标题栏（白卡内、子 Tab 之下）
+ * 结构：左侧 FormTitle level-1 + 业务上下文胶囊；右侧可选 actions。
+ */
+export function PageHeader({ title, contextLabel, actions }) {
+  const suffix = contextLabel ? (
+    <span
+      className="inline-flex shrink-0 items-center justify-center rounded-full text-blueGrey-700 whitespace-nowrap"
+      style={{
+        background: 'var(--color-fill, rgba(45,66,107,0.06))',
+        padding: '6px 12px',
+        fontSize: '12px',
+        lineHeight: '16px',
+      }}
+    >
+      {contextLabel}
+    </span>
+  ) : null;
+
+  return (
+    <div className="flex min-w-0 shrink-0 items-center justify-between gap-3" style={{ minHeight: '36px' }}>
+      <FormTitle
+        variant="level-1"
+        title={title}
+        titleSuffix={suffix}
+        className="min-w-[120px] flex-1"
+      />
+      {actions && (
+        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+          {actions}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 筛选栏（白卡内、标题栏之下）
+ * 结构：左侧 300px 搜索框 + 一组 FilterPill（白底圆角胶囊 + 文字 + 下拉箭头）
+ *       + 1 个 Checkbox 胶囊"我创建的"。
+ *
+ * @param {string[]} filters — 下拉筛选项的标签文案数组
+ * @param {string} [checkboxLabel='我创建的'] — 末尾 Checkbox 胶囊文案；传 null 则隐藏
+ */
+export function FilterBar({ filters = [], checkboxLabel = '我创建的' }) {
+  return (
+    <div className="flex items-center shrink-0 flex-wrap" style={{ gap: '8px' }}>
+      <Input
+        placeholder="搜索"
+        prefix={<Icon name="search-md-stroked" />}
+        className="max-w-full"
+        style={{ flex: '0 1 240px', width: '240px', minWidth: '200px', '--size-input-width': '100%' }}
+      />
+      {filters.map((label) => (
+        <FilterPill key={label} label={label} />
+      ))}
+      {checkboxLabel && <FilterCheckPill label={checkboxLabel} />}
+    </div>
+  );
+}
+
+/* 单个筛选触发器：白底 + 描边 + 圆角胶囊 + 文字 + chevron */
+function FilterPill({ label }) {
+  return (
+    <button
+      type="button"
+      className="inline-flex items-center shrink-0 cursor-pointer bg-white rounded-full border border-border-default text-sm font-semibold text-blueGrey-800 hover:bg-fill transition-colors duration-150"
+      style={{ height: '32px', padding: '0 12px', gap: '8px' }}
+    >
+      <span>{label}</span>
+      <Icon name="chevron-down-stroked" className="text-blueGrey-600" />
+    </button>
+  );
+}
+
+/* Checkbox 类型的筛选项：白底圆角胶囊里嵌一个 Checkbox */
+function FilterCheckPill({ label }) {
+  return (
+    <div
+      className="inline-flex items-center shrink-0 bg-white rounded-full border border-border-default"
+      style={{ height: '32px', padding: '0 12px' }}
+    >
+      <Checkbox size="md">{label}</Checkbox>
+    </div>
+  );
+}