feat(share): 文本分享指引框重做为分步引导卡片(参考截图),去掉系统分享

ShareGuideDialog: 居中卡片 标题{渠道}分享准备完成 + 内容已复制到剪贴板 + 微信/QQ/抖音三套分步指引
+ 两按钮(稍后分享/立即打开{渠道},渠道主题色)。文本不再提供系统分享(移除onGuideAction system分支+systemText)。
容器移除 contentKind 接线。
This commit is contained in:
lanterngamescn
2026-06-27 15:52:05 +08:00
parent 290b7db6ea
commit 0b6c5dfc54
3 changed files with 87 additions and 72 deletions
@@ -1,15 +1,13 @@
/**
* 分享指引弹窗(渠道选定后弹出)。纯展示组件:动作经 onPick 回容器,
* 由容器一次性 resultEvent 回投 ShareProvider(同 SharePanel 模式,不持业务逻辑)
* 文案按 contentKind:文本→"请打开XX粘贴分享";图片→"可在XX长按粘贴;或用系统分享"
* 分享指引弹窗(文本分享用;图片分享走系统分享面板、不经此)。居中卡片:
* 标题「{渠道}分享准备完成」+「内容已复制到剪贴板」+ 分步指引 + 「稍后分享」/「立即打开{渠道}」
* 纯展示组件:动作经 onPick 回容器,由容器一次性 resultEvent 回投 ShareProvider
*/
@Component
export struct ShareGuideDialog {
/** 渠道:'wechat' | 'qq' | 'douyin'。 */
platform: string = 'wechat';
/** 内容类型:'text' | 'image'。 */
contentKind: string = 'text';
/** 动作回调:'open' | 'system' | 'cancel'。 */
/** 动作回调:'open'(立即打开App| 'cancel'(稍后分享/点空白)。 */
onPick: (action: string) => void = () => { };
private appName(): string {
@@ -22,75 +20,108 @@ export struct ShareGuideDialog {
return '微信';
}
private appIcon(): Resource {
/** 渠道主题色(标题序号徽标 + 打开按钮)。 */
private appColor(): string {
if (this.platform === 'qq') {
return $r('app.media.share_qq');
return '#12B7F5';
}
if (this.platform === 'douyin') {
return $r('app.media.share_douyin');
return '#FE2C55';
}
return $r('app.media.share_wechat');
return '#07C160';
}
private hint(): string {
const name: string = this.appName();
return this.contentKind === 'image'
? `图片已复制,可在${name}长按粘贴;或点下方用系统分享`
: `内容已复制,请打开${name}粘贴分享`;
/** 各渠道"分享到好友或群聊"分步文案(差异主要在第 1 步进入聊天的入口)。 */
private steps(): string[] {
if (this.platform === 'qq') {
return ['打开QQ,进入「消息」列表', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
}
if (this.platform === 'douyin') {
return ['打开抖音,点击右下角「消息」', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
}
return ['打开微信,进入聊天列表', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
}
@Builder
stepRow(index: number, text: string) {
Row() {
Text(`${index + 1}`)
.fontSize(13)
.fontColor(Color.White)
.width(20)
.height(20)
.textAlign(TextAlign.Center)
.backgroundColor(this.appColor())
.borderRadius(4)
Text(text)
.fontSize(14)
.fontColor('#333333')
.margin({ left: 10 })
.layoutWeight(1)
}
.width('100%')
.margin({ top: 10 })
.alignItems(VerticalAlign.Center)
}
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())
Text(`${this.appName()}分享准备完成`)
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor('#222222')
.width('100%')
Row() {
Text('✅').fontSize(15)
Text('内容已复制到剪贴板')
.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'))
.margin({ left: 6 })
}
.width('100%')
.margin({ top: 14 })
Text('🎯 分享到好友或群聊步骤:')
.fontSize(14)
.fontColor('#666666')
.width('100%')
.margin({ top: 14 })
ForEach(this.steps(), (item: string, index: number) => {
this.stepRow(index, item)
})
Row() {
Button('稍后分享')
.fontSize(16)
.fontColor('#666666')
.backgroundColor('#F2F2F2')
.layoutWeight(1)
.onClick(() => this.onPick('cancel'))
Button(`立即打开${this.appName()}`)
.fontSize(16)
.fontColor(Color.White)
.backgroundColor(this.appColor())
.layoutWeight(1)
.margin({ left: 12 })
.onClick(() => this.onPick('open'))
}
.width('100%')
.margin({ top: 22 })
}
.width('82%')
.padding(20)
.backgroundColor(Color.White)
.borderRadius({ topLeft: 16, topRight: 16 })
.borderRadius(16)
.onClick(() => { /* 消费点击,避免穿透到遮罩 */ })
}
.width('100%')
.height('100%')
.backgroundColor('rgba(0,0,0,0.45)')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.onClick(() => this.onPick('cancel'))
}
}
@@ -56,7 +56,6 @@ export struct BridgeGameContainer {
/** 分享指引窗显隐(渠道选定后叠在 Stack 顶层)。 */
@State private shareGuideVisible: boolean = false;
private shareGuidePlatform: string = '';
private shareGuideKind: string = '';
/** 当前指引窗的一次性回投事件名(用户选动作后 emit 回 ShareProvider)。 */
private shareGuideResultEvent: string = '';
@@ -166,7 +165,6 @@ export struct BridgeGameContainer {
}
const req = p as ShareGuideRequest;
this.shareGuidePlatform = req.platform;
this.shareGuideKind = req.contentKind;
this.shareGuideResultEvent = req.resultEvent;
this.shareGuideVisible = true;
}
@@ -431,7 +429,6 @@ export struct BridgeGameContainer {
if (this.shareGuideVisible) {
ShareGuideDialog({
platform: this.shareGuidePlatform,
contentKind: this.shareGuideKind,
onPick: (action: string) => this.emitShareGuideResult(action),
})
}
@@ -241,13 +241,8 @@ export class ShareProvider implements CapabilityProvider {
if (platform === 'wechat') {
this.reportResult(2, reportType);
}
} else if (action === 'system') {
this.systemText(uiCtx, bean);
if (platform === 'wechat') {
this.reportResult(2, reportType);
}
} else {
// cancel
// 稍后分享 / 取消:仅微信回执取消。
if (platform === 'wechat') {
this.reportResult(3, reportType);
}
@@ -299,14 +294,6 @@ export class ShareProvider implements CapabilityProvider {
// —— 系统分享(图片可靠交付 / 文本兜底;文本不下发 url)——
private systemText(uiCtx: common.UIAbilityContext, bean: SharetypeBean): void {
const text: string = buildShareText(bean.title, bean.description);
const record: systemShare.SharedRecord = {
utd: utd.UniformDataType.PLAIN_TEXT, content: text !== '' ? text : ' ',
};
this.showSystemShare(uiCtx, record);
}
private systemImage(uiCtx: common.UIAbilityContext, filePath: string, bean: SharetypeBean): void {
const typeId: string =
utd.getUniformDataTypeByFilenameExtension(this.extOf(filePath), utd.UniformDataType.IMAGE);