修改完成

pages/profile/m08-promotion.vue

@@ -1,5 +1,46 @@
-<!-- 页面编号：M-08；用途：应用推广。 -->
-<template><ModulePage page-id="m08" /></template>
+<!-- 页面编号：M-08；用途：邀请家人共建家谱。 -->
+<template>
+  <view class="promotion-page share-state--ready">
+    <ModulePageBackground module="profile" />
+    <view class="page-layer"><PageHeader title="邀请家人" /></view>
+    <view class="page-content page-layer">
+      <view class="invite-hero">
+        <image src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
+        <text>邀请亲友共建家族记忆</text>
+        <text>家人搜索家谱或使用邀请码后，仍需管理员审核才能加入。</text>
+      </view>
+      <view class="invite-code-card">
+        <text>汝南汤氏家谱邀请码</text>
+        <text class="invite-code">{{ inviteCode }}</text>
+        <view class="copy-action" role="button" aria-label="复制邀请码" @click="copyInviteCode">复制邀请码</view>
+      </view>
+      <view class="steps-card"><text>邀请步骤</text><text>1. 生成邀请信息</text><text>2. 发送给家人</text><text>3. 家人提交加入申请</text><text>4. 管理员核实并审核</text></view>
+      <AppButton block label="生成邀请海报" @click="generatePoster" />
+    </view>
+    <AppDialog :visible="posterVisible" eyebrow="家谱邀请" title="汝南汤氏家谱" :message="`邀请码 ${inviteCode}。长按或复制邀请码发送给家人。`" confirm-text="完成" @confirm="posterVisible = false" @close="posterVisible = false">
+      <image class="poster-seal" src="/static/assets/foundation/transparent/brand-seal.png" mode="aspectFit" />
+    </AppDialog>
+    <AppToast :visible="toastVisible" :message="toastMessage" />
+  </view>
+</template>
+
 <script setup>
-import ModulePage from "@/components/ModulePage.vue";
+import { onUnmounted, ref } from "vue";
+import AppButton from "@/components/AppButton.vue";
+import AppDialog from "@/components/AppDialog.vue";
+import AppToast from "@/components/AppToast.vue";
+import ModulePageBackground from "@/components/ModulePageBackground.vue";
+import PageHeader from "@/components/PageHeader.vue";
+
+const inviteCode = ref("TN20260720");
+const posterVisible = ref(false);
+const toastVisible = ref(false); const toastMessage = ref(""); let timer = null;
+const showToast = (message) => { toastMessage.value = message; toastVisible.value = true; clearTimeout(timer); timer = setTimeout(() => (toastVisible.value = false), 1800); };
+const copyInviteCode = () => uni.setClipboardData({ data: inviteCode.value, showToast: false, success: () => showToast("邀请码已复制"), fail: () => showToast("复制失败，请长按邀请码复制") });
+const generatePoster = () => { posterVisible.value = true; };
+onUnmounted(() => clearTimeout(timer));
 </script>
+
+<style scoped lang="scss">
+.promotion-page{display:flex;min-height:100vh;flex-direction:column;background:$paper}.page-layer{z-index:1}.page-content{flex:1;padding:28rpx 30rpx 72rpx}.invite-hero,.invite-code-card,.steps-card{background:url("/static/assets/modules/profile/transparent/module-content-frame.png") center/100% 100% no-repeat}.invite-hero{display:flex;min-height:300rpx;flex-direction:column;align-items:center;justify-content:center;padding:38rpx 48rpx;box-sizing:border-box;text-align:center}.invite-hero image{width:90rpx;height:auto;max-height:102rpx;aspect-ratio:90/102}.invite-hero text{display:block}.invite-hero text:nth-child(2){margin-top:12rpx;color:$ink;font-family:STKaiti,KaiTi,serif;font-size:34rpx;font-weight:700}.invite-hero text:last-child{margin-top:12rpx;color:$ink-muted;font-size:22rpx;line-height:1.55}.invite-code-card{min-height:220rpx;margin-top:20rpx;padding:38rpx 44rpx;box-sizing:border-box;text-align:center}.invite-code-card>text:first-child{display:block;color:$ink-muted;font-size:21rpx}.invite-code{display:block;margin-top:10rpx;color:$brand-red;font-size:42rpx;font-weight:700;letter-spacing:5rpx;overflow-wrap:anywhere}.copy-action{display:flex;min-height:62rpx;align-items:center;justify-content:center;color:$brand-red;font-size:22rpx}.steps-card{display:flex;min-height:260rpx;flex-direction:column;gap:10rpx;margin-top:20rpx;padding:34rpx 44rpx;box-sizing:border-box;color:$ink-muted;font-size:22rpx}.steps-card text:first-child{margin-bottom:4rpx;color:$ink;font-size:27rpx;font-weight:700}.page-content>.app-button{margin-top:26rpx}.poster-seal{width:96rpx;height:auto;max-height:110rpx;aspect-ratio:96/110;margin:18rpx auto 24rpx}@media(max-width:340px){.page-content{padding-right:22rpx;padding-left:22rpx}.invite-code{font-size:35rpx;letter-spacing:3rpx}}
+</style>