新增一个赞助页面

src/main/resources/static/css/sponsor.css

@@ -0,0 +1,246 @@
+/* 赞助页面样式 */
+.sponsor-page {
+  min-height: 60vh;
+}
+
+.sponsor-item {
+  position: relative;
+  transform: translateY(0);
+  transition: all 0.3s ease;
+}
+
+.sponsor-item:hover {
+  transform: translateY(-4px);
+}
+
+.sponsor-price-tag {
+  position: absolute;
+  top: -8px;
+  right: 16px;
+  background: linear-gradient(135deg, #ec4899, #be185d);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  z-index: 10;
+}
+
+.sponsor-price-tag.custom {
+  background: linear-gradient(135deg, #10b981, #059669);
+}
+
+.sponsor-icon {
+  font-size: 3rem;
+  line-height: 1;
+  margin-bottom: 0.5rem;
+}
+
+/* 支付弹窗样式 */
+.payment-modal {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 20px;
+  padding: 0;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  max-width: 380px;
+  width: 100%;
+}
+
+.payment-modal-header {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  padding: 20px 24px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.payment-modal-content {
+  background: white;
+  padding: 24px;
+}
+
+.payment-title {
+  color: white;
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.close-button {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.close-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.qr-code-container {
+  background: #f8fafc;
+  border-radius: 16px;
+  padding: 20px;
+  margin: 20px 0;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.qr-code-frame {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  display: inline-block;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.qr-code-image {
+  width: 200px;
+  height: 200px;
+  object-fit: contain;
+  border-radius: 8px;
+  display: block;
+}
+
+.payment-info {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.sponsor-title {
+  background: linear-gradient(135deg, #ec4899, #be185d);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.amount-info {
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.payment-methods {
+  display: flex;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.payment-method-btn {
+  flex: 1;
+  padding: 12px 16px;
+  border-radius: 12px;
+  border: 2px solid transparent;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.payment-method-btn.wechat {
+  background: #f0f9ff;
+  color: #0369a1;
+  border-color: #e0f2fe;
+}
+
+.payment-method-btn.wechat.active {
+  background: #07bc0c;
+  color: white;
+  border-color: #07bc0c;
+  box-shadow: 0 4px 12px rgba(7, 188, 12, 0.3);
+}
+
+.payment-method-btn.alipay {
+  background: #fefce8;
+  color: #a16207;
+  border-color: #fef3c7;
+}
+
+.payment-method-btn.alipay.active {
+  background: #1677ff;
+  color: white;
+  border-color: #1677ff;
+  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.3);
+}
+
+.payment-method-btn:hover {
+  transform: translateY(-1px);
+}
+
+.qr-tip {
+  text-align: center;
+  color: #9ca3af;
+  font-size: 13px;
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.modal-enter-active, .modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-enter-from, .modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-active .payment-modal,
+.modal-leave-active .payment-modal {
+  transition: transform 0.3s ease;
+}
+
+.modal-enter-from .payment-modal,
+.modal-leave-to .payment-modal {
+  transform: scale(0.9) translateY(-20px);
+}
+
+/* 二维码容器样式 */
+.sponsor-item img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .sponsor-page {
+    padding: 0 1rem;
+  }
+  
+  .sponsor-item {
+    margin-bottom: 1rem;
+  }
+  
+  .sponsor-icon {
+    font-size: 2.5rem;
+  }
+  
+  .payment-modal {
+    margin: 1rem;
+    max-width: calc(100% - 2rem);
+  }
+  
+  .qr-code-image {
+    width: 180px;
+    height: 180px;
+  }
+  
+  .payment-methods {
+    flex-direction: column;
+  }
+}

src/main/resources/static/index.html

@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>QiuMo JetBrains Help - JetBrains激活助手</title>
+    <link rel='shortcut icon' href='/images/favicon.png'>
+    <link rel='icon' href='/images/favicon.png'>
+    <link rel='apple-touch-icon-precomposed' href='/images/favicon.png'>
+    <meta name='msapplication-TileImage' content='/images/favicon.png'>
 
     <!-- 核心技术栈 -->
     <script src="https://cdn.tailwindcss.com"></script>
@@ -15,6 +19,7 @@
 
     <!-- 自定义样式 -->
     <link rel="stylesheet" href="/css/main.css" />
+    <link rel="stylesheet" href="/css/sponsor.css" />
   </head>
   <body class="bg-gray-50">
     <div id="app">
@@ -435,6 +440,11 @@
               </div>
             </div>
           </div>
+
+          <!-- 赞助页面 -->
+          <div v-if="currentPage === 'sponsor'" key="sponsor">
+            <sponsor-component></sponsor-component>
+          </div>
         </transition>
       </main>
 
@@ -510,6 +520,7 @@
 
     <!-- 引入工具函数和应用逻辑 -->
     <script src="/js/utils.js"></script>
+    <script src="/js/sponsor.js"></script>
     <script src="/js/app.js"></script>
   </body>
 </html>

src/main/resources/static/js/app.js

@@ -28,7 +28,8 @@ const App = {
         { id: 'home', name: '首页', icon: 'fas fa-home' },
         { id: 'products', name: '产品', icon: 'fas fa-cube' },
         { id: 'plugins', name: '插件', icon: 'fas fa-puzzle-piece' },
-        { id: 'jrebel', name: 'JRebel', icon: 'fas fa-fire' }
+        { id: 'jrebel', name: 'JRebel', icon: 'fas fa-fire' },
+        { id: 'sponsor', name: '赞助', icon: 'fas fa-heart' }
       ],
       showBackToTop: false
     }
@@ -244,4 +245,5 @@ const App = {
 
 // 启动应用
 const app = createApp(App)
+app.component('SponsorComponent', SponsorComponent)
 app.mount('#app')

src/main/resources/static/js/sponsor.js

@@ -0,0 +1,199 @@
+// 赞助页面组件
+const SponsorComponent = {
+  name: 'SponsorComponent',
+  data() {
+    return {
+      showPaymentModal: false,
+      selectedAmount: null,
+      selectedPaymentType: 'wx', // 'wx' 或 'zfb'
+      sponsorItems: [
+        {
+          id: 'egg',
+          name: '一个鸡腿',
+          amount: 10,
+          icon: '🍗',
+          description: '请我吃个鸡腿'
+        },
+        {
+          id: 'coffee',
+          name: '一杯咖啡',
+          amount: 20,
+          icon: '☕',
+          description: '一杯提神咖啡'
+        },
+        {
+          id: 'burger',
+          name: '一个汉堡',
+          amount: 30,
+          icon: '🍔',
+          description: '美味汉堡套餐'
+        },
+        {
+          id: 'meal',
+          name: '一份肯德基套餐',
+          amount: 50,
+          icon: '🍟',
+          description: '丰盛的套餐'
+        },
+        {
+          id: 'hotpot',
+          name: '一份全家桶',
+          amount: 100,
+          icon: '🍗',
+          description: '和家人分享'
+        },
+        {
+          id: 'custom',
+          name: '爱心红包',
+          amount: 'custom',
+          icon: '🧧',
+          description: '自定义金额',
+          isCustom: true
+        }
+      ]
+    }
+  },
+  computed: {
+    currentQRCode() {
+      if (!this.selectedAmount || this.selectedAmount === 'custom') {
+        return `/images/${this.selectedPaymentType}/zdy.png`
+      }
+      return `/images/${this.selectedPaymentType}/${this.selectedAmount}.png`
+    },
+    paymentTypeText() {
+      return this.selectedPaymentType === 'wx' ? '微信支付' : '支付宝支付'
+    }
+  },
+  methods: {
+    openPaymentModal(item) {
+      this.selectedAmount = item.amount
+      this.showPaymentModal = true
+    },
+    closePaymentModal() {
+      this.showPaymentModal = false
+      this.selectedAmount = null
+    },
+    switchPaymentType(type) {
+      this.selectedPaymentType = type
+    },
+    getSponsorItemByAmount(amount) {
+      return this.sponsorItems.find(item => item.amount === amount)
+    }
+  },
+  template: `
+    <div class="sponsor-page">
+      <!-- 赞助说明 -->
+      <div class="text-center mb-8">
+        <div class="inline-flex items-center space-x-2 mb-4">
+          <span class="text-2xl">🎉</span>
+          <h2 class="text-2xl font-bold gradient-text">感谢您的支持</h2>
+          <span class="text-2xl">🎉</span>
+        </div>
+        <p class="text-gray-600 max-w-2xl mx-auto">
+          如果这个项目对您有帮助，请考虑赞助我们的开发工作。您的每一份支持都是我们持续更新的动力！
+        </p>
+      </div>
+
+      <!-- 赞助选项 -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div
+          v-for="item in sponsorItems"
+          :key="item.id"
+          @click="openPaymentModal(item)"
+          class="sponsor-item bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-purple-200">
+          
+          <!-- 金额标签 -->
+          <div class="sponsor-price-tag" v-if="!item.isCustom">
+            ¥{{ item.amount }}
+          </div>
+          <div class="sponsor-price-tag custom" v-else>
+            自定义
+          </div>
+
+          <!-- 图标 -->
+          <div class="text-center mb-4">
+            <div class="sponsor-icon">
+              {{ item.icon }}
+            </div>
+          </div>
+
+          <!-- 标题和描述 -->
+          <div class="text-center">
+            <h3 class="font-bold text-gray-900 mb-1">{{ item.name }}</h3>
+            <p class="text-sm text-gray-500">{{ item.description }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 感谢说明 -->
+      <div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl p-6">
+        <div class="text-center">
+          <h3 class="text-lg font-bold text-gray-900 mb-2">
+            <i class="fas fa-heart text-red-500 mr-2"></i>
+            特别感谢
+          </h3>
+          <p class="text-gray-600 text-sm leading-relaxed">
+            感谢每一位支持开源项目的朋友！您的赞助将用于服务器维护、域名续费和新功能开发。
+            <br>让我们一起让这个项目变得更好！
+          </p>
+        </div>
+      </div>
+
+      <!-- 支付弹窗 -->
+      <transition name="modal">
+        <div v-if="showPaymentModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
+          <div class="payment-modal">
+            <!-- 弹窗头部 -->
+            <div class="payment-modal-header flex justify-between items-center">
+              <h3 class="payment-title">💖 扫码赞助</h3>
+              <button @click="closePaymentModal" class="close-button">
+                <i class="fas fa-times"></i>
+              </button>
+            </div>
+
+            <!-- 弹窗内容 -->
+            <div class="payment-modal-content">
+              <!-- 赞助信息 -->
+              <div class="payment-info">
+                <div class="sponsor-title">感谢您的支持</div>
+                <div class="amount-info" v-if="selectedAmount !== 'custom'">
+                  {{ getSponsorItemByAmount(selectedAmount)?.name || '' }} - ¥{{ selectedAmount }}
+                </div>
+                <div class="amount-info" v-else>
+                  自定义金额支持
+                </div>
+              </div>
+
+              <!-- 二维码 -->
+              <div class="qr-code-container text-center">
+                <div class="qr-code-frame">
+                  <img :src="currentQRCode" :alt="paymentTypeText + '收款码'" class="qr-code-image">
+                </div>
+                <div class="qr-tip">
+                  <i class="fas fa-mobile-alt"></i>
+                  <span>长按保存二维码到手机相册</span>
+                </div>
+              </div>
+
+              <!-- 支付方式切换 -->
+              <div class="payment-methods">
+                <button
+                  @click="switchPaymentType('wx')"
+                  :class="['payment-method-btn wechat', selectedPaymentType === 'wx' ? 'active' : '']">
+                  <i class="fab fa-weixin"></i>
+                  微信支付
+                </button>
+                <button
+                  @click="switchPaymentType('zfb')"
+                  :class="['payment-method-btn alipay', selectedPaymentType === 'zfb' ? 'active' : '']">
+                  <i class="fab fa-alipay"></i>
+                  支付宝
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  `
+}