feat(knowledge): 新增元数据操作功能

- 在知识库详情页面添加元数据操作功能
- 实现元数据的添加、编辑和删除
- 优化元数据展示和操作界面
- 新增相关API接口和组件

src/api/generatedApi/index.js

@@ -367,3 +367,35 @@ export function builtInEnableMetadata(data) {
     data
   })
 }
+// 查询文档元数据列表
+export function getMetaDataDocList(data) {
+  return request({
+    url: getUrl(`/document/metadata/list`),
+    method: 'post',
+    data
+  })
+}
+// 新增文档元数据
+export function addMetaDataDoc(data) {
+  return request({
+    url: getUrl(`/documentMetadataEx/create`),
+    method: 'post',
+    data
+  })
+}
+// 删除文档元数据
+export function deleteMetaDataDoc(data) {
+  return request({
+    url: getUrl(`/documentMetadataEx/delete`),
+    method: 'post',
+    data
+  })
+}
+// 编辑文档元数据
+export function updateMetaDataDoc(data) {
+  return request({
+    url: getUrl(`/documentMetadataEx/update`),
+    method: 'post',
+    data
+  })
+}

src/assets/js/utils/request.js

@@ -80,7 +80,11 @@ service.interceptors.response.use(
       return Promise.reject(res)
     } else if (res.code !== 0) {
       Message({
-        message: res.message || res.content.resultMessage || '接口请求错误',
+        message:
+          res.result ||
+          res.message ||
+          res.content.resultMessage ||
+          '接口请求错误',
         type: 'error',
         duration: 5 * 1000
       })
@@ -88,7 +92,7 @@ service.interceptors.response.use(
     } else {
       if (!res.content.result || res.content.result !== '0') {
         Message({
-          message: res.content.resultMessage || '接口请求错误',
+          message: res.result || res.content.resultMessage || '接口请求错误',
           type: 'error',
           duration: 5 * 1000
         })

src/components/RenderDialog/index.vue

@@ -11,7 +11,7 @@
     <div class="render-dialog-body">
       <slot name="default"></slot>
     </div>
-    <div slot="footer">
+    <div slot="footer" v-if="isShowFooter">
       <slot name="footer">
         <el-button size="medium" @click="cancel">{{
           cancelButtonText
@@ -56,7 +56,7 @@ export default {
     },
     title: {
       type: String,
-      default: '标题'
+      default: ''
     },
     confirmButtonText: {
       type: String,
@@ -65,6 +65,10 @@ export default {
     cancelButtonText: {
       type: String,
       default: '取消'
+    },
+    isShowFooter: {
+      type: Boolean,
+      default: true
     }
   },
   watch: {},

src/views/knowledge/detail/components/documentDetail/DocumentDrawer.vue

@@ -7,158 +7,36 @@
   >
     <!-- drawer title -->
     <template #title>
-      <div class="flex align-items-c">
+      <div class="flex align-items-c justify-content-b">
+        <div class="flex">
           <img :src="knowledgePng_2" alt="" style="width: 25px;" />
           <div class="ml10">{{ descriptions.dataset.knowledgeName }}</div>
           <el-tag type="info" class="ml10" size="mini">
             {{ descriptions.dataset.segmentedMode | filterSegmentedMode }}
           </el-tag>
         </div>
+        <!--        <div class="mr100">-->
+        <!--          <el-button type="primary" size="medium" @click="handleDisplayMetadata"-->
+        <!--            >元数据操作</el-button-->
+        <!--          >-->
+        <!--        </div>-->
+      </div>
     </template>
     <knowledgeInfo
       :form="descriptions"
       :fullscreen="true"
       v-if="visible"
     ></knowledgeInfo>
-
-    <!--    </template>-->
-    <!--    <div class="drawer-content">-->
-    <!--      &lt;!&ndash; 文件信息详情 &ndash;&gt;-->
-    <!--      <el-card :shadow="'none'">-->
-    <!--        <el-descriptions size="small" :column="4">-->
-    <!--          <el-descriptions-item label="文件名称">-->
-    <!--            <i class="el-icon-document"></i-->
-    <!--            >{{ descriptions.dataset.knowledgeName }}-->
-    <!--          </el-descriptions-item>-->
-    <!--          <el-descriptions-item label="分段模式">-->
-    <!--            {{ descriptions.dataset.segmentedMode | filterSegmentedMode }}-->
-    <!--          </el-descriptions-item>-->
-    <!--          <el-descriptions-item label="上传时间">-->
-    <!--            {{ descriptions.createdDate }}-->
-    <!--          </el-descriptions-item>-->
-    <!--          <el-descriptions-item label="任务状态">-->
-    <!--            {{ descriptions.documentStatus | filterDocumentStatus }}-->
-    <!--          </el-descriptions-item>-->
-    <!--          <el-descriptions-item label="上传用户">-->
-    <!--            {{ descriptions.createdUser }}-->
-    <!--          </el-descriptions-item>-->
-    <!--          <el-descriptions-item label="高级模式">-->
-    <!--            {{ descriptions.documentSource ? '是' : '否' }}-->
-    <!--          </el-descriptions-item>-->
-    <!--          <el-descriptions-item label="任务号">-->
-    <!--            {{ descriptions.datasetId }}-->
-    <!--          </el-descriptions-item>-->
-    <!--        </el-descriptions>-->
-    <!--      </el-card>-->
-    <!--    </div>-->
-
-    <!-- 屏蔽规则内容 -->
-    <!-- <el-divider></el-divider>
-
-    <div class="segment-info">
-      <div class="segment-header">
-        <h4>分段规则</h4>
-      </div>
-      <div class="rule-card">
-        <div class="rule-item">
-          <h5>是否使用预处理:</h5>
-          <span>{{ descriptions.usePreProcess | filterUseMineru }}</span>
-        </div>
-        <div class="rule-item">
-          <h5>是否使用OCR协助处理:</h5>
-          <span>{{ descriptions.useOcr | filterUseMineru }}</span>
-        </div>
-        <div class="rule-item">
-          <h5>知识拆分规则:</h5>
-          <span v-if="!documentDetail.splitRules">
-            -
-          </span>
-          <div v-else class="flex" style="flex-wrap: wrap">
-            <div v-for="item in documentDetail.splitRules" :key="item.id" class="rule-detail-item">
-              <div>
-                <p class="rule-label">样式</p>
-                <span class="rule-value">{{ item.titleLevel }}</span>
-              </div>
-              <div>
-                <p class="rule-label">关键词</p>
-                <span class="rule-value">{{ item.ruleRegex }}</span>
-              </div>
-              <div>
-                <p class="rule-label">备注</p>
-                <span class="rule-value">{{ item.description }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="rule-item">
-          <h5>知识题词规则:</h5>
-          <span v-if="!documentDetail.extractRules">
-            -
-          </span>
-          <div v-else class="flex" style="flex-wrap: wrap">
-            <div v-for="item in documentDetail.extractRules" :key="item.id" class="rule-detail-item">
-              <div>
-                <p class="rule-label">属性</p>
-                <span class="rule-value">{{ item.attribute }}</span>
-              </div>
-              <div>
-                <p class="rule-label">属性描述</p>
-                <span class="rule-value">{{ item.attributeDesc }}</span>
-              </div>
-              <div>
-                <p class="rule-label">关键词</p>
-                <span class="rule-value">{{ item.keyword }}</span>
-              </div>
-              <div>
-                <p class="rule-label">关键词示例</p>
-                <el-tooltip class="item" effect="dark" :content="item.example" placement="top">
-                  <p class="rule-value">{{ item.example }}</p>
-                </el-tooltip>
-              </div>
-              <div>
-                <p class="rule-label">提示词</p>
-                <el-tooltip class="item" effect="dark" :content="item.prompt" placement="top">
-                  <p class="rule-value">{{ item.prompt }}</p>
-                </el-tooltip>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div> -->
-
-    <!--    <section style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">-->
-    <!--      <el-card shadow="none">-->
-    <!--        &lt;!&ndash; 分段内容 &ndash;&gt;-->
-    <!--        <div class="segment-content-container">-->
-    <!--          <div class="segment-header mb15">-->
-    <!--            <div class="segment-summary">-->
-    <!--              <span-->
-    <!--                >{{-->
-    <!--                  descriptions.data ? descriptions.data.length : 0-->
-    <!--                }}个分段</span-->
-    <!--              >-->
-    <!--            </div>-->
-    <!--          </div>-->
-    <!--          <text-model-->
-    <!--            v-if="descriptions.doc_form === 'text_model'"-->
-    <!--            :descriptions="descriptions"-->
-    <!--            :documentDetail="documentDetail"-->
-    <!--            :activeSegment="activeSegment"-->
-    <!--          />-->
-    <!--          <q-a-model-->
-    <!--            v-else-if="descriptions.doc_form === 'qa_model'"-->
-    <!--            :descriptions="descriptions"-->
-    <!--            :documentDetail="documentDetail"-->
-    <!--            :activeSegment="activeSegment"-->
-    <!--          />-->
-    <!--        </div>-->
-    <!--      </el-card>-->
-    <!--      &lt;!&ndash; 文件展示 &ndash;&gt;-->
-    <!--      <el-card shadow="none">-->
-    <!--        <render-file :id="descriptions.id" />-->
-    <!--      </el-card>-->
-    <!--    </section>-->
+    <!-- 将metadata-operator改为弹窗形式 -->
+    <r-dialog
+      title="元数据操作"
+      :visible.sync="metadataDialogVisible"
+      width="600px"
+      append-to-body
+      :is-show-footer="false"
+    >
+      <metadata-operator ref="metaDataOpe"></metadata-operator>
+    </r-dialog>
   </el-drawer>
 </template>
 
@@ -172,8 +50,15 @@ import {
 } from '@/assets/js/utils/utilOptions'
 import RenderFile from '@/components/RenderFile/Index.vue'
 import knowledgePng_2 from '@/assets/images/konwledge/knowledge-2.png'
+import MetadataOperator from '@/views/knowledge/detail/components/metaData/MetadataOperator.vue'
 export default {
-  components: { TextModel, QAModel, RenderFile, knowledgeInfo },
+  components: {
+    MetadataOperator,
+    TextModel,
+    QAModel,
+    RenderFile,
+    knowledgeInfo
+  },
   props: {
     visible: Boolean,
     descriptions: {
@@ -193,7 +78,8 @@ export default {
     return {
       knowledgePng_2,
       localActiveSegment: this.activeSegment,
-      documentSourceOptions
+      documentSourceOptions,
+      metadataDialogVisible: false
     }
   },
   watch: {
@@ -255,6 +141,9 @@ export default {
         item => item.value === String(sourceValue)
       )
       return source ? source.label : '未知来源'
+    },
+    handleDisplayMetadata() {
+      this.metadataDialogVisible = true
     }
   }
 }

src/views/knowledge/detail/components/metaData/Index.vue

@@ -181,7 +181,7 @@ export default {
       }
     },
     // 编辑
-    handleUpdate(){
+    handleUpdate() {
       let params = {
         datasetId: this.datasetId,
         id: this.id,
@@ -207,6 +207,7 @@ export default {
           this.$message.success('新增元数据成功')
           this.getMetadata()
           this.handleCancel()
+          this.$emit('getDataList')
         }
       })
     },

src/views/knowledge/detail/components/metaData/MetadataOperator.vue

@@ -0,0 +1,441 @@
+<template>
+  <div>
+    <div class="head-card" v-if="!docList.length">
+      <p class="fwb fs16">元数据</p>
+      <p class="desc">
+        元数据是关于文档的数据，用于描述文档的属性。元数据可以帮助您更好地组织和管理文档。
+      </p>
+      <el-button type="primary" size="medium" @click="addMetaData"
+        >开始标注 <i class="el-icon-right"></i
+      ></el-button>
+    </div>
+    <div class="head-card" v-else>
+      <div class="flex justify-content-b">
+        <div class="flex">
+          <p>元数据</p>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="元数据是关于文档的数据，用于描述文档的属性。元数据可以帮助您更好地组织和管理文档。"
+            placement="top"
+          >
+            <i class="el-icon-info ml5" style="color: #909399;"></i>
+          </el-tooltip>
+        </div>
+      </div>
+      <div class="doc">
+        <ul>
+          <li class="metadata-item" v-for="item in docList" :key="item.id">
+            <div class="metadata-content flex align-items-c justify-content-b">
+              <div class="metadata-key">{{ item.metadataKey || 'key' }}</div>
+              <div class="metadata-value">{{ item.metadataValue }}</div>
+            </div>
+            <div class="metadata-actions">
+              <i class="el-icon-edit" @click="editMeta(item)"></i>
+              <i class="el-icon-delete" @click="deleteMeta(item)"></i>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="text-right">
+        <el-button type="primary" size="medium" @click="addMetaData"
+          >添加元数据 <i class="el-icon-right"></i
+        ></el-button>
+      </div>
+    </div>
+    <r-dialog
+      :visible.sync="dialog.visible"
+      :close-on-click-modal="false"
+      :appendToBody="true"
+      @confirm="infoConfirm"
+      width="500px"
+      title="添加元数据值"
+      :is-show-footer="false"
+    >
+      <div class="metadata-form">
+        <div class="form-item">
+          <label class="form-label">元数据类型</label>
+          <el-select
+            v-model="dialog.metadataId"
+            placeholder="请选择元数据类型"
+            filterable
+            class="full-width"
+            size="medium"
+            @change="handleSelectChange"
+          >
+            <el-option
+              v-for="item in list"
+              :key="item.id"
+              :label="item.metadataKey"
+              :value="item.id"
+            >
+              <div class="select-option">
+                <div class="flex align-items-c">
+                  <i class="el-icon-collection-tag"></i>
+                  <p class="ml5">{{ item.metadataKey }}</p>
+                </div>
+                <p class="data-type">{{ item.dataType }}</p>
+              </div>
+            </el-option>
+          </el-select>
+        </div>
+
+        <div class="form-item">
+          <label class="form-label">元数据值</label>
+          <el-input
+            v-model="dialog.metadataValue"
+            placeholder="请输入元数据值"
+            class="full-width"
+            size="medium"
+          ></el-input>
+        </div>
+
+        <div class="form-actions">
+          <el-button @click="dialog.visible = false" size="small"
+            >取消</el-button
+          >
+          <el-button type="primary" size="small" @click="infoConfirm"
+            >确认</el-button
+          >
+        </div>
+
+        <el-divider></el-divider>
+        <div class="flex justify-content-b">
+          <p @click="showMeta">+ 新建元数据</p>
+          <p @click="toMetaData" class="manage-link">
+            管理
+            <i class="el-icon-top-right"></i>
+          </p>
+        </div>
+      </div>
+    </r-dialog>
+    <!-- 编辑元数据值弹窗 -->
+    <r-dialog
+      :visible.sync="editDialog.visible"
+      :close-on-click-modal="false"
+      :appendToBody="true"
+      width="500px"
+      title="编辑元数据值"
+      :is-show-footer="false"
+    >
+      <div class="metadata-form">
+        <div class="form-item">
+          <label class="form-label">元数据类型</label>
+          <el-input
+            v-model="editDialog.metadataKey"
+            placeholder="元数据类型"
+            class="full-width"
+            size="medium"
+            disabled
+          ></el-input>
+        </div>
+
+        <div class="form-item">
+          <label class="form-label">元数据值</label>
+          <el-input
+            v-model="editDialog.metadataValue"
+            placeholder="请输入元数据值"
+            class="full-width"
+            size="medium"
+          ></el-input>
+        </div>
+
+        <div class="form-actions">
+          <el-button @click="editDialog.visible = false" size="small"
+            >取消</el-button
+          >
+          <el-button type="primary" size="small" @click="updateMetaData"
+            >确认</el-button
+          >
+        </div>
+      </div>
+    </r-dialog>
+    <mete-data
+      ref="metaData"
+      style="visibility: hidden"
+      :dataset-id="$route.query.datasetId"
+      @getDataList="getList"
+    ></mete-data>
+  </div>
+</template>
+<script>
+import {
+  getMetadataList,
+  getMetaDataDocList,
+  addMetaDataDoc,
+  deleteMetaDataDoc,
+  updateMetaDataDoc
+} from '@/api/generatedApi'
+import MeteData from '@/views/knowledge/detail/components/metaData/Index.vue'
+
+export default {
+  name: 'MetadataOperator',
+  components: { MeteData },
+  data() {
+    return {
+      isShowOperator: false,
+      docList: [],
+      dialog: {
+        visible: false,
+        name: '',
+        metadataId: null,
+        metadataValue: ''
+      },
+      editDialog: {
+        visible: false,
+        id: null,
+        metadataKey: '',
+        metadataValue: '',
+        metadataId: null
+      },
+      list: [],
+      documentId: ''
+    }
+  },
+  created() {},
+  methods: {
+    init(id) {
+      this.documentId = id
+      this.getDocList()
+      this.getList()
+    },
+    getDocList() {
+      getMetaDataDocList({
+        documentId: this.documentId
+      }).then(res => {
+        console.log(res)
+        if (res) {
+          this.docList = res.content.content
+        }
+      })
+    },
+    getList() {
+      getMetadataList({ datasetId: this.$route.query.datasetId }).then(res => {
+        if (res) {
+          this.list = res.content.content
+        }
+      })
+    },
+    startRemark() {
+      this.isShowOperator = true
+    },
+    handleCancel() {
+      this.isShowOperator = false
+    },
+    handleSave() {},
+    addMetaData() {
+      this.dialog.visible = true
+      this.dialog.metadataId = null
+      this.dialog.metadataValue = ''
+      this.getList()
+    },
+    deleteMeta(item) {
+      this.$messageBox(() => {
+        let params = {
+          datasetId: this.$route.query.datasetId,
+          documentId: this.documentId,
+          ids: [item.id]
+        }
+        deleteMetaDataDoc(params).then(res => {
+          if (res) {
+            this.$message.success('删除元数据成功')
+            this.getDocList()
+          }
+        })
+      })
+    },
+    editMeta(item) {
+      this.editDialog.visible = true
+      this.editDialog.id = item.id
+      this.editDialog.metadataKey = item.metadataKey
+      this.editDialog.metadataValue = item.metadataValue
+      this.editDialog.metadataId = item.metadataId
+    },
+    infoConfirm() {
+      // 处理确认逻辑
+      if (this.dialog.metadataId && this.dialog.metadataValue) {
+        let params = {
+          datasetId: this.$route.query.datasetId,
+          documentId: this.documentId,
+          ...this.dialog
+        }
+        addMetaDataDoc(params).then(res => {
+          if (res) {
+            this.$message.success('添加元数据成功')
+            this.getDocList()
+          }
+        })
+        // 这里可以添加保存逻辑
+        this.dialog.visible = false
+      } else {
+        this.$message.warning('请选择元数据类型并输入值')
+      }
+    },
+    toMetaData() {
+      this.dialog.visible = false
+      this.$emit('close')
+      this.$emit('openMetaDrawer')
+    },
+    handleSelectChange(value) {
+      console.log(value)
+    },
+    //
+    showMeta() {
+      this.$refs.metaData.addMetaData()
+    },
+    updateMetaData() {
+      if (!this.editDialog.metadataValue) {
+        this.$message.warning('请输入元数据值')
+        return
+      }
+
+      let params = {
+        id: this.editDialog.id,
+        datasetId: this.$route.query.datasetId,
+        documentId: this.documentId,
+        metadataId: this.editDialog.metadataId,
+        metadataValue: this.editDialog.metadataValue
+      }
+
+      updateMetaDataDoc(params)
+        .then(res => {
+          if (res) {
+            this.$message.success('更新元数据成功')
+            this.getDocList()
+            this.editDialog.visible = false
+          }
+        })
+        .catch(err => {
+          console.error('更新元数据失败', err)
+        })
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.head-card {
+  padding: 15px;
+  border-radius: 8px;
+  border-bottom: 1px solid #ebeef5;
+  color: #70778d;
+  //background-color: #c8ceda33;
+  font-size: 14px;
+  margin-bottom: 10px;
+  p:first-child {
+    font-weight: bold;
+    font-size: 14px;
+    color: #000;
+  }
+  .desc {
+    margin: 15px 0;
+  }
+}
+
+.metadata-form {
+  padding: 10px;
+
+  .form-item {
+    margin-bottom: 20px;
+  }
+
+  .form-label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: #606266;
+  }
+
+  .full-width {
+    width: 100%;
+  }
+
+  .form-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+
+  .manage-link {
+    color: #409eff;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+.select-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .data-type {
+    color: #909399;
+    font-size: 12px;
+  }
+}
+.doc {
+  ul {
+    padding: 0;
+    margin: 15px 0;
+  }
+
+  .metadata-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    list-style-type: none;
+    margin-bottom: 12px;
+    border-radius: 4px;
+  }
+
+  .metadata-content {
+    flex: 1;
+    background: #f5f7fa;
+    padding: 8px 16px;
+    border-radius: 5px;
+    &:hover {
+      background: #eef1f6;
+    }
+  }
+
+  .metadata-key {
+    font-weight: 500;
+    color: #303133;
+    margin-bottom: 4px;
+    font-size: 14px;
+  }
+
+  .metadata-value {
+    color: #606266;
+    font-size: 13px;
+  }
+
+  .metadata-actions {
+    display: flex;
+    align-items: center;
+
+    i {
+      cursor: pointer;
+      font-size: 16px;
+      color: #909399;
+      margin-left: 12px;
+
+      &:hover {
+        color: #409eff;
+      }
+
+      &.el-icon-delete:hover {
+        color: #f56c6c;
+      }
+    }
+  }
+}
+.ml10 {
+  margin-left: 10px;
+}
+
+.mr5 {
+  margin-right: 5px;
+}
+</style>

src/views/knowledge/detail/index.vue

@@ -7,12 +7,32 @@
           <div class="mr20 header" v-if="!editKnowledge">
             {{ knowledgeName }}
           </div>
-          <el-input class="mr20 w400" size="small" v-else v-model="copyKnowledgeName">{{ knowledgeName }}</el-input>
-          <el-icon class="fs16 el-icon-edit-outline cursor-pointer" @click.native="editKnowledgeName"
-            v-if="!editKnowledge" />
+          <el-input
+            class="mr20 w400"
+            size="small"
+            v-else
+            v-model="copyKnowledgeName"
+            >{{ knowledgeName }}</el-input
+          >
+          <el-icon
+            class="fs16 el-icon-edit-outline cursor-pointer"
+            @click.native="editKnowledgeName"
+            v-if="!editKnowledge"
+          />
           <div v-else>
-            <el-button type="primary" size="medium" class="render-button" @click="saveKnowledgeName">保存</el-button>
-            <el-button size="medium" class="render-button" @click="cancelKnowledgeName">取消</el-button>
+            <el-button
+              type="primary"
+              size="medium"
+              class="render-button"
+              @click="saveKnowledgeName"
+              >保存</el-button
+            >
+            <el-button
+              size="medium"
+              class="render-button"
+              @click="cancelKnowledgeName"
+              >取消</el-button
+            >
           </div>
           <span class="segment-content">{{
             segmentedMode | filterSegmentedMode
@@ -26,46 +46,89 @@
 
       <div>
         <!--        <el-button type="primary" size="medium" class="normal-button" @click="jumpEditKnowledge">修改知识库</el-button>-->
-        <el-button type="primary" size="medium" icon="el-icon-edit-outline" class="primary-button"
-          @click="jumpEditKnowledge">修改知识库
+        <el-button
+          type="primary"
+          size="medium"
+          icon="el-icon-edit-outline"
+          class="primary-button"
+          @click="jumpEditKnowledge"
+          >修改知识库
         </el-button>
-        <el-button type="primary" size="medium" icon="el-icon-plus" class="primary-button"
-          @click="jumpAddKnowledge">上传知识
+        <el-button
+          type="primary"
+          size="medium"
+          icon="el-icon-plus"
+          class="primary-button"
+          @click="jumpAddKnowledge"
+          >上传知识
         </el-button>
-        <el-button type="primary" icon="el-icon-s-promotion" size="medium" class="line-button"
-          @click="handleHitTestClick">命中测试
+        <el-button
+          type="primary"
+          icon="el-icon-s-promotion"
+          size="medium"
+          class="line-button"
+          @click="handleHitTestClick"
+          >命中测试
         </el-button>
-        <el-button type="primary" icon="el-icon-edit-outline" size="medium" class="line-button"
-          @click="handleMetaData">元数据
+        <el-button
+          type="primary"
+          icon="el-icon-edit-outline"
+          size="medium"
+          class="line-button"
+          @click="handleMetaData"
+          >元数据
         </el-button>
       </div>
     </div>
     <div class="mt20 card-body">
       <el-empty v-if="!hasList">
         <div class="mt20">
-          <el-button type="primary" size="medium" class="fs14" @click="jumpAddKnowledge">立即添加</el-button>
+          <el-button
+            type="primary"
+            size="medium"
+            class="fs14"
+            @click="jumpAddKnowledge"
+            >立即添加</el-button
+          >
         </div>
       </el-empty>
 
       <div class="table-container" v-else>
         <div class="flex align-items-c justify-content-b">
-          <el-form :model="form" label-width="100px" label-position="top" inline>
+          <el-form
+            :model="form"
+            label-width="100px"
+            label-position="top"
+            inline
+          >
             <el-form-item label="知识文件名称" prop="fileName">
-              <el-input v-model="form.knowledgeNameLike" size="medium" placeholder="请输入知识文件名称"
-                @keydown.enter.native="search"></el-input>
+              <el-input
+                v-model="form.knowledgeNameLike"
+                size="medium"
+                placeholder="请输入知识文件名称"
+                @keydown.enter.native="search"
+              ></el-input>
             </el-form-item>
             <el-form-item label="知识文件来源" prop="documentSource">
               <el-select v-model="form.documentSource" size="medium">
                 <el-option label="全部" value=""></el-option>
-                <el-option v-for="item in documentSourceOptions" :label="item.label" :value="item.value"
-                  :key="item.value"></el-option>
+                <el-option
+                  v-for="item in documentSourceOptions"
+                  :label="item.label"
+                  :value="item.value"
+                  :key="item.value"
+                ></el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="上传用户" prop="createdUserLike">
               <el-select v-model="form.createdUserLike" size="medium">
                 <el-option label="全部" value=""></el-option>
-                <el-option v-for="item in createdUserOptions" :label="item.label" :value="item.value"
-                  :key="item.value"></el-option>
+                <el-option
+                  v-for="item in createdUserOptions"
+                  :label="item.label"
+                  :value="item.value"
+                  :key="item.value"
+                ></el-option>
               </el-select>
             </el-form-item>
             <!--            <el-form-item label="关键字">-->
@@ -77,34 +140,82 @@
             <!--              ></el-input>-->
             <!--            </el-form-item>-->
             <el-form-item label="上传时间" prop="times">
-              <el-date-picker size="medium" style="width:100%" v-model="form.times" value-format="yyyy-MM-dd"
-                start-placeholder="开始时间" end-placeholder="结束时间" type="daterange"></el-date-picker>
+              <el-date-picker
+                size="medium"
+                style="width:100%"
+                v-model="form.times"
+                value-format="yyyy-MM-dd"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                type="daterange"
+              ></el-date-picker>
             </el-form-item>
           </el-form>
           <div class="mt15 flex align-items-c justify-content-b">
-            <el-button size="medium" type="primary" @click="search">查询</el-button>
+            <el-button size="medium" type="primary" @click="search"
+              >查询</el-button
+            >
             <el-button size="medium" @click="reset">重置</el-button>
           </div>
         </div>
-        <r-table :columns="columns" :data="list" :deletion="false" :total="total" @page-change="pageChange"
-          @current-change="currentChange" :current-page="page" :page-size="pageSize"></r-table>
+        <r-table
+          :columns="columns"
+          :data="list"
+          :deletion="false"
+          :total="total"
+          @page-change="pageChange"
+          @current-change="currentChange"
+          :current-page="page"
+          :page-size="pageSize"
+        ></r-table>
       </div>
     </div>
-    <document-drawer :visible.sync="drawer" :descriptions="descriptions" :document-detail="documentDetail"
-      :active-segment="activeSegment" @update:visible="val => (drawer = val)" />
+    <document-drawer
+      :visible.sync="drawer"
+      :descriptions="descriptions"
+      :document-detail="documentDetail"
+      :active-segment="activeSegment"
+      @openMetaDrawer="handleMetaData"
+      @update:visible="val => (drawer = val)"
+    />
 
-    <knowledgeForm :visible.sync="drawerForm" :datasetId="$route.query.datasetId" @update:visible="getKnowledgeDetail">
+    <knowledgeForm
+      :visible.sync="drawerForm"
+      :datasetId="$route.query.datasetId"
+      @update:visible="getKnowledgeDetail"
+    >
     </knowledgeForm>
 
     <!-- 命中测试抽屉弹窗 -->
-    <el-drawer :title="hitTestConfig.title" :visible.sync="hitTestConfig.visible" size="80%">
+    <el-drawer
+      :title="hitTestConfig.title"
+      :visible.sync="hitTestConfig.visible"
+      size="80%"
+    >
       <hitTest></hitTest>
     </el-drawer>
 
     <!--元数据-->
-    <el-drawer :title="metaDataDrawer.title" :visible.sync="metaDataDrawer.visible" size="30%">
+    <el-drawer
+      :title="metaDataDrawer.title"
+      :visible.sync="metaDataDrawer.visible"
+      size="30%"
+    >
       <meta-data ref="metaData" :datasetId="$route.query.datasetId"></meta-data>
     </el-drawer>
+
+    <!--元数据操作抽屉-->
+    <el-drawer
+      :title="metadataOperatorDrawer.title"
+      :visible.sync="metadataOperatorDrawer.visible"
+      size="30%"
+    >
+      <metadata-operator
+        ref="metadataOperator"
+        @openMetaDrawer="handleMetaData"
+        @close="close"
+      ></metadata-operator>
+    </el-drawer>
   </div>
 </template>
 <script>
@@ -126,6 +237,7 @@ import knowledgeForm from '@/views/knowledge/detail/components/knowledgeForm.vue
 import knowledgePng_1 from '@/assets/images/konwledge/knowledge-1.png'
 import hitTest from '@/views/knowledge/detail/components/HitTest/Index.vue'
 import MetaData from '@/views/knowledge/detail/components/metaData/Index.vue'
+import MetadataOperator from '@/views/knowledge/detail/components/metaData/MetadataOperator.vue'
 
 export default {
   name: 'index',
@@ -139,6 +251,10 @@ export default {
         title: '元数据',
         visible: false
       },
+      metadataOperatorDrawer: {
+        title: '标注元数据',
+        visible: false
+      },
       knowledgePng_1,
       activeName: -1,
       drawer: false,
@@ -178,7 +294,8 @@ export default {
     MetaData,
     hitTest,
     knowledgeForm,
-    DocumentDrawer
+    DocumentDrawer,
+    MetadataOperator
   },
   methods: {
     getUserData() {
@@ -263,7 +380,7 @@ export default {
         fileName: '',
         documentSource: '',
         createdUserLike: '',
-        times: []
+        times: ''
       }
       this.getKnowledgeFiledList()
     },
@@ -319,6 +436,17 @@ export default {
         }
       })
     },
+    // 元数据操作
+    handleAddMetadata(row) {
+      this.metadataOperatorDrawer.visible = true
+      this.$nextTick(() => {
+        if (this.$refs.metadataOperator) {
+          // 如果需要初始化或传递数据，可以在这里处理
+          // 例如传递当前行数据
+          this.$refs.metadataOperator.init(row.id)
+        }
+      })
+    },
     // 获取文档详细信息（包含分词规则和词频规则）
     getDocumentExInfo(documentId) {
       datasetDocumentEx({ documentId })
@@ -385,6 +513,9 @@ export default {
       this.$nextTick(() => {
         this.$refs.metaData.init()
       })
+    },
+    close() {
+      this.metadataOperatorDrawer.visible = false
     }
   },
   filters: {
@@ -405,7 +536,7 @@ export default {
       return item ? item.label : '否'
     }
   },
-  created() { },
+  created() {},
   async mounted() {
     this.getKnowledgeDetail()
     // 获取知识库文件列表
@@ -516,6 +647,22 @@ export default {
                   }
                 },
                 '查看详情'
+              ),
+              h(
+                'el-button',
+                {
+                  class: 'floatSpan',
+                  props: {
+                    type: 'primary',
+                    size: 'mini',
+                    icon: 'el-icon-tickets',
+                    title: '添加元数据'
+                  },
+                  on: {
+                    click: () => this.handleAddMetadata(params.row)
+                  }
+                },
+                '标注元数据'
               )
             ])
           }

src/views/track/views/knowledge-info/Index.vue

@@ -3,11 +3,11 @@ import { datasetQuerySegments, getPdfUrl, queryTask } from '@/api/generatedApi'
 import TextModel from '@/views/knowledge/detail/components/documentDetail/TextModel.vue'
 import QAModel from '@/views/knowledge/detail/components/documentDetail/QAModel.vue'
 import RenderFile from '@/components/RenderFile/Index.vue'
-import Metadata from '@/views/track/views/knowledge-info/Metadata.vue'
+import MetadataOperator from '@/views/knowledge/detail/components/metaData/MetadataOperator.vue'
 
 export default {
   name: 'index',
-  components: { Metadata, QAModel, TextModel, RenderFile },
+  components: { MetadataOperator, QAModel, TextModel, RenderFile },
   data() {
     return {
       iframeSrc: window.location.origin,
@@ -98,6 +98,10 @@ export default {
         this.descriptions = descriptions
         // this.form.knowledgeContent = content
       })
+    },
+    openMetaDrawer() {
+      console.log('know-index')
+      this.$emit('openMetaDrawer')
     }
   },
   filters: {
@@ -192,7 +196,9 @@ export default {
         <!-- 右侧：原文内容 -->
         <el-col :span="12">
           <div class="content-card el-card full-height mt20">
-            <metadata />
+            <metadata-operator
+              @openMetaDrawer="openMetaDrawer"
+            ></metadata-operator>
             <render-file :id="newForm.id" />
           </div>
         </el-col>

src/views/track/views/knowledge-info/Metadata.vue

@@ -1,70 +0,0 @@
-<script>
-export default {
-  name: 'Metadata',
-  data() {
-    return {
-      isShowOperator: false
-    }
-  },
-  methods: {
-    startRemark() {
-      this.isShowOperator = true
-    },
-    handleCancel() {
-      this.isShowOperator = false
-    },
-    handleSave() {}
-  }
-}
-</script>
-
-<template>
-  <div class="head-card" v-if="!isShowOperator">
-    <p>元数据</p>
-    <p class="desc">
-      元数据是关于文档的数据，用于描述文档的属性。元数据可以帮助您更好地组织和管理文档。
-    </p>
-    <el-button type="primary" size="medium" @click="startRemark"
-      >开始标注 <i class="el-icon-right"></i
-    ></el-button>
-  </div>
-  <div class="head-card" v-else>
-    <div class="flex justify-content-b">
-      <div class="flex">
-        <p>元数据</p>
-        <el-tooltip
-          class="item"
-          effect="dark"
-          content="元数据是关于文档的数据，用于描述文档的属性。元数据可以帮助您更好地组织和管理文档。"
-          placement="top"
-        >
-          <i class="el-icon-info ml5" style="color: #909399;"></i>
-        </el-tooltip>
-      </div>
-      <div>
-        <el-button size="mini" @click="handleCancel">取消</el-button>
-        <el-button type="primary" size="mini" @click="handleSave"
-          >保存</el-button
-        >
-      </div>
-    </div>
-    <div class="add text-center">
-      + 添加元数据
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.head-card {
-  padding: 15px;
-  border-radius: 8px;
-  border-bottom: 1px solid #ebeef5;
-  color: #70778d;
-  //background-color: #c8ceda33;
-  font-size: 14px;
-  margin-bottom: 10px;
-  .desc {
-    margin: 15px 0;
-  }
-}
-</style>