From 4fe5fd943d832547883440d38e52948eaccadbf8 Mon Sep 17 00:00:00 2001
From: lyt <1105290566@qq.com>
Date: Fri, 26 Feb 2021 18:39:44 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.02.26:=E9=A6=96=E9=A1=B5=E6=95=B0?=
 =?UTF-8?q?=E5=AD=97=E5=8A=A8=E7=94=BB=E6=BB=9A=E5=8A=A8=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E3=80=81=E6=B7=BB=E5=8A=A0=E5=85=A8=E5=B1=80=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E7=BD=91=E7=AB=99=E6=A0=87=E9=A2=98=E7=AD=89'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                      |  3 ++-
 package.json                    |  1 +
 src/router/index.ts             |  3 ++-
 src/store/index.ts              |  4 +++-
 src/utils/themeConfig.ts        |  9 ++++++++-
 src/views/home/index.vue        | 21 +++++++++++++++++----
 src/views/layout/logo/index.vue |  9 +++++++--
 src/views/login/index.vue       |  4 +++-
 8 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 544dd5d6..7fc83245 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="keywords"
-      content="vue-admin-wonderful，后台管理系统一站式平台模板，希望可以帮你完成快速开发。"
+      content="vue-admin-wonderful，后台管理系统一站式平台模板，希望可以帮你完成快速开发。vue2、vue3、vue3.x、
+      CompositionAPI、typescript、element plus、element、plus、admin、wonderful、wonderful-next、快速、高效"
     />
     <meta
       name="description"
diff --git a/package.json b/package.json
index 5d778814..ad413bfa 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "clipboard": "^2.0.6",
+    "countup.js": "^2.0.7",
     "echarts": "^5.0.2",
     "echarts-wordcloud": "^2.0.0",
     "element-plus": "^1.0.2-beta.32",
diff --git a/src/router/index.ts b/src/router/index.ts
index 2b1e198d..5ca7185b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ import 'nprogress/nprogress.css'
 import { store } from "/@/store/index.ts"
 import { getSession, clearSession } from "/@/utils/storage.ts"
 import { getMenuAdmin, getMenuTest } from '/@/api/menu/index.ts'
+import themeConfig from '/@/utils/themeConfig.ts'
 
 // 定义动态路由
 export const dynamicRoutes = [
@@ -659,7 +660,7 @@ if (store.state.themeConfig.isRequestRoutes) getBackEndControlRoutes()
 
 // 路由加载前
 router.beforeEach((to, from, next) => {
-    document.title = `${to.meta.title} - vue-admin-wonderful-next` || `vue-admin-wonderful-next`
+    document.title = `${to.meta.title} - ${themeConfig.globalTitle}` || themeConfig.globalTitle
     NProgress.configure({ showSpinner: false })
     if (to.meta.title) NProgress.start()
     const token = getSession('token')
diff --git a/src/store/index.ts b/src/store/index.ts
index ab71d81d..db7816b6 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -43,7 +43,9 @@ export interface RootStateTypes {
         animation: string,
         columnsAsideStyle: string,
         layout: string,
-        isRequestRoutes: boolean
+        isRequestRoutes: boolean,
+        globalTitle: string,
+        globalViceTitle: string,
     },
     routes: Array<object>,
     keepAliveNames: Array<string>,
diff --git a/src/utils/themeConfig.ts b/src/utils/themeConfig.ts
index d3524bb6..dce6514f 100644
--- a/src/utils/themeConfig.ts
+++ b/src/utils/themeConfig.ts
@@ -101,5 +101,12 @@ export default {
     /* 后端控制路由
     ------------------------------- */
     // 是否开启后端控制路由
-    isRequestRoutes: false
+    isRequestRoutes: false,
+
+    /* 全局网站标题 / 副标题
+    ------------------------------- */
+    // 网站主标题（菜单导航、浏览器当前网页标题）
+    globalTitle: 'vue-admin-wonderful-next',
+    // 网站副标题（登录页顶部文字）
+    globalViceTitle: 'SMALL@小柒'
 }
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 0c13cc6a..f2ebb7fc 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -18,9 +18,9 @@
         <div class="home-card-item home-card-item-box" :style="{background:v.color}">
           <div class="home-card-item-flex">
             <div class="home-card-item-title pb3">{{v.title}}</div>
-            <div class="home-card-item-title-num pb6">{{v.titleNum}}</div>
+            <div class="home-card-item-title-num pb6" :id="`titleNum${k+1}`"></div>
             <div class="home-card-item-tip pb3">{{v.tip}}</div>
-            <div class="home-card-item-tip-num">{{v.tipNum}}</div>
+            <div class="home-card-item-tip-num" :id="`tipNum${k+1}`"></div>
           </div>
           <i :class="v.icon" :style="{'color': v.iconColor}"></i>
         </div>
@@ -94,8 +94,9 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted } from "vue";
+import { toRefs, reactive, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
+import { CountUp } from "countup.js";
 import { topCardItemList, environmentList, activitiesList } from "./mock.ts";
 export default {
   name: "home",
@@ -124,6 +125,17 @@ export default {
         ],
       },
     });
+    // 初始化数字滚动
+    const initNumCountUp = () => {
+      nextTick(() => {
+        new CountUp("titleNum1", Math.random() * 10000).start();
+        new CountUp("titleNum2", Math.random() * 10000).start();
+        new CountUp("titleNum3", Math.random() * 10000).start();
+        new CountUp("tipNum1", Math.random() * 1000).start();
+        new CountUp("tipNum2", Math.random() * 1000).start();
+        new CountUp("tipNum3", Math.random() * 1000).start();
+      });
+    };
     // 实验室使用情况
     const initHomeLaboratory = () => {
       const myChart = echarts.init(document.getElementById("homeLaboratory"));
@@ -235,8 +247,9 @@ export default {
         myChart.resize();
       });
     };
-    // 页面加载前
+    // 页面加载时
     onMounted(() => {
+      initNumCountUp();
       initHomeLaboratory();
       initHomeOvertime();
     });
diff --git a/src/views/layout/logo/index.vue b/src/views/layout/logo/index.vue
index 612367c5..e110b3cc 100644
--- a/src/views/layout/logo/index.vue
+++ b/src/views/layout/logo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
-    <span>vue-admin-wonderful</span>
+    <span>{{config.globalTitle}}</span>
   </div>
   <div class="layout-logo-size" v-else @click="onThemeConfigChange">
     <img src="https://gitee.com/lyt-top/vue-admin-wonderful-images/raw/master/next/assets/logo-docs-mini.svg"
@@ -9,13 +9,17 @@
 </template>
 
 <script lang="ts">
-import { computed, getCurrentInstance } from "vue";
+import { reactive, toRefs, computed, getCurrentInstance } from "vue";
 import { useStore } from "/@/store/index.ts";
+import config from "/@/utils/themeConfig.ts";
 export default {
   name: "layoutLogo",
   setup() {
     const { proxy } = getCurrentInstance();
     const store = useStore();
+    const state = reactive({
+      config,
+    });
     // 设置 logo 的显示。classic 经典布局默认显示 logo
     const setShowLogo = computed(() => {
       let { isCollapse, layout } = store.state.themeConfig;
@@ -32,6 +36,7 @@ export default {
     return {
       setShowLogo,
       onThemeConfigChange,
+      ...toRefs(state),
     };
   },
 };
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index f6c7805d..ce2bc66d 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login-container">
     <div class="login-logo">
-      <span>SMALL@小柒</span>
+      <span>{{themeConfig.globalViceTitle}}</span>
     </div>
     <div class="login-content" :class="{'login-content-mobile' : tabsActiveName === 'mobile'}">
       <div class="login-content-main">
@@ -34,6 +34,7 @@
 <script lang="ts">
 import Account from "/@/views/login/component/account.vue";
 import Mobile from "/@/views/login/component/mobile.vue";
+import themeConfig from "/@/utils/themeConfig.ts";
 import { toRefs, reactive } from "vue";
 export default {
   name: "login",
@@ -42,6 +43,7 @@ export default {
     const state = reactive({
       tabsActiveName: "account",
       isTabPaneShow: false,
+      themeConfig,
     });
     const onTabsClick = () => {
       state.isTabPaneShow = !state.isTabPaneShow;