refactor(views): ♻️ 更换首页UI

src/hooks/web/useECharts.ts

@@ -21,7 +21,7 @@ export function useECharts(elRef: Ref<HTMLDivElement>) {
     if (!el || !unref(el)) {
       return;
     }
-    chartInstance = echarts.init(el, 'default');
+    chartInstance = echarts.init(el, 'light');
 
     // 监听window宽度变化重新渲染echarts
     const { removeEvent } = useEventListener({

src/utils/plugin/echarts.ts

@@ -8,7 +8,7 @@ import {
   VisualMapComponent,
   GeoComponent,
 } from 'echarts/components';
-import { LineChart, BarChart, MapChart } from 'echarts/charts';
+import { LineChart, BarChart, MapChart, PieChart } from 'echarts/charts';
 import { UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
 
@@ -25,6 +25,7 @@ echarts.use([
   VisualMapComponent,
   GeoComponent,
   MapChart,
+  PieChart,
 ]);
 
 export default echarts;

src/utils/plugin/element.ts

@@ -38,6 +38,7 @@ import {
   ElTabPane,
   ElDivider,
   ElSwitch,
+  ElProgress,
   // 指令
   ElLoading,
   ElInfiniteScroll,
@@ -57,6 +58,7 @@ import {
   ArrowDown,
   Management,
   Select,
+  ArrowRight,
 } from '@element-plus/icons-vue';
 
 // Directives
@@ -101,6 +103,7 @@ const components = [
   ElTabPane,
   ElDivider,
   ElSwitch,
+  ElProgress,
 ];
 
 // Icon
@@ -117,6 +120,7 @@ export const iconComponents = [
   ArrowDown,
   Management,
   Select,
+  ArrowRight,
 ];
 
 export function useElementPlus(app: App) {

src/views/index/components/Activity.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+  import { ref, reactive } from 'vue';
+  import SeamlessScroll from '@/components/SeamlessScroll/index.vue';
+
+  let classOption = reactive({
+    direction: 'top',
+  });
+
+  let listData = ref([
+    {
+      date: '2022-01-01',
+      name: 'vue-xs-admin',
+      star: '1000',
+    },
+    {
+      date: '2022-01-02',
+      name: 'vue-xs-admin',
+      star: '1100',
+    },
+    {
+      date: '2022-01-03',
+      name: 'vue-xs-admin',
+      star: '1200',
+    },
+    {
+      date: '2022-01-04',
+      name: 'vue-xs-admin',
+      star: '1300',
+    },
+    {
+      date: '2022-01-05',
+      name: 'vue-xs-admin',
+      star: '1400',
+    },
+    {
+      date: '2022-01-06',
+      name: 'vue-xs-admin',
+      star: '1500',
+    },
+    {
+      date: '2022-01-07',
+      name: 'vue-xs-admin',
+      star: '1600',
+    },
+    {
+      date: '2022-01-08',
+      name: 'vue-xs-admin',
+      star: '1700',
+    },
+    {
+      date: '2022-01-09',
+      name: 'vue-xs-admin',
+      star: '1800',
+    },
+    {
+      date: '2022-01-10',
+      name: 'vue-xs-admin',
+      star: '1900',
+    },
+    {
+      date: '2022-01-11',
+      name: 'vue-xs-admin',
+      star: '2000',
+    },
+    {
+      date: '2022-01-12',
+      name: 'vue-xs-admin',
+      star: '2100',
+    },
+    {
+      date: '2022-01-13',
+      name: 'vue-xs-admin',
+      star: '2200',
+    },
+    {
+      date: '2022-01-14',
+      name: 'vue-xs-admin',
+      star: '2300',
+    },
+  ]);
+</script>
+
+<template>
+  <div class="infinite">
+    <ul class="top">
+      <li>更新日期</li>
+      <li>项目名称</li>
+      <li>下载数量</li>
+    </ul>
+    <SeamlessScroll ref="scroll" :data="listData" :class-option="classOption" class="warp">
+      <ul class="item">
+        <li v-for="(item, index) in listData" :key="index">
+          <span v-text="item.date"></span>
+          <span v-text="item.name"></span>
+          <span v-text="item.star"></span>
+        </li>
+      </ul>
+    </SeamlessScroll>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .infinite {
+    height: 410px;
+    border: 1px solid var(--border-color-light);
+    .top {
+      // width: 95%;
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      margin: 0 auto;
+      font-size: 14px;
+      // color: #909399;
+      font-weight: 400;
+      background: var(--sub-main-bg-content);
+      border-bottom: 1px solid var(--border-color-light);
+
+      li {
+        width: 34%;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .warp {
+      width: 95%;
+      height: 365px;
+      margin: 0 auto;
+      overflow: hidden;
+
+      ul {
+        margin: 0;
+        li {
+          height: 30px;
+          line-height: 30px;
+          display: flex;
+          font-size: 15px;
+        }
+      }
+
+      span {
+        width: 34%;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+</style>

src/views/index/components/AnalysisChart.vue

@@ -1,5 +1,3 @@
-<script lang="ts"></script>
-
 <script lang="ts" setup>
   import type { Ref } from 'vue';
   import { onMounted, ref } from 'vue';
@@ -10,9 +8,6 @@
 
   onMounted(() => {
     setOptions({
-      title: {
-        // text: 'Stacked Area Chart',
-      },
       tooltip: {
         trigger: 'axis',
         axisPointer: {
@@ -22,86 +17,71 @@
           },
         },
       },
-      // legend: {
-      //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
-      // },
-      // toolbox: {
-      //   feature: {
-      //     saveAsImage: {},
-      //   },
-      // },
       grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
+        left: '0%',
+        right: '2%',
+        bottom: '0%',
+        top: '2%',
         containLabel: true,
       },
       xAxis: [
         {
           type: 'category',
           boundaryGap: false,
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+          splitLine: {
+            show: true,
+          },
         },
       ],
       yAxis: [
         {
           type: 'value',
+          splitLine: {
+            show: true,
+          },
+          splitArea: {
+            show: true,
+          },
         },
       ],
       series: [
         {
-          name: 'Email',
+          name: '任务',
           type: 'line',
           stack: 'Total',
           areaStyle: {},
+          smooth: true,
           emphasis: {
             focus: 'series',
           },
-          data: [120, 132, 101, 134, 90, 230, 210],
+
+          data: [50, 134, 191, 280, 90, 30, 10],
         },
         {
-          name: 'Union Ads',
+          name: '事项',
           type: 'line',
           stack: 'Total',
           areaStyle: {},
+          smooth: true,
           emphasis: {
             focus: 'series',
           },
           data: [220, 182, 191, 234, 290, 330, 310],
         },
         {
-          name: 'Video Ads',
+          name: '目标任务',
           type: 'line',
           stack: 'Total',
           areaStyle: {},
+          smooth: true,
           emphasis: {
             focus: 'series',
           },
-          data: [150, 232, 201, 154, 190, 330, 410],
-        },
-        {
-          name: 'Direct',
-          type: 'line',
-          stack: 'Total',
-          areaStyle: {},
-          emphasis: {
-            focus: 'series',
-          },
-          data: [320, 332, 301, 334, 390, 330, 320],
-        },
-        {
-          name: 'Search Engine',
-          type: 'line',
-          stack: 'Total',
-          label: {
-            show: true,
-            position: 'top',
-          },
-          areaStyle: {},
-          emphasis: {
-            focus: 'series',
+          itemStyle: {
+            color: '#409eff',
           },
-          data: [820, 932, 901, 934, 1290, 1330, 1320],
+          data: [150, 154, 201, 299, 190, 330, 410],
         },
       ],
     });
@@ -115,6 +95,6 @@
 <style scoped lang="scss">
   .chartRef {
     width: 100%;
-    height: 380px;
+    height: 362px;
   }
 </style>