perf: 优化首页

build/optimize.ts

@@ -35,6 +35,7 @@ export const include = [
   "vue-json-pretty",
   "@logicflow/core",
   "@pureadmin/utils",
+  "vue3-markdown-it",
   "responsive-storage",
   "@howdyjs/mouse-menu",
   "@logicflow/extension",

package.json

@@ -36,7 +36,7 @@
     "@logicflow/extension": "^1.1.30",
     "@pureadmin/descriptions": "^1.1.0",
     "@pureadmin/table": "^1.8.0",
-    "@pureadmin/utils": "^1.6.7",
+    "@pureadmin/utils": "^1.7.1",
     "@vueuse/core": "^9.6.0",
     "@vueuse/motion": "2.0.0-beta.12",
     "@wangeditor/editor": "^5.1.21",

pnpm-lock.yaml

@@ -22,7 +22,7 @@ specifiers:
   "@pureadmin/descriptions": ^1.1.0
   "@pureadmin/table": ^1.8.0
   "@pureadmin/theme": ^2.4.0
-  "@pureadmin/utils": ^1.6.7
+  "@pureadmin/utils": ^1.7.1
   "@types/element-resize-detector": 1.1.3
   "@types/intro.js": ^5.1.0
   "@types/js-cookie": ^3.0.1
@@ -134,7 +134,7 @@ dependencies:
   "@logicflow/extension": 1.1.31
   "@pureadmin/descriptions": 1.1.1_element-plus@2.2.25
   "@pureadmin/table": 1.8.0_element-plus@2.2.25
-  "@pureadmin/utils": 1.6.7_aotapuqn7htzdjltsyimavekky
+  "@pureadmin/utils": 1.7.1_aotapuqn7htzdjltsyimavekky
   "@vueuse/core": 9.6.0_vue@3.2.45
   "@vueuse/motion": 2.0.0-beta.12_vue@3.2.45
   "@wangeditor/editor": 5.1.23
@@ -1367,10 +1367,10 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils/1.6.7_aotapuqn7htzdjltsyimavekky:
+  /@pureadmin/utils/1.7.1_aotapuqn7htzdjltsyimavekky:
     resolution:
       {
-        integrity: sha512-SNOGyhrzqMzySpicFd/ptJS7xOt9p2xGuNXFZwhq1elruPKRLRa7dl+OHGrIWzQIvhtbOf/yje9mnOFOY77PZA==
+        integrity: sha512-LqYdMR1xvRDtPp66osOY6usmta6LNGMuON14iONv4ZUC/esQ3RflHlT5glGjOfGUSGCk8O94F5LVS/PVC9Q3Ng==
       }
     peerDependencies:
       dayjs: "*"

src/views/components/danmaku/index.vue

@@ -7,7 +7,7 @@ defineOptions({
   name: "Danmaku"
 });
 
-const danmaku = ref<any>(null);
+const danmaku = ref();
 const danmus = ref<any[]>(getDanmuData());
 const danmuMsg = ref<string>("");
 let timer = 0;
@@ -112,7 +112,7 @@ function addDanmu() {
             target="_blank"
             style="font-size: 16px; margin: 0 4px 5px"
           >
-            vue-danmaku
+            vue3-danmaku
           </el-link>
         </span>
       </div>

src/views/welcome/components/Bar.vue

@@ -39,12 +39,14 @@ setOptions(
           // width: "70",
           // overflow: "truncate"
         },
-        data: ["open_issues", "forks", "watchers", "star"]
+        data: ["open_issues", "forks", "watchers", "star"],
+        triggerEvent: true
       }
     ],
     yAxis: [
       {
-        type: "value"
+        type: "value",
+        triggerEvent: true
       }
     ],
     series: [
@@ -53,7 +55,8 @@ setOptions(
         type: "bar",
         data: [1000, 10000, 20000, 66666]
       }
-    ]
+    ],
+    addTooltip: true
   },
   {
     name: "click",

src/views/welcome/components/Line.vue

@@ -30,10 +30,12 @@ setOptions(
       axisLabel: {
         interval: 0
       },
-      data: ["open_issues", "forks", "watchers", "star"]
+      data: ["open_issues", "forks", "watchers", "star"],
+      triggerEvent: true
     },
     yAxis: {
-      type: "value"
+      type: "value",
+      triggerEvent: true
     },
     series: [
       {
@@ -41,7 +43,8 @@ setOptions(
         type: "line",
         areaStyle: {}
       }
-    ]
+    ],
+    addTooltip: true
   },
   {
     name: "click",

src/views/welcome/index.vue

@@ -1,20 +1,40 @@
 <script setup lang="ts">
 import axios from "axios";
+import VueDanmaku from "vue3-danmaku";
 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 TypeIt from "@/components/ReTypeit";
 import Github from "./components/Github.vue";
-import { ref, computed, markRaw } from "vue";
 import { openLink, randomColor } from "@pureadmin/utils";
 import { useRenderFlicker } from "@/components/ReFlicker";
+import { ref, computed, markRaw, onMounted, onUnmounted } from "vue";
 
 defineOptions({
   name: "Welcome"
 });
 
+const danmus = [
+  "太好用了吧",
+  "so easy",
+  "效率大大提高呀",
+  "还有精简版，还分国际化和非国际化，Perfect 😘",
+  "好多组件呀，爱啦爱啦 ❤️",
+  "精简版开发体验也太赞了吧 🙀",
+  "pure-admin-table 真方便呀",
+  "哇塞，pure-admin-utils 好多常用、易用的工具呀",
+  "我要 star 这个项目，爱啦爱啦",
+  "免费、开源做到这个程度，真不错 👍",
+  "文档简单易懂，上手真快",
+  "呀！还有免费的教学视频呢，我要去学习一下咯",
+  "稳定、可靠，未来可期呀，加油！",
+  "太卷了，太卷了，慢点让我跟上 😄"
+];
+
+let timer = 0;
 const list = ref();
+const danmaku = ref();
 const date: Date = new Date();
 const loading = ref<boolean>(true);
 const titleClass = computed(() => {
@@ -35,6 +55,13 @@ const greetings = computed(() => {
   }
 });
 
+function resizeHandler() {
+  if (timer) clearTimeout(timer);
+  timer = window.setTimeout(() => {
+    danmaku.value.resize();
+  }, 500);
+}
+
 axios
   .get("https://api.github.com/repos/xiaoxian521/vue-pure-admin/releases")
   .then(res => {
@@ -50,6 +77,14 @@ axios
       };
     });
   });
+
+onMounted(() => {
+  window.onresize = () => resizeHandler();
+});
+
+onUnmounted(() => {
+  window.onresize = null;
+});
 </script>
 
 <template>
@@ -91,20 +126,40 @@ axios
           }
         }"
       >
-        <el-card style="height: 360px">
+        <el-card style="height: 410px">
           <template #header>
-            <span :class="titleClass">
+            <a
+              :class="titleClass"
+              href="https://github.com/xiaoxian521"
+              target="_black"
+            >
               <TypeIt
                 :className="'type-it1'"
                 :values="['GitHub信息']"
                 :cursor="false"
                 :speed="120"
               />
-            </span>
+            </a>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>
               <Github />
+              <vue-danmaku
+                ref="danmaku"
+                loop
+                useSlot
+                isSuspend
+                randomChannel
+                :debounce="1200"
+                :danmus="danmus"
+                style="width: 100%; height: 80px"
+              >
+                <template v-slot:dm="{ danmu }">
+                  <p :style="{ color: randomColor({ type: 'hex' }) as string }">
+                    {{ danmu }}
+                  </p>
+                </template>
+              </vue-danmaku>
             </template>
           </el-skeleton>
         </el-card>
@@ -130,20 +185,24 @@ axios
           }
         }"
       >
-        <el-card style="height: 360px">
+        <el-card style="height: 410px">
           <template #header>
-            <span :class="titleClass">
+            <a
+              :class="titleClass"
+              href="https://github.com/xiaoxian521/vue-pure-admin/releases"
+              target="_black"
+            >
               <TypeIt
                 :className="'type-it2'"
                 :values="['Pure-Admin 版本日志']"
                 :cursor="false"
-                :speed="120"
+                :speed="80"
               />
-            </span>
+            </a>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>
-              <el-scrollbar height="274px">
+              <el-scrollbar height="324px">
                 <el-timeline v-show="list?.length > 0">
                   <el-timeline-item
                     v-for="(item, index) in list"
@@ -183,14 +242,18 @@ axios
       >
         <el-card>
           <template #header>
-            <span :class="titleClass">
+            <a
+              :class="titleClass"
+              href="https://github.com/xiaoxian521/vue-pure-admin"
+              target="_black"
+            >
               <TypeIt
                 :className="'type-it3'"
                 :values="['GitHub饼图信息']"
                 :cursor="false"
                 :speed="120"
               />
-            </span>
+            </a>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>
@@ -222,14 +285,18 @@ axios
       >
         <el-card>
           <template #header>
-            <span :class="titleClass">
+            <a
+              :class="titleClass"
+              href="https://github.com/xiaoxian521/vue-pure-admin"
+              target="_black"
+            >
               <TypeIt
                 :className="'type-it4'"
                 :values="['GitHub折线图信息']"
                 :cursor="false"
                 :speed="120"
               />
-            </span>
+            </a>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>
@@ -261,14 +328,18 @@ axios
       >
         <el-card>
           <template #header>
-            <span :class="titleClass">
+            <a
+              :class="titleClass"
+              href="https://github.com/xiaoxian521/vue-pure-admin"
+              target="_black"
+            >
               <TypeIt
                 :className="'type-it5'"
                 :values="['GitHub柱状图信息']"
                 :cursor="false"
                 :speed="120"
               />
-            </span>
+            </a>
           </template>
           <el-skeleton animated :rows="7" :loading="loading">
             <template #default>