@tfdesign/b-end 1.0.4

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

@@ -0,0 +1,237 @@
+import { useMemo, useState } from 'react';
+import Button from '../components/Button';
+import Icon from '../components/Icon';
+import Sheet from '../components/Sheet';
+import Table from '../components/Table';
+import TagBar from '../components/TagBar';
+import {
+  FilterBar,
+  LIST_COLUMNS,
+  PAGE_CONTEXT_LABEL,
+  PageHeader,
+  WHITE_CARD_STYLE,
+  buildListDataSource,
+} from './pageListShared';
+
+/**
+ * McpManagementPage — B 端"MCP 工具管理"列表页模板（双白卡 + TagBar 版）
+ *
+ * 模板结构（横向两个白卡）：
+ *   · 左侧白卡：可拖拽调宽的辅助大卡，内部承载 TagBar 标签树（业务切换 + 多级标签）
+ *   · 右侧白卡：主工作区白卡，承载标题栏 + 筛选栏 + 表格，并弹性占满剩余空间
+ *   · 选中标签节点 → 右侧列表自动按 tagIds 过滤
+ *
+ * 规则语义：
+ *   · 该页是“横向大卡工作区默认支持宽度拖拽”的标准示例
+ *   · 主卡始终 `flex-1 min-w-0`，左侧辅助卡通过 `width + onWidthChange + minWidth + maxWidth`
+ *     在边界内自由调宽
+ *   · 左卡外层保持 `overflow-visible`，确保拖拽把手不会被裁切
+ *
+ * 业务接入：
+ *   · MCP_TAG_TREE 替换为业务真实分类树
+ *   · MCP_DATA 每条增加 tagIds 关联
+ *   · 其他文案（标题/筛选项/创建按钮）按业务调整
+ */
+
+const PAGE_TITLE = 'MCP 工具管理';
+const MCP_FILTERS = ['MCP 类型', '创建人', '状态'];
+const MCP_TAGBAR_WIDTH_LIMITS = {
+  initial: 260,
+  min: 200,
+  max: 360,
+};
+
+/* ── 左侧 TagBar：业务切换 ── */
+const MCP_BUSINESSES = [
+  { id: 'douyin-local-services', label: '抖音生活服务', iconSrc: 'icon-logo-douyin' },
+  { id: 'douyin-community', label: '抖音社区', iconSrc: 'icon-logo-douyin' },
+  { id: 'douyin-ecommerce', label: '抖音电商', iconSrc: 'icon-logo-douyin' },
+];
+
+/* ── 左侧 TagBar：标签树（决定 MCP 列表的筛选维度） ── */
+const MCP_TAG_TREE = [
+  {
+    id: 'data',
+    label: '数据中台',
+    iconName: 'database-01-stroked',
+    iconBgToken: 'blue-50',
+    children: [
+      { id: 'data-poi', label: 'POI 数据' },
+      { id: 'data-user', label: '用户数据' },
+      { id: 'data-order', label: '订单数据' },
+    ],
+  },
+  {
+    id: 'marketing',
+    label: '营销中台',
+    iconName: 'gift-01-stroked',
+    iconBgToken: 'orange-50',
+    children: [
+      { id: 'marketing-coupon', label: '券与活动' },
+      { id: 'marketing-content', label: '内容审核' },
+    ],
+  },
+  {
+    id: 'algo',
+    label: '算法服务',
+    iconName: 'cpu-chip-01-stroked',
+    iconBgToken: 'purple-50',
+    children: [
+      { id: 'algo-recommend', label: '推荐召回' },
+      { id: 'algo-rank', label: '排序与策略' },
+    ],
+  },
+];
+
+const MCP_DEFAULT_TAG_ID = 'data';
+const MCP_DEFAULT_EXPANDED_IDS = ['data', 'marketing', 'algo'];
+
+const MCP_DATA = [
+  { name: 'POI 数据 MCP', tag: '数据接入', desc: '统一调用 POI 基础信息、坐标、营业时间等字段。', tagIds: ['data', 'data-poi'] },
+  { name: '门店地理 MCP', tag: '数据接入', desc: '门店所在城市、商圈、行政区编码的批量查询能力。', tagIds: ['data', 'data-poi'] },
+  { name: '用户画像 MCP', tag: '画像服务', desc: '封装画像中台的标签查询、人群圈选能力。', tagIds: ['data', 'data-user'] },
+  { name: '用户行为 MCP', tag: '行为分析', desc: '近 30 天浏览、点击、下单等行为聚合查询。', tagIds: ['data', 'data-user'] },
+  { name: '订单查询 MCP', tag: '订单服务', desc: '聚合主站、本地推、抖音生服等多端订单数据。', tagIds: ['data', 'data-order'] },
+  { name: '履约状态 MCP', tag: '订单服务', desc: '物流节点、配送进度与异常订单的实时识别。', tagIds: ['data', 'data-order'] },
+  { name: '营销中台 MCP', tag: '营销服务', desc: '券、活动、补贴等核心营销动作的统一入口。', tagIds: ['marketing', 'marketing-coupon'] },
+  { name: '优惠券核销 MCP', tag: '营销服务', desc: '券码核销、回写与异常订单的自动回收处理。', tagIds: ['marketing', 'marketing-coupon'] },
+  { name: '内容审核 MCP', tag: '内容安全', desc: '文本 / 图片 / 视频审核能力，支持送审与复审。', tagIds: ['marketing', 'marketing-content'] },
+  { name: '素材审核 MCP', tag: '内容安全', desc: '达人投稿物料的风险识别与一键复检流程。', tagIds: ['marketing', 'marketing-content'] },
+  { name: '推荐引擎 MCP', tag: '推荐服务', desc: '在线召回、排序与多场景策略调用接口。', tagIds: ['algo', 'algo-recommend'] },
+  { name: '召回服务 MCP', tag: '推荐服务', desc: '兴趣 / 协同 / 热度多路召回的统一封装。', tagIds: ['algo', 'algo-recommend'] },
+  { name: '排序策略 MCP', tag: '策略服务', desc: '提供多目标排序、人群定向与冷启动策略。', tagIds: ['algo', 'algo-rank'] },
+  { name: 'AB 实验 MCP', tag: '策略服务', desc: '实验创建、分流、效果指标的统一查询入口。', tagIds: ['algo', 'algo-rank'] },
+];
+
+/* MCP_TAG_TREE 中所有合法 tag id 的扁平集合，用于过滤判定（业务 id 不参与筛选） */
+const MCP_TAG_ID_SET = (function collectIds(items) {
+  const bucket = new Set();
+  function walk(list) {
+    list.forEach((item) => {
+      bucket.add(item.id);
+      if (Array.isArray(item.children)) walk(item.children);
+    });
+  }
+  walk(items);
+  return bucket;
+})(MCP_TAG_TREE);
+
+function filterMcpByTag(list, selectedTagId) {
+  if (!selectedTagId || !MCP_TAG_ID_SET.has(selectedTagId)) return list;
+  return list.filter((item) => Array.isArray(item.tagIds) && item.tagIds.includes(selectedTagId));
+}
+
+export default function McpManagementPage() {
+  const [selectedTagId, setSelectedTagId] = useState(MCP_DEFAULT_TAG_ID);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [tagBarWidth, setTagBarWidth] = useState(MCP_TAGBAR_WIDTH_LIMITS.initial);
+
+  const dataSource = useMemo(
+    () => buildListDataSource('mcp', filterMcpByTag(MCP_DATA, selectedTagId)),
+    [selectedTagId],
+  );
+
+  return (
+    <div
+      className="flex flex-1 min-h-0 min-w-0 relative"
+      style={{ margin: '16px', gap: '8px' }}
+    >
+      {/* 新建 MCP Sheet 侧边抽屉 */}
+      {sheetOpen && (
+        <div
+          className="absolute inset-0 z-50 flex justify-end"
+          style={{ background: 'rgba(0,0,0,0.4)', borderRadius: '12px' }}
+          onClick={() => setSheetOpen(false)}
+        >
+          <div
+            style={{ height: '100%' }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Sheet
+              size="md"
+              title="新建 MCP"
+              subtitle="配置一个新的 MCP 工具接入"
+              confirmText="创建"
+              cancelText="取消"
+              onClose={() => setSheetOpen(false)}
+              onCancel={() => setSheetOpen(false)}
+              onConfirm={() => setSheetOpen(false)}
+            >
+              <div className="flex flex-1 min-h-0" />
+            </Sheet>
+          </div>
+        </div>
+      )}
+      {/* 左侧辅助大卡：默认支持拖拽调宽，与布局规则中的双白卡标准示例保持一致 */}
+      <div
+        className="flex shrink-0 overflow-visible"
+        style={{
+          ...WHITE_CARD_STYLE,
+          width: `${tagBarWidth}px`,
+        }}
+      >
+        <TagBar
+          businesses={MCP_BUSINESSES}
+          defaultBusinessId="douyin-local-services"
+          items={MCP_TAG_TREE}
+          selectedItemId={selectedTagId}
+          onSelect={(id) => setSelectedTagId(id)}
+          defaultExpandedIds={MCP_DEFAULT_EXPANDED_IDS}
+          width={tagBarWidth}
+          onWidthChange={setTagBarWidth}
+          minWidth={MCP_TAGBAR_WIDTH_LIMITS.min}
+          maxWidth={MCP_TAGBAR_WIDTH_LIMITS.max}
+          resizable
+          collapsible={false}
+          /* 作为独立辅助大卡展示：白卡外层负责容器层级，TagBar 内部不再额外画右分割线 */
+          className="!border-r-0"
+          style={{ background: 'transparent' }}
+        />
+      </div>
+
+      {/* 右侧主白卡：保持弹性撑满剩余空间，不参与固定宽计算 */}
+      <div
+        className="flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden"
+        style={{
+          ...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={() => setSheetOpen(true)}
+              >
+                新建MCP
+              </Button>
+            }
+          />
+
+          <FilterBar filters={MCP_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>
+    </div>
+  );
+}

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

@@ -0,0 +1,189 @@
+import { useState } from 'react';
+import Modal from '../components/Modal';
+import Button from '../components/Button';
+import Icon from '../components/Icon';
+import Input from '../components/Input';
+import Table from '../components/Table';
+import { PAGE_CONTEXT_LABEL, PageHeader, WHITE_CARD_STYLE } from './pageListShared';
+
+/**
+ * StrategyListPage — 策略管理列表页（页面示例0）
+ *
+ * 对应 Figma：OLA3.0 / node 14729:119273
+ * 结构：顶部筛选栏 + Table 卡片型表单（父行 + 版本子行） + 底部分页
+ */
+
+const MOCK_STRATEGIES = [
+  {
+    id: 'experience-1',
+    title: '抖音体验与服务-账号绑定进线流程',
+    status: '线上生效',
+    subtitle: '用户进线后的路由编排',
+    quoteCount: '99+',
+    channels: '智能客服、人工坐席',
+    description: '面向账号绑定咨询的体验服务流程，负责识别意图、补充信息和转接路径。',
+    category: '账号服务',
+    updatedAt: '2026-04-21 10:30',
+    versions: [
+      { v: 4, title: '优化身份校验引导', status: '草稿中', completion: '96%', execCount: 128, satisfaction: '94%', humanRate: '8%' },
+      { v: 3, title: '新增绑定失败兜底', status: '实验中', completion: '93%', execCount: 276, satisfaction: '91%', humanRate: '11%' },
+      { 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: [
+      { v: 2, title: '补充权益类型识别', status: '草稿中', completion: '88%', execCount: 74, satisfaction: '89%', humanRate: '15%' },
+      { 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: [
+      { v: 3, title: '更新处罚解释口径', status: '已发布', completion: '97%', execCount: 342, satisfaction: '93%', humanRate: '9%' },
+      { v: 2, title: '增加申诉材料提示', status: '实验中', completion: '90%', execCount: 126, satisfaction: '88%', humanRate: '16%' },
+      { 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: [
+      { v: 2, title: '优化高危举报分级', status: '已发布', completion: '95%', execCount: 238, satisfaction: '92%', humanRate: '12%' },
+      { 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: [
+      { v: 2, title: '新增补偿协同节点', status: '草稿中', completion: '78%', execCount: 42, satisfaction: '85%', humanRate: '19%' },
+      { v: 1, title: '搭建售后查询流程', status: '已发布', completion: '91%', execCount: 214, satisfaction: '90%', humanRate: '14%' },
+    ],
+  },
+];
+
+const STRATEGY_FILTERS = ['管理员', '发布状态', '策略类型'];
+
+export default function StrategyListPage() {
+  const [expandedId, setExpandedId] = useState('experience-1');
+  const [fullModalOpen, setFullModalOpen] = useState(false);
+
+  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' }}
+      >
+        {fullModalOpen && (
+          <div
+            className="absolute inset-0 z-50 flex flex-col"
+            style={{ background: 'rgba(0,0,0,0.4)', borderRadius: '12px' }}
+          >
+            <Modal
+              layout="fullscreen"
+              className="mt-auto"
+              title="新建策略"
+              subtitle={null}
+              showFooterHint={false}
+              confirmText="创建"
+              cancelText="取消"
+              onClose={() => setFullModalOpen(false)}
+              onCancel={() => setFullModalOpen(false)}
+              onConfirm={() => setFullModalOpen(false)}
+            >
+              <div className="flex flex-1 min-h-0" />
+            </Modal>
+          </div>
+        )}
+
+        <PageHeader
+          title="策略管理"
+          contextLabel={PAGE_CONTEXT_LABEL}
+          actions={
+            <Button variant="primary" icon={<Icon name="plus-stroked" />} onClick={() => setFullModalOpen(true)}>
+              新建策略
+            </Button>
+          }
+        />
+
+        <StrategyFilterBar filters={STRATEGY_FILTERS} />
+
+        <Table
+          variant="card-form"
+          className="min-h-0 flex-1"
+          dataSource={MOCK_STRATEGIES}
+          rowKey="id"
+          expandedRowKeys={expandedId ? [expandedId] : []}
+          onExpandedRowKeysChange={(keys) => setExpandedId(keys[keys.length - 1] || null)}
+          pagination={{
+            current: 1,
+            pageSize: 20,
+            total: MOCK_STRATEGIES.length,
+            pageSizeOptions: [10, 20],
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function StrategyFilterBar({ filters = [] }) {
+  return (
+    <div className="flex shrink-0 flex-wrap items-center gap-2">
+      <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) => (
+        <button
+          key={label}
+          type="button"
+          className="inline-flex h-8 shrink-0 cursor-pointer items-center gap-2 rounded-full border border-border-default bg-white px-3 text-sm [font-weight:var(--font-semibold)] text-blueGrey-800 transition-colors duration-150 hover:bg-fill"
+        >
+          <span>{label}</span>
+          <Icon name="chevron-down-stroked" className="text-blueGrey-600" />
+        </button>
+      ))}
+    </div>
+  );
+}