From 02c0307a0e2138789e853e952e45af42b474e43c Mon Sep 17 00:00:00 2001 From: PeterAlbus Date: Wed, 22 Nov 2023 17:57:17 +0800 Subject: [PATCH] Optimized photo wall and other details. --- components.d.ts | 1 + index.html | 2 +- src/assets/main.css | 15 +++++ src/components/PhotoItem.vue | 107 ++++++++++++++++++++++++++++++++ src/views/Home.vue | 9 ++- src/views/blog/About.vue | 1 + src/views/blog/Blog.vue | 1 + src/views/blog/EditBlog.vue | 30 ++++----- src/views/blog/Types.vue | 5 +- src/views/photo/Photo.vue | 43 ++++--------- src/views/photo/UploadPhoto.vue | 8 +-- src/views/user/UserCenter.vue | 2 +- 12 files changed, 165 insertions(+), 59 deletions(-) create mode 100644 src/components/PhotoItem.vue diff --git a/components.d.ts b/components.d.ts index bacd702..0ad6091 100644 --- a/components.d.ts +++ b/components.d.ts @@ -37,6 +37,7 @@ declare module '@vue/runtime-core' { MessageBox: typeof import('./src/components/MessageBox.vue')['default'] MusicPlayer: typeof import('./src/components/MusicPlayer.vue')['default'] PersonalInfo: typeof import('./src/components/PersonalInfo.vue')['default'] + PhotoItem: typeof import('./src/components/PhotoItem.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] TopNavBar: typeof import('./src/components/TopNavBar.vue')['default'] diff --git a/index.html b/index.html index 8ce65e2..70dee2a 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/assets/main.css b/src/assets/main.css index 2135381..706fb59 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -106,6 +106,21 @@ a { padding: 10px; } +.blog-description .blog-description-title { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: start; +} + +.blog-description .blog-description-title.title-text { + white-space: nowrap; + display: inline-block; + max-width: calc(100% - 65px); + overflow: hidden; + text-overflow: ellipsis; +} + .info { height: 20px; } diff --git a/src/components/PhotoItem.vue b/src/components/PhotoItem.vue new file mode 100644 index 0000000..475d6f1 --- /dev/null +++ b/src/components/PhotoItem.vue @@ -0,0 +1,107 @@ + + + + + diff --git a/src/views/Home.vue b/src/views/Home.vue index c9ecff4..bf8f7fd 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -42,7 +42,9 @@
-

{{ item.blogTitle }} {{ getType(item.blogType) }} +

+ {{item.blogTitle}}  + {{getType(item.blogType)}}

{{ item.blogDescription }}

@@ -67,8 +69,9 @@
-

{{ item.blogTitle }}  - {{ getType(item.blogType) }} +

+ {{item.blogTitle}}  + {{getType(item.blogType)}}

{{ item.blogDescription }}

diff --git a/src/views/blog/About.vue b/src/views/blog/About.vue index 9735dd4..d3c8e4c 100644 --- a/src/views/blog/About.vue +++ b/src/views/blog/About.vue @@ -12,6 +12,7 @@ :boxShadow="false" :subfield="false" defaultOpen="preview" :editable="false" codeStyle="xcode" :toolbarsFlag="false" + :toolbars="{}" :shortCut="false" />
diff --git a/src/views/blog/Blog.vue b/src/views/blog/Blog.vue index 887534b..23f279b 100644 --- a/src/views/blog/Blog.vue +++ b/src/views/blog/Blog.vue @@ -12,6 +12,7 @@ :boxShadow="false" :subfield="false" defaultOpen="preview" :editable="false" codeStyle="xcode" :toolbarsFlag="false" + :toolbars="{}" :shortCut="false" />
diff --git a/src/views/blog/EditBlog.vue b/src/views/blog/EditBlog.vue index c117999..1417bc3 100644 --- a/src/views/blog/EditBlog.vue +++ b/src/views/blog/EditBlog.vue @@ -22,6 +22,8 @@ +   + 取消图片上传 @@ -175,6 +177,10 @@ const beforeAvatarUpload = (file: UploadRawFile) => { if (!isLt2M) { ElMessage.error("图片大小不能超过2M！"); } + + if(isIMG && isLt2M && imageUrl.value) { + deleteBlogAvatarFile() + } return isIMG && isLt2M; }; @@ -194,6 +200,11 @@ const deleteImage = (info:any) => { }) } +const deleteBlogAvatarFile = () => { + deletePhotoByUrl(imageUrl.value) + imageUrl.value = "" +} + const onSubmit = async (formEl: FormInstance | undefined) => { if (!formEl) return; await formEl.validate((valid, fields) => { @@ -221,25 +232,6 @@ onMounted(() => {