From 9ddf449ea7759a2bc85dffe04978c2d10997f5d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E4=B8=87?=
 <52823142+Ten-K@users.noreply.github.com>
Date: Sun, 31 Oct 2021 20:24:57 +0800
Subject: [PATCH] perf: perf style (#89)

perf: perf style
---
 src/components/ReCharts/src/Infinite.vue      |   2 +-
 src/components/ReMap/src/Amap.vue             |   4 +-
 src/layout/components/appMain.vue             |  30 ++-
 src/style/index.scss                          |   5 -
 src/style/sidebar.scss                        |   1 +
 src/views/components/contextmenu/index.vue    |   2 +-
 src/views/components/count-to/index.vue       |   2 +-
 src/views/components/cropping/index.vue       |   2 +-
 src/views/components/map/index.vue            |   9 +-
 .../components/seamless-scroll/index.vue      |   4 -
 src/views/components/selector/index.vue       |  13 +-
 src/views/components/split-pane/index.vue     |   5 +-
 src/views/flow-chart/index.vue                |   9 +-
 src/views/nested/menu1/index.vue              |   2 +-
 src/views/nested/menu2/index.vue              |   2 +-
 src/views/permission/button/index.vue         |   2 +-
 src/views/permission/page/index.vue           |   2 +-
 src/views/system/dict/index.vue               |  14 +-
 src/views/system/user/index.vue               |  31 +--
 src/views/welcome.vue                         | 186 +++++++++---------
 20 files changed, 161 insertions(+), 166 deletions(-)

diff --git a/src/components/ReCharts/src/Infinite.vue b/src/components/ReCharts/src/Infinite.vue
index 28f9c0160..654d87fe3 100644
--- a/src/components/ReCharts/src/Infinite.vue
+++ b/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;
 
diff --git a/src/components/ReMap/src/Amap.vue b/src/components/ReMap/src/Amap.vue
index ef2c5e931..507d937c9 100644
--- a/src/components/ReMap/src/Amap.vue
+++ b/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) {
diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue
index 4040f0b64..4cfb26ae1 100644
--- a/src/layout/components/appMain.vue
+++ b/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>
diff --git a/src/style/index.scss b/src/style/index.scss
index 0706bfd44..a72b289c2 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -65,11 +65,6 @@ ul {
   }
 }
 
-// main-container global css
-.app-container {
-  padding: 20px;
-}
-
 .login,
 .register {
   width: 100vw;
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 5aad6fcd5..bbb570724 100644
--- a/src/style/sidebar.scss
+++ b/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;
diff --git a/src/views/components/contextmenu/index.vue b/src/views/components/contextmenu/index.vue
index 8dbde0f41..f59353a64 100644
--- a/src/views/components/contextmenu/index.vue
+++ b/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">
         <!-- 基本使用 -->
diff --git a/src/views/components/count-to/index.vue b/src/views/components/count-to/index.vue
index 6296cc3c2..68dc7a1ed 100644
--- a/src/views/components/count-to/index.vue
+++ b/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">
diff --git a/src/views/components/cropping/index.vue b/src/views/components/cropping/index.vue
index 5f1b3d948..cdcdbb576 100644
--- a/src/views/components/cropping/index.vue
+++ b/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" />
diff --git a/src/views/components/map/index.vue b/src/views/components/map/index.vue
index 335287127..af9cd48ab 100644
--- a/src/views/components/map/index.vue
+++ b/src/views/components/map/index.vue
@@ -3,14 +3,11 @@ import { Amap } from "/@/components/ReMap";
 </script>
 
 <template>
-  <div class="map">
-    <Amap />
-  </div>
+  <Amap />
 </template>
 
 <style scoped>
-.map {
-  width: 100%;
-  height: 89vh;
+.main-content {
+  margin: 0;
 }
 </style>
diff --git a/src/views/components/seamless-scroll/index.vue b/src/views/components/seamless-scroll/index.vue
index 89741f6de..0624634ba 100644
--- a/src/views/components/seamless-scroll/index.vue
+++ b/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;
diff --git a/src/views/components/selector/index.vue b/src/views/components/selector/index.vue
index 7be3d591c..61e1aa4fe 100644
--- a/src/views/components/selector/index.vue
+++ b/src/views/components/selector/index.vue
@@ -23,12 +23,7 @@ const selectedVal = ({ left, right }): void => {
 
 <template>
   <div>
-    <el-card
-      class="box-card"
-      style="margin: 10px"
-      v-for="(item, key) in dataLists"
-      :key="key"
-    >
+    <el-card class="box-card" 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>
diff --git a/src/views/components/split-pane/index.vue b/src/views/components/split-pane/index.vue
index 559c29af8..ee9ef9775 100644
--- a/src/views/components/split-pane/index.vue
+++ b/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;
diff --git a/src/views/flow-chart/index.vue b/src/views/flow-chart/index.vue
index dc705af88..e7d68e219 100644
--- a/src/views/flow-chart/index.vue
+++ b/src/views/flow-chart/index.vue
@@ -86,9 +86,8 @@ onMounted(() => {
 
 <style scoped>
 #LF-Turbo {
-  width: 100vw;
-  height: 88.5vh;
-  outline: none;
+  width: 100%;
+  height: calc(100vh - 90px);
 }
 
 .logic-flow-view {
@@ -138,4 +137,8 @@ onMounted(() => {
   height: 85vh;
   overflow: auto;
 }
+
+.main-content {
+  margin: 0;
+}
 </style>
diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue
index b84b33691..c038ea232 100644
--- a/src/views/nested/menu1/index.vue
+++ b/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 }">
diff --git a/src/views/nested/menu2/index.vue b/src/views/nested/menu2/index.vue
index 627cd8621..315b04fb7 100644
--- a/src/views/nested/menu2/index.vue
+++ b/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>
diff --git a/src/views/permission/button/index.vue b/src/views/permission/button/index.vue
index 11a62e09a..47ead5112 100644
--- a/src/views/permission/button/index.vue
+++ b/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>
diff --git a/src/views/permission/page/index.vue b/src/views/permission/page/index.vue
index fbfa3adc6..33166f53d 100644
--- a/src/views/permission/page/index.vue
+++ b/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>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 327344a38..4913b8604 100644
--- a/src/views/system/dict/index.vue
+++ b/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;
 }
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 810a71cc1..4e324fb40 100644
--- a/src/views/system/user/index.vue
+++ b/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>
diff --git a/src/views/welcome.vue b/src/views/welcome.vue
index 87e7dee42..d15aa3b0d 100644
--- a/src/views/welcome.vue
+++ b/src/views/welcome.vue
@@ -6,12 +6,10 @@ import {
   ReLine,
   ReBar
 } from "/@/components/ReCharts/index";
-import { useAppStoreHook } from "/@/store/modules/app";
-import { ref, shallowRef, computed, onBeforeMount } from "vue";
+import { ref, computed } 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-skeleton
-        v-for="(item, key) in componentList"
-        :key="key"
-        animated
-        :rows="7"
-        :loading="loading"
-        :class="$style.size"
-        :style="{ width: item.width }"
+    <el-row :gutter="24" style="margin: 20px">
+      <el-col
+        :xs="24"
+        :sm="12"
+        :md="12"
+        :lg="12"
+        :xl="12"
+        style="margin-bottom: 20px"
       >
-        <template #default>
-          <div
-            :class="['echart-card', $style.size]"
-            :style="{ width: item.width }"
-          >
-            <h4>{{ item.title }}</h4>
-            <component :is="item.component"></component>
-          </div>
-        </template>
-      </el-skeleton>
-    </el-space>
+        <el-skeleton animated :rows="7" :loading="false">
+          <template #default>
+            <el-card>
+              <h4>GitHub信息</h4>
+              <ReGithub />
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+
+      <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>