@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/TablePreview.jsx

@@ -0,0 +1,599 @@
+import { useEffect, useMemo, useState } from 'react';
+import Table from './Table';
+import creatorAvatarSrc from './table-assets/avatar.png';
+import { TEAM_MEMBERS } from '../teamMembers';
+
+export const TABLE_COLUMN_TYPE_OPTIONS = [
+  { id: 'link', label: '可点文本' },
+  { id: 'text', label: '文本内容' },
+  { id: 'iconText', label: '图标+文本' },
+  { id: 'textButton', label: '文本+按钮' },
+  { id: 'status', label: '状态' },
+  { id: 'tag', label: '标签' },
+  { id: 'switch', label: '开关' },
+  { id: 'checkbox', label: '复选框' },
+  { id: 'avatar', label: '头像' },
+  { id: 'avatarText', label: '头像+主副文本' },
+  { id: 'linkDescription', label: '可点标题+描述' },
+  { id: 'image', label: '图片' },
+  { id: 'progress', label: '进度条' },
+  { id: 'datetime', label: '日期' },
+  { id: 'actions', label: '操作' },
+  { id: 'dragHandle', label: '拖拽操作' },
+];
+
+export const TABLE_CELL_SIZE_OPTIONS = [
+  { id: 'default', label: '默认' },
+  { id: 'middle', label: '中' },
+  { id: 'small', label: '小' },
+];
+
+export const TABLE_VARIANT_OPTIONS = [
+  { id: 'table', label: '标准表格' },
+  { id: 'card-form', label: '卡片型表单' },
+];
+
+const TYPE_LABEL_MAP = Object.fromEntries(TABLE_COLUMN_TYPE_OPTIONS.map((item) => [item.id, item.label]));
+
+const TYPE_WIDTH_MAP = {
+  link: 188,
+  text: 162,
+  iconText: 176,
+  textButton: 186,
+  status: 130,
+  tag: 112,
+  switch: 108,
+  checkbox: 72,
+  avatar: 168,
+  avatarText: 220,
+  linkDescription: 220,
+  image: 132,
+  progress: 164,
+  datetime: 180,
+  actions: 152,
+  dragHandle: 68,
+};
+
+const COLUMN_DEFAULT_TYPES = ['link', 'tag', 'text', 'avatar', 'datetime', 'actions'];
+
+const LINK_VALUES = [
+  { label: '春季团购套餐上新计划' },
+  { label: '门店直播爆款引流活动配置' },
+  { label: '周末双人餐核销补贴方案' },
+  { label: '连锁门店节假日预约承接排期' },
+  { label: '到店美发次卡新客拉新测试' },
+  { label: '本地推联投商家素材提审' },
+];
+
+const ICON_TEXT_VALUES = [
+  { label: '平台推荐资源位', iconName: 'award-01-stroked' },
+  { label: '重点商家扶持计划', iconName: 'award-01-stroked' },
+  { label: '高潜团购商品池', iconName: 'award-01-stroked' },
+  { label: '履约体验加分项', iconName: 'award-01-stroked' },
+];
+
+const TEXT_BUTTON_VALUES = [
+  { label: '补充门店活动亮点说明', iconName: 'edit-04-stroked' },
+  { label: '核销动线需补充商场停车指引与到店路径说明', iconName: 'edit-04-stroked' },
+  { label: '商家要求新增达人探店口播重点', iconName: 'edit-04-stroked' },
+  { label: '预约服务已同步节假日接待上限', iconName: 'edit-04-stroked' },
+];
+
+const STATUS_VALUES = [
+  { label: '生效中', tone: 'success' },
+  { label: '待上线', tone: 'warning' },
+  { label: '已停用', tone: 'danger' },
+  { label: '审核中', tone: 'warning' },
+];
+
+const TAG_VALUES = [
+  [{ label: '到店餐饮', variant: 'white' }],
+  [{ label: '周末热卖', variant: 'white' }],
+  [{ label: '新客引流', variant: 'white' }],
+  [{ label: '品牌连锁', variant: 'white' }],
+  [{ label: '限时抢购', variant: 'white' }],
+  [{ label: '达人合作', variant: 'white' }],
+];
+
+const TEXT_VALUES = [
+  '适用于商家主页、短视频挂载和同城频道分发。',
+  '门店营业时段已同步，支持预约到店与即时核销。',
+  '优先投放给近 7 天有团购浏览和收藏行为的高意向用户。',
+  '商家补充了停车权益、包间规则和节假日使用说明，文案相对更长一些。',
+  '支持多门店联动上架，券后价格已与 POS 系统完成校验。',
+];
+
+const AVATAR_VALUES = TEAM_MEMBERS.map((member) => ({
+  name: member.name,
+  avatarSrc: member.avatarSrc,
+}));
+
+const AVATAR_TEXT_VALUES = [
+  { description: '商家运营负责人' },
+  { description: '服务商投放经理' },
+  { description: '生活服务审核同学' },
+  { description: '连锁品牌区域运营' },
+  { description: '履约体验项目 owner' },
+  { description: '策略分析负责人' },
+  { description: '交互设计负责人' },
+  { description: '业务架构负责人' },
+  { description: '体验优化负责人' },
+].map((item, index) => ({
+  name: TEAM_MEMBERS[index % TEAM_MEMBERS.length].name,
+  avatarSrc: TEAM_MEMBERS[index % TEAM_MEMBERS.length].avatarSrc,
+  description: item.description,
+}));
+
+const LINK_DESCRIPTION_VALUES = [
+  { label: '五一爆款双人餐商家联合活动', description: '覆盖 32 家核心门店，预计带动节前搜索与下单转化。' },
+  { label: '达人探店合作商家池', description: '待确认到店拍摄时间、素材共创方向及挂载商品组合。' },
+  { label: '门店预约服务承接方案', description: '需要同步理发师排班、用户爽约规则和售后处理口径。' },
+  { label: '酒旅周边游限时套餐', description: '当前库存充足，但节假日房态需按城市维度单独校验。' },
+];
+
+const DATETIME_VALUES = [
+  '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',
+];
+
+const PROGRESS_VALUES = [18, 36, 52, 68, 84, 96];
+
+const CARD_FORM_SAMPLE_DATA = [
+  {
+    id: 'experience-1',
+    title: '抖音体验与服务-账号绑定进线流程',
+    status: '线上生效',
+    subtitle: '用户进线后的路由编排',
+    quoteCount: '99+',
+    channels: '智能客服、人工坐席',
+    description: '面向账号绑定咨询的体验服务流程，负责识别意图、补充信息和转接路径。',
+    category: '账号服务',
+    updatedAt: '2026-04-21 10:30',
+    versions: [
+      { id: 'experience-1-v4', v: 4, title: '优化身份校验引导', status: '草稿中', completion: '96%', execCount: 128, satisfaction: '94%', humanRate: '8%' },
+      { id: 'experience-1-v3', v: 3, title: '新增绑定失败兜底', status: '实验中', completion: '93%', execCount: 276, satisfaction: '91%', humanRate: '11%' },
+      { id: 'experience-1-v2', v: 2, title: '更新账号申诉链路', status: '已发布', completion: '98%', execCount: 512, satisfaction: '95%', humanRate: '7%' },
+    ],
+  },
+  {
+    id: 'experience-2',
+    title: '抖音体验与服务-创作者权益申诉',
+    status: '实验中',
+    subtitle: '权益问题自动分流处理',
+    quoteCount: '0',
+    channels: '在线客服、服务工单',
+    description: '用于创作者权益申诉的服务分流，覆盖权益识别、证据补充和工单跟进。',
+    category: '权益申诉',
+    updatedAt: '2026-04-20 18:45',
+    versions: [
+      { id: 'experience-2-v2', v: 2, title: '补充权益类型识别', status: '草稿中', completion: '88%', execCount: 74, satisfaction: '89%', humanRate: '15%' },
+      { id: 'experience-2-v1', v: 1, title: '上线申诉工单模板', status: '已发布', completion: '92%', execCount: 188, satisfaction: '90%', humanRate: '13%' },
+    ],
+  },
+  {
+    id: 'experience-3',
+    title: '抖音体验与服务-违规处罚解释',
+    status: '暂未生效',
+    subtitle: '处罚原因说明与安抚',
+    quoteCount: '0',
+    channels: '智能客服、人工坐席',
+    description: '面向账号处罚咨询，提供处罚原因解释、规则说明和申诉入口引导。',
+    category: '账号处罚',
+    updatedAt: '2026-04-19 14:12',
+    versions: [
+      { id: 'experience-3-v3', v: 3, title: '更新处罚解释口径', status: '已发布', completion: '97%', execCount: 342, satisfaction: '93%', humanRate: '9%' },
+      { id: 'experience-3-v2', v: 2, title: '增加申诉材料提示', status: '实验中', completion: '90%', execCount: 126, satisfaction: '88%', humanRate: '16%' },
+      { id: 'experience-3-v1', v: 1, title: '下线旧版规则说明', status: '已下线', completion: '84%', execCount: 61, satisfaction: '82%', humanRate: '21%' },
+    ],
+  },
+  {
+    id: 'experience-4',
+    title: '抖音体验与服务-直播间举报处理',
+    status: '线上生效',
+    subtitle: '举报受理与风险分级',
+    quoteCount: '76',
+    channels: '在线客服、审核工单',
+    description: '用于直播间举报场景的自动受理，支持风险分级、证据收集和处理进度同步。',
+    category: '举报处理',
+    updatedAt: '2026-04-18 09:20',
+    versions: [
+      { id: 'experience-4-v2', v: 2, title: '优化高危举报分级', status: '已发布', completion: '95%', execCount: 238, satisfaction: '92%', humanRate: '12%' },
+      { id: 'experience-4-v1', v: 1, title: '补充直播证据采集', status: '实验中', completion: '89%', execCount: 105, satisfaction: '87%', humanRate: '18%' },
+    ],
+  },
+  {
+    id: 'experience-5',
+    title: '抖音体验与服务-订单售后协同',
+    status: '草稿中',
+    subtitle: '售后咨询与工单协同',
+    quoteCount: '32',
+    channels: '服务工单、人工坐席',
+    description: '面向订单售后咨询，沉淀退款、补偿、进度查询和跨团队协同处理流程。',
+    category: '售后协同',
+    updatedAt: '2026-04-17 16:05',
+    versions: [
+      { id: 'experience-5-v2', v: 2, title: '新增补偿协同节点', status: '草稿中', completion: '78%', execCount: 42, satisfaction: '85%', humanRate: '19%' },
+      { id: 'experience-5-v1', v: 1, title: '搭建售后查询流程', status: '已发布', completion: '91%', execCount: 214, satisfaction: '90%', humanRate: '14%' },
+    ],
+  },
+];
+
+const TABLE_PREVIEW_TOTAL = 46;
+
+function cloneMockValue(value) {
+  if (Array.isArray(value)) {
+    return value.map((item) => (typeof item === 'object' && item !== null ? { ...item } : item));
+  }
+  if (typeof value === 'object' && value !== null) {
+    return { ...value };
+  }
+  return value;
+}
+
+function pickMockValue(values, index) {
+  return cloneMockValue(values[index % values.length]);
+}
+
+function getColumnTitle(type, index) {
+  if (type === 'checkbox' || type === 'dragHandle') return '';
+  return TYPE_LABEL_MAP[type] || `第${index + 1}列`;
+}
+
+function buildCellValue(type, index) {
+  switch (type) {
+    case 'link':
+      return pickMockValue(LINK_VALUES, index);
+    case 'iconText':
+      return pickMockValue(ICON_TEXT_VALUES, index);
+    case 'textButton':
+      return pickMockValue(TEXT_BUTTON_VALUES, index);
+    case 'status':
+      return pickMockValue(STATUS_VALUES, index);
+    case 'tag':
+      return pickMockValue(TAG_VALUES, index);
+    case 'switch':
+      return { checked: index % 2 === 0 };
+    case 'checkbox':
+      return { checked: index % 3 === 0 };
+    case 'avatar':
+      {
+        const avatar = pickMockValue(AVATAR_VALUES, index);
+        return {
+          name: avatar.name,
+          avatarType: 'image',
+          avatarSrc: avatar.avatarSrc,
+          avatarAlt: `${avatar.name}头像`,
+        };
+      }
+    case 'avatarText':
+      {
+        const avatarText = pickMockValue(AVATAR_TEXT_VALUES, index);
+        return {
+          ...avatarText,
+          avatarType: 'image',
+          avatarSrc: avatarText.avatarSrc,
+          avatarAlt: `${avatarText.name}头像`,
+        };
+      }
+    case 'linkDescription':
+      return pickMockValue(LINK_DESCRIPTION_VALUES, index);
+    case 'image':
+      return {
+        src: creatorAvatarSrc,
+        alt: '生活服务业务配图',
+      };
+    case 'progress':
+      return { value: pickMockValue(PROGRESS_VALUES, index) };
+    case 'datetime':
+      return pickMockValue(DATETIME_VALUES, index);
+    case 'actions':
+      return [
+        { key: 'edit', label: index % 2 === 0 ? '编辑配置' : '同步门店信息', onClick: () => {} },
+        { key: 'view', label: index % 2 === 0 ? '查看详情' : '查看完整方案', onClick: () => {} },
+        { key: 'more', kind: 'more', onClick: () => {} },
+      ];
+    case 'dragHandle':
+      return null;
+    case 'text':
+    default:
+      return pickMockValue(TEXT_VALUES, index);
+  }
+}
+
+function buildActionMessage(actionLabel, rowIndex, columnTitle) {
+  return `已点击第 ${rowIndex + 1} 行「${columnTitle || '未命名列'}」的${actionLabel}`;
+}
+
+function enhanceCellValue(type, value, { rowIndex, column, setRecords, setInteractionMessage }) {
+  const columnTitle = column.title || TYPE_LABEL_MAP[type] || `第${rowIndex + 1}列`;
+  const updateCell = (nextValue) => {
+    setRecords((prev) => prev.map((row) => (
+      row.id === `row-${rowIndex}`
+        ? { ...row, [column.dataIndex]: nextValue }
+        : row
+    )));
+  };
+
+  switch (type) {
+    case 'link':
+      return {
+        ...value,
+        onClick: () => setInteractionMessage(buildActionMessage('标题按钮', rowIndex, columnTitle)),
+      };
+    case 'textButton':
+      return {
+        ...value,
+        onClick: () => setInteractionMessage(buildActionMessage('文本按钮图标', rowIndex, columnTitle)),
+      };
+    case 'switch':
+      return {
+        ...value,
+        onChange: (checked) => {
+          updateCell({ ...value, checked });
+          setInteractionMessage(`第 ${rowIndex + 1} 行「${columnTitle}」已切换为${checked ? '开启' : '关闭'}`);
+        },
+      };
+    case 'checkbox':
+      return {
+        ...value,
+        onChange: (checked) => {
+          updateCell({ ...value, checked });
+          setInteractionMessage(`第 ${rowIndex + 1} 行「${columnTitle}」已${checked ? '勾选' : '取消勾选'}`);
+        },
+      };
+    case 'linkDescription':
+      return {
+        ...value,
+        onClick: () => setInteractionMessage(buildActionMessage('标题+描述按钮', rowIndex, columnTitle)),
+      };
+    case 'actions':
+      return [
+        {
+          key: 'edit',
+          label: '编辑',
+          onClick: () => setInteractionMessage(buildActionMessage('编辑', rowIndex, columnTitle)),
+        },
+        {
+          key: 'view',
+          label: '查看',
+          onClick: () => setInteractionMessage(buildActionMessage('查看', rowIndex, columnTitle)),
+        },
+        {
+          key: 'more',
+          kind: 'more',
+          onClick: () => setInteractionMessage(buildActionMessage('更多操作', rowIndex, columnTitle)),
+        },
+      ];
+    case 'dragHandle':
+      return {
+        onClick: () => setInteractionMessage(buildActionMessage('拖拽操作', rowIndex, columnTitle)),
+      };
+    default:
+      return value;
+  }
+}
+
+function buildColumns(controlValues) {
+  const tableSize = controlValues.tableSize || 'default';
+  const headerCount = Math.max(2, Math.min(6, Number(controlValues.headerCount || 6)));
+  return Array.from({ length: headerCount }, (_, index) => {
+    const type = controlValues[`column${index + 1}Type`] || COLUMN_DEFAULT_TYPES[index] || 'text';
+
+    return {
+      key: `column-${index + 1}`,
+      title: getColumnTitle(type, index),
+      type,
+      cellSize: tableSize,
+      dataIndex: `column${index + 1}`,
+      width: TYPE_WIDTH_MAP[type] || 160,
+    };
+  });
+}
+
+function buildRow(index, columns) {
+  const row = { id: `row-${index}` };
+  columns.forEach((column, columnIndex) => {
+    row[column.dataIndex] = buildCellValue(column.type, index + columnIndex);
+  });
+  return row;
+}
+
+export function buildTableUsageFromControls(controlValues = {}) {
+  const tableVariant = controlValues.tableVariant || 'table';
+
+  if (tableVariant === 'card-form') {
+    return [
+      `import Table from './components/Table';`,
+      '',
+      'const dataSource = [',
+      '  {',
+      "    id: 'experience-1',",
+      "    title: '抖音体验与服务-账号绑定进线流程',",
+      "    status: '线上生效',",
+      "    subtitle: '用户进线后的路由编排',",
+      "    quoteCount: '99+',",
+      "    channels: '智能客服、人工坐席',",
+      "    description: '面向账号绑定咨询的体验服务流程，负责识别意图、补充信息和转接路径。',",
+      "    category: '账号服务',",
+      "    updatedAt: '2026-04-21 10:30',",
+      '    versions: [',
+      "      { id: 'experience-1-v4', v: 4, title: '优化身份校验引导', status: '草稿中', completion: '96%', execCount: 128, satisfaction: '94%', humanRate: '8%' },",
+      "      { id: 'experience-1-v3', v: 3, title: '新增绑定失败兜底', status: '实验中', completion: '93%', execCount: 276, satisfaction: '91%', humanRate: '11%' },",
+      '    ],',
+      '  },',
+      '];',
+      '',
+      '<Table',
+      '  variant="card-form"',
+      '  dataSource={dataSource}',
+      '  rowKey="id"',
+      '  defaultExpandedRowKeys={["experience-1"]}',
+      '  pagination={{ current: 1, pageSize: 20, total: dataSource.length, pageSizeOptions: [10, 20] }}',
+      '  onExpandedRowKeysChange={(keys) => {}}',
+      '  onView={(record, context) => {}}',
+      '  onMore={(record, context) => {}}',
+      '/>',
+    ].join('\n');
+  }
+
+  const columns = buildColumns(controlValues);
+  const fixedColumnsMode = controlValues.fixedColumnsMode || 'none';
+  const lines = [
+    `import Table from './components/Table';`,
+    '',
+    'const columns = [',
+  ];
+
+  columns.forEach((column) => {
+    lines.push(
+      `  { key: '${column.key}', title: '${column.title}', type: '${column.type}', cellSize: '${column.cellSize}', dataIndex: '${column.dataIndex}', width: ${column.width} },`,
+    );
+  });
+
+  lines.push('];', '', 'const dataSource = [', '  {');
+  columns.forEach((column) => {
+    lines.push(`    ${column.dataIndex}: /* ${TYPE_LABEL_MAP[column.type] || column.type} 对应数据 */ null,`);
+  });
+  lines.push(
+    '  },',
+    '];',
+    '',
+    '<Table',
+    '  columns={columns}',
+    '  dataSource={dataSource}',
+    `  fixedColumnsMode="${fixedColumnsMode}"`,
+    '  pagination={{ current: 1, pageSize: 20, total: dataSource.length, pageSizeOptions: [10, 20] }}',
+    '/>',
+  );
+  return lines.join('\n');
+}
+
+export default function TablePreview({
+  tableVariant = 'table',
+  paginationMode = 'on',
+  pageSizeMode = '20',
+  tableSize = 'default',
+  fixedColumnsMode = 'none',
+  headerCount = '5',
+  column1Type = 'link',
+  column2Type = 'tag',
+  column3Type = 'text',
+  column4Type = 'avatar',
+  column5Type = 'datetime',
+  column6Type = 'actions',
+}) {
+  const showPagination = paginationMode !== 'off';
+  const pageSize = pageSizeMode === '10' ? 10 : 20;
+  const controlValues = {
+    tableVariant,
+    tableSize,
+    fixedColumnsMode,
+    headerCount,
+    column1Type,
+    column2Type,
+    column3Type,
+    column4Type,
+    column5Type,
+    column6Type,
+  };
+
+  const columns = useMemo(
+    () => buildColumns(controlValues),
+    [tableSize, fixedColumnsMode, headerCount, column1Type, column2Type, column3Type, column4Type, column5Type, column6Type],
+  );
+  const [current, setCurrent] = useState(1);
+  const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const [, setInteractionMessage] = useState('点击表格中的按钮、开关或复选框以查看真实交互反馈');
+  const [records, setRecords] = useState([]);
+  const [expandedRowKeys, setExpandedRowKeys] = useState(['strategy-1']);
+
+  useEffect(() => {
+    setCurrentPageSize(pageSize);
+    setCurrent(1);
+  }, [pageSize]);
+
+  useEffect(() => {
+    setRecords(Array.from({ length: showPagination ? TABLE_PREVIEW_TOTAL : 10 }, (_, i) => buildRow(i, columns)));
+  }, [columns, showPagination]);
+
+  const dataSource = useMemo(
+    () => records.map((record, rowIndex) => {
+      const nextRecord = { id: record.id };
+      columns.forEach((column) => {
+        nextRecord[column.dataIndex] = enhanceCellValue(column.type, record[column.dataIndex], {
+          rowIndex,
+          column,
+          setRecords,
+          setInteractionMessage,
+        });
+      });
+      return nextRecord;
+    }),
+    [columns, records],
+  );
+
+  if (tableVariant === 'card-form') {
+    return (
+      <div className="flex h-full min-h-0 w-full">
+        <Table
+          variant="card-form"
+          className="h-full"
+          dataSource={CARD_FORM_SAMPLE_DATA}
+          rowKey="id"
+          expandedRowKeys={expandedRowKeys}
+          onExpandedRowKeysChange={setExpandedRowKeys}
+          pagination={
+            showPagination
+              ? {
+                  current,
+                  pageSize: currentPageSize,
+                  total: CARD_FORM_SAMPLE_DATA.length,
+                  pageSizeOptions: [10, 20],
+                }
+              : null
+          }
+          onPageChange={(page) => setCurrent(page)}
+          onPageSizeChange={(nextPageSize) => {
+            setCurrentPageSize(nextPageSize);
+            setCurrent(1);
+          }}
+          onView={(record, context) => {
+            setInteractionMessage(`已查看${context.type === 'version' ? '版本' : '策略'}「${record.title}」`);
+          }}
+          onMore={(record, context) => {
+            setInteractionMessage(`已打开${context.type === 'version' ? '版本' : '策略'}「${record.title}」更多操作`);
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full min-h-0 w-full">
+      <Table
+        className="h-full"
+        columns={columns}
+        dataSource={dataSource}
+        fixedColumnsMode={fixedColumnsMode}
+        pagination={
+          showPagination
+            ? {
+                current,
+                pageSize: currentPageSize,
+                total: dataSource.length,
+                pageSizeOptions: [10, 20],
+              }
+            : null
+        }
+        onPageChange={(page) => setCurrent(page)}
+        onPageSizeChange={(nextPageSize) => {
+          setCurrentPageSize(nextPageSize);
+          setCurrent(1);
+        }}
+      />
+    </div>
+  );
+}