feat: Datasource Page Embed

frontend/src/i18n/en.json

@@ -819,7 +819,8 @@
     "platform_disable": "{0} settings are not enabled!",
     "input_account": "Please enter account",
     "redirect_2_auth": "Redirecting to {0} authentication, {1} seconds...",
-    "redirect_immediately": "Redirecting immediately"
+    "redirect_immediately": "Redirecting immediately",
+    "permission_invalid": "Authentication invalid [Current account has insufficient permissions]"
   },
   "supplier": {
     "alibaba_cloud_bailian": "Alibaba Cloud Bailian",

frontend/src/i18n/ko-KR.json

@@ -819,7 +819,8 @@
     "platform_disable": "{0} 설정이 활성화되지 않았습니다!",
     "input_account": "계정을 입력해 주세요",
     "redirect_2_auth": "{0} 인증으로 리디렉션 중입니다, {1}초...",
-    "redirect_immediately": "지금 이동"
+    "redirect_immediately": "지금 이동",
+    "permission_invalid": "인증 무효 [현재 계정의 권한이 부족합니다]"
   },
   "supplier": {
     "alibaba_cloud_bailian": "알리바바 클라우드 바이리엔",

frontend/src/i18n/zh-CN.json

@@ -819,7 +819,8 @@
     "platform_disable": "{0}设置未开启！",
     "input_account": "请输入账号",
     "redirect_2_auth": "正在跳转至 {0} 认证，{1} 秒...",
-    "redirect_immediately": "立即跳转"
+    "redirect_immediately": "立即跳转",
+    "permission_invalid": "认证无效【当前账号权限不够】"
   },
   "supplier": {
     "alibaba_cloud_bailian": "阿里云百炼",

frontend/src/router/index.ts

@@ -16,6 +16,7 @@ import SystemEmbedded from '@/views/system/embedded/Page.vue'
 import assistantTest from '@/views/system/embedded/Test.vue'
 import assistant from '@/views/embedded/index.vue'
 import EmbeddedPage from '@/views/embedded/page.vue'
+import EmbeddedCommon from '@/views/embedded/common.vue'
 import Member from '@/views/system/member/index.vue'
 import Professional from '@/views/system/professional/index.vue'
 import Training from '@/views/system/training/index.vue'
@@ -251,6 +252,11 @@ export const routes = [
     name: 'embeddedPage',
     component: EmbeddedPage,
   },
+  {
+    path: '/embeddedCommon',
+    name: 'embeddedCommon',
+    component: EmbeddedCommon,
+  },
   {
     path: '/assistantTest',
     name: 'assistantTest',

frontend/src/router/watch.ts

@@ -11,7 +11,7 @@ const appearanceStore = useAppearanceStoreWithOut()
 const userStore = useUserStore()
 const { wsCache } = useCache()
 const whiteList = ['/login', '/admin-login']
-const assistantWhiteList = ['/assistant', '/embeddedPage', '/401']
+const assistantWhiteList = ['/assistant', '/embeddedPage', '/embeddedCommon', '/401']
 export const watchRouter = (router: Router) => {
   router.beforeEach(async (to: any, from: any, next: any) => {
     await loadXpackStatic()

frontend/src/views/embedded/common.vue

@@ -0,0 +1,111 @@
+<template>
+  <div v-loading="divLoading" class="sqlbot--embedded-page">
+    <ds-component
+      v-if="!loading && isWsAdmin && busiFlag === 'ds'"
+      ref="dsRef"
+      :page-embedded="true"
+    />
+    <page-401
+      v-if="!loading && !isWsAdmin && busiFlag === 'ds'"
+      :title="t('login.permission_invalid')"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import DsComponent from '@/views/ds/Datasource.vue'
+import Page401 from '@/views/error/index.vue'
+import { computed, nextTick, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAssistantStore } from '@/stores/assistant'
+import { useUserStore } from '@/stores/user'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+const userStore = useUserStore()
+const assistantStore = useAssistantStore()
+assistantStore.setPageEmbedded(true)
+const route = useRoute()
+
+const loading = ref(true)
+const divLoading = ref(true)
+const eventName = 'sqlbot_embedded_event'
+const busiFlag = ref('ds')
+
+const isWsAdmin = computed(() => {
+  return userStore.isAdmin || userStore.isSpaceAdmin
+})
+const communicationCb = async (event: any) => {
+  if (event.data?.eventName === eventName) {
+    if (event.data?.messageId !== route.query.id) {
+      return
+    }
+    if (!event.data?.busiFlag) {
+      busiFlag.value = ''
+      return
+    }
+    busiFlag.value = event.data.busiFlag
+    if (event.data?.busi == 'certificate') {
+      const type = parseInt(event.data['type'])
+      const certificate = event.data['certificate']
+      assistantStore.setType(type)
+      assistantStore.setToken(certificate)
+      assistantStore.setAssistant(true)
+      await userStore.info()
+      loading.value = false
+      return
+    }
+    if (event.data?.hostOrigin) {
+      assistantStore.setHostOrigin(event.data?.hostOrigin)
+    }
+  }
+}
+
+watch(
+  () => loading.value,
+  (val) => {
+    nextTick(() => {
+      setTimeout(() => {
+        divLoading.value = val
+      }, 1000)
+    })
+  }
+)
+
+const registerReady = (assistantId: any) => {
+  window.addEventListener('message', communicationCb)
+  const readyData = {
+    eventName: 'sqlbot_embedded_event',
+    busi: 'ready',
+    ready: true,
+    messageId: assistantId,
+  }
+  window.parent.postMessage(readyData, '*')
+}
+
+onBeforeMount(async () => {
+  const assistantId = route.query.id
+  if (!assistantId) {
+    ElMessage.error('Miss embedded id, please check embedded url')
+    return
+  }
+  assistantStore.setType(4)
+  const now = Date.now()
+  assistantStore.setFlag(now)
+  assistantStore.setId(assistantId?.toString() || '')
+  assistantStore.setAssistant(true)
+  registerReady(assistantId)
+  return
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', communicationCb)
+})
+</script>
+
+<style lang="less" scoped>
+.sqlbot--embedded-page {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  background: #fff;
+}
+</style>

frontend/src/views/embedded/page.vue

@@ -24,7 +24,8 @@ import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import { useI18n } from 'vue-i18n'
 import { request } from '@/utils/request'
 import { setCurrentColor } from '@/utils/utils'
-
+import { useUserStore } from '@/stores/user'
+const userStore = useUserStore()
 const { t } = useI18n()
 const chatRef = ref()
 const appearanceStore = useAppearanceStoreWithOut()
@@ -64,6 +65,7 @@ const communicationCb = async (event: any) => {
       if (type === 4) {
         assistantStore.setToken(certificate)
         assistantStore.setAssistant(true)
+        await userStore.info()
         loading.value = false
         return
       }