first commit

src/views/ListView.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { ref } from 'vue'
+
+// 按日期分组的交易列表（当前为纯前端 Mock 数据，后续会接 Pinia/SQLite）
+const groupedTransactions = ref([
+  {
+    date: '今天, 5月20日',
+    totalExpense: '42.50',
+    items: [
+      {
+        title: '全家便利店',
+        type: 'expense',
+        amount: '24.50',
+        time: '10:30',
+        icon: 'ph-coffee',
+        bg: 'bg-orange-100',
+        color: 'text-orange-600',
+        note: '早餐',
+      },
+      {
+        title: '滴滴出行',
+        type: 'expense',
+        amount: '18.00',
+        time: '09:15',
+        icon: 'ph-taxi',
+        bg: 'bg-blue-100',
+        color: 'text-blue-600',
+        note: '',
+      },
+    ],
+  },
+  {
+    date: '昨天, 5月19日',
+    totalExpense: '380.00',
+    items: [
+      {
+        title: '工资收入',
+        type: 'income',
+        amount: '12,500.00',
+        time: '18:00',
+        icon: 'ph-wallet',
+        bg: 'bg-emerald-100',
+        color: 'text-emerald-600',
+        note: '包含奖金',
+      },
+      {
+        title: '乐刻健身',
+        type: 'expense',
+        amount: '380.00',
+        time: '12:30',
+        icon: 'ph-barbell',
+        bg: 'bg-purple-100',
+        color: 'text-purple-600',
+        note: '月卡续费',
+      },
+    ],
+  },
+  {
+    date: '5月18日',
+    totalExpense: '120.00',
+    items: [
+      {
+        title: '山姆会员店',
+        type: 'expense',
+        amount: '120.00',
+        time: '15:40',
+        icon: 'ph-basket',
+        bg: 'bg-red-100',
+        color: 'text-red-600',
+        note: '零食采购',
+      },
+    ],
+  },
+])
+</script>
+
+<template>
+  <div class="space-y-4 pb-10 animate-fade-in">
+    <!-- 顶部月份与统计卡片 -->
+    <div class="sticky top-0 z-20 bg-warmOffwhite/95 backdrop-blur-sm py-2">
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="text-2xl font-extrabold text-stone-800">账单明细</h2>
+        <div
+          class="flex items-center gap-2 bg-white border border-stone-100 px-3 py-1.5 rounded-full shadow-sm"
+        >
+          <span class="text-sm font-bold text-stone-600">2024年 5月</span>
+          <i class="ph-bold ph-caret-down text-xs text-stone-400" />
+        </div>
+      </div>
+
+      <!-- 汇总统计 -->
+      <div class="flex gap-4 overflow-x-auto hide-scrollbar pb-2">
+        <div
+          class="shrink-0 bg-stone-700 text-white px-5 py-3 rounded-2xl shadow-lg shadow-stone-200 flex flex-col justify-center min-w-[140px]"
+        >
+          <span class="text-xs text-white/60 mb-1">总支出</span>
+          <span class="font-bold text-xl">¥ 8,215.40</span>
+        </div>
+        <div
+          class="shrink-0 bg-white text-stone-800 border border-stone-100 px-5 py-3 rounded-2xl flex flex-col justify-center min-w-[140px]"
+        >
+          <span class="text-xs text-stone-400 mb-1">总收入</span>
+          <span class="font-bold text-xl text-emerald-500">+ ¥ 12,500</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 按日期分组列表 -->
+    <div class="space-y-6 pb-10">
+      <div v-for="(group, gIndex) in groupedTransactions" :key="gIndex">
+        <div class="flex justify-between items-center mb-3 px-1">
+          <h4 class="text-sm font-bold text-stone-400">{{ group.date }}</h4>
+          <span class="text-xs text-stone-300 font-bold">支出 {{ group.totalExpense }}</span>
+        </div>
+
+        <div class="bg-white rounded-3xl p-1 shadow-sm border border-stone-50">
+          <div
+            v-for="(item, iIndex) in group.items"
+            :key="iIndex"
+            class="flex items-center justify-between p-4 hover:bg-stone-50 rounded-2xl transition"
+          >
+            <div class="flex items-center gap-4">
+              <div
+                :class="[
+                  'w-10 h-10 rounded-full flex items-center justify-center text-lg shrink-0',
+                  item.bg,
+                  item.color,
+                ]"
+              >
+                <i :class="['ph-fill', item.icon]" />
+              </div>
+              <div>
+                <p class="font-bold text-stone-800 text-sm">
+                  {{ item.title }}
+                </p>
+                <p class="text-xs text-stone-400 mt-0.5">
+                  {{ item.time }}
+                  <span v-if="item.note" class="text-stone-300">| {{ item.note }}</span>
+                </p>
+              </div>
+            </div>
+            <span
+              :class="[
+                'font-bold text-base',
+                item.type === 'expense' ? 'text-stone-800' : 'text-emerald-500',
+              ]"
+            >
+              {{ item.type === 'expense' ? '-' : '+' }} {{ item.amount }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+