feat(resource): manage

ui/src/api/resource-management/authorization.ts

@@ -0,0 +1,63 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put, exportFile, exportExcel } from '@/request/index'
+import { type Ref } from 'vue'
+import type { pageRequest } from '@/api/type/common'
+import type { knowledgeData } from '@/api/type/knowledge'
+
+const prefix = '/system/resource'
+
+const getSharedAuthorizationKnowledge: (
+  knowledge_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (knowledge_id, loading) => {
+  return get(`${prefix}/knowledge/${knowledge_id}/authorization`, {}, loading)
+}
+
+const postSharedAuthorizationKnowledge: (
+  knowledge_id: string,
+  param?: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (knowledge_id, param, loading) => {
+  return post(`${prefix}/knowledge/${knowledge_id}/authorization`, param, loading)
+}
+
+const getSharedAuthorizationTool: (
+  knowledge_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (knowledge_id, loading) => {
+  return get(`${prefix}/tool/${knowledge_id}/authorization`, {}, loading)
+}
+
+const postSharedAuthorizationTool: (
+  knowledge_id: string,
+  param?: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (knowledge_id, param, loading) => {
+  return post(`${prefix}/tool/${knowledge_id}/authorization`, param, loading)
+}
+
+const getSharedAuthorizationModel: (
+  knowledge_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (knowledge_id, loading) => {
+  return get(`${prefix}/model/${knowledge_id}/authorization`, {}, loading)
+}
+
+const postSharedAuthorizationModel: (
+  knowledge_id: string,
+  param?: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (knowledge_id, param, loading) => {
+  return post(`${prefix}/model/${knowledge_id}/authorization`, param, loading)
+}
+
+export default {
+  getSharedAuthorizationKnowledge,
+  postSharedAuthorizationKnowledge,
+  getSharedAuthorizationTool,
+  postSharedAuthorizationTool,
+  getSharedAuthorizationModel,
+  postSharedAuthorizationModel,
+} as {
+  [key: string]: any
+}

ui/src/api/resource-management/document.ts

@@ -0,0 +1,499 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put, exportExcel, exportFile } from '@/request/index'
+import type { Ref } from 'vue'
+import type { KeyValue } from '@/api/type/common'
+import type { pageRequest } from '@/api/type/common'
+
+const prefix = '/system/resource/knowledge'
+
+/**
+ * 文档分页列表
+ * @param 参数  knowledge_id,
+ * param {
+ "   name": "string",
+  }
+ */
+
+const getDocument: (
+  knowledge_id: string,
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, page, param, loading) => {
+  return get(
+    `${prefix}/${knowledge_id}/document/${page.current_page}/${page.page_size}`,
+    param,
+    loading,
+  )
+}
+
+/**
+ * 文档详情
+ * @param 参数 knowledge_id
+ */
+const getDocumentDetail: (knowledge_id: string, document_id: string) => Promise<Result<any>> = (
+  knowledge_id,
+  document_id,
+) => {
+  return get(`${prefix}/${knowledge_id}/document/${document_id}`)
+}
+
+/**
+ * 修改文档
+ * @param 参数
+ * knowledge_id, document_id,
+ * {
+    "name": "string",
+    "is_active": true,
+    "meta": {}
+ }
+ */
+const putDocument: (
+  knowledge_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, document_id, data: any, loading) => {
+  return put(`${prefix}/${knowledge_id}/document/${document_id}`, data, undefined, loading)
+}
+
+/**
+ * 删除文档
+ * @param 参数 knowledge_id, document_id,
+ */
+const delDocument: (
+  knowledge_id: string,
+  document_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, document_id, loading) => {
+  return del(`${prefix}/${knowledge_id}/document/${document_id}`, loading)
+}
+
+/**
+ * 批量取消文档任务
+ * @param 参数 knowledge_id, document_id,
+ *{
+  "id_list": [
+    "3fa85f64-5717-4562-b3fc-2c963f66afa6"
+  ],
+  "type": 0
+}
+ */
+
+const putBatchCancelTask: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, data, loading) => {
+  return put(`${prefix}/${knowledge_id}/document/cancel_task/_batch`, data, undefined, loading)
+}
+
+/**
+ * 取消文档任务
+ * @param 参数 knowledge_id, document_id,
+ */
+const putCancelTask: (
+  knowledge_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, document_id, data, loading) => {
+  return put(
+    `${prefix}/${knowledge_id}/document/${document_id}/cancel_task`,
+    data,
+    undefined,
+    loading,
+  )
+}
+
+/**
+ * 下载原文档
+ * @param 参数 knowledge_id
+ */
+const getDownloadSourceFile: (knowledge_id: string, document_id: string) => Promise<Result<any>> = (
+  knowledge_id,
+  document_id,
+) => {
+  return get(`${prefix}/${knowledge_id}/document/${document_id}/download_source_file`)
+}
+
+/**
+ * 导出文档
+ * @param document_name 文档名称
+ * @param knowledge_id    数据集id
+ * @param document_id   文档id
+ * @param loading       加载器
+ * @returns
+ */
+const exportDocument: (
+  document_name: string,
+  knowledge_id: string,
+  document_id: string,
+  loading?: Ref<boolean>,
+) => Promise<any> = (document_name, knowledge_id, document_id, loading) => {
+  return exportExcel(
+    document_name + '.xlsx',
+    `${prefix}/${knowledge_id}/document/${document_id}/export`,
+    {},
+    loading,
+  )
+}
+/**
+ * 导出文档
+ * @param document_name 文档名称
+ * @param knowledge_id    数据集id
+ * @param document_id   文档id
+ * @param loading       加载器
+ * @returns
+ */
+const exportDocumentZip: (
+  document_name: string,
+  knowledge_id: string,
+  document_id: string,
+  loading?: Ref<boolean>,
+) => Promise<any> = (document_name, knowledge_id, document_id, loading) => {
+  return exportFile(
+    document_name + '.zip',
+    `${prefix}/${knowledge_id}/document/${document_id}/export_zip`,
+    {},
+    loading,
+  )
+}
+
+/**
+ * 刷新文档向量库
+ * @param 参数
+ * knowledge_id, document_id,
+ * {
+  "state_list": [
+    "string"
+  ]
+}
+ */
+const putDocumentRefresh: (
+  knowledge_id: string,
+  document_id: string,
+  state_list: Array<string>,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, document_id, state_list, loading) => {
+  return put(
+    `${prefix}/${knowledge_id}/document/${document_id}/refresh`,
+    { state_list },
+    undefined,
+    loading,
+  )
+}
+
+/**
+ * 同步web站点类型
+ * @param 参数
+ * knowledge_id, document_id,
+ */
+const putDocumentSync: (
+  knowledge_id: string,
+  document_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, document_id, loading) => {
+  return put(
+    `${prefix}/${knowledge_id}/document/${document_id}/sync`,
+    undefined,
+    undefined,
+    loading,
+  )
+}
+
+/**
+ * 创建批量文档
+ * @param 参数
+{
+  "name": "string",
+  "paragraphs": [
+    {
+      "content": "string",
+      "title": "string",
+      "problem_list": [
+        {
+          "id": "string",
+          "content": "string"
+        }
+      ],
+      "is_active": true
+    }
+  ],
+  "source_file_id": string
+}
+ */
+const putMulDocument: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, data, loading) => {
+  return put(`${prefix}/${knowledge_id}/document/batch_create`, data, {}, loading, 1000 * 60 * 5)
+}
+
+/**
+ * 批量删除文档
+ * @param 参数 knowledge_id,
+ * {
+  "id_list": [String]
+}
+ */
+const delMulDocument: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, data, loading) => {
+  return del(
+    `${prefix}/${knowledge_id}/document/bach_delete`,
+    undefined,
+    { id_list: data },
+    loading,
+  )
+}
+
+/**
+ * 批量关联
+ * @param 参数 knowledge_id,
+{
+  "document_id_list": [
+    "string"
+  ],
+  "model_id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+  "prompt": "string",
+  "state_list": [
+    "string"
+  ]
+}
+ */
+const putBatchGenerateRelated: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, data, loading) => {
+  return put(`${prefix}/${knowledge_id}/document/batch_generate_related`, data, undefined, loading)
+}
+
+/**
+ * 批量修改命中方式
+ * @param knowledge_id 知识库id
+ * @param data
+ * {id_list:[],hit_handling_method:'directly_return|optimization',directly_return_similarity}
+ * @param loading
+ * @returns
+ */
+const putBatchEditHitHandling: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, data, loading) => {
+  return put(`${prefix}/${knowledge_id}/document/batch_hit_handling`, data, undefined, loading)
+}
+
+/**
+ * 批量刷新文档向量库
+ * @param knowledge_id 知识库id
+ * @param data
+{
+  "id_list": [
+    "string"
+  ],
+  "state_list": [
+    "string"
+  ]
+}
+ * @param loading
+ * @returns
+ */
+const putBatchRefresh: (
+  knowledge_id: string,
+  data: any,
+  stateList: Array<string>,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, data, stateList, loading) => {
+  return put(
+    `${prefix}/${knowledge_id}/document/batch_refresh`,
+    { id_list: data, state_list: stateList },
+    undefined,
+    loading,
+  )
+}
+
+/**
+ * 批量同步文档
+ * @param 参数 knowledge_id,
+ */
+const putMulSyncDocument: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, data, loading) => {
+  return put(`${prefix}/${knowledge_id}/document/batch_sync`, { id_list: data }, undefined, loading)
+}
+
+/**
+ * 批量迁移文档
+ * @param 参数 knowledge_id,target_knowledge_id,
+
+ */
+const putMigrateMulDocument: (
+  knowledge_id: string,
+  target_knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, target_knowledge_id, data, loading) => {
+  return put(
+    `${prefix}/${knowledge_id}/document/migrate/${target_knowledge_id}`,
+    data,
+    undefined,
+    loading,
+  )
+}
+
+/**
+ * 导入QA文档
+ * @param 参数
+ * file
+ }
+ */
+const postQADocument: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, data, loading) => {
+  return post(`${prefix}/${knowledge_id}/document/qa`, data, undefined, loading)
+}
+
+/**
+ * 分段预览（上传文档）
+ * @param 参数  file:file,limit:number,patterns:array,with_filter:boolean
+ */
+const postSplitDocument: (data: any, id:string) => Promise<Result<any>> = (data, id) => {
+  return post(`${prefix}/${id}/document/split`, data, undefined, undefined, 1000 * 60 * 60)
+}
+
+/**
+ * 分段标识列表
+ * @param loading 加载器
+ * @returns 分段标识列表
+ */
+const listSplitPattern: (
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<KeyValue<string, string>>>> = (loading) => {
+  return get(`${prefix}/document/split_pattern`, {}, loading)
+}
+
+/**
+ * 导入表格
+ * @param 参数
+ * file
+ */
+const postTableDocument: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, data, loading) => {
+  return post(`${prefix}/${knowledge_id}/document/table`, data, undefined, loading)
+}
+
+/**
+ * 获得QA模版
+ * @param 参数 fileName,type,
+ */
+const exportQATemplate: (fileName: string, type: string, loading?: Ref<boolean>) => void = (
+  fileName,
+  type,
+  loading,
+) => {
+  return exportExcel(fileName, `${prefix}/document/template/export`, { type }, loading)
+}
+
+/**
+ * 获得table模版
+ * @param 参数 fileName,type,
+ */
+const exportTableTemplate: (fileName: string, type: string, loading?: Ref<boolean>) => void = (
+  fileName,
+  type,
+  loading,
+) => {
+  return exportExcel(fileName, `${prefix}/document/table_template/export`, { type }, loading)
+}
+
+/**
+ * 创建Web站点文档
+ * @param 参数
+ * {
+ "source_url_list": [
+ "string"
+ ],
+ "selector": "string"
+ }
+ }
+ */
+const postWebDocument: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, data, loading) => {
+  return post(`${prefix}/${knowledge_id}/document/web`, data, undefined, loading)
+}
+
+const getAllDocument: (knowledge_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  knowledge_id,
+  loading,
+) => {
+  return get(`${prefix}/${knowledge_id}/document`, undefined, loading)
+}
+
+const putLarkDocumentSync: (
+  knowledge_id: string,
+  document_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, document_id, loading) => {
+  return put(
+    `${prefix}/lark/${knowledge_id}/document/${document_id}/sync`,
+    undefined,
+    undefined,
+    loading,
+  )
+}
+
+const delMulLarkSyncDocument: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, data, loading) => {
+  return put(`${prefix}/lark/${knowledge_id}/_batch`, { id_list: data }, undefined, loading)
+}
+
+export default {
+  getDocument,
+  getDocumentDetail,
+  putDocument,
+  delDocument,
+  putBatchCancelTask,
+  putCancelTask,
+  getDownloadSourceFile,
+  exportDocument,
+  exportDocumentZip,
+  putDocumentRefresh,
+  putDocumentSync,
+  putMulDocument,
+  delMulDocument,
+  putBatchGenerateRelated,
+  putBatchEditHitHandling,
+  putBatchRefresh,
+  putMulSyncDocument,
+  putMigrateMulDocument,
+  postQADocument,
+  postSplitDocument,
+  listSplitPattern,
+  postTableDocument,
+  exportQATemplate,
+  exportTableTemplate,
+  postWebDocument,
+
+  getAllDocument,
+  putLarkDocumentSync,
+  delMulLarkSyncDocument,
+}

ui/src/api/resource-management/knowledge.ts

@@ -0,0 +1,305 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put, exportFile, exportExcel } from '@/request/index'
+import { type Ref } from 'vue'
+import type { pageRequest } from '@/api/type/common'
+import type { knowledgeData } from '@/api/type/knowledge'
+
+import useStore from '@/stores'
+const prefix = '/system/resource'
+
+/**
+ * 获得知识库文件夹列表
+ * @params 参数
+ * {folder_id: string,
+ * name: string,
+ * user_id: string，
+ * desc: string,}
+ */
+const getKnowledgeByFolder: (data?: any, loading?: Ref<boolean>) => Promise<Result<Array<any>>> = (
+  data,
+  loading,
+) => {
+  return get(`${prefix}/knowledge`, data, loading)
+}
+
+/**
+ * 知识库列表（无分页）
+ * @param 参数
+ * param  {
+ "folder_id": "string",
+ "name": "string",
+ "tool_type": "string",
+ desc: string,
+ }
+ */
+const getKnowledgeList: (param?: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  param,
+  loading,
+) => {
+  return get(`${prefix}/knowledge`, param, loading)
+}
+
+/**
+ * 知识库分页列表
+ * @param 参数
+ * param  {
+ "folder_id": "string",
+ "name": "string",
+ "tool_type": "string",
+ desc: string,
+ }
+ */
+const getKnowledgeListPage: (
+  page: pageRequest,
+  param?: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (page, param, loading) => {
+  return get(`${prefix}/knowledge/${page.current_page}/${page.page_size}`, param, loading)
+}
+
+/**
+ * 知识库详情
+ * @param 参数 knowledge_id
+ */
+const getKnowledgeDetail: (knowledge_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  knowledge_id,
+  loading,
+) => {
+  return get(`${prefix}/knowledge/${knowledge_id}`, undefined, loading)
+}
+
+/**
+ * 修改知识库信息
+ * @param 参数
+ * knowledge_id
+ * {
+ "name": "string",
+ "desc": true
+ }
+ */
+const putKnowledge: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, data, loading) => {
+  return put(`${prefix}/knowledge/${knowledge_id}`, data, undefined, loading)
+}
+
+/**
+ * 删除知识库
+ * @param 参数 knowledge_id
+ */
+const delKnowledge: (knowledge_id: String, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
+  knowledge_id,
+  loading,
+) => {
+  return del(`${prefix}/${knowledge_id}`, undefined, {}, loading)
+}
+
+/**
+ * 向量化知识库
+ * @param 参数 knowledge_id
+ */
+const putReEmbeddingKnowledge: (
+  knowledge_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, loading) => {
+  return put(`${prefix}/knowledge/${knowledge_id}/embedding`, undefined, undefined, loading)
+}
+
+/**
+ * 导出知识库
+ * @param knowledge_name 知识库名称
+ * @param knowledge_id   知识库id
+ * @returns
+ */
+const exportKnowledge: (
+  knowledge_name: string,
+  knowledge_id: string,
+  loading?: Ref<boolean>,
+) => Promise<any> = (knowledge_name, knowledge_id, loading) => {
+  return exportExcel(
+    knowledge_name + '.xlsx',
+    `${prefix}/${knowledge_id}/knowledge/${knowledge_id}/export`,
+    undefined,
+    loading,
+  )
+}
+/**
+ *导出Zip知识库
+ * @param knowledge_name 知识库名称
+ * @param knowledge_id   知识库id
+ * @param loading      加载器
+ * @returns
+ */
+const exportZipKnowledge: (
+  knowledge_name: string,
+  knowledge_id: string,
+  loading?: Ref<boolean>,
+) => Promise<any> = (knowledge_name, knowledge_id, loading) => {
+  return exportFile(
+    knowledge_name + '.zip',
+    `${prefix}/${knowledge_id}/knowledge/${knowledge_id}/export_zip`,
+    undefined,
+    loading,
+  )
+}
+
+/**
+ * 生成关联问题
+ * @param knowledge_id 知识库id
+ * @param data
+ * @param loading
+ * @returns
+ */
+const putGenerateRelated: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (knowledge_id, data, loading) => {
+  return put(`${prefix}/${knowledge_id}/generate_related`, data, null, loading)
+}
+
+/**
+ * 命中测试列表
+ * @param knowledge_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getKnowledgeHitTest: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (knowledge_id, data, loading) => {
+  return get(`${prefix}/${knowledge_id}/hit_test`, data, loading)
+}
+
+/**
+ * 同步知识库
+ * @param 参数 knowledge_id
+ * @query 参数 sync_type // 同步类型->replace:替换同步,complete:完整同步
+ */
+const putSyncWebKnowledge: (
+  knowledge_id: string,
+  sync_type: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, sync_type, loading) => {
+  return put(`${prefix}/knowledge/${knowledge_id}/sync`, undefined, { sync_type }, loading)
+}
+
+/**
+ * 创建知识库
+ * @param 参数
+ * {
+ "name": "string",
+ "folder_id": "string",
+ "desc": "string",
+ "embedding": "string"
+ }
+ */
+const postKnowledge: (data: knowledgeData, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading,
+) => {
+  return post(`${prefix}/knowledge/base`, data, undefined, loading, 1000 * 60 * 5)
+}
+
+/**
+ * 获取当前用户可使用的向量化模型列表
+ * @param application_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getKnowledgeEmdeddingModel: (
+  knowledge_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (knowledge_id, loading) => {
+  return get(`${prefix}/${knowledge_id}/emdedding_model`, loading)
+}
+
+/**
+ * 获取当前用户可使用的模型列表
+ * @param application_id
+ * @param loading
+ * @query  { query_text: string, top_number: number, similarity: number }
+ * @returns
+ */
+const getKnowledgeModel: (loading?: Ref<boolean>) => Promise<Result<Array<any>>> = (loading) => {
+  return get(`${prefix}/knowledge/model`, loading)
+}
+
+/**
+ * 创建Web知识库
+ * @param 参数
+ * {
+ "name": "string",
+ "folder_id": "string",
+ "desc": "string",
+ "embedding": "string",
+ "source_url": "string",
+ "selector": "string"
+ }
+ */
+const postWebKnowledge: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading,
+) => {
+  return post(`${prefix}/knowledge/web`, data, undefined, loading)
+}
+
+/**
+ * 获取飞书文档列表
+ * @param knowledge_id
+ * @param folder_token
+ * @param loading
+ * @returns
+ */
+const getLarkDocumentList: (
+  knowledge_id: string,
+  folder_token: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (knowledge_id, folder_token, data, loading) => {
+  return post(`${prefix}/lark/${knowledge_id}/${folder_token}/doc_list`, data, null, loading)
+}
+
+const importLarkDocument: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (knowledge_id, data, loading) => {
+  return post(`${prefix}/lark/${knowledge_id}/import`, data, null, loading)
+}
+
+const postLarkKnowledge: (data: any, loading?: Ref<boolean>) => Promise<Result<Array<any>>> = (
+  data,
+  loading,
+) => {
+  return post(`${prefix}/knowledge/lark/save`, data, null, loading)
+}
+
+export default {
+  getKnowledgeByFolder,
+  getKnowledgeList,
+  getKnowledgeListPage,
+  getKnowledgeDetail,
+  putKnowledge,
+  delKnowledge,
+  putReEmbeddingKnowledge,
+  exportKnowledge,
+  exportZipKnowledge,
+  putGenerateRelated,
+  getKnowledgeHitTest,
+  putSyncWebKnowledge,
+  postKnowledge,
+  getKnowledgeModel,
+  postWebKnowledge,
+
+  getLarkDocumentList,
+  importLarkDocument,
+  postLarkKnowledge,
+} as {
+  [key: string]: any
+}

ui/src/api/resource-management/model.ts

@@ -0,0 +1,133 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import { type Ref } from 'vue'
+import type {
+  ListModelRequest,
+  Model,
+  CreateModelRequest,
+  EditModelRequest,
+} from '@/api/type/model'
+import type { FormField } from '@/components/dynamics-form/type'
+
+const prefix = '/system/resource'
+const workspace_id = localStorage.getItem('workspace_id') || 'default'
+
+/**
+ * 获得模型列表
+ * @params 参数 name, model_type, model_name
+ */
+const getModel: (
+  request?: ListModelRequest,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<Model>>> = (data, loading) => {
+  return get(`${prefix}/model`, data, loading)
+}
+
+/**
+ * 获取模型参数表单
+ * @param model_id 模型id
+ * @param loading
+ * @returns
+ */
+const getModelParamsForm: (
+  model_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<FormField>>> = (model_id, loading) => {
+  return get(`${prefix}/model/${model_id}/model_params_form`, {}, loading)
+}
+
+/**
+ * 创建模型
+ * @param request 请求对象
+ * @param loading 加载器
+ * @returns
+ */
+const createModel: (
+  request: CreateModelRequest,
+  loading?: Ref<boolean>,
+) => Promise<Result<Model>> = (request, loading) => {
+  return post(`${prefix}/model`, request, {}, loading)
+}
+
+/**
+ * 修改模型
+ * @param request 請求對象
+ * @param loading 加載器
+ * @returns
+ */
+const updateModel: (
+  model_id: string,
+  request: EditModelRequest,
+  loading?: Ref<boolean>,
+) => Promise<Result<Model>> = (model_id, request, loading) => {
+  return put(`${prefix}/model/${model_id}`, request, {}, loading)
+}
+
+/**
+ * 修改模型参数配置
+ * @param request 請求對象
+ * @param loading 加載器
+ * @returns
+ */
+const updateModelParamsForm: (
+  model_id: string,
+  request: any[],
+  loading?: Ref<boolean>,
+) => Promise<Result<Model>> = (model_id, request, loading) => {
+  return put(`${prefix}/model/${model_id}/model_params_form`, request, {}, loading)
+}
+
+/**
+ * 获取模型详情根据模型id 包括认证信息
+ * @param model_id 模型id
+ * @param loading  加载器
+ * @returns
+ */
+const getModelById: (model_id: string, loading?: Ref<boolean>) => Promise<Result<Model>> = (
+  model_id,
+  loading,
+) => {
+  return get(`${prefix}/model/${model_id}`, {}, loading)
+}
+/**
+ * 获取模型信息不包括认证信息根据模型id
+ * @param model_id 模型id
+ * @param loading  加载器
+ * @returns
+ */
+const getModelMetaById: (model_id: string, loading?: Ref<boolean>) => Promise<Result<Model>> = (
+  model_id,
+  loading,
+) => {
+  return get(`${prefix}/model/${model_id}/meta`, {}, loading)
+}
+/**
+ * 暂停下载
+ * @param model_id 模型id
+ * @param loading 加载器
+ * @returns
+ */
+const pauseDownload: (model_id: string, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
+  model_id,
+  loading,
+) => {
+  return put(`${prefix}/model/${model_id}/pause_download`, undefined, {}, loading)
+}
+const deleteModel: (model_id: string, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
+  model_id,
+  loading,
+) => {
+  return del(`${prefix}/model/${model_id}`, undefined, {}, loading)
+}
+
+export default {
+  getModel,
+  createModel,
+  updateModel,
+  deleteModel,
+  getModelById,
+  getModelMetaById,
+  pauseDownload,
+  getModelParamsForm,
+  updateModelParamsForm,
+}

ui/src/api/resource-management/paragraph.ts

@@ -0,0 +1,268 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { pageRequest } from '@/api/type/common'
+import type { Ref } from 'vue'
+const prefix = '/system/resource/knowledge'
+
+/**
+ * 创建段落
+ * @param 参数
+ * knowledge_id, document_id
+ * {
+      "content": "string",
+      "title": "string",
+      "is_active": true,
+      "problem_list": [
+        {
+          "content": "string"
+        }
+      ]
+    }
+ */
+const postParagraph: (
+  knowledge_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, document_id, data, loading) => {
+  return post(
+    `${prefix}/${knowledge_id}/document/${document_id}/paragraph`,
+    data,
+    undefined,
+    loading,
+  )
+}
+
+/**
+ * 段落列表
+ * @param 参数 knowledge_id document_id
+ * param {
+          "title": "string",
+          "content": "string",
+        }
+ */
+const getParagraph: (
+  knowledge_id: string,
+  document_id: string,
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, document_id, page, param, loading) => {
+  return get(
+    `${prefix}/${knowledge_id}/document/${document_id}/paragraph/${page.current_page}/${page.page_size}`,
+    param,
+    loading,
+  )
+}
+
+/**
+ * 修改段落
+ * @param 参数
+ * knowledge_id, document_id, paragraph_id
+ * {
+    "content": "string",
+    "title": "string",
+    "is_active": true,
+      "problem_list": [
+        {
+          "content": "string"
+        }
+      ]
+  }
+ */
+const putParagraph: (
+  knowledge_id: string,
+  document_id: string,
+  paragraph_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, document_id, paragraph_id, data, loading) => {
+  return put(
+    `${prefix}/${knowledge_id}/document/${document_id}/paragraph/${paragraph_id}`,
+    data,
+    undefined,
+    loading,
+  )
+}
+
+/**
+ * 删除段落
+ * @param 参数 knowledge_id, document_id, paragraph_id
+ */
+const delParagraph: (
+  knowledge_id: string,
+  document_id: string,
+  paragraph_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, document_id, paragraph_id, loading) => {
+  return del(
+    `${prefix}/${knowledge_id}/document/${document_id}/paragraph/${paragraph_id}`,
+    undefined,
+    {},
+    loading,
+  )
+}
+
+/**
+ * 某段落问题列表
+ * @param 参数 knowledge_id，document_id，paragraph_id
+ */
+const getParagraphProblem: (
+  knowledge_id: string,
+  document_id: string,
+  paragraph_id: string,
+) => Promise<Result<any>> = (knowledge_id, document_id, paragraph_id: string) => {
+  return get(`${prefix}/${knowledge_id}/document/${document_id}/paragraph/${paragraph_id}/problem`)
+}
+
+/**
+ * 给某段落创建问题
+ * @param 参数
+ * knowledge_id, document_id, paragraph_id
+ * {
+      content": "string"
+    }
+ */
+const postParagraphProblem: (
+  knowledge_id: string,
+  document_id: string,
+  paragraph_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, document_id, paragraph_id, data: any, loading) => {
+  return post(
+    `${prefix}/${knowledge_id}/document/${document_id}/paragraph/${paragraph_id}/problem`,
+    data,
+    {},
+    loading,
+  )
+}
+
+/**
+ * 添加某段落关联问题
+ * @param knowledge_id 数据集id
+ * @param document_id 文档id
+ * @param loading 加载器
+ * @query data {
+ *              paragraph_id 段落id  problem_id 问题id
+ *             }
+ */
+const putAssociationProblem: (
+  knowledge_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, document_id, data, loading) => {
+  return put(
+    `${prefix}/${knowledge_id}/document/${document_id}/paragraph/association`,
+    {},
+    data,
+    loading,
+  )
+}
+
+/**
+ * 批量删除段落
+ * @param 参数 knowledge_id, document_id
+ */
+const putMulParagraph: (
+  knowledge_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, document_id, data, loading) => {
+  return put(
+    `${prefix}/${knowledge_id}/document/${document_id}/paragraph/batch_delete`,
+    { id_list: data },
+    undefined,
+    loading,
+  )
+}
+
+/**
+ * 批量关联问题
+ * @param 参数 knowledge_id, document_id
+ * {
+      "paragraph_id_list": [
+        "3fa85f64-5717-4562-b3fc-2c963f66afa6"
+      ],
+      "model_id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+      "prompt": "string",
+      "document_id": "3fa85f64-5717-4562-b3fc-2c963f66afa6"
+    }
+ */
+const putBatchGenerateRelated: (
+  knowledge_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, document_id, data, loading) => {
+  return put(
+    `${prefix}/${knowledge_id}/document/${document_id}/paragraph/batch_generate_related`,
+    data,
+    undefined,
+    loading,
+  )
+}
+
+/**
+ * 批量迁移段落
+ * @param 参数 knowledge_id,target_knowledge_id,
+ */
+const putMigrateMulParagraph: (
+  knowledge_id: string,
+  document_id: string,
+  target_knowledge_id: string,
+  target_document_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (
+  knowledge_id,
+  document_id,
+  target_knowledge_id,
+  target_document_id,
+  data,
+  loading,
+) => {
+  return put(
+    `${prefix}/${knowledge_id}/document/${document_id}/paragraph/migrate/knowledge/${target_knowledge_id}/document/${target_document_id}`,
+    data,
+    undefined,
+    loading,
+  )
+}
+
+/**
+ * 解除某段落关联问题
+ * @param 参数 knowledge_id, document_id,
+ * @query data {
+ *            paragraph_id 段落id  problem_id 问题id
+ *         }
+ */
+const putDisassociationProblem: (
+  knowledge_id: string,
+  document_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, document_id, data, loading) => {
+  return put(
+    `${prefix}/${knowledge_id}/document/${document_id}/paragraph/unassociation`,
+    {},
+    data,
+    loading,
+  )
+}
+
+export default {
+  postParagraph,
+  getParagraph,
+  putParagraph,
+  delParagraph,
+  getParagraphProblem,
+  postParagraphProblem,
+  putAssociationProblem,
+  putMulParagraph,
+  putBatchGenerateRelated,
+  putMigrateMulParagraph,
+  putDisassociationProblem,
+}

ui/src/api/resource-management/problem.ts

@@ -0,0 +1,121 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put } from '@/request/index'
+import type { Ref } from 'vue'
+import type { pageRequest } from '@/api/type/common'
+
+const prefix = '/system/resource/knowledge'
+
+/**
+ * 创建问题
+ * @param 参数 knowledge_id
+ * data: array[string]
+ */
+const postProblems: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, data, loading) => {
+  return post(`${prefix}/${knowledge_id}/problem`, data, undefined, loading)
+}
+
+/**
+ * 问题分页列表
+ * @param 参数  knowledge_id,
+ * query {
+     "content": "string",
+   }
+ */
+
+const getProblems: (
+  knowledge_id: string,
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, page, param, loading) => {
+  return get(
+    `${prefix}/${knowledge_id}/problem/${page.current_page}/${page.page_size}`,
+    param,
+    loading,
+  )
+}
+
+/**
+ * 修改问题
+ * @param 参数
+ * knowledge_id, problem_id,
+ * {
+ "content": "string",
+ }
+ */
+const putProblems: (
+  knowledge_id: string,
+  problem_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, problem_id, data: any, loading) => {
+  return put(`${prefix}/${knowledge_id}/problem/${problem_id}`, data, undefined, loading)
+}
+
+/**
+ * 删除问题
+ * @param 参数 knowledge_id, problem_id,
+ */
+const delProblems: (
+  knowledge_id: string,
+  problem_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, problem_id, loading) => {
+  return del(`${prefix}/${knowledge_id}/problem/${problem_id}`, loading)
+}
+
+/**
+ * 问题详情
+ * @param 参数
+ * knowledge_id, problem_id,
+ */
+const getDetailProblems: (
+  knowledge_id: string,
+  problem_id: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (knowledge_id, problem_id, loading) => {
+  return get(`${prefix}/${knowledge_id}/problem/${problem_id}/paragraph`, undefined, loading)
+}
+
+/**
+ * 批量关联段落
+ * @param 参数 knowledge_id,
+ * {
+      "problem_id_list": "Array",
+      "paragraph_list": "Array",
+    }
+ */
+const putMulAssociationProblem: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, data, loading) => {
+  return put(`${prefix}/${knowledge_id}/problem/batch_association`, data, undefined, loading)
+}
+
+/**
+ * 批量删除问题
+ * @param 参数 knowledge_id,
+ * data: array[string]
+ */
+const putMulProblem: (
+  knowledge_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<boolean>> = (knowledge_id, data, loading) => {
+  return put(`${prefix}/${knowledge_id}/problem/batch_delete`, data, undefined, loading)
+}
+
+export default {
+  postProblems,
+  getProblems,
+  putProblems,
+  delProblems,
+  getDetailProblems,
+  putMulAssociationProblem,
+  putMulProblem,
+}

ui/src/api/resource-management/provider.ts

@@ -0,0 +1,86 @@
+import {Result} from '@/request/Result'
+import {get, post} from '@/request/index'
+import type {Ref} from 'vue'
+import type {Provider, BaseModel} from '@/api/type/model'
+import type {FormField} from '@/components/dynamics-form/type'
+import type {KeyValue} from '../type/common'
+
+const prefix_provider = '/provider'
+/**
+ * 获得供应商列表
+ */
+const getProvider: (loading?: Ref<boolean>) => Promise<Result<Array<Provider>>> = (loading) => {
+  return get(`${prefix_provider}`, {}, loading)
+}
+
+/**
+ * 获得供应商列表
+ */
+const getProviderByModelType: (
+  model_type: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<Provider>>> = (model_type, loading) => {
+  return get(`${prefix_provider}`, {model_type}, loading)
+}
+
+/**
+ * 获取模型创建表单
+ * @param provider
+ * @param model_type
+ * @param model_name
+ * @param loading
+ * @returns
+ */
+const getModelCreateForm: (
+  provider: string,
+  model_type: string,
+  model_name: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<FormField>>> = (provider, model_type, model_name, loading) => {
+  return get(`${prefix_provider}/model_form`, {provider, model_type, model_name}, loading)
+}
+
+/**
+ * 获取模型类型列表
+ * @param provider 供应商
+ * @param loading  加载器
+ * @returns 模型类型列表
+ */
+const listModelType: (
+  provider: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<KeyValue<string, string>>>> = (provider, loading?: Ref<boolean>) => {
+  return get(`${prefix_provider}/model_type_list`, {provider}, loading)
+}
+
+/**
+ * 获取基础模型列表
+ * @param provider
+ * @param model_type
+ * @param loading
+ * @returns
+ */
+const listBaseModel: (
+  provider: string,
+  model_type: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<BaseModel>>> = (provider, model_type, loading) => {
+  return get(`${prefix_provider}/model_list`, {provider, model_type}, loading)
+}
+
+const listBaseModelParamsForm: (
+  provider: string,
+  model_type: string,
+  model_name: string,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<BaseModel>>> = (provider, model_type, model_name, loading) => {
+  return get(`${prefix_provider}/model_params_form`, {provider, model_type, model_name}, loading)
+}
+export default {
+  getProvider,
+  getModelCreateForm,
+  getProviderByModelType,
+  listModelType,
+  listBaseModel,
+  listBaseModelParamsForm,
+}

ui/src/api/resource-management/tool.ts

@@ -0,0 +1,137 @@
+import { Result } from '@/request/Result'
+import { get, post, del, put, exportFile } from '@/request/index'
+import { type Ref } from 'vue'
+import type { pageRequest } from '@/api/type/common'
+import type { toolData } from '@/api/type/tool'
+
+const prefix = '/system/resource'
+
+/**
+ * 获得工具文件夹列表
+ * @params 参数 {folder_id: string}
+ */
+const getToolByFolder: (data?: any, loading?: Ref<boolean>) => Promise<Result<Array<any>>> = (
+  data,
+  loading,
+) => {
+  return get(`${prefix}/tool`, data, loading)
+}
+
+/**
+ * 工具列表
+ * @param 参数
+ * param  {
+ "folder_id": "string",
+ "name": "string",
+ "tool_type": "string",
+ }
+ */
+const getToolList: (
+  page: pageRequest,
+  param?: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (page, param, loading) => {
+  return get(`${prefix}/tool/${page.current_page}/${page.page_size}`, param, loading)
+}
+
+/**
+ * 创建工具
+ * @param 参数
+ */
+const postTool: (data: toolData, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading,
+) => {
+  return post(`${prefix}/tool`, data, undefined, loading)
+}
+
+/**
+ * 修改工具
+ * @param 参数
+
+ */
+const putTool: (tool_id: string, data: toolData, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  tool_id,
+  data,
+  loading,
+) => {
+  return put(`${prefix}/tool/${tool_id}`, data, undefined, loading)
+}
+
+/**
+ * 获取工具详情
+ * @param tool_id 工具id
+ * @param loading 加载器
+ * @returns 函数详情
+ */
+const getToolById: (tool_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  tool_id,
+  loading,
+) => {
+  return get(`${prefix}/tool/${tool_id}`, undefined, loading)
+}
+
+/**
+ * 删除工具
+ * @param 参数 tool_id
+ */
+const delTool: (tool_id: String, loading?: Ref<boolean>) => Promise<Result<boolean>> = (
+  tool_id,
+  loading,
+) => {
+  return del(`${prefix}/${tool_id}`, undefined, {}, loading)
+}
+
+const putToolIcon: (id: string, data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  id,
+  data,
+  loading,
+) => {
+  return put(`${prefix}/${id}/edit_icon`, data, undefined, loading)
+}
+
+const exportTool = (id: string, name: string, loading?: Ref<boolean>) => {
+  return exportFile(name + '.fx', `${prefix}/${id}/export`, undefined, loading)
+}
+
+/**
+ * 调试工具
+ * @param 参数
+
+ */
+const postToolDebug: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data: any,
+  loading,
+) => {
+  return post(`${prefix}/debug`, data, undefined, loading)
+}
+
+const postImportTool: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading,
+) => {
+  return post(`${prefix}/import`, data, undefined, loading)
+}
+
+const postPylint: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  code,
+  loading,
+) => {
+  return post(`${prefix}/tool/pylint`, { code }, {}, loading)
+}
+
+
+
+export default {
+  getToolByFolder,
+  getToolList,
+  putTool,
+  getToolById,
+  postTool,
+  postToolDebug,
+  postImportTool,
+  postPylint,
+  exportTool,
+  putToolIcon,
+  delTool,
+}

ui/src/api/resource-management/workspace.ts

@@ -0,0 +1,78 @@
+import {Result} from '@/request/Result'
+import {get, post, del, put, exportFile, exportExcel} from '@/request/index'
+import {type Ref} from 'vue'
+import type {pageRequest} from '@/api/type/common'
+import type {knowledgeData} from '@/api/type/knowledge'
+
+import useStore from '@/stores'
+
+const prefix = '/system/resource'
+const prefix_workspace: any = {_value: 'workspace/'}
+Object.defineProperty(prefix_workspace, 'value', {
+  get: function () {
+    const {user} = useStore()
+    return this._value + user.getWorkspaceId()
+  },
+})
+
+const getSharedWorkspaceKnowledge: (loading?: Ref<boolean>) => Promise<Result<Array<any>>> = (
+  loading,
+) => {
+  return get(`${prefix}/${prefix_workspace.value}/knowledge`, {}, loading)
+}
+
+const getSharedWorkspaceKnowledgePage: (
+  page: pageRequest,
+  param: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (page, param, loading) => {
+  return get(
+    `${prefix}/${prefix_workspace.value}/knowledge/${page.current_page}/${page.page_size}`,
+    param,
+    loading,
+  )
+}
+
+const getSharedWorkspaceModel: (loading?: Ref<boolean>) => Promise<Result<Array<any>>> = (
+  loading,
+) => {
+  return get(`${prefix}/${prefix_workspace.value}/model`, {}, loading)
+}
+
+const getCESharedWorkspaceModel: (loading?: Ref<boolean>) => Promise<Result<Array<any>>> = (
+  loading,
+) => {
+  return get(`/${prefix_workspace.value}/model`, {}, loading)
+
+}
+
+const getSharedWorkspaceModelPage: (
+  param: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (param: any, loading) => {
+  console.log(`${prefix}/${prefix_workspace.value}/model`)
+  return get(`${prefix}/${prefix_workspace.value}/model`, param, loading)
+}
+
+const getSharedWorkspaceTool: (loading?: Ref<boolean>) => Promise<Result<Array<any>>> = (
+  loading,
+) => {
+  return get(`${prefix}/${prefix_workspace.value}/tool`, {}, loading)
+}
+
+const getSharedWorkspaceToolPage: (
+  param: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (param: any, loading) => {
+  return get(`${prefix}/${prefix_workspace.value}/tool`, param, loading)
+}
+
+export default {
+  getSharedWorkspaceKnowledge,
+  getSharedWorkspaceKnowledgePage,
+  getSharedWorkspaceModel,
+  getSharedWorkspaceModelPage,
+  getSharedWorkspaceTool,
+  getSharedWorkspaceToolPage,
+  getCESharedWorkspaceModel
+}

ui/src/components/app-icon/icons/knowledge.ts

@@ -22,6 +22,54 @@ export default {
     },
   },
 
+  'app-filter_outlined': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M10.6666 7.62086V14.3335C10.6666 14.5176 10.5174 14.6668 10.3333 14.6668H9.66665C9.48255 14.6668 9.33331 14.5176 9.33331 14.3335V7.3335C9.33331 7.23552 9.35445 7.14249 9.3924 7.0587C9.44305 6.93295 9.53373 6.8222 9.65896 6.74744L13.3333 4.55411V2.66683H2.66665V4.57737L6.23001 6.70758C6.48485 6.80127 6.66665 7.04615 6.66665 7.3335V12.0002C6.66665 12.1843 6.51741 12.3335 6.33331 12.3335H5.66665C5.48255 12.3335 5.33331 12.1843 5.33331 12.0002V7.64361L1.64919 5.44121C1.5665 5.39178 1.49892 5.32662 1.44803 5.2518C1.37775 5.19069 1.33331 5.10062 1.33331 5.00016V2.00016C1.33331 1.63197 1.63179 1.3335 1.99998 1.3335H14C14.1841 1.3335 14.3507 1.40812 14.4714 1.52876C14.592 1.6494 14.6666 1.81607 14.6666 2.00016V4.79556C14.6718 4.84238 14.6717 4.88936 14.6666 4.93565V5.00016C14.6666 5.11244 14.6111 5.21175 14.5261 5.27215C14.48 5.32873 14.4234 5.37834 14.3572 5.41788L10.6666 7.62086Z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
+
+  'app-icon-blue': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 16 16',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M12.5827 4.66669C12.2867 5.81679 11.2426 6.66661 10 6.66661C8.75748 6.66661 7.71341 5.81679 7.41739 4.66669H1.76069C1.6121 4.66669 1.55822 4.65122 1.5039 4.62217C1.44958 4.59312 1.40695 4.55049 1.3779 4.49617C1.34884 4.44185 1.33337 4.38797 1.33337 4.23939V3.76071C1.33337 3.61213 1.34884 3.55825 1.3779 3.50393C1.40695 3.44961 1.44958 3.40698 1.5039 3.37793C1.55822 3.34888 1.6121 3.33341 1.76069 3.33341H7.41739C7.71341 2.18331 8.75748 1.3335 10 1.3335C11.2426 1.3335 12.2867 2.18331 12.5827 3.33341H14.2394C14.388 3.33341 14.4419 3.34888 14.4962 3.37793C14.5505 3.40698 14.5931 3.44961 14.6222 3.50393C14.6512 3.55825 14.6667 3.61213 14.6667 3.76071V4.23939C14.6667 4.38797 14.6512 4.44185 14.6222 4.49617C14.5931 4.55049 14.5505 4.59312 14.4962 4.62217C14.4419 4.65122 14.388 4.66669 14.2394 4.66669H12.5827ZM10 5.33333C10.7364 5.33333 11.3334 4.7364 11.3334 4.00005C11.3334 3.2637 10.7364 2.66677 10 2.66677C9.26366 2.66677 8.66671 3.2637 8.66671 4.00005C8.66671 4.7364 9.26366 5.33333 10 5.33333Z',
+              fill: 'currentColor',
+            }),
+            h('path', {
+              d: 'M8.5827 12.6664C8.28667 13.8165 7.2426 14.6663 6.00004 14.6663C4.75748 14.6663 3.71341 13.8165 3.41739 12.6664H1.76069C1.6121 12.6664 1.55822 12.6509 1.5039 12.6218C1.44958 12.5928 1.40695 12.5502 1.3779 12.4958C1.34884 12.4415 1.33337 12.3876 1.33337 12.2391V11.7604C1.33337 11.6118 1.34884 11.5579 1.3779 11.5036C1.40695 11.4493 1.44958 11.4067 1.5039 11.3776C1.55822 11.3485 1.6121 11.3331 1.76069 11.3331H3.41739C3.71341 10.183 4.75748 9.33316 6.00004 9.33316C7.2426 9.33316 8.28667 10.183 8.5827 11.3331H14.2394C14.388 11.3331 14.4419 11.3485 14.4962 11.3776C14.5505 11.4067 14.5931 11.4493 14.6222 11.5036C14.6512 11.5579 14.6667 11.6118 14.6667 11.7604V12.2391C14.6667 12.3876 14.6512 12.4415 14.6222 12.4958C14.5931 12.5502 14.5505 12.5928 14.4962 12.6218C14.4419 12.6509 14.388 12.6664 14.2394 12.6664H8.5827ZM6.00004 13.333C6.73642 13.333 7.33337 12.7361 7.33337 11.9997C7.33337 11.2634 6.73642 10.6664 6.00004 10.6664C5.26366 10.6664 4.66671 11.2634 4.66671 11.9997C4.66671 12.7361 5.26366 13.333 6.00004 13.333Z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
+
   'app-problems': {
     iconReader: () => {
       return h('i', [

ui/src/components/folder-tree/index.vue

@@ -125,12 +125,18 @@ const title = ref('')
 watch(filterText, (val) => {
   treeRef.value!.filter(val)
 })
+let time
 
 function handleMouseEnter(data: Tree) {
+  clearTimeout(time)
   hoverNodeId.value = data.id
 }
 function handleMouseleave() {
-  hoverNodeId.value = ''
+  time = setTimeout(() => {
+    clearTimeout(time)
+    hoverNodeId.value = ''
+    document.body.click()
+  }, 300)
 }
 const filterNode = (value: string, data: Tree) => {
   if (!value) return true

ui/src/components/generate-related-resource-dialog/index.vue

@@ -0,0 +1,204 @@
+<template>
+  <el-dialog
+    :title="$t('views.document.generateQuestion.title')"
+    v-model="dialogVisible"
+    width="650"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <div class="content-height">
+      <el-form
+        ref="FormRef"
+        :model="form"
+        :rules="rules"
+        label-position="top"
+        require-asterisk-position="right"
+      >
+        <div class="update-info flex border-r-4 mb-16 p-8-12">
+          <div class="mt-4">
+            <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+          </div>
+          <div class="ml-12 lighter">
+            <p>{{ $t('views.document.generateQuestion.tip1', { data: '{data}' }) }}</p>
+            <p>
+              {{ $t('views.document.generateQuestion.tip2')+ '<question></question>' +
+              $t('views.document.generateQuestion.tip3') }}
+            </p>
+            <p>{{ $t('views.document.generateQuestion.tip4') }}</p>
+          </div>
+        </div>
+        <el-form-item
+          :label="$t('views.application.form.aiModel.label')"
+          prop="model_id"
+        >
+          <ModelSelect
+            v-model="form.model_id"
+            :placeholder="$t('views.application.form.aiModel.placeholder')"
+            :options="modelOptions"
+            showFooter
+            :model-type="'LLM'"
+          ></ModelSelect>
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.application.form.prompt.label')"
+          prop="prompt"
+        >
+          <el-input
+            v-model="form.prompt"
+            :placeholder="$t('views.application.form.prompt.placeholder')"
+            :rows="7"
+            type="textarea"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="['document', 'knowledge'].includes(apiType)"
+          :label="$t('components.selectParagraph.title')"
+          prop="state"
+        >
+          <el-radio-group v-model="state" class="radio-block">
+            <el-radio value="error" size="large">{{
+              $t('components.selectParagraph.error')
+            }}</el-radio>
+            <el-radio value="all" size="large">{{ $t('components.selectParagraph.all') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submitHandle(FormRef)" :disabled="!model || loading">
+          {{ $t('common.confirm') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import documentApi from '@/api/resource-management/document'
+import paragraphApi from '@/api/resource-management/paragraph'
+import knowledgeApi from '@/api/resource-management/knowledge'
+import useStoreShared from '@/stores/modules-resource-management'
+import useStore from '@/stores'
+import { groupBy } from 'lodash'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+import type { FormInstance } from 'element-plus'
+
+const route = useRoute()
+const {
+  params: { id, documentId }, // id为knowledgeID
+} = route as any
+const { model } = useStoreShared()
+const { prompt, user } = useStore()
+
+const emit = defineEmits(['refresh'])
+
+const loading = ref<boolean>(false)
+
+const dialogVisible = ref<boolean>(false)
+const modelOptions = ref<any>(null)
+const idList = ref<string[]>([])
+const apiType = ref('') // 文档document或段落paragraph
+const state = ref<'all' | 'error'>('error')
+const stateMap = {
+  all: ['0', '1', '2', '3', '4', '5', 'n'],
+  error: ['0', '1', '3', '4', '5', 'n']
+}
+const FormRef = ref()
+const knowledgeId = ref<string>()
+const userId = user.userInfo?.id as string
+const form = ref(prompt.get(userId))
+const rules = reactive({
+  model_id: [
+    {
+      required: true,
+      message: t('views.application.form.aiModel.placeholder'),
+      trigger: 'blur'
+    }
+  ],
+  prompt: [
+    {
+      required: true,
+      message: t('views.application.form.prompt.placeholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = prompt.get(userId)
+    FormRef.value?.clearValidate()
+  }
+})
+
+const open = (ids: string[], type: string, _knowledgeId?: string) => {
+  knowledgeId.value = _knowledgeId
+  getModel()
+  idList.value = ids
+  apiType.value = type
+  dialogVisible.value = true
+}
+
+const submitHandle = async (formEl: FormInstance) => {
+  if (!formEl) {
+    return
+  }
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      // 保存提示词
+      prompt.save(user.userInfo?.id as string, form.value)
+      if (apiType.value === 'paragraph') {
+        const data = {
+          ...form.value,
+          paragraph_id_list: idList.value
+        }
+        paragraphApi.putBatchGenerateRelated(id, documentId, data, loading).then(() => {
+          MsgSuccess(t('views.document.generateQuestion.successMessage'))
+          emit('refresh')
+          dialogVisible.value = false
+        })
+      } else if (apiType.value === 'document') {
+        const data = {
+          ...form.value,
+          document_id_list: idList.value,
+          state_list: stateMap[state.value]
+        }
+        documentApi.putBatchGenerateRelated(id, data, loading).then(() => {
+          MsgSuccess(t('views.document.generateQuestion.successMessage'))
+          emit('refresh')
+          dialogVisible.value = false
+        })
+      } else if (apiType.value === 'knowledge') {
+        const data = {
+          ...form.value,
+          state_list: stateMap[state.value]
+        }
+        knowledgeApi.putGenerateRelated(id ? id : knowledgeId.value, data, loading).then(() => {
+          MsgSuccess(t('views.document.generateQuestion.successMessage'))
+          dialogVisible.value = false
+        })
+      }
+    }
+  })
+}
+
+function getModel() {
+  loading.value = true
+  knowledgeApi
+    .getKnowledgeModel()
+    .then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/layout/layout-template/MainLayout.vue

@@ -25,7 +25,7 @@ import { useRoute } from 'vue-router'
 const route = useRoute()
 
 const isShared = computed(() => {
-  return route.path.endsWith('hared')
+  return route.path.endsWith('hared') || route.name.includes('ResourceManagement')
 })
 const { user } = useStore()
 </script>

ui/src/locales/lang/zh-CN/views/system.ts

@@ -3,6 +3,7 @@ export default {
   subTitle: '系统设置',
   shared: '共享',
   shared_resources: '共享资源',
+  resource_management: '资源管理',
   share_tool: '共享工具',
   share_model: '共享模型',
   share_knowledge: '共享知识库',

ui/src/router/modules/2knowledge-resource-management.ts

@@ -0,0 +1,20 @@
+const ModelRouter = {
+  path: '/knowledge/resource',
+  name: 'knowledgeResourceManagement',
+  meta: { title: 'views.knowledge.title', permission: 'KNOWLEDGE:READ' },
+  hidden: true,
+  redirect: '/knowledge',
+  component: () => import('@/layout/layout-template/SimpleLayout.vue'),
+  children: [
+
+    {
+      path: '/knowledge/resource/document/upload/management',
+      name: 'UploadDocumentResourceManagement',
+      meta: { activeMenu: '/knowledge/resource' },
+      component: () => import('@/views/resource-management/document/UploadDocument.vue'),
+      hidden: true,
+    },
+  ],
+}
+
+export default ModelRouter

ui/src/router/modules/2knowledge-shared-system.ts

@@ -10,7 +10,7 @@ const ModelRouter = {
     {
       path: '/knowledge/system/document/upload/shared',
       name: 'UploadDocumentSharedSystem',
-      meta: { activeMenu: '/knowledge1/system' },
+      meta: { activeMenu: '/knowledge/system' },
       component: () => import('@/views/shared/document-shared/UploadDocument.vue'),
       hidden: true,
     },

ui/src/router/modules/document-resource-management.ts

@@ -0,0 +1,62 @@
+const DocumentRouter = {
+  path: '/knowledge/resource/:id/',
+  name: 'KnowledgeDetailResourceManagement',
+  meta: { title: 'common.fileUpload.document', activeMenu: '/knowledge', breadcrumb: true },
+  component: () => import('@/layout/layout-template/MainLayout.vue'),
+  hidden: true,
+  children: [
+    {
+      path: 'documentResource',
+      name: 'DocumentResourceManagement',
+      meta: {
+        icon: 'app-document',
+        iconActive: 'app-document-active',
+        title: 'common.fileUpload.document',
+        active: 'documentResource',
+        parentPath: '/knowledge/resource/:id/',
+        parentName: 'KnowledgeDetailResourceManagement',
+      },
+      component: () => import('@/views/resource-management/document/index.vue'),
+    },
+    {
+      path: 'problemResource',
+      name: 'ProblemResourceManagement',
+      meta: {
+        icon: 'app-problems',
+        iconActive: 'QuestionFilled',
+        title: 'views.problem.title',
+        active: 'problemResource',
+        parentPath: '/knowledge/resource/:id/',
+        parentName: 'KnowledgeDetailResourceManagement',
+      },
+      component: () => import('@/views/resource-management/problem/index.vue'),
+    },
+    {
+      path: 'hit-test-Resource',
+      name: 'KnowledgeHitTestResourceManagement',
+      meta: {
+        icon: 'app-hit-test',
+        title: 'views.application.hitTest.title',
+        active: 'hit-test-Resource',
+        parentPath: '/knowledge/resource/:id/',
+        parentName: 'KnowledgeDetailResourceManagement',
+      },
+      component: () => import('@/views/resource-management/hit-test/index.vue'),
+    },
+    {
+      path: 'settingResource',
+      name: 'settingResourceManagement',
+      meta: {
+        icon: 'app-setting',
+        iconActive: 'app-setting-active',
+        title: 'common.setting',
+        active: 'settingResource',
+        parentPath: '/knowledge/resource/:id/',
+        parentName: 'KnowledgeDetailResourceManagement',
+      },
+      component: () => import('@/views/resource-management/knowledge/KnowledgeSetting.vue'),
+    }
+  ],
+}
+
+export default DocumentRouter

ui/src/router/modules/paragraph-resource-management.ts

@@ -0,0 +1,17 @@
+const ParagraphRouter = {
+  path: '/paragraph/resource/:id/:documentId/management',
+  name: 'ParagraphResourceManagement',
+  meta: { title: 'common.fileUpload.document', activeMenu: '/knowledge', breadcrumb: true },
+  component: () => import('@/layout/layout-template/SimpleLayout.vue'),
+  hidden: true,
+  children: [
+    {
+      path: '/paragraph/resource/:id/:documentId/management',
+      name: 'ParagraphIndexResourceManagement',
+      meta: { activeMenu: '/knowledge' },
+      component: () => import('@/views/resource-management/paragraph/index.vue'),
+    },
+  ],
+}
+
+export default ParagraphRouter

ui/src/router/modules/system.ts

@@ -19,6 +19,42 @@ const systemRouter = {
       },
       component: () => import('@/views/user-manage/index.vue'),
     },
+    {
+      path: '/system/resource-management',
+      name: 'resourceManagement',
+      meta: {
+        icon: 'app-folder-share',
+        iconActive: 'app-folder-share-active',
+        title: 'views.system.resource_management',
+        activeMenu: '/system',
+        parentPath: '/system',
+        parentName: 'system',
+      },
+      children: [
+        {
+          path: '/system/resource-management/knowledge',
+          name: 'knowledgeResourceManagement',
+          meta: {
+            title: 'views.knowledge.title',
+            activeMenu: '/system',
+            parentPath: '/system',
+            parentName: 'system',
+          },
+          component: () => import('@/views/resource-management/knowledge/index.vue'),
+        },
+        {
+          path: '/system/resource-management/tool',
+          name: 'toolResourceManagement',
+          meta: {
+            title: 'views.tool.title',
+            activeMenu: '/system',
+            parentPath: '/system',
+            parentName: 'system',
+          },
+          component: () => import('@/views/resource-management/tool/index.vue'),
+        },
+      ],
+    },
     {
       path: '/system/authorization',
       name: 'authorization',

ui/src/stores/modules-resource-management/common.ts

@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia'
+import { DeviceType, ValidType } from '@/enums/common'
+// import type { Ref } from 'vue'
+// import userApi from '@/api/user/user'
+
+export interface commonTypes {
+  breadcrumb: any
+  paginationConfig: any | null
+  search: any
+  device: string
+}
+
+const useCommonStore = defineStore('comm',{
+  state: (): commonTypes => ({
+    breadcrumb: null,
+    // 搜索和分页缓存
+    paginationConfig: {},
+    search: {},
+    device: DeviceType.Desktop
+  }),
+  actions: {
+    saveBreadcrumb(data: any) {
+      this.breadcrumb = data
+    },
+    savePage(val: string, data: any) {
+      this.paginationConfig[val] = data
+    },
+    saveCondition(val: string, data: any) {
+      this.search[val] = data
+    },
+    toggleDevice(value: DeviceType) {
+      this.device = value
+    },
+    isMobile() {
+      return this.device === DeviceType.Mobile
+    },
+    // async asyncGetValid(valid_type: ValidType, valid_count: number, loading?: Ref<boolean>) {
+    //   return new Promise((resolve, reject) => {
+    //     userApi
+    //       .getValid(valid_type, valid_count, loading)
+    //       .then((data) => {
+    //         resolve(data)
+    //       })
+    //       .catch((error) => {
+    //         reject(error)
+    //       })
+    //   })
+    // }
+  }
+})
+
+export default useCommonStore

ui/src/stores/modules-resource-management/document.ts

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia'
+import documentApi from '@/api/resource-management/document'
+import { type Ref } from 'vue'
+
+const useDocumentStore = defineStore('docume', {
+  state: () => ({}),
+  actions: {
+    async asyncGetAllDocument(id: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        documentApi
+          .getAllDocument(id, loading)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncPutDocument(knowledgeId: string, data: any, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        documentApi
+          .putMulDocument(knowledgeId, data, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+  },
+})
+
+export default useDocumentStore

ui/src/stores/modules-resource-management/folder.ts

@@ -0,0 +1,23 @@
+import {defineStore} from 'pinia'
+import {type Ref} from 'vue'
+import folderApi from '@/api/folder'
+
+const useFolderStore = defineStore('fold', {
+  state: () => ({}),
+  actions: {
+    async asyncGetFolder(source: string, data: any, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        folderApi
+          .getFolder(source, data, loading)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+  },
+})
+
+export default useFolderStore

ui/src/stores/modules-resource-management/index.ts

@@ -0,0 +1,23 @@
+import useCommonStore from './common'
+import useLoginStore from './login'
+import useFolderStore from './folder'
+import useKnowledgeStore from './knowledge'
+import useModelStore from './model'
+import usePromptStore from './prompt'
+import useProblemStore from './problem'
+import useParagraphStore from './paragraph'
+import useDocumentStore from './document'
+
+const useStore = () => ({
+  common: useCommonStore(),
+  login: useLoginStore(),
+  folder: useFolderStore(),
+  knowledge: useKnowledgeStore(),
+  model: useModelStore(),
+  prompt: usePromptStore(),
+  problem: useProblemStore(),
+  paragraph: useParagraphStore(),
+  document: useDocumentStore(),
+})
+
+export default useStore

ui/src/stores/modules-resource-management/knowledge.ts

@@ -0,0 +1,76 @@
+import { defineStore } from 'pinia'
+import type { knowledgeData } from '@/api/type/knowledge'
+import type { UploadUserFile } from 'element-plus'
+import knowledgeApi from '@/api/resource-management/knowledge'
+import { type Ref } from 'vue'
+
+export interface knowledgeStateTypes {
+  baseInfo: knowledgeData | null
+  webInfo: any
+  documentsType: string
+  documentsFiles: UploadUserFile[]
+}
+
+const useKnowledgeStore = defineStore('knowled', {
+  state: (): knowledgeStateTypes => ({
+    baseInfo: null,
+    webInfo: null,
+    documentsType: '',
+    documentsFiles: [],
+  }),
+  actions: {
+    saveBaseInfo(info: knowledgeData | null) {
+      this.baseInfo = info
+    },
+    saveWebInfo(info: any) {
+      this.webInfo = info
+    },
+    saveDocumentsType(val: string) {
+      this.documentsType = val
+    },
+    saveDocumentsFile(file: UploadUserFile[]) {
+      this.documentsFiles = file
+    },
+    async asyncGetRootKnowledge(loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        const params = {
+          folder_id: localStorage.getItem('workspace_id'),
+        }
+        knowledgeApi
+          .getKnowledgeList(params, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncGetKnowledgeDetail(knowledge_id: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        knowledgeApi
+          .getKnowledgeDetail(knowledge_id, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncSyncKnowledge(id: string, sync_type: string, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        knowledgeApi
+          .putSyncWebKnowledge(id, sync_type, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+  },
+})
+
+export default useKnowledgeStore

ui/src/stores/modules-resource-management/login.ts

@@ -0,0 +1,51 @@
+import {defineStore} from 'pinia'
+import {type Ref} from 'vue'
+import loginApi from '@/api/user/login'
+import type {LoginRequest} from '@/api/type/login'
+import useUserStore from '@/stores/modules/user'
+
+const useLoginStore = defineStore('log', {
+  state: () => ({
+    token: '',
+    userAccessToken: '',
+  }),
+  actions: {
+    getToken(): string | null {
+      if (this.token) {
+        return this.token
+      }
+      const user = useUserStore()
+      return user.userType === 1 ? localStorage.getItem('token') : this.getAccessToken()
+    },
+    getAccessToken() {
+      const token = sessionStorage.getItem(`${this.userAccessToken}-accessToken`)
+      if (token) {
+        return token
+      }
+      const local_token = localStorage.getItem(`${token}-accessToken`)
+      if (local_token) {
+        return local_token
+      }
+      return localStorage.getItem(`accessToken`)
+    },
+
+    async asyncLogin(data: LoginRequest, loading?: Ref<boolean>) {
+      return loginApi.login(data).then((ok) => {
+        this.token = ok?.data?.token
+        localStorage.setItem('token', ok?.data?.token)
+        const user = useUserStore()
+        return user.profile(loading)
+      })
+    },
+    async asyncLdapLogin(data: LoginRequest, loading?: Ref<boolean>) {
+      return loginApi.ldapLogin(data).then((ok) => {
+        this.token = ok?.data?.token
+        localStorage.setItem('token', ok?.data?.token)
+        const user = useUserStore()
+        return user.profile(loading)
+      })
+    },
+  },
+})
+
+export default useLoginStore

ui/src/stores/modules-resource-management/model.ts

@@ -0,0 +1,35 @@
+import {defineStore} from 'pinia'
+import {type Ref} from 'vue'
+import ModelApi from '@/api/resource-management/model'
+import ProviderApi from '@/api/resource-management/provider'
+import type {ListModelRequest} from '@/api/type/model'
+
+const useModelStore = defineStore('mod', {
+  state: () => ({}),
+  actions: {
+    async asyncGetModel(data?: ListModelRequest, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        ModelApi.getModel(data, loading)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncGetProvider(loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        ProviderApi.getProvider(loading)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+  },
+})
+
+export default useModelStore

ui/src/stores/modules-resource-management/paragraph.ts

@@ -0,0 +1,91 @@
+import { defineStore } from 'pinia'
+import paragraphApi from '@/api/resource-management/paragraph'
+import type { Ref } from 'vue'
+
+const useParagraphStore = defineStore('paragra', {
+  state: () => ({}),
+  actions: {
+    async asyncPutParagraph(
+      knowledgeId: string,
+      documentId: string,
+      paragraphId: string,
+      data: any,
+      loading?: Ref<boolean>,
+    ) {
+      return new Promise((resolve, reject) => {
+        paragraphApi
+          .putParagraph(knowledgeId, documentId, paragraphId, data, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+
+    async asyncDelParagraph(
+      knowledgeId: string,
+      documentId: string,
+      paragraphId: string,
+      loading?: Ref<boolean>,
+    ) {
+      return new Promise((resolve, reject) => {
+        paragraphApi
+          .delParagraph(knowledgeId, documentId, paragraphId, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncDisassociationProblem(
+      knowledgeId: string,
+      documentId: string,
+      paragraphId: string,
+      problemId: string,
+      loading?: Ref<boolean>,
+    ) {
+      return new Promise((resolve, reject) => {
+        const obj = {
+          paragraphId,
+          problemId,
+        }
+        paragraphApi
+          .putDisassociationProblem(knowledgeId, documentId, obj, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncAssociationProblem(
+      knowledgeId: string,
+      documentId: string,
+      paragraphId: string,
+      problemId: string,
+      loading?: Ref<boolean>,
+    ) {
+      return new Promise((resolve, reject) => {
+        const obj = {
+          paragraphId,
+          problemId,
+        }
+        paragraphApi
+          .putAssociationProblem(knowledgeId, documentId, obj, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+  },
+})
+
+export default useParagraphStore

ui/src/stores/modules-resource-management/problem.ts

@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia'
+import { type Ref } from 'vue'
+import problemApi from '@/api/resource-management/problem'
+import type { pageRequest } from '@/api/type/common'
+
+const useProblemStore = defineStore('probl', {
+  state: () => ({}),
+  actions: {
+    async asyncPostProblem(knowledgeId: string, data: any, loading?: Ref<boolean>) {
+      return new Promise((resolve, reject) => {
+        problemApi
+          .postProblems(knowledgeId, data, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    async asyncGetProblem(
+      knowledgeId: string,
+      page: pageRequest,
+      param: any,
+      loading?: Ref<boolean>,
+    ) {
+      return new Promise((resolve, reject) => {
+        problemApi
+          .getProblems(knowledgeId, page, param, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+  },
+})
+
+export default useProblemStore

ui/src/stores/modules-resource-management/prompt.ts

@@ -0,0 +1,37 @@
+import { defineStore } from 'pinia'
+import { t } from '@/locales'
+export interface promptTypes {
+  user: string
+  formValue: { model_id: string; prompt: string }
+}
+
+const usePromptStore = defineStore('prom', {
+  state: (): promptTypes[] => JSON.parse(localStorage.getItem('PROMPT_CACHE') || '[]'),
+  actions: {
+    save(user: string, formValue: any) {
+      this.$state.forEach((item: any, index: number) => {
+        if (item.user === user) {
+          this.$state.splice(index, 1)
+        }
+      })
+      this.$state.push({ user, formValue })
+      localStorage.setItem('PROMPT_CACHE', JSON.stringify(this.$state))
+    },
+    get(user: string) {
+      for (let i = 0; i < this.$state.length; i++) {
+        if (this.$state[i].user === user) {
+          return this.$state[i].formValue
+        }
+      }
+      return {
+        model_id: '',
+        prompt:
+          t('views.document.generateQuestion.prompt1', { data: '{data}' }) +
+          '<question></question>' +
+          t('views.document.generateQuestion.prompt2'),
+      }
+    },
+  },
+})
+
+export default usePromptStore

ui/src/views/resource-management/document/UploadDocument.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="upload-document p-12-24">
+    <div class="flex align-center mb-16">
+      <back-button to="-1" style="margin-left: -4px"></back-button>
+      <h3 style="display: inline-block">{{ $t('views.document.uploadDocument') }}</h3>
+    </div>
+    <el-card style="--el-card-padding: 0">
+      <div class="upload-document__main flex" v-loading="loading">
+        <div class="upload-document__component main-calc-height">
+          <el-scrollbar>
+            <template v-if="active === 0">
+              <div class="upload-component p-24">
+                <!-- 上传文档 -->
+                <UploadComponent ref="UploadComponentRef" />
+              </div>
+            </template>
+            <template v-else-if="active === 1">
+              <SetRules ref="SetRulesRef" />
+            </template>
+            <template v-else-if="active === 2">
+              <ResultSuccess :data="successInfo" />
+            </template>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-card>
+    <div class="upload-document__footer text-right border-t" v-if="active !== 2">
+      <el-button @click="router.go(-1)" :disabled="SetRulesRef?.loading || loading">{{
+        $t('common.cancel')
+      }}</el-button>
+      <el-button @click="prev" v-if="active === 1" :disabled="SetRulesRef?.loading || loading">{{
+        $t('views.document.buttons.prev')
+      }}</el-button>
+      <el-button
+        @click="next"
+        type="primary"
+        v-if="active === 0"
+        :disabled="SetRulesRef?.loading || loading"
+      >
+        {{
+          documentsType === 'txt'
+            ? $t('views.document.buttons.next')
+            : $t('views.document.buttons.import')
+        }}
+      </el-button>
+      <el-button
+        @click="submit"
+        type="primary"
+        v-if="active === 1"
+        :disabled="SetRulesRef?.loading || loading"
+      >
+        {{ $t('views.document.buttons.import') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import SetRules from './upload/SetRules.vue'
+import ResultSuccess from './upload/ResultSuccess.vue'
+import UploadComponent from './upload/UploadComponent.vue'
+import documentApi from '@/api/resource-management/document'
+import { MsgConfirm, MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+import useStore from '@/stores/modules-resource-management'
+const { knowledge, document } = useStore()
+const documentsFiles = computed(() => knowledge.documentsFiles)
+const documentsType = computed(() => knowledge.documentsType)
+
+const router = useRouter()
+const route = useRoute()
+const {
+  query: { id }, // id为knowledgeID，有id的是上传文档
+} = route
+
+const SetRulesRef = ref()
+const UploadComponentRef = ref()
+
+const loading = ref(false)
+const disabled = ref(false)
+const active = ref(0)
+const successInfo = ref<any>(null)
+async function next() {
+  disabled.value = true
+  if (await UploadComponentRef.value.validate()) {
+    if (documentsType.value === 'QA') {
+      const fd = new FormData()
+      documentsFiles.value.forEach((item: any) => {
+        if (item?.raw) {
+          fd.append('file', item?.raw)
+        }
+      })
+      if (id) {
+        // QA文档上传
+        documentApi.postQADocument(id as string, fd, loading).then((res) => {
+          MsgSuccess(t('common.submitSuccess'))
+          clearStore()
+          router.push({ path: `/knowledge/${id}/document` })
+        })
+      }
+    } else if (documentsType.value === 'table') {
+      const fd = new FormData()
+      documentsFiles.value.forEach((item: any) => {
+        if (item?.raw) {
+          fd.append('file', item?.raw)
+        }
+      })
+      if (id) {
+        // table文档上传
+        documentApi.postTableDocument(id as string, fd, loading).then((res) => {
+          MsgSuccess(t('common.submitSuccess'))
+          clearStore()
+          router.push({ path: `/knowledge/${id}/document` })
+        })
+      }
+    } else {
+      if (active.value++ > 2) active.value = 0
+    }
+  } else {
+    disabled.value = false
+  }
+}
+const prev = () => {
+  active.value = 0
+}
+
+function clearStore() {
+  knowledge.saveDocumentsFile([])
+  knowledge.saveDocumentsType('')
+}
+function submit() {
+  loading.value = true
+  const documents = [] as any
+  SetRulesRef.value?.paragraphList.map((item: any) => {
+    if (!SetRulesRef.value?.checkedConnect) {
+      item.content.map((v: any) => {
+        delete v['problem_list']
+      })
+    }
+    documents.push({
+      name: item.name,
+      paragraphs: item.content,
+    })
+  })
+
+  if (id) {
+    // 上传文档
+    document
+      .asyncPutDocument(id as string, documents)
+      .then(() => {
+        MsgSuccess(t('common.submitSuccess'))
+        clearStore()
+        router.push({ path: `/knowledge/system/${id}/documentResource` })
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  }
+}
+function back() {
+  if (documentsFiles.value?.length > 0) {
+    MsgConfirm(t('common.tip'), t('views.document.tip.saveMessage'), {
+      confirmButtonText: t('common.confirm'),
+      type: 'warning',
+    })
+      .then(() => {
+        router.go(-1)
+        clearStore()
+      })
+      .catch(() => {})
+  } else {
+    router.go(-1)
+  }
+}
+onUnmounted(() => {
+  clearStore()
+})
+</script>
+<style lang="scss" scoped>
+.upload-document {
+  &__steps {
+    min-width: 450px;
+    max-width: 800px;
+    width: 80%;
+    margin: 0 auto;
+    padding-right: 60px;
+
+    :deep(.el-step__line) {
+      left: 64% !important;
+      right: -33% !important;
+    }
+  }
+
+  &__component {
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+  &__footer {
+    padding: 16px 24px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background: #ffffff;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .upload-component {
+    width: 70%;
+    margin: 0 auto;
+    margin-bottom: 20px;
+  }
+}
+</style>

ui/src/views/resource-management/document/component/EmbeddingContentDialog.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="$t('components.selectParagraph.title')"
+    :before-close="close"
+    width="450"
+  >
+    <el-radio-group v-model="state" class="radio-block">
+      <el-radio value="error" size="large">{{
+        $t('components.selectParagraph.error')
+      }}</el-radio>
+      <el-radio value="all" size="large">{{ $t('components.selectParagraph.all') }}</el-radio>
+    </el-radio-group>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="close">{{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit"> {{ $t('common.submit') }} </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const dialogVisible = ref<boolean>(false)
+const state = ref<'all' | 'error'>('error')
+const stateMap = {
+  all: ['0', '1', '2', '3', '4', '5', 'n'],
+  error: ['0', '1', '3', '4', '5', 'n']
+}
+const submit_handle = ref<(stateList: Array<string>) => void>()
+const submit = () => {
+  if (submit_handle.value) {
+    submit_handle.value(stateMap[state.value])
+  }
+  close()
+}
+
+const open = (handle: (stateList: Array<string>) => void) => {
+  submit_handle.value = handle
+  dialogVisible.value = true
+}
+const close = () => {
+  submit_handle.value = undefined
+  dialogVisible.value = false
+}
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/document/component/ImportDocumentDialog.vue

@@ -0,0 +1,233 @@
+<template>
+  <el-dialog
+    :title="title"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    width="550"
+  >
+    <el-form
+      label-position="top"
+      ref="webFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item
+        :label="$t('views.document.form.source_url.label')"
+        prop="source_url"
+        v-if="isImport"
+      >
+        <el-input
+          v-model="form.source_url"
+          :placeholder="$t('views.document.form.source_url.placeholder')"
+          :rows="10"
+          type="textarea"
+        />
+      </el-form-item>
+      <el-form-item
+        v-else-if="!isImport && documentType === '1'"
+        :label="$t('views.document.form.source_url.label')"
+        prop="source_url"
+      >
+        <el-input
+          v-model="form.source_url"
+          :placeholder="$t('views.document.form.source_url.requiredMessage')"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.document.form.selector.label')" v-if="documentType === '1'">
+        <el-input
+          v-model="form.selector"
+          :placeholder="$t('views.document.form.selector.placeholder')"
+        />
+      </el-form-item>
+      <el-form-item v-if="!isImport">
+        <template #label>
+          <div class="flex align-center">
+            <span class="mr-4">{{ $t('views.document.form.hit_handling_method.label') }}</span>
+            <el-tooltip
+              effect="dark"
+              :content="$t('views.document.form.hit_handling_method.tooltip')"
+              placement="right"
+            >
+              <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+            </el-tooltip>
+          </div>
+        </template>
+        <el-radio-group v-model="form.hit_handling_method" class="radio-block mt-4">
+          <template v-for="(value, key) of hitHandlingMethod" :key="key">
+            <el-radio :value="key">{{ $t(value) }} </el-radio>
+          </template>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        prop="directly_return_similarity"
+        v-if="!isImport && form.hit_handling_method === 'directly_return'"
+      >
+        <div class="lighter w-full" style="margin-top: -20px">
+          <span>{{ $t('views.document.form.similarity.label') }}</span>
+          <el-input-number
+            v-model="form.directly_return_similarity"
+            :min="0"
+            :max="1"
+            :precision="3"
+            :step="0.1"
+            :value-on-clear="0"
+            controls-position="right"
+            size="small"
+            class="ml-4 mr-4"
+          /><span>{{ $t('views.document.form.similarity.placeholder') }}</span>
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(webFormRef)" :loading="loading">
+          {{ $t('common.confirm') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance } from 'element-plus'
+import documentApi from '@/api/resource-management/document'
+import { MsgSuccess } from '@/utils/message'
+import { hitHandlingMethod } from '@/enums/document'
+import { t } from '@/locales'
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const props = defineProps({
+  title: String
+})
+
+const emit = defineEmits(['refresh'])
+const webFormRef = ref()
+const loading = ref<boolean>(false)
+const isImport = ref<boolean>(false)
+const form = ref<any>({
+  source_url: '',
+  selector: '',
+  hit_handling_method: 'optimization',
+  directly_return_similarity: 0.9
+})
+
+// 文档设置
+const documentId = ref('')
+const documentType = ref<string | number>('') //文档类型：1: web文档；0:普通文档
+
+// 批量设置
+const documentList = ref<Array<string>>([])
+
+const rules = reactive({
+  source_url: [
+    {
+      required: true,
+      message: t('views.document.form.source_url.requiredMessage'),
+      trigger: 'blur'
+    }
+  ],
+  directly_return_similarity: [
+    {
+      required: true,
+      message: t('views.document.form.similarity.requiredMessage'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      source_url: '',
+      selector: '',
+      hit_handling_method: 'optimization',
+      directly_return_similarity: 0.9
+    }
+    isImport.value = false
+    documentType.value = ''
+    documentId.value = ''
+    documentList.value = []
+  }
+})
+
+const open = (row: any, list: Array<string>) => {
+  if (row) {
+    documentType.value = row.type
+    documentId.value = row.id
+    form.value = {
+      hit_handling_method: row.hit_handling_method,
+      directly_return_similarity: row.directly_return_similarity,
+      ...row.meta
+    }
+    isImport.value = false
+  } else if (list) {
+    // 批量设置
+    documentList.value = list
+  } else {
+    // 导入 只有web文档类型
+    documentType.value = '1'
+    isImport.value = true
+  }
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      if (isImport.value) {
+        const obj = {
+          source_url_list: form.value.source_url.split('\n'),
+          selector: form.value.selector
+        }
+        documentApi.postWebDocument(id, obj, loading).then(() => {
+          MsgSuccess(t('views.document.tip.importMessage'))
+          emit('refresh')
+          dialogVisible.value = false
+        })
+      } else {
+        if (documentId.value) {
+          const obj = {
+            hit_handling_method: form.value.hit_handling_method,
+            directly_return_similarity: form.value.directly_return_similarity,
+            meta: {
+              source_url: form.value.source_url,
+              selector: form.value.selector
+            }
+          }
+          documentApi.putDocument(id, documentId.value, obj, loading).then(() => {
+            MsgSuccess(t('common.settingSuccess'))
+            emit('refresh')
+            dialogVisible.value = false
+          })
+        } else if (documentList.value.length > 0) {
+          // 批量设置
+          const obj = {
+            hit_handling_method: form.value.hit_handling_method,
+            directly_return_similarity: form.value.directly_return_similarity,
+            id_list: documentList.value
+          }
+          documentApi.putBatchEditHitHandling(id, obj, loading).then(() => {
+            MsgSuccess(t('common.settingSuccess'))
+            emit('refresh')
+            dialogVisible.value = false
+          })
+        }
+      }
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/document/component/SelectKnowledgeDialog.vue

@@ -0,0 +1,119 @@
+<template>
+  <el-dialog
+    :title="$t('views.chatLog.selectKnowledge')"
+    v-model="dialogVisible"
+    width="600"
+    class="select-knowledge-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="my-header flex">
+        <h4 :id="titleId" :class="titleClass">{{ $t('views.chatLog.selectKnowledge') }}</h4>
+        <el-button link class="ml-16" @click="refresh">
+          <el-icon class="mr-4"><Refresh /></el-icon>{{ $t('common.refresh') }}
+        </el-button>
+      </div>
+    </template>
+    <div class="content-height">
+      <el-radio-group v-model="selectKnowledge" class="card__radio">
+        <el-scrollbar height="500">
+          <div class="p-16">
+            <el-row :gutter="12" v-loading="loading">
+              <el-col :span="12" v-for="(item, index) in knowledgeList" :key="index" class="mb-16">
+                <el-card shadow="never" :class="item.id === selectKnowledge ? 'active' : ''">
+                  <el-radio :value="item.id" size="large">
+                    <div class="flex align-center">
+                      <KnowledgeIcon :type="item.type" class="mr-12" />
+
+                      <span class="ellipsis" :title="item.name">
+                        {{ item.name }}
+                      </span>
+                    </div>
+                  </el-radio>
+                </el-card>
+              </el-col>
+            </el-row>
+          </div>
+        </el-scrollbar>
+      </el-radio-group>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submitHandle" :disabled="!selectKnowledge || loading">
+          {{ $t('common.confirm') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import documentApi from '@/api/resource-management/document'
+
+import useStore from '@/stores/modules-resource-management'
+const { knowledge } = useStore()
+const route = useRoute()
+const {
+  params: { id }, // id为knowledgeID
+} = route as any
+
+const emit = defineEmits(['refresh'])
+
+const loading = ref<boolean>(false)
+
+const dialogVisible = ref<boolean>(false)
+const selectKnowledge = ref('')
+const knowledgeList = ref<any>([])
+const documentList = ref<any>([])
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    selectKnowledge.value = ''
+    knowledgeList.value = []
+    documentList.value = []
+  }
+})
+
+const open = (list: any) => {
+  documentList.value = list
+  getKnowledge()
+  dialogVisible.value = true
+}
+const submitHandle = () => {
+  documentApi
+    .putMigrateMulDocument(id, selectKnowledge.value, documentList.value, loading)
+    .then((res) => {
+      emit('refresh')
+      dialogVisible.value = false
+    })
+}
+
+function getKnowledge() {
+  knowledge.asyncGetRootKnowledge(loading).then((res: any) => {
+    knowledgeList.value = res.data?.filter((v: any) => v.id !== id)
+  })
+}
+
+const refresh = () => {
+  getKnowledge()
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss">
+.select-knowledge-dialog {
+  padding: 0;
+  .el-dialog__header {
+    padding: 24px 24px 0 24px;
+  }
+  .el-dialog__body {
+    padding: 8px !important;
+  }
+  .el-dialog__footer {
+    padding: 0 24px 24px;
+  }
+}
+</style>

ui/src/views/resource-management/document/component/Status.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-popover
+    v-model:visible="visible"
+    placement="top"
+    trigger="hover"
+    :popper-style="{ width: 'auto' }"
+  >
+    <template #default
+      ><StatusTable
+        v-if="visible"
+        :status="status"
+        :statusMeta="statusMeta"
+        :taskTypeMap="taskTypeMap"
+        :stateMap="stateMap"
+      ></StatusTable>
+    </template>
+    <template #reference>
+      <el-text v-if="aggStatus?.value === State.SUCCESS || aggStatus?.value === State.REVOKED">
+        <el-icon class="color-success"><SuccessFilled /></el-icon>
+        {{ stateMap[aggStatus.value](aggStatus.key) }}
+      </el-text>
+      <el-text v-else-if="aggStatus?.value === State.FAILURE">
+        <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
+        {{ stateMap[aggStatus.value](aggStatus.key) }}
+      </el-text>
+      <el-text v-else-if="aggStatus?.value === State.STARTED">
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
+        {{ stateMap[aggStatus.value](aggStatus.key) }}
+      </el-text>
+      <el-text v-else-if="aggStatus?.value === State.PENDING">
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
+        {{ stateMap[aggStatus.value](aggStatus.key) }}
+      </el-text>
+      <el-text v-else-if="aggStatus?.value === State.REVOKE">
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
+        {{ stateMap[aggStatus.value](aggStatus.key) }}
+      </el-text>
+    </template>
+  </el-popover>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { TaskType, State } from '@/utils/status'
+import StatusTable from '@/views/resource-management/document/component/StatusTable.vue'
+import { t } from '@/locales'
+const props = defineProps<{ status: string; statusMeta: any }>()
+const visible = ref<boolean>(false)
+const checkList: Array<string> = [
+  State.REVOKE,
+  State.STARTED,
+  State.PENDING,
+  State.FAILURE,
+  State.REVOKED,
+  State.SUCCESS
+]
+const aggStatus = computed(() => {
+  let obj = { key: 0, value: '' }
+  for (const i in checkList) {
+    const state = checkList[i]
+    const index = props.status.indexOf(state)
+    if (index > -1) {
+      obj = { key: props.status.length - index, value: state }
+      break
+    }
+  }
+  return obj
+})
+const startedMap = {
+  [TaskType.EMBEDDING]: t('views.document.fileStatus.EMBEDDING'),
+  [TaskType.GENERATE_PROBLEM]: t('views.document.fileStatus.GENERATE'),
+  [TaskType.SYNC]: t('views.document.fileStatus.SYNC')
+}
+const taskTypeMap = {
+  [TaskType.EMBEDDING]: t('views.knowledge.setting.vectorization'),
+  [TaskType.GENERATE_PROBLEM]: t('views.document.generateQuestion.title'),
+  [TaskType.SYNC]: t('views.knowledge.setting.sync')
+}
+const stateMap: any = {
+  [State.PENDING]: (type: number) => t('views.document.fileStatus.PENDING'),
+  [State.STARTED]: (type: number) => startedMap[type],
+  [State.REVOKE]: (type: number) => t('views.document.fileStatus.REVOKE'),
+  [State.REVOKED]: (type: number) => t('views.document.fileStatus.SUCCESS'),
+  [State.FAILURE]: (type: number) => t('views.document.fileStatus.FAILURE'),
+  [State.SUCCESS]: (type: number) => t('views.document.fileStatus.SUCCESS'),
+}
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/document/component/StatusTable.vue

@@ -0,0 +1,109 @@
+<template>
+  <div v-for="status in statusTable" :key="status.type" >
+    <span> {{ taskTypeMap[status.type] }}：</span>
+    <span>
+      <el-text v-if="status.state === State.SUCCESS || status.state === State.REVOKED">
+        <el-icon class="color-success"><SuccessFilled /></el-icon>
+        {{ stateMap[status.state](status.type) }}
+      </el-text>
+      <el-text v-else-if="status.state === State.FAILURE">
+        <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
+        {{ stateMap[status.state](status.type) }}
+      </el-text>
+      <el-text v-else-if="status.state === State.STARTED">
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
+        {{ stateMap[status.state](status.type) }}
+      </el-text>
+      <el-text v-else-if="status.state === State.PENDING">
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
+        {{ stateMap[status.state](status.type) }}
+      </el-text>
+      <el-text v-else-if="status.state === State.REVOKE">
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
+        {{ stateMap[status.state](status.type) }}
+      </el-text>
+    </span>
+    <span
+      class="ml-8 lighter"
+      :style="{ color: [State.FAILURE, State.REVOKED].includes(status.state) ? '#F54A45' : '' }"
+    >
+    {{ $t('views.document.fileStatus.finish') }}
+      {{
+        Object.keys(status.aggs ? status.aggs : {})
+          .filter((k) => k == State.SUCCESS)
+          .map((k) => status.aggs[k])
+          .reduce((x: any, y: any) => x + y, 0)
+      }}/{{
+        Object.values(status.aggs ? status.aggs : {}).reduce((x: any, y: any) => x + y, 0)
+      }}</span
+    >
+    <el-text type="info" class="ml-12">
+      {{
+        status.time
+          ? status.time[status.state == State.REVOKED ? State.REVOKED : State.PENDING]?.substring(
+              0,
+              19
+            )
+          : undefined
+      }}
+    </el-text>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Status, TaskType, State, type TaskTypeInterface } from '@/utils/status'
+import { mergeWith } from 'lodash'
+const props = defineProps<{ status: string; statusMeta: any; stateMap: any; taskTypeMap: any }>()
+
+const parseAgg = (agg: { count: number; status: string }) => {
+  const status = new Status(agg.status)
+  return Object.keys(TaskType)
+    .map((key) => {
+      const value = TaskType[key as keyof TaskTypeInterface]
+      return { [value]: { [status.task_status[value]]: agg.count } }
+    })
+    .reduce((x, y) => ({ ...x, ...y }), {})
+}
+
+const customizer: (x: any, y: any) => any = (objValue: any, srcValue: any) => {
+  if (objValue == undefined && srcValue) {
+    return srcValue
+  }
+  if (srcValue == undefined && objValue) {
+    return objValue
+  }
+  // 如果是数组，我们将元素进行聚合
+  if (typeof objValue === 'object' && typeof srcValue === 'object') {
+    // 若是object类型的对象，我们进行递归
+    return mergeWith(objValue, srcValue, customizer)
+  } else {
+    // 否则，单纯的将值进行累加
+    return objValue + srcValue
+  }
+}
+const aggs = computed(() => {
+  return (props.statusMeta.aggs ? props.statusMeta.aggs : [])
+    .map((agg: any) => {
+      return parseAgg(agg)
+    })
+    .reduce((x: any, y: any) => {
+      return mergeWith(x, y, customizer)
+    }, {})
+})
+
+const statusTable = computed(() => {
+  return Object.keys(TaskType)
+    .map((key) => {
+      const value = TaskType[key as keyof TaskTypeInterface]
+      const parseStatus = new Status(props.status)
+      return {
+        type: value,
+        state: parseStatus.task_status[value],
+        aggs: aggs.value[value],
+        time: props.statusMeta.state_time[value]
+      }
+    })
+    .filter((item) => item.state !== State.IGNORED)
+})
+</script>
+<style lang="scss"></style>

ui/src/views/resource-management/document/upload/ResultSuccess.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-scrollbar>
+    <el-result icon="color-success" :title="`🎉 ${$t('views.knowledge.ResultSuccess.title')} 🎉`">
+      <template #sub-title>
+        <div class="mt-8">
+          <span class="bold">{{ data?.document_list.length || 0 }}</span>
+          <el-text type="info" class="ml-4">{{ $t('common.fileUpload.document') }}</el-text>
+          <el-divider direction="vertical" />
+          <span class="bold">{{ paragraph_count || 0 }}</span>
+          <el-text type="info" class="ml-4">{{
+            $t('views.knowledge.ResultSuccess.paragraph')
+          }}</el-text>
+          <el-divider direction="vertical" />
+          <span class="bold">{{ numberFormat(char_length) || 0 }}</span>
+          <el-text type="info" class="ml-4">{{ $t('common.character') }} </el-text>
+        </div>
+      </template>
+      <template #extra>
+        <el-button @click="router.push({ path: `/knowledge` })">{{
+          $t('views.knowledge.ResultSuccess.buttons.toknowledge')
+        }}</el-button>
+        <el-button
+          type="primary"
+          @click="router.push({ path: `/knowledge/${data?.id}/${folderId}/document` })"
+          >{{ $t('views.knowledge.ResultSuccess.buttons.toDocument') }}</el-button
+        >
+      </template>
+    </el-result>
+    <div class="result-success">
+      <p class="bolder">{{ $t('views.knowledge.ResultSuccess.documentList') }}</p>
+      <el-card
+        shadow="never"
+        class="file-List-card mt-8"
+        v-for="(item, index) in data?.document_list"
+        :key="index"
+      >
+        <div class="flex-between">
+          <div class="flex">
+            <img :src="getImgUrl(item && item?.name)" alt="" width="40" />
+            <div class="ml-8">
+              <p>{{ item && item?.name }}</p>
+              <el-text type="info" size="small">{{ filesize(item && item?.char_length) }}</el-text>
+            </div>
+          </div>
+          <div>
+            <el-text type="info" class="mr-16"
+              >{{ item && item?.paragraph_count }}
+              {{ $t('views.knowledge.ResultSuccess.paragraph_count') }}</el-text
+            >
+            <el-text v-if="item.status === '1'">
+              <el-icon class="color-success"><SuccessFilled /></el-icon>
+            </el-text>
+            <el-text v-else-if="item.status === '2'">
+              <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
+            </el-text>
+            <el-text v-else-if="item.status === '0'">
+              <el-icon class="is-loading primary"><Loading /></el-icon>
+              {{ $t('views.knowledge.ResultSuccess.loading') }}...
+            </el-text>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </el-scrollbar>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { numberFormat } from '@/utils/utils'
+import { filesize, getImgUrl } from '@/utils/utils'
+const route = useRoute()
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const {
+  params: { id, folderId }, // id为knowledgeID
+} = route as any
+const router = useRouter()
+const paragraph_count = computed(() =>
+  props.data?.document_list.reduce((sum: number, obj: any) => (sum += obj.paragraph_count), 0),
+)
+
+const char_length = computed(
+  () =>
+    props.data?.document_list.reduce((sum: number, obj: any) => (sum += obj.char_length), 0) || 0,
+)
+</script>
+<style scoped lang="scss">
+.result-success {
+  width: 70%;
+  margin: 0 auto;
+  margin-bottom: 30px;
+}
+</style>

ui/src/views/resource-management/document/upload/SetRules.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="set-rules">
+    <el-row>
+      <el-col :span="10" class="p-24">
+        <h4 class="title-decoration-1 mb-16">{{ $t('views.document.setRules.title.setting') }}</h4>
+        <div class="set-rules__right">
+          <el-scrollbar>
+            <div class="left-height" @click.stop>
+              <el-radio-group v-model="radio" class="set-rules__radio">
+                <el-card shadow="never" class="mb-16" :class="radio === '1' ? 'active' : ''">
+                  <el-radio value="1" size="large">
+                    <p class="mb-4">{{ $t('views.document.setRules.intelligent.label') }}</p>
+                    <el-text type="info">{{
+                      $t('views.document.setRules.intelligent.text')
+                    }}</el-text>
+                  </el-radio>
+                </el-card>
+                <el-card shadow="never" class="mb-16" :class="radio === '2' ? 'active' : ''">
+                  <el-radio value="2" size="large">
+                    <p class="mb-4">{{ $t('views.document.setRules.advanced.label') }}</p>
+                    <el-text type="info">
+                      {{ $t('views.document.setRules.advanced.text') }}
+                    </el-text>
+                  </el-radio>
+
+                  <el-card
+                    v-if="radio === '2'"
+                    shadow="never"
+                    class="card-never mt-16"
+                    style="margin-left: 30px"
+                  >
+                    <div class="set-rules__form">
+                      <div class="form-item mb-16">
+                        <div class="title flex align-center mb-8">
+                          <span style="margin-right: 4px">{{
+                            $t('views.document.setRules.patterns.label')
+                          }}</span>
+                          <el-tooltip
+                            effect="dark"
+                            :content="$t('views.document.setRules.patterns.tooltip')"
+                            placement="right"
+                          >
+                            <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                          </el-tooltip>
+                        </div>
+                        <div @click.stop>
+                          <el-select
+                            v-model="form.patterns"
+                            multiple
+                            allow-create
+                            default-first-option
+                            filterable
+                            :placeholder="$t('views.document.setRules.patterns.placeholder')"
+                          >
+                            <el-option
+                              v-for="(item, index) in splitPatternList"
+                              :key="index"
+                              :label="item.key"
+                              :value="item.value"
+                            >
+                            </el-option>
+                          </el-select>
+                        </div>
+                      </div>
+                      <div class="form-item mb-16">
+                        <div class="title mb-8">
+                          {{ $t('views.document.setRules.limit.label') }}
+                        </div>
+                        <el-slider
+                          v-model="form.limit"
+                          show-input
+                          :show-input-controls="false"
+                          :min="50"
+                          :max="100000"
+                        />
+                      </div>
+                      <div class="form-item mb-16">
+                        <div class="title mb-8">
+                          {{ $t('views.document.setRules.with_filter.label') }}
+                        </div>
+                        <el-switch size="small" v-model="form.with_filter" />
+                        <div style="margin-top: 4px">
+                          <el-text type="info">
+                            {{ $t('views.document.setRules.with_filter.text') }}</el-text
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </el-card>
+                </el-card>
+              </el-radio-group>
+            </div>
+          </el-scrollbar>
+          <div>
+            <el-checkbox
+              v-model="checkedConnect"
+              @change="changeHandle"
+              style="white-space: normal"
+            >
+              {{ $t('views.document.setRules.checkedConnect.label') }}
+            </el-checkbox>
+          </div>
+          <div class="text-right mt-8">
+            <el-button @click="splitDocument">
+              {{ $t('views.document.buttons.preview') }}</el-button
+            >
+          </div>
+        </div>
+      </el-col>
+
+      <el-col :span="14" class="p-24 border-l">
+        <div v-loading="loading">
+          <h4 class="title-decoration-1 mb-8">{{ $t('views.document.setRules.title.preview') }}</h4>
+
+          <ParagraphPreview v-model:data="paragraphList" :isConnect="checkedConnect" />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, reactive, watch } from 'vue'
+import ParagraphPreview from '@/views/resource-management/knowledge/component/ParagraphPreview.vue'
+import { useRoute } from 'vue-router'
+import { cutFilename } from '@/utils/utils'
+import documentApi from '@/api/resource-management/document'
+import useStore from '@/stores/modules-resource-management'
+import type { KeyValue } from '@/api/type/common'
+const { knowledge } = useStore()
+const documentsFiles = computed(() => knowledge.documentsFiles)
+const splitPatternList = ref<Array<KeyValue<string, string>>>([])
+const route = useRoute()
+const {
+  query: { id }, // id为datasetID
+} = route as any
+const radio = ref('1')
+const loading = ref(false)
+const paragraphList = ref<any[]>([])
+const patternLoading = ref<boolean>(false)
+const checkedConnect = ref<boolean>(false)
+
+const firstChecked = ref(true)
+
+const form = reactive<{
+  patterns: Array<string>
+  limit: number
+  with_filter: boolean
+  [propName: string]: any
+}>({
+  patterns: [],
+  limit: 500,
+  with_filter: true,
+})
+
+function changeHandle(val: boolean) {
+  if (val && firstChecked.value) {
+    paragraphList.value = paragraphList.value.map((item: any) => ({
+      ...item,
+      content: item.content.map((v: any) => ({
+        ...v,
+        problem_list: v.title.trim()
+          ? [
+              {
+                content: v.title.trim(),
+              },
+            ]
+          : [],
+      })),
+    }))
+    firstChecked.value = false
+  }
+}
+function splitDocument() {
+  loading.value = true
+  const fd = new FormData()
+  documentsFiles.value.forEach((item) => {
+    if (item?.raw) {
+      fd.append('file', item?.raw)
+    }
+  })
+  if (radio.value === '2') {
+    Object.keys(form).forEach((key) => {
+      if (key == 'patterns') {
+        form.patterns.forEach((item) => fd.append('patterns', item))
+      } else {
+        fd.append(key, form[key])
+      }
+    })
+  }
+  documentApi
+    .postSplitDocument(fd, id)
+    .then((res: any) => {
+      const list = res.data
+
+      list.map((item: any) => {
+        if (item.name.length > 128) {
+          item.name = cutFilename(item.name, 128)
+        }
+        if (checkedConnect.value) {
+          item.content.map((v: any) => {
+            v['problem_list'] = v.title.trim()
+              ? [
+                  {
+                    content: v.title.trim(),
+                  },
+                ]
+              : []
+          })
+        }
+      })
+
+      paragraphList.value = list
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+const initSplitPatternList = () => {
+  documentApi.listSplitPattern(patternLoading).then((ok) => {
+    splitPatternList.value = ok.data
+  })
+}
+
+watch(radio, () => {
+  if (radio.value === '2') {
+    initSplitPatternList()
+  }
+})
+
+onMounted(() => {
+  splitDocument()
+})
+
+defineExpose({
+  paragraphList,
+  checkedConnect,
+  loading,
+})
+</script>
+<style scoped lang="scss">
+.set-rules {
+  width: 100%;
+
+  .left-height {
+    max-height: calc(var(--create-knowledge-height) - 110px);
+    overflow-x: hidden;
+  }
+
+  &__radio {
+    width: 100%;
+    display: block;
+
+    .el-radio {
+      white-space: break-spaces;
+      width: 100%;
+      height: 100%;
+      line-height: 22px;
+      color: var(--app-text-color);
+    }
+
+    :deep(.el-radio__label) {
+      padding-left: 30px;
+      width: 100%;
+    }
+    :deep(.el-radio__input) {
+      position: absolute;
+      top: 16px;
+    }
+    .active {
+      border: 1px solid var(--el-color-primary);
+    }
+  }
+
+  &__form {
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+    }
+  }
+}
+</style>

ui/src/views/resource-management/document/upload/UploadComponent.vue

@@ -0,0 +1,327 @@
+<template>
+  <h4 class="title-decoration-1 mb-8">{{ $t('views.document.uploadDocument') }}</h4>
+  <el-form
+    ref="FormRef"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+    require-asterisk-position="right"
+  >
+    <div class="mt-16 mb-16">
+      <el-radio-group v-model="form.fileType" @change="radioChange" class="app-radio-button-group">
+        <el-radio-button value="txt">{{ $t('views.document.fileType.txt.label') }}</el-radio-button>
+        <el-radio-button value="table">{{
+          $t('views.document.fileType.table.label')
+        }}</el-radio-button>
+        <el-radio-button value="QA">{{ $t('views.document.fileType.QA.label') }}</el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <el-form-item prop="fileList" v-if="form.fileType === 'QA'">
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>
+            {{ $t('views.document.fileType.QA.tip1') }}
+            <el-button type="primary" link @click="downloadTemplate('excel')">
+              {{ $t('views.document.upload.download') }} Excel
+              {{ $t('views.document.upload.template') }}
+            </el-button>
+            <el-button type="primary" link @click="downloadTemplate('csv')">
+              {{ $t('views.document.upload.download') }} CSV
+              {{ $t('views.document.upload.template') }}
+            </el-button>
+          </p>
+          <p>{{ $t('views.document.fileType.QA.tip2') }}</p>
+          <p>{{ $t('views.document.fileType.QA.tip3') }}</p>
+        </div>
+      </div>
+      <el-upload
+        :webkitdirectory="false"
+        class="w-full mb-4"
+        drag
+        multiple
+        v-model:file-list="form.fileList"
+        action="#"
+        :auto-upload="false"
+        :show-file-list="false"
+        accept=".xlsx, .xls, .csv,.zip"
+        :limit="50"
+        :on-exceed="onExceed"
+        :on-change="fileHandleChange"
+        @click.prevent="handlePreview(false)"
+      >
+        <img src="@/assets/upload-icon.svg" alt="" />
+        <div class="el-upload__text">
+          <p>
+            {{ $t('views.document.upload.uploadMessage') }}
+            <em class="hover" @click.prevent="handlePreview(false)">
+              {{ $t('views.document.upload.selectFile') }}
+            </em>
+            <em class="hove ml-4" @click.prevent="handlePreview(true)">
+              {{ $t('views.document.upload.selectFiles') }}
+            </em>
+          </p>
+          <div class="upload__decoration">
+            <p>{{ $t('views.document.upload.formats') }}XLS、XLSX、CSV、ZIP</p>
+          </div>
+        </div>
+      </el-upload>
+    </el-form-item>
+    <el-form-item prop="fileList" v-else-if="form.fileType === 'table'">
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>
+            {{ $t('views.document.fileType.table.tip1') }}
+            <el-button type="primary" link @click="downloadTableTemplate('excel')">
+              {{ $t('views.document.upload.download') }} Excel
+              {{ $t('views.document.upload.template') }}
+            </el-button>
+            <el-button type="primary" link @click="downloadTableTemplate('csv')">
+              {{ $t('views.document.upload.download') }} CSV
+              {{ $t('views.document.upload.template') }}
+            </el-button>
+          </p>
+          <p>{{ $t('views.document.fileType.table.tip2') }}</p>
+          <p>{{ $t('views.document.fileType.table.tip3') }}</p>
+          <p>{{ $t('views.document.fileType.table.tip4') }}</p>
+        </div>
+      </div>
+      <el-upload
+        :webkitdirectory="false"
+        class="w-full mb-4"
+        drag
+        multiple
+        v-model:file-list="form.fileList"
+        action="#"
+        :auto-upload="false"
+        :show-file-list="false"
+        accept=".xlsx, .xls, .csv"
+        :limit="50"
+        :on-exceed="onExceed"
+        :on-change="fileHandleChange"
+        @click.prevent="handlePreview(false)"
+      >
+        <img src="@/assets/upload-icon.svg" alt="" />
+        <div class="el-upload__text">
+          <p>
+            {{ $t('views.document.upload.uploadMessage') }}
+            <em class="hover" @click.prevent="handlePreview(false)">
+              {{ $t('views.document.upload.selectFile') }}
+            </em>
+            <em class="hover ml-4" @click.prevent="handlePreview(true)">
+              {{ $t('views.document.upload.selectFiles') }}
+            </em>
+          </p>
+          <div class="upload__decoration">
+            <p>{{ $t('views.document.upload.formats') }}XLS、XLSX、CSV</p>
+          </div>
+        </div>
+      </el-upload>
+    </el-form-item>
+    <el-form-item prop="fileList" v-else>
+      <div class="update-info flex p-8-12 border-r-4 mb-16 w-full">
+        <div class="mt-4">
+          <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+        </div>
+        <div class="ml-16 lighter">
+          <p>{{ $t('views.document.fileType.txt.tip1') }}</p>
+          <p>{{ $t('views.document.fileType.txt.tip2') }}</p>
+        </div>
+      </div>
+      <el-upload
+        :webkitdirectory="false"
+        class="w-full"
+        drag
+        multiple
+        v-model:file-list="form.fileList"
+        action="#"
+        :auto-upload="false"
+        :show-file-list="false"
+        accept=".txt, .md, .log, .docx, .pdf, .html,.zip,.xlsx,.xls,.csv"
+        :limit="50"
+        :on-exceed="onExceed"
+        :on-change="fileHandleChange"
+        @click.prevent="handlePreview(false)"
+      >
+        <img src="@/assets/upload-icon.svg" alt="" />
+        <div class="el-upload__text">
+          <p>
+            {{ $t('views.document.upload.uploadMessage') }}
+            <em class="hover" @click.prevent="handlePreview(false)">
+              {{ $t('views.document.upload.selectFile') }}
+            </em>
+            <em class="hover ml-4" @click.prevent="handlePreview(true)">
+              {{ $t('views.document.upload.selectFiles') }}
+            </em>
+          </p>
+          <div class="upload__decoration">
+            <p>
+              {{
+                $t('views.document.upload.formats')
+              }}TXT、Markdown、PDF、DOCX、HTML、XLS、XLSX、CSV、ZIP
+            </p>
+          </div>
+        </div>
+      </el-upload>
+    </el-form-item>
+  </el-form>
+  <el-row :gutter="8" v-if="form.fileList?.length">
+    <template v-for="(item, index) in form.fileList" :key="index">
+      <el-col :span="12" class="mb-8">
+        <el-card shadow="never" class="file-List-card">
+          <div class="flex-between">
+            <div class="flex">
+              <img :src="getImgUrl(item && item?.name)" alt="" width="40" />
+              <div class="ml-8">
+                <p>{{ item && item?.name }}</p>
+                <el-text type="info" size="small">{{
+                  filesize(item && item?.size) || '0K'
+                }}</el-text>
+              </div>
+            </div>
+            <el-button text @click="deleteFile(index)">
+              <el-icon><Delete /></el-icon>
+            </el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </template>
+  </el-row>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onUnmounted, onMounted, computed, watch, nextTick } from 'vue'
+import type { UploadFiles } from 'element-plus'
+import { filesize, getImgUrl, isRightType } from '@/utils/utils'
+import { MsgError } from '@/utils/message'
+import documentApi from '@/api/resource-management/document'
+import useStore from '@/stores/modules-resource-management'
+import { t } from '@/locales'
+const { knowledge } = useStore()
+const documentsFiles = computed(() => knowledge.documentsFiles)
+const documentsType = computed(() => knowledge.documentsType)
+const form = ref({
+  fileType: 'txt',
+  fileList: [] as any
+})
+
+const rules = reactive({
+  fileList: [
+    { required: true, message: t('views.document.upload.requiredMessage'), trigger: 'change' }
+  ]
+})
+const FormRef = ref()
+
+watch(form.value, (value) => {
+  knowledge.saveDocumentsType(value.fileType)
+  knowledge.saveDocumentsFile(value.fileList)
+})
+
+function downloadTemplate(type: string) {
+  documentApi.exportQATemplate(
+    `${type}${t('views.document.upload.template')}.${type == 'csv' ? type : 'xlsx'}`,
+    type
+  )
+}
+
+function downloadTableTemplate(type: string) {
+  documentApi.exportTableTemplate(
+    `${type}${t('views.document.upload.template')}.${type == 'csv' ? type : 'xlsx'}`,
+    type
+  )
+}
+
+function radioChange() {
+  form.value.fileList = []
+}
+
+function deleteFile(index: number) {
+  form.value.fileList.splice(index, 1)
+}
+
+// 上传on-change事件
+const fileHandleChange = (file: any, fileList: UploadFiles) => {
+  //1、判断文件大小是否合法，文件限制不能大于100M
+  const isLimit = file?.size / 1024 / 1024 < 100
+  if (!isLimit) {
+    MsgError(t('views.document.upload.errorMessage1'))
+    fileList.splice(-1, 1) //移除当前超出大小的文件
+    return false
+  }
+
+  if (!isRightType(file?.name, form.value.fileType)) {
+    if (file?.name !== '.DS_Store') {
+      MsgError(t('views.document.upload.errorMessage2'))
+    }
+    fileList.splice(-1, 1)
+    return false
+  }
+  if (file?.size === 0) {
+    MsgError(t('views.document.upload.errorMessage3'))
+    fileList.splice(-1, 1)
+    return false
+  }
+}
+
+const onExceed = () => {
+  MsgError(t('views.document.upload.errorMessage4'))
+}
+
+const handlePreview = (bool: boolean) => {
+  let inputDom: any = null
+  nextTick(() => {
+    if (document.querySelector('.el-upload__input') != null) {
+      inputDom = document.querySelector('.el-upload__input')
+      inputDom.webkitdirectory = bool
+    }
+  })
+}
+
+/*
+  表单校验
+*/
+function validate() {
+  if (!FormRef.value) return
+  return FormRef.value.validate((valid: any) => {
+    return valid
+  })
+}
+
+onMounted(() => {
+  if (documentsType.value) {
+    form.value.fileType = documentsType.value
+  }
+  if (documentsFiles.value) {
+    form.value.fileList = documentsFiles.value
+  }
+})
+onUnmounted(() => {
+  form.value = {
+    fileType: 'txt',
+    fileList: []
+  }
+})
+
+defineExpose({
+  validate,
+  form
+})
+</script>
+<style scoped lang="scss">
+.upload__decoration {
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--el-text-color-secondary);
+}
+.el-upload__text {
+  .hover:hover {
+    color: var(--el-color-primary-light-5);
+  }
+}
+
+</style>

ui/src/views/resource-management/hit-test/index.vue

@@ -0,0 +1,434 @@
+<template>
+  <div class="hit-test p-16-24">
+    <h4>
+      {{ $t('views.application.hitTest.title') }}
+      <el-text type="info" class="ml-4"> {{ $t('views.application.hitTest.text') }}</el-text>
+    </h4>
+    <el-card style="--el-card-padding: 0" class="hit-test__main p-16 mt-16 mb-16" v-loading="loading">
+      <div class="question-title" :style="{ visibility: questionTitle ? 'visible' : 'hidden' }">
+        <div class="avatar">
+          <el-avatar>
+            <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+          </el-avatar>
+        </div>
+        <div class="content">
+          <h4 class="text break-all">{{ questionTitle }}</h4>
+        </div>
+      </div>
+      <el-scrollbar>
+        <div class="hit-test-height">
+          <el-empty
+            v-if="first"
+            :image="emptyImg"
+            :description="$t('views.application.hitTest.emptyMessage1')"
+            style="padding-top: 160px"
+            :image-size="125"
+          />
+          <el-empty
+            v-else-if="paragraphDetail.length == 0"
+            :description="$t('views.application.hitTest.emptyMessage2')"
+            style="padding-top: 160px"
+            :image-size="125"
+          />
+          <el-row v-else>
+            <el-col
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="8"
+              :xl="6"
+              v-for="(item, index) in paragraphDetail"
+              :key="index"
+              class="p-8"
+            >
+              <CardBox
+                shadow="hover"
+                :title="item.title || '-'"
+                :description="item.content"
+                class="document-card layout-bg layout-bg cursor"
+                :class="item.is_active ? '' : 'disabled'"
+                :showIcon="false"
+                @click="editParagraph(item)"
+              >
+                <template #icon>
+                  <el-avatar class="mr-12 avatar-light" :size="22"> {{ index + 1 + '' }}</el-avatar>
+                </template>
+                <div class="active-button primary">{{ item.similarity?.toFixed(3) }}</div>
+                <template #footer>
+                  <div class="footer-content flex-between">
+                    <el-text>
+                      <el-icon>
+                        <Document />
+                      </el-icon>
+                      {{ item?.document_name }}
+                    </el-text>
+                    <div v-if="item.trample_num || item.star_num">
+                      <span v-if="item.star_num">
+                        <AppIcon iconName="app-like-color"></AppIcon>
+                        {{ item.star_num }}
+                      </span>
+                      <span v-if="item.trample_num" class="ml-4">
+                        <AppIcon iconName="app-oppose-color"></AppIcon>
+                        {{ item.trample_num }}
+                      </span>
+                    </div>
+                  </div>
+                </template>
+              </CardBox>
+            </el-col>
+          </el-row>
+        </div>
+      </el-scrollbar>
+    </el-card>
+    <ParagraphDialog ref="ParagraphDialogRef" :title="title" @refresh="refresh" />
+
+    <div class="hit-test__operate">
+      <el-popover :visible="popoverVisible" placement="right-end" :width="500" trigger="click">
+        <template #reference>
+          <el-button icon="Setting" class="mb-8" @click="settingChange('open')">{{
+            $t('common.paramSetting')
+          }}</el-button>
+        </template>
+        <div class="mb-16">
+          <div class="title mb-8">
+            {{ $t('views.application.dialog.selectSearchMode') }}
+          </div>
+          <el-radio-group
+            v-model="cloneForm.search_mode"
+            class="card__radio"
+            @change="changeHandle"
+          >
+            <el-card
+              shadow="never"
+              class="mb-16"
+              :class="cloneForm.search_mode === 'embedding' ? 'active' : ''"
+            >
+              <el-radio value="embedding" size="large">
+                <p class="mb-4">
+                  {{ $t('views.application.dialog.vectorSearch') }}
+                </p>
+                <el-text type="info">{{
+                  $t('views.application.dialog.vectorSearchTooltip')
+                }}</el-text>
+              </el-radio>
+            </el-card>
+            <el-card
+              shadow="never"
+              class="mb-16"
+              :class="cloneForm.search_mode === 'keywords' ? 'active' : ''"
+            >
+              <el-radio value="keywords" size="large">
+                <p class="mb-4">
+                  {{ $t('views.application.dialog.fullTextSearch') }}
+                </p>
+                <el-text type="info">{{
+                  $t('views.application.dialog.fullTextSearchTooltip')
+                }}</el-text>
+              </el-radio>
+            </el-card>
+            <el-card
+              shadow="never"
+              class="mb-16"
+              :class="cloneForm.search_mode === 'blend' ? 'active' : ''"
+            >
+              <el-radio value="blend" size="large">
+                <p class="mb-4">
+                  {{ $t('views.application.dialog.hybridSearch') }}
+                </p>
+                <el-text type="info">{{
+                  $t('views.application.dialog.hybridSearchTooltip')
+                }}</el-text>
+              </el-radio>
+            </el-card>
+          </el-radio-group>
+        </div>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="mb-16">
+              <div class="title mb-8">
+                {{ $t('views.application.dialog.similarityThreshold') }}
+              </div>
+              <el-input-number
+                v-model="cloneForm.similarity"
+                :min="0"
+                :max="cloneForm.search_mode === 'blend' ? 2 : 1"
+                :precision="3"
+                :step="0.1"
+                :value-on-clear="0"
+                controls-position="right"
+                class="w-full"
+              />
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="mb-16">
+              <div class="title mb-8">
+                {{ $t('views.application.dialog.topReferences') }}
+              </div>
+              <el-input-number
+                v-model="cloneForm.top_number"
+                :min="1"
+                :max="10000"
+                controls-position="right"
+                class="w-full"
+              />
+            </div>
+          </el-col>
+        </el-row>
+
+        <div class="text-right">
+          <el-button @click="popoverVisible = false">{{ $t('common.cancel') }}</el-button>
+          <el-button type="primary" @click="settingChange('close')">{{
+            $t('common.confirm')
+          }}</el-button>
+        </div>
+      </el-popover>
+      <div class="operate-textarea flex">
+        <el-input
+          ref="quickInputRef"
+          v-model="inputValue"
+          type="textarea"
+          :placeholder="$t('common.inputPlaceholder')"
+          :autosize="{ minRows: 1, maxRows: 8 }"
+          @keydown.enter="sendChatHandle($event)"
+        />
+        <div class="operate">
+          <el-button
+            text
+            class="sent-button"
+            :disabled="isDisabledChart || loading"
+            @click="sendChatHandle"
+          >
+            <img v-show="isDisabledChart || loading" src="@/assets/icon_send.svg" alt="" />
+            <img
+              v-show="!isDisabledChart && !loading"
+              src="@/assets/icon_send_colorful.svg"
+              alt=""
+            />
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { nextTick, ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { cloneDeep } from 'lodash'
+import KnowledgeApi from '@/api/resource-management/knowledge'
+// import applicationApi from '@/api/application/application'
+import ParagraphDialog from '@/views/resource-management/paragraph/component/ParagraphDialog.vue'
+import { arraySort } from '@/utils/common'
+import emptyImg from '@/assets/hit-test-empty.png'
+import { t } from '@/locales'
+const route = useRoute()
+const {
+  meta: { activeMenu },
+  params: { id },
+} = route as any
+
+const quickInputRef = ref()
+const ParagraphDialogRef = ref()
+const loading = ref(false)
+const paragraphDetail = ref<any[]>([])
+const title = ref('')
+const inputValue = ref('')
+const formInline = ref({
+  similarity: 0.6,
+  top_number: 5,
+  search_mode: 'embedding',
+})
+
+// 第一次加载
+const first = ref(true)
+
+const cloneForm = ref<any>({})
+
+const popoverVisible = ref(false)
+const questionTitle = ref('')
+
+const isDisabledChart = computed(() => !inputValue.value)
+
+const isApplication = computed(() => {
+  return activeMenu.includes('application')
+})
+const isDataset = computed(() => {
+  return activeMenu.includes('knowledge')
+})
+
+function changeHandle(val: string) {
+  if (val === 'keywords') {
+    cloneForm.value.similarity = 0
+  } else {
+    cloneForm.value.similarity = 0.6
+  }
+}
+
+function settingChange(val: string) {
+  if (val === 'open') {
+    popoverVisible.value = true
+    cloneForm.value = cloneDeep(formInline.value)
+  } else if (val === 'close') {
+    popoverVisible.value = false
+    formInline.value = cloneDeep(cloneForm.value)
+  }
+}
+
+function editParagraph(row: any) {
+  title.value = t('views.paragraph.paragraphDetail')
+  ParagraphDialogRef.value.open(row)
+}
+
+function sendChatHandle(event: any) {
+  if (!event?.ctrlKey && !event?.shiftKey && !event?.altKey && !event?.metaKey) {
+    // 如果没有按下组合键，则会阻止默认事件
+    event.preventDefault()
+    if (!isDisabledChart.value && !loading.value) {
+      getHitTestList()
+    }
+  } else {
+    // 如果同时按下ctrl/shift/cmd/opt +enter，则会换行
+    insertNewlineAtCursor(event)
+  }
+}
+const insertNewlineAtCursor = (event?: any) => {
+  const textarea = quickInputRef.value.$el.querySelector(
+    '.el-textarea__inner',
+  ) as HTMLTextAreaElement
+  const startPos = textarea.selectionStart
+  const endPos = textarea.selectionEnd
+  // 阻止默认行为（避免额外的换行符）
+  event.preventDefault()
+  // 在光标处插入换行符
+  inputValue.value = inputValue.value.slice(0, startPos) + '\n' + inputValue.value.slice(endPos)
+  nextTick(() => {
+    textarea.setSelectionRange(startPos + 1, startPos + 1) // 光标定位到换行后位置
+  })
+}
+
+function getHitTestList() {
+  const obj = {
+    query_text: inputValue.value,
+    ...formInline.value,
+  }
+  if (isDataset.value) {
+    KnowledgeApi.getKnowledgeHitTest(id, obj, loading).then((res) => {
+      paragraphDetail.value = res.data && arraySort(res.data, 'comprehensive_score', true)
+      questionTitle.value = inputValue.value
+      inputValue.value = ''
+      first.value = false
+    })
+  } else if (isApplication.value) {
+    // applicationApi.getApplicationHitTest(id, obj, loading).then((res) => {
+    //   paragraphDetail.value = res.data && arraySort(res.data, 'comprehensive_score', true)
+    //   questionTitle.value = inputValue.value
+    //   inputValue.value = ''
+    //   first.value = false
+    // })
+  }
+}
+
+function refresh(data: any) {
+  if (data) {
+    const obj = paragraphDetail.value.filter((v) => v.id === data.id)[0]
+    obj.content = data.content
+    obj.title = data.title
+  } else {
+    paragraphDetail.value = []
+    getHitTestList()
+  }
+}
+
+onMounted(() => {})
+</script>
+<style lang="scss" scoped>
+.hit-test {
+  .question-title {
+    .avatar {
+      float: left;
+    }
+    .content {
+      padding-left: 40px;
+      .text {
+        padding: 6px 0;
+        height: 34px;
+        box-sizing: border-box;
+      }
+    }
+  }
+
+  &__operate {
+    .operate-textarea {
+      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+      background-color: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #ffffff;
+      box-sizing: border-box;
+
+      &:has(.el-textarea__inner:focus) {
+        border: 1px solid var(--el-color-primary);
+      }
+
+      :deep(.el-textarea__inner) {
+        border-radius: 8px !important;
+        box-shadow: none;
+        resize: none;
+        padding: 12px 16px;
+      }
+      .operate {
+        padding: 6px 10px;
+        .sent-button {
+          max-height: none;
+          .el-icon {
+            font-size: 24px;
+          }
+        }
+        :deep(.el-loading-spinner) {
+          margin-top: -15px;
+          .circular {
+            width: 31px;
+            height: 31px;
+          }
+        }
+      }
+    }
+  }
+}
+.hit-test {
+  &__header {
+    position: absolute;
+    right: calc(var(--app-base-px) * 3);
+  }
+
+  .hit-test-height {
+    height: calc(100vh - 300px);
+  }
+  .document-card {
+    height: 210px;
+    border: 1px solid var(--app-layout-bg-color);
+    &:hover {
+      background: #ffffff;
+      border: 1px solid var(--el-border-color);
+    }
+    &.disabled {
+      background: var(--app-layout-bg-color);
+      border: 1px solid var(--app-layout-bg-color);
+      :deep(.description) {
+        color: var(--app-border-color-dark);
+      }
+      :deep(.title) {
+        color: var(--app-border-color-dark);
+      }
+    }
+    :deep(.description) {
+      -webkit-line-clamp: 5 !important;
+      height: 110px;
+    }
+    .active-button {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+    }
+  }
+}
+</style>

ui/src/views/resource-management/knowledge/ImportDocumentKnowledge.vue

@@ -0,0 +1,290 @@
+<template>
+  <LayoutContainer :header="$t('views.document.importDocument')" class="create-knowledge">
+    <template #backButton>
+      <back-button @click="back"></back-button>
+    </template>
+    <div class="create-knowledge__main flex" v-loading="loading">
+      <div class="create-knowledge__component main-calc-height">
+        <div class="upload-document p-24" style="min-width: 850px">
+          <h4 class="title-decoration-1 mb-8">
+            {{ $t('views.document.feishu.selectDocument') }}
+          </h4>
+          <el-form
+            ref="FormRef"
+            :model="form"
+            :rules="rules"
+            label-position="top"
+            require-asterisk-position="right"
+          >
+            <div class="mt-16 mb-16">
+              <el-radio-group v-model="form.fileType" class="app-radio-button-group">
+                <el-radio-button value="txt"
+                  >{{ $t('views.document.fileType.txt.label') }}
+                </el-radio-button>
+              </el-radio-group>
+            </div>
+            <div class="update-info flex p-8-12 border-r-4 mb-16">
+              <div class="mt-4">
+                <AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
+              </div>
+              <div class="ml-16 lighter">
+                <p>{{ $t('views.document.feishu.tip1') }}</p>
+                <p>{{ $t('views.document.feishu.tip2') }}</p>
+              </div>
+            </div>
+            <div class="card-never border-r-4 mb-16">
+              <el-checkbox
+                v-model="allCheck"
+                :label="$t('views.document.feishu.allCheck')"
+                size="large"
+                class="ml-24"
+                @change="handleAllCheckChange"
+              />
+            </div>
+            <div style="height: calc(100vh - 450px)">
+              <el-scrollbar>
+                <el-tree
+                  :props="props"
+                  :load="loadNode"
+                  lazy
+                  show-checkbox
+                  node-key="token"
+                  ref="treeRef"
+                >
+                  <template #default="{ node, data }">
+                    <div class="custom-tree-node flex align-center lighter">
+                      <img
+                        src="@/assets/fileType/file-icon.svg"
+                        alt=""
+                        height="20"
+                        v-if="data.type === 'folder'"
+                      />
+                      <img
+                        src="@/assets/fileType/docx-icon.svg"
+                        alt=""
+                        height="22"
+                        v-else-if="data.type === 'docx' || data.name.endsWith('.docx')"
+                      />
+                      <img
+                        src="@/assets/fileType/xlsx-icon.svg"
+                        alt=""
+                        height="22"
+                        v-else-if="data.type === 'sheet' || data.name.endsWith('.xlsx')"
+                      />
+                      <img
+                        src="@/assets/fileType/xls-icon.svg"
+                        alt=""
+                        height="22"
+                        v-else-if="data.name.endsWith('xls')"
+                      />
+                      <img
+                        src="@/assets/fileType/csv-icon.svg"
+                        alt=""
+                        height="22"
+                        v-else-if="data.name.endsWith('csv')"
+                      />
+                      <img
+                        src="@/assets/fileType/pdf-icon.svg"
+                        alt=""
+                        height="22"
+                        v-else-if="data.name.endsWith('.pdf')"
+                      />
+                      <img
+                        src="@/assets/fileType/html-icon.svg"
+                        alt=""
+                        height="22"
+                        v-else-if="data.name.endsWith('.html')"
+                      />
+                      <img
+                        src="@/assets/fileType/txt-icon.svg"
+                        alt=""
+                        height="22"
+                        v-else-if="data.name.endsWith('.txt')"
+                      />
+                      <img
+                        src="@/assets/fileType/zip-icon.svg"
+                        alt=""
+                        height="22"
+                        v-else-if="data.name.endsWith('.zip')"
+                      />
+                      <img
+                        src="@/assets/fileType/md-icon.svg"
+                        alt=""
+                        height="22"
+                        v-else-if="data.name.endsWith('.md')"
+                      />
+
+                      <span class="ml-4">{{ node.label }}</span>
+                    </div>
+                  </template>
+                </el-tree>
+              </el-scrollbar>
+            </div>
+          </el-form>
+        </div>
+      </div>
+    </div>
+    <div class="create-knowledge__footer text-right border-t">
+      <el-button @click="router.go(-1)">{{ $t('common.cancel') }}</el-button>
+
+      <el-button @click="submit" type="primary" :disabled="disabled">
+        {{ $t('views.document.buttons.import') }}
+      </el-button>
+    </div>
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, reactive, computed, onUnmounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { MsgConfirm, MsgSuccess, MsgWarning } from '@/utils/message'
+import { getImgUrl } from '@/utils/utils'
+import { t } from '@/locales'
+import type Node from 'element-plus/es/components/tree/src/model/node'
+import knowledgeApi from '@/api/resource-management/knowledge'
+
+const router = useRouter()
+const route = useRoute()
+const {
+  query: { id, folder_token }, // id为knowledgeID，有id的是上传文档 folder_token为飞书文件夹token
+} = route
+const knowledgeId = id as string
+const folderToken = folder_token as string
+
+const loading = ref(false)
+const disabled = ref(false)
+const allCheck = ref(false)
+const treeRef = ref<any>(null)
+
+interface Tree {
+  name: string
+  leaf?: boolean
+  type: string
+  token: string
+  is_exist: boolean
+}
+
+const form = ref({
+  fileType: 'txt',
+  fileList: [] as any,
+})
+
+const rules = reactive({
+  fileList: [
+    { required: true, message: t('views.document.upload.requiredMessage'), trigger: 'change' },
+  ],
+})
+
+const props = {
+  label: 'name',
+  children: 'zones',
+  isLeaf: (data: any) => data.type !== 'folder',
+  disabled: (data: any) => data.is_exist,
+}
+
+const loadNode = (node: Node, resolve: (nodeData: Tree[]) => void) => {
+  const token = node.level === 0 ? folderToken : node.data.token // 根节点使用 folder_token，其他节点使用 node.data.token
+  knowledgeApi
+    .getLarkDocumentList(knowledgeId, token, {}, loading)
+    .then((res: any) => {
+      const nodes = res.data.files as Tree[]
+      resolve(nodes)
+      nodes.forEach((childNode) => {
+        if (childNode.is_exist) {
+          treeRef.value?.setChecked(childNode.token, true, false)
+        }
+      })
+    })
+
+    .catch((err) => {
+      console.error('Failed to load tree nodes:', err)
+    })
+}
+
+const handleAllCheckChange = (checked: boolean) => {
+  if (checked) {
+    // 获取所有已加载的节点
+    const nodes = Object.values(treeRef.value?.store.nodesMap || {}) as any[]
+    nodes.forEach((node) => {
+      // 只选择未禁用且是文件的节点
+      if (!node.disabled) {
+        treeRef.value?.setChecked(node.data, true, false)
+      }
+    })
+  } else {
+    treeRef.value?.setCheckedKeys([])
+  }
+}
+
+function submit() {
+  loading.value = true
+  disabled.value = true
+  // 选中的节点的token
+  const checkedNodes = treeRef.value?.getCheckedNodes() || []
+  const filteredNodes = checkedNodes.filter((node: any) => !node.is_exist)
+  const newList = filteredNodes.map((node: any) => {
+    return {
+      name: node.name,
+      token: node.token,
+      type: node.type,
+    }
+  })
+  if (newList.length === 0) {
+    disabled.value = false
+    MsgWarning(t('views.document.feishu.errorMessage1'))
+    loading.value = false
+    return
+  }
+  knowledgeApi
+    .importLarkDocument(knowledgeId, newList, loading)
+    .then((res) => {
+      MsgSuccess(t('views.document.tip.importMessage'))
+      disabled.value = false
+      router.go(-1)
+    })
+    .catch((err) => {
+      console.error('Failed to load tree nodes:', err)
+    })
+    .finally(() => {
+      disabled.value = false
+    })
+  loading.value = false
+}
+
+function back() {
+  router.go(-1)
+}
+</script>
+<style lang="scss" scoped>
+.create-knowledge {
+  &__component {
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  &__footer {
+    padding: 16px 24px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background: #ffffff;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .upload-document {
+    width: 70%;
+    margin: 0 auto;
+    margin-bottom: 20px;
+  }
+}
+
+.xlsx-icon {
+  svg {
+    width: 24px;
+    height: 24px;
+    stroke: #000000 !important;
+    fill: #ffffff !important;
+  }
+}
+</style>

ui/src/views/resource-management/knowledge/KnowledgeSetting.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="p-16-24">
+    <h2 class="mb-16">{{ $t('common.setting') }}</h2>
+    <el-card style="--el-card-padding: 0">
+      <div class="knowledge-setting main-calc-height">
+        <el-scrollbar>
+          <div class="p-24" v-loading="loading">
+            <h4 class="title-decoration-1 mb-16">
+              {{ $t('common.info') }}
+            </h4>
+            <BaseForm ref="BaseFormRef" :data="detail" />
+
+            <el-form
+              ref="webFormRef"
+              :rules="rules"
+              :model="form"
+              label-position="top"
+              require-asterisk-position="right"
+            >
+              <el-form-item :label="$t('views.knowledge.knowledgeType.label')" required>
+                <el-card
+                  shadow="never"
+                  class="mb-8 w-full"
+                  style="line-height: 22px"
+                  v-if="detail.type === 0"
+                >
+                  <div class="flex align-center">
+                    <el-avatar class="mr-8 avatar-blue" shape="square" :size="32">
+                      <img src="@/assets/knowledge/icon_document.svg" style="width: 58%" alt="" />
+                    </el-avatar>
+                    <div>
+                      <div>{{ $t('views.knowledge.knowledgeType.generalKnowledge') }}</div>
+                      <el-text type="info"
+                        >{{ $t('views.knowledge.knowledgeType.generalInfo') }}
+                      </el-text>
+                    </div>
+                  </div>
+                </el-card>
+                <el-card
+                  shadow="never"
+                  class="mb-8 w-full"
+                  style="line-height: 22px"
+                  v-if="detail?.type === 1"
+                >
+                  <div class="flex align-center">
+                    <el-avatar class="mr-8 avatar-purple" shape="square" :size="32">
+                      <img src="@/assets/knowledge/icon_web.svg" style="width: 58%" alt="" />
+                    </el-avatar>
+                    <div>
+                      <div>{{ $t('views.knowledge.knowledgeType.webKnowledge') }}</div>
+                      <el-text type="info">
+                        {{ $t('views.knowledge.knowledgeType.webInfo') }}
+                      </el-text>
+                    </div>
+                  </div>
+                </el-card>
+                <el-card
+                  shadow="never"
+                  class="mb-8 w-full"
+                  style="line-height: 22px"
+                  v-if="detail?.type === 2"
+                >
+                  <div class="flex align-center">
+                    <el-avatar shape="square" :size="32" style="background: none">
+                      <img src="@/assets/knowledge/logo_lark.svg" style="width: 100%" alt="" />
+                    </el-avatar>
+                    <div>
+                      <p>
+                        <el-text>{{ $t('views.knowledge.knowledgeType.larkKnowledge') }}</el-text>
+                      </p>
+                      <el-text type="info"
+                        >{{ $t('views.knowledge.knowledgeType.larkInfo') }}
+                      </el-text>
+                    </div>
+                  </div>
+                </el-card>
+              </el-form-item>
+              <el-form-item
+                :label="$t('views.knowledge.form.source_url.label')"
+                prop="source_url"
+                v-if="detail.type === 1"
+              >
+                <el-input
+                  v-model="form.source_url"
+                  :placeholder="$t('views.knowledge.form.source_url.placeholder')"
+                  @blur="form.source_url = form.source_url.trim()"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('views.knowledge.form.selector.label')"
+                v-if="detail.type === 1"
+              >
+                <el-input
+                  v-model="form.selector"
+                  :placeholder="$t('views.knowledge.form.selector.placeholder')"
+                  @blur="form.selector = form.selector.trim()"
+                />
+              </el-form-item>
+              <el-form-item label="App ID" prop="app_id" v-if="detail.type === 2">
+                <el-input
+                  v-model="form.app_id"
+                  :placeholder="
+                    $t('views.application.applicationAccess.larkSetting.appIdPlaceholder')
+                  "
+                />
+              </el-form-item>
+              <el-form-item label="App Secret" prop="app_id" v-if="detail.type === 2">
+                <el-input
+                  v-model="form.app_secret"
+                  type="password"
+                  show-password
+                  :placeholder="
+                    $t('views.application.applicationAccess.larkSetting.appSecretPlaceholder')
+                  "
+                />
+              </el-form-item>
+              <el-form-item label="Folder Token" prop="folder_token" v-if="detail.type === 2">
+                <el-input
+                  v-model="form.folder_token"
+                  :placeholder="
+                    $t('views.application.applicationAccess.larkSetting.folderTokenPlaceholder')
+                  "
+                />
+              </el-form-item>
+
+              <div v-if="detail.type === 0">
+                <h4 class="title-decoration-1 mb-16">
+                  {{ $t('common.otherSetting') }}
+                </h4>
+              </div>
+              <el-form-item :label="$t('上传的每个文档最大限制')">
+                <el-slider
+                  v-model="form.file_count_limit"
+                  show-input
+                  :show-input-controls="false"
+                  :min="1"
+                  :max="1000"
+                  class="custom-slider"
+                />
+              </el-form-item>
+            </el-form>
+            <div class="text-right">
+              <el-button @click="submit" type="primary"> {{ $t('common.save') }}</el-button>
+            </div>
+          </div>
+        </el-scrollbar>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import BaseForm from '@/views/resource-management/knowledge/component/BaseForm.vue'
+import KnowledgeApi from '@/api/resource-management/knowledge'
+import type { ApplicationFormType } from '@/api/type/application'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { isAppIcon } from '@/utils/common'
+import useStore from '@/stores/modules-resource-management'
+import { t } from '@/locales'
+
+const route = useRoute()
+const {
+  params: { id },
+} = route as any
+
+const { knowledge } = useStore()
+const webFormRef = ref()
+const BaseFormRef = ref()
+const loading = ref(false)
+const detail = ref<any>({})
+const cloneModelId = ref('')
+
+const form = ref<any>({
+  source_url: '',
+  selector: '',
+  app_id: '',
+  app_secret: '',
+  folder_token: '',
+  file_count_limit: 100,
+})
+
+const rules = reactive({
+  source_url: [
+    {
+      required: true,
+      message: t('views.knowledge.form.source_url.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
+  app_id: [
+    {
+      required: true,
+      message: t('views.application.applicationAccess.larkSetting.appIdPlaceholder'),
+      trigger: 'blur',
+    },
+  ],
+  app_secret: [
+    {
+      required: true,
+      message: t('views.application.applicationAccess.larkSetting.appSecretPlaceholder'),
+      trigger: 'blur',
+    },
+  ],
+  folder_token: [
+    {
+      required: true,
+      message: t('views.application.applicationAccess.larkSetting.folderTokenPlaceholder'),
+      trigger: 'blur',
+    },
+  ],
+})
+
+async function submit() {
+  if (await BaseFormRef.value?.validate()) {
+    await webFormRef.value.validate((valid: any) => {
+      if (valid) {
+        const obj =
+          detail.value.type === 1 || detail.value.type === 2
+            ? {
+                meta: form.value,
+                ...BaseFormRef.value.form,
+              }
+            : {
+                ...BaseFormRef.value.form,
+              }
+
+        if (cloneModelId.value !== BaseFormRef.value.form.embedding_mode_id) {
+          MsgConfirm(t('common.tip'), t('views.knowledge.tip.updateModeMessage'), {
+            confirmButtonText: t('views.knowledge.setting.vectorization'),
+          })
+            .then(() => {
+              if (detail.value.type === 2) {
+                // KnowledgeApi.putLarkKnowledge(id, obj, loading).then((res) => {
+                //   KnowledgeApi.putReEmbeddingKnowledge(id).then(() => {
+                //     MsgSuccess(t('common.saveSuccess'))
+                //   })
+                // })
+              } else {
+                KnowledgeApi.putKnowledge(id, obj, loading).then((res) => {
+                  KnowledgeApi.putReEmbeddingKnowledge(id).then(() => {
+                    MsgSuccess(t('common.saveSuccess'))
+                  })
+                })
+              }
+            })
+            .catch(() => {})
+        } else {
+          if (detail.value.type === 2) {
+            // KnowledgeApi.putLarkKnowledge(id, obj, loading).then((res) => {
+            //   KnowledgeApi.putReEmbeddingKnowledge(id).then(() => {
+            //     MsgSuccess(t('common.saveSuccess'))
+            //   })
+            // })
+          } else {
+            KnowledgeApi.putKnowledge(id, obj, loading).then((res) => {
+              MsgSuccess(t('common.saveSuccess'))
+            })
+          }
+        }
+      }
+    })
+  }
+}
+
+function getDetail() {
+  knowledge.asyncGetKnowledgeDetail(id, loading).then((res: any) => {
+    detail.value = res.data
+    cloneModelId.value = res.data?.embedding_mode_id
+    if (detail.value.type === '1' || detail.value.type === '2') {
+      form.value = res.data.meta
+    }
+  })
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+<style lang="scss" scoped>
+.knowledge-setting {
+  width: 70%;
+  margin: 0 auto;
+}
+</style>

ui/src/views/resource-management/knowledge/component/BaseForm.vue

@@ -0,0 +1,147 @@
+<template>
+  <el-form
+    ref="FormRef"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+    require-asterisk-position="right"
+    v-loading="loading"
+  >
+    <el-form-item :label="$t('views.knowledge.form.knowledgeName.label')" prop="name">
+      <el-input
+        v-model="form.name"
+        :placeholder="$t('views.knowledge.form.knowledgeName.placeholder')"
+        maxlength="64"
+        show-word-limit
+        @blur="form.name = form.name.trim()"
+      />
+    </el-form-item>
+    <el-form-item :label="$t('views.knowledge.form.knowledgeDescription.label')" prop="desc">
+      <el-input
+        v-model="form.desc"
+        type="textarea"
+        :placeholder="$t('views.knowledge.form.knowledgeDescription.placeholder')"
+        maxlength="256"
+        show-word-limit
+        :autosize="{ minRows: 3 }"
+        @blur="form.desc = form.desc.trim()"
+      />
+    </el-form-item>
+    <el-form-item
+      :label="$t('views.knowledge.form.EmbeddingModel.label')"
+      prop="embedding_model_id"
+    >
+      <ModelSelect
+        v-model="form.embedding"
+        :placeholder="$t('views.knowledge.form.EmbeddingModel.placeholder')"
+        :options="modelOptions"
+        :model-type="'EMBEDDING'"
+        showFooter
+      ></ModelSelect>
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+import {ref, reactive, onMounted, onUnmounted, computed, watch} from 'vue'
+import {groupBy} from 'lodash'
+import useStore from '@/stores/modules-resource-management'
+import type {knowledgeData} from '@/api/type/knowledge'
+import {t} from '@/locales'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+    },
+  },
+})
+const {model} = useStore()
+const form = ref<knowledgeData>({
+  name: '',
+  desc: '',
+  embedding: '',
+})
+
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: t('views.knowledge.form.knowledgeName.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
+  desc: [
+    {
+      required: true,
+      message: t('views.knowledge.form.knowledgeDescription.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
+  embedding: [
+    {
+      required: true,
+      message: t('views.knowledge.form.EmbeddingModel.requiredMessage'),
+      trigger: 'change',
+    },
+  ],
+})
+
+const FormRef = ref()
+const loading = ref(false)
+const modelOptions = ref<any>([])
+
+watch(
+  () => props.data,
+  (value) => {
+    if (value && JSON.stringify(value) !== '{}') {
+      form.value.name = value.name
+      form.value.desc = value.desc
+      form.value.embedding = value.embedding
+    }
+  },
+  {
+    immediate: true,
+  },
+)
+
+/*
+  表单校验
+*/
+function validate() {
+  if (!FormRef.value) return
+  return FormRef.value.validate((valid: any) => {
+    return valid
+  })
+}
+
+function getModel() {
+  loading.value = true
+  model
+    .asyncGetModel({model_type: 'EMBEDDING'})
+    .then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+onMounted(() => {
+  getModel()
+})
+onUnmounted(() => {
+  form.value = {
+    name: '',
+    desc: '',
+    embedding: '',
+  }
+  FormRef.value?.clearValidate()
+})
+
+defineExpose({
+  validate,
+  form,
+})
+</script>
+<style scoped lang="scss"></style>

ui/src/views/resource-management/knowledge/component/EditParagraphDialog.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-dialog
+    :title="$t('views.paragraph.editParagraph')"
+    v-model="dialogVisible"
+    width="80%"
+    destroy-on-close
+    class="paragraph-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-row v-if="isConnect">
+      <el-col :span="18" class="p-24">
+        <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="true" />
+      </el-col>
+      <el-col :span="6" class="border-l" style="width: 300px">
+        <p class="bold title p-24" style="padding-bottom: 0">
+          <span class="flex align-center">
+            <span>{{ $t('views.paragraph.relatedProblem.title') }}</span>
+            <el-divider direction="vertical" class="mr-4" />
+            <el-button text @click="addProblem">
+              <el-icon><Plus /></el-icon>
+            </el-button>
+          </span>
+        </p>
+        <el-scrollbar height="500px">
+          <div class="p-24" style="padding-top: 16px">
+            <el-input
+              v-if="isAddProblem"
+              v-model="problemValue"
+              :placeholder="$t('views.paragraph.relatedProblem.placeholder')"
+              @change="addProblemHandle"
+              @blur="isAddProblem = false"
+              ref="inputRef"
+              class="mb-8"
+            />
+
+            <template v-for="(item, index) in detail.problem_list" :key="index">
+              <TagEllipsis
+                @close="delProblemHandle(item, index)"
+                class="question-tag"
+                type="info"
+                effect="plain"
+                closable
+              >
+                <auto-tooltip :content="item.content">
+                  {{ item.content }}
+                </auto-tooltip>
+              </TagEllipsis>
+            </template>
+          </div>
+        </el-scrollbar>
+      </el-col>
+    </el-row>
+    <div v-else class="p-24">
+      <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="true" />
+    </div>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submitHandle"> {{ $t('common.save') }} </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import { cloneDeep } from 'lodash'
+import ParagraphForm from '@/views/resource-management/paragraph/component/ParagraphForm.vue'
+
+const props = defineProps({
+  isConnect: Boolean
+})
+
+const emit = defineEmits(['updateContent'])
+
+const dialogVisible = ref<boolean>(false)
+
+const detail = ref<any>({})
+
+const paragraphFormRef = ref()
+const inputRef = ref()
+
+const isAddProblem = ref(false)
+
+const problemValue = ref('')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    detail.value = {}
+  }
+})
+
+const open = (data: any) => {
+  detail.value = cloneDeep(data)
+  dialogVisible.value = true
+}
+
+function delProblemHandle(item: any, index: number) {
+  detail.value.problem_list.splice(index, 1)
+}
+function addProblemHandle() {
+  if (problemValue.value.trim()) {
+    if (
+      !detail.value?.problem_list.some((item: any) => item.content === problemValue.value.trim())
+    ) {
+      detail.value?.problem_list?.push({
+        content: problemValue.value.trim()
+      })
+    }
+
+    problemValue.value = ''
+    isAddProblem.value = false
+  }
+}
+function addProblem() {
+  isAddProblem.value = true
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+
+const submitHandle = async () => {
+  if (await paragraphFormRef.value?.validate()) {
+    emit('updateContent', {
+      problem_list: detail.value.problem_list,
+      ...paragraphFormRef.value?.form
+    })
+    dialogVisible.value = false
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/knowledge/component/ParagraphList.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <InfiniteScroll
+      :size="paragraph_list.length"
+      :total="modelValue.length"
+      :page_size="page_size"
+      v-model:current_page="current_page"
+      @load="next()"
+      :loading="loading"
+    >
+      <el-card
+        v-for="(child, cIndex) in paragraph_list"
+        :key="cIndex"
+        shadow="never"
+        class="card-never mb-16"
+      >
+        <div class="flex-between">
+          <span>{{ child.title || '-' }}</span>
+          <div>
+            <!-- 编辑分段按钮 -->
+            <el-button link @click="editHandle(child, cIndex)">
+              <el-icon><EditPen /></el-icon>
+            </el-button>
+            <!-- 删除分段按钮  -->
+            <el-button link @click="deleteHandle(child, cIndex)">
+              <el-icon><Delete /></el-icon>
+            </el-button>
+          </div>
+        </div>
+        <div class="lighter mt-12">
+          {{ child.content }}
+        </div>
+        <div class="lighter mt-12">
+          <el-text type="info">
+            {{ child.content.length }} {{ $t('views.paragraph.character_count') }}
+          </el-text>
+        </div>
+      </el-card>
+    </InfiniteScroll>
+
+    <EditParagraphDialog
+      ref="EditParagraphDialogRef"
+      @updateContent="updateContent"
+      :isConnect="isConnect"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { cloneDeep } from 'lodash'
+import { ref, computed } from 'vue'
+import EditParagraphDialog from './EditParagraphDialog.vue'
+import { MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
+const page_size = ref<number>(30)
+const current_page = ref<number>(1)
+const currentCIndex = ref<number>(0)
+const EditParagraphDialogRef = ref()
+const emit = defineEmits(['update:modelValue'])
+const loading = ref<boolean>(false)
+const editHandle = (item: any, cIndex: number) => {
+  currentCIndex.value = cIndex
+  EditParagraphDialogRef.value.open(item)
+}
+
+const props = defineProps<{ modelValue: Array<any>; isConnect: boolean }>()
+
+const paragraph_list = computed(() => {
+  return props.modelValue.slice(0, page_size.value * (current_page.value - 1) + page_size.value)
+})
+
+const next = () => {
+  loading.value = true
+  current_page.value += 1
+  loading.value = false
+}
+
+const updateContent = (data: any) => {
+  const new_value = [...props.modelValue]
+  if (
+    props.isConnect &&
+    data.title &&
+    !data?.problem_list.some((item: any) => item.content === data.title.trim())
+  ) {
+    data['problem_list'].push({
+      content: data.title.trim()
+    })
+  }
+  new_value[currentCIndex.value] = cloneDeep(data)
+  emit('update:modelValue', new_value)
+}
+
+const deleteHandle = (item: any, cIndex: number) => {
+  MsgConfirm(
+    `${t('views.paragraph.delete.confirmTitle')}${item.title || '-'} ?`,
+    t('views.paragraph.delete.confirmMessage'),
+    {
+      confirmButtonText: t('common.confirm'),
+      confirmButtonClass: 'color-danger'
+    }
+  )
+    .then(() => {
+      const new_value = [...props.modelValue]
+      new_value.splice(cIndex, 1)
+      emit('update:modelValue', new_value)
+    })
+    .catch(() => {})
+}
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/knowledge/component/ParagraphPreview.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-tabs v-model="activeName" class="paragraph-tabs">
+    <template v-for="(item, index) in data" :key="index">
+      <el-tab-pane :label="item.name" :name="index">
+        <template #label>
+          <div class="flex-center">
+            <img :src="getImgUrl(item && item?.name)" alt="" height="16" />
+            <span class="ml-4">{{ item?.name }}</span>
+          </div>
+        </template>
+        <div class="mb-16">
+          <el-text type="info"
+            >{{ item.content.length }} {{ $t('views.paragraph.title') }}</el-text
+          >
+        </div>
+        <div class="paragraph-list" v-if="activeName == index">
+          <el-scrollbar>
+            <ParagraphList v-model="item.content" :isConnect="isConnect"> </ParagraphList>
+          </el-scrollbar>
+        </div>
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getImgUrl } from '@/utils/utils'
+import ParagraphList from './ParagraphList.vue'
+
+defineProps({
+  data: {
+    type: Array<any>,
+    default: () => []
+  },
+  isConnect: Boolean
+})
+
+const activeName = ref(0)
+</script>
+<style scoped lang="scss">
+.paragraph-tabs {
+  :deep(.el-tabs__item) {
+    background: var(--app-text-color-light-1);
+    margin: 4px;
+    border-radius: 4px;
+    padding: 5px 10px 5px 8px !important;
+    height: auto;
+    &:nth-child(2) {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+    &.is-active {
+      border: 1px solid var(--el-color-primary);
+      background: var(--el-color-primary-light-9);
+      color: var(--el-text-color-primary);
+    }
+  }
+  :deep(.el-tabs__nav-wrap::after) {
+    display: none;
+  }
+  :deep(.el-tabs__active-bar) {
+    display: none;
+  }
+}
+.paragraph-list {
+  height: calc(var(--create-dataset-height) - 101px);
+}
+</style>

ui/src/views/resource-management/knowledge/component/SyncWebDialog.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-dialog
+    :title="$t('views.knowledge.syncWeb.title')"
+    v-model="dialogVisible"
+    width="600px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+  >
+    <p class="mb-8">{{ $t('views.knowledge.syncWeb.syncMethod') }}</p>
+    <el-radio-group v-model="method" class="card__radio">
+      <el-card shadow="never" class="mb-16" :class="method === 'replace' ? 'active' : ''">
+        <el-radio value="replace" size="large">
+          <p class="mb-4">{{ $t('views.knowledge.syncWeb.replace') }}</p>
+          <el-text type="info">{{ $t('views.knowledge.syncWeb.replaceText') }}</el-text>
+        </el-radio>
+      </el-card>
+
+      <el-card shadow="never" class="mb-16" :class="method === 'complete' ? 'active' : ''">
+        <el-radio value="complete" size="large">
+          <p class="mb-4">{{ $t('views.knowledge.syncWeb.complete') }}</p>
+          <el-text type="info">{{ $t('views.knowledge.syncWeb.completeText') }}</el-text>
+        </el-radio>
+      </el-card>
+    </el-radio-group>
+    <p class="color-danger">{{ $t('views.knowledge.syncWeb.tip') }}</p>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit" :loading="loading">
+          {{ $t('common.confirm') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import useStore from '@/stores/modules-resource-management'
+const { knowledge } = useStore()
+
+const emit = defineEmits(['refresh'])
+const loading = ref<boolean>(false)
+const method = ref('replace')
+const knowledgeId = ref('')
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    method.value = 'replace'
+  }
+})
+
+const open = (id: string) => {
+  knowledgeId.value = id
+  dialogVisible.value = true
+}
+
+const submit = () => {
+  knowledge.asyncSyncKnowledge(knowledgeId.value, method.value, loading).then((res: any) => {
+    emit('refresh', res.data)
+    dialogVisible.value = false
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.select-provider {
+  font-size: 16px;
+  color: rgba(100, 106, 115, 1);
+  font-weight: 400;
+  line-height: 24px;
+  cursor: pointer;
+  &:hover {
+    color: var(--el-color-primary);
+  }
+}
+.active-breadcrumb {
+  font-size: 16px;
+  color: rgba(31, 35, 41, 1);
+  font-weight: 500;
+  line-height: 24px;
+}
+</style>

ui/src/views/resource-management/knowledge/create-component/CreateKnowledgeDialog.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-dialog
+    :title="$t('views.knowledge.knowledgeType.createGeneralKnowledge')"
+    v-model="dialogVisible"
+    width="720"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <!-- 基本信息 -->
+    <BaseForm ref="BaseFormRef" v-if="dialogVisible" />
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false" :loading="loading">
+          {{ $t('common.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submitHandle" :loading="loading">
+          {{ $t('common.create') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import BaseForm from '@/views/resource-management/knowledge/component/BaseForm.vue'
+import KnowledgeApi from '@/api/resource-management/knowledge'
+import { MsgSuccess, MsgAlert } from '@/utils/message'
+import { t } from '@/locales'
+const emit = defineEmits(['refresh'])
+
+const router = useRouter()
+const BaseFormRef = ref()
+
+const loading = ref(false)
+const dialogVisible = ref<boolean>(false)
+const currentFolder = ref<any>(null)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    currentFolder.value = null
+  }
+})
+
+const open = (folder: string) => {
+  currentFolder.value = folder
+  dialogVisible.value = true
+}
+
+const submitHandle = async () => {
+  if (await BaseFormRef.value?.validate()) {
+    const obj = {
+      folder_id: currentFolder.value?.id,
+      ...BaseFormRef.value.form,
+    }
+    KnowledgeApi.postKnowledge(obj, loading).then((res) => {
+      MsgSuccess(t('common.createSuccess'))
+      // router.push({ path: `/knowledge/${res.data.id}/${currentFolder.value.id}/document` })
+      emit('refresh')
+    })
+  } else {
+    return false
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/knowledge/create-component/CreateLarkKnowledgeDialog.vue

@@ -0,0 +1,161 @@
+<template>
+  <el-dialog
+    :title="$t('views.knowledge.knowledgeType.createLarkKnowledge')"
+    v-model="dialogVisible"
+    width="720"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <!-- 基本信息 -->
+    <BaseForm ref="BaseFormRef" v-if="dialogVisible" />
+    <el-form
+      ref="DatasetFormRef"
+      :rules="rules"
+      :model="datasetForm"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <el-form-item label="App ID" prop="app_id">
+        <el-input
+          v-model="datasetForm.app_id"
+          :placeholder="$t('views.application.applicationAccess.larkSetting.appIdPlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item label="App Secret" prop="app_secret">
+        <el-input
+          v-model="datasetForm.app_secret"
+          type="password"
+          show-password
+          :placeholder="$t('views.application.applicationAccess.larkSetting.appSecretPlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item label="Folder Token" prop="folder_token">
+        <el-input
+          v-model="datasetForm.folder_token"
+          :placeholder="
+            $t('views.application.applicationAccess.larkSetting.folderTokenPlaceholder')
+          "
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false" :loading="loading">
+          {{ $t('common.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submitHandle" :loading="loading">
+          {{ $t('common.create') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import BaseForm from '@/views/resource-management/knowledge/component/BaseForm.vue'
+import KnowledgeApi from '@/api/resource-management/knowledge'
+import { MsgSuccess, MsgAlert } from '@/utils/message'
+import { t } from '@/locales'
+import { ComplexPermission } from '@/utils/permission/type'
+const emit = defineEmits(['refresh'])
+
+const router = useRouter()
+const BaseFormRef = ref()
+const DatasetFormRef = ref()
+
+const loading = ref(false)
+const dialogVisible = ref<boolean>(false)
+
+const datasetForm = ref<any>({
+  type: '0',
+  source_url: '',
+  selector: '',
+  app_id: '',
+  app_secret: '',
+  folder_token: '',
+})
+
+const rules = reactive({
+  source_url: [
+    {
+      required: true,
+      message: t('views.knowledge.form.source_url.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
+  app_id: [
+    {
+      required: true,
+      message: t('views.application.applicationAccess.larkSetting.appIdPlaceholder'),
+      trigger: 'blur',
+    },
+  ],
+  app_secret: [
+    {
+      required: true,
+      message: t('views.application.applicationAccess.larkSetting.appSecretPlaceholder'),
+      trigger: 'blur',
+    },
+  ],
+  folder_token: [
+    {
+      required: true,
+      message: t('views.application.applicationAccess.larkSetting.folderTokenPlaceholder'),
+      trigger: 'blur',
+    },
+  ],
+  user_id: [
+    {
+      required: true,
+      message: t('views.knowledge.form.user_id.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
+  token: [
+    {
+      required: true,
+      message: t('views.knowledge.form.token.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    datasetForm.value = {
+      type: '0',
+      source_url: '',
+      selector: '',
+    }
+    DatasetFormRef.value?.clearValidate()
+  }
+})
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const submitHandle = async () => {
+  if (await BaseFormRef.value?.validate()) {
+    await DatasetFormRef.value.validate((valid: any) => {
+      if (valid) {
+        const obj = { ...BaseFormRef.value.form, ...datasetForm.value }
+        // KnowledgeApi.postLarkKnowledge(obj, loading).then((res) => {
+        //   MsgSuccess(t('common.createSuccess'))
+        //   router.push({ path: `/knowledge/${res.data.id}/document` })
+        //   emit('refresh')
+        // })
+      } else {
+        return false
+      }
+    })
+  } else {
+    return false
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/knowledge/create-component/CreateWebKnowledgeDialog.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-dialog
+    :title="$t('views.knowledge.knowledgeType.createGeneralKnowledge')"
+    v-model="dialogVisible"
+    width="720"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <!-- 基本信息 -->
+    <BaseForm ref="BaseFormRef" v-if="dialogVisible" />
+    <el-form
+      ref="KnowledgeFormRef"
+      :rules="rules"
+      :model="knowledgeForm"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('views.knowledge.form.source_url.label')" prop="source_url">
+        <el-input
+          v-model="knowledgeForm.source_url"
+          :placeholder="$t('views.knowledge.form.source_url.placeholder')"
+          @blur="knowledgeForm.source_url = knowledgeForm.source_url.trim()"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.knowledge.form.selector.label')">
+        <el-input
+          v-model="knowledgeForm.selector"
+          :placeholder="$t('views.knowledge.form.selector.placeholder')"
+          @blur="knowledgeForm.selector = knowledgeForm.selector.trim()"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false" :loading="loading">
+          {{ $t('common.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submitHandle" :loading="loading">
+          {{ $t('common.create') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import BaseForm from '@/views/resource-management/knowledge/component/BaseForm.vue'
+import KnowledgeApi from '@/api/resource-management/knowledge'
+import { MsgSuccess, MsgAlert } from '@/utils/message'
+import { t } from '@/locales'
+const emit = defineEmits(['refresh'])
+
+const router = useRouter()
+const BaseFormRef = ref()
+const KnowledgeFormRef = ref()
+
+const loading = ref(false)
+const dialogVisible = ref<boolean>(false)
+
+const knowledgeForm = ref<any>({
+  source_url: '',
+  selector: '',
+})
+
+const rules = reactive({
+  source_url: [
+    {
+      required: true,
+      message: t('views.knowledge.form.source_url.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
+})
+
+const currentFolder = ref<any>(null)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    currentFolder.value = null
+    knowledgeForm.value = {
+      source_url: '',
+      selector: '',
+    }
+    KnowledgeFormRef.value?.clearValidate()
+  }
+})
+
+const open = (folder: string) => {
+  currentFolder.value = folder
+  dialogVisible.value = true
+}
+
+const submitHandle = async () => {
+  if (await BaseFormRef.value?.validate()) {
+    await KnowledgeFormRef.value.validate((valid: any) => {
+      if (valid) {
+        const obj = {
+          folder_id: currentFolder.value?.id,
+          ...BaseFormRef.value.form,
+          ...knowledgeForm.value,
+        }
+        KnowledgeApi.postWebKnowledge(obj, loading).then((res) => {
+          MsgSuccess(t('common.createSuccess'))
+          router.push({ path: `/knowledge/resource/${res.data.id}/documentResource` })
+          emit('refresh')
+        })
+      } else {
+        return false
+      }
+    })
+  } else {
+    return false
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/knowledge/index.vue

@@ -0,0 +1,473 @@
+<template>
+  <div class="resource-manage_knowledge">
+    <div class="shared-header">
+      <span class="title">{{ t('views.system.resource_management') }}</span>
+      <el-icon size="12">
+        <rightOutlined></rightOutlined>
+      </el-icon>
+      <span class="sub-title">{{ t('views.knowledge.title') }}</span>
+    </div>
+    <div class="table-content">
+      <div class="flex-between complex-search">
+        <el-select
+          class="complex-search__left"
+          v-model="search_type"
+          style="width: 120px"
+          @change="search_type_change"
+        >
+          <el-option :label="$t('common.creator')" value="create_user" />
+
+          <el-option :label="$t('common.name')" value="name" />
+        </el-select>
+        <el-input
+          v-if="search_type === 'name'"
+          v-model="search_form.name"
+          @change="getList"
+          :placeholder="$t('common.searchBar.placeholder')"
+          style="width: 220px"
+          clearable
+        />
+        <el-select
+          v-else-if="search_type === 'create_user'"
+          v-model="search_form.create_user"
+          @change="getList"
+          clearable
+          style="width: 220px"
+        >
+          <el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.username" />
+        </el-select>
+      </div>
+      <div class="table-knowledge">
+        <el-table height="100%" :data="knowledgeList" style="width: 100%">
+          <el-table-column type="selection" width="55" />
+          <el-table-column width="220" :label="$t('common.name')">
+            <template #default="scope">
+              <div class="table-name flex align-center">
+                <el-icon size="24">
+                  <KnowledgeIcon size="24" :type="scope.row.type" />
+                </el-icon>
+                {{ scope.row.name }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            property="type"
+            :label="$t('views.application.form.appType.label')"
+            width="120"
+          />
+          <el-table-column width="100" property="workspace_id">
+            <template #header>
+              <div class="flex align-center">
+                {{ $t('views.role.member.workspace') }}
+
+                <el-popover placement="bottom">
+                  <template #reference
+                    ><el-icon style="margin-left: 4px; cursor: pointer" size="16">
+                      <AppIcon iconName="app-filter_outlined"></AppIcon> </el-icon
+                  ></template>
+                  <div>
+                    <el-checkbox
+                      v-model="checkAll"
+                      :indeterminate="isIndeterminate"
+                      @change="handleCheckAllChange"
+                    >
+                      {{ $t('views.document.feishu.allCheck') }}
+                    </el-checkbox>
+                    <el-checkbox-group
+                      v-model="checkedWorkspaces"
+                      @change="handleCheckedWorkspacesChange"
+                    >
+                      <el-checkbox
+                        v-for="workspace in workspaces"
+                        :key="workspace"
+                        :label="workspace"
+                        :value="workspace"
+                      >
+                        {{ workspace }}
+                      </el-checkbox>
+                    </el-checkbox-group>
+                  </div>
+                </el-popover>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column property="creator" :label="$t('common.creator')" />
+          <el-table-column
+            property="update_time"
+            sortable
+            width="180"
+            :formatter="formatter"
+            :label="$t('views.document.table.updateTime')"
+          />
+          <el-table-column
+            width="180"
+            property="create_time"
+            sortable
+            :formatter="formatter"
+            :label="$t('common.createTime')"
+          />
+          <el-table-column
+            class-name="operation-column_text"
+            width="120"
+            fixed="right"
+            :label="$t('common.operation')"
+          >
+            <template #default="scope">
+              <el-button
+                @click="
+                  router.push({
+                    path: `/knowledge/resource/${scope.row.id}/documentResource`,
+                  })
+                "
+                text
+                type="primary"
+              >
+                <el-icon size="16">
+                  <AppIcon iconName="app-icon-blue"></AppIcon>
+                </el-icon>
+              </el-button>
+              <el-button @click="reEmbeddingKnowledge(scope.row)" text type="primary">
+                <el-icon size="16">
+                  <AppIcon iconName="app-vectorization"></AppIcon>
+                </el-icon>
+              </el-button>
+              <el-dropdown trigger="click">
+                <el-button text @click.stop>
+                  <el-icon size="16">
+                    <MoreFilled />
+                  </el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      icon="Refresh"
+                      @click.stop="syncKnowledge(scope.row)"
+                      v-if="scope.row.type === 1"
+                      >{{ $t('views.knowledge.setting.sync') }}
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      icon="Connection"
+                      @click.stop="openGenerateDialog(scope.row)"
+                      >{{ $t('views.document.generateQuestion.title') }}</el-dropdown-item
+                    >
+                    <el-dropdown-item
+                      icon="Lock"
+                      @click.stop="openAuthorizedWorkspaceDialog(scope.row)"
+                      >{{ $t('views.system.authorized_workspace') }}</el-dropdown-item
+                    >
+                    <el-dropdown-item
+                      icon="Setting"
+                      @click.stop="
+                        router.push({
+                          path: `/knowledge/resource/${scope.row.id}/settingResource`,
+                        })
+                      "
+                    >
+                      {{ $t('common.setting') }}</el-dropdown-item
+                    >
+                    <el-dropdown-item @click.stop="exportKnowledge(scope.row)">
+                      <AppIcon iconName="app-export"></AppIcon
+                      >{{ $t('views.document.setting.export') }} Excel</el-dropdown-item
+                    >
+                    <el-dropdown-item @click.stop="exportZipKnowledge(scope.row)">
+                      <AppIcon iconName="app-export"></AppIcon
+                      >{{ $t('views.document.setting.export') }} ZIP</el-dropdown-item
+                    >
+                    <el-dropdown-item icon="Delete" @click.stop="deleteKnowledge(scope.row)">{{
+                      $t('common.delete')
+                    }}</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="table__pagination mt-16">
+        <el-pagination
+          v-model:current-page="paginationConfig.current_page"
+          v-model:page-size="paginationConfig.page_size"
+          :page-sizes="pageSizes"
+          :total="paginationConfig.total"
+          layout="total, prev, pager, next, sizes"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+  <component :is="currentCreateDialog" ref="CreateKnowledgeDialogRef" />
+  <CreateFolderDialog ref="CreateFolderDialogRef" @refresh="refreshFolder" />
+  <GenerateRelatedDialog ref="GenerateRelatedDialogRef" />
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, reactive, shallowRef, nextTick } from 'vue'
+import CreateKnowledgeDialog from './create-component/CreateKnowledgeDialog.vue'
+import CreateWebKnowledgeDialog from './create-component/CreateWebKnowledgeDialog.vue'
+import CreateLarkKnowledgeDialog from './create-component/CreateLarkKnowledgeDialog.vue'
+import CreateFolderDialog from '@/components/folder-tree/CreateFolderDialog.vue'
+import GenerateRelatedDialog from '@/components/generate-related-dialog/index.vue'
+import KnowledgeApi from '@/api/resource-management/knowledge'
+import SharedWorkspace from '@/views/shared/knowledge-shared/SharedWorkspace.vue'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import useStore from '@/stores/modules-resource-management'
+import { numberFormat } from '@/utils/common'
+import iconMap from '@/components/app-icon/icons/common'
+import { t } from '@/locales'
+import { useRouter } from 'vue-router'
+import type { CheckboxValueType } from 'element-plus'
+
+const router = useRouter()
+const { folder } = useStore()
+let knowledgeListbp = []
+const loading = ref(false)
+
+const search_type = ref('name')
+const search_form = ref<any>({
+  name: '',
+  create_user: '',
+})
+
+const user_options = ref<any[]>([])
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 30,
+  total: 0,
+})
+const pageSizes = [10, 20, 50, 100]
+
+const folderList = ref<any[]>([])
+const knowledgeList = ref<any[]>([])
+const currentFolder = ref<any>({})
+const rightOutlined = iconMap['right-outlined'].iconReader()
+
+const CreateKnowledgeDialogRef = ref()
+const currentCreateDialog = shallowRef<any>(null)
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+const checkedWorkspaces = ref([])
+let workspaces = []
+
+const handleCheckAllChange = (val: CheckboxValueType) => {
+  checkedWorkspaces.value = val ? workspaces : []
+  isIndeterminate.value = false
+  knowledgeList.value = val ? [...knowledgeListbp] : []
+}
+const handleCheckedWorkspacesChange = (value: CheckboxValueType[]) => {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === workspaces.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < workspaces.length
+  knowledgeList.value = knowledgeListbp.filter((ele) => value.includes(ele.workspace_id))
+}
+
+const handleSizeChange = (val) => {
+  console.log(val)
+}
+const handleCurrentChange = (val) => {
+  console.log(val)
+}
+function openCreateDialog(data: any) {
+  currentCreateDialog.value = data
+  nextTick(() => {
+    CreateKnowledgeDialogRef.value.open(currentFolder.value)
+  })
+
+  // common.asyncGetValid(ValidType.Dataset, ValidCount.Dataset, loading).then(async (res: any) => {
+  //   if (res?.data) {
+  //     CreateDatasetDialogRef.value.open()
+  //   } else if (res?.code === 400) {
+  //     MsgConfirm(t('common.tip'), t('views.knowledge.tip.professionalMessage'), {
+  //       cancelButtonText: t('common.confirm'),
+  //       confirmButtonText: t('common.professional'),
+  //     })
+  //       .then(() => {
+  //         window.open('https://maxkb.cn/pricing.html', '_blank')
+  //       })
+  //       .catch(() => {})
+  //   }
+  // })
+}
+
+function reEmbeddingKnowledge(row: any) {
+  KnowledgeApi.putReEmbeddingKnowledge(row.id).then(() => {
+    MsgSuccess(t('common.submitSuccess'))
+  })
+}
+
+const SyncWebDialogRef = ref()
+
+function syncKnowledge(row: any) {
+  SyncWebDialogRef.value.open(row.id)
+}
+
+const search_type_change = () => {
+  search_form.value = { name: '', create_user: '' }
+}
+
+function getList() {
+  console.log(currentFolder.value?.id)
+  const params = {
+    folder_id: currentFolder.value?.id || localStorage.getItem('workspace_id'),
+    [search_type.value]: search_form.value[search_type.value],
+  }
+
+  KnowledgeApi.getKnowledgeListPage(paginationConfig, params, loading).then((res) => {
+    paginationConfig.total = res.data.total
+    knowledgeList.value = [...knowledgeList.value, ...res.data.records]
+  })
+}
+
+function getAllList() {
+  const params = {}
+
+  KnowledgeApi.getKnowledgeList(params, loading).then((res) => {
+    knowledgeListbp = [...res.data]
+    workspaces = [...new Set(knowledgeListbp.map((ele) => ele.workspace_id))]
+    checkedWorkspaces.value = [...workspaces]
+    checkAll.value = true
+    handleCheckAllChange(true)
+  })
+}
+
+function folderClickHandel(row: any) {
+  currentFolder.value = row
+  knowledgeList.value = []
+  if (currentFolder.value.id === 'share') return
+  getList()
+}
+
+function clickFolder(item: any) {
+  currentFolder.value.id = item.id
+  knowledgeList.value = []
+  getList()
+}
+
+const CreateFolderDialogRef = ref()
+
+function openCreateFolder() {
+  CreateFolderDialogRef.value.open('KNOWLEDGE', currentFolder.value.parent_id)
+}
+
+const GenerateRelatedDialogRef = ref<InstanceType<typeof GenerateRelatedDialog>>()
+function openGenerateDialog(row: any) {
+  if (GenerateRelatedDialogRef.value) {
+    GenerateRelatedDialogRef.value.open([], 'knowledge', row.id)
+  }
+}
+
+const formatter = (_, __, value) => {
+  return value ? new Date(value).toLocaleString() : '-'
+}
+
+const exportKnowledge = (item: any) => {
+  KnowledgeApi.exportKnowledge(item.name, item.id, loading).then((ok) => {
+    MsgSuccess(t('common.exportSuccess'))
+  })
+}
+const exportZipKnowledge = (item: any) => {
+  KnowledgeApi.exportZipKnowledge(item.name, item.id, loading).then((ok) => {
+    MsgSuccess(t('common.exportSuccess'))
+  })
+}
+
+function deleteKnowledge(row: any) {
+  MsgConfirm(
+    `${t('views.knowledge.delete.confirmTitle')}${row.name} ?`,
+    `${t('views.knowledge.delete.confirmMessage1')} ${row.application_mapping_count} ${t('views.knowledge.delete.confirmMessage2')}`,
+    {
+      confirmButtonText: t('common.confirm'),
+      confirmButtonClass: 'color-danger',
+    },
+  )
+    .then(() => {
+      KnowledgeApi.delKnowledge(row.id, loading).then(() => {
+        const index = knowledgeList.value.findIndex((v) => v.id === row.id)
+        knowledgeList.value.splice(index, 1)
+        MsgSuccess(t('common.deleteSuccess'))
+      })
+    })
+    .catch(() => {})
+}
+
+function refreshFolder() {
+  knowledgeList.value = []
+  getList()
+}
+
+onMounted(() => {
+  getAllList()
+})
+</script>
+
+<style lang="scss" scoped>
+.resource-manage_knowledge {
+  padding: 16px 24px;
+  .complex-search {
+    width: 280px;
+  }
+  .complex-search__left {
+    width: 75px;
+  }
+
+  .el-avatar {
+    --el-avatar-size: 24px;
+  }
+
+  .table-content {
+    padding: 24px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0px 2px 4px 0px #1f23291f;
+    margin-top: 16px;
+    height: calc(100vh - 180px);
+
+    .table-knowledge {
+      height: calc(100% - 100px);
+      margin-top: 16px;
+
+      .table-name {
+        .el-icon {
+          margin-right: 8px;
+        }
+      }
+
+      .operation-column_text {
+        .el-button.is-text {
+          --el-button-text-color: #3370ff;
+        }
+        .el-button.is-text:not(.is-disabled):hover {
+          background-color: #3370ff1a;
+        }
+        .el-button + .el-button,
+        .el-button + .el-dropdown {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .table__pagination {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+  .shared-header {
+    color: #646a73;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+
+    :deep(.el-icon i) {
+      height: 12px;
+    }
+
+    .sub-title {
+      color: #1f2329;
+    }
+  }
+}
+</style>

ui/src/views/resource-management/paragraph/component/ParagraphCard.vue

@@ -0,0 +1,193 @@
+<template>
+  <el-card
+    shadow="hover"
+    class="paragraph-box cursor"
+    @mouseenter="cardEnter()"
+    @mouseleave="cardLeave()"
+  >
+    <h2 class="mb-16">{{ data.title || '-' }}</h2>
+    <div v-show="show" class="mk-sticky">
+      <el-card
+        class="paragraph-box-operation mt-8 mr-8"
+        shadow="always"
+        style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px"
+      >
+        <el-switch
+          :loading="changeStateloading"
+          v-model="data.is_active"
+          :before-change="() => changeState(data)"
+          size="small"
+        />
+
+        <el-divider direction="vertical" />
+        <span class="mr-8">
+          <el-button link @click="editParagraph(data)">
+            <el-icon :size="16" :title="$t('views.applicationWorkflow.control.zoomOut')">
+              <EditPen />
+            </el-icon>
+          </el-button>
+        </span>
+        <span class="mr-8">
+          <el-button link>
+            <el-icon :size="16" :title="$t('views.applicationWorkflow.control.zoomOut')">
+              <el-icon><CirclePlus /></el-icon>
+            </el-icon>
+          </el-button>
+        </span>
+        <el-dropdown trigger="click" :teleported="false">
+          <el-button text>
+            <el-icon><MoreFilled /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="openGenerateDialog(data)">
+                <el-icon><Connection /></el-icon>
+                {{ $t('views.document.generateQuestion.title') }}</el-dropdown-item
+              >
+              <el-dropdown-item @click="openSelectDocumentDialog(data)">
+                <AppIcon iconName="app-migrate"></AppIcon>
+                {{ $t('views.document.setting.migration') }}</el-dropdown-item
+              >
+              <el-dropdown-item icon="Delete" @click.stop="deleteParagraph(data)">{{
+                $t('common.delete')
+              }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-card>
+    </div>
+    <MdPreview
+      ref="editorRef"
+      editorId="preview-only"
+      :modelValue="data.content"
+      class="maxkb-md"
+    />
+
+    <ParagraphDialog ref="ParagraphDialogRef" :title="title" @refresh="refresh" />
+    <SelectDocumentDialog ref="SelectDocumentDialogRef" @refresh="refreshMigrateParagraph" />
+    <GenerateRelatedDialog ref="GenerateRelatedDialogRef" @refresh="refresh" />
+  </el-card>
+</template>
+<script setup lang="ts">
+import { ref, useSlots } from 'vue'
+import { useRoute } from 'vue-router'
+import { t } from '@/locales'
+import useStore from '@/stores/modules-resource-management'
+import GenerateRelatedDialog from '@/components/generate-related-dialog/index.vue'
+import ParagraphDialog from '@/views/resource-management/paragraph/component/ParagraphDialog.vue'
+import SelectDocumentDialog from '@/views/resource-management/paragraph/component/SelectDocumentDialog.vue'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+
+const { paragraph } = useStore()
+
+const route = useRoute()
+const {
+  params: { id, documentId },
+} = route as any
+const props = defineProps<{
+  data: any
+}>()
+
+const emit = defineEmits(['changeState', 'deleteParagraph'])
+const loading = ref(false)
+const changeStateloading = ref(false)
+const show = ref(false)
+// card上面存在dropdown菜单
+const subHovered = ref(false)
+function cardEnter() {
+  show.value = true
+  subHovered.value = false
+}
+
+function cardLeave() {
+  show.value = subHovered.value
+}
+
+function changeState(row: any) {
+  const obj = {
+    is_active: !row.is_active,
+  }
+  paragraph
+    .asyncPutParagraph(id, documentId, row.id, obj, changeStateloading)
+    .then((res) => {
+      emit('changeState', row.id)
+      return true
+    })
+    .catch(() => {
+      return false
+    })
+}
+
+const GenerateRelatedDialogRef = ref<InstanceType<typeof GenerateRelatedDialog>>()
+function openGenerateDialog(row: any) {
+  if (GenerateRelatedDialogRef.value) {
+    GenerateRelatedDialogRef.value.open([], 'knowledge', row.id)
+  }
+}
+function openSelectDocumentDialog(row?: any) {
+  //   if (row) {
+  //     multipleSelection.value = [row.id]
+  //   }
+  //   SelectDocumentDialogRef.value.open(multipleSelection.value)
+}
+
+function deleteParagraph(row: any) {
+  MsgConfirm(
+    `${t('views.paragraph.delete.confirmTitle')} ${row.title || '-'} ?`,
+    t('views.paragraph.delete.confirmMessage'),
+    {
+      confirmButtonText: t('common.confirm'),
+      confirmButtonClass: 'danger',
+    },
+  )
+    .then(() => {
+      paragraph.asyncDelParagraph(id, documentId, row.id, loading).then(() => {
+        emit('deleteParagraph', row.id)
+        MsgSuccess(t('common.deleteSuccess'))
+      })
+    })
+    .catch(() => {})
+}
+const SelectDocumentDialogRef = ref()
+const ParagraphDialogRef = ref()
+const title = ref('')
+function editParagraph(row: any) {
+  title.value = t('views.paragraph.paragraphDetail')
+  ParagraphDialogRef.value.open(row)
+}
+
+function refresh() {}
+
+function refreshMigrateParagraph() {}
+</script>
+<style lang="scss" scoped>
+.paragraph-box {
+  background: var(--app-layout-bg-color);
+  border: 1px solid #ffffff;
+  box-shadow: none !important;
+  position: relative;
+  overflow: inherit;
+  &:hover {
+    background: rgba(31, 35, 41, 0.1);
+    border: 1px solid #dee0e3;
+  }
+  .paragraph-box-operation {
+    position: absolute;
+    right: 0;
+    top: 0;
+    overflow: inherit;
+    border: 1px solid #dee0e3;
+    z-index: 10;
+    float: right;
+  }
+
+  .mk-sticky {
+    height: 0;
+    position: sticky;
+    right: 0;
+    top: 0;
+    overflow: inherit;
+    z-index: 10;
+  }
+}
+</style>

ui/src/views/resource-management/paragraph/component/ParagraphDialog.vue

@@ -0,0 +1,152 @@
+<template>
+  <el-dialog
+    :title="title"
+    v-model="dialogVisible"
+    width="80%"
+    class="paragraph-dialog"
+    destroy-on-close
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-row v-loading="loading">
+      <el-col :span="18">
+        <el-scrollbar height="500" wrap-class="paragraph-scrollbar">
+          <div class="p-24" style="padding-bottom: 8px">
+            <div style="position: absolute; right: 20px; top: 20px; ">
+              <el-button text @click="isEdit = true" v-if="problemId && !isEdit">
+                <el-icon><EditPen /></el-icon>
+              </el-button>
+            </div>
+
+            <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="isEdit" />
+          </div>
+        </el-scrollbar>
+        <div class="text-right p-24 pt-0" v-if="problemId && isEdit">
+          <el-button @click.prevent="cancelEdit"> {{$t('common.cancel')}} </el-button>
+          <el-button type="primary" :disabled="loading" @click="handleDebounceClick">
+            {{$t('common.save')}}
+          </el-button>
+        </div>
+      </el-col>
+      <el-col :span="6" class="border-l" style="width: 300px">
+        <!-- 关联问题 -->
+        <ProblemComponent
+          :problemId="problemId"
+          :docId="document_id"
+          :knowledgeId="dataset_id"
+          ref="ProblemRef"
+        />
+      </el-col>
+    </el-row>
+    <template #footer v-if="!problemId">
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{$t('common.cancel')}} </el-button>
+        <el-button :disabled="loading" type="primary" @click="handleDebounceClick">
+          {{$t('common.submit')}}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import { useRoute } from 'vue-router'
+import { cloneDeep, debounce } from 'lodash'
+import ParagraphForm from '@/views/resource-management/paragraph/component/ParagraphForm.vue'
+import ProblemComponent from '@/views/resource-management/paragraph/component/ProblemComponent.vue'
+import paragraphApi from '@/api/resource-management/paragraph'
+import useStore from '@/stores/modules-resource-management'
+
+const props = defineProps({
+  title: String
+})
+
+const { paragraph } = useStore()
+
+const route = useRoute()
+const {
+  params: { id, documentId }
+} = route as any
+
+const emit = defineEmits(['refresh'])
+
+const ProblemRef = ref()
+const paragraphFormRef = ref<any>()
+
+const dialogVisible = ref<boolean>(false)
+
+const loading = ref(false)
+const problemId = ref('')
+const detail = ref<any>({})
+const isEdit = ref(false)
+const document_id = ref('')
+const dataset_id = ref('')
+const cloneData = ref(null)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    problemId.value = ''
+    detail.value = {}
+    isEdit.value = false
+    document_id.value = ''
+    dataset_id.value = ''
+    cloneData.value = null
+  }
+})
+
+const cancelEdit = () => {
+  isEdit.value = false
+  detail.value = cloneDeep(cloneData.value)
+}
+
+const open = (data: any) => {
+  if (data) {
+    detail.value.title = data.title
+    detail.value.content = data.content
+    cloneData.value = cloneDeep(detail.value)
+    problemId.value = data.id
+    document_id.value = data.document_id
+    dataset_id.value = data.dataset_id || id
+  } else {
+    isEdit.value = true
+  }
+  dialogVisible.value = true
+}
+const submitHandle = async () => {
+  if (await paragraphFormRef.value?.validate()) {
+    loading.value = true
+    if (problemId.value) {
+      paragraph
+        .asyncPutParagraph(
+          dataset_id.value,
+          documentId || document_id.value,
+          problemId.value,
+          paragraphFormRef.value?.form,
+          loading
+        )
+        .then((res: any) => {
+          isEdit.value = false
+          emit('refresh', res.data)
+        })
+    } else {
+      const obj =
+        ProblemRef.value.problemList.length > 0
+          ? {
+              problem_list: ProblemRef.value.problemList,
+              ...paragraphFormRef.value?.form
+            }
+          : paragraphFormRef.value?.form
+      paragraphApi.postParagraph(id, documentId, obj, loading).then((res) => {
+        dialogVisible.value = false
+        emit('refresh')
+      })
+    }
+  }
+}
+const handleDebounceClick = debounce(() => {
+  submitHandle()
+}, 200)
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/paragraph/component/ParagraphForm.vue

@@ -0,0 +1,174 @@
+<template>
+  <el-form
+    ref="paragraphFormRef"
+    :model="form"
+    label-position="top"
+    require-asterisk-position="right"
+    :rules="rules"
+    @submit.prevent
+  >
+    <el-form-item :label="$t('views.paragraph.form.paragraphTitle.label')">
+      <el-input
+        v-if="isEdit"
+        v-model="form.title"
+        :placeholder="$t('views.paragraph.form.paragraphTitle.placeholder')"
+        maxlength="256"
+        show-word-limit
+      >
+      </el-input>
+      <span class="lighter" v-else>{{ form.title || '-' }}</span>
+    </el-form-item>
+    <el-form-item :label="$t('views.paragraph.form.content.label')" prop="content">
+      <MdEditor
+        v-if="isEdit"
+        v-model="form.content"
+        :placeholder="$t('views.paragraph.form.content.placeholder')"
+        :maxLength="100000"
+        :preview="false"
+        :toolbars="toolbars"
+        style="height: 300px"
+        @onUploadImg="onUploadImg"
+        :footers="footers"
+      >
+        <template #defFooters>
+          <span style="margin-left: -6px">/ 100000</span>
+        </template>
+      </MdEditor>
+      <MdPreview
+        v-else
+        ref="editorRef"
+        editorId="preview-only"
+        :modelValue="form.content"
+        class="maxkb-md"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onUnmounted, watch } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import imageApi from '@/api/image'
+import { t } from '@/locales'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  },
+  isEdit: Boolean
+})
+
+const toolbars = [
+  'bold',
+  'underline',
+  'italic',
+  '-',
+  'title',
+  'strikeThrough',
+  'sub',
+  'sup',
+  'quote',
+  'unorderedList',
+  'orderedList',
+  'task',
+  '-',
+  'codeRow',
+  'code',
+  'link',
+  'image',
+  'table',
+  'mermaid',
+  'katex',
+  '-',
+  'revoke',
+  'next',
+  '=',
+  'pageFullscreen',
+  'preview',
+  'htmlPreview'
+] as any[]
+
+const footers = ['markdownTotal', 0, '=', 1, 'scrollSwitch']
+
+const editorRef = ref()
+
+const form = ref<any>({
+  title: '',
+  content: ''
+})
+
+const rules = reactive<FormRules>({
+  content: [
+    { required: true, message: t('views.paragraph.form.content.requiredMessage1'), trigger: 'blur' },
+    { max: 100000, message: t('views.paragraph.form.content.requiredMessage2'), trigger: 'blur' }
+  ]
+})
+
+const paragraphFormRef = ref<FormInstance>()
+
+watch(
+  () => props.data,
+  (value) => {
+    if (value && JSON.stringify(value) !== '{}') {
+      form.value.title = value.title
+      form.value.content = value.content
+    }
+  },
+  {
+    immediate: true
+  }
+)
+watch(
+  () => props.isEdit,
+  (value) => {
+    if (!value) {
+      paragraphFormRef.value?.clearValidate()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+/*
+  表单校验
+*/
+function validate() {
+  if (!paragraphFormRef.value) return
+  return paragraphFormRef.value.validate((valid: any) => {
+    return valid
+  })
+}
+
+const onUploadImg = async (files: any, callback: any) => {
+  const res = await Promise.all(
+    files.map((file: any) => {
+      return new Promise((rev, rej) => {
+        const fd = new FormData()
+        fd.append('file', file)
+
+        imageApi
+          .postImage(fd)
+          .then((res: any) => {
+            rev(res)
+          })
+          .catch((error) => rej(error))
+      })
+    })
+  )
+
+  callback(res.map((item) => item.data))
+}
+
+onUnmounted(() => {
+  form.value = {
+    title: '',
+    content: ''
+  }
+})
+
+defineExpose({
+  validate,
+  form
+})
+</script>
+<style scoped lang="scss"></style>

ui/src/views/resource-management/paragraph/component/ProblemComponent.vue

@@ -0,0 +1,200 @@
+<template>
+  <p class="bold title p-24" style="padding-bottom: 0">
+    <span class="flex align-center">
+      <span>{{ $t('views.paragraph.relatedProblem.title') }}</span>
+      <el-divider direction="vertical" class="mr-4" />
+      <el-button text @click="addProblem">
+        <el-icon><Plus /></el-icon>
+      </el-button>
+    </span>
+  </p>
+  <div v-loading="loading">
+    <el-scrollbar height="500px">
+      <div class="p-24" style="padding-top: 16px">
+        <el-select
+          v-if="isAddProblem"
+          v-model="problemValue"
+          filterable
+          allow-create
+          default-first-option
+          :reserve-keyword="false"
+          :placeholder="$t('views.paragraph.relatedProblem.placeholder')"
+          remote
+          :remote-method="remoteMethod"
+          :loading="optionLoading"
+          @change="addProblemHandle"
+          @blur="isAddProblem = false"
+          class="mb-16"
+          popper-class="select-popper"
+          :popper-append-to-body="false"
+        >
+          <el-option
+            v-for="item in problemOptions"
+            :key="item.id"
+            :label="item.content"
+            :value="item.id"
+          >
+            {{ item.content }}
+          </el-option>
+        </el-select>
+        <template v-for="(item, index) in problemList" :key="index">
+          <TagEllipsis
+            @close="delProblemHandle(item, index)"
+            class="question-tag"
+            type="info"
+            effect="plain"
+            closable
+          >
+            <auto-tooltip :content="item.content">
+              {{ item.content }}
+            </auto-tooltip>
+          </TagEllipsis>
+        </template>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, nextTick, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import paragraphApi from '@/api/resource-management/paragraph'
+import useStore from '@/stores/modules-resource-management'
+
+const props = defineProps({
+  problemId: String,
+  docId: String,
+  knowledgeId: String,
+})
+
+const route = useRoute()
+const {
+  params: { id, documentId }, // id为knowledgeId
+} = route as any
+
+const { problem, paragraph } = useStore()
+const inputRef = ref()
+const loading = ref(false)
+const isAddProblem = ref(false)
+
+const problemValue = ref('')
+const problemList = ref<any[]>([])
+
+const problemOptions = ref<any[]>([])
+const optionLoading = ref(false)
+
+watch(
+  () => props.problemId,
+  (value) => {
+    if (value) {
+      getProblemList()
+    }
+  },
+  {
+    immediate: true,
+  },
+)
+
+function delProblemHandle(item: any, index: number) {
+  if (item.id) {
+    paragraph
+      .asyncDisassociationProblem(
+        props.knowledgeId || id,
+        documentId || props.docId,
+        props.problemId || '',
+        item.id,
+        loading,
+      )
+      .then((res: any) => {
+        getProblemList()
+      })
+  } else {
+    problemList.value.splice(index, 1)
+  }
+}
+
+function getProblemList() {
+  loading.value = true
+  paragraphApi
+    .getParagraphProblem(props.knowledgeId || id, documentId || props.docId, props.problemId || '')
+    .then((res) => {
+      problemList.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function addProblem() {
+  isAddProblem.value = true
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+function addProblemHandle(val: string) {
+  if (props.problemId) {
+    const api = problemOptions.value.some((option) => option.id === val)
+      ? paragraph.asyncAssociationProblem(
+          props.knowledgeId || id,
+          documentId || props.docId,
+          props.problemId,
+          val,
+          loading,
+        )
+      : paragraphApi.postParagraphProblem(
+          props.knowledgeId || id,
+          documentId || props.docId,
+          props.problemId,
+          {
+            content: val,
+          },
+          loading,
+        )
+    api.then(() => {
+      getProblemList()
+      problemValue.value = ''
+      isAddProblem.value = false
+    })
+  } else {
+    const problem = problemOptions.value.find((option) => option.id === val)
+    const content = problem ? problem.content : val
+    if (!problemList.value.some((item) => item.content === content)) {
+      problemList.value.push({ content: content })
+    }
+
+    problemValue.value = ''
+    isAddProblem.value = false
+  }
+}
+
+const remoteMethod = (query: string) => {
+  getProblemOption(query)
+}
+
+function getProblemOption(filterText?: string) {
+  return problem
+    .asyncGetProblem(
+      props.knowledgeId || (id as string),
+      { current_page: 1, page_size: 100 },
+      filterText && { content: filterText },
+      optionLoading,
+    )
+    .then((res: any) => {
+      problemOptions.value = res.data.records
+    })
+}
+
+onMounted(() => {
+  getProblemOption()
+})
+onUnmounted(() => {
+  problemList.value = []
+  problemValue.value = ''
+  isAddProblem.value = false
+})
+
+defineExpose({
+  problemList,
+})
+</script>
+<style scoped lang="scss"></style>

ui/src/views/resource-management/paragraph/component/SelectDocumentDialog.vue

@@ -0,0 +1,158 @@
+<template>
+  <el-dialog
+    :title="`${$t('views.chatLog.selectKnowledge')}/${$t('common.fileUpload.document')}`"
+    v-model="dialogVisible"
+    width="500"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      label-position="top"
+      require-asterisk-position="right"
+      :rules="rules"
+      @submit.prevent
+    >
+      <el-form-item :label="$t('views.chatLog.selectKnowledge')" prop="dataset_id">
+        <el-select
+          v-model="form.dataset_id"
+          filterable
+          :placeholder="$t('views.chatLog.selectKnowledgePlaceholder')"
+          :loading="optionLoading"
+          @change="changeDataset"
+        >
+          <el-option v-for="item in datasetList" :key="item.id" :label="item.name" :value="item.id">
+            <span class="flex align-center">
+              <KnowledgeIcon v-if="!item.dataset_id" :type="item.type" />
+
+              {{ item.name }}
+            </span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('views.chatLog.saveToDocument')" prop="document_id">
+        <el-select
+          v-model="form.document_id"
+          filterable
+          :placeholder="$t('views.chatLog.documentPlaceholder')"
+          :loading="optionLoading"
+        >
+          <el-option
+            v-for="item in documentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+            {{ item.name }}
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submitForm(formRef)" :loading="loading">
+          {{ $t('views.document.setting.migration') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import paragraphApi from '@/api/resource-management/paragraph'
+import useStore from '@/stores/modules-resource-management'
+import { t } from '@/locales'
+const { knowledge, document } = useStore()
+
+const route = useRoute()
+const {
+  params: { id, documentId },
+} = route as any
+
+const emit = defineEmits(['refresh'])
+const formRef = ref()
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const form = ref<any>({
+  dataset_id: '',
+  document_id: '',
+})
+
+const rules = reactive<FormRules>({
+  dataset_id: [
+    { required: true, message: t('views.chatLog.selectKnowledgePlaceholder'), trigger: 'change' },
+  ],
+  document_id: [{ required: true, message: t('views.chatLog.documentPlaceholder'), trigger: 'change' }],
+})
+
+const datasetList = ref<any[]>([])
+const documentList = ref<any[]>([])
+const optionLoading = ref(false)
+const paragraphList = ref<string[]>([])
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      dataset_id: '',
+      document_id: '',
+    }
+    datasetList.value = []
+    documentList.value = []
+    paragraphList.value = []
+    formRef.value?.clearValidate()
+  }
+})
+
+function changeDataset(id: string) {
+  form.value.document_id = ''
+  getDocument(id)
+}
+
+function getDocument(id: string) {
+  document.asyncGetAllDocument(id, loading).then((res: any) => {
+    documentList.value = res.data?.filter((v: any) => v.id !== documentId)
+  })
+}
+
+function getDataset() {
+  knowledge.asyncGetRootKnowledge(loading).then((res: any) => {
+    datasetList.value = res.data
+  })
+}
+
+const open = (list: any) => {
+  paragraphList.value = list
+  getDataset()
+  formRef.value?.clearValidate()
+  dialogVisible.value = true
+}
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      paragraphApi
+        .putMigrateMulParagraph(
+          id,
+          documentId,
+          form.value.dataset_id,
+          form.value.document_id,
+          paragraphList.value,
+          loading,
+        )
+        .then(() => {
+          emit('refresh')
+          dialogVisible.value = false
+        })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/paragraph/index.vue

@@ -0,0 +1,377 @@
+<template>
+  <div class="paragraph p-12-24">
+    <div class="flex align-center" style="width: 78%">
+      <back-button to="-1" style="margin-left: -4px"></back-button>
+      <h3 style="display: inline-block">{{ documentDetail?.name }}</h3>
+      <el-text type="info" v-if="documentDetail?.type === '1'"
+        >（{{ $t('views.document.form.source_url.label') }}：<el-link
+          :href="documentDetail?.meta?.source_url"
+          target="_blank"
+        >
+          <span class="break-all">{{ documentDetail?.meta?.source_url }} </span></el-link
+        >）
+      </el-text>
+    </div>
+    <div class="header-button">
+      <el-button @click="batchSelectedHandle(true)" v-if="isBatch === false">
+        {{ $t('views.paragraph.setting.batchSelected') }}
+      </el-button>
+      <el-button @click="batchSelectedHandle(false)" v-if="isBatch === true">
+        {{ $t('views.paragraph.setting.cancelSelected') }}
+      </el-button>
+      <el-button @click="addParagraph" type="primary" :disabled="loading" v-if="isBatch === false">
+        {{ $t('views.paragraph.addParagraph') }}
+      </el-button>
+    </div>
+    <el-card
+      style="--el-card-padding: 0"
+      class="paragraph__main mt-16"
+      v-loading="(paginationConfig.current_page === 1 && loading) || changeStateloading"
+    >
+      <div class="flex-between p-12-16 border-b">
+        <span>{{ paginationConfig.total }} {{ $t('views.paragraph.paragraph_count') }}</span>
+        <el-input
+          v-model="search"
+          :placeholder="$t('common.search')"
+          class="input-with-select"
+          style="width: 260px"
+          @change="searchHandle"
+          clearable
+        >
+          <template #prepend>
+            <el-select v-model="searchType" placeholder="Select" style="width: 80px">
+              <el-option :label="$t('common.title')" value="title" />
+              <el-option :label="$t('common.content')" value="content" />
+            </el-select>
+          </template>
+        </el-input>
+      </div>
+      <div class="flex">
+        <div class="paragraph-sidebar p-16 border-r">
+          <el-anchor
+            direction="vertical"
+            type="default"
+            :offset="130"
+            container=".paragraph-scollbar"
+            @click="handleClick"
+          >
+            <template v-for="(item, index) in paragraphDetail" :key="item.id">
+              <el-anchor-link :href="`#m${item.id}`" :title="item.title" v-if="item.title" />
+            </template>
+          </el-anchor>
+        </div>
+        <div class="w-full">
+          <el-empty v-if="paragraphDetail.length == 0" :description="$t('common.noData')" />
+          <div v-else>
+            <el-scrollbar class="paragraph-scollbar">
+              <div class="paragraph-detail">
+                <el-checkbox-group v-model="multipleSelection">
+                  <InfiniteScroll
+                    :size="paragraphDetail.length"
+                    :total="paginationConfig.total"
+                    :page_size="paginationConfig.page_size"
+                    v-model:current_page="paginationConfig.current_page"
+                    @load="getParagraphList"
+                    :loading="loading"
+                  >
+                    <VueDraggable
+                      ref="el"
+                      v-model="paragraphDetail"
+                      :disabled="isBatch === true"
+                      handle=".handle"
+                      :animation="150"
+                      ghostClass="ghost"
+                    >
+                      <template v-for="(item, index) in paragraphDetail" :key="item.id">
+                        <div :id="`m${item.id}`" style="display: flex; margin-bottom: 16px">
+                          <!-- 批量操作 -->
+                          <div class="paragraph-card flex" v-if="isBatch === true">
+                            <el-checkbox :value="item.id" />
+                            <ParagraphCard :data="item" class="mb-8 w-full" />
+                          </div>
+                          <!-- 非批量操作 -->
+                          <div class="handle paragraph-card flex" :id="item.id" v-else>
+                            <img
+                              src="@/assets/sort.svg"
+                              alt=""
+                              height="15"
+                              class="handle-img mr-8 mt-24 cursor"
+                            />
+                          </div>
+                          <ParagraphCard
+                            :data="item"
+                            class="mb-8 w-full"
+                            @changeState="changeState"
+                            @deleteParagraph="deleteParagraph"
+                          />
+                        </div>
+                      </template>
+                    </VueDraggable>
+                  </InfiniteScroll>
+                </el-checkbox-group>
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </div>
+
+      <div class="mul-operation border-t w-full" v-if="isBatch === true">
+        <el-button :disabled="multipleSelection.length === 0" @click="openGenerateDialog()">
+          {{ $t('views.document.generateQuestion.title') }}
+        </el-button>
+        <el-button :disabled="multipleSelection.length === 0" @click="openSelectDocumentDialog()">
+          {{ $t('views.document.setting.migration') }}
+        </el-button>
+
+        <el-button :disabled="multipleSelection.length === 0" @click="deleteMulParagraph">
+          {{ $t('common.delete') }}
+        </el-button>
+        <span class="ml-8">
+          {{ $t('views.document.selected') }} {{ multipleSelection.length }}
+          {{ $t('views.document.items') }}
+        </span>
+      </div>
+    </el-card>
+    <ParagraphDialog ref="ParagraphDialogRef" :title="title" @refresh="refresh" />
+    <SelectDocumentDialog ref="SelectDocumentDialogRef" @refresh="refreshMigrateParagraph" />
+    <GenerateRelatedDialog ref="GenerateRelatedDialogRef" @refresh="refresh" />
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { cloneDeep } from 'lodash'
+import documentApi from '@/api/resource-management/document'
+import paragraphApi from '@/api/resource-management/paragraph'
+import ParagraphDialog from './component/ParagraphDialog.vue'
+import ParagraphCard from './component/ParagraphCard.vue'
+import SelectDocumentDialog from './component/SelectDocumentDialog.vue'
+import GenerateRelatedDialog from '@/components/generate-related-dialog/index.vue'
+import { VueDraggable } from 'vue-draggable-plus'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import useStore from '@/stores/modules-resource-management'
+import { t } from '@/locales'
+const { paragraph } = useStore()
+const route = useRoute()
+const {
+  params: { id, documentId },
+} = route as any
+
+const SelectDocumentDialogRef = ref()
+const ParagraphDialogRef = ref()
+const loading = ref(false)
+const changeStateloading = ref(false)
+const documentDetail = ref<any>({})
+const paragraphDetail = ref<any[]>([])
+const title = ref('')
+const search = ref('')
+const searchType = ref('title')
+
+const handleClick = (e: MouseEvent, ele: any) => {
+  e.preventDefault()
+  document.querySelector(`${ele}`).scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+// 批量操作
+const isBatch = ref(false)
+const multipleSelection = ref<any[]>([])
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 30,
+  total: 0,
+})
+
+function deleteParagraph(id: string) {
+  const index = paragraphDetail.value.findIndex((v) => v.id === id)
+  paragraphDetail.value.splice(index, 1)
+}
+
+function changeState(id: string) {
+  const index = paragraphDetail.value.findIndex((v) => v.id === id)
+  paragraphDetail.value[index].is_active = !paragraphDetail.value[index].is_active
+}
+
+function refreshMigrateParagraph() {
+  paragraphDetail.value = paragraphDetail.value.filter(
+    (v) => !multipleSelection.value.includes(v.id),
+  )
+  multipleSelection.value = []
+  MsgSuccess(t('views.document.tip.migrationSuccess'))
+}
+
+function openSelectDocumentDialog(row?: any) {
+  if (row) {
+    multipleSelection.value = [row.id]
+  }
+  SelectDocumentDialogRef.value.open(multipleSelection.value)
+}
+function deleteMulParagraph() {
+  MsgConfirm(
+    `${t('views.document.delete.confirmTitle1')} ${multipleSelection.value.length} ${t('views.document.delete.confirmTitle2')}`,
+    t('views.paragraph.delete.confirmMessage'),
+    {
+      confirmButtonText: t('common.confirm'),
+      confirmButtonClass: 'danger',
+    },
+  )
+    .then(() => {
+      paragraphApi
+        .putMulParagraph(id, documentId, multipleSelection.value, changeStateloading)
+        .then(() => {
+          paragraphDetail.value = paragraphDetail.value.filter(
+            (v) => !multipleSelection.value.includes(v.id),
+          )
+          multipleSelection.value = []
+          MsgSuccess(t('views.document.delete.successMessage'))
+        })
+    })
+    .catch(() => {})
+}
+
+function batchSelectedHandle(bool: boolean) {
+  isBatch.value = bool
+  multipleSelection.value = []
+}
+
+function selectHandle(id: string) {
+  if (multipleSelection.value.includes(id)) {
+    multipleSelection.value.splice(multipleSelection.value.indexOf(id), 1)
+  } else {
+    multipleSelection.value.push(id)
+  }
+}
+
+function searchHandle() {
+  paginationConfig.current_page = 1
+  paragraphDetail.value = []
+  getParagraphList()
+}
+
+function addParagraph() {
+  title.value = t('views.paragraph.addParagraph')
+  ParagraphDialogRef.value.open()
+}
+
+function getDetail() {
+  loading.value = true
+  documentApi
+    .getDocumentDetail(id, documentId)
+    .then((res) => {
+      documentDetail.value = res.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getParagraphList() {
+  paragraphApi
+    .getParagraph(
+      id,
+      documentId,
+      paginationConfig,
+      search.value && { [searchType.value]: search.value },
+      loading,
+    )
+    .then((res) => {
+      paragraphDetail.value = [...paragraphDetail.value, ...res.data.records]
+      paginationConfig.total = res.data.total
+    })
+}
+
+function refresh(data: any) {
+  if (data) {
+    const index = paragraphDetail.value.findIndex((v) => v.id === data.id)
+    paragraphDetail.value.splice(index, 1, data)
+  } else {
+    paginationConfig.current_page = 1
+    paragraphDetail.value = []
+    getParagraphList()
+  }
+}
+
+const GenerateRelatedDialogRef = ref()
+function openGenerateDialog(row?: any) {
+  const arr: string[] = []
+  if (row) {
+    arr.push(row.id)
+  } else {
+    multipleSelection.value.map((v) => {
+      if (v) {
+        arr.push(v)
+      }
+    })
+  }
+
+  GenerateRelatedDialogRef.value.open(arr, 'paragraph')
+}
+
+function onEnd(event?: any) {
+  const { oldIndex, newIndex } = event
+  if (oldIndex === undefined || newIndex === undefined) return
+  const list = cloneDeep(paragraphDetail.value)
+  if (oldIndex === list.length - 1 || newIndex === list.length - 1) {
+    return
+  }
+  const newInstance = { ...list[oldIndex], type: list[newIndex].type, id: list[newIndex].id }
+  const oldInstance = { ...list[newIndex], type: list[oldIndex].type, id: list[oldIndex].id }
+  list[newIndex] = newInstance
+  list[oldIndex] = oldInstance
+  paragraphDetail.value = list
+}
+
+onMounted(() => {
+  getDetail()
+  getParagraphList()
+})
+</script>
+<style lang="scss" scoped>
+.paragraph {
+  position: relative;
+  .header-button {
+    position: absolute;
+    right: calc(var(--app-base-px) * 3);
+    top: calc(var(--app-base-px) + 4px);
+  }
+  .paragraph-sidebar {
+    width: 240px;
+  }
+
+  .paragraph-detail {
+    height: calc(100vh - 215px);
+    max-width: 1000px;
+    margin: 16px auto;
+
+    // .el-checkbox-group {
+    //   display: flex;
+    // }
+  }
+
+  &__main {
+    position: relative;
+    box-sizing: border-box;
+    .mul-operation {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      padding: 16px 24px;
+      box-sizing: border-box;
+      background: #ffffff;
+    }
+  }
+  .paragraph-card {
+    &.handle {
+      .handle-img {
+        visibility: hidden;
+      }
+      &:hover {
+        .handle-img {
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
+</style>

ui/src/views/resource-management/problem/component/CreateProblemDialog.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-dialog
+    :title="$t('views.problem.createProblem')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+  >
+    <el-form
+      label-position="top"
+      ref="problemFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('views.problem.title')" prop="data">
+        <el-input
+          v-model="form.data"
+          :placeholder="$t('views.problem.tip.placeholder')"
+          :rows="10"
+          type="textarea"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(problemFormRef)" :loading="loading">
+          {{ $t('common.confirm') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import useStore from '@/stores/modules-resource-management'
+import { t } from '@/locales'
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+const { problem } = useStore()
+
+const emit = defineEmits(['refresh'])
+const problemFormRef = ref()
+const loading = ref<boolean>(false)
+
+const form = ref<any>({
+  data: ''
+})
+
+const rules = reactive({
+  data: [{ required: true, message: t('views.problem.tip.requiredMessage'), trigger: 'blur' }]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      data: ''
+    }
+  }
+})
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const arr = form.value.data.split('\n').filter(function (item: string) {
+        return item !== ''
+      })
+      problem.asyncPostProblem(id, arr, loading).then((res: any) => {
+        MsgSuccess(t('common.createSuccess'))
+        emit('refresh')
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/problem/component/DetailProblemDrawer.vue

@@ -0,0 +1,206 @@
+<template>
+  <el-drawer v-model="visible" size="60%" @close="closeHandle">
+    <template #header>
+      <h4>{{ $t('views.problem.detailProblem') }}</h4>
+    </template>
+    <div>
+      <el-scrollbar>
+        <div class="p-8">
+          <el-form label-position="top" v-loading="loading" @submit.prevent>
+            <el-form-item :label="$t('views.problem.title')">
+              <ReadWrite
+                @change="editName"
+                :data="currentContent"
+                :showEditIcon="true"
+                :maxlength="256"
+              />
+            </el-form-item>
+            <el-form-item :label="$t('views.problem.relateParagraph.title')">
+              <template v-for="(item, index) in paragraphList" :key="index">
+                <CardBox
+                  :title="item.title || '-'"
+                  class="paragraph-source-card cursor mb-8"
+                  :showIcon="false"
+                  @click.stop="editParagraph(item)"
+                >
+                  <div class="active-button">
+                    <span class="mr-4">
+                      <el-tooltip
+                        effect="dark"
+                        :content="$t('views.problem.setting.cancelRelated')"
+                        placement="top"
+                      >
+                        <el-button type="primary" text @click.stop="disassociation(item)">
+                          <AppIcon iconName="app-quxiaoguanlian"></AppIcon>
+                        </el-button>
+                      </el-tooltip>
+                    </span>
+                  </div>
+                  <template #description>
+                    <el-scrollbar height="80">
+                      {{ item.content }}
+                    </el-scrollbar>
+                  </template>
+                  <template #footer>
+                    <div class="footer-content flex-between">
+                      <el-text>
+                        <el-icon>
+                          <Document />
+                        </el-icon>
+                        {{ item?.document_name }}
+                      </el-text>
+                    </div>
+                  </template>
+                </CardBox>
+              </template>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-scrollbar>
+      <ParagraphDialog
+        ref="ParagraphDialogRef"
+        :title="$t('views.paragraph.editParagraph')"
+        @refresh="refresh"
+      />
+      <RelateProblemDialog ref="RelateProblemDialogRef" @refresh="refresh" />
+    </div>
+    <template #footer>
+      <div>
+        <el-button @click="relateProblem">{{
+          $t('views.problem.relateParagraph.title')
+        }}</el-button>
+        <el-button @click="pre" :disabled="pre_disable || loading">{{
+          $t('views.chatLog.buttons.prev')
+        }}</el-button>
+        <el-button @click="next" :disabled="next_disable || loading">{{
+          $t('views.chatLog.buttons.next')
+        }}</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import problemApi from '@/api/resource-management/problem'
+import ParagraphDialog from '@/views/resource-management/paragraph/component/ParagraphDialog.vue'
+import RelateProblemDialog from './RelateProblemDialog.vue'
+import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+import useStore from '@/stores/modules-resource-management'
+import { t } from '@/locales'
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 当前的id
+     */
+    currentId: string
+    currentContent: string
+    /**
+     * 下一条
+     */
+    next: () => void
+    /**
+     * 上一条
+     */
+    pre: () => void
+
+    pre_disable: boolean
+
+    next_disable: boolean
+  }>(),
+  {},
+)
+
+const emit = defineEmits(['update:currentId', 'update:currentContent', 'refresh'])
+
+const route = useRoute()
+const {
+  params: { id },
+} = route
+
+const { paragraph } = useStore()
+const RelateProblemDialogRef = ref()
+const ParagraphDialogRef = ref()
+const loading = ref(false)
+const visible = ref(false)
+const paragraphList = ref<any[]>([])
+
+function disassociation(item: any) {
+  paragraph
+    .asyncDisassociationProblem(
+      item.knowledge_id,
+      item.document_id,
+      item.id,
+      props.currentId,
+      loading,
+    )
+    .then(() => {
+      getRecord()
+    })
+}
+
+function relateProblem() {
+  RelateProblemDialogRef.value.open([props.currentId])
+}
+
+function editParagraph(row: any) {
+  ParagraphDialogRef.value.open(row)
+}
+
+function editName(val: string) {
+  if (val) {
+    const obj = {
+      content: val,
+    }
+    problemApi.putProblems(id as string, props.currentId, obj, loading).then(() => {
+      emit('update:currentContent', val)
+      MsgSuccess(t('common.modifySuccess'))
+    })
+  } else {
+    MsgError(t('views.problem.tip.errorMessage'))
+  }
+}
+
+function closeHandle() {
+  paragraphList.value = []
+}
+
+function getRecord() {
+  if (props.currentId && visible.value) {
+    problemApi.getDetailProblems(id as string, props.currentId, loading).then((res) => {
+      paragraphList.value = res.data
+    })
+  }
+}
+
+function refresh() {
+  getRecord()
+}
+
+watch(
+  () => props.currentId,
+  () => {
+    paragraphList.value = []
+    getRecord()
+  },
+)
+
+watch(visible, (bool) => {
+  if (!bool) {
+    emit('update:currentId', '')
+    emit('update:currentContent', '')
+    emit('refresh')
+  }
+})
+
+const open = () => {
+  getRecord()
+  visible.value = true
+}
+
+defineExpose({
+  open,
+})
+</script>
+<style lang="scss"></style>

ui/src/views/resource-management/problem/component/RelateProblemDialog.vue

@@ -0,0 +1,330 @@
+<template>
+  <el-dialog
+    :title="$t('views.problem.relateParagraph.title')"
+    v-model="dialogVisible"
+    width="80%"
+    class="paragraph-dialog"
+    destroy-on-close
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-row v-loading="loading">
+      <el-col :span="6">
+        <el-scrollbar height="500" wrap-class="paragraph-scrollbar">
+          <div class="bold title align-center p-24 pb-0">
+            {{ $t('views.problem.relateParagraph.selectDocument') }}
+          </div>
+          <div class="p-8" style="padding-bottom: 8px">
+            <el-input
+              v-model="filterDoc"
+              :placeholder="$t('views.problem.relateParagraph.placeholder')"
+              prefix-icon="Search"
+              clearable
+            />
+            <common-list
+              :data="documentList"
+              class="mt-8"
+              @click="clickDocumentHandle"
+              :default-active="currentDocument"
+            >
+              <template #default="{ row }">
+                <span class="flex lighter align-center">
+                  <auto-tooltip :content="row.name">
+                    {{ row.name }}
+                  </auto-tooltip>
+                  <el-badge
+                    :value="associationCount(row.id)"
+                    type="primary"
+                    v-if="associationCount(row.id)"
+                    class="paragraph-badge ml-4"
+                  />
+                </span>
+              </template>
+            </common-list>
+          </div>
+        </el-scrollbar>
+      </el-col>
+      <el-col :span="18" class="border-l">
+        <el-scrollbar height="500" wrap-class="paragraph-scrollbar">
+          <div class="p-24" style="padding-bottom: 8px; padding-top: 16px">
+            <div class="flex-between mb-16">
+              <div class="bold title align-center">
+                {{ $t('components.selectParagraph.title') }}
+                <el-text>
+                  （{{ $t('views.problem.relateParagraph.selectedParagraph') }}：{{
+                    associationCount(currentDocument)
+                  }}
+                  {{ $t('views.problem.relateParagraph.count') }}）
+                </el-text>
+              </div>
+              <el-input
+                v-model="search"
+                :placeholder="$t('common.search')"
+                class="input-with-select"
+                style="width: 260px"
+                @change="searchHandle"
+              >
+                <template #prepend>
+                  <el-select v-model="searchType" placeholder="Select" style="width: 80px">
+                    <el-option :label="$t('common.title')" value="title" />
+                    <el-option :label="$t('common.content')" value="content" />
+                  </el-select>
+                </template>
+              </el-input>
+            </div>
+            <el-empty v-if="paragraphList.length == 0" :description="$t('common.noData')" />
+
+            <InfiniteScroll
+              v-else
+              :size="paragraphList.length"
+              :total="paginationConfig.total"
+              :page_size="paginationConfig.page_size"
+              v-model:current_page="paginationConfig.current_page"
+              @load="getParagraphList"
+              :loading="loading"
+            >
+              <template v-for="(item, index) in paragraphList" :key="index">
+                <CardBox
+                  shadow="hover"
+                  :title="item.title || '-'"
+                  :description="item.content"
+                  class="paragraph-card cursor mb-16"
+                  :class="isAssociation(item.id) ? 'selected' : ''"
+                  :showIcon="false"
+                  @click="associationClick(item)"
+                >
+                </CardBox>
+              </template>
+            </InfiniteScroll>
+          </div>
+        </el-scrollbar>
+      </el-col>
+    </el-row>
+    <template #footer v-if="isMul">
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false"> {{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="mulAssociation"> {{ $t('common.confirm') }} </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+import problemApi from '@/api/resource-management/problem'
+import paragraphApi from '@/api/resource-management/paragraph'
+import useStore from '@/stores/modules-resource-management'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+const { problem, document, paragraph } = useStore()
+
+const route = useRoute()
+const {
+  params: { id }, // knowledgeId
+} = route as any
+
+const emit = defineEmits(['refresh'])
+
+const dialogVisible = ref<boolean>(false)
+
+const loading = ref(false)
+const documentList = ref<any[]>([])
+const cloneDocumentList = ref<any[]>([])
+const paragraphList = ref<any[]>([])
+const currentProblemId = ref<string>('')
+const currentMulProblemId = ref<string[]>([])
+
+// 回显
+const associationParagraph = ref<any[]>([])
+
+const currentDocument = ref<string>('')
+const search = ref('')
+const searchType = ref('title')
+const filterDoc = ref('')
+// 批量
+const isMul = ref(false)
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 50,
+  total: 0,
+})
+
+function mulAssociation() {
+  const data = {
+    problem_id_list: currentMulProblemId.value,
+    paragraph_list: associationParagraph.value.map((item) => ({
+      paragraph_id: item.id,
+      document_id: item.document_id,
+    })),
+  }
+  problemApi.putMulAssociationProblem(id, data, loading).then(() => {
+    MsgSuccess(t('views.problem.tip.relatedSuccess'))
+    dialogVisible.value = false
+  })
+}
+
+function associationClick(item: any) {
+  if (isMul.value) {
+    if (isAssociation(item.id)) {
+      associationParagraph.value.splice(associationParagraph.value.indexOf(item.id), 1)
+    } else {
+      associationParagraph.value.push(item)
+    }
+  } else {
+    if (isAssociation(item.id)) {
+      paragraph
+        .asyncDisassociationProblem(
+          id,
+          item.document_id,
+          item.id,
+          currentProblemId.value as string,
+          loading,
+        )
+        .then(() => {
+          getRecord(currentProblemId.value)
+        })
+    } else {
+      paragraph
+        .asyncAssociationProblem(
+          id,
+          item.document_id,
+          item.id,
+          currentProblemId.value as string,
+          loading,
+        )
+        .then(() => {
+          getRecord(currentProblemId.value)
+        })
+    }
+  }
+}
+
+function searchHandle() {
+  paginationConfig.current_page = 1
+  paragraphList.value = []
+  currentDocument.value && getParagraphList(currentDocument.value)
+}
+
+function clickDocumentHandle(item: any) {
+  paginationConfig.current_page = 1
+  paragraphList.value = []
+  currentDocument.value = item.id
+  getParagraphList(item.id)
+}
+
+function getDocument() {
+  document.asyncGetAllDocument(id, loading).then((res: any) => {
+    cloneDocumentList.value = res.data
+    documentList.value = res.data
+    currentDocument.value = cloneDocumentList.value?.length > 0 ? cloneDocumentList.value[0].id : ''
+    currentDocument.value && getParagraphList(currentDocument.value)
+  })
+}
+
+function getParagraphList(documentId: string) {
+  paragraphApi
+    .getParagraph(
+      id,
+      (documentId || currentDocument.value) as string,
+      paginationConfig,
+      search.value && { [searchType.value]: search.value },
+      loading,
+    )
+    .then((res) => {
+      paragraphList.value = [...paragraphList.value, ...res.data.records]
+      paginationConfig.total = res.data.total
+    })
+}
+
+// 已关联分段
+function getRecord(problemId: string) {
+  problemApi.getDetailProblems(id as string, problemId as string, loading).then((res) => {
+    associationParagraph.value = res.data
+  })
+}
+
+function associationCount(documentId: string) {
+  return associationParagraph.value.filter((item) => item.document_id === documentId).length
+}
+function isAssociation(paragraphId: string) {
+  return associationParagraph.value.some((option) => option.id === paragraphId)
+}
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    documentList.value = []
+    cloneDocumentList.value = []
+    paragraphList.value = []
+    associationParagraph.value = []
+    isMul.value = false
+
+    currentDocument.value = ''
+    search.value = ''
+    searchType.value = 'title'
+    emit('refresh')
+  }
+})
+
+watch(filterDoc, (val) => {
+  paragraphList.value = []
+  documentList.value = val
+    ? cloneDocumentList.value.filter((item) => item.name.includes(val))
+    : cloneDocumentList.value
+  currentDocument.value = documentList.value?.length > 0 ? documentList.value[0].id : ''
+})
+
+const open = (problemId: any) => {
+  getDocument()
+  if (problemId.length == 1) {
+    currentProblemId.value = problemId[0]
+    getRecord(problemId)
+  } else if (problemId.length > 1) {
+    currentMulProblemId.value = problemId
+    isMul.value = true
+  }
+  dialogVisible.value = true
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.paragraph-card {
+  position: relative;
+  // card 选中样式
+  &.selected {
+    border: 1px solid var(--el-color-primary) !important;
+    &:before {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      border: 14px solid var(--el-color-primary);
+      border-bottom-color: transparent;
+      border-left-color: transparent;
+    }
+
+    &:after {
+      content: '';
+      width: 3px;
+      height: 6px;
+      position: absolute;
+      right: 5px;
+      top: 2px;
+      border: 2px solid #fff;
+      border-top-color: transparent;
+      border-left-color: transparent;
+      transform: rotate(35deg);
+    }
+    &:hover {
+      border: 1px solid var(--el-color-primary);
+    }
+  }
+}
+.paragraph-badge {
+  .el-badge__content {
+    height: auto;
+    display: table;
+  }
+}
+</style>

ui/src/views/resource-management/problem/index.vue

@@ -0,0 +1,388 @@
+<template>
+  <div class="document p-16-24">
+    <h2 class="mb-16">{{ $t('views.problem.title') }}</h2>
+    <el-card style="--el-card-padding: 0">
+      <div class="main-calc-height">
+        <div class="p-24">
+          <div class="flex-between">
+            <div>
+              <el-button type="primary" @click="createProblem"
+                >{{ $t('views.problem.createProblem') }}
+              </el-button>
+              <el-button @click="relateProblem()" :disabled="multipleSelection.length === 0"
+                >{{ $t('views.problem.relateParagraph.title') }}
+              </el-button>
+              <el-button @click="deleteMulDocument" :disabled="multipleSelection.length === 0"
+                >{{ $t('views.problem.setting.batchDelete') }}
+              </el-button>
+            </div>
+
+            <el-input
+              v-model="filterText"
+              :placeholder="$t('views.problem.searchBar.placeholder')"
+              prefix-icon="Search"
+              class="w-240"
+              @change="getList"
+              clearable
+            />
+          </div>
+          <app-table
+            ref="multipleTableRef"
+            class="mt-16"
+            :data="problemData"
+            :pagination-config="paginationConfig"
+            quick-create
+            :quickCreateName="$t('views.problem.quickCreateName')"
+            :quickCreatePlaceholder="$t('views.problem.quickCreateProblem')"
+            :quickCreateMaxlength="256"
+            @sizeChange="handleSizeChange"
+            @changePage="getList"
+            @cell-mouse-enter="cellMouseEnter"
+            @cell-mouse-leave="cellMouseLeave"
+            @creatQuick="creatQuickHandle"
+            @row-click="rowClickHandle"
+            @selection-change="handleSelectionChange"
+            :row-class-name="setRowClass"
+            v-loading="loading"
+            :row-key="(row: any) => row.id"
+          >
+            <el-table-column type="selection" width="55" :reserve-selection="true" />
+            <el-table-column prop="content" :label="$t('views.problem.title')" min-width="280">
+              <template #default="{ row }">
+                <ReadWrite
+                  @change="editName($event, row.id)"
+                  :data="row.content"
+                  :showEditIcon="row.id === currentMouseId"
+                  :maxlength="256"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="paragraph_count"
+              :label="$t('views.problem.table.paragraph_count')"
+              align="right"
+              min-width="100"
+            >
+              <template #default="{ row }">
+                <el-link
+                  type="primary"
+                  @click.stop="rowClickHandle(row)"
+                  v-if="row.paragraph_count"
+                >
+                  {{ row.paragraph_count }}
+                </el-link>
+                <span v-else>
+                  {{ row.paragraph_count }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="create_time" :label="$t('common.createTime')" width="170">
+              <template #default="{ row }">
+                {{ datetimeFormat(row.create_time) }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="update_time"
+              :label="$t('views.problem.table.updateTime')"
+              width="170"
+            >
+              <template #default="{ row }">
+                {{ datetimeFormat(row.update_time) }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('common.operation')" align="left" fixed="right">
+              <template #default="{ row }">
+                <div>
+                  <span class="mr-4">
+                    <el-tooltip
+                      effect="dark"
+                      :content="$t('views.problem.relateParagraph.title')"
+                      placement="top"
+                    >
+                      <el-button type="primary" text @click.stop="relateProblem(row)">
+                        <el-icon><Connection /></el-icon>
+                      </el-button>
+                    </el-tooltip>
+                  </span>
+                  <span>
+                    <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
+                      <el-button type="primary" text @click.stop="deleteProblem(row)">
+                        <el-icon><Delete /></el-icon>
+                      </el-button>
+                    </el-tooltip>
+                  </span>
+                </div>
+              </template>
+            </el-table-column>
+          </app-table>
+        </div>
+      </div>
+    </el-card>
+    <CreateProblemDialog ref="CreateProblemDialogRef" @refresh="refresh" />
+    <DetailProblemDrawer
+      :next="nextChatRecord"
+      :pre="preChatRecord"
+      ref="DetailProblemRef"
+      v-model:currentId="currentClickId"
+      v-model:currentContent="currentContent"
+      :pre_disable="pre_disable"
+      :next_disable="next_disable"
+      @refresh="refreshRelate"
+    />
+    <RelateProblemDialog ref="RelateProblemDialogRef" @refresh="refreshRelate" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive, onBeforeUnmount, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElTable } from 'element-plus'
+import problemApi from '@/api/resource-management/problem'
+import CreateProblemDialog from './component/CreateProblemDialog.vue'
+import DetailProblemDrawer from './component/DetailProblemDrawer.vue'
+import RelateProblemDialog from './component/RelateProblemDialog.vue'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+import type { Dict } from '@/api/type/common'
+import useStore from '@/stores/modules-resource-management'
+import { t } from '@/locales'
+
+const route = useRoute()
+const {
+  params: { id }, // 知识库id
+} = route as any
+
+const { problem } = useStore()
+
+const RelateProblemDialogRef = ref()
+const DetailProblemRef = ref()
+const CreateProblemDialogRef = ref()
+const loading = ref(false)
+
+// 当前需要修改问题的id
+const currentMouseId = ref('')
+// 当前点击打开drawer的id
+const currentClickId = ref('')
+const currentContent = ref('')
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 10,
+  total: 0,
+})
+
+const filterText = ref('')
+const problemData = ref<any[]>([])
+const problemIndexMap = computed<Dict<number>>(() => {
+  return problemData.value
+    .map((row, index) => ({
+      [row.id]: index,
+    }))
+    .reduce((pre, next) => ({ ...pre, ...next }), {})
+})
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref<any[]>([])
+
+function relateProblem(row?: any) {
+  const arr: string[] = []
+  if (row) {
+    arr.push(row.id)
+  } else {
+    multipleSelection.value.map((v) => {
+      if (v) {
+        arr.push(v.id)
+      }
+    })
+  }
+
+  RelateProblemDialogRef.value.open(arr)
+}
+
+function createProblem() {
+  CreateProblemDialogRef.value.open()
+}
+
+const handleSelectionChange = (val: any[]) => {
+  multipleSelection.value = val
+}
+
+/*
+  快速创建空白文档
+*/
+function creatQuickHandle(val: string) {
+  loading.value = true
+  const obj = [val]
+  problem
+    .asyncPostProblem(id, obj)
+    .then((res) => {
+      getList()
+      MsgSuccess(t('common.createSuccess'))
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function deleteMulDocument() {
+  const arr: string[] = []
+  multipleSelection.value.map((v) => {
+    if (v) {
+      arr.push(v.id)
+    }
+  })
+  problemApi.putMulProblem(id, arr, loading).then(() => {
+    MsgSuccess(t('views.document.delete.successMessage'))
+    multipleTableRef.value?.clearSelection()
+    getList()
+  })
+}
+
+function deleteProblem(row: any) {
+  MsgConfirm(
+    `${t('views.problem.delete.confirmTitle')} ${row.content} ?`,
+    `${t('views.problem.delete.confirmMessage1')} ${row.paragraph_count} ${t('views.problem.delete.confirmMessage2')}`,
+    {
+      confirmButtonText: t('common.confirm'),
+      confirmButtonClass: 'danger',
+    },
+  )
+    .then(() => {
+      problemApi.delProblems(id, row.id, loading).then(() => {
+        MsgSuccess(t('common.deleteSuccess'))
+        getList()
+      })
+    })
+    .catch(() => {})
+}
+
+function editName(val: string, problemId: string) {
+  if (val) {
+    const obj = {
+      content: val,
+    }
+    problemApi.putProblems(id, problemId, obj, loading).then(() => {
+      getList()
+      MsgSuccess(t('common.modifySuccess'))
+    })
+  } else {
+    MsgError(t('views.problem.tip.errorMessage'))
+  }
+}
+
+function cellMouseEnter(row: any) {
+  currentMouseId.value = row.id
+}
+
+function cellMouseLeave() {
+  currentMouseId.value = ''
+}
+
+/**
+ * 下一页
+ */
+const nextChatRecord = () => {
+  let index = problemIndexMap.value[currentClickId.value] + 1
+  if (index >= problemData.value.length) {
+    if (
+      index + (paginationConfig.current_page - 1) * paginationConfig.page_size >=
+      paginationConfig.total - 1
+    ) {
+      return
+    }
+    paginationConfig.current_page = paginationConfig.current_page + 1
+    getList().then(() => {
+      index = 0
+      currentClickId.value = problemData.value[index].id
+      currentContent.value = problemData.value[index].content
+    })
+  } else {
+    currentClickId.value = problemData.value[index].id
+    currentContent.value = problemData.value[index].content
+  }
+}
+const pre_disable = computed(() => {
+  const index = problemIndexMap.value[currentClickId.value] - 1
+  return index < 0 && paginationConfig.current_page <= 1
+})
+
+const next_disable = computed(() => {
+  const index = problemIndexMap.value[currentClickId.value] + 1
+  return (
+    index >= problemData.value.length &&
+    index + (paginationConfig.current_page - 1) * paginationConfig.page_size >=
+      paginationConfig.total - 1
+  )
+})
+/**
+ * 上一页
+ */
+const preChatRecord = () => {
+  let index = problemIndexMap.value[currentClickId.value] - 1
+
+  if (index < 0) {
+    if (paginationConfig.current_page <= 1) {
+      return
+    }
+    paginationConfig.current_page = paginationConfig.current_page - 1
+    getList().then((ok) => {
+      index = paginationConfig.page_size - 1
+      currentClickId.value = problemData.value[index].id
+      currentContent.value = problemData.value[index].content
+    })
+  } else {
+    currentClickId.value = problemData.value[index].id
+    currentContent.value = problemData.value[index].content
+  }
+}
+
+function rowClickHandle(row: any, column?: any) {
+  if (column && column.type === 'selection') {
+    return
+  }
+  if (row.paragraph_count) {
+    currentClickId.value = row.id
+    currentContent.value = row.content
+    DetailProblemRef.value.open()
+  }
+}
+
+const setRowClass = ({ row }: any) => {
+  return currentClickId.value === row?.id ? 'highlight' : ''
+}
+
+function handleSizeChange() {
+  paginationConfig.current_page = 1
+  getList()
+}
+
+function getList() {
+  return problem
+    .asyncGetProblem(
+      id as string,
+      paginationConfig,
+      filterText.value && { content: filterText.value },
+      loading,
+    )
+    .then((res: any) => {
+      problemData.value = res.data.records
+      paginationConfig.total = res.data.total
+    })
+}
+
+function refreshRelate() {
+  getList()
+  multipleTableRef.value?.clearSelection()
+}
+
+function refresh() {
+  paginationConfig.current_page = 1
+  getList()
+}
+
+onMounted(() => {
+  getList()
+})
+
+onBeforeUnmount(() => {})
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/tool/ToolDebugDrawer.vue

@@ -0,0 +1,184 @@
+<template>
+  <el-drawer v-model="debugVisible" size="60%" :append-to-body="true">
+    <template #header>
+      <div class="flex align-center" style="margin-left: -8px">
+        <el-button class="cursor mr-4" link @click.prevent="debugVisible = false">
+          <el-icon :size="20">
+            <Back />
+          </el-icon>
+        </el-button>
+        <h4>{{ $t('common.debug') }}</h4>
+      </div>
+    </template>
+    <div>
+      <div v-if="form.init_field_list.length > 0" class="mb-16">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('common.param.initParam') }}
+        </h4>
+        <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+          <DynamicsForm
+            v-model="form.init_params"
+            :model="form.init_params"
+            label-position="top"
+            require-asterisk-position="right"
+            :render_data="form.init_field_list"
+            ref="dynamicsFormRef"
+          >
+          </DynamicsForm>
+        </el-card>
+      </div>
+      <div v-if="form.debug_field_list.length > 0" class="mb-16">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('common.param.inputParam') }}
+        </h4>
+        <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+          <el-form
+            ref="FormRef"
+            :model="form"
+            label-position="top"
+            require-asterisk-position="right"
+            hide-required-asterisk
+            v-loading="loading"
+            @submit.prevent
+          >
+            <template v-for="(item, index) in form.debug_field_list" :key="index">
+              <el-form-item
+                :label="item.name"
+                :prop="'debug_field_list.' + index + '.value'"
+                :rules="{
+                  required: item.is_required,
+                  message: $t('views.tool.form.param.inputPlaceholder'),
+                  trigger: 'blur',
+                }"
+              >
+                <template #label>
+                  <div class="flex">
+                    <span
+                      >{{ item.name }} <span class="danger" v-if="item.is_required">*</span></span
+                    >
+                    <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
+                  </div>
+                </template>
+                <el-input
+                  v-model="item.value"
+                  :placeholder="$t('views.tool.form.param.inputPlaceholder')"
+                />
+              </el-form-item>
+            </template>
+          </el-form>
+        </el-card>
+      </div>
+
+      <el-button type="primary" @click="submit(FormRef)" :loading="loading">
+        {{ $t('views.tool.form.debug.run') }}
+      </el-button>
+      <div v-if="showResult" class="mt-8">
+        <h4 class="title-decoration-1 mb-16 mt-16">
+          {{ $t('views.tool.form.debug.runResult') }}
+        </h4>
+        <div class="mb-16">
+          <el-alert
+            v-if="isSuccess"
+            :title="$t('views.tool.form.debug.runSuccess')"
+            type="success"
+            show-icon
+            :closable="false"
+          />
+          <el-alert
+            v-else
+            :title="$t('views.tool.form.debug.runFailed')"
+            type="error"
+            show-icon
+            :closable="false"
+          />
+        </div>
+
+        <p class="lighter mb-8">{{ $t('views.tool.form.debug.output') }}</p>
+
+        <el-card
+          :class="isSuccess ? '' : 'danger'"
+          class="pre-wrap"
+          shadow="never"
+          style="max-height: 350px; overflow: scroll"
+        >
+          {{ String(result) == '0' ? 0 : result || '-' }}
+        </el-card>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import ToolApi from '@/api/shared/tool'
+import type { FormInstance } from 'element-plus'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+
+const FormRef = ref()
+const dynamicsFormRef = ref()
+const loading = ref(false)
+const debugVisible = ref(false)
+const showResult = ref(false)
+const isSuccess = ref(false)
+const result = ref('')
+
+const form = ref<any>({
+  debug_field_list: [],
+  code: '',
+  input_field_list: [],
+  init_field_list: [],
+  init_params: {},
+})
+
+watch(debugVisible, (bool) => {
+  if (!bool) {
+    showResult.value = false
+    isSuccess.value = false
+    result.value = ''
+    form.value = {
+      debug_field_list: [],
+      code: '',
+      input_field_list: [],
+      init_field_list: [],
+      init_params: {},
+    }
+  }
+})
+
+const submit = async (formEl: FormInstance | undefined) => {
+  const validate = formEl ? formEl.validate() : Promise.resolve()
+  Promise.all([dynamicsFormRef.value?.validate(), validate]).then(() => {
+    ToolApi.postToolDebug(form.value, loading).then((res) => {
+      if (res.code === 500) {
+        showResult.value = true
+        isSuccess.value = false
+        result.value = res.message
+      } else {
+        showResult.value = true
+        isSuccess.value = true
+        result.value = res.data
+      }
+    })
+  })
+}
+
+const open = (data: any) => {
+  if (data.input_field_list.length > 0) {
+    data.input_field_list.forEach((item: any) => {
+      form.value.debug_field_list.push({
+        value: '',
+        ...item,
+      })
+    })
+  }
+  form.value.code = data.code
+  form.value.input_field_list = data.input_field_list
+  form.value.init_field_list = data.init_field_list
+  debugVisible.value = true
+}
+
+defineExpose({
+  open,
+})
+</script>
+<style lang="scss"></style>

ui/src/views/resource-management/tool/ToolFormDrawer.vue

@@ -0,0 +1,449 @@
+<template>
+  <el-drawer v-model="visible" size="60%" :before-close="close">
+    <template #header>
+      <h4>{{ title }}</h4>
+    </template>
+    <div>
+      <h4 class="title-decoration-1 mb-16">
+        {{ $t('views.tool.form.title.baseInfo') }}
+      </h4>
+      <el-form
+        ref="FormRef"
+        :model="form"
+        :rules="rules"
+        label-position="top"
+        require-asterisk-position="right"
+        v-loading="loading"
+        @submit.prevent
+      >
+        <el-form-item :label="$t('views.tool.form.toolName.label')" prop="name">
+          <div class="flex w-full">
+            <div
+              v-if="form.id"
+              class="edit-avatar mr-12"
+              @mouseenter="showEditIcon = true"
+              @mouseleave="showEditIcon = false"
+            >
+
+              <el-Avatar
+                v-if="isAppIcon(form.icon)"
+                :id="form.id"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
+                <img :src="String(form.icon)" alt=""/>
+              </el-Avatar>
+              <el-avatar v-else class="avatar-green" shape="square" :size="32">
+                <img src="@/assets/node/icon_tool.svg" style="width: 58%" alt=""/>
+              </el-avatar>
+              <el-Avatar
+                v-if="showEditIcon"
+                :id="form.id"
+                shape="square"
+                class="edit-mask"
+                :size="32"
+                @click="openEditAvatar"
+              >
+                <el-icon>
+                  <EditPen/>
+                </el-icon>
+              </el-Avatar>
+            </div>
+            <el-avatar v-else class="avatar-green" shape="square" :size="32">
+              <img src="@/assets/node/icon_tool.svg" style="width: 58%" alt=""/>
+            </el-avatar>
+            <el-input
+              v-model="form.name"
+              :placeholder="$t('views.tool.form.toolName.placeholder')"
+              maxlength="64"
+              show-word-limit
+              @blur="form.name = form.name?.trim()"
+            />
+          </div>
+        </el-form-item>
+
+        <el-form-item :label="$t('views.tool.form.toolDescription.label')">
+          <el-input
+            v-model="form.desc"
+            type="textarea"
+            :placeholder="$t('views.tool.form.toolDescription.placeholder')"
+            maxlength="128"
+            show-word-limit
+            :autosize="{ minRows: 3 }"
+            @blur="form.desc = form.desc?.trim()"
+          />
+        </el-form-item>
+      </el-form>
+      <div class="flex-between">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('common.param.initParam') }}
+        </h4>
+        <el-button link type="primary" @click="openAddInitDialog()">
+          <el-icon class="mr-4">
+            <Plus/>
+          </el-icon>
+          {{ $t('common.add') }}
+        </el-button>
+      </div>
+      <el-table ref="initFieldTableRef" :data="form.init_field_list" class="mb-16">
+        <el-table-column prop="field" :label="$t('dynamicsForm.paramForm.field.label')">
+          <template #default="{ row }">
+            <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('dynamicsForm.paramForm.input_type.label')">
+          <template #default="{ row }">
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'TextInput'">{{
+                $t('dynamicsForm.input_type_list.TextInput')
+              }}
+            </el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'PasswordInput'">{{
+                $t('dynamicsForm.input_type_list.PasswordInput')
+              }}
+            </el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'Slider'">{{
+                $t('dynamicsForm.input_type_list.Slider')
+              }}
+            </el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'SwitchInput'">{{
+                $t('dynamicsForm.input_type_list.SwitchInput')
+              }}
+            </el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'SingleSelect'">{{
+                $t('dynamicsForm.input_type_list.SingleSelect')
+              }}
+            </el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'MultiSelect'">{{
+                $t('dynamicsForm.input_type_list.MultiSelect')
+              }}
+            </el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'RadioCard'">{{
+                $t('dynamicsForm.input_type_list.RadioCard')
+              }}
+            </el-tag>
+            <el-tag type="info" class="info-tag" v-if="row.input_type === 'DatePicker'">{{
+                $t('dynamicsForm.input_type_list.DatePicker')
+              }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.required')">
+          <template #default="{ row }">
+            <div @click.stop>
+              <el-switch disabled size="small" v-model="row.required"/>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.operation')" align="left" width="90">
+          <template #default="{ row, $index }">
+            <span class="mr-4">
+              <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
+                <el-button type="primary" text @click.stop="openAddInitDialog(row, $index)">
+                  <el-icon><EditPen/></el-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+            <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
+              <el-button type="primary" text @click="deleteInitField($index)">
+                <el-icon>
+                  <Delete/>
+                </el-icon>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="flex-between">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('common.param.inputParam') }}
+          <el-text type="info" class="color-secondary">
+            {{ $t('views.tool.form.param.paramInfo1') }}
+          </el-text>
+        </h4>
+        <el-button link type="primary" @click="openAddDialog()">
+          <el-icon class="mr-4">
+            <Plus/>
+          </el-icon>
+          {{ $t('common.add') }}
+        </el-button>
+      </div>
+
+      <el-table ref="inputFieldTableRef" :data="form.input_field_list" class="mb-16">
+        <el-table-column prop="name" :label="$t('views.tool.form.paramName.label')"/>
+        <el-table-column :label="$t('views.tool.form.dataType.label')">
+          <template #default="{ row }">
+            <el-tag type="info" class="info-tag">{{ row.type }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.required')">
+          <template #default="{ row }">
+            <div @click.stop>
+              <el-switch size="small" v-model="row.is_required"/>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="source" :label="$t('views.tool.form.source.label')">
+          <template #default="{ row }">
+            {{
+              row.source === 'custom'
+                ? $t('views.tool.form.source.custom')
+                : $t('views.tool.form.source.reference')
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('common.operation')" align="left" width="90">
+          <template #default="{ row, $index }">
+            <span class="mr-4">
+              <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
+                <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+                  <el-icon><EditPen/></el-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+            <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
+              <el-button type="primary" text @click="deleteField($index)">
+                <el-icon>
+                  <Delete/>
+                </el-icon>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <h4 class="title-decoration-1 mb-16">
+        {{ $t('views.tool.form.param.code') }}
+        <span style="color: red; margin-left: -10px">*</span>
+        <el-text type="info" class="color-secondary">
+          {{ $t('views.tool.form.param.paramInfo2') }}
+        </el-text>
+      </h4>
+
+      <div class="mb-8" v-if="showEditor">
+        <CodemirrorEditor
+          :title="$t('views.tool.form.param.code')"
+          v-model="form.code"
+          @submitDialog="submitCodemirrorEditor"
+        />
+      </div>
+      <h4 class="title-decoration-1 mb-16 mt-16">
+        {{ $t('common.param.outputParam') }}
+        <el-text type="info" class="color-secondary">
+          {{ $t('views.tool.form.param.paramInfo1') }}
+        </el-text>
+      </h4>
+      <div class="flex-between border-r-4 p-8-12 mb-8 layout-bg lighter">
+        <span>{{ $t('common.result') }} {result}</span>
+      </div>
+    </div>
+
+    <template #footer>
+      <div>
+        <el-button :loading="loading" @click="visible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button :loading="loading" @click="openDebug">{{ $t('common.debug') }}</el-button>
+        <el-button type="primary" @click="submit(FormRef)" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.create') }}
+        </el-button
+        >
+      </div>
+    </template>
+
+    <ToolDebugDrawer ref="ToolDebugDrawerRef"/>
+    <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList"/>
+    <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshInitFieldList"/>
+    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshTool"/>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import {ref, reactive, watch, nextTick} from 'vue'
+import FieldFormDialog from '@/views/resource-management/tool/component/FieldFormDialog.vue'
+import ToolDebugDrawer from './ToolDebugDrawer.vue'
+import UserFieldFormDialog from '@/views/resource-management/tool/component/UserFieldFormDialog.vue'
+import EditAvatarDialog from '@/views/resource-management/tool/component/EditAvatarDialog.vue'
+import type {toolData} from '@/api/type/tool'
+import ToolApi from '@/api/shared/tool'
+import type {FormInstance} from 'element-plus'
+import {MsgSuccess, MsgConfirm} from '@/utils/message'
+import {cloneDeep} from 'lodash'
+import {PermissionType, PermissionDesc} from '@/enums/model'
+import {t} from '@/locales'
+import {isAppIcon} from '@/utils/common'
+
+const props = defineProps({
+  title: String,
+})
+
+const emit = defineEmits(['refresh'])
+const FieldFormDialogRef = ref()
+const ToolDebugDrawerRef = ref()
+const UserFieldFormDialogRef = ref()
+const EditAvatarDialogRef = ref()
+const initFieldTableRef = ref()
+const inputFieldTableRef = ref()
+
+const FormRef = ref()
+
+const isEdit = ref(false)
+const loading = ref(false)
+const visible = ref(false)
+const showEditor = ref(false)
+const currentIndex = ref<any>(null)
+const showEditIcon = ref(false)
+
+const form = ref<toolData>({
+  name: '',
+  desc: '',
+  code: '',
+  icon: '',
+  input_field_list: [],
+  init_field_list: [],
+})
+
+watch(visible, (bool) => {
+  if (!bool) {
+    isEdit.value = false
+    showEditor.value = false
+    currentIndex.value = null
+    form.value = {
+      name: '',
+      desc: '',
+      code: '',
+      icon: '',
+      input_field_list: [],
+      init_field_list: [],
+    }
+    FormRef.value?.clearValidate()
+  }
+})
+
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: t('views.tool.form.toolName.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
+})
+
+function submitCodemirrorEditor(val: string) {
+  form.value.code = val
+}
+
+function close() {
+  if (isEdit.value || !areAllValuesNonEmpty(form.value)) {
+    visible.value = false
+  } else {
+    MsgConfirm(t('common.tip'), t('views.tool.tip.saveMessage'), {
+      confirmButtonText: t('common.confirm'),
+      type: 'warning',
+    })
+      .then(() => {
+        visible.value = false
+      })
+      .catch(() => {
+      })
+  }
+}
+
+function areAllValuesNonEmpty(obj: any) {
+  return Object.values(obj).some((value) => {
+    return Array.isArray(value)
+      ? value.length !== 0
+      : value !== null && value !== undefined && value !== ''
+  })
+}
+
+function openDebug() {
+  ToolDebugDrawerRef.value.open(form.value)
+}
+
+function deleteField(index: any) {
+  form.value.input_field_list?.splice(index, 1)
+}
+
+function openAddDialog(data?: any, index?: any) {
+  if (typeof index !== 'undefined') {
+    currentIndex.value = index
+  }
+
+  FieldFormDialogRef.value.open(data)
+}
+
+function refreshFieldList(data: any) {
+  if (currentIndex.value !== null) {
+    form.value.input_field_list?.splice(currentIndex.value, 1, data)
+  } else {
+    form.value.input_field_list?.push(data)
+  }
+  currentIndex.value = null
+}
+
+function openAddInitDialog(data?: any, index?: any) {
+  if (typeof index !== 'undefined') {
+    currentIndex.value = index
+  }
+
+  UserFieldFormDialogRef.value.open(data)
+}
+
+function refreshInitFieldList(data: any) {
+  if (currentIndex.value !== null) {
+    form.value.init_field_list?.splice(currentIndex.value, 1, data)
+  } else {
+    form.value.init_field_list?.push(data)
+  }
+  currentIndex.value = null
+  UserFieldFormDialogRef.value.close()
+}
+
+function refreshTool(data: any) {
+  form.value.icon = data
+}
+
+function deleteInitField(index: any) {
+  form.value.init_field_list?.splice(index, 1)
+}
+
+function openEditAvatar() {
+  EditAvatarDialogRef.value.open(form.value)
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid: any) => {
+    if (valid) {
+      if (isEdit.value) {
+        ToolApi.putTool(form.value?.id as string, form.value, loading).then((res) => {
+          MsgSuccess(t('common.editSuccess'))
+          emit('refresh', res.data)
+          visible.value = false
+        })
+      } else {
+        ToolApi.postTool(form.value, loading).then((res) => {
+          MsgSuccess(t('common.createSuccess'))
+          emit('refresh')
+          visible.value = false
+        })
+      }
+    }
+  })
+}
+
+const open = (data: any) => {
+  if (data) {
+    isEdit.value = data?.id ? true : false
+    form.value = cloneDeep(data)
+  }
+  visible.value = true
+  setTimeout(() => {
+    showEditor.value = true
+  }, 100)
+}
+
+defineExpose({
+  open,
+})
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/tool/component/AddInternalFunctionDialog.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-dialog
+    :title="$t('views.tool.form.toolName.name')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    append-to-body
+    width="450"
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item prop="name">
+        <el-input v-model="form.name" maxlength="64" show-word-limit></el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.add') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import { t } from '@/locales'
+
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref<boolean>(false)
+
+const form = ref<any>({
+  name: ''
+})
+
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: t('views.tool.form.toolName.placeholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      name: ''
+    }
+  }
+})
+
+const open = (row: any, edit: boolean) => {
+  if (row) {
+    form.value = cloneDeep(row)
+  }
+  isEdit.value = edit || false
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value, isEdit.value)
+      dialogVisible.value = false
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/tool/component/EditAvatarDialog.vue

@@ -0,0 +1,120 @@
+<template>
+  <el-dialog
+    :title="`Logo ${$t('common.setting')}`"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="550"
+  >
+    <el-radio-group v-model="radioType" class="radio-block mb-16">
+      <el-radio value="default">
+        <p>{{ $t('common.EditAvatarDialog.default') }}</p>
+        <el-avatar class="avatar-green" shape="square" :size="32">
+          <img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
+        </el-avatar>
+      </el-radio>
+
+      <el-radio value="custom">
+        <p>{{ $t('common.EditAvatarDialog.customizeUpload') }}</p>
+        <div class="flex mt-8">
+          <el-avatar
+            v-if="fileURL"
+            shape="square"
+            :size="32"
+            style="background: none"
+            class="mr-16"
+          >
+            <img :src="fileURL" alt="" />
+          </el-avatar>
+          <el-upload
+            ref="uploadRef"
+            action="#"
+            :auto-upload="false"
+            :show-file-list="false"
+            accept="image/jpeg, image/png, image/gif"
+            :on-change="onChange"
+          >
+            <el-button icon="Upload" :disabled="radioType !== 'custom'"
+              >{{ $t('common.EditAvatarDialog.upload') }}
+            </el-button>
+          </el-upload>
+        </div>
+        <div class="el-upload__tip info mt-8">
+          {{ $t('common.EditAvatarDialog.sizeTip') }}
+        </div>
+      </el-radio>
+    </el-radio-group>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit" :loading="loading">
+          {{ $t('common.save') }}</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import ToolApi from '@/api/shared/tool'
+import { cloneDeep } from 'lodash'
+import { MsgError, MsgSuccess } from '@/utils/message'
+import { defaultIcon, isAppIcon } from '@/utils/common'
+import { t } from '@/locales'
+
+const emit = defineEmits(['refresh'])
+
+const iconFile = ref<any>(null)
+const fileURL = ref<any>(null)
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+const detail = ref<any>(null)
+const radioType = ref('default')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    iconFile.value = null
+    fileURL.value = null
+  }
+})
+
+const open = (data: any) => {
+  radioType.value = isAppIcon(data.icon) ? 'custom' : 'default'
+  fileURL.value = isAppIcon(data.icon) ? data.icon : null
+  detail.value = cloneDeep(data)
+  dialogVisible.value = true
+}
+
+const onChange = (file: any) => {
+  //1、判断文件大小是否合法，文件限制不能大于10MB
+  const isLimit = file?.size / 1024 / 1024 < 10
+  if (!isLimit) {
+    // @ts-ignore
+    MsgError(t('common.EditAvatarDialog.fileSizeExceeded'))
+    return false
+  } else {
+    iconFile.value = file
+    fileURL.value = URL.createObjectURL(file.raw)
+  }
+}
+
+function submit() {
+  if (radioType.value === 'default') {
+    emit('refresh', '/ui/favicon.ico')
+    dialogVisible.value = false
+  } else if (radioType.value === 'custom' && iconFile.value) {
+    const fd = new FormData()
+    fd.append('file', iconFile.value.raw)
+    ToolApi.putToolIcon(detail.value.id, fd, loading).then((res: any) => {
+      emit('refresh', res.data)
+      dialogVisible.value = false
+    })
+  } else {
+    MsgError(t('common.EditAvatarDialog.uploadImagePrompt'))
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/tool/component/FieldFormDialog.vue

@@ -0,0 +1,116 @@
+<template>
+  <el-dialog
+    :title="isEdit ? $t('common.param.editParam') : $t('common.param.addParam')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('views.tool.form.paramName.label')" prop="name">
+        <el-input
+          v-model="form.name"
+          :placeholder="$t('views.tool.form.paramName.placeholder')"
+          maxlength="64"
+          show-word-limit
+          @blur="form.name = form.name.trim()"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.tool.form.dataType.label')">
+        <el-select v-model="form.type">
+          <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('views.tool.form.source.label')">
+        <el-select v-model="form.source">
+          <el-option :label="$t('views.tool.form.source.reference')" value="reference" />
+          <el-option :label="$t('views.tool.form.source.custom')" value="custom" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('views.tool.form.required.label')" @click.prevent>
+        <el-switch size="small" v-model="form.is_required"></el-switch>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.add') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import { t } from '@/locales'
+const typeOptions = ['string', 'int', 'dict', 'array', 'float']
+
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+
+const form = ref<any>({
+  name: '',
+  type: typeOptions[0],
+  source: 'reference',
+  is_required: true,
+})
+
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: t('views.tool.form.paramName.placeholder'),
+      trigger: 'blur',
+    },
+  ],
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      name: '',
+      type: typeOptions[0],
+      source: 'reference',
+      is_required: true,
+    }
+    isEdit.value = false
+  }
+})
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+      dialogVisible.value = false
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/tool/component/InitParamDrawer.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-drawer v-model="debugVisible" size="60%" :append-to-body="true">
+    <template #header>
+      <h4>{{ $t('common.param.initParam') }}</h4>
+    </template>
+    <div>
+      <div v-if="form.init_field_list?.length > 0">
+        <DynamicsForm
+          v-model="form.init_params"
+          :model="form.init_params"
+          label-position="top"
+          require-asterisk-position="right"
+          :render_data="form.init_field_list"
+          ref="dynamicsFormRef"
+        >
+        </DynamicsForm>
+      </div>
+    </div>
+    <template #footer>
+      <div>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import {ref, watch} from 'vue'
+import ToolApi from '@/api/shared/tool'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+import {MsgSuccess} from '@/utils/message'
+import {t} from '@/locales'
+import {cloneDeep} from 'lodash'
+
+const emit = defineEmits(['refresh'])
+
+const dynamicsFormRef = ref()
+const loading = ref(false)
+const debugVisible = ref(false)
+
+const form = ref<any>({
+  init_params: {},
+})
+
+watch(debugVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      init_params: {},
+      is_active: false,
+    }
+  }
+})
+
+const submit = async () => {
+  dynamicsFormRef.value.validate().then(() => {
+    ToolApi.putTool(form.value?.id as string, form.value, loading).then((res) => {
+      MsgSuccess(t('common.editSuccess'))
+      emit('refresh')
+      debugVisible.value = false
+    })
+  })
+}
+
+const open = (data: any, is_active: boolean) => {
+  if (data) {
+    form.value = cloneDeep(data)
+    form.value.is_active = is_active
+  }
+  const init_params = form.value.init_field_list
+    .map((item: any) => {
+      if (item.show_default_value === false) {
+        return {[item.field]: undefined}
+      }
+      return {[item.field]: item.default_value}
+    })
+    .reduce((x: any, y: any) => ({...x, ...y}), {})
+  form.value.init_params = {...init_params, ...form.value.init_params}
+  debugVisible.value = true
+}
+
+defineExpose({
+  open,
+})
+</script>
+<style lang="scss"></style>

ui/src/views/resource-management/tool/component/InternalDescDrawer.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-drawer v-model="visibleInternalDesc" size="60%" :append-to-body="true">
+    <template #header>
+      <div class="flex align-center" style="margin-left: -8px">
+        <el-button class="cursor mr-4" link @click.prevent="visibleInternalDesc = false">
+          <el-icon :size="20">
+            <Back />
+          </el-icon>
+        </el-button>
+        <h4>详情</h4>
+      </div>
+    </template>
+
+    <div>
+      <div class="card-header">
+        <div class="flex-between">
+          <div class="title flex align-center">
+            <el-avatar
+              v-if="isAppIcon(functionDetail?.icon)"
+              shape="square"
+              :size="64"
+              style="background: none"
+              class="mr-8"
+            >
+              <img :src="functionDetail?.icon" alt="" />
+            </el-avatar>
+            <el-avatar
+              v-else-if="functionDetail?.name"
+              :name="functionDetail?.name"
+              pinyinColor
+              shape="square"
+              :size="64"
+              class="mr-8"
+            />
+            <div class="ml-16">
+              <h3 class="mb-8">{{ functionDetail.name }}</h3>
+              <el-text type="info" v-if="functionDetail?.desc">
+                {{ functionDetail.desc }}
+              </el-text>
+            </div>
+          </div>
+          <div @click.stop>
+            <el-button type="primary" @click="addInternalFunction(functionDetail)">
+              {{ $t('common.add') }}
+            </el-button>
+          </div>
+        </div>
+
+        <div class="mt-16">
+          <el-text type="info">
+            <div>{{ $t('common.author') }}: MaxKB</div>
+          </el-text>
+        </div>
+      </div>
+      <MdPreview
+        ref="editorRef"
+        editorId="preview-only"
+        :modelValue="markdownContent"
+        style="background: none"
+        noImgZoomIn
+      />
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { cloneDeep } from 'lodash'
+import { isAppIcon } from '@/utils/common'
+const emit = defineEmits(['refresh', 'addFunction'])
+
+const visibleInternalDesc = ref(false)
+const markdownContent = ref('')
+const functionDetail = ref<any>({})
+
+watch(visibleInternalDesc, (bool) => {
+  if (!bool) {
+    markdownContent.value = ''
+  }
+})
+
+const open = (data: any, detail: any) => {
+  functionDetail.value = detail
+  if (data) {
+    markdownContent.value = cloneDeep(data)
+  }
+  visibleInternalDesc.value = true
+}
+
+const addInternalFunction = (data: any) => {
+  emit('addFunction', data)
+  visibleInternalDesc.value = false
+}
+
+defineExpose({
+  open
+})
+</script>
+<style lang="scss"></style>

ui/src/views/resource-management/tool/component/UserFieldFormDialog.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-dialog
+    :title="isEdit ? $t('common.param.editParam') : $t('common.param.addParam')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <DynamicsFormConstructor
+      v-model="currentRow"
+      label-position="top"
+      require-asterisk-position="right"
+      :input_type_list="inputTypeList"
+      ref="DynamicsFormConstructorRef"
+    ></DynamicsFormConstructor>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="close"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.add') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { cloneDeep } from 'lodash'
+import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import _ from 'lodash'
+import { t } from '@/locales'
+const emit = defineEmits(['refresh'])
+
+const DynamicsFormConstructorRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+const currentItem = ref<FormField | any>()
+const check_field = (field_list: Array<string>, obj: any) => {
+  return field_list.every((field) => _.get(obj, field, undefined) !== undefined)
+}
+const currentRow = computed(() => {
+  if (currentItem.value) {
+    const row = currentItem.value
+    switch (row.type) {
+      case 'input':
+        if (check_field(['field', 'input_type', 'label', 'required', 'attrs'], currentItem.value)) {
+          return currentItem.value
+        }
+        return {
+          attrs: row.attrs || { maxlength: 200, minlength: 0 },
+          field: row.field || row.variable,
+          input_type: 'TextInput',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required,
+        }
+      case 'select':
+        if (
+          check_field(
+            ['field', 'input_type', 'label', 'required', 'option_list'],
+            currentItem.value,
+          )
+        ) {
+          return currentItem.value
+        }
+        return {
+          attrs: row.attrs || {},
+          field: row.field || row.variable,
+          input_type: 'SingleSelect',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required,
+          option_list: row.option_list
+            ? row.option_list
+            : row.optionList.map((o: any) => {
+                return { key: o, value: o }
+              }),
+        }
+
+      case 'date':
+        if (
+          check_field(
+            [
+              'field',
+              'input_type',
+              'label',
+              'required',
+              'attrs.format',
+              'attrs.value-format',
+              'attrs.type',
+            ],
+            currentItem.value,
+          )
+        ) {
+          return currentItem.value
+        }
+        return {
+          field: row.field || row.variable,
+          input_type: 'DatePicker',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required,
+          attrs: {
+            format: 'YYYY-MM-DD HH:mm:ss',
+            'value-format': 'YYYY-MM-DD HH:mm:ss',
+            type: 'datetime',
+          },
+        }
+      default:
+        return currentItem.value
+    }
+  } else {
+    return {
+      input_type: 'TextInput',
+      required: false,
+      attrs: { maxlength: 200, minlength: 0 },
+      show_default_value: true,
+    }
+  }
+})
+const currentIndex = ref(null)
+const inputTypeList = ref([
+  { label: t('dynamicsForm.input_type_list.TextInput'), value: 'TextInputConstructor' },
+  { label: t('dynamicsForm.input_type_list.PasswordInput'), value: 'PasswordInputConstructor' },
+  { label: t('dynamicsForm.input_type_list.SingleSelect'), value: 'SingleSelectConstructor' },
+  { label: t('dynamicsForm.input_type_list.MultiSelect'), value: 'MultiSelectConstructor' },
+  { label: t('dynamicsForm.input_type_list.RadioCard'), value: 'RadioCardConstructor' },
+  { label: t('dynamicsForm.input_type_list.DatePicker'), value: 'DatePickerConstructor' },
+  { label: t('dynamicsForm.input_type_list.SwitchInput'), value: 'SwitchInputConstructor' },
+])
+
+const dialogVisible = ref<boolean>(false)
+
+const open = (row: any, index: any) => {
+  dialogVisible.value = true
+
+  if (row) {
+    isEdit.value = true
+    currentItem.value = cloneDeep(row)
+    currentIndex.value = index
+  } else {
+    currentItem.value = null
+  }
+}
+
+const close = () => {
+  dialogVisible.value = false
+  isEdit.value = false
+  currentIndex.value = null
+  currentItem.value = null as any
+}
+
+const submit = async () => {
+  const formEl = DynamicsFormConstructorRef.value
+  if (!formEl) return
+  await formEl.validate().then(() => {
+    emit('refresh', formEl?.getData(), currentIndex.value)
+    isEdit.value = false
+    currentItem.value = null as any
+    currentIndex.value = null
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>

ui/src/views/resource-management/tool/index.vue

@@ -0,0 +1,533 @@
+<template>
+  <div class="resource-manage_tool">
+    <div class="shared-header">
+      <span class="title">{{ t('views.system.resource_management') }}</span>
+      <el-icon size="12">
+        <rightOutlined></rightOutlined>
+      </el-icon>
+      <span class="sub-title">{{ t('views.tool.title') }}</span>
+    </div>
+    <div class="table-content">
+      <div class="flex-between complex-search">
+        <el-select
+          class="complex-search__left"
+          v-model="search_type"
+          style="width: 120px"
+          @change="search_type_change"
+        >
+          <el-option :label="$t('common.creator')" value="create_user" />
+
+          <el-option :label="$t('views.model.modelForm.modeName.label')" value="name" />
+        </el-select>
+        <el-input
+          v-if="search_type === 'name'"
+          v-model="search_form.name"
+          @change="getList"
+          :placeholder="$t('common.searchBar.placeholder')"
+          style="width: 220px"
+          clearable
+        />
+        <el-select
+          v-else-if="search_type === 'create_user'"
+          v-model="search_form.create_user"
+          @change="getList"
+          clearable
+          style="width: 220px"
+        >
+          <el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.username" />
+        </el-select>
+      </div>
+      <div class="table-knowledge">
+        <el-table height="100%" :data="toolList" style="width: 100%">
+          <el-table-column type="selection" width="55" />
+          <el-table-column width="220" :label="$t('common.name')">
+            <template #default="scope">
+              <div class="table-name flex align-center">
+                <el-icon size="24">
+                  <el-avatar
+                    v-if="isAppIcon(scope.row?.icon)"
+                    shape="square"
+                    :size="24"
+                    style="background: none"
+                    class="mr-8"
+                  >
+                    <img :src="scope.row?.icon" alt="" />
+                  </el-avatar>
+                  <el-avatar v-else class="avatar-green" shape="square" :size="24">
+                    <img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
+                  </el-avatar>
+                </el-icon>
+                {{ scope.row.name }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            property="type"
+            :label="$t('views.application.form.appType.label')"
+            width="120"
+          />
+          <el-table-column width="100" property="workspace_id">
+            <template #header>
+              <div class="flex align-center">
+                {{ $t('views.role.member.workspace') }}
+
+                <el-popover placement="bottom">
+                  <template #reference
+                    ><el-icon style="margin-left: 4px; cursor: pointer" size="16">
+                      <AppIcon iconName="app-filter_outlined"></AppIcon> </el-icon
+                  ></template>
+                  <div>
+                    <el-checkbox
+                      v-model="checkAll"
+                      :indeterminate="isIndeterminate"
+                      @change="handleCheckAllChange"
+                    >
+                      {{ $t('views.document.feishu.allCheck') }}
+                    </el-checkbox>
+                    <el-checkbox-group
+                      v-model="checkedWorkspaces"
+                      @change="handleCheckedWorkspacesChange"
+                    >
+                      <el-checkbox
+                        v-for="workspace in workspaces"
+                        :key="workspace"
+                        :label="workspace"
+                        :value="workspace"
+                      >
+                        {{ workspace }}
+                      </el-checkbox>
+                    </el-checkbox-group>
+                  </div>
+                </el-popover>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column property="creator" :label="$t('common.creator')" />
+          <el-table-column
+            property="update_time"
+            sortable
+            width="180"
+            :formatter="formatter"
+            :label="$t('views.document.table.updateTime')"
+          />
+          <el-table-column
+            width="180"
+            property="create_time"
+            sortable
+            :formatter="formatter"
+            :label="$t('common.createTime')"
+          />
+          <el-table-column
+            class-name="operation-column_text"
+            width="160"
+            fixed="right"
+            :label="$t('common.operation')"
+          >
+            <template #default="scope">
+              <el-switch
+                v-model="scope.row.is_active"
+                :before-change="() => changeState(scope.row)"
+                size="small"
+                class="mr-4"
+              />
+              <el-divider direction="vertical" />
+              <el-button
+                text
+                type="primary"
+                v-if="!scope.row.template_id"
+                :disabled="!canEdit(scope.row)"
+                @click.stop="openCreateDialog(scope.row)"
+              >
+                <el-icon size="16">
+                  <EditPen />
+                </el-icon>
+              </el-button>
+
+              <el-button
+                text
+                type="primary"
+                v-if="scope.row.init_field_list?.length > 0"
+                :disabled="!canEdit(scope.row)"
+                @click.stop="configInitParams(scope.row)"
+              >
+                <el-icon size="16">
+                  <AppIcon iconName="app-operation" class="mr-4"></AppIcon>
+                </el-icon>
+              </el-button>
+              <el-button
+                text
+                type="primary"
+                :disabled="!canEdit(scope.row)"
+                @click.stop="deleteTool(scope.row)"
+              >
+                <el-icon size="16">
+                  <Delete />
+                </el-icon>
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="table__pagination mt-16">
+        <el-pagination
+          v-model:current-page="paginationConfig.current_page"
+          v-model:page-size="paginationConfig.page_size"
+          :page-sizes="pageSizes"
+          :total="paginationConfig.total"
+          layout="total, prev, pager, next, sizes"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+    <InitParamDrawer ref="InitParamDrawerRef" @refresh="refresh" />
+    <ToolFormDrawer ref="ToolFormDrawerRef" @refresh="refresh" :title="ToolDrawertitle" />
+    <CreateFolderDialog ref="CreateFolderDialogRef" @refresh="refreshFolder" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, reactive, computed } from 'vue'
+import { cloneDeep, get } from 'lodash'
+import ToolApi from '@/api/resource-management/tool'
+import useStore from '@/stores/modules-resource-management'
+import InitParamDrawer from '@/views/resource-management/tool/component/InitParamDrawer.vue'
+import iconMap from '@/components/app-icon/icons/common'
+import ToolFormDrawer from './ToolFormDrawer.vue'
+import CreateFolderDialog from '@/components/folder-tree/CreateFolderDialog.vue'
+import { t } from '@/locales'
+import { isAppIcon } from '@/utils/common'
+import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+import type { CheckboxValueType } from 'element-plus'
+
+const { folder, user } = useStore()
+
+const InitParamDrawerRef = ref()
+const search_type = ref('name')
+const search_form = ref<{
+  name: string
+  create_user: string
+}>({
+  name: '',
+  create_user: '',
+})
+const user_options = ref<any[]>([])
+let toolListbp = []
+const loading = ref(false)
+const changeStateloading = ref(false)
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 30,
+  total: 0,
+})
+const rightOutlined = iconMap['right-outlined'].iconReader()
+
+const folderList = ref<any[]>([])
+const toolList = ref<any[]>([])
+const currentFolder = ref<any>({})
+const pageSizes = [10, 20, 50, 100]
+const checkAll = ref(false)
+const isIndeterminate = ref(true)
+const checkedWorkspaces = ref([])
+let workspaces = []
+
+const handleCheckAllChange = (val: CheckboxValueType) => {
+  checkedWorkspaces.value = val ? workspaces : []
+  isIndeterminate.value = false
+  toolList.value = val ? [...toolListbp] : []
+}
+const handleCheckedWorkspacesChange = (value: CheckboxValueType[]) => {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === workspaces.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < workspaces.length
+  toolList.value = toolListbp.filter((ele) => value.includes(ele.workspace_id))
+}
+
+const handleSizeChange = (val) => {
+  console.log(val)
+}
+const handleCurrentChange = (val) => {
+  console.log(val)
+}
+const search_type_change = () => {
+  search_form.value = { name: '', create_user: '' }
+}
+const canEdit = (row: any) => {
+  // return user.userInfo?.id === row?.user_id
+  return true
+}
+
+const ToolFormDrawerRef = ref()
+const ToolDrawertitle = ref('')
+
+function openCreateDialog(data?: any) {
+  // 有template_id的不允许编辑，是模板转换来的
+  if (data?.template_id) {
+    return
+  }
+  ToolDrawertitle.value = data ? t('views.tool.editTool') : t('views.tool.createTool')
+  if (data) {
+    if (canEdit(data)) {
+      ToolApi.getToolById(data?.id, changeStateloading).then((res) => {
+        ToolFormDrawerRef.value.open(res.data)
+      })
+    }
+  } else {
+    ToolFormDrawerRef.value.open(data)
+  }
+}
+
+function getFolder() {
+  const params = {}
+  folder.asyncGetFolder('TOOL', params, loading).then((res: any) => {
+    folderList.value = res.data
+    currentFolder.value = res.data?.[0] || {}
+    getList()
+  })
+}
+
+async function changeState(row: any) {
+  if (row.is_active) {
+    MsgConfirm(
+      `${t('views.tool.disabled.confirmTitle')}${row.name} ?`,
+      t('views.tool.disabled.confirmMessage'),
+      {
+        confirmButtonText: t('common.status.disable'),
+        confirmButtonClass: 'danger',
+      },
+    ).then(() => {
+      const obj = {
+        is_active: !row.is_active,
+      }
+      ToolApi.putTool(row.id, obj, changeStateloading)
+        .then(() => {
+          return true
+        })
+        .catch(() => {
+          return false
+        })
+    })
+  } else {
+    const res = await ToolApi.getToolById(row.id, changeStateloading)
+    if (
+      !res.data.init_params &&
+      res.data.init_field_list &&
+      res.data.init_field_list.length > 0 &&
+      res.data.init_field_list.filter((item: any) => item.default_value && item.show_default_value)
+        .length !== res.data.init_field_list.length
+    ) {
+      InitParamDrawerRef.value.open(res.data, !row.is_active)
+      return false
+    }
+    const obj = {
+      is_active: !row.is_active,
+    }
+    ToolApi.putTool(row.id, obj, changeStateloading)
+      .then(() => {
+        return true
+      })
+      .catch(() => {
+        return false
+      })
+  }
+}
+const formatter = (_, __, value) => {
+  return value ? new Date(value).toLocaleString() : '-'
+}
+function refresh(data: any) {
+  if (data) {
+    const index = toolList.value.findIndex((v) => v.id === data.id)
+    // if (user.userInfo && data.user_id === user.userInfo.id) {
+    //   data.username = user.userInfo.username
+    // } else {
+    //   data.username = userOptions.value.find((v) => v.value === data.user_id)?.label
+    // }
+    toolList.value.splice(index, 1, data)
+  }
+  paginationConfig.total = 0
+  paginationConfig.current_page = 1
+  toolList.value = []
+  getList()
+}
+
+function refreshFolder() {
+  toolList.value = []
+  getFolder()
+  getList()
+}
+
+function folderClickHandel(row: any) {
+  currentFolder.value = row
+  toolList.value = []
+  getList()
+}
+
+function clickFolder(item: any) {
+  currentFolder.value.id = item.id
+  toolList.value = []
+  getList()
+}
+
+function copyTool(row: any) {
+  ToolDrawertitle.value = t('views.tool.copyTool')
+  const obj = cloneDeep(row)
+  delete obj['id']
+  obj['name'] = obj['name'] + `  ${t('views.tool.form.title.copy')}`
+  ToolFormDrawerRef.value.open(obj)
+}
+
+function exportTool(row: any) {
+  ToolApi.exportTool(row.id, row.name, loading).catch((e: any) => {
+    if (e.response.status !== 403) {
+      e.response.data.text().then((res: string) => {
+        MsgError(`${t('views.application.tip.ExportError')}:${JSON.parse(res).message}`)
+      })
+    }
+  })
+}
+
+function deleteTool(row: any) {
+  MsgConfirm(
+    `${t('views.tool.delete.confirmTitle')}${row.name} ?`,
+    t('views.tool.delete.confirmMessage'),
+    {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      confirmButtonClass: 'danger',
+    },
+  )
+    .then(() => {
+      ToolApi.delTool(row.id, loading).then(() => {
+        const index = toolList.value.findIndex((v) => v.id === row.id)
+        toolList.value.splice(index, 1)
+        MsgSuccess(t('common.deleteSuccess'))
+      })
+    })
+    .catch(() => {})
+}
+
+function configInitParams(item: any) {
+  ToolApi.getToolById(item?.id, changeStateloading).then((res) => {
+    InitParamDrawerRef.value.open(res.data)
+  })
+}
+
+const CreateFolderDialogRef = ref()
+function openCreateFolder() {
+  CreateFolderDialogRef.value.open('TOOL', currentFolder.value.parent_id)
+}
+
+const elUploadRef = ref()
+function importTool(file: any) {
+  const formData = new FormData()
+  formData.append('file', file.raw, file.name)
+  elUploadRef.value.clearFiles()
+  ToolApi.postImportTool(formData, loading)
+    .then(async (res: any) => {
+      if (res?.data) {
+        toolList.value = []
+        getList()
+      }
+    })
+    .catch((e: any) => {
+      if (e.code === 400) {
+        MsgConfirm(t('common.tip'), t('views.application.tip.professionalMessage'), {
+          cancelButtonText: t('common.confirm'),
+          confirmButtonText: t('common.professional'),
+        }).then(() => {
+          window.open('https://maxkb.cn/pricing.html', '_blank')
+        })
+      }
+    })
+}
+
+function getList() {
+  const params = {
+    folder_id: currentFolder.value?.id || localStorage.getItem('workspace_id'),
+    scope: 'WORKSPACE',
+  }
+  ToolApi.getToolList(paginationConfig, params, loading).then((res) => {
+    paginationConfig.total = res.data?.total
+    toolListbp = [...res.data?.records]
+    workspaces = [...new Set(toolListbp.map((ele) => ele.workspace_id))]
+    checkedWorkspaces.value = [...workspaces]
+    checkAll.value = true
+    handleCheckAllChange(true)
+  })
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+.resource-manage_tool {
+  padding: 16px 24px;
+  .complex-search {
+    width: 280px;
+  }
+  .complex-search__left {
+    width: 75px;
+  }
+
+  .el-avatar {
+    --el-avatar-size: 24px !important;
+  }
+
+  .table-content {
+    padding: 24px;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0px 2px 4px 0px #1f23291f;
+    margin-top: 16px;
+    height: calc(100vh - 180px);
+
+    .table-knowledge {
+      height: calc(100% - 100px);
+      margin-top: 16px;
+
+      .table-name {
+        .el-icon {
+          margin-right: 8px;
+        }
+      }
+
+      .operation-column_text {
+        .el-button.is-text {
+          --el-button-text-color: #3370ff;
+        }
+        .el-button.is-text:not(.is-disabled):hover {
+          background-color: #3370ff1a;
+        }
+        .el-button + .el-button,
+        .el-button + .el-dropdown {
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .table__pagination {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+  .shared-header {
+    color: #646a73;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+
+    :deep(.el-icon i) {
+      height: 12px;
+    }
+
+    .sub-title {
+      color: #1f2329;
+    }
+  }
+}
+</style>

ui/src/views/shared/knowledge-shared/SharedWorkspace.vue

@@ -80,9 +80,6 @@
                   @click="
                     router.push({
                       path: `/knowledge/system/${item.id}/documentShared`,
-                      query: {
-                        from: 'shared',
-                      },
                     })
                   "
                 >

ui/src/views/shared/knowledge-shared/create-component/CreateWebKnowledgeDialog.vue

@@ -105,9 +105,6 @@ const submitHandle = async () => {
           MsgSuccess(t('common.createSuccess'))
           router.push({
             path: `/knowledge/system/${res.data.id}/documentShared`,
-            query: {
-              from: 'shared',
-            },
           })
           emit('refresh')
         })

ui/src/views/shared/knowledge-shared/index.vue

@@ -171,9 +171,6 @@
                   @click="
                     router.push({
                       path: `/knowledge/system/${item.id}/documentShared`,
-                      query: {
-                        from: 'shared',
-                      },
                     })
                   "
                 >
@@ -240,9 +237,6 @@
                               @click.stop="
                                 router.push({
                                   path: `/knowledge/system/${item.id}/settingShared`,
-                                  query: {
-                                    from: 'shared',
-                                  },
                                 })
                               "
                             >

ui/src/views/shared/model-shared/SharedWorkspace.vue

@@ -107,7 +107,7 @@ import ProviderApi from '@/api/shared/provider'
 import ModelApi from '@/api/shared/model'
 import ModelWorkspaceApi from '@/api/shared/workspace'
 import type { Provider, Model } from '@/api/type/model'
-import ModelCard from '@/views/shared/model-shared/component/ModelCard.vue'
+import ModelCard from '@/views/shared/model-shared/component/ModelCardSharedWorkspace.vue'
 import ProviderComponent from '@/views/shared/model-shared/component/Provider.vue'
 import { splitArray } from '@/utils/common'
 import { modelTypeList, allObj } from '@/views/shared/model-shared/component/data'

ui/src/views/shared/model-shared/component/ModelCard.vue

@@ -61,9 +61,69 @@
         </el-button>
       </div>
     </div>
+
+    <template #mouseEnter>
+      <el-dropdown trigger="click">
+        <el-button text @click.stop>
+          <el-icon>
+            <MoreFilled />
+          </el-icon>
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              icon="EditPen"
+              :disabled="!is_permisstion"
+              text
+              @click.stop="openEditModel"
+              v-hasPermission="[
+                RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                PermissionConst.MODEL_EDIT.getWorkspacePermission,
+              ]"
+            >
+              {{ $t('common.modify') }}
+            </el-dropdown-item>
+            <el-dropdown-item icon="Lock" @click.stop="openAuthorizedWorkspaceDialog(scope.row)">{{
+              $t('views.system.authorized_workspace')
+            }}</el-dropdown-item>
+
+            <el-dropdown-item
+              v-if="
+                currentModel.model_type === 'TTS' ||
+                currentModel.model_type === 'LLM' ||
+                currentModel.model_type === 'IMAGE' ||
+                currentModel.model_type === 'TTI'
+              "
+              :disabled="!is_permisstion"
+              icon="Setting"
+              @click.stop="openParamSetting"
+              v-hasPermission="[
+                RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                PermissionConst.MODEL_EDIT.getWorkspacePermission,
+              ]"
+            >
+              {{ $t('views.model.modelForm.title.paramSetting') }}
+            </el-dropdown-item>
+            <el-dropdown-item
+              divided
+              icon="Delete"
+              :disabled="!is_permisstion"
+              text
+              @click.stop="deleteModel"
+              v-hasPermission="[
+                RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+                PermissionConst.MODEL_DELETE.getWorkspacePermission,
+              ]"
+            >
+              {{ $t('common.delete') }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </template>
     <EditModel ref="editModelRef" @submit="emit('change')"></EditModel>
-    <ParamSettingDialog ref="paramSettingRef" :model="model" />
     <AuthorizedWorkspace ref="AuthorizedWorkspaceDialogRef"></AuthorizedWorkspace>
+    <ParamSettingDialog ref="paramSettingRef" :model="model" />
   </card-box>
 </template>
 <script setup lang="ts">
@@ -74,10 +134,11 @@ import EditModel from '@/views/shared/model-shared/component/EditModel.vue'
 // import DownloadLoading from '@/components/loading/DownloadLoading.vue'
 import { MsgConfirm } from '@/utils/message'
 import { modelType } from '@/enums/model'
-import useStore from '@/stores/modules-shared-system'
-import AuthorizedWorkspace from '@/views/shared/AuthorizedWorkspaceDialog.vue'
+import useStore from '@/stores'
 import ParamSettingDialog from './ParamSettingDialog.vue'
 import { t } from '@/locales'
+import { PermissionConst, EditionConst, RoleConst } from '@/utils/permission/data'
+import AuthorizedWorkspace from '@/views/shared/AuthorizedWorkspaceDialog.vue'
 
 const props = defineProps<{
   model: Model
@@ -87,6 +148,7 @@ const props = defineProps<{
 
 const { user } = useStore()
 const downModel = ref<Model>()
+const AuthorizedWorkspaceDialogRef = ref()
 
 const is_permisstion = computed(() => {
   return user.userInfo?.id == props.model.user_id
@@ -98,8 +160,11 @@ const currentModel = computed(() => {
     return props.model
   }
 })
-const AuthorizedWorkspaceDialogRef = ref()
-
+function openAuthorizedWorkspaceDialog(row: any) {
+  if (AuthorizedWorkspaceDialogRef.value) {
+    AuthorizedWorkspaceDialogRef.value.open(row, 'Model')
+  }
+}
 const errMessage = computed(() => {
   if (currentModel.value.meta && currentModel.value.meta.message) {
     if (currentModel.value.meta.message === 'pull model manifest: file does not exist') {
@@ -128,11 +193,7 @@ const deleteModel = () => {
     })
     .catch(() => {})
 }
-function openAuthorizedWorkspaceDialog(row: any) {
-  if (AuthorizedWorkspaceDialogRef.value) {
-    AuthorizedWorkspaceDialogRef.value.open(row, 'Model')
-  }
-}
+
 const cancelDownload = () => {
   ModelApi.pauseDownload(props.model.id).then(() => {
     downModel.value = undefined

ui/src/views/shared/model-shared/component/ModelCardSharedWorkspace.vue

@@ -0,0 +1,227 @@
+<template>
+  <card-box isShared :title="model.name" shadow="hover" class="model-card">
+    <template #icon>
+      <span style="height: 32px; width: 32px" :innerHTML="icon"></span>
+    </template>
+    <template #title>
+      <div class="flex" style="height: 22px">
+        {{ model.name }}
+        <span v-if="currentModel.status === 'ERROR'">
+          <el-tooltip effect="dark" :content="errMessage" placement="top">
+            <el-icon class="danger ml-4" size="18"><Warning /></el-icon>
+          </el-tooltip>
+        </span>
+        <span v-if="currentModel.status === 'PAUSE_DOWNLOAD'">
+          <el-tooltip
+            effect="dark"
+            :content="`${$t('views.model.modelForm.base_model.label')}: ${props.model.model_name} ${$t('views.model.tip.downloadError')}`"
+            placement="top"
+          >
+            <el-icon class="danger ml-4" size="18"><Warning /></el-icon>
+          </el-tooltip>
+        </span>
+      </div>
+    </template>
+    <template #subTitle>
+      <el-text class="color-secondary lighter" size="small">
+        {{ $t('common.creator') }}: {{ model.username }}
+      </el-text>
+    </template>
+    <ul>
+      <li class="flex mb-4">
+        <el-text type="info" class="color-secondary"
+          >{{ $t('views.model.modelForm.model_type.label') }}
+        </el-text>
+        <span class="ellipsis ml-16">
+          {{ $t(modelType[model.model_type as keyof typeof modelType]) }}</span
+        >
+      </li>
+      <li class="flex">
+        <el-text type="info" class="color-secondary"
+          >{{ $t('views.model.modelForm.base_model.label') }}
+        </el-text>
+        <span class="ellipsis-1 ml-16" style="height: 20px; width: 70%">
+          {{ model.model_name }}</span
+        >
+      </li>
+    </ul>
+    <!-- progress -->
+    <div class="progress-mask" v-if="currentModel.status === 'DOWNLOAD'">
+      <!-- <DownloadLoading class="percentage" /> -->
+
+      <div class="percentage-label flex-center">
+        {{ $t('views.model.download.downloading') }} <span class="dotting"></span>
+        <el-button
+          link
+          type="primary"
+          class="ml-16"
+          :disabled="!is_permisstion"
+          @click.stop="cancelDownload"
+          >{{ $t('views.model.download.cancelDownload') }}
+        </el-button>
+      </div>
+    </div>
+    <EditModel ref="editModelRef" @submit="emit('change')"></EditModel>
+    <ParamSettingDialog ref="paramSettingRef" :model="model" />
+  </card-box>
+</template>
+<script setup lang="ts">
+import type { Provider, Model } from '@/api/type/model'
+import ModelApi from '@/api/shared/model'
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import EditModel from '@/views/shared/model-shared/component/EditModel.vue'
+// import DownloadLoading from '@/components/loading/DownloadLoading.vue'
+import { MsgConfirm } from '@/utils/message'
+import { modelType } from '@/enums/model'
+import useStore from '@/stores'
+import AuthorizedWorkspace from '@/views/shared/AuthorizedWorkspaceDialog.vue'
+import ParamSettingDialog from './ParamSettingDialog.vue'
+import { t } from '@/locales'
+
+const props = defineProps<{
+  model: Model
+  provider_list: Array<Provider>
+  updateModelById: (model_id: string, model: Model) => void
+}>()
+
+const { user } = useStore()
+const downModel = ref<Model>()
+
+const is_permisstion = computed(() => {
+  return user.userInfo?.id == props.model.user_id
+})
+const currentModel = computed(() => {
+  if (downModel.value) {
+    return downModel.value
+  } else {
+    return props.model
+  }
+})
+
+const errMessage = computed(() => {
+  if (currentModel.value.meta && currentModel.value.meta.message) {
+    if (currentModel.value.meta.message === 'pull model manifest: file does not exist') {
+      return `${currentModel.value.model_name} ${t('views.model.tip.noModel')}`
+    }
+    return currentModel.value.meta.message
+  }
+  return ''
+})
+const emit = defineEmits(['change', 'update:model'])
+const editModelRef = ref<InstanceType<typeof EditModel>>()
+let interval: any
+const deleteModel = () => {
+  MsgConfirm(
+    t('views.model.delete.confirmTitle'),
+    `${t('views.model.delete.confirmMessage')}${props.model.name} ?`,
+    {
+      confirmButtonText: t('common.confirm'),
+      confirmButtonClass: 'danger',
+    },
+  )
+    .then(() => {
+      ModelApi.deleteModel(props.model.id).then(() => {
+        emit('change')
+      })
+    })
+    .catch(() => {})
+}
+
+const cancelDownload = () => {
+  ModelApi.pauseDownload(props.model.id).then(() => {
+    downModel.value = undefined
+    emit('change')
+  })
+}
+const openEditModel = () => {
+  const provider = props.provider_list.find((p) => p.provider === props.model.provider)
+  if (provider) {
+    editModelRef.value?.open(provider, props.model)
+  }
+}
+const icon = computed(() => {
+  return props.provider_list.find((p) => p.provider === props.model.provider)?.icon
+})
+
+/**
+ * 初始化轮询
+ */
+const initInterval = () => {
+  interval = setInterval(() => {
+    if (currentModel.value.status === 'DOWNLOAD') {
+      ModelApi.getModelMetaById(props.model.id).then((ok) => {
+        downModel.value = ok.data
+      })
+    } else {
+      if (downModel.value) {
+        props.updateModelById(props.model.id, downModel.value)
+        downModel.value = undefined
+      }
+    }
+  }, 6000)
+}
+
+/**
+ * 关闭轮询
+ */
+const closeInterval = () => {
+  if (interval) {
+    clearInterval(interval)
+  }
+}
+
+const paramSettingRef = ref<InstanceType<typeof ParamSettingDialog>>()
+const openParamSetting = () => {
+  paramSettingRef.value?.open()
+}
+
+onMounted(() => {
+  initInterval()
+})
+onBeforeUnmount(() => {
+  // 清除定时任务
+  closeInterval()
+})
+</script>
+<style lang="scss" scoped>
+.model-card {
+  min-height: 135px;
+  min-width: auto;
+
+  .operation-button {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    height: auto;
+  }
+
+  .progress-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(255, 255, 255, 0.9);
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+    text-align: center;
+
+    .percentage {
+      margin-top: 55px;
+      margin-bottom: 16px;
+    }
+
+    // .percentage-value {
+    //   display: flex;
+    //   font-size: 13px;
+    //   align-items: center;
+    //   color: var(--app-text-color-secondary);
+    // }
+    .percentage-label {
+      margin-top: 50px;
+      margin-left: 10px;
+      font-size: 13px;
+      color: var(--app-text-color-secondary);
+    }
+  }
+}
+</style>