【HarmonyOS 5.0.0 或以上】构建选项卡组件 Tabs：支持滑动切换 / 图文组合 / 吸顶样式

🎯 目标

实现一个可高度定制的选项卡组件 CommonTabs，满足以下使用场景：

• 标准横向 Tab 栏，支持滑动切换页面内容

• Tab 项支持文字 / 图标 /二者组合展示

• 当前选中项高亮，带底部滑动指示条

• 支持吸顶效果 + 配合滚动联动（后续篇扩展）

• 可切换内容插槽或与页面路由结合使用

---

🧱 样式示意

[ 推荐 ]  [ 视频 ]  [ 笔记 ]
  ↑ 底部高亮条跟随滑动切换

---

🧰 组件实现：CommonTabs.ets

@Component
export struct CommonTabs {
  @Prop tabs: Array<{ label: string, icon?: string }> = []
  @Prop current: number = 0
  @Prop onChange: (index: number) => void = () => {}

  build() {
    Column() {
      // Tab 栏
      Row({ space: 24 }).justifyContent(FlexAlign.SpaceAround) {
        ForEach(this.tabs, (tab, idx) => {
          Column()
            .alignItems(HorizontalAlign.Center)
            .onClick(() => this.onChange(idx)) {
            if (tab.icon) {
              Image(tab.icon).width(20).height(20).margin({ bottom: 4 })