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 01:50:18 +08:00
parent 88c1a4bd16
commit a3e15bbc86
13 changed files with 164 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AnimatedNature/index.scss
View File

@@ -1,7 +1,3 @@
//body {
// display: block;
// background-color: #ffbf00;
//}
.section-center { .section-center {
position: relative; position: relative;
width: 600px; width: 600px;

14
src/components/BoxDog/BoxDog.vue
View File

@@ -1,13 +1,4 @@
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: "BoxDog"
});
</script>
<template> <template>
<body translate="no">
<div class="container"> <div class="container">
<div class="box"> <div class="box">
<div class="sign"></div> <div class="sign"></div>
@@ -91,9 +82,10 @@ export default defineComponent({
<div class="yellow-shape"></div> <div class="yellow-shape"></div>
</div> </div>
</div> </div>
</body>
</template> </template>
<script lang="ts" setup>
<style src="./index.scss" scoped> </script>
<style src="./index.scss" lang="scss" scoped>
</style> </style>

24
src/components/BoxDog/index.scss
View File

@@ -1,27 +1,3 @@
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
background: transparent !important;
padding: 0;
margin: 0;
}
.container { .container {
position: relative; position: relative;
top: 50%; top: 50%;

2
src/components/EffectsCard/EffectsCard.vue
View File

@@ -358,7 +358,7 @@ svg:not(:root) {
left: 15%; left: 15%;
transform: translateY(-50%); transform: translateY(-50%);
padding: 12px 16px; padding: 12px 16px;
font-family: "Montserrat"; font-family: "Montserrat",serif;
text-transform: uppercase; text-transform: uppercase;
font-size: 1.1em; font-size: 1.1em;
letter-spacing: 0.1em; letter-spacing: 0.1em;

4
src/router/router.ts
View File

@@ -27,7 +27,7 @@ const router: Router = createRouter({
router.beforeEach((to, _from, next) => { router.beforeEach((to, _from, next) => {
// start(); // start();
const user = useStore().user; const user = useStore().user;
const token: string | undefined = user.user.refreshToken; const token: string | undefined = user.user.access_token;
const userId: string | undefined = user.user.uid; const userId: string | undefined = user.user.uid;
// 检查用户是否已登录 // 检查用户是否已登录
@@ -44,7 +44,7 @@ router.beforeEach((to, _from, next) => {
if (isLoggedIn) { if (isLoggedIn) {
next(); next();
} else { } else {
message.warn(i18n.global.t('login.pleaseLogin')).then(); message.warn(i18n.global.t('login.pleaseLogin'));
next({ next({
path: '/login', path: '/login',
query: {redirect: to.fullPath} query: {redirect: to.fullPath}

2
src/store/index.ts
View File

@@ -1,7 +1,6 @@
import {useAuthStore} from '@/store/modules/userStore.ts'; import {useAuthStore} from '@/store/modules/userStore.ts';
import {useThemeStore} from "@/store/modules/themeStore.ts"; import {useThemeStore} from "@/store/modules/themeStore.ts";
import {langStore} from "@/store/modules/langStore.ts"; import {langStore} from "@/store/modules/langStore.ts";
import {useClientStore} from "@/store/modules/clientStore.ts";
import {useCommentStore} from "@/store/modules/commentStore.ts"; import {useCommentStore} from "@/store/modules/commentStore.ts";
import {useWebSocketStore} from "@/store/modules/websocketStore.ts"; import {useWebSocketStore} from "@/store/modules/websocketStore.ts";
@@ -10,7 +9,6 @@ export default function useStore() {
user: useAuthStore(), user: useAuthStore(),
theme: useThemeStore(), theme: useThemeStore(),
lang: langStore(), lang: langStore(),
client: useClientStore(),
comment: useCommentStore(), comment: useCommentStore(),
websocket: useWebSocketStore(), websocket: useWebSocketStore(),
}; };

76
src/store/modules/clientStore.ts
View File

@@ -1,76 +0,0 @@
import {defineStore} from 'pinia';
import {ref} from "vue";
// const expiresTime: number = 60 * 30; // 自定义过期时间 30 分钟
// const expiredStorage: Storage = getExpiredStorage(localStorage, expiresTime);
//
// function getExpiredStorage(storage: Storage, expiresTime: string | number | Date) {
// return {
// getItem(key: string) {
// const itemStr = storage.getItem(key);
// if (!itemStr) {
// return null;
// }
// // 读取的时候是字符串，需要转换为对象
// const item = JSON.parse(itemStr);
// const now: Date = new Date();
// if (now.getTime() > item.expiry) {
// storage.removeItem(key);
// return null;
// }
// // pinia 的持久化插件要求返回JSON字符串
// return JSON.stringify(item.value);
// },
// setItem(key: string, value: string) {
// const now = new Date();
// const item = {
// value: JSON.parse(value), // value是JSON字符串，需要转换为对象
// expiry: now.getTime() + Number(expiresTime) * 1000,
// };
// storage.setItem(key, JSON.stringify(item)); // 存储又要转为JSON字符串
// },
// removeItem(key: string) {
// storage.removeItem(key);
// },
// clear() {
// Object.keys(storage).forEach((key: string) => {
// storage.removeItem(key);
// });
// },
// key(index: number): string | null {
// const keys = Object.keys(storage);
// return keys[index] || null;
// },
// length: Object.keys(storage).length,
// } as Storage;
// }
export const useClientStore = defineStore(
'clientId',
() => {
const clientId = ref<string>();
function setClientId(id: string) {
clientId.value = id;
}
function getClientId() {
return clientId.value;
}
return {
clientId,
setClientId,
getClientId
};
},
{
// 开启数据持久化
persist: {
key: 'clientId',
storage: localStorage,
pick: ["clientId"],
}
}
);

128
src/store/modules/userStore.ts
View File

@@ -1,6 +1,12 @@
import {defineStore} from 'pinia'; import {defineStore} from 'pinia';
import {reactive} from 'vue'; import {reactive} from 'vue';
import {generateClientId} from "@/api/client";
import {getGithubUrl} from "@/api/oauth/github.ts";
import {getQQUrl} from "@/api/oauth/qq.ts";
import {getGiteeUrl} from "@/api/oauth/gitee.ts";
import {getUserDevice} from "@/api/user";
import message from "@/components/MyUI/Message/Message.vue";
import {useI18n} from "vue-i18n";
export const useAuthStore = defineStore( export const useAuthStore = defineStore(
'user', 'user',
@@ -13,9 +19,127 @@ export const useAuthStore = defineStore(
avatar: '', avatar: '',
status: '', status: '',
}); });
const clientId = ref<string>('');
const githubRedirectUrl = ref<string>('');
const giteeRedirectUrl = ref<string>('');
const qqRedirectUrl = ref<string>('');
const router = useRouter();
const {t} = useI18n();
/**
* Get the redirect url of Github OAuth
*/
async function getGithubRedirectUrl() {
const res: any = await getGithubUrl(clientId.value);
if (res.code === 200 && res.data) {
githubRedirectUrl.value = res.data;
}
}
/**
* Get the redirect url of Gitee OAuth
*/
async function getGiteeRedirectUrl() {
const res: any = await getGiteeUrl();
if (res.code === 200 && res.data) {
giteeRedirectUrl.value = res.data;
}
}
/**
* Get the redirect url of QQ OAuth
*/
async function getQQRedirectUrl() {
const res: any = await getQQUrl(clientId.value);
if (res.code === 200 && res.data) {
qqRedirectUrl.value = res.data;
}
}
/**
* 获取client_id
*/
async function getClientId() {
const res: any = await generateClientId();
if (res.code === 200 && res.data) {
clientId.value = res.data;
}
}
/**
* 处理消息
* @param e
*/
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
const res: any = JSON.parse(e.data);
if (res.code === 200 && res.data) {
user.uid = res.data.uid;
user.access_token = res.data.access_token;
user.username = res.data.username;
user.avatar = res.data.avatar;
user.nickname = res.data.nickname;
user.status = res.data.status;
await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
router.push('/main');
}, 1000);
} else {
message.error(t('login.loginError'));
window.removeEventListener("message", messageHandler);
}
}
};
function openGithubUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(githubRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
window.addEventListener("message", messageHandler);
}
/**
* Open the Gitee OAuth page in a new window
*/
function openGiteeUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(giteeRedirectUrl.value, '_blank', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
window.addEventListener("message", messageHandler);
}
function openQQUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(qqRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
window.addEventListener("message", messageHandler);
}
return { return {
user, user,
clientId,
getGithubRedirectUrl,
getGiteeRedirectUrl,
getQQRedirectUrl,
getClientId,
openGithubUrl,
openGiteeUrl,
openQQUrl,
}; };
}, },
{ {
@@ -23,7 +147,7 @@ export const useAuthStore = defineStore(
persist: { persist: {
key: 'user', key: 'user',
storage: localStorage, storage: localStorage,
pick: ['user'], pick: ['user', "clientId", "githubRedirectUrl", "giteeRedirectUrl", "qqRedirectUrl"],
} }
} }
); );

4
src/views/404/NotFound.vue
View File

@@ -72,7 +72,9 @@ async function backHome() {
}, 3000); }, 3000);
} }
backHome(); onMounted(async () => {
await backHome();
});
</script> </script>
<style src="./index.scss" lang="scss" scoped> <style src="./index.scss" lang="scss" scoped>

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

@@ -2,214 +2,36 @@
<div> <div>
<ADivider/> <ADivider/>
<AFlex :vertical="false" align="center" justify="space-around"> <AFlex :vertical="false" align="center" justify="space-around">
<AButton @click="()=>{ <AButton href="/qrlogin" class="login-form-bottom-button" :icon="h(QrcodeOutlined)">{{ t("login.qrLogin") }}
router.push('/qrlogin')
}" class="login-form-bottom-button" :icon="h(QrcodeOutlined)">{{ t("login.qrLogin") }}
</AButton> </AButton>
<AButton @click="openQQbUrlDebounce" class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton> <AButton @click="userStore.openQQUrl" class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton>
<AButton @click="openGiteebUrlDebounce" class="login-form-bottom-button" <AButton @click="userStore.openGithubUrl" class="login-form-bottom-button"
style="display: flex; align-items: center;justify-content: center;"> style="display: flex; align-items: center;justify-content: center;">
<template #icon> <template #icon>
<img :src=gitee alt="gitee" class="gitee-icon" style="width: 16px; height: 16px;"/> <img :src=gitee alt="gitee" class="gitee-icon" style="width: 16px; height: 16px;"/>
</template> </template>
</AButton> </AButton>
<AButton @click="openGithubUrlDebounce" class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton> <AButton @click="userStore.openGiteeUrl" class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
</AFlex> </AFlex>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {GithubOutlined, QqOutlined, QrcodeOutlined} from "@ant-design/icons-vue"; import {GithubOutlined, QqOutlined, QrcodeOutlined} from "@ant-design/icons-vue";
import {useI18n} from "vue-i18n"; import {useI18n} from "vue-i18n";
import {h, onBeforeMount, ref} from "vue"; import {h, onBeforeMount} from "vue";
import {useRouter} from 'vue-router';
import {getGithubUrl} from "@/api/oauth/github.ts";
import {getGiteeUrl} from "@/api/oauth/gitee.ts";
import useStore from "@/store"; import useStore from "@/store";
import {message} from "ant-design-vue";
import gitee from "@/assets/svgs/gitee.svg"; import gitee from "@/assets/svgs/gitee.svg";
import {getQQUrl} from "@/api/oauth/qq.ts";
import {useDebounceFn} from "@vueuse/core";
import {generateClientId} from "@/api/client";
import {getUserDevice} from "@/api/user";
const router = useRouter();
const {t} = useI18n(); const {t} = useI18n();
const githubRedirectUrl = ref<string>('');
const giteeRedirectUrl = ref<string>('');
const qqRedirectUrl = ref<string>('');
const client = useStore().client;
const userStore = useStore().user; const userStore = useStore().user;
/**
* Get the redirect url of Github OAuth
*/
async function getGithubRedirectUrl() {
const res: any = await getGithubUrl(client.getClientId() as string);
if (res.code === 200 && res.data) {
githubRedirectUrl.value = res.data;
}
}
/**
* Get the redirect url of Gitee OAuth
*/
async function getGiteeRedirectUrl() {
const res: any = await getGiteeUrl();
if (res.code === 200 && res.data) {
giteeRedirectUrl.value = res.data;
}
}
/**
* Get the redirect url of QQ OAuth
*/
async function getQQRedirectUrl() {
const res: any = await getQQUrl(client.getClientId() as string);
if (res.code === 200 && res.data) {
qqRedirectUrl.value = res.data;
}
}
/**
* 获取client_id
*/
async function getClientId() {
const res: any = await generateClientId();
if (res.code === 200 && res.data) {
client.setClientId(res.data);
}
}
/**
* Open the Github OAuth page in a new window with debounce
*/
const openGithubUrlDebounce = useDebounceFn(openGithubUrl, 1000);
/**
* Open the Github OAuth page in a new window
*/
function openGithubUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(githubRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
const res: any = JSON.parse(e.data);
if (res.code === 200 && res.data) {
userStore.user.uid = res.data.uid;
userStore.user.access_token = res.data.access_token;
userStore.user.username = res.data.username;
userStore.user.avatar = res.data.avatar;
userStore.user.nickname = res.data.nickname;
userStore.user.status = res.data.status;
await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
router.push('/main');
}, 1000);
} else {
message.error(t('login.loginError'));
window.removeEventListener("message", messageHandler);
}
}
};
window.addEventListener("message", messageHandler);
}
/**
* Open the Gitee OAuth page in a new window with debounce
*/
const openGiteebUrlDebounce = useDebounceFn(openGiteeUrl, 1000);
/**
* Open the Gitee OAuth page in a new window
*/
function openGiteeUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(giteeRedirectUrl.value, '_blank', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
const res: any = JSON.parse(e.data);
if (res.code === 200 && res.data) {
userStore.user.uid = res.data.uid;
userStore.user.access_token = res.data.access_token;
userStore.user.username = res.data.username;
userStore.user.avatar = res.data.avatar;
userStore.user.nickname = res.data.nickname;
userStore.user.status = res.data.status;
await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
router.push('/main');
}, 1000);
} else {
message.error(t('login.loginError'));
window.removeEventListener("message", messageHandler);
}
}
};
window.addEventListener("message", messageHandler);
}
/**
* Open the QQ OAuth page in a new window with debounce
*/
const openQQbUrlDebounce = useDebounceFn(openQQUrl, 1000);
/**
* Open the QQ OAuth page in a new window
*/
function openQQUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(qqRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
const res: any = JSON.parse(e.data);
if (res.code === 200 && res.data) {
userStore.user.uid = res.data.uid;
userStore.user.access_token = res.data.access_token;
userStore.user.username = res.data.username;
userStore.user.avatar = res.data.avatar;
userStore.user.nickname = res.data.nickname;
userStore.user.status = res.data.status;
await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
router.push('/main');
}, 1000);
} else {
message.error(t('login.loginError'));
window.removeEventListener("message", messageHandler);
}
}
};
window.addEventListener("message", messageHandler);
}
onBeforeMount(() => { onBeforeMount(() => {
getClientId().then(() => { userStore.getClientId().then(() => {
getGithubRedirectUrl(); userStore.getGithubRedirectUrl();
getGiteeRedirectUrl(); userStore.getGiteeRedirectUrl();
getQQRedirectUrl(); userStore.getQQRedirectUrl();
}); });
}); });
</script> </script>

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

@@ -65,34 +65,23 @@ import logo from "@/assets/svgs/logo-schisandra.svg";
import useStore from "@/store"; import useStore from "@/store";
import {message} from "ant-design-vue"; import {message} from "ant-design-vue";
import {generateClientId} from "@/api/client";
import {getUserDevice} from "@/api/user"; import {getUserDevice} from "@/api/user";
const {t} = useI18n(); const {t} = useI18n();
const router = useRouter(); const router = useRouter();
const client = useStore().client;
const qrcode = ref<string>(''); const qrcode = ref<string>('');
const status = ref<string>('loading'); const status = ref<string>('loading');
const websocket = useStore().websocket; const websocket = useStore().websocket;
const userStore = useStore().user; const userStore = useStore().user;
/**
* 获取client_id
*/
async function getClientId() {
const res: any = await generateClientId();
if (res.code === 200 && res.data) {
client.setClientId(res.data);
}
}
/** /**
* 获取二维码 * 获取二维码
*/ */
async function getQrCode() { async function getQrCode() {
const res: any = await generateQrCode(client.getClientId() || ""); const res: any = await generateQrCode(userStore.clientId);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
status.value = 'active'; status.value = 'active';
qrcode.value = res.data; qrcode.value = res.data;
@@ -104,7 +93,7 @@ async function getQrCode() {
const wsOptions = { const wsOptions = {
url: import.meta.env.VITE_QR_SOCKET_URL + "?client_id=" + client.getClientId(), url: import.meta.env.VITE_QR_SOCKET_URL + "?client_id=" + userStore.clientId,
}; };
@@ -133,7 +122,7 @@ async function handleListenMessage() {
} }
onMounted(async () => { onMounted(async () => {
getClientId().then(async () => { userStore.getClientId().then(async () => {
await getQrCode(); await getQrCode();
}); });
}); });

205
src/views/QRLogin/QRLoginFooter.vue
View File

@@ -2,216 +2,39 @@
<div> <div>
<ADivider/> <ADivider/>
<AFlex :vertical="false" align="center" justify="space-around"> <AFlex :vertical="false" align="center" justify="space-around">
<AButton @click="()=>{ <AButton href="/login" class="qrlogin-form-bottom-button" :icon="h(TabletOutlined)">
router.push('/login') {{ t("login.phoneLoginAndRegister") }}
}" class="qrlogin-form-bottom-button" :icon="h(TabletOutlined)">{{ t("login.phoneLoginAndRegister") }}
</AButton> </AButton>
<AButton @click="openQQbUrlDebounce" class="qrlogin-form-bottom-button" :icon="h(QqOutlined)"></AButton> <AButton @click="userStore.openQQUrl" class="qrlogin-form-bottom-button" :icon="h(QqOutlined)"></AButton>
<AButton @click="openGiteebUrlDebounce" class="qrlogin-form-bottom-button" <AButton @click="userStore.openGiteeUrl" class="qrlogin-form-bottom-button"
style="display: flex; align-items: center;justify-content: center;"> style="display: flex; align-items: center;justify-content: center;">
<template #icon> <template #icon>
<img :src=gitee alt="gitee" class="gitee-icon" style="width: 16px; height: 16px;"/> <img :src=gitee alt="gitee" class="gitee-icon" style="width: 16px; height: 16px;"/>
</template> </template>
</AButton> </AButton>
<AButton @click="openGithubUrlDebounce" class="qrlogin-form-bottom-button" :icon="h(GithubOutlined)"></AButton> <AButton @click="userStore.openGithubUrl" class="qrlogin-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
</AFlex> </AFlex>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {GithubOutlined, QqOutlined, TabletOutlined} from "@ant-design/icons-vue"; import {GithubOutlined, QqOutlined, TabletOutlined} from "@ant-design/icons-vue";
import {useI18n} from "vue-i18n"; import {useI18n} from "vue-i18n";
import {h, onBeforeMount, ref} from "vue"; import {h, onBeforeMount} from "vue";
import {useRouter} from 'vue-router';
import {getGithubUrl} from "@/api/oauth/github.ts";
import {getGiteeUrl} from "@/api/oauth/gitee.ts";
import useStore from "@/store"; import useStore from "@/store";
import {message} from "ant-design-vue";
import gitee from "@/assets/svgs/gitee.svg";
import {getQQUrl} from "@/api/oauth/qq.ts";
import {useDebounceFn} from "@vueuse/core";
import {generateClientId} from "@/api/client";
import {getUserDevice} from "@/api/user";
const client = useStore().client; import gitee from "@/assets/svgs/gitee.svg";
const router = useRouter();
const userStore = useStore().user;
const {t} = useI18n(); const {t} = useI18n();
const githubRedirectUrl = ref<string>('');
const giteeRedirectUrl = ref<string>('');
const qqRedirectUrl = ref<string>('');
const userStore = useStore().user;
/**
* Get the redirect url of Github OAuth
*/
async function getGithubRedirectUrl() {
const res: any = await getGithubUrl(client.getClientId() as string);
if (res.code === 200 && res.data) {
githubRedirectUrl.value = res.data;
}
}
/**
* Get the redirect url of Gitee OAuth
*/
async function getGiteeRedirectUrl() {
const res: any = await getGiteeUrl();
if (res.code === 200 && res.data) {
giteeRedirectUrl.value = res.data;
}
}
/**
* Get the redirect url of QQ OAuth
*/
async function getQQRedirectUrl() {
const res: any = await getQQUrl(client.getClientId() as string);
if (res.code === 200 && res.data) {
qqRedirectUrl.value = res.data;
}
}
/**
* 获取client_id
*/
async function getClientId() {
const res: any = await generateClientId();
if (res.code === 200 && res.data) {
client.setClientId(res.data);
}
}
/**
* Open the Github OAuth page in a new window with debounce
*/
const openGithubUrlDebounce = useDebounceFn(openGithubUrl, 1000);
/**
* Open the Github OAuth page in a new window
*/
function openGithubUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(githubRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
const res: any = JSON.parse(e.data);
if (res.code === 200 && res.data) {
userStore.user.uid = res.data.uid;
userStore.user.access_token = res.data.access_token;
userStore.user.username = res.data.username;
userStore.user.avatar = res.data.avatar;
userStore.user.nickname = res.data.nickname;
userStore.user.status = res.data.status;
await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
router.push('/main');
}, 1000);
} else {
message.error(t('login.loginError'));
window.removeEventListener("message", messageHandler);
}
}
};
window.addEventListener("message", messageHandler);
}
/**
* Open the Gitee OAuth page in a new window with debounce
*/
const openGiteebUrlDebounce = useDebounceFn(openGiteeUrl, 1000);
/**
* Open the Gitee OAuth page in a new window
*/
function openGiteeUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(giteeRedirectUrl.value, '_blank', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
const res: any = JSON.parse(e.data);
if (res.code === 200 && res.data) {
userStore.user.uid = res.data.uid;
userStore.user.access_token = res.data.access_token;
userStore.user.username = res.data.username;
userStore.user.avatar = res.data.avatar;
userStore.user.nickname = res.data.nickname;
userStore.user.status = res.data.status;
await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
router.push('/main');
}, 1000);
} else {
message.error(t('login.loginError'));
window.removeEventListener("message", messageHandler);
}
}
};
window.addEventListener("message", messageHandler);
}
/**
* Open the QQ OAuth page in a new window with debounce
*/
const openQQbUrlDebounce = useDebounceFn(openQQUrl, 1000);
/**
* Open the QQ OAuth page in a new window
*/
function openQQUrl() {
const iWidth = 800; //弹出窗口的宽度;
const iHeight = 500; //弹出窗口的高度;
//window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
const iTop = (window.screen.height - 30 - iHeight) / 2; //获得窗口的垂直位置;
const iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
window.open(qqRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
const messageHandler = async (e: any) => {
if (typeof e.data === 'string') {
const res: any = JSON.parse(e.data);
if (res.code === 200 && res.data) {
userStore.user.uid = res.data.uid;
userStore.user.access_token = res.data.access_token;
userStore.user.username = res.data.username;
userStore.user.avatar = res.data.avatar;
userStore.user.nickname = res.data.nickname;
userStore.user.status = res.data.status;
await getUserDevice();
message.success(t('login.loginSuccess'));
window.removeEventListener("message", messageHandler);
setTimeout(() => {
router.push('/main');
}, 1000);
} else {
message.error(t('login.loginError'));
window.removeEventListener("message", messageHandler);
}
}
};
window.addEventListener("message", messageHandler);
}
onBeforeMount(() => { onBeforeMount(() => {
getClientId().then(() => { userStore.getClientId().then(() => {
getGithubRedirectUrl(); userStore.getGithubRedirectUrl();
getGiteeRedirectUrl(); userStore.getGiteeRedirectUrl();
getQQRedirectUrl(); userStore.getQQRedirectUrl();
}); });
}); });
</script> </script>
<style src="./index.scss" lang="scss" scoped> <style src="./index.scss" lang="scss" scoped>
</style> </style>

2
vite.config.ts
View File

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