update:class adjust

package.json

@@ -25,7 +25,7 @@
     "default-passive-events": "^2.0.0",
     "driver.js": "^0.9.8",
     "echarts": "^5.1.2",
-    "element-plus": "^2.2.2",
+    "element-plus": "^2.2.5",
     "js-cookie": "^2.2.1",
     "md-editor-v3": "^1.4.4",
     "mockjs": "^1.1.0",

pnpm-lock.yaml

@@ -25,7 +25,7 @@ specifiers:
   default-passive-events: ^2.0.0
   driver.js: ^0.9.8
   echarts: ^5.1.2
-  element-plus: ^2.2.2
+  element-plus: ^2.2.5
   eslint: ^8.12.0
   eslint-config-prettier: ^8.5.0
   eslint-plugin-prettier: ^4.0.0
@@ -71,7 +71,7 @@ dependencies:
   default-passive-events: registry.npmmirror.com/default-passive-events/2.0.0
   driver.js: registry.npmmirror.com/driver.js/0.9.8
   echarts: registry.npmmirror.com/echarts/5.3.2
-  element-plus: registry.npmmirror.com/element-plus/2.2.2_vue@3.2.31
+  element-plus: registry.npmmirror.com/element-plus/2.2.5_vue@3.2.31
   js-cookie: registry.npmmirror.com/js-cookie/2.2.1
   md-editor-v3: registry.npmmirror.com/md-editor-v3/1.11.4
   mockjs: registry.npmmirror.com/mockjs/1.1.0
@@ -185,6 +185,17 @@ packages:
       vue: registry.npmmirror.com/vue/3.2.31
     dev: false
 
+  registry.npmmirror.com/@element-plus/icons-vue/2.0.5_vue@3.2.31:
+    resolution: {integrity: sha512-jvNWyKcdvPvMDLTWjghrPY+bYHKqh7hbAFIPe+HWR073zilzt33csREzmKx3VwhdlJUW5u0nCqN+0rwI8jlH+w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.5.tgz}
+    id: registry.npmmirror.com/@element-plus/icons-vue/2.0.5
+    name: '@element-plus/icons-vue'
+    version: 2.0.5
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: registry.npmmirror.com/vue/3.2.31
+    dev: false
+
   registry.npmmirror.com/@emmetio/abbreviation/2.2.3:
     resolution: {integrity: sha512-87pltuCPt99aL+y9xS6GPZ+Wmmyhll2WXH73gG/xpGcQ84DRnptBsI2r0BeIQ0EB/SQTOe2ANPqFqj3Rj5FOGA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz}
     name: '@emmetio/abbreviation'
@@ -226,18 +237,18 @@ packages:
       - supports-color
     dev: true
 
-  registry.npmmirror.com/@floating-ui/core/0.7.1:
-    resolution: {integrity: sha512-grcqEmI8DTIolufpxhJagVeJmvloxBXE6xxSrVnSXz/Wz1uUIsC85ad+UNBqAoBOvzLxE42wvDj3YkmSGqWRxA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@floating-ui/core/-/core-0.7.1.tgz}
+  registry.npmmirror.com/@floating-ui/core/0.7.2:
+    resolution: {integrity: sha512-FRVAkSNU/vGXLIsgbggcs70GkXKEOXgBBbNpYPNHSaKsCAMMd00NrjbtKTesxkdv9xm9N3+XiDlcFGY6WnatBg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@floating-ui/core/-/core-0.7.2.tgz}
     name: '@floating-ui/core'
-    version: 0.7.1
+    version: 0.7.2
     dev: false
 
-  registry.npmmirror.com/@floating-ui/dom/0.5.1:
-    resolution: {integrity: sha512-dkPSy5JPiQEtljc3VpG9lauYctxfLlqj/8N9f+lmsR92gQaSVMAWuBbFBH2keY5DmdQn3p4Dv1dQd+e8osH+/g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@floating-ui/dom/-/dom-0.5.1.tgz}
+  registry.npmmirror.com/@floating-ui/dom/0.5.2:
+    resolution: {integrity: sha512-z1DnEa7F3d8Fm/eXSbii8UEGpcjZGkQaYYUI0WpEVgD3vBfebDW8j/3ysusxonuMexoigA+A3b/fYH7sEqiwyg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@floating-ui/dom/-/dom-0.5.2.tgz}
     name: '@floating-ui/dom'
-    version: 0.5.1
+    version: 0.5.2
     dependencies:
-      '@floating-ui/core': registry.npmmirror.com/@floating-ui/core/0.7.1
+      '@floating-ui/core': registry.npmmirror.com/@floating-ui/core/0.7.2
     dev: false
 
   registry.npmmirror.com/@humanwhocodes/config-array/0.9.5:
@@ -1057,11 +1068,11 @@ packages:
       vue-demi: registry.npmmirror.com/vue-demi/0.12.5_vue@3.2.31
     dev: false
 
-  registry.npmmirror.com/@vueuse/core/8.5.0_vue@3.2.31:
-    resolution: {integrity: sha512-VEJ6sGNsPlUp0o9BGda2YISvDZbhWJSOJu5zlp2TufRGVrLcYUKr31jyFEOj6RXzG3k/H4aCYeZyjpItfU8glw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vueuse/core/-/core-8.5.0.tgz}
-    id: registry.npmmirror.com/@vueuse/core/8.5.0
+  registry.npmmirror.com/@vueuse/core/8.6.0_vue@3.2.31:
+    resolution: {integrity: sha512-VirzExCm/N+QdrEWT7J4uSrvJ5hquKIAU9alQ37kUvIJk9XxCLxmfRnmekYc1kz2+6BnoyuKYXVmrMV351CB4w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vueuse/core/-/core-8.6.0.tgz}
+    id: registry.npmmirror.com/@vueuse/core/8.6.0
     name: '@vueuse/core'
-    version: 8.5.0
+    version: 8.6.0
     peerDependencies:
       '@vue/composition-api': ^1.1.0
       vue: ^2.6.0 || ^3.2.0
@@ -1071,10 +1082,10 @@ packages:
       vue:
         optional: true
     dependencies:
-      '@vueuse/metadata': registry.npmmirror.com/@vueuse/metadata/8.5.0
-      '@vueuse/shared': registry.npmmirror.com/@vueuse/shared/8.5.0_vue@3.2.31
+      '@vueuse/metadata': registry.npmmirror.com/@vueuse/metadata/8.6.0
+      '@vueuse/shared': registry.npmmirror.com/@vueuse/shared/8.6.0_vue@3.2.31
       vue: registry.npmmirror.com/vue/3.2.31
-      vue-demi: registry.npmmirror.com/vue-demi/0.12.5_vue@3.2.31
+      vue-demi: registry.npmmirror.com/vue-demi/0.13.1_vue@3.2.31
     dev: false
 
   registry.npmmirror.com/@vueuse/integrations/7.7.1_9f7a99c0e97bb45238562dab7ab271fe:
@@ -1120,10 +1131,10 @@ packages:
       - vue
     dev: false
 
-  registry.npmmirror.com/@vueuse/metadata/8.5.0:
-    resolution: {integrity: sha512-WxsD+Cd+bn+HcjpY6Dl9FJ8ywTRTT9pTwk3bCQpzEhXVYAyNczKDSahk50fCfIJKeWHhyI4B2+/ZEOxQAkUr0g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.5.0.tgz}
+  registry.npmmirror.com/@vueuse/metadata/8.6.0:
+    resolution: {integrity: sha512-F+CKPvaExsm7QgRr8y+ZNJFwXasn89rs5wth/HeX9lJ1q8XEt+HJ16Q5Sxh4rfG5YSKXrStveVge8TKvPjMjFA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vueuse/metadata/-/metadata-8.6.0.tgz}
     name: '@vueuse/metadata'
-    version: 8.5.0
+    version: 8.6.0
     dev: false
 
   registry.npmmirror.com/@vueuse/shared/7.7.1_vue@3.2.31:
@@ -1144,11 +1155,11 @@ packages:
       vue-demi: registry.npmmirror.com/vue-demi/0.12.5_vue@3.2.31
     dev: false
 
-  registry.npmmirror.com/@vueuse/shared/8.5.0_vue@3.2.31:
-    resolution: {integrity: sha512-qKG+SZb44VvGD4dU5cQ63z4JE2Yk39hQUecR0a9sEdJA01cx+XrxAvFKJfPooxwoiqalAVw/ktWK6xbyc/jS3g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vueuse/shared/-/shared-8.5.0.tgz}
-    id: registry.npmmirror.com/@vueuse/shared/8.5.0
+  registry.npmmirror.com/@vueuse/shared/8.6.0_vue@3.2.31:
+    resolution: {integrity: sha512-Y/IVywZo7IfEoSSEtCYpkVEmPV7pU35mEIxV7PbD/D3ly18B3mEsBaPbtDkNM/QP3zAZ5mn4nEkOfddX4uwuIA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@vueuse/shared/-/shared-8.6.0.tgz}
+    id: registry.npmmirror.com/@vueuse/shared/8.6.0
     name: '@vueuse/shared'
-    version: 8.5.0
+    version: 8.6.0
     peerDependencies:
       '@vue/composition-api': ^1.1.0
       vue: ^2.6.0 || ^3.2.0
@@ -1159,7 +1170,7 @@ packages:
         optional: true
     dependencies:
       vue: registry.npmmirror.com/vue/3.2.31
-      vue-demi: registry.npmmirror.com/vue-demi/0.12.5_vue@3.2.31
+      vue-demi: registry.npmmirror.com/vue-demi/0.13.1_vue@3.2.31
     dev: false
 
   registry.npmmirror.com/acorn-jsx/5.3.2_acorn@8.7.0:
@@ -1558,10 +1569,10 @@ packages:
     version: 2.6.20
     dev: false
 
-  registry.npmmirror.com/dayjs/1.11.2:
-    resolution: {integrity: sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dayjs/-/dayjs-1.11.2.tgz}
+  registry.npmmirror.com/dayjs/1.11.3:
+    resolution: {integrity: sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/dayjs/-/dayjs-1.11.3.tgz}
     name: dayjs
-    version: 1.11.2
+    version: 1.11.3
     dev: false
 
   registry.npmmirror.com/debug/2.6.9:
@@ -1752,23 +1763,23 @@ packages:
     version: 1.1.1
     dev: false
 
-  registry.npmmirror.com/element-plus/2.2.2_vue@3.2.31:
-    resolution: {integrity: sha512-yGcj2Ayb0jZO1WbI51tHJ4efhlfWKlBqqGtWbzhq+tcpfaKzJZN+IHRouuFasqn0ZV3tWCDu1jggDR1+9y7XfQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.2.2.tgz}
-    id: registry.npmmirror.com/element-plus/2.2.2
+  registry.npmmirror.com/element-plus/2.2.5_vue@3.2.31:
+    resolution: {integrity: sha512-Kl0yn/PQca5YQo3M3NPBP4Xl71NQuMtDx5zNXZGVyl5FjdMujXiFB9SXKYGDUCgFU3d/Rl14vB4Fpmcl2Iz+Hw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.2.5.tgz}
+    id: registry.npmmirror.com/element-plus/2.2.5
     name: element-plus
-    version: 2.2.2
+    version: 2.2.5
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@ctrl/tinycolor': registry.npmmirror.com/@ctrl/tinycolor/3.4.1
-      '@element-plus/icons-vue': registry.npmmirror.com/@element-plus/icons-vue/1.1.4_vue@3.2.31
-      '@floating-ui/dom': registry.npmmirror.com/@floating-ui/dom/0.5.1
+      '@element-plus/icons-vue': registry.npmmirror.com/@element-plus/icons-vue/2.0.5_vue@3.2.31
+      '@floating-ui/dom': registry.npmmirror.com/@floating-ui/dom/0.5.2
       '@popperjs/core': registry.npmmirror.com/@sxzz/popperjs-es/2.11.7
       '@types/lodash': registry.npmmirror.com/@types/lodash/4.14.182
       '@types/lodash-es': registry.npmmirror.com/@types/lodash-es/4.17.6
-      '@vueuse/core': registry.npmmirror.com/@vueuse/core/8.5.0_vue@3.2.31
+      '@vueuse/core': registry.npmmirror.com/@vueuse/core/8.6.0_vue@3.2.31
       async-validator: registry.npmmirror.com/async-validator/4.1.1
-      dayjs: registry.npmmirror.com/dayjs/1.11.2
+      dayjs: registry.npmmirror.com/dayjs/1.11.3
       escape-html: registry.npmmirror.com/escape-html/1.0.3
       lodash: registry.npmmirror.com/lodash/4.17.21
       lodash-es: registry.npmmirror.com/lodash-es/4.17.21
@@ -4540,6 +4551,24 @@ packages:
         optional: true
     dependencies:
       vue: registry.npmmirror.com/vue/3.2.31
+    dev: false
+
+  registry.npmmirror.com/vue-demi/0.13.1_vue@3.2.31:
+    resolution: {integrity: sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.1.tgz}
+    id: registry.npmmirror.com/vue-demi/0.13.1
+    name: vue-demi
+    version: 0.13.1
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: registry.npmmirror.com/vue/3.2.31
 
   registry.npmmirror.com/vue-eslint-parser/8.3.0_eslint@8.12.0:
     resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz}
@@ -4569,7 +4598,7 @@ packages:
     version: 0.4.1
     dependencies:
       eslint-config-vue-global-api: registry.npmmirror.com/eslint-config-vue-global-api/0.4.1
-      vue-demi: registry.npmmirror.com/vue-demi/0.12.5_vue@3.2.31
+      vue-demi: registry.npmmirror.com/vue-demi/0.13.1_vue@3.2.31
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue

src/assets/js/guide.ts

@@ -9,7 +9,7 @@ const steps = [
     },
   },
   {
-    element: ".admin-sidebar-nav",
+    element: ".sidebar-info",
     popover: {
       title: "介绍",
       description: "Admin-Frame是一款中/后台管理系统",

src/assets/style/dark.scss

@@ -14,11 +14,11 @@ html.dark {
   .borderBottom {
     border-bottom: 1px solid var(--el-border-color-dark);
   }
-  .tag_content,
-  .admin-header {
+  .tag-wrapper,
+  .header-wrapper {
     background-color: var(--af-header-bg-color);
   }
-  .app-wrapper .el-main {
+  .main-wrapper .el-main {
     background-color: var(--af-bg-color);
   }
   .el-menu {
@@ -55,7 +55,7 @@ html.dark {
   // .el-divider__text {
   //   background-color: var(--af-pop-bg-color);
   // }
-  .login-container {
+  .login-wrapper {
     background-color: var(--af-sidebar-color) !important;
     background-image: none;
   }

src/assets/style/index.scss

@@ -42,7 +42,7 @@
       margin-bottom: 0px !important;
     }
   }
-  .content {
+  .main-content {
     min-width: 300px !important;
   }
   .mobile {
@@ -64,7 +64,7 @@
       display: none;
     }
   }
-  .sidebar {
+  .sidebar-wrapper {
     position: fixed;
     top: 0;
     left: 0;
@@ -106,8 +106,10 @@
 
 .abnormal-img {
   //异常页面样式
-  @include abnormal;
-  padding-top: calc(100vh - 750px);
+  // @include abnormal;
+  max-width: 600px;
+  width: 100%;
+  padding-top: calc(100vh - 85vh);
 }
 .abnormal-tip {
   @include font-col(#909399);

src/assets/style/light.scss

@@ -13,11 +13,11 @@ html {
   .borderBottom {
     border-bottom: 1px solid var(--el-border-color-light);
   }
-  .tag_content,
-  .admin-header {
+  .tag-wrapper,
+  .header-wrapper {
     background-color: var(--af-bg-color);
   }
-  .app-wrapper .el-main {
+  .main-wrapper .el-main {
     background-color: var(--af-main-bg-color);
   }
   .el-menu {
@@ -44,7 +44,7 @@ html {
       background-color: #409eff;
     }
   }
-  .login-container {
+  .login-wrapper{
     background-size: 100% 100%;
     background-image: url("@/assets/image/BG.png");
   }

src/layouts/components/Header/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div :class="configStore.appConfig.showTabBar ? 'admin-header' : 'admin-header borderBottom'">
+  <div :class="configStore.appConfig.showTabBar ? 'header-wrapper' : 'header-wrapper borderBottom'">
     <div class="collapse-left">
-      <div class="collapse-btn">
+      <div class="collapse-btn-group">
         <i v-if="configStore.appConfig.showFoldButton" title="点击打开关闭菜单" @click="switchCollapse"
           :class="collapse ? 'fa fabtn fa-indent' : 'fa fabtn fa-dedent'"></i>
         <i v-if="configStore.appConfig.showReFresh" title="刷新页面" @click="reload()" class="fa fa-refresh"
@@ -183,7 +183,7 @@ const changeI18n = <T extends string>(type: T) => {
 };
 </script>
 <style lang="scss" scoped>
-.admin-header {
+.header-wrapper {
   box-sizing: border-box;
   width: 100%;
   height: 64px;
@@ -197,7 +197,7 @@ const changeI18n = <T extends string>(type: T) => {
     justify-content: space-between;
     align-items: center;
 
-    .collapse-btn {
+    .collapse-btn-group {
       padding: 0px 0px 0 15px;
       cursor: pointer;
 

src/layouts/components/SideBar/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div :style="{
     width: collapse ? isMobile ? '0px' : '64px' : '200px',
-  }" class="sidebar">
+  }" class="sidebar-wrapper">
      <el-scrollbar>
-    <div class="admin-sidebar-nav" v-if="configStore.appConfig.showLogo">
+    <div class="sidebar-info" v-if="configStore.appConfig.showLogo">
       <img :src="getImage('LG', 'png')" />
       <span v-if="!collapse">{{ siteName }}</span>
     </div>
@@ -16,8 +16,8 @@
                 <i :class="item.resourceIcon"></i>
                 <span :class="
                   item.resourceIcon
-                    ? 'sidebar-title'
-                    : 'sidebar-title sidebar-nullIcon'
+                    ? 'menu-title'
+                    : 'menu-title menu-nullIcon'
                 ">{{ t(item.resourceName) }}</span>
               </template>
               <template v-for="childItem in item.children">
@@ -27,13 +27,13 @@
                     <i :class="childItem.resourceIcon"></i>
                     <span :class="
                       childItem.resourceIcon
-                        ? 'sidebar-title'
-                        : 'sidebar-title sidebar-nullIcon'
+                        ? 'menu-title'
+                        : 'menu-title menu-nullIcon'
                     ">{{ t(childItem.resourceName) }}</span>
                   </template>
                   <el-menu-item v-for="(grandsonItem, i) in childItem.children" :key="i"
                     :index="grandsonItem.resourceUrl">
-                    <span class="sidebar-title">{{
+                    <span class="menu-title">{{
                         t(grandsonItem.resourceName)
                     }}</span>
                   </el-menu-item>
@@ -43,8 +43,8 @@
                     <i :class="childItem.resourceIcon"></i>
                     <span :class="
                       childItem.resourceIcon
-                        ? 'sidebar-title'
-                        : 'sidebar-title sidebar-nullIcon'
+                        ? 'menu-title'
+                        : 'menu-title menu-nullIcon'
                     ">{{ t(childItem.resourceName) }}</span>
                   </template>
                 </el-menu-item>
@@ -55,7 +55,7 @@
           <template v-else>
             <el-menu-item :key="item.resourceUrl" :index="item.resourceUrl">
               <i :class="item.resourceIcon"></i>
-              <template #title class="sidebar-title">{{
+              <template #title class="menu-title">{{
                   t(item.resourceName)
               }}</template>
             </el-menu-item>
@@ -86,14 +86,14 @@ const onRoutes = computed<string>(() => route.path);
 const collapse = computed<boolean>(() => tagStore.collapse);
 </script>
 <style lang="scss" scoped>
-.sidebar {
+.sidebar-wrapper {
   height: 100%;
   box-sizing: border-box;
   transition: width 0.3s ease-in-out;
   background-color: var(--af-sidebar-color);
   overflow: auto;
 
-  .admin-sidebar-nav {
+  .sidebar-info {
     box-sizing: border-box;
     padding: 16px 10px 16px 10px;
     background-color: var(--af-sidebar-color);

src/layouts/components/Tags/index.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="tag_content borderBottom">
+  <div class="tag-wrapper borderBottom">
     <TransitionGroup v-if="tagsList.length" name="list" class="tags" tag="div">
       <el-tag v-for="(tag, index) in tagsList" :key="index" :type="selectPath === tag.path ? '' : 'info'"
-        :class="selectPath === tag.path ? 'tag_check' : 'tag_null_check'"
+        :class="selectPath === tag.path ? 'tag-check' : 'tag-null-check'"
         :closable="tag.path == '/dashboard/workbench' ? false : true"
         :effect="selectPath === tag.path ? 'dark' : 'plain'" :disable-transitions="false" @close="closeTag(index)"
         @click="triggerTag(tag, 'go')" size="large">
         {{ t("message." + tag.title) }}
       </el-tag>
     </TransitionGroup>
-    <div class="right_trigger_box">
+    <div class="right-trigger">
       <span class="el-dropdown-link fullScreen" @click="toFullScreen">
         <el-icon>
           <full-screen />
@@ -170,7 +170,7 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
-.tag_content {
+.tag-wrapper {
   padding: 0px 12px 6px 8px;
   box-sizing: border-box;
   white-space: nowrap;
@@ -226,20 +226,20 @@ onMounted(() => {
     margin-right: 8px;
   }
 
-  .tag_check {
+  .tag-check {
     border-radius: 1px;
     background-color: var(--af-tag-check-color);
     border-color: var(--af-tag-check-color);
   }
 
-  .tag_null_check {
+  .tag-null-check {
     background-color: var(--af-tag-nullCheck-color) !important;
     border-color: var(--af-tag-nullCheck-border-color) !important;
     color: var(--af-tag-nullCheck-font-color) !important;
     border-radius: 1px;
   }
 
-  .right_trigger_box {
+  .right-trigger {
     display: flex;
     border: 1px solid var(--af-tag-nullCheck-border-color);
 

src/layouts/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-wrapper mobile">
+  <div class="main-wrapper mobile">
     <div class="drawer-bg" v-if="isMobile && !collapse" @click="(() => {
       tagStore.$patch({
         collapse: true
@@ -15,7 +15,7 @@
         </el-header>
         <el-main>
           <Tags v-if="configStore.appConfig.showTabBar"></Tags>
-          <el-scrollbar id="screen-display" v-loading="!isReload" class="content" :style="{
+          <el-scrollbar id="screen-display" v-loading="!isReload" class="main-content" :style="{
             height: configStore.appConfig.showTabBar ? 'calc(100vh - 120px)' : 'calc(100vh - 82px)'
           }">
             <router-view v-if="isReload" v-slot="{ Component, router }">
@@ -28,7 +28,7 @@
               </Transition>
             </router-view>
 
-            <el-backtop target=".content"></el-backtop>
+            <el-backtop target=".main-content"></el-backtop>
           </el-scrollbar>
         </el-main>
       </el-container>
@@ -59,7 +59,7 @@ const reload = () => {
 provide("reload", reload);
 </script>
 <style lang="scss" scoped>
-.app-wrapper {
+.main-wrapper {
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -75,7 +75,7 @@ provide("reload", reload);
   }
 
   .el-main {
-    .content {
+    .main-content {
       box-sizing: border-box;
       margin: 8px 5px 8px 5px;
       color: #515a6e;

src/views/Login.vue

@@ -1,26 +1,28 @@
 <template>
-  <div class="login-container">
-    <div class="login-body">
-      <div class="logo">
+  <div class="login-wrapper">
+    <div class="login-content">
+      <div class="logo-info">
         <img :src="getImage('LG', 'png')" />
         <p>{{ siteName }}</p>
         <span>{{ siteName }} 是一款中/后台管理系统</span>
       </div>
       <el-form ref="loginFormRef" @toLogin.prevent :model="loginForm" :rules="loginRules" hide-required-asterisk>
         <el-form-item prop="username">
-          <el-input v-model="loginForm.username" placeholder="请输入用户名">
+          <el-input size="default" v-model="loginForm.username" placeholder="请输入用户名">
           </el-input>
         </el-form-item>
         <el-form-item prop="password">
-          <el-input v-model="loginForm.password" placeholder="请输入密码" show-password @keyup.enter="toLogin(loginFormRef)">
+          <el-input size="default" v-model="loginForm.password" placeholder="请输入密码" show-password
+            @keyup.enter="toLogin(loginFormRef)">
           </el-input>
         </el-form-item>
         <el-form-item>
-          <el-button :loading="loading" style="width: 100%" type="primary" @click="toLogin(loginFormRef)">登录
+          <el-button size="default" :loading="loading" style="width: 100%" type="primary"
+            @click="toLogin(loginFormRef)">登录
           </el-button>
         </el-form-item>
       </el-form>
-      <div class="other-content">
+      <div class="other-login">
         <el-button text disabled>其它登录方式</el-button>
         <el-button text disabled>忘记密码</el-button>
       </div>
@@ -40,9 +42,7 @@ const userStore = useUserStore();
 const router = useRouter();
 const { proxy } = <any>getCurrentInstance();
 const loginFormRef = ref<FormInstance>();
-
 const loading = ref<boolean>(false); //缓冲
-
 const loginForm = reactive({
   username: "admin",
   password: "123456",
@@ -87,12 +87,11 @@ const toLogin = async (formEl: FormInstance | undefined) => {
 </script>
 
 <style lang="scss" scoped>
-.login-container {
+.login-wrapper {
   position: relative;
   width: 100%;
   height: 100vh;
-
-  .login-body {
+  .login-content {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -102,38 +101,26 @@ const toLogin = async (formEl: FormInstance | undefined) => {
     box-sizing: border-box;
     margin-left: -198px;
     margin-top: -255px;
-
-    .logo {
+    .logo-info {
       padding: 12px;
       text-align: center;
-
       img {
         height: 55px;
       }
-
       p {
         font-size: 24px;
         padding: 2px 0px;
       }
-
       span {
         font-size: 14px;
         color: #909399;
       }
     }
-
-    .l-title {
-      padding: 8px 0 24px 0;
-      font-size: 20px;
-      color: #121212;
-      font-weight: 550;
-      text-align: center;
+    .other-login {
+      display: flex;
+      justify-content: space-between;
     }
   }
 
-  .other-content {
-    display: flex;
-    justify-content: space-between;
-  }
 }
 </style>

src/views/setting/user.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="userList">
     <el-card shadow="never" :body-style="{ padding: '30px 10px 15px 10px' }">
       <el-form label-position="right" label-width="84px" :inline="true" :model="state.queryParams"
         class="demo-form-inline">