From d857acc58e74357741a0f245619718debe8ed6a4 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 9 May 2024 18:30:25 +0800
Subject: [PATCH] fix drag handle

---
 src/components/misc/DashboardElement.vue        | 7 ++++++-
 src/pages/dashboard.vue                         | 8 ++++++++
 src/views/dashboard/AnalyticsCpu.vue            | 5 ++++-
 src/views/dashboard/AnalyticsMediaStatistic.vue | 5 ++++-
 src/views/dashboard/AnalyticsMemory.vue         | 5 ++++-
 src/views/dashboard/AnalyticsProcesses.vue      | 5 ++++-
 src/views/dashboard/AnalyticsScheduler.vue      | 5 ++++-
 src/views/dashboard/AnalyticsSpeed.vue          | 5 ++++-
 src/views/dashboard/AnalyticsStorage.vue        | 5 ++++-
 src/views/dashboard/AnalyticsWeeklyOverview.vue | 5 ++++-
 src/views/dashboard/MediaServerLatest.vue       | 5 ++++-
 src/views/dashboard/MediaServerLibrary.vue      | 5 ++++-
 src/views/dashboard/MediaServerPlaying.vue      | 5 ++++-
 13 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/src/components/misc/DashboardElement.vue b/src/components/misc/DashboardElement.vue
index c854f579..6ae0e673 100644
--- a/src/components/misc/DashboardElement.vue
+++ b/src/components/misc/DashboardElement.vue
@@ -33,7 +33,12 @@ const props = defineProps({
   <!-- 插件仪表板 -->
   <VCard v-else-if="!isNullOrEmptyObject(props.config)">
     <VCardItem>
-      <VCardTitle class="cursor-move">{{ props.config?.name }}</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>
+        {{ props.config?.name }}
+      </VCardTitle>
     </VCardItem>
     <VCardItem>
       <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
diff --git a/src/pages/dashboard.vue b/src/pages/dashboard.vue
index aab370d6..16ab3ff4 100644
--- a/src/pages/dashboard.vue
+++ b/src/pages/dashboard.vue
@@ -221,6 +221,12 @@ function dragOrderEnd() {
   saveDashboardConfig()
 }
 
+// 拖动排序开始
+function dragOrderBegin() {
+  // 如果是移动端则取消
+  if (!display.mdAndUp.value) return false
+}
+
 onBeforeMount(async () => {
   await loadDashboardConfig()
   getDashboardPlugins()
@@ -232,6 +238,8 @@ onBeforeMount(async () => {
   <draggable
     v-model="dashboardConfigs"
     @end="dragOrderEnd"
+    :move="dragOrderBegin"
+    handle=".cursor-move"
     item-key="id"
     tag="VRow"
     :component-data="{ 'class': 'match-height' }"
diff --git a/src/views/dashboard/AnalyticsCpu.vue b/src/views/dashboard/AnalyticsCpu.vue
index d5ce0191..f6dced87 100644
--- a/src/views/dashboard/AnalyticsCpu.vue
+++ b/src/views/dashboard/AnalyticsCpu.vue
@@ -125,7 +125,10 @@ onUnmounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle class="cursor-move">CPU</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>CPU</VCardTitle>
     </VCardItem>
     <VCardText>
       <VueApexCharts type="line" :options="chartOptions" :series="series" :height="150" />
diff --git a/src/views/dashboard/AnalyticsMediaStatistic.vue b/src/views/dashboard/AnalyticsMediaStatistic.vue
index d5c1615a..c09313b7 100644
--- a/src/views/dashboard/AnalyticsMediaStatistic.vue
+++ b/src/views/dashboard/AnalyticsMediaStatistic.vue
@@ -55,7 +55,10 @@ onMounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle class="cursor-move">媒体统计</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>媒体统计</VCardTitle>
     </VCardItem>
 
     <VCardText>
diff --git a/src/views/dashboard/AnalyticsMemory.vue b/src/views/dashboard/AnalyticsMemory.vue
index 8149b240..2560f0c7 100644
--- a/src/views/dashboard/AnalyticsMemory.vue
+++ b/src/views/dashboard/AnalyticsMemory.vue
@@ -131,7 +131,10 @@ onUnmounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle class="cursor-move">内存</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>内存</VCardTitle>
     </VCardItem>
     <VCardText>
       <VueApexCharts type="area" :options="chartOptions" :series="series" :height="150" />
diff --git a/src/views/dashboard/AnalyticsProcesses.vue b/src/views/dashboard/AnalyticsProcesses.vue
index b4bce123..64b08e2e 100644
--- a/src/views/dashboard/AnalyticsProcesses.vue
+++ b/src/views/dashboard/AnalyticsProcesses.vue
@@ -44,7 +44,10 @@ onUnmounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle class="cursor-move">系统进程</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>系统进程</VCardTitle>
     </VCardItem>
     <VTable item-key="fullName" class="table-rounded" hide-default-footer disable-sort>
       <thead>
diff --git a/src/views/dashboard/AnalyticsScheduler.vue b/src/views/dashboard/AnalyticsScheduler.vue
index 09694042..174da7a6 100644
--- a/src/views/dashboard/AnalyticsScheduler.vue
+++ b/src/views/dashboard/AnalyticsScheduler.vue
@@ -40,7 +40,10 @@ onUnmounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle class="cursor-move">后台任务</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>后台任务</VCardTitle>
     </VCardItem>
 
     <VCardText>
diff --git a/src/views/dashboard/AnalyticsSpeed.vue b/src/views/dashboard/AnalyticsSpeed.vue
index fd5e837f..781e7e89 100644
--- a/src/views/dashboard/AnalyticsSpeed.vue
+++ b/src/views/dashboard/AnalyticsSpeed.vue
@@ -82,7 +82,10 @@ onUnmounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle class="cursor-move">实时速率</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>实时速率</VCardTitle>
     </VCardItem>
 
     <VCardText class="pt-4">
diff --git a/src/views/dashboard/AnalyticsStorage.vue b/src/views/dashboard/AnalyticsStorage.vue
index 9092812f..30f5d989 100644
--- a/src/views/dashboard/AnalyticsStorage.vue
+++ b/src/views/dashboard/AnalyticsStorage.vue
@@ -41,7 +41,10 @@ onMounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle class="cursor-move">存储空间</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>存储空间</VCardTitle>
     </VCardItem>
     <VCardText>
       <h5 class="text-2xl font-weight-medium text-primary">
diff --git a/src/views/dashboard/AnalyticsWeeklyOverview.vue b/src/views/dashboard/AnalyticsWeeklyOverview.vue
index 52080b0c..59c1dbca 100644
--- a/src/views/dashboard/AnalyticsWeeklyOverview.vue
+++ b/src/views/dashboard/AnalyticsWeeklyOverview.vue
@@ -112,7 +112,10 @@ onMounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle class="cursor-move">最近入库</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>最近入库</VCardTitle>
     </VCardItem>
 
     <VCardText>
diff --git a/src/views/dashboard/MediaServerLatest.vue b/src/views/dashboard/MediaServerLatest.vue
index 9d343edf..91915e9e 100644
--- a/src/views/dashboard/MediaServerLatest.vue
+++ b/src/views/dashboard/MediaServerLatest.vue
@@ -23,7 +23,10 @@ onMounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle class="cursor-move">最近添加</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle >最近添加</VCardTitle>
     </VCardItem>
 
     <div v-if="latestList.length > 0" class="grid gap-4 grid-media-card mx-3 mb-3" tabindex="0">
diff --git a/src/views/dashboard/MediaServerLibrary.vue b/src/views/dashboard/MediaServerLibrary.vue
index e3871ea3..563e6480 100644
--- a/src/views/dashboard/MediaServerLibrary.vue
+++ b/src/views/dashboard/MediaServerLibrary.vue
@@ -23,7 +23,10 @@ onMounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle class="cursor-move">我的媒体库</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle >我的媒体库</VCardTitle>
     </VCardItem>
 
     <div v-if="libraryList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
diff --git a/src/views/dashboard/MediaServerPlaying.vue b/src/views/dashboard/MediaServerPlaying.vue
index a1c3ac7b..7424aa1a 100644
--- a/src/views/dashboard/MediaServerPlaying.vue
+++ b/src/views/dashboard/MediaServerPlaying.vue
@@ -23,7 +23,10 @@ onMounted(() => {
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle class="cursor-move">继续观看</VCardTitle>
+      <template #append>
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </template>
+      <VCardTitle>继续观看</VCardTitle>
     </VCardItem>
 
     <div v-if="playingList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">