添加头像上传功能，优化滚动条样式，调整Gallery页面下载按钮样式，新增自动登录API
This commit is contained in:
1
components.d.ts
vendored
1
components.d.ts
vendored
@ -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']
|
||||
}
|
||||
|
||||
@ -16,3 +16,10 @@ export function register(data: Record<string, string>) {
|
||||
data,
|
||||
});
|
||||
}
|
||||
// autologin
|
||||
export function autologin() {
|
||||
return request({
|
||||
url: "/user/autologin",
|
||||
method: "post",
|
||||
});
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user