chore(数据库管理): 对接接口&&多语言

src/apis/database.ts

+import { request } from '@/utils/request'
+import { DefaultPaginationData } from '@/composables/usePagination'
+
+/**
+ * @param payload 数据库参数
+ * @returns 新建知识库
+ */
+export function fetchCreateDataBase<T>(payload: object) {
+  return request.post<T>('/databaseRest/create.json', payload)
+}
+
+/**
+ * @param payload 连接数据库参数
+ * @returns 连接数据库
+ */
+export function fetchTestConnectionDataBase<T>(payload: object) {
+  return request.post<T>('/databaseRest/testConnection.json', payload)
+}
+
+/**
+ * @params search 搜索值
+ * @returns 获取数据库列表
+ */
+export function fetchGetDataBaseList<T>(payload: { search: string; pagingInfo: DefaultPaginationData }) {
+  return request.post<T>('/databaseRest/getList.json', payload)
+}
+
+/**
+ * @query id 数据库Id
+ * @returns 删除数据库
+ */
+export function fetchDeleteDataBaseById<T>(id: number) {
+  return request.post<T>(`/databaseRest/delete.json?id=${id}`)
+}
+
+/**
+ * @param payload 数据库参数
+ * @returns 更新数据库信息
+ */
+export function handleUpdateDataBase<T>(payload: object) {
+  return request.post<T>('/databaseRest/update.json', payload)
+}
+
+/**
+ *
+ * @param id 数据库Id
+ * @returns 获取数据库详情
+ */
+export function fetchGetDataBaseDetail<T>(id: string) {
+  return request.post<T>(`/databaseRest/getDetail.json?id=${id}`)
+}

src/locales/langs/en.yaml

@@ -154,6 +154,7 @@ common_module:
   authenticated: 'Authenticated'
   cancel_authorization: 'Cancel authorization'
   get_code: 'Get Code'
+  database: 'Database'
 
   dialogue_module:
     continue_question_message: 'You can keep asking questions'
@@ -214,6 +215,7 @@ router_title_module:
   data_statistic: 'Data statistic'
   plugin_center: 'Plugin center'
   reset_password: 'Reset password'
+  database: 'Database'
 
 login_module:
   app_welcome_words: 'Hi, welcome to Model Link'
@@ -615,6 +617,36 @@ personal_space_module:
       upload_QA_format_error_message: 'Only xls and xlsx files can be uploaded. Please upload them again'
       download_QA_template: 'Download Q&A Template'
 
+  database_module:
+    create_database: 'Create database'
+    edit_database: 'Edit database'
+    creation_method: 'Creation method'
+    direct_database_connection: 'Direct database connection'
+    db_title: 'Database title'
+    db_desc: 'Database description'
+    db_source_info: 'Database source info'
+    db_source_type: 'Database source type'
+    db_host: 'Database host'
+    db_port: 'Database port'
+    db_name: 'Database name'
+    db_username: 'Database username'
+    db_password: 'Database password'
+    please_enter_db_title: 'Please enter database title'
+    please_enter_db_desc: 'Please enter database description (for identification only, does not affect database operations)'
+    please_select_db_source_type: 'Please select database source type'
+    please_enter_db_host: 'Please enter IP address or domain name'
+    please_enter_db_port: 'Please enter database port'
+    please_enter_db_name: 'Please enter database name'
+    please_enter_db_username: 'Please enter database username'
+    please_enter_db_password: 'Please enter database password'
+    db_title_rule: 'Only Chinese characters, English letters, numbers, underscores (_), hyphens (-), and dots (.) are supported'
+    db_host_rule: 'The database source Host must be a public network address'
+    connect_test: 'Connection Test'
+    connect_test_success: 'Database connection successful'
+    connect_test_fail: 'Database connection failed. Please verify your input'
+    connect_test_must_pass_to_create: 'Connect test must pass to create'
+    connect_test_must_pass_to_update: 'Connect test must pass to update'
+
 share_agent_module:
   please: 'Please first'
   after_action: 'Then start asking questions'

src/locales/langs/zh-cn.yaml

@@ -153,7 +153,7 @@ common_module:
   authenticated: '已认证'
   cancel_authorization: '取消授权'
   get_code: '获取验证码'
-
+  database: '数据库'
 
   dialogue_module:
     continue_question_message: '你可以继续提问'
@@ -214,6 +214,7 @@ router_title_module:
   data_statistic: '数据统计'
   plugin_center: '插件中心'
   reset_password: '重置密码'
+  database: '数据库'
 
 login_module:
   app_welcome_words: 'Hi, 欢迎使用Model Link'
@@ -614,6 +615,36 @@ personal_space_module:
       upload_QA_format_error_message: '只能上传xls，xlsx格式文件,请重新上传'
       download_QA_template: '下载问答模版'
 
+  database_module:
+    create_database: '创建数据库'
+    edit_database: '编辑数据库'
+    creation_method: '创建方式'
+    direct_database_connection: '直连数据库'
+    db_title: '数据库名称'
+    db_desc: '数据库描述'
+    db_source_info: '数据源信息'
+    db_source_type: '数据源类型'
+    db_host: '数据库地址host'
+    db_port: '端口号'
+    db_name: '数据库名'
+    db_username: '用户名'
+    db_password: '密码'
+    please_enter_db_title: '请输入数据库名称'
+    please_enter_db_desc: '请输入数据库描述，此描述仅用于区分不同数据库，不会影响数据库调用'
+    please_select_db_source_type: '请选择数据源类型'
+    please_enter_db_host: '请输入IP地址或域名'
+    please_enter_db_port: '请输入端口号'
+    please_enter_db_name: '请输入数据库名'
+    please_enter_db_username: '请输入用户名'
+    please_enter_db_password: '请输入密码'
+    db_title_rule: '仅支持中文、英文、数字、下划线（_）、中划线（-）、英文点（.）'
+    db_host_rule: '输入的数据源Host必须是公网地址'
+    connect_test: '连接测试'
+    connect_test_success: '数据库连接成功'
+    connect_test_fail: '无法联通数据库，请检查填写内容'
+    connect_test_must_pass_to_create: '测试通过才能创建'
+    connect_test_must_pass_to_update: '测试通过才能更新'
+
 share_agent_module:
   please: '请先'
   after_action: '后开始提问'

src/locales/langs/zh-hk.yaml

@@ -153,6 +153,7 @@ common_module:
   authenticated: '已認證'
   cancel_authorization: '取消授權'
   get_code: '獲取驗証碼'
+  database: '數據庫'
 
   dialogue_module:
     continue_question_message: '你可以繼續提問'
@@ -213,6 +214,7 @@ router_title_module:
   data_statistic: '數據統計'
   plugin_center: '插件中心'
   reset_password: '重置密碼'
+  database: '數據庫'
 
 login_module:
   app_welcome_words: 'Hi, 歡迎使用Model Link'
@@ -613,6 +615,36 @@ personal_space_module:
       upload_QA_format_error_message: '只能上傳xls，xlsx格式文件,請重新上傳'
       download_QA_template: '下載問答模版'
 
+  database_module:
+    create_database: '創建數據庫'
+    edit_database: '編輯數據庫'
+    creation_method: '創建方式'
+    direct_database_connection: '直連數據庫'
+    db_title: '數據庫名稱'
+    db_desc: '數據庫描述'
+    db_source_info: '數據源信息'
+    db_source_type: '數據源類型'
+    db_host: '數據庫地址host'
+    db_port: '端口號'
+    db_name: '數據庫名'
+    db_username: '用户名'
+    db_password: '密碼'
+    please_enter_db_title: '請輸入數據庫名稱'
+    please_enter_db_desc: '請輸入數據庫描述，此描述僅用於區分不同數據庫，不會影響數據庫調用'
+    please_select_db_source_type: '請選擇數據源類型'
+    please_enter_db_host: '請輸入IP地址或域名'
+    please_enter_db_port: '請輸入端口號'
+    please_enter_db_name: '請輸入數據庫名'
+    please_enter_db_username: '請輸入用户名'
+    please_enter_db_password: '請輸入密碼'
+    db_title_rule: '僅支持中文、英文、數字、下劃線（_）、中劃線（-）、英文點（.）'
+    db_host_rule: '輸入的數據源Host必須是公網地址'
+    connect_test: '連接測試'
+    connect_test_success: '數據庫連接成功'
+    connect_test_fail: '無法聯通數據庫，請檢查填寫內容'
+    connect_test_must_pass_to_create: '測試通過才能創建'
+    connect_test_must_pass_to_update: '測試通過才能更新'
+
 share_agent_module:
   please: '請先'
   after_action: '後開始提問'

src/router/modules/personal-space.ts

@@ -50,7 +50,7 @@ export default [
             name: 'PersonalSpaceDatabase',
             meta: {
               rank: 1001,
-              title: '数据库',
+              title: 'router_title_module.database',
               belong: 'PersonalSpace',
             },
             component: () => import('@/views/personal-space/personal-database/personal-database.vue'),

src/views/personal-space/personal-database/columns.tsx

@@ -6,7 +6,7 @@ const t = i18n.global.t
 export function createDatabaseColumn(handleDatabaseTableAction: (actionType: string, databaseId: number) => void) {
   return [
     {
-      title: () => <span>数据库名称</span>,
+      title: () => <span>{t('personal_space_module.database_module.db_title')}</span>,
       key: 'databaseName',
       align: 'left',
       ellipsis: {
@@ -19,7 +19,7 @@ export function createDatabaseColumn(handleDatabaseTableAction: (actionType: str
       },
     },
     {
-      title: () => <span>数据库描述</span>,
+      title: () => <span>{t('personal_space_module.database_module.db_desc')}</span>,
       key: 'databaseDesc',
       align: 'left',
       ellipsis: {
@@ -31,7 +31,7 @@ export function createDatabaseColumn(handleDatabaseTableAction: (actionType: str
       },
     },
     {
-      title: () => <span>编辑时间</span>,
+      title: () => <span>{t('common_module.modified_time')}</span>,
       key: 'updateTime',
       align: 'left',
       ellipsis: {
@@ -39,7 +39,7 @@ export function createDatabaseColumn(handleDatabaseTableAction: (actionType: str
       },
       width: 170,
       render(row: DatabaseItemInterface) {
-        return row.updateTime ? formatDateTime(row.updateTime) : '--'
+        return row.modifiedTime ? formatDateTime(row.modifiedTime) : '--'
       },
     },
     {

src/views/personal-space/personal-database/personal-database.vue

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Search } from '@icon-park/vue-next'
+import { DataTableInst } from 'naive-ui'
 import useTableScrollY from '@/composables/useTableScrollY'
 import { usePagination } from '@/composables/usePagination.ts'
 import CustomPagination from '@/components/custom-pagination/custom-pagination.vue'
 import { createDatabaseColumn } from './columns.tsx'
 import { DatabaseItemInterface } from './type.d'
 import EditDatabaseModal from './components/edit-database-modal.vue'
+import { fetchDeleteDataBaseById, fetchGetDataBaseList, handleUpdateDataBase } from '@/apis/database.ts'
 
 const { t } = useI18n()
 
+const databaseListTableRef = useTemplateRef<DataTableInst>('databaseListTableRef')
+
 const { pageContentWrapRef, tableContentY } = useTableScrollY(48 + 32 + 18 + 16 + 28)
 const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()
 
 const searchDatabaseInputValue = ref('')
 const isSearchEmptyList = ref(false)
+
+const databaseList = ref<DatabaseItemInterface[]>([])
+const databaseListLoading = ref(false)
+
 const showEditDatabaseModal = ref(false)
-const databaseList = ref<DatabaseItemInterface[]>([
-  {
-    id: 1,
-    title: '数据库1',
-    desc: '描述1',
-    updateTime: new Date(),
-  },
-  {
-    id: 2,
-    title: '数据库2',
-    desc: '描述2',
-    updateTime: new Date(),
-  },
-])
+const updateDatabaseBtnLoading = ref(false)
+const currentEditDatabaseInfo = ref<DatabaseItemInterface>({
+  id: 0,
+  title: '',
+  desc: '',
+  dbType: '',
+  dbHost: '',
+  dbPort: 0,
+  dbName: '',
+  dbUsername: '',
+  dbPassword: '',
+  modifiedTime: new Date(),
+})
 
 const databaseColumns = createDatabaseColumn(handleDatabaseTableAction)
 
@@ -42,6 +49,38 @@ const isLoadingPagination = computed(() => {
   return tableContentY.value > 0
 })
 
+watch([() => paginationData.pageNo, () => paginationData.pageSize], async () => {
+  await handleGetDatabaseList()
+  databaseListTableRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
+})
+
+onMounted(() => {
+  handleGetDatabaseList()
+})
+
+async function handleGetDatabaseList() {
+  databaseListLoading.value = true
+
+  const res = await fetchGetDataBaseList<DatabaseItemInterface[]>({
+    search: searchDatabaseInputValue.value,
+    pagingInfo: paginationData,
+  })
+
+  if (res.code === 0) {
+    databaseList.value = res.data
+    paginationData.totalRows = res.pagingInfo?.totalRows || 0
+    paginationData.totalPages = res.pagingInfo?.totalPages || 0
+    isSearchEmptyList.value = !!searchDatabaseInputValue.value && paginationData.totalRows === 0
+    databaseListLoading.value = false
+  }
+}
+
+async function handleSearchDatabaseList() {
+  paginationData.pageNo = 1
+  await handleGetDatabaseList()
+  databaseListTableRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
 function handleDatabaseTableAction(actionType: string, databaseId: number) {
   switch (actionType) {
     case 'view':
@@ -56,21 +95,60 @@ function handleDatabaseTableAction(actionType: string, databaseId: number) {
   }
 }
 
-function handleToDatabaseDetail(_databaseId: number) {}
+function handleToDatabaseDetail(_databaseId: number) {
+  // TODO
+}
 
-function handleShowEditDatabaseModal(_databaseId: number) {
+function handleShowEditDatabaseModal(databaseId: number) {
   showEditDatabaseModal.value = true
+
+  databaseList.value.forEach((item) => {
+    if (item.id === databaseId) {
+      currentEditDatabaseInfo.value = item
+    }
+  })
+}
+
+function handleDeleteDatabaseById(databaseId: number) {
+  window.$message
+    .ctWarning('', t('personal_space_module.knowledge_module.delete_knowledge_dialog_content'))
+    .then(async () => {
+      const res = await fetchDeleteDataBaseById(databaseId)
+
+      if (res.code === 0) {
+        if (databaseList.value.length <= 1 && paginationData.pageNo === paginationData.totalPages) {
+          paginationData.pageNo = paginationData.pageNo - 1 || 1
+        }
+        window.$message.success(t('common_module.delete_success_message'))
+        await handleGetDatabaseList()
+      }
+    })
 }
 
-function handleDeleteDatabaseById(_databaseId: number) {
-  window.$message.ctWarning('', '删除后将无法恢复').then(() => {})
+async function handleUpdateDatabase(databaseData: DatabaseItemInterface) {
+  updateDatabaseBtnLoading.value = true
+
+  const res = await handleUpdateDataBase(databaseData).finally(() => {
+    updateDatabaseBtnLoading.value = false
+  })
+
+  if (res.code === 0) {
+    showEditDatabaseModal.value = false
+    window.$message.success(t('common_module.successful_update'))
+    handleGetDatabaseList()
+  }
 }
 </script>
 
 <template>
   <div ref="pageContentWrapRef" class="h-full w-full">
     <div class="mb-[18px] flex justify-end">
-      <n-input v-model:value="searchDatabaseInputValue" :placeholder="t('common_module.search')" class="w-[256px]!">
+      <n-input
+        v-model:value="searchDatabaseInputValue"
+        :placeholder="t('common_module.search')"
+        class="w-[256px]!"
+        @keyup.enter="handleSearchDatabaseList"
+      >
         <template #suffix>
           <Search theme="outline" size="16" fill="#999" class="cursor-pointer" />
         </template>
@@ -79,8 +157,8 @@ function handleDeleteDatabaseById(_databaseId: number) {
 
     <div class="mb-4" :style="{ height: tableContentY + 48 + 'px' }">
       <n-data-table
-        ref="knowledgeListTableRef"
-        :loading="false"
+        ref="databaseListTableRef"
+        :loading="databaseListLoading"
         :bordered="true"
         :bottom-bordered="true"
         :single-line="false"
@@ -110,6 +188,11 @@ function handleDeleteDatabaseById(_databaseId: number) {
       />
     </footer>
 
-    <EditDatabaseModal v-model:show-modal="showEditDatabaseModal" />
+    <EditDatabaseModal
+      v-model:show-modal="showEditDatabaseModal"
+      :database-detail="currentEditDatabaseInfo!"
+      :btn-loading="updateDatabaseBtnLoading"
+      @confirm="handleUpdateDatabase"
+    />
   </div>
 </template>

src/views/personal-space/personal-database/type.d.ts

@@ -2,5 +2,11 @@ export interface DatabaseItemInterface {
   id: number
   title: string
   desc: string
-  updateTime: Date
+  dbType: string
+  dbHost: string
+  dbPort: number
+  dbName: string
+  dbUsername: string
+  dbPassword: string
+  modifiedTime: Date
 }

types/locales.d.ts

@@ -153,6 +153,7 @@ declare namespace I18n {
       authenticated: string
       cancel_authorization: string
       get_code: string
+      database: string
 
       dialogue_module: {
         continue_question_message: string
@@ -220,6 +221,7 @@ declare namespace I18n {
       data_statistic: string
       plugin_center: string
       reset_password: string
+      database: string
     }
 
     login_module: {
@@ -625,6 +627,37 @@ declare namespace I18n {
           download_QA_template: string
         }
       }
+
+      database_module: {
+        create_database: string
+        edit_database: string
+        creation_method: string
+        direct_database_connection: string
+        db_title: string
+        db_desc: string
+        db_source_info: string
+        db_source_type: string
+        db_host: string
+        db_port: string
+        db_name: string
+        db_username: string
+        db_password: string
+        please_enter_db_title: string
+        please_enter_db_desc: string
+        please_select_db_source_type: string
+        please_enter_db_host: string
+        please_enter_db_port: string
+        please_enter_db_name: string
+        please_enter_db_username: string
+        please_enter_db_password: string
+        db_title_rule: string
+        db_host_rule: string
+        connect_test: string
+        connect_test_success: string
+        connect_test_fail: string
+        connect_test_must_pass_to_create: string
+        connect_test_must_pass_to_update: string
+      }
     }
 
     share_agent_module: {