feat: paragraph move add top and bottom & Optimize style

Author: wangdan-fit2cloud

ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue

@@ -48,7 +48,7 @@
         <el-divider direction="vertical" />
         <el-tooltip effect="dark" :content="$t('chat.operation.regeneration')" placement="top">
           <el-button :disabled="chat_loading" text @click="regeneration">
-            <AppIcon iconName="app-refresh"></AppIcon>
+            <AppIcon iconName="app-refresh" class="color-secondary"></AppIcon>
           </el-button>
         </el-tooltip>
         <el-divider direction="vertical" />

ui/src/components/tag-group/index.vue

@@ -3,11 +3,17 @@
     <el-tag :size="props.size" class="default-tag tag-ellipsis" :title="props.tags[0]">
       {{ i18n_name(props.tags[0]) }}
     </el-tag>
-    <el-tooltip effect="light" :disabled="tooltipDisabled">
-      <el-tag :size="props.size" class="info-tag ml-4 cursor" v-if="props.tags?.length > 1">
-        +{{ props.tags?.length - 1 }}
-      </el-tag>
-      <template #content>
+    <el-popover
+      placement="bottom"
+      :disabled="tooltipDisabled"
+      :popper-style="{ width: 'auto', maxWidth: '300px' }"
+    >
+      <template #reference>
+        <el-tag :size="props.size" class="info-tag ml-4 cursor" v-if="props.tags?.length > 1">
+          +{{ props.tags?.length - 1 }}
+        </el-tag>
+      </template>
+      <el-space>
         <el-tag
           :size="props.size"
           v-for="item in props.tags.slice(1)"
@@ -16,12 +22,13 @@
         >
           {{ item }}
         </el-tag>
-      </template>
-    </el-tooltip>
+      </el-space>
+    </el-popover>
   </div>
 </template>
 <script setup lang="ts">
 import { i18n_name } from '@/utils/common'
+import type { max } from 'moment'
 
 const props = defineProps<{
   tags: string[]
@@ -46,4 +53,13 @@ const props = defineProps<{
     }
   }
 }
+.el-popper.is-customized {
+  background: #ffffff;
+  box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+}
+
+.el-popper.is-customized .el-popper__arrow::before {
+  background: #ffffff;
+  right: 0;
+}
 </style>

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

@@ -186,6 +186,8 @@ export default {
     title: 'Move position',
     moveUp: 'Move up',
     moveDown: 'Move down',
+    moveTop: 'Move top',
+    moveBottom: 'Move bottom',
   },
   generateQuestion: {
     title: 'Generate Questions',

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

@@ -176,6 +176,8 @@ export default {
     title: '移动位置',
     moveUp: '上移',
     moveDown: '下移',
+    moveTop: '头部',
+    moveBottom: '末尾',
   },
   generateQuestion: {
     title: '生成问题',

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

@@ -177,6 +177,8 @@ export default {
     title: '移動位置',
     moveUp: '上移',
     moveDown: '下移',
+    MoveTop: '頭部',
+    MoveBottom: '末尾',
   },
   generateQuestion: {
     title: '生成問題',

ui/src/styles/element-plus.scss

@@ -23,15 +23,16 @@
   --el-card-padding: calc(var(--app-base-px) * 2);
   --el-card-border-radius: 6px;
   box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, 0.12) !important;
+
   &.is-never-shadow {
     border: 1px solid var(--el-card-border-color);
     box-shadow: none !important;
   }
   .el-card__body {
     overflow: inherit;
   }
-  &.el-card.is-hover-shadow:hover {
-    box-shadow: var(--el-box-shadow-light) !important;
+  &.is-hover-shadow:hover {
+    box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08) !important;
   }
 }
 

ui/src/views/application/index.vue

@@ -215,17 +215,22 @@
                   </template>
                   <template #mouseEnter>
                     <div @click.stop>
+                      <el-tooltip
+                        effect="dark"
+                        :content="$t('views.application.operation.toChat')"
+                        placement="top"
+                      >
+                        <el-button text @click.stop="toChat(item)">
+                          <AppIcon iconName="app-create-chat" class="color-secondary"></AppIcon>
+                        </el-button>
+                      </el-tooltip>
+                      <el-divider direction="vertical" />
                       <el-dropdown trigger="click">
                         <el-button text @click.stop>
                           <AppIcon iconName="app-more"></AppIcon>
                         </el-button>
                         <template #dropdown>
                           <el-dropdown-menu>
-                            <el-dropdown-item @click.stop="toChat(item)">
-                              <AppIcon iconName="app-create-chat" class="color-secondary"></AppIcon>
-                              {{ $t('views.application.operation.toChat') }}
-                            </el-dropdown-item>
-
                             <el-dropdown-item
                               @mousedown.stop="settingApplication($event, item)"
                               v-if="permissionPrecise.edit(item.id)"

ui/src/views/chat/component/HistoryPanel.vue

@@ -23,6 +23,9 @@
           <h4
             v-show="!isPcCollapse"
             :style="{ color: applicationDetail?.custom_theme?.header_font_color }"
+            class="ellipsis"
+            style="max-width: 185px"
+            :title="applicationDetail?.name"
           >
             {{ applicationDetail?.name }}
           </h4>

ui/src/views/paragraph/component/ParagraphCard.vue

@@ -92,6 +92,12 @@
                   </div>
                   <template #dropdown>
                     <el-dropdown-menu>
+                      <el-dropdown-item
+                        :disabled="!props.showMoveUp"
+                        @click.stop="emit('move', 'top')"
+                      >
+                        {{ $t('views.document.movePosition.moveTop') }}
+                      </el-dropdown-item>
                       <el-dropdown-item
                         :disabled="!props.showMoveUp"
                         @click.stop="emit('move', 'up')"
@@ -104,6 +110,12 @@
                       >
                         {{ $t('views.document.movePosition.moveDown') }}
                       </el-dropdown-item>
+                      <el-dropdown-item
+                        :disabled="!props.showMoveDown"
+                        @click.stop="emit('move', 'bottom')"
+                      >
+                        {{ $t('views.document.movePosition.moveBottom') }}
+                      </el-dropdown-item>
                     </el-dropdown-menu>
                   </template>
                 </el-dropdown>

ui/src/views/paragraph/index.vue

@@ -138,7 +138,7 @@
                                     null,
                                     {
                                       paragraph_id: item.id,
-                                      new_position: val === 'up' ? index - 1 : index + 1,
+                                      new_position: setPosition(val, index),
                                     },
                                     index,
                                   )
@@ -251,6 +251,18 @@ watch(
     dialogVisible.value = val
   },
 )
+
+function setPosition(val: string, index: number) {
+  if (val === 'top') {
+    return 0
+  } else if (val === 'bottom') {
+    return paragraphDetail.value.length - 1
+  } else if (val === 'up') {
+    return index - 1
+  } else if (val === 'down') {
+    return index + 1
+  }
+}
 function dialogVisibleChange(val: boolean) {
   dialogVisible.value = val
 }
@@ -409,7 +421,8 @@ function onEnd(event?: any, params?: any, index?: number) {
   }
   const obj = p ?? {
     paragraph_id: paragraphDetail.value[event.newIndex].id, // 当前拖动的段落ID
-    new_position: paragraphDetail.value[event.newIndex + 1]?.position || paragraphDetail.value.length, // 新位置的段落位置
+    new_position:
+      paragraphDetail.value[event.newIndex + 1]?.position || paragraphDetail.value.length, // 新位置的段落位置
   }
   // console.log(paragraphDetail.value[event.newIndex], obj)
   loadSharedApi({ type: 'paragraph', systemType: apiType.value }).putAdjustPosition(