change

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

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(() => {
               }}
             />
             <div
-              class="w-[56px] h-[56px] bg-white/40 rounded-full border-white border-[2px] border-solid overflow-hidden cursor-pointer"
+              class="w-[56px] h-[56px] rounded-full border-white border-[2px] border-solid overflow-hidden cursor-pointer"
               onClick={() => {
                 if (user.isLogin) {
                   router.path = 'settings-user'
@@ -125,7 +126,9 @@ export default defineComponent(() => {
                   router.path = 'global-login'
                 }
               }}
-            ></div>
+            >
+              <AvatarCircle />
+            </div>
           </div>
           {/* 添加页面 */}
           <Transition name="page-adder">

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'
                 }}
               >
-                <div class="w-12 h-12 rounded-full overflow-hidden bg-black/20"></div>
+                <div class="w-12 h-12 relative">
+                  <AvatarCircle />
+                </div>
               </div>
               <SettingsTab label="壁纸" path="settings-background" />
               <SettingsTab label="图标" path="settings-block" />

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 (
+      <div
+        class="w-full h-full rounded-full bg-black/20 flex justify-center items-center bg-center bg-no-repeat bg-cover"
+        style={{
+          backgroundImage: `url('${profile?.avatar}')`
+        }}
+      >
+        {!profile.avatar && <OhVueIcon name="fa-user-alt" fill="white" scale={1.2} />}
+      </div>
+    )
+  }
+})

src/user/LoginModal.tsx

@@ -34,8 +34,10 @@ export default defineComponent(() => {
               </div>
               <div class="flex flex-col">
                 测试用
-                <input placeholder="邮箱" v-model={form.email} />
+                <form>
-                <input placeholder="密码" type="password" v-model={form.password} />
+                  <input placeholder="邮箱" v-model={form.email} />
+                  <input placeholder="密码" type="password" v-model={form.password} />
+                </form>
                 <button
                   onClick={() => {
                     request<string>('POST', '/api/user/login', {
@@ -43,6 +45,7 @@ export default defineComponent(() => {
                       returnType: 'text'
                     }).then((res) => {
                       user.token = res
+                      router.path = ''
                     })
                   }}
                 >

src/user/UserPage.tsx

@@ -1,19 +1,86 @@
 import useRouterStore from '@/useRouterStore'
-import { Button } from 'ant-design-vue'
+import { Button, message, Modal, Tag, Tooltip } from 'ant-design-vue'
 import { defineComponent } from 'vue'
+import AvatarCircle from './AvatarCircle'
+import useUserStore from './useUserStore'
+import { EditOutlined, LoginOutlined, LogoutOutlined } from '@ant-design/icons-vue'
+
+const labelStyle = 'w-16 text-black/60'
 
 export default defineComponent(() => {
   const router = useRouterStore()
+  const user = useUserStore()
   return () => (
-    <div class="absolute left-0 top-0 w-full h-full p-4">
+    <div class="absolute left-0 top-0 w-full h-full p-4 flex flex-col">
-      this is user
+      <div class="flex justify-center py-4">
-      <Button
+        <div class="w-16 h-16 relative">
-        onClick={() => {
+          <AvatarCircle />
-          router.path = 'global-login'
+        </div>
-        }}
+      </div>
-      >
+      {user.isLogin && (
-        登录
+        <div class="h-0 flex-grow py-4 px-12">
-      </Button>
+          <div class="flex py-2">
+            <div class={labelStyle}>用户名:</div>
+            <div class="w-0 flex-grow overflow-hidden text-ellipsis whitespace-nowrap break-all">
+              {user.profile.username}
+            </div>
+          </div>
+          <div class="flex py-2">
+            <div class={labelStyle}>生日:</div> {user.profile.birthday}
+          </div>
+          <div class="flex py-2">
+            <div class={labelStyle}>性别:</div>
+            <Tag color={user.profile.gender === 1 ? 'blue' : 'red'}>
+              {user.profile.gender === 1 ? '男' : '女'}
+            </Tag>
+          </div>
+        </div>
+      )}
+
+      <div class="flex justify-around items-center my-10">
+        {user.isLogin ? (
+          <>
+            <Button
+              onClick={() => {
+                router.path = 'global-login'
+              }}
+              icon={<EditOutlined />}
+            >
+              修改个人信息
+            </Button>
+            <Tooltip title="退出登录">
+              <Button
+                type="link"
+                danger
+                size="large"
+                icon={<LogoutOutlined />}
+                onClick={() => {
+                  Modal.confirm({
+                    title: '退出登录',
+                    content: '确定要退出登录吗？',
+                    onOk: () => {
+                      router.path = ''
+                      user.logout()
+                      message.success('已退出登录')
+                    }
+                  })
+                }}
+              ></Button>
+            </Tooltip>
+          </>
+        ) : (
+          <Button
+            type="primary"
+            icon={<LoginOutlined />}
+            size="large"
+            onClick={() => {
+              router.path = 'global-login'
+            }}
+          >
+            登录
+          </Button>
+        )}
+      </div>
     </div>
   )
 })

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 | UserInfo>(null)
+  const profile = reactive(defaultUserInfo)
   watch(
     token,
     (val) => {
       if (!val) return
       request<UserInfo>('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
   }
 })

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, {
+  const token = localStorage.getItem('token')
-    method: 'POST',
+  if (!token) {
-    headers: {
+    throw new Error('尚未登录，无法上传')
-      Authorization:
+  }
-        'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2NjlkZjA3Y2RhMjkyZTNiZTc0OGM5MmMifQ.9k9-C_Im2r2fONfT6rdAZDxapkqtwGtiVBSen59JDXY'
+  const config = await request<{
-    }
+    region: string
-  }).then(
+    accessKeyId: string
-    (res) =>
+    accessKeySecret: string
-      res.json() as Promise<{
+    securityToken: string
-        region: string
+    bucket: string
-        accessKeyId: string
+    path: string
-        accessKeySecret: string
+  }>('POST', '/api/ossKey')
-        securityToken: string
-        bucket: string
-        path: string
-      }>
-  )
   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
 }