验收20%

components/tree/TreeMemberForm.vue

@@ -43,6 +43,20 @@
         </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>
   </view>
 </template>
 
@@ -91,6 +105,7 @@ const query = (() => {
   return pages[pages.length - 1]?.options || {}
 })()
 const formState = ref(query.state === 'success' ? 'success' : query.state === 'conflict' ? 'conflict' : query.state === 'error' ? 'error' : 'form')
+const conflictHelpVisible = ref(false)
 const resultCopy = computed(() => ({
   success: { eyebrow: '本地预览已更新', title: `${config.value.pageTitle}内容已保存`, copy: '返回世系树后可查看新的展示位置；正式数据将在接口阶段接入。' },
   conflict: { eyebrow: '发现关系冲突', title: '这段关系会造成代际矛盾', copy: '目标成员已经存在父级关系，请先核对原关系，再决定是否调整。' },
@@ -104,7 +119,7 @@ const saveForm = () => {
   }
   formState.value = 'success'
 }
-const showConflictHelp = () => uni.showModal({ title: '关系冲突说明', content: '同一成员不能同时存在两个生父或形成上下代循环。请返回世系树核对原关系。', showCancel: false })
+const showConflictHelp = () => { conflictHelpVisible.value = true }
 </script>
 
 <style scoped lang="scss">
@@ -133,5 +148,10 @@ const showConflictHelp = () => uni.showModal({ title: '关系冲突说明', cont
 .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>