实现拖拽功能 并为新增工厂/流水线按钮添加图标

package.json

@@ -21,6 +21,7 @@
     "pinia": "^2.2.2",
     "radash": "^12.1.0",
     "vue": "^3.5.7",
+    "vue-draggable-plus": "^0.5.3",
     "vue-i18n": "^10.0.1",
     "vue-router": "^4.4.5"
   },

src/components/ModularFactoryDrawerContent.tsx

@@ -28,6 +28,9 @@ import ItemQuantityPerMinuteDisplay from './ItemQuantityPerMinuteDisplay'
 import ItemRecipeSelect from './ItemRecipeSelect'
 import ItemSelect from './ItemSelect'
 import PowerDisplay from './PowerDisplay'
+import VueDraggableExt from './VueDraggableExt.vue'
+import AddOutlined from './icons/AddOutlined'
+import DragHandleOutlined from './icons/DragHandleOutlined'
 
 const ItemQuantityPerMinuteDisplayList = defineComponent({
   name: 'ItemQuantityPerMinuteDisplayList',
@@ -87,6 +90,14 @@ export default defineComponent({
     })
 
     const columns = computed<DataTableColumns<AssemblyLine>>(() => [
+      {
+        title: t('sort'),
+        key: 'sort',
+        width: 60,
+        render: () => (
+          <DragHandleOutlined class="sort-handle cursor-move w-7 h-7" />
+        ),
+      },
       {
         title: t('targetItem'),
         key: 'targetItem',
@@ -282,15 +293,36 @@ export default defineComponent({
               modularFactoryStore.newAssemblyLine(modularFactory.value.id)
             }}
           >
-            {t('newAssemblyLine')}
+            {{
+              icon: () => <AddOutlined />,
+              default: () => t('newAssemblyLine'),
+            }}
           </NButton>
         </NFlex>
 
-        <NDataTable
-          rowKey={({ id }: AssemblyLine) => id}
-          columns={columns.value}
-          data={modularFactory.value.data}
-        />
+        {modularFactory.value.data.length > 0 ? (
+          <VueDraggableExt
+            value={modularFactory.value.data}
+            onUpdateValue={(value: AssemblyLine[]) => {
+              modularFactory.value.data = value
+            }}
+            target=".n-data-table-tbody"
+            handle=".sort-handle"
+            animation={150}
+          >
+            <NDataTable
+              rowKey={({ id }: AssemblyLine) => id}
+              columns={columns.value}
+              data={modularFactory.value.data}
+            />
+          </VueDraggableExt>
+        ) : (
+          <NDataTable
+            rowKey={({ id }: AssemblyLine) => id}
+            columns={columns.value}
+            data={modularFactory.value.data}
+          />
+        )}
 
         {modularFactoryComputed.value?.averageTotalPowerUsage && (
           <NStatistic label={t('averageTotalPowerUsage')}>

src/components/VueDraggableExt.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts" generic="T">
+import { VueDraggable } from 'vue-draggable-plus'
+
+defineProps<{
+  value: T[]
+  onUpdateValue: (newValue: T[]) => void
+  animation?: number
+  target?: string
+  handle?: string
+}>()
+</script>
+
+<template>
+  <VueDraggable
+    :model-value="value"
+    :animation="animation"
+    :target="target"
+    :handle="handle"
+    direction="vertical"
+    drag-class="opacity-0"
+    @update:model-value="onUpdateValue"
+  >
+    <slot />
+  </VueDraggable>
+</template>

src/components/icons/AddOutlined.tsx

@@ -0,0 +1,19 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'AddOutlined',
+  setup() {
+    return () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    )
+  },
+})

src/components/icons/DragHandleOutlined.tsx

@@ -0,0 +1,16 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'DragHandleOutlined',
+  setup() {
+    return () => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 24 24"
+      >
+        <path d="M20 9H4v2h16V9zM4 15h16v-2H4v2z" fill="currentColor"></path>
+      </svg>
+    )
+  },
+})

src/locales/en.yml

@@ -13,6 +13,7 @@ globalConfig: Global Config
 clearAllData: Clear All Data
 clearAllDataConfirm: Are you sure you want to clear all data?
 
+sort: Sort
 name: Name
 remark: Remark
 power: Power

src/locales/zh-CN.yml

@@ -13,6 +13,7 @@ globalConfig: 全局配置
 clearAllData: 清空全部数据
 clearAllDataConfirm: 确定清空全部数据吗？
 
+sort: 排序
 name: 名称
 remark: 备注
 power: 功率

src/views/HomeView.tsx

@@ -19,6 +19,9 @@ import ModularFactoryDrawer, {
   type Exposed as ModularFactoryDrawerExposed,
 } from '@/components/ModularFactoryDrawer'
 import PowerDisplay from '@/components/PowerDisplay'
+import VueDraggableExt from '@/components/VueDraggableExt.vue'
+import AddOutlined from '@/components/icons/AddOutlined'
+import DragHandleOutlined from '@/components/icons/DragHandleOutlined'
 import { useModularFactoryComputedStore } from '@/stores/modularFactoryComputedStore'
 import { useModularFactoryStore } from '@/stores/modularFactoryStore'
 import type { Id, ModularFactory } from '@/types'
@@ -71,23 +74,28 @@ export default defineComponent({
 
     const columns = computed<DataTableColumns<ModularFactory>>(() => {
       return [
+        {
+          title: t('sort'),
+          key: 'sort',
+          width: 60,
+          render: () => (
+            <DragHandleOutlined class="sort-handle cursor-move w-7 h-7" />
+          ),
+        },
         {
           title: t('name'),
           key: 'name',
           minWidth: 160,
-          width: 240,
         },
         {
           title: t('remark'),
           key: 'remark',
           minWidth: 240,
-          width: 320,
         },
         {
           title: t('power'),
           key: 'power',
           minWidth: 120,
-          width: 160,
           render: (row) => {
             const modularFactoryComputed =
               modularFactoryComputedStore.data[row.id]
@@ -116,7 +124,6 @@ export default defineComponent({
           title: t('inputs'),
           key: 'inputs',
           minWidth: 120,
-          width: 160,
           render: (row) => (
             <ItemQuantityPerMinuteDisplayList
               modularFactoryId={row.id}
@@ -128,7 +135,6 @@ export default defineComponent({
           title: t('outputs'),
           key: 'outputs',
           minWidth: 120,
-          width: 160,
           render: (row) => (
             <ItemQuantityPerMinuteDisplayList
               modularFactoryId={row.id}
@@ -183,7 +189,10 @@ export default defineComponent({
                   )
                 }}
               >
-                {t('newFactory')}
+                {{
+                  icon: () => <AddOutlined />,
+                  default: () => t('newFactory'),
+                }}
               </NButton>
               <NButton disabled>{t('globalConfig')}</NButton>
             </NFlex>
@@ -210,11 +219,29 @@ export default defineComponent({
             </NFlex>
           </NFlex>
 
-          <NDataTable
-            rowKey={({ id }: ModularFactory) => id}
-            columns={columns.value}
-            data={modularFactoryStore.data}
-          />
+          {modularFactoryStore.data.length > 0 ? (
+            <VueDraggableExt
+              value={modularFactoryStore.data}
+              onUpdateValue={(value) => {
+                modularFactoryStore.data = value
+              }}
+              target=".n-data-table-tbody"
+              handle=".sort-handle"
+              animation={150}
+            >
+              <NDataTable
+                rowKey={({ id }: ModularFactory) => id}
+                columns={columns.value}
+                data={modularFactoryStore.data}
+              />
+            </VueDraggableExt>
+          ) : (
+            <NDataTable
+              rowKey={({ id }: ModularFactory) => id}
+              columns={columns.value}
+              data={modularFactoryStore.data}
+            />
+          )}
 
           {modularFactoryComputedStore.finalComputed
             ?.averageTotalPowerUsage && (