个人中心优化

src/components/Form/src/Form.vue

@@ -203,7 +203,7 @@ export default defineComponent({
                       icon="ep:warning"
                       size={16}
                       color="var(--el-color-primary)"
-                      class="relative top-1px ml-2px"
+                      class="relative  top-1px ml-2px"
                     ></Icon>
                   )
                 }}
@@ -213,7 +213,7 @@ export default defineComponent({
         }
       }
       return (
-        <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
+        <ElFormItem class="mt-40px w-[70%]" {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
           {{
             ...formItemSlots,
             default: () => {

src/views/Profile/components/BasicInfo.vue

@@ -1,16 +1,24 @@
 <template>
-  <Form ref="formRef" :labelWidth="200" :rules="rules" :schema="schema">
-    <template #sex="form">
-      <el-radio-group v-model="form['sex']">
-        <el-radio :value="1">{{ t('profile.user.man') }}</el-radio>
-        <el-radio :value="2">{{ t('profile.user.woman') }}</el-radio>
-      </el-radio-group>
-    </template>
-  </Form>
-  <div style="text-align: center">
-    <XButton :title="t('common.save')" type="primary" @click="submit()" />
-    <XButton :title="t('common.reset')" type="danger" @click="init()" />
+  <div class="w-full h-full flex">
+    <div class="flex-1 flex justify-center items-center" >
+      <div class="w-150px h-150px flex justify-center items-center text-2xl">这是一个icon</div>
+    </div>
+    <div class="flex-1">
+      <Form ref="formRef"  :rules="rules" :schema="schema">
+        <template #sex="form">
+          <el-radio-group v-model="form['sex']">
+            <el-radio :value="1">{{ t('profile.user.man') }}</el-radio>
+            <el-radio :value="2">{{ t('profile.user.woman') }}</el-radio>
+          </el-radio-group>
+        </template>
+      </Form>
+      <div class="w-[70%] text-center mt-30px  mb-30px">
+        <XButton :title="t('common.save')" type="primary" @click="submit()" />
+        <XButton :title="t('common.reset')" type="danger" @click="init()" />
+      </div>
+    </div>
   </div>
+
 </template>
 <script lang="ts" setup>
 import type { FormRules } from 'element-plus'

src/views/Profile/components/ProfileUser.vue

@@ -1,68 +1,67 @@
 <template>
   <div class="w-full h-full flex">
     <div class="flex-1">
-        <div class="text-center">
-          <UserAvatar :img="userInfo?.avatar" />
-          <div class="lh-100px font-20px text-center" style="font-size: 25px;font-family: '黑体'">用户头像</div>
-        </div>
+      <div class="text-center">
+        <UserAvatar :img="userInfo?.avatar"/>
+      </div>
     </div>
     <div class="flex-1">
       <div>
-      <ul class="list-group list-group-striped">
-        <li class="list-group-item">
-          <Icon class="mr-5px" icon="ep:user" />
-          {{ t('profile.user.username') }}
-          <div class="pull-right">{{ userInfo?.username }}</div>
-        </li>
-        <li class="list-group-item">
-          <Icon class="mr-5px" icon="ep:phone" />
-          {{ t('profile.user.mobile') }}
-          <div class="pull-right">{{ userInfo?.mobile }}</div>
-        </li>
-        <li class="list-group-item">
-          <Icon class="mr-5px" icon="fontisto:email" />
-          {{ t('profile.user.email') }}
-          <div class="pull-right">{{ userInfo?.email }}</div>
-        </li>
-        <li class="list-group-item">
-          <Icon class="mr-5px" icon="carbon:tree-view-alt" />
-          {{ t('profile.user.dept') }}
-          <div v-if="userInfo?.dept" class="pull-right">{{ userInfo?.dept.name }}</div>
-        </li>
-        <li class="list-group-item">
-          <Icon class="mr-5px" icon="ep:suitcase" />
-          {{ t('profile.user.posts') }}
-          <div v-if="userInfo?.posts" class="pull-right">
-            {{ userInfo?.posts.map((post) => post.name).join(',') }}
-          </div>
-        </li>
-        <li class="list-group-item">
-          <Icon class="mr-5px" icon="icon-park-outline:peoples" />
-          {{ t('profile.user.roles') }}
-          <div v-if="userInfo?.roles" class="pull-right">
-            {{ userInfo?.roles.map((role) => role.name).join(',') }}
-          </div>
-        </li>
-        <li class="list-group-item">
-          <Icon class="mr-5px" icon="ep:calendar" />
-          {{ t('profile.user.createTime') }}
-          <div class="pull-right">{{ formatDate(userInfo.createTime) }}</div>
-        </li>
-      </ul>
-    </div>
+        <ul class="list-group list-group-striped">
+          <li class="list-group-item">
+            <Icon class="mr-5px" icon="ep:user"/>
+            {{ t('profile.user.username') }}
+            <div class="pull-right">{{ userInfo?.username }}</div>
+          </li>
+          <li class="list-group-item">
+            <Icon class="mr-5px" icon="ep:phone"/>
+            {{ t('profile.user.mobile') }}
+            <div class="pull-right">{{ userInfo?.mobile }}</div>
+          </li>
+          <li class="list-group-item">
+            <Icon class="mr-5px" icon="fontisto:email"/>
+            {{ t('profile.user.email') }}
+            <div class="pull-right">{{ userInfo?.email }}</div>
+          </li>
+          <li class="list-group-item">
+            <Icon class="mr-5px" icon="carbon:tree-view-alt"/>
+            {{ t('profile.user.dept') }}
+            <div v-if="userInfo?.dept" class="pull-right">{{ userInfo?.dept.name }}</div>
+          </li>
+          <!--        <li class="list-group-item">-->
+          <!--          <Icon class="mr-5px" icon="ep:suitcase" />-->
+          <!--          {{ t('profile.user.posts') }}-->
+          <!--          <div v-if="userInfo?.posts" class="pull-right">-->
+          <!--            {{ userInfo?.posts.map((post) => post.name).join(',') }}-->
+          <!--          </div>-->
+          <!--        </li>-->
+          <li class="list-group-item">
+            <Icon class="mr-5px" icon="icon-park-outline:peoples"/>
+            {{ t('profile.user.roles') }}
+            <div v-if="userInfo?.roles" class="pull-right">
+              {{ userInfo?.roles.map((role) => role.name).join(',') }}
+            </div>
+          </li>
+          <li class="list-group-item">
+            <Icon class="mr-5px" icon="ep:calendar"/>
+            {{ t('profile.user.createTime') }}
+            <div class="pull-right">{{ formatDate(userInfo.createTime) }}</div>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 
 </template>
 <script lang="ts" setup>
-import { formatDate } from '@/utils/formatTime'
+import {formatDate} from '@/utils/formatTime'
 import UserAvatar from './UserAvatar.vue'
 
-import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
+import {getUserProfile, ProfileVO} from '@/api/system/user/profile'
 
-defineOptions({ name: 'ProfileUser' })
+defineOptions({name: 'ProfileUser'})
 
-const { t } = useI18n()
+const {t} = useI18n()
 const userInfo = ref({} as ProfileVO)
 const getUserInfo = async () => {
   const users = await getUserProfile()
@@ -74,11 +73,7 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.text-center {
-  position: relative;
-  height: 120px;
-  text-align: center;
-}
+
 
 .list-group-striped > .list-group-item {
   padding-right: 0;
@@ -94,7 +89,7 @@ onMounted(async () => {
 }
 
 .list-group-item {
-  padding: 11px 0;
+  padding: 25px 0;
   margin-bottom: 10px;
   font-size: 13px;
 

src/views/Profile/components/ResetPwd.vue

@@ -1,29 +1,42 @@
 <template>
-  <el-form ref="formRef" :model="password" :rules="rules" :label-width="200">
-    <el-form-item :label="t('profile.password.oldPassword')" prop="oldPassword">
-      <InputPassword v-model="password.oldPassword" />
-    </el-form-item>
-    <el-form-item :label="t('profile.password.newPassword')" prop="newPassword">
-      <InputPassword v-model="password.newPassword" strength />
-    </el-form-item>
-    <el-form-item :label="t('profile.password.confirmPassword')" prop="confirmPassword">
-      <InputPassword v-model="password.confirmPassword" strength />
-    </el-form-item>
-    <el-form-item>
-      <XButton :title="t('common.save')" type="primary" @click="submit(formRef)" />
-      <XButton :title="t('common.reset')" type="danger" @click="reset(formRef)" />
-    </el-form-item>
-  </el-form>
+  <div class="w-full h-full flex">
+    <div class="flex-1 flex justify-center items-center" >
+      <div class="w-150px h-150px flex justify-center items-center text-2xl">这是一个icon</div>
+    </div>
+    <div class="flex-1">
+      <el-form ref="formRef" :model="password" :rules="rules" label-width="80">
+        <el-form-item :label="t('profile.password.oldPassword')" class="mt-40px w-[70%]"
+                      prop="oldPassword">
+          <InputPassword v-model="password.oldPassword" class="w-full"/>
+        </el-form-item>
+        <el-form-item :label="t('profile.password.newPassword')" class="mt-50px w-[70%] "
+                      prop="newPassword">
+          <InputPassword v-model="password.newPassword" class="w-full" strength/>
+        </el-form-item>
+        <el-form-item :label="t('profile.password.confirmPassword')" class="mt-40px w-[70%]"
+                      prop="confirmPassword">
+          <InputPassword v-model="password.confirmPassword" class="w-full" strength/>
+        </el-form-item>
+
+          <div class="mt-50px w-[70%] text-center  mb-30px mb-30px">
+            <XButton :title="t('common.save')" type="primary" @click="submit(formRef)"/>
+            <XButton :title="t('common.reset')" type="danger" @click="reset(formRef)"/>
+          </div>
+
+
+      </el-form>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
-import type { FormInstance, FormRules } from 'element-plus'
+import type {FormInstance, FormRules} from 'element-plus'
 
-import { InputPassword } from '@/components/InputPassword'
-import { updateUserPassword } from '@/api/system/user/profile'
+import {InputPassword} from '@/components/InputPassword'
+import {updateUserPassword} from '@/api/system/user/profile'
 
-defineOptions({ name: 'ResetPwd' })
+defineOptions({name: 'ResetPwd'})
 
-const { t } = useI18n()
+const {t} = useI18n()
 const message = useMessage()
 const formRef = ref<FormInstance>()
 const password = reactive({
@@ -43,16 +56,16 @@ const equalToPassword = (_rule, value, callback) => {
 
 const rules = reactive<FormRules>({
   oldPassword: [
-    { required: true, message: t('profile.password.oldPwdMsg'), trigger: 'blur' },
-    { min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur' }
+    {required: true, message: t('profile.password.oldPwdMsg'), trigger: 'blur'},
+    {min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur'}
   ],
   newPassword: [
-    { required: true, message: t('profile.password.newPwdMsg'), trigger: 'blur' },
-    { min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur' }
+    {required: true, message: t('profile.password.newPwdMsg'), trigger: 'blur'},
+    {min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur'}
   ],
   confirmPassword: [
-    { required: true, message: t('profile.password.cfPwdMsg'), trigger: 'blur' },
-    { required: true, validator: equalToPassword, trigger: 'blur' }
+    {required: true, message: t('profile.password.cfPwdMsg'), trigger: 'blur'},
+    {required: true, validator: equalToPassword, trigger: 'blur'}
   ]
 })
 

src/views/Profile/components/UserAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="change-avatar">
+  <div class="change-avatar mt-100px mb-150px mr-120px relative">
     <CropperAvatar
       ref="cropperRef"
       :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
@@ -8,6 +8,9 @@
       width="120px"
       @change="handelUpload"
     />
+     <div class="text-2xl absolute right-50px bottom-0px text-[#000000]">超级管理员
+      <div class="text-sm lh-50px text-[#000000bd]">超级管理员,普通角色</div>
+     </div>
   </div>
 </template>
 <script lang="ts" setup>

src/views/system/user/UserForm.vue

@@ -96,7 +96,7 @@
 
 
         <el-col :span="8">
-          <el-form-item label="省" prop="shengCode">
+          <el-form-item :prop="shengCodeProps" label="省">
             <el-select v-model="formData.shengCode"
                        clearable
                        placeholder="所属省份">
@@ -327,23 +327,13 @@ watch(() => formData.value.shiCode, async (newValue) => {
     xianList.value = []
   }
 });
+let shengCodeProps = ref('shengCode')
 watch(
   () => formData.value.deptId,
   async (newValue) => {
-    if (newValue == '112') {
-      // 当 deptId 为 '112' 时，shengCode 不是必填
-      formRules.shengCode[0].required = false;
-      // 清除 shengCode 的校验状态
-      await formRef.value?.clearValidate('shengCode');
-
-    } else {
-      // 否则，shengCode 是必填的
-      formRules.shengCode[0].required = true;
-      // 重新校验 shengCode 字段
-      await formRef.value?.validateField('shengCode');
-    }
+    shengCodeProps.value = newValue == '112' ? '' : 'shengCode';
   },
-  { deep: true }
+  {deep: true}
 );
 onMounted(async () => {