邀请

src/router/index.ts

@@ -20,17 +20,19 @@ const routes = [
     name: 'login',
     path: '/login',
     component: () => import('@/views/global/login/index.vue'),
-    meta: {
-      noLoading: true,
-    },
+    meta: {},
+  },
+  {
+    name: 'invite',
+    path: '/invite',
+    component: () => import('@/views/global/invite/index.vue'),
+    meta: {},
   },
   {
     name: 'workflow',
     path: '/workflow',
     component: () => import('@/views/workflow/index.vue'),
-    meta: {
-      noLoading: true,
-    },
+    meta: {},
   },
 ]
 const hasLogin = (import.meta as any).env.VITE_LOGIN_MUST === 'Y'
@@ -41,6 +43,7 @@ const router = createRouter({
 })
 router.beforeEach((to, from, next) => {
   const isLogin = to.name === 'login'
+  const inviteQuery = to.name === 'invite' ? to.query : {}
   const AppStore = useAppStore()
   AppStore.loadingStart()
   if (
@@ -63,13 +66,13 @@ router.beforeEach((to, from, next) => {
             })
             .catch((e) => {
               localStorage.removeItem((import.meta as any).env.VITE_TOKEN)
-              next({ name: 'login' })
+              next({ name: 'login', query: inviteQuery })
             })
             .finally(() => {
               AppStore.loadingEnd()
             })
         } else {
-          next({ name: 'login' })
+          next({ name: 'login', query: inviteQuery })
           AppStore.loadingEnd()
         }
       }

src/views/global/invite/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="relative size-full bg-[url('@/assets/images/login-bg.png')] bg-[length:100%_100%] bg-no-repeat"
+  >
+    <img
+      class="absolute top-11 left-15 h-11 w-69"
+      src="@/assets/images/taiji-logo.png"
+    />
+    <div
+      class="absolute top-0 right-0 flex h-full w-[42.5rem] items-center justify-center bg-[var(--czr-dialog-bg)]"
+    >
+      <div class="flex w-[26.5rem] flex-col">
+        <div class="text-[1.88rem] font-bold text-[#373D4C]">xxx邀请您加入</div>
+        <div class="mt-4 text-[1.88rem] font-bold text-[#3363DE]">xxx组织</div>
+        <div
+          class="__hover mt-2 mt-12 flex h-[2.5rem] w-full items-center justify-center bg-[#3363DE] text-sm text-[#ffffff]"
+          @click="onSubmit"
+          v-loading="state.loading"
+        >
+          加入组织
+        </div>
+        <div class="mt-3 text-sm text-[#576275]">
+          链接将在 <span class="text-[#3363DE]">2025-07-31 12:22:33</span> 失效
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, reactive, ref, onMounted } from 'vue'
+import { User, Lock, Clock } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { useAppStore } from '@/stores'
+
+const AppStore = useAppStore()
+const router = useRouter()
+const emit = defineEmits([])
+const props = defineProps({})
+const { proxy }: any = getCurrentInstance()
+const state: any = reactive({
+  loading: false,
+})
+const onSubmit = () => {
+  if (!state.loading) {
+    state.loading = true
+    ElMessage.success('加入组织成功！')
+    router.replace({ name: 'root' })
+  }
+}
+onMounted(() => {})
+</script>
+
+<style lang="scss" scoped></style>

src/views/global/login/index.vue

@@ -1,7 +1,14 @@
 <template>
-  <div class="login">
-    <img class="logo" src="@/assets/images/taiji-logo.png" />
-    <div class="login-main">
+  <div
+    class="relative size-full bg-[url('@/assets/images/login-bg.png')] bg-[length:100%_100%] bg-no-repeat"
+  >
+    <img
+      class="absolute top-11 left-15 h-11 w-69"
+      src="@/assets/images/taiji-logo.png"
+    />
+    <div
+      class="absolute top-0 right-0 flex h-full w-[42.5rem] items-center justify-center bg-[var(--czr-dialog-bg)]"
+    >
       <div class="flex w-[26.5rem] flex-col">
         <div class="text-[1.88rem] font-bold text-[#373D4C]">欢迎您登录</div>
         <div class="mt-4 text-[1.88rem] font-bold text-[#3363DE]">
@@ -133,31 +140,4 @@ onMounted(() => {
 })
 </script>
 
-<style lang="scss" scoped>
-.login {
-  width: 100%;
-  height: 100vh;
-  background-image: url('@/assets/images/login-bg.png');
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  position: relative;
-  .logo {
-    position: absolute;
-    top: 2.75rem;
-    left: 3.88rem;
-    width: 17.25rem;
-    height: 2.63rem;
-  }
-  .login-main {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    width: 42.5rem;
-    background-color: var(--czr-dialog-bg);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>
+<style lang="scss" scoped></style>