perf: tag management style

Author: wangdan-fit2cloud

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

@@ -2,7 +2,7 @@ export default {
   uploadDocument: 'Upload Document',
   importDocument: 'Import Document',
   syncDocument: 'Sync Document',
-  items: 'Items',
+  items: '',
   migrateDocument: 'Migrate to',
   setting: {
     migration: 'Move',
@@ -109,7 +109,6 @@ export default {
     unrelate: 'Unlink',
     relatedDoc: 'Linked documents',
     unrelatedDoc: 'Unlinked documents',
-    tagLinkTitle: 'Tag: Tag Value',
     setting: 'Tag Settings',
     create: 'Create Tag',
     createValue: 'Create Tag Value',

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

@@ -104,7 +104,6 @@ export default {
     unrelate: '取消关联',
     relatedDoc: '已关联文档',
     unrelatedDoc: '未关联文档',
-    tagLinkTitle: '标签: 标签值',
     addValue: '添加标签值',
     setting: '标签设置',
     create: '创建标签',

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

@@ -105,7 +105,6 @@ export default {
     unrelate: '取消關聯',
     relatedDoc: '已關聯文檔',
     unrelatedDoc: '未關聯文檔',
-    tagLinkTitle: '標籤: 標籤值',
     addTag: '添加標籤',
     setting: '標籤設置',
     create: '創建標籤',

ui/src/styles/app.scss

@@ -286,6 +286,10 @@ h5 {
   justify-content: center;
 }
 
+.justify-end {
+  justify-content: end;
+}
+
 .text-left {
   text-align: left;
 }

ui/src/styles/element-plus.scss

@@ -201,7 +201,7 @@
   --el-table-header-bg-color: var(--app-layout-bg-color);
   --el-table-text-color: var(--app-text-color);
   --el-table-border-color: #dee0e3;
-  // --el-table-row-hover-bg-color: rgba(var(--el-text-color-primary-rgb), 0.1);
+  --el-table-row-hover-bg-color: #eff0f1;
   font-weight: 400;
   thead {
     color: var(--app-text-color-secondary);

ui/src/views/document/index.vue

@@ -132,7 +132,6 @@
                   style="width: 120px"
                   @change="search_type_change"
                 >
-                  <el-option :label="$t('dynamicsForm.tag.label')" value="tag" />
                   <el-option :label="$t('common.name')" value="name" />
                 </el-select>
                 <el-input
@@ -143,14 +142,6 @@
                   style="width: 220px"
                   clearable
                 />
-                <el-input
-                  v-if="search_type === 'tag'"
-                  v-model="search_form.tag"
-                  @change="refresh"
-                  :placeholder="$t('views.document.tag.requiredMessage3')"
-                  style="width: 220px"
-                  clearable
-                />
               </div>
 
               <el-tooltip
@@ -209,7 +200,7 @@
             <el-table-column
               prop="status"
               :label="$t('views.document.fileStatus.label')"
-              width="110"
+              width="120"
             >
               <template #default="{ row }">
                 <StatusValue :status="row.status" :status-meta="row.status_meta"></StatusValue>
@@ -219,7 +210,7 @@
               prop="char_length"
               :label="$t('views.document.table.char_length')"
               align="right"
-              min-width="90"
+              min-width="120"
               sortable
             >
               <template #default="{ row }">
@@ -230,7 +221,7 @@
               prop="paragraph_count"
               :label="$t('views.document.table.paragraph')"
               align="right"
-              min-width="90"
+              min-width="120"
               sortable
             />
 
@@ -293,7 +284,8 @@
             <el-table-column width="130" prop="tag">
               <template #header>
                 <div>
-                  <span>{{ $t('views.document.tag.label') }}</span>
+                  <span>{{ $t('dynamicsForm.tag.label') }}</span>
+
                   <el-dropdown trigger="click" @visible-change="handleTagVisibleChange">
                     <el-button
                       style="margin-top: 1px"
@@ -325,38 +317,42 @@
               <template #default="{ row }">
                 <el-popover
                   trigger="hover"
-                  placement="bottom"
+                  placement="bottom-start"
                   :disabled="!row.tag_count"
-                  :width="160"
+                  :popper-style="{ width: 'auto', maxWidth: '300px' }"
                 >
-                  <div v-for="tag in row.tags" :key="tag.id" flex class="pt-4">
-                    <span class="mr-8 color-input-placeholder">{{ tag.key }}</span
-                    >{{ tag.value }}
+                  <div
+                    v-for="tag in row.tags"
+                    :key="tag.id"
+                    class="flex align-center lighter color-text-primary mt-4 mb-4"
+                  >
+                    <span class="color-secondary ellipsis-1" style="width: 40%" :title="tag.key">{{
+                      tag.key
+                    }}</span>
+                    <span class="ml-4 ellipsis-1" :title="tag.value"> {{ tag.value }}</span>
                   </div>
 
                   <template #reference>
-                    <el-space :size="4">
-                      <el-tag v-if="row.tag_count" type="info" effect="plain" class="never">
-                        <div class="flex align-center color-text-primary">
-                          <AppIcon iconName="app-tag"></AppIcon>
-                          <span class="ml-4">{{ row.tag_count }}</span>
-                        </div>
-                      </el-tag>
-                      <el-button
-                        class="button-new-tag"
-                        size="small"
-                        :disabled="!permissionPrecise.doc_tag(id)"
-                        @click.stop="openAddTagDialog(row.id)"
-                      >
-                        <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
-                        {{ $t('views.document.tag.key') }}
-                      </el-button>
-                    </el-space>
+                    <el-tag v-if="row.tag_count" type="info" effect="plain" class="never mr-4">
+                      <div class="flex align-center color-text-primary">
+                        <AppIcon iconName="app-tag"></AppIcon>
+                        <span class="ml-4">{{ row.tag_count }}</span>
+                      </div>
+                    </el-tag>
                   </template>
                 </el-popover>
+                <el-button
+                  class="button-new-tag"
+                  size="small"
+                  :disabled="!permissionPrecise.doc_tag(id)"
+                  @click.stop="openAddTagDialog(row.id)"
+                >
+                  <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
+                  {{ $t('views.document.tag.key') }}
+                </el-button>
               </template>
             </el-table-column>
-            <el-table-column width="140">
+            <el-table-column width="165">
               <template #header>
                 <div>
                   <span>{{ $t('views.document.form.hit_handling_method.label') }}</span>
@@ -1293,7 +1289,7 @@ function editName(val: string, id: string) {
 }
 
 function cellMouseEnter(row: any, column: any) {
-  if (column.property === 'name') {
+  if (column && column.property === 'name') {
     currentMouseId.value = row.id
   }
 }

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

@@ -39,7 +39,14 @@
       @cell-mouse-leave="cellMouseLeave"
     >
       <el-table-column type="selection" width="55" />
-      <el-table-column :label="$t('views.document.tag.key')">
+      <el-table-column
+        prop="key"
+        :label="
+          multipleSelection.length === 0
+            ? $t('views.document.tag.key')
+            : `${$t('common.selected')} ${multipleSelection.length} ${$t('views.document.items')}`
+        "
+      >
         <template #default="{ row }">
           <div class="flex-between">
             {{ row.key }}
@@ -123,7 +130,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="app-table__pagination mt-16">
+    <div class="mt-16 flex justify-end">
       <el-pagination
         v-model:current-page="pageNum"
         v-model:page-size="pageSize"
@@ -190,10 +197,12 @@ const tags = ref<Array<any>>([])
 const currentMouseId = ref<number | null>(null)
 const pageNum = ref(1)
 const pageSize = ref(20)
-const tableMaxHeight = computed(() => `calc(100vh - 260px)`)
+const tableMaxHeight = computed(() => `calc(100vh - 200px)`)
 
-function cellMouseEnter(row: any) {
-  currentMouseId.value = row.id
+function cellMouseEnter(row: any, column: any) {
+  if (column && column.property === 'key') {
+    currentMouseId.value = row.id
+  }
 }
 
 function cellMouseLeave() {

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

@@ -1,7 +1,14 @@
 <template>
-  <el-dialog v-model="dialogVisible" :before-close="close" append-to-body destroy-on-close>
+  <el-dialog
+    v-model="dialogVisible"
+    width="1000"
+    align-center
+    :before-close="close"
+    append-to-body
+    destroy-on-close
+  >
     <template #header>
-      <h4>{{ $t('views.document.tag.tagLinkTitle') }}</h4>
+      <h4>{{ $t('views.document.tag.key') }}: {{ $t('views.document.tag.value') }}</h4>
     </template>
     <div>
       <el-tabs v-model="activeTab" @tab-change="handleTabChange">
@@ -30,14 +37,27 @@
       @changePage="getList"
       :data="tableData"
       :row-key="(row: any) => row.id"
-      class="mt-16 document-table"
+      class="mt-16"
       @selection-change="handleSelectionChange"
+      style="min-height: 400px"
       v-loading="loading"
     >
       <el-table-column type="selection" width="55" :reserve-selection="true" v-if="!isShared" />
-      <el-table-column prop="name" :label="$t('views.document.table.name')" min-width="280">
+      <el-table-column
+        prop="name"
+        :label="
+          multipleSelection.length === 0
+            ? $t('views.document.table.name')
+            : `${$t('common.selected')} ${multipleSelection.length} ${$t('views.document.items')}`
+        "
+        min-width="280"
+        show-overflow-tooltip
+      >
         <template #default="{ row }">
-          <span>{{ row.name }}</span>
+          <el-space :size="8">
+            <img :src="getImgUrl(row && row?.name)" alt="" width="24" />
+            <span class="ellipsis" style="max-width: 450px">{{ row.name }}</span>
+          </el-space>
         </template>
       </el-table-column>
       <el-table-column width="130">
@@ -145,6 +165,7 @@ import { loadSharedApi } from '@/utils/dynamics-api/shared-api.ts'
 import { cloneDeep } from 'lodash'
 import type { ElTable } from 'element-plus'
 import { datetimeFormat } from '@/utils/time'
+import { getImgUrl } from '@/utils/common'
 import { MsgSuccess } from '@/utils/message'
 import { t } from '@/locales'
 import type { TabPaneName } from 'element-plus'
@@ -191,7 +212,7 @@ function handleSearch() {
 
 const paginationConfig = ref({
   current_page: 1,
-  page_size: 10,
+  page_size: 20,
   total: 0,
 })
 const filterText = ref<string>('')

ui/src/views/problem/index.vue

@@ -305,7 +305,7 @@ function editName(val: string, problemId: string) {
 }
 
 function cellMouseEnter(row: any, column: any) {
-  if (column.property === 'content') {
+  if (column && column.property === 'content') {
     currentMouseId.value = row.id
   }
 }

ui/src/views/trigger/index.vue

@@ -114,7 +114,7 @@
             <el-table-column type="selection" width="55" :reserve-selection="true" />
             <el-table-column
               prop="name"
-              :label="$t('common.name')"
+              :label="multipleSelection.length === 0 ? $t('common.name') : `${$t('common.selected')} ${multipleSelection.length} ${$t('views.document.items') }`"
               show-overflow-tooltip
               width="220"
             >