From 15cb3ef62876447b21b7cd1b888bbb16d9547e1b Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 17 Sep 2025 11:17:15 +0800
Subject: [PATCH] feat(Data Training): add data training

---
 frontend/src/api/training.ts                  |  11 +
 frontend/src/components/layout/LayoutDsl.vue  |  12 +-
 frontend/src/components/layout/Menu.vue       |   1 +
 frontend/src/i18n/en.json                     |  14 +-
 frontend/src/i18n/zh-CN.json                  |  14 +-
 frontend/src/router/index.ts                  |   7 +
 frontend/src/views/chat/index.vue             |   2 +-
 .../src/views/system/appearance/index.vue     |   2 +-
 .../src/views/system/professional/index.vue   |   7 -
 frontend/src/views/system/training/index.vue  | 752 ++++++++++++++++++
 10 files changed, 805 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/api/training.ts
 create mode 100644 frontend/src/views/system/training/index.vue

diff --git a/frontend/src/api/training.ts b/frontend/src/api/training.ts
new file mode 100644
index 00000000..c88ad13a
--- /dev/null
+++ b/frontend/src/api/training.ts
@@ -0,0 +1,11 @@
+import { request } from '@/utils/request'
+
+export const trainingApi = {
+  getList: (pageNum: any, pageSize: any, params: any) =>
+    request.get(`/system/data-training/page/${pageNum}/${pageSize}`, {
+      params,
+    }),
+  updateEmbedded: (data: any) => request.put('/system/data-training', data),
+  deleteEmbedded: (params: any) => request.delete('/system/data-training', { data: params }),
+  getOne: (id: any) => request.get(`/system/data-training/${id}`),
+}
diff --git a/frontend/src/components/layout/LayoutDsl.vue b/frontend/src/components/layout/LayoutDsl.vue
index f17b8129..9a0fe5f9 100644
--- a/frontend/src/components/layout/LayoutDsl.vue
+++ b/frontend/src/components/layout/LayoutDsl.vue
@@ -61,37 +61,37 @@ const showSysmenu = computed(() => {
           width="30"
           height="30"
           :src="logo_fold_blue"
-          @click="toChatIndex"
           style="margin: 0 0 6px 5px; cursor: pointer"
+          @click="toChatIndex"
         />
         <img
           v-else
-          @click="toChatIndex"
           width="130"
           height="31"
           :src="logo_blue"
           style="margin-bottom: 6px; cursor: pointer"
+          @click="toChatIndex"
         />
       </template>
       <template v-else-if="appearanceStore.themeColor === 'custom'">
         <custom_small
-          @click="toChatIndex"
           v-if="collapse"
           style="margin: 0 0 6px 5px; cursor: pointer"
+          @click="toChatIndex"
         ></custom_small>
         <LOGOCustom
-          @click="toChatIndex"
           v-else
           style="margin-bottom: 6px; cursor: pointer"
+          @click="toChatIndex"
         ></LOGOCustom>
       </template>
       <template v-else>
         <LOGO_fold
-          @click="toChatIndex"
           v-if="collapse"
           style="margin: 0 0 6px 5px; cursor: pointer"
+          @click="toChatIndex"
         ></LOGO_fold>
-        <LOGO @click="toChatIndex" v-else style="margin-bottom: 6px; cursor: pointer"></LOGO>
+        <LOGO v-else style="margin-bottom: 6px; cursor: pointer" @click="toChatIndex"></LOGO>
       </template>
       <Workspace v-if="!showSysmenu" :collapse="collapse"></Workspace>
       <Menu :collapse="collapseCopy"></Menu>
diff --git a/frontend/src/components/layout/Menu.vue b/frontend/src/components/layout/Menu.vue
index b2081936..24143e95 100644
--- a/frontend/src/components/layout/Menu.vue
+++ b/frontend/src/components/layout/Menu.vue
@@ -50,6 +50,7 @@ const routerList = computed(() => {
       !route.path.includes('canvas') &&
       !route.path.includes('member') &&
       !route.path.includes('professional') &&
+      !route.path.includes('training') &&
       !route.path.includes('permission') &&
       !route.path.includes('preview') &&
       route.path !== '/login' &&
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index ea6d621c..4bc9ff34 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -6,6 +6,18 @@
     "Dashboard": "Dashboard",
     "AI Model Configuration": "AI Model Configuration"
   },
+  "training": {
+    "data_training": "Data Training",
+    "problem_description": "Problem Description",
+    "sample_sql": "Sample SQL",
+    "search_problem": "Search Problem",
+    "add_training_data": "Add Training Data",
+    "training_data_details": "Training Data Details",
+    "training_data_items": "Do you want to delete the {msg} selected training data items?",
+    "sql_statement": "SQL Statement",
+    "edit_training_data": "Edit Training Data",
+    "sales_this_year": "Do you want to delete the training data: {msg}?"
+  },
   "professional": {
     "cannot_be_repeated": "Term name, synonyms cannot be repeated",
     "code_for_debugging": "Copy the following code for debugging",
@@ -656,4 +668,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 192f6827..bb597f2d 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -6,6 +6,18 @@
     "Dashboard": "仪表盘",
     "AI Model Configuration": "模型配置"
   },
+  "training": {
+    "data_training": "数据训练",
+    "problem_description": "问题描述",
+    "sample_sql": "示例 SQL",
+    "search_problem": "搜索问题",
+    "add_training_data": "添加训练数据",
+    "training_data_details": "训练数据详情",
+    "training_data_items": "是否删除选中的 {msg} 条训练数据？",
+    "sql_statement": "SQL 语句",
+    "edit_training_data": "编辑训练数据",
+    "sales_this_year": "是否删除训练数据：{msg}？"
+  },
   "professional": {
     "cannot_be_repeated": "术语名称，同义词不能重复",
     "code_for_debugging": "复制以下代码进行调试",
@@ -656,4 +668,4 @@
     "setting_successfully": "设置成功",
     "customize_theme_color": "自定义主题色"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 7e91bc7b..0b5adb2f 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -16,6 +16,7 @@ import assistant from '@/views/embedded/index.vue'
 import EmbeddedPage from '@/views/embedded/page.vue'
 import Member from '@/views/system/member/index.vue'
 import Professional from '@/views/system/professional/index.vue'
+import Training from '@/views/system/training/index.vue'
 import Appearance from '@/views/system/appearance/index.vue'
 import Permission from '@/views/system/permission/index.vue'
 import User from '@/views/system/user/User.vue'
@@ -112,6 +113,12 @@ export const routes = [
         component: Professional,
         meta: { title: t('professional.professional_terminology') },
       },
+      {
+        path: '/set/training',
+        name: 'training',
+        component: Training,
+        meta: { title: t('training.data_training') },
+      },
     ],
   },
   {
diff --git a/frontend/src/views/chat/index.vue b/frontend/src/views/chat/index.vue
index 07455844..8f2e5bfe 100644
--- a/frontend/src/views/chat/index.vue
+++ b/frontend/src/views/chat/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-popover
-    :width="280"
     v-if="assistantStore.assistant && !assistantStore.pageEmbedded && assistantStore.type != 4"
+    :width="280"
     placement="bottom-start"
     popper-class="popover-chat_history popover-chat_history_small"
   >
diff --git a/frontend/src/views/system/appearance/index.vue b/frontend/src/views/system/appearance/index.vue
index ad85f02f..597d7c77 100644
--- a/frontend/src/views/system/appearance/index.vue
+++ b/frontend/src/views/system/appearance/index.vue
@@ -64,7 +64,7 @@
                   :name="loginForm.name"
                   :slogan="loginForm.slogan"
                   :web="web"
-                  :showSlogan="loginForm.showSlogan"
+                  :show-slogan="loginForm.showSlogan"
                   :bg="bg"
                   :login="login"
                   :is-blue="isBlue"
diff --git a/frontend/src/views/system/professional/index.vue b/frontend/src/views/system/professional/index.vue
index 6ff821ea..55ad2859 100644
--- a/frontend/src/views/system/professional/index.vue
+++ b/frontend/src/views/system/professional/index.vue
@@ -12,13 +12,6 @@ import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
 import { useI18n } from 'vue-i18n'
 import { cloneDeep } from 'lodash-es'
 
-defineProps({
-  btnSelect: {
-    type: String,
-    default: '',
-  },
-})
-
 interface Form {
   id?: string | null
   word: string | null
diff --git a/frontend/src/views/system/training/index.vue b/frontend/src/views/system/training/index.vue
new file mode 100644
index 00000000..fadbd961
--- /dev/null
+++ b/frontend/src/views/system/training/index.vue
@@ -0,0 +1,752 @@
+<script lang="ts" setup>
+import { nextTick, onMounted, reactive, ref, unref } from 'vue'
+import icon_export_outlined from '@/assets/svg/icon_export_outlined.svg'
+import { trainingApi } from '@/api/training'
+import { formatTimestamp } from '@/utils/date'
+import { datasourceApi } from '@/api/datasource'
+import ccmUpload from '@/assets/svg/icon_ccm-upload_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import IconOpeEdit from '@/assets/svg/icon_edit_outlined.svg'
+import icon_copy_outlined from '@/assets/embedded/icon_copy_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'
+
+interface Form {
+  id?: string | null
+  question: string | null
+  datasource: string | null
+  description: string | null
+}
+
+const { t } = useI18n()
+const multipleSelectionAll = ref<any[]>([])
+const keywords = ref('')
+const oldKeywords = ref('')
+const searchLoading = ref(false)
+const { copy } = useClipboard({ legacy: true })
+
+const options = ref<any[]>([])
+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 dialogTitle = ref('')
+const updateLoading = ref(false)
+const defaultForm = {
+  id: null,
+  question: null,
+  description: null,
+  datasource: null,
+}
+const pageForm = ref<Form>(cloneDeep(defaultForm))
+const copyCode = () => {
+  copy(pageForm.value.description!)
+    .then(function () {
+      ElMessage.success(t('embedded.copy_successful'))
+    })
+    .catch(function () {
+      ElMessage.error(t('embedded.copy_successful'))
+    })
+}
+const cancelDelete = () => {
+  handleToggleRowSelection(false)
+  multipleSelectionAll.value = []
+  checkAll.value = false
+  isIndeterminate.value = false
+}
+const exportBatchUser = () => {
+  ElMessageBox.confirm(
+    t('professional.selected_2_terms_de', { msg: multipleSelectionAll.value.length }),
+    {
+      confirmButtonType: 'primary',
+      confirmButtonText: t('professional.export'),
+      cancelButtonText: t('common.cancel'),
+      customClass: 'confirm-no_icon',
+      autofocus: false,
+    }
+  ).then(() => {
+    trainingApi.deleteEmbedded(multipleSelectionAll.value.map((ele) => ele.id)).then(() => {
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      multipleSelectionAll.value = []
+      search()
+    })
+  })
+}
+
+const exportAllUser = () => {
+  ElMessageBox.confirm(t('professional.all_236_terms', { msg: pageInfo.total }), {
+    confirmButtonType: 'primary',
+    confirmButtonText: t('professional.export'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  }).then(() => {
+    trainingApi.deleteEmbedded(multipleSelectionAll.value.map((ele) => ele.id)).then(() => {
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      multipleSelectionAll.value = []
+      search()
+    })
+  })
+}
+const deleteBatchUser = () => {
+  ElMessageBox.confirm(
+    t('training.training_data_items', { msg: multipleSelectionAll.value.length }),
+    {
+      confirmButtonType: 'danger',
+      confirmButtonText: t('dashboard.delete'),
+      cancelButtonText: t('common.cancel'),
+      customClass: 'confirm-no_icon',
+      autofocus: false,
+    }
+  ).then(() => {
+    trainingApi.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('training.sales_this_year', { msg: row.question }), {
+    confirmButtonType: 'danger',
+    confirmButtonText: t('dashboard.delete'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  }).then(() => {
+    trainingApi.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: any) => !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 search = () => {
+  searchLoading.value = true
+  oldKeywords.value = keywords.value
+  trainingApi
+    .getList(pageInfo.currentPage, pageInfo.pageSize, { word: keywords.value })
+    .then((res) => {
+      toggleRowLoading.value = true
+      fieldList.value = res.data
+      pageInfo.total = res.total_count
+      nextTick(() => {
+        handleToggleRowSelection()
+      })
+    })
+    .finally(() => {
+      searchLoading.value = false
+    })
+}
+
+const termFormRef = ref()
+
+const rules = {
+  question: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('training.problem_description'),
+    },
+  ],
+  datasource: [
+    {
+      required: true,
+      message: t('datasource.Please_select') + t('common.empty') + t('ds.title'),
+    },
+  ],
+  description: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('training.sql_statement'),
+    },
+  ],
+}
+
+const list = () => {
+  datasourceApi.list().then((res: any) => {
+    console.log(res)
+    options.value = res || []
+  })
+}
+
+const saveHandler = () => {
+  termFormRef.value.validate((res: any) => {
+    if (res) {
+      const obj = unref(pageForm)
+      if (!obj.id) {
+        delete obj.id
+      }
+      updateLoading.value = true
+      trainingApi
+        .updateEmbedded(obj)
+        .then(() => {
+          ElMessage({
+            type: 'success',
+            message: t('common.save_success'),
+          })
+          search()
+          onFormClose()
+        })
+        .finally(() => {
+          updateLoading.value = false
+        })
+    }
+  })
+}
+
+const editHandler = (row: any) => {
+  pageForm.value.id = null
+  if (row) {
+    pageForm.value = cloneDeep(row)
+  }
+  list()
+
+  dialogTitle.value = row?.id ? t('training.edit_training_data') : t('training.add_training_data')
+  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 rowInfoDialog = ref(false)
+
+const handleRowClick = (row: any) => {
+  pageForm.value = cloneDeep(row)
+  rowInfoDialog.value = true
+}
+
+const onRowFormClose = () => {
+  pageForm.value = cloneDeep(defaultForm)
+  rowInfoDialog.value = false
+}
+</script>
+
+<template>
+  <div v-loading="searchLoading" class="training">
+    <div class="tool-left">
+      <span class="page-title">{{ $t('training.data_training') }}</span>
+      <div>
+        <el-input
+          v-model="keywords"
+          style="width: 240px; margin-right: 12px"
+          :placeholder="$t('training.search_problem')"
+          clearable
+          @blur="search"
+        >
+          <template #prefix>
+            <el-icon>
+              <icon_searchOutline_outlined />
+            </el-icon>
+          </template>
+        </el-input>
+        <template v-if="false">
+          <el-button secondary @click="exportAllUser">
+            <template #icon>
+              <icon_export_outlined />
+            </template>
+            {{ $t('professional.export_all') }}
+          </el-button>
+          <el-button secondary @click="editHandler(null)">
+            <template #icon>
+              <ccmUpload></ccmUpload>
+            </template>
+            {{ $t('user.batch_import') }}
+          </el-button>
+        </template>
+        <el-button type="primary" @click="editHandler(null)">
+          <template #icon>
+            <icon_add_outlined></icon_add_outlined>
+          </template>
+          {{ $t('training.add_training_data') }}
+        </el-button>
+      </div>
+    </div>
+    <div
+      v-if="!searchLoading"
+      class="table-content"
+      :class="multipleSelectionAll?.length && 'show-pagination_height'"
+    >
+      <div class="preview-or-schema">
+        <el-table
+          ref="multipleTableRef"
+          :data="fieldList"
+          style="width: 100%"
+          @row-click="handleRowClick"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column :selectable="selectable" type="selection" width="55" />
+          <el-table-column prop="question" :label="$t('training.problem_description')" width="280">
+          </el-table-column>
+          <el-table-column prop="description" :label="$t('training.sample_sql')" min-width="240">
+          </el-table-column>
+          <el-table-column prop="datasource_name" :label="$t('ds.title')" min-width="240"
+            ><template #default="scope">
+              <div class="field-comment_d">
+                <span :title="scope.row.datasource_name" class="notes-in_table">{{
+                  scope.row.datasource_name
+                }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="create_time"
+            sortable
+            :label="$t('dashboard.create_time')"
+            width="240"
+          >
+            <template #default="scope">
+              <span>{{ formatTimestamp(scope.row.create_time, 'YYYY-MM-DD HH:mm:ss') }}</span>
+            </template>
+          </el-table-column>
+          <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.stop="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.stop="deleteHandler(scope.row)">
+                    <IconOpeDelete></IconOpeDelete>
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <EmptyBackground
+              v-if="!oldKeywords && !fieldList.length"
+              :description="$t('chat.no_data')"
+              img-type="noneWhite"
+            />
+
+            <EmptyBackground
+              v-if="!!oldKeywords && !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 v-if="false" class="primary-button" @click="exportBatchUser">
+        {{ $t('professional.export') }}
+      </button>
+
+      <button class="danger-button" @click="deleteBatchUser">{{ $t('dashboard.delete') }}</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"
+    modal-class="training-add_drawer"
+  >
+    <el-form
+      ref="termFormRef"
+      :model="pageForm"
+      label-width="180px"
+      label-position="top"
+      :rules="rules"
+      class="form-content_error"
+      @submit.prevent
+    >
+      <el-form-item prop="question" :label="t('training.problem_description')">
+        <el-input
+          v-model="pageForm.question"
+          :placeholder="
+            $t('datasource.please_enter') + $t('common.empty') + $t('training.problem_description')
+          "
+          autocomplete="off"
+          maxlength="50"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item prop="description" :label="t('training.sql_statement')">
+        <el-input
+          v-model="pageForm.description"
+          :placeholder="$t('datasource.please_enter')"
+          :autosize="{ minRows: 3.636, maxRows: 11.09 }"
+          type="textarea"
+        />
+      </el-form-item>
+
+      <el-form-item prop="datasource" :label="t('ds.title')">
+        <el-select
+          v-model="pageForm.datasource"
+          :placeholder="$t('datasource.Please_select') + $t('common.empty') + $t('ds.title')"
+          style="width: 100%"
+        >
+          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div v-loading="updateLoading" 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>
+  <el-drawer
+    v-model="rowInfoDialog"
+    :title="$t('professional.professional_term_details')"
+    destroy-on-close
+    size="600px"
+    :before-close="onRowFormClose"
+    modal-class="training-term_drawer"
+  >
+    <el-form label-width="180px" label-position="top" class="form-content_error" @submit.prevent>
+      <el-form-item :label="t('training.problem_description')">
+        <div class="content">
+          {{ pageForm.question }}
+        </div>
+      </el-form-item>
+      <el-form-item :label="t('training.sql_statement')">
+        <div class="content">
+          {{ pageForm.description }}
+        </div>
+        <div class="copy-icon">
+          <el-tooltip :offset="12" effect="dark" :content="t('datasource.copy')" placement="top">
+            <el-icon class="hover-icon_with_bg" style="cursor: pointer" size="16" @click="copyCode">
+              <icon_copy_outlined></icon_copy_outlined>
+            </el-icon>
+          </el-tooltip>
+        </div>
+      </el-form-item>
+      <el-form-item :label="t('ds.title')">
+        <div class="content">
+          {{ pageForm.datasource }}
+        </div>
+      </el-form-item>
+    </el-form>
+  </el-drawer>
+</template>
+
+<style lang="less" scoped>
+.training {
+  height: 100%;
+  position: relative;
+
+  .datasource-yet {
+    padding-bottom: 0;
+    height: auto;
+    padding-top: 200px;
+  }
+
+  :deep(.ed-table__cell) {
+    cursor: pointer;
+  }
+
+  .tool-left {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    .page-title {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+
+  .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 {
+      .field-comment_d {
+        display: flex;
+        align-items: center;
+        min-height: 24px;
+      }
+      .notes-in_table {
+        max-width: 100%;
+        display: -webkit-box;
+        max-height: 66px;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3; /* 限制行数为3 */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+      }
+      .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;
+
+          &::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;
+          }
+        }
+        .ed-icon + .ed-icon {
+          margin-left: 12px;
+        }
+      }
+
+      .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;
+    }
+
+    .primary-button {
+      border: 1px solid var(--ed-color-primary);
+      color: var(--ed-color-primary);
+      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">
+.training-term_drawer {
+  .ed-form-item--label-top .ed-form-item__label {
+    margin-bottom: 4px;
+  }
+
+  .ed-form-item__label {
+    color: #646a73;
+  }
+
+  .content {
+    width: 100%;
+    line-height: 22px;
+    word-break: break-all;
+  }
+
+  .copy-icon {
+    position: absolute;
+    right: 0;
+    top: -27px;
+  }
+}
+
+.training-add_drawer {
+  .ed-textarea__inner {
+    line-height: 22px;
+  }
+}
+</style>