perf: 优化首页

2025-11-03 13:44:47 +08:00 · 2022-11-29 15:08:05 +08:00 · 2022-11-29 15:08:05 +08:00 · fe9f6e5493
commit fe9f6e5493
parent 7f0354cd63
8 changed files with 106 additions and 28 deletions
--- a/build/optimize.ts
+++ b/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",
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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: "*"
--- a/src/views/components/danmaku/danmu.ts
+++ b/src/views/components/danmaku/danmu.ts
--- a/src/views/components/danmaku/index.vue
+++ b/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>
--- a/src/views/welcome/components/Bar.vue
+++ b/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",
--- a/src/views/welcome/components/Line.vue
+++ b/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",
--- a/src/views/welcome/index.vue
+++ b/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>