From 51ce9d08321d67cfee02c4555743db1170aa71ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B0=E6=99=A8?= <cgl556@88.com>
Date: Tue, 24 Sep 2024 02:35:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E5=A4=87=E5=BF=98=EF=BC=9A?=
 =?UTF-8?q?=20=E9=93=BE=E6=8E=A5=20=E5=8F=98=E8=B6=85=E9=93=BE=E6=8E=A5=20?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=86=92=E6=B3=A1=E6=9C=89=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E3=80=81=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MemoDrawer/index.jsx | 51 ++++++++++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/pages/MemoDrawer/index.jsx b/src/pages/MemoDrawer/index.jsx
index fd16564d..10e18c27 100644
--- a/src/pages/MemoDrawer/index.jsx
+++ b/src/pages/MemoDrawer/index.jsx
@@ -10,7 +10,7 @@ import {
   Drawer, List, Skeleton, Button, Tag,
   Spin, Tooltip, Select, Divider,
   Badge, Space, Dropdown, App, DatePicker,
-  Switch
+  Switch, Popover
 } from "antd";
 import moment from 'moment';
 
@@ -251,19 +251,60 @@ const MemoDrawer = () => {
    * @author Yc
    * @since 2024/9/23 1:27
    */
-  const linkify = (text) => {
+  const linkifyContent = (text) => {
+    // 正则表达式匹配不同类型的 URL
     const urlRegex = /(https?:\/\/[^\s]+)/g;
+    const imageRegex = /\.(jpeg|jpg|gif|png|bmp|webp|svg)$/i; // 匹配图片格式
+    const videoRegex = /\.(mp4|webm|ogg|mov)$/i; // 匹配视频格式
 
     return text.split(urlRegex).map((part, index) => {
-      // 如果匹配到的是 URL，将其转换为 <a> 标签
       if (part.match(urlRegex)) {
+        // 检查是否是图片格式
+        if (imageRegex.test(part)) {
+          return (
+            <Popover
+              content={
+                <div style={{maxWidth: 400, maxHeight: 400}}>
+                  <img
+                    key={index}
+                    src={part}
+                    alt="Embedded content"
+                    style={{width: '100%', maxHeight: '100%', display: 'block', margin: '10px 0'}}
+                  />
+                </div>
+              }
+            >
+              <a key={index} href={part} target="_blank" rel="noopener noreferrer">{part}</a>
+            </Popover>
+          );
+        }
+        // 检查是否是视频格式
+        if (videoRegex.test(part)) {
+          return (
+            <Popover
+              content={
+                <div style={{maxWidth: 600, maxHeight: 600}}>
+                  <video
+                    key={index}
+                    controls
+                    src={part}
+                    style={{width: '100%', display: 'block', margin: '10px 0'}}
+                  />
+                </div>
+              }
+            >
+              <a key={index} href={part} target="_blank" rel="noopener noreferrer">{part}</a>
+            </Popover>
+          );
+        }
+        // 对其他链接格式使用 <a> 标签
         return (
           <a key={index} href={part} target="_blank" rel="noopener noreferrer">
             {part}
           </a>
         );
       }
-      // 否则，返回普通文本
+      // 返回普通文本
       return part;
     });
   };
@@ -302,7 +343,7 @@ const MemoDrawer = () => {
                 style={{height: '70vh', border: '1px solid #ccc', borderRadius: '6px', padding: 9, overflow: 'auto'}}
               >
                 <pre style={{whiteSpace: 'pre-wrap', fontSize: '14px', margin: 0, fontFamily: 'unset'}}>
-                  {linkify(itemObj.content)}
+                  {linkifyContent(itemObj.content)}
                 </pre>
               </div>,
           })