feat: 完成客户端联调与通用列表组件

src/views/AccountProfileView.vue

@@ -4,13 +4,10 @@ import { useRouter } from 'vue-router'
 import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import {
-  Building2,
-  CheckCircle2,
   KeyRound,
   Pencil,
   Save,
   ShieldCheck,
-  UserRound,
   X,
 } from '@lucide/vue'
 import { useAuthStore } from '@/stores/auth'
@@ -170,19 +167,6 @@ async function changePassword() {
 
 <template>
   <section class="account-page">
-    <div class="client-card account-identity">
-      <div class="account-avatar" aria-hidden="true"><UserRound :size="28" /></div>
-      <div class="account-identity-copy">
-        <h2>{{ auth.profile.realName }}</h2>
-        <p>{{ auth.profile.username }}</p>
-      </div>
-      <div class="account-context">
-        <span><Building2 :size="16" />{{ auth.profile.tenantName }}</span>
-        <span><ShieldCheck :size="16" />{{ auth.user?.roles.join('、') }}</span>
-      </div>
-      <el-tag type="success" effect="plain"><CheckCircle2 :size="14" />账号正常</el-tag>
-    </div>
-
     <div class="client-card account-workspace">
       <el-tabs v-model="activeTab" class="account-tabs">
         <el-tab-pane name="profile">
@@ -206,7 +190,7 @@ async function changePassword() {
               <el-input v-model="profileForm.username" disabled />
               <span class="field-help">账号标识暂不支持在客户端修改</span>
             </el-form-item>
-            <el-form-item label="姓名" prop="realName"><el-input v-model="profileForm.realName" maxlength="64" show-word-limit /></el-form-item>
+            <el-form-item label="姓名" prop="realName"><el-input v-model="profileForm.realName" maxlength="64" show-word-limit placeholder="请输入真实姓名" /></el-form-item>
             <el-form-item label="联系电话" prop="phone"><el-input v-model="profileForm.phone" maxlength="32" inputmode="tel" placeholder="选填" /></el-form-item>
             <el-form-item label="邮箱" prop="email"><el-input v-model="profileForm.email" maxlength="128" inputmode="email" placeholder="选填" /></el-form-item>
             <el-form-item label="所属公司">
@@ -282,14 +266,6 @@ async function changePassword() {
 
 <style scoped>
 .account-page { display: flex; flex-direction: column; gap: 14px; }
-.account-identity { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 18px 22px; }
-.account-avatar { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border-radius: 14px; background: #e7f3f1; color: var(--primary); }
-.account-identity-copy { min-width: 140px; }
-.account-identity h2 { margin: 0 0 4px; color: var(--navy); font-size: 18px; }
-.account-identity p { margin: 0; color: var(--muted); font-size: 12px; }
-.account-context { display: flex; min-width: 0; flex: 1; gap: 22px; color: #52616b; font-size: 12px; }
-.account-context span { display: flex; min-width: 0; align-items: center; gap: 7px; overflow-wrap: anywhere; }
-.account-identity :deep(.el-tag) { display: flex; align-items: center; gap: 5px; }
 .account-workspace { min-height: 520px; padding: 0 24px 28px; }
 .account-tabs :deep(.el-tabs__header) { margin-bottom: 0; }
 .account-tabs :deep(.el-tabs__item) { min-height: 52px; }
@@ -334,9 +310,6 @@ async function changePassword() {
 }
 
 @media (max-width: 620px) {
-  .account-identity { align-items: flex-start; flex-wrap: wrap; }
-  .account-identity-copy { flex: 1; }
-  .account-context { order: 3; width: 100%; flex-basis: 100%; padding-top: 12px; border-top: 1px solid var(--border); }
   .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%; }