perf: perf style (#89)

perf: perf style

src/components/ReCharts/src/Infinite.vue

@@ -111,7 +111,7 @@ let classOption = reactive({
 
   .warp {
     width: 95%;
-    height: 230px;
+    height: 215px;
     margin: 0 auto;
     overflow: hidden;
 

src/components/ReMap/src/Amap.vue

@@ -28,7 +28,7 @@ let map: MapConfigureInter;
 
 const instance = getCurrentInstance();
 
-const mapSet: mapInter = reactive({
+const mapSet = reactive({
   loading: deviceDetection() ? false : true
 });
 
@@ -138,7 +138,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 #mapview {
-  height: 100vh;
+  height: calc(100vh - 86px);
 }
 
 :deep(.amap-marker-label) {

src/layout/components/appMain.vue

@@ -74,9 +74,18 @@ const transitionMain = defineComponent({
               v-if="keepAlive"
               :include="usePermissionStoreHook().cachePageList"
             >
-              <component :is="Component" :key="route.fullPath" />
+              <component
+                :is="Component"
+                :key="route.fullPath"
+                class="main-content"
+              />
             </keep-alive>
-            <component v-else :is="Component" :key="route.fullPath" />
+            <component
+              v-else
+              :is="Component"
+              :key="route.fullPath"
+              class="main-content"
+            />
           </transitionMain>
         </el-scrollbar>
         <div v-else>
@@ -85,9 +94,18 @@ const transitionMain = defineComponent({
               v-if="keepAlive"
               :include="usePermissionStoreHook().cachePageList"
             >
-              <component :is="Component" :key="route.fullPath" />
+              <component
+                :is="Component"
+                :key="route.fullPath"
+                class="main-content"
+              />
             </keep-alive>
-            <component v-else :is="Component" :key="route.fullPath" />
+            <component
+              v-else
+              :is="Component"
+              :key="route.fullPath"
+              class="main-content"
+            />
           </transitionMain>
         </div>
       </template>
@@ -108,4 +126,8 @@ const transitionMain = defineComponent({
   min-height: 100vh;
   position: relative;
 }
+
+.main-content {
+  margin: 24px;
+}
 </style>

src/style/index.scss

@@ -65,11 +65,6 @@ ul {
   }
 }
 
-// main-container global css
-.app-container {
-  padding: 20px;
-}
-
 .login,
 .register {
   width: 100vw;

src/style/sidebar.scss

@@ -33,6 +33,7 @@
     transition: margin-left 0.28s;
     margin-left: $sideBarWidth;
     position: relative;
+    background: #f0f2f5;
     @media screen and (min-width: 150px) and (max-width: 420px) {
       .app-main .el-scrollbar__view:first-child {
         overflow-y: hidden;

src/views/components/contextmenu/index.vue

@@ -5,7 +5,7 @@ import menuDynamic from "./menuDynamic.vue";
 </script>
 
 <template>
-  <div style="margin: 10px">
+  <div>
     <el-row :gutter="24">
       <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
         <!-- 基本使用 -->

src/views/components/count-to/index.vue

@@ -3,7 +3,7 @@ import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
 </script>
 
 <template>
-  <div style="margin: 10px">
+  <div>
     <el-row :gutter="24">
       <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
         <el-card shadow="always">

src/views/components/cropping/index.vue

@@ -25,7 +25,7 @@ const onCropper = (): void => {
 </script>
 
 <template>
-  <div style="margin: 10px">
+  <div>
     <div class="cropper-container">
       <Cropper ref="refCropper" :width="'40vw'" :src="img" />
       <img :src="cropperImg" class="croppered" v-if="cropperImg" />

src/views/components/map/index.vue

@@ -3,14 +3,11 @@ import { Amap } from "/@/components/ReMap";
 </script>
 
 <template>
-  <div class="map">
+  <Amap />
-    <Amap />
-  </div>
 </template>
 
 <style scoped>
-.map {
+.main-content {
-  width: 100%;
+  margin: 0;
-  height: 89vh;
 }
 </style>

src/views/components/seamless-scroll/index.vue

@@ -110,10 +110,6 @@ function changeDirection(val) {
 </template>
 
 <style lang="scss" scoped>
-.box-card {
-  margin: 10px;
-}
-
 .card-header {
   display: flex;
   justify-content: space-between;

src/views/components/selector/index.vue

@@ -23,12 +23,7 @@ const selectedVal = ({ left, right }): void => {
 
 <template>
   <div>
-    <el-card
+    <el-card class="box-card" v-for="(item, key) in dataLists" :key="key">
-      class="box-card"
-      style="margin: 10px"
-      v-for="(item, key) in dataLists"
-      :key="key"
-    >
       <template #header>
         <div class="card-header">
           <span>{{ item.title }}</span>
@@ -44,3 +39,9 @@ const selectedVal = ({ left, right }): void => {
     </el-card>
   </div>
 </template>
+
+<style scoped>
+.el-card {
+  margin-bottom: 10px;
+}
+</style>

src/views/components/split-pane/index.vue

@@ -41,12 +41,11 @@ const settingTB: ContextProps = reactive({
 
 <style lang="scss" scoped>
 $W: 100%;
-$H: 80vh;
+$H: 70vh;
 
 .split-pane {
-  width: 98%;
+  width: 70vw;
   height: $H;
-  margin-top: 5px;
   text-align: center;
   font-size: 50px;
   color: #fff;

src/views/flow-chart/index.vue

@@ -86,9 +86,8 @@ onMounted(() => {
 
 <style scoped>
 #LF-Turbo {
-  width: 100vw;
+  width: 100%;
-  height: 88.5vh;
+  height: calc(100vh - 90px);
-  outline: none;
 }
 
 .logic-flow-view {
@@ -138,4 +137,8 @@ onMounted(() => {
   height: 85vh;
   overflow: auto;
 }
+
+.main-content {
+  margin: 0;
+}
 </style>

src/views/nested/menu1/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div>
     <p>{{ $t("message.hsmenu1") }}</p>
     <router-view>
       <template #default="{ Component, route }">

src/views/nested/menu2/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div>
     <p>{{ $t("message.hsmenu2") }}</p>
     <el-input v-model="input" />
   </div>

src/views/permission/button/index.vue

@@ -14,7 +14,7 @@ function changRole(value) {
 </script>
 
 <template>
-  <div class="app-container">
+  <div>
     <el-radio-group v-model="auth" @change="changRole">
       <el-radio-button label="admin"></el-radio-button>
       <el-radio-button label="test"></el-radio-button>

src/views/permission/page/index.vue

@@ -22,7 +22,7 @@ function changRole() {
 </script>
 
 <template>
-  <div class="app-container">
+  <div>
     <h4>
       当前角色：
       <span style="font-size: 26px">{{ purview }}</span>

src/views/system/dict/index.vue

@@ -197,7 +197,7 @@ function handleClose() {
 </script>
 
 <template>
-  <div class="dict-container">
+  <div>
     <!-- 工具栏 -->
     <vxe-toolbar>
       <template #buttons>
@@ -309,10 +309,6 @@ function handleClose() {
 </template>
 
 <style lang="scss" scoped>
-.dict-container {
-  margin: 10px;
-}
-
 .vxe-input + .vxe-button,
 .vxe-input + .vxe-button--dropdown,
 .vxe-button + .vxe-button,
@@ -324,6 +320,14 @@ function handleClose() {
   border-radius: 0;
 }
 
+.vxe-toolbar.size--medium {
+  padding: 10px;
+}
+
+.vxe-table--render-default.size--medium {
+  margin-top: 12px;
+}
+
 .vxe-button.size--medium.type--button {
   margin-right: 0.07em;
 }

src/views/system/user/index.vue

@@ -6,7 +6,7 @@ const gridOptions = reactive({
   border: true,
   resizable: true,
   keepSource: true,
-  height: 500,
+  height: 578,
   printConfig: {},
   importConfig: {},
   exportConfig: {},
@@ -162,33 +162,6 @@ const gridOptions = reactive({
                 sex: "Man ",
                 age: 35,
                 address: "Guangzhou"
-              },
-              {
-                id: 100011,
-                name: "Test11",
-                nickname: "T11",
-                role: "Test",
-                sex: "Women ",
-                age: 26,
-                address: "vxe-table 从入门到放弃"
-              },
-              {
-                id: 100012,
-                name: "Test12",
-                nickname: "T12",
-                role: "Develop",
-                sex: "Man ",
-                age: 34,
-                address: "Guangzhou"
-              },
-              {
-                id: 100013,
-                name: "Test13",
-                nickname: "T13",
-                role: "Test",
-                sex: "Women ",
-                age: 22,
-                address: "Shenzhen"
               }
             ];
             resolve({
@@ -238,5 +211,5 @@ const gridOptions = reactive({
 </script>
 
 <template>
-  <vxe-grid v-bind="gridOptions" style="width: 98%"></vxe-grid>
+  <vxe-grid v-bind="gridOptions"></vxe-grid>
 </template>

src/views/welcome.vue

@@ -6,12 +6,10 @@ import {
   ReLine,
   ReBar
 } from "/@/components/ReCharts/index";
-import { useAppStoreHook } from "/@/store/modules/app";
+import { ref, computed } from "vue";
-import { ref, shallowRef, computed, onBeforeMount } from "vue";
 
 const date: Date = new Date();
 let loading = ref<boolean>(true);
-const componentList = shallowRef([]);
 
 setTimeout(() => {
   loading.value = !loading.value;
@@ -27,56 +25,6 @@ let greetings = computed(() => {
   }
 });
 
-onBeforeMount(() => {
-  if (useAppStoreHook().device === "mobile") {
-    componentList.value = [
-      {
-        width: "20em",
-        title: "GitHub饼图信息",
-        component: RePie
-      },
-      {
-        width: "20em",
-        title: "GitHub折线图信息",
-        component: ReLine
-      },
-      {
-        width: "20em",
-        title: "GitHub柱状图信息",
-        component: ReBar
-      }
-    ];
-  } else {
-    componentList.value = [
-      {
-        width: "43em",
-        title: "GitHub信息",
-        component: ReGithub
-      },
-      {
-        width: "43em",
-        title: "GitHub滚动信息",
-        component: ReInfinite
-      },
-      {
-        width: "28.28em",
-        title: "GitHub饼图信息",
-        component: RePie
-      },
-      {
-        width: "28.28em",
-        title: "GitHub折线图信息",
-        component: ReLine
-      },
-      {
-        width: "28.28em",
-        title: "GitHub柱状图信息",
-        component: ReBar
-      }
-    ];
-  }
-});
-
 const openDepot = (): void => {
   window.open("https://github.com/xiaoxian521/vue-pure-admin");
 };
@@ -95,27 +43,97 @@ const openDepot = (): void => {
       </div>
     </el-card>
 
-    <el-space class="space" wrap size="large">
+    <el-row :gutter="24" style="margin: 20px">
-      <el-skeleton
+      <el-col
-        v-for="(item, key) in componentList"
+        :xs="24"
-        :key="key"
+        :sm="12"
-        animated
+        :md="12"
-        :rows="7"
+        :lg="12"
-        :loading="loading"
+        :xl="12"
-        :class="$style.size"
+        style="margin-bottom: 20px"
-        :style="{ width: item.width }"
       >
-        <template #default>
+        <el-skeleton animated :rows="7" :loading="false">
-          <div
+          <template #default>
-            :class="['echart-card', $style.size]"
+            <el-card>
-            :style="{ width: item.width }"
+              <h4>GitHub信息</h4>
-          >
+              <ReGithub />
-            <h4>{{ item.title }}</h4>
+            </el-card>
-            <component :is="item.component"></component>
+          </template>
-          </div>
+        </el-skeleton>
-        </template>
+      </el-col>
-      </el-skeleton>
+
-    </el-space>
+      <el-col
+        :xs="24"
+        :sm="12"
+        :md="12"
+        :lg="12"
+        :xl="12"
+        style="margin-bottom: 20px"
+      >
+        <el-skeleton animated :rows="7" :loading="false">
+          <template #default>
+            <el-card>
+              <h4>GitHub滚动信息</h4>
+              <ReInfinite />
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+
+      <el-col
+        :xs="24"
+        :sm="12"
+        :md="12"
+        :lg="8"
+        :xl="8"
+        style="margin-bottom: 20px"
+      >
+        <el-skeleton animated :rows="7" :loading="false">
+          <template #default>
+            <el-card>
+              <h4>GitHub饼图信息</h4>
+              <RePie />
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+
+      <el-col
+        :xs="24"
+        :sm="12"
+        :md="12"
+        :lg="8"
+        :xl="8"
+        style="margin-bottom: 20px"
+      >
+        <el-skeleton animated :rows="7" :loading="false">
+          <template #default>
+            <el-card>
+              <h4>GitHub折线图信息</h4>
+              <ReLine />
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+
+      <el-col
+        :xs="24"
+        :sm="24"
+        :md="24"
+        :lg="8"
+        :xl="1"
+        style="margin-bottom: 20px"
+      >
+        <el-skeleton animated :rows="7" :loading="false">
+          <template #default>
+            <el-card>
+              <h4>GitHub柱状图信息</h4>
+              <ReBar />
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -126,8 +144,11 @@ const openDepot = (): void => {
 </style>
 
 <style lang="scss" scoped>
+.main-content {
+  margin: 0;
+}
+
 .welcome {
-  width: 100%;
   height: 100%;
 
   .top-content {
@@ -155,22 +176,5 @@ const openDepot = (): void => {
       }
     }
   }
-
-  .space {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: 8px;
-    padding: 10px;
-
-    .echart-card {
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-
-      h4 {
-        margin: 0;
-        padding: 20px;
-      }
-    }
-  }
 }
 </style>