SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ refactor some code

Browse Source
This commit is contained in:
landaiqing
2025-02-05 18:57:58 +08:00
parent a2e80b9a91
commit b4ef5a4b51
21 changed files with 501 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/api/storage/index.ts
View File

@@ -8,3 +8,55 @@ export const uploadFile = (formData) => {
}
});
};
/**
* 获取用户人脸样本列表
* @param type
*/
export const getFaceSamplesList = (type: number) => {
return service.Post('/api/auth/storage/face/sample/list', {
type: type,
}, {
cacheFor: {
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {
ignoreToken: false,
signature: false,
}
});
};
/**
* 修改人脸样本名称
* @param id
* @param face_name
*/
export const modifyFaceSampleName = (id: number, face_name: string) => {
return service.Post('/api/auth/storage/face/sample/modify/name', {
id: id,
face_name: face_name,
}, {
meta: {
ignoreToken: false,
signature: false,
}
});
};
/**
* 批量修改人脸样本类型
* @param ids
* @param face_type
*/
export const modifyFaceTypeBatch = (ids: number[], face_type: number) => {
return service.Post('/api/auth/storage/face/sample/modify/type', {
ids: ids,
face_type: face_type,
}, {
meta: {
ignoreToken: false,
signature: false,
}
});
};

45
src/components/CommentReply/src/CommentInput/CommentInput.vue
View File

@@ -40,35 +40,32 @@
<AUpload
:accept="'image/jpg, image/png, image/jpeg'"
name="images"
:max-count="3"
:max-count="1"
:multiple="true"
method="post"
:directory="false"
:show-upload-list="false"
:custom-request="comment.customUploadRequest"
:before-upload="comment.beforeUpload"
:disabled="comment.imageList.length >= 3 || comment.uploadLoading"
:disabled="comment.uploadLoading"
>
<ABadge :count="comment.imageList.length">
<AButton type="text" size="small" :icon="h(PictureOutlined)"
class="comment-action-icon" :loading="comment.uploadLoading">
{{ t('comment.picture') }}
</AButton>
</ABadge>
<AButton type="text" size="small" :icon="h(PictureOutlined)"
class="comment-action-icon" :loading="comment.uploadLoading">
{{ t('comment.picture') }}
</AButton>
</AUpload>
<template v-if="comment.imageList.length > 0">
<AImagePreviewGroup>
<ABadge style="margin-left: 10px;" v-for="(item, index) in comment.imageList" :key="index">
<template #count>
<CloseCircleOutlined @click="comment.removeBase64Image(index)" style="color: #f5222d"/>
<template v-if="comment.imageList">
<ABadge style="margin-left: 10px;">
<template #count>
<CloseCircleOutlined @click="comment.removeBase64Image()" style="color: #f5222d"/>
</template>
<AAvatar shape="square" size="small">
<template #icon>
<AImage :width="24" :height="24" :src="comment.imageList"/>
</template>
<AAvatar shape="square" size="small">
<template #icon>
<AImage v-if="item" :width="24" :height="24" :src="item"/>
</template>
</AAvatar>
</ABadge>
</AImagePreviewGroup>
</AAvatar>
</ABadge>
</template>
</AFlex>
</AFlex>
@@ -153,10 +150,6 @@ async function commentSubmit(point: any) {
message.error(t('comment.commentContentNotEmpty'));
return;
}
if (comment.imageList.length > 3) {
message.error(t('comment.maxImageCount'));
return;
}
const content = commentContent.value.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
const regex = /\[((1[0-6][0-6]|[1-9]?[0-9])\.gif)]/g; // 匹配 [1.gif] 的字符串
const contentWithEmoji = content.replace(regex, (_match, p1) => {
@@ -216,10 +209,6 @@ async function showSlideCaptcha() {
if (commentContent.value.trim() === "") {
return;
}
if (comment.imageList.length > 3) {
message.warning(t('comment.maxImageCount'));
return;
}
const res = await comment.getSlideCaptchaData();
if (res) {
showSubmitCaptcha.value = true;

3
src/components/CommentReply/src/CommentList/CommentList.vue
View File

@@ -68,8 +68,7 @@
<AFlex :vertical="false" align="center" class="reply-images" v-if="item.images">
<AImagePreviewGroup>
<ASpace direction="horizontal">
<AImage :width="80" :height="80" v-for="(image, index) in item.images" :key="index"
:src="image">
<AImage :width="80" :height="80" :src="item.images">
<template #previewMask>
<EyeOutlined style="font-size: 20px;"/>
</template>

20
src/components/CommentReply/src/ReplyInput/ReplyInput.vue
View File

@@ -56,24 +56,24 @@
:show-upload-list="false"
:custom-request="comment.customUploadRequest"
:before-upload="comment.beforeUpload"
:disabled="comment.imageList.length >= 3 || comment.uploadLoading"
:disabled="comment.uploadLoading"
>
<ABadge :count="comment.imageList.length">
<ABadge>
<AButton type="text" size="small" :icon="h(PictureOutlined)"
class="comment-action-icon-reply" :loading="comment.uploadLoading">
{{ t('comment.picture') }}
</AButton>
</ABadge>
</AUpload>
<template v-if="comment.imageList.length > 0">
<template v-if="comment.imageList">
<AImagePreviewGroup>
<ABadge style="margin-left: 10px;" v-for="(item, index) in comment.imageList" :key="index">
<ABadge style="margin-left: 10px;">
<template #count>
<CloseCircleOutlined @click="comment.removeBase64Image(index)" style="color: #f5222d"/>
<CloseCircleOutlined @click="comment.removeBase64Image()" style="color: #f5222d"/>
</template>
<AAvatar shape="square" size="small">
<template #icon>
<AImage v-if="item" :width="24" :height="24" :src="item"/>
<AImage :width="24" :height="24" :src="comment.imageList"/>
</template>
</AAvatar>
</ABadge>
@@ -157,10 +157,6 @@ async function replySubmit(point: any) {
if (replyContent.value.trim() === "") {
return;
}
if (comment.imageList.length > 3) {
message.warning(t('comment.maxImageCount'));
return;
}
const content = replyContent.value.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
const regex = /\[((1[0-6][0-6]|[1-9]?[0-9])\.gif)\]/g; // 匹配 [1.gif] 的字符串
const contentWithEmoji = content.replace(regex, (_match, p1) => {
@@ -234,10 +230,6 @@ async function showSlideCaptcha() {
message.warning(t('comment.commentContentNotEmpty'));
return;
}
if (comment.imageList.length > 3) {
message.warning(t('comment.maxImageCount'));
return;
}
const res = await comment.getSlideCaptchaData();
if (res) {
showSubmitCaptcha.value = true;

3
src/components/CommentReply/src/ReplyList/ReplyList.vue
View File

@@ -51,8 +51,7 @@
<AImagePreviewGroup>
<AImagePreviewGroup>
<ASpace direction="horizontal">
<AImage :width="80" :height="80" v-for="(image, index) in child.images" :key="index"
:src="image">
<AImage :width="80" :height="80" :src="child.images">
<template #previewMask>
<EyeOutlined style="font-size: 20px;"/>
</template>

21
src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue
View File

@@ -59,26 +59,25 @@
:show-upload-list="false"
:custom-request="comment.customUploadRequest"
:before-upload="comment.beforeUpload"
:disabled="comment.imageList.length >= 3 || comment.uploadLoading"
:disabled="comment.uploadLoading"
>
<ABadge :count="comment.imageList.length">
<ABadge>
<AButton type="text" size="small" :icon="h(PictureOutlined)"
class="comment-action-icon-reply-child" :loading="comment.uploadLoading">
{{ t('comment.picture') }}
</AButton>
</ABadge>
</AUpload>
<template v-if="comment.imageList.length > 0">
<template v-if="comment.imageList">
<AImagePreviewGroup>
<ABadge style="margin-left: 10px;" v-for="(item, index) in comment.imageList"
:key="index">
<ABadge style="margin-left: 10px;">
<template #count>
<CloseCircleOutlined @click="comment.removeBase64Image(index)"
<CloseCircleOutlined @click="comment.removeBase64Image()"
style="color: #f5222d"/>
</template>
<AAvatar shape="square" size="small">
<template #icon>
<AImage v-if="item" :width="24" :height="24" :src="item"/>
<AImage :width="24" :height="24" :src="comment.imageList"/>
</template>
</AAvatar>
</ABadge>
@@ -168,10 +167,6 @@ async function replyReplySubmit(point: any) {
if (replyReplyContent.value.trim() === "") {
return;
}
if (comment.imageList.length > 3) {
message.warning(t('comment.maxImageCount'));
return;
}
const content = replyReplyContent.value.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
const regex = /\[((1[0-6][0-6]|[1-9]?[0-9])\.gif)]/g; // 匹配 [1.gif] 的字符串
const contentWithEmoji = content.replace(regex, (_match, p1) => {
@@ -240,10 +235,6 @@ async function showSlideCaptcha() {
message.warning(t('comment.commentContentNotEmpty'));
return;
}
if (comment.imageList.length > 3) {
message.warning(t('comment.maxImageCount'));
return;
}
const res = await comment.getSlideCaptchaData();
if (res) {
showSubmitCaptcha.value = true;

2
src/components/MyUI/CheckCard/CheckCard.vue
View File

@@ -5,7 +5,7 @@
@click="handleClick"
:style="cardStyle">
<div class="hover-circle" @click.stop="toggleSelection"
v-if="showHoverCircle"
v-if="showHoverCircle && !isSelected"
:style="{ width: iconSize + 'px', height: iconSize + 'px' }">
<img :src="greyComplete" alt="Hover" class="hover-icon"
:style="{ width: iconSize + 'px', height: iconSize + 'px' }"/>

2
src/directives/index.ts
View File

@@ -2,6 +2,7 @@
import clickOutside from '@/directives/v-click-outside.ts';
import lazyLoad from "@/directives/v-lazy-load.ts";
import focus from "@/directives/v-focus.ts";
/**
* Register all directives
@@ -10,4 +11,5 @@ import lazyLoad from "@/directives/v-lazy-load.ts";
export const registerDirectives = (app: any) => {
app.directive('click-outside', clickOutside);
app.directive('lazy.ts-load', lazyLoad);
app.directive('v-focus', focus);
};

6
src/directives/v-focus.ts Normal file
View File

@@ -0,0 +1,6 @@
export default {
mounted(el) {
// 当元素被挂载到 DOM 时，自动聚焦
el.focus();
},
};

47
src/store/modules/commentStore.ts
View File

@@ -29,8 +29,7 @@ export const useCommentStore = defineStore(
thumbX: 0,
thumbY: 0
});
const fileList = ref<any[]>([]);
const imageList = ref<any[]>([]);
const imageList = ref<string>("");
const uploadLoading = ref<boolean>(false);
const emojiList = ref<any[]>(QQ_EMOJI);
const commentId = ref<number | null>(null);
@@ -199,8 +198,7 @@ export const useCommentStore = defineStore(
* 清空文件列表
*/
async function clearFileList() {
fileList.value = [];
imageList.value = [];
imageList.value = "";
}
@@ -221,25 +219,21 @@ export const useCommentStore = defineStore(
const reader = new FileReader();
reader.readAsDataURL(file); // 文件转换
reader.onloadend = async function () {
if (fileList.value.length < 3) {
const img: HTMLImageElement = document.createElement('img');
img.src = reader.result as string;
img.onload = async () => {
// 图片 NSFW 检测
const nsfw: NSFWJS = await initNSFWJs();
const isNSFW: boolean = await predictNSFW(nsfw, img);
if (isNSFW) {
message.error(i18n.global.t('comment.illegalImage'));
fileList.value.pop();
uploadLoading.value = false;
return false;
}
fileList.value.push(img.src);
const img: HTMLImageElement = document.createElement('img');
img.src = reader.result as string;
img.onload = async () => {
// 图片 NSFW 检测
const nsfw: NSFWJS = await initNSFWJs();
const isNSFW: boolean = await predictNSFW(nsfw, img);
if (isNSFW) {
message.error(i18n.global.t('comment.illegalImage'));
imageList.value = "";
uploadLoading.value = false;
};
} else {
return false;
}
return false;
}
imageList.value = img.src;
uploadLoading.value = false;
};
};
return true;
@@ -249,16 +243,14 @@ export const useCommentStore = defineStore(
* 自定义上传图片请求
*/
async function customUploadRequest() {
imageList.value = fileList.value;
}
/**
* 移除图片
* @param index
*/
async function removeBase64Image(index: number) {
fileList.value.splice(index, 1);
imageList.value.splice(index, 1);
async function removeBase64Image() {
imageList.value = "";
}
/**
@@ -316,7 +308,6 @@ export const useCommentStore = defineStore(
replyLoading,
slideCaptchaData,
commentMap,
fileList,
imageList,
uploadLoading,
emojiList,

4
src/types/comment.d.ts vendored
View File

@@ -23,14 +23,14 @@ interface CommentContent {
avatar: string;
nickname: string;
level?: number;
images: string[];
images: string;
is_liked: boolean;
}
export interface ReplyCommentParams {
topic_id: string,
content: string,
images: string[],
images: string,
author: string,
reply_id: number,
reply_user: string,

406
src/views/Album/PeopleAlbum/PeopleAlbumList.vue
View File

@@ -1,71 +1,217 @@
<template>
<div class="people-album">
<div class="people-album-header">
<ADropdown>
<ADropdown trigger="click">
<AButton type="text" size="large" class="people-album-button">
人物
{{ selecetedKey === '0' ? '人 物' : '已隐藏' }}
<DownOutlined class="people-album-icon"/>
</AButton>
<template #overlay>
<AMenu>
<AMenuItem>人 物</AMenuItem>
<AMenuItem>已隐藏</AMenuItem>
<AMenu selectable :selectedKeys="[selecetedKey]" @select="handleSelect">
<AMenuItem key="0">人 物</AMenuItem>
<AMenuItem key="1">已隐藏</AMenuItem>
</AMenu>
</template>
</ADropdown>
<span class="people-album-count">共<span style="color: #0e87cc">{{ faceList.length }}</span>位</span>
</div>
<div class="people-album-content">
<div class="people-album-item" @mouseover="showButton = true" @mouseleave="showButton = false">
<div class="people-album-item-avatar">
<AAvatar :size="86" shape="circle" src="/test/4.png"/>
</div>
<div class="people-album-item-name">
<AButton @click="showAddNameInput" class="people-album-add-name" v-show="showButton && !showInput" type="link"
size="small">
添加名字
</AButton>
<AInput v-show="showInput" @blur="hideAddNameInput" size="small" class="people-album-add-input">
<template #suffix>
<AButton type="link" size="small">完成</AButton>
<transition name="fade">
<div class="people-album-toolbar" v-show="selected.length !== 0">
<div class="people-album-toolbar-left">
<AButton type="text" shape="circle" size="large" class="people-album-toolbar-btn" @click="cancelSelectPeople">
<template #icon>
<CloseOutlined class="people-album-toolbar-icon"/>
</template>
</AInput>
</AButton>
<span style="font-size: 16px;font-weight: bold">
已选择 {{ selected.length }} 个人物
</span>
<AButton type="text" shape="default" class="people-album-toolbar-btn" size="middle" @click="selectAllPeople">
全选
</AButton>
</div>
</div>
<div class="people-album-toolbar-right">
<div class="people-album-item" @mouseover="showButton = true" @mouseleave="showButton = false">
<div class="people-album-item-avatar">
<AAvatar :size="86" shape="circle" src="/test/4.png"/>
</div>
<div class="people-album-item-name">
<AButton @click="showAddNameInput" class="people-album-add-name" v-show="showButton && !showInput" type="link"
size="small">
添加名字
</AButton>
<AInput v-show="showInput" @blur="hideAddNameInput" size="small" class="people-album-add-input">
<template #suffix>
<AButton type="link" size="small">完成</AButton>
<AButton type="text" shape="default" size="middle" class="people-album-toolbar-btn"
:disabled="selected.length !== 2" v-if="selecetedKey === '0'">
<template #icon>
<BlockOutlined class="people-album-toolbar-icon"/>
</template>
</AInput>
合并人物
</AButton>
<AButton type="text" shape="default" size="middle" class="people-album-toolbar-btn" @click="hiddenFace">
<template #icon>
<EyeInvisibleOutlined class="people-album-toolbar-icon"/>
</template>
{{ selecetedKey === '0' ? '隐藏人物' : '取消隐藏' }}
</AButton>
</div>
</div>
</transition>
<div class="people-album-container">
<ASpin :spinning="loading" size="large" wrapperClassName="people-album-container">
<div class="people-album-content">
<CheckCard
v-for="(item, index) in faceList"
:key="index"
class="photo-item"
margin="0"
border-radius="0"
v-model="selected"
:showHoverCircle="true"
:background-color="'transparent'"
:iconSize="20"
:showSelectedEffect="false"
:value="item.id">
<div class="people-album-item"
:class="{ 'selected-item': selected.includes(item.id) }"
@mouseover="item.showButton = true"
@mouseleave="item.showButton = false">
<div class="people-album-item-avatar">
<AAvatar :size="86" shape="circle" :src="item.face_image"/>
</div>
<div class="people-album-item-name" v-show="!item.face_name">
<AButton @click="showAddNameInput(index)" class="people-album-add-name"
v-show="item.showButton && !item.showInput"
type="link"
size="small">
添加名字
</AButton>
<AInput ref="addNameInput" v-model:value="addNameInputValue" v-show="item.showInput"
@blur="hideAddNameInput(index)" size="small"
:maxlength="10"
:placeholder="item.face_name"
class="people-album-add-input">
<template #suffix>
<AButton type="link" style="font-size: 12px;" size="small" @mousedown.prevent
@click="modifyFaceName(item.id,index)">完成
</AButton>
</template>
</AInput>
</div>
<div class="people-album-item-name" v-show="item.face_name">
<AButton @click="showAddNameInput(index)" class="people-album-add-name" v-show="!item.showInput"
type="link"
size="small">
{{ item.face_name }}
</AButton>
<AInput ref="addNameInput" v-model:value="addNameInputValue" autofocus v-show="item.showInput"
@blur="hideAddNameInput(index)" size="small"
:maxlength="10"
:placeholder="item.face_name"
class="people-album-add-input">
<template #suffix>
<AButton type="link" style="font-size: 12px;" size="small" @mousedown.prevent
@click="modifyFaceName(item.id,index)">完成
</AButton>
</template>
</AInput>
</div>
</div>
</CheckCard>
</div>
</ASpin>
</div>
</div>
</template>
<script setup lang="ts">
const showButton = ref(false);
const showInput = ref(false);
import {getFaceSamplesList, modifyFaceSampleName, modifyFaceTypeBatch} from "@/api/storage";
function showAddNameInput() {
showInput.value = true;
showButton.value = false;
const faceList = ref<any[]>([]);
const addNameInput = ref<any>(null);
const addNameInputValue = ref<string>('');
const selecetedKey = ref<string>('0');
const loading = ref<boolean>(false);
const selected = ref<any[]>([]);
/**
* 获取人脸列表
*/
async function getFaceList(type: number = 0) {
loading.value = true;
faceList.value = [];
const res: any = await getFaceSamplesList(type);
if (res && res.code === 200 && res.data.faces) {
faceList.value = res.data.faces.map(face => ({
...face,
showButton: false,
showInput: false,
}));
}
loading.value = false;
}
function hideAddNameInput() {
showInput.value = false;
showButton.value = false;
function showAddNameInput(index: number) {
if (faceList.value[index]) {
faceList.value[index].showInput = true;
faceList.value[index].showButton = false;
}
}
function hideAddNameInput(index: number) {
if (faceList.value[index]) {
faceList.value[index].showInput = false;
faceList.value[index].showButton = false;
}
}
/**
* 修改人脸名称
* @param id
* @param index
*/
async function modifyFaceName(id: number, index: number) {
if (!addNameInputValue.value.trim()) return;
const res: any = await modifyFaceSampleName(id, addNameInputValue.value);
if (res && res.code === 200) {
faceList.value[index].face_name = res.data.face_name;
addNameInputValue.value = '';
hideAddNameInput(index);
}
}
/**
* 选择分类
* @param key
*/
function handleSelect({key}) {
selecetedKey.value = key;
getFaceList(parseInt(key));
}
/**
* 全选
*/
function selectAllPeople() {
selected.value = faceList.value.map((item) => item.id);
}
/**
* 取消选择
*/
function cancelSelectPeople() {
selected.value = [];
}
/**
* 隐藏人物
*/
async function hiddenFace() {
if (selected.value.length === 0) return;
const res: any = await modifyFaceTypeBatch(selected.value, selecetedKey.value === '0' ? 1 : 0);
if (res && res.code === 200) {
await getFaceList();
selected.value = [];
}
}
onMounted(() => {
getFaceList();
});
</script>
<style scoped lang="scss">
@@ -103,68 +249,162 @@ function hideAddNameInput() {
}
}
.people-album-count {
width: 100%;
font-size: 13px;
color: rgba(129, 129, 138, 0.99);
}
}
.people-album-content {
.people-album-toolbar {
position: fixed;
width: calc(100% - 220px);
height: 70px;
top: 70px;
z-index: 3;
display: flex;
box-sizing: border-box;
justify-content: space-between;
align-items: center;
background-image: linear-gradient(45deg, #5789ff, #5c7bff 100%);
color: #fff;
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .06);
padding: 0 20px;
.people-album-toolbar-left {
width: 50%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 20px;
}
.people-album-toolbar-right {
height: 100%;
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 30px;
}
.people-album-toolbar-icon {
font-size: 20px;
font-weight: bold;
color: #fff;
}
.people-album-toolbar-btn {
font-size: 16px;
font-weight: bold;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
}
.people-album-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
padding-top: 20px;
padding-left: 20px;
gap: 20px;
align-content: flex-start;
flex-wrap: wrap;
.people-album-item {
width: 130px;
height: 160px;
.people-album-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 10px;
transition: all 0.3s ease-in-out;
position: relative;
cursor: pointer;
flex-direction: row;
justify-content: flex-start;
align-content: flex-start;
flex-wrap: wrap;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
gap: 20px;
.people-album-item-avatar {
width: 100%;
height: 75%;
display: flex;
align-items: center;
justify-content: center;
}
.people-album-item-name {
width: 100%;
height: 25%;
.people-album-item {
width: 130px;
height: 160px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
justify-content: center;
border-radius: 10px;
transition: all 0.3s ease;
position: relative;
cursor: pointer;
.people-album-add-input {
width: 80%;
.people-album-item-avatar {
width: 100%;
height: 75%;
display: flex;
align-items: center;
justify-content: center;
}
.people-album-item-name {
width: 100%;
height: 25%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
.people-album-add-input {
width: 80%;
}
}
.people-album-add-name {
color: rgba(110, 110, 113, 0.99);
font-size: 13px;
}
.people-album-add-name:hover {
color: #0e87cc;
}
}
.people-album-add-name {
color: rgba(126, 126, 135, 0.99);
font-size: 12px;
}
.people-album-add-name:hover {
color: #0e87cc;
.people-album-item:hover,
.people-album-item.selected-item {
background-color: rgba(248, 248, 248, 0.74);
opacity: 1;
transform: scale(1.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
}
.people-album-item:hover {
background-color: rgba(248, 248, 248, 0.74);
opacity: 1;
transform: scale(1.05);
}
}
}
.fade-enter-active, .fade-leave-active {
transition: all 0.5s ease;
}
.fade-enter-from, .fade-leave-to { /* .slide-fade-leave-active 在离开之前 */
transform: translateY(-20px);
opacity: 0;
}
.fade-enter-from {
transform: translateY(-30px);
opacity: 0;
}
.fade-enter-to {
transform: translateY(0);
opacity: 1;
}
</style>

4
src/views/Album/Phoalbum/PhoalbumList.vue
View File

@@ -77,7 +77,11 @@
<script setup lang="ts">
import more from "@/assets/svgs/more.svg";
const isHovered = ref<boolean>(false);
</script>
<style scoped lang="scss">
.phoalbum {