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

2025-11-03 13:44:47 +08:00 · 2022-11-29 11:08:48 +08:00
parent c437371db6
commit 7f0354cd63
9 changed files with 322 additions and 175 deletions
--- a/src/views/able/timeline.vue
+++ b/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: "支持默认颜色",
--- a/src/views/welcome/components/Bar.vue
+++ b/src/views/welcome/components/Bar.vue
@@ -22,9 +22,11 @@ setOptions(
      }
    },
    grid: {
-      bottom: "20%",
-      height: "68%",
-      containLabel: true
+      containLabel: true,
+      top: "10px",
+      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]
      }
    ]
  },
--- a/src/views/welcome/components/Infinite.vue
+++ b/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>
--- a/src/views/welcome/components/Line.vue
+++ b/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: {}
      }
--- a/src/views/welcome/components/Pie.vue
+++ b/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: 1079, name: "star" },
-          { value: 204, name: "forks" },
-          { value: 3, name: "open_issues" }
+          { value: 20000, name: "watchers" },
+          { value: 66666, name: "star" },
+          { value: 10000, name: "forks" },
+          { value: 1000, name: "open_issues" }
        ],
        emphasis: {
          itemStyle: {
--- a/src/views/welcome/components/columns.tsx
+++ b/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}
+        />
+      )
    }
  ];

--- a/src/views/welcome/index.vue
+++ b/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">
-              GitHub滚动信息
+            <span :class="titleClass">
+              <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">
-              GitHub饼图信息
+            <span :class="titleClass">
+              <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">
-              GitHub折线图信息
+            <span :class="titleClass">
+              <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">
-              GitHub柱状图信息
+            <span :class="titleClass">
+              <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;
 }