From 9c0720f1831446345f07b69f597f659b01e1e3fd Mon Sep 17 00:00:00 2001 From: sunlei Date: Wed, 24 Jun 2026 20:16:33 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96NapCat=20WebUI?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=85=A8=E5=B1=8F=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../qqbot/account/napcat-webui/index.scss | 138 ++++++++++-------- .../qqbot/account/napcat-webui/index.tsx | 92 ++++++------ .../napcat-webui/napcat-webui.spec.tsx | 5 + 3 files changed, 129 insertions(+), 106 deletions(-) diff --git a/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/index.scss b/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/index.scss index 118ebec..ab41384 100644 --- a/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/index.scss +++ b/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/index.scss @@ -1,72 +1,26 @@ -.qqbot-napcat-webui { - display: flex; - flex-direction: column; - gap: 12px; +.qqbot-napcat-webui-page { + width: 100%; height: var(--vben-content-height, 100%); min-height: 0; overflow: hidden; color: hsl(var(--foreground)); background: hsl(var(--background)); +} - &__header { - display: flex; - flex: 0 0 auto; - flex-wrap: wrap; - gap: 12px; - align-items: center; - justify-content: space-between; - min-height: 44px; - padding-bottom: 12px; - border-bottom: 1px solid hsl(var(--border)); - } - - &__identity { - display: flex; - flex-wrap: wrap; - gap: 12px; - align-items: center; - min-width: 0; - } - - &__back { - display: inline-flex; - gap: 6px; - align-items: center; - padding-inline: 0; - } - - &__back-icon { - width: 16px; - height: 16px; - } - - &__title { - display: inline-flex; - gap: 8px; - align-items: center; - min-width: 0; - font-size: 16px; - font-weight: 600; - } - - &__actions { - flex: 0 0 auto; - } - - &__meta { - display: flex; - flex: 0 0 auto; - flex-wrap: wrap; - gap: 12px; - min-width: 0; - font-size: 12px; - color: hsl(var(--muted-foreground)); - } +.qqbot-napcat-webui { + position: relative; + width: 100%; + height: 100%; + min-height: 0; + overflow: hidden; + color: inherit; + background: inherit; &__content { + position: absolute; + inset: 0; display: flex; - flex: 1 1 0; - flex-direction: column; + min-width: 0; min-height: 0; overflow: hidden; } @@ -80,6 +34,7 @@ align-items: center; justify-content: center; min-height: 0; + padding: 24px; } &__message { @@ -90,11 +45,10 @@ &__iframe-shell { flex: 1 1 0; + min-width: 0; min-height: 0; overflow: hidden; background: hsl(var(--background)); - border: 1px solid hsl(var(--border)); - border-radius: 8px; } &__iframe { @@ -104,4 +58,64 @@ background: hsl(var(--background)); border: 0; } + + &__floating-card { + position: absolute; + right: 16px; + bottom: 16px; + z-index: 2; + display: flex; + flex-direction: column; + gap: 8px; + max-width: min(360px, calc(100% - 32px)); + padding: 10px 12px; + color: hsl(var(--foreground)); + pointer-events: auto; + background: hsl(var(--background) / 92%); + border: 1px solid hsl(var(--border)); + border-radius: 8px; + box-shadow: 0 10px 30px hsl(var(--foreground) / 12%); + backdrop-filter: blur(10px); + } + + &__floating-head { + display: flex; + gap: 8px; + align-items: center; + justify-content: space-between; + min-width: 0; + } + + &__floating-title { + min-width: 0; + overflow: hidden; + font-size: 13px; + font-weight: 600; + line-height: 18px; + text-overflow: ellipsis; + white-space: nowrap; + } + + &__floating-meta { + display: flex; + flex-wrap: wrap; + gap: 6px 10px; + min-width: 0; + font-size: 12px; + line-height: 16px; + color: hsl(var(--muted-foreground)); + } + + &__floating-actions { + display: flex; + flex-wrap: wrap; + gap: 6px; + } + + &__back-icon { + width: 14px; + height: 14px; + margin-right: 4px; + vertical-align: -2px; + } } diff --git a/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/index.tsx b/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/index.tsx index 5caf469..d0f855f 100644 --- a/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/index.tsx +++ b/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/index.tsx @@ -3,7 +3,6 @@ import type { NapcatWebuiGatewaySessionState } from './useNapcatWebuiGatewaySess import { computed, defineComponent, watch } from 'vue'; import { useRoute, useRouter } from 'vue-router'; -import { Page } from '@vben/common-ui'; import { ArrowLeft } from '@vben/icons'; import { Alert, Button, Space, Spin, Tag } from 'antdv-next'; @@ -70,6 +69,51 @@ export default defineComponent({ void session.revoke(); } + /** + * Renders the floating metadata panel without taking layout space from the iframe. + * + * @returns Overlay card content for the current session metadata and actions. + */ + const renderFloatingCard = () => { + return ( +
+
+ + {accountTitle.value} + + {statusMeta.value.label} +
+
+ NapCat WebUI + {expiresAtText.value ? ( + 有效期：{expiresAtText.value} + ) : null} +
+ + + + 返回 + + + 重开 + + + 关闭 + + +
+ ); + }; + /** * Renders the main state area for loading, error, revoked, and ready states. * @@ -124,52 +168,12 @@ export default defineComponent({ */ const renderPage = () => { return ( - +
-
-
- - - 返回账号列表 - -
- {accountTitle.value} - - {statusMeta.value.label} - -
-
- - - 重新打开 - - - 关闭会话 - - -
- -
- NapCat WebUI - {expiresAtText.value ? ( - 有效期：{expiresAtText.value} - ) : null} -
-
{renderBody()}
+ {renderFloatingCard()}
- +
); }; diff --git a/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/napcat-webui.spec.tsx b/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/napcat-webui.spec.tsx index ecf0f57..cbfb42f 100644 --- a/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/napcat-webui.spec.tsx +++ b/apps/web-antdv-next/src/views/qqbot/account/napcat-webui/napcat-webui.spec.tsx @@ -190,6 +190,11 @@ describe('qqbot account NapCat WebUI page', () => { expect(wrapper.find('iframe').attributes('src')).toBe( '/qqbot/napcat/webui/session/session-1/', ); + expect(wrapper.find('.qqbot-napcat-webui__header').exists()).toBe(false); + expect(wrapper.find('.qqbot-napcat-webui__meta').exists()).toBe(false); + expect(wrapper.find('.qqbot-napcat-webui__floating-card').exists()).toBe( + true, + ); expect(wrapper.text()).toContain('主账号（10001）'); expect(wrapper.text()).toContain('NapCat WebUI'); expect(wrapper.text()).not.toContain('kt-qqbot-napcat');