feat(share): 新增 ShareGuideDialog 指引弹窗（打开App/用系统分享/取消，分享重构 §7.2）

2026-06-27 14:12:21 +08:00
parent b51b9be167
commit fffb353345
1 changed files with 96 additions and 0 deletions
@@ -0,0 +1,96 @@
+/**
+ * 分享指引弹窗（渠道选定后弹出）。纯展示组件：动作经 onPick 回容器，
+ * 由容器一次性 resultEvent 回投 ShareProvider（同 SharePanel 模式，不持业务逻辑）。
+ * 文案按 contentKind：文本→"请打开XX粘贴分享"；图片→"可在XX长按粘贴；或用系统分享"。
+ */
+@Component
+export struct ShareGuideDialog {
+  /** 渠道：'wechat' | 'qq' | 'douyin'。 */
+  platform: string = 'wechat';
+  /** 内容类型：'text' | 'image'。 */
+  contentKind: string = 'text';
+  /** 动作回调：'open' | 'system' | 'cancel'。 */
+  onPick: (action: string) => void = () => { };
+
+  private appName(): string {
+    if (this.platform === 'qq') {
+      return 'QQ';
+    }
+    if (this.platform === 'douyin') {
+      return '抖音';
+    }
+    return '微信';
+  }
+
+  private appIcon(): Resource {
+    if (this.platform === 'qq') {
+      return $r('app.media.share_qq');
+    }
+    if (this.platform === 'douyin') {
+      return $r('app.media.share_douyin');
+    }
+    return $r('app.media.share_wechat');
+  }
+
+  private hint(): string {
+    const name: string = this.appName();
+    return this.contentKind === 'image'
+      ? `图片已复制，可在${name}长按粘贴；或点下方用系统分享`
+      : `内容已复制，请打开${name}粘贴分享`;
+  }
+
+  build() {
+    Column() {
+      Blank()
+        .layoutWeight(1)
+        .width('100%')
+        .onClick(() => this.onPick('cancel'))
+
+      Column() {
+        Image(this.appIcon())
+          .width(48)
+          .height(48)
+          .objectFit(ImageFit.Contain)
+          .margin({ top: 16 })
+        Text(this.hint())
+          .fontSize(14)
+          .fontColor('#333333')
+          .textAlign(TextAlign.Center)
+          .margin({ top: 12, bottom: 12 })
+          .padding({ left: 20, right: 20 })
+
+        Divider().color('#EEEEEE')
+        Text(`打开${this.appName()}`)
+          .fontSize(16)
+          .fontColor('#1989FA')
+          .width('100%')
+          .textAlign(TextAlign.Center)
+          .padding({ top: 14, bottom: 14 })
+          .onClick(() => this.onPick('open'))
+        Divider().color('#EEEEEE')
+        Text('用系统分享')
+          .fontSize(16)
+          .fontColor('#333333')
+          .width('100%')
+          .textAlign(TextAlign.Center)
+          .padding({ top: 14, bottom: 14 })
+          .onClick(() => this.onPick('system'))
+        Divider().color('#EEEEEE')
+        Text('取消')
+          .fontSize(16)
+          .fontColor('#666666')
+          .width('100%')
+          .textAlign(TextAlign.Center)
+          .padding({ top: 14, bottom: 14 })
+          .onClick(() => this.onPick('cancel'))
+      }
+      .width('100%')
+      .backgroundColor(Color.White)
+      .borderRadius({ topLeft: 16, topRight: 16 })
+      .onClick(() => { /* 消费点击，避免穿透到遮罩 */ })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor('rgba(0,0,0,0.45)')
+  }
+}