HarmonyOS 如何把Popup这里的配置逻辑尽可能封装起来方便调用，业务调用方还是要写不少重复代码

参考示例如下：

interface BubbleEvent {
  isVisible: boolean
}

interface BubbleOption {
  width?: Dimension /// 气泡宽度
  popupColor?: Color | string | Resource | number
  radius?: Dimension
  shadow?: ShadowOptions | ShadowStyle
  placement?: Placement /// 气泡组件优先显示的位置
  offset?: Position /// 气泡的位置偏移
  targetSpace?: Length
  backgroundBlurStyle?: BlurStyle
  enableArrow?: boolean
  arrowOffset?: Length /// popup箭头在弹窗处的偏移
  arrowPointPosition?: ArrowPointPosition /// 箭头位置
  arrowWidth?: Dimension /// 箭头宽度
  arrowHeight?: Dimension /// 箭头高度

  mask?: boolean
  maskColor?: ResourceColor
  autoCancel?: boolean
  showInSubWindow?: boolean
  focusable?: boolean
  onStateChange?: (event: BubbleEvent) => void
}

interface KSBubbleOptions {
  src?: string | PixelMap | Resource
  title?: string
  textArr?: string[]
  duration?: number
  option?: BubbleOption
}

class KSCustomBubbleOption {
  public option: CustomPopupOptions;

  /// 构造函数
  constructor(window: CustomComponent, bubbleOptions: KSBubbleOptions) {
    this.option = {
      builder: KSBubbleStyle.bind(window, (bubbleOptions.title || '这是标题文字'))
    }
    this.option.width = bubbleOptions.option ? bubbleOptions.option.width : undefined
    this.option.popupColor = bubbleOptions.option ? bubbleOptions.option.popupColor : "#FFFFFF"
    this.option.radius = bubbleOptions.option ? bubbleOptions.option.radius : 4
    this.option.shadow = bubbleOptions.option ? bubbleOptions.option.shadow : ShadowStyle.OUTER_DEFAULT_MD
    this.option.placement = bubbleOptions.option ? bubbleOptions.option.placement : undefined
    this.option.offset = bubbleOptions.option ? bubbleOptions.option.offset : undefined
    this.option.targetSpace = bubbleOptions.option ? bubbleOptions.option.targetSpace : undefined
    this.option.backgroundBlurStyle =
      bubbleOptions.option ? bubbleOptions.option.backgroundBlurStyle : BlurStyle.COMPONENT_ULTRA_THICK

    this.option.enableArrow = bubbleOptions.option ? bubbleOptions.option.enableArrow : true
    this.option.arrowOffset = bubbleOptions.option ? bubbleOptions.option.arrowOffset : undefined
    this.option.arrowPointPosition = bubbleOptions.option ? bubbleOptions.option.arrowPointPosition : undefined
    this.option.arrowWidth = bubbleOptions.option ? bubbleOptions.option.arrowWidth : undefined
    this.option.arrowHeight = bubbleOptions.option ? bubbleOptions.option.arrowHeight : undefined
    this.option.mask = bubbleOptions.option ? bubbleOptions.option.mask : false
    this.option.maskColor = bubbleOptions.option ? bubbleOptions.option.maskColor : '#08182431'

    this.option.autoCancel = bubbleOptions.option ? bubbleOptions.option.autoCancel : true
    this.option.showInSubWindow = bubbleOptions.option ? bubbleOptions.option.showInSubWindow : false
    this.option.focusable = bubbleOptions.option ? bubbleOptions.option.focusable : true
    this.option.onStateChange = bubbleOptions.option ? bubbleOptions.option.onStateChange : undefined
  }
}

@Builder
export function KSBubbleStyle(title: string) {
  Column() {
    Text(title)
  }
}

@Component
export struct TextBubbleBuilder {
  @State status: boolean = false
  title: string = ''
  message: string = ''
  options: KSCustomBubbleOption = new KSCustomBubbleOption(this, {})

  build() {
    Flex({ direction: FlexDirection.Column }) {
      Text(this.title).fontSize(16).fontColor(Color.White).margin({ left: 10, top: 5, bottom: 5 })
      Text(this.message).fontSize(14).fontColor(Color.Gray).margin({ left: 10, bottom: 10 })
      Button('点我弹出')
        .size({ width: '90%', height: 36 })
        .fontColor(Color.White)
        .backgroundColor(Color.Blue)
        .margin({ left: 16 })
        .onClick(() => {
          this.status = !this.status
          if (this.status) {
            setTimeout(() => {
              this.status = false
            }, 2000)
          }
        })
        .bindPopup(this.status, this.options.option)
    }.width('85%').height('15%').margin({ top: 5, bottom: 5 }).backgroundColor(Color.Gray)
  }
}

@Entry
@Component
struct BubbleExample {
  @State status: boolean = false
  build() {
    Column() {
      TextBubbleBuilder({
        title: '文本气泡',
        message: '短文本',
        status: this.status,
        options: new KSCustomBubbleOption(this, { title: '记录世界我记录你记录世界我记录你' })
      })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.