feat: 首页添加版本更新日志模块

package.json

@@ -76,6 +76,7 @@
     "vue-types": "^4.2.1",
     "vue-virtual-scroller": "^2.0.0-alpha.1",
     "vue3-danmaku": "^1.0.0",
+    "vue3-markdown-it": "^1.0.10",
     "vuedraggable": "^4.1.0",
     "vxe-table": "^4.3.6",
     "xe-utils": "^3.5.7",
@@ -102,6 +103,7 @@
     "@types/js-cookie": "^3.0.1",
     "@types/lodash": "^4.14.180",
     "@types/lodash-es": "^4.17.6",
+    "@types/markdown-it": "^12.2.3",
     "@types/mockjs": "^1.0.7",
     "@types/node": "^18.11.9",
     "@types/nprogress": "0.2.0",

pnpm-lock.yaml

@@ -28,6 +28,7 @@ specifiers:
   "@types/js-cookie": ^3.0.1
   "@types/lodash": ^4.14.180
   "@types/lodash-es": ^4.17.6
+  "@types/markdown-it": ^12.2.3
   "@types/mockjs": ^1.0.7
   "@types/node": ^18.11.9
   "@types/nprogress": 0.2.0
@@ -118,6 +119,7 @@ specifiers:
   vue-types: ^4.2.1
   vue-virtual-scroller: ^2.0.0-alpha.1
   vue3-danmaku: ^1.0.0
+  vue3-markdown-it: ^1.0.10
   vuedraggable: ^4.1.0
   vxe-table: ^4.3.6
   xe-utils: ^3.5.7
@@ -172,6 +174,7 @@ dependencies:
   vue-types: 4.2.1_vue@3.2.45
   vue-virtual-scroller: 2.0.0-beta.3_vue@3.2.45
   vue3-danmaku: 1.0.0_vue@3.2.45
+  vue3-markdown-it: 1.0.10_@types+markdown-it@12.2.3
   vuedraggable: 4.1.0_vue@3.2.45
   vxe-table: 4.3.6_vue@3.2.45+xe-utils@3.5.7
   xe-utils: 3.5.7
@@ -198,6 +201,7 @@ devDependencies:
   "@types/js-cookie": 3.0.2
   "@types/lodash": 4.14.190
   "@types/lodash-es": 4.17.6
+  "@types/markdown-it": 12.2.3
   "@types/mockjs": 1.0.7
   "@types/node": 18.11.9
   "@types/nprogress": 0.2.0
@@ -1504,6 +1508,12 @@ packages:
       }
     dev: true
 
+  /@types/linkify-it/3.0.2:
+    resolution:
+      {
+        integrity: sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
+      }
+
   /@types/lodash-es/4.17.6:
     resolution:
       {
@@ -1518,6 +1528,21 @@ packages:
         integrity: sha512-5iJ3FBJBvQHQ8sFhEhJfjUP+G+LalhavTkYyrAYqz5MEJG+erSv0k9KJLb6q7++17Lafk1scaTIFXcMJlwK8Mw==
       }
 
+  /@types/markdown-it/12.2.3:
+    resolution:
+      {
+        integrity: sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==
+      }
+    dependencies:
+      "@types/linkify-it": 3.0.2
+      "@types/mdurl": 1.0.2
+
+  /@types/mdurl/1.0.2:
+    resolution:
+      {
+        integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
+      }
+
   /@types/minimatch/3.0.5:
     resolution:
       {
@@ -2644,7 +2669,6 @@ packages:
       {
         integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
       }
-    dev: true
 
   /array-differ/3.0.0:
     resolution:
@@ -3911,6 +3935,13 @@ packages:
       ansi-colors: 4.1.3
     dev: true
 
+  /entities/2.1.0:
+    resolution:
+      {
+        integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
+      }
+    dev: false
+
   /entities/2.2.0:
     resolution:
       {
@@ -5128,6 +5159,14 @@ packages:
       }
     dev: false
 
+  /highlight.js/11.7.0:
+    resolution:
+      {
+        integrity: sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==
+      }
+    engines: { node: ">=12.0.0" }
+    dev: false
+
   /hosted-git-info/2.8.9:
     resolution:
       {
@@ -5697,6 +5736,15 @@ packages:
       }
     dev: true
 
+  /linkify-it/3.0.3:
+    resolution:
+      {
+        integrity: sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
+      }
+    dependencies:
+      uc.micro: 1.0.6
+    dev: false
+
   /lint-staged/11.1.2:
     resolution:
       {
@@ -5807,6 +5855,13 @@ packages:
       }
     dev: false
 
+  /lodash.flow/3.5.0:
+    resolution:
+      {
+        integrity: sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==
+      }
+    dev: false
+
   /lodash.foreach/4.5.0:
     resolution:
       {
@@ -5951,6 +6006,113 @@ packages:
     engines: { node: ">=8" }
     dev: true
 
+  /markdown-it-abbr/1.0.4:
+    resolution:
+      {
+        integrity: sha512-ZeA4Z4SaBbYysZap5iZcxKmlPL6bYA8grqhzJIHB1ikn7njnzaP8uwbtuXc4YXD5LicI4/2Xmc0VwmSiFV04gg==
+      }
+    dev: false
+
+  /markdown-it-anchor/8.6.5_2zb4u3vubltivolgu556vv4aom:
+    resolution:
+      {
+        integrity: sha512-PI1qEHHkTNWT+X6Ip9w+paonfIQ+QZP9sCeMYi47oqhH+EsW8CrJ8J7CzV19QVOj6il8ATGbK2nTECj22ZHGvQ==
+      }
+    peerDependencies:
+      "@types/markdown-it": "*"
+      markdown-it: "*"
+    dependencies:
+      "@types/markdown-it": 12.2.3
+      markdown-it: 12.3.2
+    dev: false
+
+  /markdown-it-deflist/2.1.0:
+    resolution:
+      {
+        integrity: sha512-3OuqoRUlSxJiuQYu0cWTLHNhhq2xtoSFqsZK8plANg91+RJQU1ziQ6lA2LzmFAEes18uPBsHZpcX6We5l76Nzg==
+      }
+    dev: false
+
+  /markdown-it-emoji/2.0.2:
+    resolution:
+      {
+        integrity: sha512-zLftSaNrKuYl0kR5zm4gxXjHaOI3FAOEaloKmRA5hijmJZvSjmxcokOLlzycb/HXlUFWzXqpIEoyEMCE4i9MvQ==
+      }
+    dev: false
+
+  /markdown-it-footnote/3.0.3:
+    resolution:
+      {
+        integrity: sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w==
+      }
+    dev: false
+
+  /markdown-it-highlightjs/3.6.0:
+    resolution:
+      {
+        integrity: sha512-ex+Lq3cVkprh0GpGwFyc53A/rqY6GGzopPCG1xMsf8Ya3XtGC8Uw9tChN1rWbpyDae7tBBhVHVcMM29h4Btamw==
+      }
+    dependencies:
+      highlight.js: 11.7.0
+      lodash.flow: 3.5.0
+    dev: false
+
+  /markdown-it-ins/3.0.1:
+    resolution:
+      {
+        integrity: sha512-32SSfZqSzqyAmmQ4SHvhxbFqSzPDqsZgMHDwxqPzp+v+t8RsmqsBZRG+RfRQskJko9PfKC2/oxyOs4Yg/CfiRw==
+      }
+    dev: false
+
+  /markdown-it-mark/3.0.1:
+    resolution:
+      {
+        integrity: sha512-HyxjAu6BRsdt6Xcv6TKVQnkz/E70TdGXEFHRYBGLncRE9lBFwDNLVtFojKxjJWgJ+5XxUwLaHXy+2sGBbDn+4A==
+      }
+    dev: false
+
+  /markdown-it-sub/1.0.0:
+    resolution:
+      {
+        integrity: sha512-z2Rm/LzEE1wzwTSDrI+FlPEveAAbgdAdPhdWarq/ZGJrGW/uCQbKAnhoCsE4hAbc3SEym26+W2z/VQB0cQiA9Q==
+      }
+    dev: false
+
+  /markdown-it-sup/1.0.0:
+    resolution:
+      {
+        integrity: sha512-E32m0nV9iyhRR7CrhnzL5msqic7rL1juWre6TQNxsnApg7Uf+F97JOKxUijg5YwXz86lZ0mqfOnutoryyNdntQ==
+      }
+    dev: false
+
+  /markdown-it-task-lists/2.1.1:
+    resolution:
+      {
+        integrity: sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==
+      }
+    dev: false
+
+  /markdown-it-toc-done-right/4.2.0:
+    resolution:
+      {
+        integrity: sha512-UB/IbzjWazwTlNAX0pvWNlJS8NKsOQ4syrXZQ/C72j+jirrsjVRT627lCaylrKJFBQWfRsPmIVQie8x38DEhAQ==
+      }
+    dev: false
+
+  /markdown-it/12.3.2:
+    resolution:
+      {
+        integrity: sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
+      }
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 2.1.0
+      linkify-it: 3.0.3
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: false
+
   /mathml-tag-names/2.1.3:
     resolution:
       {
@@ -5972,6 +6134,13 @@ packages:
       }
     dev: true
 
+  /mdurl/1.0.1:
+    resolution:
+      {
+        integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
+      }
+    dev: false
+
   /memoize-one/6.0.0:
     resolution:
       {
@@ -8490,6 +8659,13 @@ packages:
     engines: { node: ">=4.2.0" }
     hasBin: true
 
+  /uc.micro/1.0.6:
+    resolution:
+      {
+        integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+      }
+    dev: false
+
   /unidragger/2.4.0:
     resolution:
       {
@@ -8928,6 +9104,29 @@ packages:
       vue: 3.2.45
     dev: false
 
+  /vue3-markdown-it/1.0.10_@types+markdown-it@12.2.3:
+    resolution:
+      {
+        integrity: sha512-mTvHu0zl7jrh7ojgaZ+tTpCLiS4CVg4bTgTu4KGhw/cRRY5YgIG8QgFAPu6kCzSW6Znc9a52Beb6hFvF4hSMkQ==
+      }
+    dependencies:
+      markdown-it: 12.3.2
+      markdown-it-abbr: 1.0.4
+      markdown-it-anchor: 8.6.5_2zb4u3vubltivolgu556vv4aom
+      markdown-it-deflist: 2.1.0
+      markdown-it-emoji: 2.0.2
+      markdown-it-footnote: 3.0.3
+      markdown-it-highlightjs: 3.6.0
+      markdown-it-ins: 3.0.1
+      markdown-it-mark: 3.0.1
+      markdown-it-sub: 1.0.0
+      markdown-it-sup: 1.0.0
+      markdown-it-task-lists: 2.1.1
+      markdown-it-toc-done-right: 4.2.0
+    transitivePeerDependencies:
+      - "@types/markdown-it"
+    dev: false
+
   /vuedraggable/4.1.0_vue@3.2.45:
     resolution:
       {

src/views/able/timeline.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { markRaw } from "vue";
 import { useRenderFlicker } from "@/components/ReFlicker";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
 defineOptions({
   name: "TimeLine"
@@ -11,12 +12,12 @@ const activities = [
   {
     content: "支持圆点闪动",
     timestamp: lastBuildTime,
-    icon: useRenderFlicker()
+    icon: markRaw(useRenderFlicker())
   },
   {
     content: "支持方形闪动",
     timestamp: lastBuildTime,
-    icon: useRenderFlicker({ borderRadius: 0, background: "#67C23A" })
+    icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" }))
   },
   {
     content: "支持默认颜色",

src/views/welcome/components/Bar.vue

@@ -22,9 +22,11 @@ setOptions(
       }
     },
     grid: {
-      bottom: "20%",
+      containLabel: true,
-      height: "68%",
+      top: "10px",
-      containLabel: true
+      bottom: "0",
+      left: "0",
+      right: "0"
     },
     xAxis: [
       {
@@ -49,7 +51,7 @@ setOptions(
       {
         name: "GitHub信息",
         type: "bar",
-        data: [3, 204, 1079, 1079]
+        data: [1000, 10000, 20000, 66666]
       }
     ]
   },

src/views/welcome/components/Infinite.vue

@@ -1,133 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive } from "vue";
-import SeamlessScroll from "@/components/ReSeamlessScroll";
-
-const scroll = ref();
-
-const listData = ref([
-  {
-    date: "2021-09-01",
-    name: "vue-pure-admin",
-    star: "1000"
-  },
-  {
-    date: "2021-09-02",
-    name: "vue-pure-admin",
-    star: "1100"
-  },
-  {
-    date: "2021-09-03",
-    name: "vue-pure-admin",
-    star: "1200"
-  },
-  {
-    date: "2021-09-04",
-    name: "vue-pure-admin",
-    star: "1300"
-  },
-  {
-    date: "2021-09-05",
-    name: "vue-pure-admin",
-    star: "1400"
-  },
-  {
-    date: "2021-09-06",
-    name: "vue-pure-admin",
-    star: "1500"
-  },
-  {
-    date: "2021-09-07",
-    name: "vue-pure-admin",
-    star: "1600"
-  },
-  {
-    date: "2021-09-08",
-    name: "vue-pure-admin",
-    star: "1700"
-  },
-  {
-    date: "2021-09-09",
-    name: "vue-pure-admin",
-    star: "1800"
-  },
-  {
-    date: "2021-09-10",
-    name: "vue-pure-admin",
-    star: "1900"
-  }
-]);
-
-const classOption = reactive({
-  direction: "top"
-});
-</script>
-
-<template>
-  <div class="infinite bg-bg_color">
-    <ul class="top">
-      <li>更新日期</li>
-      <li>项目名称</li>
-      <li>Star数量</li>
-    </ul>
-    <SeamlessScroll
-      ref="scroll"
-      :data="listData"
-      :class-option="classOption"
-      class="warp"
-    >
-      <ul class="item">
-        <li v-for="(item, index) in listData" :key="index">
-          <span v-text="item.date" />
-          <span v-text="item.name" />
-          <span v-text="item.star" />
-        </li>
-      </ul>
-    </SeamlessScroll>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.infinite {
-  .top {
-    width: 95%;
-    height: 40px;
-    line-height: 40px;
-    display: flex;
-    margin: 0 auto;
-    font-size: 14px;
-    color: #909399;
-    font-weight: 400;
-    // background: #fafafa;
-
-    li {
-      width: 34%;
-      text-align: center;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .warp {
-    width: 95%;
-    height: 215px;
-    margin: 0 auto;
-    overflow: hidden;
-
-    li {
-      height: 30px;
-      line-height: 30px;
-      display: flex;
-      font-size: 15px;
-    }
-
-    span {
-      width: 34%;
-      text-align: center;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-}
-</style>

src/views/welcome/components/Line.vue

@@ -15,14 +15,16 @@ const { setOptions } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
 
 setOptions(
   {
-    grid: {
-      bottom: "20%",
-      height: "68%",
-      containLabel: true
-    },
     tooltip: {
       trigger: "item"
     },
+    grid: {
+      containLabel: true,
+      top: "10px",
+      bottom: "0",
+      left: "0",
+      right: "0"
+    },
     xAxis: {
       type: "category",
       axisLabel: {
@@ -35,7 +37,7 @@ setOptions(
     },
     series: [
       {
-        data: [3, 204, 1079, 1079],
+        data: [1000, 10000, 20000, 66666],
         type: "line",
         areaStyle: {}
       }

src/views/welcome/components/Pie.vue

@@ -27,13 +27,14 @@ setOptions(
       {
         name: "Github信息",
         type: "pie",
-        radius: "60%",
+        top: "20%",
+        radius: "80%",
         center: ["40%", "50%"],
         data: [
-          { value: 1079, name: "watchers" },
+          { value: 20000, name: "watchers" },
-          { value: 1079, name: "star" },
+          { value: 66666, name: "star" },
-          { value: 204, name: "forks" },
+          { value: 10000, name: "forks" },
-          { value: 3, name: "open_issues" }
+          { value: 1000, name: "open_issues" }
         ],
         emphasis: {
           itemStyle: {

src/views/welcome/components/columns.tsx

@@ -1,4 +1,5 @@
 import { IconifyIconOffline } from "@/components/ReIcon";
+import TypeIt from "@/components/ReTypeit";
 
 export function useColumns() {
   const lists = [
@@ -41,7 +42,7 @@ export function useColumns() {
           居住地
         </div>
       ),
-      value: "上海"
+      value: "杭州"
     }
   ];
 
@@ -74,7 +75,7 @@ export function useColumns() {
           联系地址
         </div>
       ),
-      value: "上海市徐汇区"
+      value: "杭州市西湖区"
     }
   ];
 
@@ -88,7 +89,14 @@ export function useColumns() {
           好好学习，天天向上
         </div>
       ),
-      value: "上海市徐汇区"
+      cellRenderer: () => (
+        <TypeIt
+          className={"github"}
+          values={["Coding as art. Keep open source. Enjoy open source."]}
+          cursor={false}
+          speed={40}
+        />
+      )
     }
   ];
 

src/views/welcome/index.vue

@@ -1,18 +1,25 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import axios from "axios";
 import Bar from "./components/Bar.vue";
 import Pie from "./components/Pie.vue";
+import Markdown from "vue3-markdown-it";
 import Line from "./components/Line.vue";
-import { openLink } from "@pureadmin/utils";
+import TypeIt from "@/components/ReTypeit";
 import Github from "./components/Github.vue";
-import Infinite from "./components/Infinite.vue";
+import { ref, computed, markRaw } from "vue";
+import { openLink, randomColor } from "@pureadmin/utils";
+import { useRenderFlicker } from "@/components/ReFlicker";
 
 defineOptions({
   name: "Welcome"
 });
 
+const list = ref();
 const date: Date = new Date();
 const loading = ref<boolean>(true);
+const titleClass = computed(() => {
+  return ["text-base", "font-medium"];
+});
 
 setTimeout(() => {
   loading.value = !loading.value;
@@ -27,6 +34,22 @@ const greetings = computed(() => {
     return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
   }
 });
+
+axios
+  .get("https://api.github.com/repos/xiaoxian521/vue-pure-admin/releases")
+  .then(res => {
+    list.value = res.data.map(v => {
+      return {
+        content: v.body,
+        timestamp: v.published_at,
+        icon: markRaw(
+          useRenderFlicker({
+            background: randomColor({ type: "hex" }) as string
+          })
+        )
+      };
+    });
+  });
 </script>
 
 <template>
@@ -38,7 +61,12 @@ const greetings = computed(() => {
           title="直达仓库地址"
           @click="openLink('https://github.com/xiaoxian521/vue-pure-admin')"
         />
-        <span>{{ greetings }}</span>
+        <TypeIt
+          :className="'type-it0'"
+          :values="[greetings]"
+          :cursor="false"
+          :speed="60"
+        />
       </div>
     </el-card>
 
@@ -65,7 +93,14 @@ const greetings = computed(() => {
       >
         <el-card style="height: 360px">
           <template #header>
-            <span style="font-size: 16px; font-weight: 500">GitHub信息</span>
+            <span :class="titleClass">
+              <TypeIt
+                :className="'type-it1'"
+                :values="['GitHub信息']"
+                :cursor="false"
+                :speed="120"
+              />
+            </span>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>
@@ -97,13 +132,30 @@ const greetings = computed(() => {
       >
         <el-card style="height: 360px">
           <template #header>
-            <span style="font-size: 16px; font-weight: 500">
+            <span :class="titleClass">
-              GitHub滚动信息
+              <TypeIt
+                :className="'type-it2'"
+                :values="['Pure-Admin 版本日志']"
+                :cursor="false"
+                :speed="120"
+              />
             </span>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>
-              <Infinite />
+              <el-scrollbar height="274px">
+                <el-timeline v-show="list?.length > 0">
+                  <el-timeline-item
+                    v-for="(item, index) in list"
+                    :key="index"
+                    :icon="item.icon"
+                    :timestamp="item.timestamp"
+                  >
+                    <Markdown :source="item.content" />
+                  </el-timeline-item>
+                </el-timeline>
+                <el-empty v-show="list?.length === 0" />
+              </el-scrollbar>
             </template>
           </el-skeleton>
         </el-card>
@@ -131,8 +183,13 @@ const greetings = computed(() => {
       >
         <el-card>
           <template #header>
-            <span style="font-size: 16px; font-weight: 500">
+            <span :class="titleClass">
-              GitHub饼图信息
+              <TypeIt
+                :className="'type-it3'"
+                :values="['GitHub饼图信息']"
+                :cursor="false"
+                :speed="120"
+              />
             </span>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
@@ -165,8 +222,13 @@ const greetings = computed(() => {
       >
         <el-card>
           <template #header>
-            <span style="font-size: 16px; font-weight: 500">
+            <span :class="titleClass">
-              GitHub折线图信息
+              <TypeIt
+                :className="'type-it4'"
+                :values="['GitHub折线图信息']"
+                :cursor="false"
+                :speed="120"
+              />
             </span>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
@@ -199,8 +261,13 @@ const greetings = computed(() => {
       >
         <el-card>
           <template #header>
-            <span style="font-size: 16px; font-weight: 500">
+            <span :class="titleClass">
-              GitHub柱状图信息
+              <TypeIt
+                :className="'type-it5'"
+                :values="['GitHub柱状图信息']"
+                :cursor="false"
+                :speed="120"
+              />
             </span>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
@@ -214,13 +281,11 @@ const greetings = computed(() => {
   </div>
 </template>
 
-<style module scoped>
-.size {
-  height: 335px;
-}
-</style>
-
 <style lang="scss" scoped>
+:deep(.el-timeline-item) {
+  margin: 6px 0 0 6px;
+}
+
 .main-content {
   margin: 0 !important;
 }