style(首页): 样式重构

package.json

@@ -21,7 +21,7 @@
     "@vueuse/core": "10.11.0",
     "axios": "0.28.1",
     "clipboard": "2.0.11",
-    "echarts": "5.5.1",
+    "echarts": "^5.4.0",
     "element-plus": "2.7.6",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",

src/assets/styles/element-ui.scss

@@ -98,3 +98,19 @@
 .el-select{
   width: 215px;
 }
+
+.el-tabs{
+  flex: 1;
+}
+
+.el-row{
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+
+  .el-col:nth-child(1){
+    padding-left: 0 !important;
+  }
+  .el-col:nth-last-child(1){
+    padding-right: 0 !important;
+  }
+}
\ No newline at end of file

src/assets/styles/index.scss

@@ -121,9 +121,11 @@ aside {
   }
 }
 
-//main-container全局样式
+// main-container全局样式
 .app-container {
-  padding: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .components-container {

src/assets/styles/sidebar.scss

@@ -5,6 +5,7 @@
     transition: margin-left .28s;
     margin-left: $base-sidebar-width;
     position: relative;
+    box-sizing: border-box;
   }
 
   .sidebarHide {

src/assets/styles/variables.module.scss

@@ -243,6 +243,6 @@ html.dark {
 
   /* 主页背景 */
   .app-main {
-    background-color: var(--el-bg-color) !important;
+    background-color: #141414 !important;
   }
 }
\ No newline at end of file

src/hooks/resize.js

 import { onMounted, onBeforeUnmount } from 'vue';
+import useAppStore from '@/store/modules/app';
+const sidebar = computed(() => useAppStore().sidebar);
 
 export function useWindowResize(callback) {
 
-  let resizeTimer = null
-  let handleResize = () => {
-    clearTimeout(resizeTimer)
-    resizeTimer = setTimeout(() => {
+  watch(sidebar, () => {
+    // 等待侧边栏导航动画完成，右侧才有最新宽度再 resize
+    setTimeout(() => {
       callback()
-    }, 200)
-  }
-  let observer = new ResizeObserver(handleResize);
+    }, 300)
+  }, { deep: true })
 
   onMounted(() => {
-    // 监听侧边栏宽度改变，右边图表要重新绘制
-    observer.observe(document.querySelector('.sidebar-container'))
     window.addEventListener('resize', callback);
   });
 
   onBeforeUnmount(() => {
-    if (observer) {
-      observer.disconnect();
-      clearTimeout(resizeTimer)
-      resizeTimer = null
-      observer = null
-      handleResize = null
-    }
     window.removeEventListener('resize', callback);
   });
 }
\ No newline at end of file

src/layout/components/AppMain.vue

 <template>
   <section class="app-main">
     <router-view v-slot="{ Component, route }">
-      <transition name="fade-transform" mode="out-in">
+      <transition name="fade-transform"
+        mode="out-in">
         <keep-alive :include="tagsViewStore.cachedViews">
-          <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
+          <component v-if="!route.meta.link"
+            :is="Component"
+            :key="route.path" />
         </keep-alive>
       </transition>
     </router-view>
@@ -33,30 +36,20 @@ function addIframe() {
 }
 </script>
 
-<style lang="scss" scoped>
-.app-main {
+<style lang="scss"
+  scoped>
+  .app-main {
     /* 50= navbar  50  */
     min-height: calc(100vh - 50px);
+    padding: 20px;
     width: 100%;
     position: relative;
     overflow: hidden;
     background-color: var(--el-bg-color);
-}
-
-.fixed-header + .app-main {
-  padding-top: 50px;
-}
-
-.hasTagsView {
-  .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    display: flex;
+    flex-direction: column;
   }
 
-  .fixed-header + .app-main {
-    padding-top: 84px;
-  }
-}
 </style>
 
 <style lang="scss">
@@ -81,4 +74,3 @@ function addIframe() {
   border-radius: 3px;
 }
 </style>
-

src/layout/index.vue

@@ -23,7 +23,6 @@
 import { useWindowSize } from '@vueuse/core'
 import Sidebar from './components/Sidebar/index.vue'
 import { AppMain, Navbar, Settings, TagsView } from './components'
-
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -43,7 +42,7 @@ const classObj = computed(() => ({
 }))
 
 const { width, height } = useWindowSize();
-const WIDTH = 992; // refer to Bootstrap's responsive design
+const WIDTH = 992;
 
 watch(() => device.value, () => {
   if (device.value === 'mobile' && sidebar.value.opened) {
@@ -109,8 +108,24 @@ function setLayout() {
   // 开启头部固定以后，main的高度需要设置为100vh
   .fixed-header+.app-main {
     min-height: 100vh;
+    padding-top: 50px + 20px;
+  }
+
+
+  // 有头部标签导航时
+  .hasTagsView {
+    .app-main {
+      /* 84 = navbar + tags-view = 50 + 34 */
+      // min-height: calc(100vh - 84px);
+      min-height: 100vh;
+    }
+
+    .fixed-header+.app-main {
+      padding-top: 84px + 20px;
+    }
   }
 
+  // 侧边栏导航隐藏时
   .hideSidebar .fixed-header {
     width: calc(100% - 54px);
   }

src/views/bi/competitor/cmm/index.vue

@@ -267,7 +267,7 @@ const reset = async () => {
     flex-direction: column;
 
     .chart_wrap {
-      padding: 20px 0;
+      /* padding: 20px 0; */
       flex: 1;
       display: flex;
       flex-direction: column;

src/views/bi/competitor/index.vue

@@ -30,14 +30,12 @@ const activeName = ref(list.value[0].name)
 <style scoped
   lang="scss">
   .app-container {
-    min-height: calc(100vh - 84px);
 
     .tabs {
       background: var(--el-bg-color-overlay);
       padding: 20px;
       display: flex;
       flex-direction: column;
-      min-height: 100%;
 
       ::v-deep(.el-tabs__content) {
         flex: 1;

src/views/dashboard/BarChart.vue

@@ -61,18 +61,27 @@ const initChart = () => {
       stack: 'vistors',
       barWidth: '60%',
       data: [79, 52, 200, 334, 390, 330, 220],
+      animation: true,
+      animationDuration: 2000,
+      animationEasing: 'cubicInOut'
     }, {
       name: '冷热双吃',
       type: 'bar',
       stack: 'vistors',
       barWidth: '60%',
       data: [80, 52, 200, 334, 390, 330, 220],
+      animation: true,
+      animationDuration: 2000,
+      animationEasing: 'cubicInOut'
     }, {
       name: '去骨凤爪',
       type: 'bar',
       stack: 'vistors',
       barWidth: '60%',
       data: [30, 52, 200, 334, 390, 330, 220],
+      animation: true,
+      animationDuration: 2000,
+      animationEasing: 'cubicInOut'
     }]
   })
 }
@@ -80,6 +89,7 @@ const resize = () => {
   chart.resize()
 }
 useWindowResize(resize)
+
 onMounted(() => {
   nextTick(() => {
     initChart()

src/views/dashboard/LineChart.vue

@@ -21,10 +21,6 @@ const props = defineProps({
     type: String,
     default: '350px'
   },
-  autoResize: {
-    type: Boolean,
-    default: true
-  },
   chartData: {
     type: Object,
     required: true
@@ -69,7 +65,8 @@ const setOptions = () => {
       }
     },
     series: [{
-      name: '今年销量', itemStyle: {
+      name: '今年销量',
+      itemStyle: {
         // normal: {
         color: '#FF005A',
         lineStyle: {
@@ -81,7 +78,8 @@ const setOptions = () => {
       smooth: true,
       type: 'line',
       data: props.chartData.expectedData,
-      animationEasing: 'cubicInOut'
+      // animationEasing: 'cubicInOut',
+      animationDuration: 2000
     },
     {
       name: '去年销量',
@@ -100,7 +98,8 @@ const setOptions = () => {
         // }
       },
       data: props.chartData.actualData,
-      animationEasing: 'quadraticOut'
+      // animationEasing: 'quadraticOut'
+      animationDuration: 2000
     }]
   })
 }
@@ -109,20 +108,15 @@ watch(() => props.chartData, (newData, oldData) => {
   setOptions();
 }, { deep: true });
 
-const initChart = () => {
+onMounted(() => {
+  nextTick(() => {
     chart = echarts.init(chartRef.value)
     setOptions()
-}
+  })
+})
 
-const resize = () => {
+useWindowResize(() => {
   chart.resize()
-}
-useWindowResize(resize)
-
-onMounted(() => {
-  nextTick(() => {
-    initChart()
-  })
 })
 
 onBeforeUnmount(() => {

src/views/dashboard/PanelGroup.vue

 <template>
-  <el-row :gutter="40"
-    class="panel-group">
+  <el-row class="panel-group" :gutter="20">
     <el-col :xs="12"
       :sm="12"
       :lg="6"
@@ -100,11 +99,8 @@ const handleSetLineChartData = (type) => {
 <style lang="scss"
   scoped>
   .panel-group {
-    margin-top: 18px;
 
     .card-panel-col {
-      margin-bottom: 32px;
-    }
 
       .card-panel {
         height: 108px;
@@ -187,6 +183,7 @@ const handleSetLineChartData = (type) => {
         }
       }
     }
+  }
 
   @media (max-width:550px) {
     .card-panel-description {

src/views/dashboard/PieChart.vue

@@ -56,6 +56,7 @@ const initChart = () => {
           { value: 59, name: '杭州' }
         ],
         animationEasing: 'cubicInOut',
+        animationDuration: 2000,
       }
     ]
   })

src/views/dashboard/RaddarChart.vue

@@ -6,10 +6,9 @@
 
 <script setup>
 import * as echarts from 'echarts'
-import { onBeforeUnmount } from 'vue'
 import { useWindowResize } from '@/hooks'
 
-defineProps({
+const props = defineProps({
   className: {
     type: String,
     default: 'chart'
@@ -24,12 +23,10 @@ defineProps({
   }
 })
 
-let chart = null
+let chart = {}
 const chartRef = ref(null)
 
-const initChart = () => {
-  chart = echarts.init(chartRef.value)
-
+const setOptions = () => {
   chart.setOption({
     tooltip: {
       trigger: 'axis',
@@ -83,32 +80,35 @@ const initChart = () => {
       data: [
         {
           value: [5000, 7000, 12000, 11000, 15000, 14000],
-          name: '营销中心'
+          name: '营销中心',
+          animationDuration: 2000
         },
         {
           value: [4000, 9000, 15000, 15000, 13000, 11000],
-          name: '人力资源中心'
+          name: '人力资源中心',
+          animationDuration: 2000
         },
         {
           value: [5500, 11000, 12000, 15000, 12000, 12000],
-          name: '财务中心'
+          name: '财务中心',
+          animationDuration: 2000
         }
       ]
     }]
   })
 }
 
-const resize = () => {
-  chart.resize()
-}
-useWindowResize(resize)
-
 onMounted(() => {
   nextTick(() => {
-    initChart()
+    chart = echarts.init(chartRef.value)
+    setOptions()
   })
 })
 
+useWindowResize(() => {
+  chart.resize()
+})
+
 onBeforeUnmount(() => {
   if (!chart) {
     return

src/views/index.vue

 <template>
-  <div class="dashboard-editor-container">
+  <div class="dashboard-editor-container app-container">
     <panel-group @handleSetLineChartData="handleSetLineChartData" />
+    <div class="row">
       <common-menu></common-menu>
-    <el-row :gutter="32">
+    </div>
+
+    <el-row :gutter="32" class="row">
       <el-col :xs="24"
         :sm="24"
         :lg="8">
@@ -25,8 +28,8 @@
         </div>
       </el-col>
     </el-row>
-    <el-row class="line-chart">
-      <line-chart :chart-data="lineChartData" />
+    <el-row class="line-chart row">
+      <line-chart :chartData="lineChartData"/>
     </el-row>
   </div>
 </template>
@@ -66,18 +69,22 @@ const handleSetLineChartData = (type) => {
 <style lang="scss"
   scoped>
   .dashboard-editor-container {
-    padding: 32px;
+    .row{
+      margin-top: 20px;
+    }
 
     .chart-wrapper {
       background: var(--el-bg-color-overlay);
       padding: 16px 16px 0;
-      margin: 32px 0;
     }
 
     .line-chart {
       background: var(--el-bg-color-overlay);
       padding: 16px 16px 0;
-      margin-bottom: 32px;
+    }
+
+    ::v-deep(.el-row) {
+      width: 100%;
     }
   }
 </style>