✨ 增加触摸事件处理，支持长按切换分类显示，优化移动端用户体验

src/views/components/server-detail/server-monitor.vue

@@ -82,6 +82,9 @@
                 '--cate-color': cateItem.color,
               }"
               @click="toggleShowCate(cateItem.id)"
+              @touchstart="handleTouchStart(cateItem.id)"
+              @touchend="handleTouchEnd(cateItem.id)"
+              @touchmove="handleTouchMove(cateItem.id)"
             >
               <span class="cate-legend" />
               <span
@@ -169,8 +172,8 @@ const minutes = [{
 const refreshData = ref(true);
 const peakShaving = ref(false);
 const showCates = ref({});
-
 const monitorData = ref([]);
+const longPressTimer = ref(null);
 
 const now = ref(Date.now());
 const accpetShowTime = computed(() => now.value - (minute.value * 60 * 1000));
@@ -317,9 +320,32 @@ function toggleMinute(value) {
 }
 
 function toggleShowCate(id) {
+  if (window.innerWidth < 768) {
+    return;
+  }
   showCates.value[id] = !showCates.value[id];
 }
 
+function handleTouchStart(id) {
+  longPressTimer.value = setTimeout(() => {
+    showCates.value[id] = !showCates.value[id];
+  }, 500);
+}
+
+function handleTouchEnd() {
+  if (longPressTimer.value) {
+    clearTimeout(longPressTimer.value);
+    longPressTimer.value = null;
+  }
+}
+
+function handleTouchMove() {
+  if (longPressTimer.value) {
+    clearTimeout(longPressTimer.value);
+    longPressTimer.value = null;
+  }
+}
+
 async function loadMonitor() {
   await request({
     url: (
@@ -548,6 +574,10 @@ onUnmounted(() => {
     border-radius: 4px;
     cursor: pointer;
 
+    @media screen and (max-width: 768px) {
+      cursor: default;
+    }
+
     .cate-legend {
       width: 0.5em;
       height: 0.5em;