第29篇：意见反馈组件——feedback 完整闭环

一、引言

意见反馈是连接用户和开发者的桥梁，帮助应用持续改进。DriverLicenseExam 项目的 feedback 组件实现了完整的反馈闭环，包括提交反馈、历史记录、图片上传等功能。

二、组件结构

2.1 目录结构

feedback/
  ├── src/main/ets/
  │   ├── FeedbackTrigger.ets          ← 反馈触发入口
  │   ├── common/
  │   │   ├── Config.ets              ← 配置
  │   │   └── CustomTypes.ets         ← 自定义类型
  │   ├── http/
  │   │   ├── Api.ets                 ← 反馈 API
  │   │   ├── ApiPath.ets             ← 接口路径
  │   │   ├── MockDB.ets              ← Mock 数据库
  │   │   └── MockServer.ets          ← Mock 服务端
  │   ├── models/
  │   │   ├── FeedbackRecordDTO.ets   ← 反馈记录模型
  │   │   └── FeedbackSubmitDTO.ets   ← 提交反馈模型
  │   ├── pages/
  │   │   ├── FeedbackHistoryPage.ets ← 历史记录页
  │   │   └── FeedbackSubmitPage.ets  ← 提交反馈页
  │   └── utils/
  │       ├── DateUtils.ets           ← 日期工具
  │       ├── FileUtils.ets           ← 文件工具
  │       └── PickImageUtils.ets      ← 图片选择工具

三、反馈提交流程

3.1 提交页面

// FeedbackSubmitPage.ets
@ComponentV2
export struct FeedbackSubmitPage {
  @Local content: string = '';
  @Local images: string[] = [];
  @Local contact: string = '';

  build() {
    Column() {
      // 反馈内容
      TextArea({ placeholder: '请描述您的问题或建议...', text: this.content })
        .height(200)
        .onChange((value: string) => { this.content = value; });

      // 图片上传
      Row() {
        ForEach(this.images, (image: string) => {
          Image(image).width(80).height(80);
        });
        Button('+')
          .width(80).height(80)
          .onClick(() => {
            PickImageUtils.pickImage().then((uri: string) => {
              this.images.push(uri);
            });
          });
      }

      // 联系方式
      TextInput({ placeholder: '手机号/邮箱（选填）', text: this.contact })
        .onChange((value: string) => { this.contact = value; });

      // 提交按钮
      Button('提交反馈')
        .width('100%')
        .onClick(() => {
          this.submitFeedback();
        });
    }
    .padding(16);
  }

  submitFeedback() {
    const dto: FeedbackSubmitDTO = {
      content: this.content,
      images: this.images,
      contact: this.contact,
      timestamp: Date.now(),
    };
    // 调用 API 提交
  }
}

3.2 反馈历史

// FeedbackHistoryPage.ets
@ComponentV2
export struct FeedbackHistoryPage {
  @Local records: FeedbackRecordDTO[] = [];

  aboutToAppear() {
    // 加载历史记录
    this.loadRecords();
  }

  build() {
    List() {
      ForEach(this.records, (record: FeedbackRecordDTO) => {
        ListItem() {
          Column() {
            Text(record.content).fontSize(14);
            Text(record.reply || '等待回复...').fontSize(12).fontColor('#999');
            Text(DateUtils.format(record.timestamp)).fontSize(12).fontColor('#ccc');
          }
          .padding(12);
        }
      });
    }
  }
}

四、Mock 服务端

// MockServer.ets
export class MockServer {
  static submitFeedback(dto: FeedbackSubmitDTO): Promise<boolean> {
    MockDB.save(dto);
    return Promise.resolve(true);
  }

  static getHistory(): Promise<FeedbackRecordDTO[]> {
    return Promise.resolve(MockDB.query());
  }
}

五、总结

意见反馈组件提供了完整的反馈闭环，包括提交表单、图片上传、历史记录查看等功能，并通过 Mock 服务端支持开发阶段的独立调试。

关键源码文件：

• components/feedback/src/main/ets/pages/FeedbackSubmitPage.ets
• components/feedback/src/main/ets/pages/FeedbackHistoryPage.ets
• components/feedback/src/main/ets/http/MockServer.ets
• components/feedback/src/main/ets/utils/PickImageUtils.ets