koishi-plugin-node-async-bot-all 2.18.1 → 2.20.0

package/lib/commands.d.ts

@@ -33,3 +33,4 @@ export declare function serverTest(ctx: Context, session: Session): Promise<Obje
 export declare function getMeme(ctx: Context, session: Session, count: number): Promise<Number>;
 export declare function getCat(ctx: Context, session: Session): Promise<Number>;
 export declare function getQQInfo(ctx: Context, session: Session, qq: string): Promise<number>;
+export declare function getMsg(ctx: Context, session: Session): Promise<number>;

package/lib/fun.d.ts

@@ -3,7 +3,6 @@ import { Context } from "koishi";
 import { APIUserInfo } from "./commands";
 export declare function getSystemUsage(): Promise<Object>;
 export declare function getHongKongTime(): string;
-export declare function fetchWithTimeout(url: string, options: {} | undefined, timeout: number | undefined, log: any): Promise<Response>;
 export declare function readInfoFile(ctx: Context): Promise<string>;
 export declare function formatTimestampDiff(start: number, end: number): string;
 export declare function getMsgCount(ctx: Context): Promise<Object>;
@@ -15,10 +14,6 @@ export declare function hostPing(host: string): Promise<{
     packetLoss?: string;
 }>;
 export declare function random(type: number | undefined, data: any, data2?: any): number;
-export declare function getHttp(log: any, url: string, timeout: number): Promise<{
-    success: boolean;
-    data: object;
-    error?: boolean;
-}>;
 export declare function request<T = any>(url: string, options?: RequestInit, timeout?: number, log?: any): Promise<HttpResponse<T>>;
 export declare function readUserCardFile(userInfo: APIUserInfo): Promise<string>;
+export declare function readUserMsgFile(userName: string, userAvatar: string, msg: string): Promise<string>;

package/lib/index.js

@@ -34,7 +34,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/locales/zh-CN.yml
 var require_zh_CN = __commonJS({
   "src/locales/zh-CN.yml"(exports2, module2) {
-    module2.exports = { commands: { cxgame: { description: "查询服务器当前人数。", messages: { msg: "{time}{list}\n进服指南请在群公告中查看。", list: "【MC 服务器 {count}】\n➣ {version}：{players}\n➣ 玩家列表：{list}\n➣ 备注：{note}", listNoPlayer: "【MC 服务器 {count}】\n➣ {version}：{players}\n➣ 备注：{note}", listFailed: "【MC 服务器 {count}】\n➣ 查询失败：{data}\n➣ 请稍后重试。", forbidden: "{time}\n此指令不允许在本群使用。", failed: "{time}\n查询失败：{data}", timeout: "请求超时。", timeout2: "响应超时。", fewData: "服务端返回的数据过少。", close: "服务器已关闭。", error: "执行错误。", host: "没有到主机的路由。" } }, status: { description: "查询机器人状态。", messages: { msg: "{time}\n--- 系统状态 ---\n系统名称：{name}\nCPU使用率：{cpu}\n内存使用率：{memory}\n--- 机器人状态 ---\n昨日收/发消息数量：{msgCount}\n机器人版本：{version}\n运行时间：{online}", failed: "{time}\n状态获取失败。" } }, random: { description: "随机数生成器。", usage: "缺少参数时默认生成 0-10000 的随机数。\n使用示例：", examples: "random 1 128 生成1到128范围的随机数", messages: { msg: "{time}\n生成的随机数：{data}" } }, info: { description: "查询机器人信息。", messages: { msg: "{data}", failed: "{time}\n读取信息失败。" } }, rw: { description: "随机名言名句。", messages: { msg: "{time}\n{data}", error: "执行错误。", failed1: "{time}\n获取失败（1）。", failed2: "{time}\n获取失败（{data}）。" } }, randomba: { description: "随机BA图。", messages: { msg: "{quote}{image}", wait: "{quote}{time}\n请等待图片上传（可能较慢）。" } }, servertest: { description: "Ping服务器。", messages: { msg: "{time}\n== Ping {host} ==\n状态：{alive}\n丢包率：{packetLoss}\n返回IP：{ip}", forbidden: "{time}\n此指令不允许在本群使用。", failed: "{time}\nPing 失败：{data}" } }, meme: { description: "群友的怪话！", messages: { msg: "{quote}{time}\n{image}\n{title}", failed: "{quote}{time}\n获取失败：{data}", forbidden: "{quote}{time}\n此指令不允许在本群使用。", error: "执行错误。" } }, randomcat: { description: "随机猫猫图。", messages: { msg: "{quote}{image}", wait: "{quote}{time}\n请等待图片上传（可能较慢）。", failed: "{quote}{time}\n获取失败：{data}" } }, getqqinfo: { description: "获取 QQ 号的信息。", messages: { msg: "{quote}{image}", failed: "{quote}{time}\n获取失败：{data}", command: "QQ 号不正确。" } } } };
+    module2.exports = { commands: { cxgame: { description: "查询服务器当前人数。", messages: { msg: "{time}{list}\n进服指南请在群公告中查看。", list: "【MC 服务器 {count}】\n➣ {version}：{players}\n➣ 玩家列表：{list}\n➣ 备注：{note}", listNoPlayer: "【MC 服务器 {count}】\n➣ {version}：{players}\n➣ 备注：{note}", listFailed: "【MC 服务器 {count}】\n➣ 查询失败：{data}\n➣ 请稍后重试。", forbidden: "{time}\n此指令不允许在本群使用。", failed: "{time}\n查询失败：{data}", timeout: "请求超时。", timeout2: "响应超时。", fewData: "服务端返回的数据过少。", close: "服务器已关闭。", error: "执行错误。", host: "没有到主机的路由。" } }, status: { description: "查询机器人状态。", messages: { msg: "{time}\n--- 系统状态 ---\n系统名称：{name}\nCPU使用率：{cpu}\n内存使用率：{memory}\n--- 机器人状态 ---\n昨日收/发消息数量：{msgCount}\n机器人版本：{version}\n运行时间：{online}", failed: "{time}\n状态获取失败。" } }, random: { description: "随机数生成器。", usage: "缺少参数时默认生成 0-10000 的随机数。\n使用示例：", examples: "random 1 128 生成1到128范围的随机数", messages: { msg: "{time}\n生成的随机数：{data}" } }, info: { description: "查询机器人信息。", messages: { msg: "{data}", failed: "{time}\n读取信息失败。" } }, rw: { description: "随机名言名句。", messages: { msg: "{time}\n{data}", error: "执行错误。", failed: "{time}\n获取失败（{data}）。" } }, randomba: { description: "随机BA图。", messages: { msg: "{quote}{image}", wait: "{quote}{time}\n请等待图片上传（可能较慢）。" } }, servertest: { description: "Ping服务器。", messages: { msg: "{time}\n== Ping {host} ==\n状态：{alive}\n丢包率：{packetLoss}\n返回IP：{ip}", forbidden: "{time}\n此指令不允许在本群使用。", failed: "{time}\nPing 失败：{data}" } }, meme: { description: "群友的怪话！", messages: { msg: "{quote}{time}\n{image}\n{title}", failed: "{quote}{time}\n获取失败：{data}", forbidden: "{quote}{time}\n此指令不允许在本群使用。", error: "执行错误。" } }, randomcat: { description: "随机猫猫图。", messages: { msg: "{quote}{image}", wait: "{quote}{time}\n请等待图片上传（可能较慢）。", failed: "{quote}{time}\n获取失败：{data}" } }, getqqinfo: { description: "获取 QQ 号的信息。", messages: { msg: "{quote}{image}", failed: "{quote}{time}\n获取失败：{data}", command: "QQ 号不正确。" } }, msg2img: { description: "引用一个消息并使用此指令，即可将消息转图。", messages: { msg: "{quote}{image}", failed: "{quote}{time}\n获取失败：{data}", null: "未引用任何消息。" } } } };
   }
 });
 
@@ -132,33 +132,6 @@ function getHongKongTime() {
   return `${dateObj.year}-${dateObj.month}-${dateObj.day} ${dateObj.hour}:${dateObj.minute}:${dateObj.second}`;
 }
 __name(getHongKongTime, "getHongKongTime");
-async function fetchWithTimeout(url, options = {}, timeout = 5e3, log) {
-  const controller = new AbortController();
-  const { signal } = controller;
-  const fetchOptions = {
-    ...options,
-    signal
-  };
-  const timeoutId = setTimeout(() => {
-    controller.abort();
-  }, timeout);
-  try {
-    const response = await fetch(url, fetchOptions);
-    clearTimeout(timeoutId);
-    log.info(`Fetch code: ${response.status}`);
-    return response;
-  } catch (error) {
-    clearTimeout(timeoutId);
-    log.error(error);
-    log.error(`${error.name}: ${error.message}`);
-    if (error.name === "AbortError") {
-      throw new Error(`请求超时。(${timeout}ms)`);
-    } else {
-      throw error;
-    }
-  }
-}
-__name(fetchWithTimeout, "fetchWithTimeout");
 async function readInfoFile(ctx) {
   let info;
   try {
@@ -231,36 +204,6 @@ function random(type = 0, data, data2) {
   }
 }
 __name(random, "random");
-async function getHttp(log, url, timeout) {
-  let data;
-  try {
-    const response = await fetchWithTimeout(url, {}, timeout, log);
-    if (response.ok) {
-      data = await response.text();
-      log.info("Server data: " + data);
-      return {
-        "data": JSON.parse(data),
-        "success": true
-      };
-    } else {
-      data = await response.text();
-      log.error(`Error fetching data: ${data}`);
-      return {
-        "data": JSON.parse(data),
-        "error": false,
-        "success": false
-      };
-    }
-  } catch (err) {
-    log.error(`Request error:  ${err.message}`);
-    return {
-      "data": { "name": err.name, "message": err.message },
-      "error": true,
-      "success": false
-    };
-  }
-}
-__name(getHttp, "getHttp");
 async function request(url, options = {}, timeout = 8e3, log) {
   const signal = AbortSignal.timeout(timeout);
   try {
@@ -326,14 +269,24 @@ async function readUserCardFile(userInfo) {
   return card;
 }
 __name(readUserCardFile, "readUserCardFile");
+async function readUserMsgFile(userName, userAvatar, msg) {
+  let html;
+  try {
+    const aPath = import_path.default.resolve(__dirname, "..") + import_path.default.sep + "res" + import_path.default.sep + "userMsg.html";
+    html = await import_fs.default.promises.readFile(aPath, "utf8");
+    html = html.toString().replace("{userData.avatarUrl}", userAvatar).replace("{userData.username}", userName).replace("{userData.message}", msg);
+  } catch (error) {
+    html = error.message;
+  }
+  return html;
+}
+__name(readUserMsgFile, "readUserMsgFile");
 
 // src/commands.ts
 async function getServer(ctx, session) {
   const log = ctx.logger("cx");
   log.debug(`Got: {"form":"${session.event.guild?.id}","user":"${session.event.user?.id}","timestamp":${session.event.timestamp},"messageId":"${session.event.message?.id}"}`);
   let msg;
-  let data;
-  let error;
   const time = getHongKongTime();
   const index = ctx.config.cxV2.findIndex((item) => item.id === session.event.guild?.id);
   if (index !== -1) {
@@ -344,8 +297,8 @@ async function getServer(ctx, session) {
         "data": "未指定查询 API",
         "success": 2
       };
-      log.info("Sent:");
-      log.info(msg);
+      log.warn("Sent:");
+      log.warn(msg);
       return msg;
     }
     let count = 0;
@@ -353,14 +306,13 @@ async function getServer(ctx, session) {
     for (const item of api) {
       const note = ctx.config.cxV2[index]["note"][count];
       count++;
-      const response = await getHttp(log, item, ctx.config.timeout);
+      const response = await request(item, {}, ctx.config.timeout, log);
       if (response.success) {
-        data = response.data;
-        if (data["list"] == null) {
+        if (response.data.list == null) {
           const temp = {
             "count": count,
-            "players": data["players"],
-            "version": data["version"],
+            "players": response.data.players,
+            "version": response.data.version,
             "note": note ?? "无"
           };
           log.info(`Server ${count}:`);
@@ -369,9 +321,9 @@ async function getServer(ctx, session) {
         } else {
           const temp = {
             "count": count,
-            "players": data["players"],
-            "version": data["version"],
-            "list": data["list"].join(", "),
+            "players": response.data.players,
+            "version": response.data.version,
+            "list": response.data.list.join(", "),
             "note": note ?? "无"
           };
           log.info(`Server ${count}:`);
@@ -379,37 +331,30 @@ async function getServer(ctx, session) {
           list = list + "\n" + session.text(".list", temp);
         }
       } else {
-        if (response.error) {
-          data = response.data;
-          const temp = {
-            "count": count,
-            "data": data["name"] === "AbortError" ? session.text(".error") : data["message"]
-          };
-          log.info(`Server ${count}:`);
-          log.info(temp);
-          list = list + "\n" + session.text(".listFailed", temp);
-        } else {
-          data = response.data;
-          error = data["data"];
-          if (error.includes("Connection refused")) {
-            error = session.text(".close");
-          } else if (error.includes("No route to host")) {
-            error = session.text(".host");
-          } else if (error.includes("Connection timed out")) {
-            error = session.text(".timeout");
-          } else if (error.includes("Server returned too few data")) {
-            error = session.text(".fewData");
-          } else if (error.includes("Server read timed out")) {
-            error = session.text(".timeout2");
+        let err;
+        if (response.code) {
+          err = response.isJson ? response.error["data"] : response.error;
+          if (err.includes("Connection refused")) {
+            err = session.text(".close");
+          } else if (err.includes("No route to host")) {
+            err = session.text(".host");
+          } else if (err.includes("Connection timed out")) {
+            err = session.text(".timeout");
+          } else if (err.includes("Server returned too few data")) {
+            err = session.text(".fewData");
+          } else if (err.includes("Server read timed out")) {
+            err = session.text(".timeout2");
           }
-          const temp = {
-            "count": count,
-            "data": error
-          };
-          log.info(`Server ${count}:`);
-          log.info(temp);
-          list = list + "\n" + session.text(".listFailed", temp);
+        } else {
+          err = response.error.message;
         }
+        const temp = {
+          "count": count,
+          "data": err
+        };
+        log.error(`Server ${count}:`);
+        log.error(temp);
+        list = list + "\n" + session.text(".listFailed", temp);
       }
     }
     msg = {
@@ -457,8 +402,8 @@ async function getStatus(ctx, session) {
       "success": 0
     };
   }
-  log.info("Sent:");
-  log.info(msg);
+  log.debug("Sent:");
+  log.debug(msg);
   return msg;
 }
 __name(getStatus, "getStatus");
@@ -480,8 +425,8 @@ async function getRandom(ctx, session, min, max) {
     "data": data,
     "success": 0
   };
-  log.info("Sent:");
-  log.info(msg);
+  log.debug("Sent:");
+  log.debug(msg);
   return msg;
 }
 __name(getRandom, "getRandom");
@@ -506,8 +451,8 @@ async function getInfo(ctx, session) {
       "success": 0
     };
   }
-  log.info("Sent:");
-  log.info(msg);
+  log.debug("Sent:");
+  log.debug(msg);
   return msg;
 }
 __name(getInfo, "getInfo");
@@ -515,7 +460,6 @@ async function getRandomWord(ctx, session) {
   const log = ctx.logger("rw");
   log.debug(`Got: {"form":"${session.event.guild?.id}","user":"${session.event.user?.id}","timestamp":${session.event.timestamp},"messageId":"${session.event.message?.id}"}`);
   let msg;
-  let data;
   const time = getHongKongTime();
   if (ctx.config.rwAPI == void 0) {
     msg = {
@@ -523,40 +467,33 @@ async function getRandomWord(ctx, session) {
       "data": "未指定 API",
       "success": 2
     };
-    log.info("Sent:");
-    log.info(msg);
+    log.warn("Sent:");
+    log.warn(msg);
     return msg;
   }
-  const response = await getHttp(log, ctx.config.rwAPI + "?format=json", ctx.config.timeout);
+  const response = await request(ctx.config.rwAPI + "?format=json", {}, ctx.config.timeout, log);
   if (response.success) {
-    data = response.data;
     msg = {
       "time": time,
-      "data": data["data"],
+      "data": response.data,
       "success": 0
     };
-    log.info("Sent:");
-    log.info(msg);
+    log.debug("Sent:");
+    log.debug(msg);
   } else {
-    if (response.error) {
-      data = response.data;
-      msg = {
-        "time": time,
-        "data": data["name"] === "AbortError" ? session.text(".error") : data["message"],
-        "success": 2
-      };
-      log.info("Sent:");
-      log.info(msg);
+    let err;
+    if (response.code) {
+      err = response.isJson ? response.error["data"] : response.error;
     } else {
-      data = response.data;
-      msg = {
-        "time": time,
-        "data": data["data"],
-        "success": 1
-      };
-      log.info("Sent:");
-      log.info(msg);
+      err = response.error.message;
     }
+    msg = {
+      "time": time,
+      "data": err,
+      "success": 1
+    };
+    log.warn("Sent:");
+    log.warn(msg);
   }
   return msg;
 }
@@ -678,7 +615,8 @@ async function getCat(ctx, session) {
   const response = await request(ctx.config.catAPI, {}, ctx.config.timeout, log);
   if (response.success) {
     log.debug(response.data);
-    await session.send(session.text(".msg", { "quote": import_koishi2.h.quote(session.messageId), "image": import_koishi2.h.image(response.data[0].url) }));
+    const status = await session.send(session.text(".msg", { "quote": import_koishi2.h.quote(session.messageId), "image": import_koishi2.h.image(response.data[0].url) }));
+    if (!status) await session.send(session.text(".msg", { "quote": import_koishi2.h.quote(session.messageId), "image": import_koishi2.h.image(response.data[0].url) }));
     log.debug("Sent:");
     log.debug(response.data[0].url);
   } else {
@@ -706,18 +644,29 @@ async function getQQInfo(ctx, session, qq) {
   }
   const response = await request(ctx.config.qqAPI + `?qq=${qq}`, {}, ctx.config.timeout, log);
   if (response.success) {
-    log.info(response.data);
     const fullHtml = await readUserCardFile(response.data);
     const page = await ctx.puppeteer.page();
-    await page.setViewport({
-      width: 450,
-      height: 650,
-      deviceScaleFactor: 2
-    });
-    await page.setContent(fullHtml, { waitUntil: "networkidle0" });
-    const image = await page.screenshot({ type: "png", omitBackground: true });
-    const status = await session.send(session.text(".msg", { "quote": import_koishi2.h.quote(session.messageId), "image": import_koishi2.h.image(image, "image/png") }));
-    if (!status) await session.send(session.text(".msg", { "quote": import_koishi2.h.quote(session.messageId), "image": import_koishi2.h.image(image, "image/png") }));
+    try {
+      await page.setViewport({
+        width: 450,
+        height: 650,
+        deviceScaleFactor: 2
+      });
+      await page.setContent(fullHtml, { waitUntil: "networkidle0" });
+      const { width, height } = await page.evaluate(() => ({
+        width: document.body.scrollWidth,
+        height: document.body.scrollHeight
+      }));
+      await page.setViewport({ width, height, deviceScaleFactor: 2 });
+      const image = await page.screenshot({ type: "png", omitBackground: true });
+      await session.send(session.text(".msg", { "quote": import_koishi2.h.quote(session.messageId), "image": import_koishi2.h.image(image, "image/png") }));
+    } catch (err) {
+      await session.send(session.text(".failed", { "quote": import_koishi2.h.quote(session.messageId), "time": time, "data": "图片渲染失败" }));
+      log.error("图片渲染失败:", err);
+      return 1;
+    } finally {
+      if (page && !page.isClosed()) await page.close();
+    }
     log.debug("Sent: Image");
   } else {
     if (response.code) {
@@ -733,9 +682,58 @@ async function getQQInfo(ctx, session, qq) {
   return 0;
 }
 __name(getQQInfo, "getQQInfo");
+async function getMsg(ctx, session) {
+  const log = ctx.logger("getQQInfo");
+  log.debug(`Got: {"form":"${session.event.guild?.id}","user":"${session.event.user?.id}","timestamp":${session.event.timestamp},"messageId":"${session.event.message?.id}"}`);
+  const time = getHongKongTime();
+  if (!session.quote || !session.quote.user) {
+    await session.send(session.text(".null"));
+    log.warn("未引用任何信息");
+    return 1;
+  }
+  const user = await session.bot.getUser(session.quote.user.id, session.channelId);
+  const msg = session.quote.content;
+  if (!user.name || !user.avatar) {
+    await session.send(session.text(".failed", { "quote": import_koishi2.h.quote(session.messageId), "time": time, "data": "获取用户信息失败。" }));
+    log.error("获取用户信息失败");
+    return 1;
+  }
+  const page = await ctx.puppeteer.page();
+  const html = await readUserMsgFile(user.name, user.avatar, msg);
+  try {
+    await page.setViewport({
+      width: 400,
+      height: 800,
+      deviceScaleFactor: 2
+    });
+    await page.setContent(html, { waitUntil: "networkidle0" });
+    const element = await page.$("#target-element");
+    if (element) {
+      const image = await element.screenshot({
+        type: "png",
+        omitBackground: true
+        // 使得 CSS 中未定义的背景部分透明
+      });
+      await session.send(session.text(".msg", { "quote": import_koishi2.h.quote(session.messageId), "image": import_koishi2.h.image(image, "image/png") }));
+      log.debug("Sent: Image");
+    } else {
+      await session.send(session.text(".failed", { "quote": import_koishi2.h.quote(session.messageId), "time": time, "data": "未找到目标元素。" }));
+      log.error("未找到目标元素");
+      return 1;
+    }
+  } catch (err) {
+    await session.send(session.text(".failed", { "quote": import_koishi2.h.quote(session.messageId), "time": time, "data": "图片渲染失败" }));
+    log.error("图片渲染失败:", err);
+    return 1;
+  } finally {
+    if (page && !page.isClosed()) await page.close();
+  }
+  return 0;
+}
+__name(getMsg, "getMsg");
 
 // package.json
-var version = "2.18.1";
+var version = "2.20.0";
 
 // src/index.ts
 var inject = ["database", "installer", "puppeteer"];
@@ -824,10 +822,8 @@ function apply(ctx) {
     const rw = await getRandomWord(ctx, session);
     if (rw["success"] == 0) {
       return session?.text(".msg", rw);
-    } else if (rw["success"] == 1) {
-      return session?.text(".failed1", rw);
     } else {
-      return session?.text(".failed2", rw);
+      return session?.text(".failed", rw);
     }
   });
   ctx.command("randomBA").alias("随机ba图").action(async ({ session }) => {
@@ -853,6 +849,9 @@ function apply(ctx) {
     if (qq == void 0 || isNaN(Number(qq))) return session?.text(".command");
     await getQQInfo(ctx, session, qq);
   });
+  ctx.command("msg2img").alias("消息转图").alias("m").action(async ({ session }) => {
+    await getMsg(ctx, session);
+  });
 }
 __name(apply, "apply");
 // Annotate the CommonJS export names for ESM import in node:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-node-async-bot-all",
   "description": "NodeAsync Bot插件（自用）",
-  "version": "2.18.1",
+  "version": "2.20.0",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "contributors": [

package/res/userCard.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>User Profile Card</title>
+  <title>UserCard</title>
   <style>
     /* 全局重置 */
     * {

package/res/userMsg.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>UserMsg</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      background-color: transparent; /* 背景透明 */
+      padding: 20px;
+      display: flex;
+      justify-content: flex-start;
+    }
+
+    /* 消息容器 */
+    .msg-container {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      max-width: 100%;
+      background: #f5f5f5; /* 卡片背景色，如果是生成透明图可以去掉 */
+      padding: 20px;
+      border-radius: 12px;
+      /* 如果你想让图片就是气泡本身，可以去掉上面的 background 和 padding，保留下面的布局 */
+    }
+
+    /* 头像 */
+    .avatar {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background-color: #ddd;
+      object-fit: cover;
+      flex-shrink: 0; /* 防止头像被压缩 */
+      margin-right: 12px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
+    /* 右侧内容区域 */
+    .content-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* 用户名 */
+    .username {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 4px;
+      font-weight: 500;
+    }
+
+    /* 消息气泡 */
+    .bubble {
+      background-color: #fff;
+      color: #333;
+      padding: 10px 14px;
+      border-radius: 0 12px 12px 12px; /* 左上角直角，其余圆角 */
+      font-size: 16px;
+      line-height: 1.5;
+      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+      position: relative;
+      word-wrap: break-word; /* 强制换行 */
+    }
+  </style>
+</head>
+<body>
+<!-- 目标截图元素 -->
+<div id="target-element" class="msg-container">
+  <img class="avatar" src="{userData.avatarUrl}" />
+  <div class="content-wrapper">
+    <div class="username">{userData.username}</div>
+    <div class="bubble">
+      {userData.message}
+    </div>
+  </div>
+</div>
+</body>
+</html>