refactor: 首页控制台优化

Former-commit-id: 40345282d470d315585b052e0ae55cb1974e3e25

src/views/dashboard/components/BarChart.vue

@@ -1,6 +1,9 @@
 <!--  线 + 柱混合图 -->
 <template>
-  <div :id="id" :class="className" :style="{ height, width }" />
+  <el-card>
+    <template #header> 业绩柱状图 </template>
+    <div :id="id" :class="className" :style="{ height, width }" />
+  </el-card>
 </template>
 
 <script setup lang="ts">
@@ -42,18 +45,6 @@ function initChart() {
   const barChart = init(document.getElementById(props.id) as HTMLDivElement);
 
   barChart.setOption({
-    title: {
-      show: true,
-      text: '业绩总览',
-      x: 'center',
-      padding: 15,
-      textStyle: {
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        color: '#337ecc'
-      }
-    },
     grid: {
       left: '2%',
       right: '2%',
@@ -72,7 +63,10 @@ function initChart() {
     legend: {
       x: 'center',
       y: 'bottom',
-      data: ['收入', '毛利润', '收入增长率', '利润增长率']
+      data: ['收入', '毛利润', '收入增长率', '利润增长率'],
+      textStyle: {
+        color: '#999'
+      }
     },
     xAxis: [
       {

src/views/dashboard/components/PieChart.vue

@@ -1,6 +1,9 @@
 <!-- 饼图 -->
 <template>
-  <div :id="id" :class="className" :style="{ height, width }" />
+  <el-card>
+    <template #header> 产品分类饼图 </template>
+    <div :id="id" :class="className" :style="{ height, width }" />
+  </el-card>
 </template>
 
 <script setup lang="ts">
@@ -41,18 +44,6 @@ function initChart() {
   const pieChart = init(document.getElementById(props.id) as HTMLDivElement);
 
   pieChart.setOption({
-    title: {
-      show: true,
-      text: '产品分类总览',
-      x: 'center',
-      padding: 15,
-      textStyle: {
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        color: '#337ecc'
-      }
-    },
     grid: {
       left: '2%',
       right: '2%',
@@ -60,7 +51,10 @@ function initChart() {
       containLabel: true
     },
     legend: {
-      top: 'bottom'
+      top: 'bottom',
+      textStyle: {
+        color: '#999'
+      }
     },
     series: [
       {

src/views/dashboard/components/RadarChart.vue

@@ -1,6 +1,9 @@
 <!-- 雷达图 -->
 <template>
-  <div :id="id" :class="className" :style="{ height, width }" />
+  <el-card>
+    <template #header> 订单状态雷达图 </template>
+    <div :id="id" :class="className" :style="{ height, width }" />
+  </el-card>
 </template>
 
 <script setup lang="ts">
@@ -41,18 +44,6 @@ function initChart() {
   const radarChart = init(document.getElementById(props.id) as HTMLDivElement);
 
   radarChart.setOption({
-    title: {
-      show: true,
-      text: '订单状态统计',
-      x: 'center',
-      padding: 15,
-      textStyle: {
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        color: '#337ecc'
-      }
-    },
     grid: {
       left: '2%',
       right: '2%',
@@ -62,7 +53,10 @@ function initChart() {
     legend: {
       x: 'center',
       y: 'bottom',
-      data: ['预定数量', '下单数量', '发货数量']
+      data: ['预定数量', '下单数量', '发货数量'],
+      textStyle: {
+        color: '#999'
+      }
     },
     radar: {
       // shape: 'circle',

src/views/dashboard/index.vue

@@ -11,17 +11,77 @@ import PieChart from './components/PieChart.vue';
 import RadarChart from './components/RadarChart.vue';
 
 import CountUp from 'vue-countup-v3';
+import { useUserStore } from '@/store/modules/user';
+
+const userStore = useUserStore();
+
+const date: Date = new Date();
+
+const greetings = computed(() => {
+  if (date.getHours() >= 6 && date.getHours() < 12) {
+    return '晨起披衣出草堂，轩窗已自喜微凉🌞！';
+  } else if (date.getHours() >= 12 && date.getHours() < 18) {
+    return '下午好☕！';
+  } else if (date.getHours() >= 18 && date.getHours() < 24) {
+    return '晚上好🌃！';
+  } else if (date.getHours() >= 0 && date.getHours() < 6) {
+    return '偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！';
+  }
+});
 </script>
 
 <template>
   <div class="dashboard-container">
-    <!--github-->
+    <!-- github角标 -->
     <github-corner class="github-corner" />
 
-    <!-- 数据 -->
+    <!-- 用户信息 -->
-    <el-row :gutter="40" class="mb-[12px]">
+    <el-row class="mb-[24px]">
-      <!--访问数-->
+      <el-card class="w-full">
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
+        <div class="flex justify-between flex-wrap">
+          <div>
+            <img
+              class="user-avatar"
+              :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
+            />
+            <span class="ml-[5px] text-[14px]">
+              {{ userStore.nickname }}
+            </span>
+          </div>
+
+          <div class="leading-[40px]">
+            {{ greetings }}
+          </div>
+
+          <div class="space-x-2 pt-[5px]">
+            <el-link
+              target="_blank"
+              type="danger"
+              href="https://www.cnblogs.com/haoxianrui/p/16090029.html"
+              >官方0到1教程</el-link
+            >
+            <el-divider direction="vertical" />
+            <el-link
+              target="_blank"
+              type="success"
+              href="https://gitee.com/youlaiorg/vue3-element-admin"
+              >Gitee源码</el-link
+            >
+            <el-divider direction="vertical" />
+            <el-link
+              target="_blank"
+              type="primary"
+              href="https://github.com/youlaitech/vue3-element-admin"
+              >GitHub源码
+            </el-link>
+          </div>
+        </div>
+      </el-card>
+    </el-row>
+
+    <!-- 数据卡片 -->
+    <el-row :gutter="40" class="mb-[24px]">
+      <el-col :xs="24" :sm="12" :lg="6">
         <div class="data-box">
           <div
             class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
@@ -38,7 +98,7 @@ import CountUp from 'vue-countup-v3';
       </el-col>
 
       <!--消息数-->
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
+      <el-col :xs="24" :sm="12" :lg="6">
         <div class="data-box">
           <div
             class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
@@ -54,7 +114,7 @@ import CountUp from 'vue-countup-v3';
         </div>
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
+      <el-col :xs="24" :sm="12" :lg="6">
         <div class="data-box">
           <div
             class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
@@ -69,7 +129,7 @@ import CountUp from 'vue-countup-v3';
           </div>
         </div>
       </el-col>
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
+      <el-col :xs="24" :sm="12" :lg="6">
         <div class="data-box">
           <div
             class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
@@ -87,7 +147,7 @@ import CountUp from 'vue-countup-v3';
     </el-row>
 
     <!-- Echarts 图表 -->
-    <el-row :gutter="40" style="margin-top: 20px">
+    <el-row :gutter="40">
       <el-col :sm="24" :lg="8" class="mb-[12px]">
         <BarChart
           id="barChart"
@@ -122,6 +182,11 @@ import CountUp from 'vue-countup-v3';
 .dashboard-container {
   padding: 24px;
   position: relative;
+  .user-avatar {
+    height: 40px;
+    widows: 40px;
+    border-radius: 50%;
+  }
 
   .github-corner {
     position: absolute;