mirror of
https://github.com/hansjone/dsh-im-ops.git
synced 2026-10-09 05:20:46 +08:00
fix(ui): unify channel card feedback layout
This commit is contained in:
xmanrui
parent
9a5a7941af
commit
eadfc7372f
12 changed files with 315 additions and 209 deletions
254
lib/client.js
254
lib/client.js
|
|
@ -2142,24 +2142,28 @@ function AccountCard({
|
|||
h2(
|
||||
"div",
|
||||
{ className: "ddt-accountFooter dim-cardFooter" },
|
||||
summary ? h2("div", { className: "ddt-summary dim-cardSummary" }, summary) : null,
|
||||
feedback ? h2("div", {
|
||||
className: "ddt-summary dim-cardSummary",
|
||||
role: "status"
|
||||
}, feedback) : null,
|
||||
h2(
|
||||
"div",
|
||||
{ className: "ddt-actions dim-cardActions" },
|
||||
{ className: "dim-cardFooterLayout" },
|
||||
h2(
|
||||
Button,
|
||||
{ className: "dim-cardAction", onClick: onReconnect, disabled: Boolean(busy) },
|
||||
busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"
|
||||
"div",
|
||||
{ className: "ddt-actions dim-cardActions" },
|
||||
h2(
|
||||
Button,
|
||||
{ className: "dim-cardAction", onClick: onReconnect, disabled: Boolean(busy) },
|
||||
busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"
|
||||
),
|
||||
h2(
|
||||
Button,
|
||||
{ className: "dim-cardAction", kind: "danger", onClick: onRequestRemove, disabled: Boolean(busy) },
|
||||
"\u79FB\u9664\u63A5\u5165"
|
||||
)
|
||||
),
|
||||
h2(
|
||||
Button,
|
||||
{ className: "dim-cardAction", kind: "danger", onClick: onRequestRemove, disabled: Boolean(busy) },
|
||||
"\u79FB\u9664\u63A5\u5165"
|
||||
)
|
||||
summary ? h2("div", { className: "ddt-summary dim-cardSummary" }, summary) : null,
|
||||
feedback ? h2("div", {
|
||||
className: "ddt-summary dim-cardFeedback",
|
||||
role: "status"
|
||||
}, feedback) : null
|
||||
)
|
||||
)
|
||||
),
|
||||
|
|
@ -2953,22 +2957,29 @@ function createTokenChannelSettings(definition) {
|
|||
h2(
|
||||
"div",
|
||||
{ className: "ddt-accountFooter dim-cardFooter" },
|
||||
summary ? h2("div", { className: "ddt-summary dim-cardSummary" }, summary) : null,
|
||||
testNotice ? h2("div", { className: "ddt-summary dim-cardSummary", role: "status" }, testNotice) : null,
|
||||
h2(
|
||||
"div",
|
||||
{ className: "ddt-actions dim-cardActions" },
|
||||
h2(Button3, {
|
||||
className: "dim-cardAction",
|
||||
onClick: onReconnect,
|
||||
disabled: Boolean(busy)
|
||||
}, busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"),
|
||||
h2(Button3, {
|
||||
className: "dim-cardAction",
|
||||
kind: "danger",
|
||||
onClick: onRequestRemove,
|
||||
disabled: Boolean(busy)
|
||||
}, "\u79FB\u9664\u63A5\u5165")
|
||||
{ className: "dim-cardFooterLayout" },
|
||||
h2(
|
||||
"div",
|
||||
{ className: "ddt-actions dim-cardActions" },
|
||||
h2(Button3, {
|
||||
className: "dim-cardAction",
|
||||
onClick: onReconnect,
|
||||
disabled: Boolean(busy)
|
||||
}, busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"),
|
||||
h2(Button3, {
|
||||
className: "dim-cardAction",
|
||||
kind: "danger",
|
||||
onClick: onRequestRemove,
|
||||
disabled: Boolean(busy)
|
||||
}, "\u79FB\u9664\u63A5\u5165")
|
||||
),
|
||||
summary ? h2("div", { className: "ddt-summary dim-cardSummary" }, summary) : null,
|
||||
testNotice ? h2("div", {
|
||||
className: "ddt-summary dim-cardFeedback",
|
||||
role: "status"
|
||||
}, testNotice) : null
|
||||
)
|
||||
)
|
||||
),
|
||||
|
|
@ -4808,40 +4819,44 @@ function BotCard({
|
|||
h2(
|
||||
"div",
|
||||
{ className: "bxf-connectedFooter dim-cardFooter" },
|
||||
summary ? h2(
|
||||
"div",
|
||||
{ className: "bxf-healthSummary dim-cardSummary", "data-error": actionError || connection.error ? "true" : void 0 },
|
||||
summary
|
||||
) : null,
|
||||
testNotice ? h2("div", {
|
||||
className: "bxf-healthSummary dim-cardSummary",
|
||||
role: "status"
|
||||
}, testNotice) : null,
|
||||
h2(
|
||||
"div",
|
||||
{ className: "bxf-actions bxf-botActions dim-cardActions" },
|
||||
h2(Button5, {
|
||||
className: "dim-cardAction",
|
||||
onClick: onReconnect,
|
||||
disabled: Boolean(busy),
|
||||
"aria-busy": busy === "reconnect" ? "true" : void 0,
|
||||
"aria-label": `${connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"}${bot.name}`
|
||||
}, busy === "reconnect" ? connected ? "\u68C0\u67E5\u4E2D\u2026" : "\u6B63\u5728\u8FDE\u63A5\u2026" : connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"),
|
||||
h2(Button5, {
|
||||
className: "bxf-repairButton dim-cardAction",
|
||||
onClick: onRepairCallback,
|
||||
disabled: Boolean(busy) || repairDisabled,
|
||||
"aria-busy": busy === "callback-repair" ? "true" : void 0,
|
||||
"aria-label": `\u4FEE\u590D${bot.name}\u7684\u5361\u7247\u6309\u94AE`
|
||||
}, busy === "callback-repair" ? "\u7B49\u5F85\u626B\u7801\u2026" : "\u4FEE\u590D\u5361\u7247\u6309\u94AE"),
|
||||
h2(Button5, {
|
||||
className: "dim-cardAction",
|
||||
kind: "danger",
|
||||
onClick: onRequestRemove,
|
||||
disabled: Boolean(busy),
|
||||
ref: removeButtonRef,
|
||||
"aria-label": `\u4ECE DeepSeek Harness \u79FB\u9664${bot.name}`
|
||||
}, "\u79FB\u9664\u63A5\u5165")
|
||||
{ className: "dim-cardFooterLayout" },
|
||||
h2(
|
||||
"div",
|
||||
{ className: "bxf-actions bxf-botActions dim-cardActions" },
|
||||
h2(Button5, {
|
||||
className: "dim-cardAction",
|
||||
onClick: onReconnect,
|
||||
disabled: Boolean(busy),
|
||||
"aria-busy": busy === "reconnect" ? "true" : void 0,
|
||||
"aria-label": `${connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"}${bot.name}`
|
||||
}, busy === "reconnect" ? connected ? "\u68C0\u67E5\u4E2D\u2026" : "\u6B63\u5728\u8FDE\u63A5\u2026" : connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"),
|
||||
h2(Button5, {
|
||||
className: "bxf-repairButton dim-cardAction",
|
||||
onClick: onRepairCallback,
|
||||
disabled: Boolean(busy) || repairDisabled,
|
||||
"aria-busy": busy === "callback-repair" ? "true" : void 0,
|
||||
"aria-label": `\u4FEE\u590D${bot.name}\u7684\u5361\u7247\u6309\u94AE`
|
||||
}, busy === "callback-repair" ? "\u7B49\u5F85\u626B\u7801\u2026" : "\u4FEE\u590D\u5361\u7247\u6309\u94AE"),
|
||||
h2(Button5, {
|
||||
className: "dim-cardAction",
|
||||
kind: "danger",
|
||||
onClick: onRequestRemove,
|
||||
disabled: Boolean(busy),
|
||||
ref: removeButtonRef,
|
||||
"aria-label": `\u4ECE DeepSeek Harness \u79FB\u9664${bot.name}`
|
||||
}, "\u79FB\u9664\u63A5\u5165")
|
||||
),
|
||||
summary ? h2(
|
||||
"div",
|
||||
{ className: "bxf-healthSummary dim-cardSummary", "data-error": actionError || connection.error ? "true" : void 0 },
|
||||
summary
|
||||
) : null,
|
||||
testNotice ? h2("div", {
|
||||
className: "bxf-healthSummary dim-cardFeedback",
|
||||
role: "status"
|
||||
}, testNotice) : null
|
||||
)
|
||||
)
|
||||
),
|
||||
|
|
@ -6049,17 +6064,21 @@ function AccountCard2({
|
|||
h2(
|
||||
"div",
|
||||
{ className: "ddt-accountFooter dim-cardFooter" },
|
||||
summary ? h2("div", { className: "ddt-summary dim-cardSummary" }, summary) : null,
|
||||
feedback ? h2("div", {
|
||||
className: "ddt-summary dim-cardSummary",
|
||||
role: "status",
|
||||
"aria-live": "polite"
|
||||
}, feedback) : null,
|
||||
h2(
|
||||
"div",
|
||||
{ className: "ddt-actions dim-cardActions" },
|
||||
h2(Button7, { className: "dim-cardAction", onClick: onReconnect, disabled: Boolean(busy) }, busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"),
|
||||
h2(Button7, { className: "dim-cardAction", kind: "danger", onClick: onRequestRemove, disabled: Boolean(busy) }, "\u79FB\u9664\u63A5\u5165")
|
||||
{ className: "dim-cardFooterLayout" },
|
||||
h2(
|
||||
"div",
|
||||
{ className: "ddt-actions dim-cardActions" },
|
||||
h2(Button7, { className: "dim-cardAction", onClick: onReconnect, disabled: Boolean(busy) }, busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"),
|
||||
h2(Button7, { className: "dim-cardAction", kind: "danger", onClick: onRequestRemove, disabled: Boolean(busy) }, "\u79FB\u9664\u63A5\u5165")
|
||||
),
|
||||
summary ? h2("div", { className: "ddt-summary dim-cardSummary" }, summary) : null,
|
||||
feedback ? h2("div", {
|
||||
className: "ddt-summary dim-cardFeedback",
|
||||
role: "status",
|
||||
"aria-live": "polite"
|
||||
}, feedback) : null
|
||||
)
|
||||
)
|
||||
),
|
||||
|
|
@ -7588,17 +7607,21 @@ function AccountCard3({
|
|||
h2(
|
||||
"div",
|
||||
{ className: "ddt-accountFooter dim-cardFooter" },
|
||||
summary ? h2("div", { className: "ddt-summary dim-cardSummary" }, summary) : null,
|
||||
feedback ? h2("div", {
|
||||
className: "ddt-summary dim-cardSummary",
|
||||
role: "status",
|
||||
"aria-live": "polite"
|
||||
}, feedback) : null,
|
||||
h2(
|
||||
"div",
|
||||
{ className: "ddt-actions dim-cardActions" },
|
||||
h2(Button10, { className: "dim-cardAction", onClick: onReconnect, disabled: Boolean(busy) }, busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"),
|
||||
h2(Button10, { className: "dim-cardAction", kind: "danger", onClick: onRequestRemove, disabled: Boolean(busy) }, "\u79FB\u9664\u63A5\u5165")
|
||||
{ className: "dim-cardFooterLayout" },
|
||||
h2(
|
||||
"div",
|
||||
{ className: "ddt-actions dim-cardActions" },
|
||||
h2(Button10, { className: "dim-cardAction", onClick: onReconnect, disabled: Boolean(busy) }, busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"),
|
||||
h2(Button10, { className: "dim-cardAction", kind: "danger", onClick: onRequestRemove, disabled: Boolean(busy) }, "\u79FB\u9664\u63A5\u5165")
|
||||
),
|
||||
summary ? h2("div", { className: "ddt-summary dim-cardSummary" }, summary) : null,
|
||||
feedback ? h2("div", {
|
||||
className: "ddt-summary dim-cardFeedback",
|
||||
role: "status",
|
||||
"aria-live": "polite"
|
||||
}, feedback) : null
|
||||
)
|
||||
)
|
||||
),
|
||||
|
|
@ -8543,25 +8566,29 @@ function AccountCard4({
|
|||
h2(
|
||||
"div",
|
||||
{ className: "dxw-accountFooter dim-cardFooter" },
|
||||
summary ? h2("div", { className: "dxw-summary dim-cardSummary" }, summary) : null,
|
||||
account.lastMessageError ? h2("div", {
|
||||
className: "dxw-summary dim-cardSummary",
|
||||
role: "status"
|
||||
}, `\u6700\u8FD1\u4E00\u6761\u6D88\u606F\u5904\u7406\u5931\u8D25\uFF1A${account.lastMessageError.message}`) : null,
|
||||
feedback ? h2("div", {
|
||||
className: "dxw-summary dim-cardSummary",
|
||||
role: "status",
|
||||
"aria-live": "polite"
|
||||
}, feedback) : null,
|
||||
h2(
|
||||
"div",
|
||||
{ className: "dxw-actions dim-cardActions" },
|
||||
{ className: "dim-cardFooterLayout" },
|
||||
h2(
|
||||
Button12,
|
||||
{ className: "dim-cardAction", onClick: onReconnect, disabled: Boolean(busy) },
|
||||
busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"
|
||||
"div",
|
||||
{ className: "dxw-actions dim-cardActions" },
|
||||
h2(
|
||||
Button12,
|
||||
{ className: "dim-cardAction", onClick: onReconnect, disabled: Boolean(busy) },
|
||||
busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"
|
||||
),
|
||||
h2(Button12, { className: "dim-cardAction", kind: "danger", onClick: onRequestRemove, disabled: Boolean(busy) }, "\u79FB\u9664\u63A5\u5165")
|
||||
),
|
||||
h2(Button12, { className: "dim-cardAction", kind: "danger", onClick: onRequestRemove, disabled: Boolean(busy) }, "\u79FB\u9664\u63A5\u5165")
|
||||
summary ? h2("div", { className: "dxw-summary dim-cardSummary" }, summary) : null,
|
||||
account.lastMessageError ? h2("div", {
|
||||
className: "dxw-summary dim-cardSummary",
|
||||
role: "status"
|
||||
}, `\u6700\u8FD1\u4E00\u6761\u6D88\u606F\u5904\u7406\u5931\u8D25\uFF1A${account.lastMessageError.message}`) : null,
|
||||
feedback ? h2("div", {
|
||||
className: "dxw-summary dim-cardFeedback",
|
||||
role: "status",
|
||||
"aria-live": "polite"
|
||||
}, feedback) : null
|
||||
)
|
||||
)
|
||||
),
|
||||
|
|
@ -9459,25 +9486,29 @@ function WhatsappAccountCard({
|
|||
h2(
|
||||
"div",
|
||||
{ className: "ddt-accountFooter dim-cardFooter" },
|
||||
summary ? h2("div", { className: "ddt-summary dim-cardSummary" }, summary) : null,
|
||||
testNotice ? h2("div", {
|
||||
className: "ddt-summary dim-cardSummary",
|
||||
role: "status"
|
||||
}, testNotice) : null,
|
||||
h2(
|
||||
"div",
|
||||
{ className: "ddt-actions dim-cardActions" },
|
||||
h2(Button14, {
|
||||
className: "dim-cardAction",
|
||||
onClick: onReconnect,
|
||||
disabled: Boolean(busy)
|
||||
}, busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"),
|
||||
h2(Button14, {
|
||||
className: "dim-cardAction",
|
||||
kind: "danger",
|
||||
onClick: onRequestRemove,
|
||||
disabled: Boolean(busy)
|
||||
}, "\u79FB\u9664\u63A5\u5165")
|
||||
{ className: "dim-cardFooterLayout" },
|
||||
h2(
|
||||
"div",
|
||||
{ className: "ddt-actions dim-cardActions" },
|
||||
h2(Button14, {
|
||||
className: "dim-cardAction",
|
||||
onClick: onReconnect,
|
||||
disabled: Boolean(busy)
|
||||
}, busy === "reconnect" ? "\u68C0\u67E5\u4E2D\u2026" : account.connected ? "\u68C0\u67E5\u8FDE\u63A5" : "\u91CD\u8BD5\u8FDE\u63A5"),
|
||||
h2(Button14, {
|
||||
className: "dim-cardAction",
|
||||
kind: "danger",
|
||||
onClick: onRequestRemove,
|
||||
disabled: Boolean(busy)
|
||||
}, "\u79FB\u9664\u63A5\u5165")
|
||||
),
|
||||
summary ? h2("div", { className: "ddt-summary dim-cardSummary" }, summary) : null,
|
||||
testNotice ? h2("div", {
|
||||
className: "ddt-summary dim-cardFeedback",
|
||||
role: "status"
|
||||
}, testNotice) : null
|
||||
)
|
||||
)
|
||||
),
|
||||
|
|
@ -9968,6 +9999,9 @@ var CSS11 = String.raw`
|
|||
.dim-directoryPickerActions button:hover:not(:disabled) { filter: brightness(.97); }
|
||||
.dim-directoryPickerActions button:disabled { cursor: not-allowed; opacity: .52; }
|
||||
.dim-panel .dim-cardSummary { min-width: 0; color: var(--dsw-alias-label-secondary, #646a73); font: inherit; font-size: 12px; font-weight: 400; line-height: normal; }
|
||||
.dim-panel .dim-cardFooterLayout { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
|
||||
.dim-panel .dim-cardFooterLayout > .dim-cardActions { align-self: flex-end; }
|
||||
.dim-panel .dim-cardFeedback { width: 100%; padding: 8px 10px; border-radius: 8px; color: var(--dsw-alias-label-secondary, #646a73); background: var(--dsw-alias-bg-module-platform, #f7f8fa); font: inherit; font-size: 12px; font-weight: 400; line-height: 18px; overflow-wrap: anywhere; white-space: normal; }
|
||||
.dim-panel .dim-cardActions { flex: none; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 0 0 0 auto; }
|
||||
.dim-panel .dim-cardActions .dim-cardAction { flex: none; min-height: 32px; padding: 0 11px; border: 1px solid var(--dsw-alias-border-l2, #dfe1e5); border-radius: 8px; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-bg-layer-1, #fff); font: inherit; font-size: 13px; font-weight: 560; line-height: normal; white-space: nowrap; }
|
||||
.dim-panel .dim-cardActions .dim-cardAction:hover:not(:disabled) { border-color: #aeb3bb; background: var(--dsw-alias-interactive-bg-hover, #f7f8fa); }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue