feat(app): app shell tabs with home entries and common loading/error views（F2）

2026-08-15 00:40:53 +08:00
parent 9503c6e259
commit 198761677c
3 changed files with 334 additions and 5 deletions
@@ -0,0 +1,67 @@
+/**
+ * ErrorView —— 通用失败态组件（F2）。
+ *
+ * NFR-UX-02「失败必有原因 + 下一步指引」的落地组件：
+ *  - message：失败原因（对应 ApiError.message）
+ *  - hint：下一步指引（对应 ApiError.hint，可空则不渲染）
+ *  - onRetry：可选「重试」回调，不传则不渲染按钮
+ * 其它 FE 任务可直接 import 本组件复用（目录带 f2 前缀，迁移由协调者做）。
+ */
+
+const TEXT_PRIMARY: string = '#222222'
+const TEXT_SECONDARY: string = '#8A9099'
+const WARN: string = '#FF9F0A'
+const WARN_BG: string = '#FFF4E0'
+const ACCENT: string = '#FF5A79'
+
+@Component
+export struct ErrorView {
+  @Prop message: string = '请求失败，请检查网络'
+  @Prop hint: string = ''
+  @Prop retryText: string = '重试'
+  onRetry?: () => void
+
+  build() {
+    Column({ space: 10 }) {
+      Text('!')
+        .fontSize(26)
+        .fontWeight(FontWeight.Bold)
+        .fontColor(WARN)
+        .width(56)
+        .height(56)
+        .textAlign(TextAlign.Center)
+        .borderRadius(28)
+        .backgroundColor(WARN_BG)
+      Text(this.message)
+        .fontSize(15)
+        .fontWeight(FontWeight.Medium)
+        .fontColor(TEXT_PRIMARY)
+        .textAlign(TextAlign.Center)
+      if (this.hint !== '') {
+        Text(this.hint)
+          .fontSize(13)
+          .fontColor(TEXT_SECONDARY)
+          .textAlign(TextAlign.Center)
+      }
+      if (this.onRetry !== undefined) {
+        Button(this.retryText)
+          .fontSize(15)
+          .fontColor(Color.White)
+          .backgroundColor(ACCENT)
+          .borderRadius(20)
+          .height(40)
+          .padding({ left: 32, right: 32 })
+          .margin({ top: 6 })
+          .onClick(() => {
+            if (this.onRetry !== undefined) {
+              this.onRetry()
+            }
+          })
+      }
+    }
+    .width('100%')
+    .height('100%')
+    .justifyContent(FlexAlign.Center)
+    .padding({ left: 32, right: 32 })
+  }
+}