perf: Optimize the chat page entry

Author: fit2cloud-chenyw

frontend/src/components/layout/Person.vue

@@ -18,6 +18,7 @@ import Apikey from './Apikey.vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { userApi } from '@/api/auth'
+import { toLoginPage } from '@/utils/utils'
 
 const router = useRouter()
 const appearanceStore = useAppearanceStoreWithOut()
@@ -37,7 +38,7 @@ const isLocalUser = computed(() => !userStore.getOrigin)
 
 const platFlag = computed(() => {
   const platformInfo = userStore.getPlatformInfo
-  return platformInfo?.flag || 0
+  return platformInfo?.origin || 0
 })
 const dialogVisible = ref(false)
 const apikeyDialogVisible = ref(false)
@@ -95,7 +96,8 @@ const savePwdHandler = () => {
 }
 const logout = async () => {
   if (!(await userStore.logout())) {
-    router.push('/login')
+    router.push(toLoginPage(router?.currentRoute?.value?.fullPath || ''))
+    // router.push('/login')
   }
 }
 </script>

frontend/src/i18n/en.json

@@ -667,7 +667,8 @@
     "right": "Right",
     "welcome_description": "Welcome Description",
     "data_analysis_now": "I can query data, generate charts, detect data anomalies, predict data, and more! Enable Smart Data Analysis now!",
-    "window_entrance_icon": "Floating window entrance icon"
+    "window_entrance_icon": "Floating window entrance icon",
+    "preview_error": "The current page prohibits embedding using Iframe!"
   },
   "chat": {
     "type": "Chart Type",

frontend/src/i18n/ko-KR.json

@@ -667,7 +667,8 @@
     "right": "오른쪽",
     "welcome_description": "환영 메시지 설명",
     "data_analysis_now": "저는 데이터 조회, 차트 생성, 데이터 이상 감지, 데이터 예측 등을 할 수 있습니다. 빨리 스마트 데이터 조회를 시작하세요~",
-    "window_entrance_icon": "플로팅 윈도우 입구 아이콘"
+    "window_entrance_icon": "플로팅 윈도우 입구 아이콘",
+    "preview_error": "현재 페이지는 Iframe 임베딩을 허용하지 않습니다!"
   },
   "chat": {
     "type": "차트 유형",

frontend/src/i18n/zh-CN.json

@@ -667,7 +667,8 @@
     "right": "右",
     "welcome_description": "欢迎语描述",
     "data_analysis_now": "我可以查询数据、生成图表、检测数据异常、预测数据等赶快开启智能问数吧～",
-    "window_entrance_icon": "浮窗入口图标"
+    "window_entrance_icon": "浮窗入口图标",
+    "preview_error": "当前页面禁止使用 Iframe 嵌入！"
   },
   "chat": {
     "type": "图表类型",

frontend/src/router/watch.ts

@@ -5,6 +5,7 @@ import { useUserStore } from '@/stores/user'
 import { request } from '@/utils/request'
 import type { Router } from 'vue-router'
 import { generateDynamicRouters } from './dynamic'
+import { toLoginPage } from '@/utils/utils'
 
 const appearanceStore = useAppearanceStoreWithOut()
 const userStore = useUserStore()
@@ -17,7 +18,7 @@ export const watchRouter = (router: Router) => {
     await appearanceStore.setAppearance()
     LicenseGenerator.generateRouters(router)
     if (to.path.startsWith('/login') && userStore.getUid) {
-      next('/')
+      next(to?.query?.redirect || '/')
       return
     }
     if (assistantWhiteList.includes(to.path)) {
@@ -31,7 +32,7 @@ export const watchRouter = (router: Router) => {
     }
     if (!token) {
       // ElMessage.error('Please login first')
-      next('/login')
+      next(toLoginPage(to.fullPath))
       return
     }
     let isFirstDynamicPath = false

frontend/src/stores/user.ts

@@ -4,7 +4,7 @@ import { AuthApi } from '@/api/login'
 import { useCache } from '@/utils/useCache'
 import { i18n } from '@/i18n'
 import { store } from './index'
-import { getQueryString } from '@/utils/utils'
+import { getCurrentRouter, getQueryString } from '@/utils/utils'
 
 const { wsCache } = useCache()
 
@@ -99,7 +99,11 @@ export const UserStore = defineStore('user', {
         return res
       }
       if (getQueryString('code') && getQueryString('state')?.includes('oauth2_state')) {
-        const logout_url = location.origin + location.pathname + '#/login'
+        const currentPath = getCurrentRouter()
+        let logout_url = location.origin + location.pathname + '#/login'
+        if (currentPath) {
+          logout_url += `?redirect=${currentPath}`
+        }
         window.location.href = logout_url
         window.open(res, logout_url)
         return logout_url
@@ -135,6 +139,7 @@ export const UserStore = defineStore('user', {
       })
 
       this.setLanguage(this.language)
+      this.platformInfo = wsCache.get('user.platformInfo')
     },
     setToken(token: string) {
       wsCache.set('user.token', token)

frontend/src/utils/utils.ts

@@ -103,6 +103,29 @@ export const isBtnShow = (val: string) => {
   }
 }
 
+export const toLoginPage = (fullPath: string) => {
+  if (!fullPath || fullPath === '/') {
+    return {
+      path: '/login',
+    }
+  }
+  return {
+    path: '/login',
+    query: { redirect: fullPath },
+  }
+}
+
+export const toLoginSuccess = (router: any) => {
+  const redirect = router?.currentRoute?.value?.query?.redirect
+  const redirectPath = Array.isArray(redirect) ? redirect[0] : redirect || '/chat'
+  router.push(redirectPath as string)
+}
+export const getCurrentRouter = () => {
+  const hash = location.hash
+  if (!hash) return null
+  return hash.replace('#/login?redirect=', '')
+}
+
 export const setTitle = (title?: string) => {
   document.title = title || 'SQLBot'
 }

frontend/src/views/chat/preview.vue

@@ -1,6 +1,8 @@
 <template>
   <div v-loading="divLoading" class="sqlbot-embedded-assistant-page">
+    <error-page v-if="inIframe" :title="t('embedded.preview_error')" />
     <chat-component
+      v-else
       :welcome="customSet.welcome"
       :welcome-desc="customSet.welcome_desc"
       :logo-assistant="logo"
@@ -11,9 +13,10 @@
 </template>
 <script setup lang="ts">
 import ChatComponent from '@/views/chat/index.vue'
-import { nextTick, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-
+import ErrorPage from '@/views/error/index.vue'
+import { isInIframe } from '@/utils/utils'
 const { t } = useI18n()
 //const chatRef = ref()
 
@@ -25,9 +28,10 @@ const customSet = reactive({
   header_font_color: '#1F2329',
 }) as { [key: string]: any }
 const logo = ref()
-
 const divLoading = ref(true)
 
+const inIframe = computed(() => isInIframe())
+
 onMounted(() => {
   nextTick(() => {
     setTimeout(() => {

frontend/src/views/login/index.vue

@@ -85,6 +85,7 @@ import login_image from '@/assets/embedded/login_image.png'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import loginImage from '@/assets/blue/login-image_blue.png'
 import Handler from './xpack/Handler.vue'
+import { toLoginSuccess } from '@/utils/utils'
 
 const showLoading = ref(true)
 const router = useRouter()
@@ -118,7 +119,7 @@ const submitForm = () => {
   loginFormRef.value.validate((valid: boolean) => {
     if (valid) {
       userStore.login(loginForm.value).then(() => {
-        router.push('/chat')
+        toLoginSuccess(router)
       })
     }
   })