验收完成40%

components/tree/TreeMemberForm.vue

@@ -6,7 +6,7 @@
     'form-state--conflict': formState === 'conflict',
     'form-state--error': formState === 'error'
   }">
-    <image class="member-form-page__paper" src="/static/assets/foundation/opaque/page-paper.jpg" mode="aspectFill" />
+    <ModulePageBackground module="tree" />
     <view class="member-form-page__header"><PageHeader :title="config.pageTitle" /></view>
     <view class="member-form-panel">
       <image class="member-form-panel__skin" src="/static/assets/modules/genealogy/opaque/g03-create-flow-panel.png" mode="scaleToFill" />
@@ -22,7 +22,7 @@
         </view>
         <text class="member-form__note">{{ config.note }}</text>
         <view class="member-form-action" @click="saveForm">
-          <image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" /><text>{{ config.action }}</text>
+          <image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ config.action }}</text>
         </view>
       </view>
 
@@ -32,36 +32,33 @@
         <text class="member-form__copy">{{ resultCopy.copy }}</text>
         <view v-if="formState === 'conflict'" class="conflict-actions">
           <view class="member-form-action" @click="formState = 'form'">
-            <image src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" /><text class="member-form-action__secondary">返回核对</text>
+            <image src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" /><text class="member-form-action__secondary">返回核对</text>
           </view>
           <view class="member-form-action" @click="showConflictHelp">
-            <image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" /><text>查看冲突</text>
+            <image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>查看冲突</text>
           </view>
         </view>
         <view v-else class="member-form-action" @click="formState = 'form'">
-          <image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" /><text>{{ formState === 'success' ? '继续完善' : '重新填写' }}</text>
+          <image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" /><text>{{ formState === 'success' ? '继续完善' : '重新填写' }}</text>
         </view>
       </view>
     </view>
 
-    <view v-if="conflictHelpVisible" class="conflict-help" @click.self="conflictHelpVisible = false">
-      <view class="conflict-help__card">
-        <image class="conflict-help__skin" src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
-        <view class="conflict-help__content">
-          <text class="member-form__eyebrow">关系校验规则</text>
-          <text class="member-form__title">关系冲突说明</text>
-          <text class="member-form__copy">同一成员不能同时存在两个生父，也不能形成上下代循环。请返回世系树核对原关系后再调整。</text>
-          <view class="member-form-action conflict-help__action" @click="conflictHelpVisible = false">
-            <image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" /><text>我知道了</text>
-          </view>
-        </view>
-      </view>
-    </view>
+    <AppDialog
+      :visible="conflictHelpVisible"
+      eyebrow="关系校验规则"
+      title="关系冲突说明"
+      message="同一成员不能同时存在两个生父，也不能形成上下代循环。请返回世系树核对原关系后再调整。"
+      @confirm="conflictHelpVisible = false"
+      @close="conflictHelpVisible = false"
+    />
   </view>
 </template>
 
 <script setup>
 import { computed, reactive, ref } from 'vue'
+import AppDialog from '@/components/AppDialog.vue'
+import ModulePageBackground from '@/components/ModulePageBackground.vue'
 import PageHeader from '@/components/PageHeader.vue'
 
 const props = defineProps({ kind: { type: String, required: true } })
@@ -124,7 +121,6 @@ const showConflictHelp = () => { conflictHelpVisible.value = true }
 
 <style scoped lang="scss">
 .member-form-page { position: relative; min-height: 100vh; overflow: hidden; background: $paper; }
-.member-form-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
 .member-form-page__header { position: relative; z-index: 3; }
 .member-form-panel { position: relative; z-index: 2; width: calc(100% - 32rpx); height: min(640px, calc((100vw - 16px) * 1.48)); margin: 18rpx auto 0; }
 .member-form-panel__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
@@ -148,10 +144,5 @@ const showConflictHelp = () => { conflictHelpVisible.value = true }
 .member-form-result > .member-form-action { width: 420rpx; max-width: 100%; margin: 32rpx auto 0; }
 .conflict-actions { display: flex; gap: 14rpx; margin-top: 30rpx; }
 .conflict-actions .member-form-action { width: calc(50% - 7rpx); margin-top: 0; }
-.conflict-help { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 32rpx; background: rgba(34, 20, 13, .58); }
-.conflict-help__card { position: relative; width: min(620rpx, 92vw); height: 390rpx; }
-.conflict-help__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
-.conflict-help__content { position: absolute; inset: 62rpx 56rpx 46rpx; text-align: center; }
-.conflict-help__action { margin-top: 30rpx; }
 @media (min-width: 400px) { .member-form-panel { width: calc(100% - 48rpx); } }
 </style>