@agentaily/design-system 0.3.0 → 0.5.0

package/dist/components/settings/IntegrationSettings.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useRef, useState, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { Alert } from "../feedback/Alert.js";
 import { Badge } from "../display/Badge.js";
 import { BrandMark } from "../utilities/BrandMark.js";
@@ -9,6 +9,7 @@ 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 { Spinner } from "../feedback/Spinner.js";
 import { StatusPill } from "../display/StatusPill.js";
 import { Switch } from "../inputs/Switch.js";
 import { TestRow } from "./TestRow.js";
@@ -129,7 +130,49 @@ const S_FIELD_MAP = [
   { from: null, to: "提交时间", tag: "自动" },
   { from: null, to: "来源链接", tag: "自动" }
 ];
-function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_KEY }) {
+const S_DEFAULTS = {
+  dsKey: "",
+  dsModel: "deepseek-chat",
+  capOn: false,
+  cap: "200",
+  dsStatus: "idle",
+  dsResult: "",
+  appId: "",
+  secret: "",
+  link: "",
+  fsStatus: "idle",
+  fsResult: "",
+  saved: false
+};
+function s_normalize(raw) {
+  const r = raw || {};
+  return {
+    dsKey: r.dsKey || "",
+    dsModel: r.dsModel || "deepseek-chat",
+    capOn: !!r.capOn,
+    cap: r.cap || "200",
+    dsStatus: r.dsStatus === "ok" ? "ok" : "idle",
+    dsResult: r.dsResult || "",
+    appId: r.appId || "",
+    secret: r.secret || "",
+    link: r.link || "",
+    fsStatus: r.fsStatus === "ok" ? "ok" : "idle",
+    fsResult: r.fsResult || "",
+    saved: !!r.saved
+  };
+}
+function IntegrationSettings({
+  onClose,
+  showUsageCap = true,
+  storageKey = S_LS_KEY,
+  value,
+  onChange,
+  onSave,
+  onTest,
+  readiness,
+  masked
+}) {
+  const controlled = value !== void 0;
   const load = () => {
     try {
       return JSON.parse(localStorage.getItem(storageKey)) || {};
@@ -137,20 +180,33 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
       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 [localCfg, setLocalCfg] = useState(() => controlled ? S_DEFAULTS : s_normalize(load()));
+  const cfg = controlled ? { ...S_DEFAULTS, ...value } : localCfg;
+  const {
+    dsKey,
+    dsModel,
+    capOn,
+    cap,
+    dsStatus,
+    dsResult,
+    appId,
+    secret,
+    link,
+    fsStatus,
+    fsResult,
+    saved
+  } = cfg;
+  const cfgRef = useRef(cfg);
+  cfgRef.current = cfg;
+  const update = (partial) => {
+    if (controlled) {
+      if (onChange) onChange({ ...cfgRef.current, ...partial });
+    } else setLocalCfg((c) => ({ ...c, ...partial }));
+  };
   const [dirty, setDirty] = useState(false);
-  const [saved, setSaved] = useState(!!boot.saved);
+  const [saving, setSaving] = useState(false);
+  const [dsKeyEdited, setDsKeyEdited] = useState(false);
+  const [secretEdited, setSecretEdited] = useState(false);
   useEffect(() => {
     const onKey = (e) => {
       if (e.key === "Escape") onClose && onClose();
@@ -158,124 +214,130 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
     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
-    };
+    if (controlled) return;
     try {
-      localStorage.setItem(storageKey, JSON.stringify(snap));
+      localStorage.setItem(storageKey, JSON.stringify(localCfg));
     } catch (e) {
     }
-  }, [
-    dsKey,
-    dsModel,
-    capOn,
-    cap,
-    dsStatus,
-    dsResult,
-    appId,
-    secret,
-    link,
-    fsStatus,
-    fsResult,
-    saved,
-    storageKey
-  ]);
-  const touch = () => {
+  }, [controlled, localCfg, storageKey]);
+  const parsed = s_parseFeishu(link);
+  const dsConnected = readiness ? !!readiness.deepseek : dsStatus === "ok";
+  const fsConnected = readiness ? !!readiness.feishu : fsStatus === "ok";
+  const dsPill = dsStatus === "testing" || dsStatus === "error" ? dsStatus : dsConnected ? "ok" : "idle";
+  const fsPill = fsStatus === "testing" || fsStatus === "error" ? fsStatus : fsConnected ? "ok" : "idle";
+  const readyCount = (dsConnected ? 1 : 0) + (fsConnected ? 1 : 0);
+  const allReady = dsConnected && fsConnected;
+  const maskedDs = !!(masked && masked.deepseek) && !dsKeyEdited;
+  const maskedFs = !!(masked && masked.feishu) && !secretEdited;
+  const setCfg = (partial) => {
+    update({ ...partial, saved: false });
     setDirty(true);
-    setSaved(false);
   };
-  const editDs = (setter) => (v) => {
-    setter(v);
-    if (dsStatus !== "idle") {
-      setDsStatus("idle");
-      setDsResult("");
+  const editDs = (key) => (v) => {
+    const patch = { [key]: v, saved: false };
+    if (cfgRef.current.dsStatus !== "idle") {
+      patch.dsStatus = "idle";
+      patch.dsResult = "";
     }
-    touch();
+    update(patch);
+    setDirty(true);
   };
-  const editFs = (setter) => (v) => {
-    setter(v);
-    if (fsStatus !== "idle") {
-      setFsStatus("idle");
-      setFsResult("");
+  const editFs = (key) => (v) => {
+    const patch = { [key]: v, saved: false };
+    if (cfgRef.current.fsStatus !== "idle") {
+      patch.fsStatus = "idle";
+      patch.fsResult = "";
     }
-    touch();
+    update(patch);
+    setDirty(true);
   };
-  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}`);
+  const editDsKey = (v) => {
+    if (!dsKeyEdited) setDsKeyEdited(true);
+    editDs("dsKey")(v);
+  };
+  const editSecret = (v) => {
+    if (!secretEdited) setSecretEdited(true);
+    editFs("secret")(v);
+  };
+  const setTest = (which, status, result, finalize) => {
+    const patch = which === "deepseek" ? { dsStatus: status, dsResult: result } : { fsStatus: status, fsResult: result };
+    if (finalize) patch.saved = false;
+    update(patch);
+    if (finalize) setDirty(true);
+  };
+  const builtinTest = async (which) => {
+    if (which === "deepseek") {
+      setTest("deepseek", "testing", "", false);
+      await s_sleep(1300);
+      const k = cfgRef.current.dsKey.trim();
+      if (k.startsWith("sk-") && k.length >= 20)
+        setTest("deepseek", "ok", `连接正常 · 延迟 0.4s · ${cfgRef.current.dsModel}`, true);
+      else
+        setTest(
+          "deepseek",
+          "error",
+          k ? "密钥无效或额度不足，请核对后重试" : "请先填写 API Key",
+          true
+        );
     } else {
-      setDsStatus("error");
-      setDsResult(k ? "密钥无效或额度不足，请核对后重试" : "请先填写 API Key");
+      setTest("feishu", "testing", "", false);
+      await s_sleep(1500);
+      const c = cfgRef.current;
+      const p = s_parseFeishu(c.link);
+      if (!c.appId.trim() || !c.secret.trim())
+        return setTest("feishu", "error", "缺少 App ID 或 App Secret", true);
+      if (!p) return setTest("feishu", "error", "无法识别多维表格链接，请粘贴完整 URL", true);
+      if (!p.table) return setTest("feishu", "error", "链接缺少数据表 (table) 参数", true);
+      setTest("feishu", "ok", "已连接 ·「报名登记表」· 检测到 6 个字段", true);
     }
-    touch();
   };
-  const testFeishu = async () => {
-    setFsStatus("testing");
-    setFsResult("");
-    await s_sleep(1500);
-    if (!appId.trim() || !secret.trim()) {
-      setFsStatus("error");
-      setFsResult("缺少 App ID 或 App Secret");
-      touch();
+  const runTest = async (which) => {
+    if (onTest) {
+      setTest(which, "testing", "", false);
+      try {
+        const res = await onTest(which);
+        const ok = !!(res && res.ok);
+        setTest(
+          which,
+          ok ? "ok" : "error",
+          res && res.message || (ok ? "连接正常" : "连接失败"),
+          true
+        );
+      } catch (e) {
+        setTest(which, "error", e && e.message || "测试失败", true);
+      }
       return;
     }
-    if (!parsed) {
-      setFsStatus("error");
-      setFsResult("无法识别多维表格链接，请粘贴完整 URL");
-      touch();
-      return;
-    }
-    if (!parsed.table) {
-      setFsStatus("error");
-      setFsResult("链接缺少数据表 (table) 参数");
-      touch();
-      return;
-    }
-    setFsStatus("ok");
-    setFsResult("已连接 ·「报名登记表」· 检测到 6 个字段");
-    touch();
+    builtinTest(which);
   };
-  const onSave = () => {
-    setSaved(true);
+  const afterSaved = () => {
     setDirty(false);
+    setDsKeyEdited(false);
+    setSecretEdited(false);
+  };
+  const doSave = async () => {
+    if (onSave) {
+      setSaving(true);
+      try {
+        await onSave(cfgRef.current);
+        update({ saved: true });
+        afterSaved();
+      } catch (e) {
+      } finally {
+        setSaving(false);
+      }
+    } else {
+      update({ saved: true });
+      afterSaved();
+    }
   };
   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);
+    setDsKeyEdited(false);
+    setSecretEdited(false);
     setDirty(false);
+    if (controlled) return;
+    setLocalCfg(s_normalize(load()));
   };
   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: [
@@ -318,13 +380,13 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
         /* @__PURE__ */ jsxs(
           "section",
           {
-            className: "s-card" + (dsStatus === "ok" ? " is-ok" : dsStatus === "error" ? " is-error" : ""),
+            className: "s-card" + (dsPill === "ok" ? " is-ok" : dsPill === "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("span", { className: "s-card__status", children: /* @__PURE__ */ jsx(StatusPill, { status: dsPill }) })
                 ] }),
                 /* @__PURE__ */ jsx("h2", { className: "s-card__title", children: "DeepSeek" }),
                 /* @__PURE__ */ jsx("p", { className: "s-card__desc", children: "驱动对话式交互。用户发送的每一条消息，都通过这把密钥调用 DeepSeek 补全。" })
@@ -335,9 +397,10 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
                   {
                     label: "API KEY",
                     value: dsKey,
-                    onChange: editDs(setDsKey),
-                    placeholder: "sk-xxxxxxxxxxxxxxxxxxxxxxxx",
-                    error: dsStatus === "error" && !dsKey.trim() ? "此项必填" : void 0
+                    onChange: editDsKey,
+                    placeholder: maskedDs ? "已保存 ········  ·  留空则保持不变" : "sk-xxxxxxxxxxxxxxxxxxxxxxxx",
+                    hint: maskedDs ? "已存密钥 · 留空表示不修改，输入新值即覆盖" : void 0,
+                    error: !maskedDs && dsStatus === "error" && !dsKey.trim() ? "此项必填" : void 0
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "s-lock", children: [
@@ -354,7 +417,7 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
                     Select,
                     {
                       value: dsModel,
-                      onChange: (e) => editDs(setDsModel)(e.target.value),
+                      onChange: (e) => editDs("dsModel")(e.target.value),
                       options: [
                         { value: "deepseek-chat", label: "deepseek-chat · 通用 · 快" },
                         { value: "deepseek-reasoner", label: "deepseek-reasoner · 深度推理" }
@@ -378,10 +441,7 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
                       {
                         label: "启用每月用量上限",
                         checked: capOn,
-                        onChange: (e) => {
-                          setCapOn(e.target.checked);
-                          touch();
-                        }
+                        onChange: (e) => setCfg({ capOn: e.target.checked })
                       }
                     ),
                     /* @__PURE__ */ jsxs("div", { className: "s-cap__field", style: { display: capOn ? "flex" : "none" }, children: [
@@ -392,10 +452,7 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
                           type: "text",
                           inputMode: "numeric",
                           value: cap,
-                          onChange: (e) => {
-                            setCap(e.target.value.replace(/[^0-9]/g, ""));
-                            touch();
-                          },
+                          onChange: (e) => setCfg({ cap: e.target.value.replace(/[^0-9]/g, "") }),
                           "aria-label": "每月上限（元）"
                         }
                       ),
@@ -433,8 +490,8 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
                 {
                   status: dsStatus,
                   result: dsResult,
-                  onTest: testDeepSeek,
-                  disabled: !dsKey.trim(),
+                  onTest: () => runTest("deepseek"),
+                  disabled: !dsKey.trim() && !maskedDs,
                   idleHint: "填写密钥后测试连通性"
                 }
               )
@@ -444,13 +501,13 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
         /* @__PURE__ */ jsxs(
           "section",
           {
-            className: "s-card" + (fsStatus === "ok" ? " is-ok" : fsStatus === "error" ? " is-error" : ""),
+            className: "s-card" + (fsPill === "ok" ? " is-ok" : fsPill === "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("span", { className: "s-card__status", children: /* @__PURE__ */ jsx(StatusPill, { status: fsPill }) })
                 ] }),
                 /* @__PURE__ */ jsx("h2", { className: "s-card__title", children: "飞书多维表格" }),
                 /* @__PURE__ */ jsx("p", { className: "s-card__desc", children: "每次提交后，数据自动写入指定多维表格的一行。需要一个飞书自建应用的凭证，以及目标表格的链接。" })
@@ -467,7 +524,7 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
                         value: appId,
                         spellCheck: "false",
                         placeholder: "cli_xxxxxxxxxxxx",
-                        onChange: (e) => editFs(setAppId)(e.target.value)
+                        onChange: (e) => editFs("appId")(e.target.value)
                       }
                     ),
                     /* @__PURE__ */ jsx("p", { className: "s-field__hint", children: "应用标识，可公开。" })
@@ -477,9 +534,9 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
                     {
                       label: "App Secret",
                       value: secret,
-                      onChange: editFs(setSecret),
-                      placeholder: "••••••••••••••••",
-                      hint: "应用密钥，加密存储。"
+                      onChange: editSecret,
+                      placeholder: maskedFs ? "已保存 ········  ·  留空则保持不变" : "••••••••••••••••",
+                      hint: maskedFs ? "已存密钥 · 留空表示不修改" : "应用密钥，加密存储。"
                     }
                   )
                 ] }),
@@ -493,7 +550,7 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
                       value: link,
                       spellCheck: "false",
                       placeholder: "https://your-team.feishu.cn/base/bascn…?table=tbl…",
-                      onChange: (e) => editFs(setLink)(e.target.value)
+                      onChange: (e) => editFs("link")(e.target.value)
                     }
                   ),
                   /* @__PURE__ */ jsx("p", { className: "s-field__hint", children: "在多维表格右上角「分享」中复制链接粘贴即可，App Token 与数据表会自动识别。" })
@@ -586,8 +643,8 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
                 {
                   status: fsStatus,
                   result: fsResult,
-                  onTest: testFeishu,
-                  disabled: !appId.trim() || !secret.trim() || !parsed,
+                  onTest: () => runTest("feishu"),
+                  disabled: !appId.trim() || !secret.trim() && !maskedFs || !parsed,
                   idleHint: "填写凭证与链接后测试写入权限"
                 }
               )
@@ -614,9 +671,10 @@ function IntegrationSettings({ onClose, showUsageCap = true, storageKey = S_LS_K
           {
             variant: "primary",
             size: "md",
-            icon: /* @__PURE__ */ jsx(Icon, { name: "save", size: 14 }),
-            disabled: !allReady || !dirty,
-            onClick: onSave,
+            icon: saving ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : /* @__PURE__ */ jsx(Icon, { name: "save", size: 14 }),
+            disabled: !allReady || !dirty || saving,
+            "aria-busy": saving || void 0,
+            onClick: doSave,
             children: "保存配置"
           }
         )