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

🎨 optimized code

Browse Source
This commit is contained in:
landaiqing
2024-11-27 18:59:11 +08:00
parent a3e15bbc86
commit 46e6b49c02
14 changed files with 74 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -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"

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

@@ -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();

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

@@ -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();

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

@@ -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();

2
src/layout/Landing/Footer/Footer.vue
View File

@@ -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"
/>

7
src/layout/default/Header/Header.vue
View File

@@ -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();
/**
* 切换语言

7
src/layout/default/Header/index.scss
View File

@@ -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 {

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

@@ -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;

17
src/views/Forget/ForgetPage.vue
View File

@@ -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,
};

4
src/views/Login/LoginFooter.vue
View File

@@ -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>

25
src/views/Login/LoginPage.vue
View File

@@ -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);

2
src/views/QRLogin/QRLogin.vue
View File

@@ -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";

2
src/views/QRLogin/index.scss
View File

@@ -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;

2
vite.config.ts
View File

@@ -61,7 +61,7 @@ export default defineConfig(({mode}: { mode: string }): object => {
}
},
optimizeDeps: {
exclude: ["vite", ".vite"],
exclude: [".vite","node_modules/.vite/deps"],
force: true,
},
plugins: [