root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重构用户设置页面，优化布局和组件结构

Browse Source
This commit is contained in:
Seven
2025-12-28 18:19:56 +07:00
parent 51feb991b8
commit d2c438f3d4
3 changed files with 275 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/views/user-settings/index.vue
View File

@@ -49,86 +49,95 @@ function handleCopyUid() {
</script>
<template>
<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-page>
<ion-header>
<ion-toolbar class="ui-toolbar">
<ui-back-button slot="start" />
<ion-title>用户设置</ion-title>
</ion-toolbar>
</ion-header>
<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 />
</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>
</ion-item>
<!-- username -->
<!-- <ion-item button @click="router.push('/user/settings/username')">
</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 />
</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">
用户名
</div>
</div>
<div class="end">
{{ userStore.state.session?.username }}
</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">
{{ userStore.state.session?.username }}
{{ userProfile?.nickname }}
</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 }}
</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>
</div>
</ion-item>
<!-- password -->
<!-- <ion-item button @click="router.push('/user/settings/password')">
</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>
</div>
</ion-item> -->
</ion-list>
</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">
修改密码
</div>
</div>
</div>
</ion-item> -->
</ion-list>
<!-- Action Buttons -->
<div class="mt-10">
<ion-button expand="block" color="tertiary" @click="handleSignOut">
Sign Out
</ion-button>
</div>
</ion-content>
<!-- Action Buttons -->
<div class="mt-10">
<ion-button expand="block" color="tertiary" @click="handleSignOut">
Sign Out
</ion-button>
</div>
</ion-content>
</ion-page>
</template>
<style lang='css' scoped>