仪表板组件支持拖动排序

src/views/dashboard/AnalyticsProcesses.vue

@@ -18,8 +18,7 @@ async function loadProcessList() {
     const res: Process[] = await api.get('dashboard/processes')
 
     processList.value = res
-  }
-  catch (e) {
+  } catch (e) {
     console.log(e)
   }
 }
@@ -43,47 +42,29 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VCard title="系统进程">
-    <VTable
-      item-key="fullName"
-      class="table-rounded"
-      hide-default-footer
-      disable-sort
-    >
+  <VCard>
+    <VCardItem>
+      <VCardTitle class="cursor-move">系统进程</VCardTitle>
+    </VCardItem>
+    <VTable item-key="fullName" class="table-rounded" hide-default-footer disable-sort>
       <thead>
         <tr>
-          <th
-            v-for="header in headers"
-            :id="header"
-            :key="header"
-          >
+          <th v-for="header in headers" :id="header" :key="header">
             {{ header }}
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr
-          v-for="row in processList"
-          :key="row.pid"
-        >
-          <td
-            class="text-sm"
-            v-text="row.pid"
-          />
+        <tr v-for="row in processList" :key="row.pid">
+          <td class="text-sm" v-text="row.pid" />
           <!-- name -->
           <td>
             <h6 class="text-sm font-weight-medium">
               {{ row.name }}
             </h6>
           </td>
-          <td
-            class="text-sm"
-            v-text="formatSeconds(row.run_time)"
-          />
-          <td
-            class="text-sm"
-            v-text="`${row.memory} MB`"
-          />
+          <td class="text-sm" v-text="formatSeconds(row.run_time)" />
+          <td class="text-sm" v-text="`${row.memory} MB`" />
         </tr>
       </tbody>
     </VTable>