diff --git a/frontend/src/api/embedded.ts b/frontend/src/api/embedded.ts
index 6002ca90..20803106 100644
--- a/frontend/src/api/embedded.ts
+++ b/frontend/src/api/embedded.ts
@@ -6,3 +6,14 @@ export const saveAssistant = (data: any) => request.post('/system/assistant', da
 export const getOne = (id: any) => request.get(`/system/assistant/${id}`)
 export const delOne = (id: any) => request.delete(`/system/assistant/${id}`)
 export const dsApi = (id: any) => request.get(`/datasource/ws/${id}`)
+
+export const embeddedApi = {
+  getList: (pageNum: any, pageSize: any, params: any) =>
+    request.get(`/system/embedded/${pageNum}/${pageSize}`, {
+      params,
+    }),
+  updateEmbedded: (data: any) => request.put('/system/embedded', data),
+  addEmbedded: (data: any) => request.post('/system/embedded', data),
+  deleteEmbedded: (data: any) => request.delete('/system/embedded', data),
+  getOne: (id: any) => request.get(`/system/embedded/${id}`),
+}
diff --git a/frontend/src/assets/embedded/icon_invisible_outlined.svg b/frontend/src/assets/embedded/icon_invisible_outlined.svg
new file mode 100644
index 00000000..2a95dc15
--- /dev/null
+++ b/frontend/src/assets/embedded/icon_invisible_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00022 10.0002C7.56203 10.0002 7.13323 9.96572 6.71734 9.8997L6.38535 11.1387C6.33771 11.3165 6.15493 11.4221 5.97711 11.3744L5.33315 11.2019C5.15533 11.1542 5.0498 10.9714 5.09745 10.7936L5.42255 9.58034C4.88013 9.3961 4.37096 9.15543 3.90491 8.86678L2.8454 9.92629C2.71522 10.0565 2.50417 10.0565 2.37399 9.92629L1.90259 9.45489C1.77242 9.32471 1.77242 9.11366 1.90259 8.98348L2.83565 8.05043C2.35424 7.59967 1.95209 7.08569 1.64812 6.5247C1.64492 6.51881 1.64162 6.51264 1.63823 6.50624C1.5136 6.27086 1.56023 5.97623 1.75709 5.79684C1.92051 5.64792 2.03596 5.54659 2.13639 5.44616C2.14538 5.43717 2.15521 5.42715 2.16569 5.41632C2.31108 5.26609 2.55902 5.32201 2.64417 5.51294C3.47427 7.37447 5.46211 8.6669 8.00022 8.6669C10.4321 8.6669 12.4664 7.40921 13.2829 5.68288C13.3042 5.63796 13.328 5.58139 13.3519 5.52133C13.4276 5.33113 13.6741 5.27374 13.8188 5.41849C13.9259 5.52556 14.0687 5.66833 14.2471 5.84678C14.4235 6.02319 14.4713 6.29259 14.356 6.51383C14.3279 6.56764 14.3006 6.61834 14.2774 6.65865C13.9638 7.20157 13.5572 7.69799 13.0754 8.13259L13.9263 8.98348C14.0565 9.11366 14.0565 9.32471 13.9263 9.45489L13.4549 9.92629C13.3247 10.0565 13.1136 10.0565 12.9835 9.92629L11.9888 8.93161C11.5521 9.1916 11.0792 9.41007 10.5779 9.58034L10.903 10.7936C10.9506 10.9714 10.8451 11.1542 10.6673 11.2019L10.0233 11.3744C9.84552 11.4221 9.66274 11.3165 9.61509 11.1387L9.2831 9.8997C8.86721 9.96572 8.43842 10.0002 8.00022 10.0002Z" fill="#646A73"/>
+</svg>
diff --git a/frontend/src/assets/embedded/icon_refresh_outlined.svg b/frontend/src/assets/embedded/icon_refresh_outlined.svg
new file mode 100644
index 00000000..ca174ee9
--- /dev/null
+++ b/frontend/src/assets/embedded/icon_refresh_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8302 5.33333C10.9869 4.12434 9.58583 3.33333 8 3.33333C5.42267 3.33333 3.33333 5.42267 3.33333 8C3.33333 10.5773 5.42267 12.6667 8 12.6667C10.114 12.6667 11.8997 11.261 12.4734 9.33333L13.8513 9.33333C13.245 12.0053 10.8554 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C9.88484 2 11.5667 2.86911 12.6667 4.22844V2.33333C12.6667 2.14924 12.8159 2 13 2H13.6667C13.8508 2 14 2.14924 14 2.33333V6C14 6.36819 13.7015 6.66667 13.3333 6.66667L9.66667 6.66667C9.48257 6.66667 9.33333 6.51743 9.33333 6.33333V5.66667C9.33333 5.48257 9.48257 5.33333 9.66667 5.33333L11.8302 5.33333Z" fill="#646A73"/>
+</svg>
diff --git a/frontend/src/assets/embedded/icon_visible_outlined.svg b/frontend/src/assets/embedded/icon_visible_outlined.svg
new file mode 100644
index 00000000..f4dff258
--- /dev/null
+++ b/frontend/src/assets/embedded/icon_visible_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.98994 12.3335C10.1486 12.3335 12.1472 10.9604 14.0001 7.9915C12.1949 5.03321 10.2008 3.66683 7.98994 3.66683C5.77984 3.66683 3.7929 5.03259 2.00009 7.99148C3.84053 10.961 5.83206 12.3335 7.98994 12.3335ZM1.00172 8.59353C0.787049 8.22812 0.785596 7.77385 0.995302 7.40557C1.00277 7.39245 1.00993 7.37994 1.01672 7.36817C2.9521 4.01172 5.27627 2.3335 7.98923 2.3335C10.7133 2.3335 13.0518 4.02544 15.0049 7.40933C15.0107 7.41947 15.0168 7.43018 15.0232 7.44138C15.2208 7.78738 15.2193 8.2145 15.0172 8.55787C13.0127 11.9638 10.67 13.6668 7.98923 13.6668C5.31784 13.6668 2.98867 11.9757 1.00172 8.59353ZM8.00009 10.6668C6.52733 10.6668 5.33342 9.47292 5.33342 8.00016C5.33342 6.5274 6.52733 5.3335 8.00009 5.3335C9.47285 5.3335 10.6668 6.5274 10.6668 8.00016C10.6668 9.47292 9.47285 10.6668 8.00009 10.6668ZM8.00009 9.3335C8.73647 9.3335 9.33342 8.73654 9.33342 8.00016C9.33342 7.26378 8.73647 6.66683 8.00009 6.66683C7.26371 6.66683 6.66675 7.26378 6.66675 8.00016C6.66675 8.73654 7.26371 9.3335 8.00009 9.3335Z" fill="#646A73"/>
+</svg>
diff --git a/frontend/src/assets/embedded/info-yellow.svg b/frontend/src/assets/embedded/info-yellow.svg
new file mode 100644
index 00000000..4b0f9fd1
--- /dev/null
+++ b/frontend/src/assets/embedded/info-yellow.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3082_188703)">
+<path d="M7.99999 15.3337C12.0501 15.3337 15.3333 12.0504 15.3333 8.00033C15.3333 3.95024 12.0501 0.666992 7.99999 0.666992C3.9499 0.666992 0.666656 3.95024 0.666656 8.00033C0.666656 12.0504 3.9499 15.3337 7.99999 15.3337Z" fill="#FF8800"/>
+<path d="M7.66668 4.66699C7.48258 4.66699 7.33334 4.81623 7.33334 5.00033V9.00033C7.33334 9.18442 7.48258 9.33366 7.66668 9.33366H8.33334C8.51744 9.33366 8.66668 9.18442 8.66668 9.00033V5.00033C8.66668 4.81623 8.51744 4.66699 8.33334 4.66699H7.66668Z" fill="white"/>
+<path d="M7.66668 10.0003C7.48258 10.0003 7.33334 10.1496 7.33334 10.3337V11.0003C7.33334 11.1844 7.48258 11.3337 7.66668 11.3337H8.33334C8.51744 11.3337 8.66668 11.1844 8.66668 11.0003V10.3337C8.66668 10.1496 8.51744 10.0003 8.33334 10.0003H7.66668Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3082_188703">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 1ec86bff..d7fe7d15 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -462,6 +462,13 @@
     "intelligent_data_query": "Hurry up and start intelligent data query~"
   },
   "embedded": {
+    "delete_10_apps": "Do you want to delete {msg} apps?",
+    "click_to_show": "Click to show",
+    "click_to_hide": "Click to hide",
+    "your_app_secret": "Are you sure you want to update your App Secret?",
+    "proceed_with_caution": "Resetting your existing App Secret will invalidate it. Please proceed with caution.",
+    "password_length": "Password length",
+    "edit_app": "Edit app",
     "embedded_management": "Embedded management",
     "embedded_assistant": "Embedded assistant",
     "embedded_page": "Embedded page",
@@ -619,4 +626,4 @@
     "setting_successfully": "Setting Successfully",
     "customize_theme_color": "Customize theme color"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index ed2a378d..ef9eff09 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -462,6 +462,13 @@
     "intelligent_data_query": "赶快开启智能问数吧～"
   },
   "embedded": {
+    "delete_10_apps": "是否删除 {msg} 个应用？",
+    "click_to_show": "点击显示",
+    "click_to_hide": "点击隐藏",
+    "your_app_secret": "确定更新 APP Secret 吗？",
+    "proceed_with_caution": "重置后现有的 App Secret 将会失效，请谨慎操作。",
+    "password_length": "密码长度",
+    "edit_app": "编辑应用",
     "embedded_management": "嵌入式管理",
     "embedded_assistant": "小助手嵌入",
     "embedded_page": "页面嵌入",
@@ -619,4 +626,4 @@
     "setting_successfully": "设置成功",
     "customize_theme_color": "自定义主题色"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/style.less b/frontend/src/style.less
index f63d4874..428d6945 100644
--- a/frontend/src/style.less
+++ b/frontend/src/style.less
@@ -29,6 +29,8 @@
   --ed-border-color: #d9dcdf !important;
   --ed-border-radius-base: 6px !important;
   --ed-disabled-border-color: #d9dcdf !important;
+  --ed-border-color-light: #dee0e3 !important;
+  --ed-border-color-lighter: #dee0e3 !important;
 }
 
 a {
diff --git a/frontend/src/views/system/embedded/Page.vue b/frontend/src/views/system/embedded/Page.vue
new file mode 100644
index 00000000..cec4a7ec
--- /dev/null
+++ b/frontend/src/views/system/embedded/Page.vue
@@ -0,0 +1,770 @@
+<script lang="ts" setup>
+import { ref, onMounted, reactive, unref, nextTick } from 'vue'
+import icon_copy_outlined from '@/assets/svg/icon_copy_outlined.svg'
+import { embeddedApi } from '@/api/embedded'
+import info_yellow from '@/assets/embedded/info-yellow.svg'
+import icon_invisible_outlined from '@/assets/embedded/icon_invisible_outlined.svg'
+import icon_visible_outlined from '@/assets/embedded/icon_visible_outlined.svg'
+import icon_refresh_outlined from '@/assets/embedded/icon_refresh_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import IconOpeEdit from '@/assets/svg/icon_edit_outlined.svg'
+import IconOpeDelete from '@/assets/svg/icon_delete.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
+import { useClipboard } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import { cloneDeep } from 'lodash-es'
+
+defineProps({
+  btnSelect: {
+    type: String,
+    default: '',
+  },
+})
+
+const emits = defineEmits(['btnSelectChange'])
+const { t } = useI18n()
+const multipleSelectionAll = ref<any[]>([])
+const keywords = ref('')
+const searchLoading = ref(false)
+
+const selectable = () => {
+  return true
+}
+onMounted(() => {
+  search()
+})
+const dialogFormVisible = ref<boolean>(false)
+const multipleTableRef = ref()
+const isIndeterminate = ref(true)
+const checkAll = ref(false)
+const fieldList = ref<any>([])
+const pageInfo = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+})
+
+const cancelDelete = () => {
+  handleToggleRowSelection(false)
+  multipleSelectionAll.value = []
+  checkAll.value = false
+  isIndeterminate.value = false
+}
+const deleteBatchUser = () => {
+  ElMessageBox.confirm(t('embedded.delete_10_apps', { msg: multipleSelectionAll.value.length }), {
+    confirmButtonType: 'danger',
+    confirmButtonText: t('dashboard.delete_success'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  }).then(() => {
+    embeddedApi.deleteEmbedded(multipleSelectionAll.value.map((ele) => ele.id)).then(() => {
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      multipleSelectionAll.value = []
+      search()
+    })
+  })
+}
+const deleteHandler = (row: any) => {
+  ElMessageBox.confirm(t('embedded.delete', { msg: row.name }), {
+    confirmButtonType: 'danger',
+    confirmButtonText: t('dashboard.delete_success'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  }).then(() => {
+    embeddedApi.deleteEmbedded([row.id]).then(() => {
+      multipleSelectionAll.value = multipleSelectionAll.value.filter((ele) => row.id !== ele.id)
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      search()
+    })
+  })
+}
+const handleSelectionChange = (val: any[]) => {
+  if (toggleRowLoading.value) return
+  const arr = fieldList.value.filter(selectable)
+  const ids = arr.map((ele: any) => ele.id)
+  multipleSelectionAll.value = [
+    ...multipleSelectionAll.value.filter((ele) => !ids.includes(ele.id)),
+    ...val,
+  ]
+  isIndeterminate.value = !(val.length === 0 || val.length === arr.length)
+  checkAll.value = val.length === arr.length
+}
+const handleCheckAllChange = (val: any) => {
+  isIndeterminate.value = false
+  handleSelectionChange(val ? fieldList.value.filter(selectable) : [])
+  if (val) {
+    handleToggleRowSelection()
+  } else {
+    multipleTableRef.value.clearSelection()
+  }
+}
+
+const toggleRowLoading = ref(false)
+
+const handleToggleRowSelection = (check: boolean = true) => {
+  toggleRowLoading.value = true
+  const arr = fieldList.value.filter(selectable)
+  let i = 0
+  const ids = multipleSelectionAll.value.map((ele: any) => ele.id)
+  for (const key in arr) {
+    if (ids.includes((arr[key] as any).id)) {
+      i += 1
+      multipleTableRef.value.toggleRowSelection(arr[key], check)
+    }
+  }
+  toggleRowLoading.value = false
+  checkAll.value = i === arr.length
+  isIndeterminate.value = !(i === 0 || i === arr.length)
+}
+
+const setButtonRef = (el: any, row: any) => {
+  row.buttonRef = el
+}
+const onClickOutside = (row: any) => {
+  if (row.popoverRef) {
+    unref(row.popoverRef).popperRef?.delayHide?.()
+  }
+}
+
+const setPopoverRef = (el: any, row: any) => {
+  row.popoverRef = el
+}
+
+const cancelRefresh = (row: any) => {
+  if (row.popoverRef) {
+    unref(row.popoverRef).hide?.()
+  }
+}
+
+const refresh = (row: any) => {
+  cancelRefresh(row)
+}
+
+const search = () => {
+  searchLoading.value = true
+  embeddedApi
+    .getList(pageInfo.currentPage, pageInfo.pageSize, { keyword: keywords.value })
+    .then((res) => {
+      toggleRowLoading.value = true
+      fieldList.value = res.items
+      pageInfo.total = res.total
+      nextTick(() => {
+        handleToggleRowSelection()
+      })
+    })
+    .finally(() => {
+      searchLoading.value = false
+    })
+}
+
+const termFormRef = ref()
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('embedded.application_name'),
+    },
+  ],
+  domain: [
+    {
+      required: true,
+      message:
+        t('datasource.please_enter') + t('common.empty') + t('embedded.cross_domain_settings'),
+    },
+  ],
+}
+
+const saveHandler = () => {
+  termFormRef.value.validate((res: any) => {
+    if (res) {
+      embeddedApi.addEmbedded(unref(pageForm)).then(() => {
+        ElMessage({
+          type: 'success',
+          message: t('common.save_success'),
+        })
+        search()
+        dialogFormVisible.value = false
+      })
+    }
+  })
+}
+
+const pwd = '**********'
+
+const dialogTitle = ref('')
+const defaultForm = {
+  id: null,
+  name: null,
+  domain: null,
+  type: 0,
+  configuration: null,
+  description: null,
+}
+const pageForm = ref(cloneDeep(defaultForm))
+const editHandler = (row: any) => {
+  pageForm.value.id = null
+  if (row) {
+    pageForm.value = cloneDeep(row)
+  }
+  dialogTitle.value = row?.id ? t('embedded.edit_app') : t('embedded.create_application')
+  dialogFormVisible.value = true
+}
+
+const onFormClose = () => {
+  pageForm.value = cloneDeep(defaultForm)
+  dialogFormVisible.value = false
+}
+
+const handleSizeChange = (val: number) => {
+  pageInfo.currentPage = 1
+  pageInfo.pageSize = val
+  search()
+}
+
+const handleCurrentChange = (val: number) => {
+  pageInfo.currentPage = val
+  search()
+}
+const { copy } = useClipboard({ legacy: true })
+
+const copyCode = (row: any, key: any = 'app_secret') => {
+  copy(row[key])
+    .then(function () {
+      ElMessage.success(t('embedded.copy_successful'))
+    })
+    .catch(function () {
+      ElMessage.error(t('embedded.copy_successful'))
+    })
+}
+</script>
+
+<template>
+  <div v-loading="searchLoading" class="embedded-page">
+    <div class="tool-left">
+      <div class="btn-select">
+        <el-button
+          :class="[btnSelect === 'd' && 'is-active']"
+          text
+          @click="emits('btnSelectChange', 'd')"
+        >
+          {{ t('embedded.embedded_assistant') }}
+        </el-button>
+        <el-button
+          :class="[btnSelect === 'q' && 'is-active']"
+          text
+          @click="emits('btnSelectChange', 'q')"
+        >
+          {{ t('embedded.embedded_page') }}
+        </el-button>
+      </div>
+      <div>
+        <el-input
+          v-model="keywords"
+          style="width: 240px; margin-right: 12px"
+          :placeholder="$t('dashboard.search')"
+          clearable
+          @keyup.enter="search"
+          @blur="search"
+        >
+          <template #prefix>
+            <el-icon>
+              <icon_searchOutline_outlined />
+            </el-icon>
+          </template>
+        </el-input>
+
+        <el-button type="primary" @click="editHandler(null)">
+          <template #icon>
+            <icon_add_outlined></icon_add_outlined>
+          </template>
+          {{ $t('embedded.create_application') }}
+        </el-button>
+      </div>
+    </div>
+    <div
+      v-if="!searchLoading"
+      class="table-content"
+      :class="multipleSelectionAll.length && 'show-pagination_height'"
+    >
+      <template v-if="!keywords && !fieldList.length">
+        <EmptyBackground
+          class="datasource-yet"
+          :description="$t('embedded.no_application')"
+          img-type="noneWhite"
+        />
+
+        <div style="text-align: center; margin-top: -10px">
+          <el-button type="primary" @click="editHandler(null)">
+            <template #icon>
+              <icon_add_outlined></icon_add_outlined>
+            </template>
+            {{ $t('embedded.create_application') }}
+          </el-button>
+        </div>
+      </template>
+      <div v-else class="preview-or-schema">
+        <el-table
+          ref="multipleTableRef"
+          :data="fieldList"
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column :selectable="selectable" type="selection" width="55" />
+          <el-table-column prop="name" :label="$t('embedded.application_name')" width="280" />
+          <el-table-column prop="app_id" label="APP ID" width="240">
+            <template #default="scope">
+              <div class="user-status-container">
+                <div :title="scope.row.app_id" class="ellipsis" style="max-width: 192px">
+                  {{ scope.row.app_id }}
+                </div>
+                <el-tooltip
+                  :offset="12"
+                  effect="dark"
+                  :content="t('datasource.copy')"
+                  placement="top"
+                >
+                  <el-icon
+                    size="16"
+                    class="hover-icon_with_bg"
+                    @click="copyCode(scope.row, 'app_id')"
+                  >
+                    <icon_copy_outlined></icon_copy_outlined>
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="app_secret" label="APP Secret" width="240">
+            <template #default="scope">
+              <div class="user-status-container">
+                <div
+                  :title="scope.row.showPwd ? scope.row.app_id : pwd"
+                  class="ellipsis"
+                  style="max-width: 133px"
+                >
+                  {{ scope.row.showPwd ? scope.row.app_id : pwd }}
+                </div>
+                <el-tooltip
+                  :offset="12"
+                  effect="dark"
+                  :content="t('datasource.copy')"
+                  placement="top"
+                >
+                  <el-icon class="hover-icon_with_bg" size="16" @click="copyCode(scope.row)">
+                    <icon_copy_outlined></icon_copy_outlined>
+                  </el-icon>
+                </el-tooltip>
+
+                <el-tooltip
+                  v-if="scope.row.showPwd"
+                  :offset="12"
+                  effect="dark"
+                  :content="t('embedded.click_to_hide')"
+                  placement="top"
+                >
+                  <el-icon class="hover-icon_with_bg" size="16" @click="scope.row.showPwd = false">
+                    <icon_visible_outlined></icon_visible_outlined>
+                  </el-icon>
+                </el-tooltip>
+
+                <el-tooltip
+                  v-if="!scope.row.showPwd"
+                  :offset="12"
+                  effect="dark"
+                  :content="t('embedded.click_to_show')"
+                  placement="top"
+                >
+                  <el-icon class="hover-icon_with_bg" size="16" @click="scope.row.showPwd = true">
+                    <icon_invisible_outlined></icon_invisible_outlined>
+                  </el-icon>
+                </el-tooltip>
+                <el-icon
+                  :ref="
+                    (el: any) => {
+                      setButtonRef(el, scope.row)
+                    }
+                  "
+                  v-click-outside="() => onClickOutside(scope.row)"
+                  class="hover-icon_with_bg"
+                  :offset="12"
+                  size="16"
+                >
+                  <icon_refresh_outlined></icon_refresh_outlined>
+                </el-icon>
+
+                <el-popover
+                  :ref="
+                    (el: any) => {
+                      setPopoverRef(el, scope.row)
+                    }
+                  "
+                  :width="280"
+                  :offset="12"
+                  virtual-triggering
+                  :virtual-ref="scope.row.buttonRef"
+                  show-arrow
+                  popper-class="box-item_refresh"
+                  placement="bottom"
+                >
+                  <template #reference> </template>
+                  <div class="title">
+                    <el-icon class="hover-icon_with_bg" size="16">
+                      <info_yellow></info_yellow>
+                    </el-icon>
+                    <span class="sure">{{ $t('embedded.your_app_secret') }}</span>
+                  </div>
+                  <div class="tips">{{ $t('embedded.proceed_with_caution') }}</div>
+                  <div class="btns">
+                    <el-button secondary @click="cancelRefresh(scope.row)">
+                      {{ t('common.cancel') }}
+                    </el-button>
+                    <el-button type="primary" @click="refresh(scope.row)">
+                      {{ t('common.confirm2') }}
+                    </el-button>
+                  </div>
+                </el-popover>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="domain"
+            :label="$t('embedded.cross_domain_settings')"
+            width="204"
+          />
+          <el-table-column fixed="right" width="80" :label="t('ds.actions')">
+            <template #default="scope">
+              <div class="field-comment">
+                <el-tooltip
+                  :offset="14"
+                  effect="dark"
+                  :content="$t('datasource.edit')"
+                  placement="top"
+                >
+                  <el-icon class="action-btn" size="16" @click="editHandler(scope.row)">
+                    <IconOpeEdit></IconOpeEdit>
+                  </el-icon>
+                </el-tooltip>
+                <el-tooltip
+                  :offset="14"
+                  effect="dark"
+                  :content="$t('dashboard.delete')"
+                  placement="top"
+                >
+                  <el-icon class="action-btn" size="16" @click="deleteHandler(scope.row)">
+                    <IconOpeDelete></IconOpeDelete>
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <EmptyBackground
+              v-if="!keywords && !fieldList.length"
+              :description="$t('embedded.no_application')"
+              img-type="noneWhite"
+            />
+
+            <EmptyBackground
+              v-if="!!keywords && !fieldList.length"
+              :description="$t('datasource.relevant_content_found')"
+              img-type="tree"
+            />
+          </template>
+        </el-table>
+      </div>
+    </div>
+
+    <div v-if="fieldList.length" class="pagination-container">
+      <el-pagination
+        v-model:current-page="pageInfo.currentPage"
+        v-model:page-size="pageInfo.pageSize"
+        :page-sizes="[10, 20, 30]"
+        :background="true"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageInfo.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+    <div v-if="multipleSelectionAll.length" class="bottom-select">
+      <el-checkbox
+        v-model="checkAll"
+        :indeterminate="isIndeterminate"
+        @change="handleCheckAllChange"
+      >
+        {{ $t('datasource.select_all') }}
+      </el-checkbox>
+
+      <button class="danger-button" @click="deleteBatchUser">{{ $t('workspace.remove') }}</button>
+
+      <span class="selected">{{
+        $t('user.selected_2_items', { msg: multipleSelectionAll.length })
+      }}</span>
+
+      <el-button text @click="cancelDelete">
+        {{ $t('common.cancel') }}
+      </el-button>
+    </div>
+  </div>
+
+  <el-drawer
+    v-model="dialogFormVisible"
+    :title="dialogTitle"
+    destroy-on-close
+    size="600px"
+    :before-close="onFormClose"
+  >
+    <el-form
+      ref="termFormRef"
+      :model="pageForm"
+      label-width="180px"
+      label-position="top"
+      :rules="rules"
+      class="form-content_error"
+      @submit.prevent
+    >
+      <el-form-item prop="name" :label="t('embedded.application_name')">
+        <el-input
+          v-model="pageForm.name"
+          :placeholder="
+            $t('datasource.please_enter') + $t('common.empty') + $t('embedded.application_name')
+          "
+          autocomplete="off"
+          maxlength="50"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item prop="domain" :label="t('embedded.cross_domain_settings')">
+        <el-input
+          v-model="pageForm.domain"
+          :placeholder="
+            $t('datasource.please_enter') +
+            $t('common.empty') +
+            $t('embedded.cross_domain_settings')
+          "
+          autocomplete="off"
+          maxlength="50"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item prop="email" :label="$t('embedded.password_length')">
+        <el-input
+          v-model="pageForm.email"
+          :placeholder="
+            $t('datasource.please_enter') + $t('common.empty') + $t('embedded.password_length')
+          "
+          autocomplete="off"
+          clearable
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button secondary @click="onFormClose">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="saveHandler">
+          {{ $t('common.save') }}
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<style lang="less" scoped>
+.embedded-page {
+  height: 100%;
+  position: relative;
+
+  .datasource-yet {
+    padding-bottom: 0;
+    height: auto;
+    padding-top: 200px;
+  }
+  .tool-left {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    .btn-select {
+      height: 32px;
+      padding-left: 4px;
+      padding-right: 4px;
+      display: inline-flex;
+      background: #ffffff;
+      align-items: center;
+      border: 1px solid #d9dcdf;
+      border-radius: 6px;
+
+      .is-active {
+        background: var(--ed-color-primary-1a, #1cba901a);
+      }
+
+      .ed-button:not(.is-active) {
+        color: #1f2329;
+      }
+      .ed-button.is-text {
+        height: 24px;
+        width: auto;
+        padding: 0 8px;
+        line-height: 24px;
+      }
+      .ed-button + .ed-button {
+        margin-left: 4px;
+      }
+    }
+  }
+  .pagination-container {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    margin-top: 16px;
+  }
+  .table-content {
+    max-height: calc(100% - 104px);
+    overflow-y: auto;
+
+    &.show-pagination_height {
+      max-height: calc(100% - 165px);
+    }
+
+    .preview-or-schema {
+      .ed-icon {
+        color: #646a73;
+      }
+      .user-status-container {
+        display: flex;
+        align-items: center;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        height: 24px;
+
+        .ed-icon {
+          margin-left: 8px;
+        }
+      }
+      .field-comment {
+        height: 24px;
+        .ed-icon {
+          position: relative;
+          cursor: pointer;
+          margin-top: 4px;
+          margin-right: 10px;
+
+          &::after {
+            content: '';
+            background-color: #1f23291a;
+            position: absolute;
+            border-radius: 6px;
+            width: 24px;
+            height: 24px;
+            transform: translate(-50%, -50%);
+            top: 50%;
+            left: 50%;
+            display: none;
+          }
+
+          &:not(.not-allow):hover {
+            &::after {
+              display: block;
+            }
+          }
+
+          &.not-allow {
+            cursor: not-allowed;
+          }
+        }
+      }
+
+      .preview-num {
+        margin: 12px 0;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: #646a73;
+      }
+    }
+  }
+
+  .bottom-select {
+    position: absolute;
+    height: 64px;
+    width: calc(100% + 48px);
+    left: -24px;
+    bottom: -16px;
+    border-top: 1px solid #1f232926;
+    display: flex;
+    background-color: #fff;
+    align-items: center;
+    padding-left: 24px;
+    background-color: #fff;
+    z-index: 10;
+
+    .danger-button {
+      border: 1px solid var(--ed-color-danger);
+      color: var(--ed-color-danger);
+      border-radius: var(--ed-border-radius-base);
+      min-width: 80px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      cursor: pointer;
+      margin: 0 16px;
+      background-color: transparent;
+    }
+
+    .selected {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: #646a73;
+      margin-right: 12px;
+    }
+  }
+}
+</style>
+<style lang="less">
+.box-item_refresh {
+  --ed-popover-padding: 20px 24px;
+  .ed-popper__arrow {
+    background: transparent !important;
+    &::before {
+      background: #fff;
+    }
+  }
+  .title {
+    display: flex;
+    align-items: center;
+    .sure {
+      margin-left: 8px;
+      font-weight: 500;
+      font-size: 14px;
+    }
+  }
+
+  .tips {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    margin: 4px 0 16px 0;
+    padding-left: 24px;
+  }
+
+  .btns {
+    text-align: right;
+    .ed-button {
+      min-width: 48px;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/system/embedded/iframe.vue b/frontend/src/views/system/embedded/iframe.vue
new file mode 100644
index 00000000..e1e87b1c
--- /dev/null
+++ b/frontend/src/views/system/embedded/iframe.vue
@@ -0,0 +1,1255 @@
+<script lang="ts" setup>
+import { ref, computed, reactive, nextTick } from 'vue'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import icon_close_outlined from '@/assets/svg/operate/ope-close.svg'
+import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
+import icon_database_colorful from '@/assets/embedded/icon_database_colorful.png'
+import icon_web_site_colorful from '@/assets/embedded/icon_web-site_colorful.png'
+import floating_window from '@/assets/embedded/window.png'
+import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
+import icon_delete from '@/assets/svg/icon_delete.svg'
+import icon_copy_outlined from '@/assets/embedded/icon_copy_outlined.svg'
+import { useClipboard } from '@vueuse/core'
+import SetUi from './SetUi.vue'
+import Card from './Card.vue'
+import { workspaceList } from '@/api/workspace'
+import DsCard from './DsCard.vue'
+import { getList, updateAssistant, saveAssistant, delOne, dsApi } from '@/api/embedded'
+import { useI18n } from 'vue-i18n'
+import { cloneDeep } from 'lodash-es'
+
+defineProps({
+  btnSelect: {
+    type: String,
+    default: '',
+  },
+})
+
+const emits = defineEmits(['btnSelectChange'])
+
+const { t } = useI18n()
+const { copy } = useClipboard({ legacy: true })
+
+const keywords = ref('')
+const activeStep = ref(0)
+const ruleConfigvVisible = ref(false)
+const drawerConfigvVisible = ref(false)
+const advancedApplication = ref(false)
+const editRule = ref(0)
+const embeddedFormRef = ref()
+const dsFormRef = ref()
+const urlFormRef = ref()
+const certificateFormRef = ref()
+const dialogTitle = ref('')
+const drawerTitle = ref('')
+
+const embeddedList = ref<any[]>([])
+const systemCredentials = ['localStorage', 'custom', 'cookie', 'sessionStorage']
+const credentials = ['header', 'cookie', 'param']
+const workspaces = ref<any[]>([])
+
+const defaultEmbedded = {
+  id: '',
+  name: '',
+  type: 0,
+  description: '',
+  domain: '',
+}
+const currentEmbedded = reactive<any>(cloneDeep(defaultEmbedded))
+
+const isCreate = ref(false)
+const defaultForm = {
+  oid: 1,
+  private_list: [] as any,
+}
+const dsForm = reactive(cloneDeep(defaultForm))
+
+const defaultCertificateForm = {
+  id: '',
+  type: '',
+  source: '',
+  target: '',
+  target_key: '',
+  target_val: '',
+}
+const certificateForm = reactive(cloneDeep(defaultCertificateForm))
+
+const defaultUrlForm = {
+  endpoint: '',
+  certificate: [] as any,
+}
+const urlForm = reactive(cloneDeep(defaultUrlForm))
+
+const dsListOptions = ref<any[]>([])
+
+const embeddedListWithSearch = computed(() => {
+  if (!keywords.value) return embeddedList.value
+  return embeddedList.value.filter((ele) =>
+    ele.name.toLowerCase().includes(keywords.value.toLowerCase())
+  )
+})
+
+const userTypeList = [
+  {
+    name: t('embedded.basic_application'),
+    img: icon_database_colorful,
+    tip: t('embedded.support_is_required'),
+    value: 0,
+  },
+  {
+    name: t('embedded.advanced_application'),
+    img: icon_web_site_colorful,
+    tip: t('embedded.data_permissions_etc'),
+    value: 1,
+  },
+]
+const initWorkspace = () => {
+  workspaceList().then((res) => {
+    workspaces.value = res
+  })
+}
+const handleAddEmbedded = (val: any) => {
+  Object.assign(currentEmbedded, cloneDeep(defaultEmbedded))
+  currentEmbedded.type = val
+  if (val === 0) {
+    handleBaseEmbedded(null)
+  } else {
+    handleAdvancedEmbedded(null)
+  }
+}
+const wsChanged = (val: any) => {
+  dsForm.private_list = []
+  dsForm.oid = val
+  getDsList(true)
+}
+const getDsList = (change: boolean = false) => {
+  dsApi(dsForm.oid).then((res: any) => {
+    dsListOptions.value = res || []
+    if (change || !currentEmbedded.id) {
+      dsForm.private_list = dsListOptions.value.map((ele) => ele.id)
+    }
+  })
+}
+const handleBaseEmbedded = (row: any) => {
+  advancedApplication.value = false
+  initWorkspace()
+  if (row) {
+    Object.assign(dsForm, JSON.parse(row.configuration))
+  }
+  getDsList(false)
+  ruleConfigvVisible.value = true
+  dialogTitle.value = row?.id
+    ? t('embedded.edit_basic_applications')
+    : t('embedded.create_basic_application')
+}
+const handleAdvancedEmbedded = (row: any) => {
+  advancedApplication.value = true
+  if (row) {
+    Object.assign(urlForm, cloneDeep(JSON.parse(row.configuration)))
+  }
+  ruleConfigvVisible.value = true
+  dialogTitle.value = row?.id
+    ? t('embedded.edit_advanced_applications')
+    : t('embedded.creating_advanced_applications')
+}
+
+const beforeClose = () => {
+  ruleConfigvVisible.value = false
+  activeStep.value = 0
+  isCreate.value = false
+  Object.assign(currentEmbedded, cloneDeep(defaultEmbedded))
+  Object.assign(dsForm, cloneDeep(defaultForm))
+  Object.assign(urlForm, cloneDeep(defaultUrlForm))
+
+  if (embeddedFormRef.value) {
+    embeddedFormRef.value.clearValidate()
+  }
+
+  if (dsFormRef.value) {
+    dsFormRef.value.clearValidate()
+  }
+
+  if (urlFormRef.value) {
+    urlFormRef.value.clearValidate()
+  }
+}
+
+const handleActive = (row: any) => {
+  console.info('row', row)
+}
+
+const handlePrivate = (row: any) => {
+  dsForm.private_list.push(row.id)
+}
+
+const handlePublic = (row: any) => {
+  dsForm.private_list = dsForm.private_list.filter((ele: any) => ele !== row.id)
+}
+
+const searchLoading = ref(false)
+const handleSearch = () => {
+  searchLoading.value = true
+  getList()
+    .then((res: any) => {
+      embeddedList.value = res || []
+    })
+    .finally(() => {
+      searchLoading.value = false
+    })
+}
+handleSearch()
+
+const handleEditRule = (row: any) => {
+  Object.assign(currentEmbedded, cloneDeep(row))
+  delete currentEmbedded.configuration
+  if (row.type === 0) {
+    handleBaseEmbedded(row)
+  } else {
+    handleAdvancedEmbedded(row)
+  }
+}
+
+// const deleteRuleHandler = (row: any) => {
+//   ElMessageBox.confirm(t('permission.rule_rule_1', { msg: row.name }), {
+//     confirmButtonType: 'danger',
+//     confirmButtonText: t('dashboard.delete'),
+//     cancelButtonText: t('common.cancel'),
+//     customClass: 'confirm-no_icon',
+//     autofocus: false,
+//   }).then(() => {
+//     currentEmbedded.permissions = currentEmbedded.permissions.filter(
+//       (ele: any) => ele.id !== row.id
+//     )
+//   })
+// }
+
+const deleteHandler = (row: any) => {
+  ElMessageBox.confirm(t('embedded.delete', { msg: row.name }), {
+    confirmButtonType: 'danger',
+    confirmButtonText: t('dashboard.delete'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  }).then(() => {
+    delOne(row.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      handleSearch()
+    })
+  })
+}
+const setUiRef = ref()
+const handleSetUi = (row: any) => {
+  setUiRef.value.open(row)
+}
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('embedded.basic_information'),
+      trigger: 'blur',
+    },
+  ],
+  domain: [
+    {
+      required: true,
+      message:
+        t('datasource.please_enter') + t('common.empty') + t('embedded.cross_domain_settings'),
+      trigger: 'blur',
+    },
+    {
+      pattern: /^(https?:\/\/)?([\w-]+\.)*[\w-]+(:\d+)?$/,
+      message: t('embedded.origin_format_error'),
+      trigger: 'blur',
+    },
+  ],
+}
+
+const dsRules = {
+  oid: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('user.workspace'),
+      trigger: 'change',
+    },
+  ],
+}
+
+const urlRules = {
+  endpoint: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('embedded.interface_url'),
+      trigger: 'blur',
+    },
+  ],
+  certificate: [
+    {
+      required: true,
+      message:
+        t('datasource.Please_select') + t('common.empty') + t('embedded.system_credential_type'),
+      trigger: 'change',
+    },
+  ],
+}
+
+const certificateRules = {
+  type: [
+    {
+      required: true,
+      message:
+        t('datasource.Please_select') + t('common.empty') + t('embedded.system_credential_type'),
+      trigger: 'change',
+    },
+  ],
+  source: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('embedded.credential_name'),
+      trigger: 'blur',
+    },
+  ],
+
+  target: [
+    {
+      required: true,
+      message:
+        t('datasource.Please_select') +
+        t('common.empty') +
+        t('embedded.target_credential_location'),
+      trigger: 'change',
+    },
+  ],
+  target_key: [
+    {
+      required: true,
+      message:
+        t('datasource.please_enter') + t('common.empty') + t('embedded.target_credential_name'),
+      trigger: 'blur',
+    },
+  ],
+}
+
+const preview = () => {
+  activeStep.value = 0
+}
+const next = () => {
+  embeddedFormRef.value.validate((res: any) => {
+    if (res) {
+      activeStep.value = 1
+    }
+  })
+}
+const saveEmbedded = () => {
+  const req = currentEmbedded.id ? updateAssistant : saveAssistant
+  const formRef = currentEmbedded.type === 1 ? urlFormRef : dsFormRef
+  formRef.value.validate((res: any) => {
+    if (res) {
+      const obj = { ...currentEmbedded }
+      if (currentEmbedded.type === 0) {
+        obj.configuration = JSON.stringify(dsForm)
+      } else {
+        obj.configuration = JSON.stringify(urlForm)
+      }
+
+      if (!currentEmbedded.id) {
+        delete obj.id
+      }
+      req(obj).then(() => {
+        ElMessage({
+          type: 'success',
+          message: t('common.save_success'),
+        })
+        beforeClose()
+        handleSearch()
+      })
+    }
+  })
+}
+
+const dialogVisible = ref(false)
+const scriptElement = ref('')
+const jsCodeElement = ref('')
+const handleEmbedded = (row: any) => {
+  dialogVisible.value = true
+  const { origin, pathname } = window.location
+  scriptElement.value = `g-#script
+  async
+  defer
+  id="sqlbot-assistant-float-script-${row.id}"
+  src="${origin + pathname}assistant.js?id=${row.id}"k-*g-#/scriptk-*`
+    .replaceAll('g-#', '<')
+    .replaceAll('k-*', '>')
+
+  jsCodeElement.value = `(function(){
+    const script = document.createElement('script');
+    script.defer = true;
+    script.async = true;
+    script.src = "${origin + pathname}assistant.js?id=${row.id}";
+    script.id = "sqlbot-assistant-float-script-${row.id}";
+    document.head.appendChild(script);
+  })()`
+}
+const copyJsCode = () => {
+  copy(jsCodeElement.value)
+    .then(function () {
+      ElMessage.success(t('embedded.copy_successful'))
+    })
+    .catch(function () {
+      ElMessage.error(t('embedded.copy_successful'))
+    })
+}
+const copyCode = () => {
+  copy(scriptElement.value)
+    .then(function () {
+      ElMessage.success(t('embedded.copy_successful'))
+    })
+    .catch(function () {
+      ElMessage.error(t('embedded.copy_successful'))
+    })
+}
+const certificateBeforeClose = () => {
+  drawerConfigvVisible.value = false
+  Object.assign(certificateForm, cloneDeep(defaultCertificateForm))
+  certificateFormRef.value.clearValidate()
+}
+
+const initCertificate = (row: any) => {
+  drawerTitle.value = t('embedded.add_interface_credentials')
+  if (row) {
+    Object.assign(certificateForm, cloneDeep(row))
+    drawerTitle.value = t('embedded.edit_interface_credentials')
+  } else {
+    Object.assign(certificateForm, cloneDeep(defaultCertificateForm))
+  }
+  drawerConfigvVisible.value = true
+  nextTick(() => {
+    certificateFormRef.value.clearValidate()
+  })
+}
+
+const handleCredentialsDel = (row: any) => {
+  urlForm.certificate = urlForm.certificate.filter((ele: any) => ele.id !== row.id)
+}
+
+const saveHandler = () => {
+  certificateFormRef.value.validate((res: any) => {
+    if (res) {
+      if (certificateForm.id) {
+        for (const key in urlForm.certificate) {
+          if (Object.prototype.hasOwnProperty.call(urlForm.certificate, key)) {
+            if (urlForm.certificate[key].id === certificateForm.id) {
+              Object.assign(urlForm.certificate[key], cloneDeep(certificateForm))
+            }
+          }
+        }
+      } else {
+        urlForm.certificate.push({ ...cloneDeep(certificateForm), id: +new Date() })
+      }
+
+      ElMessage({
+        type: 'success',
+        message: t('common.save_success'),
+      })
+
+      certificateBeforeClose()
+    }
+  })
+}
+</script>
+
+<template>
+  <div v-loading="searchLoading" class="embedded-index no-padding">
+    <div class="tool-left">
+      <div class="btn-select">
+        <el-button
+          :class="[btnSelect === 'd' && 'is-active']"
+          text
+          @click="emits('btnSelectChange', 'd')"
+        >
+          {{ t('embedded.embedded_assistant') }}
+        </el-button>
+        <el-button
+          :class="[btnSelect === 'q' && 'is-active']"
+          text
+          @click="emits('btnSelectChange', 'q')"
+        >
+          {{ t('embedded.embedded_page') }}
+        </el-button>
+      </div>
+      <div>
+        <el-input
+          v-model="keywords"
+          style="width: 240px; margin-right: 12px"
+          :placeholder="$t('dashboard.search')"
+          clearable
+        >
+          <template #prefix>
+            <el-icon>
+              <icon_searchOutline_outlined />
+            </el-icon>
+          </template>
+        </el-input>
+
+        <el-popover popper-class="system-embedded_user" placement="bottom-end">
+          <template #reference>
+            <el-button type="primary">
+              <template #icon>
+                <icon_add_outlined></icon_add_outlined>
+              </template>
+              {{ $t('embedded.create_application') }}
+            </el-button>
+          </template>
+          <div class="popover">
+            <div class="popover-content">
+              <div
+                v-for="ele in userTypeList"
+                :key="ele.name"
+                class="popover-item"
+                @click="handleAddEmbedded(ele.value)"
+              >
+                <img :src="ele.img" style="margin-top: 5px" width="32px" height="32px" />
+                <div class="embedded">
+                  <div class="name">{{ ele.name }}</div>
+                  <div class="tip">{{ ele.tip }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-popover>
+      </div>
+    </div>
+
+    <EmptyBackground
+      v-if="!!keywords && !embeddedListWithSearch.length"
+      :description="$t('datasource.relevant_content_found')"
+      img-type="tree"
+      class="ed-empty_pd0"
+    />
+    <div v-else class="card-content">
+      <el-row :gutter="16" class="w-full">
+        <el-col
+          v-for="ele in embeddedListWithSearch"
+          :key="ele.id"
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="8"
+          :xl="6"
+          class="mb-16"
+        >
+          <Card
+            :id="ele.id"
+            :key="ele.id"
+            :name="ele.name"
+            :is-base="ele.type === 0"
+            :description="ele.description"
+            @embedded="handleEmbedded(ele)"
+            @edit="handleEditRule(ele)"
+            @del="deleteHandler(ele)"
+            @ui="handleSetUi(ele)"
+          ></Card>
+        </el-col>
+      </el-row>
+    </div>
+    <template v-if="!keywords && !embeddedListWithSearch.length && !searchLoading">
+      <EmptyBackground
+        class="ed-empty_custom"
+        :description="$t('embedded.no_application')"
+        img-type="noneWhite"
+      />
+
+      <div style="text-align: center; margin-top: -10px">
+        <el-popover popper-class="system-embedded_user" placement="bottom">
+          <template #reference>
+            <el-button type="primary">
+              <template #icon>
+                <icon_add_outlined></icon_add_outlined>
+              </template>
+              {{ $t('embedded.create_application') }}
+            </el-button>
+          </template>
+          <div class="popover">
+            <div class="popover-content">
+              <div
+                v-for="ele in userTypeList"
+                :key="ele.name"
+                class="popover-item"
+                @click="handleAddEmbedded(ele.value)"
+              >
+                <img :src="ele.img" style="margin-top: 5px" width="32px" height="32px" />
+                <div class="embedded">
+                  <div class="name">{{ ele.name }}</div>
+                  <div class="tip">{{ ele.tip }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-popover>
+      </div>
+    </template>
+    <el-drawer
+      v-model="ruleConfigvVisible"
+      :close-on-click-modal="false"
+      size="calc(100% - 100px)"
+      modal-class="embedded-drawer-fullscreen"
+      direction="btt"
+      :before-close="beforeClose"
+      :show-close="false"
+    >
+      <template #header="{ close }">
+        <span style="white-space: nowrap">{{ dialogTitle }}</span>
+        <div v-if="editRule !== 2" class="flex-center" style="width: 100%">
+          <el-steps custom style="max-width: 500px; flex: 1" :active="activeStep" align-center>
+            <el-step>
+              <template #title> {{ $t('embedded.basic_information') }} </template>
+            </el-step>
+            <el-step>
+              <template #title>
+                {{
+                  currentEmbedded.type === 1
+                    ? $t('embedded.configure_interface')
+                    : $t('embedded.set_data_source')
+                }}
+              </template>
+            </el-step>
+          </el-steps>
+        </div>
+        <el-icon style="cursor: pointer" @click="close">
+          <icon_close_outlined></icon_close_outlined>
+        </el-icon>
+      </template>
+
+      <div v-if="activeStep === 0" class="drawer-content">
+        <div class="title">
+          {{ $t('embedded.basic_information') }}
+        </div>
+
+        <el-form
+          ref="embeddedFormRef"
+          :model="currentEmbedded"
+          label-width="180px"
+          label-position="top"
+          :rules="rules"
+          class="form-content_error"
+          @submit.prevent
+        >
+          <el-form-item prop="name" :label="t('embedded.application_name')">
+            <el-input
+              v-model="currentEmbedded.name"
+              :placeholder="
+                $t('datasource.please_enter') + $t('common.empty') + $t('embedded.application_name')
+              "
+              clearable
+              autocomplete="off"
+            />
+          </el-form-item>
+
+          <el-form-item prop="description" :label="t('embedded.application_description')">
+            <el-input
+              v-model="currentEmbedded.description"
+              :rows="3"
+              type="textarea"
+              maxlength="200"
+              show-word-limit
+              clearable
+              :placeholder="$t('datasource.please_enter')"
+              autocomplete="off"
+            />
+          </el-form-item>
+
+          <el-form-item prop="domain" :label="t('embedded.cross_domain_settings')">
+            <el-input
+              v-model="currentEmbedded.domain"
+              clearable
+              :placeholder="$t('embedded.third_party_address')"
+              autocomplete="off"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div v-if="activeStep === 1 && advancedApplication" class="drawer-content">
+        <div class="title">
+          {{ $t('embedded.configure_interface') }}
+        </div>
+
+        <el-form
+          ref="urlFormRef"
+          :model="urlForm"
+          label-width="180px"
+          label-position="top"
+          :rules="urlRules"
+          class="form-content_error"
+          @submit.prevent
+        >
+          <el-form-item prop="endpoint" :label="t('embedded.interface_url')">
+            <el-input
+              v-model="urlForm.endpoint"
+              clearable
+              :placeholder="
+                $t('datasource.please_enter') + $t('common.empty') + $t('embedded.interface_url')
+              "
+              autocomplete="off"
+            />
+          </el-form-item>
+          <el-form-item class="certificate-table_form" prop="type">
+            <template #label>
+              <div class="title-content">
+                <span class="title-form">{{ t('embedded.interface_credentials') }}</span>
+                <span class="add" @click="initCertificate(null)">
+                  <el-icon size="16">
+                    <icon_add_outlined></icon_add_outlined>
+                  </el-icon>
+                  {{ t('model.add') }}
+                </span>
+              </div>
+            </template>
+            <div
+              class="table-content"
+              :class="!!urlForm.certificate.length && 'no-credentials_yet'"
+            >
+              <el-table
+                :empty-text="$t('embedded.no_credentials_yet')"
+                :data="urlForm.certificate"
+                style="width: 100%"
+              >
+                <el-table-column prop="source" :label="t('embedded.credential_name')" width="180" />
+                <el-table-column
+                  prop="type"
+                  :label="t('embedded.system_credential_type')"
+                  width="180"
+                />
+                <el-table-column
+                  prop="target_key"
+                  :label="t('embedded.target_credential_name')"
+                  width="180"
+                />
+                <el-table-column prop="target" :label="t('embedded.target_credential_location')" />
+                <el-table-column
+                  fixed="right"
+                  width="80"
+                  class-name="operation-column_text"
+                  :label="$t('ds.actions')"
+                >
+                  <template #default="scope">
+                    <el-button text type="primary" @click="initCertificate(scope.row)">
+                      <el-icon size="16">
+                        <icon_edit_outlined></icon_edit_outlined>
+                      </el-icon>
+                    </el-button>
+                    <el-button text type="primary" @click="handleCredentialsDel(scope.row)">
+                      <el-icon size="16">
+                        <icon_delete></icon_delete>
+                      </el-icon>
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div v-if="activeStep === 1 && !advancedApplication" class="drawer-content">
+        <div class="title">
+          {{ $t('embedded.set_data_source') }}
+        </div>
+
+        <el-form
+          ref="dsFormRef"
+          :model="dsForm"
+          label-width="180px"
+          label-position="top"
+          :rules="dsRules"
+          class="form-content_error"
+          @submit.prevent
+        >
+          <el-form-item prop="oid" :label="t('user.workspace')">
+            <el-select
+              v-model="dsForm.oid"
+              filterable
+              :placeholder="
+                $t('datasource.please_enter') + $t('common.empty') + $t('user.workspace')
+              "
+              @change="wsChanged"
+            >
+              <el-option
+                v-for="item in workspaces"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item class="private-list_form">
+            <template #label>
+              <div class="private-list">
+                {{ t('embedded.set_data_source') }}
+                <span :title="$t('embedded.open_the_query')" class="open-the_query ellipsis"
+                  >{{ $t('embedded.open_the_query') }}
+                </span>
+              </div>
+            </template>
+            <div class="card-ds_content">
+              <DsCard
+                v-for="(ele, index) in dsListOptions"
+                :id="ele.id"
+                :key="ele.id"
+                :class="[0, 1].includes(index) && 'no-margin_top'"
+                :name="ele.name"
+                :type="ele.type"
+                :type-name="ele.type_name"
+                :description="ele.description"
+                :is-private="dsForm.private_list.includes(ele.id)"
+                :num="ele.num"
+                @active="handleActive(ele)"
+                @private="handlePrivate(ele)"
+                @public="handlePublic(ele)"
+              ></DsCard>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <template #footer>
+        <el-button secondary @click="beforeClose"> {{ $t('common.cancel') }} </el-button>
+        <el-button v-if="activeStep === 1 && editRule !== 2" secondary @click="preview">
+          {{ t('ds.previous') }}
+        </el-button>
+        <el-button v-if="activeStep === 0 && editRule !== 2" type="primary" @click="next">
+          {{ t('common.next') }}
+        </el-button>
+        <el-button v-if="activeStep === 1" type="primary" @click="saveEmbedded">
+          {{ $t('common.save') }}
+        </el-button>
+      </template>
+    </el-drawer>
+  </div>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="$t('embedded.embed_third_party')"
+    width="600"
+    modal-class="embed-third_party"
+  >
+    <div class="floating-window">
+      <div class="floating">
+        <div class="title">{{ $t('embedded.floating_window_mode') }}</div>
+        <img :src="floating_window" width="180px" height="120px" alt="" />
+      </div>
+      <div class="code">
+        <div class="copy">
+          {{ $t('embedded.code_to_embed') }}
+          <el-tooltip effect="dark" :content="t('datasource.copy')" placement="top">
+            <el-icon size="16" @click="copyCode">
+              <icon_copy_outlined></icon_copy_outlined>
+            </el-icon>
+          </el-tooltip>
+        </div>
+
+        <div class="script">
+          {{ scriptElement }}
+        </div>
+      </div>
+
+      <div class="code">
+        <div class="copy">
+          {{ $t('common.or') }}
+          <el-tooltip effect="dark" :content="t('datasource.copy')" placement="top">
+            <el-icon size="16" @click="copyJsCode">
+              <icon_copy_outlined></icon_copy_outlined>
+            </el-icon>
+          </el-tooltip>
+        </div>
+
+        <div class="script">
+          {{ jsCodeElement }}
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+  <el-drawer
+    v-model="drawerConfigvVisible"
+    :title="drawerTitle"
+    modal-class="certificate-form_drawer"
+    direction="rtl"
+    size="600px"
+    :before-close="certificateBeforeClose"
+  >
+    <el-form
+      ref="certificateFormRef"
+      :model="certificateForm"
+      label-width="180px"
+      label-position="top"
+      :rules="certificateRules"
+      class="form-content_error"
+      @submit.prevent
+    >
+      <el-form-item prop="source" :label="t('embedded.credential_name')">
+        <el-input
+          v-model="certificateForm.source"
+          clearable
+          :placeholder="
+            $t('datasource.please_enter') + $t('common.empty') + $t('embedded.credential_name')
+          "
+          autocomplete="off"
+        />
+      </el-form-item>
+      <el-form-item prop="type" :label="t('embedded.system_credential_type')">
+        <el-select
+          v-model="certificateForm.type"
+          :placeholder="
+            $t('datasource.Please_select') +
+            $t('common.empty') +
+            $t('embedded.system_credential_type')
+          "
+        >
+          <el-option v-for="item in systemCredentials" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item prop="target_key" :label="t('embedded.target_credential_name')">
+        <el-input
+          v-model="certificateForm.target_key"
+          clearable
+          :placeholder="
+            $t('datasource.please_enter') +
+            $t('common.empty') +
+            $t('embedded.target_credential_name')
+          "
+          autocomplete="off"
+        />
+      </el-form-item>
+      <el-form-item prop="target" :label="t('embedded.target_credential_location')">
+        <el-select
+          v-model="certificateForm.target"
+          :placeholder="
+            $t('datasource.Please_select') +
+            $t('common.empty') +
+            $t('embedded.target_credential_location')
+          "
+        >
+          <el-option v-for="item in credentials" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item prop="target_val" :label="t('embedded.target_credential')">
+        <el-input
+          v-model="certificateForm.target_val"
+          clearable
+          :placeholder="
+            $t('datasource.please_enter') + $t('common.empty') + $t('embedded.target_credential')
+          "
+          autocomplete="off"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button secondary @click="certificateBeforeClose">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="saveHandler">
+          {{ $t('common.save') }}
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+  <SetUi ref="setUiRef" @refresh="handleSearch"></SetUi>
+</template>
+
+<style lang="less" scoped>
+.embedded-index {
+  height: 100%;
+  padding: 16px 0 16px 0;
+
+  .ed-empty_custom {
+    padding-top: 200px;
+    padding-bottom: 0;
+    height: auto;
+  }
+  .tool-left {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    padding: 0 24px 0 24px;
+
+    .title {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+
+    .btn-select {
+      height: 32px;
+      padding-left: 4px;
+      padding-right: 4px;
+      display: inline-flex;
+      background: #ffffff;
+      align-items: center;
+      border: 1px solid #d9dcdf;
+      border-radius: 6px;
+
+      .is-active {
+        background: var(--ed-color-primary-1a, #1cba901a);
+      }
+
+      .ed-button:not(.is-active) {
+        color: #1f2329;
+      }
+      .ed-button.is-text {
+        height: 24px;
+        width: auto;
+        padding: 0 8px;
+        line-height: 24px;
+      }
+      .ed-button + .ed-button {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .card-content {
+    max-height: calc(100% - 40px);
+    overflow-y: auto;
+    padding: 0 8px 0 24px;
+
+    .w-full {
+      width: 100%;
+    }
+
+    .mb-16 {
+      margin-bottom: 16px;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.embedded-drawer-fullscreen {
+  .title {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 8px;
+    margin-bottom: 16px;
+  }
+
+  .private-list_form {
+    .ed-form-item__label:after {
+      display: none;
+    }
+  }
+
+  .private-list {
+    display: flex;
+    align-items: center;
+    .open-the_query {
+      color: #ff8800;
+      margin-left: 4px;
+      max-width: 650px;
+    }
+  }
+
+  .card-ds_content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .card {
+      width: 392px;
+      &:nth-child(even) {
+        margin-right: 0;
+      }
+    }
+
+    .no-margin_top {
+      margin-top: 0;
+    }
+  }
+
+  .drawer-content {
+    width: 800px;
+    margin: 0 auto;
+    height: 100%;
+    padding-bottom: 24px;
+    overflow-y: auto;
+
+    .ed-form-item {
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .certificate-table_form {
+    .ed-form-item__label:after {
+      display: none;
+    }
+
+    .title-content {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .ed-form-item__label {
+      width: 100%;
+      padding-right: 0;
+    }
+
+    .title-form::after {
+      color: var(--ed-color-danger);
+      content: '*';
+      margin-left: 2px;
+    }
+
+    .add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+
+  .table-content {
+    width: 100%;
+    max-height: calc(100vh - 390px);
+    overflow-y: auto;
+    border: 1px solid #dee0e3;
+    border-radius: 6px;
+    border-top: none;
+
+    .operation-column_text {
+      .ed-button {
+        color: #646a73;
+        height: 24px;
+      }
+      .ed-button:not(.is-disabled):hover {
+        background: #1f23291a;
+      }
+      .ed-button + .ed-button {
+        margin-left: 4px;
+      }
+    }
+
+    .ed-table__empty-text {
+      padding-top: 0;
+    }
+
+    &.no-credentials_yet {
+      border-bottom: none;
+    }
+  }
+}
+
+.system-embedded_user.system-embedded_user {
+  padding: 0;
+  width: 282px !important;
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+  border: 1px solid #dee0e3;
+
+  .popover {
+    .popover-content {
+      padding: 4px;
+      position: relative;
+    }
+    .popover-item {
+      min-height: 98px;
+      display: flex;
+      padding-left: 8px;
+      padding-right: 8px;
+      position: relative;
+      border-radius: 4px;
+      cursor: pointer;
+      padding-top: 8px;
+      &:hover {
+        background: #1f23291a;
+      }
+
+      &:nth-child(2) {
+        margin: 9px 0 0 0;
+      }
+
+      .embedded {
+        font-weight: 400;
+        margin-left: 8px;
+
+        .name {
+          font-size: 14px;
+          line-height: 22px;
+        }
+
+        .tip {
+          color: #8f959e;
+          font-family: PingFang SC;
+          font-size: 12px;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}
+
+.embed-third_party {
+  .floating-window {
+    border: 1px solid #dee0e3;
+    width: 552px;
+    height: 431px;
+    opacity: 1;
+    border-radius: 4px;
+
+    .floating {
+      padding: 16px;
+      padding-bottom: 0;
+      .title {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 22px;
+        margin-bottom: 16px;
+      }
+    }
+
+    .code {
+      border-top: 1px solid #1f232926;
+      padding: 16px;
+      .copy {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 22px;
+
+        .ed-icon {
+          cursor: pointer;
+          position: relative;
+          &:hover {
+            &::after {
+              content: '';
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              background: #1f23291a;
+              width: 24px;
+              height: 24px;
+              border-radius: 6px;
+            }
+          }
+        }
+      }
+
+      .script {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/system/embedded/index.vue b/frontend/src/views/system/embedded/index.vue
index 20b6c3b2..9ad65b71 100644
--- a/frontend/src/views/system/embedded/index.vue
+++ b/frontend/src/views/system/embedded/index.vue
@@ -1,1240 +1,25 @@
 <script lang="ts" setup>
-import { ref, computed, reactive, nextTick } from 'vue'
-import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
-import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
-import icon_close_outlined from '@/assets/svg/operate/ope-close.svg'
-import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
-import icon_database_colorful from '@/assets/embedded/icon_database_colorful.png'
-import icon_web_site_colorful from '@/assets/embedded/icon_web-site_colorful.png'
-import floating_window from '@/assets/embedded/window.png'
-import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
-import icon_delete from '@/assets/svg/icon_delete.svg'
-import icon_copy_outlined from '@/assets/embedded/icon_copy_outlined.svg'
-import { useClipboard } from '@vueuse/core'
-import SetUi from './SetUi.vue'
-import Card from './Card.vue'
-import { workspaceList } from '@/api/workspace'
-import DsCard from './DsCard.vue'
-import { getList, updateAssistant, saveAssistant, delOne, dsApi } from '@/api/embedded'
-import { useI18n } from 'vue-i18n'
-import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import IframeVue from './iframe.vue'
+import PageVue from './Page.vue'
+const btnSelect = ref('d')
 
-const { t } = useI18n()
-const { copy } = useClipboard({ legacy: true })
-
-const keywords = ref('')
-const activeStep = ref(0)
-const ruleConfigvVisible = ref(false)
-const drawerConfigvVisible = ref(false)
-const advancedApplication = ref(false)
-const editRule = ref(0)
-const embeddedFormRef = ref()
-const dsFormRef = ref()
-const urlFormRef = ref()
-const certificateFormRef = ref()
-const dialogTitle = ref('')
-const drawerTitle = ref('')
-
-const embeddedList = ref<any[]>([])
-const systemCredentials = ['localStorage', 'custom', 'cookie', 'sessionStorage']
-const credentials = ['header', 'cookie', 'param']
-const workspaces = ref<any[]>([])
-
-const defaultEmbedded = {
-  id: '',
-  name: '',
-  type: 0,
-  description: '',
-  domain: '',
-}
-const currentEmbedded = reactive<any>(cloneDeep(defaultEmbedded))
-
-const isCreate = ref(false)
-const defaultForm = {
-  oid: 1,
-  private_list: [] as any,
-}
-const dsForm = reactive(cloneDeep(defaultForm))
-
-const defaultCertificateForm = {
-  id: '',
-  type: '',
-  source: '',
-  target: '',
-  target_key: '',
-  target_val: '',
-}
-const certificateForm = reactive(cloneDeep(defaultCertificateForm))
-
-const defaultUrlForm = {
-  endpoint: '',
-  certificate: [] as any,
-}
-const urlForm = reactive(cloneDeep(defaultUrlForm))
-
-const dsListOptions = ref<any[]>([])
-
-const embeddedListWithSearch = computed(() => {
-  if (!keywords.value) return embeddedList.value
-  return embeddedList.value.filter((ele) =>
-    ele.name.toLowerCase().includes(keywords.value.toLowerCase())
-  )
-})
-
-const userTypeList = [
-  {
-    name: t('embedded.basic_application'),
-    img: icon_database_colorful,
-    tip: t('embedded.support_is_required'),
-    value: 0,
-  },
-  {
-    name: t('embedded.advanced_application'),
-    img: icon_web_site_colorful,
-    tip: t('embedded.data_permissions_etc'),
-    value: 1,
-  },
-]
-const initWorkspace = () => {
-  workspaceList().then((res) => {
-    workspaces.value = res
-  })
-}
-const handleAddEmbedded = (val: any) => {
-  Object.assign(currentEmbedded, cloneDeep(defaultEmbedded))
-  currentEmbedded.type = val
-  if (val === 0) {
-    handleBaseEmbedded(null)
-  } else {
-    handleAdvancedEmbedded(null)
-  }
-}
-const wsChanged = (val: any) => {
-  dsForm.private_list = []
-  dsForm.oid = val
-  getDsList(true)
-}
-const getDsList = (change: boolean = false) => {
-  dsApi(dsForm.oid).then((res: any) => {
-    dsListOptions.value = res || []
-    if (change || !currentEmbedded.id) {
-      dsForm.private_list = dsListOptions.value.map((ele) => ele.id)
-    }
-  })
-}
-const handleBaseEmbedded = (row: any) => {
-  advancedApplication.value = false
-  initWorkspace()
-  if (row) {
-    Object.assign(dsForm, JSON.parse(row.configuration))
-  }
-  getDsList(false)
-  ruleConfigvVisible.value = true
-  dialogTitle.value = row?.id
-    ? t('embedded.edit_basic_applications')
-    : t('embedded.create_basic_application')
-}
-const handleAdvancedEmbedded = (row: any) => {
-  advancedApplication.value = true
-  if (row) {
-    Object.assign(urlForm, cloneDeep(JSON.parse(row.configuration)))
-  }
-  ruleConfigvVisible.value = true
-  dialogTitle.value = row?.id
-    ? t('embedded.edit_advanced_applications')
-    : t('embedded.creating_advanced_applications')
-}
-
-const beforeClose = () => {
-  ruleConfigvVisible.value = false
-  activeStep.value = 0
-  isCreate.value = false
-  Object.assign(currentEmbedded, cloneDeep(defaultEmbedded))
-  Object.assign(dsForm, cloneDeep(defaultForm))
-  Object.assign(urlForm, cloneDeep(defaultUrlForm))
-
-  if (embeddedFormRef.value) {
-    embeddedFormRef.value.clearValidate()
-  }
-
-  if (dsFormRef.value) {
-    dsFormRef.value.clearValidate()
-  }
-
-  if (urlFormRef.value) {
-    urlFormRef.value.clearValidate()
-  }
-}
-
-const handleActive = (row: any) => {
-  console.info('row', row)
-}
-
-const handlePrivate = (row: any) => {
-  dsForm.private_list.push(row.id)
-}
-
-const handlePublic = (row: any) => {
-  dsForm.private_list = dsForm.private_list.filter((ele: any) => ele !== row.id)
-}
-
-const searchLoading = ref(false)
-const handleSearch = () => {
-  searchLoading.value = true
-  getList()
-    .then((res: any) => {
-      embeddedList.value = res || []
-    })
-    .finally(() => {
-      searchLoading.value = false
-    })
-}
-handleSearch()
-
-const handleEditRule = (row: any) => {
-  Object.assign(currentEmbedded, cloneDeep(row))
-  delete currentEmbedded.configuration
-  if (row.type === 0) {
-    handleBaseEmbedded(row)
-  } else {
-    handleAdvancedEmbedded(row)
-  }
-}
-
-// const deleteRuleHandler = (row: any) => {
-//   ElMessageBox.confirm(t('permission.rule_rule_1', { msg: row.name }), {
-//     confirmButtonType: 'danger',
-//     confirmButtonText: t('dashboard.delete'),
-//     cancelButtonText: t('common.cancel'),
-//     customClass: 'confirm-no_icon',
-//     autofocus: false,
-//   }).then(() => {
-//     currentEmbedded.permissions = currentEmbedded.permissions.filter(
-//       (ele: any) => ele.id !== row.id
-//     )
-//   })
-// }
-
-const deleteHandler = (row: any) => {
-  ElMessageBox.confirm(t('embedded.delete', { msg: row.name }), {
-    confirmButtonType: 'danger',
-    confirmButtonText: t('dashboard.delete'),
-    cancelButtonText: t('common.cancel'),
-    customClass: 'confirm-no_icon',
-    autofocus: false,
-  }).then(() => {
-    delOne(row.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: t('dashboard.delete_success'),
-      })
-      handleSearch()
-    })
-  })
-}
-const setUiRef = ref()
-const handleSetUi = (row: any) => {
-  setUiRef.value.open(row)
-}
-
-const rules = {
-  name: [
-    {
-      required: true,
-      message: t('datasource.please_enter') + t('common.empty') + t('embedded.basic_information'),
-      trigger: 'blur',
-    },
-  ],
-  domain: [
-    {
-      required: true,
-      message:
-        t('datasource.please_enter') + t('common.empty') + t('embedded.cross_domain_settings'),
-      trigger: 'blur',
-    },
-    {
-      pattern: /^(https?:\/\/)?([\w-]+\.)*[\w-]+(:\d+)?$/,
-      message: t('embedded.origin_format_error'),
-      trigger: 'blur',
-    },
-  ],
-}
-
-const dsRules = {
-  oid: [
-    {
-      required: true,
-      message: t('datasource.please_enter') + t('common.empty') + t('user.workspace'),
-      trigger: 'change',
-    },
-  ],
-}
-
-const urlRules = {
-  endpoint: [
-    {
-      required: true,
-      message: t('datasource.please_enter') + t('common.empty') + t('embedded.interface_url'),
-      trigger: 'blur',
-    },
-  ],
-  certificate: [
-    {
-      required: true,
-      message:
-        t('datasource.Please_select') + t('common.empty') + t('embedded.system_credential_type'),
-      trigger: 'change',
-    },
-  ],
-}
-
-const certificateRules = {
-  type: [
-    {
-      required: true,
-      message:
-        t('datasource.Please_select') + t('common.empty') + t('embedded.system_credential_type'),
-      trigger: 'change',
-    },
-  ],
-  source: [
-    {
-      required: true,
-      message: t('datasource.please_enter') + t('common.empty') + t('embedded.credential_name'),
-      trigger: 'blur',
-    },
-  ],
-
-  target: [
-    {
-      required: true,
-      message:
-        t('datasource.Please_select') +
-        t('common.empty') +
-        t('embedded.target_credential_location'),
-      trigger: 'change',
-    },
-  ],
-  target_key: [
-    {
-      required: true,
-      message:
-        t('datasource.please_enter') + t('common.empty') + t('embedded.target_credential_name'),
-      trigger: 'blur',
-    },
-  ],
-}
-
-const preview = () => {
-  activeStep.value = 0
-}
-const next = () => {
-  embeddedFormRef.value.validate((res: any) => {
-    if (res) {
-      activeStep.value = 1
-    }
-  })
-}
-const saveEmbedded = () => {
-  const req = currentEmbedded.id ? updateAssistant : saveAssistant
-  const formRef = currentEmbedded.type === 1 ? urlFormRef : dsFormRef
-  formRef.value.validate((res: any) => {
-    if (res) {
-      const obj = { ...currentEmbedded }
-      if (currentEmbedded.type === 0) {
-        obj.configuration = JSON.stringify(dsForm)
-      } else {
-        obj.configuration = JSON.stringify(urlForm)
-      }
-
-      if (!currentEmbedded.id) {
-        delete obj.id
-      }
-      req(obj).then(() => {
-        ElMessage({
-          type: 'success',
-          message: t('common.save_success'),
-        })
-        beforeClose()
-        handleSearch()
-      })
-    }
-  })
-}
-// const btnSelect = ref('d')
-
-const dialogVisible = ref(false)
-const scriptElement = ref('')
-const jsCodeElement = ref('')
-const handleEmbedded = (row: any) => {
-  dialogVisible.value = true
-  const { origin, pathname } = window.location
-  scriptElement.value = `g-#script
-  async
-  defer
-  id="sqlbot-assistant-float-script-${row.id}"
-  src="${origin + pathname}assistant.js?id=${row.id}"k-*g-#/scriptk-*`
-    .replaceAll('g-#', '<')
-    .replaceAll('k-*', '>')
-
-  jsCodeElement.value = `(function(){
-    const script = document.createElement('script');
-    script.defer = true;
-    script.async = true;
-    script.src = "${origin + pathname}assistant.js?id=${row.id}";
-    script.id = "sqlbot-assistant-float-script-${row.id}";
-    document.head.appendChild(script);
-  })()`
-}
-const copyJsCode = () => {
-  copy(jsCodeElement.value)
-    .then(function () {
-      ElMessage.success(t('embedded.copy_successful'))
-    })
-    .catch(function () {
-      ElMessage.error(t('embedded.copy_successful'))
-    })
-}
-const copyCode = () => {
-  copy(scriptElement.value)
-    .then(function () {
-      ElMessage.success(t('embedded.copy_successful'))
-    })
-    .catch(function () {
-      ElMessage.error(t('embedded.copy_successful'))
-    })
-}
-const certificateBeforeClose = () => {
-  drawerConfigvVisible.value = false
-  Object.assign(certificateForm, cloneDeep(defaultCertificateForm))
-  certificateFormRef.value.clearValidate()
-}
-
-const initCertificate = (row: any) => {
-  drawerTitle.value = t('embedded.add_interface_credentials')
-  if (row) {
-    Object.assign(certificateForm, cloneDeep(row))
-    drawerTitle.value = t('embedded.edit_interface_credentials')
-  } else {
-    Object.assign(certificateForm, cloneDeep(defaultCertificateForm))
-  }
-  drawerConfigvVisible.value = true
-  nextTick(() => {
-    certificateFormRef.value.clearValidate()
-  })
-}
-
-const handleCredentialsDel = (row: any) => {
-  urlForm.certificate = urlForm.certificate.filter((ele: any) => ele.id !== row.id)
-}
-
-const saveHandler = () => {
-  certificateFormRef.value.validate((res: any) => {
-    if (res) {
-      if (certificateForm.id) {
-        for (const key in urlForm.certificate) {
-          if (Object.prototype.hasOwnProperty.call(urlForm.certificate, key)) {
-            if (urlForm.certificate[key].id === certificateForm.id) {
-              Object.assign(urlForm.certificate[key], cloneDeep(certificateForm))
-            }
-          }
-        }
-      } else {
-        urlForm.certificate.push({ ...cloneDeep(certificateForm), id: +new Date() })
-      }
-
-      ElMessage({
-        type: 'success',
-        message: t('common.save_success'),
-      })
-
-      certificateBeforeClose()
-    }
-  })
+const btnSelectChange = (val: any) => {
+  btnSelect.value = val
 }
 </script>
 
 <template>
-  <div v-loading="searchLoading" class="embedded-index no-padding">
-    <div class="tool-left">
-      <div class="title">{{ t('embedded.embedded_assistant') }}</div>
-      <!-- <div class="btn-select">
-        <el-button :class="[btnSelect === 'd' && 'is-active']" text @click="btnSelect = 'd'">
-          {{ t('embedded.embedded_assistant') }}
-        </el-button>
-        <el-button :class="[btnSelect === 'q' && 'is-active']" text @click="btnSelect = 'q'">
-          {{ t('embedded.embedded_page') }}
-        </el-button>
-      </div> -->
-      <div>
-        <el-input
-          v-model="keywords"
-          style="width: 240px; margin-right: 12px"
-          :placeholder="$t('dashboard.search')"
-          clearable
-        >
-          <template #prefix>
-            <el-icon>
-              <icon_searchOutline_outlined />
-            </el-icon>
-          </template>
-        </el-input>
-
-        <el-popover popper-class="system-embedded_user" placement="bottom-end">
-          <template #reference>
-            <el-button type="primary">
-              <template #icon>
-                <icon_add_outlined></icon_add_outlined>
-              </template>
-              {{ $t('embedded.create_application') }}
-            </el-button>
-          </template>
-          <div class="popover">
-            <div class="popover-content">
-              <div
-                v-for="ele in userTypeList"
-                :key="ele.name"
-                class="popover-item"
-                @click="handleAddEmbedded(ele.value)"
-              >
-                <img :src="ele.img" style="margin-top: 5px" width="32px" height="32px" />
-                <div class="embedded">
-                  <div class="name">{{ ele.name }}</div>
-                  <div class="tip">{{ ele.tip }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </el-popover>
-      </div>
-    </div>
-
-    <EmptyBackground
-      v-if="!!keywords && !embeddedListWithSearch.length"
-      :description="$t('datasource.relevant_content_found')"
-      img-type="tree"
-      class="ed-empty_pd0"
-    />
-    <div v-else class="card-content">
-      <el-row :gutter="16" class="w-full">
-        <el-col
-          v-for="ele in embeddedListWithSearch"
-          :key="ele.id"
-          :xs="24"
-          :sm="12"
-          :md="12"
-          :lg="8"
-          :xl="6"
-          class="mb-16"
-        >
-          <Card
-            :id="ele.id"
-            :key="ele.id"
-            :name="ele.name"
-            :is-base="ele.type === 0"
-            :description="ele.description"
-            @embedded="handleEmbedded(ele)"
-            @edit="handleEditRule(ele)"
-            @del="deleteHandler(ele)"
-            @ui="handleSetUi(ele)"
-          ></Card>
-        </el-col>
-      </el-row>
-    </div>
-    <template v-if="!keywords && !embeddedListWithSearch.length && !searchLoading">
-      <EmptyBackground
-        class="ed-empty_custom"
-        :description="$t('embedded.no_application')"
-        img-type="noneWhite"
-      />
-
-      <div style="text-align: center; margin-top: -10px">
-        <el-popover popper-class="system-embedded_user" placement="bottom">
-          <template #reference>
-            <el-button type="primary">
-              <template #icon>
-                <icon_add_outlined></icon_add_outlined>
-              </template>
-              {{ $t('embedded.create_application') }}
-            </el-button>
-          </template>
-          <div class="popover">
-            <div class="popover-content">
-              <div
-                v-for="ele in userTypeList"
-                :key="ele.name"
-                class="popover-item"
-                @click="handleAddEmbedded(ele.value)"
-              >
-                <img :src="ele.img" style="margin-top: 5px" width="32px" height="32px" />
-                <div class="embedded">
-                  <div class="name">{{ ele.name }}</div>
-                  <div class="tip">{{ ele.tip }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </el-popover>
-      </div>
-    </template>
-    <el-drawer
-      v-model="ruleConfigvVisible"
-      :close-on-click-modal="false"
-      size="calc(100% - 100px)"
-      modal-class="embedded-drawer-fullscreen"
-      direction="btt"
-      :before-close="beforeClose"
-      :show-close="false"
-    >
-      <template #header="{ close }">
-        <span style="white-space: nowrap">{{ dialogTitle }}</span>
-        <div v-if="editRule !== 2" class="flex-center" style="width: 100%">
-          <el-steps custom style="max-width: 500px; flex: 1" :active="activeStep" align-center>
-            <el-step>
-              <template #title> {{ $t('embedded.basic_information') }} </template>
-            </el-step>
-            <el-step>
-              <template #title>
-                {{
-                  currentEmbedded.type === 1
-                    ? $t('embedded.configure_interface')
-                    : $t('embedded.set_data_source')
-                }}
-              </template>
-            </el-step>
-          </el-steps>
-        </div>
-        <el-icon style="cursor: pointer" @click="close">
-          <icon_close_outlined></icon_close_outlined>
-        </el-icon>
-      </template>
-
-      <div v-if="activeStep === 0" class="drawer-content">
-        <div class="title">
-          {{ $t('embedded.basic_information') }}
-        </div>
-
-        <el-form
-          ref="embeddedFormRef"
-          :model="currentEmbedded"
-          label-width="180px"
-          label-position="top"
-          :rules="rules"
-          class="form-content_error"
-          @submit.prevent
-        >
-          <el-form-item prop="name" :label="t('embedded.application_name')">
-            <el-input
-              v-model="currentEmbedded.name"
-              :placeholder="
-                $t('datasource.please_enter') + $t('common.empty') + $t('embedded.application_name')
-              "
-              clearable
-              autocomplete="off"
-            />
-          </el-form-item>
-
-          <el-form-item prop="description" :label="t('embedded.application_description')">
-            <el-input
-              v-model="currentEmbedded.description"
-              :rows="3"
-              type="textarea"
-              maxlength="200"
-              show-word-limit
-              clearable
-              :placeholder="$t('datasource.please_enter')"
-              autocomplete="off"
-            />
-          </el-form-item>
-
-          <el-form-item prop="domain" :label="t('embedded.cross_domain_settings')">
-            <el-input
-              v-model="currentEmbedded.domain"
-              clearable
-              :placeholder="$t('embedded.third_party_address')"
-              autocomplete="off"
-            />
-          </el-form-item>
-        </el-form>
-      </div>
-      <div v-if="activeStep === 1 && advancedApplication" class="drawer-content">
-        <div class="title">
-          {{ $t('embedded.configure_interface') }}
-        </div>
-
-        <el-form
-          ref="urlFormRef"
-          :model="urlForm"
-          label-width="180px"
-          label-position="top"
-          :rules="urlRules"
-          class="form-content_error"
-          @submit.prevent
-        >
-          <el-form-item prop="endpoint" :label="t('embedded.interface_url')">
-            <el-input
-              v-model="urlForm.endpoint"
-              clearable
-              :placeholder="
-                $t('datasource.please_enter') + $t('common.empty') + $t('embedded.interface_url')
-              "
-              autocomplete="off"
-            />
-          </el-form-item>
-          <el-form-item class="certificate-table_form" prop="type">
-            <template #label>
-              <div class="title-content">
-                <span class="title-form">{{ t('embedded.interface_credentials') }}</span>
-                <span class="add" @click="initCertificate(null)">
-                  <el-icon size="16">
-                    <icon_add_outlined></icon_add_outlined>
-                  </el-icon>
-                  {{ t('model.add') }}
-                </span>
-              </div>
-            </template>
-            <div
-              class="table-content"
-              :class="!!urlForm.certificate.length && 'no-credentials_yet'"
-            >
-              <el-table
-                :empty-text="$t('embedded.no_credentials_yet')"
-                :data="urlForm.certificate"
-                style="width: 100%"
-              >
-                <el-table-column prop="source" :label="t('embedded.credential_name')" width="180" />
-                <el-table-column
-                  prop="type"
-                  :label="t('embedded.system_credential_type')"
-                  width="180"
-                />
-                <el-table-column
-                  prop="target_key"
-                  :label="t('embedded.target_credential_name')"
-                  width="180"
-                />
-                <el-table-column prop="target" :label="t('embedded.target_credential_location')" />
-                <el-table-column
-                  fixed="right"
-                  width="80"
-                  class-name="operation-column_text"
-                  :label="$t('ds.actions')"
-                >
-                  <template #default="scope">
-                    <el-button text type="primary" @click="initCertificate(scope.row)">
-                      <el-icon size="16">
-                        <icon_edit_outlined></icon_edit_outlined>
-                      </el-icon>
-                    </el-button>
-                    <el-button text type="primary" @click="handleCredentialsDel(scope.row)">
-                      <el-icon size="16">
-                        <icon_delete></icon_delete>
-                      </el-icon>
-                    </el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-          </el-form-item>
-        </el-form>
-      </div>
-      <div v-if="activeStep === 1 && !advancedApplication" class="drawer-content">
-        <div class="title">
-          {{ $t('embedded.set_data_source') }}
-        </div>
-
-        <el-form
-          ref="dsFormRef"
-          :model="dsForm"
-          label-width="180px"
-          label-position="top"
-          :rules="dsRules"
-          class="form-content_error"
-          @submit.prevent
-        >
-          <el-form-item prop="oid" :label="t('user.workspace')">
-            <el-select
-              v-model="dsForm.oid"
-              filterable
-              :placeholder="
-                $t('datasource.please_enter') + $t('common.empty') + $t('user.workspace')
-              "
-              @change="wsChanged"
-            >
-              <el-option
-                v-for="item in workspaces"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-
-          <el-form-item class="private-list_form">
-            <template #label>
-              <div class="private-list">
-                {{ t('embedded.set_data_source') }}
-                <span :title="$t('embedded.open_the_query')" class="open-the_query ellipsis"
-                  >{{ $t('embedded.open_the_query') }}
-                </span>
-              </div>
-            </template>
-            <div class="card-ds_content">
-              <DsCard
-                v-for="(ele, index) in dsListOptions"
-                :id="ele.id"
-                :key="ele.id"
-                :class="[0, 1].includes(index) && 'no-margin_top'"
-                :name="ele.name"
-                :type="ele.type"
-                :type-name="ele.type_name"
-                :description="ele.description"
-                :is-private="dsForm.private_list.includes(ele.id)"
-                :num="ele.num"
-                @active="handleActive(ele)"
-                @private="handlePrivate(ele)"
-                @public="handlePublic(ele)"
-              ></DsCard>
-            </div>
-          </el-form-item>
-        </el-form>
-      </div>
-
-      <template #footer>
-        <el-button secondary @click="beforeClose"> {{ $t('common.cancel') }} </el-button>
-        <el-button v-if="activeStep === 1 && editRule !== 2" secondary @click="preview">
-          {{ t('ds.previous') }}
-        </el-button>
-        <el-button v-if="activeStep === 0 && editRule !== 2" type="primary" @click="next">
-          {{ t('common.next') }}
-        </el-button>
-        <el-button v-if="activeStep === 1" type="primary" @click="saveEmbedded">
-          {{ $t('common.save') }}
-        </el-button>
-      </template>
-    </el-drawer>
-  </div>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="$t('embedded.embed_third_party')"
-    width="600"
-    modal-class="embed-third_party"
-  >
-    <div class="floating-window">
-      <div class="floating">
-        <div class="title">{{ $t('embedded.floating_window_mode') }}</div>
-        <img :src="floating_window" width="180px" height="120px" alt="" />
-      </div>
-      <div class="code">
-        <div class="copy">
-          {{ $t('embedded.code_to_embed') }}
-          <el-tooltip effect="dark" :content="t('datasource.copy')" placement="top">
-            <el-icon size="16" @click="copyCode">
-              <icon_copy_outlined></icon_copy_outlined>
-            </el-icon>
-          </el-tooltip>
-        </div>
-
-        <div class="script">
-          {{ scriptElement }}
-        </div>
-      </div>
-
-      <div class="code">
-        <div class="copy">
-          {{ $t('common.or') }}
-          <el-tooltip effect="dark" :content="t('datasource.copy')" placement="top">
-            <el-icon size="16" @click="copyJsCode">
-              <icon_copy_outlined></icon_copy_outlined>
-            </el-icon>
-          </el-tooltip>
-        </div>
-
-        <div class="script">
-          {{ jsCodeElement }}
-        </div>
-      </div>
-    </div>
-  </el-dialog>
-  <el-drawer
-    v-model="drawerConfigvVisible"
-    :title="drawerTitle"
-    modal-class="certificate-form_drawer"
-    direction="rtl"
-    size="600px"
-    :before-close="certificateBeforeClose"
-  >
-    <el-form
-      ref="certificateFormRef"
-      :model="certificateForm"
-      label-width="180px"
-      label-position="top"
-      :rules="certificateRules"
-      class="form-content_error"
-      @submit.prevent
-    >
-      <el-form-item prop="source" :label="t('embedded.credential_name')">
-        <el-input
-          v-model="certificateForm.source"
-          clearable
-          :placeholder="
-            $t('datasource.please_enter') + $t('common.empty') + $t('embedded.credential_name')
-          "
-          autocomplete="off"
-        />
-      </el-form-item>
-      <el-form-item prop="type" :label="t('embedded.system_credential_type')">
-        <el-select
-          v-model="certificateForm.type"
-          :placeholder="
-            $t('datasource.Please_select') +
-            $t('common.empty') +
-            $t('embedded.system_credential_type')
-          "
-        >
-          <el-option v-for="item in systemCredentials" :key="item" :label="item" :value="item" />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item prop="target_key" :label="t('embedded.target_credential_name')">
-        <el-input
-          v-model="certificateForm.target_key"
-          clearable
-          :placeholder="
-            $t('datasource.please_enter') +
-            $t('common.empty') +
-            $t('embedded.target_credential_name')
-          "
-          autocomplete="off"
-        />
-      </el-form-item>
-      <el-form-item prop="target" :label="t('embedded.target_credential_location')">
-        <el-select
-          v-model="certificateForm.target"
-          :placeholder="
-            $t('datasource.Please_select') +
-            $t('common.empty') +
-            $t('embedded.target_credential_location')
-          "
-        >
-          <el-option v-for="item in credentials" :key="item" :label="item" :value="item" />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item prop="target_val" :label="t('embedded.target_credential')">
-        <el-input
-          v-model="certificateForm.target_val"
-          clearable
-          :placeholder="
-            $t('datasource.please_enter') + $t('common.empty') + $t('embedded.target_credential')
-          "
-          autocomplete="off"
-        />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button secondary @click="certificateBeforeClose">{{ $t('common.cancel') }}</el-button>
-        <el-button type="primary" @click="saveHandler">
-          {{ $t('common.save') }}
-        </el-button>
-      </div>
-    </template>
-  </el-drawer>
-  <SetUi ref="setUiRef" @refresh="handleSearch"></SetUi>
+  <PageVue
+    v-if="btnSelect === 'q'"
+    :btn-select="btnSelect"
+    @btn-select-change="btnSelectChange"
+  ></PageVue>
+  <IframeVue
+    v-if="btnSelect === 'd'"
+    :btn-select="btnSelect"
+    @btn-select-change="btnSelectChange"
+  ></IframeVue>
 </template>
 
-<style lang="less" scoped>
-.embedded-index {
-  height: 100%;
-  padding: 16px 0 16px 0;
-
-  .ed-empty_custom {
-    padding-top: 200px;
-    padding-bottom: 0;
-    height: auto;
-  }
-  .tool-left {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 16px;
-    padding: 0 24px 0 24px;
-
-    .title {
-      font-weight: 500;
-      font-size: 20px;
-      line-height: 28px;
-    }
-
-    // .btn-select {
-    //   height: 32px;
-    //   padding-left: 4px;
-    //   padding-right: 4px;
-    //   display: inline-flex;
-    //   background: #ffffff;
-    //   align-items: center;
-    //   border: 1px solid #d9dcdf;
-    //   border-radius: 6px;
-
-    //   .is-active {
-    //     background: var(--ed-color-primary-1a, #1cba901a);
-    //   }
-
-    //   .ed-button:not(.is-active) {
-    //     color: #1f2329;
-    //   }
-    //   .ed-button.is-text {
-    //     height: 24px;
-    //     width: auto;
-    //     padding: 0 8px;
-    //     line-height: 24px;
-    //   }
-    //   .ed-button + .ed-button {
-    //     margin-left: 4px;
-    //   }
-    // }
-  }
-
-  .card-content {
-    max-height: calc(100% - 40px);
-    overflow-y: auto;
-    padding: 0 8px 0 24px;
-
-    .w-full {
-      width: 100%;
-    }
-
-    .mb-16 {
-      margin-bottom: 16px;
-    }
-  }
-}
-</style>
-
-<style lang="less">
-.embedded-drawer-fullscreen {
-  .title {
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 24px;
-    margin-top: 8px;
-    margin-bottom: 16px;
-  }
-
-  .private-list_form {
-    .ed-form-item__label:after {
-      display: none;
-    }
-  }
-
-  .private-list {
-    display: flex;
-    align-items: center;
-    .open-the_query {
-      color: #ff8800;
-      margin-left: 4px;
-      max-width: 650px;
-    }
-  }
-
-  .card-ds_content {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .card {
-      width: 392px;
-      &:nth-child(even) {
-        margin-right: 0;
-      }
-    }
-
-    .no-margin_top {
-      margin-top: 0;
-    }
-  }
-
-  .drawer-content {
-    width: 800px;
-    margin: 0 auto;
-    height: 100%;
-    padding-bottom: 24px;
-    overflow-y: auto;
-
-    .ed-form-item {
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .certificate-table_form {
-    .ed-form-item__label:after {
-      display: none;
-    }
-
-    .title-content {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    .ed-form-item__label {
-      width: 100%;
-      padding-right: 0;
-    }
-
-    .title-form::after {
-      color: var(--ed-color-danger);
-      content: '*';
-      margin-left: 2px;
-    }
-
-    .add {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-    }
-  }
-
-  .table-content {
-    width: 100%;
-    max-height: calc(100vh - 390px);
-    overflow-y: auto;
-    border: 1px solid #dee0e3;
-    border-radius: 6px;
-    border-top: none;
-
-    .operation-column_text {
-      .ed-button {
-        color: #646a73;
-        height: 24px;
-      }
-      .ed-button:not(.is-disabled):hover {
-        background: #1f23291a;
-      }
-      .ed-button + .ed-button {
-        margin-left: 4px;
-      }
-    }
-
-    .ed-table__empty-text {
-      padding-top: 0;
-    }
-
-    &.no-credentials_yet {
-      border-bottom: none;
-    }
-  }
-}
-
-.system-embedded_user.system-embedded_user {
-  padding: 0;
-  width: 282px !important;
-  box-shadow: 0px 4px 8px 0px #1f23291a;
-  border: 1px solid #dee0e3;
-
-  .popover {
-    .popover-content {
-      padding: 4px;
-      position: relative;
-    }
-    .popover-item {
-      min-height: 98px;
-      display: flex;
-      padding-left: 8px;
-      padding-right: 8px;
-      position: relative;
-      border-radius: 4px;
-      cursor: pointer;
-      padding-top: 8px;
-      &:hover {
-        background: #1f23291a;
-      }
-
-      &:nth-child(2) {
-        margin: 9px 0 0 0;
-      }
-
-      .embedded {
-        font-weight: 400;
-        margin-left: 8px;
-
-        .name {
-          font-size: 14px;
-          line-height: 22px;
-        }
-
-        .tip {
-          color: #8f959e;
-          font-family: PingFang SC;
-          font-size: 12px;
-          line-height: 20px;
-        }
-      }
-    }
-  }
-}
-
-.embed-third_party {
-  .floating-window {
-    border: 1px solid #dee0e3;
-    width: 552px;
-    height: 431px;
-    opacity: 1;
-    border-radius: 4px;
-
-    .floating {
-      padding: 16px;
-      padding-bottom: 0;
-      .title {
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 22px;
-        margin-bottom: 16px;
-      }
-    }
-
-    .code {
-      border-top: 1px solid #1f232926;
-      padding: 16px;
-      .copy {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 22px;
-
-        .ed-icon {
-          cursor: pointer;
-          position: relative;
-          &:hover {
-            &::after {
-              content: '';
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-              background: #1f23291a;
-              width: 24px;
-              height: 24px;
-              border-radius: 6px;
-            }
-          }
-        }
-      }
-
-      .script {
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 22px;
-      }
-    }
-  }
-}
-</style>
+<style lang="less" scoped></style>