feat: perfect demo

src/service/api/login.ts

@@ -12,8 +12,8 @@ export function fetchLogin(params: Ilogin) {
   }
   return methodInstance
 }
-export function fetchUpdateToken(params: any) {
-  const method = request.Post<Service.ResponseResult<ApiAuth.loginInfo>>('/updateToken', params)
+export function fetchUpdateToken(data: any) {
+  const method = request.Post<Service.ResponseResult<ApiAuth.loginInfo>>('/updateToken', data)
   method.meta = {
     authRole: 'refreshToken',
   }

src/views/dashboard/monitor/components/chart.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { graphic } from 'echarts'
+import { type ECOption, useEcharts } from '@/hooks'
+
+const lineOptions = ref<ECOption>({
+  tooltip: {
+    trigger: 'axis',
+  },
+  grid: {
+    left: '2%',
+    right: '2%',
+    bottom: '0%',
+    top: '0%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['10:00', '10:10', '10:10', '10:30', '10:40', '10:50'],
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      show: false,
+    },
+
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+  },
+  series: [{
+    name: '2',
+    type: 'line',
+    z: 3,
+    showSymbol: false,
+    smoothMonotone: 'x',
+    lineStyle: {
+      width: 3,
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [{
+          offset: 0,
+          color: 'rgba(59,102,246)', // 0% 处的颜色
+        }, {
+          offset: 1,
+          color: 'rgba(118,237,252)', // 100% 处的颜色
+        }],
+      },
+      shadowBlur: 4,
+      shadowColor: 'rgba(69,126,247,.2)',
+      shadowOffsetY: 4,
+    },
+    areaStyle: {
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [{
+          offset: 0,
+          color: 'rgba(227,233,250,.9)', // 0% 处的颜色
+        }, {
+          offset: 1,
+          color: 'rgba(248,251,252,.3)', // 100% 处的颜色
+        }],
+      },
+    },
+    smooth: true,
+    data: [20, 56, 17, 40, 68, 42],
+  }, {
+    name: '1',
+    type: 'line',
+    showSymbol: false,
+    smoothMonotone: 'x',
+
+    lineStyle: {
+      width: 3,
+      color: new graphic.LinearGradient(0, 0, 0, 1, [{
+        offset: 0,
+        color: 'rgba(255,84,108)',
+      }, {
+        offset: 1,
+        color: 'rgba(252,140,118)',
+      }], false),
+      shadowBlur: 4,
+      shadowColor: 'rgba(253,121,128,.2)',
+      shadowOffsetY: 4,
+    },
+    areaStyle: {
+      color: new graphic.LinearGradient(0, 0, 0, 1, [{
+        offset: 0,
+        color: 'rgba(255,84,108,.15)',
+      }, {
+        offset: 1,
+        color: 'rgba(252,140,118,0)',
+      }], false),
+    },
+    smooth: true,
+    data: [20, 71, 8, 50, 57, 32],
+  }],
+}) as Ref<ECOption>
+const { domRef: lineRef } = useEcharts(lineOptions)
+</script>
+
+<template>
+  <div
+    ref="lineRef"
+    class="h-400px"
+  />
+</template>
+
+<style scoped>
+
+</style>

src/views/dashboard/monitor/components/chart2.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { graphic } from 'echarts'
+import { type ECOption, useEcharts } from '@/hooks'
+
+const chartData = [
+  { name: '1', value: 300 },
+  { name: '2', value: 400 },
+  { name: '3', value: 452 },
+  { name: '4', value: 770 },
+  { name: '5', value: 650 },
+  { name: '6', value: 256 },
+  { name: '7', value: 350 },
+  { name: '8', value: 422 },
+  { name: '9', value: 235 },
+  { name: '10', value: 658 },
+  { name: '11', value: 600 },
+  { name: '12', value: 400 },
+  { name: '13', value: 523 },
+  { name: '14', value: 482 },
+  { name: '15', value: 423 },
+]
+
+const xData = chartData.map(v => v.name)
+const sData = chartData.map(v => v.value)
+
+const option = ref<ECOption>({
+  tooltip: {
+    trigger: 'axis',
+  },
+  grid: {
+    left: '2%',
+    right: '2%',
+    bottom: '0%',
+    top: '0%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: xData,
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(151,151,151,0.5)',
+        type: 'dashed',
+      },
+    },
+    axisLabel: {
+      margin: 10,
+      color: '#666',
+      fontSize: 14,
+    },
+
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(151,151,151,0.5)',
+        type: 'dashed',
+      },
+    },
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(151,151,151,0.5)',
+        type: 'dashed',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+  },
+  series: [{
+    type: 'bar',
+    barWidth: '20px',
+    data: sData,
+    itemStyle: {
+      color: new graphic.LinearGradient(0, 0, 0, 1, [{
+        offset: 0,
+        color: '#00BD89', // 0% 处的颜色
+      }, {
+        offset: 1,
+        color: '#C9F9E1', // 100% 处的颜色
+      }], false),
+    },
+  }],
+}) as Ref<ECOption>
+const { domRef: lineRef } = useEcharts(option)
+</script>
+
+<template>
+  <div
+    ref="lineRef"
+    class="h-400px"
+  />
+</template>
+
+<style scoped>
+
+</style>

src/views/dashboard/monitor/components/chart3.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { type ECOption, useEcharts } from '@/hooks'
+
+const option = ref<ECOption>({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b} : {d}%',
+  },
+  legend: {
+    orient: 'horizontal',
+    top: 30,
+    padding: 5,
+    itemWidth: 20,
+    itemHeight: 12,
+    textStyle: {
+      color: '#777',
+    },
+  },
+  series: [{
+    type: 'pie',
+    radius: ['45%', '60%'],
+    center: ['50%', '50%'],
+    label: {
+      show: true,
+      formatter: '{b} : {d}%',
+      color: '#777',
+    },
+    labelLine: {
+      show: true,
+      length2: 10,
+    },
+    data: [
+      {
+        value: 335,
+        name: '直接访问',
+      },
+      {
+        value: 77,
+        name: 'Bilibili',
+      },
+      {
+        value: 82,
+        name: '知乎',
+      },
+      {
+        value: 421,
+        name: '小红书',
+      },
+    ],
+  },
+  ],
+}) as Ref<ECOption>
+const { domRef: lineRef } = useEcharts(option)
+</script>
+
+<template>
+  <div ref="lineRef" class="h-400px" />
+</template>
+
+<style scoped></style>

src/views/dashboard/monitor/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import Chart from './components/chart.vue'
+import Chart2 from './components/chart2.vue'
+import Chart3 from './components/chart3.vue'
+
 const tableData = [
   {
     id: 0,
@@ -170,10 +174,10 @@ const tableData = [
             pane-style="padding: 20px;"
           >
             <n-tab-pane name="流量趋势">
-              流量趋势
+              <Chart />
             </n-tab-pane>
             <n-tab-pane name="访问量趋势">
-              访问量趋势
+              <Chart2 />
             </n-tab-pane>
           </n-tabs>
         </n-card>
@@ -185,7 +189,7 @@ const tableData = [
             content: true,
           }"
         >
-          1
+          <Chart3 />
         </n-card>
       </n-gi>
       <n-gi :span="16">

src/views/plugin/fetch/components/Delete.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  fetchDelete,
+} from '@/service'
+
+const emit = defineEmits<{
+  update: [data: any] // 具名元组语法
+}>()
+
+async function handleDelete() {
+  const res = await fetchDelete()
+  emit('update', res)
+}
+</script>
+
+<template>
+  <n-card title="Delete" size="small">
+    <n-button @click="handleDelete">
+      click
+    </n-button>
+  </n-card>
+</template>
+
+<style scoped>
+
+</style>