feat: 应用列表可拖动排序

qiin2333 · Oct 15, 2024 · 82e7fe4 · 82e7fe4
1 parent 1a0d05c
commit 82e7fe4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -7,12 +7,15 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "6.6.0",
     "@popperjs/core": "2.11.8",
-    "@vitejs/plugin-vue": "4.6.2",
     "bootstrap": "5.3.3",
-    "vite": "4.5.2",
-    "vite-plugin-ejs": "1.6.4",
+    "nanoid": "^5.0.7",
     "vue": "3.4.38",
     "vue-i18n": "9.14.0",
-    "nanoid": "^5.0.7"
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "4.6.2",
+    "vite": "4.5.2",
+    "vite-plugin-ejs": "1.6.4"
   }
 }
diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
@@ -86,17 +86,21 @@ <h1>{{ $t('apps.applications_title') }}</h1>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(app,i) in apps" :key="i">
-            <td>{{app.name}}</td>
-            <td>
-              <button class="btn btn-primary mx-1" @click="editApp(i)">
-                <i class="fas fa-edit"></i> {{ $t('apps.edit') }}
-              </button>
-              <button class="btn btn-danger mx-1" @click="showDeleteForm(i)">
-                <i class="fas fa-trash"></i> {{ $t('apps.delete') }}
-              </button>
-            </td>
-          </tr>
+          <draggable v-model="apps">
+            <template #item="{app, i}">
+              <tr style="cursor: move;">
+                <td>{{app.name}}</td>
+                <td>
+                  <button class="btn btn-primary mx-1" @click="editApp(i)">
+                    <i class="fas fa-edit"></i> {{ $t('apps.edit') }}
+                  </button>
+                  <button class="btn btn-danger mx-1" @click="showDeleteForm(i)">
+                    <i class="fas fa-trash"></i> {{ $t('apps.delete') }}
+                  </button>
+                </td>
+              </tr>
+            </template>
+          </draggable>
         </tbody>
       </table>
     </div>
@@ -420,11 +424,13 @@ <h4>{{ $t('apps.env_vars_about') }}</h4>
   import {initApp} from './init'
   import Navbar from './Navbar.vue'
   import {Dropdown} from 'bootstrap/dist/js/bootstrap'
+  import draggable from 'vuedraggable'
   import {nanoid} from 'nanoid'
 
   const app = createApp({
     components: {
-      Navbar
+      Navbar,
+      draggable,
     },
     data() {
       return {