fix: 增加邀请链接逻辑

Yi.Ai.Vue3/src/components/userPersonalCenter/components/CardFlipActivity.vue

@@ -10,9 +10,15 @@
  */
 import type { CardFlipRecord, CardFlipStatusOutput, FlipCardOutput } from '@/api/cardFlip/types';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { flipCard, generateMyInviteCode, getWeeklyTaskStatus, useInviteCode } from '@/api/cardFlip';
 
+// ============ Props ============
+/** 接收外部传入的邀请码（通过 URL 参数传递） */
+const props = defineProps<{
+  externalInviteCode?: string;
+}>();
+
 // ============ 状态管理 ============
 /** 任务数据：包含翻牌记录、次数统计、邀请码等信息 */
 const taskData = ref<CardFlipStatusOutput | null>(null);
@@ -83,6 +89,29 @@ onMounted(async () => {
   await playShuffleAnimation();
 });
 
+// ============ 监听外部邀请码 ============
+/**
+ * 监听外部传入的邀请码
+ * 如果有邀请码，自动打开对话框并预填
+ */
+watch(
+  () => props.externalInviteCode,
+  (newCode) => {
+    if (newCode && newCode.trim()) {
+      // 延迟500ms，确保页面已经渲染完成
+      setTimeout(() => {
+        inputInviteCode.value = newCode.trim().toUpperCase();
+        inviteCodeDialog.value = true;
+        ElMessage.info({
+          message: '🎁 检测到邀请码，已为您自动填充，请点击确认使用',
+          duration: 3000,
+        });
+      }, 500);
+    }
+  },
+  { immediate: true }
+);
+
 // ============ 新增：初始洗牌动画 ============
 /**
  * 初始洗牌动画
@@ -738,6 +767,52 @@ function copyInviteCode() {
   });
 }
 
+/**
+ * 生成分享链接
+ * 生成包含邀请码的完整 URL
+ */
+function generateShareLink(): string {
+  const inviteCode = taskData.value?.myInviteCode;
+  if (!inviteCode) return '';
+
+  const baseUrl = window.location.origin;
+  const path = window.location.pathname;
+  return `${baseUrl}${path}?inviteCode=${inviteCode}`;
+}
+
+/**
+ * 生成分享文案
+ * 类似小红书风格的分享内容
+ */
+function generateShareContent(): string {
+  const shareLink = generateShareLink();
+  return `🎁 邀请你来翻牌抽奖，赢取Token大奖！
+
+使用我的邀请码可解锁3次额外翻牌机会，必定中奖，最大奖励翻倍！💰
+
+👉 点击链接立即参与：
+${shareLink}
+
+🍀 快来试试手气吧！`;
+}
+
+/**
+ * 复制分享链接和文案
+ */
+function copyShareContent() {
+  if (!taskData.value?.myInviteCode) {
+    ElMessage.warning('暂无邀请码');
+    return;
+  }
+
+  const shareContent = generateShareContent();
+  navigator.clipboard.writeText(shareContent).then(() => {
+    ElMessage.success('🎉 分享内容已复制到剪贴板！快去分享给好友吧~');
+  }).catch(() => {
+    ElMessage.error('复制失败，请手动复制');
+  });
+}
+
 // ============ 工具函数 ============
 /**
  * 格式化 Token 显示（单位：万）
@@ -1063,16 +1138,31 @@ function getCardClass(record: CardFlipRecord): string[] {
             <div class="code-box">
               <span class="code-text">{{ taskData.myInviteCode }}</span>
             </div>
-            <el-button
-              type="primary"
-              icon="CopyDocument"
-              @click="copyInviteCode"
-            >
-              复制邀请码
-            </el-button>
+            <div class="button-group">
+              <el-button
+                type="primary"
+                icon="CopyDocument"
+                @click="copyInviteCode"
+              >
+                复制邀请码
+              </el-button>
+              <el-button
+                type="success"
+                icon="Share"
+                @click="copyShareContent"
+              >
+                复制分享链接
+              </el-button>
+            </div>
             <p class="invite-tip">
               💌 分享给好友，好友使用后可解锁最后3次翻牌机会
             </p>
+            <div class="share-preview">
+              <div class="share-preview-title">📱 分享预览</div>
+              <div class="share-preview-content">
+                {{ generateShareContent() }}
+              </div>
+            </div>
           </div>
 
           <!-- 生成邀请码 -->
@@ -1999,16 +2089,68 @@ function getCardClass(record: CardFlipRecord): string[] {
       }
     }
 
-    .el-button {
-      width: 100%;
+    .button-group {
+      display: flex;
+      gap: 8px;
       margin-bottom: 12px;
+
+      .el-button {
+        flex: 1;
+      }
     }
 
     .invite-tip {
       font-size: 13px;
       color: #909399;
       line-height: 1.5;
-      margin: 0;
+      margin: 0 0 16px 0;
+    }
+
+    .share-preview {
+      background: #f5f7fa;
+      border: 1px solid #e4e7ed;
+      border-radius: 8px;
+      padding: 12px;
+      text-align: left;
+
+      .share-preview-title {
+        font-size: 14px;
+        font-weight: bold;
+        color: #303133;
+        margin-bottom: 8px;
+        text-align: center;
+      }
+
+      .share-preview-content {
+        font-size: 13px;
+        color: #606266;
+        line-height: 1.6;
+        white-space: pre-line;
+        background: #fff;
+        padding: 10px;
+        border-radius: 4px;
+        max-height: 200px;
+        overflow-y: auto;
+
+        /* 自定义滚动条 */
+        &::-webkit-scrollbar {
+          width: 4px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: rgba(0, 0, 0, 0.05);
+          border-radius: 2px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: rgba(0, 0, 0, 0.2);
+          border-radius: 2px;
+
+          &:hover {
+            background: rgba(0, 0, 0, 0.3);
+          }
+        }
+      }
     }
   }