build: 数字卡片动态效果

src/views/dashboard/components/DataCard.vue

@@ -1,6 +1,7 @@
 <!-- 数据卡片 -->
 <script setup lang="ts">
 import SvgIcon from "@/components/SvgIcon/index.vue";
+import { useTransition, TransitionPresets } from "@vueuse/core";
 const props = defineProps({
   classes: {
     type: Number,
@@ -28,6 +29,36 @@ const props = defineProps({
     required: true,
   },
 });
+// 卡片数字动效
+function countNumber(number) {
+  return useTransition(number, {
+    duration: 5000,
+    transition: TransitionPresets.easeOutExpo,
+  });
+}
+// 全部班级
+const classCount = ref(0);
+const classCountOutput = countNumber(classCount);
+// 全部教师
+const teacherCount = ref(0);
+const teacherCountOutput = countNumber(teacherCount);
+// 全部学生
+const studentCount = ref(0);
+const studentCountOutput = countNumber(studentCount);
+// 设备套数
+const equipmentCount = ref(0);
+const equipmentCountOutput = countNumber(equipmentCount);
+// 累计训练次数
+const trainingCount = ref(0);
+const trainingCountOutput = countNumber(trainingCount);
+
+onMounted(() => {
+  classCount.value = <number>props.classes;
+  teacherCount.value = <number>props.teachers;
+  studentCount.value = <number>props.students;
+  equipmentCount.value = <number>props.equipments;
+  trainingCount.value = <number>props.trainings;
+});
 </script>
 <template>
   <el-row :gutter="40" class="mb-4">
@@ -40,7 +71,7 @@ const props = defineProps({
         </div>
         <div class="flex flex-col space-y-3">
           <div class="text-[var(--el-text-color-secondary)]">全部班级</div>
-          <div class="text-lg">{{ Math.round(classes) }}</div>
+          <div class="text-lg">{{ Math.round(classCountOutput) }}</div>
         </div>
       </div>
     </el-col>
@@ -53,7 +84,7 @@ const props = defineProps({
         </div>
         <div class="flex flex-col space-y-3">
           <div class="text-[var(--el-text-color-secondary)]">全部教师</div>
-          <div class="text-lg">{{ Math.round(teachers) }}</div>
+          <div class="text-lg">{{ Math.round(teacherCountOutput) }}</div>
         </div>
       </div>
     </el-col>
@@ -66,7 +97,7 @@ const props = defineProps({
         </div>
         <div class="flex flex-col space-y-3">
           <div class="text-[var(--el-text-color-secondary)]">全部学生</div>
-          <div class="text-lg">{{ Math.round(students) }}</div>
+          <div class="text-lg">{{ Math.round(studentCountOutput) }}</div>
         </div>
       </div>
     </el-col>
@@ -80,7 +111,7 @@ const props = defineProps({
         <div class="flex flex-col space-y-3">
           <div class="text-[var(--el-text-color-secondary)]">设备套数</div>
           <div class="text-lg">
-            {{ Math.round(equipments) }}
+            {{ Math.round(equipmentCountOutput) }}
           </div>
         </div>
       </div>
@@ -95,7 +126,7 @@ const props = defineProps({
         <div class="flex flex-col space-y-3">
           <div class="text-[var(--el-text-color-secondary)]">累计训练次数</div>
           <div class="text-lg">
-            {{ Math.round(trainings) }}
+            {{ Math.round(trainingCountOutput) }}
           </div>
         </div>
       </div>

src/views/dashboard/index.vue

@@ -8,7 +8,7 @@ defineOptions({
   name: "Dashboard",
   inheritAttrs: false,
 });
-import { getClassList, getSchoolList } from "@/api/school";
+// import { getClassList, getSchoolList } from "@/api/school";
 import { ClassList } from "@/api/school/types";
 import { watch } from "vue";
 import { useUserStore } from "@/store/modules/user";
@@ -24,15 +24,15 @@ watch(
  * 数据卡片
  */
 // 全部班级
-const classCount = ref(0);
+const classCount = 3000;
 // 全部教师
-const teacherCount = ref(0);
+const teacherCount = 5000;
 // 全部学生
-const studentCount = ref(0);
+const studentCount = 6000;
 // 设备套数
-const equipmentCount = ref(0);
+const equipmentCount = 50;
 // 累计训练次数
-const trainingCount = ref(0);
+const trainingCount = 2000;
 /**
  * 班级数据
  */

src/views/login/index.vue

@@ -52,7 +52,7 @@
         </el-form-item>
       </el-tooltip>
 
-		<el-checkbox v-model="loginData.auto" label="自动登录" size="large" />
+      <el-checkbox v-model="loginData.auto" label="自动登录" size="large" />
 
       <el-button
         size="default"
@@ -74,7 +74,6 @@
 
 <script setup lang="ts">
 import router from "@/router";
-import LangSelect from "@/components/LangSelect/index.vue";
 import SvgIcon from "@/components/SvgIcon/index.vue";
 
 // 状态管理依赖
@@ -108,11 +107,11 @@ const loginFormRef = ref(ElForm);
 const loginData = ref<LoginData>({
   username: "admin",
   password: "123456",
-	auto: true,
+  auto: true,
 });
 
 const loginRules = {
-  username: [{ required: true, trigger: "blur"}],
+  username: [{ required: true, trigger: "blur" }],
   password: [{ required: true, trigger: "blur", validator: passwordValidator }],
 };
 
@@ -142,7 +141,9 @@ function handleLogin() {
   loginFormRef.value.validate((valid: boolean) => {
     if (valid) {
       loading.value = true;
-      userStore.login(loginData.value).then(() => {
+      userStore
+        .login(loginData.value)
+        .then(() => {
           const query: LocationQuery = route.query;
           const redirect = (query.redirect as LocationQueryValue) ?? "/";
           const otherQueryParams = Object.keys(query).reduce(
@@ -158,7 +159,7 @@ function handleLogin() {
         })
         .catch(() => {
           // 验证失败，重新生成验证码
-					new Error("您输入的密码错误");
+          new Error("您输入的密码错误");
         })
         .finally(() => {
           loading.value = false;