refs #1317 Show link preview in toot

src/renderer/components/molecules/Toot/LinkPreview.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="link">
+    <el-image :src="icon" class="icon" :fit="cover" lazy>
+      <div class="image-slot" slot="error">
+        <i class="el-icon-link"></i>
+      </div>
+    </el-image>
+    <div class="contents">
+      <strong>{{ title }}</strong>
+      <span>{{ description }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'link-preview',
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.link {
+  display: flex;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 4px;
+  border: 1px solid var(--theme-selected-background-color);
+
+  .icon {
+    width: 60px;
+    height: 60px;
+
+    .image-slot {
+      font-size: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      background-color: #f5f7fa;
+      color: #909399;
+    }
+  }
+
+  .contents {
+    box-sizing: border-box;
+    height: 60px;
+    padding: 4px 0 0 10px;
+    color: var(--theme-secondary-color);
+
+    strong {
+      display: block;
+    }
+
+    span {
+      display: block;
+      padding: 4px 0;
+    }
+  }
+}
+</style>

src/renderer/components/organisms/Toot.vue

@@ -89,6 +89,13 @@
           </div>
           <div class="clearfix"></div>
         </div>
+        <LinkPreview
+          v-if="originalMessage.card && originalMessage.card.type === 'link'"
+          :icon="originalMessage.card.image"
+          :title="originalMessage.card.title"
+          :description="originalMessage.card.description"
+          :url="originalMessage.card.url"
+        />
         <div class="reblogger" v-show="message.reblog !== null">
           <icon name="retweet"></icon>
           <span class="reblogger-icon" @click="openUser(message.account)" role="presentation">
@@ -219,6 +226,7 @@ import TimeFormat from '~/src/constants/timeFormat'
 import emojify from '~/src/renderer/utils/emojify'
 import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
 import Poll from '~/src/renderer/components/molecules/Toot/Poll'
+import LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
 import { setInterval, clearInterval } from 'timers'
 
 export default {
@@ -229,7 +237,8 @@ export default {
   components: {
     FailoverImg,
     Poll,
-    Picker
+    Picker,
+    LinkPreview
   },
   data() {
     return {