ui优化

src/views/dashboard/BarChart.vue

@@ -10,16 +10,16 @@ const animationDuration = 6000
 const props = defineProps({
   className: {
     type: String,
-    default: 'chart',
+    default: 'chart'
   },
   width: {
     type: String,
-    default: '100%',
+    default: '100%'
   },
   height: {
     type: String,
-    default: '300px',
+    default: '300px'
-  },
+  }
 })
 function initChart() {
   chart = echarts.init(proxy.$refs.chartRef, 'macarons')
@@ -29,59 +29,49 @@ function initChart() {
       trigger: 'axis',
       axisPointer: {
         // 坐标轴指示器，坐标轴触发有效
-        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+      }
     },
+    title: {
+      text: 'echats标题'
     },
     grid: {
-      top: 10,
+      top: 60,
       left: '2%',
       right: '2%',
       bottom: '3%',
-      containLabel: true,
+      containLabel: true
     },
     xAxis: [
       {
         type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
         axisTick: {
-          alignWithLabel: true,
+          alignWithLabel: true
-        },
+        }
-      },
+      }
     ],
     yAxis: [
       {
         type: 'value',
         axisTick: {
-          show: false,
+          show: false
-        },
+        }
-      },
+      }
     ],
     series: [
       {
-        name: 'pageA',
+        name: '销量',
         type: 'bar',
         stack: 'vistors',
-        barWidth: '60%',
+        barWidth: '40%',
         data: [79, 52, 200, 334, 390, 330, 220],
         animationDuration,
-      },
+        label: {
-      {
+          show: true
-        name: 'pageB',
+        }
-        type: 'bar',
+      }
-        stack: 'vistors',
+    ]
-        barWidth: '60%',
-        data: [80, 52, 200, 334, 390, 330, 220],
-        animationDuration,
-      },
-      {
-        name: 'pageC',
-        type: 'bar',
-        stack: 'vistors',
-        barWidth: '60%',
-        data: [30, 52, 200, 334, 390, 330, 220],
-        animationDuration,
-      },
-    ],
   })
 }
 onMounted(() => {

src/views/dashboard/LineChart.vue

@@ -9,24 +9,24 @@ const chartRef = ref(null)
 const props = defineProps({
   className: {
     type: String,
-    default: 'chart',
+    default: 'chart'
   },
   width: {
     type: String,
-    default: '100%',
+    default: '100%'
   },
   height: {
     type: String,
-    default: '350px',
+    default: '350px'
   },
   autoResize: {
     type: Boolean,
-    default: true,
+    default: true
   },
   chartData: {
     type: Object,
-    required: true,
+    required: true
-  },
+  }
 })
 let chart = null
 watch(
@@ -34,7 +34,7 @@ watch(
   (val) => {
     setOptions(val)
   },
-  { deep: true },
+  { deep: true }
 )
 
 function setOptions({ expectedData, actualData } = {}) {
@@ -43,30 +43,33 @@ function setOptions({ expectedData, actualData } = {}) {
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       boundaryGap: false,
       axisTick: {
-        show: false,
+        show: false
+      }
     },
+    title: {
+      text: '图标测试数据'
     },
     grid: {
       left: 10,
       right: 10,
       bottom: 20,
-      top: 30,
+      top: 60,
-      containLabel: true,
+      containLabel: true
     },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'cross',
+        type: 'cross'
       },
-      padding: [5, 10],
+      padding: [5, 10]
     },
     yAxis: {
       axisTick: {
-        show: false,
+        show: false
-      },
+      }
     },
     legend: {
-      data: ['expected', 'actual'],
+      data: ['expected', 'actual']
     },
     series: [
       {
@@ -75,14 +78,14 @@ function setOptions({ expectedData, actualData } = {}) {
           color: '#FF005A',
           lineStyle: {
             color: '#FF005A',
-            width: 2,
+            width: 2
-          },
+          }
         },
         smooth: true,
         type: 'line',
         data: expectedData,
         animationDuration: 2800,
-        animationEasing: 'cubicInOut',
+        animationEasing: 'cubicInOut'
       },
       {
         name: 'actual',
@@ -91,18 +94,18 @@ function setOptions({ expectedData, actualData } = {}) {
         itemStyle: {
           color: '#3888fa',
           areaStyle: {
-            color: '#f3f8ff',
+            color: '#f3f8ff'
           },
           lineStyle: {
             color: '#3888fa',
-            width: 2,
+            width: 2
-          },
+          }
         },
         data: actualData,
         animationDuration: 2800,
-        animationEasing: 'quadraticOut',
+        animationEasing: 'quadraticOut'
-      },
+      }
-    ],
+    ]
   })
 }
 function initChart() {

src/views/index_v1.vue

@@ -27,7 +27,7 @@
     </el-row>
 
     <el-row :gutter="15">
-      <el-col :md="12" :lg="12" :xl="12" class="mb10">
+      <el-col :md="12" :lg="12" :xl="12" class="mb10" v-hasPermi="['online']">
         <el-card shadow="hover">
           <template #header>
             <div>
@@ -51,7 +51,13 @@
         <el-card shadow="hover">
           <template #header>
             <span><svg-icon name="tool" /> 常用功能</span>
-            <el-button class="home-card-more" text @click="showEdit = !showEdit">{{ $t('btn.edit') }}</el-button>
+            <div class="home-card-more">
+              <el-button text @click="handleAdd()">{{ $t('btn.add') }}</el-button>
+              <!-- <el-button text @click="showEdit = !showEdit">
+                <span v-if="!showEdit">{{ $t('btn.edit') }}</span>
+                <span v-else>{{ $t('btn.cancel') }}</span>
+              </el-button> -->
+            </div>
           </template>
           <div class="info">
             <el-scrollbar wrap-class="scrollbar-wrapper"> <CommonMenu v-model="showEdit"></CommonMenu></el-scrollbar>
@@ -212,6 +218,9 @@ function onChat(item) {
     })
     .catch(() => {})
 }
+function handleAdd() {
+  proxy.$modal.msg('请通过搜索添加')
+}
 </script>
 
 <style lang="scss" scoped>

src/views/system/role/index.vue

@@ -159,7 +159,14 @@
             <el-form-item label="数据权限" v-show="form.dataScope == 2">
               <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
               <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
-              <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+              <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">
+                父子联动
+                <el-tooltip content="勾选父节点是否同时选中子节点" placement="top">
+                  <el-icon :size="15">
+                    <questionFilled />
+                  </el-icon>
+                </el-tooltip>
+              </el-checkbox>
               <el-tree
                 class="tree-border"
                 :data="deptOptions"