feat: 添加地址管理功能，创建地址列表和添加地址页面，集成表单验证和状态管理

components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     Empty: typeof import('./src/components/empty.vue')['default']
     IonApp: typeof import('@ionic/vue')['IonApp']
     IonAvatar: typeof import('@ionic/vue')['IonAvatar']
+    IonBadge: typeof import('@ionic/vue')['IonBadge']
     IonButton: typeof import('@ionic/vue')['IonButton']
     IonButtons: typeof import('@ionic/vue')['IonButtons']
     IonCheckbox: typeof import('@ionic/vue')['IonCheckbox']
@@ -35,7 +36,9 @@ declare module 'vue' {
     IonTabBar: typeof import('@ionic/vue')['IonTabBar']
     IonTabButton: typeof import('@ionic/vue')['IonTabButton']
     IonTabs: typeof import('@ionic/vue')['IonTabs']
+    IonTextarea: typeof import('@ionic/vue')['IonTextarea']
     IonTitle: typeof import('@ionic/vue')['IonTitle']
+    IonToggle: typeof import('@ionic/vue')['IonToggle']
     IonToolbar: typeof import('@ionic/vue')['IonToolbar']
     LayoutDefault: typeof import('./src/components/layout/default.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
@@ -49,6 +52,7 @@ declare global {
   const Empty: typeof import('./src/components/empty.vue')['default']
   const IonApp: typeof import('@ionic/vue')['IonApp']
   const IonAvatar: typeof import('@ionic/vue')['IonAvatar']
+  const IonBadge: typeof import('@ionic/vue')['IonBadge']
   const IonButton: typeof import('@ionic/vue')['IonButton']
   const IonButtons: typeof import('@ionic/vue')['IonButtons']
   const IonCheckbox: typeof import('@ionic/vue')['IonCheckbox']
@@ -68,7 +72,9 @@ declare global {
   const IonTabBar: typeof import('@ionic/vue')['IonTabBar']
   const IonTabButton: typeof import('@ionic/vue')['IonTabButton']
   const IonTabs: typeof import('@ionic/vue')['IonTabs']
+  const IonTextarea: typeof import('@ionic/vue')['IonTextarea']
   const IonTitle: typeof import('@ionic/vue')['IonTitle']
+  const IonToggle: typeof import('@ionic/vue')['IonToggle']
   const IonToolbar: typeof import('@ionic/vue')['IonToolbar']
   const LayoutDefault: typeof import('./src/components/layout/default.vue')['default']
   const RouterLink: typeof import('vue-router')['RouterLink']

src/router/index.ts

@@ -59,6 +59,16 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("@/views/real_name/index.vue"),
     meta: { requiresAuth: true },
   },
+  {
+    path: "/address",
+    component: () => import("@/views/address/index.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/address/add",
+    component: () => import("@/views/address/add.vue"),
+    meta: { requiresAuth: true },
+  },
 ];
 
 const router = createRouter({

src/views/address/add.vue

@@ -0,0 +1,265 @@
+<script lang='ts' setup>
+import { toastController } from "@ionic/vue";
+import { callOutline, locationOutline, personOutline } from "ionicons/icons";
+import zod from "zod";
+
+const router = useRouter();
+const route = useRoute();
+
+const formData = ref({
+  name: "",
+  phone: "",
+  address: "",
+  isDefault: false,
+});
+
+const isSubmitting = ref(false);
+const isEditMode = computed(() => !!route.query.id);
+
+// 表单验证 Schema
+const AddressSchema = zod.object({
+  name: zod
+    .string()
+    .min(2, "请输入收货人姓名")
+    .max(20, "姓名长度不能超过20个字符"),
+
+  phone: zod
+    .string()
+    .min(1, "请输入手机号")
+    .regex(/^1[3-9]\d{9}$/, "请输入正确的手机号码"),
+
+  address: zod
+    .string()
+    .min(5, "请输入详细地址")
+    .max(200, "地址长度不能超过200个字符"),
+});
+
+async function showToast(message: string, color: "success" | "danger" | "warning" = "danger") {
+  const toast = await toastController.create({
+    message,
+    duration: 2000,
+    position: "top",
+    color,
+  });
+  await toast.present();
+}
+
+// 如果是编辑模式，加载地址数据
+onMounted(() => {
+  if (isEditMode.value) {
+    // TODO: 根据 route.query.id 加载地址数据
+    // 模拟数据
+    formData.value = {
+      name: "张三",
+      phone: "13800138000",
+      address: "北京市朝阳区建国路88号SOHO现代城A座1001室",
+      isDefault: true,
+    };
+  }
+});
+
+async function handleSubmit() {
+  const result = AddressSchema.safeParse(formData.value);
+  if (!result.success) {
+    const first = result.error.issues[0];
+    await showToast(first.message);
+    return;
+  }
+
+  isSubmitting.value = true;
+  try {
+    // TODO: 调用添加/编辑地址 API
+    // if (isEditMode.value) {
+    //   const { data } = await safeClient(client.api.address[route.query.id].put(formData.value));
+    // } else {
+    //   const { data } = await safeClient(client.api.address.post(formData.value));
+    // }
+
+    // 模拟 API 调用
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    await showToast(isEditMode.value ? "地址修改成功" : "地址添加成功", "success");
+    router.back();
+  }
+  catch (error) {
+    await showToast("操作失败，请重试", "danger");
+  }
+  finally {
+    isSubmitting.value = false;
+  }
+}
+</script>
+
+<template>
+  <ion-page>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ion-toolbar">
+        <ion-buttons slot="start">
+          <back-button />
+        </ion-buttons>
+        <ion-title>{{ isEditMode ? '编辑地址' : '添加地址' }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <div class="space-y-5">
+        <!-- 提示信息 -->
+        <div class="info-card">
+          <ion-icon :icon="locationOutline" class="text-2xl text-[#c41e3a]" />
+          <div class="text-sm text-[#666] leading-relaxed">
+            请填写准确的收货地址信息，以便我们为您提供更好的配送服务。
+          </div>
+        </div>
+
+        <!-- 表单卡片 -->
+        <div class="form-card">
+          <div class="space-y-4">
+            <!-- 收货人姓名 -->
+            <div class="form-item">
+              <div class="flex items-center gap-2 mb-2">
+                <ion-icon :icon="personOutline" class="text-lg text-primary" />
+                <label class="form-label">收货人姓名</label>
+              </div>
+              <ion-item lines="none" class="input-item">
+                <ion-input
+                  v-model="formData.name"
+                  type="text"
+                  placeholder="请输入收货人姓名"
+                  class="custom-input"
+                  :maxlength="20"
+                />
+              </ion-item>
+            </div>
+
+            <!-- 手机号码 -->
+            <div class="form-item">
+              <div class="flex items-center gap-2 mb-2">
+                <ion-icon :icon="callOutline" class="text-lg text-primary" />
+                <label class="form-label">手机号码</label>
+              </div>
+              <ion-item lines="none" class="input-item">
+                <ion-input
+                  v-model="formData.phone"
+                  type="tel"
+                  placeholder="请输入手机号码"
+                  class="custom-input"
+                  :maxlength="11"
+                />
+              </ion-item>
+            </div>
+
+            <!-- 详细地址 -->
+            <div class="form-item">
+              <div class="flex items-center gap-2 mb-2">
+                <ion-icon :icon="locationOutline" class="text-lg text-primary" />
+                <label class="form-label">详细地址</label>
+              </div>
+              <ion-item lines="none" class="input-item textarea-item">
+                <ion-textarea
+                  v-model="formData.address"
+                  placeholder="请输入详细地址（省市区街道门牌号等）"
+                  class="custom-textarea"
+                  :rows="4"
+                  :maxlength="200"
+                  auto-grow
+                />
+              </ion-item>
+            </div>
+
+            <!-- 设为默认地址 -->
+            <div class="form-item">
+              <div class="flex items-center justify-between">
+                <label class="form-label">设为默认地址</label>
+                <ion-toggle v-model="formData.isDefault" color="danger" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 提交按钮 -->
+        <ion-button
+          expand="block"
+          class="submit-button"
+          :disabled="isSubmitting"
+          @click="handleSubmit"
+        >
+          <ion-spinner v-if="isSubmitting" name="crescent" />
+          <span v-else>{{ isEditMode ? '保存修改' : '保存地址' }}</span>
+        </ion-button>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped>
+.info-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
+  border-radius: 12px;
+  border: 1px solid #ffe0e0;
+}
+
+.form-card {
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+.form-item {
+  margin-bottom: 20px;
+}
+
+.form-item:last-child {
+  margin-bottom: 0;
+}
+
+.form-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+}
+
+.input-item {
+  --background: #f7f8fa;
+  --border-radius: 12px;
+  --padding-start: 16px;
+  --padding-end: 16px;
+  --min-height: 48px;
+}
+
+.textarea-item {
+  --min-height: auto;
+  --padding-top: 12px;
+  --padding-bottom: 12px;
+}
+
+.custom-input {
+  --placeholder-color: #999;
+  --placeholder-opacity: 1;
+  font-size: 15px;
+}
+
+.custom-textarea {
+  --placeholder-color: #999;
+  --placeholder-opacity: 1;
+  font-size: 15px;
+  min-height: 100px;
+}
+
+.submit-button {
+  --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  --background-activated: linear-gradient(135deg, #8b1a2e 0%, #c41e3a 100%);
+  --border-radius: 12px;
+  --padding-top: 14px;
+  --padding-bottom: 14px;
+  font-weight: 600;
+  font-size: 16px;
+  margin-top: 8px;
+  text-transform: none;
+  letter-spacing: 0.5px;
+}
+</style>

src/views/address/index.vue

@@ -0,0 +1,299 @@
+<script lang='ts' setup>
+import { alertController, toastController } from "@ionic/vue";
+import { addOutline, callOutline, checkmarkCircleOutline, createOutline, locationOutline, trashOutline } from "ionicons/icons";
+
+const router = useRouter();
+
+interface Address {
+  id: number;
+  name: string;
+  phone: string;
+  address: string;
+  isDefault: boolean;
+}
+
+const addresses = ref<Address[]>([
+  {
+    id: 1,
+    name: "张三",
+    phone: "13800138000",
+    address: "北京市朝阳区建国路88号SOHO现代城A座1001室",
+    isDefault: true,
+  },
+  {
+    id: 2,
+    name: "李四",
+    phone: "13900139000",
+    address: "上海市浦东新区世纪大道1号东方明珠广播电视塔",
+    isDefault: false,
+  },
+]);
+
+async function showToast(message: string, color: "success" | "danger" | "warning" = "success") {
+  const toast = await toastController.create({
+    message,
+    duration: 2000,
+    position: "top",
+    color,
+  });
+  await toast.present();
+}
+
+function handleAdd() {
+  router.push("/address/add");
+}
+
+function handleEdit(address: Address) {
+  // TODO: 跳转到编辑页面并传递地址ID
+  router.push(`/address/add?id=${address.id}`);
+}
+
+async function handleSetDefault(address: Address) {
+  if (address.isDefault) {
+    return;
+  }
+
+  // 取消所有默认地址
+  addresses.value.forEach((item) => {
+    item.isDefault = false;
+  });
+
+  // 设置当前地址为默认
+  address.isDefault = true;
+
+  // TODO: 调用 API 更新默认地址
+  await showToast("已设为默认地址");
+}
+
+async function handleDelete(address: Address) {
+  const alert = await alertController.create({
+    header: "确认删除",
+    message: `确定要删除"${address.name}"的收货地址吗？`,
+    buttons: [
+      {
+        text: "取消",
+        role: "cancel",
+      },
+      {
+        text: "删除",
+        role: "destructive",
+        handler: async () => {
+          // 如果删除的是默认地址，需要先设置其他地址为默认
+          if (address.isDefault && addresses.value.length > 1) {
+            const otherAddress = addresses.value.find(item => item.id !== address.id);
+            if (otherAddress) {
+              otherAddress.isDefault = true;
+            }
+          }
+
+          // 删除地址
+          const index = addresses.value.findIndex(item => item.id === address.id);
+          if (index > -1) {
+            addresses.value.splice(index, 1);
+          }
+
+          // TODO: 调用 API 删除地址
+          await showToast("删除成功");
+        },
+      },
+    ],
+  });
+
+  await alert.present();
+}
+</script>
+
+<template>
+  <ion-page>
+    <ion-header class="ion-no-border">
+      <ion-toolbar class="ion-toolbar">
+        <ion-buttons slot="start">
+          <back-button />
+        </ion-buttons>
+        <ion-title>收货地址</ion-title>
+        <ion-buttons slot="end">
+          <ion-button @click="handleAdd">
+            <ion-icon slot="icon-only" :icon="addOutline" />
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <div v-if="addresses.length > 0" class="ion-padding">
+        <div class="space-y-3">
+          <div
+            v-for="address in addresses"
+            :key="address.id"
+            class="address-card"
+          >
+            <!-- 地址信息 -->
+            <div class="address-info">
+              <div class="flex items-center justify-between mb-3">
+                <div class="flex items-center gap-2">
+                  <ion-icon :icon="locationOutline" class="text-xl text-primary" />
+                  <span class="name">{{ address.name }}</span>
+                  <span class="phone">{{ address.phone }}</span>
+                </div>
+                <ion-badge v-if="address.isDefault" color="danger" class="default-badge">
+                  默认
+                </ion-badge>
+              </div>
+
+              <div class="address-text">
+                {{ address.address }}
+              </div>
+            </div>
+
+            <!-- 操作按钮 -->
+            <div class="address-actions">
+              <ion-button
+                fill="clear"
+                size="small"
+                @click="handleSetDefault(address)"
+              >
+                <ion-icon slot="start" :icon="checkmarkCircleOutline" />
+                {{ address.isDefault ? '默认地址' : '设为默认' }}
+              </ion-button>
+
+              <div class="flex gap-2">
+                <ion-button
+                  fill="clear"
+                  size="small"
+                  color="medium"
+                  @click="handleEdit(address)"
+                >
+                  <ion-icon slot="start" :icon="createOutline" />
+                  编辑
+                </ion-button>
+
+                <ion-button
+                  fill="clear"
+                  size="small"
+                  color="danger"
+                  @click="handleDelete(address)"
+                >
+                  <ion-icon slot="start" :icon="trashOutline" />
+                  删除
+                </ion-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else class="empty-state">
+        <empty title="暂无收货地址">
+          <template #icon>
+            <ion-icon :icon="locationOutline" class="empty-icon" />
+          </template>
+          <template #extra>
+            <ion-button class="add-button" @click="handleAdd">
+              <ion-icon slot="start" :icon="addOutline" />
+              添加收货地址
+            </ion-button>
+          </template>
+        </empty>
+      </div>
+
+      <!-- 底部添加按钮 -->
+      <div v-if="addresses.length > 0" class="fixed-bottom">
+        <ion-button expand="block" class="add-button" @click="handleAdd">
+          <ion-icon slot="start" :icon="addOutline" />
+          添加新地址
+        </ion-button>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped>
+.address-card {
+  background: white;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+.address-info {
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 12px;
+}
+
+.name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.phone {
+  font-size: 14px;
+  color: #666;
+}
+
+.default-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+}
+
+.address-text {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+  margin-top: 8px;
+}
+
+.address-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.address-actions ion-button {
+  --padding-start: 8px;
+  --padding-end: 8px;
+  font-size: 13px;
+  text-transform: none;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  padding: 40px 20px;
+}
+
+.empty-icon {
+  font-size: 80px;
+  color: #ddd;
+}
+
+.add-button {
+  --background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
+  --background-activated: linear-gradient(135deg, #8b1a2e 0%, #c41e3a 100%);
+  --border-radius: 12px;
+  --padding-top: 14px;
+  --padding-bottom: 14px;
+  font-weight: 600;
+  font-size: 15px;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  margin-top: 12px;
+}
+
+.fixed-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 12px 16px;
+  background: white;
+  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
+  z-index: 10;
+  padding-bottom: calc(12px + var(--ion-safe-area-bottom));
+}
+</style>