Add 0.01 test tier entry

src/app/app.html

@@ -6,10 +6,21 @@
   <div class="logo">BRAIN<span>HACK</span></div>
   <div class="subtitle">{{pageSubtitle}}</div>
   <div class="user-bar" *ngIf="loggedInUser">
-    <span class="user-badge">👤 {{loggedInUser}}</span>
+    <span class="user-badge">
+      <svg class="header-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M20 21a8 8 0 0 0-16 0"/>
+        <circle cx="12" cy="7" r="4"/>
+      </svg>
+      {{loggedInUser}}
+    </span>
     <button class="token-copy-btn" (click)="copyToken()" *ngIf="sessionToken"
-            title="复制到终端执行，自动将 token 写入 OpenClaw">
-      {{tokenCopied ? '✅ 已复制命令' : '📋 复制 OpenClaw 授权命令'}}
+            title="复制到终端执行，自动将 token 写入 OpenClaw"
+            [class.copied]="tokenCopied">
+      <svg class="header-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="9" y="9" width="13" height="13" rx="2"/>
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+      </svg>
+      {{tokenCopied ? '已复制命令' : '复制 Token 授权命令'}}
     </button>
     <button class="logout-btn" (click)="logout()">退出</button>
   </div>
@@ -201,7 +212,9 @@
         [class.neu-raised]="selectedIndex !== i"
         [class.neu-pressed]="selectedIndex === i"
         [class.active]="selectedIndex === i"
+        [class.test-tier]="tier.isTest"
         (click)="selectTier(i)">
+        <span class="test-tier-badge" *ngIf="tier.isTest">测试入口</span>
         <div class="tier-price"><span class="symbol">￥</span>{{tier.price}}</div>
         <div class="tier-count">含 {{tier.count}} {{unitLabel}}</div>
         <div class="tier-unit-price">≈ {{(tier.price / tier.count).toFixed(3)}} 元/{{unitLabel}}</div>
@@ -279,6 +292,9 @@
     </div>
     <div class="success-title">充值成功</div>
     <div class="success-detail" [innerHTML]="successDetailHtml"></div>
+    <div class="success-copy-hint" *ngIf="sessionToken">
+      下一步：请点击右上角「复制 Token 授权命令」按钮，将授权命令复制后粘贴到 OpenClaw 终端执行。
+    </div>
     <button class="back-btn" (click)="handleDone()">完成</button>
   </div>
 </div>

src/app/app.scss

@@ -108,7 +108,7 @@
 .page-header .user-badge {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   padding: 4px 12px;
   font-size: 12px;
   font-weight: 600;
@@ -117,20 +117,36 @@
   border: 1px solid rgba(0,255,136,0.2);
   border-radius: 20px;
 }
+.page-header .header-icon {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+}
 .page-header .token-copy-btn {
-  padding: 4px 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
   font-size: 12px;
-  font-weight: 600;
-  color: var(--neon);
-  background: rgba(0,212,255,0.08);
-  border: 1px solid rgba(0,212,255,0.2);
+  font-weight: 800;
+  color: #001216;
+  background: linear-gradient(135deg, var(--neon), #66eeff);
+  border: 1px solid rgba(102,238,255,0.8);
   border-radius: 20px;
+  box-shadow: 0 0 18px rgba(0,212,255,0.28);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
 }
 .page-header .token-copy-btn:hover {
-  background: rgba(0,212,255,0.15);
-  border-color: var(--neon);
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+  box-shadow: 0 0 26px rgba(0,212,255,0.42);
+}
+.page-header .token-copy-btn.copied {
+  color: #002212;
+  background: linear-gradient(135deg, var(--success), #8cffc7);
+  border-color: rgba(140,255,199,0.85);
+  box-shadow: 0 0 22px rgba(0,255,136,0.28);
 }
 .page-header .logout-btn {
   padding: 4px 12px;
@@ -406,6 +422,24 @@
 .tier-card.active::after {
   background: linear-gradient(90deg, var(--neon), var(--neon-dim));
 }
+.tier-card.test-tier {
+  border-color: rgba(0,255,136,0.36);
+}
+.tier-card.test-tier::after {
+  background: linear-gradient(90deg, var(--success), var(--neon));
+}
+.test-tier-badge {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  padding: 2px 8px;
+  border: 1px solid rgba(0,255,136,0.38);
+  border-radius: 6px;
+  color: var(--success);
+  background: rgba(0,255,136,0.08);
+  font-size: 11px;
+  font-weight: 700;
+}
 .tier-price {
   font-size: 28px;
   font-weight: 700;
@@ -878,7 +912,19 @@
   font-size: 14px;
   color: var(--text-dim);
   line-height: 1.8;
-  margin-bottom: 28px;
+  margin-bottom: 18px;
+}
+.success-screen .success-copy-hint {
+  max-width: 520px;
+  margin: 0 auto 28px;
+  padding: 14px 16px;
+  border: 1px solid rgba(0,212,255,0.35);
+  border-radius: 8px;
+  color: var(--text-bright);
+  background: rgba(0,212,255,0.08);
+  box-shadow: 0 0 24px rgba(0,212,255,0.12);
+  font-size: 14px;
+  line-height: 1.7;
 }
 .success-screen .back-btn {
   display: inline-block;

src/app/app.ts

@@ -18,6 +18,7 @@ const ORDER_PAGE_SIZE = 10;
 interface PriceTier {
   count: number;
   price: number;
+  isTest?: boolean;
 }
 
 interface WorkshopAllocation {
@@ -617,10 +618,10 @@ export class App implements OnInit {
   }
 
   applyTestTier(): void {
-    // 仅在 URL 带 test=1 时追加测试套餐（¥0.01 / 1 次），不再对正式价格做任何改写
+    // 仅在 URL 带 test=1 时追加测试套餐（¥0.01 / 1 次），不再对正式价格做任何改写。
     const params = new URLSearchParams(window.location.search);
-    if (params.get('test') === '1' && this.apig?.priceStep) {
-      this.apig.priceStep.unshift({ count: 1, price: 0.01 });
+    if (params.get('test') === '1' && this.apig?.priceStep && !this.apig.priceStep.some(tier => tier.isTest)) {
+      this.apig.priceStep.unshift({ count: 1, price: 0.01, isTest: true });
     }
   }