feat: 优化个人资料编辑界面，调整银行卡信息展示和操作逻辑

src/pages/profile/edit.vue

@@ -1,64 +1,48 @@
 <template>
-  <view class="page-no-tab profile-edit"
-    ><view class="profile-card card section"
-      ><view class="avatar xl-avatar">{{ currentUser.initials }}</view
-      ><text class="name">{{ currentUser.name }}</text
-      ><text class="job"
-        >{{ currentUser.position }} · {{ currentUser.department }}</text
-      ><text class="company">{{ currentUser.company }}</text></view
-    ><view v-for="group in groups" :key="group.title"
-      ><view class="group-title">{{ group.title }}</view
-      ><view class="info-card card section"
-        ><view v-for="(row, i) in group.rows" :key="row.label"
-          ><view class="info-row press" @click="row.edit && editRow(row)"
-            ><text>{{ row.label }}</text
-            ><text>{{ resolveValue(row) }}</text
-            ><text v-if="row.edit" class="arrow">›</text></view
-          ><view
-            v-if="i < group.rows.length - 1"
-            class="divider"
-          ></view></view></view></view
-    ><view class="group-title"
-      ><text>银行卡（{{ bankCardList.length }}）</text
-      ><text class="add-bank press" @click="addBankCard">+ 添加</text></view
-    ><view v-if="bankCardList.length" class="bank-card-list"
-      ><view v-for="card in bankCardList" :key="card.id" class="bank-card card section"
-        ><view class="bank-head"
-          ><view class="bank-title"
-            ><text class="bank-name">{{ card.openingBank || "未命名银行" }}</text></view
-          ><view class="bank-actions"
-            ><text class="bank-action press" @click="editBankCard(card)">编辑</text
-            ><text class="bank-action danger press" @click="removeBankCard(card)">删除</text></view
-          ></view
-        ><view class="bank-no">{{ formatCardNumber(card.cardNumber) }}</view
-        ><view v-if="card.branch" class="bank-branch">开户行：{{ card.branch }}</view
-        ></view
-      ></view
-    ><view v-else class="bank-empty card section"
-      ><text>暂未绑定银行卡</text
-      ><text class="press" @click="addBankCard">点击添加</text></view
-    ><text class="tip">点击可修改字段，提交后由人力资源部审核生效</text
-    ><view v-if="twoModal.visible" class="two-modal-mask" @click.self="cancelTwoModal"
-      ><view class="two-modal"
-        ><text class="two-modal-title">{{ twoModal.title }}</text
-        ><view class="two-modal-fields"
-          ><view v-for="field in twoModal.fields" :key="field.key" class="two-modal-field"
-            ><text class="two-modal-label">{{ field.label }}</text
-            ><input
-              class="two-modal-input"
-              :type="field.inputType || 'text'"
-              :maxlength="field.maxlength || 50"
-              v-model="twoModal.values[field.key]"
-              :placeholder="field.placeholder || ''"
-            /></view
-          ></view
-        ><view class="two-modal-actions"
-          ><text class="two-modal-btn press" @click="cancelTwoModal">取消</text
-          ><text class="two-modal-btn primary press" @click="confirmTwoModal">确认</text></view
-        ></view
-      ></view
-    ></view
-  >
+  <view class="page-no-tab profile-edit">
+    <view class="profile-card card section">
+      <view class="avatar xl-avatar">{{ currentUser.initials }}</view><text class="name">{{ currentUser.name
+      }}</text><text class="job">{{ currentUser.position }} · {{ currentUser.department }}</text><text
+        class="company">{{ currentUser.company }}</text>
+    </view>
+    <view v-for="group in groups" :key="group.title">
+      <view class="group-title">{{ group.title }}</view>
+      <view class="info-card card section">
+        <view v-for="(row, i) in group.rows" :key="row.label">
+          <view class="info-row press" @click="row.edit && editRow(row)"><text>{{ row.label }}</text><text>{{
+            resolveValue(row) }}</text><text v-if="row.edit" class="arrow">›</text></view>
+          <view v-if="i < group.rows.length - 1" class="divider"></view>
+        </view>
+      </view>
+    </view>
+    <view class="group-title"><text>银行卡（{{ bankCardList.length }}）</text><text class="add-bank press"
+        @click="addBankCard">+ 添加</text></view>
+    <view v-if="bankCardList.length" class="bank-card-list">
+      <view v-for="card in bankCardList" :key="card.id" class="bank-card card section">
+        <view class="bank-head">
+          <view class="bank-title"><text class="bank-name">{{ card.openingBank || "未命名银行" }}</text></view>
+          <view class="bank-actions"><text class="bank-action press" @click="editBankCard(card)">编辑</text><text
+              class="bank-action danger press" @click="removeBankCard(card)">删除</text></view>
+        </view>
+        <view class="bank-no">{{ formatCardNumber(card.cardNumber) }}</view>
+        <view v-if="card.branch" class="bank-branch">开户行：{{ card.branch }}</view>
+      </view>
+    </view>
+    <view v-else class="bank-empty card section"><text>暂未绑定银行卡</text><text class="press"
+        @click="addBankCard">点击添加</text></view><text class="tip">点击可修改字段，提交后由人力资源部审核生效</text>
+    <view v-if="twoModal.visible" class="two-modal-mask" @click.self="cancelTwoModal">
+      <view class="two-modal"><text class="two-modal-title">{{ twoModal.title }}</text>
+        <view class="two-modal-fields">
+          <view v-for="field in twoModal.fields" :key="field.key" class="two-modal-field"><text
+              class="two-modal-label">{{ field.label }}</text><input class="two-modal-input"
+              :type="field.inputType || 'text'" :maxlength="field.maxlength || 50" v-model="twoModal.values[field.key]"
+              :placeholder="field.placeholder || ''" /></view>
+        </view>
+        <view class="two-modal-actions"><text class="two-modal-btn press" @click="cancelTwoModal">取消</text><text
+            class="two-modal-btn primary press" @click="confirmTwoModal">确认</text></view>
+      </view>
+    </view>
+  </view>
 </template>
 <script setup>
 import { computed, ref } from "vue";
@@ -233,6 +217,7 @@ async function commitChange(payload, { toast = "已保存" } = {}) {
   saving.value = true
   uni.showLoading({ title: "保存中..." })
   try {
+    payload = { ...payload, id: payload.userId }
     await saveEmployee(payload)
     // 先用本地 payload 做乐观合并（saveNew 通常只返回 {id}，不会回完整 VO）
     applyOptimistic(payload)
@@ -411,58 +396,69 @@ function removeBankCard(card) {
   padding: 34rpx;
   text-align: center;
 }
+
 .xl-avatar {
   width: 116rpx;
   height: 116rpx;
   margin: auto;
   font-size: 42rpx;
 }
+
 .name {
   display: block;
   margin-top: 18rpx;
   font-size: 36rpx;
   font-weight: 600;
 }
+
 .job {
   display: block;
   margin-top: 10rpx;
   color: #555d68;
   font-size: 25rpx;
 }
+
 .company {
   display: block;
   margin-top: 8rpx;
   color: #a0a7b0;
   font-size: 22rpx;
 }
+
 .group-title {
   margin: 32rpx 28rpx 15rpx;
   color: #8b939f;
   font-size: 23rpx;
 }
+
 .info-card {
   overflow: hidden;
 }
+
 .info-row {
   min-height: 100rpx;
   padding: 25rpx 28rpx;
   display: flex;
   align-items: center;
 }
-.info-row > text:first-child {
+
+.info-row>text:first-child {
   width: 185rpx;
   color: #6f7782;
 }
-.info-row > text:nth-child(2) {
+
+.info-row>text:nth-child(2) {
   flex: 1;
   text-align: right;
   color: #1f2329;
 }
+
 .arrow {
   margin-left: 14rpx;
   color: #c4c8ce;
   font-size: 36rpx;
 }
+
 .tip {
   display: block;
   margin: 25rpx 0;
@@ -470,48 +466,59 @@ function removeBankCard(card) {
   color: #a0a7b0;
   font-size: 21rpx;
 }
+
 .group-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
 .add-bank {
   color: #1677ff;
   font-size: 24rpx;
 }
+
 .bank-card-list {
   padding: 0 24rpx;
 }
+
 .bank-card {
   padding: 24rpx 28rpx;
   margin-bottom: 18rpx;
 }
+
 .bank-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
 .bank-title {
   display: flex;
   align-items: center;
   gap: 12rpx;
 }
+
 .bank-name {
   font-size: 29rpx;
   font-weight: 600;
   color: #1f2329;
 }
+
 .bank-actions {
   display: flex;
   gap: 18rpx;
 }
+
 .bank-action {
   font-size: 25rpx;
   color: #1677ff;
 }
+
 .bank-action.danger {
   color: #ee4d4d;
 }
+
 .bank-no {
   margin-top: 16rpx;
   font-size: 32rpx;
@@ -519,11 +526,13 @@ function removeBankCard(card) {
   letter-spacing: 1rpx;
   color: #1f2329;
 }
+
 .bank-branch {
   margin-top: 10rpx;
   font-size: 22rpx;
   color: #8b939f;
 }
+
 .bank-empty {
   margin: 0 24rpx;
   padding: 48rpx 28rpx;
@@ -534,9 +543,11 @@ function removeBankCard(card) {
   color: #8b939f;
   font-size: 25rpx;
 }
-.bank-empty > text:last-child {
+
+.bank-empty>text:last-child {
   color: #1677ff;
 }
+
 .two-modal-mask {
   position: fixed;
   inset: 0;
@@ -546,6 +557,7 @@ function removeBankCard(card) {
   align-items: center;
   justify-content: center;
 }
+
 .two-modal {
   width: 620rpx;
   max-width: 92vw;
@@ -555,6 +567,7 @@ function removeBankCard(card) {
   display: flex;
   flex-direction: column;
 }
+
 .two-modal-title {
   display: block;
   text-align: center;
@@ -563,12 +576,14 @@ function removeBankCard(card) {
   color: #1f2329;
   margin-bottom: 28rpx;
 }
+
 .two-modal-fields {
   display: flex;
   flex-direction: column;
   gap: 20rpx;
   padding-bottom: 8rpx;
 }
+
 .two-modal-field {
   display: flex;
   align-items: center;
@@ -577,23 +592,27 @@ function removeBankCard(card) {
   padding: 0 22rpx;
   min-height: 88rpx;
 }
+
 .two-modal-label {
   width: 140rpx;
   flex-shrink: 0;
   font-size: 26rpx;
   color: #6f7782;
 }
+
 .two-modal-input {
   flex: 1;
   font-size: 28rpx;
   color: #1f2329;
   background: transparent;
 }
+
 .two-modal-actions {
   margin: 28rpx -36rpx 0;
   border-top: 1rpx solid #edf0f2;
   display: flex;
 }
+
 .two-modal-btn {
   flex: 1;
   height: 96rpx;
@@ -603,11 +622,13 @@ function removeBankCard(card) {
   color: #4b5563;
   border-right: 1rpx solid #edf0f2;
 }
+
 .two-modal-btn:last-child {
   border-right: 0;
   color: #1677ff;
   font-weight: 600;
 }
+
 .two-modal-btn.primary {
   color: #1677ff;
 }