feat: paragraph movePosition

Author: 1myuan

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

@@ -159,6 +159,11 @@ export default {
     optimization: 'Model optimization',
     directly_return: 'Respond directly',
   },
+  movePosition: {
+    title: 'Move position',
+    moveUp: 'Move up',
+    moveDown: 'Move down'
+  },
   generateQuestion: {
     title: 'Generate Questions',
     successMessage: 'Successful',

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

@@ -156,6 +156,11 @@ export default {
     optimization: '模型优化',
     directly_return: '直接回答',
   },
+  movePosition: {
+    title: '移动位置',
+    moveUp: '上移',
+    moveDown: '下移',
+  },
   generateQuestion: {
     title: '生成问题',
     successMessage: '生成问题成功',

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

@@ -156,6 +156,11 @@ export default {
     optimization: '模型優化',
     directly_return: '直接回答',
   },
+  movePosition: {
+    title: '移動位置',
+    moveUp: '上移',
+    moveDown: '下移'
+  },
   generateQuestion: {
     title: '生成問題',
     successMessage: '生成問題成功',

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

@@ -42,7 +42,7 @@
             <el-icon><MoreFilled /></el-icon>
           </el-button>
           <template #dropdown>
-            <el-dropdown-menu>
+            <el-dropdown-menu style="min-width: 140px;">
               <el-dropdown-item @click.stop="openGenerateDialog(data)">
                 <el-icon><Connection /></el-icon>
                 {{ $t('views.document.generateQuestion.title') }}</el-dropdown-item
@@ -51,6 +51,34 @@
                 <AppIcon iconName="app-migrate"></AppIcon>
                 {{ $t('views.document.setting.migration') }}</el-dropdown-item
               >
+               <el-dropdown-item>
+                <el-dropdown class="w-full" trigger="hover" :show-arrow="false" placement="right-start" popper-class="move-position-popper">
+                  <div class="w-full flex-between" style="line-height: 22px;">
+                    <div class="flex align-center">
+                      <!-- TODO 更换icon -->
+                      <AppIcon iconName="app-migrate"></AppIcon>
+                      {{ $t('views.document.movePosition.title') }}
+                    </div>
+                    <el-icon class="color-input-placeholder" :size="16" style="margin-right: 0;"><ArrowRight /></el-icon>
+                  </div>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item
+                        v-if="props.showMoveUp"
+                        @click.stop="emit('move', 'up')"
+                      >
+                        {{ $t('views.document.movePosition.moveUp') }}
+                      </el-dropdown-item>
+                      <el-dropdown-item
+                        v-if="props.showMoveDown"
+                        @click.stop="emit('move', 'down')"
+                      >
+                        {{ $t('views.document.movePosition.moveDown') }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </el-dropdown-item>
               <el-dropdown-item icon="Delete" @click.stop="deleteParagraph(data)">{{
                 $t('common.delete')
               }}</el-dropdown-item>
@@ -94,6 +122,8 @@ import { t } from '@/locales'
 const props = defineProps<{
   data: any
   disabled?: boolean
+  showMoveUp?: boolean
+  showMoveDown?: boolean
 }>()
 
 const route = useRoute()
@@ -106,7 +136,7 @@ const apiType = computed(() => {
   return type as 'systemShare' | 'workspace' | 'systemManage'
 })
 
-const emit = defineEmits(['changeState', 'deleteParagraph', 'refresh', 'refreshMigrateParagraph'])
+const emit = defineEmits(['changeState', 'deleteParagraph', 'refresh', 'refreshMigrateParagraph','move'])
 const loading = ref(false)
 const changeStateloading = ref(false)
 const show = ref(false)
@@ -229,3 +259,11 @@ function refreshMigrateParagraph() {
   }
 }
 </style>
+
+<style lang="scss">
+.move-position-popper {
+  .el-popper__arrow {
+    display: none;
+  }
+}
+</style>

ui/src/views/paragraph/index.vue

@@ -109,9 +109,12 @@
 
                             <ParagraphCard
                               :data="item"
+                              :showMoveUp="index !== 0"
+                              :showMoveDown="index < paragraphDetail.length-1"
                               class="mb-8 w-full"
                               @changeState="changeState"
                               @deleteParagraph="deleteParagraph"
+                              @move="(val: string)=>onEnd(null, {paragraph_id: item.id,new_position: val==='up'?index-1:index+1}, index)"
                               @refresh="refresh"
                               @refreshMigrateParagraph="refreshMigrateParagraph"
                               :disabled="shareDisabled"
@@ -328,8 +331,8 @@ function openGenerateDialog(row?: any) {
   GenerateRelatedDialogRef.value.open(arr, 'paragraph')
 }
 
-function onEnd(event?: any) {
-  const obj = {
+function onEnd(event?: any, params?: any, index?: number) {
+  const obj =params ?? {
     paragraph_id: paragraphDetail.value[event.newIndex].id, // 当前拖动的段落ID
     new_position: paragraphDetail.value[event.newIndex + 1].position, // 新位置的段落位置
   }
@@ -339,6 +342,10 @@ function onEnd(event?: any) {
     obj,
     loading,
   )
+  if(params) {
+    const movedItem = paragraphDetail.value.splice(index as number, 1)[0]
+    paragraphDetail.value.splice(params.new_position, 0, movedItem)
+  }
 }
 
 onMounted(() => {