From fc7b1bdad5ee971906379beb4e4faa36250b225f Mon Sep 17 00:00:00 2001 From: plightfield <1207120484@qq.com> Date: Fri, 13 Sep 2024 10:15:43 +0800 Subject: [PATCH] change --- src/config.ts | 6 +-- src/layout/sider/index.tsx | 7 ++- src/settings/SettingsOverlay.tsx | 5 +- src/user/AvatarCircle.tsx | 22 ++++++++ src/user/LoginModal.tsx | 7 ++- src/user/UserPage.tsx | 87 ++++++++++++++++++++++++++++---- src/user/useUserStore.ts | 31 +++++++----- src/utils/upload.ts | 34 +++++-------- 8 files changed, 147 insertions(+), 52 deletions(-) create mode 100644 src/user/AvatarCircle.tsx diff --git a/src/config.ts b/src/config.ts index 4dcbc19..f60553a 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,16 +1,14 @@ export const aIUrl = 'https://metaso.cn/?s=uitab&referrer_s=uitab&q=' export const translateUrl = 'https://fanyi.baidu.com/mtpe-individual/multimodal?lang=zh2en&query=' -// 获取 ossKey 地址 -export const ossKeyUrl = import.meta.env.PROD - ? 'http://192.168.110.28:8300/ossKey' - : 'http://192.168.110.28:8300/ossKey' // 获取 oss 根目录地址 export const ossBase = import.meta.env.PROD ? 'http://btab.oss-cn-hangzhou.aliyuncs.com' : 'http://btab.oss-cn-hangzhou.aliyuncs.com' +// 后端地址 export const apiBase = import.meta.env.PROD ? 'http://192.168.110.28:8300' : 'http://192.168.110.28:8300' +// 后端 cdn 加速地址 export const cdnBase = import.meta.env.PROD ? apiBase : apiBase diff --git a/src/layout/sider/index.tsx b/src/layout/sider/index.tsx index 22bfed6..d8ec5a6 100644 --- a/src/layout/sider/index.tsx +++ b/src/layout/sider/index.tsx @@ -6,6 +6,7 @@ import { PxHeadset, PxAddBox, PxCheck } from 'oh-vue-icons/icons' import useRouterStore from '@/useRouterStore' import useLayoutStore from '../useLayoutStore' import useUserStore from '@/user/useUserStore' +import AvatarCircle from '@/user/AvatarCircle' initIcons() addIcons(PxHeadset, PxAddBox, PxCheck) @@ -117,7 +118,7 @@ export default defineComponent(() => { }} />
{ if (user.isLogin) { router.path = 'settings-user' @@ -125,7 +126,9 @@ export default defineComponent(() => { router.path = 'global-login' } }} - >
+ > + + {/* 添加页面 */} diff --git a/src/settings/SettingsOverlay.tsx b/src/settings/SettingsOverlay.tsx index ec5a728..bb83722 100644 --- a/src/settings/SettingsOverlay.tsx +++ b/src/settings/SettingsOverlay.tsx @@ -1,3 +1,4 @@ +import AvatarCircle from '@/user/AvatarCircle' import useRouterStore from '@/useRouterStore' import asyncLoader from '@/utils/asyncLoader' import { computed, defineComponent, Transition } from 'vue' @@ -62,7 +63,9 @@ export default defineComponent(() => { router.path = 'settings-user' }} > -
+
+ +
diff --git a/src/user/AvatarCircle.tsx b/src/user/AvatarCircle.tsx new file mode 100644 index 0000000..3a50ce8 --- /dev/null +++ b/src/user/AvatarCircle.tsx @@ -0,0 +1,22 @@ +import { defineComponent } from 'vue' +import { OhVueIcon, addIcons } from 'oh-vue-icons' +import { FaUserAlt } from 'oh-vue-icons/icons' +import useUserStore from './useUserStore' + +addIcons(FaUserAlt) + +export default defineComponent(() => { + const { profile } = useUserStore() + return () => { + return ( +
+ {!profile.avatar && } +
+ ) + } +}) diff --git a/src/user/LoginModal.tsx b/src/user/LoginModal.tsx index dab9e66..8abe717 100644 --- a/src/user/LoginModal.tsx +++ b/src/user/LoginModal.tsx @@ -34,8 +34,10 @@ export default defineComponent(() => {
测试用 - - +
+ + +
+
+
+
+ +
+
+ {user.isLogin && ( + + )} + +
+ {user.isLogin ? ( + <> + + + + + + ) : ( + + )} +
) }) diff --git a/src/user/useUserStore.ts b/src/user/useUserStore.ts index 475a2a9..20aacd7 100644 --- a/src/user/useUserStore.ts +++ b/src/user/useUserStore.ts @@ -1,43 +1,48 @@ import request from '@/utils/request' import { defineStore } from 'pinia' -import { computed, ref, watch } from 'vue' +import { computed, reactive, ref, watch } from 'vue' interface UserInfo { id: string username: string - created: string - vipUntil: string gender: number birthday: string - brief: string - email: string - password: string - type: string - updated: string avatar: string openId: string } - +const defaultUserInfo: UserInfo = { + id: '', + username: '', + gender: 0, + birthday: '', + avatar: '', + openId: '' +} export default defineStore('user', () => { const token = ref(localStorage.getItem('token') || '') watch(token, (val) => { localStorage.setItem('token', val) }) - const profile = ref(null) + const profile = reactive(defaultUserInfo) watch( token, (val) => { if (!val) return request('GET', '/api/profile').then((res) => { - profile.value = res + Object.assign(profile, res) }) }, { immediate: true } ) - const isLogin = computed(() => !!token.value && !!profile.value) + const isLogin = computed(() => !!token.value && !!profile.id) + const logout = () => { + token.value = '' + Object.assign(profile, defaultUserInfo) + } return { token, profile, - isLogin + isLogin, + logout } }) diff --git a/src/utils/upload.ts b/src/utils/upload.ts index 10945d2..8c7f7ae 100644 --- a/src/utils/upload.ts +++ b/src/utils/upload.ts @@ -1,24 +1,20 @@ -import { ossBase, ossKeyUrl } from './../config' +import { ossBase } from './../config' import OSS from 'ali-oss' import { v4 as uuid } from 'uuid' +import request from './request' export default async function upload(file: File, root: string) { - const config = await fetch(ossKeyUrl, { - method: 'POST', - headers: { - Authorization: - 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2NjlkZjA3Y2RhMjkyZTNiZTc0OGM5MmMifQ.9k9-C_Im2r2fONfT6rdAZDxapkqtwGtiVBSen59JDXY' - } - }).then( - (res) => - res.json() as Promise<{ - region: string - accessKeyId: string - accessKeySecret: string - securityToken: string - bucket: string - path: string - }> - ) + const token = localStorage.getItem('token') + if (!token) { + throw new Error('尚未登录，无法上传') + } + const config = await request<{ + region: string + accessKeyId: string + accessKeySecret: string + securityToken: string + bucket: string + path: string + }>('POST', '/api/ossKey') const ext = file.name.split('.').pop() const path = `${config.path}/${root}/${uuid()}.${ext}` const client = new OSS({ @@ -28,13 +24,11 @@ export default async function upload(file: File, root: string) { stsToken: config.securityToken, bucket: config.bucket }) - console.log(path) const { name } = await client.put(path, file, { mime: file.type, headers: { 'Content-Type': file.type } }) - console.log(name) return ossBase + '/' + name }