diff --git a/src/assets/icon/copy.png b/src/assets/icon/copy.png
new file mode 100644
index 0000000..b192261
Binary files /dev/null and b/src/assets/icon/copy.png differ
diff --git a/src/assets/icon/helpWhite.png b/src/assets/icon/helpWhite.png
new file mode 100644
index 0000000..747caf6
Binary files /dev/null and b/src/assets/icon/helpWhite.png differ
diff --git a/src/assets/images/InvitationNewUser/bg.png b/src/assets/images/InvitationNewUser/bg.png
new file mode 100644
index 0000000..925a7d1
Binary files /dev/null and b/src/assets/images/InvitationNewUser/bg.png differ
diff --git a/src/assets/images/InvitationNewUser/confirm.png b/src/assets/images/InvitationNewUser/confirm.png
new file mode 100644
index 0000000..782824a
Binary files /dev/null and b/src/assets/images/InvitationNewUser/confirm.png differ
diff --git a/src/assets/images/InvitationNewUser/countdownBg.png b/src/assets/images/InvitationNewUser/countdownBg.png
new file mode 100644
index 0000000..b7ac802
Binary files /dev/null and b/src/assets/images/InvitationNewUser/countdownBg.png differ
diff --git a/src/assets/images/InvitationNewUser/enterCode.png b/src/assets/images/InvitationNewUser/enterCode.png
new file mode 100644
index 0000000..134486a
Binary files /dev/null and b/src/assets/images/InvitationNewUser/enterCode.png differ
diff --git a/src/assets/images/InvitationNewUser/helpInfo.png b/src/assets/images/InvitationNewUser/helpInfo.png
new file mode 100644
index 0000000..9a366fb
Binary files /dev/null and b/src/assets/images/InvitationNewUser/helpInfo.png differ
diff --git a/src/assets/images/InvitationNewUser/listBt.png b/src/assets/images/InvitationNewUser/listBt.png
new file mode 100644
index 0000000..89e8fe7
Binary files /dev/null and b/src/assets/images/InvitationNewUser/listBt.png differ
diff --git a/src/assets/images/InvitationNewUser/listBtActive.png b/src/assets/images/InvitationNewUser/listBtActive.png
new file mode 100644
index 0000000..b786703
Binary files /dev/null and b/src/assets/images/InvitationNewUser/listBtActive.png differ
diff --git a/src/assets/images/InvitationNewUser/receiveBt.png b/src/assets/images/InvitationNewUser/receiveBt.png
new file mode 100644
index 0000000..55d0539
Binary files /dev/null and b/src/assets/images/InvitationNewUser/receiveBt.png differ
diff --git a/src/assets/images/InvitationNewUser/receiveBtActive.png b/src/assets/images/InvitationNewUser/receiveBtActive.png
new file mode 100644
index 0000000..93c40b1
Binary files /dev/null and b/src/assets/images/InvitationNewUser/receiveBtActive.png differ
diff --git a/src/assets/images/InvitationNewUser/reward10people.png b/src/assets/images/InvitationNewUser/reward10people.png
new file mode 100644
index 0000000..b8da0d9
Binary files /dev/null and b/src/assets/images/InvitationNewUser/reward10people.png differ
diff --git a/src/assets/images/InvitationNewUser/reward15people.png b/src/assets/images/InvitationNewUser/reward15people.png
new file mode 100644
index 0000000..94b01e0
Binary files /dev/null and b/src/assets/images/InvitationNewUser/reward15people.png differ
diff --git a/src/assets/images/InvitationNewUser/reward5people.png b/src/assets/images/InvitationNewUser/reward5people.png
new file mode 100644
index 0000000..01f31da
Binary files /dev/null and b/src/assets/images/InvitationNewUser/reward5people.png differ
diff --git a/src/assets/images/InvitationNewUser/rewardBt.png b/src/assets/images/InvitationNewUser/rewardBt.png
new file mode 100644
index 0000000..3c06555
Binary files /dev/null and b/src/assets/images/InvitationNewUser/rewardBt.png differ
diff --git a/src/assets/images/InvitationNewUser/rewardBtActive.png b/src/assets/images/InvitationNewUser/rewardBtActive.png
new file mode 100644
index 0000000..66719c5
Binary files /dev/null and b/src/assets/images/InvitationNewUser/rewardBtActive.png differ
diff --git a/src/assets/images/InvitationNewUser/rewardItemBg.png b/src/assets/images/InvitationNewUser/rewardItemBg.png
new file mode 100644
index 0000000..f36bbe3
Binary files /dev/null and b/src/assets/images/InvitationNewUser/rewardItemBg.png differ
diff --git a/src/assets/images/InvitationNewUser/todayIncome.png b/src/assets/images/InvitationNewUser/todayIncome.png
new file mode 100644
index 0000000..d7d1d13
Binary files /dev/null and b/src/assets/images/InvitationNewUser/todayIncome.png differ
diff --git a/src/assets/images/InvitationNewUser/totalIncome.png b/src/assets/images/InvitationNewUser/totalIncome.png
new file mode 100644
index 0000000..cdf0fb1
Binary files /dev/null and b/src/assets/images/InvitationNewUser/totalIncome.png differ
diff --git a/src/components/GeneralHeader.vue b/src/components/GeneralHeader.vue
new file mode 100644
index 0000000..6ec7591
--- /dev/null
+++ b/src/components/GeneralHeader.vue
@@ -0,0 +1,154 @@
+<template>
+  <div style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)">
+    <!-- 状态栏占位区域（仅在APP中显示） -->
+    <div v-if="isInAppEnvironment" style="height: 30px"></div>
+
+    <!-- header内容 -->
+    <div
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 16px;
+        height: 60px;
+      "
+    >
+      <!-- 返回键 -->
+      <div style="width: 10%; display: flex; align-items: center">
+        <button v-if="showBack" class="back-btn" @click="handleBack">
+          <img
+            src="../assets/icon/arrowBack.png"
+            alt=""
+            style="width: 100%; aspect-ratio: 1/1; display: block"
+          />
+        </button>
+      </div>
+      <h1
+        style="
+          font-size: 1.2em;
+          font-weight: 600;
+          margin: 0;
+          color: #fff;
+          text-align: center;
+          flex: 1;
+          letter-spacing: 0.3px;
+        "
+      >
+        {{ title }}
+      </h1>
+      <button v-if="showHelp" class="help-btn" style="width: 10%" @click="$emit('help')">
+        <img src="../assets/icon/helpWhite.png" alt="" style="width: 100%; display: block" />
+      </button>
+      <slot name="extraFunction"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter, useRoute } from 'vue-router'
+import { computed, ref, onMounted } from 'vue'
+import { closePage, isInApp } from '../utils/appBridge.js'
+
+// 定义props
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  showBack: {
+    type: Boolean,
+    default: true,
+  },
+  showHelp: {
+    type: Boolean,
+    default: false,
+  },
+  isHomePage: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 定义emits
+defineEmits(['help'])
+
+const router = useRouter()
+const route = useRoute()
+
+// 检测是否在APP环境中
+const isInAppEnvironment = ref(false)
+
+// 定义首页路由列表
+const homeRoutes = ['/host-center', '/agency-center', '/coin-seller', '/']
+
+// 计算是否为首页
+const isCurrentlyHomePage = computed(() => {
+  // 1. 首先检查 props
+  const propsHomePage = props.isHomePage === true || props.isHomePage === 'true'
+
+  // 2. 然后检查路由
+  const routeHomePage = homeRoutes.includes(route.path)
+
+  // 3. 两者任一为true即为首页
+  return propsHomePage || routeHomePage
+})
+
+const handleBack = () => {
+  if (isCurrentlyHomePage.value && isInApp()) {
+    // 首页且在APP中：关闭页面
+    console.log('home back')
+    closePage()
+  } else {
+    // 非首页或浏览器环境：正常返回
+    router.go(-1)
+  }
+}
+
+// 组件挂载时检测环境
+onMounted(() => {
+  isInAppEnvironment.value = isInApp()
+})
+</script>
+
+<style scoped>
+* {
+  color: white;
+  font-family: 'SF Pro Text';
+}
+
+.back-btn,
+.help-btn {
+  border: none;
+  background: transparent;
+  transition: all 0.2s ease;
+}
+
+.back-btn:active,
+.help-btn:active {
+  transform: scale(0.9);
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 590c683..9886621 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -239,6 +239,12 @@ const router = createRouter({
       component: () => import('../views/RechargeAgency/Recruit.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/invitation-to-register',
+      name: 'invitation-to-register',
+      component: () => import('../views/Invitation/InvitationToRegister.vue'),
+      meta: { requiresAuth: true },
+    },
   ],
 })
 
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index d52c4c1..9dcf56d 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -118,6 +118,7 @@ export const ROLE_PERMISSIONS = {
     '/ranking', //总排行榜
     '/halloween', //万圣节活动页面
     '/recharge-agency-recruit', //充值代理介绍页面
+    '/invitation-to-register', //邀请新用户注册页面
   ],
 
   // 加载页面
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index 3f7a0f9..8aff5ee 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -409,6 +409,7 @@ class RouteGuard {
       '/ranking', //总排行榜
       '/halloween', //万圣节活动页面
       '/recharge-agency-recruit', //充值代理介绍页面
+      '/invitation-to-register', //邀请新用户注册页面
     ]
     return publicPages.includes(path)
   }
diff --git a/src/views/Invitation/InvitationToRegister.vue b/src/views/Invitation/InvitationToRegister.vue
new file mode 100644
index 0000000..9d5d4a4
--- /dev/null
+++ b/src/views/Invitation/InvitationToRegister.vue
@@ -0,0 +1,787 @@
+<template>
+  <div class="fullPage">
+    <div style="position: absolute; top: 0; left: 0; width: 100%">
+      <GeneralHeader title="Invitation to register" :showHelp="true" @help="helpInfoShow = true" />
+    </div>
+
+    <!-- 确认邀请码 -->
+    <div style="padding: 87% 0 5%">
+      <img
+        :src="images.enterCode"
+        alt=""
+        width="40%"
+        @click="enterCodeShow = true"
+        style="display: block"
+      />
+    </div>
+
+    <!-- 主体内容 -->
+    <div
+      style="padding: 0 3%; display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px"
+    >
+      <!-- 倒计时 -->
+      <div style="position: relative">
+        <img :src="images.countdownBg" alt="" width="100%" style="display: block" />
+        <div
+          style="
+            position: absolute;
+            inset: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            font-size: 1.2em;
+            font-weight: 700;
+            letter-spacing: 2px;
+          "
+        >
+          29D 23：23:23
+        </div>
+      </div>
+
+      <!-- 我的邀请码 -->
+      <div
+        style="
+          width: 100%;
+          border-radius: 8px;
+          background: rgba(194, 174, 232, 0.2);
+          backdrop-filter: blur(32px);
+          padding: 12px;
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        "
+        @click.stop
+      >
+        <div style="font-weight: 590">My invitation code:</div>
+        <div
+          style="
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.2);
+            padding: 12px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 4px;
+          "
+        >
+          <div style="font-weight: 590">18709616238</div>
+          <img
+            src="../../assets/icon/copy.png"
+            alt=""
+            width="24px"
+            @click="copyCode('18709616238')"
+          />
+        </div>
+        <div style="font-weight: 510; font-size: 0.7em">
+          *Copy your invitation code and send it to your new friends.
+        </div>
+      </div>
+
+      <!-- 模块切换按钮 -->
+      <div>
+        <div
+          v-if="showModule == 'list'"
+          style="display: flex; justify-content: space-around; align-items: center"
+        >
+          <img :src="images.listBtActive" alt="" width="40%" style="display: block" />
+          <img
+            :src="images.rewardBt"
+            alt=""
+            width="40%"
+            style="display: block"
+            @click="showModule = 'reward'"
+          />
+        </div>
+        <div v-else style="display: flex; justify-content: space-around; align-items: center">
+          <img
+            :src="images.listBt"
+            alt=""
+            width="40%"
+            style="display: block"
+            @click="showModule = 'list'"
+          />
+          <img :src="images.rewardBtActive" alt="" width="40%" style="display: block" />
+        </div>
+      </div>
+
+      <!-- 邀请列表模块 -->
+      <div v-if="showModule == 'list'" style="display: flex; flex-direction: column; gap: 12px">
+        <!-- 收入展示 -->
+        <div style="display: flex; justify-content: space-around; align-items: center">
+          <div style="position: relative; width: 47%">
+            <img :src="images.totalIncome" alt="" width="100%" style="display: block" />
+            <div
+              style="
+                position: absolute;
+                top: 40%;
+                width: 100%;
+                height: 60%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <img src="/src/assets/icon/coin.png" alt="" width="10%" style="display: block" />
+              <div style="font-weight: 590">111111</div>
+            </div>
+          </div>
+          <div style="position: relative; width: 47%">
+            <img :src="images.todayIncome" alt="" width="100%" style="display: block" />
+            <div
+              style="
+                position: absolute;
+                top: 40%;
+                width: 100%;
+                height: 60%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <img src="/src/assets/icon/coin.png" alt="" width="10%" style="display: block" />
+              <div style="font-weight: 590">111111</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 邀请人数 -->
+        <div
+          style="
+            border-radius: 8px;
+            background: rgba(194, 174, 232, 0.2);
+            backdrop-filter: blur(32px);
+            padding: 12px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+          "
+        >
+          <div
+            style="
+              width: 3px;
+              height: 12px;
+              flex-shrink: 0;
+              background: radial-gradient(323.25% 50.32% at 50% 50%, #d58ef4 0%, #7a5aff 100%);
+            "
+          ></div>
+          <div style="font-weight: 590">Number of valid users l invited: 9</div>
+        </div>
+
+        <!-- 列表 -->
+        <div
+          style="
+            border-radius: 8px;
+            background: rgba(194, 174, 232, 0.2);
+            backdrop-filter: blur(32px);
+            padding: 8px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+          "
+        >
+          <!-- 头部 -->
+          <div style="width: 100%; display: flex; align-items: center">
+            <div style="flex: 1; font-weight: 590; font-size: 0.85em">Users</div>
+            <div
+              style="
+                flex: 1;
+                font-weight: 590;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+              "
+            >
+              <div
+                style="
+                  width: 1px;
+                  height: 16px;
+                  background: linear-gradient(
+                    rgba(217, 217, 217, 0) 0%,
+                    #d9d9d9 50%,
+                    rgba(217, 217, 217, 0) 100%
+                  );
+                "
+              ></div>
+              <div style="font-weight: 590; font-size: 0.85em">Remaining time</div>
+              <div
+                style="
+                  width: 1px;
+                  height: 16px;
+                  background: linear-gradient(
+                    rgba(217, 217, 217, 0) 0%,
+                    #d9d9d9 50%,
+                    rgba(217, 217, 217, 0) 100%
+                  );
+                "
+              ></div>
+            </div>
+            <div style="flex: 1; font-weight: 590; text-align: end; font-size: 0.85em">
+              Prowide income
+            </div>
+          </div>
+          <!-- 列表项 -->
+          <div v-for="value in 10" style="width: 100%; display: flex; align-items: center">
+            <div style="flex: 1; font-weight: 590; font-size: 0.7em">ID:152319866</div>
+            <div
+              style="
+                flex: 1;
+                font-weight: 590;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+              "
+            >
+              <div
+                style="
+                  width: 1px;
+                  height: 16px;
+                  background: linear-gradient(
+                    rgba(217, 217, 217, 0) 0%,
+                    #d9d9d9 50%,
+                    rgba(217, 217, 217, 0) 100%
+                  );
+                "
+              ></div>
+              <div style="font-weight: 590; font-size: 0.7em">10Day</div>
+              <div
+                style="
+                  width: 1px;
+                  height: 16px;
+                  background: linear-gradient(
+                    rgba(217, 217, 217, 0) 0%,
+                    #d9d9d9 50%,
+                    rgba(217, 217, 217, 0) 100%
+                  );
+                "
+              ></div>
+            </div>
+            <div
+              style="
+                flex: 1;
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+                gap: 4px;
+              "
+            >
+              <img src="../../assets/icon/coin.png" alt="" width="15%" />
+              <div style="color: #ffb627; font-size: 0.8em; font-weight: 590">11111111111</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 奖励说明模块 -->
+      <div v-if="showModule == 'reward'" style="display: flex; flex-direction: column; gap: 12px">
+        <!-- 邀请5人奖励 -->
+        <div style="position: relative">
+          <img :src="images.reward5people" alt="" width="100%" style="display: block" />
+          <div
+            style="
+              position: absolute;
+              inset: 12% 0 0;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+            "
+          >
+            <div style="display: flex; justify-content: space-around">
+              <div style="width: 45%; position: relative">
+                <img :src="images.rewardItemBg" alt="" width="100%" />
+                <div
+                  style="
+                    position: absolute;
+                    inset: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
+                </div>
+              </div>
+              <div style="width: 45%; position: relative">
+                <img :src="images.rewardItemBg" alt="" width="100%" />
+                <div
+                  style="
+                    position: absolute;
+                    inset: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
+                </div>
+              </div>
+            </div>
+            <div style="display: flex; justify-content: center">
+              <img
+                v-if="reward5peopleShow"
+                :src="images.receiveBtActive"
+                alt=""
+                width="35%"
+                @click="reward5peopleShow = false"
+              />
+              <img
+                v-else
+                :src="images.receiveBt"
+                alt=""
+                width="35%"
+                @click="reward5peopleShow = true"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 邀请10人奖励 -->
+        <div style="position: relative">
+          <img :src="images.reward10people" alt="" width="100%" style="display: block" />
+          <div
+            style="
+              position: absolute;
+              inset: 12% 0 0;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+            "
+          >
+            <div style="display: flex; justify-content: space-around">
+              <div style="width: 45%; position: relative">
+                <img :src="images.rewardItemBg" alt="" width="100%" />
+                <div
+                  style="
+                    position: absolute;
+                    inset: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
+                </div>
+              </div>
+              <div style="width: 45%; position: relative">
+                <img :src="images.rewardItemBg" alt="" width="100%" />
+                <div
+                  style="
+                    position: absolute;
+                    inset: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
+                </div>
+              </div>
+            </div>
+            <div style="display: flex; justify-content: center">
+              <img
+                v-if="reward10peopleShow"
+                :src="images.receiveBtActive"
+                alt=""
+                width="35%"
+                @click="reward10peopleShow = false"
+              />
+              <img
+                v-else
+                :src="images.receiveBt"
+                alt=""
+                width="35%"
+                @click="reward10peopleShow = true"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 邀请15人奖励 -->
+        <div style="position: relative">
+          <img :src="images.reward15people" alt="" width="100%" style="display: block" />
+          <div
+            style="
+              position: absolute;
+              inset: 12% 0 0;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+            "
+          >
+            <div style="display: flex; justify-content: space-around">
+              <div style="width: 45%; position: relative">
+                <img :src="images.rewardItemBg" alt="" width="100%" />
+                <div
+                  style="
+                    position: absolute;
+                    inset: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
+                </div>
+              </div>
+              <div style="width: 45%; position: relative">
+                <img :src="images.rewardItemBg" alt="" width="100%" />
+                <div
+                  style="
+                    position: absolute;
+                    inset: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
+                  <img src="../../assets/icon/coinMore.png" alt="" width="50%" />
+                </div>
+              </div>
+            </div>
+            <div style="display: flex; justify-content: center">
+              <img
+                v-if="reward15peopleShow"
+                :src="images.receiveBtActive"
+                alt=""
+                width="35%"
+                @click="reward15peopleShow = false"
+              />
+              <img
+                v-else
+                :src="images.receiveBt"
+                alt=""
+                width="35%"
+                @click="reward15peopleShow = true"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗遮罩层 -->
+    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+      <!-- 帮助模块 -->
+      <div v-if="helpInfoShow" style="margin: 20% 10%; position: relative" @click.stop>
+        <img :src="images.helpInfo" alt="" width="100%" />
+        <div
+          style="position: absolute; width: 8%; aspect-ratio: 1/1; top: 3.8%; right: 7%"
+          @click="closedPopup"
+        ></div>
+      </div>
+
+      <!-- 输入邀请码模块 -->
+      <div
+        v-if="enterCodeShow"
+        style="
+          width: 100vw;
+          height: 100vh;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+        @click="closedPopup"
+      >
+        <div
+          style="
+            width: 80%;
+            border-radius: 12px;
+            background: #fff;
+            padding: 12px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+          "
+          @click.stop
+        >
+          <div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">Enter Invitation Code</div>
+          <div style="display: flex; justify-content: space-between; align-items: center; gap: 8px">
+            <!-- 邀请码 -->
+            <div style="flex: 1">
+              <input
+                v-model="invitationCode"
+                type="text"
+                style="
+                  width: 100%;
+                  height: 100%;
+                  color: rgba(0, 0, 0, 0.4);
+                  font-weight: 510;
+                  border-radius: 8px;
+                  padding: 4px 8px;
+                  border: 1px solid rgba(0, 0, 0, 0.4);
+                  outline: none;
+                  background-color: transparent;
+                "
+                @keyup.enter="confirmInvitationCode"
+              />
+            </div>
+
+            <!-- 确认按钮 -->
+            <img :src="images.confirm" alt="" width="25%" @click="confirmInvitationCode" />
+          </div>
+          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 510; font-size: 0.7em">
+            *Only users who registered within 72 hours can fill in the invitation code. Once the
+            invitation code is flled in, itcannot be modifed.
+          </div>
+        </div>
+      </div>
+    </maskLayer>
+  </div>
+</template>
+
+<script setup>
+import {
+  connectApplication,
+  parseAccessOrigin,
+  parseHeader,
+  setHttpHeaders,
+  isInApp,
+} from '@/utils/appBridge.js'
+import {
+  appConnectionManager,
+  isAppConnected,
+  getAppHeaderInfo,
+} from '@/utils/appConnectionManager.js'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import GeneralHeader from '@/components/GeneralHeader.vue'
+import itemCenter from '@/components/WeeklyStar/itemCenter.vue'
+import TopUser from '@/components/WeeklyStar/topUser.vue'
+import maskLayer from '../../components/MaskLayer.vue'
+import { useDebounce, useThrottle } from '@/utils/useDebounce'
+import { getMemberProfile } from '@/api/wallet'
+import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
+import { useClipboard } from '@vueuse/core'
+
+// vite动态导入图片
+const imageModules = import.meta.glob('@/assets/images/InvitationNewUser/*.{png,jpg,svg}', {
+  eager: true,
+})
+// 生成文件名映射对象（自动移除路径和扩展名）
+const images = Object.fromEntries(
+  Object.entries(imageModules).map(([path, module]) => {
+    const fileName = path.split('/').pop().split('.')[0]
+    return [fileName, module.default]
+  })
+)
+
+const { copy, isSupported } = useClipboard()
+
+const isInAppEnvironment = ref(false) // 检测是否在APP环境中
+const appConnected = ref(false)
+const headerInfo = ref({})
+
+const helpInfoShow = ref(false) //帮助模块
+const enterCodeShow = ref(false) //交易弹窗
+
+const invitationCode = ref('') //邀请码
+
+const showModule = ref('list') //显示模块
+
+const reward5peopleShow = ref(false)
+const reward10peopleShow = ref(false)
+const reward15peopleShow = ref(false)
+
+// 展示遮罩层
+const maskLayerShow = computed(() => {
+  return helpInfoShow.value || enterCodeShow.value
+})
+
+// 关闭弹窗
+const closedPopup = () => {
+  helpInfoShow.value = false
+  enterCodeShow.value = false
+}
+
+// 复制到剪贴板（原生方法）
+const copyCode = (text) => {
+  if (isSupported.value) {
+    copy(text)
+  } else {
+    // 降级方案
+    const textArea = document.createElement('textarea')
+    textArea.value = text
+    document.body.appendChild(textArea)
+    textArea.select()
+    document.execCommand('copy')
+    document.body.removeChild(textArea)
+  }
+}
+
+/**
+ * 连接APP并获取认证信息（优化版 - 仅专注连接）
+ */
+const connectToApp = async () => {
+  console.group('🔗 APP Connection Process')
+  console.debug('🚀 Starting APP connection...')
+
+  try {
+    // 检查是否在APP环境中
+    if (!isInApp()) {
+      console.debug('🌐 Browser environment detected')
+      appConnected.value = true
+      console.groupEnd()
+
+      // 触发连接成功回调
+      // getUserInfo()
+
+      return { success: true, environment: 'browser' }
+    }
+
+    // 检查是否已经连接且未过期
+    if (isAppConnected()) {
+      console.debug('✅ APP already connected and valid')
+      appConnected.value = true
+
+      // 使用缓存的头部信息
+      const cachedHeaderInfo = getAppHeaderInfo()
+      if (cachedHeaderInfo) {
+        headerInfo.value = cachedHeaderInfo
+        console.debug('🔧 Using cached HTTP headers')
+      }
+
+      console.groupEnd()
+
+      // 触发连接成功回调
+      // getUserInfo()
+
+      return { success: true, environment: 'app', fromCache: true }
+    }
+
+    // 检查是否有正在进行的连接
+    if (appConnectionManager.isConnecting()) {
+      console.debug('⏳ Connection already in progress, waiting...')
+      await appConnectionManager.getConnectionPromise()
+      appConnected.value = true
+      console.debug('✅ Connected via existing process')
+      console.groupEnd()
+
+      // 触发连接成功回调
+      // getUserInfo()
+
+      return { success: true, environment: 'app', fromCache: true }
+    }
+
+    // 建立新的APP连接
+    console.debug('📱 Establishing new APP connection...')
+
+    const connectionResult = await new Promise((resolve, reject) => {
+      const connectionPromise = new Promise((connectResolve, connectReject) => {
+        connectApplication(async (access) => {
+          try {
+            const result = parseAccessOrigin(access)
+
+            if (result.success) {
+              // 解析头部信息
+              headerInfo.value = parseHeader(result.data)
+
+              // 设置HTTP请求头
+              console.debug('🔧 Setting HTTP headers...')
+              await setHttpHeaders(headerInfo.value)
+
+              // 标记连接成功
+              appConnected.value = true
+              appConnectionManager.setConnected(headerInfo.value)
+
+              console.debug('🎉 APP connection established successfully')
+              connectResolve({ success: true, environment: 'app', fromCache: false })
+            } else {
+              console.error('❌ Failed to parse access origin:', result.error)
+              appConnectionManager.reset()
+              connectReject(new Error(result.error))
+            }
+          } catch (error) {
+            console.error('❌ Connection process failed:', error)
+            appConnectionManager.reset()
+            connectReject(error)
+          }
+        })
+      })
+
+      // 设置连接状态
+      appConnectionManager.setConnecting(connectionPromise)
+
+      connectionPromise.then(resolve).catch(reject)
+    })
+
+    console.debug('✅ Connection completed successfully')
+    console.groupEnd()
+
+    // 触发连接成功回调
+    // getUserInfo()
+
+    return connectionResult
+  } catch (error) {
+    console.error('❌ Connection failed:', error)
+    appConnected.value = false
+    console.groupEnd()
+
+    // 触发连接失败回调
+    // if (onConnectionFailed) {
+    //   onConnectionFailed(error)
+    // }
+
+    // 连接失败的特殊处理
+    if (error.message && error.message.includes('parse access')) {
+      router.push({ path: '/not_app', query: { message: error.message } })
+    }
+
+    return { success: false, error: error.message }
+  }
+}
+
+const confirmInvitationCode = () => {
+  if (!invitationCode.value.trim()) {
+    showWarning('Please enter a valid invitation code.')
+    return
+  }
+  invitationCode.value = ''
+  showSuccess('Invitation code confirmed!')
+  enterCodeShow.value = false
+}
+
+onMounted(() => {
+  connectToApp()
+  isInAppEnvironment.value = isInApp()
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: white;
+  font-family: 'SF Pro Text';
+}
+
+.fullPage {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #5b4a8a;
+  background-image: url(../../assets/images/InvitationNewUser/bg.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>