添加头像上传功能，优化滚动条样式，调整Gallery页面下载按钮样式，新增自动登录API

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']
   }

extra.d.ts

@@ -3,3 +3,4 @@ declare module "vue3-video-play";
 declare module "vue3-masonry-plus";
 declare module "vite";
 declare module "vue-devui/tag";
+declare module "vue-infinite-scroll";

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",
+  });
+}

src/assets/base.less

@@ -7,12 +7,6 @@
   font-weight: normal;
 }
 
-.ps__thumb-y {
+.n-scrollbar-rail__scrollbar {
-  background-color: #f6cbe7 !important;
+  background-color: #f6cbe770 !important;
-}
-.devui-image-preview {
-  background-color: #00000090 !important;
-  img {
-    border-radius: 8px;
-  }
 }

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';
@@ -96,27 +115,27 @@ const menuOptions = ref([
     icon: () => h(homeSvg)
   },
   {
-    label: () => h(RouterLink, { to: '/gallery', class: 'flex items-center justify-center' }, { default: () => '画廊管理' }),
+    label: () => h(RouterLink, { to: '/gallery', class: 'flex items-center justify-center' }, { default: () => '画廊' }),
     key: "gallery",
     icon: () => h(picSvg)
   },
   {
-    label: () => h(RouterLink, { to: '/blog', class: 'flex items-center justify-center' }, { default: () => '文章管理' }),
+    label: () => h(RouterLink, { to: '/blog', class: 'flex items-center justify-center' }, { default: () => '文章' }),
     key: "blog",
     icon: () => h(artiSvg)
   },
   {
-    label: () => h(RouterLink, { to: '/widget', class: 'flex items-center justify-center' }, { default: () => '工具管理' }),
+    label: () => h(RouterLink, { to: '/widget', class: 'flex items-center justify-center' }, { default: () => '工具' }),
     key: "widget",
     icon: () => h(downSvg)
   },
   {
-    label: () => h(RouterLink, { to: '/apps', class: 'flex items-center justify-center' }, { default: () => '软件管理' }),
+    label: () => h(RouterLink, { to: '/apps', class: 'flex items-center justify-center' }, { default: () => '软件' }),
     key: "apps",
     icon: () => h(settingSvg)
   },
   {
-    label: () => h(RouterLink, { to: '/plink', class: 'flex items-center justify-center' }, { default: () => '友链管理' }),
+    label: () => h(RouterLink, { to: '/plink', class: 'flex items-center justify-center' }, { default: () => '友链' }),
     key: "plink",
     icon: () => h(linkSvg)
   },
@@ -131,11 +150,58 @@ const oprOp = ref([
     label: '控制台',
   },
   {
-    key: 'setting',
+    key: 'avatar',
-    label: '设置',
+    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
 }
@@ -147,7 +213,11 @@ function handleSelect(key: string) {
     return
   }
   if (key == 'console') {
-    router.push('/console')
+    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>

src/lib/components/LazyImg.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="image-container">
+  <div class="image-container flex justify-center items-center">
     <n-image ref="lazyRef" class="lazy__img" :src="url"  @load="handleLoad" @error="handleError">
       <template #placeholder>
-        <img :src="loading" alt="loading" />
+        <img width="400" :src="loading" alt="loading" />
       </template>
       <template #error>
         <img :src="errorImg" alt="error" />
@@ -62,7 +62,7 @@ onMounted(() => {
 
 .lazy__img img[alt="loading"],
 .lazy__img img[alt="error"] {
-  width: 48px;
+  width: 80px;
   height: 80px;
   padding: 1em;
   margin: 0 auto;

src/views/Apps.vue

@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 definePage({
-  name:'appshare',
+  name:'apps',
   meta: {
     title: '软件分享',
   }

src/views/Gallery.vue

@@ -1,7 +1,6 @@
 <template>
-  <!-- <PerfectScrollbar ref="scrollbar" @ps-scroll-y="handleScroll"> -->
+  <n-scrollbar ref="virtualListInst" class="py-5" :style="boxStyle" @scroll="handleScroll">
-  <div ref="myCon" class="py-5 px-[10%]">
+    <n-input class="my-4 !w-[72%] ml-[14%]" round size="large" v-model:value="kw" @keyup.enter="onSearch"
-    <n-input class="my-4 !w-[90%] ml-[5%]" round size="large" v-model:value="kw" @keyup.enter="onSearch"
       placeholder="请输入关键字">
       <template #suffix>
         <n-icon size="large">
@@ -10,12 +9,12 @@
       </template>
     </n-input>
 
-    <!-- <div v-infinite-scroll="loadMore"> -->
+    <Waterfall class="ml-[10%] !w-[80%]" ref="waterfall" :list="fileList" :gutter="gutter" :columns="column"
-    <Waterfall ref="waterfall" :list="fileList" :gutter="gutter" :columns="column" img-selector="url"
+      img-selector="url" animation-effect="fadeIn" :animation-duration="1000" :animation-delay="300"
-      animation-effect="fadeIn" :animation-duration="1000" :animation-delay="300" backgroundColor="transparent"> >
+      backgroundColor="transparent"> >
       <template #item="{ item }">
         <div
-          class="card rounded-md overflow-hidden group transition-transform duration-300 box-border hover:-translate-y-1.5">
+          class="card rounded-md shadow-lg overflow-hidden group transition-transform duration-300 box-border hover:-translate-y-1.5">
           <!-- <div class="image-wrapper"> -->
           <LazyImg class="rounded-md shadow overflow-hidden" :url="item.filepath" />
           <!-- </div> -->
@@ -24,17 +23,17 @@
             {{ item.filename }}
           </div>
           <div
-            class="absolute rounded-md flex z-10 truncate bottom-2  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>
     </Waterfall>
-  </div>
+  </n-scrollbar>
-  <!-- </div> -->
-  <!-- </PerfectScrollbar> -->
-
 </template>
 
 <script setup lang="ts">
@@ -46,23 +45,24 @@ definePage({
     title: '画廊',
   }
 })
-declare module "vue" {
-  interface HTMLAttributes {
-    "v-infinite-scroll"?: () => void;
-  }
-}
 const waterfall = ref<any>(null);
-
+const nav: any = $store.nav.useNavStore()
+const boxStyle: any = ref({})
 // 画廊页逻辑
 const fileList = ref<any[]>([]);
 const pn = ref(1);
-const ps = ref(40);
+const ps = ref(20);
 const loading = ref(false);
 const kw = ref<string>('');
 const cwidth = ref<number>(240);
 const column = ref<number>(5);
 const gutter = ref<number>(18);
 
+const isLoadAll = ref<boolean>(false)
+
+
+
+
 // 计算列数
 function calculateColumns() {
   const totalWidth = window.innerWidth * 0.8; // 画廊宽度为视口宽度的80%
@@ -82,7 +82,9 @@ async function getFileList() {
       page_size: ps.value,
     });
     // console.log('>>> --> getFileList --> res:', res);
-
+    if (res.data.length < ps.value) {
+      isLoadAll.value = true;
+    }
     if (pn.value === 1) {
       fileList.value = res.data;
     } else {
@@ -104,6 +106,7 @@ async function getFileList() {
 const handleScroll: any = throttle((e: any) => {
   // console.log('>>> --> handleScroll --> loading:', e)
   if (loading.value) return;
+  if (isLoadAll.value) return;
   const scrollTop = e.target.scrollTop
   // console.log('>>> --> handleScroll --> scrollTop:', scrollTop)
   const scrollHeight = e.target.scrollHeight
@@ -112,7 +115,7 @@ const handleScroll: any = throttle((e: any) => {
 
   // 当滚动到距离底部20%时加载更多
   // console.log('>>> --> clientHeight --> clientHeight:', clientHeight)
-  if (scrollTop + clientHeight >= scrollHeight * 0.8) {
+  if (scrollTop + clientHeight >= scrollHeight - 100) {
     console.log('>>> --> handleScroll --> 加载更多')
     pn.value++;
     getFileList();
@@ -120,6 +123,8 @@ const handleScroll: any = throttle((e: any) => {
 }, 1000)
 function onSearch() {
   pn.value = 1;
+  kw.value = kw.value.trim()
+  isLoadAll.value = false
   getFileList();
 }
 
@@ -146,6 +151,10 @@ function downloadFile(url: string) {
 onMounted(() => {
   calculateColumns()
   getFileList();
+  console.log('>>> --> nav.NavH:', nav.navH)
+  boxStyle.value = {
+    maxHeight: `calc(100vh - 5px - ${nav.navH}px)`,
+  }
   // 添加滚动监听
   window.addEventListener('resize', calculateColumns);
   window.addEventListener('scroll', handleScroll);
@@ -155,6 +164,7 @@ onUnmounted(() => {
   pn.value = 1;
   kw.value = '';
   fileList.value = [];
+  isLoadAll.value = false
   // 移除监听
   window.removeEventListener('scroll', handleScroll);
 });
@@ -162,10 +172,6 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 :deep(.n-image img) {
-  --un-shadow: var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),
+  border-radius: 0.375rem !important;
-    var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));
-  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
-    var(--un-shadow);
-    border-radius: 0.375rem !important;
 }
 </style>

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>

typed-router.d.ts

@@ -18,7 +18,7 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
-    'appshare': RouteRecordInfo<'appshare', '/AppShare', Record<never, never>, Record<never, never>>,
+    'apps': RouteRecordInfo<'apps', '/Apps', Record<never, never>, Record<never, never>>,
     'blog': RouteRecordInfo<'blog', '/Blog', Record<never, never>, Record<never, never>>,
     'gallery': RouteRecordInfo<'gallery', '/Gallery', Record<never, never>, Record<never, never>>,
     'home': RouteRecordInfo<'home', '/Home', Record<never, never>, Record<never, never>>,
@@ -38,8 +38,8 @@ declare module 'vue-router/auto-routes' {
    * @internal
    */
   export interface _RouteFileInfoMap {
-    'src/views/AppShare.vue': {
+    'src/views/Apps.vue': {
-      routes: 'appshare'
+      routes: 'apps'
       views: never
     }
     'src/views/Blog.vue': {

vite.config.ts

@@ -8,7 +8,7 @@ import Components from "unplugin-vue-components/vite";
 import { VueRouterAutoImports } from "unplugin-vue-router";
 import VueRouter from "unplugin-vue-router/vite";
 import { defineConfig } from "vite";
-import vueDevTools from "vite-plugin-vue-devtools";
+// import vueDevTools from "vite-plugin-vue-devtools";
 import svgLoader from "vite-svg-loader";
 // https://vite.dev/config/
 export default defineConfig({
@@ -36,7 +36,7 @@ export default defineConfig({
     }),
     UnoCSS(),
     svgLoader(),
-    vueDevTools(),
+    // vueDevTools(),
   ],
   esbuild: {
     pure: ["console.log"], // 删除 console.log