From 4e8e15f18398422d6864c674a6d7ec139ce3be37 Mon Sep 17 00:00:00 2001
From: Timothy Yin <master@uniiem.com>
Date: Mon, 20 Jan 2025 00:58:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(profile):=20=E6=B7=BB=E5=8A=A0=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=BA=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E5=8F=8A=E8=B5=84?=
 =?UTF-8?q?=E6=96=99=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/profile.vue | 333 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 333 insertions(+)
 create mode 100644 pages/profile.vue

diff --git a/pages/profile.vue b/pages/profile.vue
new file mode 100644
index 0000000..6d44259
--- /dev/null
+++ b/pages/profile.vue
@@ -0,0 +1,333 @@
+<script lang="ts" setup>
+import { number, object, string, ref as yref, type InferType } from 'yup'
+import type { FormSubmitEvent } from '#ui/types'
+
+const toast = useToast()
+const route = useRoute()
+const router = useRouter()
+const loginState = useLoginState()
+
+const tabs = [
+  {
+    slot: 'info',
+    label: '基本资料',
+    icon: 'tabler:user-square-rounded',
+  },
+  {
+    slot: 'security',
+    label: '账号安全',
+    icon: 'tabler:shield-half-filled',
+  },
+]
+
+const currentTab = computed({
+  get() {
+    const index = tabs.findIndex((item) => item.slot === route.query.tab)
+    if (index === -1) {
+      return 0
+    }
+
+    return index
+  },
+  set(value) {
+    // Hash is specified here to prevent the page from scrolling to the top
+    router.replace({
+      query: { tab: tabs[value].slot },
+    })
+  },
+})
+
+const editProfileSchema = object({
+  nickname: string(),
+  email: string().notRequired().email('请输入正确的邮箱地址'),
+  sex: number().required('请选择性别'),
+  company: string().required('请输入公司名称'),
+})
+
+type EditProfileSchema = InferType<typeof editProfileSchema>
+
+const editProfileState = reactive({
+  nickname: loginState.user?.nickname || '',
+  email: loginState.user?.email || '',
+  sex: loginState.user.sex || 0,
+  company: loginState.user?.company || '',
+})
+
+const isEditProfileModified = ref(false)
+
+const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
+  useFetchWrapped<Partial<UserSchema> & AuthedRequest, BaseResponse<{}>>(
+    'App.User_User.EditProfile',
+    {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      ...(event.data as UserSchema),
+    }
+  )
+    .then((res) => {
+      if (res.ret === 200) {
+        toast.add({
+          title: '个人资料已更新',
+          description: '您的个人资料已更新成功',
+          color: 'green',
+        })
+        loginState.updateProfile()
+        isEditProfileModified.value = false
+      } else {
+        toast.add({
+          title: '更新失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+        })
+      }
+    })
+    .catch((err) => {
+      toast.add({
+        title: '更新失败',
+        description: err.message || '未知错误',
+        color: 'red',
+      })
+    })
+}
+
+const changePasswordState = reactive({
+  old_password: '',
+  new_password: '',
+  confirm_password: '',
+})
+
+const changePasswordSchema = object({
+  old_password: string().required('请输入旧密码'),
+  new_password: string().required('请输入新密码').min(6, '密码长度至少为6位'),
+  confirm_password: string()
+    .required('请再次输入新密码')
+    .oneOf([yref('new_password')], '两次输入的密码不一致'),
+})
+
+type ChangePasswordSchema = InferType<typeof changePasswordSchema>
+
+const onChangePasswordSubmit = (
+  event: FormSubmitEvent<ChangePasswordSchema>
+) => {
+  useFetchWrapped<req.user.ChangePassword & AuthedRequest, BaseResponse<{}>>(
+    'App.User_User.ChangePassword',
+    {
+      token: loginState.token!,
+      user_id: loginState.user.id,
+      username: loginState.user.username,
+      old_password: event.data.old_password,
+      new_password: event.data.new_password,
+    }
+  )
+    .then((res) => {
+      if (res.ret === 200) {
+        toast.add({
+          title: '密码已修改',
+          description: '请重新登录',
+          color: 'green',
+        })
+        setTimeout(() => {
+          loginState.logout()
+          window.location.reload()
+        }, 2000)
+      } else {
+        toast.add({
+          title: '修改密码失败',
+          description: res.msg || '未知错误',
+          color: 'red',
+        })
+      }
+    })
+    .catch((err) => {
+      toast.add({
+        title: '修改密码失败',
+        description: err.message || '未知错误',
+        color: 'red',
+      })
+    })
+}
+</script>
+
+<template>
+  <LoginNeededContent
+    content-class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0"
+  >
+    <div class="container max-w-[1280px] mx-auto pt-12 flex flex-col gap-12">
+      <h1 class="text-2xl font-medium inline-flex items-center gap-2">
+        <UIcon
+          name="line-md:person"
+          class="text-3xl"
+        />
+        <span>个人中心</span>
+      </h1>
+      <div class="flex flex-col gap-12">
+        <div class="flex items-center gap-4 px-1">
+          <UAvatar
+            size="xl"
+            icon="tabler:user"
+            :src="loginState.user?.avatar"
+            :alt="loginState.user?.nickname || loginState.user?.username"
+            :ui="{
+              rounded: 'rounded-xl',
+              size: {
+                huge: 'w-48 h-48 text-4xl',
+              },
+            }"
+          />
+          <div>
+            <h2 class="text-xl font-medium">
+              {{ loginState.user?.username }}
+              <span
+                v-if="loginState.user?.nickname"
+                class="text-neutral-500 dark:text-neutral-400"
+              >
+                ({{ loginState.user?.nickname }})
+              </span>
+            </h2>
+            <p class="text-sm text-neutral-500 dark:text-neutral-400">
+              {{ loginState.user?.company || '未填写公司' }}
+            </p>
+          </div>
+        </div>
+        <div>
+          <UTabs
+            v-model="currentTab"
+            :items="tabs"
+            orientation="vertical"
+            :ui="{
+              wrapper:
+                'w-full flex flex-col sm:flex-row items-start gap-4 sm:gap-16',
+              list: {
+                width: 'w-full sm:w-48 h-fit',
+                background: 'bg-transparent',
+                tab: { active: 'bg-neutral-100 dark:bg-neutral-700' },
+              },
+            }"
+          >
+            <template #info>
+              <div class="tab-content space-y-4">
+                <UForm
+                  class="max-w-96 space-y-6"
+                  :state="editProfileState"
+                  :schema="editProfileSchema"
+                  @submit="onEditProfileSubmit"
+                  @change="isEditProfileModified = true"
+                >
+                  <UFormGroup
+                    name="username"
+                    label="账户名"
+                  >
+                    <p class="text-sm text-neutral-500 dark:text-neutral-400">
+                      {{ loginState.user?.username }}
+                    </p>
+                    <!-- <UInput v-model="editProfileState.username" /> -->
+                  </UFormGroup>
+                  <UFormGroup
+                    name="mobile"
+                    label="手机号码"
+                  >
+                    <p class="text-sm text-neutral-500 dark:text-neutral-400">
+                      {{ loginState.user?.mobile }}
+                    </p>
+                    <!-- <UInput v-model="editProfileState.mobile" /> -->
+                  </UFormGroup>
+                  <UFormGroup
+                    name="nickname"
+                    label="姓名"
+                    help="您的真实姓名，便于系统管理员联系您"
+                  >
+                    <UInput v-model="editProfileState.nickname" />
+                  </UFormGroup>
+                  <UFormGroup
+                    name="sex"
+                    label="性别"
+                  >
+                    <USelect
+                      v-model="editProfileState.sex"
+                      :options="[
+                        { label: '男', value: 1 },
+                        { label: '女', value: 2 },
+                        { label: '保密', value: 0 },
+                      ]"
+                    />
+                  </UFormGroup>
+                  <UFormGroup
+                    name="email"
+                    label="电子邮箱"
+                  >
+                    <UInput v-model="editProfileState.email" />
+                  </UFormGroup>
+                  <UFormGroup
+                    name="company"
+                    label="公司/学校/组织名称"
+                    help="您所在的公司或组织名称"
+                  >
+                    <UInput v-model="editProfileState.company" />
+                  </UFormGroup>
+
+                  <div>
+                    <UButton
+                      type="submit"
+                      :disabled="!isEditProfileModified"
+                    >
+                      保存更改
+                    </UButton>
+                  </div>
+                </UForm>
+              </div>
+            </template>
+            <template #security>
+              <div class="tab-content space-y-4">
+                <UForm
+                  class="max-w-96 space-y-6"
+                  :schema="changePasswordSchema"
+                  :state="changePasswordState"
+                  @submit="onChangePasswordSubmit"
+                >
+                  <UFormGroup
+                    name="old_password"
+                    label="旧密码"
+                  >
+                    <UInput
+                      type="password"
+                      v-model="changePasswordState.old_password"
+                    />
+                  </UFormGroup>
+                  <UFormGroup
+                    name="new_password"
+                    label="新密码"
+                  >
+                    <UInput
+                      type="password"
+                      v-model="changePasswordState.new_password"
+                    />
+                  </UFormGroup>
+                  <UFormGroup
+                    name="confirm_password"
+                    label="确认新密码"
+                  >
+                    <UInput
+                      type="password"
+                      v-model="changePasswordState.confirm_password"
+                    />
+                  </UFormGroup>
+
+                  <div>
+                    <UButton type="submit">修改密码</UButton>
+                  </div>
+                </UForm>
+                <!-- <UDivider /> -->
+              </div>
+            </template>
+          </UTabs>
+        </div>
+      </div>
+    </div>
+  </LoginNeededContent>
+</template>
+
+<style scoped>
+.tab-content {
+  @apply bg-neutral-50 dark:bg-neutral-800 rounded-lg p-6;
+}
+</style>