'admin-21.02.26:首页数字动画滚动效果、添加全局修改网站标题等'

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"

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",

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')

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>,

src/utils/themeConfig.ts

@@ -101,5 +101,12 @@ export default {
     /* 后端控制路由
     ------------------------------- */
     // 是否开启后端控制路由
-    isRequestRoutes: false
+    isRequestRoutes: false,
+
+    /* 全局网站标题 / 副标题
+    ------------------------------- */
+    // 网站主标题（菜单导航、浏览器当前网页标题）
+    globalTitle: 'vue-admin-wonderful-next',
+    // 网站副标题（登录页顶部文字）
+    globalViceTitle: 'SMALL@小柒'
 }

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();
     });

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),
     };
   },
 };

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;