feat: swipe between ledger months

apps/web/src/styles.css

@@ -317,6 +317,7 @@ input:focus-visible {
   position: sticky;
   top: 0;
   z-index: 2;
+  touch-action: pan-y;
   min-height: 70px;
   display: flex;
   align-items: center;

apps/web/src/views/LedgerView.vue

@@ -39,6 +39,7 @@ const ledgerContent = ref<HTMLElement | null>(null);
 const loadMoreTrigger = ref<HTMLElement | null>(null);
 const monthInput = ref<HTMLInputElement | null>(null);
 const selectedMonth = ref(toMonthValue(new Date()));
+const monthSwipeStart = ref<{ x: number; y: number } | null>(null);
 let loadMoreObserver: IntersectionObserver | null = null;
 
 const selectedMonthParts = computed(() => {
@@ -155,6 +156,28 @@ function openMonthPicker() {
   else input.click();
 }
 
+function startMonthSwipe(event: TouchEvent) {
+  const touch = event.touches[0];
+  if (touch) monthSwipeStart.value = { x: touch.clientX, y: touch.clientY };
+}
+
+function finishMonthSwipe(event: TouchEvent) {
+  const start = monthSwipeStart.value;
+  const touch = event.changedTouches[0];
+  monthSwipeStart.value = null;
+  if (!start || !touch) return;
+  const deltaX = touch.clientX - start.x;
+  const deltaY = touch.clientY - start.y;
+  if (Math.abs(deltaX) < 48 || Math.abs(deltaX) <= Math.abs(deltaY)) return;
+  shiftMonth(deltaX < 0 ? 1 : -1);
+}
+
+function shiftMonth(offset: number) {
+  const selected = selectedMonthParts.value;
+  if (!selected) return;
+  selectedMonth.value = toMonthValue(new Date(selected.year, selected.month + offset, 1));
+}
+
 function dateHeading(value: string) {
   const date = new Date(`${value}T00:00:00`);
   const today = new Date();
@@ -321,7 +344,7 @@ async function shareLedger() {
           <span><Clock3 :size="15" />{{ pendingConversionCount }} 条外币账目等待换算</span>
         </div>
       </div>
-      <div class="list-toolbar">
+      <div class="list-toolbar" @touchstart.passive="startMonthSwipe" @touchend="finishMonthSwipe">
         <div class="list-toolbar-copy">
           <div class="list-toolbar-heading">
             <button class="list-month-switcher" type="button" @click="openMonthPicker">