diff --git a/src/components/AnimatedNature/index.scss b/src/components/AnimatedNature/index.scss index 8d28011..9354119 100644 --- a/src/components/AnimatedNature/index.scss +++ b/src/components/AnimatedNature/index.scss @@ -1,7 +1,3 @@ -//body { -// display: block; -// background-color: #ffbf00; -//} .section-center { position: relative; width: 600px; diff --git a/src/components/BoxDog/BoxDog.vue b/src/components/BoxDog/BoxDog.vue index 0923b01..9de7b66 100644 --- a/src/components/BoxDog/BoxDog.vue +++ b/src/components/BoxDog/BoxDog.vue @@ -1,13 +1,4 @@ - - + + diff --git a/src/components/BoxDog/index.scss b/src/components/BoxDog/index.scss index bd45c81..7567058 100644 --- a/src/components/BoxDog/index.scss +++ b/src/components/BoxDog/index.scss @@ -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%; diff --git a/src/components/EffectsCard/EffectsCard.vue b/src/components/EffectsCard/EffectsCard.vue index 55a9b2b..32627c6 100644 --- a/src/components/EffectsCard/EffectsCard.vue +++ b/src/components/EffectsCard/EffectsCard.vue @@ -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; diff --git a/src/router/router.ts b/src/router/router.ts index f7cfecc..7c50200 100644 --- a/src/router/router.ts +++ b/src/router/router.ts @@ -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} diff --git a/src/store/index.ts b/src/store/index.ts index 32bd7c0..c19727a 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -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(), }; diff --git a/src/store/modules/clientStore.ts b/src/store/modules/clientStore.ts deleted file mode 100644 index 554060e..0000000 --- a/src/store/modules/clientStore.ts +++ /dev/null @@ -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(); - - function setClientId(id: string) { - clientId.value = id; - } - - function getClientId() { - return clientId.value; - } - - return { - clientId, - setClientId, - getClientId - }; - }, - { - // 开启数据持久化 - persist: { - key: 'clientId', - storage: localStorage, - pick: ["clientId"], - } - } -); - diff --git a/src/store/modules/userStore.ts b/src/store/modules/userStore.ts index 21599d8..2e3306e 100644 --- a/src/store/modules/userStore.ts +++ b/src/store/modules/userStore.ts @@ -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(''); + const githubRedirectUrl = ref(''); + const giteeRedirectUrl = ref(''); + const qqRedirectUrl = ref(''); + 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"], } } ); diff --git a/src/views/404/NotFound.vue b/src/views/404/NotFound.vue index cd8cb99..3197e19 100644 --- a/src/views/404/NotFound.vue +++ b/src/views/404/NotFound.vue @@ -72,7 +72,9 @@ async function backHome() { }, 3000); } -backHome(); +onMounted(async () => { + await backHome(); +}); diff --git a/vite.config.ts b/vite.config.ts index d366c6a..18d9385 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -61,7 +61,7 @@ export default defineConfig(({mode}: { mode: string }): object => { } }, optimizeDeps: { - exclude: ["vite"], + exclude: ["vite", ".vite"], force: true, }, plugins: [