@tfdesign/b-end 1.0.4

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

@@ -0,0 +1,281 @@
+import { useState } from 'react';
+import NavBar from '../components/NavBar';
+import Tabs from '../components/Tabs';
+import ChatInput from '../components/ChatInput';
+import Card from '../components/Card';
+import Input from '../components/Input';
+import Icon from '../components/Icon';
+
+/**
+ * ChatHomePagePattern — Chat 类产品首页模板
+ *
+ * 右侧内容区从上到下：
+ *   1. Hero 区：大标题 + 副标题 + 居中 ChatInput + 快捷建议 chip
+ *   2. 筛选行（左 Search + 右胶囊 Tab），左右 40px 边距
+ *   3. 自适应卡片网格（auto-fill minmax(260px,1fr)），左右 40px 边距
+ */
+
+/* ── 筛选 Tab ── */
+const FILTER_TABS = [
+  { label: '全部', id: 'all' },
+  { label: '基础分析', id: '基础分析' },
+  { label: '链路分析', id: '链路分析' },
+  { label: '数据完善', id: '数据完善' },
+];
+
+/* ── 示例卡片数据（20 张，category 对应 Tab id）── */
+const MOCK_CARDS = [
+  {
+    category: '基础分析',
+    title: '智能服务近7天趋势分析',
+    description: '针对指定业务场景下智能服务核心指标、运行路径、渠道等进行趋势分析，并输出总结报告',
+    tags: ['基础分析', '官方'],
+    stats: [{ iconName: 'users-01-stroked', value: '1,289' }, { iconName: 'message-chat-square-stroked', value: '1,289' }, { iconName: 'hearts-stroked', value: '276' }],
+  },
+  {
+    category: '基础分析',
+    title: '渠道来源分布报告',
+    description: '统计各渠道用户来源占比与活跃度，输出结构化渠道分布分析报告',
+    tags: ['基础分析'],
+    stats: [{ iconName: 'users-01-stroked', value: '987' }, { iconName: 'message-chat-square-stroked', value: '3,410' }, { iconName: 'hearts-stroked', value: '198' }],
+  },
+  {
+    category: '基础分析',
+    title: '用户满意度周报',
+    description: '汇聚 NPS 评分与用户反馈关键词，自动生成满意度周报并标注波动原因',
+    tags: ['基础分析', '官方'],
+    stats: [{ iconName: 'users-01-stroked', value: '2,341' }, { iconName: 'message-chat-square-stroked', value: '7,890' }, { iconName: 'hearts-stroked', value: '512' }],
+  },
+  {
+    category: '基础分析',
+    title: '高频问题分类汇总',
+    description: '对用户提问进行语义聚类，输出 Top 问题类别及占比，辅助运营决策',
+    tags: ['基础分析'],
+    stats: [{ iconName: 'users-01-stroked', value: '1,654' }, { iconName: 'message-chat-square-stroked', value: '5,230' }, { iconName: 'hearts-stroked', value: '341' }],
+  },
+  {
+    category: '基础分析',
+    title: '会话量环比分析',
+    description: '对比本周期与上周期会话量变化，自动识别波峰波谷并给出可能归因',
+    tags: ['基础分析'],
+    stats: [{ iconName: 'users-01-stroked', value: '876' }, { iconName: 'message-chat-square-stroked', value: '2,100' }, { iconName: 'hearts-stroked', value: '143' }],
+  },
+  {
+    category: '基础分析',
+    title: '机器人接待率分析',
+    description: '统计机器人独立解决率与转人工率，分析接待效率并提出优化建议',
+    tags: ['基础分析', '官方'],
+    stats: [{ iconName: 'users-01-stroked', value: '3,102' }, { iconName: 'message-chat-square-stroked', value: '9,870' }, { iconName: 'hearts-stroked', value: '678' }],
+  },
+  {
+    category: '链路分析',
+    title: '服务全链路复盘',
+    description: '复盘指定会话的封闭答案错误链路，着重分析价值量服务结果，并输出复盘报告',
+    tags: ['链路分析', '官方'],
+    stats: [{ iconName: 'users-01-stroked', value: '1,289' }, { iconName: 'message-chat-square-stroked', value: '1,289' }, { iconName: 'hearts-stroked', value: '276' }],
+  },
+  {
+    category: '链路分析',
+    title: '产品深度对比分析报告',
+    description: '针对指定产品进行全面的理解和战略策略，产生一份深入的对比分析报告',
+    tags: ['链路分析'],
+    stats: [{ iconName: 'users-01-stroked', value: '1,289' }, { iconName: 'message-chat-square-stroked', value: '1,289' }, { iconName: 'hearts-stroked', value: '275' }],
+  },
+  {
+    category: '链路分析',
+    title: '转人工节点溯源',
+    description: '识别用户从机器人流转至人工的触发节点，分析转接原因分布并给出优化路径',
+    tags: ['链路分析'],
+    stats: [{ iconName: 'users-01-stroked', value: '743' }, { iconName: 'message-chat-square-stroked', value: '2,567' }, { iconName: 'hearts-stroked', value: '189' }],
+  },
+  {
+    category: '链路分析',
+    title: '对话意图识别偏差分析',
+    description: '检测意图识别命中率偏低的节点，输出误判 TopN 并关联用户原话样本',
+    tags: ['链路分析', '官方'],
+    stats: [{ iconName: 'users-01-stroked', value: '1,102' }, { iconName: 'message-chat-square-stroked', value: '4,320' }, { iconName: 'hearts-stroked', value: '267' }],
+  },
+  {
+    category: '链路分析',
+    title: '流失节点热力图',
+    description: '可视化用户在对话链路中的退出热点，标记高流失步骤并输出改进建议',
+    tags: ['链路分析'],
+    stats: [{ iconName: 'users-01-stroked', value: '892' }, { iconName: 'message-chat-square-stroked', value: '3,140' }, { iconName: 'hearts-stroked', value: '221' }],
+  },
+  {
+    category: '链路分析',
+    title: '多轮对话路径聚合',
+    description: '聚合相似多轮对话路径，识别主干流程与长尾异常路径，辅助流程优化',
+    tags: ['链路分析'],
+    stats: [{ iconName: 'users-01-stroked', value: '654' }, { iconName: 'message-chat-square-stroked', value: '1,980' }, { iconName: 'hearts-stroked', value: '134' }],
+  },
+  {
+    category: '链路分析',
+    title: '跨渠道链路对比',
+    description: '横向对比 Web、App、小程序等渠道的用户对话路径差异，输出渠道策略建议',
+    tags: ['链路分析'],
+    stats: [{ iconName: 'users-01-stroked', value: '1,432' }, { iconName: 'message-chat-square-stroked', value: '5,670' }, { iconName: 'hearts-stroked', value: '389' }],
+  },
+  {
+    category: '数据完善',
+    title: '未命中问题标注助手',
+    description: '对未命中知识库的用户提问进行批量标注与分类，输出待补充知识点清单',
+    tags: ['数据完善', '官方'],
+    stats: [{ iconName: 'users-01-stroked', value: '2,150' }, { iconName: 'message-chat-square-stroked', value: '8,760' }, { iconName: 'hearts-stroked', value: '567' }],
+  },
+  {
+    category: '数据完善',
+    title: '知识库覆盖率评估',
+    description: '统计业务问题被知识库覆盖的比例，识别空白领域并生成补全优先级建议',
+    tags: ['数据完善'],
+    stats: [{ iconName: 'users-01-stroked', value: '1,876' }, { iconName: 'message-chat-square-stroked', value: '6,340' }, { iconName: 'hearts-stroked', value: '432' }],
+  },
+  {
+    category: '数据完善',
+    title: '相似问法聚合归并',
+    description: '识别表达不同但语义相近的用户问法，推荐合并为标准问并扩展同义词库',
+    tags: ['数据完善', '官方'],
+    stats: [{ iconName: 'users-01-stroked', value: '1,234' }, { iconName: 'message-chat-square-stroked', value: '4,890' }, { iconName: 'hearts-stroked', value: '312' }],
+  },
+  {
+    category: '数据完善',
+    title: '答案质量评分报告',
+    description: '对知识库现有答案进行可读性、准确性和完整性评分，输出低分条目改写建议',
+    tags: ['数据完善'],
+    stats: [{ iconName: 'users-01-stroked', value: '987' }, { iconName: 'message-chat-square-stroked', value: '3,210' }, { iconName: 'hearts-stroked', value: '198' }],
+  },
+  {
+    category: '数据完善',
+    title: '过期内容检测清理',
+    description: '扫描知识库中含有过期日期、已下线产品的条目，生成待更新清单并辅助批量修订',
+    tags: ['数据完善'],
+    stats: [{ iconName: 'users-01-stroked', value: '654' }, { iconName: 'message-chat-square-stroked', value: '2,340' }, { iconName: 'hearts-stroked', value: '145' }],
+  },
+  {
+    category: '数据完善',
+    title: '多语言内容对齐检查',
+    description: '对比中英文知识库条目的语义一致性，标记翻译偏差并输出修订优先级',
+    tags: ['数据完善'],
+    stats: [{ iconName: 'users-01-stroked', value: '432' }, { iconName: 'message-chat-square-stroked', value: '1,560' }, { iconName: 'hearts-stroked', value: '98' }],
+  },
+  {
+    category: '数据完善',
+    title: '冷热知识分布分析',
+    description: '按调用频次区分高频热点知识与长尾冷门知识，辅助知识库瘦身与重点维护',
+    tags: ['数据完善', '官方'],
+    stats: [{ iconName: 'users-01-stroked', value: '1,109' }, { iconName: 'message-chat-square-stroked', value: '4,120' }, { iconName: 'hearts-stroked', value: '278' }],
+  },
+];
+
+export default function ChatHomePagePattern() {
+  const [selectedItemId, setSelectedItemId] = useState('ai');
+  const [searchValue, setSearchValue] = useState('');
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
+
+  const activeCategory = FILTER_TABS[activeTabIndex]?.id ?? 'all';
+  const filteredCards = MOCK_CARDS.filter((card) => {
+    const matchCategory = activeCategory === 'all' || card.category === activeCategory;
+    const matchSearch = !searchValue || card.title.includes(searchValue) || card.description.includes(searchValue);
+    return matchCategory && matchSearch;
+  });
+
+  return (
+    <div
+      className="flex h-full min-h-0 min-w-0 w-full items-stretch overflow-hidden"
+      style={{
+        background: 'var(--color-blueGrey-200, #F2F4F7)',
+        borderRadius: 0,
+      }}
+    >
+      {/* 左侧 NavBar：单项，仅显示 AI */}
+      <div className="flex shrink-0">
+        <NavBar
+          platform="ola"
+          navItems={[{ id: 'ai', label: 'AI', iconName: 'bot-02-stroked' }]}
+          selectedItemId={selectedItemId}
+          onSelect={(nextKey) => setSelectedItemId(nextKey)}
+        />
+      </div>
+
+      {/* 右侧内容区 */}
+      <div className="flex flex-1 min-w-0 flex-col min-h-0 overflow-hidden">
+
+        {/* ① Hero 区 */}
+        <div
+          className="flex flex-col items-center shrink-0"
+          style={{ padding: '120px 40px 80px' }}
+        >
+          <h1
+            className="m-0 text-center text-3xl [font-weight:var(--font-semibold)] leading-9"
+            style={{
+              color: 'var(--foreground, #0F1C35)',
+              marginBottom: '6px',
+            }}
+          >
+            今天想做什么？
+          </h1>
+
+          <p
+            className="m-0 text-sm text-center"
+            style={{
+              color: 'var(--foreground-muted, rgba(15,28,53,0.45))',
+              marginBottom: '24px',
+            }}
+          >
+            直接描述你的需求，或从下方模板快速开始
+          </p>
+
+          <div className="w-full" style={{ maxWidth: '680px' }}>
+            <ChatInput variant="default" placeholder="描述你想完成的任务…" />
+          </div>
+        </div>
+
+        {/* ② 筛选行：左侧胶囊 Tab + 右侧搜索，左右 40px */}
+        <div
+          className="flex min-w-0 shrink-0 flex-wrap items-center justify-between gap-4"
+          style={{ padding: '16px 40px' }}
+        >
+          <Tabs
+            variant="pill"
+            size="sm"
+            items={FILTER_TABS}
+            defaultIndex={0}
+            onChange={(index) => setActiveTabIndex(index)}
+          />
+          <Input
+            placeholder="搜索标题、描述"
+            prefix={<Icon name="search-md-stroked" size="sm" />}
+            allowClear
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            className="max-w-full"
+            style={{ flex: '0 1 240px', width: '240px', minWidth: '200px', '--size-input-width': '100%' }}
+          />
+        </div>
+
+        {/* ③ 卡片网格（自适应列，可滚动，左右 40px） */}
+        <div
+          className="flex-1 min-h-0 overflow-y-auto"
+          style={{ padding: '0 40px 32px' }}
+        >
+          <div
+            className="grid gap-4"
+            style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))' }}
+          >
+            {filteredCards.map((card, index) => (
+              <Card
+                key={`${activeCategory}-${index}`}
+                title={card.title}
+                description={card.description}
+                tags={card.tags}
+                stats={card.stats}
+                color="white"
+              />
+            ))}
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,380 @@
+import { useState } from 'react';
+import Button from '../components/Button';
+import Tabs from '../components/Tabs';
+import ChatInput from '../components/ChatInput';
+import Switch from '../components/Switch';
+import Icon from '../components/Icon';
+import catcatSvg from '../components/file-type-assets/catcat.svg';
+
+/**
+ * CopilotPagePattern — B端 Copilot + 内容区 双栏模板
+ *
+ * 基于 Figma 设计稿 243-9115（无 Copilot）/ 243-9162（有 Copilot）还原。
+ *
+ * 布局：
+ *   顶导栏（shrink-0）：左侧返回+标题+AI触发按钮 | 居中胶囊Tab | 右侧操作组
+ *   内容区（flex-1）：
+ *     [AI按钮展开] Copilot侧边栏（w-280，新会话列表+ChatInput）
+ *     主内容白卡（flex-1，内部有二级Tab+操作栏）
+ *
+ * 交互：点击顶导栏右侧"OLA AI"胶囊 ↔ 切换 Copilot 展开/收起
+ */
+
+/* ── 顶导栏中间的一级页面 Tab ── */
+const PAGE_TABS = [
+  { label: '服务策略', icon: <Icon name="share-07-stroked" /> },
+  { label: '批测&归因', icon: <Icon name="file-07-stroked" /> },
+  { label: '运行数据', icon: <Icon name="pie-chart-01-stroked" /> },
+];
+
+/* ── Copilot 快捷建议 ── */
+const COPILOT_SUGGESTIONS = [
+  '分析智能会话与人工会话差异',
+  '分析总结智能会话的问题和机会点',
+  '分析一个 case',
+  '基于批测报告分析优化方向和问题',
+];
+
+export default function CopilotPagePattern() {
+  const [copilotOpen, setCopilotOpen] = useState(false);
+
+  return (
+    <div
+      className="flex h-full min-h-0 min-w-0 w-full flex-col overflow-hidden"
+      style={{
+        background: 'var(--color-blueGrey-200, #F2F4F7)',
+        borderRadius: 'inherit',
+        border: '1px solid var(--color-border-default, #E4E7EC)',
+        minHeight: '100%',
+      }}
+    >
+      {/* ── 顶导栏 ── */}
+      <TopBar copilotOpen={copilotOpen} onToggleCopilot={() => setCopilotOpen(v => !v)} />
+
+      {/* ── 内容区 ── */}
+      <div className="flex flex-1 min-h-0 min-w-0 flex-wrap gap-4 overflow-hidden px-4 pb-4">
+        {copilotOpen && <CopilotPanel onClose={() => setCopilotOpen(false)} />}
+        <ContentCard />
+      </div>
+    </div>
+  );
+}
+
+/* ────────────────────────────────────────────
+   顶导栏
+   左：返回 + 标题 + OLA AI 触发按钮
+   中：居中胶囊 Tab（绝对定位使其真正居中）
+   右：版本 + 更多 + 次操作 + 主操作
+──────────────────────────────────────────── */
+function TopBar({ copilotOpen, onToggleCopilot }) {
+  return (
+    <div className="shrink-0 px-4 py-4">
+      <div className="relative flex min-h-[36px] items-center">
+        <div className="flex min-w-0 flex-1 items-center gap-3 pr-4">
+          <TopBarLead copilotOpen={copilotOpen} onToggleCopilot={onToggleCopilot} />
+        </div>
+
+        <div className="pointer-events-none absolute inset-x-0 flex justify-center">
+          <div className="pointer-events-auto flex min-w-0 items-center">
+            <TopBarTabs />
+          </div>
+        </div>
+
+        <div className="ml-auto flex shrink-0 items-center gap-4 pl-4">
+          <TopBarActions />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TopBarLead({ copilotOpen, onToggleCopilot }) {
+  return (
+    <>
+      <Button variant="outline-black" iconOnly icon={<Icon name="arrow-left-stroked" />} aria-label="返回" />
+
+      <span
+        className="font-semibold text-base leading-[22px] whitespace-nowrap"
+        style={{ color: 'var(--foreground, #0F1C35)' }}
+      >
+        主策略：抖音社区-社交-私信
+      </span>
+
+      {!copilotOpen && (
+        <div
+          onClick={onToggleCopilot}
+          className="shrink-0 cursor-pointer"
+          style={{
+            padding: '1.5px',
+            borderRadius: '999px',
+            background: 'linear-gradient(-45deg, rgba(255, 153, 248, 0.4) 0%, rgba(181, 131, 255, 0.4) 25%, rgba(114, 156, 255, 0.4) 48%, rgba(117, 218, 231, 0.4) 83%, rgba(115, 230, 204, 0.4) 100%)',
+          }}
+        >
+          <div
+            className="inline-flex items-center gap-2"
+            style={{
+              height: '34px',
+              padding: '0 14px',
+              borderRadius: '999px',
+              background: 'var(--gradient-ai-fill-1)',
+              fontSize: '14px',
+              fontWeight: 600,
+              color: 'var(--foreground, #0F1C35)',
+              fontFamily: 'inherit',
+              userSelect: 'none',
+            }}
+          >
+            <img src={catcatSvg} alt="OLA AI" style={{ width: '20px', height: '20px', display: 'block' }} />
+            <span>OLA AI</span>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+function TopBarTabs() {
+  return <Tabs variant="pill" size="md" items={PAGE_TABS} defaultIndex={0} />;
+}
+
+function TopBarActions() {
+  return (
+    <>
+      <div
+        className="inline-flex items-center gap-1 shrink-0"
+        style={{
+          height: '36px',
+          padding: '0 16px',
+          borderRadius: '999px',
+          background: 'var(--color-brand-50, #f0fdfa)',
+          border: '1px solid var(--color-brand-500, #5eead4)',
+          fontSize: '14px',
+          fontWeight: 600,
+          color: 'var(--color-brand-950, #065f46)',
+        }}
+      >
+        <span>V8 线上</span>
+        <Icon name="chevron-selector-vertical-stroked" size={16} />
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Button variant="ghost-black" iconOnly icon={<Icon name="dots-horizontal-stroked" />} aria-label="更多" />
+        <Button variant="outline-black">次操作</Button>
+        <Button variant="primary" icon={<Icon name="plus-stroked" />}>主操作</Button>
+      </div>
+    </>
+  );
+}
+
+/* ────────────────────────────────────────────
+   Copilot 侧边栏
+   上：标题栏（新会话 + 图标按钮组）
+   中：AI 欢迎态（头像 + 标题 + 欢迎语 + 快捷建议 chips）
+   下：ChatInput
+──────────────────────────────────────────── */
+function CopilotPanel({ onClose }) {
+  return (
+    <div
+      className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden"
+      style={{
+        width: 'min(450px, 100%)',
+      }}
+    >
+      {/* 标题栏 */}
+      <div className="flex items-center shrink-0" style={{ height: '48px', paddingRight: '4px' }}>
+        <div className="flex items-center flex-1 min-w-0 gap-1">
+          <span
+            className="text-sm leading-5 pl-1"
+            style={{ color: 'var(--foreground-muted, rgba(15,28,53,0.6))' }}
+          >
+            新会话
+          </span>
+        </div>
+        <div className="flex items-center gap-0.5 shrink-0">
+          <Button variant="ghost-black" iconOnly icon={<Icon name="message-plus-square-stroked" />} aria-label="新建会话" />
+          <Button variant="ghost-black" iconOnly icon={<Icon name="clock-stroked" />} aria-label="历史记录" />
+          <Button variant="ghost-black" iconOnly icon={<Icon name="layout-left-stroked" />} aria-label="收起面板" onClick={onClose} />
+        </div>
+      </div>
+
+      {/* 对话流：欢迎态 */}
+      <div className="flex flex-1 min-h-0 flex-col items-center justify-center gap-6" style={{ padding: '0 80px' }}>
+        {/* AI 头像 + 标题 */}
+        <div className="flex flex-col items-center gap-3">
+          {/* 头像：渐变描边圆 + 蓝色投影 + CATCAT */}
+          <div style={{ position: 'relative', width: '66px', height: '66px', flexShrink: 0 }}>
+            {/* 渐变描边圆（外层渐变 0.5px + 内层白底） */}
+            <div style={{
+              position: 'absolute',
+              inset: '0',
+              borderRadius: '50%',
+              padding: '0.5px',
+              background: 'linear-gradient(135deg, rgba(63,226,213,0.6) 0%, rgba(64,147,224,0.6) 35%, rgba(122,97,250,0.6) 65%, rgba(214,130,235,0.6) 100%)',
+            }}>
+              <div style={{
+                width: '100%',
+                height: '100%',
+                borderRadius: '50%',
+                background: [
+                  'linear-gradient(42deg, #FFF 11.61%, rgba(255,255,255,0.00) 37.84%)',
+                  'linear-gradient(74deg, rgba(63,226,213,0.15) 12.18%, rgba(64,147,224,0.15) 39.9%, rgba(122,97,250,0.15) 63.86%, rgba(214,130,235,0.15) 86.38%)',
+                  '#FFF',
+                ].join(', '),
+                boxShadow: '0px 8px 15px rgba(180,218,244,0.50)',
+              }} />
+            </div>
+            {/* CATCAT 图标 */}
+            <img
+              src={catcatSvg}
+              alt="OLA AI"
+              style={{
+                position: 'absolute',
+                width: '32px',
+                height: '32px',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                zIndex: 1,
+              }}
+            />
+          </div>
+          <span
+            className="font-semibold whitespace-nowrap"
+            style={{ fontSize: '18px', lineHeight: '24px', letterSpacing: '-0.03em', color: 'var(--foreground, #0F1C35)' }}
+          >
+            OLA AI
+          </span>
+        </div>
+
+        {/* 欢迎语 */}
+        <p
+          className="text-sm text-center leading-5 m-0"
+          style={{ color: 'var(--foreground-muted, rgba(15,28,53,0.6))', width: '100%' }}
+        >
+          您好！我是您的智能小助手 ✨ ~ 我能帮您归因分析、生成策略、Prompt、知识、工具等方案～
+        </p>
+
+        {/* 快捷建议 chips */}
+        <div className="flex flex-col gap-2 w-full">
+          {COPILOT_SUGGESTIONS.map((text) => (
+            <button
+              key={text}
+              type="button"
+              className="flex items-center justify-between w-full cursor-pointer border-0 text-left"
+              style={{
+                padding: '10px 12px',
+                borderRadius: '8px',
+                background: 'rgba(255,255,255,0.6)',
+                boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.9)',
+                fontSize: '12px',
+                lineHeight: '16px',
+                color: 'var(--foreground, #0F1C35)',
+                fontFamily: 'inherit',
+                transition: 'background 150ms ease',
+              }}
+              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.85)'; }}
+              onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.6)'; }}
+            >
+              <span>{text}</span>
+              <Icon name="arrow-narrow-right-stroked" size={12} />
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* ChatInput：父级 CopilotPanel 不裁剪，让 -bottom-2 氛围背景与炫彩投影能向外溢出 */}
+      <div className="shrink-0 pt-2">
+        <ChatInput variant="default" placeholder="需要我为你做什么" />
+      </div>
+    </div>
+  );
+}
+
+/* ────────────────────────────────────────────
+   主内容白卡
+   上：二级 Tab 栏（策略画布 | 流程数据开关 + 操作按钮）
+   下：内容区（空白，业务方在此填充）
+──────────────────────────────────────────── */
+function ContentCard() {
+  return (
+    <div
+      className="flex flex-1 min-w-0 flex-col overflow-hidden"
+      style={{
+        background: 'var(--color-white, #FFFFFF)',
+        borderRadius: '12px',
+      }}
+    >
+      {/* 二级 Tab 栏 */}
+      <div
+        className="flex items-center shrink-0 gap-2 px-2"
+        style={{
+          background: 'var(--color-blueGrey-50, #F9FAFB)',
+          borderBottom: '1px solid var(--color-border-default, #E4E7EC)',
+          minHeight: '48px',
+        }}
+      >
+        {/* 左侧：当前 Tab（策略画布） */}
+        <div className="flex flex-1 min-w-0 items-end">
+          <div
+            className="flex items-center gap-2 px-3 shrink-0"
+            style={{
+              height: '48px',
+              borderRadius: '8px 8px 0 0',
+              border: '1px solid rgba(255,255,255,0.03)',
+            }}
+          >
+            <div
+              className="flex items-center justify-center shrink-0"
+              style={{
+                width: '24px',
+                height: '24px',
+                borderRadius: '8px',
+                background: 'var(--color-blueGrey-900, #0F1C35)',
+              }}
+            >
+              <Icon name="if-stroked" size={12} color="#ffffff" />
+            </div>
+            <span
+              className="text-sm font-semibold leading-5 whitespace-nowrap"
+              style={{ color: 'var(--foreground, #0F1C35)' }}
+            >
+              策略画布
+            </span>
+          </div>
+        </div>
+
+        {/* 右侧：流程数据开关 + 操作按钮 */}
+        <div className="flex items-center gap-2 shrink-0">
+          {/* 流程数据 Switch */}
+          <div className="flex items-center gap-2 px-2 shrink-0">
+            <span
+              className="text-sm font-semibold leading-5 whitespace-nowrap"
+              style={{ color: 'var(--foreground-muted, rgba(15,28,53,0.6))' }}
+            >
+              流程数据
+            </span>
+            <Switch
+              variant="brand"
+              defaultChecked={false}
+              onChange={() => {}}
+            />
+          </div>
+
+          <Button variant="ghost-black">流程单测</Button>
+          <Button variant="ghost-black">批量测试</Button>
+          <Button variant="ghost-black" iconOnly icon={<Icon name="git-branch-02-stroked" />} aria-label="对比" />
+        </div>
+      </div>
+
+      {/* 内容区（业务填充） */}
+      <div className="flex flex-1 min-h-0 items-center justify-center">
+        <span
+          className="text-sm"
+          style={{ color: 'var(--foreground-muted, rgba(15,28,53,0.3))' }}
+        >
+          👉 业务内容区域
+        </span>
+      </div>
+    </div>
+  );
+}