From 187c26832c7ff7b99c7e7f4f896b15e18392bb6a Mon Sep 17 00:00:00 2001
From: JuneOY <75666139+JuneOY@users.noreply.github.com>
Date: Sun, 28 Apr 2024 10:03:47 +0800
Subject: [PATCH] fix: typo (#12)

* updata plugin fetch layout

* fix:typo
---
 src/router/guard.ts                           |   4 +-
 src/router/routes.static.ts                   |   2 +-
 src/service/api/test.ts                       |   6 +-
 src/typings/route.d.ts                        |   2 +-
 src/views/demo/QRCode/index.vue               |   2 +-
 src/views/demo/fetch/components/Get.vue       |   4 +-
 .../demo/fetch/components/UseRequest.vue      |   8 +-
 src/views/plugin/fetch/index.vue              | 249 ++++++++++++++++++
 .../setting/menu/components/TableModal.vue    |   8 +-
 9 files changed, 267 insertions(+), 18 deletions(-)
 create mode 100644 src/views/plugin/fetch/index.vue

diff --git a/src/router/guard.ts b/src/router/guard.ts
index 9314fca..30cfcb4 100644
--- a/src/router/guard.ts
+++ b/src/router/guard.ts
@@ -11,8 +11,8 @@ export function setupRouterGuard(router: Router) {
 
   router.beforeEach(async (to, from, next) => {
     // 判断是否是外链，如果是直接打开网页并拦截跳转
-    if (to.meta.herf) {
-      window.open(to.meta.herf)
+    if (to.meta.href) {
+      window.open(to.meta.href)
       return false
     }
     // 开始 loadingBar
diff --git a/src/router/routes.static.ts b/src/router/routes.static.ts
index b406b5f..2aaca6d 100644
--- a/src/router/routes.static.ts
+++ b/src/router/routes.static.ts
@@ -260,7 +260,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     'meta.title': 'VueUse（外链）',
     'meta.requiresAuth': true,
     'meta.icon': 'logos:vueuse',
-    'meta.herf': 'https://vueuse.org/guide/',
+    'meta.href': 'https://vueuse.org/guide/',
     'componentPath': 'null',
     'id': 27,
     'pid': 24,
diff --git a/src/service/api/test.ts b/src/service/api/test.ts
index c224885..0d76658 100644
--- a/src/service/api/test.ts
+++ b/src/service/api/test.ts
@@ -1,7 +1,7 @@
 import { blankInstance, request } from '../http'
 
 /* get方法测试 */
-export function fetachGet(params?: any) {
+export function fetchGet(params?: any) {
   return request.Get('/getAPI', { params })
 }
 
@@ -53,7 +53,7 @@ export function dictData() {
 export function getBlob(url: string) {
   const methodInstance = blankInstance.Get<Blob>(url)
   methodInstance.meta = {
-    // 标识为bolb数据
+    // 标识为blob数据
     isBlob: true,
   }
   return methodInstance
@@ -66,7 +66,7 @@ export function downloadFile(url: string) {
     enableDownload: true,
   })
   methodInstance.meta = {
-    // 标识为bolb数据
+    // 标识为blob数据
     isBlob: true,
   }
   return methodInstance
diff --git a/src/typings/route.d.ts b/src/typings/route.d.ts
index e2046dc..d2de6e4 100644
--- a/src/typings/route.d.ts
+++ b/src/typings/route.d.ts
@@ -18,7 +18,7 @@ declare namespace AppRoute {
     /* 菜单排序。 */
     order?: number
     /* 嵌套外链  */
-    herf?: string
+    href?: string
     /** 当前路由不在左侧菜单显示，但需要高亮某个菜单的情况 */
     activeMenu?: string
     /** 当前路由是否会被添加到Tab中 */
diff --git a/src/views/demo/QRCode/index.vue b/src/views/demo/QRCode/index.vue
index c78d1f4..16a19a3 100644
--- a/src/views/demo/QRCode/index.vue
+++ b/src/views/demo/QRCode/index.vue
@@ -5,7 +5,7 @@ const text = ref('nova-admin')
 <template>
   <n-card title="二维码">
     <n-alert :show-icon="false" type="info">
-      使用navieUI - QR Code 实现
+      使用naiveUI - QR Code 实现
     </n-alert>
     <n-qr-code :value="text" />
     <n-input v-model:value="text" :maxlength="60" type="text" />
diff --git a/src/views/demo/fetch/components/Get.vue b/src/views/demo/fetch/components/Get.vue
index 3294639..0ae8ea2 100644
--- a/src/views/demo/fetch/components/Get.vue
+++ b/src/views/demo/fetch/components/Get.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-  fetachGet,
+  fetchGet,
 } from '@/service'
 
 const emit = defineEmits<{
@@ -8,7 +8,7 @@ const emit = defineEmits<{
 }>()
 
 async function pinterEnv() {
-  const res = await fetachGet({ a: 112211, b: false })
+  const res = await fetchGet({ a: 112211, b: false })
   emit('update', res)
 }
 </script>
diff --git a/src/views/demo/fetch/components/UseRequest.vue b/src/views/demo/fetch/components/UseRequest.vue
index 3f8035d..f85dcee 100644
--- a/src/views/demo/fetch/components/UseRequest.vue
+++ b/src/views/demo/fetch/components/UseRequest.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import { useRequest } from 'alova'
 import {
-  fetachGet,
+  fetchGet,
 } from '@/service'
 
 const emit = defineEmits<{
   update: [data: any] // 具名元组语法
 }>()
 
-const { data: fetachGetData, send: sendFetachGet } = useRequest(fetachGet({ a: 112211 }), {
+const { data: fetchGetData, send: sendFetchGet } = useRequest(fetchGet({ a: 112211 }), {
   // 当immediate为false时，默认不发出
   immediate: false,
 })
 
 async function handleRequestHook() {
-  await sendFetachGet()
-  emit('update', fetachGetData.value)
+  await sendFetchGet()
+  emit('update', fetchGetData.value)
 }
 </script>
 
diff --git a/src/views/plugin/fetch/index.vue b/src/views/plugin/fetch/index.vue
new file mode 100644
index 0000000..eb01d36
--- /dev/null
+++ b/src/views/plugin/fetch/index.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { useRequest } from 'alova'
+import {
+  FailedRequest,
+  FailedResponse,
+  FailedResponseWithoutTip,
+  dictData,
+  downloadFile,
+  expiredTokenRequest,
+  fetchDelete,
+  fetchFormPost,
+  fetchGet,
+  fetchPost,
+  fetchPut,
+  fetchUpdateToken,
+  getBlob,
+  withoutToken,
+} from '@/service'
+
+const msg = ref()
+const { data: fetchGetData, send: sendFetchGet } = useRequest(fetchGet({ a: 112211 }), {
+  // 当immediate为false时，默认不发出
+  immediate: false,
+})
+
+function handleRequestHook() {
+  sendFetchGet()
+  msg.value = fetchGetData.value
+}
+function pinterEnv() {
+  msg.value = import.meta.env
+}
+async function get() {
+  const res = await fetchGet({ 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 imagePath = 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(imagePath.value).then((res) => {
+    msg.value = 'this is blob!'
+    const link = URL.createObjectURL(res)
+    const eleLink = document.createElement('a')
+    eleLink.download = 'okk'
+    eleLink.style.display = 'none'
+    eleLink.href = link
+    document.body.appendChild(eleLink)
+    eleLink.click()
+    document.body.removeChild(eleLink)
+  })
+}
+// 下载大文件获取进度
+const downloadPath = ref('https://suqiqi.oss-cn-beijing.aliyuncs.com/test/video/1.mp4')
+const { downloading, abort: abortDownloadFile, send: sendDownloadFile } = useRequest(downloadFile(downloadPath.value), {
+  // 当immediate为false时，默认不发出
+  immediate: false,
+})
+const downloadProcess = computed(() => {
+  if (!downloading.value.loaded)
+    return 0
+  return Math.floor(downloading.value.loaded / downloading.value.total * 100)
+})
+</script>
+
+<template>
+  <n-card title="网络请求示例">
+    <n-space vertical :size="12">
+      <pre class="bg-#eee">
+      {{ msg }}
+      </pre>
+      <n-descriptions label-placement="left" bordered>
+        <n-descriptions-item label="检查环境变量">
+          <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="downloadPath" />
+            <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="sendDownloadFile">
+                开始下载
+              </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>
+
+<style scoped></style>
diff --git a/src/views/setting/menu/components/TableModal.vue b/src/views/setting/menu/components/TableModal.vue
index 6463b20..945bf15 100644
--- a/src/views/setting/menu/components/TableModal.vue
+++ b/src/views/setting/menu/components/TableModal.vue
@@ -32,7 +32,7 @@ const defaultFormModal: AppRoute.RowRoute = {
   'meta.keepAlive': false,
   'meta.hide': false,
   'meta.order': undefined,
-  'meta.herf': undefined,
+  'meta.href': undefined,
   'meta.activeMenu': undefined,
   'meta.withoutTab': true,
   'meta.pinTab': false,
@@ -160,7 +160,7 @@ const rules = {
     message: '请输入菜单标题',
     trigger: 'blur',
   },
-  'meta.herf': {
+  'meta.href': {
     validator(rule: FormItemRule, value: string) {
       if (!new RegExp(Regex.Url).test(value))
         return new Error('请输入正确的URL地址')
@@ -244,12 +244,12 @@ const options = [
           </template>
           <n-input-number v-model:value="formModel['meta.order']" />
         </n-form-item-grid-item>
-        <n-form-item-grid-item v-if="formModel['meta.menuType'] === 'page'" :span="1" path="meta.herf">
+        <n-form-item-grid-item v-if="formModel['meta.menuType'] === 'page'" :span="1" path="meta.href">
           <template #label>
             外链页面
             <HelpInfo message="填写后，点击菜单将跳转到该地址，组件路径任意填写" />
           </template>
-          <n-input v-model:value="formModel['meta.herf']" placeholder="Eg: https://example.com" />
+          <n-input v-model:value="formModel['meta.href']" placeholder="Eg: https://example.com" />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="1" label="登录访问" path="meta.requiresAuth">
           <n-switch v-model:value="formModel['meta.requiresAuth']" />