From 46e6b49c02647ea9a100190862f867ae295d422e Mon Sep 17 00:00:00 2001
From: landaiqing <landaiqing@126.com>
Date: Wed, 27 Nov 2024 18:59:11 +0800
Subject: [PATCH] :art: optimized code

---
 package.json                                  |  4 +--
 .../src/CommentInput/CommentInput.vue         | 12 +++++----
 .../src/ReplyInput/ReplyInput.vue             | 14 +++++------
 .../src/ReplyReplyInput/ReplyReply.vue        | 14 +++++------
 src/layout/Landing/Footer/Footer.vue          |  2 +-
 src/layout/default/Header/Header.vue          |  7 +++---
 src/layout/default/Header/index.scss          |  7 ++++++
 src/store/modules/commentStore.ts             | 12 +++++----
 src/views/Forget/ForgetPage.vue               | 17 +++++++------
 src/views/Login/LoginFooter.vue               |  4 +--
 src/views/Login/LoginPage.vue                 | 25 +++++++++++++------
 src/views/QRLogin/QRLogin.vue                 |  2 +-
 src/views/QRLogin/index.scss                  |  2 +-
 vite.config.ts                                |  2 +-
 14 files changed, 74 insertions(+), 50 deletions(-)

diff --git a/package.json b/package.json
index eb54cc6..bffb5d0 100644
--- a/package.json
+++ b/package.json
@@ -54,14 +54,14 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
-    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitejs/plugin-vue": "^5.2.1",
     "eslint-plugin-vue": "^9.31.0",
     "globals": "^15.12.0",
     "sass": "^1.81.0",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.15.0",
     "unplugin-vue-components": "^0.27.4",
-    "vite": "^6.0.0",
+    "vite": "^6.0.1",
     "vite-plugin-bundle-obfuscator": "1.3.1",
     "vite-plugin-chunk-split": "^0.5.0",
     "vue-tsc": "^2.1.10"
diff --git a/src/components/CommentReply/src/CommentInput/CommentInput.vue b/src/components/CommentReply/src/CommentInput/CommentInput.vue
index e785d85..ce44559 100644
--- a/src/components/CommentReply/src/CommentInput/CommentInput.vue
+++ b/src/components/CommentReply/src/CommentInput/CommentInput.vue
@@ -168,7 +168,7 @@ async function commentSubmit(point: any) {
     images: comment.imageList,
     author: user.user.uid,
     point: [point.x, point.y],
-    key: comment.slideCaptchaData.key,
+    key: comment.slideCaptchaData.captKey,
   };
   const result: any = await commentSubmitApi(commentParams);
   if (result.code === 200) {
@@ -182,8 +182,8 @@ async function commentSubmit(point: any) {
       created_time: result.data.created_time,
       browser: result.data.browser,
       operating_system: result.data.operating_system,
-      reply_count: result.data.reply_count,
-      likes: result.data.likes,
+      reply_count: 0,
+      likes: 0,
       author: result.data.author,
       location: result.data.location,
       is_liked: false,
@@ -193,13 +193,15 @@ async function commentSubmit(point: any) {
       comment.commentList.comments = []; // 初始化 comments 数组
     }
     comment.commentList.comments.unshift(tmpData);
+    comment.commentMap[result.data.id] = tmpData;
+
     commentContent.value = "";
     await comment.clearFileList();
     showSubmitCaptcha.value = false;
     message.success(t('comment.commentSuccess'));
   } else {
     await comment.getSlideCaptchaData();
-    message.error(result.message || t('comment.commentError'));
+    message.warning(result.message || t('comment.commentError'));
   }
 }
 
@@ -215,7 +217,7 @@ async function showSlideCaptcha() {
     return;
   }
   if (comment.imageList.length > 3) {
-    message.error(t('comment.maxImageCount'));
+    message.warning(t('comment.maxImageCount'));
     return;
   }
   const res = await comment.getSlideCaptchaData();
diff --git a/src/components/CommentReply/src/ReplyInput/ReplyInput.vue b/src/components/CommentReply/src/ReplyInput/ReplyInput.vue
index 4e6b599..6385876 100644
--- a/src/components/CommentReply/src/ReplyInput/ReplyInput.vue
+++ b/src/components/CommentReply/src/ReplyInput/ReplyInput.vue
@@ -158,7 +158,7 @@ async function replySubmit(point: any) {
     return;
   }
   if (comment.imageList.length > 3) {
-    message.error(t('comment.maxImageCount'));
+    message.warning(t('comment.maxImageCount'));
     return;
   }
   const content = replyContent.value.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
@@ -183,7 +183,7 @@ async function replySubmit(point: any) {
     reply_id: props.item.id,
     reply_user: props.item.user_id,
     point: [point.x, point.y],
-    key: comment.slideCaptchaData.key,
+    key: comment.slideCaptchaData.captKey,
   };
   const result: any = await replySubmitApi(replyParams);
   if (result.code === 200) {
@@ -198,8 +198,8 @@ async function replySubmit(point: any) {
       browser: result.data.browser,
       operating_system: result.data.operating_system,
       location: result.data.location,
-      likes: result.data.likes,
-      reply_count: result.data.reply_count,
+      reply_count: 0,
+      likes: 0,
       reply_user: result.data.reply_user,
       nickname: user.user.nickname,
       avatar: user.user.avatar,
@@ -218,7 +218,7 @@ async function replySubmit(point: any) {
     message.success(t('comment.replySuccess'));
   } else {
     await comment.getSlideCaptchaData();
-    message.error(t('comment.replyError'));
+    message.warning(t('comment.replyError'));
   }
 }
 
@@ -229,11 +229,11 @@ const getSlideCaptchaDataThrottled = useThrottleFn(comment.getSlideCaptchaData,
  */
 async function showSlideCaptcha() {
   if (replyContent.value.trim() === "") {
-    message.error(t('comment.commentContentNotEmpty'));
+    message.warning(t('comment.commentContentNotEmpty'));
     return;
   }
   if (comment.imageList.length > 3) {
-    message.error(t('comment.maxImageCount'));
+    message.warning(t('comment.maxImageCount'));
     return;
   }
   const res = await comment.getSlideCaptchaData();
diff --git a/src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue b/src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue
index 6b5ed88..d918ad3 100644
--- a/src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue
+++ b/src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue
@@ -169,7 +169,7 @@ async function replyReplySubmit(point: any) {
     return;
   }
   if (comment.imageList.length > 3) {
-    message.error(t('comment.maxImageCount'));
+    message.warning(t('comment.maxImageCount'));
     return;
   }
   const content = replyReplyContent.value.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
@@ -186,7 +186,7 @@ async function replyReplySubmit(point: any) {
     reply_id: props.item.id,
     reply_user: props.child.user_id,
     point: [point.x, point.y],
-    key: comment.slideCaptchaData.key,
+    key: comment.slideCaptchaData.captKey,
   };
   const result: any = await replyReplySubmitApi(replyParams);
   if (result.code === 200) {
@@ -201,8 +201,8 @@ async function replyReplySubmit(point: any) {
       browser: result.data.browser,
       operating_system: result.data.operating_system,
       location: result.data.location,
-      likes: result.data.likes,
-      reply_count: result.data.reply_count,
+      reply_count: 0,
+      likes: 0,
       reply_user: result.data.reply_user,
       nickname: user.user.nickname,
       avatar: user.user.avatar,
@@ -224,7 +224,7 @@ async function replyReplySubmit(point: any) {
     message.success(t('comment.replySuccess'));
   } else {
     await comment.getSlideCaptchaData();
-    message.error(t('comment.replyError'));
+    message.warning(t('comment.replyError'));
   }
 }
 
@@ -235,11 +235,11 @@ const getSlideCaptchaDataThrottled = useThrottleFn(comment.getSlideCaptchaData,
  */
 async function showSlideCaptcha() {
   if (replyReplyContent.value.trim() === "") {
-    message.error(t('comment.commentContentNotEmpty'));
+    message.warning(t('comment.commentContentNotEmpty'));
     return;
   }
   if (comment.imageList.length > 3) {
-    message.error(t('comment.maxImageCount'));
+    message.warning(t('comment.maxImageCount'));
     return;
   }
   const res = await comment.getSlideCaptchaData();
diff --git a/src/layout/Landing/Footer/Footer.vue b/src/layout/Landing/Footer/Footer.vue
index 7573dfd..1e160fe 100644
--- a/src/layout/Landing/Footer/Footer.vue
+++ b/src/layout/Landing/Footer/Footer.vue
@@ -13,7 +13,7 @@
       </div>
       <div class="landing-footer-content-right">
         <div class="landing-footer-content-right-left">
-          <AQrcode :value="'https://git.landaiqing.cn'" :size="120" :bordered="false"
+          <AQrcode :value="'3517283258'" :size="120" :bordered="false"
                    :icon="qq"
                    :iconSize="20"
           />
diff --git a/src/layout/default/Header/Header.vue b/src/layout/default/Header/Header.vue
index 1d521f8..08bb103 100644
--- a/src/layout/default/Header/Header.vue
+++ b/src/layout/default/Header/Header.vue
@@ -2,8 +2,8 @@
   <header class="header-main">
     <div class="header-container">
       <AFlex :vertical="false" align="center" justify="flex-end" class="header-logo-container">
-        <AAvatar :size="50" :src="logo"/>
-        <img style="width: 200px;" src="@/assets/images/logo.png" alt="logo">
+        <AAvatar :size="50" shape="square" :src="logo" @click="router.push('/')"/>
+        <span class="header-logo-text" @click="router.push('/')">S.Album</span>
       </AFlex>
       <AFlex :vertical="false" align="center" justify="flex-end" class="header-menu-container">
         <AFlex :vertical="false" align="center" justify="flex-start" class="header-menu-item">
@@ -34,7 +34,7 @@
   </header>
 </template>
 <script lang="ts" setup>
-import logo from "@/assets/svgs/logo-schisandra.svg";
+import logo from "@/assets/svgs/logo-album.svg";
 import useStore from "@/store";
 import {BellOutlined, TranslationOutlined} from "@ant-design/icons-vue";
 import {h} from "vue";
@@ -43,6 +43,7 @@ import {useI18n} from "vue-i18n";
 const user = useStore().user;
 const {t, locale} = useI18n();
 const lang = useStore().lang;
+const router = useRouter();
 
 /**
  *  切换语言
diff --git a/src/layout/default/Header/index.scss b/src/layout/default/Header/index.scss
index 7c66620..37b2660 100644
--- a/src/layout/default/Header/index.scss
+++ b/src/layout/default/Header/index.scss
@@ -23,6 +23,13 @@
         justify-content: space-between;
         width: 1200px;
         max-width: 1200px;
+
+        .header-logo-text {
+            margin-left: 10px;
+            font-size: 25px;
+            font-family: "Comic Sans MS", cursive;
+            font-weight: bolder;
+        }
     }
 
     .header-logo-container {
diff --git a/src/store/modules/commentStore.ts b/src/store/modules/commentStore.ts
index 02e4350..5aef77b 100644
--- a/src/store/modules/commentStore.ts
+++ b/src/store/modules/commentStore.ts
@@ -20,7 +20,7 @@ export const useCommentStore = defineStore(
         const replyList = ref<Comment>({} as Comment);
         const commentMap = reactive<any>({});
         const slideCaptchaData = reactive({
-            key: "",
+            captKey: "",
             image: "",
             thumb: "",
             thumbWidth: 0,
@@ -55,9 +55,11 @@ export const useCommentStore = defineStore(
             if (result.code === 200 && result.data) {
                 commentList.value = result.data;
                 commentLoading.value = false;
-                commentList.value.comments.forEach((item: any) => {
-                    commentMap[item.id] = item;
-                });
+                if (Array.isArray(commentList.value.comments)) {
+                    commentList.value.comments.map((item: any) => {
+                        commentMap[item.id] = item;
+                    });
+                }
             } else {
                 commentLoading.value = false;
             }
@@ -147,7 +149,7 @@ export const useCommentStore = defineStore(
             const res: any = await getSlideCaptchaDataApi();
             if (res.code == 200 && res.data) {
                 const {key, image, thumb, thumb_width, thumb_height, thumb_x, thumb_y} = res.data;
-                slideCaptchaData.key = key;
+                slideCaptchaData.captKey = key;
                 slideCaptchaData.image = image;
                 slideCaptchaData.thumb = thumb;
                 slideCaptchaData.thumbWidth = thumb_width;
diff --git a/src/views/Forget/ForgetPage.vue b/src/views/Forget/ForgetPage.vue
index 027e538..ed748bf 100644
--- a/src/views/Forget/ForgetPage.vue
+++ b/src/views/Forget/ForgetPage.vue
@@ -94,6 +94,7 @@
             title: t('login.rotateCaptchaTitle'),
           }"
           :events="resetPasswordRotateEvent"
+          :ref="resetPasswordRotate"
       />
     </AModal>
     <div class="area">
@@ -127,10 +128,11 @@ import {useDebounceFn} from "@vueuse/core";
 const router = useRouter();
 const {t} = useI18n();
 const resetPasswordRef = ref();
-const captchaData = reactive({angle: 0, image: "", thumb: "", key: ""});
+const captchaData = reactive({image: "", thumb: "", captKey: ""});
 const showRotateCaptcha = ref<boolean>(false);
+const resetPasswordRotate = ref<any>(null);
 const resetPasswordRotateEvent = {
-  confirm: (angle: number) => {
+  confirm: (angle: number, _reset: () => void) => {
     checkPhoneLoginCaptcha(angle);
   },
   close: () => {
@@ -176,7 +178,7 @@ const rules: Record<string, Rule[]> = {
     },
   ],
   repassword: [
-    {required: true,validator: validateRepassword, trigger: 'blur'}
+    {required: true, validator: validateRepassword, trigger: 'blur'}
   ],
   phone: [
     {required: true, message: t('login.phoneValidate'), trigger: 'blur'},
@@ -263,7 +265,7 @@ async function resetPasswordSubmit() {
         const res: any = await resetPasswordApi(ResetPasswordForm);
         if (res.code === 200 && res.data) {
           message.success(t('login.resetPasswordSuccess'));
-          await router.push('/login');
+          router.push('/login');
         } else {
           message.error(t('login.resetPasswordError'));
         }
@@ -284,11 +286,10 @@ const refreshCaptcha = useDebounceFn(getRotateCaptcha, 3000);
 async function getRotateCaptcha() {
   const data: any = await getRotatedCaptchaData();
   if (data.code === 200 && data.data) {
-    const {angle, image, thumb, key} = data.data;
-    captchaData.angle = angle;
+    const {image, thumb, key} = data.data;
     captchaData.image = image;
     captchaData.thumb = thumb;
-    captchaData.key = key;
+    captchaData.captKey = key;
   } else {
     message.error(t('login.systemError'));
   }
@@ -314,7 +315,7 @@ async function sendMessageByPhone(param: any): Promise<boolean> {
  */
 async function checkPhoneLoginCaptcha(angle: number) {
   const param = {
-    key: captchaData.key,
+    key: captchaData.captKey,
     angle: angle,
     phone: ResetPasswordForm.phone,
   };
diff --git a/src/views/Login/LoginFooter.vue b/src/views/Login/LoginFooter.vue
index 785171b..e7212a0 100644
--- a/src/views/Login/LoginFooter.vue
+++ b/src/views/Login/LoginFooter.vue
@@ -5,13 +5,13 @@
       <AButton href="/qrlogin" class="login-form-bottom-button" :icon="h(QrcodeOutlined)">{{ t("login.qrLogin") }}
       </AButton>
       <AButton @click="userStore.openQQUrl" class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton>
-      <AButton @click="userStore.openGithubUrl" class="login-form-bottom-button"
+      <AButton @click="userStore.openGiteeUrl" class="login-form-bottom-button"
                style="display: flex; align-items: center;justify-content: center;">
         <template #icon>
           <img :src=gitee alt="gitee" class="gitee-icon" style="width: 16px; height: 16px;"/>
         </template>
       </AButton>
-      <AButton @click="userStore.openGiteeUrl" class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
+      <AButton @click="userStore.openGithubUrl" class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
     </AFlex>
   </div>
 </template>
diff --git a/src/views/Login/LoginPage.vue b/src/views/Login/LoginPage.vue
index 0ae6ad6..c40fbf8 100644
--- a/src/views/Login/LoginPage.vue
+++ b/src/views/Login/LoginPage.vue
@@ -153,6 +153,8 @@
                   title: t('login.rotateCaptchaTitle'),
                 }"
             :events="phoneLoginRotateEvent"
+            :ref="phoneLoginRotateRef"
+
         />
       </AModal>
       <AModal v-model:open="showAccountRotateCaptcha" :footer="null" :closable="false" width="375" :centered="true"
@@ -166,6 +168,7 @@
             title: t('login.rotateCaptchaTitle'),
           }"
             :events="accountLoginRotateEvent"
+            :ref="accountLoginRotateRef"
         />
       </AModal>
 
@@ -206,11 +209,14 @@ const accountLoginFormRef = ref<any>();
 const phoneLoginFormRef = ref<any>();
 const showPhoneRotateCaptcha = ref<boolean>(false);
 const showAccountRotateCaptcha = ref<boolean>(false);
-const captchaData = reactive({angle: 0, image: "", thumb: "", key: ""});
+const captchaData = reactive({image: "", thumb: "", captKey: ""});
 const loginLoading = ref<boolean>(false);
 const userStore = useStore().user;
+
+const phoneLoginRotateRef = ref<any>(null);
+const accountLoginRotateRef = ref<any>(null);
 const phoneLoginRotateEvent = {
-  confirm: (angle: number) => {
+  confirm: (angle: number, _reset: () => void) => {
     checkPhoneLoginCaptchaDebounce(angle);
   },
   close: () => {
@@ -410,13 +416,18 @@ const refreshCaptcha = useThrottleFn(getRotateCaptcha, 3000);
  * 获取旋转验证码数据
  */
 async function getRotateCaptcha() {
+  if (phoneLoginRotateRef.value) {
+    phoneLoginRotateRef.value?.clear();
+  }
+  if (accountLoginRotateRef.value) {
+    accountLoginRotateRef.value?.clear();
+  }
   const data: any = await getRotatedCaptchaData();
   if (data.code === 200 && data.data) {
-    const {angle, image, thumb, key} = data.data;
-    captchaData.angle = angle;
+    const {image, thumb, key} = data.data;
     captchaData.image = image;
     captchaData.thumb = thumb;
-    captchaData.key = key;
+    captchaData.captKey = key;
   } else {
     message.error(t('login.systemError'));
   }
@@ -435,7 +446,7 @@ async function checkPhoneLoginCaptcha(angle: number) {
   const params = {
     phone: phoneLoginForm.phone,
     angle: angle,
-    key: captchaData.key,
+    key: captchaData.captKey,
   };
   const result: boolean = await sendMessageByPhone(params);
   if (result) {
@@ -457,7 +468,7 @@ async function checkAccountLoginCaptcha(angle: number) {
   const params = {
     ...accountLoginForm,
     angle: angle,
-    key: captchaData.key,
+    key: captchaData.captKey,
   };
   loginLoading.value = true;
   const res: any = await accountLoginApi(params);
diff --git a/src/views/QRLogin/QRLogin.vue b/src/views/QRLogin/QRLogin.vue
index 37754dd..7bcf018 100644
--- a/src/views/QRLogin/QRLogin.vue
+++ b/src/views/QRLogin/QRLogin.vue
@@ -61,7 +61,7 @@ import QRLoginFooter from "@/views/QRLogin/QRLoginFooter.vue";
 import {useRouter} from 'vue-router';
 import {generateQrCode} from "@/api/oauth/wechat.ts";
 import {onBeforeUnmount, onMounted, ref} from "vue";
-import logo from "@/assets/svgs/logo-schisandra.svg";
+import logo from "@/assets/svgs/logo-album.svg";
 
 import useStore from "@/store";
 import {message} from "ant-design-vue";
diff --git a/src/views/QRLogin/index.scss b/src/views/QRLogin/index.scss
index e670f26..0fe353c 100644
--- a/src/views/QRLogin/index.scss
+++ b/src/views/QRLogin/index.scss
@@ -77,7 +77,7 @@
             margin-bottom: 24px;
 
             .qrlogin-card-wechat {
-                color: #7acc35;
+                color: rgba(77, 167, 255, 0.89);
                 margin-left: 4px;
                 margin-right: 4px;
                 cursor: pointer;
diff --git a/vite.config.ts b/vite.config.ts
index 18d9385..7538b84 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -61,7 +61,7 @@ export default defineConfig(({mode}: { mode: string }): object => {
                 }
             },
             optimizeDeps: {
-                exclude: ["vite", ".vite"],
+                exclude: [".vite","node_modules/.vite/deps"],
                 force: true,
             },
             plugins: [