refactor: vue3.3 defineOptions

src/views/Profile/components/BasicInfo.vue

@@ -10,10 +10,8 @@
   <XButton :title="t('common.save')" @click="submit()" />
   <XButton :title="t('common.reset')" type="danger" @click="init()" />
 </template>
-<script lang="ts" name="BasicInfo" setup>
+<script lang="ts" setup>
 import type { FormRules } from 'element-plus'
-import { ElMessage } from 'element-plus'
-
 import { FormSchema } from '@/types/form'
 import type { FormExpose } from '@/components/Form'
 import {
@@ -22,7 +20,10 @@ import {
   UserProfileUpdateReqVO
 } from '@/api/system/user/profile'
 
+defineOptions({ name: 'BasicInfo' })
+
 const { t } = useI18n()
+const message = useMessage() // 消息弹窗
 // 表单校验
 const rules = reactive<FormRules>({
   nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
@@ -74,7 +75,7 @@ const submit = () => {
     if (valid) {
       const data = unref(formRef)?.formModel as UserProfileUpdateReqVO
       await updateUserProfile(data)
-      ElMessage.success(t('common.updateSuccess'))
+      message.success(t('common.updateSuccess'))
       await init()
     }
   })

src/views/Profile/components/ProfileUser.vue

@@ -46,12 +46,14 @@
     </ul>
   </div>
 </template>
-<script lang="ts" name="ProfileUser" setup>
+<script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
 import UserAvatar from './UserAvatar.vue'
 
 import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
 
+defineOptions({ name: 'ProfileUser' })
+
 const { t } = useI18n()
 const userInfo = ref<ProfileVO>()
 const getUserInfo = async () => {
@@ -79,7 +81,7 @@ onMounted(async () => {
 }
 
 .list-group {
-  padding-left: 0px;
+  padding-left: 0;
   list-style: none;
 }
 
@@ -87,7 +89,7 @@ onMounted(async () => {
   border-bottom: 1px solid #e7eaec;
   border-top: 1px solid #e7eaec;
   margin-bottom: -1px;
-  padding: 11px 0px;
+  padding: 11px 0;
   font-size: 13px;
 }
 

src/views/Profile/components/ResetPwd.vue

@@ -15,12 +15,14 @@
     </el-form-item>
   </el-form>
 </template>
-<script lang="ts" name="ResetPwd" setup>
+<script lang="ts" setup>
 import type { FormInstance, FormRules } from 'element-plus'
 
 import { InputPassword } from '@/components/InputPassword'
 import { updateUserPassword } from '@/api/system/user/profile'
 
+defineOptions({ name: 'ResetPwd' })
+
 const { t } = useI18n()
 const message = useMessage()
 const formRef = ref<FormInstance>()

src/views/Profile/components/UserAvatar.vue

@@ -10,10 +10,12 @@
     />
   </div>
 </template>
-<script lang="ts" name="UserAvatar" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { uploadAvatar } from '@/api/system/user/profile'
 
+defineOptions({ name: 'UserAvatar' })
+
 const props = defineProps({
   img: propTypes.string.def('')
 })

src/views/Profile/components/UserSocial.vue

@@ -21,11 +21,13 @@
     </el-table-column>
   </el-table>
 </template>
-<script lang="ts" name="UserSocial" setup>
+<script lang="ts" setup>
 import { SystemUserSocialTypeEnum } from '@/utils/constants'
 import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
 import { socialAuthRedirect, socialBind, socialUnbind } from '@/api/system/user/socialUser'
 
+defineOptions({ name: 'UserSocial' })
+
 const message = useMessage()
 const socialUsers = ref<any[]>([])
 const userInfo = ref<ProfileVO>()