feat:添加链接卡片样式

src/App.vue

@@ -86,7 +86,7 @@ import markdownHeader from "./components/header/md-header";
 import markdownFooter from "./components/footer/md-footer";
 import markdownEditor from "./components/content/md-textarea";
 import markdownPreview from "./components/content/md-preview";
-import { formatText, checktUrl } from "@/assets/js/utils";
+import { formatText, checktUrl, getLinkTitle } from "@/assets/js/utils";
 export default {
   components: {
     markdownHeader,
@@ -368,10 +368,16 @@ export default {
           const linkEl = vDom.querySelector("#" + item.id);
           linkEl.className = "md_link_card";
           linkEl.setAttribute("target", "_blank");
+          const title = getLinkTitle(linkEl);
           linkEl.innerHTML = `
-          <span class="md_link_title">${item.title}</span>
+          <span class="md_link_title">${title || item.title}</span>
+          <span class="md_flex_card">
+            <img class="md_link_img" src="${item.img}" />
+            <span class="flex-1">
               <span class="md_link_desc">${item.desc}</span>
               <span class="md_link_url">${item.url}</span>
+            </span>
+          </span>
           `;
         });
         // return vDom.innerHTML;

src/assets/js/utils.js

@@ -330,3 +330,8 @@ export function getLinkTags(id, html) {
   );
   return { vDom: virtualDom, links };
 }
+
+export function getLinkTitle(linkEl) {
+  const title = linkEl.innerText;
+  return /^http/.test(title) ? "" : title;
+}

src/assets/style/card.less

@@ -6,12 +6,16 @@
   border: 1px solid var(--md-editor-border-color);
   background: #f5f6f7;
   transition: border 0.3s;
+  max-width: 800px;
   &:hover {
     border: 1px solid var(--md-editor-border-color-active);
   }
   span {
     color: var(--md-editor-text-color-active);
-    display: block;
+  }
+  .md_link_img {
+    height: 64px;
+    margin-right: 16px;
   }
   .md_link_title {
     font-size: 16px;
@@ -36,5 +40,9 @@
   .md_link_url {
     font-size: 12px;
     color: var(--md-editor-border-color-active);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
   }
 }

src/assets/style/global.less

 @import "./variable.less";
 @import "./iconfont.less";
 @import "./markdown.less";
-@import './card.less';
+@import "./card.less";
 
 * {
   padding: 0;
@@ -48,3 +48,12 @@ textarea {
 //   display: block;
 //   margin: 0;
 // }
+
+.md_flex_card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .flex-1 {
+    flex: 1;
+  }
+}