From 9db2d1e196b3a2bd6fd9cec6d2bd10fc17f48486 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com>
Date: Fri, 23 Jul 2021 11:45:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E9=93=BE=E6=8E=A5?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                  | 14 ++++++++++----
 src/assets/js/utils.js       |  5 +++++
 src/assets/style/card.less   | 10 +++++++++-
 src/assets/style/global.less | 13 +++++++++++--
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e27acb7..82e61a3 100644
--- a/src/App.vue
+++ b/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_desc">${item.desc}</span>
-          <span class="md_link_url">${item.url}</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;
diff --git a/src/assets/js/utils.js b/src/assets/js/utils.js
index e8ed806..1d4474f 100644
--- a/src/assets/js/utils.js
+++ b/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;
+}
diff --git a/src/assets/style/card.less b/src/assets/style/card.less
index e72c7ec..34f2d83 100644
--- a/src/assets/style/card.less
+++ b/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;
   }
 }
diff --git a/src/assets/style/global.less b/src/assets/style/global.less
index eac9e74..e953647 100644
--- a/src/assets/style/global.less
+++ b/src/assets/style/global.less
@@ -1,7 +1,7 @@
 @import "./variable.less";
 @import "./iconfont.less";
 @import "./markdown.less";
-@import './card.less';
+@import "./card.less";
 
 * {
   padding: 0;
@@ -47,4 +47,13 @@ textarea {
 // img {
 //   display: block;
 //   margin: 0;
-// }
\ No newline at end of file
+// }
+
+.md_flex_card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .flex-1 {
+    flex: 1;
+  }
+}
-- 
GitLab