聊天室：消息里的 URL 自动变成可点击链接（新标签页打开）

- 改造 `renderContent`：原来只处理 @昵称 高亮，现在 @高亮 与 URL 链接化并存。
非 @ 片段再走一遍链接识别，两套 pattern 不互相干扰。
- ⚠️⚠️ **URL 正则必须把中文标点排除在字符类外**：
中文没有空格，`https://example.org。以及后面的话` 若不在 `。` 处停下，
会把整个句子吞进链接里 —— 真机实测踩到，第一版就是错的。
同时 ASCII 尾部标点（`)]}>.,;:!?`）在用 trimUrlTail 剥掉。
- ⚠️ 故意**不**匹配裸域名（`abc.com`）：中文聊天里「图片.png」「3.5 折」极易误判。
- ⚠️ `target="_blank"` 必须配 `rel="noopener noreferrer"`，否则新页面能通过
`window.opener` 反向操作当前页。
- ⚠️ 链接 `onClick` 要 `stopPropagation()`：消息区外层有点击处理。

验证：解析逻辑 11 例单测 + 真机（Playwright）8 项断言全过，
含「中文句末标点未被包进链接」「裸域名不链接化」「点击真的开新标签页并导航到目标地址」。

web/src/app/chat-room/page.tsx

@@ -127,35 +127,99 @@ function Avatar({
   );
 }
 
+// URL 匹配：只认带协议的 http(s) 链接。
+// ⚠️ 故意**不**匹配裸域名（如 `abc.com`）—— 中文聊天里「图片.png」「3.5 折」这类
+// 文本极易被误判成链接，凭肉眼分不清的宁可不当链接。
+// ⚠️⚠️ 必须把**中文标点也排除在字符类之外**：中文没有空格，写
+// `https://example.org。以及后面的话` 时，若不在 `。` 处停下会把整句都吞进链接里。
+const URL_PATTERN = /https?:\/\/[^\s<>"'，。！？；：、（）【】《》“”‘’]+/g;
+
+/** 链接末尾的 ASCII 标点通常属于句子而非 URL，也要剥掉。 */
+function trimUrlTail(url: string) {
+  let end = url;
+  let tail = "";
+  const trailing = /[)\]}>.,;:!?]+$/;
+  const match = trailing.exec(end);
+  if (match) {
+    tail = match[0];
+    end = end.slice(0, match.index);
+  }
+  return { url: end, tail };
+}
+
+/** 单行文本里把 URL 变成可点击的新标签页链接。 */
+function renderLinks(text: string, keyBase: string): React.ReactNode[] {
+  const parts: React.ReactNode[] = [];
+  let cursor = 0;
+  let match: RegExpExecArray | null;
+  let key = 0;
+  URL_PATTERN.lastIndex = 0;
+  while ((match = URL_PATTERN.exec(text)) !== null) {
+    const { url, tail } = trimUrlTail(match[0]);
+    if (!url || url.length <= "https://".length) continue;
+    if (match.index > cursor) parts.push(text.slice(cursor, match.index));
+    parts.push(
+      <a
+        key={`${keyBase}-u${key++}`}
+        href={url}
+        target="_blank"
+        // ⚠️ 必须带 noopener：否则新页面能通过 window.opener 反向操作当前页。
+        rel="noopener noreferrer"
+        className="break-all font-medium text-sky-600 underline underline-offset-2 hover:text-sky-700"
+        onClick={(event) => {
+          // ⚠️ 消息区外层有点击处理（且这行在可点区域内），不拦住会连带触发别处逻辑。
+          event.stopPropagation();
+        }}
+      >
+        {url}
+      </a>,
+    );
+    if (tail) parts.push(tail);
+    cursor = match.index + match[0].length;
+  }
+  if (cursor < text.length) parts.push(text.slice(cursor));
+  return parts;
+}
+
 /**
- * 把消息正文按 @昵称 切成片段，命中的部分高亮。
+ * 把消息正文按 @昵称 切成片段，命中的部分高亮；URL 变成可点击链接。
  *
  * ⚠️ 只做**展示层**高亮，不改动存储的文本：这样消息永远是纯文本，复制 / 搜索都不会带样式，
  * 也不会因为谁改了昵称导致历史消息渲染错乱。
  */
 function renderContent(text: string, mentionNames: string[]) {
   if (!text) return null;
-  if (mentionNames.length === 0) return text;
-  // 长昵称优先匹配，避免「@小张」被「@小」抢先截断。
   const names = [...new Set(mentionNames.filter(Boolean))].sort((a, b) => b.length - a.length);
-  const pattern = new RegExp(
-    `@(${names.map((name) => name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`,
-    "g",
-  );
+  const hasMentionPattern = names.length > 0;
+  const pattern = hasMentionPattern
+    ? new RegExp(
+        `@(${names.map((name) => name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`,
+        "g",
+      )
+    : null;
   const parts: React.ReactNode[] = [];
   let cursor = 0;
-  let match: RegExpExecArray | null;
   let key = 0;
-  while ((match = pattern.exec(text)) !== null) {
-    if (match.index > cursor) parts.push(text.slice(cursor, match.index));
-    parts.push(
-      <span key={`m${key++}`} className="rounded bg-sky-100 px-1 font-medium text-sky-700">
-        @{match[1]}
-      </span>,
-    );
-    cursor = match.index + match[0].length;
+
+  /** 非 @ 片段再走一遍 URL 识别，返回统一 key 的节点数组。 */
+  const pushPlain = (chunk: string) => {
+    if (!chunk) return;
+    parts.push(...renderLinks(chunk, `p${key++}`));
+  };
+
+  if (pattern) {
+    let match: RegExpExecArray | null;
+    while ((match = pattern.exec(text)) !== null) {
+      if (match.index > cursor) pushPlain(text.slice(cursor, match.index));
+      parts.push(
+        <span key={`m${key++}`} className="rounded bg-sky-100 px-1 font-medium text-sky-700">
+          @{match[1]}
+        </span>,
+      );
+      cursor = match.index + match[0].length;
+    }
   }
-  if (cursor < text.length) parts.push(text.slice(cursor));
+  if (cursor < text.length) pushPlain(text.slice(cursor));
   return parts.length > 0 ? parts : text;
 }