69.Harmonyos NEXT图片预览组件应用实践（二）：电商、内容与办公场景

@Entry
@Component
struct ProductImageViewer {
    @State imageList: string[] = [];  // 商品图片列表
    @State currentIndex: number = 0;  // 当前图片索引
    @State hotspots: Array<{x: number, y: number, text: string}> = [];  // 热点标记数据
    
    aboutToAppear(): void {
        this.loadProductImages();  // 加载商品图片
        this.setupHotspots();  // 设置热点标记
    }
    
    loadProductImages() {
        // 加载商品图片示例
        let imageSource1: string = $r("app.media.product1") as ESObject;
        let imageSource2: string = $r("app.media.product2") as ESObject;
        let imageSource3: string = $r("app.media.product3") as ESObject;
        
        this.imageList.push(imageSource1, imageSource2, imageSource3);
    }
    
    setupHotspots() {
        // 配置商品特点标记
        this.hotspots = [
            {x: 0.3, y: 0.4, text: "优质面料"},
            {x: 0.7, y: 0.6, text: "精细缝线"},
            {x: 0.5, y: 0.2, text: "时尚设计"}
        ];
    }
    
    build() {
        Stack() {
            // 核心预览组件
            PicturePreview({ 
                imageList: this.imageList, 
                listDirection: Axis.Horizontal 
            })
            
            // 热点标记渲染
            ForEach(this.hotspots, (hotspot) => {
                Button(hotspot.text)
                    .position({
                        x: `${hotspot.x * 100}%`,
                        y: `${hotspot.y * 100}%`
                    })
                    .backgroundColor('rgba(255, 255, 255, 0.7)')
                    .borderRadius(15)
            })
            
            // 底部缩略图导航
            Row() {
                ForEach(this.imageList, (image, index) => {
                    Image(image)
                        .width(60)
                        .height(60)
                        .margin(5)
                        .borderWidth(index === this.currentIndex ? 2 : 0)
                        .borderColor(Color.Blue)
                        .onClick(() => {
                            // 切换到对应图片
                        })
                })
            }
            .width('100%')
            .justifyContent(FlexAlign.Center)
            .position({ x: 0, y: '90%' })
        }
        .width('100%')
        .height('100%')
    }
}

@Entry
@Component
struct ArticleImageViewer {
    @State imageList: string[] = [];  // 文章图片列表
    @State captions: string[] = [];  // 图片说明列表
    @State isPreviewMode: boolean = false;  // 预览模式状态
    @State currentImageIndex: number = 0;  // 当前图片索引
    
    aboutToAppear(): void {
        this.loadArticleImages();  // 加载文章图片
    }
    
    loadArticleImages() {
        // 加载文章图片和说明
        let imageSource1: string = $r("app.media.article1") as ESObject;
        let imageSource2: string = $r("app.media.article2") as ESObject;
        
        this.imageList.push(imageSource1, imageSource2);
        this.captions.push("图1：项目概览图", "图2：详细设计图");
    }
    
    build() {
        Stack() {
            if (this.isPreviewMode) {
                // 图片预览模式
                Stack() {
                    PicturePreview({ 
                        imageList: this.imageList, 
                        listDirection: Axis.Horizontal 
                    })
                    
                    // 图片说明
                    Text(this.captions[this.currentImageIndex])
                        .fontSize(16)
                        .fontColor(Color.White)
                        .backgroundColor('rgba(0, 0, 0, 0.5)')
                        .padding(10)
                        .position({ x: 0, y: '90%' })
                        .width('100%')
                        .textAlign(TextAlign.Center)
                }
            } else {
                // 文章内容模式
                Column() {
                    // ... 文章内容渲染 ...
                }
            }
        }
    }
}

@Entry
@Component
struct OfficeImageViewer {
    @State imageList: string[] = [];
    @State annotations: Array<{x: number, y: number, text: string}> = [];
    @State isEditMode: boolean = false;
    @State currentUser: string = "用户A";
    @State userPermission: string = "edit"; // edit, view
    
    aboutToAppear(): void {
        this.loadOfficeImages();
        this.loadAnnotations();
        this.checkUserPermission();
    }
    
    checkUserPermission() {
        // 检查用户权限
        // 实际应用中应该从服务器获取
        this.userPermission = "edit";
    }
    
    addAnnotation(x: number, y: number) {
        if (this.userPermission !== "edit") return;
        
        this.annotations.push({
            x: x,
            y: y,
            text: "新批注"
        });
    }
    
    build() {
        Stack() {
            // 图片预览基础组件
            PicturePreview({ 
                imageList: this.imageList,
                listDirection: Axis.Horizontal
            })
            
            if (this.isEditMode && this.userPermission === "edit") {
                // 编辑模式UI
                Column() {
                    // 批注列表
                    ForEach(this.annotations, (item) => {
                        Button(item.text)
                            .position({
                                x: `${item.x * 100}%`,
                                y: `${item.y * 100}%`
                            })
                            .backgroundColor('rgba(255, 255, 0, 0.7)')
                            .borderRadius(15)
                    })
                    
                    // 工具栏
                    Row() {
                        Button('添加批注')
                            .onClick(() => {
                                // 进入添加批注模式
                            })
                        Button('保存')
                        Button('分享')
                    }
                    .width('100%')
                    .justifyContent(FlexAlign.SpaceAround)
                    .position({ x: 0, y: '90%' })
                    .backgroundColor('rgba(0, 0, 0, 0.5)')
                    .padding(10)
                }
            }
            
            // 用户信息和权限提示
            Text(this.currentUser + (this.userPermission === "edit" ? " (可编辑)" : " (只读)"))
                .fontSize(14)
                .fontColor(Color.White)
                .backgroundColor('rgba(0, 0, 0, 0.5)')
                .padding(5)
                .position({ x: 10, y: 10 })
        }
        .width('100%')
        .height('100%')
        .gesture(
            TapGesture()
                .onAction((event: GestureEvent) => {
                    if (this.isEditMode) {
                        this.addAnnotation(
                            event.x / this.width,
                            event.y / this.height
                        );
                    }
                })
        )
    }
}

class SyncManager {
    syncAnnotations(annotations: Array<any>) {
        // 向服务器同步批注数据
    }
    
    onAnnotationUpdate(callback: Function) {
        // 监听其他用户的更新
    }
}

class VersionControl {
    saveVersion() {
        // 保存当前版本
    }
    
    rollback(version: string) {
        // 回滚到指定版本
    }
}