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

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

src/views/knowledge/detail/index.vue

@@ -7,16 +7,36 @@
           <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
-            }}</span>
+          }}</span>
         </div>
         <p class="mt10 fs14" style="line-height: 20px">
           描述：{{ knowledgeDesc }}
@@ -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)
+                  }
+                },
+                '标注元数据'
               )
             ])
           }