diff --git a/fuellog-web/src/pages/Refuels.vue b/fuellog-web/src/pages/Refuels.vue
index f100565..4c907ca 100644
--- a/fuellog-web/src/pages/Refuels.vue
+++ b/fuellog-web/src/pages/Refuels.vue
@@ -1,13 +1,177 @@
 <script setup lang="ts">
-import { NEmpty } from 'naive-ui'
+import { computed, onMounted, ref, watch } from 'vue'
+import {
+  NButton,
+  NCard,
+  NEmpty,
+  NPopconfirm,
+  NSpin,
+  NTag,
+  useMessage,
+} from 'naive-ui'
+import { refuelsApi } from '@/api/refuels'
+import { useVehicleStore } from '@/stores/vehicle'
+import type { RefuelRecord } from '@/api/types'
+import { fmtAmount, fmtLiters, fmtPrice } from '@/utils/decimal'
+
+const store = useVehicleStore()
+const message = useMessage()
+const records = ref<RefuelRecord[]>([])
+const loading = ref(false)
+
+async function load() {
+  if (!store.currentId) {
+    records.value = []
+    return
+  }
+  loading.value = true
+  try {
+    records.value = await refuelsApi.list(store.currentId)
+  } catch (err) {
+    message.error((err as Error).message || '加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(async () => {
+  await store.loadList()
+  await load()
+})
+
+// 切车就重拉
+watch(
+  () => store.currentId,
+  () => load(),
+)
+
+// 按月分组(最新月份在前)
+const grouped = computed(() => {
+  const map = new Map<string, RefuelRecord[]>()
+  for (const r of records.value) {
+    const d = new Date(r.refuel_time)
+    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+    if (!map.has(key)) map.set(key, [])
+    map.get(key)!.push(r)
+  }
+  return Array.from(map.entries()).sort((a, b) => (a[0] < b[0] ? 1 : -1))
+})
+
+const monthLabel = (k: string) => `${k.slice(0, 4)} 年 ${parseInt(k.slice(5), 10)} 月`
+
+const monthSubtotal = (rs: RefuelRecord[]) => {
+  const liters = rs.reduce((s, r) => s + r.liters, 0)
+  const amount = rs.reduce((s, r) => s + r.total_amount, 0)
+  return { liters, amount }
+}
+
+const monthAvgPrice = (rs: RefuelRecord[]) => {
+  const totalL = rs.reduce((s, r) => s + r.liters, 0)
+  if (totalL <= 0) return 0
+  const totalA = rs.reduce((s, r) => s + r.total_amount, 0)
+  return totalA / totalL
+}
+
+async function remove(r: RefuelRecord) {
+  try {
+    await refuelsApi.remove(r.id)
+    message.success('已删除')
+    await load()
+  } catch (err) {
+    message.error((err as Error).message || '删除失败')
+  }
+}
+
+const dayLabel = (iso: string) => {
+  const d = new Date(iso)
+  return `${d.getMonth() + 1}/${d.getDate()}`
+}
+const weekday = (iso: string) => {
+  const d = new Date(iso)
+  return ['日', '一', '二', '三', '四', '五', '六'][d.getDay()]
+}
 </script>
 
 <template>
-  <div class="max-w-screen-md mx-auto">
-    <NEmpty description="加油记录列表(骨架占位,Phase 4 接入)">
-      <div class="text-sm text-ink-soft mt-2">
-        API:GET /api/refuels?vehicle_id=...&start_date=...&end_date=...
+  <div class="max-w-screen-md mx-auto space-y-3">
+    <div class="flex items-center justify-between">
+      <h2 class="text-xl font-semibold">加油记录</h2>
+      <NButton type="primary" @click="$router.push({ name: 'refuel-new' })">
+        ＋ 新增
+      </NButton>
+    </div>
+
+    <NSpin :show="loading">
+      <NEmpty
+        v-if="!loading && !records.length && store.currentId"
+        description="还没有加油记录,点右上角加一笔"
+      />
+      <NEmpty
+        v-else-if="!loading && !store.currentId"
+        description="还没有车辆,先去添加"
+      >
+        <NButton type="primary" @click="$router.push({ name: 'vehicles' })">
+          添加车辆
+        </NButton>
+      </NEmpty>
+
+      <div v-else class="space-y-4">
+        <NCard
+          v-for="[key, items] in grouped"
+          :key="key"
+          :title="monthLabel(key)"
+          class="!rounded-2xl"
+          size="small"
+        >
+          <template #header-extra>
+            <div class="text-xs text-ink-soft">
+              共 {{ items.length }} 笔 ·
+              {{ fmtLiters(monthSubtotal(items).liters) }} ·
+              {{ fmtAmount(monthSubtotal(items).amount) }} ·
+              均价 {{ fmtPrice(monthAvgPrice(items)) }}
+            </div>
+          </template>
+
+          <div class="divide-y divide-black/5 dark:divide-white/10 -mx-2">
+            <div
+              v-for="r in items"
+              :key="r.id"
+              class="flex items-center gap-3 px-2 py-3"
+            >
+              <div class="text-center w-12 shrink-0">
+                <div class="text-base font-semibold leading-none">
+                  {{ dayLabel(r.refuel_time) }}
+                </div>
+                <div class="text-[10px] text-ink-soft mt-0.5">周{{ weekday(r.refuel_time) }}</div>
+              </div>
+              <div class="min-w-0 flex-1">
+                <div class="text-sm font-medium truncate">
+                  {{ r.station_name || '未填写加油站' }}
+                </div>
+                <div class="text-xs text-ink-soft mt-0.5">
+                  {{ fmtLiters(r.liters) }} ·
+                  {{ fmtAmount(r.total_amount) }} ·
+                  {{ fmtPrice(r.price_per_liter) }}
+                  <NTag
+                    v-if="r.is_full"
+                    size="tiny"
+                    type="success"
+                    class="!ml-1 align-middle"
+                  >
+                    加满
+                  </NTag>
+                </div>
+              </div>
+              <NPopconfirm @positive-click="remove(r)">
+                <template #trigger>
+                  <NButton size="tiny" quaternary type="error">删</NButton>
+                </template>
+                删除这笔?
+              </NPopconfirm>
+            </div>
+          </div>
+        </NCard>
       </div>
-    </NEmpty>
+    </NSpin>
   </div>
 </template>