feat: Add tag management

ui/src/locales/lang/en-US/views/document.ts

@@ -102,10 +102,11 @@ export default {
     label: 'Tag Management',
     key: 'Tag',
     value: 'Value',
-    add: 'Add Tag',
+    addTag: 'Add Tag',
     setting: 'Tag Settings',
     create: 'Create Tag',
     edit: 'Edit Tag',
+    editValue: 'Edit Tag Value',
     deleteConfirm: 'Confirm delete tag: ',
     deleteTip: 'After deletion, resources using this tag will have the tag removed. Please proceed with caution!',
     requiredMessage1: 'Please enter a tag',

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

@@ -97,10 +97,12 @@ export default {
     label: '标签管理',
     key: '标签',
     value: '标签值',
-    add: '添加标签',
+    addTag: '添加标签',
+    addValue: '添加标签值',
     setting: '标签设置',
     create: '创建标签',
     edit: '编辑标签',
+    editValue: '编辑标签值',
     deleteConfirm: '是否删除标签: ',
     deleteTip: '删除后使用该标签的资源将会删除该标签，请谨慎操作!',
     requiredMessage1: '请输入标签',

ui/src/locales/lang/zh-Hant/views/document.ts

@@ -100,10 +100,11 @@ export default {
     label: '標籤管理',
     key: '標籤',
     value: '標籤值',
-    add: '添加標籤',
+    addTag: '添加標籤',
     setting: '標籤設置',
     create: '創建標籤',
     edit: '編輯標籤',
+    editValue: '編輯標籤值',
     deleteConfirm: '是否刪除標籤: ',
     deleteTip: '刪除後使用該標籤的資源將會刪除該標籤，請謹慎操作!',
     requiredMessage1: '請輸入標籤',

ui/src/views/document/index.vue

@@ -62,7 +62,7 @@
                   :disabled="multipleSelection.length === 0"
                   v-if="permissionPrecise.doc_edit(id)"
                 >
-                  {{ $t('views.document.tag.add') }}
+                  {{ $t('views.document.tag.addTag') }}
                 </el-button>
                 <el-dropdown v-if="MoreFilledPermission0(id)">
                   <el-button class="ml-12 mr-12">
@@ -687,7 +687,7 @@ import permissionMap from '@/permission'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
 import TagDrawer from "./tag/TagDrawer.vue";
 import TagSettingDrawer from "./tag/TagSettingDrawer.vue";
-import AddTagDialog from "@/views/document/component/AddTagDialog.vue";
+import AddTagDialog from "@/views/document/tag/MulAddTagDialog.vue";
 
 const route = useRoute()
 const router = useRouter()

ui/src/views/document/tag/CreateTagDialog.vue

@@ -1,5 +1,9 @@
 <template>
-  <el-dialog v-model="dialogVisible" :title="$t('views.document.tag.create')" :before-close="close">
+  <el-dialog
+    v-model="dialogVisible"
+    :title="currentTagKey ? $t('views.document.tag.addValue') : $t('views.document.tag.create')"
+    :before-close="close"
+  >
     <el-form
       ref="FormRef"
       :model="{ tags }"
@@ -76,7 +80,6 @@
 </template>
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import AppIcon from '@/components/app-icon/AppIcon.vue'
 import { useRoute } from 'vue-router'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api.ts'
 import { cloneDeep } from 'lodash'

ui/src/views/document/tag/EditTagDialog.vue

@@ -1,8 +1,9 @@
 <template>
   <el-dialog
     v-model="dialogVisible"
-    :title="$t('views.document.tag.edit')"
+    :title="isEditKey ? $t('views.document.tag.edit') : $t('views.document.tag.editValue')"
     :before-close="close"
+    :width="isEditKey ? '500px' : '50%'"
   >
     <el-form
       ref="FormRef"
@@ -11,23 +12,46 @@
       require-asterisk-position="right"
       @submit.prevent
     >
-      <el-form-item label="标签" v-if="isEditKey"
-                    :rules="{ required: true, message: $t('views.document.tag.requiredMessage1'), trigger: 'blur' }"
-                    prop="key">
+      <el-form-item
+        :label="$t('views.document.tag.key')"
+        v-if="isEditKey"
+        :rules="{
+          required: true,
+          message: $t('views.document.tag.requiredMessage1'),
+          trigger: 'blur',
+        }"
+        prop="key"
+      >
         <el-input v-model="form.key"></el-input>
       </el-form-item>
-      <div v-else class="flex-between">
-        <el-form-item label="标签" prop="key"
-                      style="width: 50%"
-                      :rules="{ required: true, message: $t('views.document.tag.requiredMessage1'), trigger: 'blur' }">
-          <el-input v-model="form.key" :disabled="true"></el-input>
-        </el-form-item>
-        <el-form-item label="标签值" prop="value"
-                      style="width: 50%"
-                      :rules="{ required: true, message: $t('views.document.tag.requiredMessage2'), trigger: 'blur' }">
-          <el-input v-model="form.value"></el-input>
-        </el-form-item>
-      </div>
+      <el-row :gutter="8" align="bottom" v-else>
+        <el-col :span="12">
+          <el-form-item
+            :label="$t('views.document.tag.key')"
+            prop="key"
+            :rules="{
+              required: true,
+              message: $t('views.document.tag.requiredMessage1'),
+              trigger: 'blur',
+            }"
+          >
+            <el-input v-model="form.key" :disabled="true"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            :label="$t('views.document.tag.value')"
+            prop="value"
+            :rules="{
+              required: true,
+              message: $t('views.document.tag.requiredMessage2'),
+              trigger: 'blur',
+            }"
+          >
+            <el-input v-model="form.value"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
@@ -39,12 +63,12 @@
 </template>
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useRoute } from "vue-router";
-import { loadSharedApi } from "@/utils/dynamics-api/shared-api.ts";
+import { useRoute } from 'vue-router'
+import { loadSharedApi } from '@/utils/dynamics-api/shared-api.ts'
 
 const route = useRoute()
 const {
-  params: {id}, // id为knowledgeID
+  params: { id }, // id为knowledgeID
 } = route as any
 const emit = defineEmits(['refresh'])
 
@@ -62,7 +86,7 @@ const isEditKey = ref(false)
 const form = ref({
   id: '',
   key: '',
-  value: ''
+  value: '',
 })
 
 const loading = ref(false)
@@ -71,7 +95,7 @@ const dialogVisible = ref<boolean>(false)
 const submit = () => {
   FormRef.value.validate((valid: boolean) => {
     if (valid) {
-      loadSharedApi({type: 'knowledge', systemType: apiType.value})
+      loadSharedApi({ type: 'knowledge', systemType: apiType.value })
         .putTag(id, form.value.id, form.value, loading)
         .then((res: any) => {
           close()
@@ -93,6 +117,6 @@ const close = () => {
   dialogVisible.value = false
 }
 
-defineExpose({open, close})
+defineExpose({ open, close })
 </script>
 <style lang="scss" scoped></style>

ui/src/views/document/tag/MulAddTagDialog.vue

@@ -64,7 +64,6 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import AppIcon from '@/components/app-icon/AppIcon.vue'
 
 const emit = defineEmits(['addTags'])
 const props = defineProps({

ui/src/views/document/tag/TagDrawer.vue

@@ -26,45 +26,61 @@
       :span-method="spanMethod"
       v-loading="loading"
       @selection-change="handleSelectionChange"
+      @cell-mouse-enter="cellMouseEnter"
+      @cell-mouse-leave="cellMouseLeave"
     >
       <el-table-column type="selection" width="55"/>
       <el-table-column :label="$t('views.document.tag.key')">
         <template #default="{ row }">
           <div class="flex-between">
             {{ row.key }}
-            <div>
-              <el-button link>
-                <AppIcon
-                  iconName="app-add-outlined"
-                  class="mr-4"
-                  @click="openCreateTagDialog(row)"
-                />
-              </el-button>
-              <el-button link>
-                <AppIcon iconName="app-edit" class="mr-4" @click="editTagKey(row)"/>
-              </el-button>
-              <el-button link>
-                <AppIcon iconName="app-delete" class="mr-4" @click="delTag(row)"/>
-              </el-button>
+            <div v-if="currentMouseId === row.id">
+              <span class="mr-4">
+                <el-tooltip effect="dark" :content="$t('views.document.tag.addValue')">
+                  <el-button type="primary" text @click.stop="openCreateTagDialog(row)">
+                    <AppIcon iconName="app-add-outlined" />
+                  </el-button>
+                </el-tooltip>
+              </span>
+              <span class="mr-4">
+                <el-tooltip effect="dark" :content="$t('views.document.tag.edit')">
+                  <el-button type="primary" text @click.stop="editTagKey(row)">
+                    <AppIcon iconName="app-edit" />
+                  </el-button>
+                </el-tooltip>
+              </span>
+              <el-tooltip effect="dark" :content="$t('common.delete')">
+                <el-button type="primary" text @click.stop="delTag(row)">
+                  <AppIcon iconName="app-delete" />
+                </el-button>
+              </el-tooltip>
             </div>
           </div>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('views.document.tag.value')">
+      <el-table-column :label="$t('views.document.tag.value')" class-name="border-l">
         <template #default="{ row }">
           <div class="flex-between">
             {{ row.value }}
-            <div>
-              <el-button link>
-                <AppIcon iconName="app-edit" class="mr-4" @click="editTagValue(row)"/>
-              </el-button>
-              <el-button link>
-                <AppIcon iconName="app-delete" class="mr-4" @click="delTagValue(row)"/>
-              </el-button>
-            </div>
           </div>
         </template>
       </el-table-column>
+      <el-table-column :label="$t('common.operation')" align="left" width="100" fixed="right">
+        <template #default="{ row }">
+          <span class="mr-4">
+            <el-tooltip effect="dark" :content="$t('views.document.tag.editValue')">
+              <el-button type="primary" text @click.stop="editTagValue(row)">
+                <AppIcon iconName="app-edit" />
+              </el-button>
+            </el-tooltip>
+          </span>
+          <el-tooltip effect="dark" :content="$t('common.delete')">
+            <el-button type="primary" text @click.stop="delTagValue(row)">
+              <AppIcon iconName="app-delete" />
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
     </el-table>
   </el-drawer>
   <CreateTagDialog ref="createTagDialogRef" @refresh="getList"/>
@@ -105,6 +121,15 @@ const loading = ref(false)
 const debugVisible = ref(false)
 const filterText = ref('')
 const tags = ref<Array<any>>([])
+const currentMouseId = ref<number | null>(null)
+
+function cellMouseEnter(row: any) {
+  currentMouseId.value = row.id
+}
+
+function cellMouseLeave() {
+  currentMouseId.value = null
+}
 
 // 将原始数据转换为表格数据
 const tableData = computed(() => {

ui/src/views/document/tag/TagSettingDrawer.vue

@@ -6,7 +6,7 @@
     <div class="flex-between">
       <div>
         <el-button type="primary" @click="openAddTagDialog()">
-          {{ $t('views.document.tag.add') }}
+          {{ $t('views.document.tag.addTag') }}
         </el-button>
         <el-button :disabled="multipleSelection.length === 0" @click="batchDelete">
           {{ $t('common.delete') }}
@@ -57,7 +57,7 @@ import { useRoute } from 'vue-router'
 import { loadSharedApi } from "@/utils/dynamics-api/shared-api.ts"
 import { MsgConfirm } from "@/utils/message.ts";
 import { t } from "@/locales";
-import AddTagDialog from "@/views/document/component/AddTagDialog.vue";
+import AddTagDialog from "@/views/document/tag/MulAddTagDialog.vue";
 
 const emit = defineEmits(['refresh'])
 const props = defineProps({