优化

src/views/AccountProfileView.vue

@@ -4,10 +4,12 @@ import { useRouter } from 'vue-router'
 import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import {
+  CheckCircle2,
   KeyRound,
   Pencil,
   Save,
   ShieldCheck,
+  UserRound,
   X,
 } from '@lucide/vue'
 import { useAuthStore } from '@/stores/auth'
@@ -172,10 +174,9 @@ async function changePassword() {
         <el-tab-pane name="profile">
           <template #label><span class="account-tab-label"><UserRound :size="16" />基本信息</span></template>
 
-          <header class="account-section-heading">
-            <div><h2>基本信息</h2><p>维护当前登录人的联系方式；账号和所属企业由系统身份关系确定。</p></div>
-            <el-button v-if="!editing" type="primary" @click="startEditing"><Pencil :size="16" />编辑信息</el-button>
-          </header>
+          <div v-if="!editing" class="account-actions">
+            <el-button type="primary" @click="startEditing"><Pencil :size="16" />编辑信息</el-button>
+          </div>
 
           <el-form
             v-if="editing"
@@ -217,9 +218,6 @@ async function changePassword() {
 
           <div class="password-layout">
             <div>
-              <header class="account-section-heading password-heading">
-                <div><h2>修改密码</h2><p>输入当前密码并设置 8–64 位、同时包含字母和数字的新密码。</p></div>
-              </header>
               <el-form
                 ref="passwordFormRef"
                 :model="passwordForm"
@@ -270,10 +268,7 @@ async function changePassword() {
 .account-tabs :deep(.el-tabs__header) { margin-bottom: 0; }
 .account-tabs :deep(.el-tabs__item) { min-height: 52px; }
 .account-tab-label { display: inline-flex; align-items: center; gap: 7px; }
-.account-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 0 20px; }
-.account-section-heading h2 { margin: 0 0 6px; color: var(--navy); font-size: 18px; }
-.account-section-heading p { max-width: 620px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
-.account-actions { display: flex; gap: 8px; }
+.account-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 20px 0; }
 .account-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
 .account-info-grid div { min-width: 0; min-height: 94px; padding: 18px 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
 .account-info-grid dt { color: var(--muted); font-size: 11px; }
@@ -283,7 +278,6 @@ async function changePassword() {
 .account-form-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; padding-top: 2px; }
 .field-help { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
 .password-layout { display: grid; grid-template-columns: minmax(320px, 520px) minmax(240px, 1fr); align-items: start; gap: clamp(36px, 7vw, 90px); }
-.password-heading { padding-bottom: 18px; }
 .password-form { max-width: 440px; }
 .password-form :deep(.el-form-item) { margin-bottom: 20px; }
 .password-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
@@ -304,15 +298,14 @@ async function changePassword() {
 .security-note code { color: var(--navy); font-weight: 700; }
 
 @media (max-width: 820px) {
-  .account-context { align-items: flex-start; flex-direction: column; gap: 7px; }
   .password-layout { grid-template-columns: 1fr; gap: 14px; }
   .security-note { margin-top: 0; }
 }
 
 @media (max-width: 620px) {
   .account-workspace { min-height: 0; padding: 0 16px 22px; }
-  .account-section-heading { align-items: stretch; flex-direction: column; gap: 14px; padding-top: 20px; }
-  .account-section-heading > .el-button { width: 100%; }
+  .account-actions { width: 100%; margin: 16px 0; }
+  .account-actions .el-button { width: 100%; min-height: 44px; }
   .account-form-actions { width: 100%; }
   .account-form-actions .el-button { min-height: 44px; flex: 1; }
   .account-info-grid, .account-form-grid { grid-template-columns: 1fr; }