未登录的情况下，profile接口每次刷新报错

2024-11-15 19:03:00 +08:00 · 2024-11-15 19:03:00 +08:00 · eca34957a2
parent 0c188cc40b
commit eca34957a2
5 changed files with 182 additions and 147 deletions
--- a/src/layout/adder/AdderPage.tsx
+++ b/src/layout/adder/AdderPage.tsx
@ -83,9 +83,9 @@ export default defineComponent(() => {
  const addTo = ref(layout.state.currentPage)

  provide(AddToToken, addTo)
-  onUnmounted(() => {
-    store.type = 1
-  })
+  // onUnmounted(() => {
+  //   store.type = 1
+  // })
  return () => (
    <div
      class={clsx(
--- a/src/layout/header/search/SearchPage.tsx
+++ b/src/layout/header/search/SearchPage.tsx
@ -5,6 +5,8 @@ import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vu
 import asyncLoader from '@/utils/asyncLoader'
 import ThemeProvider from '@/utils/ThemeProvider'
 import { globalToast } from '@/main'
+import useUserStore from '@/user/useUserStore'
+import useRouterStore from '@/useRouterStore'
 const SearchAdder = asyncLoader(() => import('./SearchAdder'))
 const SearchItem = defineComponent({
  props: {
@ -157,7 +159,12 @@ export default defineComponent(() => {
              block
              icon={<PlusOutlined />}
              onClick={() => {
-                showAdder.value = null
+                if (useUserStore().isLogin) {
+                  showAdder.value = null
+                } else {
+                  globalToast.warning('请先登录')
+                  useRouterStore().go('global-login')
+                }
              }}
            >
              添加自定义搜索引擎
--- a/src/user/useUserStore.ts
+++ b/src/user/useUserStore.ts
@ -79,6 +79,9 @@ export default defineStore('user', () => {
      localStorage.setItem('token', val)

      if (!val) return
+      if (!isLogin.value) {
+        return
+      }
      const res = await request<UserInfo>('GET', '/api/profile')
      Object.assign(profile, res)
    },
--- a/src/utils/ImageUploader.tsx
+++ b/src/utils/ImageUploader.tsx
@ -5,6 +5,8 @@ import upload from './upload'
 import 'viewerjs/dist/viewer.css'
 import { api as showViewer } from 'v-viewer'
 import { globalToast } from '@/main'
+import useUserStore from '@/user/useUserStore'
+import useRouterStore from '@/useRouterStore'

 addIcons(MdUpload, FaEye)

@ -33,6 +35,7 @@ export default defineComponent({
  },
  setup(props, ctx) {
    let input: HTMLInputElement | null = null
+
    return () => (
      <div>
        <input
@ -62,7 +65,12 @@ export default defineComponent({
            backgroundImage: `url('${props.value}')`
          }}
          onClick={() => {
-            input?.click()
+            if (useUserStore().isLogin) {
+              input?.click()
+            } else {
+              globalToast.warning('请先登录')
+              useRouterStore().go('global-login')
+            }
          }}
        >
          {props.value ? (
--- a/src/utils/UploadAndCut.tsx
+++ b/src/utils/UploadAndCut.tsx
@ -3,141 +3,149 @@ import { defineComponent, ref, watch } from 'vue'
 import { VueCropper } from 'vue-cropper'
 import 'vue-cropper/dist/index.css'
 import upload from './upload'
-import { v4 as uuid } from "uuid"
-import { MdCroprotateRound, BiPlusLg } from "oh-vue-icons/icons";
-import { OhVueIcon, addIcons, } from 'oh-vue-icons'
+import { v4 as uuid } from 'uuid'
+import { MdCroprotateRound, BiPlusLg } from 'oh-vue-icons/icons'
+import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import NativeColorPicker from './NativeColorPicker'
+import useUserStore from '@/user/useUserStore'
+import { globalToast } from '@/main'
+import useRouterStore from '@/useRouterStore'
 addIcons(MdCroprotateRound, BiPlusLg)

 export default defineComponent({
+  emits: {
+    'update:value': (() => true) as (val: string) => boolean
+  },
+  setup(props, ctx) {
+    const inputRef = ref<HTMLInputElement | null>(null)
+    const showCutModel = ref(false)
+    const originFile = ref('')
+    const fillColor = ref('transparent')
+    const cropper = ref<any>(null)
+    const handleFile = (e: any) => {
+      const target = e.target as HTMLInputElement

-    emits: {
-        'update:value': (() => true) as (val: string) => boolean
-    },
-    setup(props, ctx) {
-        const inputRef = ref<HTMLInputElement | null>(null)
-        const showCutModel = ref(false)
-        const originFile = ref('')
-        const fillColor = ref('transparent')
-        const cropper = ref<any>(null)
-        const handleFile = (e: any) => {
-            const target = e.target as HTMLInputElement
+      const file = target.files?.[0]
+      target.value = ''

-            const file = target.files?.[0]
-            target.value = ''
+      if (!file) return
+      // upload(file).then(res => {
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = (e: any) => {
+        originFile.value = e?.target.result // 显示原始图片
+        showCutModel.value = true
+      }
+      //   emit('update:icon', res || '')
+      // })
+    }
+    const handleFinish = (blob: any) => {
+      // 根据前几个字节推测文件类型（这里只考虑常见的图片类型）

-            if (!file) return
-            // upload(file).then(res => {
-            const reader = new FileReader()
-            reader.readAsDataURL(file)
-            reader.onload = (e: any) => {
-                originFile.value = e?.target.result // 显示原始图片
-                showCutModel.value = true
-            }
-            //   emit('update:icon', res || '')
-            // })
-        }
-        const handleFinish = (blob: any) => {
-            // 根据前几个字节推测文件类型（这里只考虑常见的图片类型）
+      // 使用 FileReader 对象读取 Blob 的前几个字节
+      const reader = new FileReader()
+      reader.onloadend = function () {
+        // 打印 File 对象以验证

-            // 使用 FileReader 对象读取 Blob 的前几个字节
-            const reader = new FileReader()
-            reader.onloadend = function () {
-                // 打印 File 对象以验证
+        const fileData = new File([blob], `${uuid()}.png`, {
+          type: 'image/jpg',
+          lastModified: Date.now()
+        })
+        upload(fileData, 'customIcon').then((res) => {
+          showCutModel.value = false

-                const fileData = new File([blob], `${uuid()}.png`, {
-                    type: 'image/jpg',
-                    lastModified: Date.now()
-                })
-                upload(fileData, 'customIcon').then((res) => {
-                    showCutModel.value = false
-
-                    ctx.emit('update:value', res || '')
-                })
-            }
-            reader.readAsArrayBuffer(blob)
-        }
-        watch(
-            fillColor,
-            (e: string) => {
-                const elements = document.querySelectorAll('.cropper-crop-box')
-                elements.forEach((element: any) => {
-                    element.style.backgroundColor = e // 修改颜色为蓝色
-                })
-            },
-            {
-                immediate: true
-            }
-        )
-        return () => (
-            <>
-                <Modal
-                    open={showCutModel.value}
-                    onCancel={() => showCutModel.value = false}
-                    onOk={() => {
-                        cropper.value.getCropBlob((blob: any) => {
-                            handleFinish(blob)
-
-                        })
-                    }}
-                >
-                    <div class="w-full flex flex-col items-center gap-y-2">
-                        <div class="w-[250px] h-[250px]" style={{
-                            backgroundColor: fillColor.value || 'transparent',
-                        }}>
-                            <VueCropper
-                                ref={cropper}
-                                autoCropWidth="250px"
-                                autoCropHeight="250px"
-                                mode="contain"
-                                outputType="png"
-                                img={originFile.value}
-                                autoCrop={true}
-                                fillColor={fillColor.value}
-
-                            />
-                        </div>
-                        <div class="flex justify-between w-[250px]">
-                            {/* <ArrowRotateClockwise24Regular
+          ctx.emit('update:value', res || '')
+        })
+      }
+      reader.readAsArrayBuffer(blob)
+    }
+    watch(
+      fillColor,
+      (e: string) => {
+        const elements = document.querySelectorAll('.cropper-crop-box')
+        elements.forEach((element: any) => {
+          element.style.backgroundColor = e // 修改颜色为蓝色
+        })
+      },
+      {
+        immediate: true
+      }
+    )
+    return () => (
+      <>
+        <Modal
+          open={showCutModel.value}
+          onCancel={() => (showCutModel.value = false)}
+          onOk={() => {
+            cropper.value.getCropBlob((blob: any) => {
+              handleFinish(blob)
+            })
+          }}
+        >
+          <div class="w-full flex flex-col items-center gap-y-2">
+            <div
+              class="w-[250px] h-[250px]"
+              style={{
+                backgroundColor: fillColor.value || 'transparent'
+              }}
+            >
+              <VueCropper
+                ref={cropper}
+                autoCropWidth="250px"
+                autoCropHeight="250px"
+                mode="contain"
+                outputType="png"
+                img={originFile.value}
+                autoCrop={true}
+                fillColor={fillColor.value}
+              />
+            </div>
+            <div class="flex justify-between w-[250px]">
+              {/* <ArrowRotateClockwise24Regular
                                class="text-[10px] w-8 h-8 cursor-pointer"
                                onClick={() => ($refs.cropper as any).rotateRight()}
                            /> */}
-                            <span class="flex items-center cursor-pointer"
-                                onClick={() => {
-                                    cropper.value.rotateRight()
-                                }}>
-                                <OhVueIcon name="md-croprotate-round" scale={1} fill="#707070" ></OhVueIcon>
-
-                            </span>
-                            <span class="flex items-center gap-x-1">
-                                <svg
-                                    onClick={() => cropper.value?.changeScale(1)}
-                                    class="icon cursor-pointer"
-                                    viewBox="0 0 1024 1024"
-                                    width="2rem"
-                                    height="2rem"
-                                >
-                                    <path
-                                        d="M886.51776 799.66208l-139.93984-139.93984c-10.50624-10.50624-23.90016-16.13824-37.60128-17.44896 42.16832-52.59264 67.54304-119.1936 67.54304-191.6928 0-169.39008-137.80992-307.2-307.2-307.2s-307.2 137.80992-307.2 307.2 137.80992 307.2 307.2 307.2c63.91808 0 123.31008-19.6608 172.52352-53.18656 0.34816 15.23712 6.22592 30.37184 17.85856 42.00448l139.93984 139.93984c11.9808 12.00128 27.72992 18.00192 43.43808 18.00192s31.45728-6.00064 43.43808-18.00192C910.52032 862.55616 910.52032 823.66464 886.51776 799.66208zM469.31968 655.38048c-112.92672 0-204.8-91.87328-204.8-204.8s91.87328-204.8 204.8-204.8 204.8 91.87328 204.8 204.8S582.2464 655.38048 469.31968 655.38048zM610.14016 450.58048c0 22.60992-18.35008 40.96-40.96 40.96l-56.32 0 0 56.32c0 22.60992-18.35008 40.96-40.96 40.96s-40.96-18.35008-40.96-40.96l0-56.32-56.32 0c-22.60992 0-40.96-18.35008-40.96-40.96s18.35008-40.96 40.96-40.96l56.32 0 0-56.32c0-22.60992 18.35008-40.96 40.96-40.96s40.96 18.35008 40.96 40.96l0 56.32 56.32 0C591.79008 409.62048 610.14016 427.95008 610.14016 450.58048z"
-                                        fill="#707070"
-                                    />
-                                </svg>
-                                <svg
-                                    onClick={() => cropper.value?.changeScale(-1)}
-                                    class="icon cursor-pointer"
-                                    viewBox="0 0 1024 1024"
-                                    width="2rem"
-                                    height="2rem"
-                                >
-                                    <path
-                                        d="M886.51776 799.66208l-139.93984-139.93984c-10.50624-10.50624-23.90016-16.13824-37.60128-17.44896 42.16832-52.59264 67.54304-119.1936 67.54304-191.6928 0-169.39008-137.80992-307.2-307.2-307.2s-307.2 137.80992-307.2 307.2 137.80992 307.2 307.2 307.2c63.91808 0 123.31008-19.6608 172.52352-53.18656 0.34816 15.23712 6.22592 30.37184 17.85856 42.00448l139.93984 139.93984c11.9808 12.00128 27.72992 18.00192 43.43808 18.00192s31.45728-6.00064 43.43808-18.00192C910.52032 862.55616 910.52032 823.66464 886.51776 799.66208zM469.31968 655.38048c-112.92672 0-204.8-91.87328-204.8-204.8s91.87328-204.8 204.8-204.8 204.8 91.87328 204.8 204.8S582.2464 655.38048 469.31968 655.38048zM610.14016 450.58048c0 22.60992-18.35008 40.96-40.96 40.96l-194.56 0c-22.60992 0-40.96-18.35008-40.96-40.96s18.35008-40.96 40.96-40.96l194.56 0C591.79008 409.62048 610.14016 427.95008 610.14016 450.58048z"
-                                        fill="#707070"
-                                    />
-                                </svg>
-                            </span>
-                        </div>
-                        <NativeColorPicker value={fillColor.value} onUpdate:value={e => fillColor.value = e} transparent={true} />
-                        {/* {props.colorList && (
+              <span
+                class="flex items-center cursor-pointer"
+                onClick={() => {
+                  cropper.value.rotateRight()
+                }}
+              >
+                <OhVueIcon name="md-croprotate-round" scale={1} fill="#707070"></OhVueIcon>
+              </span>
+              <span class="flex items-center gap-x-1">
+                <svg
+                  onClick={() => cropper.value?.changeScale(1)}
+                  class="icon cursor-pointer"
+                  viewBox="0 0 1024 1024"
+                  width="2rem"
+                  height="2rem"
+                >
+                  <path
+                    d="M886.51776 799.66208l-139.93984-139.93984c-10.50624-10.50624-23.90016-16.13824-37.60128-17.44896 42.16832-52.59264 67.54304-119.1936 67.54304-191.6928 0-169.39008-137.80992-307.2-307.2-307.2s-307.2 137.80992-307.2 307.2 137.80992 307.2 307.2 307.2c63.91808 0 123.31008-19.6608 172.52352-53.18656 0.34816 15.23712 6.22592 30.37184 17.85856 42.00448l139.93984 139.93984c11.9808 12.00128 27.72992 18.00192 43.43808 18.00192s31.45728-6.00064 43.43808-18.00192C910.52032 862.55616 910.52032 823.66464 886.51776 799.66208zM469.31968 655.38048c-112.92672 0-204.8-91.87328-204.8-204.8s91.87328-204.8 204.8-204.8 204.8 91.87328 204.8 204.8S582.2464 655.38048 469.31968 655.38048zM610.14016 450.58048c0 22.60992-18.35008 40.96-40.96 40.96l-56.32 0 0 56.32c0 22.60992-18.35008 40.96-40.96 40.96s-40.96-18.35008-40.96-40.96l0-56.32-56.32 0c-22.60992 0-40.96-18.35008-40.96-40.96s18.35008-40.96 40.96-40.96l56.32 0 0-56.32c0-22.60992 18.35008-40.96 40.96-40.96s40.96 18.35008 40.96 40.96l0 56.32 56.32 0C591.79008 409.62048 610.14016 427.95008 610.14016 450.58048z"
+                    fill="#707070"
+                  />
+                </svg>
+                <svg
+                  onClick={() => cropper.value?.changeScale(-1)}
+                  class="icon cursor-pointer"
+                  viewBox="0 0 1024 1024"
+                  width="2rem"
+                  height="2rem"
+                >
+                  <path
+                    d="M886.51776 799.66208l-139.93984-139.93984c-10.50624-10.50624-23.90016-16.13824-37.60128-17.44896 42.16832-52.59264 67.54304-119.1936 67.54304-191.6928 0-169.39008-137.80992-307.2-307.2-307.2s-307.2 137.80992-307.2 307.2 137.80992 307.2 307.2 307.2c63.91808 0 123.31008-19.6608 172.52352-53.18656 0.34816 15.23712 6.22592 30.37184 17.85856 42.00448l139.93984 139.93984c11.9808 12.00128 27.72992 18.00192 43.43808 18.00192s31.45728-6.00064 43.43808-18.00192C910.52032 862.55616 910.52032 823.66464 886.51776 799.66208zM469.31968 655.38048c-112.92672 0-204.8-91.87328-204.8-204.8s91.87328-204.8 204.8-204.8 204.8 91.87328 204.8 204.8S582.2464 655.38048 469.31968 655.38048zM610.14016 450.58048c0 22.60992-18.35008 40.96-40.96 40.96l-194.56 0c-22.60992 0-40.96-18.35008-40.96-40.96s18.35008-40.96 40.96-40.96l194.56 0C591.79008 409.62048 610.14016 427.95008 610.14016 450.58048z"
+                    fill="#707070"
+                  />
+                </svg>
+              </span>
+            </div>
+            <NativeColorPicker
+              value={fillColor.value}
+              onUpdate:value={(e) => (fillColor.value = e)}
+              transparent={true}
+            />
+            {/* {props.colorList && (
                            <div class="w-[250px] flex justify-center">
                                <NativeColorPicker
                                    colorList={colorList}
@ -147,23 +155,32 @@ export default defineComponent({
                                />
                            </div>
                        )} */}
-
-                    </div>
-                </Modal >
-                <div class="w-full h-full bg-white flex items-center justify-center"
-                    onClick={() => {
-                        inputRef.value?.click?.()
-                    }}
-                >
-                    <OhVueIcon name={BiPlusLg.name} fill='#666666' scale={2}></OhVueIcon>
-                </div>
-                <input
-                    ref={inputRef}
-                    style={{
-                        display: 'none'
-                    }} accept=".jpg,.jpeg,.png,.svg" type="file" onChange={handleFile} />
-            </>
-        )
-    }
-
+          </div>
+        </Modal>
+        <div
+          class="w-full h-full bg-white flex items-center justify-center"
+          onClick={() => {
+            if (useUserStore().isLogin) {
+              inputRef.value?.click?.()
+            } else {
+              globalToast.warning('请先登录')
+              useRouterStore().go('global-login')
+            //   useAdderPageStore().type = 2
+            }
+          }}
+        >
+          <OhVueIcon name={BiPlusLg.name} fill="#666666" scale={2}></OhVueIcon>
+        </div>
+        <input
+          ref={inputRef}
+          style={{
+            display: 'none'
+          }}
+          accept=".jpg,.jpeg,.png,.svg"
+          type="file"
+          onChange={handleFile}
+        />
+      </>
+    )
+  }
 })