feat: 添加性别枚举，更新用户设置页面以支持性别选择和生日选择功能

src/api/enum.ts

@@ -19,3 +19,9 @@ export enum ChainEnum {
   ERC20 = "ERC20",
   TRC20 = "TRC20",
 }
+
+export enum GenderEnum {
+  MALE = "male",
+  FEMALE = "female",
+  OTHER = "other",
+}

src/api/types.ts

@@ -18,4 +18,4 @@ export type WithdrawBody = Omit<Parameters<typeof client.api.withdraw.post>[0],
 
 export type UserProfileData = Treaty.Data<typeof client.api.user.profile.get>["userProfile"];
 
-export type UpdateUserProfileBody = Parameters<typeof client.api.user.profile.put>[0];
+export type UpdateUserProfileBody = NonNullable<Parameters<typeof client.api.user.profile.put>[0]>;

src/components/ui/form/index.vue

@@ -0,0 +1,9 @@
+<script lang='ts' setup>
+
+</script>
+
+<template>
+  hello world
+</template>
+
+<style lang='css' scoped></style>

src/views/user/settings.vue

@@ -3,6 +3,7 @@ import type { UpdateUserProfileBody, UserProfileData } from "@/api/types";
 import { alertController, toastController } from "@ionic/vue";
 import { arrowBackOutline } from "ionicons/icons";
 import { client } from "@/api";
+import { GenderEnum } from "@/api/enum";
 import { authClient } from "@/auth";
 
 const router = useRouter();
@@ -69,6 +70,14 @@ async function handleEditField(field: keyof UpdateUserProfileBody, label: string
   await alert.present();
 }
 
+async function onUpdateSelect(value: UpdateUserProfileBody["gender"]) {
+  await updateProfile({ gender: value } as UpdateUserProfileBody);
+}
+async function onChangeDateTime(event: CustomEvent) {
+  const selectedDate = useDateFormat(event.detail.value, "YYYY-MM-DD");
+  await updateProfile({ birthday: selectedDate.value } as UpdateUserProfileBody);
+}
+
 async function handleSignOut() {
   const alert = await alertController.create({
     header: "Sign Out",
@@ -133,48 +142,19 @@ onMounted(() => {
           </ion-label>
         </ion-item>
 
-        <ion-item button @click="handleEditField('gender', 'Gender')">
-          <ion-label>
-            <p class="text-xs text-text-400">
-              Gender
-            </p>
-            <h2 class="mt-1">
-              {{ userProfile?.gender || 'Not set' }}
-            </h2>
-          </ion-label>
+        <ion-item button>
+          <ion-select interface="action-sheet" toggle-icon="" label-placement="floating" :model-value="userProfile?.gender" label="Gender" placeholder="Select Gender" @update:model-value="onUpdateSelect">
+            <ion-select-option v-for="item in GenderEnum" :key="item" :value="item">
+              {{ item }}
+            </ion-select-option>
+          </ion-select>
         </ion-item>
 
-        <ion-item button @click="handleEditField('birthday', 'Birthday')">
-          <ion-label>
-            <p class="text-xs text-text-400">
-              Birthday
-            </p>
-            <h2 class="mt-1">
-              {{ userProfile?.birthday || 'Not set' }}
-            </h2>
-          </ion-label>
-        </ion-item>
-
-        <ion-item button @click="handleEditField('country', 'Country')">
-          <ion-label>
-            <p class="text-xs text-text-400">
-              Country
-            </p>
-            <h2 class="mt-1">
-              {{ userProfile?.country || 'Not set' }}
-            </h2>
-          </ion-label>
-        </ion-item>
-
-        <ion-item button @click="handleEditField('city', 'City')">
-          <ion-label>
-            <p class="text-xs text-text-400">
-              City
-            </p>
-            <h2 class="mt-1">
-              {{ userProfile?.city || 'Not set' }}
-            </h2>
-          </ion-label>
+        <ion-item button>
+          <ion-datetime-button datetime="datetime" color="primary" />
+          <ion-modal :keep-contents-mounted="true">
+            <ion-datetime id="datetime" :value="userProfile?.birthday" presentation="date" :prefer-wheel="true" @ion-change="onChangeDateTime" />
+          </ion-modal>
         </ion-item>
       </ion-list>
 
@@ -192,4 +172,24 @@ onMounted(() => {
 ion-avatar {
   --border-radius: 50%;
 }
+ion-item {
+  --min-height: 60px;
+}
+ion-datetime {
+  --background: rgb(255 255 255);
+  --background-rgb: 255, 255, 255;
+  --wheel-highlight-background: rgb(194 194 194);
+  --wheel-fade-background-rgb: 255, 255, 255;
+  border-radius: 16px;
+  overflow: hidden;
+}
+@media (prefers-color-scheme: dark) {
+  ion-datetime {
+    --background: rgb(15, 15, 15);
+    --background-rgb: 15, 15, 15;
+    --wheel-highlight-background: rgb(50, 50, 50);
+    --wheel-highlight-border-radius: 48px;
+    --wheel-fade-background-rgb: 15, 15, 15;
+  }
+}
 </style>