fix: some

src/components/core/layouts/art-header-bar/ChangePasswordDialog.vue

@@ -1,6 +1,7 @@
 <template>
   <ElDialog
     v-model="dialogVisible"
+    append-to-body
     :title="t('passwordChange.title')"
     width="min(420px, calc(100vw - 32px))"
     :close-on-click-modal="false"

src/components/core/tables/ArtTableHeader.vue

@@ -53,12 +53,18 @@
       </div>
 
       <!-- 列设置 -->
-      <ElPopover placement="bottom" trigger="click">
+      <ElPopover
+        v-model:visible="columnSettingsOpen"
+        placement="bottom"
+        trigger="click"
+        @after-enter="startColumnDrag"
+        @before-leave="stopColumnDrag"
+      >
         <template #reference>
           <div class="btn"><i class="iconfont-sys" style="font-size: 17px">&#xe620;</i> </div>
         </template>
         <div>
-          <VueDraggable v-model="columns">
+          <div ref="columnSettingsRef">
             <div v-for="item in columns" :key="item.prop || item.type" class="column-option">
               <div class="drag-icon">
                 <i class="iconfont-sys">&#xe648;</i>
@@ -67,7 +73,7 @@
                 item.label || (item.type === 'selection' ? t('table.selection') : '')
               }}</ElCheckbox>
             </div>
-          </VueDraggable>
+          </div>
         </div>
       </ElPopover>
       <!-- 其他设置 -->
@@ -98,8 +104,10 @@
   import { TableSizeEnum } from '@/enums/formEnum'
   import { useTableStore } from '@/store/modules/table'
   import { ElPopover, ElCheckbox } from 'element-plus'
-  import { VueDraggable } from 'vue-draggable-plus'
+  import { useDraggable } from 'vue-draggable-plus'
   import { useI18n } from 'vue-i18n'
+  import { onBeforeUnmount, onDeactivated, onMounted, onUnmounted, ref } from 'vue'
+  import { storeToRefs } from 'pinia'
 
   const { t } = useI18n()
 
@@ -128,6 +136,27 @@
 
   const columns = defineModel<ColumnOption[]>('columns', { required: true })
 
+  const columnSettingsRef = ref<HTMLElement | null>(null)
+  const columnSettingsOpen = ref(false)
+  // Popover 内容和路由生命周期不同，禁止拖拽库在挂载时用空 ref 自动初始化。
+  const columnDraggable = useDraggable(columnSettingsRef, columns, { immediate: false })
+
+  const startColumnDrag = () => {
+    const element = columnSettingsRef.value
+    if (!columnSettingsOpen.value || !(element instanceof HTMLElement) || !element.isConnected) {
+      return
+    }
+    columnDraggable.start(element)
+  }
+
+  const stopColumnDrag = () => {
+    columnSettingsOpen.value = false
+    columnDraggable.destroy()
+  }
+
+  onBeforeUnmount(stopColumnDrag)
+  onDeactivated(stopColumnDrag)
+
   // 定义视图模式 model
   const currentView = defineModel<'table' | 'descriptions'>('currentView', { default: 'table' })