优化公告弹窗逻辑，新增确认和取消按钮，提升用户交互体验

src/components/play/GamePage.vue

@@ -57,32 +57,29 @@
       <div v-if="announcement" class="announcement-content">
         <h3 class="announcement-title">{{ announcement.title }}</h3>
         <div class="announcement-text">{{ announcement.content }}</div>
-        <div v-if="announcement.jumpUrl" class="announcement-link">
-          <el-divider />
-          <div class="link-section">
-            <span class="link-label">🔗 相关链接：</span>
-            <el-link 
-              :href="announcement.jumpUrl" 
-              target="_blank" 
-              type="primary" 
-              :underline="false"
-              class="announcement-jump-link"
-            >
-              {{ announcement.jumpUrl }}
-              <el-icon class="el-icon--right"><Link /></el-icon>
-            </el-link>
-          </div>
-        </div>
       </div>
       <div v-else class="announcement-empty">
         暂无公告内容
       </div>
       <template #footer>
         <div class="announcement-footer">
+          <template v-if="announcement && announcement.jumpUrl">
+            <!-- 有链接时显示确定和取消按钮 -->
+            <el-checkbox v-model="dontShowToday" class="dont-show-checkbox">
+              今日不再弹出
+            </el-checkbox>
+            <div class="button-group">
+              <el-button @click="handleAnnouncementCancel">取消</el-button>
+              <el-button type="primary" @click="handleAnnouncementConfirm">确定</el-button>
+            </div>
+          </template>
+          <template v-else>
+            <!-- 无链接时显示原有的样式 -->
             <el-checkbox v-model="dontShowToday" class="dont-show-checkbox">
               今日不再弹出
             </el-checkbox>
             <el-button type="primary" @click="handleAnnouncementClose">确定</el-button>
+          </template>
         </div>
       </template>
     </el-dialog>
@@ -92,12 +89,8 @@
 <script>
 import { onMounted, ref, watch } from 'vue'
 import { getAnnouncementByCode } from '@/api/announcement'
-import { Link } from '@element-plus/icons-vue'
 export default {
   name: 'GamePage',
-  components: {
-    Link
-  },
   props: {
     region: {
       type: String,
@@ -220,6 +213,38 @@ export default {
       dontShowToday.value = false
     }
 
+    // 点击确定按钮：跳转到链接
+    const handleAnnouncementConfirm = () => {
+      const codeNo = props.codeNo
+      const announcementData = announcement.value
+      if (dontShowToday.value && codeNo) {
+        markDontShowToday(codeNo)
+      }
+      if (announcementData && codeNo) {
+        markDismissedPermanently(codeNo, announcementData.id)
+      }
+      // 跳转到链接
+      if (announcementData && announcementData.jumpUrl) {
+        window.open(announcementData.jumpUrl, '_blank')
+      }
+      announcementVisible.value = false
+      dontShowToday.value = false
+    }
+
+    // 点击取消按钮：仅关闭弹窗
+    const handleAnnouncementCancel = () => {
+      const codeNo = props.codeNo
+      const announcementData = announcement.value
+      if (dontShowToday.value && codeNo) {
+        markDontShowToday(codeNo)
+      }
+      if (announcementData && codeNo) {
+        markDismissedPermanently(codeNo, announcementData.id)
+      }
+      announcementVisible.value = false
+      dontShowToday.value = false
+    }
+
     onMounted(() => {
       // 仅在进入 GamePage 时检查公告
       setTimeout(() => checkAnnouncement(props.codeNo), 1000)
@@ -238,7 +263,9 @@ export default {
       announcementVisible,
       announcement,
       dontShowToday,
-      handleAnnouncementClose
+      handleAnnouncementClose,
+      handleAnnouncementConfirm,
+      handleAnnouncementCancel
     }
   },
   computed: {
@@ -414,42 +441,9 @@ export default {
   color: #666;
 }
 
-/* 公告链接样式 */
+.button-group {
-.announcement-link {
-  margin-top: 16px;
-}
-
-.link-section {
   display: flex;
-  flex-direction: column;
   gap: 8px;
-  padding: 12px;
-  background: #f8f9fa;
-  border-radius: 6px;
-  border-left: 3px solid #409EFF;
-}
-
-.link-label {
-  font-size: 14px;
-  font-weight: 500;
-  color: #303133;
-  margin-bottom: 4px;
-}
-
-.announcement-jump-link {
-  font-size: 14px;
-  word-break: break-all;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  max-width: 100%;
-}
-
-.announcement-jump-link:hover {
-  background-color: rgba(64, 158, 255, 0.1);
-  padding: 2px 6px;
-  border-radius: 4px;
-  transition: all 0.3s ease;
 }
 
 @media (max-width: 768px) {
@@ -481,17 +475,9 @@ export default {
     font-size: 11px;
   }
   
-  /* 移动端公告链接样式调整 */
+  /* 移动端按钮组调整 */
-  .link-section {
+  .button-group {
-    padding: 10px;
+    flex-wrap: wrap;
-  }
-  
-  .link-label {
-    font-size: 13px;
-  }
-  
-  .announcement-jump-link {
-    font-size: 13px;
   }
 }
 </style>