diff --git a/entry/src/main/ets/componets/common/SideBar.ets b/entry/src/main/ets/componets/common/SideBar.ets index e1de7629..bebc2ea2 100644 --- a/entry/src/main/ets/componets/common/SideBar.ets +++ b/entry/src/main/ets/componets/common/SideBar.ets @@ -2,63 +2,35 @@ * @author Andy * @datetime 2024/7/6 01:06 * @className: SideBar - * 分类左侧列表，支持是否开启角标 + * 分类左侧列表，支持是否开启角标，支持是否开启拖拽 */ import { GroupList, GroupPartList } from '../../database/entities/BookSource' @Component export default struct SideBar { @Link currentIndex: number - @Prop sideBarList: GroupList[] | GroupPartList[] | string[] = [] + @Link sideBarList: GroupList[] | GroupPartList[] | string[] @Prop isBadge: boolean = false - clickAction: Function = (_index: number) => {} + @Prop isDrag: boolean = false + clickAction: Function = (_index: number) => { + } scroller?: Scroller = undefined + onDragChange: (list: GroupList[] | GroupPartList[] | string[]) => void = (_list) => {} + + // 交换listArr数组中listItem的位置 + changeListItemIndex(index1: number, index2: number) { + let tempItem = this.sideBarList[index1]; + this.sideBarList[index1] = this.sideBarList[index2]; + this.sideBarList[index2] = tempItem; + this.onDragChange(this.sideBarList) + } build() { List({ scroller: this.scroller }) { ForEach(this.sideBarList, (item: GroupList | string, index: number) => { ListItem() { Stack({ alignContent: Alignment.TopStart }) { - Column() { - Stack({ alignContent: Alignment.TopEnd }) { - Text(typeof item === 'string' ? item : item.title) - .height('48vp') - .textAlign(TextAlign.Center) - .fontWeight(this.currentIndex === index ? FontWeight.Bold : FontWeight.Normal) - - if (this.isBadge && typeof item !== 'string') { - Column() { - Text(item.list.length.toString()) - .fontSize(10) - .fontWeight(500) - .fontColor(Color.White) - .textAlign(TextAlign.Center) - } - .height(16) - .position({ - right: -10 - }) - .justifyContent(FlexAlign.Center) - .padding({ left: 4, right: 4 }) - .borderRadius(20) - .backgroundColor(0xEF4444) - } - } - } - .width('100%') - .alignItems(HorizontalAlign.Center) - .backgroundColor(this.currentIndex === index ? 0xF5F5F5 : Color.White) - .borderRadius({ - topRight: this.currentIndex + 1 === index ? 12 : 0, - bottomRight: this.currentIndex - 1 === index || this.sideBarList.length === index + 1 ? 12 : 0 - }) - .animation({ - duration: 100, - curve: Curve.Linear - }) - .onClick(() => { - this.clickAction(index) - }) + this.ItemBuilder(item, index) if (this.currentIndex === index) { Row() @@ -72,14 +44,87 @@ export default struct SideBar { } } } + .height(48) }) } .height('100%') .width('100%') .scrollBar(BarState.Off) + .lanes({ minLength: 48, maxLength: 88 }) .borderRadius({ topRight: 12, bottomRight: 12 }) + .onItemDragStart((event: ItemDragInfo, index: number) => { + console.info('TagInfo index:', index) + if (!this.isDrag) { + return; + } + const item = this.sideBarList[index] as GroupList; + return this.ItemBuilder(item, index, 88); + }) + .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { + if (!this.isDrag) return; + if (!isSuccess || insertIndex >= this.sideBarList.length) { + return; + } + this.changeListItemIndex(itemIndex, insertIndex); + }) + } + + @Builder + ItemBuilder(item: GroupList | string, index: number, width: number | string = '100%') { + Row() { + Stack({ alignContent: Alignment.TopEnd }) { + Text(typeof item === 'string' ? item : item.title) + .height(48) + .textAlign(TextAlign.Center) + .fontWeight(this.currentIndex === index ? FontWeight.Bold : FontWeight.Normal) + + if (this.isBadge && typeof item !== 'string') { + Column() { + Text(item.list.length.toString()) + .fontSize(10) + .fontWeight(500) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + } + .height(16) + .position({ + right: -10 + }) + .justifyContent(FlexAlign.Center) + .padding({ left: 4, right: 4 }) + .borderRadius(20) + .backgroundColor(0xEF4444) + } + } + + if (this.isDrag) { + Column() { + Image($r('app.media.drag')) + .width(32) + .width(24) + .draggable(false) + } + .padding(5) + .margin({ right: -10 }) + } + } + .width(width) + .justifyContent(FlexAlign.Center) + .alignItems(VerticalAlign.Center) + .backgroundColor(this.currentIndex === index ? 0xF5F5F5 : Color.White) + .borderRadius({ + topRight: this.currentIndex + 1 === index ? 12 : 0, + bottomRight: this.currentIndex - 1 === index || this.sideBarList.length === index + 1 ? 12 : 0 + }) + .animation({ + duration: 100, + curve: Curve.Linear + }) + .onClick(() => { + this.clickAction(index) + }) } } \ No newline at end of file diff --git a/entry/src/main/ets/componets/source/SourceView.ets b/entry/src/main/ets/componets/source/SourceView.ets index 7babe2a0..d88d0bce 100644 --- a/entry/src/main/ets/componets/source/SourceView.ets +++ b/entry/src/main/ets/componets/source/SourceView.ets @@ -146,7 +146,20 @@ export default struct SourceView { clickAction: (index: number) => { this.scrollChangeAction(index, true) }, - isBadge: !this.isBatch + isBadge: !this.isBatch, + isDrag: this.isBatch, + onDragChange: async (_list) => { + const bookSourcePartList = this.groupList.reduce((acc: BookSourcePart[], item) => acc.concat(item.list), []) + const sortBookSourcePartList = bookSourcePartList.map((item, index) => { + if (index !== 0) { + item.customOrder = bookSourcePartList[index - 1].customOrder + 1 + } + return item + }) + console.info('TagInfo: 更新成功') + await BookSourceDao.batchUpdateFlow(sortBookSourcePartList) + this.refreshCount += 1 + } }) .width(88) diff --git a/entry/src/main/ets/database/entities/BookSource.ets b/entry/src/main/ets/database/entities/BookSource.ets index ab061e0f..c71582ff 100644 --- a/entry/src/main/ets/database/entities/BookSource.ets +++ b/entry/src/main/ets/database/entities/BookSource.ets @@ -95,6 +95,12 @@ export const BOOK_SOURCE_TYPE: Record = { 1 : '有声' } +export const SOURCE_GROUP_MAP: Record = { + 0: ['男频', '女频', '综合', '出版', '下载', '正版', '轻文', '网络', '其他'], + 1: ['听书', '音乐', '正版', '其他'], + 2: ['国漫', '日漫', '韩漫', '美漫', '综合', '网络', '正版', '其他'] +} + export interface BookSourceDb extends Omit { // 发现规则 ruleExplore?: string diff --git a/entry/src/main/ets/pages/view/Find/BookSource/AddSourcePage.ets b/entry/src/main/ets/pages/view/Find/BookSource/AddSourcePage.ets index 786227f1..d602e10e 100644 --- a/entry/src/main/ets/pages/view/Find/BookSource/AddSourcePage.ets +++ b/entry/src/main/ets/pages/view/Find/BookSource/AddSourcePage.ets @@ -8,7 +8,7 @@ import FormItem from '../../../../componets/Form/FormItem'; import SourceDebug from './components/SourceDebug'; import { JSON } from '@kit.ArkTS'; import BookSourceDao from '../../../../database/dao/BookSourceDao'; -import { BookSource, BOOK_SOURCE_TYPE, GRADE_TYPE } from '../../../../database/entities/BookSource'; +import { BookSource, BOOK_SOURCE_TYPE, GRADE_TYPE, SOURCE_GROUP_MAP } from '../../../../database/entities/BookSource'; interface RouteParams { id: string, @@ -265,22 +265,15 @@ struct AddSourcePage { .fontColor(this.formModel.bookSourceType !== undefined ? '#E0000000' : '#73000000') .onSelect((index: number, text?: string | undefined) => { this.formModel.bookSourceType = [0, 2, 1][index] + this.formModel.bookSourceGroup = SOURCE_GROUP_MAP[this.formModel.bookSourceType ?? 0][0] }) .backgroundColor('#f5f5f5') .layoutWeight(1) Row().width(16) - Select([ - { value: '男频' }, - { value: '女频' }, - { value: '综合' }, - { value: '出版' }, - { value: '下载' }, - { value: '正版' }, - { value: '轻文' }, - { value: '网络' }, - { value: '其他' } - ]) - .value(this.formModel.bookSourceGroup ?? '男频') + Select( + SOURCE_GROUP_MAP[this.formModel.bookSourceType ?? 0].map(item => ({ value: item } as SelectOption)) + ) + .value(this.formModel.bookSourceGroup ?? SOURCE_GROUP_MAP[this.formModel.bookSourceType ?? 0][0]) .borderRadius(4) .fontColor(this.formModel.bookSourceGroup ? '#E0000000' : '#73000000') .onSelect((index: number, text: string) => { diff --git a/entry/src/main/ets/pages/view/Find/BookSource/components/SourceView.ets b/entry/src/main/ets/pages/view/Find/BookSource/components/SourceView.ets index 52423070..8d0f14f6 100644 --- a/entry/src/main/ets/pages/view/Find/BookSource/components/SourceView.ets +++ b/entry/src/main/ets/pages/view/Find/BookSource/components/SourceView.ets @@ -228,7 +228,20 @@ export default struct SourceView { clickAction: (index: number) => { this.scrollChangeAction(index, true) }, - isBadge: !this.isBatch + isBadge: !this.isBatch, + isDrag: this.isBatch, + onDragChange: async (_list) => { + const bookSourcePartList = this.groupList.reduce((acc: BookSourcePart[], item) => acc.concat(item.list), []) + const sortBookSourcePartList = bookSourcePartList.map((item, index) => { + if (index !== 0) { + item.customOrder = bookSourcePartList[index - 1].customOrder + 1 + } + return item + }) + console.info('TagInfo bookSourcePartList:', JSON.stringify(bookSourcePartList)) + await BookSourceDao.batchUpdateFlow(sortBookSourcePartList) + this.refreshCount += 1 + } }) .width(88) @@ -433,7 +446,6 @@ export default struct SourceView { .onClick(async () => { this.isBatch = false this.activeNameMap = {} - BookSourceDao.batchUpdateFlow(this.sourceList) this.getList() }) } diff --git a/entry/src/main/resources/base/media/drag.svg b/entry/src/main/resources/base/media/drag.svg new file mode 100644 index 00000000..9c347806 --- /dev/null +++ b/entry/src/main/resources/base/media/drag.svg @@ -0,0 +1,9 @@ + + + + + + + + +