From a6c85c6634d3b7bf20ddd84998dcf34140a61705 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=A5?= <chenchun@chenchundeMacBook-Air.local>
Date: Wed, 3 Jun 2026 20:22:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E6=9D=BF=E5=9D=97=E6=94=AF=E6=8C=81=E9=BC=A0=E6=A0=87=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E5=B7=A6=E5=8F=B3=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ 新增功能:
- 鼠标按住拖拽左右滚动
- 触摸滑动支持（移动端）
- 1.5x 滚动速度
- 防止拖拽时选中文本
- 拖拽时鼠标样式变化（grab → grabbing）

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/components/home/HomeProcess.vue | 40 ++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/app/components/home/HomeProcess.vue b/app/components/home/HomeProcess.vue
index ff31f68..428b533 100644
--- a/app/components/home/HomeProcess.vue
+++ b/app/components/home/HomeProcess.vue
@@ -38,7 +38,18 @@
         </svg>
 
         <!-- 步骤卡片 -->
-        <div class="flex gap-8 md:gap-12 pb-10 overflow-x-auto scrollbar-hide">
+        <div
+          ref="cardsContainerRef"
+          class="flex gap-8 md:gap-12 pb-10 overflow-x-auto scrollbar-hide select-none cursor-grab"
+          :class="{ 'cursor-grabbing': isDragging }"
+          @mousedown.prevent="startDrag"
+          @mousemove="onDrag"
+          @mouseup="endDrag"
+          @mouseleave="endDrag"
+          @touchstart="startDrag"
+          @touchmove="onDrag"
+          @touchend="endDrag"
+        >
           <div
             v-for="(step, index) in steps"
             :key="step.id"
@@ -112,11 +123,38 @@ const { t } = useI18n()
 const rootRef = ref<HTMLElement | null>(null)
 const headerRef = ref<HTMLElement | null>(null)
 const scrollContainerRef = ref<HTMLElement | null>(null)
+const cardsContainerRef = ref<HTMLElement | null>(null)
 const lineRef = ref<SVGElement | null>(null)
 const linePathRef = ref<SVGPathElement | null>(null)
 const stepElements = ref<(HTMLElement | null)[]>([])
 let ctx: gsap.Context | null = null
 
+// 拖拽状态
+const isDragging = ref(false)
+let startX = 0
+let scrollLeft = 0
+
+const startDrag = (e: MouseEvent | TouchEvent) => {
+  if (!cardsContainerRef.value) return
+  isDragging.value = true
+  const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX
+  startX = clientX - cardsContainerRef.value.offsetLeft
+  scrollLeft = cardsContainerRef.value.scrollLeft
+}
+
+const onDrag = (e: MouseEvent | TouchEvent) => {
+  if (!isDragging.value || !cardsContainerRef.value) return
+  e.preventDefault()
+  const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX
+  const x = clientX - cardsContainerRef.value.offsetLeft
+  const walk = (x - startX) * 1.5 // 1.5x 速度
+  cardsContainerRef.value.scrollLeft = scrollLeft - walk
+}
+
+const endDrag = () => {
+  isDragging.value = false
+}
+
 const setStepRef = (el: any, index: number) => {
   if (el) stepElements.value[index] = el
 }