XuanShengHua/xsh-assistant-next
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor!: 升级 @nuxt/ui@3，重构所有页面和组件，调整配置，移除不在需求中的页面

Browse Source
This commit is contained in:
Timothy Yin
2026-02-10 18:07:44 +08:00
parent d0bca215c1
commit 75f1987be3
49 changed files with 4892 additions and 6599 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
app/pages/profile.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { number, object, string, ref as yref, type InferType } from 'yup'
import type { FormSubmitEvent } from '#ui/types'
import type { FormSubmitEvent, TabsItem } from '#ui/types'
const toast = useToast()
const route = useRoute()
@@ -9,30 +9,31 @@ const loginState = useLoginState()
const tabs = [
{
slot: 'info',
slot: 'info' as const,
label: '基本资料',
icon: 'tabler:user-square-rounded',
},
{
slot: 'security',
slot: 'security' as const,
label: '账号安全',
icon: 'tabler:shield-half-filled',
},
]
] satisfies TabsItem[]
const currentTab = computed({
get() {
const index = tabs.findIndex((item) => item.slot === route.query.tab)
if (index === -1) {
return 0
}
// const index = tabs.findIndex((item) => item.slot === route.query.tab)
// if (index === -1) {
// return 0
// }
return index
// return index
return (route.query.tab as string) || tabs[0]?.slot || 'info'
},
set(value) {
set(tab) {
// Hash is specified here to prevent the page from scrolling to the top
router.replace({
query: { tab: tabs[value].slot },
query: { tab },
})
},
})
@@ -80,7 +81,7 @@ const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
toast.add({
title: '个人资料已更新',
description: '您的个人资料已更新成功',
color: 'green',
color: 'success',
})
loginState.updateProfile()
isEditProfileModified.value = false
@@ -88,7 +89,7 @@ const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
toast.add({
title: '更新失败',
description: res.msg || '未知错误',
color: 'red',
color: 'error',
})
}
})
@@ -96,7 +97,7 @@ const onEditProfileSubmit = (event: FormSubmitEvent<EditProfileSchema>) => {
toast.add({
title: '更新失败',
description: err.message || '未知错误',
color: 'red',
color: 'error',
})
})
}
@@ -135,7 +136,7 @@ const onChangePasswordSubmit = (
toast.add({
title: '密码已修改',
description: '请重新登录',
color: 'green',
color: 'success',
})
setTimeout(() => {
loginState.logout()
@@ -145,7 +146,7 @@ const onChangePasswordSubmit = (
toast.add({
title: '修改密码失败',
description: res.msg || '未知错误',
color: 'red',
color: 'error',
})
}
})
@@ -153,7 +154,7 @@ const onChangePasswordSubmit = (
toast.add({
title: '修改密码失败',
description: err.message || '未知错误',
color: 'red',
color: 'error',
})
})
}
@@ -163,8 +164,8 @@ const onChangePasswordSubmit = (
<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">
<div class="container mx-auto flex max-w-7xl flex-col gap-12 pt-12">
<h1 class="inline-flex items-center gap-2 text-2xl font-medium">
<UIcon
name="line-md:person"
class="text-3xl"
@@ -179,10 +180,8 @@ const onChangePasswordSubmit = (
:src="loginState.user?.avatar"
:alt="loginState.user?.nickname || loginState.user?.username"
:ui="{
rounded: 'rounded-xl',
size: {
huge: 'w-48 h-48 text-4xl',
},
root: 'size-14 text-4xl',
image: 'rounded-xl',
}"
/>
<div>
@@ -203,16 +202,19 @@ const onChangePasswordSubmit = (
<div>
<UTabs
v-model="currentTab"
:items="tabs"
orientation="vertical"
:items="tabs"
: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' },
},
root: 'w-full flex flex-col sm:flex-row items-start gap-4 sm:gap-16',
list: 'w-full sm:w-48 h-fit bg-transparent',
indicator:
'data-[state=active]:bg-neutral-100 data-[state=active]:dark:bg-neutral-700',
trigger: 'w-full',
// list: {
// width: 'w-full sm:w-48 h-fit',
// background: 'bg-transparent',
// tab: { active: 'bg-neutral-100 dark:bg-neutral-700' },
// },
}"
>
<template #info>
@@ -224,15 +226,15 @@ const onChangePasswordSubmit = (
@submit="onEditProfileSubmit"
@change="isEditProfileModified = true"
>
<UFormGroup
<UFormField
name="username"
label="姓名"
help="您的真实姓名，将用于登录系统"
hint="账户名"
>
<UInput v-model="editProfileState.username" />
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
name="mobile"
label="手机号码"
help="手机号作为登录和找回密码的凭证，暂不支持修改"
@@ -241,27 +243,27 @@ const onChangePasswordSubmit = (
:placeholder="loginState.user?.mobile || 'nil'"
disabled
/>
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
name="sex"
label="性别"
>
<USelect
v-model="editProfileState.sex"
:options="[
:items="[
{ label: '男', value: 1 },
{ label: '女', value: 2 },
{ label: '保密', value: 0 },
]"
/>
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
name="company"
label="公司/学校/组织名称"
help="您所在的公司或组织名称"
>
<UInput v-model="editProfileState.company" />
</UFormGroup>
</UFormField>
<div>
<UButton
@@ -274,6 +276,7 @@ const onChangePasswordSubmit = (
</UForm>
</div>
</template>
<template #security>
<div class="tab-content space-y-4">
<UForm
@@ -282,7 +285,7 @@ const onChangePasswordSubmit = (
:state="changePasswordState"
@submit="onChangePasswordSubmit"
>
<UFormGroup
<UFormField
name="old_password"
label="旧密码"
>
@@ -290,8 +293,8 @@ const onChangePasswordSubmit = (
type="password"
v-model="changePasswordState.old_password"
/>
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
name="new_password"
label="新密码"
>
@@ -299,8 +302,8 @@ const onChangePasswordSubmit = (
type="password"
v-model="changePasswordState.new_password"
/>
</UFormGroup>
<UFormGroup
</UFormField>
<UFormField
name="confirm_password"
label="确认新密码"
>
@@ -308,13 +311,13 @@ const onChangePasswordSubmit = (
type="password"
v-model="changePasswordState.confirm_password"
/>
</UFormGroup>
</UFormField>
<div>
<UButton type="submit">修改密码</UButton>
</div>
</UForm>
<!-- <UDivider /> -->
<!-- <USeparator /> -->
</div>
</template>
</UTabs>
@@ -325,7 +328,9 @@ const onChangePasswordSubmit = (
</template>
<style scoped>
@reference '@/assets/css/main.css';
.tab-content {
@apply bg-neutral-50 dark:bg-neutral-800 rounded-lg p-6;
@apply rounded-lg bg-neutral-50 p-6 dark:bg-neutral-800;
}
</style>