diff --git a/frontend/src/assets/embedded/LOGO-sql.png b/frontend/src/assets/embedded/LOGO-sql.png
new file mode 100644
index 00000000..3789536f
Binary files /dev/null and b/frontend/src/assets/embedded/LOGO-sql.png differ
diff --git a/frontend/src/assets/embedded/icon_community-tab_outlined.svg b/frontend/src/assets/embedded/icon_community-tab_outlined.svg
new file mode 100644
index 00000000..8cf70b3d
--- /dev/null
+++ b/frontend/src/assets/embedded/icon_community-tab_outlined.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33314 11.3781C3.33314 9.14428 5.20842 7.33374 7.3786 7.33374L8.62708 7.33337C10.7976 7.33337 12.6667 9.14428 12.6667 11.3777V13.6665C12.6667 13.8433 12.5965 14.013 12.4714 14.138C12.3463 14.2631 12.1767 14.3334 11.9998 14.3334H4.00005C3.82318 14.3334 3.65355 14.2631 3.52848 14.138C3.40341 14.013 3.33314 13.8433 3.33314 13.6665V11.3781ZM7.3786 8.66707C5.9307 8.66707 4.66648 9.89468 4.66648 11.3781V13H11.3334V11.3777C11.3334 9.89219 10.0725 8.66693 8.62708 8.66671L7.3786 8.66707Z" fill="#1F2329"/>
+<path d="M9.64993 5.31683C9.21644 5.75033 8.62994 5.99565 8.01737 6.00022L7.99993 6.00028L7.98386 6.00023C7.37079 5.99601 6.78375 5.75065 6.34993 5.31683C5.91232 4.87922 5.66648 4.2857 5.66648 3.66683C5.66648 3.04796 5.91232 2.45443 6.34993 2.01683C6.78754 1.57922 7.38106 1.33337 7.99993 1.33337C8.6188 1.33337 9.21232 1.57922 9.64993 2.01683C10.0875 2.45443 10.3334 3.04796 10.3334 3.66683C10.3334 4.2857 10.0875 4.87922 9.64993 5.31683ZM7.99993 2.66671C7.73468 2.66671 7.4803 2.77208 7.29274 2.95964C7.10518 3.1472 6.99981 3.40158 6.99981 3.66683C6.99981 3.93208 7.10518 4.18646 7.29274 4.37402C7.4803 4.56158 7.73468 4.66695 7.99993 4.66695C8.26518 4.66695 8.51956 4.56158 8.70712 4.37402C8.89468 4.18646 9.00005 3.93208 9.00005 3.66683C9.00005 3.40158 8.89468 3.14719 8.70712 2.95964C8.51956 2.77208 8.26518 2.66671 7.99993 2.66671Z" fill="#1F2329"/>
+<path d="M4.99981 5.83337C4.99981 6.6618 4.32824 7.33337 3.49981 7.33337C2.67138 7.33337 1.99981 6.6618 1.99981 5.83337C1.99981 5.00495 2.67138 4.33337 3.49981 4.33337C4.32824 4.33337 4.99981 5.00495 4.99981 5.83337ZM3.99981 5.83337C3.99981 5.55723 3.77595 5.33337 3.49981 5.33337C3.22367 5.33337 2.99981 5.55723 2.99981 5.83337C2.99981 6.10952 3.22367 6.33337 3.49981 6.33337C3.77595 6.33337 3.99981 6.10952 3.99981 5.83337Z" fill="#1F2329"/>
+<path d="M3.36279 8.00004C1.73515 8.00004 1 9.35822 1 11.0335V12.8335C1 13.1099 1.224 13.3335 1.5 13.3335H2.33333V11.3335C2.33333 8.9142 3.47256 8.36786 4.15038 8.0428L4.21661 8.01095C4.1337 8.00368 4.05006 8.00004 3.9657 8.00004H3.36279Z" fill="#1F2329"/>
+<path d="M12.6359 8.00004C14.2635 8.00004 14.9986 9.35822 14.9986 11.0335V12.8335C14.9986 13.1099 14.7746 13.3335 14.4986 13.3335H13.6653V11.3335C13.6653 8.9142 12.5261 8.36786 11.8483 8.0428L11.782 8.01095C11.8649 8.00368 11.9486 8.00004 12.0329 8.00004H12.6359Z" fill="#1F2329"/>
+<path d="M12.4998 7.33337C13.3282 7.33337 13.9998 6.6618 13.9998 5.83337C13.9998 5.00495 13.3282 4.33337 12.4998 4.33337C11.6714 4.33337 10.9998 5.00495 10.9998 5.83337C10.9998 6.6618 11.6714 7.33337 12.4998 7.33337ZM12.4998 6.33337C12.2237 6.33337 11.9998 6.10952 11.9998 5.83337C11.9998 5.55723 12.2237 5.33337 12.4998 5.33337C12.776 5.33337 12.9998 5.55723 12.9998 5.83337C12.9998 6.10952 12.776 6.33337 12.4998 6.33337Z" fill="#1F2329"/>
+</svg>
diff --git a/frontend/src/assets/embedded/icon_database_colorful.png b/frontend/src/assets/embedded/icon_database_colorful.png
new file mode 100644
index 00000000..703cc7a3
Binary files /dev/null and b/frontend/src/assets/embedded/icon_database_colorful.png differ
diff --git a/frontend/src/assets/embedded/icon_embedded_outlined.svg b/frontend/src/assets/embedded/icon_embedded_outlined.svg
new file mode 100644
index 00000000..5e7dcc9e
--- /dev/null
+++ b/frontend/src/assets/embedded/icon_embedded_outlined.svg
@@ -0,0 +1,5 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.3335 3.33334C4.88578 3.33334 5.3335 3.78106 5.3335 4.33334C5.3335 4.88563 4.88578 5.33334 4.3335 5.33334C3.78121 5.33334 3.3335 4.88563 3.3335 4.33334C3.3335 3.78106 3.78121 3.33334 4.3335 3.33334Z" fill="#1F2329"/>
+<path d="M7.66683 3.33334C8.21911 3.33334 8.66683 3.78106 8.66683 4.33334C8.66683 4.88563 8.21911 5.33334 7.66683 5.33334C7.11454 5.33334 6.66683 4.88563 6.66683 4.33334C6.66683 3.78106 7.11454 3.33334 7.66683 3.33334Z" fill="#1F2329"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3335 1.33334C15.7017 1.33334 16.0002 1.63182 16.0002 2.00001V14C16.0002 14.3682 15.7017 14.6667 15.3335 14.6667H2.00016C1.63197 14.6667 1.3335 14.3682 1.3335 14V2.00001C1.3335 1.63182 1.63197 1.33334 2.00016 1.33334H15.3335ZM2.66683 7.33334V13.3333H14.6668V7.33334H2.66683ZM2.66683 6.00001H14.6668V2.66668H2.66683V6.00001Z" fill="#1F2329"/>
+</svg>
diff --git a/frontend/src/assets/embedded/icon_personal-privacy_outlined.svg b/frontend/src/assets/embedded/icon_personal-privacy_outlined.svg
new file mode 100644
index 00000000..c0e9c75e
--- /dev/null
+++ b/frontend/src/assets/embedded/icon_personal-privacy_outlined.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.66675 4.33333C9.66675 2.49233 8.17342 1 6.33342 1C4.49341 1 3.00008 2.49233 3.00008 4.33333C3.00008 6.17433 4.49341 7.66667 6.33342 7.66667C8.17342 7.66667 9.66675 6.17433 9.66675 4.33333ZM6.33342 6.33333C5.23008 6.33333 4.33341 5.438 4.33341 4.33333C4.33341 3.22867 5.23008 2.33333 6.33342 2.33333C7.43675 2.33333 8.33342 3.22867 8.33342 4.33333C8.33342 5.438 7.43675 6.33333 6.33342 6.33333Z" fill="#1F2329"/>
+<path d="M2.00008 12.6667C2.00008 12.4363 2.03008 12.213 2.08341 12C2.38008 10.85 3.42341 10 4.66675 10H7.35005C7.53415 10 7.68339 9.85076 7.68339 9.66667V9C7.68339 8.81591 7.53415 8.66667 7.35005 8.66667H4.66675C2.45675 8.66667 0.666748 10.4577 0.666748 12.6667V14C0.666748 14.3683 0.966748 14.6667 1.33341 14.6667H7.35005C7.53415 14.6667 7.68339 14.5174 7.68339 14.3333V13.6667C7.68339 13.4826 7.53415 13.3333 7.35005 13.3333H2.00008V12.6667Z" fill="#1F2329"/>
+<path d="M11.833 7C13.2137 7 14.333 8.11929 14.333 9.5V10H15C15.184 10 15.3328 10.1491 15.333 10.333V14.333C15.333 14.5171 15.1841 14.667 15 14.667H8.66699C8.4829 14.667 8.33301 14.5171 8.33301 14.333V10.333C8.33318 10.1491 8.48301 10 8.66699 10H9.33301V9.5C9.33301 8.1194 10.4524 7.00018 11.833 7ZM9.66699 13.333H14V11.333H9.66699V13.333ZM11.833 8.33301C11.1888 8.33318 10.667 8.85578 10.667 9.5V10H13V9.5C13 8.85567 12.4773 8.33301 11.833 8.33301Z" fill="#1F2329"/>
+</svg>
diff --git a/frontend/src/assets/embedded/icon_web-site_colorful.png b/frontend/src/assets/embedded/icon_web-site_colorful.png
new file mode 100644
index 00000000..90771bc8
Binary files /dev/null and b/frontend/src/assets/embedded/icon_web-site_colorful.png differ
diff --git a/frontend/src/components/layout/Person.vue b/frontend/src/components/layout/Person.vue
index 0f6a8417..a1333db3 100644
--- a/frontend/src/components/layout/Person.vue
+++ b/frontend/src/components/layout/Person.vue
@@ -71,7 +71,7 @@ const logout = () => {
 </script>
 
 <template>
-  <el-popover popper-class="system-person" :placement="collapse ? 'right' : 'top'">
+  <el-popover trigger="click" popper-class="system-person" :placement="collapse ? 'right' : 'top'">
     <template #reference>
       <button class="person" :class="collapse && 'collapse'">
         <img class="default-avatar" :src="Default_avatar" width="32px" height="32px" />
@@ -82,8 +82,8 @@ const logout = () => {
       <div class="popover-content">
         <div class="info">
           <img :src="Default_avatar" width="40px" height="40px" />
-          <div class="top">{{ name }}</div>
-          <div class="bottom">{{ account }}</div>
+          <div :title="name" class="top ellipsis">{{ name }}</div>
+          <div :title="account" class="bottom ellipsis">{{ account }}</div>
         </div>
         <div v-if="isAdmin && !inSysmenu" class="popover-item" @click="toSystem">
           <el-icon size="16">
diff --git a/frontend/src/components/layout/Workspace.vue b/frontend/src/components/layout/Workspace.vue
index 9a39955d..748c1d70 100644
--- a/frontend/src/components/layout/Workspace.vue
+++ b/frontend/src/components/layout/Workspace.vue
@@ -66,7 +66,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <el-popover popper-class="system-workspace" :placement="collapse ? 'right' : 'bottom'">
+  <el-popover
+    trigger="click"
+    popper-class="system-workspace"
+    :placement="collapse ? 'right' : 'bottom'"
+  >
     <template #reference>
       <button class="workspace" :class="collapse && 'collapse'">
         <el-icon size="16">
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index ad24337e..83491765 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -198,6 +198,7 @@
     }
   },
   "datasource": {
+    "data_source_yet": "No data source yet",
     "search_by_name": "Search by Name",
     "search": "Search",
     "all_types": "All types",
@@ -391,6 +392,41 @@
     "filter_in": "Belongs to",
     "filter_not_in": "Does not belong to"
   },
+  "embedded": {
+    "embedded_management": "Embedded management",
+    "embedded_assistant": "Embedded assistant",
+    "embedded_page": "Embedded page",
+    "no_application": "No application",
+    "create_application": "Create application",
+    "basic_application": "Basic application",
+    "advanced_application": "Advanced application",
+    "embed_third_party": "Embed third party",
+    "support_is_required": "Applicable to scenarios where data verification is not required, just embed the embedded code into the third party code, no additional support is required",
+    "data_permissions_etc": "Applicable to scenarios where data verification is required, requiring the third party system to provide data source interface, user interface data permissions, etc.",
+    "create_basic_application": "Create basic application",
+    "set_data_source": "Set data source",
+    "basic_information": "Basic information",
+    "application_name": "Application name",
+    "application_description": "Application description",
+    "cross_domain_settings": "Cross-domain settings",
+    "third_party_address": "Please enter the embedded third party address",
+    "set_to_private": "Set to private",
+    "set_to_public": "Set to public",
+    "public": "Public",
+    "private": "Private",
+    "creating_advanced_applications": "Creating Advanced Applications",
+    "configure_interface": "Configure interface",
+    "interface_url": "Interface URL",
+    "credential_acquisition_method": "Credential acquisition method",
+    "table_notes": "Table notes",
+    "system_credential_type": "Source system credential type",
+    "credential_name": "Credential name",
+    "target_credential_location": "Target credential location",
+    "target_credential_name": "Target credential name",
+    "target_credential": "Target credential",
+    "edit_advanced_applications": "Edit advanced applications",
+    "edit_basic_applications": "Edit basic applications"
+  },
   "chat": {
     "type": "Chart Type",
     "chart_type": {
@@ -435,4 +471,4 @@
     "back_community": "Restore to Community Edition",
     "confirm_tips": "Are you sure to restore to Community Edition?"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index 61bb02b2..aa4dca7e 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -201,6 +201,7 @@
     }
   },
   "datasource": {
+    "data_source_yet": "暂无数据源",
     "search_by_name": "通过名称搜索",
     "search": "搜索",
     "all_types": "全部类型",
@@ -403,6 +404,41 @@
     "filter_in": "属于",
     "filter_not_in": "不属于"
   },
+  "embedded": {
+    "embedded_management": "嵌入式管理",
+    "embedded_assistant": "小助手嵌入",
+    "embedded_page": "页面嵌入",
+    "no_application": "暂无应用",
+    "create_application": "创建应用",
+    "basic_application": "基础应用",
+    "advanced_application": "高级应用",
+    "embed_third_party": "嵌入第三方",
+    "support_is_required": "适用于无需数据校验的场景，只需将嵌入式代码内嵌到第三方的代码中，无需做额外的支持",
+    "data_permissions_etc": "适用于需要数据校验的场景，需要第三方系统提供数据源接口、用户接口数据权限等",
+    "create_basic_application": "创建基础应用",
+    "set_data_source": "设置数据源",
+    "basic_information": "基础信息",
+    "application_name": "应用名称",
+    "application_description": "应用描述",
+    "cross_domain_settings": "跨域设置",
+    "third_party_address": "请输入嵌入的第三方地址",
+    "set_to_private": "设为私有",
+    "set_to_public": "设为公共",
+    "public": "公共",
+    "private": "私有",
+    "configure_interface": "配置接口",
+    "interface_url": "接口 URL",
+    "creating_advanced_applications": "创建高级应用",
+    "credential_acquisition_method": "凭证获取方式",
+    "table_notes": "表备注",
+    "system_credential_type": "源系统凭证类型",
+    "credential_name": "凭证名称",
+    "target_credential_location": "目标凭证位置",
+    "target_credential_name": "目标凭证名称",
+    "target_credential": "目标凭证",
+    "edit_advanced_applications": "编辑高级应用",
+    "edit_basic_applications": "编辑基础应用"
+  },
   "chat": {
     "type": "图表类型",
     "chart_type": {
@@ -447,4 +483,4 @@
     "back_community": "还原至社区版",
     "confirm_tips": "确定还原至社区版？"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 80236fa1..8a75f65d 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -10,6 +10,7 @@ import DashboardEditor from '@/views/dashboard/editor/index.vue'
 import DashboardPreview from '@//views/dashboard/preview/SQPreviewSingle.vue'
 import Dashboard from '@/views/dashboard/index.vue'
 import Model from '@/views/system/model/Model.vue'
+import Embedded from '@/views/system/embedded/index.vue'
 import assistant from '@/views/embedded/assistant.vue'
 import Member from '@/views/system/member/index.vue'
 import Permission from '@/views/system/permission/index.vue'
@@ -168,6 +169,12 @@ const router = createRouter({
           component: Model,
           meta: { title: 'AI Model Configuration', icon: 'icon_ai' },
         },
+        {
+          path: 'embedded',
+          name: 'embedded',
+          component: Embedded,
+          meta: { title: t('embedded.embedded_management'), icon: 'icon_ai' },
+        },
       ],
     },
     {
diff --git a/frontend/src/views/ds/Datasource.vue b/frontend/src/views/ds/Datasource.vue
index a21d0815..910fa801 100644
--- a/frontend/src/views/ds/Datasource.vue
+++ b/frontend/src/views/ds/Datasource.vue
@@ -39,6 +39,7 @@ const activeStep = ref(0)
 const activeName = ref('')
 const activeType = ref('')
 const datasourceFormRef = ref()
+const searchLoading = ref(false)
 
 const datasourceList = shallowRef([] as Datasource[])
 const defaultDatasourceList = shallowRef(dsTypeWithImg as (Datasource & { img: string })[])
@@ -180,9 +181,15 @@ const clickDatasourceSide = (ele: any) => {
 }
 
 const search = () => {
-  datasourceApi.list().then((res: any) => {
-    datasourceList.value = res
-  })
+  searchLoading.value = true
+  datasourceApi
+    .list()
+    .then((res: any) => {
+      datasourceList.value = res
+    })
+    .finally(() => {
+      searchLoading.value = false
+    })
 }
 search()
 
@@ -287,6 +294,22 @@ const back = () => {
         @data-table-detail="dataTableDetail(ele)"
       ></Card>
     </div>
+    <template v-if="!keywords && !datasourceListWithSearch.length && !searchLoading">
+      <EmptyBackground
+        class="datasource-yet"
+        :description="$t('datasource.data_source_yet')"
+        img-type="noneWhite"
+      />
+
+      <div style="text-align: center; margin-top: -10px">
+        <el-button type="primary" @click="handleAddDatasource">
+          <template #icon>
+            <icon_add_outlined></icon_add_outlined>
+          </template>
+          {{ $t('datasource.new_data_source') }}
+        </el-button>
+      </div>
+    </template>
     <el-drawer
       v-model="datasourceConfigvVisible"
       :close-on-click-modal="false"
@@ -367,6 +390,12 @@ const back = () => {
     max-height: calc(100% - 40px);
     overflow-y: auto;
   }
+
+  .datasource-yet {
+    padding-bottom: 0;
+    height: auto;
+    padding-top: 200px;
+  }
 }
 </style>
 
diff --git a/frontend/src/views/setting/Professional.vue b/frontend/src/views/setting/Professional.vue
index aff70497..e93e0c5c 100644
--- a/frontend/src/views/setting/Professional.vue
+++ b/frontend/src/views/setting/Professional.vue
@@ -182,7 +182,7 @@ const editTerm = () => {
     search()
     ElMessage({
       type: 'success',
-      message: 'Edit completed',
+      message: t('common.save_success'),
     })
   })
 }
diff --git a/frontend/src/views/system/embedded/Card.vue b/frontend/src/views/system/embedded/Card.vue
new file mode 100644
index 00000000..f4011129
--- /dev/null
+++ b/frontend/src/views/system/embedded/Card.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import delIcon from '@/assets/svg/icon_delete.svg'
+import icon_embedded_outlined from '@/assets/embedded/icon_embedded_outlined.svg'
+import IconOpeEdit from '@/assets/svg/icon_edit_outlined.svg'
+import Lock from '@/assets/embedded/LOGO-sql.png'
+
+withDefaults(
+  defineProps<{
+    name: string
+    isBase: boolean
+    description: string
+    id?: string
+  }>(),
+  {
+    name: '-',
+    isBase: false,
+    id: '-',
+    description: '-',
+  }
+)
+
+const emits = defineEmits(['edit', 'del', 'embedded'])
+
+const handleEdit = () => {
+  emits('edit')
+}
+
+const handleDel = () => {
+  emits('del')
+}
+
+const handleEmbedded = () => {
+  emits('embedded')
+}
+</script>
+
+<template>
+  <div class="card">
+    <div class="name-icon">
+      <img :src="Lock" width="32px" height="32px" />
+      <span class="name">{{ name }}</span>
+      <span class="default" :class="isBase && 'is-base'">{{
+        isBase ? $t('embedded.basic_application') : $t('embedded.advanced_application')
+      }}</span>
+    </div>
+    <div class="description" :title="description">{{ description }}</div>
+    <div class="methods">
+      <el-button secondary @click="handleEmbedded">
+        <el-icon style="margin-right: 4px" size="16">
+          <icon_embedded_outlined></icon_embedded_outlined>
+        </el-icon>
+        {{ $t('embedded.embed_third_party') }}
+      </el-button>
+      <el-button secondary @click="handleEdit">
+        <el-icon style="margin-right: 4px" size="16">
+          <IconOpeEdit></IconOpeEdit>
+        </el-icon>
+        {{ $t('dashboard.edit') }}
+      </el-button>
+      <el-button secondary @click="handleDel">
+        <el-icon style="margin-right: 4px" size="16">
+          <delIcon></delIcon>
+        </el-icon>
+        {{ $t('dashboard.delete') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.card {
+  width: 371px;
+  height: 168px;
+  border: 1px solid #dee0e3;
+  padding: 16px;
+  border-radius: 12px;
+  margin: 0 16px 16px 0;
+  &:hover {
+    box-shadow: 0px 6px 24px 0px #1f232914;
+  }
+
+  .name-icon {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    .name {
+      margin-left: 12px;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .default {
+      margin-left: auto;
+      padding: 0 4px;
+      border-radius: 4px;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 20px;
+      background: #ff880033;
+      color: #d97400;
+
+      &.is-base {
+        background: #1cba9033;
+        color: #189e7a;
+      }
+    }
+  }
+
+  .description {
+    margin-top: 12px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    max-width: 100%;
+    display: -webkit-box;
+    height: 44px;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .methods {
+    margin-top: 16px;
+  }
+}
+</style>
diff --git a/frontend/src/views/system/embedded/DsCard.vue b/frontend/src/views/system/embedded/DsCard.vue
new file mode 100644
index 00000000..072ede49
--- /dev/null
+++ b/frontend/src/views/system/embedded/DsCard.vue
@@ -0,0 +1,263 @@
+<script lang="ts" setup>
+import icon_form_outlined from '@/assets/svg/icon_form_outlined.svg'
+import icon_personal_privacy_outlined from '@/assets/embedded/icon_personal-privacy_outlined.svg'
+import icon_community_tab_outlined from '@/assets/embedded/icon_community-tab_outlined.svg'
+import { computed } from 'vue'
+import { dsTypeWithImg } from '@/views/ds/js/ds-type'
+
+const props = withDefaults(
+  defineProps<{
+    name: string
+    type: string
+    typeName: string
+    num: string
+    description?: string
+    isPrivate: boolean
+  }>(),
+  {
+    name: '-',
+    type: '-',
+    description: '-',
+    isPrivate: false,
+    typeName: '-',
+    num: '-',
+  }
+)
+
+const emits = defineEmits(['active', 'private', 'public'])
+const icon = computed(() => {
+  return (dsTypeWithImg.find((ele) => props.type === ele.type) || {}).img
+})
+const handleActive = () => {
+  emits('active')
+}
+
+const handlePrivate = () => {
+  emits('private')
+}
+
+const handlePublic = () => {
+  emits('public')
+}
+</script>
+
+<template>
+  <div class="card" @click="handleActive">
+    <div class="name-icon">
+      <img :src="icon" width="32px" height="32px" />
+      <div class="info">
+        <div class="name">{{ name }}</div>
+        <div class="type">{{ typeName }}</div>
+      </div>
+      <span v-if="isPrivate" class="default" :class="isPrivate && 'is-private'">{{
+        isPrivate ? $t('embedded.private') : $t('embedded.public')
+      }}</span>
+    </div>
+    <div class="type-value">
+      {{ description }}
+    </div>
+
+    <div class="bottom-info">
+      <div class="form-rate">
+        <el-icon class="form-icon" size="16">
+          <icon_form_outlined></icon_form_outlined>
+        </el-icon>
+        {{ num }}
+      </div>
+      <div click.stop class="methods">
+        <el-button v-if="isPrivate" secondary @click.stop="handlePublic">
+          <el-icon style="margin-right: 4px" size="16">
+            <icon_personal_privacy_outlined></icon_personal_privacy_outlined>
+          </el-icon>
+          {{ $t('embedded.set_to_public') }}
+        </el-button>
+        <el-button v-else secondary @click.stop="handlePrivate">
+          <el-icon style="margin-right: 4px" size="16">
+            <icon_community_tab_outlined></icon_community_tab_outlined>
+          </el-icon>
+          {{ $t('embedded.set_to_private') }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.card {
+  width: 370px;
+  border: 1px solid #dee0e3;
+  padding: 16px;
+  border-radius: 12px;
+  cursor: pointer;
+  margin: 0 16px 16px 0;
+  &:hover {
+    box-shadow: 0px 6px 24px 0px #1f232914;
+  }
+
+  .name-icon {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    position: relative;
+
+    .info {
+      margin-left: 12px;
+      .name {
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+      }
+      .type {
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 20px;
+        color: #646a73;
+      }
+    }
+
+    .default {
+      background: #1cba9033;
+      padding: 0 4px;
+      border-radius: 4px;
+      color: #189e7a;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 20px;
+      position: absolute;
+      right: 0;
+      top: 12px;
+
+      .is-private {
+        background: #f54a4533;
+        color: #d03f3b;
+      }
+    }
+  }
+
+  .type-value {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    color: #646a73;
+    height: 44px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .bottom-info {
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 28px;
+
+    .ed-button {
+      height: 28px;
+      min-width: 78px;
+    }
+
+    .form-rate {
+      display: flex;
+      align-items: center;
+      color: #646a73;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+
+      .form-icon {
+        margin-right: 8px;
+      }
+    }
+
+    .methods {
+      align-items: center;
+      display: none;
+
+      .more {
+        position: relative;
+        cursor: pointer;
+
+        &::after {
+          content: '';
+          background-color: #1f23291a;
+          position: absolute;
+          border-radius: 6px;
+          width: 24px;
+          height: 24px;
+          transform: translate(-50%, -50%);
+          top: 50%;
+          left: 50%;
+          display: none;
+        }
+
+        &:hover {
+          &::after {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+  &:hover {
+    .methods {
+      display: flex;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.popover-card.popover-card.popover-card {
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+  border-radius: 4px;
+  border: 1px solid #dee0e3;
+  width: 120px !important;
+  min-width: 120px !important;
+  padding: 0;
+  .content {
+    position: relative;
+    &::after {
+      position: absolute;
+      content: '';
+      top: 40px;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: #dee0e3;
+    }
+    .item {
+      position: relative;
+      padding-left: 12px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      .ed-icon {
+        margin-right: 8px;
+        color: #646a73;
+      }
+      &:hover {
+        &::after {
+          display: block;
+        }
+      }
+
+      &::after {
+        content: '';
+        width: 112px;
+        height: 32px;
+        border-radius: 4px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: #1f23291a;
+        display: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/system/embedded/index.vue b/frontend/src/views/system/embedded/index.vue
new file mode 100644
index 00000000..f8d83d8e
--- /dev/null
+++ b/frontend/src/views/system/embedded/index.vue
@@ -0,0 +1,823 @@
+<script lang="ts" setup>
+import { ref, computed, reactive } 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 Card from './Card.vue'
+import DsCard from './DsCard.vue'
+import { datasourceApi } from '@/api/datasource'
+import { useI18n } from 'vue-i18n'
+import { cloneDeep } from 'lodash-es'
+
+const { t } = useI18n()
+const keywords = ref('')
+const activeStep = ref(0)
+const ruleConfigvVisible = ref(false)
+const advancedApplication = ref(false)
+const editRule = ref(0)
+const embeddedFormRef = ref()
+const dsFormRef = ref()
+const urlFormRef = ref()
+const dialogTitle = ref('')
+const embeddedList = ref<any[]>([])
+const systemCredentials = ref<any[]>([])
+const credentials = ref<any[]>([])
+const workspaces = ref<any[]>([])
+
+const defaultEmbedded = {
+  id: '',
+  name: '',
+  isBase: false,
+  description: '',
+  domain: '',
+}
+const currentEmbedded = reactive<any>(cloneDeep(defaultEmbedded))
+
+const isCreate = ref(false)
+const defaultForm = {
+  workspace: '',
+  id: '',
+}
+const dsForm = reactive(cloneDeep(defaultForm))
+
+const defaultUrlForm = {
+  url: '',
+  system_credential_type: '',
+  target_credential_location: '',
+  credential_name: '',
+  target_credential_name: '',
+  target_credential: '',
+  id: '',
+}
+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: 1,
+  },
+  {
+    name: t('embedded.advanced_application'),
+    img: icon_web_site_colorful,
+    tip: t('embedded.data_permissions_etc'),
+    value: 0,
+  },
+]
+const ruleType = ref(0)
+const handleAddEmbedded = (val: any) => {
+  ruleType.value = val
+  Object.assign(currentEmbedded, cloneDeep(defaultEmbedded))
+  if (val === 1) {
+    handleBaseEmbedded(null)
+  } else {
+    handleAdvancedEmbedded(null)
+  }
+}
+
+const getDsList = () => {
+  datasourceApi.list().then((res: any) => {
+    dsListOptions.value = res || []
+  })
+}
+const handleBaseEmbedded = (row: any) => {
+  advancedApplication.value = false
+  getDsList()
+  if (row) {
+    Object.assign(dsForm, cloneDeep(defaultForm))
+    // const { name, ds_id, table_id, tree, id, ds_name, table_name } = row
+    // Object.assign(dsForm, {
+    //   id,
+    //   name,
+    //   ds_id,
+    //   table_id,
+    //   ds_name,
+    //   table_name,
+    //   expression_tree: typeof tree === 'object' ? tree : JSON.parse(tree),
+    // })
+  }
+  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(defaultUrlForm))
+
+    // const { name, ds_id, table_id, id, permission_list, ds_name, table_name } = row
+    // Object.assign(dsForm, {
+    //   id,
+    //   name,
+    //   ds_id,
+    //   ds_name,
+    //   table_id,
+    //   table_name,
+    //   permissions: permission_list,
+    // })
+  }
+  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
+}
+
+const handleActive = (row: any) => {
+  console.log('row', row)
+}
+
+const handlePrivate = (row: any) => {
+  console.log('row', row)
+}
+const handlePublic = (row: any) => {
+  console.log('row', row)
+}
+
+const searchLoading = ref(false)
+const handleSearch = () => {
+  embeddedList.value = [
+    {
+      id: '1',
+      name: 'jkajsdkjs',
+      isBase: false,
+      description: 'klasdkljlkasjdklljkajsdksa',
+    },
+    {
+      id: '2',
+      name: 'jkajsdkjsklk',
+      isBase: true,
+      description: 'kajldj',
+    },
+  ]
+  // searchLoading.value = true
+  //   getList()
+  //     .then((res: any) => {
+  //       embeddedList.value = res || []
+  //     })
+  //     .finally(() => {
+  //       searchLoading.value = false
+  //     })
+}
+handleSearch()
+
+// const editForm = (row: any) => {
+//   if (row.type === 'row') {
+//     ruleType.value = 1
+//     handleBaseEmbedded(row)
+//   } else {
+//     ruleType.value = 0
+//     handleAdvancedEmbedded(row)
+//   }
+// }
+const handleEditRule = (row: any) => {
+  editRule.value = 1
+  isCreate.value = false
+  Object.assign(currentEmbedded, cloneDeep(row))
+  ruleConfigvVisible.value = true
+}
+
+// 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('permission.rule_group_1', { msg: row.name }), {
+    confirmButtonType: 'danger',
+    confirmButtonText: t('dashboard.delete'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  }).then(() => {
+    // delPermissions(row.id).then(() => {
+    //   ElMessage({
+    //     type: 'success',
+    //     message: t('dashboard.delete_success'),
+    //   })
+    //   handleSearch()
+    // })
+  })
+}
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('embedded.basic_information'),
+      trigger: 'blur',
+    },
+  ],
+  description: [
+    {
+      required: true,
+      message:
+        t('datasource.please_enter') + t('common.empty') + t('embedded.application_description'),
+      trigger: 'blur',
+    },
+  ],
+  domain: [
+    {
+      required: true,
+      message:
+        t('datasource.please_enter') + t('common.empty') + t('embedded.cross_domain_settings'),
+      trigger: 'blur',
+    },
+  ],
+}
+
+const dsRules = {
+  workspace: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('user.workspace'),
+      trigger: 'change',
+    },
+  ],
+}
+
+const urlRules = {
+  url: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('embedded.interface_url'),
+      trigger: 'blur',
+    },
+  ],
+  system_credential_type: [
+    {
+      required: true,
+      message:
+        t('datasource.Please_select') +
+        t('common.empty') +
+        t('embedded.target_credential_location'),
+      trigger: 'change',
+    },
+  ],
+  credential_name: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('embedded.credential_name'),
+      trigger: 'blur',
+    },
+  ],
+
+  target_credential_location: [
+    {
+      required: true,
+      message:
+        t('datasource.Please_select') +
+        t('common.empty') +
+        t('embedded.target_credential_location'),
+      trigger: 'change',
+    },
+  ],
+  target_credential_name: [
+    {
+      required: true,
+      message:
+        t('datasource.please_enter') + t('common.empty') + t('embedded.target_credential_name'),
+      trigger: 'blur',
+    },
+  ],
+
+  target_credential: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('embedded.target_credential'),
+      trigger: 'blur',
+    },
+  ],
+}
+
+// const closeForm = () => {
+//   dialogFormVisible.value = false
+// }
+// const saveHandler = () => {
+//   dsFormRef.value.validate((res: any) => {
+//     if (res) {
+//       dialogFormVisible.value = false
+//     }
+//   })
+// }
+const preview = () => {
+  activeStep.value = 0
+}
+const next = () => {
+  embeddedFormRef.value.validate((res: any) => {
+    if (res) {
+      activeStep.value = 1
+    }
+  })
+}
+const saveEmbedded = () => {
+  //   const { id, name, permissions } = currentEmbedded
+  //   saveEmbeddeds(permissions).then(() => {
+  //     ElMessage({
+  //       type: 'success',
+  //       message: t('common.save_success'),
+  //     })
+  //     beforeClose()
+  //     handleSearch()
+  //   })
+}
+const btnSelect = ref('d')
+</script>
+
+<template>
+  <div v-loading="searchLoading" class="permission">
+    <div class="tool-left">
+      <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')"
+          @keyup.enter="handleSearch"
+          @blur="handleSearch"
+        >
+          <template #prefix>
+            <el-icon>
+              <icon_searchOutline_outlined />
+            </el-icon>
+          </template>
+        </el-input>
+
+        <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>
+    </div>
+
+    <EmptyBackground
+      v-if="!!keywords && !embeddedListWithSearch.length"
+      :description="$t('datasource.relevant_content_found')"
+      img-type="tree"
+    />
+
+    <div v-else class="card-content">
+      <Card
+        v-for="ele in embeddedListWithSearch"
+        :id="ele.id"
+        :key="ele.id"
+        :name="ele.name"
+        :is-base="ele.isBase"
+        :description="ele.description"
+        @edit="handleEditRule(ele)"
+        @del="deleteHandler(ele)"
+      ></Card>
+    </div>
+    <template v-if="!keywords && !embeddedListWithSearch.length && !searchLoading">
+      <EmptyBackground :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> {{ $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.basic_information')">
+            <el-input
+              v-model="currentEmbedded.name"
+              :placeholder="
+                $t('datasource.please_enter') +
+                $t('common.empty') +
+                $t('embedded.basic_information')
+              "
+              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"
+              :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"
+              :placeholder="
+                $t('datasource.please_enter') +
+                $t('common.empty') +
+                $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="url" :label="t('embedded.interface_url')">
+            <el-input
+              v-model="urlForm.url"
+              :placeholder="
+                $t('datasource.please_enter') + $t('common.empty') + $t('embedded.interface_url')
+              "
+              autocomplete="off"
+            />
+          </el-form-item>
+          <el-form-item prop="system_credential_type" :label="t('embedded.system_credential_type')">
+            <el-select
+              v-model="urlForm.system_credential_type"
+              :placeholder="
+                $t('datasource.Please_select') +
+                $t('common.empty') +
+                $t('embedded.target_credential_location')
+              "
+            >
+              <el-option
+                v-for="item in systemCredentials"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="credential_name" :label="t('embedded.credential_name')">
+            <el-input
+              v-model="urlForm.credential_name"
+              :placeholder="
+                $t('datasource.please_enter') + $t('common.empty') + $t('embedded.credential_name')
+              "
+              autocomplete="off"
+            />
+          </el-form-item>
+          <el-form-item
+            prop="target_credential_location"
+            :label="t('embedded.target_credential_location')"
+          >
+            <el-select
+              v-model="urlForm.target_credential_location"
+              :placeholder="
+                $t('datasource.Please_select') +
+                $t('common.empty') +
+                $t('embedded.target_credential_location')
+              "
+            >
+              <el-option
+                v-for="item in credentials"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item prop="target_credential_name" :label="t('embedded.target_credential_name')">
+            <el-input
+              v-model="urlForm.target_credential_name"
+              :placeholder="
+                $t('datasource.please_enter') +
+                $t('common.empty') +
+                $t('embedded.target_credential_name')
+              "
+              autocomplete="off"
+            />
+          </el-form-item>
+
+          <el-form-item prop="target_credential" :label="t('embedded.target_credential')">
+            <el-input
+              v-model="urlForm.target_credential"
+              :placeholder="
+                $t('datasource.please_enter') +
+                $t('common.empty') +
+                $t('embedded.target_credential')
+              "
+              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="dsFormRef"
+          :model="dsForm"
+          label-width="180px"
+          label-position="top"
+          :rules="dsRules"
+          class="form-content_error"
+          @submit.prevent
+        >
+          <el-form-item prop="workspace" :label="t('user.workspace')">
+            <el-select
+              v-model="dsForm.workspace"
+              :placeholder="
+                $t('datasource.please_enter') + $t('common.empty') + $t('user.workspace')
+              "
+            >
+              <el-option
+                v-for="item in workspaces"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item prop="datasource" :label="t('embedded.set_data_source')">
+            <div class="card-ds_content">
+              <DsCard
+                v-for="ele in dsListOptions"
+                :id="ele.id"
+                :key="ele.id"
+                :name="ele.name"
+                :type="ele.type"
+                :type-name="ele.type_name"
+                :is-private="ele.isPrivate"
+                :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>
+</template>
+
+<style lang="less" scoped>
+.permission {
+  .ed-empty {
+    padding-top: 200px;
+    padding-bottom: 0;
+  }
+  .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: #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 {
+    display: flex;
+    flex-wrap: wrap;
+    max-height: calc(100% - 40px);
+    overflow-y: auto;
+  }
+}
+</style>
+
+<style lang="less">
+.embedded-drawer-fullscreen {
+  .title {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 8px;
+    margin-bottom: 16px;
+  }
+
+  .card-ds_content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .card {
+      width: 392px;
+      &:nth-child(even) {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .drawer-content {
+    width: 800px;
+    margin: 0 auto;
+    height: calc(100% - 20px);
+  }
+}
+
+.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 {
+      height: 98px;
+      display: flex;
+      padding-left: 12px;
+      padding-right: 8px;
+      position: relative;
+      border-radius: 4px;
+      cursor: pointer;
+      &: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;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/system/member/index.vue b/frontend/src/views/system/member/index.vue
index 4c4bc2f7..ed96c598 100644
--- a/frontend/src/views/system/member/index.vue
+++ b/frontend/src/views/system/member/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import {
   uwsOption,
   workspaceUserList,
@@ -17,7 +17,6 @@ import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 const multipleSelectionAll = ref<any[]>([])
-const keyword = ref('')
 const keywordsMember = ref('')
 const userStore = useUserStore()
 
@@ -26,12 +25,6 @@ const workspaceForm = reactive({
   id: '',
 })
 const selectable = (row: any) => ![userStore.getUid].includes(row.id)
-const fieldListWithSearch = computed(() => {
-  if (!keyword.value) return fieldList.value
-  return fieldList.value.filter((ele: any) =>
-    ele.name.toLowerCase().includes(keywordsMember.value.toLowerCase())
-  )
-})
 
 onMounted(() => {
   search()
@@ -77,6 +70,7 @@ const deleteBatchUser = () => {
   })
 }
 const deleteHandler = (row: any) => {
+  if (row.weight === 1) return
   ElMessageBox.confirm(t('workspace.member_feng_yibudao', { msg: row.name }), {
     confirmButtonType: 'danger',
     confirmButtonText: t('dashboard.delete'),
@@ -89,7 +83,7 @@ const deleteHandler = (row: any) => {
     }).then(() => {
       ElMessage({
         type: 'success',
-        message: t('dashboard.delete_success'),
+        message: t('workspace.remove'),
       })
       search()
     })
@@ -197,9 +191,10 @@ const handleCurrentChange = (val: number) => {
       <span class="page-title">{{ $t('workspace.member_management') }}</span>
       <div class="search-bar">
         <el-input
-          v-model="keyword"
+          v-model="keywordsMember"
           style="width: 240px; margin-right: 12px"
           :placeholder="$t('user.name_account_email')"
+          clearable
           @keyup.enter="search"
           @blur="search"
         >
@@ -222,7 +217,7 @@ const handleCurrentChange = (val: number) => {
       <div class="preview-or-schema">
         <el-table
           ref="multipleTableRef"
-          :data="fieldListWithSearch"
+          :data="fieldList"
           :selectable="selectable"
           style="width: 100%"
           @selection-change="handleSelectionChange"
@@ -263,7 +258,12 @@ const handleCurrentChange = (val: number) => {
                   :content="$t('workspace.remove')"
                   placement="top"
                 >
-                  <el-icon class="action-btn" size="16" @click="deleteHandler(scope.row)">
+                  <el-icon
+                    class="action-btn"
+                    :class="scope.row.weight === 1 && 'not-allow'"
+                    size="16"
+                    @click="deleteHandler(scope.row)"
+                  >
                     <assigned></assigned>
                   </el-icon>
                 </el-tooltip>
@@ -272,13 +272,13 @@ const handleCurrentChange = (val: number) => {
           </el-table-column>
           <template #empty>
             <EmptyBackground
-              v-if="!keywordsMember && !fieldListWithSearch.length"
+              v-if="!keywordsMember && !fieldList.length"
               :description="$t('workspace.no_user')"
               img-type="noneWhite"
             />
 
             <EmptyBackground
-              v-if="!!keywordsMember && !fieldListWithSearch.length"
+              v-if="!!keywordsMember && !fieldList.length"
               :description="$t('datasource.relevant_content_found')"
               img-type="tree"
             />
@@ -410,11 +410,15 @@ const handleCurrentChange = (val: number) => {
             display: none;
           }
 
-          &:hover {
+          &:not(.not-allow):hover {
             &::after {
               display: block;
             }
           }
+
+          &.not-allow {
+            cursor: not-allowed;
+          }
         }
       }
 
diff --git a/frontend/src/views/system/model/Model.vue b/frontend/src/views/system/model/Model.vue
index 916dc432..dcba676c 100644
--- a/frontend/src/views/system/model/Model.vue
+++ b/frontend/src/views/system/model/Model.vue
@@ -201,7 +201,7 @@ const submit = (item: any) => {
     search()
     ElMessage({
       type: 'success',
-      message: 'Edit completed',
+      message: t('common.save_success'),
     })
   })
 }
diff --git a/frontend/src/views/system/model/ModelForm.vue b/frontend/src/views/system/model/ModelForm.vue
index 02d12e24..6c0e7b3b 100644
--- a/frontend/src/views/system/model/ModelForm.vue
+++ b/frontend/src/views/system/model/ModelForm.vue
@@ -177,6 +177,7 @@ defineExpose({
         label-position="top"
         :model="modelForm"
         style="width: 100%"
+        @submit.prevent
       >
         <el-form-item class="custom-require flex-inline" prop="name">
           <template #label
diff --git a/frontend/src/views/system/model/ParamsForm.vue b/frontend/src/views/system/model/ParamsForm.vue
index 15c61b8e..76b66e79 100644
--- a/frontend/src/views/system/model/ParamsForm.vue
+++ b/frontend/src/views/system/model/ParamsForm.vue
@@ -76,6 +76,7 @@ defineExpose({
       label-position="top"
       :model="paramsForm"
       style="width: 100%"
+      @submit.prevent
     >
       <el-form-item prop="key" :label="$t('model.parameters')">
         <el-input
diff --git a/frontend/src/views/system/permission/SelectPermission.vue b/frontend/src/views/system/permission/SelectPermission.vue
index 2a17c632..d46a2d23 100644
--- a/frontend/src/views/system/permission/SelectPermission.vue
+++ b/frontend/src/views/system/permission/SelectPermission.vue
@@ -114,7 +114,7 @@ const open = async (user: any) => {
   const systemWorkspaceList = await workspaceUserList({}, 1, 1000)
   workspace.value = systemWorkspaceList.items.filter((ele: any) => ele.weight !== 1) as any
   if (user?.length) {
-    checkedWorkspace.value = workspace.value.filter((ele) => user.includes(ele.id + ''))
+    checkedWorkspace.value = workspace.value.filter((ele) => user.includes(ele.id))
     handleCheckedWorkspaceChange(checkedWorkspace.value)
   }
   loading.value = false
diff --git a/frontend/src/views/system/permission/index.vue b/frontend/src/views/system/permission/index.vue
index 5e6966cc..a251ecad 100644
--- a/frontend/src/views/system/permission/index.vue
+++ b/frontend/src/views/system/permission/index.vue
@@ -418,22 +418,33 @@ const next = () => {
   })
 }
 const savePermission = () => {
-  const { id, name, permissions } = currentPermission
+  const { id, name, permissions, users } = cloneDeep(currentPermission)
 
   const permissionsObj = permissions.map((ele: any) => {
     return {
       ...cloneDeep(ele),
-      permissions: ele.type !== 'row' ? JSON.stringify(ele.permissions || []) : JSON.stringify([]),
+      permissions:
+        ele.type !== 'row'
+          ? typeof ele.permissions === 'object'
+            ? JSON.stringify(ele.permissions || [])
+            : ele.permissions
+          : JSON.stringify([]),
       permission_list: [],
       expression_tree:
-        ele.type === 'row' ? JSON.stringify(ele.expression_tree || {}) : JSON.stringify({}),
+        ele.type === 'row'
+          ? typeof ele.expression_tree === 'object'
+            ? JSON.stringify(ele.expression_tree || {})
+            : ele.expression_tree
+          : JSON.stringify({}),
     }
   })
   const obj = {
     id,
     name,
     permissions: permissionsObj,
-    users: selectPermissionRef.value.checkedWorkspace.map((ele: any) => ele.id),
+    users: isCreate.value
+      ? selectPermissionRef.value.checkedWorkspace.map((ele: any) => ele.id)
+      : users,
   }
   if (!id) {
     delete obj.id
@@ -536,7 +547,7 @@ const columnRules = {
     >
       <template #header="{ close }">
         <span style="white-space: nowrap">{{ drawerTitle }}</span>
-        <div v-if="editRule !== 2" class="flex-center" style="width: 100%">
+        <div v-if="isCreate" class="flex-center" style="width: 100%">
           <el-steps custom style="max-width: 500px; flex: 1" :active="activeStep" align-center>
             <el-step>
               <template #title> {{ $t('permission.set_permission_rule') }} </template>
@@ -563,6 +574,7 @@ const columnRules = {
           label-position="top"
           :rules="rules"
           class="form-content_error"
+          @submit.prevent
         >
           <el-form-item prop="name" :label="t('permission.rule_group_name')">
             <el-input
@@ -612,7 +624,10 @@ const columnRules = {
                 </el-popover>
               </div>
             </template>
-            <div class="table-content">
+            <div
+              class="table-content"
+              :class="!currentPermission.permissions.length && 'border-bottom'"
+            >
               <el-table
                 :empty-text="$t('permission.no_rule')"
                 :data="currentPermission.permissions"
@@ -670,13 +685,17 @@ const columnRules = {
       </div>
       <template #footer>
         <el-button secondary @click="beforeClose"> {{ $t('common.cancel') }} </el-button>
-        <el-button v-if="activeStep === 1 && editRule !== 2" secondary @click="preview">
+        <el-button v-if="activeStep === 1 && isCreate" secondary @click="preview">
           {{ t('ds.previous') }}
         </el-button>
-        <el-button v-if="activeStep === 0 && editRule !== 2" type="primary" @click="next">
+        <el-button v-if="activeStep === 0 && isCreate" type="primary" @click="next">
           {{ t('common.next') }}
         </el-button>
-        <el-button v-if="activeStep === 1" type="primary" @click="savePermission">
+        <el-button
+          v-if="(isCreate && activeStep === 1) || !isCreate"
+          type="primary"
+          @click="savePermission"
+        >
           {{ $t('common.save') }}
         </el-button>
       </template>
@@ -697,6 +716,7 @@ const columnRules = {
         label-position="top"
         :rules="columnRules"
         class="form-content_error"
+        @submit.prevent
       >
         <el-form-item prop="name" :label="t('permission.rule_name')">
           <el-input
@@ -849,6 +869,10 @@ const columnRules = {
         border-radius: 6px;
         overflow: hidden;
         max-height: calc(100vh - 400px);
+
+        &.border-bottom {
+          border-bottom: 1px solid #1f232926;
+        }
         .ed-table__empty-text {
           padding-top: 0;
         }
diff --git a/frontend/src/views/system/user/User.vue b/frontend/src/views/system/user/User.vue
index 1c4568d5..a6b901d8 100644
--- a/frontend/src/views/system/user/User.vue
+++ b/frontend/src/views/system/user/User.vue
@@ -123,6 +123,13 @@
             </div>
           </template>
         </el-table-column>
+        <template #empty>
+          <EmptyBackground
+            v-if="!!keyword && !state.tableData.length"
+            :description="$t('datasource.relevant_content_found')"
+            img-type="tree"
+          />
+        </template>
       </el-table>
 
       <div class="pagination-container">
@@ -174,6 +181,7 @@
       label-position="top"
       :rules="rules"
       class="form-content_error"
+      @submit.prevent
     >
       <el-form-item prop="name" :label="t('user.name')">
         <el-input
@@ -241,6 +249,7 @@
       label-position="top"
       :rules="passwordRules"
       class="form-content_error"
+      @submit.prevent
     >
       <el-form-item prop="new" :label="t('user.new_password')">
         <el-input
@@ -285,6 +294,7 @@ import SuccessFilled from '@/assets/svg/gou_icon.svg'
 import CircleCloseFilled from '@/assets/svg/icon_ban_filled.svg'
 import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import { useI18n } from 'vue-i18n'
+import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
 import { convertFilterText, FilterText } from '@/components/filter-text'
 
 import IconLock from '@/assets/svg/icon-key_outlined.svg'
@@ -635,11 +645,15 @@ const editTerm = () => {
   })
 }
 const saveHandler = () => {
-  if (state.form.id) {
-    editTerm()
-  } else {
-    addTerm()
-  }
+  termFormRef.value.validate((res: any) => {
+    if (res) {
+      if (state.form.id) {
+        editTerm()
+      } else {
+        addTerm()
+      }
+    }
+  })
 }
 const handleSizeChange = (val: number) => {
   state.pageInfo.pageSize = val
diff --git a/frontend/src/views/system/user/UserImport.vue b/frontend/src/views/system/user/UserImport.vue
index 1313cfe6..9b0f7451 100644
--- a/frontend/src/views/system/user/UserImport.vue
+++ b/frontend/src/views/system/user/UserImport.vue
@@ -283,6 +283,7 @@ defineExpose({
       class="form-content_error import-form"
       :model="form"
       label-width="0px"
+      @submit.prevent
     >
       <el-form-item prop="file" :label="t('user.file')" style="margin-bottom: 0px">
         <div v-if="fileName" class="pdf-card">
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index 66e75c9c..e2979b25 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -94,6 +94,7 @@
       label-position="top"
       class="sqlbot-form"
       size="large"
+      @submit.prevent
     >
       <el-form-item label="Account">
         <el-input v-model="state.form.term" autocomplete="off" />
@@ -123,6 +124,7 @@ import { ref, reactive, onMounted } from 'vue'
 /* import IconOpeUpload from '@/assets/svg/operate/ope-upload.svg';
 import IconOpeDownload from '@/assets/svg/operate/ope-download.svg';
 import IconOpeAdd from '@/assets/svg/operate/ope-add.svg'; */
+import { useI18n } from 'vue-i18n'
 
 import { SuccessFilled, CircleCloseFilled } from '@element-plus/icons-vue'
 import IconOpeEdit from '@/assets/svg/operate/ope-edit.svg'
@@ -130,6 +132,7 @@ import IconOpeDelete from '@/assets/svg/operate/ope-delete.svg'
 import { userApi } from '@/api/auth'
 import { formatTimestamp } from '@/utils/date'
 
+const { t } = useI18n()
 const keyword = ref('')
 const dialogFormVisible = ref(false)
 const termFormRef = ref()
@@ -223,7 +226,7 @@ const editTerm = () => {
     search()
     ElMessage({
       type: 'success',
-      message: 'Edit completed',
+      message: t('common.save_success'),
     })
   })
 }
diff --git a/frontend/src/views/system/workspace/ParamsForm.vue b/frontend/src/views/system/workspace/ParamsForm.vue
index f6edbc54..a09b565b 100644
--- a/frontend/src/views/system/workspace/ParamsForm.vue
+++ b/frontend/src/views/system/workspace/ParamsForm.vue
@@ -64,6 +64,7 @@ defineExpose({
       label-position="top"
       :model="paramsForm"
       style="width: 100%"
+      @submit.prevent
     >
       <el-form-item prop="key" :label="$t('model.parameters')">
         <el-input
diff --git a/frontend/src/views/system/workspace/index.vue b/frontend/src/views/system/workspace/index.vue
index f79bc0d1..834c7344 100644
--- a/frontend/src/views/system/workspace/index.vue
+++ b/frontend/src/views/system/workspace/index.vue
@@ -529,6 +529,7 @@ const handleCurrentChange = (val: number) => {
       label-position="top"
       :rules="rules"
       class="form-content_error"
+      @submit.prevent
     >
       <el-form-item prop="name" :label="t('workspace.workspace_name')">
         <el-input