Merge pull request #74 from YiQingZi/main

添加 我的 --> // 书架/更多/书籍导入/网盘导入/文件列表

Author: mgz0227

entry/src/main/ets/common/LazyIDataSource/BasicDataSource.ets

@@ -0,0 +1,62 @@
+/**
+ * @author 惟草木之零落兮
+ * @date 2024/5/22 20:10
+ */
+
+export default class BasicDataSource implements IDataSource {
+    private listeners: DataChangeListener[] = [];
+    private originDataArray: Array<ESObject> = [];
+
+    public totalCount(): number {
+        return 0;
+    }
+
+    public getData(index: number): ESObject {
+        return this.originDataArray[index];
+    }
+
+    // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听
+    registerDataChangeListener(listener: DataChangeListener): void {
+        if (this.listeners.indexOf(listener) < 0) {
+            console.info('add listener');
+            this.listeners.push(listener);
+        }
+    }
+
+    // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听
+    unregisterDataChangeListener(listener: DataChangeListener): void {
+        const pos = this.listeners.indexOf(listener);
+        if (pos >= 0) {
+            console.info('remove listener');
+            this.listeners.splice(pos, 1);
+        }
+    }
+
+    // 通知LazyForEach组件需要重载所有子组件
+    notifyDataReload(): void {
+        this.listeners.forEach(listener => {
+            listener.onDataReloaded();
+        })
+    }
+
+    // 通知LazyForEach组件需要在index对应索引处添加子组件
+    notifyDataAdd(index: number): void {
+        this.listeners.forEach(listener => {
+            listener.onDataAdd(index);
+        })
+    }
+
+    // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件
+    notifyDataChange(index: number): void {
+        this.listeners.forEach(listener => {
+            listener.onDataChange(index);
+        })
+    }
+
+    // 通知LazyForEach组件需要在index对应索引处删除该子组件
+    notifyDataDelete(index: number): void {
+        this.listeners.forEach(listener => {
+            listener.onDataDelete(index);
+        })
+    }
+}

entry/src/main/ets/common/LazyIDataSource/FileListDataSource.ets

@@ -0,0 +1,48 @@
+/**
+ * @author 惟草木之零落兮
+ * @date 2024/5/22 20:17
+ */
+import BasicDataSource from './BasicDataSource';
+import FolderAndFileItem from '../../componets/dataList/FolderAndFileItem';
+
+/**
+ * 文件夹 文件列表 数据懒加载对象
+ * */
+export default class FolderFileDataSource extends BasicDataSource {
+    private dataArray: FolderAndFileItem[] = [];
+
+    public totalCount(): number {
+        return this.dataArray.length;
+    }
+
+    public getData(index: number): FolderAndFileItem{
+        return this.dataArray[index];
+    }
+
+    public addData(index: number, data: FolderAndFileItem): void {
+        this.dataArray.splice(index, 0, data);
+        this.notifyDataAdd(index);
+    }
+
+    public pushData(data: FolderAndFileItem): void {
+        this.dataArray.push(data);
+        this.notifyDataAdd(this.dataArray.length - 1);
+    }
+
+    public pushAllData(data: FolderAndFileItem[]): void {
+        for (const d of data) {
+            this.dataArray.push(d);
+            this.notifyDataAdd(this.dataArray.length - 1);
+        }
+    }
+
+    // 重新加载
+    public reloadNewData(data: FolderAndFileItem[]): void {
+        this.dataArray = []
+        for (const d of data) {
+            this.dataArray.push(d);
+            this.notifyDataAdd(this.dataArray.length - 1);
+        }
+        this.notifyDataReload()
+    }
+}

entry/src/main/ets/componets/dataList/FolderAndFileItem.ets

@@ -0,0 +1,12 @@
+/**
+ * @author 惟草木之零落兮
+ * @date 2024/5/22 20:21
+ */
+// 网盘 本地目录 文件夹 文件信息
+export default interface FolderAndFileItem {
+    title: string, // 文件夹文件标题
+    icon: PixelMap | ResourceStr | DrawableDescriptor, // 文件夹文件图标
+    size: string, // 文件夹里文件数量，或者文件的大小
+    date: string, // 最后修改日期
+    isFolder: boolean // 是否为文件夹，用于排序，文件夹在最上面
+}

entry/src/main/ets/componets/myCenter/FolderFileListItem.ets

@@ -0,0 +1,53 @@
+/**
+ * @author 惟草木之零落兮
+ * @date 2024/5/22 20:51
+ */
+import CommonConstants from '../../common/constants/CommonConstants'
+import FolderAndFileItem from '../dataList/FolderAndFileItem'
+
+@Preview
+@Component
+export default struct FolderFileListItem{
+    data: FolderAndFileItem = {
+        title: "MATE 40 PRO 备份",
+        icon: $r("app.media.ic_folder"),
+        size: "12项",
+        date: "2021/8/13",
+        isFolder: true
+    }
+
+    build() {
+        Row(){
+            // 文件夹、 文件图标
+            Image(this.data.icon)
+                .size({width: 40,height: 40})
+                .margin({right: 12})
+
+            Column(){
+                // 标题，名称
+                Text(this.data.title)
+                    .height(22)
+                    .width("100%")
+                    .maxLines(1)
+                    .fontSize(14)
+                    .fontWeight(500)
+                    .textAlign(TextAlign.Start)
+                    .fontColor("rgba(0, 0, 0, 0.88)")
+
+                // 大小，数量、最后修改事件
+                Text(`${this.data.size} ${this.data.date}`)
+                    .height(18)
+                    .width("100%")
+                    .maxLines(1)
+                    .fontSize(10)
+                    .fontWeight(500)
+                    .textAlign(TextAlign.Start)
+                    .fontColor("rgba(0, 0, 0, 0.45)")
+            }
+            .height(40)
+            .layoutWeight(1)  // 占满剩余空间
+        }
+        .height(40)
+        .width("100%")
+    }
+}

entry/src/main/ets/componets/myCenter/MyCenterFileSearch.ets

@@ -0,0 +1,44 @@
+/**
+ * @author 惟草木之零落兮
+ * @date 2024/5/22 15:05
+ */
+
+@Preview
+@Component
+export default struct MyCenterFileSearch{
+
+
+    @State @Watch("searchEvent") searchValue: string = ''
+
+    // 回调函数，回调搜索框输入的值
+    onResultCallBack?: (searchValue: string)=> void
+
+    controller: SearchController = new SearchController()
+
+    build() {
+        Row(){
+            Search({ value: this.searchValue, placeholder: '搜索', controller: this.controller })
+                .width('100%')
+                .height(34)
+                .placeholderColor("rgba(0, 0, 0, 0.45)")
+                .placeholderFont({ size: 14, weight: 400 })
+                .textFont({ size: 14, weight: 400 })
+                .onSubmit((value: string) => {
+                    this.searchValue = value
+                })
+                .onChange((value: string) => {
+                    this.searchValue = value
+                })
+                .padding({left: 16, right: 16, top: 6, bottom: 6})
+                .backgroundColor("rgba(0, 0, 0, 0.04)")
+        }
+        .margin({top: 8, bottom: 8})
+        .width("100%")
+        .height(34)
+    }
+
+    // 搜索框值发生变化触发该函数
+    searchEvent(){
+        if (this.onResultCallBack) this.onResultCallBack(this.searchValue)
+    }
+}

entry/src/main/ets/pages/view/myCenter/FileManagement.ets

@@ -0,0 +1,81 @@
+import { MyCenterTitle } from '../../../componets/myCenter/MyCenterTitle';
+import MyCenterFileSearch from  '../../../componets/myCenter/MyCenterFileSearch';
+import FolderFileDataSource from '../../../common/LazyIDataSource/FileListDataSource';
+import FolderFileListItem from '../../../componets/myCenter/FolderFileListItem';
+import FolderAndFileItem from '../../../componets/dataList/FolderAndFileItem';
+
+/**
+ * @author 惟草木之零落兮
+ * @date 2024/5/22 14:33
+ */
+
+// 书架/更多/书籍导入/网盘导入/文件列表/开源阅读
+@Entry
+@Component
+struct FileManagement {
+    @State title: string = '坚果云';
+
+    @State fileList: FolderFileDataSource = new FolderFileDataSource()
+
+    aboutToAppear(): void {
+        for (let i=0; i < 20; i++){
+            this.fileList.pushData({
+                title: i < 3 ? `文件夹 ${i}` : `文件 ${i}`,
+                icon: i < 3 ? $r("app.media.ic_folder") : $r("app.media.ic_zip") ,
+                size: i < 3 ? "12项" : "30M",
+                date: "2021/8/13",
+                isFolder: i < 3 ? true: false
+            })
+        }
+    }
+
+    build() {
+        Column(){
+
+            // 标题栏
+            MyCenterTitle({
+                title: this.title,
+                isShowEdit: true,
+                isShowMore: true,
+                onEditClickEvent: ()=>{
+
+                },
+                onMoreClickEvent: ()=>{
+
+                }
+            })
+
+            // 搜索栏
+            MyCenterFileSearch({
+                onResultCallBack: (value: string)=>{
+                    // value 搜索框值发生变化和提交搜索会触发
+                    // TODO 执行搜索，此处应做防抖处理
+                }
+            })
+
+            // 目录层级栏
+            Row(){
+                Text("TODO 目录层级") //TODO 目录层级
+            }
+            .margin({top: 12, bottom: 12})
+
+            // 文件+文件夹列表
+            Column(){
+                List({space: 20}){
+                    LazyForEach(this.fileList, (item: FolderAndFileItem, index: number)=>{
+                        ListItem(){
+                            FolderFileListItem({
+                                data: item
+                            })
+                        }
+                    })
+                }
+                .width("100%")
+                .height("100%")
+            }
+            .width("100%")
+            .layoutWeight(1) // 占满屏幕剩余空间
+        }
+        .padding({left: 20, right: 20})
+    }
+}

entry/src/main/resources/base/media/ic_folder.svg

@@ -16,6 +16,7 @@
     "pages/view/myCenter/aboutUs/OpenSourceLicensePage",
     "pages/view/myCenter/aboutUs/DisclaimerPage",
     "pages/view/myCenter/helpCenterPage",
-    "pages/view/myCenter/readStatistics"
+    "pages/view/myCenter/readStatistics",
+    "pages/view/myCenter/FileManagement"
   ]
 }