Refactor extension page layout and tab handling

Improves the layout of the extension page by adjusting container heights and restructuring the header to better support responsive design. Moves the tab navigation to the header and displays only the selected extension page in the main content area, simplifying the rendering logic and improving user experience.

packages/napcat-core/helper/forward-msg-builder.ts

@@ -2,14 +2,14 @@ import * as crypto from 'node:crypto';
 import { PacketMsg } from '@/napcat-core/packet/message/message';
 
 interface ForwardMsgJson {
-  app: string
+  app: string;
   config: ForwardMsgJsonConfig,
   desc: string,
   extra: ForwardMsgJsonExtra,
   meta: ForwardMsgJsonMeta,
   prompt: string,
   ver: string,
-  view: string
+  view: string;
 }
 
 interface ForwardMsgJsonConfig {
@@ -17,7 +17,7 @@ interface ForwardMsgJsonConfig {
   forward: number,
   round: number,
   type: string,
-  width: number
+  width: number;
 }
 
 interface ForwardMsgJsonExtra {
@@ -26,17 +26,17 @@ interface ForwardMsgJsonExtra {
 }
 
 interface ForwardMsgJsonMeta {
-  detail: ForwardMsgJsonMetaDetail
+  detail: ForwardMsgJsonMetaDetail;
 }
 
 interface ForwardMsgJsonMetaDetail {
   news: {
-    text: string
+    text: string;
   }[],
   resid: string,
   source: string,
   summary: string,
-  uniseq: string
+  uniseq: string;
 }
 
 interface ForwardAdaptMsg {
@@ -50,8 +50,8 @@ interface ForwardAdaptMsgElement {
 }
 
 export class ForwardMsgBuilder {
-  private static build (resId: string, msg: ForwardAdaptMsg[], source?: string, news?: ForwardMsgJsonMetaDetail['news'], summary?: string, prompt?: string): ForwardMsgJson {
-    const id = crypto.randomUUID();
+  private static build (resId: string, msg: ForwardAdaptMsg[], source?: string, news?: ForwardMsgJsonMetaDetail['news'], summary?: string, prompt?: string, uuid?: string): ForwardMsgJson {
+    const id = uuid ?? crypto.randomUUID();
     const isGroupMsg = msg.some(m => m.isGroupMsg);
     if (!source) {
       source = msg.length === 0 ? '聊天记录' : (isGroupMsg ? '群聊的聊天记录' : msg.map(m => m.senderName).filter((v, i, a) => a.indexOf(v) === i).slice(0, 4).join('和') + '的聊天记录');
@@ -104,13 +104,19 @@ export class ForwardMsgBuilder {
     return this.build(resId, []);
   }
 
-  static fromPacketMsg (resId: string, packetMsg: PacketMsg[], source?: string, news?: ForwardMsgJsonMetaDetail['news'], summary?: string, prompt?: string): ForwardMsgJson {
+  static fromPacketMsg (resId: string, packetMsg: PacketMsg[], source?: string, news?: ForwardMsgJsonMetaDetail['news'], summary?: string, prompt?: string, uuid?: string): ForwardMsgJson {
     return this.build(resId, packetMsg.map(msg => ({
       senderName: msg.senderName,
       isGroupMsg: msg.groupId !== undefined,
       msg: msg.msg.map(m => ({
         preview: m.valid ? m.toPreview() : '[该消息类型暂不支持查看]',
       })),
-    })), source, news, summary, prompt);
+    })),
+      source,
+      news,
+      summary,
+      prompt,
+      uuid,
+    );
   }
 }

packages/napcat-core/packet/context/operationContext.ts

@@ -18,6 +18,7 @@ import { OidbPacket } from '@/napcat-core/packet/transformer/base';
 import { ImageOcrResult } from '@/napcat-core/packet/entities/ocrResult';
 import { gunzipSync } from 'zlib';
 import { PacketMsgConverter } from '@/napcat-core/packet/message/converter';
+import { UploadForwardMsgParams } from '@/napcat-core/packet/transformer/message/UploadForwardMsgV2';
 
 export class PacketOperationContext {
   private readonly context: PacketContext;
@@ -26,7 +27,7 @@ export class PacketOperationContext {
     this.context = context;
   }
 
-  async sendPacket<T extends boolean = false>(pkt: OidbPacket, rsp?: T): Promise<T extends true ? Buffer : void> {
+  async sendPacket<T extends boolean = false> (pkt: OidbPacket, rsp?: T): Promise<T extends true ? Buffer : void> {
     return await this.context.client.sendOidbPacket(pkt, rsp);
   }
 
@@ -224,7 +225,15 @@ export class PacketOperationContext {
     const res = trans.UploadForwardMsg.parse(resp);
     return res.result.resId;
   }
-
+  async UploadForwardMsgV2 (msg: UploadForwardMsgParams[], groupUin: number = 0) {
+    //await this.SendPreprocess(msg, groupUin);
+    // 遍历上传资源
+    await Promise.allSettled(msg.map(async (item) => { return await this.SendPreprocess(item.actionMsg, groupUin); }));
+    const req = trans.UploadForwardMsgV2.build(this.context.napcore.basicInfo.uid, msg, groupUin);
+    const resp = await this.context.client.sendOidbPacket(req, true);
+    const res = trans.UploadForwardMsg.parse(resp);
+    return res.result.resId;
+  }
   async MoveGroupFile (
     groupUin: number,
     fileUUID: string,

packages/napcat-core/packet/transformer/message/UploadForwardMsgV2.ts

@@ -0,0 +1,51 @@
+import zlib from 'node:zlib';
+import * as proto from '@/napcat-core/packet/transformer/proto';
+import { NapProtoMsg } from 'napcat-protobuf';
+import { OidbPacket, PacketBufBuilder, PacketTransformer } from '@/napcat-core/packet/transformer/base';
+import { PacketMsg } from '@/napcat-core/packet/message/message';
+
+export interface UploadForwardMsgParams {
+  actionCommand: string;
+  actionMsg: PacketMsg[];
+}
+class UploadForwardMsgV2 extends PacketTransformer<typeof proto.SendLongMsgResp> {
+  build (selfUid: string, msg: UploadForwardMsgParams[], groupUin: number = 0): OidbPacket {
+    const reqdata = msg.map((item) => ({
+      actionCommand: item.actionCommand,
+      actionData: {
+        msgBody: this.msgBuilder.buildFakeMsg(selfUid, item.actionMsg),
+      }
+    }));
+    const longMsgResultData = new NapProtoMsg(proto.LongMsgResult).encode(
+      {
+        action: reqdata,
+      }
+    );
+    const payload = zlib.gzipSync(Buffer.from(longMsgResultData));
+    const req = new NapProtoMsg(proto.SendLongMsgReq).encode(
+      {
+        info: {
+          type: groupUin === 0 ? 1 : 3,
+          uid: {
+            uid: groupUin === 0 ? selfUid : groupUin.toString(),
+          },
+          groupUin,
+          payload,
+        },
+        settings: {
+          field1: 4, field2: 1, field3: 7, field4: 0,
+        },
+      }
+    );
+    return {
+      cmd: 'trpc.group.long_msg_interface.MsgService.SsoSendLongMsg',
+      data: PacketBufBuilder(req),
+    };
+  }
+
+  parse (data: Buffer) {
+    return new NapProtoMsg(proto.SendLongMsgResp).decode(data);
+  }
+}
+
+export default new UploadForwardMsgV2();

packages/napcat-core/packet/transformer/message/index.ts

@@ -2,3 +2,4 @@ export { default as UploadForwardMsg } from './UploadForwardMsg';
 export { default as FetchGroupMessage } from './FetchGroupMessage';
 export { default as FetchC2CMessage } from './FetchC2CMessage';
 export { default as DownloadForwardMsg } from './DownloadForwardMsg';
+export { default as UploadForwardMsgV2 } from './UploadForwardMsgV2';

packages/napcat-onebot/action/msg/SendMsg.ts

@@ -17,6 +17,7 @@ import { rawMsgWithSendMsg } from 'napcat-core/packet/message/converter';
 import { Static, Type } from '@sinclair/typebox';
 import { MsgActionsExamples } from '@/napcat-onebot/action/msg/examples';
 import { OB11MessageMixTypeSchema } from '@/napcat-onebot/types/message';
+import { UploadForwardMsgParams } from '@/napcat-core/packet/transformer/message/UploadForwardMsgV2';
 
 export const SendMsgPayloadSchema = Type.Object({
   message_type: Type.Optional(Type.Union([Type.Literal('private'), Type.Literal('group')], { description: '消息类型 (private/group)' })),
@@ -211,10 +212,14 @@ export class SendMsgBase extends OneBotAction<SendMsgPayload, ReturnDataType> {
   }, dp: number = 0): Promise<{
     finallySendElements: SendArkElement,
     res_id?: string,
+    uuid?: string,
+    packetMsg: PacketMsg[],
     deleteAfterSentFiles: string[],
+    innerPacketMsg?: Array<{ uuid: string, packetMsg: PacketMsg[]; }>;
   } | null> {
     const packetMsg: PacketMsg[] = [];
     const delFiles: string[] = [];
+    const innerMsg: Array<{ uuid: string, packetMsg: PacketMsg[]; }> = new Array();
     for (const node of messageNodes) {
       if (dp >= 3) {
         this.core.context.logger.logWarn('转发消息深度超过3层，将停止解析！');
@@ -232,6 +237,13 @@ export class SendMsgBase extends OneBotAction<SendMsgPayload, ReturnDataType> {
           }, dp + 1);
           sendElements = uploadReturnData?.finallySendElements ? [uploadReturnData.finallySendElements] : [];
           delFiles.push(...(uploadReturnData?.deleteAfterSentFiles || []));
+          if (uploadReturnData?.uuid) {
+            innerMsg.push({ uuid: uploadReturnData.uuid, packetMsg: uploadReturnData.packetMsg });
+            uploadReturnData.innerPacketMsg?.forEach(m => {
+              innerMsg.push({ uuid: m.uuid, packetMsg: m.packetMsg });
+            });
+          }
+
         } else {
           const sendElementsCreateReturn = await this.obContext.apis.MsgApi.createSendElements(OB11Data, msgPeer);
           sendElements = sendElementsCreateReturn.sendElements;
@@ -273,8 +285,19 @@ export class SendMsgBase extends OneBotAction<SendMsgPayload, ReturnDataType> {
       this.core.context.logger.logWarn('handleForwardedNodesPacket 元素为空！');
       return null;
     }
-    const resid = await this.core.apis.PacketApi.pkt.operation.UploadForwardMsg(packetMsg, msgPeer.chatType === ChatType.KCHATTYPEGROUP ? +msgPeer.peerUid : 0);
-    const forwardJson = ForwardMsgBuilder.fromPacketMsg(resid, packetMsg, source, news, summary, prompt);
+    const uploadMsgData: UploadForwardMsgParams[] = [{
+      actionCommand: 'MultiMsg',
+      actionMsg: packetMsg,
+    }];
+    innerMsg.forEach(({ uuid, packetMsg: msg }) => {
+      uploadMsgData.push({
+        actionCommand: uuid,
+        actionMsg: msg,
+      });
+    });
+    const resid = await this.core.apis.PacketApi.pkt.operation.UploadForwardMsgV2(uploadMsgData, msgPeer.chatType === ChatType.KCHATTYPEGROUP ? +msgPeer.peerUid : 0);
+    const uuid = crypto.randomUUID();
+    const forwardJson = ForwardMsgBuilder.fromPacketMsg(resid, packetMsg, source, news, summary, prompt, uuid);
     return {
       deleteAfterSentFiles: delFiles,
       finallySendElements: {
@@ -285,6 +308,9 @@ export class SendMsgBase extends OneBotAction<SendMsgPayload, ReturnDataType> {
         },
       } as SendArkElement,
       res_id: resid,
+      uuid: uuid,
+      packetMsg: packetMsg,
+      innerPacketMsg: innerMsg,
     };
   }
 

packages/napcat-webui-frontend/src/components/network_edit/generic_form.tsx

@@ -180,7 +180,7 @@ const GenericForm = <T extends keyof NetworkConfigType> ({
 export default GenericForm;
 export function random_token (length: number) {
   const chars =
-    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()-_=+[]{}|;:,.<>?';
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_.~';
   let result = '';
   for (let i = 0; i < length; i++) {
     result += chars.charAt(Math.floor(Math.random() * chars.length));

packages/napcat-webui-frontend/src/pages/dashboard/extension.tsx

@@ -58,7 +58,7 @@ export default function ExtensionPage () {
       pluginName: page.pluginName,
       path: page.path,
       icon: page.icon,
-      description: page.description
+      description: page.description,
     }));
   }, [extensionPages]);
 
@@ -69,7 +69,7 @@ export default function ExtensionPage () {
     const path = pathParts.join(':').replace(/^\//, '');
     // 获取认证 token
     const token = localStorage.getItem('token') || '';
-    return `/api/Plugin/page/${pluginId}/${path}?webui_token=${encodeURIComponent(token)}`;
+    return `/api/Plugin/page/${pluginId}/${path}?webui_token=${token}`;
   }, [selectedTab]);
 
   useEffect(() => {
@@ -89,71 +89,72 @@ export default function ExtensionPage () {
   return (
     <>
       <title>扩展页面 - NapCat WebUI</title>
-      <div className="p-2 md:p-4 relative h-full flex flex-col">
+      <div className='p-2 md:p-4 relative h-[calc(100vh-6rem)] md:h-[calc(100vh-4rem)] flex flex-col'>
         <PageLoading loading={loading} />
 
-        <div className="flex mb-4 items-center gap-4">
-          <div className="flex items-center gap-2 text-default-600">
-            <MdExtension size={24} />
-            <span className="text-lg font-medium">插件扩展页面</span>
+        <div className='flex mb-4 items-center justify-between gap-4 flex-wrap'>
+          <div className='flex items-center gap-4'>
+            <div className='flex items-center gap-2 text-default-600'>
+              <MdExtension size={24} />
+              <span className='text-lg font-medium'>插件扩展页面</span>
+            </div>
+            <Button
+              isIconOnly
+              className='bg-default-100/50 hover:bg-default-200/50 text-default-700 backdrop-blur-md'
+              radius='full'
+              onPress={refresh}
+            >
+              <IoMdRefresh size={24} />
+            </Button>
           </div>
-          <Button
-            isIconOnly
-            className="bg-default-100/50 hover:bg-default-200/50 text-default-700 backdrop-blur-md"
-            radius="full"
-            onPress={refresh}
-          >
-            <IoMdRefresh size={24} />
-          </Button>
-        </div>
-
-        {extensionPages.length === 0 && !loading ? (
-          <div className="flex-1 flex flex-col items-center justify-center text-default-400">
-            <MdExtension size={64} className="mb-4 opacity-50" />
-            <p className="text-lg">暂无插件扩展页面</p>
-            <p className="text-sm mt-2">插件可以通过注册页面来扩展 WebUI 功能</p>
-          </div>
-        ) : (
-          <div className="flex-1 flex flex-col min-h-0">
+          {extensionPages.length > 0 && (
             <Tabs
-              aria-label="Extension Pages"
-              className="max-w-full"
+              aria-label='Extension Pages'
+              className='max-w-full'
               selectedKey={selectedTab}
               onSelectionChange={(key) => setSelectedTab(key as string)}
               classNames={{
-                tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md flex-wrap',
+                tabList: 'bg-white/40 dark:bg-black/20 backdrop-blur-md',
                 cursor: 'bg-white/80 dark:bg-white/10 backdrop-blur-md shadow-sm',
-                panel: 'flex-1 min-h-0 p-0'
+                panel: 'hidden',
               }}
             >
               {tabs.map((tab) => (
                 <Tab
                   key={tab.key}
                   title={
-                    <div className="flex items-center gap-2">
+                    <div className='flex items-center gap-2'>
                       {tab.icon && <span>{tab.icon}</span>}
                       <span>{tab.title}</span>
-                      <span className="text-xs text-default-400">({tab.pluginName})</span>
+                      <span className='text-xs text-default-400'>({tab.pluginName})</span>
                     </div>
                   }
-                >
-                  <div className="relative w-full h-[calc(100vh-220px)] bg-white/40 dark:bg-black/20 backdrop-blur-md rounded-lg overflow-hidden">
-                    {iframeLoading && (
-                      <div className="absolute inset-0 flex items-center justify-center bg-default-100/50 z-10">
-                        <Spinner size="lg" />
-                      </div>
-                    )}
-                    <iframe
-                      src={currentPageUrl}
-                      className="w-full h-full border-0"
-                      onLoad={handleIframeLoad}
-                      title={tab.title}
-                      sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
-                    />
-                  </div>
-                </Tab>
+                />
               ))}
             </Tabs>
+          )}
+        </div>
+
+        {extensionPages.length === 0 && !loading ? (
+          <div className='flex-1 flex flex-col items-center justify-center text-default-400'>
+            <MdExtension size={64} className='mb-4 opacity-50' />
+            <p className='text-lg'>暂无插件扩展页面</p>
+            <p className='text-sm mt-2'>插件可以通过注册页面来扩展 WebUI 功能</p>
+          </div>
+        ) : (
+          <div className='flex-1 min-h-0 bg-white/40 dark:bg-black/20 backdrop-blur-md rounded-lg overflow-hidden relative'>
+            {iframeLoading && (
+              <div className='absolute inset-0 flex items-center justify-center bg-default-100/50 z-10'>
+                <Spinner size='lg' />
+              </div>
+            )}
+            <iframe
+              src={currentPageUrl}
+              className='w-full h-full border-0'
+              onLoad={handleIframeLoad}
+              title='extension-page'
+              sandbox='allow-scripts allow-same-origin allow-forms allow-popups'
+            />
           </div>
         )}
       </div>