mirror of
https://github.com/hansjone/dsh-im-ops.git
synced 2026-10-10 05:20:45 +08:00
feat: add tabs to bot settings
This commit is contained in:
xmanrui
parent
08368c135c
commit
009f1abec9
7 changed files with 219 additions and 121 deletions
246
lib/client.js
246
lib/client.js
|
|
@ -841,6 +841,9 @@ var EN = Object.freeze({
|
|||
"IM\u673A\u5668\u4EBA": "IM bots",
|
||||
"IM\u673A\u5668\u4EBA\u8BBE\u7F6E": "IM bot settings",
|
||||
"\u66F4\u591A\u673A\u5668\u4EBA\u8BBE\u7F6E": "More bot settings",
|
||||
"\u673A\u5668\u4EBA\u8BBE\u7F6E": "Bot settings",
|
||||
"\u673A\u5668\u4EBA\u8BBE\u7F6E\u9875\u7B7E": "Bot settings tabs",
|
||||
"\u6295\u9012\u8BBE\u7F6E": "Delivery settings",
|
||||
"IM \u6E20\u9053": "IM channels",
|
||||
"\u8BA9 DeepSeek Harness \u89E6\u624B\u53EF\u53CA": "Connecting DeepSeek Harness",
|
||||
"\u5F53\u524D\u7248\u672C": "Current version",
|
||||
|
|
@ -11870,6 +11873,9 @@ var DELIVERY_ENDPOINTS = Object.freeze({
|
|||
delete: "target.delete",
|
||||
test: "target.test"
|
||||
});
|
||||
var BOT_SETTINGS_TABS = Object.freeze([
|
||||
Object.freeze({ id: "delivery", label: "\u6295\u9012\u8BBE\u7F6E" })
|
||||
]);
|
||||
var CHANNEL_DEFINITIONS = Object.freeze({
|
||||
weixin: {
|
||||
label: "\u5FAE\u4FE1",
|
||||
|
|
@ -12520,6 +12526,9 @@ function DeliveryTargetSettingsPage({ channel: channel4, account, rpcCall, onBac
|
|||
setBotCopyState(presentError10(caught, "\u590D\u5236\u5931\u8D25\u3002"));
|
||||
}
|
||||
};
|
||||
const deliveryTab = BOT_SETTINGS_TABS[0];
|
||||
const deliveryTabId = `dim-bot-settings-${deliveryTab.id}-tab`;
|
||||
const deliveryPanelId = `dim-bot-settings-${deliveryTab.id}-panel`;
|
||||
return h2(
|
||||
"section",
|
||||
{
|
||||
|
|
@ -12529,114 +12538,137 @@ function DeliveryTargetSettingsPage({ channel: channel4, account, rpcCall, onBac
|
|||
h2(
|
||||
"header",
|
||||
{ className: "dim-deliveryHeader" },
|
||||
h2(DeliveryButton, { className: "dim-deliveryBack", onClick: onBack }, "\u2190 \u8FD4\u56DE\u673A\u5668\u4EBA\u5217\u8868"),
|
||||
h2(
|
||||
"div",
|
||||
{ className: "dim-deliveryHeaderMeta" },
|
||||
h2(
|
||||
"a",
|
||||
{
|
||||
className: "dim-deliveryDocsLink",
|
||||
href: isEnglish() ? DELIVERY_DOCS_URL.en : DELIVERY_DOCS_URL.zh,
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer",
|
||||
"aria-label": "\u6253\u5F00\u4E3B\u52A8\u6295\u9012\u4F7F\u7528\u6587\u6863"
|
||||
},
|
||||
h2("span", null, "\u4F7F\u7528\u6587\u6863"),
|
||||
h2("span", { "aria-hidden": "true" }, "\u2197")
|
||||
)
|
||||
)
|
||||
h2(DeliveryButton, { className: "dim-deliveryBack", onClick: onBack }, "\u2190 \u8FD4\u56DE\u673A\u5668\u4EBA\u5217\u8868")
|
||||
),
|
||||
h2(
|
||||
"section",
|
||||
{ className: "dim-deliveryIdentity", "aria-labelledby": "dim-delivery-bot-title" },
|
||||
h2(
|
||||
"div",
|
||||
null,
|
||||
h2(
|
||||
"h2",
|
||||
{ id: "dim-delivery-bot-title", className: "dim-deliveryBotName" },
|
||||
account.botName || "\u673A\u5668\u4EBA\u8BBE\u7F6E"
|
||||
)
|
||||
),
|
||||
h2(
|
||||
"div",
|
||||
{ className: "dim-deliveryBotId" },
|
||||
h2("span", null, "Bot ID"),
|
||||
h2("code", { title: account.botId }, account.botId),
|
||||
h2(DeliveryButton, { onClick: () => void copyBotId() }, "\u590D\u5236")
|
||||
),
|
||||
botCopyState ? h2("p", { className: "dim-targetFeedback", role: "status" }, botCopyState) : null
|
||||
"div",
|
||||
{ className: "dim-botSettingsTabsBar" },
|
||||
h2("nav", {
|
||||
className: "dim-botSettingsTabs",
|
||||
role: "tablist",
|
||||
"aria-label": "\u673A\u5668\u4EBA\u8BBE\u7F6E\u9875\u7B7E"
|
||||
}, BOT_SETTINGS_TABS.map((tab) => h2("button", {
|
||||
key: tab.id,
|
||||
id: `dim-bot-settings-${tab.id}-tab`,
|
||||
type: "button",
|
||||
role: "tab",
|
||||
className: "dim-botSettingsTab",
|
||||
"aria-selected": tab.id === deliveryTab.id,
|
||||
"aria-controls": `dim-bot-settings-${tab.id}-panel`,
|
||||
tabIndex: tab.id === deliveryTab.id ? 0 : -1
|
||||
}, tab.label)))
|
||||
),
|
||||
h2(
|
||||
"section",
|
||||
{ className: "dim-deliveryTargets", "aria-labelledby": "dim-delivery-targets-title" },
|
||||
"div",
|
||||
{
|
||||
id: deliveryPanelId,
|
||||
className: "dim-botSettingsTabPanel",
|
||||
role: "tabpanel",
|
||||
"aria-labelledby": deliveryTabId
|
||||
},
|
||||
h2(
|
||||
"div",
|
||||
{ className: "dim-deliverySectionHeading" },
|
||||
"section",
|
||||
{ className: "dim-deliveryIdentity", "aria-labelledby": "dim-delivery-bot-title" },
|
||||
h2(
|
||||
"div",
|
||||
null,
|
||||
h2("h3", { id: "dim-delivery-targets-title" }, "\u6295\u9012\u76EE\u6807"),
|
||||
account.connected ? null : h2("p", null, "\u673A\u5668\u4EBA\u5F53\u524D\u79BB\u7EBF\uFF1B\u4ECD\u53EF\u914D\u7F6E\u76EE\u6807\uFF0C\u6062\u590D\u8FDE\u63A5\u540E\u518D\u6D4B\u8BD5\u3002")
|
||||
{ className: "dim-deliveryIdentityHeading" },
|
||||
h2(
|
||||
"h2",
|
||||
{ id: "dim-delivery-bot-title", className: "dim-deliveryBotName" },
|
||||
account.botName || "\u673A\u5668\u4EBA\u8BBE\u7F6E"
|
||||
),
|
||||
h2(
|
||||
"a",
|
||||
{
|
||||
className: "dim-deliveryDocsLink",
|
||||
href: isEnglish() ? DELIVERY_DOCS_URL.en : DELIVERY_DOCS_URL.zh,
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer",
|
||||
"aria-label": "\u6253\u5F00\u4E3B\u52A8\u6295\u9012\u4F7F\u7528\u6587\u6863"
|
||||
},
|
||||
h2("span", null, "\u4F7F\u7528\u6587\u6863"),
|
||||
h2("span", { "aria-hidden": "true" }, "\u2197")
|
||||
)
|
||||
),
|
||||
h2(DeliveryButton, {
|
||||
kind: "primary",
|
||||
onClick: openSuggestionPicker,
|
||||
disabled: Boolean(editor) || phase !== "ready",
|
||||
title: phase === "ready" ? void 0 : "\u8BF7\u5148\u5B8C\u6210\u6295\u9012\u76EE\u6807\u8BFB\u53D6"
|
||||
}, "\u65B0\u5EFA\u76EE\u6807")
|
||||
h2(
|
||||
"div",
|
||||
{ className: "dim-deliveryBotId" },
|
||||
h2("span", null, "Bot ID"),
|
||||
h2("code", { title: account.botId }, account.botId),
|
||||
h2(DeliveryButton, { onClick: () => void copyBotId() }, "\u590D\u5236")
|
||||
),
|
||||
botCopyState ? h2("p", { className: "dim-targetFeedback", role: "status" }, botCopyState) : null
|
||||
),
|
||||
editor?.mode === "suggestions" ? h2(TargetSuggestionPicker, {
|
||||
definition,
|
||||
phase: suggestionPhase,
|
||||
suggestions,
|
||||
error: suggestionError,
|
||||
targets,
|
||||
onRefresh: loadSuggestions,
|
||||
onSelect: selectSuggestion,
|
||||
onManual: () => setEditor({
|
||||
mode: "create",
|
||||
source: "manual",
|
||||
draftKey: "manual",
|
||||
initialValue: { targetId: randomTargetId(targets) }
|
||||
}),
|
||||
onCancel: () => setEditor(null)
|
||||
}) : editor ? h2(TargetForm, {
|
||||
key: editor.mode === "edit" ? editor.target.targetId : editor.draftKey,
|
||||
definition,
|
||||
mode: editor.mode,
|
||||
initialValue: editor.mode === "edit" ? editor.target : editor.initialValue,
|
||||
source: editor.source,
|
||||
busy: saving,
|
||||
connected: account.connected,
|
||||
onCancel: () => setEditor(editor.source === "suggestion" ? { mode: "suggestions" } : null),
|
||||
onSave: saveTarget,
|
||||
onTest: (target) => invoke(DELIVERY_ENDPOINTS.test, {
|
||||
h2(
|
||||
"section",
|
||||
{ className: "dim-deliveryTargets", "aria-labelledby": "dim-delivery-targets-title" },
|
||||
h2(
|
||||
"div",
|
||||
{ className: "dim-deliverySectionHeading" },
|
||||
h2(
|
||||
"div",
|
||||
null,
|
||||
h2("h3", { id: "dim-delivery-targets-title" }, "\u6295\u9012\u76EE\u6807"),
|
||||
account.connected ? null : h2("p", null, "\u673A\u5668\u4EBA\u5F53\u524D\u79BB\u7EBF\uFF1B\u4ECD\u53EF\u914D\u7F6E\u76EE\u6807\uFF0C\u6062\u590D\u8FDE\u63A5\u540E\u518D\u6D4B\u8BD5\u3002")
|
||||
),
|
||||
h2(DeliveryButton, {
|
||||
kind: "primary",
|
||||
onClick: openSuggestionPicker,
|
||||
disabled: Boolean(editor) || phase !== "ready",
|
||||
title: phase === "ready" ? void 0 : "\u8BF7\u5148\u5B8C\u6210\u6295\u9012\u76EE\u6807\u8BFB\u53D6"
|
||||
}, "\u65B0\u5EFA\u76EE\u6807")
|
||||
),
|
||||
editor?.mode === "suggestions" ? h2(TargetSuggestionPicker, {
|
||||
definition,
|
||||
phase: suggestionPhase,
|
||||
suggestions,
|
||||
error: suggestionError,
|
||||
targets,
|
||||
onRefresh: loadSuggestions,
|
||||
onSelect: selectSuggestion,
|
||||
onManual: () => setEditor({
|
||||
mode: "create",
|
||||
source: "manual",
|
||||
draftKey: "manual",
|
||||
initialValue: { targetId: randomTargetId(targets) }
|
||||
}),
|
||||
onCancel: () => setEditor(null)
|
||||
}) : editor ? h2(TargetForm, {
|
||||
key: editor.mode === "edit" ? editor.target.targetId : editor.draftKey,
|
||||
definition,
|
||||
mode: editor.mode,
|
||||
initialValue: editor.mode === "edit" ? editor.target : editor.initialValue,
|
||||
source: editor.source,
|
||||
busy: saving,
|
||||
connected: account.connected,
|
||||
onCancel: () => setEditor(editor.source === "suggestion" ? { mode: "suggestions" } : null),
|
||||
onSave: saveTarget,
|
||||
onTest: (target) => invoke(DELIVERY_ENDPOINTS.test, {
|
||||
botId: account.botId,
|
||||
target
|
||||
})
|
||||
}) : null,
|
||||
phase === "loading" ? h2("div", { className: "dim-deliveryState", "aria-busy": "true" }, "\u6B63\u5728\u8BFB\u53D6\u6295\u9012\u76EE\u6807\u2026") : phase === "error" ? h2(
|
||||
"div",
|
||||
{ className: "dim-deliveryState", role: "alert" },
|
||||
h2("p", null, error),
|
||||
h2(DeliveryButton, { onClick: () => void loadTargets() }, "\u91CD\u65B0\u8BFB\u53D6")
|
||||
) : targets.length === 0 ? h2(
|
||||
"div",
|
||||
{ className: "dim-deliveryState dim-deliveryEmpty" },
|
||||
h2("strong", null, "\u5C1A\u672A\u914D\u7F6E\u6295\u9012\u76EE\u6807"),
|
||||
h2("p", null, "\u70B9\u51FB\u201C\u65B0\u5EFA\u76EE\u6807\u201D\u53EF\u4ECE\u5DF2\u804A\u8FC7\u7684\u4F1A\u8BDD\u9009\u62E9\uFF0C\u4E5F\u53EF\u624B\u52A8\u586B\u5199\u3002")
|
||||
) : h2("ul", { className: "dim-targetList" }, targets.map((target) => h2(TargetRow, {
|
||||
key: target.targetId,
|
||||
definition,
|
||||
target,
|
||||
botId: account.botId,
|
||||
target
|
||||
})
|
||||
}) : null,
|
||||
phase === "loading" ? h2("div", { className: "dim-deliveryState", "aria-busy": "true" }, "\u6B63\u5728\u8BFB\u53D6\u6295\u9012\u76EE\u6807\u2026") : phase === "error" ? h2(
|
||||
"div",
|
||||
{ className: "dim-deliveryState", role: "alert" },
|
||||
h2("p", null, error),
|
||||
h2(DeliveryButton, { onClick: () => void loadTargets() }, "\u91CD\u65B0\u8BFB\u53D6")
|
||||
) : targets.length === 0 ? h2(
|
||||
"div",
|
||||
{ className: "dim-deliveryState dim-deliveryEmpty" },
|
||||
h2("strong", null, "\u5C1A\u672A\u914D\u7F6E\u6295\u9012\u76EE\u6807"),
|
||||
h2("p", null, "\u70B9\u51FB\u201C\u65B0\u5EFA\u76EE\u6807\u201D\u53EF\u4ECE\u5DF2\u804A\u8FC7\u7684\u4F1A\u8BDD\u9009\u62E9\uFF0C\u4E5F\u53EF\u624B\u52A8\u586B\u5199\u3002")
|
||||
) : h2("ul", { className: "dim-targetList" }, targets.map((target) => h2(TargetRow, {
|
||||
key: target.targetId,
|
||||
definition,
|
||||
target,
|
||||
botId: account.botId,
|
||||
connected: account.connected,
|
||||
rpcCall: invoke,
|
||||
onChanged: () => loadTargets({ silent: true }),
|
||||
onEdit: () => setEditor({ mode: "edit", target, source: "edit" })
|
||||
})))
|
||||
connected: account.connected,
|
||||
rpcCall: invoke,
|
||||
onChanged: () => loadTargets({ silent: true }),
|
||||
onEdit: () => setEditor({ mode: "edit", target, source: "edit" })
|
||||
})))
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -13067,9 +13099,18 @@ var CSS11 = String.raw`
|
|||
.dim-botSettingsButton:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary, #3370ff); outline-offset: 2px; }
|
||||
.dim-botSettingsTooltip { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: max-content; padding: 6px 9px; border: 1px solid var(--dsw-alias-border-l2, #dfe1e5); border-radius: 7px; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-bg-layer-3, #fff); box-shadow: 0 8px 24px rgb(31 35 41 / 14%); font-size: 11px; line-height: 16px; opacity: 0; visibility: hidden; transform: translateY(-3px); pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s ease; }
|
||||
.dim-botSettingsAction:hover .dim-botSettingsTooltip, .dim-botSettingsAction:focus-within .dim-botSettingsTooltip { opacity: 1; visibility: visible; transform: translateY(0); }
|
||||
.dim-deliveryPage { min-width: 0; display: grid; gap: 14px; }
|
||||
.dim-deliveryPage { min-width: 0; display: grid; }
|
||||
.dim-deliveryHeader { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
||||
.dim-deliveryHeaderMeta { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-align: right; }
|
||||
.dim-botSettingsTabsBar { min-width: 0; margin-top: 10px; border-bottom: 1px solid var(--dsw-alias-border-l2, #dfe1e5); }
|
||||
.dim-botSettingsTabs { min-width: 0; display: flex; align-items: flex-end; gap: 24px; overflow-x: auto; scrollbar-width: none; }
|
||||
.dim-botSettingsTabs::-webkit-scrollbar { display: none; }
|
||||
.dim-botSettingsTab { position: relative; min-height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 6px 2px 9px; border: 0; color: var(--dsw-alias-label-secondary, #646a73); background: transparent; font: inherit; font-size: 13px; line-height: 20px; font-weight: 560; white-space: nowrap; cursor: pointer; transition: color .15s ease; }
|
||||
.dim-botSettingsTab::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transform: scaleX(.45); transition: background .15s ease, transform .15s ease; }
|
||||
.dim-botSettingsTab:hover:not([aria-selected="true"]) { color: var(--dsw-alias-label-primary, #1f2329); }
|
||||
.dim-botSettingsTab[aria-selected="true"] { color: var(--dsw-alias-state-business-primary, #3370ff); font-weight: 650; }
|
||||
.dim-botSettingsTab[aria-selected="true"]::after { background: var(--dsw-alias-state-business-primary, #3370ff); transform: scaleX(1); }
|
||||
.dim-botSettingsTab:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary, #3370ff); outline-offset: -2px; border-radius: 5px; }
|
||||
.dim-botSettingsTabPanel { min-width: 0; display: grid; gap: 14px; padding-top: 14px; }
|
||||
.dim-deliveryDocsLink { min-height: 30px; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 7px; color: var(--dsw-alias-state-business-primary, #3370ff); font-size: 12px; line-height: 18px; text-decoration: none; white-space: nowrap; }
|
||||
.dim-deliveryDocsLink:hover { background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #3370ff) 8%, transparent); }
|
||||
.dim-deliveryDocsLink:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary, #3370ff); outline-offset: 2px; }
|
||||
|
|
@ -13081,6 +13122,7 @@ var CSS11 = String.raw`
|
|||
.dim-deliveryButton[data-kind="danger"] { color: var(--dsw-alias-state-error-primary, #d54941); }
|
||||
.dim-deliveryBack { flex: none; border-color: transparent; background: transparent; }
|
||||
.dim-deliveryIdentity, .dim-deliveryTargets { min-width: 0; padding: 16px; border: 1px solid var(--dsw-alias-border-l2, #dfe1e5); border-radius: 12px; background: var(--dsw-alias-bg-layer-3, #fff); }
|
||||
.dim-deliveryIdentityHeading { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
||||
.dim-deliveryBotName, .dim-deliverySectionHeading h3 { min-width: 0; overflow: hidden; margin: 0; font-size: 15px; line-height: 22px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dim-deliveryIdentity > div:first-child p, .dim-deliverySectionHeading p { margin: 2px 0 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: 18px; }
|
||||
.dim-deliveryBotId { min-width: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: var(--dsw-alias-bg-module-platform, #f7f8fa); }
|
||||
|
|
@ -13169,8 +13211,8 @@ var CSS11 = String.raw`
|
|||
.dim-rail { grid-template-columns: minmax(0, 1fr); }
|
||||
.dim-loopbackRecovery { align-items: stretch; flex-direction: column; gap: 12px; }
|
||||
.dim-loopbackRecoveryAction { width: 100%; }
|
||||
.dim-deliveryHeader, .dim-deliverySectionHeading { align-items: stretch; flex-direction: column; }
|
||||
.dim-deliveryHeaderMeta { justify-content: space-between; text-align: left; }
|
||||
.dim-deliverySectionHeading { align-items: stretch; flex-direction: column; }
|
||||
.dim-botSettingsTabs { gap: 18px; }
|
||||
.dim-deliveryBotId { grid-template-columns: minmax(0, 1fr) max-content; }
|
||||
.dim-deliveryBotId > span { grid-column: 1 / -1; }
|
||||
.dim-targetActions .dim-deliveryButton { flex: 1 1 auto; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue