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

24
components.d.ts vendored
View File

@@ -37,40 +37,55 @@ declare module 'vue' {
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
AlbumCard: typeof import('./src/views/Album/Phoalbum/AlbumCard.vue')['default']
AlbumShareModal: typeof import('./src/views/Album/Phoalbum/AlbumShareModal.vue')['default']
AList: typeof import('ant-design-vue/es')['List']
AListItem: typeof import('ant-design-vue/es')['ListItem']
AllPhoto: typeof import('./src/views/Photograph/AllPhoto/AllPhoto.vue')['default']
AMenu: typeof import('ant-design-vue/es')['Menu']
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
AMenuItemGroup: typeof import('ant-design-vue/es')['MenuItemGroup']
AModal: typeof import('ant-design-vue/es')['Modal']
AnimatedNature: typeof import('./src/components/AnimatedNature/AnimatedNature.vue')['default']
APagination: typeof import('ant-design-vue/es')['Pagination']
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
APopover: typeof import('ant-design-vue/es')['Popover']
AProgress: typeof import('ant-design-vue/es')['Progress']
AQrcode: typeof import('ant-design-vue/es')['QRCode']
ARadio: typeof import('ant-design-vue/es')['Radio']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
ASelect: typeof import('ant-design-vue/es')['Select']
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
ASpace: typeof import('ant-design-vue/es')['Space']
ASpin: typeof import('ant-design-vue/es')['Spin']
ASwitch: typeof import('ant-design-vue/es')['Switch']
ATable: typeof import('ant-design-vue/es')['Table']
ATabPane: typeof import('ant-design-vue/es')['TabPane']
ATabs: typeof import('ant-design-vue/es')['Tabs']
ATag: typeof import('ant-design-vue/es')['Tag']
ATextarea: typeof import('ant-design-vue/es')['Textarea']
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
AUpload: typeof import('ant-design-vue/es')['Upload']
AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
BackgroundAnimation: typeof import('./src/components/BackgroundAnimation/BackgroundAnimation.vue')['default']
BgColorsOutlined: typeof import('@ant-design/icons-vue')['BgColorsOutlined']
BlockOutlined: typeof import('@ant-design/icons-vue')['BlockOutlined']
BoxDog: typeof import('./src/components/BoxDog/BoxDog.vue')['default']
CanvasEditor: typeof import('./src/components/ImageEditor/CanvasEditor.vue')['default']
Card3D: typeof import('./src/components/Card3D/Card3D.vue')['default']
CheckCard: typeof import('./src/components/CheckCard/CheckCard.vue')['default']
CheckCircleOutlined: typeof import('@ant-design/icons-vue')['CheckCircleOutlined']
CheckOutlined: typeof import('@ant-design/icons-vue')['CheckOutlined']
CloseCircleOutlined: typeof import('@ant-design/icons-vue')['CloseCircleOutlined']
CloseOutlined: typeof import('@ant-design/icons-vue')['CloseOutlined']
Clouds: typeof import('./src/components/Clouds/Clouds.vue')['default']
CloudUploadOutlined: typeof import('@ant-design/icons-vue')['CloudUploadOutlined']
CommentInput: typeof import('./src/components/CommentReply/src/CommentInput/CommentInput.vue')['default']
CommentList: typeof import('./src/components/CommentReply/src/CommentList/CommentList.vue')['default']
CommentModal: typeof import('./src/views/Share/ShareViewList/CommentModal.vue')['default']
CommentOutlined: typeof import('@ant-design/icons-vue')['CommentOutlined']
CommentReply: typeof import('./src/components/CommentReply/index.vue')['default']
CommonPhoneUpload: typeof import('./src/views/Phone/CommonPhoneUpload/CommonPhoneUpload.vue')['default']
CompareImage: typeof import('./src/views/Upscale/CompareImage.vue')['default']
DeleteOutlined: typeof import('@ant-design/icons-vue')['DeleteOutlined']
DownloadOutlined: typeof import('@ant-design/icons-vue')['DownloadOutlined']
@@ -78,19 +93,21 @@ declare module 'vue' {
DynamicTitle: typeof import('./src/components/DynamicTitle/DynamicTitle.vue')['default']
EditOutlined: typeof import('@ant-design/icons-vue')['EditOutlined']
EyeInvisibleOutlined: typeof import('@ant-design/icons-vue')['EyeInvisibleOutlined']
EyeOutlined: typeof import('@ant-design/icons-vue')['EyeOutlined']
FileImageOutlined: typeof import('@ant-design/icons-vue')['FileImageOutlined']
Folder: typeof import('./src/components/Folder/Folder.vue')['default']
ForgetPage: typeof import('./src/views/Forget/ForgetPage.vue')['default']
GradientText: typeof import('./src/components/MyUI/GradientText/GradientText.vue')['default']
ImageEditor: typeof import('./src/components/ImageEditor/ImageEditor.vue')['default']
ImageShare: typeof import('./src/views/Share/ImageShare/ImageShare.vue')['default']
ImageToolbar: typeof import('./src/components/ImageToolbar/ImageToolbar.vue')['default']
ImageUpload: typeof import('./src/components/ImageUpload/ImageUpload.vue')['default']
ImageWaterfallList: typeof import('./src/components/ImageWaterfallList/ImageWaterfallList.vue')['default']
Index: typeof import('./src/views/Album/ThingAlbum/Index.vue')['default']
LandingPage: typeof import('./src/views/Landing/LandingPage.vue')['default']
LeftOutlined: typeof import('@ant-design/icons-vue')['LeftOutlined']
LinkOutlined: typeof import('@ant-design/icons-vue')['LinkOutlined']
LoadingGraphic: typeof import('./src/components/LoadingGraphic/LoadingGraphic.vue')['default']
LoadingOutlined: typeof import('@ant-design/icons-vue')['LoadingOutlined']
LocationAlbumDetail: typeof import('./src/views/Album/LocationAlbum/LocationAlbumDetail.vue')['default']
LocationAlbumIndex: typeof import('./src/views/Album/LocationAlbum/LocationAlbumIndex.vue')['default']
LocationAlbumList: typeof import('./src/views/Album/LocationAlbum/LocationAlbumList.vue')['default']
@@ -113,6 +130,7 @@ declare module 'vue' {
PhotoStack: typeof import('./src/components/PhotoStack/PhotoStack.vue')['default']
PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined']
PlusSquareOutlined: typeof import('@ant-design/icons-vue')['PlusSquareOutlined']
Popover: typeof import('./src/components/MyUI/Popover/Popover.vue')['default']
QrcodeOutlined: typeof import('@ant-design/icons-vue')['QrcodeOutlined']
QRLogin: typeof import('./src/views/QRLogin/QRLogin.vue')['default']
QRLoginFooter: typeof import('./src/views/QRLogin/QRLoginFooter.vue')['default']
@@ -127,6 +145,7 @@ declare module 'vue' {
RouterView: typeof import('vue-router')['RouterView']
SafetyOutlined: typeof import('@ant-design/icons-vue')['SafetyOutlined']
SearchOutlined: typeof import('@ant-design/icons-vue')['SearchOutlined']
SendOutlined: typeof import('@ant-design/icons-vue')['SendOutlined']
ShareAltOutlined: typeof import('@ant-design/icons-vue')['ShareAltOutlined']
SharePhoneUpload: typeof import('./src/views/Phone/SharePhoneUpload/SharePhoneUpload.vue')['default']
ShareSidebar: typeof import('./src/views/Share/ShareViewList/ShareSidebar.vue')['default']
@@ -138,8 +157,10 @@ declare module 'vue' {
ThingAlbumDetail: typeof import('./src/views/Album/ThingAlbum/ThingAlbumDetail.vue')['default']
ThingAlbumIndex: typeof import('./src/views/Album/ThingAlbum/ThingAlbumIndex.vue')['default']
ThingAlbumList: typeof import('./src/views/Album/ThingAlbum/ThingAlbumList.vue')['default']
ToolPanel: typeof import('./src/components/ImageEditor/ToolPanel.vue')['default']
Tooltip: typeof import('./src/components/MyUI/Tooltip/Tooltip.vue')['default']
UploadImage: typeof import('./src/views/Upscale/UploadImage.vue')['default']
UploadSetting: typeof import('./src/components/ImageUpload/UploadSetting.vue')['default']
Upscale: typeof import('./src/views/Upscale/index.vue')['default']
UpscalePhoneUpload: typeof import('./src/views/Phone/UpscalePhoneUpload/UpscalePhoneUpload.vue')['default']
UserCenterAnalysis: typeof import('./src/views/User/PersonalCenter/components/UserCenterAnalysis/UserCenterAnalysis.vue')['default']
@@ -151,5 +172,6 @@ declare module 'vue' {
UserInfoCard: typeof import('./src/components/CommentReply/src/UserInfoCard/UserInfoCard.vue')['default']
UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined']
VueCompareImage: typeof import('./src/components/VueCompareImage/VueCompareImage.vue')['default']
WarningOutlined: typeof import('@ant-design/icons-vue')['WarningOutlined']
}
}

11
package.json
View File

@@ -29,6 +29,7 @@
"@tensorflow/tfjs-core": "^4.22.0",
"@types/animejs": "^3.1.13",
"@types/crypto-js": "^4.2.2",
"@types/fabric": "^5.3.10",
"@types/json-stringify-safe": "^5.0.3",
"@types/node": "^22.13.5",
"@types/nprogress": "^0.2.3",
@@ -36,7 +37,7 @@
"@vuepic/vue-datepicker": "^11.0.1",
"@vueuse/core": "^12.7.0",
"@vueuse/integrations": "^12.7.0",
"alova": "^3.2.8",
"alova": "^3.2.9",
"animejs": "^3.2.2",
"ant-design-vue": "^4.2.6",
"axios": "^1.8.1",
@@ -46,6 +47,7 @@
"echarts": "^5.6.0",
"eslint": "9.21.0",
"exifr": "^7.1.3",
"fabric": "^6.6.1",
"go-captcha-vue": "^2.0.6",
"gsap": "^3.12.7",
"jsencrypt": "^3.3.2",
@@ -58,11 +60,11 @@
"opencv-qr": "^0.7.0",
"pinia": "^3.0.1",
"pinia-plugin-persistedstate-2": "^2.0.28",
"qrcode": "^1",
"qr-scanner-wechat": "^0.1.3",
"rimraf": "^6.0.1",
"seedrandom": "^3.0.5",
"swiper": "^11.2.4",
"unplugin-auto-import": "^19.1.0",
"unplugin-auto-import": "^19.1.1",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.2",
"vite-plugin-node-polyfills": "^0.23.0",
@@ -70,7 +72,6 @@
"vue-dompurify-html": "^5.2.0",
"vue-i18n": "^11.1.1",
"vue-router": "^4.5.0",
"vue3-justified-layout": "^0.0.6",
"ws": "^8.18.1"
},
"devDependencies": {
@@ -81,7 +82,7 @@
"sass": "^1.85.1",
"typescript": "^5.7.3",
"typescript-eslint": "^8.25.0",
"unplugin-vue-components": "^28.4.0",
"unplugin-vue-components": "^28.4.1",
"vite": "^6.2.0",
"vite-plugin-bundle-obfuscator": "1.4.1",
"vite-plugin-chunk-split": "^0.5.0",

BIN
public/caffemodel/detect.caffemodel
View File

Binary file not shown.

2716
public/caffemodel/detect.prototxt
View File

File diff suppressed because it is too large Load Diff

BIN
public/caffemodel/sr.caffemodel
View File

Binary file not shown.

403
public/caffemodel/sr.prototxt
View File

@@ -1,403 +0,0 @@
layer {
name: "data"
type: "Input"
top: "data"
input_param {
shape {
dim: 1
dim: 1
dim: 224
dim: 224
}
}
}
layer {
name: "conv0"
type: "Convolution"
bottom: "data"
top: "conv0"
param {
lr_mult: 1.0
decay_mult: 1.0
}
param {
lr_mult: 1.0
decay_mult: 0.0
}
convolution_param {
num_output: 32
bias_term: true
pad: 1
kernel_size: 3
group: 1
stride: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "conv0/lrelu"
type: "ReLU"
bottom: "conv0"
top: "conv0"
relu_param {
negative_slope: 0.05000000074505806
}
}
layer {
name: "db1/reduce"
type: "Convolution"
bottom: "conv0"
top: "db1/reduce"
param {
lr_mult: 1.0
decay_mult: 1.0
}
param {
lr_mult: 1.0
decay_mult: 0.0
}
convolution_param {
num_output: 8
bias_term: true
pad: 0
kernel_size: 1
group: 1
stride: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "db1/reduce/lrelu"
type: "ReLU"
bottom: "db1/reduce"
top: "db1/reduce"
relu_param {
negative_slope: 0.05000000074505806
}
}
layer {
name: "db1/3x3"
type: "Convolution"
bottom: "db1/reduce"
top: "db1/3x3"
param {
lr_mult: 1.0
decay_mult: 1.0
}
param {
lr_mult: 1.0
decay_mult: 0.0
}
convolution_param {
num_output: 8
bias_term: true
pad: 1
kernel_size: 3
group: 8
stride: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "db1/3x3/lrelu"
type: "ReLU"
bottom: "db1/3x3"
top: "db1/3x3"
relu_param {
negative_slope: 0.05000000074505806
}
}
layer {
name: "db1/1x1"
type: "Convolution"
bottom: "db1/3x3"
top: "db1/1x1"
param {
lr_mult: 1.0
decay_mult: 1.0
}
param {
lr_mult: 1.0
decay_mult: 0.0
}
convolution_param {
num_output: 32
bias_term: true
pad: 0
kernel_size: 1
group: 1
stride: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "db1/1x1/lrelu"
type: "ReLU"
bottom: "db1/1x1"
top: "db1/1x1"
relu_param {
negative_slope: 0.05000000074505806
}
}
layer {
name: "db1/concat"
type: "Concat"
bottom: "conv0"
bottom: "db1/1x1"
top: "db1/concat"
concat_param {
axis: 1
}
}
layer {
name: "db2/reduce"
type: "Convolution"
bottom: "db1/concat"
top: "db2/reduce"
param {
lr_mult: 1.0
decay_mult: 1.0
}
param {
lr_mult: 1.0
decay_mult: 0.0
}
convolution_param {
num_output: 8
bias_term: true
pad: 0
kernel_size: 1
group: 1
stride: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "db2/reduce/lrelu"
type: "ReLU"
bottom: "db2/reduce"
top: "db2/reduce"
relu_param {
negative_slope: 0.05000000074505806
}
}
layer {
name: "db2/3x3"
type: "Convolution"
bottom: "db2/reduce"
top: "db2/3x3"
param {
lr_mult: 1.0
decay_mult: 1.0
}
param {
lr_mult: 1.0
decay_mult: 0.0
}
convolution_param {
num_output: 8
bias_term: true
pad: 1
kernel_size: 3
group: 8
stride: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "db2/3x3/lrelu"
type: "ReLU"
bottom: "db2/3x3"
top: "db2/3x3"
relu_param {
negative_slope: 0.05000000074505806
}
}
layer {
name: "db2/1x1"
type: "Convolution"
bottom: "db2/3x3"
top: "db2/1x1"
param {
lr_mult: 1.0
decay_mult: 1.0
}
param {
lr_mult: 1.0
decay_mult: 0.0
}
convolution_param {
num_output: 32
bias_term: true
pad: 0
kernel_size: 1
group: 1
stride: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "db2/1x1/lrelu"
type: "ReLU"
bottom: "db2/1x1"
top: "db2/1x1"
relu_param {
negative_slope: 0.05000000074505806
}
}
layer {
name: "db2/concat"
type: "Concat"
bottom: "db1/concat"
bottom: "db2/1x1"
top: "db2/concat"
concat_param {
axis: 1
}
}
layer {
name: "upsample/reduce"
type: "Convolution"
bottom: "db2/concat"
top: "upsample/reduce"
param {
lr_mult: 1.0
decay_mult: 1.0
}
param {
lr_mult: 1.0
decay_mult: 0.0
}
convolution_param {
num_output: 32
bias_term: true
pad: 0
kernel_size: 1
group: 1
stride: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "upsample/reduce/lrelu"
type: "ReLU"
bottom: "upsample/reduce"
top: "upsample/reduce"
relu_param {
negative_slope: 0.05000000074505806
}
}
layer {
name: "upsample/deconv"
type: "Deconvolution"
bottom: "upsample/reduce"
top: "upsample/deconv"
param {
lr_mult: 1.0
decay_mult: 1.0
}
param {
lr_mult: 1.0
decay_mult: 0.0
}
convolution_param {
num_output: 32
bias_term: true
pad: 1
kernel_size: 3
group: 32
stride: 2
weight_filler {
type: "msra"
}
}
}
layer {
name: "upsample/lrelu"
type: "ReLU"
bottom: "upsample/deconv"
top: "upsample/deconv"
relu_param {
negative_slope: 0.05000000074505806
}
}
layer {
name: "upsample/rec"
type: "Convolution"
bottom: "upsample/deconv"
top: "upsample/rec"
param {
lr_mult: 1.0
decay_mult: 1.0
}
param {
lr_mult: 1.0
decay_mult: 0.0
}
convolution_param {
num_output: 1
bias_term: true
pad: 0
kernel_size: 1
group: 1
stride: 1
weight_filler {
type: "msra"
}
}
}
layer {
name: "nearest"
type: "Deconvolution"
bottom: "data"
top: "nearest"
param {
lr_mult: 0.0
decay_mult: 0.0
}
convolution_param {
num_output: 1
bias_term: false
pad: 0
kernel_size: 2
group: 1
stride: 2
weight_filler {
type: "constant"
value: 1.0
}
}
}
layer {
name: "Crop1"
type: "Crop"
bottom: "nearest"
bottom: "upsample/rec"
top: "Crop1"
}
layer {
name: "fc"
type: "Eltwise"
bottom: "Crop1"
bottom: "upsample/rec"
top: "fc"
eltwise_param {
operation: SUM
}
}

15
src/api/share/index.ts
View File

@@ -22,6 +22,10 @@ export const queryShareImageApi = (invite_code: string, access_password: string)
invite_code: invite_code,
access_password: access_password,
}, {
cacheFor: {
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {
ignoreToken: false,
signature: false,
@@ -35,6 +39,10 @@ export const queryShareRecordListApi = (dataRequest: string[]) => {
return service.Post('/api/auth/share/record/list', {
date_range: dataRequest,
}, {
cacheFor: {
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {
ignoreToken: false,
signature: false,
@@ -45,12 +53,13 @@ export const queryShareRecordListApi = (dataRequest: string[]) => {
* 查询分享信息
* @param invite_code
*/
export const queryShareInfoApi = (invite_code: string) => {
export const queryShareInfoApi = (invite_code: string, access_password: string) => {
return service.Post('/api/auth/share/info', {
invite_code: invite_code,
access_password: access_password,
}, {
cacheFor: {
expire: 60, //60 * 60 * 24 * 7
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {
@@ -65,7 +74,7 @@ export const queryShareInfoApi = (invite_code: string) => {
export const queryShareOverviewApi = () => {
return service.Post('/api/auth/share/overview', {}, {
cacheFor: {
expire: 60, //60 * 60 * 24 * 7
expire: 60 * 60 * 24 * 7,
mode: "restore",
},
meta: {

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

@@ -132,12 +132,12 @@ export const albumListApi = (type: number, sort: boolean) => {
* @param provider
* @param bucket
*/
export const queryAlbumDetailListApi = (id: number, provider: string, bucket: string,type:number) => {
export const queryAlbumDetailListApi = (id: number, provider: string, bucket: string, type: number) => {
return service.Post('/api/auth/storage/album/detail/list', {
id: id,
provider: provider,
bucket: bucket,
type:type,
type: type,
}, {
cacheFor: {
expire: 60 * 60 * 24 * 7,
@@ -439,3 +439,18 @@ export const albumShareApi = (id: number, expire_date: string, access_limit: num
name: "album-share",
});
};
/**
* 搜索照片
* @param data
*/
export const imageSearchApi = (data: any) => {
return service.Post('/api/auth/storage/image/search', {
...data,
}, {
meta: {
ignoreToken: false,
signature: false,
},
name: "image-search",
});
};

1
src/assets/svgs/anime.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

1
src/assets/svgs/face_detection.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740818066970" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26154" width="200" height="200"><path d="M512.00123469 860.48385406a348.48407156 348.48407156 0 1 1 348.48407156-348.48407156 348.48407156 348.48407156 0 0 1-348.48407156 348.48407156zM80.31659094 294.19723719A23.95828031 23.95828031 0 0 1 32.83563594 294.19723719V215.78832125a204.7343925 204.7343925 0 0 1 19.16662406-106.72324688A136.34439281 136.34439281 0 0 1 109.06652656 52.00080781 204.7343925 204.7343925 0 0 1 215.78977437 32.83418375H294.19869031a23.95828031 23.95828031 0 0 1 0 47.480955H215.78977437a162.04509375 162.04509375 0 0 0-84.07178249 13.93936219 87.12101812 87.12101812 0 0 0-37.02643313 37.02643312 162.04509375 162.04509375 0 0 0-14.37496781 84.50738719z m863.3692875 0V215.78832125a162.04509375 162.04509375 0 0 0-13.93936313-84.0717825 87.12101812 87.12101812 0 0 0-37.02643219-37.02643219 162.04509375 162.04509375 0 0 0-84.0717825-13.93936312H729.80378A23.95828031 23.95828031 0 1 1 729.80378 32.83418375h78.40891594a204.7343925 204.7343925 0 0 1 106.72324687 19.16662406 136.34439281 136.34439281 0 0 1 56.62866188 56.62866188A204.7343925 204.7343925 0 0 1 991.16683344 215.78832125V294.19723719a23.95828031 23.95828031 0 0 1-47.480955 0zM80.31659094 729.80232688v78.40891593a162.04509375 162.04509375 0 0 0 13.93936312 84.0717825 87.12101812 87.12101812 0 0 0 37.02643219 37.02643219 162.04509375 162.04509375 0 0 0 84.0717825 13.93936312H294.19869031A23.95828031 23.95828031 0 0 1 294.19869031 991.16538031H215.78977437a204.7343925 204.7343925 0 0 1-106.72324781-19.16662406 136.34439281 136.34439281 0 0 1-56.62866093-56.62866094A204.7343925 204.7343925 0 0 1 32.83563594 808.21124281V729.80232688a23.95828031 23.95828031 0 1 1 47.480955-1e-8z m862.93368281-1e-8a23.95828031 23.95828031 0 0 1 47.91655969 0v78.40891594a204.7343925 204.7343925 0 0 1-19.16662407 106.72324688 136.34439281 136.34439281 0 0 1-56.62866187 56.62866187 204.7343925 204.7343925 0 0 1-107.15885156 19.60222875H729.80378a23.95828031 23.95828031 0 0 1 0-47.48095406h78.40891594a162.04509375 162.04509375 0 0 0 84.07178156-13.93936313 87.12101812 87.12101812 0 0 0 37.02643312-37.02643312 162.04509375 162.04509375 0 0 0 13.93936313-84.07178156zM367.38034531 405.27653562a33.54159188 33.54159188 0 0 0-33.54159187 33.54159188v66.64757812a33.54159188 33.54159188 0 1 0 66.64757812 0V438.8181275a33.54159188 33.54159188 0 0 0-33.10598625-33.54159188z m289.67738438 0a33.54159188 33.54159188 0 0 0-33.54159188 33.54159188v66.64757812a33.54159188 33.54159188 0 1 0 66.64757907 0V438.8181275a33.54159188 33.54159188 0 0 0-33.54159282-33.54159188z m-298.82509125 239.58279844a261.36305344 261.36305344 0 0 0 151.59057094 54.01503188 261.36305344 261.36305344 0 0 0 156.81783187-56.19305719 23.95828031 23.95828031 0 0 0-30.05675062-37.02643219 212.13967875 212.13967875 0 0 1-127.19668594 47.91655969 212.57528344 212.57528344 0 0 1-122.84063531-43.56050906 23.95828031 23.95828031 0 0 0-28.74993657 37.8976425z" fill="#40D19E" p-id="26155"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

1
src/assets/svgs/gps.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740817807671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17787" width="200" height="200"><path d="M179.63369 398.281703m39.346378 0l655.467064 0q39.346378 0 39.346378 39.346378l0 445.696191q0 39.346378-39.346378 39.346378l-655.467064 0q-39.346378 0-39.346378-39.346378l0-445.696191q0-39.346378 39.346378-39.346378Z" fill="#9FD6FF" p-id="17788"></path><path d="M249.57006 330.333682l332.169081 122.81882-6.38566 179.677969 82.975354 118.574458 299.323077-237.225392 32.578342 41.105302-301.770276 239.175505 117.044959 167.250784-42.940702 30.092905-214.435848-306.358775-352.243764 258.370724-30.972367-42.290665 357.749962-262.423898 5.315012-149.929201L231.407252 379.507095l18.162808-49.173413z m170.539208 120.295145l32.578342 41.105303L121.856841 753.890366l-32.540104-41.105303 330.792531-262.194473z" fill="#FFFFFF" p-id="17789"></path><path d="M542.966326 119.951008v577.577297l165.950709-240.666767a209.312024 209.312024 0 0 0-165.912472-336.872292z" fill="#F53F59" p-id="17790"></path><path d="M691.901352 329.224795c0-115.553697-66.686184-209.273786-148.935026-209.273787a209.312024 209.312024 0 0 0-165.912472 336.872293l165.950709 240.705004 118.039134-240.666767c19.34817-35.331441 30.857655-79.572218 30.857655-127.598506z" fill="#FF5B73" p-id="17791"></path><path d="M542.966326 180.328006v297.870052a148.935026 148.935026 0 0 0 0-297.870052z" fill="#E7EAF1" p-id="17792"></path><path d="M631.524354 329.224795c0-82.210605-39.652278-148.896789-88.558028-148.896789a148.935026 148.935026 0 0 0 0 297.870052c48.943988 0 88.558028-66.686184 88.558028-148.935026z" fill="#FFFFFF" p-id="17793"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
src/assets/svgs/image.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

1
src/assets/svgs/landscape.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740817591785" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9225" width="200" height="200"><path d="M819.4 945H219.3c-40.7 0-73.7-33-73.7-73.7s33-73.7 73.7-73.7h600.1c40.7 0 73.7 33 73.7 73.7s-33 73.7-73.7 73.7z" fill="#E6EBEF" p-id="9226"></path><path d="M161.6 687l77.7-131 33.8 0.1 22.3 41.5h117.2l53.9 89.4z" fill="#9ADCCF" p-id="9227"></path><path d="M317.3 482.6l22.2 41.3h31.1l-56.5-99.3-32.9 57.9z" fill="#309AA5" p-id="9228"></path><path d="M161.6 687l77.7-131 33.8 0.1 22.3 41.5h117.2l53.9 89.4z" fill="#9ADCCF" p-id="9229"></path><path d="M856.3 339.6h-1.8c-14.7-37-50.7-63.2-92.9-63.2-55.2 0-100 44.8-100 100s44.8 100 100 100h94.8c37.8 0 68.4-30.6 68.4-68.4-0.1-37.7-30.7-68.4-68.5-68.4z" fill="#FFFFFF" p-id="9230"></path><path d="M838.6 532.1c-4.2-7.7-13.7-10.5-21.4-6.3-7.7 4.2-10.5 13.7-6.3 21.4l87.3 160.9H539L372.4 419.5l51.5-95.7 117.9 1.1 31.8 59c2.8 5.1 8.1 8.3 13.9 8.3h59.3c7.7 56.4 56.2 100 114.7 100h94.8c46.4 0 84.2-37.8 84.2-84.2 0-43.6-33.2-79.5-75.7-83.8-19.6-39-59.1-63.6-103.3-63.6-58.5 0-107 43.6-114.7 100h-49.9l-31.7-58.9c-2.7-5.1-8-8.3-13.8-8.3l-110.6-1 101.6-188.7c4-7.5 11.1-8.3 13.9-8.3 2.8 0 9.8 0.8 13.9 8.3l77.4 142.7c4.2 7.7 13.8 10.5 21.4 6.3 7.7-4.2 10.5-13.7 6.3-21.4L598 88.7c-8.3-15.3-24.2-24.8-41.6-24.8h-0.1c-17.4 0-33.4 9.6-41.6 24.9L353.8 387.6C345 374 330.4 366 314.1 366c-17.1 0-32.5 8.9-41 23.7L84.6 716c-2.8 4.9-2.8 10.9 0 15.8s8 7.9 13.7 7.9h105.3c8.7 0 15.8-7.1 15.8-15.8 0-8.7-7.1-15.8-15.8-15.8h-77.9l100.6-174.2c1.1 0.3 2.3 0.4 3.5 0.5l56 0.6 17.9 33.2c2.8 5.1 8.1 8.3 13.9 8.3h107.2c0.6 0 1.2-0.1 1.8-0.2l76.1 131.8H286.4c-8.7 0-15.8 7.1-15.8 15.8 0 8.7 7.1 15.8 15.8 15.8h638.3c5.6 0 10.7-2.9 13.6-7.7s3-10.7 0.3-15.6l-100-184.3z m-77.1-239.9c34.7 0 65.4 20.9 78.2 53.2 2.4 6 8.2 10 14.7 10h1.8c29 0 52.6 23.6 52.6 52.6s-23.6 52.6-52.6 52.6h-94.8c-46.4 0-84.2-37.8-84.2-84.2s37.9-84.2 84.3-84.2zM326.9 544.9l-17.8-33.1c-2.7-5.1-8-8.2-13.7-8.3l-51.3-0.6 56.3-97.6c4.1-7.1 10.9-7.9 13.7-7.9 2.7 0 9.6 0.8 13.7 7.9l80.6 139.5h-81.5zM622 797.6c0-8.7-7.1-15.8-15.8-15.8H219.3c-8.7 0-15.8 7.1-15.8 15.8 0 8.7 7.1 15.8 15.8 15.8h386.9c8.8 0 15.8-7.1 15.8-15.8z" fill="#4F3D3B" p-id="9231"></path><path d="M761.5 781.8h-79.3c-8.7 0-15.8 7.1-15.8 15.8 0 8.7 7.1 15.8 15.8 15.8h79.3c11.6 0 21.1 9.4 21.1 21.1s-9.4 21.1-21.1 21.1h-400c-29 0-52.6 23.6-52.6 52.6s23.6 52.6 52.6 52.6h77.7c8.7 0 15.8-7.1 15.8-15.8 0-8.7-7.1-15.8-15.8-15.8h-77.7c-11.6 0-21.1-9.4-21.1-21.1s9.4-21.1 21.1-21.1h400.1c29 0 52.6-23.6 52.6-52.6s-23.6-52.6-52.7-52.6z" fill="#4F3D3B" p-id="9232"></path><path d="M693.1 929.2H517.3c-8.7 0-15.8 7.1-15.8 15.8 0 8.7 7.1 15.8 15.8 15.8h175.8c8.7 0 15.8-7.1 15.8-15.8 0-8.7-7.1-15.8-15.8-15.8z" fill="#4F3D3B" p-id="9233"></path><path d="M650.2 297l-93.9-174.5L475.8 272l97.6 0.5 36.1 67.1h20.2c4.4-15.5 11.4-29.8 20.5-42.6z" fill="#309AA5" p-id="9234"></path><path d="M761.5 513.3c-62.7 0-115.7-42.4-131.8-100h-64.2L529.3 346l-93.2-0.3-39.9 74.1L551.3 687H863l-95.3-173.7h-6.2z" fill="#9ADCCF" p-id="9235"></path><path d="M777.3 339.6c0-8.1 0.9-16 2.6-23.6-5.8-1.8-12-2.7-18.4-2.7-34.8 0-63.2 28.3-63.2 63.2s28.3 63.2 63.2 63.2H841c-37.6-17.7-63.7-55.8-63.7-100.1z" fill="#E6EBEF" p-id="9236"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

1
src/assets/svgs/lock-2.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740715601761" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40902" width="200" height="200"><path d="M375.332095 389.692009V239.398216C375.332095 156.157148 436.640855 88.436725 512.006633 88.436725c78.222284 0 136.674537 71.461296 136.674537 135.352409v165.902875h88.436725V223.789134C737.117895 104.576428 631.926832 0 512.006633 0 387.881267 0 286.89537 107.393138 286.89537 239.398216v150.293793h88.436725z" fill="#B0B5B5" p-id="40903"></path><path d="M511.997789 286.278524C308.61543 286.278524 143.141473 451.752481 143.141473 655.139262s165.473957 368.860738 368.856316 368.860738c203.391203 0 368.860738-165.473957 368.860738-368.860738s-165.460691-368.860738-368.860738-368.860738z" fill="#4E6070" p-id="40904"></path><path d="M562.711829 725.813471c0 27.999067-22.706129 50.71404-50.71404 50.71404-28.012333 0-50.71404-22.714973-50.71404-50.71404v-154.167322c0-28.007911 22.701707-50.71404 50.71404-50.71404 28.007911 0 50.71404 22.706129 50.71404 50.71404v154.167322z" fill="#00CCC6" p-id="40905"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
src/assets/svgs/lock.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740714908215" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16607" width="200" height="200"><path d="M754.601984 428.032V297.82016c0-128.970752-105.525248-234.496-234.496-234.496h-19.53792c-128.974848 0-234.496 105.525248-234.496 234.496v130.21184h488.52992z" fill="#A6A6C9" p-id="16608"></path><path d="M785.321984 458.752H235.352064V297.82016c0-146.239488 118.976512-265.216 265.216-265.216h19.53792c146.239488 0 265.216 118.976512 265.216 265.216V458.752zM296.792064 397.312h427.08992V297.82016c0-112.361472-91.410432-203.776-203.776-203.776h-19.53792c-112.361472 0-203.776 91.414528-203.776 203.776V397.312z" fill="#5A5A7D" p-id="16609"></path><path d="M182.04672 429.944832c-50.642944 0-91.844608 41.201664-91.844608 91.844608v359.559168c0 50.642944 41.201664 91.844608 91.844608 91.844608h656.584704c50.642944 0 91.844608-41.201664 91.844608-91.844608V521.78944c0-50.642944-41.201664-91.844608-91.844608-91.844608H182.04672z" fill="#F0D754" p-id="16610"></path><path d="M838.631424 1003.913216H182.04672c-67.584 0-122.564608-54.980608-122.564608-122.564608V521.78944c0-67.584 54.980608-122.564608 122.564608-122.564608h656.584704c67.584 0 122.564608 54.980608 122.564608 122.564608v359.559168c0 67.584-54.980608 122.564608-122.564608 122.564608zM182.04672 460.664832c-33.705984 0-61.124608 27.418624-61.124608 61.124608v359.559168c0 33.705984 27.418624 61.124608 61.124608 61.124608h656.584704c33.705984 0 61.124608-27.418624 61.124608-61.124608V521.78944c0-33.705984-27.418624-61.124608-61.124608-61.124608H182.04672z" fill="#5A5A7D" p-id="16611"></path><path d="M359.194624 407.252992V328.237056c0-93.130752 43.446272-169.320448 145.1008-169.320448h12.095488c101.650432 0 145.096704 76.189696 145.096704 169.320448v79.015936" fill="#FFFFFF" p-id="16612"></path><path d="M692.20352 407.252992h-61.44V328.237056c0-51.761152-14.860288-138.600448-114.376704-138.600448h-12.095488c-42.717184 0-114.3808 18.006016-114.3808 138.600448v79.015936h-61.44V328.237056c0-123.392 67.371008-200.040448 175.8208-200.040448h12.095488c108.449792 0 175.816704 76.648448 175.816704 200.040448v79.015936z" fill="#5A5A7D" p-id="16613"></path><path d="M567.68512 735.232c0 27.144192-22.007808 49.152-49.152 49.152h-16.384c-27.144192 0-49.152-22.007808-49.152-49.152v-90.112c0-27.144192 22.007808-49.152 49.152-49.152h16.384c27.144192 0 49.152 22.007808 49.152 49.152v90.112z" fill="#FFFFFF" p-id="16614"></path><path d="M518.53312 815.104h-16.384c-44.040192 0-79.872-35.831808-79.872-79.872v-90.112c0-44.040192 35.831808-79.872 79.872-79.872h16.384c44.040192 0 79.872 35.831808 79.872 79.872v90.112c0 44.040192-35.831808 79.872-79.872 79.872z m-16.384-188.416a18.45248 18.45248 0 0 0-18.432 18.432v90.112c0 10.162176 8.269824 18.432 18.432 18.432h16.384c10.162176 0 18.432-8.269824 18.432-18.432v-90.112c0-10.162176-8.269824-18.432-18.432-18.432h-16.384z" fill="#5A5A7D" p-id="16615"></path><path d="M817.410048 958.857216H184.832c-65.728512 0-119.205888-57.58976-119.205888-128.376832h61.44c0 36.909056 25.915392 66.936832 57.765888 66.936832h632.578048c31.850496 0 57.769984-30.027776 57.769984-66.936832v-382.30016h61.44v382.30016c0 70.787072-53.477376 128.376832-119.209984 128.376832z" fill="#5A5A7D" opacity=".3" p-id="16616"></path><path d="M190.464 626.688a30.72 30.72 0 0 1-30.72-30.72V524.288a30.72 30.72 0 0 1 30.72-30.72h102.4a30.72 30.72 0 0 1 0 61.44H221.184v40.96a30.72 30.72 0 0 1-30.72 30.72z" fill="#FFFFFF" p-id="16617"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

1
src/assets/svgs/nsfw.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740817174614" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4307" width="200" height="200"><path d="M204.8 59.733333A42.666667 42.666667 0 0 0 128 85.333333v341.333334a42.666667 42.666667 0 0 0 85.333333 0V213.333333l179.2 238.933334A42.666667 42.666667 0 0 0 469.333333 426.666667V85.333333a42.666667 42.666667 0 1 0-85.333333 0v213.333334L204.8 59.733333zM640 42.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v85.333333a85.333333 85.333333 0 0 0 85.333333 85.333334h170.666667v85.333333h-213.333334a42.666667 42.666667 0 0 0 0 85.333333h213.333334a85.333333 85.333333 0 0 0 85.333333-85.333333V298.666667a85.333333 85.333333 0 0 0-85.333333-85.333334h-170.666667V128h213.333333a42.666667 42.666667 0 1 0 0-85.333333h-213.333333zM128 597.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h256a42.666667 42.666667 0 1 1 0 85.333333H213.333333v85.333333h213.333334a42.666667 42.666667 0 1 1 0 85.333334H213.333333v128a42.666667 42.666667 0 0 1-85.333333 0v-341.333334zM640 597.333333a42.666667 42.666667 0 1 0-85.333333 0v341.333334a42.666667 42.666667 0 0 0 79.232 21.973333L725.333333 808.277333l91.392 152.32A42.666667 42.666667 0 0 0 896 938.666667v-341.333334a42.666667 42.666667 0 1 0-85.333333 0v187.306667l-48.725334-81.237333a42.666667 42.666667 0 0 0-73.216 0L640 784.64V597.333333z" p-id="4308"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
src/assets/svgs/params.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740824489351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29190" width="200" height="200"><path d="M641.07 786.68l-20.36 1.63q-54.27 4.34-108.71 4.35-54.74 0-109.37-4.35l-20.35-1.63a159.13 159.13 0 0 1-146-146l-1.63-20.35q-4.35-54.43-4.35-109t4.35-109l1.63-20.36a159.15 159.15 0 0 1 146-146l20.35-1.62q54.44-4.35 109-4.35t109 4.35l20.44 1.65A159.15 159.15 0 0 1 787 381.93l1.63 20.36q4.35 54.43 4.35 109t-4.35 109L787 640.72a159.13 159.13 0 0 1-145.93 145.96z" fill="#CAE0FF" p-id="29191"></path><path d="M622 725.3a90.65 90.65 0 1 1 90.65-90.65A90.75 90.75 0 0 1 622 725.3z m0-126.3a35.65 35.65 0 1 0 35.65 35.65A35.69 35.69 0 0 0 622 599z" fill="#1A5F8E" p-id="29192"></path><path d="M751.83 662.46h-65.66a27.5 27.5 0 0 1 0-55h65.66a27.5 27.5 0 0 1 0 55zM552.31 662.26H275.17a27.5 27.5 0 0 1 0-55h277.14a27.5 27.5 0 0 1 0 55zM405 480.3a90.65 90.65 0 1 1 90.65-90.65A90.76 90.76 0 0 1 405 480.3z m0-126.3a35.65 35.65 0 1 0 35.65 35.65A35.69 35.69 0 0 0 405 354z" fill="#1A5F8E" p-id="29193"></path><path d="M340.83 416.84h-65.66a27.5 27.5 0 0 1 0-55h65.66a27.5 27.5 0 0 1 0 55zM751.83 417H474.69a27.5 27.5 0 0 1 0-55h277.14a27.5 27.5 0 0 1 0 55z" fill="#1A5F8E" p-id="29194"></path><path d="M513.56 913.5c-49.36 0-99.35-2-148.56-5.92a273.28 273.28 0 0 1-250.65-250.66c-3.93-49.21-5.93-99.19-5.93-148.55s2-99.35 5.93-148.56A273.28 273.28 0 0 1 365 109.15c49.21-3.93 99.19-5.92 148.56-5.92s99.35 2 148.56 5.92A273.31 273.31 0 0 1 912.77 359.8c3.93 49.22 5.92 99.2 5.92 148.57s-2 99.34-5.92 148.55a273.31 273.31 0 0 1-250.65 250.66c-49.07 3.91-98.9 5.91-148.11 5.92z m144.18-60.75l2.19 27.41-2.19-27.41a218.28 218.28 0 0 0 200.2-200.21c3.82-47.75 5.75-96.26 5.75-144.17s-1.93-96.42-5.75-144.18A218.28 218.28 0 0 0 657.74 164c-47.76-3.81-96.27-5.75-144.18-5.75s-96.42 1.94-144.18 5.75a218.3 218.3 0 0 0-200.21 200.19c-3.81 47.75-5.75 96.26-5.75 144.18s1.94 96.42 5.75 144.17a218.3 218.3 0 0 0 200.21 200.21c47.91 3.83 96.55 5.75 144.61 5.75 47.77-0.01 96.13-1.95 143.75-5.75z" fill="#1A5F8E" p-id="29195"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

1
src/assets/svgs/qr.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740731044915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="54228" width="200" height="200"><path d="M424.228571 58.514286a43.885714 43.885714 0 0 1 43.885715 43.885714v336.457143a43.885714 43.885714 0 0 1-43.885715 43.885714H87.771429a43.885714 43.885714 0 0 1-43.885715-43.885714V102.4a43.885714 43.885714 0 0 1 43.885715-43.885714h336.457142z m-38.034285 81.92H125.805714v260.388571h260.388572V140.434286zM424.228571 526.628571a43.885714 43.885714 0 0 1 43.885715 43.885715v336.457143a43.885714 43.885714 0 0 1-43.885715 43.885714H87.771429a43.885714 43.885714 0 0 1-43.885715-43.885714V570.514286a43.885714 43.885714 0 0 1 43.885715-43.885715h336.457142z m-38.034285 81.92H125.805714v260.388572h260.388572V608.548571zM936.228571 58.514286a43.885714 43.885714 0 0 1 43.885715 43.885714v336.457143a43.885714 43.885714 0 0 1-43.885715 43.885714H599.771429a43.885714 43.885714 0 0 1-43.885715-43.885714V102.4a43.885714 43.885714 0 0 1 43.885715-43.885714h336.457142z m-38.034285 81.92H637.805714v260.388571h260.388572V140.434286z" fill="#FFAA3C" p-id="54229"></path><path d="M775.314286 526.628571a43.885714 43.885714 0 0 1 43.885714 43.885715v131.642514h73.142857V570.514286a43.885714 43.885714 0 1 1 87.771429 0v175.542857a43.885714 43.885714 0 0 1-43.885715 43.885714l-0.438857-0.014628L775.314286 789.942857a43.885714 43.885714 0 0 1-43.885715-43.885714v-131.671772h-87.771428V906.971429a43.885714 43.885714 0 1 1-87.771429 0V570.514286a43.885714 43.885714 0 0 1 43.885715-43.885715h175.542857z" fill="#FFAA3C" p-id="54230"></path><path d="M307.2 307.2v-73.142857a14.628571 14.628571 0 0 0-14.628571-14.628572h-73.142858a14.628571 14.628571 0 0 0-14.628571 14.628572v73.142857a14.628571 14.628571 0 0 0 14.628571 14.628571h73.142858a14.628571 14.628571 0 0 0 14.628571-14.628571zM307.2 775.314286v-73.142857a14.628571 14.628571 0 0 0-14.628571-14.628572h-73.142858a14.628571 14.628571 0 0 0-14.628571 14.628572v73.142857a14.628571 14.628571 0 0 0 14.628571 14.628571h73.142858a14.628571 14.628571 0 0 0 14.628571-14.628571zM819.2 307.2v-73.142857a14.628571 14.628571 0 0 0-14.628571-14.628572h-73.142858a14.628571 14.628571 0 0 0-14.628571 14.628572v73.142857a14.628571 14.628571 0 0 0 14.628571 14.628571h73.142858a14.628571 14.628571 0 0 0 14.628571-14.628571z" fill="#FFAA3C" p-id="54231"></path><path d="M980.114286 906.971429a43.885714 43.885714 0 0 1-43.885715 43.885714H731.428571a43.885714 43.885714 0 1 1 0-87.771429h204.8a43.885714 43.885714 0 0 1 43.885715 43.885715z" fill="#FFAA3C" p-id="54232"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
src/assets/svgs/screenshot.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740817678701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11225" width="200" height="200"><path d="M113.777778 170.666667h796.444444v682.666666H113.777778z" fill="#FCCF2A" p-id="11226"></path><path d="M133.404444 848.042667a28.444444 28.444444 0 0 1-41.358222-39.025778l215.779556-228.864a28.444444 28.444444 0 0 1 41.528889 0.227555l136.533333 147.569778a28.444444 28.444444 0 1 1-41.699556 38.627556l-115.882666-125.212445-194.901334 206.677334z" fill="#333333" p-id="11227"></path><path d="M434.688 863.914667a28.444444 28.444444 0 0 1-46.08-33.28l273.92-379.619556a28.444444 28.444444 0 0 1 45.852444-0.398222l225.507556 302.136889a28.444444 28.444444 0 1 1-45.568 34.019555l-202.296889-271.075555-251.335111 348.16zM325.006222 464.782222a85.333333 85.333333 0 1 1 0-170.666666 85.333333 85.333333 0 0 1 0 170.666666z m0-56.888889a28.444444 28.444444 0 1 0 0-56.888889 28.444444 28.444444 0 0 0 0 56.888889z" fill="#333333" p-id="11228"></path><path d="M143.36 203.776v768a28.444444 28.444444 0 0 1-56.888889 0v-796.444444a28.444444 28.444444 0 0 1 28.444445-28.444445h879.274666a28.444444 28.444444 0 0 1 0 56.888889H143.36z" fill="#333333" p-id="11229"></path><path d="M882.915556 829.553778v-768a28.444444 28.444444 0 0 1 56.888888 0v796.444444a28.444444 28.444444 0 0 1-28.444444 28.444445H28.558222a28.444444 28.444444 0 1 1 0-56.888889H882.915556z" fill="#333333" p-id="11230"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/assets/svgs/target.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740817893065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21882" width="200" height="200"><path d="M704 128a192 192 0 0 1 192 192v384a192 192 0 0 1-192 192H320a192 192 0 0 1-192-192V320a192 192 0 0 1 192-192h384zM540.224 307.584l-4.8 0.704a24 24 0 0 0-17.472 29.12l17.408 69.824-93.184 23.232-17.408-69.888a24 24 0 0 0-46.528 11.648l17.408 69.824-69.888 17.472a24 24 0 1 0 11.648 46.528l69.824-17.408 23.232 93.184-69.888 17.408a24 24 0 0 0 11.648 46.528l69.824-17.408 17.472 69.888a24 24 0 1 0 46.528-11.648l-17.408-69.824 93.184-23.232 17.408 69.888a24 24 0 1 0 46.528-11.648l-17.408-69.824 69.888-17.472a24 24 0 1 0-11.648-46.528l-69.824 17.408-23.232-93.184 69.888-17.408a24 24 0 1 0-11.648-46.528l-69.824 17.408L564.48 325.76a24 24 0 0 0-29.056-17.472z m6.72 146.24l23.232 93.12-93.12 23.232-23.232-93.12 93.12-23.232z" fill="#FF8F49" p-id="21883"></path><path d="M320 320m128 0l320 0q128 0 128 128l0 320q0 128-128 128l-320 0q-128 0-128-128l0-320q0-128 128-128Z" fill="#FFFFFF" fill-opacity=".178" p-id="21884"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
src/assets/svgs/time.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740826105291" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31334" width="200" height="200"><path d="M102.4 102.4m307.2 0l204.8 0q307.2 0 307.2 307.2l0 204.8q0 307.2-307.2 307.2l-204.8 0q-307.2 0-307.2-307.2l0-204.8q0-307.2 307.2-307.2Z" fill="#50CCCC" p-id="31335"></path><path d="M512 256c141.38368 0 256 114.61632 256 256s-114.61632 256-256 256-256-114.61632-256-256 114.61632-256 256-256z m2.56 71.68h-5.12a23.04 23.04 0 0 0-23.04 23.04v158.72c0 7.04 3.15904 13.34784 8.1408 17.56672 0.896 2.4576 2.2272 4.8128 4.00896 6.93248l102.02112 121.58464a23.04 23.04 0 0 0 32.4608 2.8416l3.92192-3.29216a23.04 23.04 0 0 0 2.83648-32.4608L537.76896 501.03296l-0.16384-0.19456L537.6 350.72a23.04 23.04 0 0 0-23.04-23.04z" fill="#FFFFFF" fill-opacity=".8" p-id="31336"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 831 B

1
src/assets/svgs/unlock.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1740715637818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="44690" width="200" height="200"><path d="M546.7 818.9l-6.1-2.4C344 738.9 321.3 637.6 321.3 568.1V302.6l17.5 0.6c136.6 4.7 194.8-58.2 195.3-58.8l12.5-14 34.8 6.8c0.5 0.5 49.8 18 174.9 18l19.4 34.7c4.7 0-26.3 13.4-21.3 13.2l17.6-0.6V568c0 69.5-22.7 170.9-219.3 248.4l-6 2.5z" fill="#25B195" p-id="44691"></path><path d="M511 880.1l-7.7-3c-248.7-97-277.5-223.8-277.5-310.7v-332l22.2 0.8c172.9 5.9 246.5-72.8 247.2-73.6l15.9-17.5 15.8 17.5c0.6 0.6 70.3 73.9 228.7 73.9 6 0 12.2-0.1 18.4-0.3l22.2-0.8v332c0 86.9-28.8 213.7-277.5 310.7l-7.7 3zM268.8 278.8v287.6c0 46.7 0 170.2 242.3 267.3 242.3-97.1 242.3-220.5 242.3-267.3V278.8c-134.2-0.5-211.4-48.7-242.4-73.6-30.9 24.8-108.1 73-242.2 73.6z m49.9 251.6" fill="#595857" p-id="44692"></path><path d="M517.4 646.6L385 509.8l26.7 8.2 94.1 35.3c31.4-37.9 80.3-104.9 176.4-164.7l23.5-11.8c-88.2 82.3-165.4 210.5-188.3 269.8z m167.3-149.4" fill="#595857" p-id="44693"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

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>

182
src/layout/default/Header/Search.vue
View File

@@ -3,42 +3,88 @@
<APopover :arrow="false" :overlayInnerStyle="{width: '28vw'}"
trigger="click">
<AInput size="large" class="header-search-input"
v-model:value="searchStore.searchValue"
@focus="handleInputFocus"
@blur="handleInputBlur"
:style="{borderRadius: borderRadius, boxShadow: boxShadow}"
:placeholder="searchStore.searchOption[0]? '#'+searchStore.searchOption[0] : '搜索...'"
@pressEnter="search"
>
<template #suffix>
<AButton size="small" type="text" shape="circle" @click.prevent>
<template #icon>
<AAvatar size="small" shape="circle" :src="search"/>
<APopover :arrow="false" trigger="click" placement="bottom">
<template #content>
<div class="header-search-params-container">
<div class="header-search-params-item" v-for="(item, index) in searchStore.options" :key="index">
<CheckCard
class="photo-item"
margin="10"
border-radius="50%"
v-model="searchStore.searchOption"
:showHoverCircle="true"
:iconSize="20"
:showSelectedEffect="true"
:selection-mode="'single'"
:value="item.value">
<AAvatar size="large" shape="circle" :src="item.icon"/>
</CheckCard>
<span class="photo-item-label">{{ item.label }}</span>
</div>
</div>
</template>
<AAvatar size="small" shape="circle"
:src="searchStore.getIconByValue(searchStore.searchOption[0])? searchStore.getIconByValue(searchStore.searchOption[0]) : params"/>
</APopover>
</template>
</AButton>
</template>
</AInput>
<template #content>
<AFlex :vertical="false" align="center" justify="space-between" class="header-search-content-header">
<span>搜索历史</span>
<AButton type="text" size="small" style="color: #707072">清空搜索历史</AButton>
</AFlex>
<div class="header-search-content-body">
<ATag :style="{
padding: '5px 15px',
fontSize: '15px',
cursor: 'pointer',
marginTop: '20px',
}" :bordered="false" closable>搜索历史1
</ATag>
<div class="header-search-time" v-if="searchStore.searchOption[0] === 'time'">
<ARangePicker
:value="selectedDateRange"
:disabled-date="disabledDate"
format="YYYY-MM-DD"
@change="onChange"
@openChange="onOpenChange"
@calendarChange="onCalendarChange"
:bordered="true"
size="large"
style="border-radius: 20px"
/>
</div>
<!-- <AFlex :vertical="false" align="center" justify="space-between" class="header-search-content-header">-->
<!-- <span>搜索历史</span>-->
<!-- <AButton type="text" size="small" style="color: #707072">清空搜索历史</AButton>-->
<!-- </AFlex>-->
<!-- <div class="header-search-content-body">-->
<!-- <ATag :style="{-->
<!-- padding: '5px 15px',-->
<!-- fontSize: '15px',-->
<!-- cursor: 'pointer',-->
<!-- marginTop: '20px',-->
<!-- }" :bordered="false" closable>搜索历史1-->
<!-- </ATag>-->
<!-- </div>-->
</template>
</APopover>
</AFlex>
</template>
<script setup lang="ts">
import search from "@/assets/svgs/search.svg";
import params from "@/assets/svgs/params.svg";
import useStore from "@/store";
import 'dayjs/locale/zh-cn';
import dayjs, {Dayjs} from 'dayjs';
import {imageSearchApi} from "@/api/storage";
dayjs.locale('zh-cn');
const borderRadius = ref('20px');
const boxShadow = ref('none');
const searchStore = useStore().search;
const uploadStore = useStore().upload;
/**
* 监听输入框聚焦事件
@@ -54,6 +100,62 @@ const handleInputBlur = () => {
borderRadius.value = '20px'; // 失去焦点时圆角恢复
boxShadow.value = 'none'; // 失去焦点时阴影消失
};
type RangeValue = [Dayjs, Dayjs];
const dates = ref<RangeValue>();
const selectedDateRange = ref<RangeValue>();
const hackValue = ref<RangeValue>();
const disabledDate = (current: Dayjs) => {
if (!dates.value || (dates.value as any).length === 0) {
return false;
}
const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 30;
const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 30;
return tooEarly || tooLate;
};
const onOpenChange = (open: boolean) => {
if (open) {
dates.value = [] as any;
hackValue.value = [] as any;
} else {
hackValue.value = undefined;
}
};
const onChange = async (val: RangeValue) => {
selectedDateRange.value = val;
// 将日期范围处理成一个数组
if (val && val.length === 2) {
const startDate = val[0].format('YYYY-MM-DD'); // 格式化开始日期
const endDate = val[1].format('YYYY-MM-DD'); // 格式化结束日期
searchStore.searchValue = `[${startDate}, ${endDate}]`; // 将日期范围存入数组
} else {
console.log('No date range selected');
}
};
const onCalendarChange = (val: RangeValue) => {
dates.value = val;
};
async function search() {
const params: any = {
type: searchStore.searchOption[0],
keyword: searchStore.searchValue,
provider: uploadStore.storageSelected?.[0],
bucket: uploadStore.storageSelected?.[1],
input_image: "123"
};
const res: any = await imageSearchApi(params);
console.log(res);
}
</script>
@@ -69,4 +171,56 @@ const handleInputBlur = () => {
margin-top: 10px;
}
}
.header-search-params-container {
width: 230px;
height: 200px;
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
justify-content: flex-start;
gap: 25px;
.header-search-params-item {
width: 100px;
height: 40px;
display: flex;
align-items: center;
gap: 15px;
.photo-item-label {
font-size: 14px;
font-weight: bolder;
}
}
}
.header-search-time {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.header-search-picture {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
gap: 20px;
.avatar-uploader {
width: 100px;
height: 100px;
}
.header-search-picture-info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 10px;
}
}
</style>

10
src/router/modules/phone_upload.ts
View File

@@ -16,5 +16,15 @@ export default [
requiresAuth: false,
title: '手机上传'
}
},
{
path: '/main/image/phone/app',
name: 'imageApp',
component: () => import('@/views/Phone/CommonPhoneUpload/CommonPhoneUpload.vue'),
meta: {
requiresAuth: false,
title: '手机上传'
}
}
];

2
src/store/index.ts
View File

@@ -8,6 +8,7 @@ import {useMenuStore} from "@/store/modules/menuStore.ts";
import {useUploadStore} from "@/store/modules/uploadStore.ts";
import {useImageStore} from "@/store/modules/imageStore.ts";
import {useShareStore} from "@/store/modules/shareStore.ts";
import {useSearchStore} from "@/store/modules/searchStore.ts";
export default function useStore() {
return {
@@ -21,5 +22,6 @@ export default function useStore() {
upload: useUploadStore(),
image: useImageStore(),
share: useShareStore(),
search: useSearchStore(),
};
}

10
src/store/modules/imageStore.ts
View File

@@ -37,6 +37,7 @@ export const useImageStore = defineStore(
"1": "我的分享",
"2": "我的收藏",
});
const albumIdList = ref<number[]>([]);
// 相册分享弹窗相关
const openAlbumShareDialog = ref<boolean>(false);
@@ -49,6 +50,10 @@ export const useImageStore = defineStore(
const faceList = ref<any[]>([]);
const faceListLoading = ref<boolean>(false);
// 图片编辑
const imageEditVisible = ref<boolean>(false);
/**
* 获取人脸列表
*/
@@ -118,6 +123,8 @@ export const useImageStore = defineStore(
faceListLoading,
openAlbumShareDialog,
JustifiedLayoutOptions,
albumIdList,
imageEditVisible,
countTotalImages,
openAlbumShareDialogHandler,
getAlbumList,
@@ -137,7 +144,8 @@ export const useImageStore = defineStore(
"homeTabMap",
"switchValue",
"faceSelectedKey",
"albumList"
"albumList",
"albumIdList"
],
}
}

60
src/store/modules/searchStore.ts Normal file
View File

@@ -0,0 +1,60 @@
import {defineStore} from 'pinia';
import {ref} from "vue";
import time from "@/assets/svgs/time.svg";
import location from "@/assets/svgs/location-album.svg";
import people from "@/assets/svgs/people-album.svg";
import thing from "@/assets/svgs/thing-album.svg";
import image from "@/assets/svgs/image.svg";
export const useSearchStore = defineStore(
'search',
() => {
const options = reactive([
{
label: '时间',
value: 'time',
icon: time
}, {
label: '地点',
value: 'location',
icon: location
}, {
label: '人物',
value: 'person',
icon: people
},
{
label: '事物',
value: 'thing',
icon: thing
}, {
label: '图片',
value: 'picture',
icon: image
}
]);
const searchOption = ref<string>(options[0].value);
const searchValue = ref<string>('');
const getIconByValue = (value: string) => {
const option = options.find(option => option.value === value);
return option ? option.icon : undefined;
};
return {
searchOption,
options,
searchValue,
getIconByValue
};
},
{
// 开启数据持久化
persistedState: {
persist: true,
storage: localStorage,
key: 'search',
includePaths: ['searchOption', 'options']
}
}
);

12
src/store/modules/shareStore.ts
View File

@@ -3,6 +3,8 @@ export const useShareStore = defineStore(
() => {
const sharePassword = reactive<Record<string, string>>({});
const openCommentDrawer = ref<boolean>(false);
// 获取密码（保持相同API）
const getPassword = (key: string): string | undefined => {
return sharePassword[key];
@@ -12,17 +14,23 @@ export const useShareStore = defineStore(
const addPassword = (key: string, password: string) => {
sharePassword[key] = password;
};
function setOpenCommentDrawer(value: boolean): void {
openCommentDrawer.value = value;
};
return {
sharePassword,
getPassword,
addPassword
addPassword,
openCommentDrawer,
setOpenCommentDrawer
};
},
{
// 开启数据持久化
persistedState: {
persist: true,
storage: localStorage,
storage: sessionStorage,
key: 'share',
includePaths: ['sharePassword']
}

263
src/store/modules/uploadStore.ts
View File

@@ -1,5 +1,19 @@
// import localforage from 'localforage';
import imageCompression from "browser-image-compression";
import {message, type UploadProps} 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 {getCategoryByLabel} from "@/constant/coco_ssd_label_category.ts";
import exifr from "exifr";
import isScreenshot from "@/utils/imageUtils/isScreenshot.ts";
import {ready, scan} from 'qr-scanner-wechat';
interface UploadPredictResult {
isAnime: boolean;
tagName: string | null;
@@ -13,6 +27,7 @@ interface UploadPredictResult {
thumb_w: number | null;
thumb_h: number | null;
thumb_size: number | null;
hasQrcode: boolean;
}
export const useUploadStore = defineStore(
@@ -33,11 +48,45 @@ export const useUploadStore = defineStore(
thumb_w: null,
thumb_h: null,
thumb_size: null,
hasQrcode: false,
});
const uploadSetting = reactive<any>({
nsfw_detection: true,
anime_detection: true,
landscape_detection: true,
screenshot_detection: true,
gps_detection: true,
target_detection: false,
qrcode_detection: true,
face_detection: true,
});
const storageSelected = ref<any[]>([]);
const albumSelected = ref<number>(0);
const albumSelected = ref<number>();
const predicting = ref<boolean>(false);
const progressPercent = ref<number>(0);
const progressStatus = ref<string>('active');
const image = new Image();
// 压缩图片配置
const options = reactive({
maxSizeMB: 0.2,
maxWidthOrHeight: 750,
maxIteration: 2,
useWebWorker: true,
});
const progress: UploadProps['progress'] = {
strokeColor: {
'0%': '#108ee9',
'100%': '#87d068',
},
strokeWidth: 3,
format: (percent: any) => `${parseFloat(percent.toFixed(2))}%`,
class: 'progress-bar',
};
const fileList = ref<any[]>([]);
/**
* 打开上传抽屉
@@ -62,8 +111,208 @@ export const useUploadStore = defineStore(
predictResult.thumb_w = null;
predictResult.thumb_h = null;
predictResult.thumb_size = null;
predictResult.hasQrcode = false;
}
/**
* 图片上传前的校验
* @param file
* @param fileList
*/
async function beforeUpload(file: File, fileList: File[]) {
predicting.value = true;
clearPredictResult();
progressPercent.value = 0; // 初始化进度条
progressStatus.value = 'active'; // 开始状态
// 压缩图片
const compressedFile = await imageCompression(file, options);
// 创建图片对象
image.src = URL.createObjectURL(compressedFile);
// 获取图片宽高
image.onload = async () => {
const {width, height} = image;
predictResult.width = width;
predictResult.height = height;
// 二维码检测
if (uploadSetting.qrcode_detection) {
await ready();
const result = await scan(image);
if (result.text) {
predictResult.hasQrcode = true;
}
}
};
// 更新进度条函数，逐步增加
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 {
// 动态计算启用的检测步骤及进度分配
const enabledSteps = [
uploadSetting.nsfw_detection,
uploadSetting.gps_detection,
uploadSetting.screenshot_detection,
uploadSetting.anime_detection,
uploadSetting.target_detection || uploadSetting.landscape_detection
].filter(Boolean).length;
const stepIncrement = enabledSteps > 0 ? Math.floor(100 / enabledSteps) : 100;
let currentProgress = 0;
// NSFW 检测
if (uploadSetting.nsfw_detection) {
const nsfw: NSFWJS = await initNSFWJs();
await smoothUpdateProgress(currentProgress + stepIncrement, 500);
currentProgress += stepIncrement;
const isNSFW: boolean = await predictNSFW(nsfw, image);
if (isNSFW) {
message.error(i18n.global.t('comment.illegalImage'));
progressStatus.value = 'exception';
fileList.pop();
predicting.value = false;
return false;
}
}
// GPS 数据提取
if (uploadSetting.gps_detection) {
const gpsData = await extractGPSExifData(file);
if (gpsData) {
predictResult.longitude = gpsData.longitude;
predictResult.latitude = gpsData.latitude;
}
await smoothUpdateProgress(currentProgress + stepIncrement, 500);
currentProgress += stepIncrement;
}
// 截图检测
if (uploadSetting.screenshot_detection) {
predictResult.isScreenshot = await isScreenshot(file);
await smoothUpdateProgress(currentProgress + stepIncrement, 500);
currentProgress += stepIncrement;
}
// 动漫检测
if (uploadSetting.anime_detection) {
const prediction = await animePredictImagePro(image);
if (prediction === 'Furry' || prediction === 'Anime') {
predictResult.isAnime = true;
predicting.value = false;
progressPercent.value = 100;
return true;
}
await smoothUpdateProgress(currentProgress + stepIncrement, 500);
currentProgress += stepIncrement;
}
// 目标检测
if (uploadSetting.target_detection) {
const cocoResults: any = await cocoSsdPredict(image);
if (cocoResults.length > 0) {
// 取置信度最高的结果
// 如果只有一个结果，直接取第一个
if (cocoResults.length === 1) {
predictResult.topCategory = getCategoryByLabel(cocoResults[0].class);
predictResult.tagName = cocoResults[0].class;
} else {
// 多个结果时，按 score 排序，取置信度最高的结果
const sortedResults = cocoResults.sort((a, b) => b.score - a.score);
predictResult.topCategory = getCategoryByLabel(sortedResults[0].class);
predictResult.tagName = sortedResults[0].class;
}
}
await smoothUpdateProgress(currentProgress + stepIncrement, 500);
currentProgress += stepIncrement;
}
if (uploadSetting.landscape_detection) {
const landscape = await predictLandscape(image);
predictResult.landscape = landscape as 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | null;
await smoothUpdateProgress(currentProgress + stepIncrement, 500);
}
// 确保进度条到100%
if (currentProgress < 100) {
await smoothUpdateProgress(100, 500);
}
predicting.value = false;
return true;
} catch (error) {
console.error('识别过程中发生错误:', error);
predicting.value = false;
progressPercent.value = 0; // 重置进度条
return false;
}
}
/**
* 提取 EXIF 数据
* @param {File} file - 图片文件
* @returns {Promise<Object|null>} - 返回所有 EXIF 数据或 null（如果格式不支持或提取失败）
*/
async function extractGPSExifData(file): Promise<{ latitude: any; longitude: any; } | null> {
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;
}
/**
* 拒绝文件回调
* @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);
}
onMounted(async () => {
await ready();
});
return {
openUploadDrawer,
@@ -71,7 +320,17 @@ export const useUploadStore = defineStore(
storageSelected,
openUploadDrawerFn,
clearPredictResult,
beforeUpload,
albumSelected,
options,
predicting,
progressPercent,
progressStatus,
uploadSetting,
progress,
fileList,
rejectFile,
removeFile,
};
},
{
@@ -80,7 +339,7 @@ export const useUploadStore = defineStore(
persist: true,
storage: localStorage,
key: 'upload',
includePaths: ["storageSelected", "albumSelected"]
includePaths: ["storageSelected", "albumSelected", "uploadSetting"]
}
}
);

10
src/utils/QRDetection/qr_detection.ts
View File

@@ -1,10 +0,0 @@
import OpencvQr from "opencv-qr";
/**
* OpenCV QR detection class
*/
const opencvQr = new OpencvQr({
dw: "/caffemodel/detect.caffemodel",
sw: "/caffemodel/sr.caffemodel",
});
export default opencvQr;

2
src/utils/alova/service.ts
View File

@@ -50,7 +50,7 @@ export const service = createAlova({
const user = useStore().user;
method.config.headers.Authorization = `${import.meta.env.VITE_APP_TOKEN_KEY} ${user.token.accessToken}`;
method.config.headers['X-UID'] = user.user.uid;
method.config.headers['X-Expire-At'] = user.token.expireAt;
// method.config.headers['X-Expire-At'] = user.token.expireAt;
}
const lang = useStore().lang;
method.config.headers['Accept-Language'] = lang.lang || 'zh';

15
src/utils/imageUtils/bytesToSize.ts Normal file
View File

@@ -0,0 +1,15 @@
export function bytesToSize(bytes: number, decimals = 2): string {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
// 使用示例
// console.log(bytesToSize(1024)); // 输出: 1 KB
// console.log(bytesToSize(123456789)); // 输出: 117.74 MB

193
src/views/Phone/CommonPhoneUpload/CommonPhoneUpload.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<div class="common-phone-upload">
<div class="upload-controller">
<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"
:allow-clear="true"
:field-names="{label: 'name', value: 'id'}"
>
</ASelect>
</div>
<div class="upload-content">
<div class="upload">
<AUploadDragger
v-model:fileList="upload.fileList"
:beforeUpload="upload.beforeUpload"
:customRequest="customUploadRequest"
:directory="false"
:maxCount="10"
:multiple="true"
:disabled="upload.predicting"
:progress="upload.progress"
@remove="upload.removeFile"
@reject="upload.rejectFile"
:openFileDialogOnClick="true"
accept="image/*,video/*"
list-type="picture"
method="post"
name="file"
>
<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>
<p v-show="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%"/>
</AUploadDragger>
</div>
<AEmpty :image="empty" v-if="fileList.length === 0">
<template #description>
<span style="color: #999999;font-size: 16px;font-weight: 500;line-height: 1.5;">
上传列表为空，点击或直接拖动文件到此区域上传。
</span>
</template>
</AEmpty>
</div>
</div>
</template>
<script setup lang="ts">
import setting from "@/assets/svgs/setting.svg";
import {albumListApi, uploadFile} from "@/api/storage";
import useStore from "@/store";
import empty from "@/assets/svgs/empty.svg";
import {useRequest} from "alova/client";
import imageCompression from "browser-image-compression";
import {generateThumbnail} from "@/utils/imageUtils/generateThumb.ts";
import UploadSetting from "@/components/ImageUpload/UploadSetting.vue";
// const route = useRoute();
const fileList = ref([]);
const predicting = ref<boolean>(false);
const progressPercent = ref<number>(0);
const progressStatus = ref<string>('active');
// const accessToken = computed(() => {
// const token = route.query.token;
// return Array.isArray(token) ? token[0] : token;
// });
// const userId = computed(() => {
// const uid = route.query.user_id;
// return Array.isArray(uid) ? uid[0] : uid;
// });
const upload = useStore().upload;
const albumList = ref<any[]>([]);
/**
* 获取相册列表
*/
const {send: getAlbumList} = useRequest(albumListApi, {
immediate: false,
debounce: 500,
}).onSuccess((res: any) => {
if (res && res.code === 200) {
albumList.value = res.data.albums;
}
});
const {uploading, send: submitFile} = useRequest(uploadFile, {
immediate: false,
debounce: 500,
});
/**
* 自定义上传请求
* @param file
*/
async function customUploadRequest(file: any) {
const compressedFile = await imageCompression(file.file, upload.options);
// 生成缩略图
const {binaryData, width, height, size} = await generateThumbnail(compressedFile);
upload.predictResult.thumb_w = width;
upload.predictResult.thumb_h = height;
upload.predictResult.thumb_size = size;
const formData = new FormData();
formData.append("file", file.file);
if (binaryData) {
formData.append("thumbnail", binaryData);
}
formData.append("data", JSON.stringify({
provider: upload.storageSelected?.[0],
bucket: upload.storageSelected?.[1],
fileType: file.file.type,
albumId: upload.albumSelected ? upload.albumSelected : 0,
...upload.predictResult,
}));
watch(
() => uploading.value,
(upload) => {
if (upload && upload.loaded && upload.total) {
file.onProgress({percent: Number(Math.round((upload.loaded / upload.total) * 100).toFixed(2))}, file);
}
},
);
submitFile(formData).then((response: any) => {
if (response && response.code === 200) {
file.onSuccess(response.data, file);
} else {
file.onError(response.data, file);
}
}).catch(file.onError);
}
onMounted(() => {
getAlbumList(0, true);
});
</script>
<style scoped lang="scss">
.common-phone-upload {
width: 90%;
height: 95vh;
padding: 15px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
.upload-controller {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 20px;
}
.upload-content {
width: 100%;
height: calc(95vh - 60px);
.upload {
width: 100%;
height: 30vh;
}
}
}
</style>

12
src/views/Share/ImageShare/ShareUpload.vue
View File

@@ -37,6 +37,7 @@
:icon="phone"
:iconSize="iconSize"
:status="qrStatus"
@refresh="initWebSocket"
/>
</template>
<AButton type="default" size="large" shape="round" style="width: 70%"
@@ -68,15 +69,16 @@
上传文件
</AUpload>
</AMenuItem>
<AMenuItem key="2">
<APopover placement="bottomLeft" trigger="hover">
<AMenuItem key="2" @click.stop="initWebSocket">
<APopover placement="bottomLeft" trigger="click" :arrow="false">
<template #content>
<AQrcode :bordered="false" color="rgba(126, 126, 135, 0.48)"
:size="qrcodeSize"
:value="`git.landaiqing.cneyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiNjI1MTEyMjE3MzQyMDIxIiwidHlwZSI6ImFjY2VzcyIsImV4cCI6MTczOTg3ODIyOCwibmJmIjoxNzM5ODcxMDI4LCJpYXQiOjE3Mzk4NzEwMjh9.EUiZsVjhGqHx1V5o90S3W5li6nIqucxy9eEY9LWgqXY`"
:value="generateQrCodeUrl()"
:icon="phone"
:iconSize="iconSize"
:status="`active`"
:status="qrStatus"
@refresh="initWebSocket"
/>
</template>
手机上传
@@ -208,7 +210,6 @@ import {generateThumbnail} from "@/utils/imageUtils/generateThumb.ts";
const titleName = ref<string>("");
const upload = useStore().upload;
const percent = ref<number>(0);
const uploadSuccess = ref<boolean>(false);
const qrContainer = ref<HTMLDivElement | null>(null);
@@ -429,7 +430,6 @@ const wsOptions = {
};
function generateQrCodeUrl(): string {
console.log(import.meta.env.VITE_APP_WEB_URL + "/main/share/phone/app?user_id=" + user.user.uid + "&token=" + user.token.accessToken);
return import.meta.env.VITE_APP_WEB_URL + "/main/share/phone/app?user_id=" + user.user.uid + "&token=" + user.token.accessToken;
}

35
src/views/Share/ShareViewList/CommentModal.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<ADrawer v-model:open="shareStore.openCommentDrawer" placement="right" title="评论" width="750px"
:bodyStyle="drawerCSS"
@close="shareStore.setOpenCommentDrawer(false)">
<CommentReply :topic-id="topicId"/>
</ADrawer>
</template>
<script setup lang="ts">
import useStore from "@/store";
import CommentReply from "@/components/CommentReply/index.vue";
const shareStore = useStore().share;
defineProps({
topicId: {
type: String,
required: true,
},
});
const drawerCSS = computed(() => {
return {
'display': 'flex',
'flex-direction': 'column',
'align-items': 'center',
'justify-content': 'flex-start',
};
});
</script>
<style scoped lang="scss">
</style>

54
src/views/Share/ShareViewList/ShareSidebar.vue
View File

@@ -19,7 +19,10 @@
<p>{{ shareInfo.album_name }}</p>
<p style="color: #de3333; font-size: 12px">{{ formatTimeWithChinese(shareInfo.expire_time) }} 失效</p>
<AButton type="primary" size="large" shape="round">已加入，去查看</AButton>
<AButton type="link" size="small" style="font-size: 13px">复制链接</AButton>
<AButton type="link" size="small" style="font-size: 13px"
@click="()=>copyToClipboard(shareInfo.invite_code)">
复制链接
</AButton>
</div>
<div class="share-sidebar-body-bottom">
<div class="share-sidebar-body-bottom-item">
@@ -39,22 +42,26 @@
<div class="share-sidebar-footer">
</div>
</div>
<div v-else class="share-sidebar-verify">
<AAvatar :size="80" :src="lock" shape="square"/>
<p style="color: #999999">请先输入密码后查看</p>
</div>
</template>
<script setup lang="ts">
import {queryShareInfoApi} from "@/api/share";
import lock from "@/assets/svgs/lock.svg";
import default_cover from "@/assets/images/default-cover.png";
import {message} from "ant-design-vue";
const coverImageSize = ref<number>(130);
const shareInfo = ref<any>();
const route = useRoute();
async function getShareInfo(invite_code: string) {
const res: any = await queryShareInfoApi(invite_code);
if (res && res.code === 200) {
shareInfo.value = res.data;
defineProps({
shareInfo: {
type: Object,
default: () => {
}
}
}
});
function formatTimeWithChinese(dateString) {
const date = new Date(dateString);
@@ -65,11 +72,15 @@ function formatTimeWithChinese(dateString) {
return `${year}年${month}月${day}日`;
}
onMounted(() => {
const invite_code = route.params.id;
const code = Array.isArray(invite_code) ? invite_code[0] : invite_code;
getShareInfo(code);
});
// 复制功能
function copyToClipboard(text: string) {
const url: string = import.meta.env.VITE_APP_WEB_URL + '/main/share/list/' + text;
navigator.clipboard.writeText(url).then(() => {
message.success('复制成功');
}).catch(() => {
message.error('复制失败');
});
}
</script>
<style scoped lang="scss">
.share-sidebar {
@@ -154,4 +165,19 @@ onMounted(() => {
height: 15%;
}
}
.share-sidebar-verify {
width: 220px;
height: 100%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
overflow-y: auto;
overflow-x: hidden;
background-color: #fff;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 20px;
}
</style>

59
src/views/Share/ShareViewList/index.vue
View File

@@ -5,19 +5,30 @@
<Header/>
</div>
<div class="share-view-content">
<ShareSidebar/>
<ShareSidebar :share-info="shareInfo"/>
<div class="share-view-content-container">
<div class="share-content-header">
<AButton type="link" size="large" class="share-content-header-button">图片列表</AButton>
<AAvatar size="small" shape="square" :src="imageList && imageList.length === 0? lock2 : unlock"/>
</div>
<div class="share-content-verify"
v-if="imageList && imageList.length <= 0 && !shareStore.getPassword(route.params.id as string)">
v-if="imageList && imageList.length === 0 && !getPassword">
<AInputPassword size="large" placeholder="请输入访问密码" style="width: 20%"
@pressEnter="(e)=>getShareImages(e.target.value)"/>
<p style="font-size: 12px;color: #999;">回车后可查看图片列表</p>
</div>
<ImageWaterfallList :image-list="imageList"/>
<div v-else class="share-content-list">
<ImageWaterfallList :image-list="imageList"/>
</div>
</div>
<AFloatButton tooltip="评论" :badge="{ count: 5, color: 'green' }"
@click="shareStore.setOpenCommentDrawer(true)"
>
<template #icon>
<CommentOutlined/>
</template>
</AFloatButton>
<CommentModal :topic-id="getInviteCode"/>
</div>
</div>
</template>
@@ -25,10 +36,12 @@
import Header from "@/layout/default/Header/Header.vue";
import ShareSidebar from "@/views/Share/ShareViewList/ShareSidebar.vue";
import {queryShareImageApi} from "@/api/share";
import lock2 from "@/assets/svgs/lock-2.svg";
import unlock from "@/assets/svgs/unlock.svg";
import {queryShareImageApi, queryShareInfoApi} from "@/api/share";
import ImageWaterfallList from "@/components/ImageWaterfallList/ImageWaterfallList.vue";
import useStore from "@/store";
import CommentModal from "@/views/Share/ShareViewList/CommentModal.vue";
const imageList = ref<any[]>([]);
@@ -36,6 +49,8 @@ const route = useRoute();
const imageStore = useStore().image;
const shareStore = useStore().share;
const shareInfo = ref<any>();
/**
* 获取分享图片列表
@@ -49,16 +64,32 @@ async function getShareImages(password: string) {
if (res && res.code === 200) {
imageList.value = res.data.records;
shareStore.addPassword(code, password);
await getShareInfo(code, password);
}
imageStore.imageListLoading = false;
}
onMounted(() => {
async function getShareInfo(invite_code: string, password: string) {
const res: any = await queryShareInfoApi(invite_code, password);
if (res && res.code === 200) {
shareInfo.value = res.data;
}
}
const getPassword = computed(() => {
const invite_code = route.params.id;
const code = Array.isArray(invite_code) ? invite_code[0] : invite_code;
const password = shareStore.getPassword(code);
if (password) {
getShareImages(password);
return shareStore.getPassword(code);
});
const getInviteCode = computed(() => {
const invite_code = route.params.id;
return Array.isArray(invite_code) ? invite_code[0] : invite_code;
});
onMounted(() => {
if (getPassword.value) {
getShareImages(getPassword.value);
}
});
@@ -83,7 +114,6 @@ onMounted(() => {
.share-view-content-container {
width: calc(100vw - 230px);
height: calc(100vh - 100px);
max-height: calc(100vh - 100px);
padding: 15px;
overflow: auto;
@@ -94,7 +124,7 @@ onMounted(() => {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
//gap: 10px;
border-bottom: 1px solid #e2e2e2;
.share-content-header-button {
@@ -108,7 +138,7 @@ onMounted(() => {
}
.share-content-verify {
width: 100%;
width: calc(100vw - 230px);
height: calc(100vh - 155px);
display: flex;
flex-direction: column;
@@ -116,6 +146,11 @@ onMounted(() => {
justify-content: center;
gap: 10px;
}
.share-content-list {
width: calc(100vw - 230px);
height: calc(100vh - 155px);
}
}
}