feat: perfect demo

src/service/api/login.ts

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

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {
+  getBlob,
+} from '@/service'
+
+const emit = defineEmits<{
+  update: [data: any]
+}>()
+
+const filePath = ref('https://images.unsplash.com/photo-1663529628961-80aa6ebcd157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80')
+
+async function getBlobFile() {
+  const res = await getBlob(filePath.value)
+  emit('update', 'fileOk')
+  downloadLink(res, 'fileOk')
+}
+
+function downloadLink(data: Blob, name: string) {
+  const link = URL.createObjectURL(data)
+  const eleLink = document.createElement('a')
+  eleLink.download = name
+  eleLink.style.display = 'none'
+  eleLink.href = link
+  document.body.appendChild(eleLink)
+  eleLink.click()
+  document.body.removeChild(eleLink)
+}
+</script>
+
+<template>
+  <n-card title="下载文件" size="small">
+    <n-button @click="getBlobFile">
+      click
+    </n-button>
+  </n-card>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useRequest } from 'alova'
+import {
+  downloadFile,
+} from '@/service'
+
+const emit = defineEmits<{
+  update: [data: any]
+}>()
+
+const filePath = ref('https://images.unsplash.com/photo-1663529628961-80aa6ebcd157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80')
+
+const { downloading, abort, send, data } = useRequest(downloadFile(filePath.value), {
+  // 当immediate为false时，默认不发出
+  immediate: false,
+})
+
+const downloadProcess = computed(() => {
+  if (!downloading.value.loaded)
+    return 0
+  return Math.floor(downloading.value.loaded / downloading.value.total * 100)
+})
+
+async function handleDownloadFile() {
+  await send()
+  emit('update', 'fileOk')
+  downloadLink(data.value, 'fileOk')
+}
+
+function downloadLink(data: Blob, name: string) {
+  const link = URL.createObjectURL(data)
+  const eleLink = document.createElement('a')
+  eleLink.download = name
+  eleLink.style.display = 'none'
+  eleLink.href = link
+  document.body.appendChild(eleLink)
+  eleLink.click()
+  document.body.removeChild(eleLink)
+}
+</script>
+
+<template>
+  <n-card title="带进度的下载文件" size="small">
+    <n-space vertical>
+      <n-input v-model:value="filePath" />
+      <div>文件大小：{{ downloading.total }}B</div>
+      <div>已下载：{{ downloading.loaded }}B</div>
+      <n-progress type="line" indicator-placement="inside" :percentage="downloadProcess" />
+      <n-space>
+        <n-button strong secondary @click="handleDownloadFile">
+          开始下载
+        </n-button>
+        <n-button strong secondary type="warning" @click="abort">
+          中断下载
+        </n-button>
+      </n-space>
+    </n-space>
+  </n-card>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  update: [data: any] // 具名元组语法
+}>()
+
+async function get() {
+  const res = import.meta.env
+  emit('update', res)
+}
+</script>
+
+<template>
+  <n-card title="检查环境变量" size="small">
+    <n-button @click="get">
+      click
+    </n-button>
+  </n-card>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  FailedRequest,
+} from '@/service'
+
+const emit = defineEmits<{
+  update: [data: any] // 具名元组语法
+}>()
+
+async function failedRequest() {
+  const res = await FailedRequest()
+  emit('update', res)
+}
+</script>
+
+<template>
+  <n-card title="失败-服务器错误" size="small">
+    <n-button type="error" @click="failedRequest">
+      click
+    </n-button>
+  </n-card>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  FailedResponse,
+} from '@/service'
+
+const emit = defineEmits<{
+  update: [data: any] // 具名元组语法
+}>()
+
+async function failedResponse() {
+  const res = await FailedResponse()
+  emit('update', res)
+}
+</script>
+
+<template>
+  <n-card title="失败-业务操作错误" size="small">
+    <n-button type="error" @click="failedResponse">
+      click
+    </n-button>
+  </n-card>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  FailedResponseWithoutTip,
+} from '@/service'
+
+const emit = defineEmits<{
+  update: [data: any] // 具名元组语法
+}>()
+
+async function failedResponse() {
+  const res = await FailedResponseWithoutTip()
+  emit('update', res)
+}
+</script>
+
+<template>
+  <n-card title="失败-业务操作错误（无提示）" size="small">
+    <n-button type="error" @click="failedResponse">
+      click
+    </n-button>
+  </n-card>
+</template>
+
+<style scoped>
+
+</style>

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {
+  fetchPost,
+} from '@/service'
+
+const emit = defineEmits<{
+  update: [data: any] // 具名元组语法
+}>()
+
+async function post() {
+  const params = {
+    data: '2022-2-2',
+    data1: [],
+    data2: {},
+    data3: '',
+    data4: null,
+    data5: undefined,
+  }
+  const res = await fetchPost(params)
+  emit('update', res)
+}
+</script>
+
+<template>
+  <n-card title="Post" size="small">
+    <n-button @click="post">
+      click
+    </n-button>
+  </n-card>
+</template>
+
+<style scoped>
+
+</style>

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

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

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

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

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {
+  expiredTokenRequest,
+} from '@/service'
+
+const emit = defineEmits<{
+  update: [data: any] // 具名元组语法
+}>()
+
+async function expiredToken() {
+  const res = await expiredTokenRequest()
+  emit('update', res)
+}
+</script>
+
+<template>
+  <n-card title="Token Expiration" size="small">
+    <n-button type="error" @click="expiredToken">
+      click
+    </n-button>
+    <n-alert title="关于401-token失效刷新" type="warning" class="mt-1">
+      请在控制台将网络速率设置为最低（1kb左右）后点击查看，否则会造成请求大量发送
+    </n-alert>
+  </n-card>
+</template>
+
+<style scoped>
+
+</style>

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

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

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useRequest } from 'alova'
+import {
+  fetachGet,
+} from '@/service'
+
+const emit = defineEmits<{
+  update: [data: any] // 具名元组语法
+}>()
+
+const { data: fetachGetData, send: sendFetachGet } = useRequest(fetachGet({ a: 112211 }), {
+  // 当immediate为false时，默认不发出
+  immediate: false,
+})
+
+async function handleRequestHook() {
+  await sendFetachGet()
+  emit('update', fetachGetData.value)
+}
+</script>
+
+<template>
+  <n-card title="useRequest风格" size="small">
+    <n-button @click="handleRequestHook">
+      click
+    </n-button>
+  </n-card>
+</template>
+
+<style scoped>
+
+</style>

src/views/plugin/fetch/index.vue

@@ -1,255 +1,56 @@
 <script setup lang="ts">
-import { useRequest } from 'alova'
+import Env from './components/Env.vue'
-import {
+import Get from './components/Get.vue'
-  FailedRequest,
+import Post from './components/Post.vue'
-  FailedResponse,
+import FormPost from './components/FormPost.vue'
-  FailedResponseWithoutTip,
+import Delete from './components/Delete.vue'
-  dictData,
+import Put from './components/Put.vue'
-  downloadFile,
+import UseRequest from './components/UseRequest.vue'
-  expiredTokenRequest,
+import NoToken from './components/NoToken.vue'
-  fetachGet,
+import DownLoad from './components/DownLoad.vue'
-  fetchDelete,
+import DownLoadWithProgress from './components/DownLoadWithProgress.vue'
-  fetchFormPost,
+import FailedRequest from './components/FailedRequest.vue'
-  fetchPost,
+import FailedResponse from './components/FailedResponse.vue'
-  fetchPut,
+import FailedResponseWithoutTip from './components/FailedResponseWithoutTip.vue'
-  fetchUpdateToken,
+import Transform from './components/Transform.vue'
-  getBlob,
+import RefreshToken from './components/RefreshToken.vue'
-  withoutToken,
+import TokenExpiration from './components/TokenExpiration.vue'
-} from '@/service'
 
 const msg = ref()
-const { data: fetachGetData, send: sendFetachGet } = useRequest(fetachGet({ a: 112211 }), {
+function handleUpdate(data: any) {
-  // 当immediate为false时，默认不发出
+  msg.value = data
-  immediate: false,
-})
-
-function handleRequestHook() {
-  sendFetachGet()
-  msg.value = fetachGetData.value
-}
-function pinterEnv() {
-  msg.value = import.meta.env
-}
-async function get() {
-  const res = await fetachGet({ a: 112211, b: false })
-  msg.value = res
-}
-function delete2() {
-  fetchDelete().then((res) => {
-    msg.value = res
-  })
-}
-function post() {
-  const params = {
-    data: '2022-2-2',
-    data1: [],
-    data2: {},
-    data3: '',
-    data4: null,
-    data5: undefined,
-  }
-  fetchPost(params).then((res) => {
-    msg.value = res
-  })
-}
-
-function formPost() {
-  const params = {
-    data: '2022-2-2',
-  }
-  fetchFormPost(params).then((res) => {
-    msg.value = res
-  })
-}
-function put() {
-  const params = {
-    data: '2022-2-2',
-  }
-  fetchPut(params).then((res) => {
-    msg.value = res
-  })
-}
-
-// 测试请求失败
-function failedRequest() {
-  FailedRequest().then((res) => {
-    msg.value = res
-  })
-}
-// 测试业务失败
-function failedResponse() {
-  FailedResponse().then((res) => {
-    msg.value = res
-  })
-}
-// 测试无提示的业务失败
-function failedResponseWithoutTip() {
-  FailedResponseWithoutTip().then((res) => {
-    msg.value = res
-  })
-}
-// token过期
-function expiredToken() {
-  expiredTokenRequest().then((res) => {
-    msg.value = res
-  })
-}
-// 刷新token
-function updataToken() {
-  fetchUpdateToken('test token').then((res) => {
-    msg.value = res
-  })
-}
-// 不携带token的接口
-function withoutTokenRequest() {
-  withoutToken().then((res) => {
-    msg.value = res
-  })
-}
-// 不携带token的接口
-function getDictData() {
-  dictData().then((res) => {
-    msg.value = res
-  })
-}
-
-const filePath = ref('https://images.unsplash.com/photo-1663529628961-80aa6ebcd157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80')
-// 模拟获取二进制文件
-function getBlobFile() {
-  getBlob(filePath.value).then((res) => {
-    downloadLink(res, 'BlobOk')
-  })
-}
-// 下载文件获取进度
-const { downloading, abort: abortDownloadFile, send: sendDownloadFile } = useRequest(downloadFile(filePath.value), {
-  // 当immediate为false时，默认不发出
-  immediate: false,
-})
-const downloadProcess = computed(() => {
-  if (!downloading.value.loaded)
-    return 0
-  return Math.floor(downloading.value.loaded / downloading.value.total * 100)
-})
-async function handleDownloadFile() {
-  const res = await sendDownloadFile()
-  downloadLink(res, 'fileOk')
-}
-
-function downloadLink(data: Blob, name: string) {
-  const link = URL.createObjectURL(data)
-  const eleLink = document.createElement('a')
-  eleLink.download = name
-  eleLink.style.display = 'none'
-  eleLink.href = link
-  document.body.appendChild(eleLink)
-  eleLink.click()
-  document.body.removeChild(eleLink)
 }
 </script>
 
 <template>
   <n-card title="网络请求示例">
-    <n-space vertical :size="12">
+    <n-split direction="horizontal" :max="0.75" :min="0.25">
-      <pre class="bg-#eee">
+      <template #1>
+        <div class="grid grid-cols-3 gap-2 p-2">
+          <Env @update="handleUpdate" />
+          <Get @update="handleUpdate" />
+          <Post @update="handleUpdate" />
+          <FormPost @update="handleUpdate" />
+          <Delete @update="handleUpdate" />
+          <Put @update="handleUpdate" />
+          <UseRequest @update="handleUpdate" />
+          <NoToken @update="handleUpdate" />
+          <Transform @update="handleUpdate" />
+          <DownLoad @update="handleUpdate" />
+          <DownLoadWithProgress class="col-span-2" @update="handleUpdate" />
+          <RefreshToken @update="handleUpdate" />
+          <FailedRequest @update="handleUpdate" />
+          <FailedResponse @update="handleUpdate" />
+          <FailedResponseWithoutTip @update="handleUpdate" />
+          <TokenExpiration @update="handleUpdate" />
+        </div>
+      </template>
+      <template #2>
+        <pre class="bg-#eee">
       {{ msg }}
       </pre>
-      <n-descriptions label-placement="left" bordered>
+      </template>
-        <n-descriptions-item label="检查环境变量">
+    </n-split>
-          <n-button strong secondary type="success" @click="pinterEnv">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="Get">
-          <n-button strong secondary type="success" @click="get">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="Post">
-          <n-button strong secondary type="success" @click="post">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="formPost">
-          <n-button strong secondary type="success" @click="formPost">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="Delete">
-          <n-button strong secondary type="success" @click="delete2">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="Put">
-          <n-button strong secondary type="success" @click="put">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="useRequest风格">
-          <n-button strong secondary type="success" @click="handleRequestHook">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="不带token的接口">
-          <n-button strong secondary type="success" @click="withoutTokenRequest">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="获取文件下载">
-          <n-button strong secondary type="success" @click="getBlobFile">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="带进度的下载文件" :span="3">
-          <n-space vertical>
-            <n-input v-model:value="filePath" />
-            <div>文件大小：{{ downloading.total }}B</div>
-            <div>已下载：{{ downloading.loaded }}B</div>
-            <n-progress type="line" indicator-placement="inside" :percentage="downloadProcess" />
-            <n-space>
-              <n-button strong secondary @click="handleDownloadFile">
-                开始下载
-              </n-button>
-              <n-button strong secondary type="warning" @click="abortDownloadFile">
-                中断下载
-              </n-button>
-            </n-space>
-          </n-space>
-        </n-descriptions-item>
-        <n-descriptions-item label="转换请求数据">
-          <n-button strong secondary type="success" @click="getDictData">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="失败-错误状态码">
-          <n-button strong secondary type="error" @click="failedRequest">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="失败-错误业务码">
-          <n-button strong secondary type="error" @click="failedResponse">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="失败-错误业务码(无提示)">
-          <n-button strong secondary type="error" @click="failedResponseWithoutTip">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="401-token过期">
-          <n-button strong secondary @click="expiredToken">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="refresh token">
-          <n-button strong secondary @click="updataToken">
-            click
-          </n-button>
-        </n-descriptions-item>
-      </n-descriptions>
-      <n-alert title="关于401-token失效刷新" type="warning">
-        请在控制台将网络速率设置为最低（1kb左右）后点击查看，否则会造成请求大量发送
-      </n-alert>
-    </n-space>
   </n-card>
 </template>
 

src/views/plugin/icons/index.vue

@@ -1,5 +1,29 @@
 <template>
-  <n-card title="图标选择器">
+  <n-space vertical>
-    <icon-select />
+    <n-card title="图标选择器">
-  </n-card>
+      <icon-select />
+    </n-card>
+    <n-card title="自动导入图标">
+      <div>
+        正常：<icon-park-outline-apple />
+      </div>
+      <div>
+        大：<icon-park-outline-apple class="text-2em" />
+      </div>
+      <div>
+        大大大：<icon-park-outline-apple class="text-4em" />
+      </div>
+    </n-card>
+    <n-card title="自动导入svg图标">
+      <div>
+        正常：<svg-icons-cool />
+      </div>
+      <div>
+        大：<svg-icons-cool class="text-2em" />
+      </div>
+      <div>
+        大大大：<svg-icons-cool class="text-4em" />
+      </div>
+    </n-card>
+  </n-space>
 </template>

src/views/userCenter/index.vue

@@ -42,53 +42,48 @@ function handleValidateClick() {
 </script>
 
 <template>
-  <n-grid :y-gap="16" :cols="1">
+  <n-space vertical>
-    <n-gi>
+    <n-card title="个人信息">
-      <n-card title="个人信息">
+      <n-space size="large">
-        <n-space size="large">
+        <n-avatar round :size="128" :src="userInfo?.avatar" />
-          <n-avatar round :size="128" :src="userInfo?.avatar" />
 
-          <n-descriptions label-placement="left" :column="2" :title="`傍晚好，${userInfo?.nickname}，这里是简单的个人中心模板`">
+        <n-descriptions label-placement="left" :column="2" :title="`傍晚好，${userInfo?.nickname}，这里是简单的个人中心模板`">
-            <n-descriptions-item label="id">
+          <n-descriptions-item label="id">
-              {{ userInfo?.id }}
+            {{ userInfo?.id }}
-            </n-descriptions-item>
+          </n-descriptions-item>
-            <n-descriptions-item label="用户名">
+          <n-descriptions-item label="用户名">
-              {{ userInfo?.username }}
+            {{ userInfo?.username }}
-            </n-descriptions-item>
+          </n-descriptions-item>
-            <n-descriptions-item label="真实名称">
+          <n-descriptions-item label="真实名称">
-              {{ userInfo?.nickname }}
+            {{ userInfo?.nickname }}
-            </n-descriptions-item>
+          </n-descriptions-item>
-            <n-descriptions-item label="角色">
+          <n-descriptions-item label="角色">
-              {{ userInfo?.role }}
+            {{ userInfo?.role }}
-            </n-descriptions-item>
+          </n-descriptions-item>
-          </n-descriptions>
+        </n-descriptions>
-        </n-space>
+      </n-space>
-      </n-card>
+    </n-card>
-    </n-gi>
+    <n-card title="信息修改">
-
+      <n-space justify="center">
-    <n-gi>
+        <n-form ref="formRef" class="w-500px" :label-width="80" :model="formValue" :rules="rules">
-      <n-card title="信息修改">
+          <n-form-item label="姓名" path="user.name">
-        <n-space justify="center">
+            <n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
-          <n-form ref="formRef" class="w-500px" :label-width="80" :model="formValue" :rules="rules">
+          </n-form-item>
-            <n-form-item label="姓名" path="user.name">
+          <n-form-item label="年龄" path="user.age">
-              <n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
+            <n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
-            </n-form-item>
+          </n-form-item>
-            <n-form-item label="年龄" path="user.age">
+          <n-form-item label="电话号码" path="phone">
-              <n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
+            <n-input v-model:value="formValue.phone" placeholder="电话号码" />
-            </n-form-item>
+          </n-form-item>
-            <n-form-item label="电话号码" path="phone">
+          <n-form-item>
-              <n-input v-model:value="formValue.phone" placeholder="电话号码" />
+            <n-button type="primary" attr-type="button" block @click="handleValidateClick">
-            </n-form-item>
+              验证
-            <n-form-item>
+            </n-button>
-              <n-button type="primary" attr-type="button" block @click="handleValidateClick">
+          </n-form-item>
-                验证
+        </n-form>
-              </n-button>
+      </n-space>
-            </n-form-item>
+    </n-card>
-          </n-form>
+  </n-space>
-        </n-space>
-      </n-card>
-    </n-gi>
-  </n-grid>
 </template>
 
 <style scoped></style>