Răsfoiți Sursa

fix: clean UI after login without apigId - show friendly prompt, hide skeletons

gangvy 5 luni în urmă
părinte
comite
e87329c525
3 a modificat fișierele cu 48 adăugiri și 4 ștergeri
  1. 16 2
      src/app/app.html
  2. 31 0
      src/app/app.scss
  3. 1 2
      src/app/app.ts

+ 16 - 2
src/app/app.html

@@ -14,7 +14,7 @@
 <div class="main-container">
 
   <!-- API Info Card -->
-  <div class="api-info-card neu-raised" *ngIf="!showSuccess && !needLogin">
+  <div class="api-info-card neu-raised" *ngIf="!showSuccess && !needLogin && apigId">
     <div class="api-title" *ngIf="!apig">
       <span class="skeleton" style="display:inline-block;width:200px;height:24px;">&nbsp;</span>
     </div>
@@ -39,11 +39,25 @@
     </div>
   </div>
 
+  <!-- Missing apigId prompt -->
+  <div class="missing-apig-prompt" *ngIf="loggedInUser && !apigId && !needLogin">
+    <div class="prompt-icon">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"/>
+        <line x1="12" y1="16" x2="12" y2="12"/>
+        <line x1="12" y1="8" x2="12.01" y2="8"/>
+      </svg>
+    </div>
+    <h3>登录成功</h3>
+    <p>请通过包含 <code>apigid</code> 参数的链接访问此页面以进行充值。</p>
+    <p class="example-url">示例:<code>?apigid=xxx</code></p>
+  </div>
+
   <!-- Error -->
   <div class="error-bar" *ngIf="errorMsg">{{errorMsg}}</div>
 
   <!-- Tier Selection -->
-  <ng-container *ngIf="!showSuccess && !needLogin">
+  <ng-container *ngIf="!showSuccess && !needLogin && apigId">
     <div class="section-title">选择套餐</div>
     <div class="tier-grid" *ngIf="!apig || !apig.priceStep">
       <div class="tier-card neu-raised skeleton" style="height:100px;"></div>

+ 31 - 0
src/app/app.scss

@@ -125,6 +125,37 @@
   flex: 1;
 }
 
+/* ─── Missing ApigId Prompt ─── */
+.missing-apig-prompt {
+  text-align: center;
+  padding: 48px 24px;
+  margin-bottom: 24px;
+}
+.missing-apig-prompt .prompt-icon {
+  width: 56px; height: 56px;
+  margin: 0 auto 16px;
+  color: var(--neon);
+  opacity: 0.6;
+}
+.missing-apig-prompt .prompt-icon svg { width: 100%; height: 100%; }
+.missing-apig-prompt h3 {
+  margin: 0 0 12px; font-size: 20px;
+  font-weight: 700; color: var(--success);
+}
+.missing-apig-prompt p {
+  margin: 0 0 8px; font-size: 14px;
+  color: var(--text-dim); line-height: 1.6;
+}
+.missing-apig-prompt code {
+  padding: 2px 8px; font-size: 13px;
+  background: rgba(0,212,255,0.1);
+  border: 1px solid rgba(0,212,255,0.2);
+  border-radius: 4px; color: var(--neon);
+}
+.missing-apig-prompt .example-url {
+  margin-top: 16px; font-size: 13px;
+}
+
 /* ─── API Info Card ─── */
 .api-info-card {
   padding: 28px;

+ 1 - 2
src/app/app.ts

@@ -153,8 +153,7 @@ export class App implements OnInit {
     this.errorMsg = '';
 
     if (!this.apigId) {
-      // 如果 URL 也没有 apigId,提示需要 apigId
-      this.errorMsg = '登录成功,但缺少 apigid 参数。请在 URL 中提供 apigid。';
+      // 没有 apigId,模板会显示友好提示
       return;
     }
     this.loadApig();