change

2024-09-13 10:15:43 +08:00 · 2024-09-13 10:15:43 +08:00 · fc7b1bdad5
parent 744c02798a
commit fc7b1bdad5
8 changed files with 147 additions and 52 deletions
--- 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
--- 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(() => {
              }}
            />
            <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">
--- 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'
                }}
              >
-                <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" />
--- a/src/user/AvatarCircle.tsx
+++ 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 (
+      <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>
+    )
+  }
+})
--- a/src/user/LoginModal.tsx
+++ b/src/user/LoginModal.tsx
@ -34,8 +34,10 @@ export default defineComponent(() => {
              </div>
              <div class="flex flex-col">
                测试用
+                <form>
                  <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 = ''
                    })
                  }}
                >
--- a/src/user/UserPage.tsx
+++ b/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">
-      this is user
+    <div class="absolute left-0 top-0 w-full h-full p-4 flex flex-col">
+      <div class="flex justify-center py-4">
+        <div class="w-16 h-16 relative">
+          <AvatarCircle />
+        </div>
+      </div>
+      {user.isLogin && (
+        <div class="h-0 flex-grow py-4 px-12">
+          <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>
  )
 })
--- 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 | 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
  }
 })
--- 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'
+  const token = localStorage.getItem('token')
+  if (!token) {
+    throw new Error('尚未登录，无法上传')
  }
-  }).then(
-    (res) =>
-      res.json() as Promise<{
+  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
 }