refactor: 控制台简化

Former-commit-id: bb17a4f93723eedcfce015b14d2d0c9fe5c48662

src/components/ThemePicker/index.vue

@@ -1,35 +0,0 @@
-<template>
-  <el-color-picker
-    :predefine="[
-      '#409EFF',
-      '#1890ff',
-      '#304156',
-      '#212121',
-      '#11a983',
-      '#13c2c2',
-      '#6959CD',
-      '#f5222d'
-    ]"
-    class="theme-picker"
-    popper-class="theme-picker-dropdown"
-  />
-</template>
-
-<script setup lang="ts"></script>
-
-<style>
-.theme-message,
-.theme-picker-dropdown {
-  z-index: 9999 !important;
-}
-
-.theme-picker .el-color-picker__trigger {
-  height: 26px !important;
-  width: 26px !important;
-  padding: 2px;
-}
-
-.theme-picker-dropdown .el-color-dropdown__link-btn {
-  display: none;
-}
-</style>

src/directive/utils/index.ts

@@ -1,15 +0,0 @@
-import { Directive } from 'vue';
-
-/**
- * 按钮防抖
- */
-export const deBounce: Directive = {
-  mounted(el: HTMLElement) {
-    el.addEventListener('click', () => {
-      el.classList.add('is-disabled');
-      setTimeout(() => {
-        el.classList.remove('is-disabled');
-      }, 2000);
-    });
-  }
-};

src/types/components.d.ts

@@ -57,6 +57,7 @@ declare module '@vue/runtime-core' {
     IEpPlus: typeof import('~icons/ep/plus')['default']
     IEpRefresh: typeof import('~icons/ep/refresh')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']
+    IEpSetting: typeof import('~icons/ep/setting')['default']
     IEpTop: typeof import('~icons/ep/top')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']

src/views/dashboard/components/BarChart.vue

@@ -9,7 +9,7 @@ import {
   onActivated,
   onBeforeUnmount,
   onDeactivated,
-  onMounted,
+  onMounted
 } from 'vue';
 import { init, EChartsOption } from 'echarts';
 import * as echarts from 'echarts';
@@ -18,22 +18,22 @@ import resize from '@/utils/resize';
 const props = defineProps({
   id: {
     type: String,
-    default: 'barChart',
+    default: 'barChart'
   },
   className: {
     type: String,
-    default: '',
+    default: ''
   },
   width: {
     type: String,
     default: '200px',
-    required: true,
+    required: true
   },
   height: {
     type: String,
     default: '200px',
-    required: true,
+    required: true
-  },
+  }
 });
 
 const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
@@ -51,37 +51,37 @@ function initChart() {
         fontSize: 18,
         fontStyle: 'normal',
         fontWeight: 'bold',
-        color: '#337ecc',
+        color: '#337ecc'
-      },
+      }
     },
     grid: {
       left: '2%',
       right: '2%',
       bottom: '10%',
-      containLabel: true,
+      containLabel: true
     },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'cross',
         crossStyle: {
-          color: '#999',
+          color: '#999'
-        },
+        }
-      },
+      }
     },
     legend: {
       x: 'center',
       y: 'bottom',
-      data: ['收入', '毛利润', '收入增长率', '利润增长率'],
+      data: ['收入', '毛利润', '收入增长率', '利润增长率']
     },
     xAxis: [
       {
         type: 'category',
-        data: [ '浙江', '北京', '上海', '广东','深圳'],
+        data: ['浙江', '北京', '上海', '广东', '深圳'],
         axisPointer: {
-          type: 'shadow',
+          type: 'shadow'
-        },
+        }
-      },
+      }
     ],
     yAxis: [
       {
@@ -90,8 +90,8 @@ function initChart() {
         max: 10000,
         interval: 2000,
         axisLabel: {
-          formatter: '{value} ',
+          formatter: '{value} '
-        },
+        }
       },
       {
         type: 'value',
@@ -99,56 +99,56 @@ function initChart() {
         max: 100,
         interval: 20,
         axisLabel: {
-          formatter: '{value}%',
+          formatter: '{value}%'
-        },
+        }
-      },
+      }
     ],
     series: [
       {
         name: '收入',
         type: 'bar',
-        data: [7000, 7100, 7200, 7300,7400],
+        data: [7000, 7100, 7200, 7300, 7400],
         barWidth: 20,
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#83bff6' },
             { offset: 0.5, color: '#188df0' },
-            { offset: 1, color: '#188df0' },
+            { offset: 1, color: '#188df0' }
-          ]),
+          ])
-        },
+        }
       },
       {
         name: '毛利润',
         type: 'bar',
-        data: [ 8000,8200, 8400, 8600, 8800],
+        data: [8000, 8200, 8400, 8600, 8800],
         barWidth: 20,
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#25d73c' },
             { offset: 0.5, color: '#1bc23d' },
-            { offset: 1, color: '#179e61' },
+            { offset: 1, color: '#179e61' }
-          ]),
+          ])
-        },
+        }
       },
       {
         name: '收入增长率',
         type: 'line',
         yAxisIndex: 1,
-        data: [  60,65, 70, 75, 80],
+        data: [60, 65, 70, 75, 80],
         itemStyle: {
-          color: '#67C23A',
+          color: '#67C23A'
-        },
+        }
       },
       {
         name: '利润增长率',
         type: 'line',
         yAxisIndex: 1,
-        data: [  70,75, 80, 85, 90],
+        data: [70, 75, 80, 85, 90],
         itemStyle: {
-          color: '#409EFF',
+          color: '#409EFF'
-        },
+        }
-      },
+      }
-    ],
+    ]
   } as EChartsOption);
   chart.value = barChart;
 }

src/views/dashboard/components/Project/index.vue

@@ -1,119 +0,0 @@
-<template>
-  <div class="component-container">
-    <el-card class="project-card">
-      <template #header>
-        <span class="fw-b">有来项目简介</span>
-      </template>
-      <div class="project-card__main">
-        <!-- 项目简介 -->
-        <el-link target="_blank" type="primary" href="https://gitee.com/haoxr">
-          youlai-mall
-        </el-link>
-        是基于Spring Boot 2.7、Spring Cloud 2021 & Alibaba
-        2021、Vue3、Element-Plus、uni-app等主流技术栈构建的一整套全栈开源商城项目，
-        涉及
-        <el-link
-          target="_blank"
-          type="primary"
-          href="https://gitee.com/youlaitech/youlai-mall"
-          >后端微服务</el-link
-        >
-        、
-        <el-link
-          target="_blank"
-          type="success"
-          href="https://gitee.com/youlaitech/youlai-mall-admin"
-          >前端管理</el-link
-        >
-        、
-        <el-link
-          target="_blank"
-          type="warning"
-          href="https://gitee.com/youlaitech/youlai-mall-weapp"
-          >微信小程序
-        </el-link>
-        和
-        <el-link
-          target="_blank"
-          type="danger"
-          href="https://gitee.com/youlaitech/youlai-mall-weapp"
-          >APP应用</el-link
-        >
-        等多端的开发。
-        <el-divider />
-
-        <!-- 源码地址 -->
-        <el-row :gutter="10">
-          <el-col :span="6">
-            <el-badge value="免费开源" class="fw-b"> 项目地址 </el-badge>
-          </el-col>
-          <el-col :span="6">
-            <el-link
-              target="_blank"
-              type="warning"
-              href="https://www.youlai.tech/"
-              >官方文档</el-link
-            >
-          </el-col>
-          <el-col :span="6">
-            <el-link
-              target="_blank"
-              type="primary"
-              href="https://github.com/youlaitech"
-              >Github</el-link
-            >
-          </el-col>
-          <el-col :span="6">
-            <el-link
-              target="_blank"
-              type="success"
-              href="https://gitee.com/youlaiorg"
-              >码云</el-link
-            >
-          </el-col>
-        </el-row>
-        <el-divider />
-        <!-- 技术栈 -->
-        <el-row :gutter="10">
-          <el-col :span="6" class="fw-b"> 后端技术栈 </el-col>
-          <el-col :span="18">
-            Spring Boot、Spring Cloud & Alibaba、Spring Security
-            OAuth2、JWT、Elastic Stack 、K8s...
-          </el-col>
-        </el-row>
-        <el-divider />
-        <el-row :gutter="10">
-          <el-col :span="6" class="fw-b"> 前端技术栈 </el-col>
-          <el-col :span="18">
-            Vue3、TypeScript、Element-Plus、uni-app、vue3-element-admin ...
-          </el-col>
-        </el-row>
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'index'
-};
-</script>
-
-<style lang="scss" scoped>
-.component-container {
-  .project-card {
-    font-size: 14px;
-
-    &__main {
-      line-height: 28px;
-      height: 320px;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-  }
-
-  .fw-b {
-    font-weight: bold;
-  }
-}
-</style>

src/views/dashboard/components/Team/index.vue

@@ -1,237 +0,0 @@
-
-<script setup lang="ts">
-import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from 'vue';
-import BScroll from 'better-scroll';
-
-const state = reactive({
-  teamActiveName: '1',
-  developers: [
-    {
-      imgUrl: 'https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg',
-      nickname: '郝先瑞',
-      positions: ['后端', '前端', '文档'],
-      homepage: 'https://www.cnblogs.com/haoxianrui/'
-    },
-    {
-      imgUrl: 'https://s2.loli.net/2022/04/06/cQihGv9uPsTjXk1.jpg',
-      nickname: '张川',
-      positions: ['后端', '前端'],
-      homepage: 'https://blog.csdn.net/qq_41595149'
-    },
-    {
-      imgUrl: 'https://s2.loli.net/2022/04/07/2IiOYBHnRGKgCSd.jpg',
-      nickname: '张加林',
-      positions: ['DevOps'],
-      homepage: 'https://gitee.com/ximy'
-    }
-  ],
-  colors: ['', 'success', 'warning', 'danger'],
-  indicatorImgUrl: new URL(
-    `../../../../assets/index/indicator.png`,
-    import.meta.url
-  ).href
-});
-
-const { teamActiveName, developers, colors, indicatorImgUrl } = toRefs(state);
-
-let bScroll = reactive({});
-
-const developer_container = ref<HTMLElement | any>(null);
-
-onMounted(() => {
-  bScroll = new BScroll(developer_container.value, {
-    mouseWheel: true, //开启鼠标滚轮
-    disableMouse: false, //启用鼠标拖动
-    scrollX: true //X轴滚动启用
-  });
-});
-
-watchEffect(() => {
-  nextTick(() => {
-    bScroll && (bScroll as any).refresh();
-  });
-});
-</script>
-
-
-<template>
-    <el-card class="team-card">
-      <template #header>
-        <span class="fw-b">有来开源组织 & 技术团队</span>
-      </template>
-      <el-tabs v-model="teamActiveName">
-        <el-tab-pane label="开发者" name="1">
-          <div class="developer-container" ref="developer_container">
-            <ul class="developer-list">
-              <li
-                class="developer-item"
-                v-for="(item, index) in developers"
-                :key="index"
-              >
-                <div class="developer-item-wrapper">
-                  <el-image
-                    class="developer-img"
-                    :src="item.imgUrl"
-                    :preview-src-list="[item.imgUrl]"
-                  ></el-image>
-                  <div class="developer-info">
-                    <span class="developer-info-nickname">{{ item.nickname }}</span>
-                    <div class="developer-info-position">
-                      <el-tag
-                        v-for="(position, i) in item.positions"
-                        :type="(colors[i % colors.length] as any)"
-                        :class="i !== 0 ? 'f-ml' : ''"
-                        size="small"
-                        :key="i"
-                        >{{ position }}</el-tag
-                      >
-                    </div>
-                    <div class="developer-info-homepage">
-                      <a :href="item.homepage" target="_blank">个人主页</a>
-                    </div>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <el-image class="developer-indicator" :src="indicatorImgUrl" />
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="交流群" name="2">
-          <div class="group">
-            <el-image
-              class="group-img"
-              src="https://www.youlai.tech/files/blog/youlaiqun.png"
-              :preview-src-list="[
-                'https://www.youlai.tech/files/blog/youlaiqun.png'
-              ]"
-            />
-            <div class="group-tip">
-              群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。
-            </div>
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="加入我们" name="3">
-          <div class="join">
-            <p>1. 人品良好、善于思考、执行力强；</p>
-            <p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
-            <p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
-            <p>4. 过分优秀者我们会主动联系您...</p>
-            <div class="join-way">申请加入方式: 添加开发者微信申请即可。</div>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </el-card>
-</template>
-
-
-<style lang="scss" scoped>
-  .team-card {
-    font-size: 14px;
-
-    .el-tabs__content {
-      .el-tab-pane {
-        height: 265px;
-      }
-    }
-
-    .developer-container {
-      width: 100%;
-      overflow: hidden;
-
-      .developer-list {
-        display: inline-flex;
-        overflow: hidden;
-        justify-content: flex-start;
-        padding: 10px;
-
-        .developer-item {
-          &:not(:first-child) {
-            margin-left: 20px;
-          }
-
-          align-items: center;
-          list-style: none;
-          width: 180px;
-          min-width: 180px;
-
-          .developer-item-wrapper {
-            border: 1px solid var(--el-border-color-light);
-            border-radius: 5px;
-            box-shadow: var(--el-box-shadow-lighter);
-            padding: 8px;
-            text-align: center;
-
-            .developer-img {
-              height: 100px;
-              width: 100px;
-            }
-
-            .developer-info {
-              padding: 6px;
-              font-size: 14px;
-
-              .developer-info-position {
-                margin-top: 10px;
-              }
-
-              .developer-info-homepage {
-                margin-top: 16px;
-
-                a {
-                  display: inline-block;
-                  padding: 4px 10px;
-                  color: var(--el-color-primary);
-                  border: 1px solid var(--el-color-primary);
-                  border-radius: 5px;
-                  background: var(--el-color-primary-light-9);
-                  &:hover {
-                    background: var(--el-color-primary);
-                    color: var(--el-color-white);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      .developer-indicator {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        width: 120px;
-        height: 100px;
-      }
-    }
-
-    .join {
-      overflow: hidden;
-      p {
-        font-weight: bold;
-      }
-
-      &-way {
-        margin-top: 20px;
-        color: #409eff;
-        font-weight: bold;
-      }
-    }
-
-    .group {
-      &-img {
-        height: 200px;
-        width: 200px;
-      }
-    }
-  }
-
- .fw-b {
-    font-weight: bold;
-  }
-
-  .f-ml {
-    margin-left: 5px;
-  }
-</style>

src/views/dashboard/index.vue

@@ -6,81 +6,86 @@ export default { name: 'Dashboard' };
 // 组件引用
 import GithubCorner from '@/components/GithubCorner/index.vue';
 import SvgIcon from '@/components/SvgIcon/index.vue';
-import BarChart from './components/Chart/BarChart.vue';
+import BarChart from './components/BarChart.vue';
-import PieChart from './components/Chart/PieChart.vue';
+import PieChart from './components/PieChart.vue';
-import RadarChart from './components/Chart/RadarChart.vue';
+import RadarChart from './components/RadarChart.vue';
 
-import Project from './components/Project/index.vue';
+import CountUp from 'vue-countup-v3';
-import Team from './components/Team/index.vue';
 </script>
 
 <template>
   <div class="dashboard-container">
+    <!--github-->
     <github-corner class="github-corner" />
 
     <!-- 数据 -->
     <el-row :gutter="40" class="mb-[12px]">
+      <!--访问数-->
       <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
-        <div class="card-panel">
+        <div class="data-box">
-          <div class="card-panel-icon-wrapper icon-user">
+          <div
-            <svg-icon icon-class="uv" size="4em" />
+            class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
+          >
+            <svg-icon icon-class="uv" size="3em" />
           </div>
-          <div class="card-panel-description">
+          <div class="flex flex-col space-y-3">
-            <div class="card-panel-text">访问数</div>
+            <div class="text-[var(--el-text-color-secondary)]">访问数</div>
-            <div class="card-panel-num">1000</div>
+            <div class="text-lg">
+              <count-up :end-val="2000"></count-up>
+            </div>
+          </div>
+        </div>
+      </el-col>
+
+      <!--消息数-->
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
+        <div class="data-box">
+          <div
+            class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
+          >
+            <svg-icon icon-class="message" size="3em" />
+          </div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">消息数</div>
+            <div class="text-lg">
+              <count-up :end-val="2000"></count-up>
+            </div>
           </div>
         </div>
       </el-col>
 
       <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
-        <div class="card-panel">
+        <div class="data-box">
-          <div class="card-panel-icon-wrapper icon-message">
+          <div
-            <svg-icon icon-class="message" size="4em" />
+            class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
+          >
+            <svg-icon icon-class="money" size="3em" />
           </div>
-          <div class="card-panel-description">
+          <div class="flex flex-col space-y-3">
-            <div class="card-panel-text">消息数</div>
+            <div class="text-[var(--el-text-color-secondary)]">收入金额</div>
-            <div class="card-panel-num">1000</div>
+            <div class="text-lg">
-          </div>
+              <count-up :end-val="2000"></count-up>
-        </div>
+            </div>
-      </el-col>
-
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
-        <div class="card-panel">
-          <div class="card-panel-icon-wrapper icon-money">
-            <svg-icon icon-class="money" size="4em" />
-          </div>
-          <div class="card-panel-description">
-            <div class="card-panel-text">收入金额</div>
-            <div class="card-panel-num">1000</div>
           </div>
         </div>
       </el-col>
       <el-col :xs="24" :sm="12" :lg="6" class="mb-[12px]">
-        <div class="card-panel">
+        <div class="data-box">
-          <div class="card-panel-icon-wrapper icon-shopping">
+          <div
-            <svg-icon icon-class="shopping" size="4em" />
+            class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
+          >
+            <svg-icon icon-class="shopping" size="3em" />
           </div>
-          <div class="card-panel-description">
+          <div class="flex flex-col space-y-3">
-            <div class="card-panel-text">订单数</div>
+            <div class="text-[var(--el-text-color-secondary)]">订单数</div>
-            <div class="card-panel-num">1000</div>
+            <div class="text-lg">
+              <count-up :end-val="2000"></count-up>
+            </div>
           </div>
         </div>
       </el-col>
     </el-row>
 
-    <!-- 项目 + 团队成员介绍 -->
-    <el-row :gutter="40">
-      <!-- 项目介绍 -->
-      <el-col :md="12" :lg="12" class="mb-[12px]">
-        <Project />
-      </el-col>
-
-      <!-- 团队介绍 -->
-      <el-col :md="12" :lg="12" class="mb-[12px]">
-        <Team />
-      </el-col>
-    </el-row>
-
     <!-- Echarts 图表 -->
     <el-row :gutter="40" style="margin-top: 20px">
       <el-col :sm="24" :lg="8" class="mb-[12px]">
@@ -88,7 +93,7 @@ import Team from './components/Team/index.vue';
           id="barChart"
           height="400px"
           width="100%"
-          class="chart-container"
+          class="bg-[var(--el-bg-color-overlay)]"
         />
       </el-col>
 
@@ -97,7 +102,7 @@ import Team from './components/Team/index.vue';
           id="pieChart"
           height="400px"
           width="100%"
-          class="chart-container"
+          class="bg-[var(--el-bg-color-overlay)]"
         />
       </el-col>
 
@@ -106,7 +111,7 @@ import Team from './components/Team/index.vue';
           id="radarChart"
           height="400px"
           width="100%"
-          class="chart-container"
+          class="bg-[var(--el-bg-color-overlay)]"
         />
       </el-col>
     </el-row>
@@ -126,113 +131,16 @@ import Team from './components/Team/index.vue';
     z-index: 99;
   }
 
-  .box-center {
+  .data-box {
-    margin: 0 auto;
+    font-weight: bold;
-    display: table;
+    padding: 20px;
-  }
-
-  .user-profile {
-    .box-center {
-      padding-top: 10px;
-    }
-
-    .user-role {
-      padding-top: 10px;
-      font-weight: 400;
-      font-size: 14px;
-    }
-
-    .box-social {
-      padding-top: 30px;
-
-      .el-table {
-        border-top: 1px solid var(--el-border-color-light);
-      }
-    }
-
-    .user-follow {
-      padding-top: 20px;
-    }
-  }
-
-  .card-panel {
-    height: 108px;
     cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
     color: var(--el-text-color-regular);
     background: var(--el-bg-color-overlay);
     box-shadow: var(--el-box-shadow-dark);
     border-color: var(--el-border-color);
-
+    display: flex;
-    .icon-message {
+    justify-content: space-between;
-      color: #36a3f7;
-    }
-
-    .icon-user {
-      color: #40c9c6;
-    }
-
-    .icon-money {
-      color: #f4516c;
-    }
-
-    .icon-shopping {
-      color: #34bfa3;
-    }
-
-    &:hover {
-      .card-panel-icon-wrapper {
-        color: #fff;
-      }
-
-      .icon-user {
-        background: #40c9c6;
-      }
-
-      .icon-message {
-        background: #36a3f7;
-      }
-
-      .icon-money {
-        background: #f4516c;
-      }
-
-      .icon-shopping {
-        background: #34bfa3;
-      }
-    }
-
-    .card-panel-icon-wrapper {
-      float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
-      transition: all 0.38s ease-out;
-      border-radius: 6px;
-    }
-
-    .card-panel-description {
-      float: right;
-      font-weight: bold;
-      margin: 26px 20px 0;
-
-      .card-panel-text {
-        line-height: 18px;
-        color: var(--el-text-color-secondary);
-        font-size: 16px;
-        margin-bottom: 12px;
-      }
-
-      .card-panel-num {
-        font-size: 20px;
-        text-align: right;
-      }
-    }
-  }
-
-  .chart-container {
-    background: var(--el-bg-color-overlay);
   }
 }
 </style>