新增公告链接功能，优化公告页面展示，提升用户体验

.claude/settings.local.json

@@ -2,7 +2,8 @@
   "permissions": {
     "allow": [
       "Bash(git add:*)",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
+      "WebFetch(domain:docs.claude.com)"
     ],
     "deny": [],
     "ask": []

src/components/play/GamePage.vue

@@ -57,6 +57,22 @@
       <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">
         暂无公告内容
@@ -76,8 +92,12 @@
 <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,
@@ -394,6 +414,44 @@ export default {
   color: #666;
 }
 
+/* 公告链接样式 */
+.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) {
   .tab-item {
     padding: 10px 8px;
@@ -422,5 +480,18 @@ export default {
   .image-label {
     font-size: 11px;
   }
+  
+  /* 移动端公告链接样式调整 */
+  .link-section {
+    padding: 10px;
+  }
+  
+  .link-label {
+    font-size: 13px;
+  }
+  
+  .announcement-jump-link {
+    font-size: 13px;
+  }
 }
 </style>