From 35e74546951f101a3a29d4e4da1674b1e1927bbd Mon Sep 17 00:00:00 2001
From: Junhui Chen <chenjunhui@fairclip.cn>
Date: Thu, 11 Sep 2025 10:08:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=A2=E9=98=85=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=A0=8F=E5=88=9D=E6=AD=A5=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/SubscriptionStatusBar.swift    | 90 +++++++++++++++----
 1 file changed, 72 insertions(+), 18 deletions(-)

diff --git a/wake/View/Subscribe/Components/SubscriptionStatusBar.swift b/wake/View/Subscribe/Components/SubscriptionStatusBar.swift
index 6aa64d6..554ec68 100644
--- a/wake/View/Subscribe/Components/SubscriptionStatusBar.swift
+++ b/wake/View/Subscribe/Components/SubscriptionStatusBar.swift
@@ -54,17 +54,19 @@ struct SubscriptionStatusBar: View {
     let status: SubscriptionStatus
     let onSubscribeTap: (() -> Void)?
     private let height: CGFloat
+    private let backgroundColor: Color?
     
-    init(status: SubscriptionStatus, height: CGFloat? = nil, onSubscribeTap: (() -> Void)? = nil) {
+    init(status: SubscriptionStatus, height: CGFloat? = nil, backgroundColor: Color? = nil, onSubscribeTap: (() -> Void)? = nil) {
         self.status = status
         self.height = height ?? 155 // 默认高度为155
+        self.backgroundColor = backgroundColor
         self.onSubscribeTap = onSubscribeTap
     }
     
     var body: some View {
         ZStack(alignment: .leading) {
             // SwiftUI 绘制的背景
-            SubscriptionBackground(status: status)
+            SubscriptionBackground(status: status, customBackground: backgroundColor)
                 .frame(maxWidth: .infinity, minHeight: 120)
                 .clipped()
             
@@ -110,30 +112,80 @@ struct SubscriptionStatusBar: View {
 // MARK: - 背景绘制
 private struct SubscriptionBackground: View {
     let status: SubscriptionStatus
+    let customBackground: Color?
     
     var body: some View {
-        ZStack(alignment: .topTrailing) {
-            RoundedRectangle(cornerRadius: 20)
-                .fill(background)
-                .shadow(color: Color.black.opacity(0.06), radius: 10, x: 0, y: 6)
-            
-            // 装饰元素（右上角）
-            if case .pioneer = status {
-                Circle()
-                    .fill(Color.black.opacity(0.08))
-                    .frame(width: 90, height: 90)
-                    .offset(x: 12, y: -12)
+        ZStack {
+            // 背景底板：自定义颜色优先，否则根据状态给出渐变
+            if let color = customBackground {
+                RoundedRectangle(cornerRadius: 20)
+                    .fill(color)
+                    .shadow(color: Color.black.opacity(0.06), radius: 10, x: 0, y: 6)
             } else {
-                Circle()
-                    .fill(Color.black.opacity(0.04))
-                    .frame(width: 70, height: 70)
+                RoundedRectangle(cornerRadius: 20)
+                    .fill(defaultBackground)
+                    .shadow(color: Color.black.opacity(0.06), radius: 10, x: 0, y: 6)
+            }
+
+            // 左上角斜条纹（装饰）
+            VStack {
+                HStack {
+                    ParallelogramRow(
+                        count: 6,
+                        itemSize: CGSize(width: 16, height: 18),
+                        shear: -0.35,
+                        cornerRadius: 2,
+                        color: .black.opacity(0.85),
+                        spacing: 1
+                    )
+                    Spacer()
+                }
+                Spacer()
+            }
+            .padding(.top, 12)
+            .padding(.leading, 16)
+
+            // 右下角斜条纹（装饰）
+            VStack {
+                Spacer()
+                HStack {
+                    Spacer()
+                    ParallelogramRow(
+                        count: 3,
+                        itemSize: CGSize(width: 16, height: 18),
+                        shear: -0.35,
+                        cornerRadius: 2,
+                        color: .black.opacity(0.85),
+                        spacing: 1
+                    )
+                }
+            }
+            .padding(.bottom, 14)
+            .padding(.trailing, 16)
+
+            // 右上角圆形徽标 + 三角指针（与示例类似）
+            VStack {
+                HStack {
+                    Spacer()
+                    ZStack {
+                        CircleView(diameter: 100, color: .black)
+                        TriangleView(
+                            width: 24,
+                            height: 24,
+                            direction: .right,
+                            color: Color(white: 0.9),
+                            rotation: .degrees(157)
+                        )
+                    }
                     .offset(x: 12, y: -12)
+                }
+                Spacer()
             }
         }
         .clipShape(RoundedRectangle(cornerRadius: 20))
     }
     
-    private var background: some ShapeStyle {
+    private var defaultBackground: LinearGradient {
         switch status {
         case .free:
             return LinearGradient(colors: [Color.white, Color.white.opacity(0.96)], startPoint: .topLeading, endPoint: .bottomTrailing)
@@ -149,6 +201,7 @@ private struct SubscriptionBackground: View {
         // Free status preview
         SubscriptionStatusBar(
             status: .free,
+            backgroundColor: Color(white: 0.98),
             onSubscribeTap: {
                 print("Subscribe tapped")
             }
@@ -159,7 +212,8 @@ private struct SubscriptionBackground: View {
         SubscriptionStatusBar(
             status: .pioneer(
                 expiryDate: Calendar.current.date(byAdding: .month, value: 6, to: Date()) ?? Date()
-            )
+            ),
+            backgroundColor: Color.orange.opacity(0.9)
         )
         .padding(.horizontal)
     }