From 9cec8a7f66ba88df20c9b67659400205b9285783 Mon Sep 17 00:00:00 2001
From: kennethcheng <a1478925630@163.com>
Date: Sun, 13 Sep 2026 16:44:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E8=BD=A6=E8=BE=86=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5(=E5=88=97=E8=A1=A8=20+=20=E6=96=B0=E5=A2=9E/?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91/=E5=88=A0=E9=99=A4/=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

把 Vehicles 页从空壳升级成真业务:
- 卡片式列表,移动端单列、桌面端两列网格
- 每张卡片展示名称/默认标签/品牌+型号+车牌/能源类型/油箱/里程
- 操作:编辑 / 设为默认 / 删除(NPopconfirm 二次确认;走 NDialog.warning)
- 顶部「+ 添加」按钮,弹 NModal 表单
- 表单:名称必填、5 个可选字段、NSwitch 切默认
- 提交走 vehiclesApi.create/update,刷新 store
- 删除用 NDialog.warning(避免 Popconfirm 误触)
- Loading / Empty / Error 状态完整

新增/改动:
- src/components/VehicleFormModal.vue  NModal + NForm + NInput/NInputNumber/NSwitch
  * watch props.show / editing 重置表单
  * isEdit 复用同一份表单(create / update 双模式)
  * 内联 FuelSelect(简单 NSelect 包装)
  * useMessage 反馈成功/失败
- src/pages/Vehicles.vue  替换占位 Empty
  * onMounted 触发 store.loadList
  * openCreate / openEdit 控制 showForm + editing
  * onSaved 自动切到刚保存的车(UX:加完车立刻能进 Dashboard 看到统计)
  * setDefault -> store.setDefault
  * remove -> dialog.warning + store.remove
- src/stores/vehicle.ts  暴露 setCurrentId(id) 给 UI 切换当前车

未做(留待后续):
- 搜索 / 排序 / 分页:单车辆量 < 100,前两版没必要
- 列表项的「最近一次加油」摘要:留给 Dashboard 拿

验证:
  pnpm typecheck   0 errors
  pnpm build       12.5s,dist 重新生成,Dashboard / Vehicles 各自分 chunk
---
 .../src/components/VehicleFormModal.vue       | 231 ++++++++++++++++++
 fuellog-web/src/pages/Vehicles.vue            | 133 +++++++++-
 fuellog-web/src/stores/vehicle.ts             |   5 +
 3 files changed, 363 insertions(+), 6 deletions(-)
 create mode 100644 fuellog-web/src/components/VehicleFormModal.vue

diff --git a/fuellog-web/src/components/VehicleFormModal.vue b/fuellog-web/src/components/VehicleFormModal.vue
new file mode 100644
index 0000000..9788fbe
--- /dev/null
+++ b/fuellog-web/src/components/VehicleFormModal.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NInput,
+  NInputNumber,
+  NModal,
+  NSpace,
+  NSwitch,
+  useMessage,
+} from 'naive-ui'
+import { vehiclesApi } from '@/api/vehicles'
+import type { Vehicle, VehicleCreate } from '@/api/types'
+
+interface Props {
+  show: boolean
+  editing?: Vehicle | null
+}
+const props = withDefaults(defineProps<Props>(), { editing: null })
+const emit = defineEmits<{
+  'update:show': [v: boolean]
+  saved: [v: Vehicle]
+}>()
+
+const message = useMessage()
+const submitting = ref(false)
+const formRef = ref<InstanceType<typeof NForm> | null>(null)
+
+const form = reactive<VehicleCreate>({
+  name: '',
+  brand: '',
+  model: '',
+  plate_number: '',
+  fuel_type: 'gasoline',
+  tank_capacity: undefined,
+  current_odometer: undefined,
+  default_vehicle: false,
+})
+
+const FUEL_OPTIONS = [
+  { label: '汽油', value: 'gasoline' },
+  { label: '柴油', value: 'diesel' },
+  { label: '混动', value: 'hybrid' },
+  { label: '纯电', value: 'electric' },
+  { label: '插混', value: 'plug_in_hybrid' },
+]
+
+const isEdit = computed(() => !!props.editing)
+
+watch(
+  () => [props.show, props.editing],
+  () => {
+    if (!props.show) return
+    if (props.editing) {
+      const v = props.editing
+      form.name = v.name
+      form.brand = v.brand
+      form.model = v.model
+      form.plate_number = v.plate_number
+      form.fuel_type = v.fuel_type
+      form.tank_capacity = v.tank_capacity || undefined
+      form.current_odometer = v.current_odometer || undefined
+      form.default_vehicle = v.default_vehicle
+    } else {
+      form.name = ''
+      form.brand = ''
+      form.model = ''
+      form.plate_number = ''
+      form.fuel_type = 'gasoline'
+      form.tank_capacity = undefined
+      form.current_odometer = undefined
+      form.default_vehicle = false
+    }
+  },
+  { immediate: true },
+)
+
+async function onSubmit() {
+  if (submitting.value) return
+  if (!form.name.trim()) {
+    message.warning('请填写车辆名称')
+    return
+  }
+  if (!form.fuel_type.trim()) {
+    message.warning('请选择能源类型')
+    return
+  }
+  submitting.value = true
+  try {
+    let v: Vehicle
+    if (isEdit.value && props.editing) {
+      v = await vehiclesApi.update(props.editing.id, {
+        name: form.name,
+        brand: form.brand,
+        model: form.model,
+        plate_number: form.plate_number,
+        fuel_type: form.fuel_type,
+        tank_capacity: form.tank_capacity,
+        current_odometer: form.current_odometer,
+        default_vehicle: form.default_vehicle,
+      })
+      message.success('已保存')
+    } else {
+      v = await vehiclesApi.create({
+        name: form.name,
+        brand: form.brand,
+        model: form.model,
+        plate_number: form.plate_number,
+        fuel_type: form.fuel_type,
+        tank_capacity: form.tank_capacity,
+        current_odometer: form.current_odometer,
+        default_vehicle: form.default_vehicle,
+      })
+      message.success('已添加')
+    }
+    emit('saved', v)
+    emit('update:show', false)
+  } catch (err) {
+    message.error((err as Error).message || '保存失败')
+  } finally {
+    submitting.value = false
+  }
+}
+
+function onCancel() {
+  emit('update:show', false)
+}
+</script>
+
+<template>
+  <NModal
+    :show="show"
+    :mask-closable="!submitting"
+    preset="card"
+    :title="isEdit ? '编辑车辆' : '添加车辆'"
+    style="max-width: 520px"
+    @update:show="(v: boolean) => emit('update:show', v)"
+  >
+    <NForm ref="formRef" label-placement="top" :model="form">
+      <NFormItem label="名称" required>
+        <NInput v-model:value="form.name" placeholder="例如:我的夏" maxlength="64" show-count />
+      </NFormItem>
+
+      <div class="grid grid-cols-2 gap-3">
+        <NFormItem label="品牌">
+          <NInput v-model:value="form.brand" placeholder="比亚迪" maxlength="64" />
+        </NFormItem>
+        <NFormItem label="型号">
+          <NInput v-model:value="form.model" placeholder="秦 PLUS DM-i" maxlength="64" />
+        </NFormItem>
+      </div>
+
+      <NFormItem label="车牌号">
+        <NInput v-model:value="form.plate_number" placeholder="京A12345" maxlength="32" />
+      </NFormItem>
+
+      <div class="grid grid-cols-2 gap-3">
+        <NFormItem label="能源类型" required>
+          <FuelSelect v-model="form.fuel_type" />
+        </NFormItem>
+        <NFormItem label="油箱容量(L)">
+          <NInputNumber
+            v-model:value="form.tank_capacity"
+            :min="0"
+            :max="9999"
+            placeholder="48"
+            class="w-full"
+          />
+        </NFormItem>
+      </div>
+
+      <NFormItem label="当前里程(km)">
+        <NInputNumber
+          v-model:value="form.current_odometer"
+          :min="0"
+          :precision="1"
+          placeholder="10000"
+          class="w-full"
+        />
+      </NFormItem>
+
+      <NFormItem label="设为默认车辆">
+        <NSwitch v-model:value="form.default_vehicle" />
+      </NFormItem>
+    </NForm>
+
+    <template #footer>
+      <NSpace justify="end">
+        <NButton :disabled="submitting" @click="onCancel">取消</NButton>
+        <NButton type="primary" :loading="submitting" @click="onSubmit">
+          {{ isEdit ? '保存' : '添加' }}
+        </NButton>
+      </NSpace>
+    </template>
+  </NModal>
+</template>
+
+<script lang="ts">
+// 能源类型下拉:内联写简单版,避免 NSelect + auto-import 反复来回
+import { defineComponent, h, type PropType } from 'vue'
+import { NSelect } from 'naive-ui'
+
+const FUEL_OPTIONS = [
+  { label: '汽油', value: 'gasoline' },
+  { label: '柴油', value: 'diesel' },
+  { label: '混动', value: 'hybrid' },
+  { label: '纯电', value: 'electric' },
+  { label: '插混', value: 'plug_in_hybrid' },
+]
+
+export const FuelSelect = defineComponent({
+  name: 'FuelSelect',
+  props: {
+    modelValue: { type: String, default: 'gasoline' },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    return () =>
+      h(
+        NSelect,
+        {
+          value: props.modelValue,
+          options: FUEL_OPTIONS,
+          'onUpdate:value': (v: string) => emit('update:modelValue', v),
+        },
+      )
+  },
+})
+</script>
diff --git a/fuellog-web/src/pages/Vehicles.vue b/fuellog-web/src/pages/Vehicles.vue
index 90c57e1..3263ccc 100644
--- a/fuellog-web/src/pages/Vehicles.vue
+++ b/fuellog-web/src/pages/Vehicles.vue
@@ -1,13 +1,134 @@
 <script setup lang="ts">
-import { NEmpty } from 'naive-ui'
+import { onMounted, ref } from 'vue'
+import {
+  NButton,
+  NCard,
+  NEmpty,
+  NPopconfirm,
+  NSpin,
+  NTag,
+  useDialog,
+  useMessage,
+} from 'naive-ui'
+import { vehiclesApi } from '@/api/vehicles'
+import { useVehicleStore } from '@/stores/vehicle'
+import type { Vehicle } from '@/api/types'
+import VehicleFormModal from '@/components/VehicleFormModal.vue'
+
+const store = useVehicleStore()
+const message = useMessage()
+const dialog = useDialog()
+const showForm = ref(false)
+const editing = ref<Vehicle | null>(null)
+
+onMounted(() => store.loadList())
+
+function openCreate() {
+  editing.value = null
+  showForm.value = true
+}
+
+function openEdit(v: Vehicle) {
+  editing.value = v
+  showForm.value = true
+}
+
+async function onSaved(v: Vehicle) {
+  await store.loadList()
+  store.setCurrentId(v.id)
+}
+
+async function setDefault(v: Vehicle) {
+  try {
+    await store.setDefault(v.id)
+    message.success('已设为默认车辆')
+  } catch (err) {
+    message.error((err as Error).message || '设置失败')
+  }
+}
+
+async function remove(v: Vehicle) {
+  dialog.warning({
+    title: '确认删除',
+    content: `车辆「${v.name}」删除后无法恢复,确定吗?`,
+    positiveText: '删除',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      try {
+        await store.remove(v.id)
+        message.success('已删除')
+      } catch (err) {
+        message.error((err as Error).message || '删除失败')
+      }
+    },
+  })
+}
 </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/POST/PUT/DELETE /api/vehicles;POST /api/vehicles/:id/default
+  <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="openCreate">＋ 添加</NButton>
+    </div>
+
+    <NSpin :show="store.loading">
+      <NEmpty
+        v-if="!store.loading && !store.list.length"
+        description="还没有车辆,点右上角加一辆"
+      />
+
+      <div v-else class="grid gap-3 sm:grid-cols-2">
+        <NCard
+          v-for="v in store.list"
+          :key="v.id"
+          hoverable
+          class="!rounded-2xl"
+        >
+          <div class="flex items-start justify-between gap-2">
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2">
+                <span class="text-lg font-semibold truncate">{{ v.name }}</span>
+                <NTag v-if="v.default_vehicle" type="success" size="small">默认</NTag>
+              </div>
+              <div class="text-sm text-ink-soft mt-1 truncate">
+                {{ v.brand || '—' }} {{ v.model }}
+                <span v-if="v.plate_number"> · {{ v.plate_number }}</span>
+              </div>
+              <div class="text-xs text-ink-soft mt-2 flex gap-3 flex-wrap">
+                <span>{{ v.fuel_type }}</span>
+                <span v-if="v.tank_capacity">油箱 {{ v.tank_capacity }} L</span>
+                <span v-if="v.current_odometer">{{ v.current_odometer }} km</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex gap-2 mt-3 flex-wrap">
+            <NButton size="small" @click="openEdit(v)">编辑</NButton>
+            <NButton
+              v-if="!v.default_vehicle"
+              size="small"
+              type="primary"
+              ghost
+              @click="setDefault(v)"
+            >
+              设为默认
+            </NButton>
+            <NPopconfirm
+              @positive-click="remove(v)"
+              positive-text="删除"
+              negative-text="取消"
+            >
+              <template #trigger>
+                <NButton size="small" type="error" ghost>删除</NButton>
+              </template>
+              确认删除「{{ v.name }}」?
+            </NPopconfirm>
+          </div>
+        </NCard>
       </div>
-    </NEmpty>
+    </NSpin>
+
+    <VehicleFormModal v-model:show="showForm" :editing="editing" @saved="onSaved" />
   </div>
 </template>
diff --git a/fuellog-web/src/stores/vehicle.ts b/fuellog-web/src/stores/vehicle.ts
index 57a6352..f303092 100644
--- a/fuellog-web/src/stores/vehicle.ts
+++ b/fuellog-web/src/stores/vehicle.ts
@@ -54,12 +54,17 @@ export const useVehicleStore = defineStore('vehicle', () => {
     await loadList()
   }
 
+  function setCurrentId(id: number | null) {
+    currentId.value = id
+  }
+
   return {
     list,
     currentId,
     loading,
     loadList,
     getCurrent,
+    setCurrentId,
     create,
     update,
     remove,