From 42dcf4195a69c374c0fe79db0cb42ee433eab19b Mon Sep 17 00:00:00 2001
From: youzi <2410633923@qq.com>
Date: Mon, 29 Dec 2025 15:53:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=A4=B4=E5=83=8F=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E6=A0=B7=E5=BC=8F=EF=BC=8C=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?Gallery=E9=A1=B5=E9=9D=A2=E4=B8=8B=E8=BD=BD=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=96=B0=E5=A2=9E=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts          |  1 +
 src/api/user/index.ts    |  7 ++++
 src/assets/base.less     | 10 +----
 src/components/menuH.vue | 82 ++++++++++++++++++++++++++++++++++++----
 src/views/Gallery.vue    | 12 ++++--
 src/views/Home.vue       |  2 +-
 6 files changed, 94 insertions(+), 20 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 30cabf2..60a53d5 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -40,6 +40,7 @@ declare module 'vue' {
     NSelect: typeof import('naive-ui')['NSelect']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
+    NUpload: typeof import('naive-ui')['NUpload']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/api/user/index.ts b/src/api/user/index.ts
index 0a97d11..317c1a0 100644
--- a/src/api/user/index.ts
+++ b/src/api/user/index.ts
@@ -16,3 +16,10 @@ export function register(data: Record<string, string>) {
     data,
   });
 }
+// autologin
+export function autologin() {
+  return request({
+    url: "/user/autologin",
+    method: "post",
+  });
+}
diff --git a/src/assets/base.less b/src/assets/base.less
index da4f1bf..6014f90 100644
--- a/src/assets/base.less
+++ b/src/assets/base.less
@@ -7,12 +7,6 @@
   font-weight: normal;
 }
 
-.ps__thumb-y {
-  background-color: #f6cbe7 !important;
-}
-.devui-image-preview {
-  background-color: #00000090 !important;
-  img {
-    border-radius: 8px;
-  }
+.n-scrollbar-rail__scrollbar {
+  background-color: #f6cbe770 !important;
 }
\ No newline at end of file
diff --git a/src/components/menuH.vue b/src/components/menuH.vue
index 23c15c0..40f3056 100644
--- a/src/components/menuH.vue
+++ b/src/components/menuH.vue
@@ -32,7 +32,7 @@
       </n-dropdown>
       <div v-else class="flex items-center" @click="toLogin">
         <n-avatar round class="cursor-pointer"></n-avatar>
-        <div class="cursor-pointer ml-2 text-gray text-sm" >登录</div>
+        <div class="cursor-pointer ml-2 text-gray text-sm">登录</div>
       </div>
     </div>
     <!-- 登录弹窗 -->
@@ -56,6 +56,25 @@
       </div>
     </div>
   </div>
+
+  <!-- 修改头像弹窗 -->
+  <masked v-if="usrLog.isLogin" :visible="editModal" :setVisible="handdleItemCancel">
+    <div class="w-[500px] bg-white p-8 rounded-md">
+      <div class="text-center text-lg mb-8">修改头像</div>
+      <n-upload class="flex justify-center items-center" action="https://www.hxyouzi.com/api/user/avaupload"
+        :headers="{ Authorization: `Bearer ${token}` }" @finish="handleUpload" @before-upload="beforeUpload"
+        :show-file-list="false" accept="image/*">
+        <div class="flex flex-col justify-center items-center">
+          <n-avatar :size="80" :src="userinfo.ava_url" round class="cursor-pointer" alt="用户的头" />
+          <em class="cursor-pointer mt-4 text-gray text-sm">点击头像上传不超过3m的图片</em>
+        </div>
+      </n-upload>
+
+      <div class="mt-8 flex justify-between">
+        <n-button class="w-[98%]" secondary @click="handdleItemCancel">取消</n-button>
+      </div>
+    </div>
+  </masked>
 </template>
 
 <script setup lang="ts">
@@ -69,7 +88,7 @@ import picSvg from '@/icon/menu/pic.svg';
 import settingSvg from '@/icon/menu/setting.svg';
 import loginModal from '@/components/Login.vue'
 import masked from '@/components/mask.vue'
-
+import type { UploadFileInfo } from 'naive-ui'
 
 import { onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter, RouterLink } from 'vue-router';
@@ -131,11 +150,58 @@ const oprOp = ref([
     label: '控制台',
   },
   {
-    key: 'setting',
-    label: '设置',
+    key: 'avatar',
+    label: '更换头像',
   }
 ])
 
+const editModal = ref<boolean>(false)
+const token = ref<string>("")
+
+
+function beforeUpload(data: { file: UploadFileInfo }) {
+  console.log('>>> --> beforeUpload --> data:', data.file.file?.size)
+  const size = data.file.file?.size || 4 * 1024 * 1024
+  if (size > 3 * 1024 * 1024) {
+    $msg.error('上传的图片大小不能超过3M')
+    return false
+  }
+  return true
+}
+
+function handleUpload(f: any) {
+  console.log('上传完成', JSON.parse(f.event.target.response));
+  const res = JSON.parse(f.event.target.response)
+  if (res.code === 200) {
+    // $msg.success(res.msg);
+    autoLogin()
+  } else {
+    $msg.error(res.msg);
+  }
+  editModal.value = false
+}
+
+async function autoLogin() {
+  const res = await $http.user.autologin()
+  if (res?.code !== 200) {
+    $msg.error('登录失败')
+    usrLog.setIsLogin(false)
+    $cookies.remove('token')
+    $cookies.remove('userinfo')
+    return
+  }
+  $cookies.set('token', res.data.token, '1d')
+  $cookies.set('userinfo', res.data.userinfo, '1d')
+  $msg.success(res.msg)
+  usrLog.setIsLogin(true)
+  userinfo.value = res.data.userinfo
+}
+
+function handdleItemCancel() {
+  editModal.value = false
+}
+
+
 function setVisible(v: any) {
   visible.value = v
 }
@@ -150,6 +216,10 @@ function handleSelect(key: string) {
     gotoConsole()
     return
   }
+  if (key == 'avatar') {
+    editModal.value = true
+    return
+  }
 }
 
 // 获取地理位置
@@ -271,7 +341,7 @@ onMounted(() => {
 
   const h: number = nav.value.clientHeight
   if (h > 0) navx.setNavH(h)
-
+  token.value = $cookies.get('token')
 
 
 });
@@ -296,6 +366,4 @@ onBeforeUpdate(() => {
   width: 16px !important;
   height: 16px !important;
 }
-
-
 </style>
\ No newline at end of file
diff --git a/src/views/Gallery.vue b/src/views/Gallery.vue
index e1a335b..7128a14 100644
--- a/src/views/Gallery.vue
+++ b/src/views/Gallery.vue
@@ -9,8 +9,9 @@
       </template>
     </n-input>
 
-    <Waterfall class="ml-[10%] !w-[80%]" ref="waterfall" :list="fileList" :gutter="gutter" :columns="column" img-selector="url"
-      animation-effect="fadeIn" :animation-duration="1000" :animation-delay="300" backgroundColor="transparent"> >
+    <Waterfall class="ml-[10%] !w-[80%]" ref="waterfall" :list="fileList" :gutter="gutter" :columns="column"
+      img-selector="url" animation-effect="fadeIn" :animation-duration="1000" :animation-delay="300"
+      backgroundColor="transparent"> >
       <template #item="{ item }">
         <div
           class="card rounded-md shadow-lg overflow-hidden group transition-transform duration-300 box-border hover:-translate-y-1.5">
@@ -22,9 +23,12 @@
             {{ item.filename }}
           </div>
           <div
-            class="absolute rounded-md flex z-10 truncate bottom-0  w-full bg-[#00000070] text-white justify-between items-center">
+            class="absolute rounded-md flex px-2 z-10 truncate bottom-0  w-full bg-[#00000070] text-white justify-between items-center">
             <div>由 <span class="text-[#f1d9db] font-600">{{ item.nickname }}</span> 分享</div>
-            <icon-download class="cursor-pointer w-4 h-4" @click="downloadFile(item.filepath)" />
+            <div class="text-sm cursor-pointer text-primary" @click="downloadFile(item.filepath)">
+              <icon-download class="w-4 h-4" />
+              下载
+            </div>
           </div>
         </div>
       </template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e2d1772..a3181cb 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -24,7 +24,7 @@
         </div>
         <!-- 标签组 -->
         <!-- <PerfectScrollbar class="w-full overflow-x-auto"> -->
-        <n-scrollbar class="w-full overflow-x-auto" :style="navStyle">
+        <n-scrollbar class="w-full overflow-x-auto" :style="navStyle" trigger="none">
           <div v-if="navlist.length" class="flex gap-6 px-2 mt-6 mb-3 flex-wrap lg:px-12">
             <d-tag class="cursor-pointer truncate" hideBeyondTags v-for="tag in tagList" :checked="tag.checked"
               :color="tag.color" @click="handdleTagClick(tag)">{{ tag.name }}</d-tag>