feat(subscription): 添加订阅功能并优化过期处理逻辑

- 扩展 trialExpiredType 类型，新增 'subscribe' 状态以支持主动订阅场景
- 新增 openSubscriptionDialog 方法，用于处理 VIP 状态点击事件
- 优化 VIP 状态卡片 UI，添加悬停与点击效果，提升交互体验
- 调整过期状态样式，保持水平布局并移除冗余按钮样式
- 在 Rakuten 组件中引入请求中断机制，提升任务控制灵活性- 更新 TrialExpiredDialog 组件，支持订阅类型提示与微信复制反馈- 修复部分 API 调用未传递 signal 参数的问题，增强请求管理能力
- 切换 Ruoyi 服务地址至生产环境配置，确保接口通信正常
- 移除部分无用代码与样式，精简组件结构

electron-vue-template/src/renderer/App.vue

@@ -84,7 +84,7 @@ const showSettingsDialog = ref(false)
 
 // 试用期过期对话框
 const showTrialExpiredDialog = ref(false)
-const trialExpiredType = ref<'device' | 'account' | 'both'>('device')
+const trialExpiredType = ref<'device' | 'account' | 'both' | 'subscribe'>('device')
 
 // 菜单配置 - 复刻ERP客户端格式
 const menuConfig = [
@@ -310,7 +310,7 @@ async function refreshVipStatus() {
 }
 
 // 判断过期类型
-function checkExpiredType(): 'device' | 'account' | 'both' {
+function checkExpiredType(): 'device' | 'account' | 'both' | 'subscribe' {
   const accountExpired = vipExpireTime.value && new Date() > vipExpireTime.value
   const deviceExpired = deviceTrialExpired.value
   
@@ -320,6 +320,17 @@ function checkExpiredType(): 'device' | 'account' | 'both' {
   return 'account' // 默认
 }
 
+// 打开订阅对话框
+function openSubscriptionDialog() {
+  // 如果VIP有效，显示订阅/续费提示；如果已过期，显示过期提示
+  if (vipStatus.value.isVip) {
+    trialExpiredType.value = 'subscribe'
+  } else {
+    trialExpiredType.value = checkExpiredType()
+  }
+  showTrialExpiredDialog.value = true
+}
+
 // 提供给子组件使用
 provide('refreshVipStatus', refreshVipStatus)
 provide('checkExpiredType', checkExpiredType)
@@ -519,22 +530,18 @@ onUnmounted(() => {
           </ul>
 
           <!-- VIP状态卡片 -->
-          <div v-if="isAuthenticated" class="vip-status-card" :class="'vip-' + vipStatus.status">
+          <div v-if="isAuthenticated" class="vip-status-card" :class="'vip-' + vipStatus.status" @click="openSubscriptionDialog">
             <div class="vip-info">
               <div class="vip-status-text">
                 <template v-if="vipStatus.isVip">
                   <span v-if="vipStatus.status === 'warning'">即将到期</span>
                   <span v-else>订阅中</span>
                 </template>
-                <template v-else>
-                  <span>已过期</span>
-                </template>
               </div>
               <div class="vip-expire-date" v-if="vipExpireTime">
                 有效期至：{{ vipExpireTime ? new Date(vipExpireTime).toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }) : '-' }}
               </div>
             </div>
-
           </div>
 
         </div>
@@ -924,6 +931,17 @@ onUnmounted(() => {
   box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15);
   transition: all 0.3s ease;
   position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+.vip-status-card:hover {
+  box-shadow: 0 3px 10px rgba(255, 215, 0, 0.25);
+  transform: translateY(-1px);
+}
+
+.vip-status-card:active {
+  transform: translateY(0);
 }
 
 /* 正常状态和警告状态 - 统一温暖金色渐变 */
@@ -934,15 +952,10 @@ onUnmounted(() => {
   box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15);
 }
 
-/* 过期状态 - 灰色，垂直布局 */
+/* 过期状态 - 灰色，保持水平布局 */
 .vip-status-card.vip-expired {
   background: linear-gradient(135deg, #FAFAFA 0%, #E8E8E8 100%);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: stretch;
-  padding: 10px;
-  gap: 8px;
 }
 
 .vip-info {
@@ -970,33 +983,6 @@ onUnmounted(() => {
   opacity: 0.9;
 }
 
-/* 右侧徽章按钮 */
-.vip-badge {
-  padding: 5px 10px;
-  border-radius: 5px;
-  font-size: 11px;
-  font-weight: 600;
-  white-space: nowrap;
-  flex-shrink: 0;
-  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
-  color: white;
-  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
-}
-
-/* 过期状态续费按钮 - 置底 */
-.vip-renew-btn {
-  padding: 7px 0;
-  text-align: center;
-  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
-  color: white;
-  border-radius: 5px;
-  font-size: 11px;
-  font-weight: 600;
-  width: 100%;
-  flex-shrink: 0;
-  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
-}
-
 .vip-status-card.vip-expired .vip-info {
   align-items: flex-start;
 }