workflow-editor 0.0.87-up-sit1 → 0.0.87-up

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "workflow-editor",
   "private": false,
-  "version": "0.0.87-up-sit1",
+  "version": "0.0.87-up",
   "type": "module",
   "main": "./lib/workflow-editor.js",
   "scripts": {
@@ -16,12 +16,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
-    "agilebuilder-ui": "1.1.92-sit1",
+    "agilebuilder-ui": "1.1.92",
     "axios": "^1.5.1",
     "element-plus": "^2.4.1",
     "font-awesome": "^4.7.0",
     "nprogress": "^0.2.0",
     "sass": "^1.69.4",
+    "sortablejs": "^1.15.2",
     "vite": "^4.4.5",
     "vite-plugin-svg-icons": "^2.0.1",
     "vue": "^3.3.4",

package/packages/workflow-editor/src/properties-editors/common/task-title.vue

@@ -5,6 +5,7 @@
         v-for="(tag, index) in dynamicTags"
         :key="tag"
         :data-index="index"
+        :data-tag-key="tag"
         :type="getType(tag)"
         closable
         :disable-transitions="false"
@@ -80,22 +81,23 @@ export default {
   mounted() {
     this._sortable = Sortable.create(this.$refs.tagContainer, {
       animation: 150,
-      onEnd: ({ oldIndex, newIndex }) => {
-        if (oldIndex === newIndex) return
-        // 先将 Sortable 物理移动的 DOM 还原到原始顺序，再让 Vue 响应式更新，否则会导致所有标签都闪烁一下刷新
+      draggable: '.el-tag',
+      dragClass: 'wf-tag-drag',
+      onEnd: () => {
         const container = this.$refs.tagContainer
-        const children = Array.from(container.children)
-        const item = children[newIndex]
-        if (newIndex < oldIndex) {
-          container.insertBefore(item, children[oldIndex + 1] || null)
-        } else {
-          container.insertBefore(item, children[oldIndex])
-        }
-        const tags = [...this.dynamicTags]
-        const moved = tags.splice(oldIndex, 1)[0]
-        tags.splice(newIndex, 0, moved)
-        this.dynamicTags = tags
-        this.$emit('update:modelValue', this.dynamicTags.join(''))
+        if (!container) return
+        // 从 DOM 当前真实顺序读取 tag 值，彻底避免索引偏移问题
+        const newOrder = Array.from(container.querySelectorAll('.el-tag[data-tag-key]')).map((el) =>
+          el.getAttribute('data-tag-key')
+        )
+        // 还原 Sortable 对 DOM 的移动，交由 Vue 重新渲染
+        container.querySelectorAll('.el-tag[data-tag-key]').forEach((el, i) => {
+          const original = this.dynamicTags[i]
+          const originalEl = container.querySelector(`.el-tag[data-tag-key="${original}"]`)
+          if (originalEl) container.appendChild(originalEl)
+        })
+        this.dynamicTags = newOrder
+        this.$emit('update:modelValue', newOrder.join(''))
       }
     })
   },
@@ -206,3 +208,14 @@ select {
   line-height: 32px;
 }
 </style>
+
+<!-- 非 scoped：覆盖 Sortable 追加到 body 的拖拽克隆元素样式 -->
+<style>
+.wf-tag-drag {
+  display: inline-flex !important;
+  pointer-events: auto !important;
+  opacity: 0.85;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background: #fff;
+}
+</style>