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

🚧 optimization & adjustments

Browse Source
This commit is contained in:
landaiqing
2025-03-03 01:00:18 +08:00
parent 1c3ee31c0b
commit 3f4bf14533
51 changed files with 1645 additions and 3441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/CheckCard/CheckCard.vue
View File

@@ -40,6 +40,7 @@ interface Props {
showHoverCircle?: boolean; // 控制是否显示悬停圆环
iconSize?: number; // 控制图标大小
showSelectedEffect?: boolean; // 控制是否显示选中效果
selectionMode?: 'multiple' | 'single';
}
const props = withDefaults(defineProps<Props>(), {
@@ -51,6 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
showHoverCircle: true, // 默认显示悬停圆环
iconSize: 24, // 默认图标大小
showSelectedEffect: true, // 默认显示选中效果
selectionMode: 'multiple'
});
const emits = defineEmits(['update:modelValue']);
@@ -78,10 +80,20 @@ function handleClick() {
}
function toggleSelection() {
if (isSelected.value) {
emits('update:modelValue', props.modelValue?.filter((val) => val !== props.value));
if (props.selectionMode === 'multiple') {
// 多选逻辑
if (isSelected.value) {
emits('update:modelValue', props.modelValue?.filter((val) => val !== props.value) || []);
} else {
emits('update:modelValue', [...(props.modelValue || []), props.value]);
}
} else {
emits('update:modelValue', [...(props.modelValue || []), props.value]);
// 单选逻辑
if (isSelected.value) {
emits('update:modelValue', []); // 取消选中
} else {
emits('update:modelValue', [props.value]); // 选中当前项
}
}
}
</script>
@@ -98,8 +110,8 @@ function toggleSelection() {
}
.check-card.selected {
border: 1px solid rgba(125, 167, 255, 0.68);
box-shadow: 0 0 2px rgba(77, 167, 255, 0.89);
//border: 1px solid rgba(125, 167, 255, 0.68);
box-shadow: 0 0 10px rgba(77, 167, 255, 0.89);
background-color: #e5eeff;
}

6
src/components/CommentReply/index.scss
View File

@@ -1,10 +1,10 @@
.comment-main {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
margin-top: 20px;
//border: 1px solid #ccc;
//margin-top: 20px;
width: 700px;
padding: 50px;
//padding: 50px;
.comment-header-title {
font-size: 18px;

21
src/components/CommentReply/index.vue
View File

@@ -1,21 +1,28 @@
<template>
<div class="comment-main">
<AFlex :vertical="false" justify="flex-start" class="comment-header">
<span class="comment-header-title">{{ t('comment.comment') }}</span>
</AFlex>
<!-- <AFlex :vertical="false" justify="flex-start" class="comment-header">-->
<!-- <span class="comment-header-title">{{ t('comment.comment') }}</span>-->
<!-- </AFlex>-->
<!-- 评论输入框 -->
<CommentInput/>
<CommentInput :topic-id="topicId"/>
<ADivider/>
<!-- 回复列表 -->
<CommentList/>
<CommentList :topic-id="topicId"/>
</div>
</template>
<script setup lang="ts">
import CommentInput from "@/components/CommentReply/src/CommentInput/CommentInput.vue";
import {useI18n} from "vue-i18n";
// import {useI18n} from "vue-i18n";
import CommentList from "@/components/CommentReply/src/CommentList/CommentList.vue";
const {t} = useI18n();
// const {t} = useI18n();
defineProps({
topicId: {
type: String,
required: true,
},
});
</script>
<style src="./index.scss" lang="scss" scoped>

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

@@ -105,10 +105,16 @@ const showCommentActions = ref<boolean>(false);
const commentContent = ref<string>("");
const user = useStore().user;
const topicId = ref<string>("123");
const showSubmitCaptcha = ref<boolean>(false);
const comment = useStore().comment;
const props = defineProps({
topicId: {
type: String,
required: true,
},
});
const commentSlideCaptchaEvent = {
confirm: async (point: any) => {
await commentSubmitDebounced(point);
@@ -156,7 +162,7 @@ async function commentSubmit(point: any) {
return `<img width="30px" height="30px" loading="lazy" src="/emoji/qq/gif/${p1}" alt="emoji ${p1}" />`;
});
const commentParams: object = {
topic_id: topicId.value,
topic_id: props.topicId,
content: contentWithEmoji,
images: comment.imageList,
author: user.user.uid,

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

@@ -134,10 +134,11 @@
</AFlex>
<!-- 回复输入框 -->
<ReplyInput :item="item" v-show="comment.showReplyInput && item.id === comment.showReplyInput"/>
<ReplyInput :item="item" :topic-id="topicId"
v-show="comment.showReplyInput && item.id === comment.showReplyInput"/>
<!-- 子回复列表 -->
<transition name="fade">
<ReplyList :item="item" v-if="comment.replyVisibility[item.id]?.visible"/>
<ReplyList :item="item" :topic-id="topicId" v-if="comment.replyVisibility[item.id]?.visible"/>
</transition>
</AFlex>
</AFlex>
@@ -157,7 +158,7 @@
<script lang="ts" setup>
import {useI18n} from "vue-i18n";
import {h, onMounted, ref} from "vue";
import {h, onMounted} from "vue";
import {
ChromeOutlined,
ClockCircleOutlined,
@@ -175,15 +176,21 @@ import ReplyInput from "@/components/CommentReply/src/ReplyInput/ReplyInput.vue"
import ReplyList from "@/components/CommentReply/src/ReplyList/ReplyList.vue";
import MessageReport from "@/components/CommentReply/src/MessageReport/MessageReport.vue";
import UserInfoCard from "@/components/CommentReply/src/UserInfoCard/UserInfoCard.vue";
import Popover from "@/components/MyUI/Popover/Popover.vue";
const {t} = useI18n();
const router = useRouter();
const route =useRoute();
const route = useRoute();
const comment = useStore().comment;
const topicId = ref<string>("123");
const props = defineProps({
topicId: {
type: String,
required: true,
},
});
/**
@@ -191,7 +198,7 @@ const topicId = ref<string>("123");
*/
async function getCommentList(page: number = 1, size: number = 5, hot: boolean = true) {
const params = {
topic_id: topicId.value,
topic_id: props.topicId,
page: page,
size: size,
is_hot: hot,
@@ -239,7 +246,7 @@ const commentLikeThrottled = useThrottleFn(commentLike, 1000);
async function commentLike(item: any) {
const params: any = {
comment_id: item.id,
topic_id: topicId.value,
topic_id: props.topicId,
};
const res: boolean = await comment.commentLike(params);
if (res) {
@@ -257,7 +264,7 @@ const cancelCommentLikeThrottled = useThrottleFn(cancelCommentLike, 1000);
async function cancelCommentLike(item: any) {
const params: any = {
comment_id: item.id,
topic_id: topicId.value,
topic_id: props.topicId,
};
const res: boolean = await comment.cancelCommentLike(params);
if (res) {

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

@@ -116,13 +116,16 @@ const {t} = useI18n();
const comment = useStore().comment;
const user = useStore().user;
const replyContent = ref<string>("");
const topicId = ref<string>("123");
const showSubmitCaptcha = ref<boolean>(false);
const props = defineProps({
item: {
type: Object,
required: true
},
topicId: {
type: String,
required: true
},
});
const commentSlideCaptchaEvent = {
confirm: async (point: any) => {
@@ -172,7 +175,7 @@ async function replySubmit(point: any) {
point: [number, number];
key: any;
} = {
topic_id: topicId.value,
topic_id: props.topicId,
content: contentWithEmoji,
images: comment.imageList,
author: user.user.uid,

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

@@ -114,6 +114,7 @@
<!-- 子评论回复输入框 -->
<ReplyReply :child="child" :item="props.item"
:topic-id="props.topicId"
v-if="comment.showReplyInput && comment.showReplyInput === child.id"/>
</AFlex>
</AFlex>
@@ -133,7 +134,7 @@
</template>
<script lang="ts" setup>
import {h, ref} from "vue";
import {h} from "vue";
import {
ChromeOutlined,
CommentOutlined,
@@ -147,18 +148,21 @@ import useStore from "@/store";
import ReplyReply from "@/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue";
import {useThrottleFn} from "@vueuse/core";
import UserInfoCard from "@/components/CommentReply/src/UserInfoCard/UserInfoCard.vue";
import Popover from "@/components/MyUI/Popover/Popover.vue";
const {t} = useI18n();
const comment = useStore().comment;
const topicId = ref<string>("123");
const props = defineProps({
item: {
type: Object,
required: true
}
},
topicId: {
type: String,
required: true
},
});
/**
* 格式化时间
* @param dateString
@@ -198,7 +202,7 @@ const commentLikeThrottled = useThrottleFn(commentLike, 1000);
async function commentLike(item: any) {
const params: any = {
comment_id: item.id,
topic_id: topicId.value,
topic_id: props.topicId,
};
const res: boolean = await comment.commentLike(params);
if (res) {
@@ -216,7 +220,7 @@ const cancelCommentLikeThrottled = useThrottleFn(cancelCommentLike, 1000);
async function cancelCommentLike(item: any) {
const params: any = {
comment_id: item.id,
topic_id: topicId.value,
topic_id: props.topicId,
};
const res: boolean = await comment.cancelCommentLike(params);
if (res) {
@@ -237,7 +241,7 @@ const replyListThrottled = useThrottleFn(getReplyList, 1000);
*/
async function getReplyList(page: number, pageSize: number) {
const params: any = {
topic_id: topicId.value,
topic_id: props.topicId,
page: page,
size: pageSize,
comment_id: props.item.id,

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

@@ -122,7 +122,6 @@ const comment = useStore().comment;
const replyReplyContent = ref<string>("");
const user = useStore().user;
const topicId = ref<string>("123");
const showSubmitCaptcha = ref<boolean>(false);
const props = defineProps({
child: {
@@ -132,8 +131,11 @@ const props = defineProps({
item: {
type: Object,
required: true
}
},
topicId: {
type: String,
required: true
},
});
const commentSlideCaptchaEvent = {
confirm: async (point: any) => {
@@ -173,7 +175,7 @@ async function replyReplySubmit(point: any) {
return `<img width="30px" height="30px" loading="lazy" src="/emoji/qq/gif/${p1}" alt="emoji ${p1}" />`;
});
const replyParams: ReplyCommentParams = {
topic_id: topicId.value,
topic_id: props.topicId,
content: contentWithEmoji,
images: comment.imageList,
author: user.user.uid,

245
src/components/ImageEditor/ImageEditor.vue Normal file
View File

@@ -0,0 +1,245 @@
<template>
<div class="editor-container">
<a-upload
:before-upload="handleBeforeUpload"
:show-upload-list="false"
>
<a-button icon="upload" class="upload-button">Upload Image</a-button>
</a-upload>
<div class="canvas-container">
<canvas ref="canvas" width="600" height="400"></canvas>
</div>
<div class="controls">
<a-button @click="undo">撤消</a-button>
<a-button @click="redo">重做</a-button>
<a-button @click="flipHorizontal">水平翻转</a-button>
<a-button @click="rotate">旋转</a-button>
<a-button @click="addText">添加文本</a-button>
<a-button @click="applyFilter">应用过滤器</a-button>
<!-- Add more buttons for other features -->
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue';
import * as fabric from 'fabric';
export default defineComponent({
name: 'ImageEditor',
props: {
imageUrl: {
type: String,
required: true,
},
},
setup(props) {
const canvas = ref<HTMLCanvasElement | null>(null);
let fabricCanvas: fabric.Canvas;
const history = ref<any[]>([]);
const redoStack = ref<any[]>([]);
onMounted(() => {
if (canvas.value) {
fabricCanvas = new fabric.Canvas(canvas.value);
fabricCanvas.on('object:modified', saveState);
fabricCanvas.on('object:added', saveState);
// Add mouse wheel zoom functionality
fabricCanvas.on('mouse:wheel', (opt) => {
const delta = opt.e.deltaY;
let zoom = fabricCanvas.getZoom();
zoom *= 0.999 ** delta;
if (zoom > 20) zoom = 20;
if (zoom < 0.01) zoom = 0.01;
fabricCanvas.zoomToPoint(new fabric.Point(opt.e.offsetX, opt.e.offsetY), zoom);
opt.e.preventDefault();
opt.e.stopPropagation();
});
loadImage(props.imageUrl);
}
});
watch(() => props.imageUrl, (newUrl) => {
loadImage(newUrl);
});
const loadImage = async (url: string) => {
try {
const img = await fabric.Image.fromURL(url, { crossOrigin: 'anonymous' });
fabricCanvas.clear();
img.set({
left: fabricCanvas.getWidth() / 2,
top: fabricCanvas.getHeight() / 2,
originX: 'center',
originY: 'center',
scaleX: fabricCanvas.getWidth() / img.width!,
scaleY: fabricCanvas.getHeight() / img.height!,
});
fabricCanvas.add(img);
fabricCanvas.renderAll();
saveState();
} catch (error) {
console.error('Error loading image:', error);
}
};
const saveState = () => {
redoStack.value = [];
history.value.push(JSON.stringify(fabricCanvas));
};
const handleBeforeUpload = (file: File) => {
const reader = new FileReader();
reader.onload = (e) => {
const imgObj = new Image();
imgObj.src = e.target?.result as string;
imgObj.onload = () => {
fabricCanvas.clear();
const img = new fabric.Image(imgObj, {
left: fabricCanvas.getWidth() / 2,
top: fabricCanvas.getHeight() / 2,
originX: 'center',
originY: 'center',
scaleX: fabricCanvas.getWidth() / imgObj.width,
scaleY: fabricCanvas.getHeight() / imgObj.height,
});
fabricCanvas.add(img);
fabricCanvas.renderAll();
saveState();
};
};
reader.readAsDataURL(file);
return false;
};
const undo = () => {
if (history.value.length > 1) {
redoStack.value.push(history.value.pop()!);
fabricCanvas.loadFromJSON(history.value[history.value.length - 1], () => {
fabricCanvas.renderAll();
});
}
};
const redo = () => {
if (redoStack.value.length > 0) {
const state = redoStack.value.pop()!;
history.value.push(state);
fabricCanvas.loadFromJSON(state, () => {
fabricCanvas.renderAll();
});
}
};
const flipHorizontal = () => {
const activeObject = fabricCanvas.getActiveObject();
if (activeObject) {
activeObject.toggle('flipX');
fabricCanvas.renderAll();
saveState();
}
};
const rotate = () => {
const activeObject = fabricCanvas.getActiveObject();
if (activeObject) {
activeObject.rotate((activeObject.angle || 0) + 90);
fabricCanvas.renderAll();
saveState();
}
};
const addText = () => {
const text = new fabric.Textbox('Edit me', {
left: fabricCanvas.getWidth() / 2,
top: fabricCanvas.getHeight() / 2,
width: 200,
fontSize: 20,
originX: 'center',
originY: 'center',
editable: true,
});
fabricCanvas.add(text);
fabricCanvas.setActiveObject(text);
fabricCanvas.renderAll();
saveState();
};
const applyFilter = () => {
const activeObject = fabricCanvas.getActiveObject();
if (activeObject && activeObject instanceof fabric.Image) {
activeObject.filters = activeObject.filters || [];
activeObject.filters.push(new fabric.Image.filters.Grayscale());
activeObject.applyFilters();
fabricCanvas.renderAll();
saveState();
}
};
return {
canvas,
handleBeforeUpload,
undo,
redo,
flipHorizontal,
rotate,
addText,
applyFilter,
};
},
});
</script>
<style scoped>
.editor-container {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f2f5;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.upload-button {
margin-bottom: 20px;
background-color: #1890ff;
color: white;
border: none;
transition: background-color 0.3s;
}
.upload-button:hover {
background-color: #40a9ff;
}
.canvas-container {
border: 2px dashed #d9d9d9;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}
canvas {
display: block;
}
.controls {
display: flex;
gap: 10px;
}
.controls a-button {
background-color: #1890ff;
color: white;
border: none;
transition: background-color 0.3s;
}
.controls a-button:hover {
background-color: #40a9ff;
}
</style>

40
src/components/ImageToolbar/ImageToolbar.vue
View File

@@ -28,6 +28,12 @@
</template>
下载原图
</AButton>
<AButton type="text" shape="default" size="middle" class="photo-toolbar-btn" @click="editImages">
<template #icon>
<BgColorsOutlined class="photo-toolbar-icon"/>
</template>
编辑
</AButton>
<AButton type="text" shape="default" size="middle" class="photo-toolbar-btn">
<template #icon>
<ShareAltOutlined class="photo-toolbar-icon"/>
@@ -43,12 +49,18 @@
</div>
</div>
</transition>
<AModal v-model:open="imageStore.imageEditVisible" title="编辑图片" width="50%" :mask-closable="false"
:keyboard="false" :wrap-class-name="'image-edit-modal'">
<ImageEditor :image-url="getUrlById(props.selected[0])"/>
</AModal>
</template>
<script setup lang="ts">
import useStore from "@/store";
import {Image, ImageList, ImageRecord} from "@/types/image";
import {deletedImagesApi} from "@/api/storage";
import {message} from "ant-design-vue";
import ImageEditor from "@/components/ImageEditor/ImageEditor.vue";
const props = defineProps({
selected: {
@@ -71,10 +83,12 @@ const selectAll = () => {
};
const deleteImages = async () => {
imageStore.imageListLoading = true;
const res: any = await deletedImagesApi(props.selected, uploadStore.storageSelected?.[0], uploadStore.storageSelected?.[1]);
if (res.code === 200) {
imageStore.selected = [];
}
imageStore.imageListLoading = false;
};
const isAllSelected = computed(() => {
@@ -82,6 +96,32 @@ const isAllSelected = computed(() => {
const imageList = props.imageList || [];
return props.selected.length === imageList.flatMap((record: ImageRecord) => record.list).length;
});
/**
* 编辑图片
*/
const editImages = () => {
// 只能编辑一张图片
if (props.selected.length !== 1) {
message.warning("只能编辑一张图片");
return;
}
imageStore.imageEditVisible = true;
};
const idToUrlMap = computed(() => {
const map: { [key: number]: string } = {};
props.imageList.forEach((record: ImageRecord) => {
record.list.forEach((image: Image) => {
map[image.id] = image.url;
});
});
return map;
});
const getUrlById = (id: number): string => {
console.log(idToUrlMap.value[id]);
return idToUrlMap.value[id];
};
onBeforeUnmount(() => {
imageStore.selected = [];
});

293
src/components/ImageUpload/ImageUpload.vue
View File

@@ -2,6 +2,37 @@
<ADrawer v-model:open="upload.openUploadDrawer" placement="right" title="上传照片" width="40%" @close="cancelUpload">
<template #extra>
<AFlex :vertical="false" align="center" gap="large" justify="center">
<ATooltip title="手机扫码上传">
<AButton type="text" shape="default" size="middle" @click="initWebSocket">
<template #icon>
<APopover placement="bottom" trigger="click">
<AAvatar size="small" shape="square" :src="qr"/>
<template #content>
<AQrcode :bordered="false" color="rgba(126, 126, 135, 0.48)"
:size="qrcodeSize"
:value="generateQrCodeUrl()"
:icon="phone"
:iconSize="iconSize"
:status="qrStatus"
@refresh="initWebSocket"
/>
</template>
</APopover>
</template>
</AButton>
</ATooltip>
<AButton type="text" shape="circle" size="middle">
<template #icon>
<APopover placement="bottom" trigger="click">
<template #content>
<UploadSetting/>
</template>
<AAvatar size="small" shape="circle" :src="setting"/>
</APopover>
</template>
</AButton>
<ASelect size="middle" style="width: 150px" placeholder="选择上传的相册"
:options="albumList"
v-model:value="upload.albumSelected"
@@ -13,18 +44,18 @@
</template>
<div class="upload-container">
<AUploadDragger
v-model:fileList="fileList"
:beforeUpload="beforeUpload"
v-model:fileList="upload.fileList"
:beforeUpload="upload.beforeUpload"
:customRequest="customUploadRequest"
:directory="false"
:maxCount="10"
:multiple="true"
:disabled="predicting"
:progress="progress"
@remove="removeFile"
@reject="rejectFile"
:disabled="upload.predicting"
:progress="upload.progress"
@remove="upload.removeFile"
@reject="upload.rejectFile"
:openFileDialogOnClick="true"
accept="image/*"
accept="image/*,video/*"
list-type="picture"
method="post"
name="file"
@@ -32,18 +63,18 @@
<p class="ant-upload-drag-icon">
<FileImageOutlined/>
</p>
<p v-show="!predicting" class="ant-upload-text">单击或拖动文件到此区域以上传</p>
<p v-show="!predicting" class="ant-upload-hint">
<p v-show="!upload.predicting" class="ant-upload-text">单击或拖动文件到此区域以上传</p>
<p v-show="!upload.predicting" class="ant-upload-hint">
支持单次或批量上传，严禁上传非法图片，违者将受到法律惩戒。
</p>
<p v-show="predicting" class="ant-upload-hint">
<p v-show="upload.predicting" class="ant-upload-hint">
AI 正在识别图片，请稍候...
</p>
<AProgress :stroke-color="{'0%': '#108ee9','100%': '#87d068',}" :percent="progressPercent"
:status="progressStatus"
:show-info="true" size="small" type="line" v-show="predicting" style="width: 80%"/>
<AProgress :stroke-color="{'0%': '#108ee9','100%': '#87d068',}" :percent="upload.progressPercent"
:status="upload.progressStatus"
:show-info="true" size="small" type="line" v-show="upload.predicting" style="width: 80%"/>
</AUploadDragger>
<AEmpty :image="empty" v-if="fileList.length === 0">
<AEmpty :image="empty" v-if="upload.fileList.length === 0">
<template #description>
<span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
上传列表为空，可直接拖动文件到此区域上传。
@@ -55,161 +86,62 @@
</template>
<script lang="ts" setup>
import useStore from "@/store";
import type {UploadProps} from 'ant-design-vue';
import {message} from "ant-design-vue";
import {initNSFWJs, predictNSFW} from "@/utils/tfjs/nsfw.ts";
import i18n from "@/locales";
import {NSFWJS} from "nsfwjs";
import {animePredictImagePro} from "@/utils/tfjs/anime_classifier_pro.ts";
import {cocoSsdPredict} from "@/utils/tfjs/mobilenet.ts";
import {predictLandscape} from "@/utils/tfjs/landscape_recognition.ts";
import {useRequest} from 'alova/client';
import {albumListApi, uploadFile} from "@/api/storage";
import imageCompression from "browser-image-compression";
import exifr from 'exifr';
import isScreenshot from "@/utils/imageUtils/isScreenshot.ts";
import {getCategoryByLabel} from "@/constant/coco_ssd_label_category.ts";
import {generateThumbnail} from "@/utils/imageUtils/generateThumb.ts";
import empty from "@/assets/svgs/empty.svg";
import setting from "@/assets/svgs/setting.svg";
import qr from "@/assets/svgs/qr.svg";
import phone from "@/assets/svgs/qr-phone.svg";
import UploadSetting from "@/components/ImageUpload/UploadSetting.vue";
const predicting = ref<boolean>(false);
const progressPercent = ref<number>(0);
const progressStatus = ref<string>('active');
// 压缩图片配置
const options = {
maxSizeMB: 0.2,
maxWidthOrHeight: 750,
maxIteration: 2,
useWebWorker: true,
const qrcodeSize = ref<number>(220);
const iconSize = ref<number>(30);
const user = useStore().user;
const websocket = useStore().websocket;
const wsOptions = {
url: import.meta.env.VITE_FILE_SOCKET_URL + "?user_id=" + user.user.uid,
protocols: [user.token.accessToken],
};
const upload = useStore().upload;
const image: HTMLImageElement = document.createElement('img');
function generateQrCodeUrl(): string {
console.log(import.meta.env.VITE_APP_WEB_URL + "/main/image/phone/app?user_id=" + user.user.uid + "&token=" + user.token.accessToken);
return import.meta.env.VITE_APP_WEB_URL + "/main/image/phone/app?user_id=" + user.user.uid + "&token=" + user.token.accessToken;
}
const fileList = ref([]);
const progress: UploadProps['progress'] = {
strokeColor: {
'0%': '#108ee9',
'100%': '#87d068',
},
strokeWidth: 3,
format: (percent: any) => `${parseFloat(percent.toFixed(2))}%`,
class: 'progress-bar',
};
/**
* 图片上传前的校验
* @param file
* @param fileList
*/
async function beforeUpload(file: File, fileList: File[]) {
predicting.value = true;
upload.clearPredictResult();
progressPercent.value = 0; // 初始化进度条
progressStatus.value = 'active'; // 开始状态
// 压缩图片
const compressedFile = await imageCompression(file, options);
// 创建图片对象
image.src = URL.createObjectURL(compressedFile);
// 获取图片宽高
image.onload = () => {
const {width, height} = image;
upload.predictResult.width = width;
upload.predictResult.height = height;
};
// 更新进度条函数，逐步增加
const smoothUpdateProgress = async (targetPercent, duration) => {
const increment = (targetPercent - progressPercent.value) / (duration / 50);
return new Promise((resolve) => {
const interval = setInterval(() => {
if (progressPercent.value >= targetPercent) {
clearInterval(interval);
resolve(false);
} else {
progressPercent.value = Math.min(progressPercent.value + increment, targetPercent);
}
}, 50);
});
};
try {
// NSFW 检测
const nsfw: NSFWJS = await initNSFWJs();
await smoothUpdateProgress(30, 500); // 平滑更新进度条
const isNSFW: boolean = await predictNSFW(nsfw, image);
await smoothUpdateProgress(50, 500); // 平滑更新进度条
if (isNSFW) {
message.error(i18n.global.t('comment.illegalImage'));
progressPercent.value = 100; // 重置进度条
progressStatus.value = 'exception'; // 异常状态
fileList.pop(); // 清空文件列表
predicting.value = false;
return false;
}
// 提取 EXIF 数据
const gpsData: any = await extractGPSExifData(file);
if (gpsData) {
upload.predictResult.longitude = gpsData.longitude;
upload.predictResult.latitude = gpsData.latitude;
}
// 判断是否为截图
upload.predictResult.isScreenshot = await isScreenshot(file);
// 动漫类型识别
const prediction: string = await animePredictImagePro(image);
await smoothUpdateProgress(70, 500); // 平滑更新进度条
// 如果是动漫类型，直接返回
if ((prediction === 'Furry' || prediction === 'Anime')) {
upload.predictResult.isAnime = true;
predicting.value = false;
progressPercent.value = 100; // 直接完成
return true;
}
//目标检测和风景检测并行处理
const [cocoResults, landscape] = await Promise.all([
cocoSsdPredict(image), // 目标检测
predictLandscape(image), // 风景检测
]);
await smoothUpdateProgress(100, 500); // 平滑更新进度条
if (cocoResults.length > 0) {
// 取置信度最高的结果
// 如果只有一个结果，直接取第一个
if (cocoResults.length === 1) {
upload.predictResult.topCategory = getCategoryByLabel(cocoResults[0].class);
upload.predictResult.tagName = cocoResults[0].class;
const qrStatus = ref<string>('loading');
watch(
() => websocket.readyState,
(newStatus) => {
if (newStatus === WebSocket.OPEN) {
qrStatus.value = 'active';
} else {
// 多个结果时，按 score 排序，取置信度最高的结果
const sortedResults = cocoResults.sort((a, b) => b.score - a.score);
upload.predictResult.topCategory = getCategoryByLabel(sortedResults[0].class);
upload.predictResult.tagName = sortedResults[0].class;
qrStatus.value = 'expired';
}
}
upload.predictResult.landscape = landscape as 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | null;
);
predicting.value = false;
return true;
} catch (error) {
console.error('识别过程中发生错误:', error);
predicting.value = false;
progressPercent.value = 0; // 重置进度条
return false;
}
/**
* 初始化 WebSocket
*/
function initWebSocket() {
websocket.initialize(wsOptions);
websocket.on("message", async (res: any) => {
if (res && res.code === 200) {
const {data} = res;
console.log(data);
}
});
}
const upload = useStore().upload;
const {uploading, send: submitFile, abort} = useRequest(uploadFile, {
immediate: false,
debounce: 500,
@@ -220,7 +152,7 @@ const {uploading, send: submitFile, abort} = useRequest(uploadFile, {
* @param file
*/
async function customUploadRequest(file: any) {
const compressedFile = await imageCompression(file.file, options);
const compressedFile = await imageCompression(file.file, upload.options);
// 生成缩略图
const {binaryData, width, height, size} = await generateThumbnail(compressedFile);
upload.predictResult.thumb_w = width;
@@ -239,6 +171,9 @@ async function customUploadRequest(file: any) {
albumId: upload.albumSelected ? upload.albumSelected : 0,
...upload.predictResult,
}));
formData.append("setting", JSON.stringify({
...upload.uploadSetting,
}));
watch(
() => uploading.value,
(upload) => {
@@ -261,60 +196,12 @@ async function customUploadRequest(file: any) {
*/
function cancelUpload() {
abort();
fileList.value = [];
upload.fileList = [];
upload.clearPredictResult();
predicting.value = false;
progressPercent.value = 0; // 重置进度条
upload.predicting = false;
upload.progressPercent = 0; // 重置进度条
}
/**
* 拒绝文件回调
* @param fileList
*/
function rejectFile(fileList: any) {
fileList.value.pop();
}
/**
* 删除文件
* @param file
*/
function removeFile(file: any) {
fileList.value = fileList.value.filter((item: any) => item.uid !== file.uid);
}
/**
* 提取 EXIF 数据
* @param {File} file - 图片文件
* @returns {Promise<Object|null>} - 返回所有 EXIF 数据或 null（如果格式不支持或提取失败）
*/
async function extractGPSExifData(file) {
const supportedFormats = ['image/jpeg', 'image/tiff', 'image/iiq', 'image/heif', 'image/heic', 'image/avif', 'image/png'];
// 判断文件格式是否支持
if (!supportedFormats.includes(file.type)) {
return null;
}
const options: any = {
ifd0: false,
exif: false,
gps: ['GPSLatitudeRef', 'GPSLatitude', 0x0003, 0x0004],
interop: false,
ifd1: false // thumbnail
};
// 提取GPS EXIF 数据
const gpsData = await exifr.parse(file, options);
if (!gpsData) {
return null;
}
const {latitude, longitude} = gpsData;
if (latitude && longitude) {
return {latitude, longitude};
}
return null;
}
const albumList = ref<any[]>([]);

157
src/components/ImageUpload/UploadSetting.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<div class="upload-setting">
<div class="upload-setting-item">
<AFlex :vertical="false" align="center" justify="flex-start" gap="middle">
<AAvatar size="default" shape="square" :src="nsfw"/>
<span class="upload-setting-item-name">违规图片检测</span>
</AFlex>
<ASwitch v-model:checked="uploadStore.uploadSetting.nsfw_detection">
<template #checkedChildren>
<check-outlined/>
</template>
<template #unCheckedChildren>
<close-outlined/>
</template>
</ASwitch>
</div>
<div class="upload-setting-item">
<AFlex :vertical="false" align="center" justify="flex-start" gap="middle">
<AAvatar size="default" shape="square" :src="anime"/>
<span class="upload-setting-item-name">动漫图片识别</span>
</AFlex>
<ASwitch v-model:checked="uploadStore.uploadSetting.anime_detection">
<template #checkedChildren>
<check-outlined/>
</template>
<template #unCheckedChildren>
<close-outlined/>
</template>
</ASwitch>
</div>
<div class="upload-setting-item">
<AFlex :vertical="false" align="center" justify="flex-start" gap="middle">
<AAvatar size="default" shape="square" :src="landscape"/>
<span class="upload-setting-item-name">图片风景检测</span>
</AFlex>
<ASwitch v-model:checked="uploadStore.uploadSetting.landscape_detection">
<template #checkedChildren>
<check-outlined/>
</template>
<template #unCheckedChildren>
<close-outlined/>
</template>
</ASwitch>
</div>
<div class="upload-setting-item">
<AFlex :vertical="false" align="center" justify="flex-start" gap="middle">
<AAvatar size="default" shape="square" :src="screenshot"/>
<span class="upload-setting-item-name">屏幕截图检测</span>
</AFlex>
<ASwitch v-model:checked="uploadStore.uploadSetting.screenshot_detection">
<template #checkedChildren>
<check-outlined/>
</template>
<template #unCheckedChildren>
<close-outlined/>
</template>
</ASwitch>
</div>
<div class="upload-setting-item">
<AFlex :vertical="false" align="center" justify="flex-start" gap="middle">
<AAvatar size="default" shape="square" :src="gps"/>
<span class="upload-setting-item-name">地理位置检测</span>
</AFlex>
<ASwitch v-model:checked="uploadStore.uploadSetting.gps_detection">
<template #checkedChildren>
<check-outlined/>
</template>
<template #unCheckedChildren>
<close-outlined/>
</template>
</ASwitch>
</div>
<div class="upload-setting-item">
<AFlex :vertical="false" align="center" justify="flex-start" gap="middle">
<AAvatar size="default" shape="square" :src="target"/>
<span class="upload-setting-item-name">图片内容识别</span>
</AFlex>
<ASwitch v-model:checked="uploadStore.uploadSetting.target_detection">
<template #checkedChildren>
<check-outlined/>
</template>
<template #unCheckedChildren>
<close-outlined/>
</template>
</ASwitch>
</div>
<div class="upload-setting-item">
<AFlex :vertical="false" align="center" justify="flex-start" gap="middle">
<AAvatar size="default" shape="square" :src="qr"/>
<span class="upload-setting-item-name">二维码检测</span>
</AFlex>
<ASwitch v-model:checked="uploadStore.uploadSetting.qrcode_detection">
<template #checkedChildren>
<check-outlined/>
</template>
<template #unCheckedChildren>
<close-outlined/>
</template>
</ASwitch>
</div>
<div class="upload-setting-item">
<AFlex :vertical="false" align="center" justify="flex-start" gap="middle">
<AAvatar size="default" shape="square" :src="face_detection"/>
<span class="upload-setting-item-name">人脸识别</span>
</AFlex>
<ASwitch v-model:checked="uploadStore.uploadSetting.face_detection">
<template #checkedChildren>
<check-outlined/>
</template>
<template #unCheckedChildren>
<close-outlined/>
</template>
</ASwitch>
</div>
</div>
</template>
<script setup lang="ts">
import useStore from "@/store";
import nsfw from "@/assets/svgs/nsfw.svg";
import anime from "@/assets/svgs/anime.svg";
import landscape from "@/assets/svgs/landscape.svg";
import screenshot from "@/assets/svgs/screenshot.svg";
import gps from "@/assets/svgs/gps.svg";
import target from "@/assets/svgs/target.svg";
import qr from "@/assets/svgs/qr.svg";
import face_detection from "@/assets/svgs/face_detection.svg";
const uploadStore = useStore().upload;
</script>
<style scoped lang="scss">
.upload-setting {
width: 200px;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
.upload-setting-item {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.upload-setting-item-name {
font-size: 14px;
color: #333;
font-weight: bold;
}
}
}
</style>

21
src/components/ImageWaterfallList/ImageWaterfallList.vue
View File

@@ -1,12 +1,11 @@
<template>
<Spin size="middle" :spinning="imageStore.imageListLoading" indicator="spin-dot" tip="loading..." :rotate="true">
<div style="width:100%;height:100%;" v-if="props.imageList">
<div v-for="(itemList, index) in props.imageList" :key="index">
<div v-for="(itemList, indexList) in props.imageList" :key="indexList">
<span style="margin-left: 10px;font-size: 13px">{{ itemList.date }}</span>
<AImagePreviewGroup>
<Vue3JustifiedLayout v-model:list="itemList.list" :options="imageStore.JustifiedLayoutOptions"
style="line-height: 0 !important;">
<template #default="{ item }">
<div class="photo-list">
<div v-for="(item, index) in itemList.list" :key="index">
<CheckCard :key="index"
class="photo-item"
margin="0"
@@ -20,6 +19,7 @@
:alt="item.file_name"
:key="index"
:height="200"
style="height: 200px;max-width: 800px;object-fit: cover;"
:preview="{
src: item.url,
}"
@@ -28,8 +28,8 @@
</template>
</AImage>
</CheckCard>
</template>
</Vue3JustifiedLayout>
</div>
</div>
</AImagePreviewGroup>
</div>
</div>
@@ -49,8 +49,6 @@
</Spin>
</template>
<script setup lang="ts">
import Vue3JustifiedLayout from "vue3-justified-layout";
import 'vue3-justified-layout/dist/style.css';
import empty from "@/assets/svgs/empty.svg";
import useStore from "@/store";
@@ -66,4 +64,11 @@ const imageStore = useStore().image;
<style scoped lang="scss">
.photo-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 10px;
gap: 15px;
}
</style>

92
src/components/MyUI/Popover/Popover.vue Normal file
View File

@@ -0,0 +1,92 @@
<script setup lang="ts">
import type {CSSProperties} from 'vue';
import {computed} from 'vue';
import {useSlotsExist} from '../Utils';
interface Props {
title?: string // 卡片标题 string | slot
titleStyle?: CSSProperties // 卡片标题样式
content?: string // 卡片内容 string | slot
contentStyle?: CSSProperties // 卡片内容样式
tooltipStyle?: CSSProperties // 设置弹出提示的样式
offsetX?: number // 水平偏移量
padding?: string | number // 弹出提示的内边距
}
const props = withDefaults(defineProps<Props>(), {
title: undefined,
titleStyle: () => ({}),
content: undefined,
contentStyle: () => ({}),
tooltipStyle: () => ({}),
offsetX: 0, // 默认偏移量为0
padding: '0px' // 默认内边距为0
});
const slotsExist = useSlotsExist(['title', 'content']);
const showTitle = computed(() => {
return slotsExist.title || props.title;
});
const showContent = computed(() => {
return slotsExist.content || props.content;
});
</script>
<template>
<Tooltip
max-width="auto"
bg-color="#fff"
:tooltip-style="{
padding: props.padding, // 使用传入的 padding
borderRadius: '8px',
textAlign: 'start',
transform: `translate(${props.offsetX}px, 0)`,
backgroundColor: 'var(--background-color)',
color: 'var(--text-color)',
border: '1px solid var(--white-color)',
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
...tooltipStyle
}"
:transition-duration="200"
v-bind="$attrs"
>
<template #tooltip>
<div class="arrow" :style="{ transform: `translateX(${props.offsetX - 10}px)` }"></div>
<div v-if="showTitle" class="popover-title" :class="{ mb8: showContent }" :style="titleStyle">
<slot name="title">{{ title }}</slot>
</div>
<div v-if="showContent" class="popover-content" :style="contentStyle">
<slot name="content">{{ content }}</slot>
</div>
</template>
<slot></slot>
</Tooltip>
</template>
<style lang="less" scoped>
.popover-title {
min-width: 176px;
color: rgba(0, 0, 0, 0.88);
font-weight: 600;
}
.mb8 {
margin-bottom: 8px;
}
.popover-content {
color: rgba(0, 0, 0, 0.88);
}
.arrow {
position: absolute;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff; /* 箭头的颜色 */
left: 50%; /* 使箭头在中间 */
transform: translateX(-50%); /* 向左移动箭头宽度的一半 */
}
</style>