From 3fa2fbfc9afdfd35d7c3c7d8eaa005566f54345b Mon Sep 17 00:00:00 2001
From: "du.meimei" <du.meimei@ebiz-digits.com>
Date: Thu, 24 Apr 2025 19:58:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(knowledge):=20=E6=B7=BB=E5=8A=A0=E5=85=83?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增元数据组件，用于管理文档的元数据
- 在知识详情页面添加元数据按钮，可打开元数据抽屉- 实现元数据的添加、编辑和删除功能
- 优化菜单和角色对话框的样式和布局
---
 .../detail/components/meteData/Index.vue      | 236 ++++++++++++++++++
 src/views/knowledge/detail/index.vue          |  33 ++-
 .../system/menu/components/MenuDialog.vue     |  86 ++++++-
 .../system/role/components/RoleDialog.vue     |  56 ++++-
 src/views/system/user/index.vue               |   7 +-
 5 files changed, 392 insertions(+), 26 deletions(-)
 create mode 100644 src/views/knowledge/detail/components/meteData/Index.vue

diff --git a/src/views/knowledge/detail/components/meteData/Index.vue b/src/views/knowledge/detail/components/meteData/Index.vue
new file mode 100644
index 0000000..e759001
--- /dev/null
+++ b/src/views/knowledge/detail/components/meteData/Index.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="metaData-container">
+    <p class="title">
+      元数据是关于文档的数据，用于描述文档的属性。元数据可以帮助您更好地组织和管理文档。
+    </p>
+    <el-button type="primary" size="medium" class="mt20 mb10" @click="addMetaData">
+      <i class="el-icon-plus"></i>添加元数据</el-button
+    >
+    <ul>
+      <li
+        v-for="(item, index) in list"
+        :key="index"
+        class="block flex justify-content-b"
+      >
+        <div class="flex">
+          <i class="el-icon-date"></i>
+          <p class="ml5 mr5">{{ item.value }}</p>
+          <p>{{ item.type }}</p>
+        </div>
+        <div class="flex align-items-c">
+          <div class="amount">{{ item.amount }}个值</div>
+          <div class="action-buttons">
+            <el-button type="text" icon="el-icon-edit" @click="editMetaData(index)"></el-button>
+            <el-button type="text" icon="el-icon-delete" @click="deleteMetaData(index)"></el-button>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <div class="flex mt20">
+      <el-switch
+        v-model="value">
+      </el-switch>
+      <p class="ml5 fwb">内置</p>
+      <el-tooltip class="item" effect="dark" content="内置元数据是系统预定义的元数据，您可以在此处查看和管理内置元数据。" placement="top">
+        <i class="el-icon-info ml5" style="color: #909399;"></i>
+      </el-tooltip>
+    </div>
+    <ul>
+      <li
+        v-for="(item, index) in dataList"
+        :key="index"
+        class="flex justify-content-b"
+      >
+        <div class="flex">
+          <i class="el-icon-date"></i>
+          <p class="ml5 mr5">{{ item.value }}</p>
+          <p>{{ item.type }}</p>
+        </div>
+        <div>{{item.status}}</div>
+      </li>
+    </ul>
+    <!-- 新增元数据对话框 -->
+    <el-dialog :title="isEdit ? '编辑元数据' : '新增元数据'" append-to-body :visible.sync="dialogVisible" width="30%">
+      <el-form :model="metaDataForm" label-width="80px" label-position="top">
+        <el-form-item label="类型" >
+          <div class="type-selection">
+            <div
+              v-for="type in typeOptions"
+              :key="type"
+              class="type-option"
+              :class="{ active: metaDataForm.type === type }"
+              @click="metaDataForm.type = type"
+            >
+              {{ type }}
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="名称">
+          <el-input v-model="metaDataForm.name" placeholder="请输入元数据名称"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="medium" @click="handleCancel">取消</el-button>
+        <el-button type="primary" size="medium" @click="handleSave">保存</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'meteData',
+  data() {
+    return {
+      list: [
+        {
+          value: 'time',
+          type: 'string',
+          amount: 0
+        },
+        {
+          value: 'date',
+          type: 'string',
+          amount: 0
+        }
+      ],
+      dataList: [
+        {
+          value: 'document_name',
+          type: 'string',
+          status: '已禁用'
+        },
+        {
+          value: 'upload_date',
+          type: 'string',
+          status: '已禁用'
+        }
+      ],
+      value: false,
+      // 新增元数据对话框相关数据
+      dialogVisible: false,
+      metaDataForm: {
+        type: 'String',
+        name: ''
+      },
+      typeOptions: ['String', 'Number', 'Time'],
+      isEdit: false,
+      currentEditIndex: -1
+    }
+  },
+  methods: {
+    addMetaData() {
+      this.dialogVisible = true
+      this.metaDataForm = {
+        type: 'String',
+        name: ''
+      }
+      this.isEdit = false
+    },
+    handleCancel() {
+      this.dialogVisible = false
+    },
+    handleSave() {
+      if (!this.metaDataForm.name) {
+        this.$message.warning('请输入元数据名称')
+        return
+      }
+
+      if (this.isEdit) {
+        this.list[this.currentEditIndex].value = this.metaDataForm.name
+        this.list[this.currentEditIndex].type = this.metaDataForm.type.toLowerCase()
+      } else {
+        // 添加新的元数据到列表
+        this.list.push({
+          value: this.metaDataForm.name,
+          type: this.metaDataForm.type.toLowerCase(),
+          amount: 0
+        })
+      }
+
+      this.$message.success('保存元数据成功')
+      this.dialogVisible = false
+    },
+    editMetaData(index) {
+      this.dialogVisible = true
+      this.metaDataForm = {
+        type: this.list[index].type,
+        name: this.list[index].value
+      }
+      this.isEdit = true
+      this.currentEditIndex = index
+    },
+    deleteMetaData(index) {
+      this.$confirm(`确认删除该元数据吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.list.splice(index, 1)
+        this.$message.success('删除元数据成功')
+      })
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/sass/renderSass/theme.scss';
+.metaData-container {
+  .title{
+    color: #676f83;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 19px;
+  }
+  ul li {
+    list-style-type: none;
+    padding: 10px;
+    border: 1px solid rgb(234, 236, 240);
+    margin: 10px 0;
+    border-radius: 8px;
+    div {
+      p: first-child {
+       color:#101828;
+      }
+      p:last-child {
+        color: #676f83;
+      }
+    }
+    .amount {
+      color: #676f83;
+    }
+    .action-buttons {
+      display: none;
+      .el-button{
+        margin: 0;
+        padding: 0;
+      }
+    }
+    &:hover {
+      .action-buttons {
+        display: block;
+
+      }
+      .amount{
+        display: none;
+      }
+    }
+  }
+
+}
+.type-selection {
+  display: flex;
+  .type-option {
+    padding: 0 16px;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    margin-right: 10px;
+    cursor: pointer;
+    &.active {
+      border-color: $--color-primary;
+    }
+  }
+}
+</style>
diff --git a/src/views/knowledge/detail/index.vue b/src/views/knowledge/detail/index.vue
index 0fd8bfc..ea86b18 100644
--- a/src/views/knowledge/detail/index.vue
+++ b/src/views/knowledge/detail/index.vue
@@ -62,13 +62,21 @@
           @click="jumpAddKnowledge"
           >上传知识</el-button
         >
+        <!--        <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-s-promotion"
+          icon="el-icon-edit-outline"
           size="medium"
           class="line-button"
-          @click="handleHitTestClick"
-          >命中测试</el-button
+          @click="handleMetaData"
+          >元数据</el-button
         >
       </div>
     </div>
@@ -179,6 +187,15 @@
     >
       <hitTest></hitTest>
     </el-drawer>
+
+    <!--元数据-->
+    <el-drawer
+      :title="meteDataDrawer.title"
+      :visible.sync="meteDataDrawer.visible"
+      size="30%"
+    >
+      <mete-data></mete-data>
+    </el-drawer>
   </div>
 </template>
 <script>
@@ -198,6 +215,8 @@ import DocumentDrawer from './components/documentDetail/DocumentDrawer.vue'
 import knowledgeForm from '@/views/knowledge/detail/components/knowledgeForm.vue'
 import knowledgePng_1 from '@/assets/images/konwledge/konwledge-1.png'
 import hitTest from '@/views/knowledge/detail/components/HitTest/Index.vue'
+import meteData from '@/views/knowledge/detail/components/meteData/Index.vue'
+import MeteData from '@/views/knowledge/detail/components/meteData/Index.vue'
 
 export default {
   name: 'index',
@@ -207,6 +226,10 @@ export default {
         title: '命中测试',
         visible: false
       },
+      meteDataDrawer: {
+        title: '元数据',
+        visible: false
+      },
       knowledgePng_1,
       datasetId: this.$route.query.datasetId,
       activeName: -1,
@@ -243,6 +266,7 @@ export default {
   props: {},
   watch: {},
   components: {
+    MeteData,
     hitTest,
     knowledgeForm,
     DocumentDrawer
@@ -437,6 +461,9 @@ export default {
      */
     handleHitTestClick() {
       this.hitTestConfig.visible = true
+    },
+    handleMetaData() {
+      this.meteDataDrawer.visible = true
     }
   },
   filters: {
diff --git a/src/views/system/menu/components/MenuDialog.vue b/src/views/system/menu/components/MenuDialog.vue
index 1311b94..3026bf4 100644
--- a/src/views/system/menu/components/MenuDialog.vue
+++ b/src/views/system/menu/components/MenuDialog.vue
@@ -1,44 +1,96 @@
 <template>
-  <el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body @close="handleClose">
+  <el-dialog
+    :title="title"
+    :visible.sync="visible"
+    width="800px"
+    append-to-body
+    @close="handleClose"
+  >
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-row>
         <el-col :span="12">
           <el-form-item label="父级菜单" prop="parentMenuId">
-            <el-select v-model="form.parentMenuId" placeholder="请选择菜单类型" clearable size="small" :disabled="isView">
-              <el-option v-for="item in listData" :key="item.id" :label="item.menuName" :value="item.id" />
+            <el-select
+              v-model="form.parentMenuId"
+              placeholder="请选择菜单类型"
+              clearable
+              size="small"
+              :disabled="isView"
+            >
+              <el-option
+                v-for="item in listData"
+                :key="item.id"
+                :label="item.menuName"
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="菜单名称" prop="menuName">
-            <el-input v-model="form.menuName" placeholder="请输入菜单名称" clearable size="small" :disabled="isView" />
+            <el-input
+              v-model="form.menuName"
+              placeholder="请输入菜单名称"
+              clearable
+              size="small"
+              :disabled="isView"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="12">
           <el-form-item label="菜单编码" prop="menuCode">
-            <el-input v-model="form.menuCode" placeholder="请输入菜单编码" clearable size="small" :disabled="isView" />
+            <el-input
+              v-model="form.menuCode"
+              placeholder="请输入菜单编码"
+              clearable
+              size="small"
+              :disabled="isView"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="菜单地址" prop="url">
-            <el-input v-model="form.url" placeholder="请输入菜单地址" clearable size="small" :disabled="isView" />
+            <el-input
+              v-model="form.url"
+              placeholder="请输入菜单地址"
+              clearable
+              size="small"
+              :disabled="isView"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="12">
           <el-form-item label="菜单类型" prop="type">
-            <el-select v-model="form.type" placeholder="请选择菜单类型" clearable size="small" :disabled="isView">
-              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            <el-select
+              v-model="form.type"
+              placeholder="请选择菜单类型"
+              clearable
+              size="small"
+              :disabled="isView"
+            >
+              <el-option
+                v-for="item in typeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer" v-if="!isView">
-      <el-button type="primary" size="small" :loading="loading" @click="submitForm">确 定</el-button>
+      <el-button
+        type="primary"
+        size="small"
+        :loading="loading"
+        @click="submitForm"
+        >确 定</el-button
+      >
       <el-button size="small" @click="handleClose">取 消</el-button>
     </div>
     <div slot="footer" class="dialog-footer" v-else>
@@ -85,8 +137,12 @@ export default {
         type: ''
       },
       rules: {
-        menuCode: [{ required: true, message: '请输入菜单编码', trigger: 'blur' }],
-        menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
+        menuCode: [
+          { required: true, message: '请输入菜单编码', trigger: 'blur' }
+        ],
+        menuName: [
+          { required: true, message: '请输入菜单名称', trigger: 'blur' }
+        ],
         url: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
         type: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }]
       },
@@ -146,7 +202,9 @@ export default {
           const submitData = { ...this.form }
 
           // 根据是否是编辑模式调用不同的API
-          const apiRequest = this.isEdit ? updateMenu(submitData) : addMenu(submitData)
+          const apiRequest = this.isEdit
+            ? updateMenu(submitData)
+            : addMenu(submitData)
 
           apiRequest
             .then(response => {
@@ -156,7 +214,9 @@ export default {
                 this.handleClose()
                 this.form = {}
               } else {
-                this.$message.error(response.msg || (this.isEdit ? '修改失败' : '添加失败'))
+                this.$message.error(
+                  response.msg || (this.isEdit ? '修改失败' : '添加失败')
+                )
                 this.form = {}
               }
             })
diff --git a/src/views/system/role/components/RoleDialog.vue b/src/views/system/role/components/RoleDialog.vue
index 20bae79..2bc211e 100644
--- a/src/views/system/role/components/RoleDialog.vue
+++ b/src/views/system/role/components/RoleDialog.vue
@@ -1,28 +1,58 @@
 <template>
-  <el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body @close="handleClose">
+  <el-dialog
+    :title="title"
+    :visible.sync="visible"
+    width="800px"
+    append-to-body
+    @close="handleClose"
+  >
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="角色名称" prop="roleName">
-            <el-input v-model="form.roleName" placeholder="请输入角色名称" clearable size="small" :disabled="isView" />
+            <el-input
+              v-model="form.roleName"
+              placeholder="请输入角色名称"
+              clearable
+              size="small"
+              :disabled="isView"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="角色编码" prop="roleCode">
-            <el-input v-model="form.roleCode" placeholder="请输入角色编码" clearable size="small" :disabled="isView" />
+            <el-input
+              v-model="form.roleCode"
+              placeholder="请输入角色编码"
+              clearable
+              size="small"
+              :disabled="isView"
+            />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="12">
           <el-form-item label="角色描述" prop="remark">
-            <el-input v-model="form.remark" placeholder="请输入角色描述" clearable size="small" :disabled="isView" />
+            <el-input
+              v-model="form.remark"
+              placeholder="请输入角色描述"
+              clearable
+              size="small"
+              :disabled="isView"
+            />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
     <div slot="footer" class="dialog-footer" v-if="!isView">
-      <el-button type="primary" size="small" :loading="loading" @click="submitForm">确 定</el-button>
+      <el-button
+        type="primary"
+        size="small"
+        :loading="loading"
+        @click="submitForm"
+        >确 定</el-button
+      >
       <el-button size="small" @click="handleClose">取 消</el-button>
     </div>
     <div slot="footer" class="dialog-footer" v-else>
@@ -66,8 +96,12 @@ export default {
         remark: ''
       },
       rules: {
-        roleCode: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
-        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
+        roleCode: [
+          { required: true, message: '请输入角色编码', trigger: 'blur' }
+        ],
+        roleName: [
+          { required: true, message: '请输入角色名称', trigger: 'blur' }
+        ]
       },
       loading: false
     }
@@ -100,7 +134,9 @@ export default {
           const submitData = { ...this.form }
 
           // 根据是否是编辑模式调用不同的API
-          const apiRequest = this.isEdit ? updateRole(submitData) : addRole(submitData)
+          const apiRequest = this.isEdit
+            ? updateRole(submitData)
+            : addRole(submitData)
 
           apiRequest
             .then(response => {
@@ -109,7 +145,9 @@ export default {
                 this.$emit('submit', submitData)
                 this.handleClose()
               } else {
-                this.$message.error(response.msg || (this.isEdit ? '修改失败' : '添加失败'))
+                this.$message.error(
+                  response.msg || (this.isEdit ? '修改失败' : '添加失败')
+                )
                 this.form = {}
               }
             })
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 44cc074..538bc55 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -152,7 +152,12 @@ export default {
                 h(
                   'el-button',
                   {
-                    props: { type: 'text', size: 'mini', icon: 'el-icon-edit-outline', title: '编辑' },
+                    props: {
+                      type: 'text',
+                      size: 'mini',
+                      icon: 'el-icon-edit-outline',
+                      title: '编辑'
+                    },
                     class: 'normal-button',
                     on: { click: () => this.handleEdit(params.row) }
                   },