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 {
position: relative;
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>
<body translate="no">
<div class="container">
<div class="box">
<div class="sign"></div>
@@ -91,9 +82,10 @@ export default defineComponent({
<div class="yellow-shape"></div>
</div>
</div>
</body>
</template>
<script lang="ts" setup>
<style src="./index.scss" scoped>
</script>
<style src="./index.scss" lang="scss" scoped>
</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 {
position: relative;
top: 50%;

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

@@ -358,7 +358,7 @@ svg:not(:root) {
left: 15%;
transform: translateY(-50%);
padding: 12px 16px;
font-family: "Montserrat";
font-family: "Montserrat",serif;
text-transform: uppercase;
font-size: 1.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) => {
// start();
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;
// 检查用户是否已登录
@@ -44,7 +44,7 @@ router.beforeEach((to, _from, next) => {
if (isLoggedIn) {
next();
} else {
message.warn(i18n.global.t('login.pleaseLogin')).then();
message.warn(i18n.global.t('login.pleaseLogin'));
next({
path: '/login',
query: {redirect: to.fullPath}

2
src/store/index.ts
View File

@@ -1,7 +1,6 @@
import {useAuthStore} from '@/store/modules/userStore.ts';
import {useThemeStore} from "@/store/modules/themeStore.ts";
import {langStore} from "@/store/modules/langStore.ts";
import {useClientStore} from "@/store/modules/clientStore.ts";
import {useCommentStore} from "@/store/modules/commentStore.ts";
import {useWebSocketStore} from "@/store/modules/websocketStore.ts";
@@ -10,7 +9,6 @@ export default function useStore() {
user: useAuthStore(),
theme: useThemeStore(),
lang: langStore(),
client: useClientStore(),
comment: useCommentStore(),
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 {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(
'user',
@@ -13,9 +19,127 @@ export const useAuthStore = defineStore(
avatar: '',
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 {
user,
clientId,
getGithubRedirectUrl,
getGiteeRedirectUrl,
getQQRedirectUrl,
getClientId,
openGithubUrl,
openGiteeUrl,
openQQUrl,
};
},
{
@@ -23,7 +147,7 @@ export const useAuthStore = defineStore(
persist: {
key: 'user',
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);
}
backHome();
onMounted(async () => {
await backHome();
});
</script>
<style src="./index.scss" lang="scss" scoped>

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

@@ -2,214 +2,36 @@
<div>
<ADivider/>
<AFlex :vertical="false" align="center" justify="space-around">
<AButton @click="()=>{
router.push('/qrlogin')
}" class="login-form-bottom-button" :icon="h(QrcodeOutlined)">{{ t("login.qrLogin") }}
<AButton href="/qrlogin" class="login-form-bottom-button" :icon="h(QrcodeOutlined)">{{ t("login.qrLogin") }}
</AButton>
<AButton @click="openQQbUrlDebounce" class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton>
<AButton @click="openGiteebUrlDebounce" class="login-form-bottom-button"
<AButton @click="userStore.openQQUrl" class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton>
<AButton @click="userStore.openGithubUrl" 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="openGithubUrlDebounce" class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
<AButton @click="userStore.openGiteeUrl" class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
</AFlex>
</div>
</template>
<script setup lang="ts">
import {GithubOutlined, QqOutlined, QrcodeOutlined} from "@ant-design/icons-vue";
import {useI18n} from "vue-i18n";
import {h, onBeforeMount, ref} from "vue";
import {useRouter} from 'vue-router';
import {getGithubUrl} from "@/api/oauth/github.ts";
import {getGiteeUrl} from "@/api/oauth/gitee.ts";
import {h, onBeforeMount} from "vue";
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 router = useRouter();
const {t} = useI18n();
const githubRedirectUrl = ref<string>('');
const giteeRedirectUrl = ref<string>('');
const qqRedirectUrl = ref<string>('');
const client = useStore().client;
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(() => {
getClientId().then(() => {
getGithubRedirectUrl();
getGiteeRedirectUrl();
getQQRedirectUrl();
userStore.getClientId().then(() => {
userStore.getGithubRedirectUrl();
userStore.getGiteeRedirectUrl();
userStore.getQQRedirectUrl();
});
});
</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 {message} from "ant-design-vue";
import {generateClientId} from "@/api/client";
import {getUserDevice} from "@/api/user";
const {t} = useI18n();
const router = useRouter();
const client = useStore().client;
const qrcode = ref<string>('');
const status = ref<string>('loading');
const websocket = useStore().websocket;
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() {
const res: any = await generateQrCode(client.getClientId() || "");
const res: any = await generateQrCode(userStore.clientId);
if (res.code === 200 && res.data) {
status.value = 'active';
qrcode.value = res.data;
@@ -104,7 +93,7 @@ async function getQrCode() {
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 () => {
getClientId().then(async () => {
userStore.getClientId().then(async () => {
await getQrCode();
});
});

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

@@ -2,216 +2,39 @@
<div>
<ADivider/>
<AFlex :vertical="false" align="center" justify="space-around">
<AButton @click="()=>{
router.push('/login')
}" class="qrlogin-form-bottom-button" :icon="h(TabletOutlined)">{{ t("login.phoneLoginAndRegister") }}
<AButton href="/login" class="qrlogin-form-bottom-button" :icon="h(TabletOutlined)">
{{ t("login.phoneLoginAndRegister") }}
</AButton>
<AButton @click="openQQbUrlDebounce" class="qrlogin-form-bottom-button" :icon="h(QqOutlined)"></AButton>
<AButton @click="openGiteebUrlDebounce" class="qrlogin-form-bottom-button"
<AButton @click="userStore.openQQUrl" class="qrlogin-form-bottom-button" :icon="h(QqOutlined)"></AButton>
<AButton @click="userStore.openGiteeUrl" class="qrlogin-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="openGithubUrlDebounce" class="qrlogin-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
<AButton @click="userStore.openGithubUrl" class="qrlogin-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
</AFlex>
</div>
</template>
<script setup lang="ts">
import {GithubOutlined, QqOutlined, TabletOutlined} from "@ant-design/icons-vue";
import {useI18n} from "vue-i18n";
import {h, onBeforeMount, ref} from "vue";
import {useRouter} from 'vue-router';
import {getGithubUrl} from "@/api/oauth/github.ts";
import {getGiteeUrl} from "@/api/oauth/gitee.ts";
import {h, onBeforeMount} from "vue";
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;
const router = useRouter();
import gitee from "@/assets/svgs/gitee.svg";
const userStore = useStore().user;
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(() => {
getClientId().then(() => {
getGithubRedirectUrl();
getGiteeRedirectUrl();
getQQRedirectUrl();
userStore.getClientId().then(() => {
userStore.getGithubRedirectUrl();
userStore.getGiteeRedirectUrl();
userStore.getQQRedirectUrl();
});
});
</script>
<style src="./index.scss" lang="scss" scoped>
<style src="./index.scss" lang="scss" scoped>
</style>

2
vite.config.ts
View File

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