feat: 完成权益到期与续期闭环

ai_knowledge_base_v2/apps/user-client/src/components/PersonalCenterDialog.vue

@@ -84,6 +84,14 @@ function settlementStatusLabel(status: string) {
       </nav>
 
       <div v-if="activeSection === 'overview'" class="center-section">
+        <aside v-if="entitlement?.lifecycleStatus === 'expired_fallback'" class="entitlement-notice expired">
+          <strong>权益已平稳切换</strong>
+          <span>原“{{ entitlement.previousPlanName || '专属权益' }}”已于 {{ formatDate(entitlement.previousExpiredAt) }} 到期，当前已自动切换为“{{ entitlement.name }}”。已有聊天、实修回顾和卡片记录仍会保留。</span>
+        </aside>
+        <aside v-else-if="entitlement?.lifecycleStatus === 'expiring_7' || entitlement?.lifecycleStatus === 'expiring_30'" class="entitlement-notice">
+          <strong>权益即将到期</strong>
+          <span>当前权益有效至 {{ formatDate(entitlement.expiredAt) }}。如需继续使用，可提前联系运营老师确认续期。</span>
+        </aside>
         <article class="plan-card">
           <div class="section-heading">
             <PackageCheck :size="18" aria-hidden="true" />
@@ -224,6 +232,10 @@ function settlementStatusLabel(status: string) {
 .center-tabs button { min-height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--chat-muted); font-size: 13px; font-weight: 650; white-space: nowrap; }
 .center-tabs button[aria-selected="true"] { background: #fff; color: var(--chat-brand-dark); box-shadow: 0 3px 12px rgba(27, 68, 55, 0.08); }
 .center-section { display: grid; gap: 15px; }
+.entitlement-notice { display: grid; gap: 4px; padding: 11px 13px; border: 1px solid #e7dcb9; border-radius: 12px; background: #fffaf0; color: #735f30; }
+.entitlement-notice.expired { border-color: #e6d1cc; background: #fff7f5; color: #76504a; }
+.entitlement-notice strong { font-size: 12px; }
+.entitlement-notice span { font-size: 11px; line-height: 1.6; }
 .plan-card, .review-card, .usage-card, .compact-record, .report-record { border: 1px solid var(--chat-border); border-radius: 14px; background: #fff; }
 .plan-card { padding: 14px; background: linear-gradient(145deg, #f2f8f5, #fff); }
 .section-heading { display: flex; align-items: center; gap: 9px; color: var(--chat-brand-dark); }