@lovrabet/rabetbase-cli 2.2.4 → 2.2.5-beta.2

package/templates/projects/sub-app-react-demo/src/pages/index.tsx

@@ -1,89 +1,97 @@
 /**
- * Title: Rabetbase 开发指南
+ * Title: 子应用启动台
  */
 import React from "react";
+import { Link } from "react-router-dom";
+import { Alert, Button, Card, Space, Tag, Typography } from "antd";
 import {
-  Typography,
-  Card,
-  Row,
-  Col,
-  Button,
-  Tabs,
-  Alert,
-  Space,
-  Tag,
-} from "antd";
-import {
-  CodeOutlined,
-  RobotOutlined,
-  ToolOutlined,
-  BookOutlined,
+  ApiOutlined,
+  AppstoreOutlined,
   ArrowRightOutlined,
-  CopyOutlined,
+  BarChartOutlined,
+  BookOutlined,
+  CheckCircleOutlined,
   CheckOutlined,
+  CloudUploadOutlined,
+  CodeOutlined,
+  CopyOutlined,
+  DashboardOutlined,
+  DatabaseOutlined,
+  DeploymentUnitOutlined,
+  LinkOutlined,
+  PlayCircleOutlined,
   RocketOutlined,
-  ExclamationCircleOutlined,
+  SettingOutlined,
+  ToolOutlined,
+  WarningOutlined,
 } from "@ant-design/icons";
+import styles from "./index.module.css";
 
 const { Title, Paragraph, Text } = Typography;
 
-// 可复制的代码块
-function CopyableCode({ code, label }: { code: string; label: string }) {
+interface CopyableCodeProps {
+  code: string;
+  label: string;
+  compact?: boolean;
+}
+
+function CopyableCode({ code, label, compact = false }: CopyableCodeProps) {
   const [copied, setCopied] = React.useState(false);
 
   const handleCopy = async () => {
-    await navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(code);
+      }
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("复制失败:", err);
+    }
   };
 
   return (
-    <div style={{ marginBottom: 12 }}>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: 8,
-        }}
-      >
+    <div
+      className={`${styles.copyBlock} ${
+        compact ? styles.copyBlockCompact : ""
+      }`}
+    >
+      <div className={styles.copyHeader}>
         <Text type="secondary">{label}</Text>
         <Button
-          type="primary"
           size="small"
           icon={copied ? <CheckOutlined /> : <CopyOutlined />}
           onClick={handleCopy}
+          className={styles.copyButton}
         >
           {copied ? "已复制" : "复制"}
         </Button>
       </div>
-      <pre
-        style={{
-          background: "#1e1e1e",
-          borderRadius: 8,
-          padding: "16px 20px",
-          margin: 0,
-          fontFamily: "'JetBrains Mono', 'Monaco', monospace",
-          fontSize: 13,
-          lineHeight: 1.6,
-          color: "#e4e4e7",
-          overflowX: "auto",
-        }}
-      >
+      <pre className={styles.copyPre}>
         <code>{code}</code>
       </pre>
     </div>
   );
 }
 
-// 从 api.ts 提取 appCode
 function getAppCodeFromApi(content: string): string | null {
   const match =
     content.match(/RABETBASE_APP_CODE\s*=\s*["']([^"']+)["']/) ||
+    content.match(/LOVRABET_APP_CODE\s*=\s*["']([^"']+)["']/) ||
     content.match(/appCode:\s*["']([^"']+)["']/);
   return match ? match[1] : null;
 }
 
+const feishuDocs = {
+  root: "https://qizhiyuntu.feishu.cn/wiki/EaApwb1Wpi2j0ykAkhNcya0ZnEh",
+  onboarding:
+    "https://qizhiyuntu.feishu.cn/wiki/T5gJwrcQqixLCikNYO2caZYDnsc",
+  core: "https://qizhiyuntu.feishu.cn/wiki/S71hw5c2HiwyoHkLgyecKrI8n3M",
+  systemPageSdk:
+    "https://qizhiyuntu.feishu.cn/wiki/XCdWwnN7ViYOc0knRu8c411uneh",
+  sdk: "https://qizhiyuntu.feishu.cn/wiki/B1PLw34AwiDtNmkCAlCcO3T2ngh",
+};
+
 function HomePage() {
   const [appCode, setAppCode] = React.useState<string | null>(null);
   const [loading, setLoading] = React.useState(true);
@@ -112,355 +120,521 @@ function HomePage() {
     loadAppCode();
   }, []);
 
-  // 检查是否已配置
-  const isNotSet = appCode === "NOT-SET" || appCode === null;
-  const displayAppCode = isNotSet ? "your-app-code" : appCode;
-
-  const mcpConfig = `{
-  "mcpServers": {
-    "lovrabet-dataset": {
-      "command": "npx",
-      "args": ["-y", "@lovrabet/dataset-mcp-server"],
-      "env": {
-        "RABETBASE_APP_CODE": "${displayAppCode}"
-      }
-    }
-  }
-}`;
+  const isConfigured = !loading && appCode !== null && appCode !== "NOT-SET";
+  const displayAppCode = isConfigured ? appCode : "your-app-code";
+  const statusLabel = loading ? "读取中" : isConfigured ? "已配置" : "待配置";
 
-  const cliCode = `# 拉取最新 API 配置
-lovrabet api pull
+  const setupPrompt = `请帮我检查当前 Lovrabet React 子应用的项目配置。
+确认 AppCode、.rabetbase.json、SDK 模型文件和 src/api/client.ts 是否完整。
+如果缺少配置，请按当前项目情况补齐，并告诉我可以用于页面开发的数据模型。`;
 
-# 微前端子应用同步菜单
-lovrabet menu sync`;
+  const agentSurfaces = ["Claude Code", "Cursor", "Codex"];
 
-  const configTabs = [
+  const docLinks = [
     {
-      key: "mcp",
-      label: (
-        <span>
-          <RobotOutlined /> MCP 配置
-        </span>
-      ),
-      children: (
-        <div>
-          <Paragraph>claude code 配置：</Paragraph>
-          <Paragraph style={{ fontSize: 12, color: "#666" }}>
-            配置文件路径：
-            <br />
-            macOS: ~/Library/Application
-            Support/Claude/claude_desktop_config.json
-            <br />
-            Windows: %APPDATA%/Claude/claude_desktop_config.json
-          </Paragraph>
-          <CopyableCode code={mcpConfig} label="claude_desktop_config.json" />
-
-          <Paragraph style={{ marginTop: 16 }}>Cursor 配置：</Paragraph>
-          <Paragraph style={{ fontSize: 12, color: "#666" }}>
-            设置 → MCP → 添加服务器
-          </Paragraph>
-          <CopyableCode
-            code={`// Cursor MCP 配置
-{
-  "mcpServers": {
-    "lovrabet-dataset": {
-      "command": "npx",
-      "args": ["-y", "@lovrabet/dataset-mcp-server"],
-      "env": {
-        "RABETBASE_APP_CODE": "${displayAppCode}"
-      }
-    }
-  }
-}`}
-            label="Cursor MCP 配置"
-          />
-
-          <Paragraph style={{ marginTop: 16 }}>
-            Claude Code (VS Code 扩展)：
-          </Paragraph>
-          <CopyableCode
-            code={`claude mcp add lovrabet-dataset npx @lovrabet/dataset-mcp-server@latest -e RABETBASE_APP_CODE=${displayAppCode}`}
-            label="Claude Code 终端命令"
-          />
-
-          <Button
-            type="link"
-            href="https://open.lovrabet.com/docs/mcp/intro"
-            target="_blank"
-          >
-            查看完整文档 <ArrowRightOutlined />
-          </Button>
-        </div>
-      ),
+      title: "Rabetbase CLI 文库",
+      description: "从上手路径进入完整研发能力目录。",
+      url: feishuDocs.root,
+      icon: <BookOutlined />,
     },
     {
-      key: "cli",
-      label: (
-        <span>
-          <ToolOutlined /> CLI 命令
-        </span>
-      ),
-      children: (
-        <div>
-          <Paragraph>常用 CLI 命令：</Paragraph>
-          <CopyableCode code={cliCode} label="终端命令" />
-          <Button
-            type="link"
-            href="https://open.lovrabet.com/docs/lovrabet-cli/quickstart"
-            target="_blank"
-          >
-            查看完整文档 <ArrowRightOutlined />
-          </Button>
-        </div>
-      ),
+      title: "系统页面开发",
+      description: "用 SDK 开发列表页、详情页、表单和看板。",
+      url: feishuDocs.systemPageSdk,
+      icon: <CodeOutlined />,
+    },
+    {
+      title: "TypeScript SDK",
+      description: "查看模型客户端、数据读写和类型使用方式。",
+      url: feishuDocs.sdk,
+      icon: <ApiOutlined />,
     },
   ];
 
-  const docLinks = [
+  const taskGuides = [
     {
-      title: "入门指南",
+      title: "刚创建项目",
+      description: "确认项目结构、AppCode、SDK 模型和本地启动方式。",
+      action: "查看入门与上手",
+      url: feishuDocs.onboarding,
       icon: <RocketOutlined />,
-      links: [
-        {
-          label: "5 分钟上手指引",
-          url: "https://open.lovrabet.com/docs/guides/step-guide",
-        },
-        {
-          label: "开发者工具全景",
-          url: "https://open.lovrabet.com/docs/guides/toolchain",
-        },
-        { label: "常见问题", url: "https://open.lovrabet.com/docs/guides/faq" },
+    },
+    {
+      title: "开发客户列表页",
+      description: "让 Agent 基于数据模型生成筛选、表格、详情和表单。",
+      action: "查看页面开发",
+      url: feishuDocs.systemPageSdk,
+      icon: <CodeOutlined />,
+    },
+    {
+      title: "调用 SDK 读写数据",
+      description: "确认模型别名、字段类型、filter、getOne 和写入接口。",
+      action: "查看 SDK 文档",
+      url: feishuDocs.sdk,
+      icon: <ApiOutlined />,
+    },
+    {
+      title: "做统计和看板",
+      description: "把客户活跃度、跟进转化和销售机会做成指标视图。",
+      action: "查看核心能力",
+      url: feishuDocs.core,
+      icon: <BarChartOutlined />,
+    },
+    {
+      title: "封装服务端逻辑",
+      description: "把稳定的写入、校验或聚合操作沉淀成可复用能力。",
+      action: "查看核心能力",
+      url: feishuDocs.core,
+      icon: <DeploymentUnitOutlined />,
+    },
+    {
+      title: "构建并发布",
+      description: "检查构建产物、页面配置、菜单、路由和主应用接入。",
+      action: "查看发布路径",
+      url: feishuDocs.core,
+      icon: <CloudUploadOutlined />,
+    },
+  ];
+
+  const promptCards = [
+    {
+      title: "检查项目上下文",
+      description:
+        "让 Agent 识别 AppCode、项目配置和 SDK 模型，后续开发不再手动查接口。",
+      icon: <SettingOutlined />,
+      tags: ["项目配置", "模型同步"],
+      prompt: setupPrompt,
+      commands: [
+        "rabetbase project init",
+        "rabetbase config get",
+        "rabetbase api pull",
       ],
+      docUrl: feishuDocs.onboarding,
+      docLabel: "入门与上手",
     },
     {
-      title: "开发文档",
-      icon: <BookOutlined />,
-      links: [
-        {
-          label: "TypeScript SDK",
-          url: "https://open.lovrabet.com/docs/lovrabet-sdk/intro",
-        },
-        {
-          label: "Java SDK",
-          url: "https://open.lovrabet.com/docs/java-opensdk/quickstart",
-        },
-        {
-          label: "OpenAPI",
-          url: "https://open.lovrabet.com/docs/openapi/intro",
-        },
-        { label: "MCP", url: "https://open.lovrabet.com/docs/mcp/intro" },
-        {
-          label: "Backend Function",
-          url: "https://open.lovrabet.com/docs/guides/best-practices",
-        },
+      title: "开发客户列表页",
+      description:
+        "用真实 CRM 场景描述页面目标，让 Agent 生成列表、筛选和详情交互。",
+      icon: <PlayCircleOutlined />,
+      tags: ["页面开发", "SDK 接入"],
+      prompt: `请在当前 React 子应用里开发一个客户列表页。
+页面需要支持按客户名称、负责人、客户等级和最近跟进时间筛选。
+列表展示客户名称、联系人、负责人、客户等级、最近跟进时间和状态。
+点击客户后打开详情抽屉，详情数据和列表数据都使用 @lovrabet/sdk。`,
+      commands: [
+        "rabetbase api pull",
+        "rabetbase dataset list",
+        "rabetbase dataset detail",
+      ],
+      docUrl: feishuDocs.systemPageSdk,
+      docLabel: "系统页面开发",
+    },
+    {
+      title: "接入客户编辑表单",
+      description: "在列表页基础上补齐新增、编辑和字段校验，形成完整业务闭环。",
+      icon: <CodeOutlined />,
+      tags: ["表单开发", "写入校验"],
+      prompt: `请给客户列表页增加新增客户和编辑客户能力。
+先确认客户模型里可写字段、必填字段和选项字段。
+表单需要包含客户名称、联系人、联系电话、客户等级、负责人和备注。
+提交后使用 @lovrabet/sdk 写入数据，并刷新列表。`,
+      commands: [
+        "rabetbase dataset detail",
+        "rabetbase dataset operations",
+        "rabetbase api pull",
       ],
+      docUrl: feishuDocs.sdk,
+      docLabel: "TypeScript SDK",
+    },
+    {
+      title: "改造销售看板",
+      description: "把示例看板变成客户活跃度、跟进转化和销售机会分析页。",
+      icon: <DashboardOutlined />,
+      tags: ["二次开发", "统计看板"],
+      prompt: `请把 /dashboard 改造成销售客户看板。
+先读取当前 SDK 模型配置，确认客户、跟进记录和销售机会可用字段。
+页面展示客户总数、本周新增客户、待跟进客户、销售机会金额和最近跟进列表。
+不要写死模拟接口，优先使用项目里的 SDK 客户端。`,
+      commands: [
+        "rabetbase api pull",
+        "rabetbase dataset detail",
+        "rabetbase run build",
+      ],
+      docUrl: feishuDocs.systemPageSdk,
+      docLabel: "系统页面开发",
+    },
+    {
+      title: "发布接入主应用",
+      description:
+        "让 Agent 检查构建产物、Lovrabet 主应用接入方式、菜单和路由配置。",
+      icon: <DeploymentUnitOutlined />,
+      tags: ["构建检查", "主应用接入"],
+      prompt: `请检查这个 React 子应用是否可以接入 Lovrabet 主应用。
+确认构建产物、页面路由、basename、菜单同步和 import 加载配置。
+如果发现缺口，请直接修复或列出需要我确认的项。`,
+      commands: [
+        "rabetbase run build",
+        "rabetbase run preview",
+        "rabetbase menu sync",
+      ],
+      docUrl: feishuDocs.core,
+      docLabel: "核心研发能力",
+    },
+  ];
+
+  const pageEntries = [
+    {
+      title: "SDK 演示",
+      path: "/sdk-demo",
+      description:
+        "集中验证 filter、getOne、create、update、delete 等 SDK 调用。",
+      icon: <ApiOutlined />,
+      tags: ["SDK", "API"],
+    },
+    {
+      title: "工作台",
+      path: "/workbench",
+      description: "面向日常运营的概览页结构，适合扩展成业务人员首页。",
+      icon: <DashboardOutlined />,
+      tags: ["运营", "概览"],
+    },
+    {
+      title: "数据看板",
+      path: "/dashboard",
+      description: "用图表和指标卡展示业务数据，适合作为管理驾驶舱起点。",
+      icon: <DatabaseOutlined />,
+      tags: ["图表", "指标"],
+    },
+    {
+      title: "数据大屏",
+      path: "/data-screen",
+      description: "全屏展示型页面示例，适合投屏、会议室和实时监控场景。",
+      icon: <BarChartOutlined />,
+      tags: ["大屏", "实时"],
     },
   ];
 
+  const integrationSteps = [
+    "让 Agent 确认当前项目上下文里已有 AppCode。",
+    "让 Agent 刷新 SDK 类型，保持本地模型与平台数据模型一致。",
+    "让 Agent 构建并检查可发布到 CDN 的静态产物。",
+    "在 Lovrabet 主应用新增或更新页面，选择 import 接入方式。",
+    "让 Agent 核对菜单、路由、basename 和主应用访问路径。",
+  ];
+
   return (
-    <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "24px" }}>
-      {/* 标题区 */}
-      <div style={{ marginBottom: 32 }}>
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "flex-start",
-            flexWrap: "wrap",
-            gap: 16,
-          }}
-        >
-          <div>
-            <Title level={2} style={{ margin: 0 }}>
-              Rabetbase 开发指南
-            </Title>
-            <Paragraph style={{ color: "#666", marginTop: 8, marginBottom: 0 }}>
-              基于 Lovrabet 平台的后端即服务（BaaS）
-            </Paragraph>
+    <main className={styles.homepage}>
+      <section className={styles.hero}>
+        <div className={styles.heroCopy}>
+          <Tag color="blue" icon={<RocketOutlined />}>
+            Agent-first Rabetbase Template
+          </Tag>
+          <Title level={1} className={styles.heroTitle}>
+            用 Agent 开发 Lovrabet React 子应用
+          </Title>
+          <Paragraph className={styles.heroText}>
+            这是可运行的 React 微前端模板。描述页面目标，Agent
+            会读取项目上下文、调用 SDK、改页面并完成构建检查。
+          </Paragraph>
+          <div className={styles.surfaceRow}>
+            {agentSurfaces.map((name) => (
+              <Tag key={name}>{name}</Tag>
+            ))}
           </div>
-          <Space size="middle">
-            <a
-              href="https://open.lovrabet.com"
+          <Space size={12} wrap className={styles.heroActions}>
+            <Link to="/sdk-demo">
+              <Button type="primary" icon={<ApiOutlined />}>
+                查看 SDK 演示
+              </Button>
+            </Link>
+            <Button
+              href={feishuDocs.systemPageSdk}
               target="_blank"
               rel="noopener noreferrer"
+              icon={<BookOutlined />}
             >
-              Rabetbase官网
-            </a>
-            <a
-              href="https://open.lovrabet.com/docs/changelog"
+              页面开发文档
+            </Button>
+            <Button
+              href={feishuDocs.sdk}
               target="_blank"
               rel="noopener noreferrer"
+              icon={<LinkOutlined />}
             >
-              更新日志
-            </a>
-            {!isNotSet && appCode && (
-              <a
+              SDK 文档
+            </Button>
+            {isConfigured && appCode && (
+              <Button
                 href={`https://app.lovrabet.com/app/${appCode}/data/intro/`}
                 target="_blank"
-                rel="noopener noreferrer"
+                icon={<AppstoreOutlined />}
               >
                 应用配置后台
-              </a>
+              </Button>
             )}
           </Space>
         </div>
-      </div>
 
-      {/* Rabetbase 介绍卡片 */}
-      <Card style={{ marginBottom: 24 }}>
-        <Row gutter={[24, 16]} align="middle">
-          <Col xs={24} lg={16}>
-            <Title level={3} style={{ marginBottom: 12 }}>
-              什么是 Rabetbase？
-            </Title>
-            <Paragraph
-              style={{ fontSize: 15, marginBottom: 16, color: "#595959" }}
-            >
-              <strong>Rabetbase 是 Lovrabet 面向技术岗位的开发者平台。</strong>
-              <br />
-              Lovrabet 工作台让业务人员用 AI
-              生成管理系统，但有些个性化需求（如小程序、ERP
-              对接、复杂业务逻辑）需要开发者介入。 Rabetbase 把 Lovrabet
-              平台的数据能力开放出来，让开发者专注于写业务逻辑。
-            </Paragraph>
-            <Space wrap>
-              <Button
-                size="small"
-                href="https://open.lovrabet.com/docs/category/openapi"
-                target="_blank"
-              >
-                OpenAPI
-              </Button>
-              <Button
-                size="small"
-                href="https://open.lovrabet.com/docs/category/lovrabet-node-sdk"
-                target="_blank"
-              >
-                TypeScript SDK
-              </Button>
-              <Button
-                size="small"
-                href="https://open.lovrabet.com/docs/category/java-opensdk"
-                target="_blank"
-              >
-                Java SDK
-              </Button>
-              <Button
-                size="small"
-                href="https://open.lovrabet.com/docs/mcp/intro"
-                target="_blank"
-              >
-                MCP
-              </Button>
-              <Button
-                size="small"
-                href="https://open.lovrabet.com/docs/lovrabet-cli/"
-                target="_blank"
-              >
-                CLI 工具
-              </Button>
-            </Space>
-          </Col>
-          <Col xs={24} lg={8}>
-            <div
-              style={{
-                background: "#f5f5f5",
-                borderRadius: 8,
-                padding: 20,
-              }}
+        <aside className={styles.statusPanel}>
+          <div className={styles.statusHeader}>
+            <div>
+              <Text type="secondary">项目状态</Text>
+              <Title level={2}>项目上下文</Title>
+            </div>
+            <Tag
+              color={
+                loading ? "processing" : isConfigured ? "success" : "warning"
+              }
             >
-              <Text
-                style={{ fontSize: 14, display: "block", marginBottom: 12 }}
-              >
-                <strong>核心价值：</strong>
-              </Text>
-              <ul
-                style={{
-                  color: "#595959",
-                  margin: 0,
-                  paddingLeft: 20,
-                  fontSize: 14,
-                }}
-              >
-                <li style={{ marginBottom: 8 }}>AI 自动理解业务模型</li>
-                <li style={{ marginBottom: 8 }}>现成的 API 和 SDK</li>
-                <li style={{ marginBottom: 8 }}>开发效率提升 2~5 倍</li>
-                <li>你只需要专注写业务逻辑</li>
-              </ul>
+              {statusLabel}
+            </Tag>
+          </div>
+          <div className={styles.statusCode}>
+            <Text type="secondary">AppCode</Text>
+            <strong>{loading ? "读取中" : displayAppCode}</strong>
+          </div>
+          <div className={styles.statusGrid}>
+            <div>
+              <Text type="secondary">API 文件</Text>
+              <strong>src/api/api.ts</strong>
+            </div>
+            <div>
+              <Text type="secondary">路由模式</Text>
+              <strong>src/pages 自动路由</strong>
+            </div>
+            <div>
+              <Text type="secondary">SDK 客户端</Text>
+              <strong>src/api/client.ts</strong>
+            </div>
+            <div>
+              <Text type="secondary">推荐下一步</Text>
+              <strong>开发客户列表页</strong>
             </div>
-          </Col>
-        </Row>
-      </Card>
+          </div>
+          <div className={styles.statusLinks}>
+            <Button
+              block
+              href={feishuDocs.systemPageSdk}
+              target="_blank"
+              rel="noopener noreferrer"
+              icon={<BookOutlined />}
+            >
+              系统页面开发文档
+            </Button>
+            <Button
+              block
+              href={feishuDocs.root}
+              target="_blank"
+              rel="noopener noreferrer"
+              icon={<LinkOutlined />}
+            >
+              Rabetbase 文库首页
+            </Button>
+          </div>
+        </aside>
+      </section>
 
-      {/* 未配置提示 */}
-      {isNotSet && !loading && (
+      {!loading && !isConfigured && (
         <Alert
           type="warning"
-          icon={<ExclamationCircleOutlined />}
+          showIcon
+          icon={<WarningOutlined />}
+          className={styles.setupAlert}
           message="项目尚未配置 AppCode"
           description={
-            <div style={{ marginTop: 8 }}>
-              <Paragraph style={{ marginBottom: 8 }}>
-                请先执行以下命令初始化项目（替换{" "}
-                <code>&lt;your-app-code&gt;</code> 为你的应用代码）：
+            <div className={styles.alertBody}>
+              <Paragraph>
+                直接把下面这段话发给 Claude Code、Cursor 或 Codex。Agent
+                会根据项目情况补齐配置并刷新 SDK 模型。
               </Paragraph>
               <CopyableCode
-                code={`# 1. 设置 AppCode
-lovrabet config set app <your-app-code>
-
-# 2. 拉取 API 配置
-lovrabet api pull`}
-                label="初始化命令"
+                code={setupPrompt}
+                label="可直接输入的 Prompt"
+                compact
               />
-              <Paragraph style={{ marginBottom: 0 }}>
-                执行完成后刷新页面即可。
-              </Paragraph>
             </div>
           }
-          style={{ marginBottom: 24 }}
         />
       )}
 
-      {/* 配置代码 */}
-      <Card style={{ marginBottom: 24 }}>
-        <Tabs items={configTabs} />
-      </Card>
+      <section className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <div>
+            <Text type="secondary">飞书文库导航</Text>
+            <Title level={2}>按任务选择下一步</Title>
+          </div>
+        </div>
+        <div className={styles.taskGrid}>
+          {taskGuides.map((item) => (
+            <a
+              key={item.title}
+              className={styles.taskCard}
+              href={item.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className={styles.iconBox}>{item.icon}</span>
+              <span>
+                <strong>{item.title}</strong>
+                <span>{item.description}</span>
+              </span>
+              <em>
+                {item.action} <ArrowRightOutlined />
+              </em>
+            </a>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <div>
+            <Text type="secondary">在线文库</Text>
+            <Title level={2}>常用入口</Title>
+          </div>
+        </div>
+        <div className={styles.docGrid}>
+          {docLinks.map((item) => (
+            <a
+              key={item.title}
+              className={styles.docCard}
+              href={item.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className={styles.routeIcon}>{item.icon}</span>
+              <strong>{item.title}</strong>
+              <span>{item.description}</span>
+              <em>
+                打开文档 <ArrowRightOutlined />
+              </em>
+            </a>
+          ))}
+        </div>
+      </section>
 
-      {/* 文档链接 */}
-      <Row gutter={16}>
-        {docLinks.map((section) => (
-          <Col xs={24} md={12} key={section.title}>
-            <Card style={{ height: "100%" }}>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  marginBottom: 16,
-                }}
-              >
-                {section.icon}
-                <Title level={4} style={{ margin: 0 }}>
-                  {section.title}
-                </Title>
+      <section className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <div>
+            <Text type="secondary">AI 开发方式</Text>
+            <Title level={2}>直接输入这些 Prompt</Title>
+          </div>
+          <Button
+            href={feishuDocs.systemPageSdk}
+            target="_blank"
+            rel="noopener noreferrer"
+            icon={<ToolOutlined />}
+          >
+            查看页面开发文档
+          </Button>
+        </div>
+        <div className={styles.promptGrid}>
+          {promptCards.map((item) => (
+            <Card key={item.title} className={styles.promptCard}>
+              <div className={styles.cardHeading}>
+                <span className={styles.iconBox}>{item.icon}</span>
+                <div>
+                  <Title level={3}>{item.title}</Title>
+                  <Paragraph>{item.description}</Paragraph>
+                </div>
               </div>
-              {section.links.map((link) => (
-                <div key={link.label}>
-                  <Button
-                    type="link"
-                    href={link.url}
-                    target="_blank"
-                    style={{ padding: "8px 0" }}
-                  >
-                    {link.label} <ArrowRightOutlined />
-                  </Button>
+              <div className={styles.tagRow}>
+                {item.tags.map((tag) => (
+                  <Tag key={tag}>{tag}</Tag>
+                ))}
+              </div>
+              <div className={styles.commandList}>
+                <Text type="secondary">AI 可能调用</Text>
+                <div>
+                  {item.commands.map((command) => (
+                    <Text code key={command}>
+                      {command}
+                    </Text>
+                  ))}
                 </div>
-              ))}
+              </div>
+              <CopyableCode
+                code={item.prompt}
+                label="可直接输入的 Prompt"
+                compact
+              />
+              <Button
+                type="link"
+                href={item.docUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.inlineDocLink}
+              >
+                {item.docLabel} <ArrowRightOutlined />
+              </Button>
             </Card>
-          </Col>
-        ))}
-      </Row>
-    </div>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <div>
+            <Text type="secondary">页面示例</Text>
+            <Title level={2}>内置页面入口</Title>
+          </div>
+        </div>
+        <div className={styles.pageGrid}>
+          {pageEntries.map((entry) => (
+            <Card key={entry.path} className={styles.routeCard}>
+              <div className={styles.routeIcon}>{entry.icon}</div>
+              <Title level={3}>{entry.title}</Title>
+              <Paragraph>{entry.description}</Paragraph>
+              <div className={styles.tagRow}>
+                {entry.tags.map((tag) => (
+                  <Tag key={tag}>{tag}</Tag>
+                ))}
+              </div>
+              <Link className={styles.routeLink} to={entry.path}>
+                打开页面 <ArrowRightOutlined />
+              </Link>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      <section className={styles.bottomGrid}>
+        <Card className={styles.sectionCard}>
+          <div className={styles.cardTitleLine}>
+            <CloudUploadOutlined />
+            <Title level={2}>接入主应用检查清单</Title>
+          </div>
+          <ol className={styles.checkList}>
+            {integrationSteps.map((step) => (
+              <li key={step}>
+                <CheckCircleOutlined />
+                <span>{step}</span>
+              </li>
+            ))}
+          </ol>
+        </Card>
+
+        <Card className={styles.sectionCard}>
+          <div className={styles.cardTitleLine}>
+            <ToolOutlined />
+            <Title level={2}>Agent 开发提示</Title>
+          </div>
+          <Paragraph className={styles.mutedText}>
+            日常开发时，直接描述业务页面、数据来源、交互方式和验收标准。
+            Agent 会结合当前项目配置、SDK 模型和飞书文库完成实现。
+          </Paragraph>
+          <CopyableCode
+            code={`请基于当前 Lovrabet React 子应用开发客户列表页。
+先确认可用的客户数据模型和字段。
+页面需要包含筛选、表格、详情抽屉和新增表单。
+数据读写使用项目里的 @lovrabet/sdk，并在完成后运行构建检查。`}
+            label="推荐起步 Prompt"
+            compact
+          />
+        </Card>
+      </section>
+    </main>
   );
 }