频道编辑弹窗

+import { TopNavDTO } from 'wdBean';
+
+
+const INDEX_SETTING_TITLE: string = '首页设置'
+const INDEX_SETTING_SUBTITLE: string = '将指定频道设置为首页'
+const MY_CHANNEL: string = '我的频道'
+const EDIT_TEXT: string = '编辑'
+const EDIT_DOWN: string = '完成'
+const MORE_CHANNEL: string = '更多频道'
+const LOCAL_CHANNEL: string = '地方频道'
+
+@CustomDialog
+struct CustomDialogExample {
+  @State indexSettingArray: Array<string> = ['推荐', '热点']
+  @State indexSettingTabIndex: number = 1
+  @State myChannelList: Array<TopNavDTO> = [
+    {
+      channelId: 0,
+      channelStyle: 1,
+      channelType: 1,
+      defaultPermitted: 1,
+      delPermitted: 1,
+      fontCColor: '#000000',
+      fontColor: '#000000',
+      headlinesOn: 0,
+      homeChannel: '1',
+      iconCUrl: '',
+      iconCUrlSize: '',
+      iconUrl: '',
+      iconUrlSize: '',
+      localChannel: '',
+      moreChannel: '',
+      movePermitted: 0,
+      myChannel: '1',
+      name: '推荐',
+      num: 0,
+      pageId: 21212,
+      pageType: '',
+      underlineCColor: ''
+    },
+    {
+      channelId: 1,
+      channelStyle: 1,
+      channelType: 1,
+      defaultPermitted: 1,
+      delPermitted: 1,
+      fontCColor: '#000000',
+      fontColor: '#000000',
+      headlinesOn: 0,
+      homeChannel: '1',
+      iconCUrl: '',
+      iconCUrlSize: '',
+      iconUrl: '',
+      iconUrlSize: '',
+      localChannel: '',
+      moreChannel: '',
+      movePermitted: 0,
+      myChannel: '1',
+      name: '热点',
+      num: 0,
+      pageId: 21212,
+      pageType: '',
+      underlineCColor: ''
+    },
+    {
+      channelId: 2,
+      channelStyle: 1,
+      channelType: 1,
+      defaultPermitted: 1,
+      delPermitted: 1,
+      fontCColor: '#000000',
+      fontColor: '#000000',
+      headlinesOn: 0,
+      homeChannel: '',
+      iconCUrl: '',
+      iconCUrlSize: '',
+      iconUrl: '',
+      iconUrlSize: '',
+      localChannel: '',
+      moreChannel: '',
+      movePermitted: 0,
+      myChannel: '1',
+      name: '视频',
+      num: 0,
+      pageId: 21212,
+      pageType: '',
+      underlineCColor: ''
+    },
+    {
+      channelId: 3,
+      channelStyle: 1,
+      channelType: 1,
+      defaultPermitted: 1,
+      delPermitted: 1,
+      fontCColor: '#000000',
+      fontColor: '#000000',
+      headlinesOn: 0,
+      homeChannel: '',
+      iconCUrl: '',
+      iconCUrlSize: '',
+      iconUrl: '',
+      iconUrlSize: '',
+      localChannel: '',
+      moreChannel: '',
+      movePermitted: 0,
+      myChannel: '1',
+      name: '云课堂',
+      num: 0,
+      pageId: 21212,
+      pageType: '',
+      underlineCColor: ''
+    },
+
+  ]
+  @State moreChannelList: Array<TopNavDTO> = [
+    {
+      channelId: 4,
+      channelStyle: 1,
+      channelType: 1,
+      defaultPermitted: 1,
+      delPermitted: 1,
+      fontCColor: '#000000',
+      fontColor: '#000000',
+      headlinesOn: 0,
+      homeChannel: '',
+      iconCUrl: '',
+      iconCUrlSize: '',
+      iconUrl: '',
+      iconUrlSize: '',
+      localChannel: '',
+      moreChannel: '1',
+      movePermitted: 0,
+      myChannel: '',
+      name: '房产',
+      num: 0,
+      pageId: 21212,
+      pageType: '',
+      underlineCColor: ''
+    },
+    {
+      channelId: 5,
+      channelStyle: 1,
+      channelType: 1,
+      defaultPermitted: 1,
+      delPermitted: 1,
+      fontCColor: '#000000',
+      fontColor: '#000000',
+      headlinesOn: 0,
+      homeChannel: '',
+      iconCUrl: '',
+      iconCUrlSize: '',
+      iconUrl: '',
+      iconUrlSize: '',
+      localChannel: '',
+      moreChannel: '1',
+      movePermitted: 0,
+      myChannel: '',
+      name: '生态',
+      num: 0,
+      pageId: 21212,
+      pageType: '',
+      underlineCColor: ''
+    },
+    {
+      channelId: 6,
+      channelStyle: 1,
+      channelType: 1,
+      defaultPermitted: 1,
+      delPermitted: 1,
+      fontCColor: '#000000',
+      fontColor: '#000000',
+      headlinesOn: 0,
+      homeChannel: '',
+      iconCUrl: '',
+      iconCUrlSize: '',
+      iconUrl: '',
+      iconUrlSize: '',
+      localChannel: '',
+      moreChannel: '1',
+      movePermitted: 0,
+      myChannel: '',
+      name: '健康',
+      num: 0,
+      pageId: 21212,
+      pageType: '',
+      underlineCColor: ''
+    }
+  ]
+  @State localChannelList: Array<TopNavDTO> = [
+    {
+      channelId: 7,
+      channelStyle: 1,
+      channelType: 1,
+      defaultPermitted: 1,
+      delPermitted: 1,
+      fontCColor: '#000000',
+      fontColor: '#000000',
+      headlinesOn: 0,
+      homeChannel: '',
+      iconCUrl: '',
+      iconCUrlSize: '',
+      iconUrl: '',
+      iconUrlSize: '',
+      localChannel: '1',
+      moreChannel: '',
+      movePermitted: 0,
+      myChannel: '',
+      name: '北京',
+      num: 0,
+      pageId: 21212,
+      pageType: '',
+      underlineCColor: ''
+    },
+    {
+      channelId: 8,
+      channelStyle: 1,
+      channelType: 1,
+      defaultPermitted: 1,
+      delPermitted: 1,
+      fontCColor: '#000000',
+      fontColor: '#000000',
+      headlinesOn: 0,
+      homeChannel: '',
+      iconCUrl: '',
+      iconCUrlSize: '',
+      iconUrl: '',
+      iconUrlSize: '',
+      localChannel: '1',
+      moreChannel: '',
+      movePermitted: 0,
+      myChannel: '',
+      name: '上海',
+      num: 0,
+      pageId: 21212,
+      pageType: '',
+      underlineCColor: ''
+    },
+    {
+      channelId: 9,
+      channelStyle: 1,
+      channelType: 1,
+      defaultPermitted: 1,
+      delPermitted: 1,
+      fontCColor: '#000000',
+      fontColor: '#000000',
+      headlinesOn: 0,
+      homeChannel: '',
+      iconCUrl: '',
+      iconCUrlSize: '',
+      iconUrl: '',
+      iconUrlSize: '',
+      localChannel: '1',
+      moreChannel: '',
+      movePermitted: 0,
+      myChannel: '',
+      name: '江苏',
+      num: 0,
+      pageId: 21212,
+      pageType: '',
+      underlineCColor: ''
+    }
+  ]
+  @State isEditIng: boolean = false
+  myChannelItemEditHandle = (index: number): void => {
+    let item = this.myChannelList.splice(index, 1)[0]
+    if (item.moreChannel === '1') {
+      this.moreChannelList.unshift(item)
+    }
+    if (item.localChannel === '1') {
+      this.localChannelList.unshift(item)
+    }
+  }
+  controller?: CustomDialogController
+  cancel: () => void = () => {
+  }
+  confirm: () => void = () => {
+  }
+
+  build() {
+    Column() {
+
+      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
+        Image($r('app.media.icon_ren_min_ri_bao'))
+          .width(72)
+          .height(29)
+        Image($r('app.media.close_button'))
+          .width(24)
+          .onClick(() => {
+            this.controller?.close()
+          })
+      }
+      .width('100%')
+      .margin({ top: 30, bottom: 10 })
+
+      List() {
+
+        ListItem() {
+          Row() {
+            Text(INDEX_SETTING_TITLE)
+              .fontSize(16)
+              .fontWeight(600)
+              .margin({ right: 4 })
+
+            Text(INDEX_SETTING_SUBTITLE)
+              .fontSize(12)
+              .fontWeight(400)
+          }
+          .width('100%')
+          .margin({ top: 22, bottom: 16 })
+
+        }
+
+        ListItem() {
+          Flex({ justifyContent: FlexAlign.SpaceBetween }) {
+            ForEach(this.indexSettingArray, (text: string, index: number) => {
+              Button(text, { type: ButtonType.Normal, stateEffect: false })
+                .width('48%')
+                .borderRadius(2)
+                .fontColor(index === this.indexSettingTabIndex ? '#ffffff' : '#ED2800')
+                .fontSize(16)
+                .fontWeight(400)
+                .backgroundColor(index === this.indexSettingTabIndex ? '#ED2800' : '#FDE9E5')
+                .onClick(() => {
+                  this.indexSettingTabIndex = index
+                })
+            })
+          }
+          .height(36)
+          .margin({ bottom: 36 })
+        }
+
+        ListItem() {
+          Row() {
+            Text(MY_CHANNEL)
+              .fontSize(16)
+              .fontWeight(600)
+            Text(this.isEditIng ? EDIT_DOWN : EDIT_TEXT)
+              .fontSize(14)
+              .fontColor('#ED2800')
+              .onClick(() => {
+                this.isEditIng = !this.isEditIng
+              })
+          }
+          .width('100%')
+          .justifyContent(FlexAlign.SpaceBetween)
+          .margin({ bottom: 12 })
+        }
+
+        ListItem() {
+          GridRow({ columns: 4, gutter: 10 }) {
+            ForEach(this.myChannelList, (item: TopNavDTO, index: number) => {
+              GridCol() {
+                Row() {
+                  Text(item.name)
+                    .fontSize(14)
+                    .fontColor(item.homeChannel === '1' ? '#999999': '#222222')
+
+                  if (this.isEditIng && item.myChannel !== '1') {
+                    Image($r('app.media.icon_audio_close'))
+                      .width(12)
+                      .margin({ left: 1 })
+                      .onClick(() => {
+                        this.myChannelItemEditHandle(index)
+                      })
+                  }
+                }
+                .width('100%').height('100%')
+                .justifyContent(FlexAlign.Center)
+                .backgroundColor(item.homeChannel === '1' ? '#F5F5F5': '')
+              }
+              .width(80)
+              .height(40)
+              .border({
+                width: item.homeChannel === '1' ? 0 : 1,
+                color: '#EDEDED',
+                radius: 3
+              })
+            }, (item: TopNavDTO) => JSON.stringify(item))
+          }
+          .width('100%')
+          .margin({ bottom: 24 })
+        }
+
+        ListItem() {
+          Column() {
+            if (this.moreChannelList.length > 0) {
+              Text(MORE_CHANNEL)
+                .width('100%')
+                .fontSize(16)
+                .fontWeight(600)
+                .margin({ bottom: 12 })
+                .textAlign(TextAlign.Start)
+            }
+
+            GridRow({ columns: 4, gutter: 10 }) {
+              ForEach(this.moreChannelList, (item: TopNavDTO, index: number) => {
+                GridCol() {
+                  Row() {
+                    Image($r('app.media.add_icon'))
+                      .width(12)
+                      .margin({ right: 1 })
+                      .onClick(() => {
+                        this.myChannelList.push(this.moreChannelList.splice(index, 1)[0])
+                      })
+                    Text(item.name)
+                      .fontSize(14)
+                  }
+                  .width('100%').height('100%')
+                  .justifyContent(FlexAlign.Center)
+
+                }
+                .width(80)
+                .height(40)
+                .border({
+                  width: 1,
+                  color: '#EDEDED'
+                })
+              }, (item: TopNavDTO) => JSON.stringify(item))
+            }
+            .width('100%')
+            .margin({ bottom: 24 })
+
+          }
+          .width('100%')
+        }
+
+        ListItem() {
+          Column() {
+            if (this.localChannelList.length > 0) {
+              Text(LOCAL_CHANNEL)
+                .width('100%')
+                .fontSize(16)
+                .fontWeight(600)
+                .margin({ bottom: 12 })
+                .textAlign(TextAlign.Start)
+            }
+
+            GridRow({ columns: 4, gutter: 10 }) {
+              ForEach(this.localChannelList, (item: TopNavDTO, index: number) => {
+                GridCol() {
+                  Row() {
+                    Text(item.name)
+                      .fontSize(14)
+
+                    Image($r('app.media.add_icon'))
+                      .width(12)
+                      .margin({ left: 1 })
+                      .onClick(() => {
+                        this.myChannelList.push(this.localChannelList.splice(index, 1)[0])
+                      })
+                  }
+                  .width('100%').height('100%')
+                  .justifyContent(FlexAlign.Center)
+
+                }
+                .width(80)
+                .height(40)
+                .border({
+                  width: 1,
+                  color: '#EDEDED'
+                })
+              }, (item: TopNavDTO) => JSON.stringify(item))
+            }
+            .width('100%')
+            .margin({ bottom: 24 })
+          }
+          .width('100%')
+        }
+
+      }.width('100%').height('100%')
+
+    }
+    .padding(16)
+    .backgroundColor('#ffffff')
+  }
+}
+
+@Entry
+@Component
+struct ChannelSubscriptionLayout {
+  @State textValue: string = ''
+  @State inputValue: string = 'click me'
+  dialogController: CustomDialogController | null = new CustomDialogController({
+    builder: CustomDialogExample({
+      cancel: () => {
+        this.onCancel()
+      },
+      confirm: () => {
+        this.onAccept()
+      },
+    }),
+    cancel: this.exitApp,
+    autoCancel: true,
+    alignment: DialogAlignment.TopEnd,
+    customStyle: true,
+  })
+
+  aboutToDisappear() {
+    this.dialogController = null // 将dialogController置空
+  }
+
+  onCancel() {
+    console.info('Callback when the first button is clicked')
+  }
+
+  onAccept() {
+    console.info('Callback when the second button is clicked')
+  }
+
+  exitApp() {
+    console.info('Click the callback in the blank area')
+  }
+
+  build() {
+    Row() {
+      Image($r('app.media.channel_button'))
+        .onClick(() => {
+          if (this.dialogController != null) {
+            this.dialogController.open()
+          }
+        }).width($r('app.float.top_tab_bar_height'))
+    }.backgroundColor('#ffffff')
+  }
+}
+
+export { ChannelSubscriptionLayout }
\ No newline at end of file

@@ -2,7 +2,7 @@ import { Action, CompDTO, Params, TopNavDTO } from 'wdBean';
 import { LazyDataSource, Logger } from 'wdKit';
 import { WDRouterRule } from 'wdRouter';
 import { PageComponent } from './PageComponent';
-
+import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout'
 const TAG = 'TopNavigationComponent';
 
 /**
@@ -99,27 +99,32 @@ export struct TopNavigationComponent {
       .width('100%')
       .height(40)
       .visibility(this._currentNavIndex == 0 ? Visibility.Visible : Visibility.None)
+      Stack({alignContent:Alignment.TopEnd}){
 
-      Tabs() {
-        ForEach(this.topNavList, (navItem: TopNavDTO, index: number) => {
-          TabContent() {
-            PageComponent({
-              currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
-              navIndex: index,
-              pageId: navItem.pageId + '',
-              channelId: navItem.channelId + ''
-            })
-          }
-          .tabBar(this.tabBarBuilder(navItem, index))
-        }, (navItem: TopNavDTO) => JSON.stringify(navItem));
+        Tabs() {
+          ForEach(this.topNavList, (navItem: TopNavDTO, index: number) => {
+            TabContent() {
+              PageComponent({
+                currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
+                navIndex: index,
+                pageId: navItem.pageId + '',
+                channelId: navItem.channelId + ''
+              })
+            }
+            .tabBar(this.tabBarBuilder(navItem, index))
+          }, (navItem: TopNavDTO) => JSON.stringify(navItem));
+        }
+        .barHeight($r('app.float.top_tab_bar_height'))
+        .barMode(BarMode.Scrollable)
+        .vertical(false)
+        .onChange((index: number) => {
+          Logger.info(TAG, `onChange index : ${index}`);
+          this.currentTopNavSelectedIndex = index;
+        })
+        
+        ChannelSubscriptionLayout()
       }
-      .barHeight($r('app.float.top_tab_bar_height'))
-      .barMode(BarMode.Scrollable)
-      .vertical(false)
-      .onChange((index: number) => {
-        Logger.info(TAG, `onChange index : ${index}`);
-        this.currentTopNavSelectedIndex = index;
-      })
+
     }
   }