Ver código fonte

图片问题修复

tianyun 1 ano atrás
pai
commit
35cf2f7e21
2 arquivos alterados com 46 adições e 66 exclusões
  1. 28 20
      simple-demo/send_memos.html
  2. 18 46
      tmp/tmp.html

+ 28 - 20
simple-demo/send_memos.html

@@ -266,6 +266,13 @@
 
     let tmpId;
 
+
+
+    function formatTimeStr(timeStr) {
+        //  "2024-04-25T08:25:54" 转为 "2024-04-25 08:25:54"
+        return timeStr.replace('T', ' ').substring(0, 19);
+    }
+    let resourceMap = {};
     // 更新数据
     async function updateById() {
         let content = getModelContent();
@@ -281,13 +288,28 @@
             hideModel();
             // 根据id ,更新当前页面
             document.getElementById('time_' + tmpId).innerText = document.getElementById('created_ts').value;
-            document.getElementById(tmpId).innerText = content;
+            let contentDom = document.getElementById(tmpId);
+            contentDom.innerText = content;
+            if (resourceMap[tmpId]) {
+                appendImg(contentDom, tmpId);
+            }
         });
     }
-
-    function formatTimeStr(timeStr) {
-        //  "2024-04-25T08:25:54" 转为 "2024-04-25 08:25:54"
-        return timeStr.replace('T', ' ').substring(0, 19);
+    function appendImg(tmpDiv, id) {
+        // tmpDiv 新增一个换行
+        tmpDiv.appendChild(document.createElement('br'));
+        // 循环遍历,以memo_id为key,resource_name数组为value
+        resourceMap[id].forEach(internal_path => {
+            // 创建img
+            let img = document.createElement('img');
+            img.src = `https://memos_assert.tianyunperfect.cn/${internal_path}?width=150`;
+            img.style.maxHeight = '200px';
+            img.style.maxWidth = '200px';
+            img.style.margin = '10px 10px 0 0';
+            img.style.cursor = 'pointer';
+            // 添加到div
+            tmpDiv.appendChild(img);
+        });
     }
 
     function search() {
@@ -333,7 +355,6 @@
             let sourceRes = requestUtil.sync(sourceUrl, 'post', sourceData, {});
             // {'code': 200, 'res': [{'memo_id': 1, 'resource_name': 'EfdmvRsodBviDQWRmDiTaV'}, {'memo_id': 4, 'resource_name': '2rY5kmn3AHsy23vK4vSskV'}, {'memo_id': 7, 'resource_name': 'FMhzJXjoTa7fdtbbCBjXnt'}]}
             // 循环遍历,以memo_id为key,resource_name数组为value
-            let resourceMap = {};
             sourceRes['res'].forEach(item => {
                 if (resourceMap[item['memo_id']]) {
                     resourceMap[item['memo_id']].push(item['internal_path']);
@@ -387,20 +408,7 @@
                 };
                 // 根据id,查找是否存在资源
                 if (resourceMap[id]) {
-                    // tmpDiv 新增一个换行
-                    tmpDiv.appendChild(document.createElement('br'));
-                    // 循环遍历,以memo_id为key,resource_name数组为value
-                    resourceMap[id].forEach(internal_path => {
-                        // 创建img
-                        let img = document.createElement('img');
-                        img.src = `https://memos_assert.tianyunperfect.cn/${internal_path}?width=150`;
-                        img.style.maxHeight = '200px';
-                        img.style.maxWidth = '200px';
-                        img.style.margin = '10px 10px 0 0';
-                        img.style.cursor = 'pointer';
-                        // 添加到div
-                        tmpDiv.appendChild(img);
-                    });
+                    appendImg(tmpDiv, id);
                 }
                 contentDiv.appendChild(tmpDiv);
 

+ 18 - 46
tmp/tmp.html

@@ -4,53 +4,25 @@
     <meta charset="UTF-8">
     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
     <title>可爱登录页面</title>
+    <style>
+        .wrap {
+            display: flex;
+            justify-content: space-between;
+            /*justify-content: center;*/
+            /*align-items: center;*/
+            /*height: 100vh;*/
+        }
+        .item{
+            width: 30vw;
+        }
+    </style>
 </head>
 <body>
-<ul role="menu" tabindex="-1" id=":r3q:" class="base-Popper-root MuiMenu-root Mui-expanded MuiMenu-variantOutlined MuiMenu-colorNeutral MuiMenu-sizeSm text-sm css-10pgqlj" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(-609px, 222px);" data-popper-placement="bottom-end">
-    <li tabindex="-1" id=":r61:" role="menuitem" data-first-child="" class="MuiMenuItem-root MuiMenuItem-colorNeutral MuiMenuItem-variantPlain css-1ktfst">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bookmark-plus w-4 h-auto">
-            <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
-            <line x1="12" x2="12" y1="7" y2="13"></line>
-            <line x1="15" x2="9" y1="10" y2="10"></line>
-        </svg>
-        置顶
-    </li>
-    <li tabindex="0" id=":r63:" role="menuitem" class="MuiMenuItem-root MuiMenuItem-colorNeutral MuiMenuItem-variantPlain css-v9ptvp">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pen-line w-4 h-auto">
-            <path d="M12 20h9"></path>
-            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"></path>
-        </svg>
-        编辑
-    </li>
-    <li tabindex="-1" id=":r65:" role="menuitem" class="MuiMenuItem-root MuiMenuItem-colorNeutral MuiMenuItem-variantPlain css-v9ptvp">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-share w-4 h-auto">
-            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
-            <polyline points="16 6 12 2 8 6"></polyline>
-            <line x1="12" x2="12" y1="2" y2="15"></line>
-        </svg>
-        分享
-    </li>
-    <li tabindex="-1" id=":r67:" role="menuitem" class="MuiMenuItem-root MuiMenuItem-colorWarning MuiMenuItem-variantPlain css-1yoneze">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-archive w-4 h-auto">
-            <rect width="20" height="5" x="2" y="3" rx="1"></rect>
-            <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"></path>
-            <path d="M10 12h4"></path>
-        </svg>
-        归档
-    </li>
-    <li tabindex="-1" id=":r69:" role="menuitem" class="MuiMenuItem-root MuiMenuItem-colorDanger MuiMenuItem-variantPlain css-1ofh05v">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash w-4 h-auto">
-            <path d="M3 6h18"></path>
-            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
-            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
-        </svg>
-        删除
-    </li>
-    <hr class="MuiDivider-root MuiDivider-horizontal !my-1 css-w2e6ki">
-    <div class="-mt-0.5 pl-2 pr-2 text-xs text-gray-400" data-last-child="">
-        <div class="mt-1 font-mono max-w-20 cursor-pointer truncate">ID: 7dizy8qk94UUaDrSTq4B2z</div>
-    </div>
-</ul>
+<div class="wrap">
+    <div class="item">123</div>
+    <div class="item">123</div>
+    <div class="item">123</div>
+</div>
 
 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.16/vue.min.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
@@ -58,6 +30,6 @@
 <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
 </body>
 <script>
-<!--   -->
+    <!--   -->
 </script>
 </html>