feat: 更新用户设置界面,添加头部和返回按钮

This commit is contained in:
2025-12-25 19:09:15 +07:00
parent 28b53c5cb6
commit f9aad197c6
3 changed files with 60 additions and 67 deletions

View File

@@ -49,42 +49,30 @@ function handleCopyUid() {
</script>
<template>
<ion-page>
<ion-header>
<ion-toolbar class="ui-toolbar">
<ion-buttons slot="start">
<ion-button @click="$router.back()">
<ion-icon slot="icon-only" :icon="arrowBackOutline" />
</ion-button>
</ion-buttons>
<ion-title>用户设置</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true" class="ion-padding">
<div class="flex flex-col items-center justify-center py-5">
<div class="relative">
<ui-avatar class="size-25" />
</div>
<ion-content :fullscreen="true" class="ion-padding">
<div class="flex flex-col items-center justify-center py-5">
<div class="relative">
<ui-avatar class="size-25" />
</div>
</div>
<ion-list class="mt-5" lines="full">
<!-- uid -->
<ion-item>
<div class="flex justify-between w-full items-center">
<div class="flex-center space-x-2">
<div class="text-sm font-semibold">
UID
</div>
</div>
<div class="end" @click="handleCopyUid">
<div>{{ userProfile?.uid }}</div>
<TdesignCopy />
<ion-list class="mt-5" lines="full">
<!-- uid -->
<ion-item>
<div class="flex justify-between w-full items-center">
<div class="flex-center space-x-2">
<div class="text-sm font-semibold">
UID
</div>
</div>
</ion-item>
<!-- username -->
<!-- <ion-item button @click="router.push('/user/settings/username')">
<div class="end" @click="handleCopyUid">
<div>{{ userProfile?.uid }}</div>
<TdesignCopy />
</div>
</div>
</ion-item>
<!-- username -->
<!-- <ion-item button @click="router.push('/user/settings/username')">
<div class="flex justify-between w-full items-center">
<div class="flex-center space-x-2">
<div class="text-sm font-semibold">
@@ -96,34 +84,34 @@ function handleCopyUid() {
</div>
</div>
</ion-item> -->
<!-- nickname -->
<ion-item button @click="router.push('/user/settings/nickname')">
<div class="flex justify-between w-full items-center">
<div class="flex-center space-x-2">
<div class="text-sm font-semibold">
昵称
</div>
</div>
<div class="end">
{{ userProfile?.nickname }}
<!-- nickname -->
<ion-item button @click="router.push('/user/settings/nickname')">
<div class="flex justify-between w-full items-center">
<div class="flex-center space-x-2">
<div class="text-sm font-semibold">
昵称
</div>
</div>
</ion-item>
<!-- email -->
<ion-item button @click="router.push('/user/settings/email')">
<div class="flex justify-between w-full items-center">
<div class="flex-center space-x-2">
<div class="text-sm font-semibold">
邮箱
</div>
</div>
<div class="end">
{{ userProfile?.user?.email }}
<div class="end">
{{ userProfile?.nickname }}
</div>
</div>
</ion-item>
<!-- email -->
<ion-item button @click="router.push('/user/settings/email')">
<div class="flex justify-between w-full items-center">
<div class="flex-center space-x-2">
<div class="text-sm font-semibold">
邮箱
</div>
</div>
</ion-item>
<!-- password -->
<!-- <ion-item button @click="router.push('/user/settings/password')">
<div class="end">
{{ userProfile?.user?.email }}
</div>
</div>
</ion-item>
<!-- password -->
<!-- <ion-item button @click="router.push('/user/settings/password')">
<div class="flex justify-between w-full items-center">
<div class="flex-center space-x-2">
<div class="text-sm font-semibold">
@@ -132,16 +120,15 @@ function handleCopyUid() {
</div>
</div>
</ion-item> -->
</ion-list>
</ion-list>
<!-- Action Buttons -->
<div class="mt-10">
<ion-button expand="block" color="tertiary" @click="handleSignOut">
Sign Out
</ion-button>
</div>
</ion-content>
</ion-page>
<!-- Action Buttons -->
<div class="mt-10">
<ion-button expand="block" color="tertiary" @click="handleSignOut">
Sign Out
</ion-button>
</div>
</ion-content>
</template>
<style lang='css' scoped>