Pr@main@perf chat preview

frontend/src/components/layout/LayoutDsl.vue

@@ -11,7 +11,12 @@ import icon_side_expand_outlined from '@/assets/svg/icon_side-expand_outlined.sv
 import { useRoute, useRouter } from 'vue-router'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import { useEmitt } from '@/utils/useEmitt'
+import { isMobile } from '@/utils/utils'
+import { onBeforeMount } from 'vue'
 
+const isPhone = computed(() => {
+  return isMobile()
+})
 const router = useRouter()
 const collapse = ref(false)
 const collapseCopy = ref(false)
@@ -53,6 +58,12 @@ const route = useRoute()
 const showSysmenu = computed(() => {
   return route.path.includes('/system')
 })
+onBeforeMount(() => {
+  if (isPhone.value) {
+    collapse.value = true
+    collapseCopy.value = true
+  }
+})
 </script>
 
 <template>

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/index.ts

@@ -26,6 +26,8 @@ import Permission from '@/views/system/permission/index.vue'
 import User from '@/views/system/user/User.vue'
 import Workspace from '@/views/system/workspace/index.vue'
 import Page401 from '@/views/error/index.vue'
+import ChatPreview from '@/views/chat/preview.vue'
+
 import { i18n } from '@/i18n'
 import { watchRouter } from './watch'
 
@@ -245,6 +247,11 @@ export const routes = [
     name: 'assistantTest',
     component: assistantTest,
   },
+  {
+    path: '/chatPreview',
+    name: 'chatPreview',
+    component: ChatPreview,
+  },
   {
     path: '/admin-login',
     name: 'admin-login',

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/index.vue

@@ -1014,7 +1014,7 @@ function stop(func?: (...p: any[]) => void, ...param: any[]) {
   }
 }
 const showFloatPopover = () => {
-  if (!isCompletePage.value && !floatPopoverVisible.value) {
+  if ((!isCompletePage.value || isPhone.value) && !floatPopoverVisible.value) {
     floatPopoverVisible.value = true
   }
 }
@@ -1324,6 +1324,7 @@ onMounted(() => {
     max-width: 800px;
     display: flex;
     gap: 16px;
+    padding: 0 16px;
     align-items: center;
     flex-direction: column;
 

frontend/src/views/chat/preview.vue

@@ -0,0 +1,62 @@
+<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"
+      :page-embedded="true"
+      :app-name="customSet.name"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import ChatComponent from '@/views/chat/index.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()
+
+const customSet = reactive({
+  name: '',
+  welcome: t('embedded.i_am_sqlbot'),
+  welcome_desc: t('embedded.data_analysis_now'),
+  theme: '#1CBA90',
+  header_font_color: '#1F2329',
+}) as { [key: string]: any }
+const logo = ref()
+const divLoading = ref(true)
+
+const inIframe = computed(() => isInIframe())
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      divLoading.value = false
+    }, 1500)
+  })
+})
+</script>
+
+<style lang="less" scoped>
+.sqlbot--embedded-page {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  background: #fff;
+}
+.sqlbot-embedded-assistant-page {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #f7f8fa;
+  box-sizing: border-box;
+  overflow: auto;
+  padding-bottom: 48px;
+}
+</style>

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)
       })
     }
   })