@tfdesign/b-end 1.0.4

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

@@ -0,0 +1,594 @@
+import { useEffect, useMemo, useState } from 'react';
+import Avatar from '../components/Avatar';
+import Button from '../components/Button';
+import Icon from '../components/Icon';
+import Tabs from '../components/Tabs';
+import Tag from '../components/Tag';
+import { getTeamMemberByIndex, getTeamMemberByName } from '../teamMembers';
+import { FilterBar, WHITE_CARD_STYLE } from './pageListShared';
+
+/**
+ * TabTopBarListPage — B 端"胶囊 Tab 标题栏 + 卡片列表 + 详情面板"模板（列表示例 3）
+ *
+ * 模板结构（自上而下）：
+ *   · TopBar：场景胶囊（渠道切换） + 32px 竖分隔 + 胶囊 Tab 一级导航 + 操作按钮组
+ *   · 白卡（自上而下）：
+ *       筛选栏
+ *       └ 横向两栏：左卡片流（flex-1 可滚动） + 右详情面板（shrink-0 460px，可关闭）
+ *
+ * 极简版交互：
+ *   · 默认选中第 1 张卡片，详情面板渲染该卡片数据
+ *   · 点击当前已选中卡片 → 详情收起（toggle 语义），列表撑满整个白卡宽度
+ *   · 点击其他卡片 → 切换选中并保持/重新打开详情
+ *   · 详情面板右上角"×" → 等同 toggle 收起
+ *   · 切换顶部 Tab → 数据集换、详情默认重置为该集第 1 条
+ *   · 详情打开/收起为宽度 + 透明度 280ms 缓动过渡，无突兀闪现
+ */
+
+const SCENE_LABEL = '渠道切换';
+const FILTERS = ['知识类型', '创建人', '状态'];
+const DETAIL_WIDTH = 'min(460px, 40vw)';
+
+/* 状态 → Tag 颜色变体（Tag.variant） */
+const STATUS_TAG_VARIANT = {
+  '生效': 'green',
+  '已发布': 'green',
+  '草稿': 'grey',
+  '审核中': 'orange',
+  '已停用': 'red',
+  '已下架': 'red',
+};
+
+function assignTeamCreators(items, offset = 0) {
+  return items.map((item, index) => ({
+    ...item,
+    creator: getTeamMemberByIndex(offset + index)?.name || item.creator,
+  }));
+}
+
+const RAW_KNOWLEDGE_TABS = [
+  {
+    key: 'qa',
+    label: 'QA对知识',
+    createLabel: '创建QA对',
+    iconName: 'message-text-square-01-stroked',
+    typeLabel: 'QA',
+    data: [
+      {
+        id: 'qa-1',
+        title: '退款流程问答',
+        summary: '覆盖订单未发货 / 已发货 / 已签收三阶段的退款规则与超时处置。',
+        status: '生效',
+        creator: '林小北',
+        updatedAt: '2026-04-21 10:30',
+        tags: ['退款', '售后'],
+        question: '抖音生服订单已签收后还能申请退款吗？',
+        answer: '已签收订单仍可在 7 天无理由保障期内发起退款，需提供商品照片或服务异常说明，平台介入后通常 24h 内出结果。',
+      },
+      {
+        id: 'qa-2',
+        title: '账号注销问答',
+        summary: '提供账号注销前的资产清算与最终确认流程，含余额退还规则。',
+        status: '生效',
+        creator: '陈一诺',
+        updatedAt: '2026-04-20 18:45',
+        tags: ['账号', '注销'],
+        question: '注销账号后未消费的余额怎么办？',
+        answer: '注销前需将账户余额提现或转赠他人；若余额低于提现门槛，可联系客服走线下退款流程。',
+      },
+      {
+        id: 'qa-3',
+        title: '会员权益问答',
+        summary: '常见会员等级、积分、优惠券获取规则的标准答案。',
+        status: '审核中',
+        creator: '周知远',
+        updatedAt: '2026-04-19 14:12',
+        tags: ['会员', '权益'],
+        question: 'V4 会员能享受哪些独家折扣？',
+        answer: 'V4 会员享 8.8 折通用券、生日双倍积分、专属客服通道，及每月 1 次免预约的精选活动名额。',
+      },
+      {
+        id: 'qa-4',
+        title: '物流查询问答',
+        summary: '抖音生服 / 主端 / 抖音电商三端物流查询统一话术。',
+        status: '生效',
+        creator: '顾清禾',
+        updatedAt: '2026-04-18 09:20',
+        tags: ['物流', '查询'],
+        question: '订单显示已发货但快递无更新怎么办？',
+        answer: '建议先核对快递单号是否正确，若 24h 仍无更新可联系商家或在订单详情发起客服介入。',
+      },
+      {
+        id: 'qa-5',
+        title: '发票申请问答',
+        summary: '电子发票、增值税发票申请条件与开票流程。',
+        status: '草稿',
+        creator: '许言川',
+        updatedAt: '2026-04-17 16:05',
+        tags: ['发票', '开票'],
+        question: '什么订单可以开具增值税专用发票？',
+        answer: '企业实名认证账户下单的订单可在订单完成后 30 天内申请增值税专票，需提供完整税务信息。',
+      },
+    ],
+  },
+  {
+    key: 'doc',
+    label: '文档知识',
+    createLabel: '上传文档',
+    iconName: 'file-04-stroked',
+    typeLabel: '文档',
+    data: [
+      {
+        id: 'doc-1',
+        title: '商家入驻指引-2026版',
+        summary: '商家从入驻申请到首单履约的全流程指引，覆盖资质审核、店铺装修、商品上架、营销配置、客服接入五大节点。',
+        status: '生效',
+        creator: '林小北',
+        updatedAt: '2026-04-21 09:10',
+        tags: ['商家入驻', '指引'],
+        question: '入驻指引适用范围',
+        answer: '本指引面向 2026 年新入驻抖音生服平台的商家，已入驻商家可参考增量章节做能力升级。',
+      },
+      {
+        id: 'doc-2',
+        title: '客服培训手册',
+        summary: '新客服入职 14 天上岗培训内容沉淀，含话术库、SOP、应急处理三大模块。',
+        status: '生效',
+        creator: '陈一诺',
+        updatedAt: '2026-04-20 12:00',
+        tags: ['客服培训', '话术'],
+        question: '培训手册章节构成',
+        answer: '共分基础认知、产品熟悉、话术演练、模拟实战、上岗考核五个阶段，建议按周分段完成。',
+      },
+      {
+        id: 'doc-3',
+        title: '风险识别 SOP',
+        summary: '高风险订单 / 异常会话的识别与处置标准，含风险评分阈值与转人工触发条件。',
+        status: '审核中',
+        creator: '周知远',
+        updatedAt: '2026-04-19 17:30',
+        tags: ['风险', 'SOP'],
+        question: '风险订单分级标准',
+        answer: 'L1: 风控评分 60-79（系统自动复核）；L2: 80-94（人工复核）；L3: ≥95（直接拦截 + 介入）。',
+      },
+    ],
+  },
+  {
+    key: 'case',
+    label: '案例库',
+    createLabel: '新建案例',
+    iconName: 'atom-01-stroked',
+    typeLabel: '案例',
+    data: [
+      {
+        id: 'case-1',
+        title: '团购退款超时案例',
+        summary: '商家承诺 2 小时退款超时未到账的标准处置示例，含赔付金额计算与商家追责流程。',
+        status: '生效',
+        creator: '苏锦书',
+        updatedAt: '2026-04-21 11:08',
+        tags: ['团购', '退款'],
+        question: '案例适用场景',
+        answer: '适用于团购券/套餐/储值卡类目下"承诺退款时效"被打破的客诉场景。',
+      },
+      {
+        id: 'case-2',
+        title: '虚假宣传投诉案例',
+        summary: '门店实际服务与团购页面承诺不符的处理参考，含证据收集要点与赔付上限。',
+        status: '生效',
+        creator: '顾清禾',
+        updatedAt: '2026-04-20 14:25',
+        tags: ['宣传', '投诉'],
+        question: '判定虚假宣传的核心证据',
+        answer: '需同时具备：① 团购详情页截图；② 用户实际消费凭证；③ 双方对承诺差异的书面/录音确认。',
+      },
+      {
+        id: 'case-3',
+        title: '骑手配送纠纷案例',
+        summary: '配送途中商品损毁的责任判定与赔付流程示例。',
+        status: '已停用',
+        creator: '许言川',
+        updatedAt: '2026-04-18 22:50',
+        tags: ['配送', '纠纷'],
+        question: '损毁责任判定原则',
+        answer: '商品在骑手取件后、签收前损毁，原则上由骑手所属配送方承担，需 2 小时内完成首次响应。',
+      },
+    ],
+  },
+];
+
+const KNOWLEDGE_TABS = RAW_KNOWLEDGE_TABS.map((tab, tabIndex) => ({
+  ...tab,
+  data: assignTeamCreators(tab.data, tabIndex * 4),
+}));
+
+export default function TabTopBarListPage({ onCreateQA }) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const activeTab = KNOWLEDGE_TABS[activeIndex];
+
+  /* selectedCardId 同时承担"哪张选中"+"详情是否展开"两个语义：
+   *   · null  → 详情收起；列表中没有任何卡片高亮
+   *   · 'xxx' → 详情展开渲染对应数据；该卡片高亮 */
+  const [selectedCardId, setSelectedCardId] = useState(activeTab.data[0].id);
+
+  /* 切 Tab 时重置选中为新数据集的第一条（详情自然展开） */
+  useEffect(() => {
+    setSelectedCardId(activeTab.data[0].id);
+  }, [activeTab.key, activeTab.data]);
+
+  /* 详情数据：用 lastCardId 缓存"上一次打开过的卡片"，
+   * 这样收起动画过程中（selectedCardId 已变 null）右侧仍能渲染原内容直到动画结束，
+   * 避免内容突然消失的视觉跳变 */
+  const [lastCardId, setLastCardId] = useState(activeTab.data[0].id);
+  useEffect(() => {
+    if (selectedCardId) setLastCardId(selectedCardId);
+  }, [selectedCardId]);
+
+  const detailCard = useMemo(
+    () =>
+      activeTab.data.find((item) => item.id === lastCardId) || activeTab.data[0],
+    [activeTab.data, lastCardId],
+  );
+
+  const detailOpen = selectedCardId !== null;
+
+  function handleSelectCard(id) {
+    setSelectedCardId((prev) => (prev === id ? null : id));
+  }
+
+  return (
+    <>
+      {/* 顶部：胶囊 Tab 标题栏 */}
+      <div
+        className="flex min-w-0 shrink-0 items-center gap-2 overflow-x-auto"
+        style={{ padding: '12px 16px 12px 0' }}
+      >
+        <ScenePill label={SCENE_LABEL} />
+
+        <div
+          className="h-8 w-px shrink-0"
+          style={{ background: 'var(--color-border-default, #E4E7EC)' }}
+        />
+
+        <Tabs
+          variant="pill"
+          size="md"
+          activeIndex={activeIndex}
+          onChange={(idx) => setActiveIndex(idx)}
+          items={KNOWLEDGE_TABS.map((tab) => ({
+            label: tab.label,
+            icon: <Icon name={tab.iconName} />,
+          }))}
+        />
+
+        <div className="flex flex-1 items-center justify-end gap-2 min-w-0">
+          <Button
+            variant="ghost-black"
+            iconOnly
+            icon={<Icon name="dots-horizontal-stroked" />}
+            aria-label="更多操作"
+          />
+          <Button variant="outline-black">知识测试</Button>
+          <Button variant="outline-black">任务管理</Button>
+          <Button
+            variant="primary"
+            icon={<Icon name="plus-stroked" />}
+            onClick={onCreateQA}
+          >
+            {activeTab.createLabel}
+          </Button>
+        </div>
+      </div>
+
+      {/* 白卡：筛选栏 + 横向（卡片列表 + 详情面板） */}
+      <div
+        className="flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden"
+        style={{
+          margin: '0 16px 16px 0',
+          ...WHITE_CARD_STYLE,
+        }}
+      >
+        <div
+          className="flex flex-1 min-h-0 min-w-0 flex-col"
+          style={{ padding: '24px', gap: '16px' }}
+        >
+          <FilterBar filters={FILTERS} />
+
+          {/* 注：这里不设 gap，详情面板自己用 marginLeft 控制 16px 间距，
+              这样收起时间距也能跟着动画收拢，不会留出 16px 空白 */}
+          <div className="flex flex-1 min-h-0 min-w-0 overflow-hidden">
+            {/* 左：卡片列表（独立滚动） */}
+            <div
+              className="flex flex-1 min-h-0 min-w-0 flex-col overflow-y-auto"
+              style={{ gap: '12px' }}
+            >
+              {activeTab.data.map((item) => (
+                <KnowledgeCard
+                  key={item.id}
+                  item={item}
+                  typeLabel={activeTab.typeLabel}
+                  selected={item.id === selectedCardId}
+                  onClick={() => handleSelectCard(item.id)}
+                />
+              ))}
+            </div>
+
+            {/* 右：详情面板（width / opacity 过渡收起；点已选卡片 toggle 收起） */}
+            <DetailPanel
+              card={detailCard}
+              typeLabel={activeTab.typeLabel}
+              open={detailOpen}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+/* ── 单张知识卡片 ──
+ * 三态背景：默认浅灰填充 / hover 加深 / 选中浅绿；选中态额外用 1px brand-500 内描边强提示。
+ * 用 mouseenter/leave 切 inline background，避免 Tailwind hover: 与 inline style 优先级冲突。 */
+function KnowledgeCard({ item, typeLabel, selected, onClick }) {
+  const creator = getTeamMemberByName(item.creator) || getTeamMemberByIndex(0);
+  const baseBg = selected
+    ? 'var(--color-brand-50, #ECFFF9)'
+    : 'var(--color-blueGrey-50, #F4F7FB)';
+  const hoverBg = selected
+    ? 'var(--color-brand-50, #ECFFF9)'
+    : 'var(--color-blueGrey-100, #E4EAF2)';
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      onMouseEnter={(e) => { e.currentTarget.style.background = hoverBg; }}
+      onMouseLeave={(e) => { e.currentTarget.style.background = baseBg; }}
+      className="min-w-0 text-left cursor-pointer focus-visible:outline-none"
+      style={{
+        border: selected
+          ? '1px solid var(--color-brand-500, #00B384)'
+          : '1px solid var(--color-border-default, #E4E7EC)',
+        borderRadius: '12px',
+        padding: '16px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        background: baseBg,
+        transition: 'background 150ms ease, border-color 150ms ease',
+      }}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <p
+          className="font-semibold text-blueGrey-900 m-0"
+          style={{
+            fontSize: '16px',
+            lineHeight: '24px',
+            display: '-webkit-box',
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+          }}
+        >
+          {item.question}
+        </p>
+        <Tag variant={STATUS_TAG_VARIANT[item.status] || 'grey'} style={{ flexShrink: 0 }}>
+          {item.status}
+        </Tag>
+      </div>
+
+      <p
+        className="text-blueGrey-600 m-0"
+        style={{
+          fontSize: '14px',
+          lineHeight: '22px',
+          display: '-webkit-box',
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: 'vertical',
+          overflow: 'hidden',
+        }}
+      >
+        {item.answer}
+      </p>
+
+      <div className="flex items-center text-blueGrey-500" style={{ fontSize: '12px', gap: '12px' }}>
+        <span className="inline-flex items-center" style={{ gap: '4px' }}>
+          <Icon name="tag-01-stroked" size="xs" />
+          {typeLabel}
+        </span>
+        <span className="inline-flex items-center" style={{ gap: '4px' }}>
+          <Icon name="clock-stroked" size="xs" />
+          {item.updatedAt}
+        </span>
+        <span className="inline-flex items-center" style={{ gap: '4px' }}>
+          <Avatar size="xxs" type="image" src={creator?.avatarSrc} alt={`${item.creator}头像`} />
+          {item.creator}
+        </span>
+      </div>
+    </button>
+  );
+}
+
+/* ── 右侧详情面板 ──
+ * 外层 wrapper 用 width + opacity 一起过渡，实现"从右侧收起、列表平滑撑满"动效；
+ * 内层固定 460px，避免内容随 width 一起被压缩出现错位。
+ * 关闭：点击已选中卡片 toggle 收起（无独立 × 按钮）。 */
+function DetailPanel({ card, typeLabel, open }) {
+  const creator = getTeamMemberByName(card.creator) || getTeamMemberByIndex(0);
+  return (
+    <div
+      className="shrink-0 overflow-hidden"
+      style={{
+        width: open ? DETAIL_WIDTH : '0px',
+        marginLeft: open ? '16px' : '0px',
+        opacity: open ? 1 : 0,
+        transition:
+          'width 280ms cubic-bezier(0.4, 0, 0.2, 1), margin-left 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease',
+      }}
+      aria-hidden={!open}
+    >
+      <aside
+        className="flex flex-col h-full overflow-hidden"
+        style={{
+          width: DETAIL_WIDTH,
+          ...WHITE_CARD_STYLE,
+          border: '1px solid var(--color-border-default, #E4E7EC)',
+        }}
+      >
+        <div className="flex flex-col flex-1 min-h-0" style={{ padding: '20px', gap: '16px' }}>
+
+          {/* Header：标题 + 状态 + 操作按钮组 */}
+          <div className="flex items-center justify-between gap-2 shrink-0">
+            <div className="flex items-center gap-2 min-w-0">
+              <h3
+                className="font-semibold text-blueGrey-900 m-0 truncate"
+                style={{ fontSize: '16px', lineHeight: '24px' }}
+              >
+                知识详情
+              </h3>
+              <Tag variant={STATUS_TAG_VARIANT[card.status] || 'grey'}>
+                {card.status}
+              </Tag>
+            </div>
+            <div className="flex items-center gap-1.5 shrink-0">
+              <Button
+                variant="ghost-black"
+                iconOnly
+                icon={<Icon name="dots-horizontal-stroked" />}
+                aria-label="更多操作"
+              />
+              <Button
+                variant="outline-black"
+                icon={<Icon name="edit-03-stroked" />}
+              >
+                编辑
+              </Button>
+              <Button
+                variant="outline-black"
+                icon={<Icon name="plus-stroked" />}
+              >
+                规则答案
+              </Button>
+            </div>
+          </div>
+
+          {/* 元信息：行式布局（关联标签 / 知识类型 / 最近更新） */}
+          <div className="flex flex-col shrink-0" style={{ gap: '10px' }}>
+            <DetailMetaRow label="关联标签">
+              <div className="flex flex-wrap" style={{ gap: '4px' }}>
+                {(card.tags || []).map((t) => (
+                  <Tag key={t} variant="grey">{t}</Tag>
+                ))}
+              </div>
+            </DetailMetaRow>
+            <DetailMetaRow label="知识类型">
+              <span className="text-blueGrey-900" style={{ fontSize: '13px' }}>{typeLabel}</span>
+            </DetailMetaRow>
+            <DetailMetaRow label="最近更新">
+              <span className="inline-flex items-center" style={{ gap: '6px', fontSize: '13px', color: 'var(--color-blueGrey-900)' }}>
+                <Avatar size="mini" type="image" src={creator?.avatarSrc} alt={`${card.creator}头像`} />
+                {card.updatedAt}
+              </span>
+            </DetailMetaRow>
+          </div>
+
+          <div
+            className="shrink-0"
+            style={{ height: '1px', background: 'var(--color-border-default, #E4E7EC)' }}
+          />
+
+          {/* 正文区：问题 + 回答 */}
+          <div className="flex flex-col flex-1 min-h-0 overflow-y-auto" style={{ gap: '20px' }}>
+            <div className="flex flex-col" style={{ gap: '12px' }}>
+              <SectionBadge type="question">Questions / 问</SectionBadge>
+              <p
+                className="font-semibold text-blueGrey-900 m-0"
+                style={{ fontSize: '16px', lineHeight: '26px' }}
+              >
+                {card.question}
+              </p>
+            </div>
+            <div className="flex flex-col" style={{ gap: '12px' }}>
+              <SectionBadge type="answer">Answers / 答</SectionBadge>
+              <p
+                className="text-blueGrey-700 m-0"
+                style={{ fontSize: '14px', lineHeight: '24px' }}
+              >
+                {card.answer}
+              </p>
+            </div>
+          </div>
+
+        </div>
+      </aside>
+    </div>
+  );
+}
+
+/* 元信息行：固定宽度 label + 右侧 value 插槽 */
+function DetailMetaRow({ label, children }) {
+  return (
+    <div className="flex items-center" style={{ gap: '16px' }}>
+      <span
+        className="text-blueGrey-500 shrink-0"
+        style={{ fontSize: '13px', lineHeight: '20px', minWidth: '56px' }}
+      >
+        {label}
+      </span>
+      <div className="flex items-center min-w-0">{children}</div>
+    </div>
+  );
+}
+
+/* 问题/答案区的分区徽章
+ * type="question" → 深色实底（blueGrey-900 底 + 白字）
+ * type="answer"   → 品牌色描边（brand 文字 + brand 描边，白底） */
+function SectionBadge({ type, children }) {
+  const isQuestion = type === 'question';
+  return (
+    <span
+      style={{
+        display: 'flex',
+        padding: '4px 12px',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '10px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        fontWeight: 600,
+        lineHeight: '18px',
+        alignSelf: 'flex-start',
+        ...(isQuestion
+          ? {
+              color: '#FFFFFF',
+              background: 'var(--color-blueGrey-900, #182230)',
+            }
+          : {
+              color: 'var(--color-brand-700, #18B49D)',
+              background: 'var(--color-brand-50, #EAFAF6)',
+            }),
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+/* ── 顶部场景胶囊 ── */
+function ScenePill({ label }) {
+  return (
+    <div
+      className="inline-flex items-center shrink-0 bg-white/50 ring-1 ring-white ring-inset rounded-full"
+      style={{ padding: '6px 8px' }}
+    >
+      <button
+        type="button"
+        className="inline-flex items-center gap-1 cursor-pointer h-8 px-4 rounded-full bg-transparent border-0 text-sm font-semibold text-blueGrey-900 leading-5"
+      >
+        <span>{label}</span>
+        <Icon name="chevron-down-stroked" />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import Button from '../components/Button';
+import Icon from '../components/Icon';
+import Table from '../components/Table';
+import {
+  FilterBar,
+  LIST_COLUMNS,
+  PAGE_CONTEXT_LABEL,
+  PageHeader,
+  WHITE_CARD_STYLE,
+  buildListDataSource,
+} from './pageListShared';
+
+/**
+ * VariableManagementPage — B 端"变量管理"列表页模板（单白卡版）
+ *
+ * 模板结构（自上而下）：
+ *   · 标题栏：左侧竖条 + 标题 + 业务上下文胶囊 + 右侧"新建变量"按钮
+ *   · 筛选栏：搜索框 + 下拉筛选胶囊 + Checkbox"我创建的"
+ *   · 表格：列定义共享自 pageListShared
+ *
+ * 业务接入：
+ *   · 替换 VARIABLE_DATA 为接口数据即可，列结构不变
+ *   · 改 PAGE_TITLE / VARIABLE_FILTERS 即可调整文案
+ */
+
+const PAGE_TITLE = '变量管理';
+const VARIABLE_FILTERS = ['变量类型', '创建人', '流程引用'];
+
+const VARIABLE_DATA = [
+  { name: 'user_id', tag: 'String', desc: '当前对话用户的统一标识，登录态自动注入。' },
+  { name: 'merchant_id', tag: 'String', desc: '当前会话所聚焦的商家 ID，用于权限隔离。' },
+  { name: 'activity_id', tag: 'String', desc: '关联的营销活动 ID，参与活动数据查询与配置。' },
+  { name: 'city_code', tag: 'Number', desc: '城市行政编码，驱动地域化策略与默认筛选。' },
+  { name: 'channel', tag: 'Enum', desc: '渠道来源（app / 小程序 / 抖音 / 客服），影响话术分发。' },
+  { name: 'order_no', tag: 'String', desc: '当前会话上下文订单号，触发订单类工具调用。' },
+];
+
+export default function VariableManagementPage({ onNewVariable }) {
+  const dataSource = useMemo(() => buildListDataSource('variable', VARIABLE_DATA), []);
+
+  return (
+    <div
+      className="flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden"
+      style={{
+        margin: '16px',
+        ...WHITE_CARD_STYLE,
+      }}
+    >
+      <div
+        className="flex flex-1 min-h-0 min-w-0 flex-col"
+        style={{ padding: '24px', gap: '16px' }}
+      >
+        <PageHeader
+          title={PAGE_TITLE}
+          contextLabel={PAGE_CONTEXT_LABEL}
+          actions={
+            <Button
+              variant="primary"
+              icon={<Icon name="plus-stroked" />}
+              onClick={onNewVariable}
+            >
+              新建变量
+            </Button>
+          }
+        />
+
+        <FilterBar filters={VARIABLE_FILTERS} />
+
+        <div className="flex flex-1 min-h-0">
+          <Table
+            className="h-full"
+            columns={LIST_COLUMNS}
+            dataSource={dataSource}
+            fixedColumnsMode="last"
+            pagination={{
+              current: 1,
+              pageSize: 10,
+              total: dataSource.length,
+              pageSizeOptions: [10, 20],
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}