refactor(personal): 优化个人信息页面布局和样式

- 调整标签名称和布局，使其更加美观和一致
- 添加更新个人信息按钮，优化表单提交位置
- 优化响应式布局，提高不同屏幕下的用户体验
- 调整部分组件样式，提升整体视觉效果

src/layout/navBars/breadcrumb/user.vue

@@ -91,7 +91,7 @@
 			</span>
 			<template #dropdown>
 				<el-dropdown-menu>
-					<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
+					<!--<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>-->
 					<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
 					<!--<el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>-->
 					<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>

src/views/sku-manage/product-category/component/MainAttr.vue

@@ -51,7 +51,7 @@ const groupedAttrs = computed(() => {
         </el-tag>
         <!--</el-tooltip>-->
       </div>
-      <span class="line-separator ml-1">--></span>
+      <div class="line-separator ml-1"></div>
     </template>
   </div>
 

src/views/system/personal/index.vue

@@ -16,11 +16,11 @@
 								<el-col :span="24">
 									<el-row>
 										<el-col :xs="24" :sm="8" class="personal-item mb6">
-											<div class="personal-item-label">昵称：</div>
+											<div class="personal-item-label">昵 称：</div>
 											<div class="personal-item-value">{{ state.personalForm.name }}</div>
 										</el-col>
 										<el-col :xs="24" :sm="16" class="personal-item mb6">
-											<div class="personal-item-label">部门：</div>
+											<div class="personal-item-label">部 门：</div>
 											<div class="personal-item-value">
 												<el-tag>{{ state.personalForm.dept_info.dept_name }}</el-tag>
 											</div>
@@ -30,7 +30,7 @@
 								<el-col :span="24">
 									<el-row>
 										<el-col :xs="24" :sm="24" class="personal-item mb6">
-											<div class="personal-item-label">角色：</div>
+											<div class="personal-item-label">角 色：</div>
 											<div class="personal-item-value">
 												<el-tag v-for="(item, index) in state.personalForm.role_info" :key="index">{{ item.name }}</el-tag>
 											</div>
@@ -63,26 +63,37 @@
 			<!-- 更新信息 -->
 			<el-col :span="24">
 				<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
-					<div class="personal-edit-title">基本信息</div>
-					<el-form :model="state.personalForm" ref="userInfoFormRef" :rules="rules" size="default" label-width="50px" class="mt35 mb35">
+          <div class="flex justify-between items-center">
+            <div class="personal-edit-title text-nowrap">
+              基本信息
+            </div>
+            <div class="flex justify-end w-full">
+              <el-button :icon="Check" type="primary" plain @click="submitForm">
+                更新个人信息
+              </el-button>
+            </div>
+          </div>
+					
+					<el-form :model="state.personalForm" ref="userInfoFormRef" :rules="rules" size="default" label-width="60px" 
+                   class="mt35 mb35">
 						<el-row :gutter="35">
 							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-								<el-form-item label="昵称" prop="name">
+								<el-form-item label="昵 称" prop="name">
 									<el-input v-model="state.personalForm.name" placeholder="请输入昵称" clearable></el-input>
 								</el-form-item>
 							</el-col>
 							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-								<el-form-item label="邮箱">
+								<el-form-item label="邮 箱">
 									<el-input v-model="state.personalForm.email" placeholder="请输入邮箱" clearable></el-input>
 								</el-form-item>
 							</el-col>
 							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-								<el-form-item label="手机" prop="mobile">
+								<el-form-item label="手 机" prop="mobile">
 									<el-input v-model="state.personalForm.mobile" placeholder="请输入手机" clearable></el-input>
 								</el-form-item>
 							</el-col>
 							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-								<el-form-item label="性别">
+								<el-form-item label="性 别">
 									<el-select v-model="state.personalForm.gender" placeholder="请选择性别" clearable class="w100">
 <!--										<el-option label="男" :value="1"></el-option>-->
 <!--										<el-option label="女" :value="0"></el-option>-->
@@ -91,16 +102,11 @@
 									</el-select>
 								</el-form-item>
 							</el-col>
-							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-								<el-form-item>
-									<el-button type="primary" @click="submitForm">
-										<el-icon>
-											<ele-Position />
-										</el-icon>
-										更新个人信息
-									</el-button>
-								</el-form-item>
-							</el-col>
+							<!--<div class="flex justify-end w-full mr-4">-->
+              <!--  <el-button :icon="Check" type="primary" plain @click="submitForm">-->
+              <!--    更新个人信息-->
+              <!--  </el-button>-->
+              <!--</div>-->
 						</el-row>
 					</el-form>
 					<div class="personal-edit-title mb15">账号安全</div>
@@ -126,7 +132,6 @@
 							</div>
 						</div>
 					</div>
-
 					<div class="personal-edit-safe-box">
 						<div class="personal-edit-safe-item">
 							<div class="personal-edit-safe-item-left">
@@ -183,6 +188,7 @@ import { useUserInfo } from '/@/stores/userInfo';
 import { successMessage } from '/@/utils/message';
 import {dictionary} from "/@/utils/dictionary";
 import {Md5} from "ts-md5";
+import { Check } from '@element-plus/icons-vue';
 const router = useRouter();
 
 // 头像裁剪组件