mirror of
https://github.com/hansjone/dsh-im-ops.git
synced 2026-10-09 05:20:46 +08:00
1033 lines
39 KiB
JavaScript
1033 lines
39 KiB
JavaScript
import * as React from "react";
|
||
|
||
import { FeishuLogoGlyph } from "../../channel-logos.js";
|
||
import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from "../../credential-binding.js";
|
||
import { h } from "../../i18n.js";
|
||
import {
|
||
FEISHU_ENDPOINTS,
|
||
FEISHU_RPC_CHANNEL,
|
||
formatRemaining,
|
||
normalizeBotsSnapshot,
|
||
normalizePollResult,
|
||
normalizeProvisioning,
|
||
presentError,
|
||
unwrapRpcResult,
|
||
} from "./api.js";
|
||
import { useAnimationFrameScheduler } from "../../lifecycle.js";
|
||
import { WorkspaceEditor } from "../../workspace-editor.js";
|
||
import { useWorkspaceSnapshotFence } from "../../workspace-snapshot-fence.js";
|
||
import { installFeishuStyles } from "./styles.js";
|
||
|
||
export const name = "feishu-settings";
|
||
export const inject = ["slots", "connection"];
|
||
|
||
function SvgIcon({ children, size = 18, className, viewBox = "0 0 24 24" }) {
|
||
return h("svg", {
|
||
width: size,
|
||
height: size,
|
||
viewBox,
|
||
fill: "none",
|
||
xmlns: "http://www.w3.org/2000/svg",
|
||
"aria-hidden": "true",
|
||
focusable: "false",
|
||
className,
|
||
}, children);
|
||
}
|
||
|
||
function ShieldIcon({ size = 18 }) {
|
||
return h(SvgIcon, { size },
|
||
h("path", {
|
||
d: "M12 3 5.5 5.8v5.1c0 4.25 2.72 7.87 6.5 9.1 3.78-1.23 6.5-4.85 6.5-9.1V5.8L12 3Z",
|
||
stroke: "currentColor", strokeWidth: "1.7", strokeLinejoin: "round",
|
||
}),
|
||
h("path", {
|
||
d: "m9.3 11.8 1.7 1.7 3.8-4", stroke: "currentColor",
|
||
strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round",
|
||
}),
|
||
);
|
||
}
|
||
|
||
function RobotIcon({ size = 26 }) {
|
||
return h(SvgIcon, { size },
|
||
h("rect", {
|
||
x: "5", y: "7.5", width: "14", height: "11", rx: "4",
|
||
stroke: "currentColor", strokeWidth: "1.7",
|
||
}),
|
||
h("path", {
|
||
d: "M12 4.5v3M8.7 12h.01M15.3 12h.01M9.2 15.3c1.67 1.08 3.93 1.08 5.6 0M3.5 11.5v3M20.5 11.5v3",
|
||
stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round",
|
||
}),
|
||
);
|
||
}
|
||
|
||
function SparkIcon({ size = 18 }) {
|
||
return h(SvgIcon, { size },
|
||
h("path", {
|
||
d: "M12 2.8c.75 3.67 2.7 5.62 6.4 6.4-3.7.77-5.65 2.72-6.4 6.4-.75-3.68-2.7-5.63-6.4-6.4 3.7-.78 5.65-2.73 6.4-6.4Z",
|
||
stroke: "currentColor", strokeWidth: "1.55", strokeLinejoin: "round",
|
||
}),
|
||
h("path", {
|
||
d: "M5.2 15.8c.35 1.7 1.28 2.63 3 3-1.72.36-2.65 1.29-3 3-.36-1.71-1.29-2.64-3-3 1.71-.37 2.64-1.3 3-3ZM18.7 2.7c.22 1.06.79 1.63 1.85 1.85-1.06.22-1.63.79-1.85 1.85-.22-1.06-.79-1.63-1.85-1.85 1.06-.22 1.63-.79 1.85-1.85Z",
|
||
fill: "currentColor",
|
||
}),
|
||
);
|
||
}
|
||
|
||
function RefreshIcon({ size = 16 }) {
|
||
return h(SvgIcon, { size }, h("path", {
|
||
d: "M19 7.5V4m0 0h-3.5M19 4l-2.1 2.1A7 7 0 1 0 19 13",
|
||
stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round",
|
||
strokeLinejoin: "round",
|
||
}));
|
||
}
|
||
|
||
function ExternalIcon({ size = 15 }) {
|
||
return h(SvgIcon, { size }, h("path", {
|
||
d: "M13 5h6v6M19 5l-8.5 8.5M18 13.5V18a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4.5",
|
||
stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round",
|
||
strokeLinejoin: "round",
|
||
}));
|
||
}
|
||
|
||
function AlertIcon({ size = 22 }) {
|
||
return h(SvgIcon, { size },
|
||
h("path", {
|
||
d: "M12 3.4 21 19H3L12 3.4Z", stroke: "currentColor",
|
||
strokeWidth: "1.7", strokeLinejoin: "round",
|
||
}),
|
||
h("path", {
|
||
d: "M12 9v4.4M12 16.6v.01", stroke: "currentColor",
|
||
strokeWidth: "1.9", strokeLinecap: "round",
|
||
}),
|
||
);
|
||
}
|
||
|
||
function QrIcon({ size = 58 }) {
|
||
return h(SvgIcon, { size }, h("path", {
|
||
d: "M4 4h6v6H4V4Zm10 0h6v6h-6V4ZM4 14h6v6H4v-6Zm10 0h2v2h-2v-2Zm4 0h2v4h-2v-4Zm-4 4h4v2h-4v-2Z",
|
||
fill: "currentColor",
|
||
}));
|
||
}
|
||
|
||
const Button = React.forwardRef(function Button(
|
||
{ children, kind = "secondary", size, icon, className = "", ...props },
|
||
ref,
|
||
) {
|
||
return h("button", {
|
||
...props,
|
||
ref,
|
||
type: "button",
|
||
className: `bxf-button ${className}`.trim(),
|
||
"data-kind": kind,
|
||
"data-size": size,
|
||
}, icon, h("span", null, children));
|
||
});
|
||
|
||
function BrandMark() {
|
||
return h("div", { className: "bxf-brandMark" }, h(RobotIcon, { size: 34 }));
|
||
}
|
||
|
||
function Heading({ totals, onAdd, onCredential, credentialOpen, adding, busy, addButtonRef }) {
|
||
const hasBots = totals.configured > 0;
|
||
return h("div", { className: "bxf-heading" },
|
||
h("div", { className: "bxf-headingTools" },
|
||
h("div", { className: "dim-bindActions" },
|
||
h(Button, {
|
||
kind: "primary",
|
||
size: "small",
|
||
className: "bxf-bindButton dim-scanButton",
|
||
onClick: onAdd,
|
||
disabled: adding || busy,
|
||
ref: addButtonRef,
|
||
"aria-busy": busy ? "true" : undefined,
|
||
"aria-label": "扫码接入飞书机器人",
|
||
icon: h(QrActionIcon),
|
||
}, adding ? "正在接入" : "扫码接入机器人"),
|
||
h(Button, {
|
||
kind: "credential",
|
||
size: "small",
|
||
className: "dim-credentialButton",
|
||
onClick: onCredential,
|
||
disabled: adding || busy,
|
||
"aria-pressed": credentialOpen,
|
||
"aria-label": "使用 App ID 和 App Secret 绑定飞书机器人",
|
||
icon: h(CredentialActionIcon),
|
||
}, credentialOpen ? "收起凭据" : "手动接入")),
|
||
hasBots
|
||
? h("div", {
|
||
className: "bxf-totalBadge dim-onlineBadge",
|
||
"aria-label": `已接入 ${totals.configured} 个机器人，其中 ${totals.connected} 个在线`,
|
||
}, h("span", null, `${totals.connected} / ${totals.configured} 在线`))
|
||
: null,
|
||
),
|
||
);
|
||
}
|
||
|
||
function LoadingView() {
|
||
return h("div", {
|
||
className: "bxf-card dim-surfaceCard dim-loadingView",
|
||
"aria-busy": "true",
|
||
"aria-label": "正在读取飞书机器人列表",
|
||
},
|
||
h("div", { className: "dim-spinner", "aria-hidden": "true" }),
|
||
h("span", null, "正在读取飞书连接状态…"),
|
||
);
|
||
}
|
||
|
||
function EmptyView({ onStart, busy }) {
|
||
return h("div", { className: "bxf-card dim-surfaceCard" },
|
||
h("div", { className: "bxf-cardBody bxf-intro dim-surfaceBody dim-emptyView" },
|
||
h("div", { className: "bxf-introCopy dim-emptyCopy" },
|
||
h("div", { className: "bxf-stateLabel dim-stateLabel" },
|
||
h("span", { className: "bxf-dot dim-stateDot" }), h("span", null, "尚未接入机器人")),
|
||
h("h3", null, "扫码，创建第一个飞书入口"),
|
||
h("p", null, "无需手动填写 App ID。以后还可以继续添加机器人，分别服务不同团队或飞书租户。"),
|
||
h("div", { className: "bxf-actions dim-viewActions" },
|
||
h(Button, {
|
||
kind: "primary", onClick: onStart,
|
||
disabled: busy, "aria-busy": busy ? "true" : undefined,
|
||
}, busy ? "正在生成二维码…" : "生成飞书二维码")),
|
||
),
|
||
h("div", { className: "bxf-markStage dim-emptyBrand", "aria-hidden": "true" }, h(BrandMark)),
|
||
),
|
||
);
|
||
}
|
||
|
||
function safeVerificationHref(value) {
|
||
if (!value) return undefined;
|
||
try {
|
||
const url = new URL(value);
|
||
return url.protocol === "https:" ? url.toString() : undefined;
|
||
} catch {
|
||
return undefined;
|
||
}
|
||
}
|
||
|
||
function safeQrSource(value) {
|
||
if (!value) return undefined;
|
||
return /^data:image\/(?:png|webp|svg\+xml)(?:;charset=[^;,]+)?;base64,/i.test(value)
|
||
? value
|
||
: undefined;
|
||
}
|
||
|
||
function QrPane({ provision, now, onRefresh, onCancel, busy }) {
|
||
const [imageFailed, setImageFailed] = React.useState(false);
|
||
const qrSource = safeQrSource(provision.qrCodeDataUrl);
|
||
const href = safeVerificationHref(provision.verificationUrl);
|
||
const remaining = Math.max(0, provision.expiresAt - now);
|
||
const expired = provision.expired === true || remaining === 0;
|
||
const progress = Math.min(1, remaining / Math.max(1, provision.durationMs ?? remaining));
|
||
|
||
React.useEffect(() => setImageFailed(false), [qrSource]);
|
||
|
||
return h("div", { className: "bxf-card bxf-provisionCard dim-surfaceCard" },
|
||
h("div", { className: "bxf-cardBody bxf-qrLayout dim-surfaceBody dim-qrLayout" },
|
||
h("div", { className: "bxf-qrColumn dim-qrColumn" },
|
||
h("div", { className: "bxf-qrFrame dim-qrFrame" },
|
||
qrSource && !imageFailed
|
||
? h("img", {
|
||
src: qrSource,
|
||
alt: "用于新增 DeepSeek Harness 飞书机器人的一次性授权二维码",
|
||
onError: () => setImageFailed(true),
|
||
})
|
||
: h("div", { className: "bxf-qrFallback dim-qrFallback" },
|
||
h("div", null, h(QrIcon), h("span", null, "二维码未就绪，请打开授权链接"))),
|
||
expired
|
||
? h("div", { className: "bxf-expiredOverlay dim-qrExpired", role: "status" },
|
||
h("div", null, "二维码已失效", h("br"), "请刷新后重新扫码"))
|
||
: null,
|
||
),
|
||
h("div", {
|
||
className: "bxf-countdown dim-countdown",
|
||
"aria-label": expired ? "二维码已失效" : `二维码剩余 ${formatRemaining(remaining)}`,
|
||
},
|
||
h("div", { className: "bxf-countdownTop dim-countdownTop", "aria-hidden": "true" },
|
||
h("span", null, expired ? "等待刷新" : "二维码有效时间"),
|
||
h("strong", null, formatRemaining(remaining))),
|
||
h("div", { className: "bxf-progress dim-progress", "aria-hidden": "true" },
|
||
h("span", { style: { "--bxf-progress": `${Math.round(progress * 100)}%` } })),
|
||
),
|
||
),
|
||
h("div", { className: "bxf-qrCopy dim-qrCopy" },
|
||
h("div", { className: "bxf-stateLabel dim-stateLabel" },
|
||
h("span", { className: "bxf-dot dim-stateDot", "data-tone": "warning" }),
|
||
h("span", null, "正在添加新机器人")),
|
||
h("h3", null, expired ? "刷新二维码后继续" : "使用飞书扫码创建机器人"),
|
||
h("p", null, "扫码只会新增一个机器人，已接入的机器人会继续正常收发消息。"),
|
||
h("ol", { className: "bxf-steps dim-steps" },
|
||
h("li", null, "打开飞书移动端，使用扫一扫读取二维码"),
|
||
h("li", null, "核对应用名称与权限范围，并确认创建"),
|
||
h("li", null, "保持本页打开，等待新机器人的长连接就绪")),
|
||
h("div", { className: "bxf-actions dim-viewActions" },
|
||
expired
|
||
? h(Button, {
|
||
kind: "primary", onClick: onRefresh, disabled: busy,
|
||
}, busy ? "刷新中…" : "刷新二维码")
|
||
: href
|
||
? h("a", {
|
||
className: "bxf-button bxf-link", "data-kind": "secondary",
|
||
href, target: "_blank", rel: "noopener noreferrer",
|
||
}, h("span", null, "在飞书中打开"))
|
||
: null,
|
||
!expired
|
||
? h(Button, { onClick: onRefresh, disabled: busy }, "换一个二维码")
|
||
: null,
|
||
h(Button, { onClick: onCancel, disabled: busy }, "取消添加")),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
function ProvisionProgress({ phase, onCancel, busy }) {
|
||
const connecting = phase === "connecting";
|
||
return h("div", {
|
||
className: "bxf-card bxf-provisionCard dim-surfaceCard dim-loadingView",
|
||
"aria-busy": "true",
|
||
},
|
||
h("div", { className: "dim-spinner", "aria-hidden": "true" }),
|
||
h("h3", null, connecting ? "已确认，正在连接新机器人" : "正在准备授权二维码"),
|
||
h("p", null, connecting
|
||
? "正在安全保存凭据并检查新机器人的消息通道，其他机器人不会中断。"
|
||
: "正在向飞书申请一次性授权二维码，请稍候。"),
|
||
connecting
|
||
? h("div", { className: "bxf-actions dim-viewActions", style: { justifyContent: "center" } },
|
||
h(Button, { onClick: onCancel, disabled: busy }, "取消添加"))
|
||
: null,
|
||
);
|
||
}
|
||
|
||
function ProvisionError({ error, onRetry, onCancel, busy }) {
|
||
return h("div", { className: "bxf-card bxf-provisionCard dim-surfaceCard" },
|
||
h("div", { className: "bxf-inlineError dim-inlineError", role: "alert" },
|
||
h("div", null,
|
||
h("h3", null, "新机器人没有添加完成"),
|
||
h("p", null, error.message),
|
||
error.code ? h("span", { className: "bxf-errorCode" }, error.code) : null,
|
||
h("div", { className: "bxf-actions dim-viewActions" },
|
||
h(Button, { kind: "primary", onClick: onRetry, disabled: busy },
|
||
busy ? "重试中…" : "重新生成二维码"),
|
||
h(Button, { onClick: onCancel, disabled: busy }, "关闭")),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
const HEALTH_LABELS = {
|
||
connected: "运行正常",
|
||
connecting: "正在连接",
|
||
offline: "连接中断",
|
||
error: "需要处理",
|
||
};
|
||
|
||
function formatCheckedTime(timestamp) {
|
||
if (!timestamp) return "尚未检查";
|
||
try {
|
||
return new Intl.DateTimeFormat("zh-CN", {
|
||
hour: "2-digit", minute: "2-digit", second: "2-digit",
|
||
}).format(new Date(timestamp));
|
||
} catch {
|
||
return "刚刚";
|
||
}
|
||
}
|
||
|
||
function RemoveConfirmation({ bot, busy, onConfirm, onCancel }) {
|
||
const cancelRef = React.useRef(null);
|
||
const idPart = bot.botId.replace(/[^a-zA-Z0-9_-]/g, "-");
|
||
const titleId = `bxf-remove-title-${idPart}`;
|
||
const descriptionId = `bxf-remove-description-${idPart}`;
|
||
|
||
React.useEffect(() => cancelRef.current?.focus(), []);
|
||
|
||
return h("div", {
|
||
className: "bxf-confirm dim-confirm",
|
||
role: "alertdialog",
|
||
"aria-labelledby": titleId,
|
||
"aria-describedby": descriptionId,
|
||
onKeyDown: (event) => {
|
||
if (event.key === "Escape" && !busy) {
|
||
event.preventDefault();
|
||
onCancel();
|
||
}
|
||
},
|
||
},
|
||
h("h4", { id: titleId }, `从 DeepSeek Harness 移除“${bot.bot.name}”？`),
|
||
h("p", { id: descriptionId },
|
||
"此操作会停止这个机器人的连接，并删除保存在本机的接入配置和凭据。飞书开放平台中的应用不会被自动删除，其他机器人也不受影响。"),
|
||
h("div", { className: "bxf-actions dim-viewActions" },
|
||
h(Button, { ref: cancelRef, onClick: onCancel, disabled: busy }, "保留机器人"),
|
||
h(Button, { kind: "danger", onClick: onConfirm, disabled: busy },
|
||
busy ? "正在移除…" : "确认移除接入")),
|
||
);
|
||
}
|
||
|
||
export function BotCard({
|
||
connection,
|
||
busy,
|
||
actionError,
|
||
removing,
|
||
onReconnect,
|
||
onWorkspaceSave,
|
||
onRequestRemove,
|
||
onConfirmRemove,
|
||
onCancelRemove,
|
||
cardRef,
|
||
removeButtonRef,
|
||
}) {
|
||
const { bot, health, state, connected } = connection;
|
||
const stateForDisplay = busy === "reconnect"
|
||
? "connecting"
|
||
: state;
|
||
const tone = stateForDisplay === "connected"
|
||
? "success"
|
||
: stateForDisplay === "connecting"
|
||
? "warning"
|
||
: "error";
|
||
const summary = actionError?.message
|
||
?? connection.error?.message
|
||
?? (connected ? null : health.summary);
|
||
const titleId = `bxf-bot-${connection.botId.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
|
||
return h("article", {
|
||
className: "bxf-card bxf-botCard dim-botCard",
|
||
"aria-labelledby": titleId,
|
||
"data-bot-id": connection.botId,
|
||
tabIndex: -1,
|
||
ref: cardRef,
|
||
},
|
||
h("div", { className: "bxf-cardBody dim-botCardBody" },
|
||
h("div", { className: "bxf-connectedTop dim-botCardTop" },
|
||
h("div", { className: "bxf-botIdentity dim-botIdentity" },
|
||
h("div", { className: "bxf-avatar dim-botAvatar", "aria-hidden": "true" },
|
||
h(FeishuLogoGlyph, { size: 34 })),
|
||
h("div", { className: "bxf-botName dim-botName" },
|
||
h("h3", { id: titleId, title: bot.name }, bot.name),
|
||
h("p", { title: bot.appIdMasked }, bot.appIdMasked ?? "应用标识已安全保存")),
|
||
),
|
||
h("div", { className: "bxf-healthPill dim-botHealth", "data-health": stateForDisplay },
|
||
h("span", { className: "bxf-dot dim-healthDot", "data-tone": tone }),
|
||
h("span", null, HEALTH_LABELS[stateForDisplay] ?? "状态未知")),
|
||
),
|
||
h("dl", { className: "bxf-statusGrid dim-botMetrics" },
|
||
h("div", { className: "bxf-metric dim-botMetric" }, h("dt", null, "消息通道"),
|
||
h("dd", null, connected ? "长连接" : stateForDisplay === "connecting" ? "连接中" : "已断开")),
|
||
h("div", { className: "bxf-metric dim-botMetric" }, h("dt", null, "最近检查"),
|
||
h("dd", null, formatCheckedTime(health.lastCheckedAt))),
|
||
),
|
||
h(WorkspaceEditor, {
|
||
workspace: connection.workspace,
|
||
disabled: Boolean(busy),
|
||
onSave: onWorkspaceSave,
|
||
}),
|
||
h("div", { className: "bxf-connectedFooter dim-cardFooter" },
|
||
summary ? h("div", { className: "bxf-healthSummary dim-cardSummary", "data-error": actionError || connection.error ? "true" : undefined },
|
||
summary) : null,
|
||
h("div", { className: "bxf-actions bxf-botActions dim-cardActions" },
|
||
h(Button, {
|
||
className: "dim-cardAction", onClick: onReconnect,
|
||
disabled: Boolean(busy), "aria-busy": busy === "reconnect" ? "true" : undefined,
|
||
"aria-label": `${connected ? "检查连接" : "重试连接"}${bot.name}`,
|
||
}, busy === "reconnect" ? (connected ? "检查中…" : "正在连接…") : connected ? "检查连接" : "重试连接"),
|
||
h(Button, {
|
||
className: "dim-cardAction", kind: "danger", onClick: onRequestRemove,
|
||
disabled: Boolean(busy), ref: removeButtonRef,
|
||
"aria-label": `从 DeepSeek Harness 移除${bot.name}`,
|
||
}, "移除接入")),
|
||
),
|
||
),
|
||
removing
|
||
? h(RemoveConfirmation, {
|
||
bot: connection,
|
||
busy: busy === "delete",
|
||
onConfirm: onConfirmRemove,
|
||
onCancel: onCancelRemove,
|
||
})
|
||
: null,
|
||
);
|
||
}
|
||
|
||
function BotList(props) {
|
||
return h("section", { className: "bxf-listSection dim-listSection", "aria-labelledby": "bxf-bot-list-title" },
|
||
h("div", { className: "bxf-listHeading dim-listHeading" },
|
||
h("h3", { id: "bxf-bot-list-title" }, "已接入的机器人")),
|
||
h("ul", { className: "bxf-botList dim-botList", role: "list" },
|
||
props.bots.map((bot) => h("li", { key: bot.botId },
|
||
h(BotCard, {
|
||
connection: bot,
|
||
busy: props.busyByBot[bot.botId],
|
||
actionError: props.errorsByBot[bot.botId],
|
||
removing: props.removeTargetId === bot.botId,
|
||
onReconnect: () => props.onReconnect(bot),
|
||
onWorkspaceSave: (workspace) => props.onWorkspaceSave(bot, workspace),
|
||
onRequestRemove: () => props.onRequestRemove(bot),
|
||
onConfirmRemove: () => props.onConfirmRemove(bot),
|
||
onCancelRemove: props.onCancelRemove,
|
||
cardRef: (node) => props.setCardRef(bot.botId, node),
|
||
removeButtonRef: (node) => props.setRemoveButtonRef(bot.botId, node),
|
||
}),
|
||
))),
|
||
);
|
||
}
|
||
|
||
function PageError({ error, onRetry, busy }) {
|
||
return h("div", { className: "bxf-card dim-surfaceCard" },
|
||
h("div", { className: "bxf-error dim-inlineError", role: "alert" },
|
||
h("div", null,
|
||
h("h3", null, "无法读取飞书机器人"),
|
||
h("p", null, error.message),
|
||
error.code ? h("span", { className: "bxf-errorCode" }, error.code) : null,
|
||
h("div", { className: "bxf-actions dim-viewActions" },
|
||
h(Button, { kind: "primary", onClick: onRetry, disabled: busy },
|
||
busy ? "重试中…" : "重新读取"))),
|
||
),
|
||
);
|
||
}
|
||
|
||
const EMPTY_TOTALS = Object.freeze({ configured: 0, connected: 0 });
|
||
|
||
export function mergeFeishuSnapshotState(
|
||
current,
|
||
snapshot,
|
||
{ restoreProvisioning = false, now = Date.now() } = {},
|
||
) {
|
||
if (snapshot.revision > 0 && current.revision > snapshot.revision) return current;
|
||
let provisioning = current.provisioning;
|
||
if (!provisioning && restoreProvisioning && snapshot.provisioning) {
|
||
provisioning = {
|
||
phase: snapshot.state === "connecting" ? "connecting" : "qr",
|
||
...snapshot.provisioning,
|
||
durationMs: Math.max(1, snapshot.provisioning.expiresAt - now),
|
||
expired: snapshot.provisioning.expiresAt <= now,
|
||
};
|
||
}
|
||
return {
|
||
...current,
|
||
phase: "ready",
|
||
revision: snapshot.revision,
|
||
bots: snapshot.bots,
|
||
totals: snapshot.totals,
|
||
provisioning,
|
||
pageError: null,
|
||
statusError: null,
|
||
};
|
||
}
|
||
|
||
export function FeishuSettingsTab({ rpcCall }) {
|
||
const [model, setModel] = React.useState({
|
||
phase: "loading",
|
||
revision: 0,
|
||
bots: [],
|
||
totals: EMPTY_TOTALS,
|
||
provisioning: null,
|
||
pageError: null,
|
||
statusError: null,
|
||
});
|
||
const [pageBusy, setPageBusy] = React.useState(false);
|
||
const [provisionBusy, setProvisionBusy] = React.useState(false);
|
||
const [credentialOpen, setCredentialOpen] = React.useState(false);
|
||
const [credentialBusy, setCredentialBusy] = React.useState(false);
|
||
const [credentialError, setCredentialError] = React.useState(null);
|
||
const [busyByBot, setBusyByBot] = React.useState({});
|
||
const [errorsByBot, setErrorsByBot] = React.useState({});
|
||
const [removeTargetId, setRemoveTargetId] = React.useState(null);
|
||
const [announcement, setAnnouncement] = React.useState("");
|
||
const [now, setNow] = React.useState(() => Date.now());
|
||
const [focusBotId, setFocusBotId] = React.useState(null);
|
||
const cardRefs = React.useRef(new Map());
|
||
const removeButtonRefs = React.useRef(new Map());
|
||
const addButtonRef = React.useRef(null);
|
||
const mountedRef = React.useRef(true);
|
||
const workspaceFence = useWorkspaceSnapshotFence();
|
||
const scheduleAnimationFrame = useAnimationFrameScheduler();
|
||
|
||
React.useEffect(() => {
|
||
mountedRef.current = true;
|
||
return () => { mountedRef.current = false; };
|
||
}, []);
|
||
|
||
const announce = React.useCallback((message) => {
|
||
setAnnouncement("");
|
||
scheduleAnimationFrame(() => {
|
||
if (message) setAnnouncement(message);
|
||
}, "announcement");
|
||
}, [scheduleAnimationFrame]);
|
||
|
||
const invoke = React.useCallback(async (endpoint, payload = {}, signal) => {
|
||
return unwrapRpcResult(await rpcCall(endpoint, payload, signal));
|
||
}, [rpcCall]);
|
||
|
||
const mergeSnapshot = React.useCallback((snapshot, { restoreProvisioning = false } = {}) => {
|
||
const now = Date.now();
|
||
setModel((current) => mergeFeishuSnapshotState(
|
||
current,
|
||
snapshot,
|
||
{ restoreProvisioning, now },
|
||
));
|
||
}, []);
|
||
|
||
const loadStatus = React.useCallback(async ({ signal, silent = false, restoreProvisioning = false } = {}) => {
|
||
const workspaceVersion = workspaceFence.beginStatus();
|
||
if (workspaceVersion === null || !mountedRef.current) return undefined;
|
||
if (!silent) setPageBusy(true);
|
||
try {
|
||
const snapshot = normalizeBotsSnapshot(await invoke(FEISHU_ENDPOINTS.status, {}, signal));
|
||
if (signal?.aborted || !mountedRef.current
|
||
|| !workspaceFence.canCommitStatus(workspaceVersion)) return undefined;
|
||
mergeSnapshot(snapshot, { restoreProvisioning });
|
||
return snapshot;
|
||
} catch (error) {
|
||
if (signal?.aborted || error?.name === "AbortError" || !mountedRef.current
|
||
|| !workspaceFence.canCommitStatus(workspaceVersion)) return undefined;
|
||
const presented = presentError(error);
|
||
setModel((current) => current.phase === "loading" || !silent
|
||
? { ...current, phase: "error", pageError: presented }
|
||
: { ...current, statusError: presented });
|
||
return undefined;
|
||
} finally {
|
||
if (!silent && !signal?.aborted && mountedRef.current) setPageBusy(false);
|
||
}
|
||
}, [invoke, mergeSnapshot, workspaceFence]);
|
||
|
||
React.useEffect(() => {
|
||
const controller = new AbortController();
|
||
void loadStatus({ signal: controller.signal, restoreProvisioning: true });
|
||
return () => controller.abort();
|
||
}, [loadStatus]);
|
||
|
||
// One list request refreshes every bot. This continues while a new bot is
|
||
// being provisioned so existing connections never disappear from the UI.
|
||
React.useEffect(() => {
|
||
if (model.phase !== "ready") return undefined;
|
||
const controller = new AbortController();
|
||
let inFlight = false;
|
||
const timer = window.setInterval(async () => {
|
||
if (inFlight) return;
|
||
inFlight = true;
|
||
await loadStatus({
|
||
signal: controller.signal,
|
||
silent: true,
|
||
restoreProvisioning: false,
|
||
});
|
||
inFlight = false;
|
||
}, 15_000);
|
||
return () => {
|
||
controller.abort();
|
||
window.clearInterval(timer);
|
||
};
|
||
}, [loadStatus, model.phase]);
|
||
|
||
React.useEffect(() => {
|
||
if (!focusBotId) return;
|
||
const node = cardRefs.current.get(focusBotId);
|
||
if (!node) return;
|
||
node.scrollIntoView?.({ block: "nearest", behavior: "smooth" });
|
||
node.focus({ preventScroll: true });
|
||
setFocusBotId(null);
|
||
}, [focusBotId, model.bots]);
|
||
|
||
const startProvisioning = React.useCallback(async ({ replace = false } = {}) => {
|
||
setCredentialOpen(false);
|
||
setCredentialError(null);
|
||
setProvisionBusy(true);
|
||
announce("");
|
||
const previousAttemptId = model.provisioning?.attemptId;
|
||
setModel((current) => ({
|
||
...current,
|
||
phase: current.phase === "loading" ? "ready" : current.phase,
|
||
provisioning: { phase: "creating" },
|
||
}));
|
||
try {
|
||
if (replace && previousAttemptId) {
|
||
await invoke(FEISHU_ENDPOINTS.cancelProvisioning, { attemptId: previousAttemptId });
|
||
}
|
||
const provision = normalizeProvisioning(await invoke(
|
||
FEISHU_ENDPOINTS.beginProvisioning,
|
||
{ locale: "zh-CN" },
|
||
));
|
||
const timestamp = Date.now();
|
||
setNow(timestamp);
|
||
setModel((current) => ({
|
||
...current,
|
||
provisioning: {
|
||
phase: "qr",
|
||
...provision,
|
||
durationMs: Math.max(1, provision.expiresAt - timestamp),
|
||
expired: false,
|
||
},
|
||
}));
|
||
announce("授权二维码已生成，请使用飞书扫码。");
|
||
} catch (error) {
|
||
setModel((current) => ({
|
||
...current,
|
||
provisioning: { phase: "error", error: presentError(error) },
|
||
}));
|
||
} finally {
|
||
setProvisionBusy(false);
|
||
}
|
||
}, [announce, invoke, model.provisioning?.attemptId]);
|
||
|
||
const bindCredentials = React.useCallback(async ({ identity, secret }) => {
|
||
const snapshotVersion = workspaceFence.beginMutation();
|
||
setCredentialBusy(true);
|
||
setCredentialError(null);
|
||
try {
|
||
const snapshot = normalizeBotsSnapshot(await invoke(
|
||
FEISHU_ENDPOINTS.bindCredentials,
|
||
{ appId: identity, appSecret: secret },
|
||
));
|
||
if (mountedRef.current && workspaceFence.canCommitMutation(snapshotVersion)) {
|
||
mergeSnapshot(snapshot);
|
||
}
|
||
setCredentialOpen(false);
|
||
announce("飞书机器人凭据已绑定。");
|
||
} catch (error) {
|
||
setCredentialError(presentError(error));
|
||
} finally {
|
||
const shouldRefresh = workspaceFence.endMutation();
|
||
if (shouldRefresh && mountedRef.current) void loadStatus({ silent: true });
|
||
setCredentialBusy(false);
|
||
}
|
||
}, [announce, invoke, loadStatus, mergeSnapshot, workspaceFence]);
|
||
|
||
const cancelProvisioning = React.useCallback(async () => {
|
||
const attemptId = model.provisioning?.attemptId;
|
||
setProvisionBusy(true);
|
||
try {
|
||
if (attemptId) await invoke(FEISHU_ENDPOINTS.cancelProvisioning, { attemptId });
|
||
setModel((current) => ({ ...current, provisioning: null }));
|
||
announce("已取消添加机器人。");
|
||
await loadStatus({ silent: true, restoreProvisioning: false });
|
||
scheduleAnimationFrame(() => addButtonRef.current?.focus(), "focus");
|
||
} catch (error) {
|
||
setModel((current) => ({
|
||
...current,
|
||
provisioning: { phase: "error", attemptId, error: presentError(error) },
|
||
}));
|
||
} finally {
|
||
setProvisionBusy(false);
|
||
}
|
||
}, [announce, invoke, loadStatus, model.provisioning?.attemptId, scheduleAnimationFrame]);
|
||
|
||
const countdownAttemptId = model.provisioning?.attemptId;
|
||
const countdownPhase = model.provisioning?.phase;
|
||
const countdownExpiresAt = model.provisioning?.expiresAt;
|
||
const countdownExpired = model.provisioning?.expired;
|
||
React.useEffect(() => {
|
||
if (!countdownAttemptId || countdownPhase !== "qr" || countdownExpired) return undefined;
|
||
const tick = () => {
|
||
const timestamp = Date.now();
|
||
setNow(timestamp);
|
||
if (timestamp >= countdownExpiresAt) {
|
||
setModel((current) => current.provisioning?.attemptId === countdownAttemptId
|
||
? { ...current, provisioning: { ...current.provisioning, expired: true } }
|
||
: current);
|
||
}
|
||
};
|
||
tick();
|
||
const timer = window.setInterval(tick, 1_000);
|
||
return () => window.clearInterval(timer);
|
||
}, [countdownAttemptId, countdownPhase, countdownExpiresAt, countdownExpired]);
|
||
|
||
React.useEffect(() => {
|
||
const provision = model.provisioning;
|
||
if (!provision
|
||
|| !["qr", "connecting"].includes(provision.phase)
|
||
|| !provision.attemptId
|
||
|| provision.expired) return undefined;
|
||
|
||
const controller = new AbortController();
|
||
const timer = window.setTimeout(async () => {
|
||
try {
|
||
const result = normalizePollResult(await invoke(
|
||
FEISHU_ENDPOINTS.pollProvisioning,
|
||
{ attemptId: provision.attemptId },
|
||
controller.signal,
|
||
));
|
||
if (result.status === "connected") {
|
||
const snapshot = await loadStatus({ signal: controller.signal, silent: true, restoreProvisioning: false });
|
||
const newBot = snapshot?.bots.find((bot) => bot.botId === result.botId);
|
||
if (!snapshot) {
|
||
throw new Error("机器人已经创建，但暂时无法确认连接状态");
|
||
}
|
||
if (!newBot?.connected) {
|
||
setModel((current) => current.provisioning?.attemptId === provision.attemptId
|
||
? { ...current, provisioning: { ...current.provisioning, phase: "connecting" } }
|
||
: current);
|
||
return;
|
||
}
|
||
setModel((current) => ({ ...current, provisioning: null }));
|
||
announce(newBot
|
||
? `${newBot.bot.name}已连接，可以在飞书中开始聊天。`
|
||
: "新飞书机器人已连接，可以开始聊天。");
|
||
if (result.botId) setFocusBotId(result.botId);
|
||
return;
|
||
}
|
||
if (result.status === "failed") {
|
||
const error = new Error(result.message ?? "飞书应用创建失败");
|
||
error.code = "FEISHU_PROVISION_FAILED";
|
||
throw error;
|
||
}
|
||
if (result.status === "expired") {
|
||
setModel((current) => current.provisioning?.attemptId === provision.attemptId
|
||
? { ...current, provisioning: { ...current.provisioning, phase: "qr", expired: true } }
|
||
: current);
|
||
return;
|
||
}
|
||
setModel((current) => {
|
||
if (current.provisioning?.attemptId !== provision.attemptId) return current;
|
||
const next = result.provisioning ?? current.provisioning;
|
||
return {
|
||
...current,
|
||
provisioning: {
|
||
...current.provisioning,
|
||
...next,
|
||
phase: ["scanned", "connecting"].includes(result.status) ? "connecting" : "qr",
|
||
},
|
||
};
|
||
});
|
||
} catch (error) {
|
||
if (error?.name === "AbortError") return;
|
||
setModel((current) => current.provisioning?.attemptId === provision.attemptId
|
||
? {
|
||
...current,
|
||
provisioning: {
|
||
phase: "error",
|
||
attemptId: provision.attemptId,
|
||
error: presentError(error),
|
||
},
|
||
}
|
||
: current);
|
||
}
|
||
}, provision.pollIntervalMs);
|
||
return () => {
|
||
controller.abort();
|
||
window.clearTimeout(timer);
|
||
};
|
||
}, [announce, invoke, loadStatus, model.provisioning]);
|
||
|
||
const setBotBusy = React.useCallback((botId, value) => {
|
||
setBusyByBot((current) => {
|
||
const next = { ...current };
|
||
if (value) next[botId] = value;
|
||
else delete next[botId];
|
||
return next;
|
||
});
|
||
}, []);
|
||
|
||
const setBotError = React.useCallback((botId, error) => {
|
||
setErrorsByBot((current) => {
|
||
const next = { ...current };
|
||
if (error) next[botId] = presentError(error);
|
||
else delete next[botId];
|
||
return next;
|
||
});
|
||
}, []);
|
||
|
||
const reconnectOneBot = React.useCallback(async (connection) => {
|
||
const { botId, bot } = connection;
|
||
const snapshotVersion = workspaceFence.beginMutation();
|
||
setBotBusy(botId, "reconnect");
|
||
setBotError(botId, null);
|
||
try {
|
||
const snapshot = normalizeBotsSnapshot(await invoke(FEISHU_ENDPOINTS.reconnectBot, { botId }));
|
||
if (mountedRef.current && workspaceFence.canCommitMutation(snapshotVersion)) {
|
||
mergeSnapshot(snapshot);
|
||
}
|
||
const refreshed = snapshot.bots.find((item) => item.botId === botId);
|
||
if (!refreshed?.connected) {
|
||
const error = new Error(
|
||
refreshed?.error?.message ?? refreshed?.health.summary ?? "机器人仍未连接",
|
||
);
|
||
error.code = refreshed?.error?.code ?? "FEISHU_BOT_OFFLINE";
|
||
throw error;
|
||
}
|
||
announce(connection.connected
|
||
? `${bot.name}连接检查完成。`
|
||
: `${bot.name}已重新连接。`);
|
||
} catch (error) {
|
||
setBotError(botId, error);
|
||
announce(`${bot.name}操作失败，请查看机器人状态。`);
|
||
} finally {
|
||
const shouldRefresh = workspaceFence.endMutation();
|
||
if (shouldRefresh && mountedRef.current) void loadStatus({ silent: true });
|
||
setBotBusy(botId, null);
|
||
}
|
||
}, [announce, invoke, loadStatus, mergeSnapshot, setBotBusy, setBotError, workspaceFence]);
|
||
|
||
const saveWorkspace = React.useCallback(async (connection, workspace) => {
|
||
const { botId } = connection;
|
||
const workspaceVersion = workspaceFence.beginMutation();
|
||
setBotBusy(botId, "workspace");
|
||
setBotError(botId, null);
|
||
try {
|
||
const snapshot = normalizeBotsSnapshot(await invoke(
|
||
FEISHU_ENDPOINTS.setWorkspace,
|
||
{ botId, workspace },
|
||
));
|
||
if (mountedRef.current && workspaceFence.canCommitMutation(workspaceVersion)) {
|
||
mergeSnapshot(snapshot);
|
||
}
|
||
} finally {
|
||
const shouldRefresh = workspaceFence.endMutation();
|
||
if (shouldRefresh && mountedRef.current) void loadStatus({ silent: true });
|
||
if (mountedRef.current) setBotBusy(botId, null);
|
||
}
|
||
}, [invoke, loadStatus, mergeSnapshot, setBotBusy, setBotError, workspaceFence]);
|
||
|
||
const requestRemove = React.useCallback((connection) => {
|
||
setRemoveTargetId(connection.botId);
|
||
}, []);
|
||
|
||
const cancelRemove = React.useCallback(() => {
|
||
const botId = removeTargetId;
|
||
setRemoveTargetId(null);
|
||
scheduleAnimationFrame(() => removeButtonRefs.current.get(botId)?.focus(), "focus");
|
||
}, [removeTargetId, scheduleAnimationFrame]);
|
||
|
||
const confirmRemove = React.useCallback(async (connection) => {
|
||
const { botId, bot } = connection;
|
||
const snapshotVersion = workspaceFence.beginMutation();
|
||
setBotBusy(botId, "delete");
|
||
setBotError(botId, null);
|
||
try {
|
||
const snapshot = normalizeBotsSnapshot(await invoke(
|
||
FEISHU_ENDPOINTS.deleteBot,
|
||
{ botId, confirm: true },
|
||
));
|
||
setRemoveTargetId(null);
|
||
if (mountedRef.current && workspaceFence.canCommitMutation(snapshotVersion)) {
|
||
mergeSnapshot(snapshot);
|
||
}
|
||
announce(`${bot.name}已从此 DeepSeek Harness 移除；飞书开放平台中的应用未被删除。`);
|
||
scheduleAnimationFrame(() => addButtonRef.current?.focus(), "focus");
|
||
} catch (error) {
|
||
setBotError(botId, error);
|
||
announce(`${bot.name}移除失败，请重试。`);
|
||
} finally {
|
||
const shouldRefresh = workspaceFence.endMutation();
|
||
if (shouldRefresh && mountedRef.current) void loadStatus({ silent: true });
|
||
setBotBusy(botId, null);
|
||
}
|
||
}, [announce, invoke, loadStatus, mergeSnapshot, scheduleAnimationFrame, setBotBusy, setBotError, workspaceFence]);
|
||
|
||
const provision = model.provisioning;
|
||
let provisionContent = null;
|
||
if (provision?.phase === "creating") {
|
||
provisionContent = h(ProvisionProgress, { phase: "creating", busy: provisionBusy });
|
||
} else if (provision?.phase === "qr") {
|
||
provisionContent = h(QrPane, {
|
||
provision, now,
|
||
onRefresh: () => void startProvisioning({ replace: true }),
|
||
onCancel: () => void cancelProvisioning(),
|
||
busy: provisionBusy || model.phase !== "ready",
|
||
});
|
||
} else if (provision?.phase === "connecting") {
|
||
provisionContent = h(ProvisionProgress, {
|
||
phase: "connecting",
|
||
onCancel: () => void cancelProvisioning(),
|
||
busy: provisionBusy,
|
||
});
|
||
} else if (provision?.phase === "error") {
|
||
provisionContent = h(ProvisionError, {
|
||
error: provision.error,
|
||
onRetry: () => void startProvisioning({ replace: Boolean(provision.attemptId) }),
|
||
onCancel: () => void cancelProvisioning(),
|
||
busy: provisionBusy,
|
||
});
|
||
}
|
||
|
||
const credentialContent = credentialOpen
|
||
? h(CredentialBindingPanel, {
|
||
channel: "飞书",
|
||
identityLabel: "App ID",
|
||
identityPlaceholder: "填写飞书开放平台 App ID",
|
||
secretLabel: "App Secret",
|
||
secretPlaceholder: "填写飞书开放平台 App Secret",
|
||
busy: credentialBusy,
|
||
error: credentialError,
|
||
onSubmit: bindCredentials,
|
||
onCancel: () => { setCredentialOpen(false); setCredentialError(null); },
|
||
})
|
||
: null;
|
||
|
||
const setCardRef = React.useCallback((botId, node) => {
|
||
if (node) cardRefs.current.set(botId, node);
|
||
else cardRefs.current.delete(botId);
|
||
}, []);
|
||
const setRemoveButtonRef = React.useCallback((botId, node) => {
|
||
if (node) removeButtonRefs.current.set(botId, node);
|
||
else removeButtonRefs.current.delete(botId);
|
||
}, []);
|
||
|
||
return h("section", { className: "bxf-page dim-channelPage", "aria-label": "飞书机器人设置" },
|
||
h(Heading, {
|
||
totals: model.totals,
|
||
onAdd: () => void startProvisioning(),
|
||
onCredential: () => { setCredentialOpen((value) => !value); setCredentialError(null); },
|
||
credentialOpen,
|
||
adding: Boolean(provision),
|
||
busy: provisionBusy || credentialBusy,
|
||
addButtonRef,
|
||
}),
|
||
h("div", {
|
||
className: "bxf-visuallyHidden", role: "status", "aria-live": "polite", "aria-atomic": "true",
|
||
}, announcement),
|
||
model.statusError
|
||
? h("div", { className: "bxf-statusNotice dim-statusNotice", role: "status" },
|
||
h(AlertIcon, { size: 16 }),
|
||
h("span", null, `状态自动刷新失败：${model.statusError.message}`),
|
||
h(Button, { size: "small", onClick: () => void loadStatus({ silent: true }), disabled: pageBusy }, "立即重试"))
|
||
: null,
|
||
model.phase === "loading"
|
||
? h(LoadingView)
|
||
: model.phase === "error"
|
||
? h(PageError, {
|
||
error: model.pageError ?? { message: "无法读取连接状态" },
|
||
onRetry: () => void loadStatus(),
|
||
busy: pageBusy,
|
||
})
|
||
: h(React.Fragment, null,
|
||
credentialContent,
|
||
provisionContent,
|
||
model.bots.length === 0 && !provision && !credentialOpen
|
||
? h(EmptyView, { onStart: () => void startProvisioning(), busy: provisionBusy })
|
||
: null,
|
||
model.bots.length > 0
|
||
? h(BotList, {
|
||
bots: model.bots,
|
||
busyByBot,
|
||
errorsByBot,
|
||
removeTargetId,
|
||
onReconnect: (bot) => void reconnectOneBot(bot),
|
||
onWorkspaceSave: saveWorkspace,
|
||
onRequestRemove: requestRemove,
|
||
onConfirmRemove: (bot) => void confirmRemove(bot),
|
||
onCancelRemove: cancelRemove,
|
||
setCardRef,
|
||
setRemoveButtonRef,
|
||
})
|
||
: null,
|
||
),
|
||
);
|
||
}
|
||
|
||
export function apply(ctx) {
|
||
ctx.effect(
|
||
() => installFeishuStyles(),
|
||
"feishu-settings: install client styles",
|
||
);
|
||
|
||
const rpcCall = (endpoint, payload, signal) =>
|
||
ctx.connection.rpc.call(FEISHU_RPC_CHANNEL, endpoint, payload, signal);
|
||
|
||
ctx.slots.inject("settings.plugins.tab", () =>
|
||
ctx.slots.register(
|
||
{
|
||
name: "settings.plugins.tab",
|
||
id: "feishu",
|
||
order: 20,
|
||
label: "飞书",
|
||
inject: () => ({ rpcCall }),
|
||
},
|
||
FeishuSettingsTab,
|
||
),
|
||
);
|
||
}
|