@agentaily/design-system 0.4.0 → 0.6.0

package/dist/components/settings/IntegrationSettings.js

@@ -1,630 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useRef, useState, useEffect } from "react";
-import { Alert } from "../feedback/Alert.js";
-import { Badge } from "../display/Badge.js";
-import { BrandMark } from "../utilities/BrandMark.js";
-import { Button } from "../buttons/Button.js";
-import { HelpSteps } from "./HelpSteps.js";
-import { Icon } from "../utilities/Icon.js";
-import { IconButton } from "../buttons/IconButton.js";
-import { SecretField } from "../inputs/SecretField.js";
-import { Select } from "../inputs/Select.js";
-import { StatusPill } from "../display/StatusPill.js";
-import { Switch } from "../inputs/Switch.js";
-import { TestRow } from "./TestRow.js";
-const AX_INTEGRATION_CSS = `
-.s-overlay { position: fixed; inset: 0; z-index: 100; display: flex; animation: s-fade var(--dur-2) var(--ease-out) both; }
-.s-modal { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0;
-  background: var(--surface-page); animation: s-rise var(--dur-3) var(--ease-out) both; }
-@keyframes s-fade { from { opacity: 0; } to { opacity: 1; } }
-@keyframes s-rise { from { opacity: 0; transform: translateY(10px) scale(0.994); } to { opacity: 1; transform: none; } }
-@media (prefers-reduced-motion: reduce) { .s-overlay, .s-modal { animation: none; } }
-
-.s-modal__bar { flex: none; display: flex; align-items: center; gap: 16px; height: 52px;
-  padding: 0 12px 0 18px; border-bottom: 1px solid var(--border-default); background: var(--surface-panel); }
-.s-modal__brand { display: flex; align-items: center; gap: 8px; }
-.s-modal__word { font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-body); }
-.s-modal__div { color: var(--text-faint); }
-.s-modal__crumb { font-family: var(--font-mono); font-size: 13px; color: var(--text-body); }
-.s-modal__baractions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
-
-.s-modal__body { flex: 1; overflow-y: auto; min-height: 0; }
-.s-wrap { max-width: 768px; margin: 0 auto; padding: 40px 24px 48px; }
-
-.s-hero { margin-bottom: 28px; }
-.s-hero__kicker { color: var(--text-faint); margin-bottom: 12px; }
-.s-hero__h { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500;
-  letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--text-body); margin: 0 0 10px; }
-.s-hero__p { font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-body); margin: 0; max-width: 62ch; }
-
-.s-ready { display: flex; align-items: center; gap: 14px; padding: 13px 16px; margin-bottom: 26px;
-  border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-panel); }
-.s-ready__steps { display: flex; align-items: center; gap: 7px; flex: none; }
-.s-ready__dot { width: 9px; height: 9px; border-radius: var(--radius-1); border: 1px solid var(--border-strong);
-  background: transparent; transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
-.s-ready__dot.is-on { background: var(--ok); border-color: var(--ok); }
-.s-ready__txt { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-muted); }
-.s-ready__txt strong { color: var(--text-body); font-weight: 500; }
-.s-ready__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: 0.04em; flex: none; }
-
-.s-cards { display: flex; flex-direction: column; gap: 18px; }
-.s-card { position: relative; background: var(--surface-card); border: 1px solid var(--border-default);
-  border-radius: var(--radius-3); overflow: hidden; transition: border-color var(--dur-2) var(--ease-out); }
-.s-card.is-ok { border-color: rgba(62, 207, 142, 0.4); }
-.s-card.is-error { border-color: rgba(229, 72, 77, 0.4); }
-.s-card__head { padding: 20px 24px 18px; }
-.s-card__toprow { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
-.s-card__icon { flex: none; width: 30px; height: 30px; border-radius: var(--radius-2);
-  border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--text-body);
-  display: flex; align-items: center; justify-content: center; }
-.s-card__eyebrow { color: var(--text-faint); }
-.s-card__status { margin-left: auto; flex: none; }
-.s-card__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500;
-  letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--text-body); margin: 0; }
-.s-card__desc { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); margin: 9px 0 0; max-width: 58ch; }
-.s-card__body { padding: 4px 24px 22px; display: flex; flex-direction: column; gap: 18px; }
-
-.s-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
-@media (max-width: 560px) { .s-row2 { grid-template-columns: 1fr; } }
-
-.s-lock { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-snug); }
-.s-lock svg { flex: none; margin-top: 1px; color: var(--text-muted); }
-.s-lock strong { color: var(--text-muted); font-weight: 500; }
-
-.s-detect { display: flex; flex-direction: column; gap: 9px; padding: 13px 14px; border: 1px solid var(--border-default);
-  border-radius: var(--radius-2); background: var(--surface-page); }
-.s-detect__row { display: flex; align-items: center; gap: 10px; }
-.s-detect__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase;
-  color: var(--text-faint); width: 84px; flex: none; }
-.s-detect__v { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-body); word-break: break-all; flex: 1; }
-.s-detect__ok { color: var(--ok); display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px;
-  letter-spacing: var(--tracking-label); text-transform: uppercase; flex: none; }
-
-.s-cap { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
-.s-cap__field { display: flex; align-items: center; gap: 8px; }
-.s-cap__field .ax-input { width: 132px; }
-.s-cap.is-off { opacity: 0.5; }
-
-.s-map { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
-.s-map th { text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label);
-  text-transform: uppercase; color: var(--text-faint); font-weight: 500; padding: 0 0 8px; }
-.s-map td { padding: 7px 0; border-top: 1px solid var(--border-default); color: var(--text-body); vertical-align: middle; }
-.s-map__from { color: var(--text-muted); }
-.s-map__arrow { width: 36px; color: var(--text-faint); }
-.s-map__col { font-family: var(--font-mono); }
-.s-map__tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--tracking-label); text-transform: uppercase;
-  color: var(--text-faint); border: 1px solid var(--border-default); border-radius: var(--radius-1); padding: 2px 5px; margin-left: 7px; }
-
-.s-sub { display: flex; align-items: center; gap: 8px; }
-.s-sub__line { flex: 1; height: 1px; background: var(--border-default); }
-
-.s-save { flex: none; border-top: 1px solid var(--border-default); background: var(--surface-panel); }
-.s-save__inner { max-width: 768px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
-.s-save__status { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); color: var(--text-muted); }
-.s-save__status svg { flex: none; }
-.s-save__actions { display: flex; align-items: center; gap: 8px; flex: none; }
-@media (max-width: 520px) { .s-wrap { padding: 24px 16px 36px; } .s-modal__baractions { gap: 6px; } }
-`;
-if (typeof document !== "undefined" && !document.getElementById("ax-integration-css")) {
-  const s = document.createElement("style");
-  s.id = "ax-integration-css";
-  s.textContent = AX_INTEGRATION_CSS;
-  document.head.appendChild(s);
-}
-const S_LS_KEY = "agentaily.integrations.v1";
-const s_sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-function s_parseFeishu(url) {
-  if (!url) return null;
-  const tokenM = url.match(/\/base\/([A-Za-z0-9]+)/) || url.match(/[?&]app_token=([A-Za-z0-9]+)/);
-  const tableM = url.match(/[?&]table=([A-Za-z0-9]+)/);
-  if (!tokenM) return null;
-  return { token: tokenM[1], table: tableM ? tableM[1] : "" };
-}
-const S_FIELD_MAP = [
-  { from: "姓名", to: "姓名", tag: null },
-  { from: "手机号", to: "手机号", tag: null },
-  { from: "邮箱", to: "邮箱", tag: null },
-  { from: "报名场次", to: "场次", tag: "单选" },
-  { from: "备注", to: "备注", tag: null },
-  { from: null, to: "提交时间", tag: "自动" },
-  { from: null, to: "来源链接", tag: "自动" }
-];
-function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_KEY }) {
-  const load = () => {
-    try {
-      return JSON.parse(localStorage.getItem(storageKey)) || {};
-    } catch (e) {
-      return {};
-    }
-  };
-  const boot = useRef(load()).current;
-  const [dsKey, setDsKey] = useState(boot.dsKey || "");
-  const [dsModel, setDsModel] = useState(boot.dsModel || "deepseek-chat");
-  const [capOn, setCapOn] = useState(!!boot.capOn);
-  const [cap, setCap] = useState(boot.cap || "200");
-  const [dsStatus, setDsStatus] = useState(boot.dsStatus === "ok" ? "ok" : "idle");
-  const [dsResult, setDsResult] = useState(boot.dsResult || "");
-  const [appId, setAppId] = useState(boot.appId || "");
-  const [secret, setSecret] = useState(boot.secret || "");
-  const [link, setLink] = useState(boot.link || "");
-  const [fsStatus, setFsStatus] = useState(boot.fsStatus === "ok" ? "ok" : "idle");
-  const [fsResult, setFsResult] = useState(boot.fsResult || "");
-  const [dirty, setDirty] = useState(false);
-  const [saved, setSaved] = useState(!!boot.saved);
-  useEffect(() => {
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose && onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
-  const parsed = s_parseFeishu(link);
-  const dsConnected = dsStatus === "ok";
-  const fsConnected = fsStatus === "ok";
-  const readyCount = (dsConnected ? 1 : 0) + (fsConnected ? 1 : 0);
-  const allReady = dsConnected && fsConnected;
-  useEffect(() => {
-    const snap = {
-      dsKey,
-      dsModel,
-      capOn,
-      cap,
-      dsStatus,
-      dsResult,
-      appId,
-      secret,
-      link,
-      fsStatus,
-      fsResult,
-      saved
-    };
-    try {
-      localStorage.setItem(storageKey, JSON.stringify(snap));
-    } catch (e) {
-    }
-  }, [
-    dsKey,
-    dsModel,
-    capOn,
-    cap,
-    dsStatus,
-    dsResult,
-    appId,
-    secret,
-    link,
-    fsStatus,
-    fsResult,
-    saved,
-    storageKey
-  ]);
-  const touch = () => {
-    setDirty(true);
-    setSaved(false);
-  };
-  const editDs = (setter) => (v) => {
-    setter(v);
-    if (dsStatus !== "idle") {
-      setDsStatus("idle");
-      setDsResult("");
-    }
-    touch();
-  };
-  const editFs = (setter) => (v) => {
-    setter(v);
-    if (fsStatus !== "idle") {
-      setFsStatus("idle");
-      setFsResult("");
-    }
-    touch();
-  };
-  const testDeepSeek = async () => {
-    setDsStatus("testing");
-    setDsResult("");
-    await s_sleep(1300);
-    const k = dsKey.trim();
-    if (k.startsWith("sk-") && k.length >= 20) {
-      setDsStatus("ok");
-      setDsResult(`连接正常 · 延迟 0.4s · ${dsModel}`);
-    } else {
-      setDsStatus("error");
-      setDsResult(k ? "密钥无效或额度不足，请核对后重试" : "请先填写 API Key");
-    }
-    touch();
-  };
-  const testFeishu = async () => {
-    setFsStatus("testing");
-    setFsResult("");
-    await s_sleep(1500);
-    if (!appId.trim() || !secret.trim()) {
-      setFsStatus("error");
-      setFsResult("缺少 App ID 或 App Secret");
-      touch();
-      return;
-    }
-    if (!parsed) {
-      setFsStatus("error");
-      setFsResult("无法识别多维表格链接，请粘贴完整 URL");
-      touch();
-      return;
-    }
-    if (!parsed.table) {
-      setFsStatus("error");
-      setFsResult("链接缺少数据表 (table) 参数");
-      touch();
-      return;
-    }
-    setFsStatus("ok");
-    setFsResult("已连接 ·「报名登记表」· 检测到 6 个字段");
-    touch();
-  };
-  const onSave = () => {
-    setSaved(true);
-    setDirty(false);
-  };
-  const onDiscard = () => {
-    const b = load();
-    setDsKey(b.dsKey || "");
-    setDsModel(b.dsModel || "deepseek-chat");
-    setCapOn(!!b.capOn);
-    setCap(b.cap || "200");
-    setDsStatus(b.dsStatus === "ok" ? "ok" : "idle");
-    setDsResult(b.dsResult || "");
-    setAppId(b.appId || "");
-    setSecret(b.secret || "");
-    setLink(b.link || "");
-    setFsStatus(b.fsStatus === "ok" ? "ok" : "idle");
-    setFsResult(b.fsResult || "");
-    setSaved(!!b.saved);
-    setDirty(false);
-  };
-  return /* @__PURE__ */ jsx("div", { className: "s-overlay", role: "dialog", "aria-modal": "true", "aria-label": "集成设置", children: /* @__PURE__ */ jsxs("div", { className: "s-modal", children: [
-    /* @__PURE__ */ jsxs("header", { className: "s-modal__bar", children: [
-      /* @__PURE__ */ jsxs("div", { className: "s-modal__brand", children: [
-        /* @__PURE__ */ jsx(BrandMark, { size: 16 }),
-        /* @__PURE__ */ jsx("span", { className: "s-modal__word", children: "agentaily" }),
-        /* @__PURE__ */ jsx("span", { className: "s-modal__div", children: "/" }),
-        /* @__PURE__ */ jsx("span", { className: "s-modal__crumb", children: "集成设置" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "s-modal__baractions", children: [
-        /* @__PURE__ */ jsx(Badge, { variant: allReady ? "ok" : "neutral", dot: allReady, children: allReady ? "就绪" : "未就绪" }),
-        /* @__PURE__ */ jsx(IconButton, { label: "关闭", onClick: () => onClose && onClose(), children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("main", { className: "s-modal__body", children: /* @__PURE__ */ jsxs("div", { className: "s-wrap", children: [
-      /* @__PURE__ */ jsxs("div", { className: "s-hero", children: [
-        /* @__PURE__ */ jsx("div", { className: "ax-label s-hero__kicker", children: "集成 · INTEGRATIONS" }),
-        /* @__PURE__ */ jsx("h1", { className: "s-hero__h", children: "连接你的服务" }),
-        /* @__PURE__ */ jsx("p", { className: "s-hero__p", children: "运行需要两条连接：一把驱动对话的 DeepSeek 密钥，和一张接收数据的飞书多维表格。两项都连通后即可发布。" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "s-ready", children: [
-        /* @__PURE__ */ jsxs("div", { className: "s-ready__steps", children: [
-          /* @__PURE__ */ jsx("span", { className: "s-ready__dot" + (dsConnected ? " is-on" : "") }),
-          /* @__PURE__ */ jsx("span", { className: "s-ready__dot" + (fsConnected ? " is-on" : "") })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "s-ready__txt", children: allReady ? /* @__PURE__ */ jsxs("span", { children: [
-          /* @__PURE__ */ jsx("strong", { children: "两项连接均已就绪。" }),
-          "保存后即可开始运行。"
-        ] }) : /* @__PURE__ */ jsxs("span", { children: [
-          "完成下方 ",
-          /* @__PURE__ */ jsx("strong", { children: "2 项" }),
-          " 连接后才能发布运行。"
-        ] }) }),
-        /* @__PURE__ */ jsxs("span", { className: "s-ready__count", children: [
-          readyCount,
-          " / 2"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "s-cards", children: [
-        /* @__PURE__ */ jsxs(
-          "section",
-          {
-            className: "s-card" + (dsStatus === "ok" ? " is-ok" : dsStatus === "error" ? " is-error" : ""),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "s-card__head", children: [
-                /* @__PURE__ */ jsxs("div", { className: "s-card__toprow", children: [
-                  /* @__PURE__ */ jsx("div", { className: "s-card__icon", children: /* @__PURE__ */ jsx(Icon, { name: "key", size: 16 }) }),
-                  /* @__PURE__ */ jsx("span", { className: "ax-label s-card__eyebrow", children: "对话引擎 · LLM" }),
-                  /* @__PURE__ */ jsx("span", { className: "s-card__status", children: /* @__PURE__ */ jsx(StatusPill, { status: dsStatus }) })
-                ] }),
-                /* @__PURE__ */ jsx("h2", { className: "s-card__title", children: "DeepSeek" }),
-                /* @__PURE__ */ jsx("p", { className: "s-card__desc", children: "驱动对话式交互。用户发送的每一条消息，都通过这把密钥调用 DeepSeek 补全。" })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "s-card__body", children: [
-                /* @__PURE__ */ jsx(
-                  SecretField,
-                  {
-                    label: "API KEY",
-                    value: dsKey,
-                    onChange: editDs(setDsKey),
-                    placeholder: "sk-xxxxxxxxxxxxxxxxxxxxxxxx",
-                    error: dsStatus === "error" && !dsKey.trim() ? "此项必填" : void 0
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "s-lock", children: [
-                  /* @__PURE__ */ jsx(Icon, { name: "lock", size: 14 }),
-                  /* @__PURE__ */ jsxs("span", { children: [
-                    /* @__PURE__ */ jsx("strong", { children: "密钥加密存储" }),
-                    "，仅在服务端发起调用。用户",
-                    /* @__PURE__ */ jsx("strong", { children: "永远看不到、也拿不到这把密钥。" })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "s-row2", children: /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("label", { className: "s-field__label ax-label", children: "对话模型" }),
-                  /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      value: dsModel,
-                      onChange: (e) => editDs(setDsModel)(e.target.value),
-                      options: [
-                        { value: "deepseek-chat", label: "deepseek-chat · 通用 · 快" },
-                        { value: "deepseek-reasoner", label: "deepseek-reasoner · 深度推理" }
-                      ]
-                    }
-                  )
-                ] }) }),
-                showUsageCap ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    Alert,
-                    {
-                      variant: "warn",
-                      icon: /* @__PURE__ */ jsx(Icon, { name: "zap", size: 15 }),
-                      title: "用量由你承担",
-                      children: "每一轮对话消耗的都是你自己 DeepSeek 账户的额度。用得越多，调用越多——建议设置每月上限以防意外超支。"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { className: "s-cap" + (capOn ? "" : " is-off"), children: [
-                    /* @__PURE__ */ jsx(
-                      Switch,
-                      {
-                        label: "启用每月用量上限",
-                        checked: capOn,
-                        onChange: (e) => {
-                          setCapOn(e.target.checked);
-                          touch();
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: "s-cap__field", style: { display: capOn ? "flex" : "none" }, children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          className: "ax-input ax-input--mono",
-                          type: "text",
-                          inputMode: "numeric",
-                          value: cap,
-                          onChange: (e) => {
-                            setCap(e.target.value.replace(/[^0-9]/g, ""));
-                            touch();
-                          },
-                          "aria-label": "每月上限（元）"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { className: "s-field__hint", style: { margin: 0 }, children: "元 / 月，达到后暂停对话" })
-                    ] })
-                  ] })
-                ] }) : null,
-                /* @__PURE__ */ jsx(
-                  HelpSteps,
-                  {
-                    title: "如何获取 DeepSeek API Key？",
-                    steps: [
-                      /* @__PURE__ */ jsxs(Fragment, { children: [
-                        "登录 ",
-                        /* @__PURE__ */ jsx("code", { children: "platform.deepseek.com" }),
-                        "，进入「API Keys」页面。"
-                      ] }),
-                      /* @__PURE__ */ jsx(Fragment, { children: "点击「创建 API Key」，命名后立即复制——密钥只在创建时完整显示一次。" }),
-                      /* @__PURE__ */ jsx(Fragment, { children: "在「充值」中确认账户余额充足，对话才能持续调用。" }),
-                      /* @__PURE__ */ jsxs(Fragment, { children: [
-                        "把以 ",
-                        /* @__PURE__ */ jsx("code", { children: "sk-" }),
-                        " 开头的密钥粘贴到上方输入框。"
-                      ] })
-                    ],
-                    link: {
-                      href: "https://platform.deepseek.com",
-                      label: "打开 DeepSeek 开放平台"
-                    }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                TestRow,
-                {
-                  status: dsStatus,
-                  result: dsResult,
-                  onTest: testDeepSeek,
-                  disabled: !dsKey.trim(),
-                  idleHint: "填写密钥后测试连通性"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "section",
-          {
-            className: "s-card" + (fsStatus === "ok" ? " is-ok" : fsStatus === "error" ? " is-error" : ""),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "s-card__head", children: [
-                /* @__PURE__ */ jsxs("div", { className: "s-card__toprow", children: [
-                  /* @__PURE__ */ jsx("div", { className: "s-card__icon", children: /* @__PURE__ */ jsx(Icon, { name: "table", size: 16 }) }),
-                  /* @__PURE__ */ jsx("span", { className: "ax-label s-card__eyebrow", children: "数据写入 · FEISHU BITABLE" }),
-                  /* @__PURE__ */ jsx("span", { className: "s-card__status", children: /* @__PURE__ */ jsx(StatusPill, { status: fsStatus }) })
-                ] }),
-                /* @__PURE__ */ jsx("h2", { className: "s-card__title", children: "飞书多维表格" }),
-                /* @__PURE__ */ jsx("p", { className: "s-card__desc", children: "每次提交后，数据自动写入指定多维表格的一行。需要一个飞书自建应用的凭证，以及目标表格的链接。" })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "s-card__body", children: [
-                /* @__PURE__ */ jsxs("div", { className: "s-row2", children: [
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("label", { className: "s-field__label ax-label", children: "App ID" }),
-                    /* @__PURE__ */ jsx(
-                      "input",
-                      {
-                        className: "ax-input ax-input--mono",
-                        type: "text",
-                        value: appId,
-                        spellCheck: "false",
-                        placeholder: "cli_xxxxxxxxxxxx",
-                        onChange: (e) => editFs(setAppId)(e.target.value)
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("p", { className: "s-field__hint", children: "应用标识，可公开。" })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    SecretField,
-                    {
-                      label: "App Secret",
-                      value: secret,
-                      onChange: editFs(setSecret),
-                      placeholder: "••••••••••••••••",
-                      hint: "应用密钥，加密存储。"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("label", { className: "s-field__label ax-label", children: "多维表格链接" }),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      className: "ax-input",
-                      type: "text",
-                      value: link,
-                      spellCheck: "false",
-                      placeholder: "https://your-team.feishu.cn/base/bascn…?table=tbl…",
-                      onChange: (e) => editFs(setLink)(e.target.value)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("p", { className: "s-field__hint", children: "在多维表格右上角「分享」中复制链接粘贴即可，App Token 与数据表会自动识别。" })
-                ] }),
-                parsed ? /* @__PURE__ */ jsxs("div", { className: "s-detect", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "s-detect__row", children: [
-                    /* @__PURE__ */ jsx("span", { className: "s-detect__k", children: "App Token" }),
-                    /* @__PURE__ */ jsx("span", { className: "s-detect__v", children: parsed.token }),
-                    /* @__PURE__ */ jsxs("span", { className: "s-detect__ok", children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "check", size: 12 }),
-                      "已识别"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "s-detect__row", children: [
-                    /* @__PURE__ */ jsx("span", { className: "s-detect__k", children: "数据表" }),
-                    /* @__PURE__ */ jsx("span", { className: "s-detect__v", children: parsed.table || "—" }),
-                    parsed.table ? /* @__PURE__ */ jsxs("span", { className: "s-detect__ok", children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "check", size: 12 }),
-                      "已识别"
-                    ] }) : /* @__PURE__ */ jsxs("span", { className: "s-detect__ok", style: { color: "var(--warn)" }, children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "warn", size: 12 }),
-                      "缺失"
-                    ] })
-                  ] })
-                ] }) : null,
-                /* @__PURE__ */ jsxs("div", { className: "s-lock", children: [
-                  /* @__PURE__ */ jsx(Icon, { name: "shield", size: 14 }),
-                  /* @__PURE__ */ jsxs("span", { children: [
-                    /* @__PURE__ */ jsx("strong", { children: "凭证加密存储" }),
-                    "，仅服务端用于写入数据。用户",
-                    /* @__PURE__ */ jsx("strong", { children: "无法接触你的飞书凭证或表格权限。" })
-                  ] })
-                ] }),
-                fsConnected ? /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsxs("div", { className: "s-sub", style: { marginBottom: 12 }, children: [
-                    /* @__PURE__ */ jsx("span", { className: "ax-label", children: "字段映射 · 自动" }),
-                    /* @__PURE__ */ jsx("span", { className: "s-sub__line" })
-                  ] }),
-                  /* @__PURE__ */ jsxs("table", { className: "s-map", children: [
-                    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                      /* @__PURE__ */ jsx("th", { children: "字段" }),
-                      /* @__PURE__ */ jsx("th", { className: "s-map__arrow" }),
-                      /* @__PURE__ */ jsx("th", { children: "表格列" })
-                    ] }) }),
-                    /* @__PURE__ */ jsx("tbody", { children: S_FIELD_MAP.map((m, i) => /* @__PURE__ */ jsxs("tr", { children: [
-                      /* @__PURE__ */ jsx("td", { className: "s-map__from", children: m.from || /* @__PURE__ */ jsx("span", { style: { color: "var(--text-faint)" }, children: "—" }) }),
-                      /* @__PURE__ */ jsx("td", { className: "s-map__arrow", children: /* @__PURE__ */ jsx(Icon, { name: "arrow", size: 14 }) }),
-                      /* @__PURE__ */ jsxs("td", { children: [
-                        /* @__PURE__ */ jsx("span", { className: "s-map__col", children: m.to }),
-                        m.tag ? /* @__PURE__ */ jsx("span", { className: "s-map__tag", children: m.tag }) : null
-                      ] })
-                    ] }, i)) })
-                  ] })
-                ] }) : null,
-                /* @__PURE__ */ jsx(
-                  HelpSteps,
-                  {
-                    title: "如何获取飞书应用凭证？",
-                    steps: [
-                      /* @__PURE__ */ jsxs(Fragment, { children: [
-                        "打开飞书开放平台 ",
-                        /* @__PURE__ */ jsx("code", { children: "open.feishu.cn" }),
-                        "，创建一个「企业自建应用」。"
-                      ] }),
-                      /* @__PURE__ */ jsxs(Fragment, { children: [
-                        "在「凭证与基础信息」中复制 ",
-                        /* @__PURE__ */ jsx("code", { children: "App ID" }),
-                        " 与 ",
-                        /* @__PURE__ */ jsx("code", { children: "App Secret" }),
-                        "。"
-                      ] }),
-                      /* @__PURE__ */ jsxs(Fragment, { children: [
-                        "到「权限管理」开通多维表格读写权限 ",
-                        /* @__PURE__ */ jsx("code", { children: "bitable:app" }),
-                        "，并发布版本。"
-                      ] }),
-                      /* @__PURE__ */ jsxs(Fragment, { children: [
-                        "在目标多维表格里，把这个应用添加为",
-                        /* @__PURE__ */ jsx("strong", { children: "可编辑协作者" }),
-                        "。"
-                      ] }),
-                      /* @__PURE__ */ jsx(Fragment, { children: "复制该多维表格的分享链接，粘贴到上方「多维表格链接」。" })
-                    ],
-                    link: { href: "https://open.feishu.cn", label: "打开飞书开放平台" }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                TestRow,
-                {
-                  status: fsStatus,
-                  result: fsResult,
-                  onTest: testFeishu,
-                  disabled: !appId.trim() || !secret.trim() || !parsed,
-                  idleHint: "填写凭证与链接后测试写入权限"
-                }
-              )
-            ]
-          }
-        )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsx("footer", { className: "s-save", children: /* @__PURE__ */ jsxs("div", { className: "s-save__inner", children: [
-      /* @__PURE__ */ jsx("div", { className: "s-save__status", children: !allReady ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Icon, { name: "info", size: 15, style: { color: "var(--text-faint)" } }),
-        /* @__PURE__ */ jsx("span", { children: "完成两项连接后即可保存并启用。" })
-      ] }) : saved ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Icon, { name: "check", size: 15, style: { color: "var(--ok)" } }),
-        /* @__PURE__ */ jsx("span", { children: "已保存 · 已启用对话与数据写入。" })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Icon, { name: "zap", size: 15, style: { color: "var(--text-muted)" } }),
-        /* @__PURE__ */ jsx("span", { children: "配置已就绪，保存后立即生效。" })
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "s-save__actions", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", disabled: !dirty, onClick: onDiscard, children: "放弃更改" }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "primary",
-            size: "md",
-            icon: /* @__PURE__ */ jsx(Icon, { name: "save", size: 14 }),
-            disabled: !allReady || !dirty,
-            onClick: onSave,
-            children: "保存配置"
-          }
-        )
-      ] })
-    ] }) })
-  ] }) });
-}
-export {
-  IntegrationSettings
-};
-//# sourceMappingURL=IntegrationSettings.js.map