riwa-ionic/src/views/user-settings/index.vue

<script lang='ts' setup>
import { alertController, toastController } from "@ionic/vue";
import { arrowBackOutline } from "ionicons/icons";
import TdesignCopy from "~icons/tdesign/copy";
import { authClient } from "@/auth";

const router = useRouter();
const userStore = useUserStore();
const { userProfile } = storeToRefs(userStore);

async function handleSignOut() {
  const alert = await alertController.create({
    header: "Sign Out",
    message: "Are you sure you want to sign out?",
    buttons: [
      {
        text: "Cancel",
        role: "cancel",
      },
      {
        text: "Sign Out",
        role: "destructive",
        handler: async () => {
          userStore.signOut();
          authClient.signOut();
          router.replace("/layout/riwa");
        },
      },
    ],
  });

  await alert.present();
}

const { writeText } = useClipboard();

function handleCopyUid() {
  if (userProfile.value?.uid) {
    writeText(userProfile.value.uid);
    toastController
      .create({
        message: "UID copied to clipboard",
        duration: 2000,
        position: "bottom",
      })
      .then(toast => toast.present());
  }
}
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" />
        <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>
      </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">
              {{ 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')">
            <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>
  </ion-page>
</template>

<style lang='css' scoped>
@reference "tailwindcss";

ion-avatar {
  --border-radius: 50%;
}
ion-item {
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 6px;
  --padding-bottom: 6px;
  border-radius: 0.25rem;
}

.end {
  @apply text-sm text-(--ion-text-color-step-100) flex items-center space-x-2;
}

.icon {
  @apply bg-[#1c1c1c] text-white;
}

.icon {
  @apply rounded-lg p-2 w-7 h-7 flex items-center justify-center;
}
</style>