一、引言

随着鸿蒙生态的快速发展，越来越多的开发者开始关注鸿蒙原生应用的开发。作为一款面向时尚爱好者的智能应用，AI穿搭搭配建议工具不仅需要具备强大的功能，还需要在不同设备上提供一致的用户体验。本文将详细介绍如何使用ArkTS语言开发一款AI穿搭搭配建议工具，并探讨鸿蒙PC端的适配策略，同时对比分析鸿蒙Flutter框架的开发方案。

二、应用概述

2.1 应用定位

AI穿搭搭配建议工具是一款基于鸿蒙原生开发的智能穿搭助手应用，旨在帮助用户根据自身身材、出行场景、天气情况和风格偏好，快速生成个性化的穿搭方案。应用内置丰富的Mock数据，支持离线运行，同时预留了网络AI接口，为后续接入大模型提供了扩展空间。

2.2 核心功能

• 智能穿搭推荐：根据用户输入的身高、体重、场景、天气和风格偏好，生成多套穿搭方案
• 详细搭配展示：每套方案包含上衣、下装、配饰建议及推荐理由
• 历史记录管理：自动保存生成记录，支持恢复和删除操作
• 离线运行支持：内置8大场景、32套穿搭方案的Mock数据
• 网络预留接口：预留大模型API调用位置，方便后续扩展

2.3 技术亮点

• 纯原生ArkTS开发，性能优越
• 严格类型安全，无any/unknown类型
• 轻量化@State状态管理
• Preferences本地数据持久化
• 响应式布局，多设备适配

三、技术架构分析

3.1 ArkTS语言特性

ArkTS是华为为鸿蒙系统打造的新一代编程语言，基于TypeScript扩展而来，具备以下特性：

// 严格的接口定义
interface OutfitItem {
  name: string;
  top: string;
  bottom: string;
  accessories: string;
  reason: string;
}

// 装饰器语法
@Entry
@Component
struct Index {
  @State userH: string = '';
  @State userW: string = '';
  // ...
}

类型安全：ArkTS要求所有变量必须显式声明类型，禁止使用any类型，这在代码质量保障方面具有显著优势。

声明式UI：通过装饰器和组件化语法，实现声明式UI开发，代码结构清晰，易于维护。

鸿蒙特有API：提供丰富的鸿蒙系统API，如Preferences数据持久化、网络请求等。

3.2 鸿蒙Flutter框架对比

虽然本文采用纯原生ArkTS开发，但我们也需要了解鸿蒙Flutter框架的特点：

对比维度	ArkTS原生开发	鸿蒙Flutter
性能	原生性能，无桥接开销	通过桥接层，存在一定性能损耗
开发效率	需要学习鸿蒙API	跨平台复用，开发效率高
生态成熟度	鸿蒙原生生态	Flutter成熟生态
UI一致性	与系统风格一致	需要自定义适配
平台特性	深度集成鸿蒙特性	跨平台通用

选择建议：

• 对于追求极致性能和系统深度集成的应用，推荐使用ArkTS原生开发
• 对于需要跨平台部署（如同时支持鸿蒙、Android、iOS）的应用，Flutter是更好的选择
• 对于UI复杂度高、动画效果丰富的应用，Flutter更具优势

3.3 状态管理方案

本应用采用@State装饰器进行状态管理，这是鸿蒙推荐的轻量化状态管理方案：

struct Index {
  @State userH: string = '';      // 身高
  @State userW: string = '';      // 体重
  @State occ: string = '';        // 场景
  @State wth: string = '';        // 天气
  @State sty: string = '';        // 风格
  @State outfits: Array<OutfitRecommendation> = [];  // 穿搭方案列表
  @State isGenerating: boolean = false;  // 生成状态
  @State showHistory: boolean = false;  // 历史记录显示状态
  @State historyRecords: Array<OutfitRecord> = [];  // 历史记录
}

设计原则：

• 单一数据源：所有状态集中管理
• 响应式更新：状态变化自动触发UI更新
• 轻量高效：无需引入第三方状态管理库

四、核心功能实现

4.1 数据模型设计

应用设计了四个核心接口，构建完整的数据模型：

interface OutfitItem {
  name: string;
  top: string;
  bottom: string;
  accessories: string;
  reason: string;
}

interface OutfitRecommendation {
  id: string;
  name: string;
  top: string;
  bottom: string;
  accessories: string;
  reason: string;
  userH: string;
  userW: string;
  occ: string;
  wth: string;
  sty: string;
  timestamp: number;
}

interface OutfitRecord {
  id: string;
  userH: string;
  userW: string;
  occ: string;
  wth: string;
  sty: string;
  outfits: Array<OutfitRecommendation>;
  timestamp: number;
}

interface MockOutfitCase {
  seasons: Array<string>;
  occasions: Array<string>;
  weathers: Array<string>;
  styles: Array<string>;
  outfits: Array<OutfitItem>;
}

设计思路：

• OutfitItem：基础穿搭项，包含名称、上衣、下装、配饰和理由
• OutfitRecommendation：完整推荐方案，包含用户输入条件和时间戳
• OutfitRecord：历史记录，存储一组推荐方案及对应条件
• MockOutfitCase：Mock数据案例，用于匹配用户输入

4.2 Mock数据初始化

应用内置8大场景的Mock数据，覆盖春夏秋冬四季及正式、休闲、约会、运动等场合：

private initMockData(): void {
  // 春季场景
  let springSeasons: Array<string> = ['春季', '春天', '温暖', '回暖', '樱花'];
  let springOccasions: Array<string> = ['日常', '通勤', '约会', '逛街', '休闲'];
  let springWeathers: Array<string> = ['晴朗', '多云', '微风', '凉爽'];
  let springStyles: Array<string> = ['休闲', '甜美', '清新', '简约', '文艺'];
  let springOutfits: Array<OutfitItem> = [];
  springOutfits.push(this.createOutfit('清新文艺风', '白色衬衫 + 米色针织开衫', 
    '浅蓝色高腰牛仔裤', '帆布鞋 + 帆布包 + 草帽', 
    '适合春季出游或约会，整体色调清新自然，舒适又好看。'));
  // ... 更多春季穿搭
  
  // 夏季、秋季、冬季、正式、休闲、约会、运动场景
  // ...
}

数据结构特点：

• 每个场景包含季节关键词、场合关键词、天气关键词、风格关键词
• 通过关键词匹配实现智能推荐
• 支持多关键词模糊匹配，提高推荐准确性

4.3 智能匹配算法

推荐算法采用关键词匹配策略，按优先级依次匹配：

private handleGenerate(): void {
  if (this.userH.trim().length === 0 || this.userW.trim().length === 0) {
    return;
  }

  this.isGenerating = true;
  this.outfits = [];

  setTimeout(() => {
    let matchedOutfits: Array<OutfitItem> = [];
    let inputLower: string = (this.occ + ' ' + this.wth + ' ' + this.sty).toLowerCase();

    for (let i = 0; i < this.mockData.length; i++) {
      let mock: MockOutfitCase = this.mockData[i];
      let matched: boolean = false;

      // 优先级1：场景匹配
      for (let j = 0; j < mock.occasions.length; j++) {
        if (inputLower.includes(mock.occasions[j].toLowerCase())) {
          matched = true;
          break;
        }
      }

      // 优先级2：天气匹配
      if (!matched) {
        for (let j = 0; j < mock.weathers.length; j++) {
          if (inputLower.includes(mock.weathers[j].toLowerCase())) {
            matched = true;
            break;
          }
        }
      }

      // 优先级3：风格匹配
      if (!matched) {
        for (let j = 0; j < mock.styles.length; j++) {
          if (inputLower.includes(mock.styles[j].toLowerCase())) {
            matched = true;
            break;
          }
        }
      }

      // 优先级4：季节匹配
      if (!matched) {
        for (let j = 0; j < mock.seasons.length; j++) {
          if (inputLower.includes(mock.seasons[j].toLowerCase())) {
            matched = true;
            break;
          }
        }
      }

      if (matched) {
        for (let j = 0; j < mock.outfits.length; j++) {
          matchedOutfits.push(mock.outfits[j]);
        }
      }
    }

    // 无匹配时使用默认方案
    if (matchedOutfits.length === 0) {
      let defaultOutfits: Array<OutfitItem> = [];
      defaultOutfits.push(this.createOutfit('简约百搭', '纯色T恤', '牛仔裤', 
        '小白鞋 + 简约饰品', '经典百搭的搭配，适合各种场合。'));
      defaultOutfits.push(this.createOutfit('舒适休闲', '卫衣', '运动裤', 
        '运动鞋 + 棒球帽', '舒适自在的日常穿搭。'));
      defaultOutfits.push(this.createOutfit('优雅气质', '连衣裙', '', 
        '高跟鞋 + 精致耳环', '优雅大方的搭配，适合多种场合。'));
      matchedOutfits = defaultOutfits;
    }

    for (let i = 0; i < matchedOutfits.length; i++) {
      this.outfits.push(this.createRecommendation(matchedOutfits[i]));
    }

    this.saveToHistory();
    this.isGenerating = false;
  }, 1500);
}

算法特点：

• 多级优先级匹配，提高推荐精准度
• 支持模糊匹配，用户输入更灵活
• 无匹配时提供默认方案，保证用户体验
• 异步处理，避免阻塞UI

4.4 数据持久化

应用使用Preferences进行本地数据存储：

private saveToHistory(): void {
  let record: OutfitRecord = {
    id: this.generateId(),
    userH: this.userH,
    userW: this.userW,
    occ: this.occ,
    wth: this.wth,
    sty: this.sty,
    outfits: this.outfits,
    timestamp: Date.now()
  };
  this.historyRecords.unshift(record);

  // 限制历史记录数量
  if (this.historyRecords.length > 20) {
    this.historyRecords = this.historyRecords.slice(0, 20);
  }

  let historyStr: string = JSON.stringify(this.historyRecords);
  let context = getContext(this);
  preferences.getPreferences(context, 'outfit_recommend_prefs').then((pref: Object) => {
    let prefObj: PreferencesPut = pref as PreferencesPut;
    prefObj.put('outfitHistory', historyStr).then(() => {
      prefObj.flush();
    }).catch(() => {
      // ignore
    });
  }).catch(() => {
    // ignore
  });
}

private loadHistory(): void {
  let context = getContext(this);
  preferences.getPreferences(context, 'outfit_recommend_prefs').then((pref: Object) => {
    let prefObj: PreferencesGet = pref as PreferencesGet;
    prefObj.get('outfitHistory', '').then((historyObj: Object) => {
      let historyStr: string = historyObj as string;
      if (historyStr.length > 0) {
        this.historyRecords = JSON.parse(historyStr) as Array<OutfitRecord>;
      }
    }).catch(() => {
      // ignore
    });
  }).catch(() => {
    // ignore
  });
}

存储策略：

• JSON序列化存储，结构清晰
• 限制记录数量为20条，避免存储膨胀
• Promise链式调用，异常处理完善

五、UI设计与实现

5.1 页面布局

应用采用垂直布局，分为输入区域和输出区域：

build() {
  Column({ space: 16 }) {
    // 标题区域
    Text('AI穿搭搭配建议工具')
      .fontSize(28)
      .fontWeight(FontWeight.Bold)
      .margin({ top: 24 })
      .fontColor('#e91e63');

    // 输入区域
    Column({ space: 12 }) {
      // 身高体重输入（并排）
      Row({ space: 12 }) {
        Column({ space: 4 }) {
          Text('身高')
            .fontSize(14)
            .fontColor('#666666');
          TextInput({ placeholder: '例如：165cm' })
            .width('100%')
            .height(48)
            .padding({ left: 16, right: 16 })
            .backgroundColor('#f5f5f5')
            .borderRadius(8)
            .onChange((value: string) => {
              this.userH = value;
            });
        }
        .flexGrow(1);

        Column({ space: 4 }) {
          Text('体重')
            .fontSize(14)
            .fontColor('#666666');
          TextInput({ placeholder: '例如：55kg' })
            .width('100%')
            .height(48)
            .padding({ left: 16, right: 16 })
            .backgroundColor('#f5f5f5')
            .borderRadius(8)
            .onChange((value: string) => {
              this.userW = value;
            });
        }
        .flexGrow(1);
      }

      // 场景、天气、风格输入（垂直排列）
      // ...
    }
    .padding({ left: 16, right: 16 })
    .width('100%');

    // 操作按钮
    Row({ space: 12 }) {
      Button('生成穿搭方案')
        .width('70%')
        .height(48)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#e91e63')
        .fontColor('#ffffff')
        .borderRadius(8)
        .enabled(!this.isGenerating)
        .onClick(() => {
          this.handleGenerate();
        });

      Button('历史记录')
        .width('30%')
        .height(48)
        .fontSize(16)
        .backgroundColor('#ffffff')
        .fontColor('#e91e63')
        .borderRadius(8)
        .borderWidth(1)
        .borderColor('#e91e63')
        .onClick(() => {
          this.showHistory = !this.showHistory;
        });
    }
    .padding({ left: 16, right: 16 })
    .width('100%');

    // 输出区域（动态切换）
    if (this.isGenerating) {
      // 加载状态
    } else if (this.showHistory) {
      // 历史记录列表
    } else if (this.outfits.length > 0) {
      // 穿搭方案列表
    } else {
      // 默认欢迎页面
    }
  }
  .width('100%')
  .height('100%')
  .backgroundColor('#fce4ec');
}

布局特点：

• 粉色主题配色，符合时尚穿搭应用定位
• 响应式布局，自适应不同屏幕尺寸
• 清晰的视觉层次，输入区域与输出区域分离

5.2 穿搭方案展示

推荐方案采用卡片式布局，清晰展示搭配细节：

List() {
  ForEach(this.outfits, (outfit: OutfitRecommendation) => {
    ListItem() {
      Column({ space: 12 }) {
        // 方案名称
        Text(outfit.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#e91e63');

        // 搭配详情
        Column({ space: 8 }) {
          Row({ space: 8 }) {
            Text('👕')
              .fontSize(24);
            Text('上衣：' + outfit.top)
              .fontSize(14)
              .flexGrow(1);
          }

          if (outfit.bottom.length > 0) {
            Row({ space: 8 }) {
              Text('👖')
                .fontSize(24);
              Text('下装：' + outfit.bottom)
                .fontSize(14)
                .flexGrow(1);
            }
          }

          Row({ space: 8 }) {
            Text('🎀')
              .fontSize(24);
            Text('配饰：' + outfit.accessories)
              .fontSize(14)
              .flexGrow(1);
          }
        }

        // 推荐理由
        Text(outfit.reason)
          .fontSize(14)
          .fontColor('#666666')
          .maxLines(3)
          .textOverflow({ overflow: TextOverflow.Ellipsis });

        // 条件标签
        Row({ space: 4 }) {
          Text('身材：' + outfit.userH + ' / ' + outfit.userW)
            .fontSize(12)
            .fontColor('#999999');
          Text(' | ')
            .fontSize(12)
            .fontColor('#999999');
          Text(outfit.occ)
            .fontSize(12)
            .fontColor('#999999');
        }
      }
      .padding({ left: 16, right: 16, top: 16, bottom: 16 })
      .backgroundColor('#ffffff')
      .borderRadius(12)
      .margin({ left: 16, right: 16 });
    }
  }, (outfit: OutfitRecommendation) => outfit.id);
}

展示特点：

• 使用Emoji图标增强视觉效果
• 清晰的搭配分类（上衣、下装、配饰）
• 推荐理由支持多行显示，超出部分省略
• 底部条件标签方便用户回顾

5.3 历史记录管理

历史记录支持恢复和删除操作：

List() {
  ForEach(this.historyRecords, (record: OutfitRecord) => {
    ListItem() {
      Column({ space: 8 }) {
        Row() {
          Column({ space: 2 }) {
            Text('身材：' + record.userH + ' / ' + record.userW)
              .fontSize(16)
              .fontWeight(FontWeight.Bold);
            Text('场景：' + record.occ + ' | ' + record.wth + ' | ' + record.sty)
              .fontSize(14)
              .fontColor('#666666');
            Text('生成时间：' + this.formatTime(record.timestamp))
              .fontSize(12)
              .fontColor('#999999');
          }
          .flexGrow(1);

          Row({ space: 8 }) {
            Button('恢复')
              .width(60)
              .height(32)
              .fontSize(12)
              .backgroundColor('#e91e63')
              .fontColor('#ffffff')
              .borderRadius(4)
              .onClick(() => {
                this.restoreRecord(record);
              });

            Button('删除')
              .width(60)
              .height(32)
              .fontSize(12)
              .backgroundColor('#ffffff')
              .fontColor('#ff4d4f')
              .borderRadius(4)
              .borderWidth(1)
              .borderColor('#ff4d4f')
              .onClick(() => {
                this.deleteHistory(record);
              });
          }
        }
      }
      .padding({ left: 16, right: 16, top: 12, bottom: 12 })
      .backgroundColor('#ffffff')
      .borderRadius(8)
      .margin({ left: 16, right: 16 });
    }
  }, (record: OutfitRecord) => record.id);
}

管理功能：

• 恢复：一键恢复历史记录的输入条件和推荐方案
• 删除：支持删除单条历史记录
• 时间显示：清晰的生成时间标记

六、鸿蒙PC适配策略

6.1 鸿蒙PC概述

鸿蒙PC是华为推出的桌面端操作系统，基于鸿蒙内核，支持多窗口、键鼠操作等桌面特性。对于开发者来说，需要考虑以下适配要点：

• 屏幕尺寸更大（通常13-27英寸）
• 输入方式多样（键鼠、触摸）
• 窗口可调整大小
• 多任务并行处理

6.2 适配方案

6.2.1 响应式布局

Column({ space: 16 }) {
  // ...
}
.width('100%')
.height('100%')
.backgroundColor('#fce4ec');

适配策略：

• 使用百分比宽度，自适应窗口大小
• 灵活的flex布局，根据可用空间调整
• 避免固定像素值，使用相对单位

6.2.2 输入区域优化

在PC端，可以采用三列布局提高输入效率：

Row({ space: 12 }) {
  Column({ space: 4 }) {
    Text('身高')
      .fontSize(14);
    TextInput({ placeholder: '例如：165cm' })
      .width('100%')
      .height(48);
  }
  .flexGrow(1);

  Column({ space: 4 }) {
    Text('体重')
      .fontSize(14);
    TextInput({ placeholder: '例如：55kg' })
      .width('100%')
      .height(48);
  }
  .flexGrow(1);

  Column({ space: 4 }) {
    Text('场景')
      .fontSize(14);
    TextInput({ placeholder: '约会、通勤...' })
      .width('100%')
      .height(48);
  }
  .flexGrow(1);
}

PC端优化：

• 输入框并排显示，减少垂直滚动
• 更大的输入区域，方便键盘输入
• 快捷输入提示，提高输入效率

6.2.3 输出区域优化

在PC端，可以采用网格布局展示更多推荐方案：

Grid() {
  ForEach(this.outfits, (outfit: OutfitRecommendation) => {
    GridItem() {
      Column({ space: 12 }) {
        // 穿搭卡片内容
      }
      .padding(16)
      .backgroundColor('#ffffff')
      .borderRadius(12);
    }
  }, (outfit: OutfitRecommendation) => outfit.id);
}
.columnsTemplate('1fr 1fr')  // 两列布局
.rowsGap(16)
.columnsGap(16)
.width('100%');

PC端优势：

• 多列布局，一次查看更多方案
• 更大的卡片尺寸，展示更丰富内容
• 鼠标悬停效果，增强交互体验

6.2.4 窗口适配

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 主内容区域
    }
    .width('100%')
    .height('100%')
    .onWindowResize(() => {
      // 窗口大小变化时的处理逻辑
    });
  }
}

窗口适配策略：

• 监听窗口大小变化事件
• 根据窗口宽度调整布局方式（单列/多列）
• 优化不同分辨率下的显示效果

6.3 PC端交互优化

6.3.1 键盘快捷键支持

build() {
  Column() {
    // ...
  }
  .onKeyEvent((event: KeyEvent) => {
    if (event.keyCode === 13 && !this.isGenerating) {  // Enter键
      this.handleGenerate();
    }
    if (event.keyCode === 72 && event.ctrlKey) {  // Ctrl+H
      this.showHistory = !this.showHistory;
    }
  });
}

快捷键设计：

• Enter键：快速生成穿搭方案
• Ctrl+H：切换历史记录显示
• Esc键：关闭弹窗、返回默认状态

6.3.2 鼠标悬停效果

Column() {
  Text('生成穿搭方案')
}
.onHover((isHover: boolean) => {
  // 悬停时的样式变化
});

悬停效果：

• 按钮悬停时放大或变色
• 卡片悬停时显示阴影效果
• 图标悬停时显示提示信息

七、性能优化策略

7.1 代码优化

7.1.1 避免不必要的重新渲染

@State outfits: Array<OutfitRecommendation> = [];  // 数组引用变化才触发更新

优化原则：

• 避免频繁修改数组元素，优先替换整个数组
• 使用不可变数据结构，便于状态追踪
• 合理使用@State、@Prop、@Link等状态装饰器

7.1.2 减少DOM操作

ForEach(this.outfits, (outfit: OutfitRecommendation) => {
  ListItem() {
    // 使用稳定的key值
  }
}, (outfit: OutfitRecommendation) => outfit.id);

优化策略：

• 为ForEach提供唯一的key生成器
• 避免动态改变列表结构
• 使用懒加载，只渲染可见区域

7.2 资源优化

7.2.1 图片优化

虽然本应用暂未使用图片资源，但在实际开发中应注意：

• 使用合适的图片格式（WebP、SVG）
• 压缩图片大小，减少加载时间
• 使用缓存策略，避免重复加载

7.2.2 Mock数据优化

private initMockData(): void {
  // 只在初始化时调用一次
}

优化策略：

• Mock数据只初始化一次
• 使用内存缓存，避免重复计算
• 支持数据热更新，无需重启应用

7.3 网络优化

7.3.1 网络请求优化

虽然本应用使用Mock数据，但预留了网络接口：

private fetchFromAI(): void {
  // 实际AI接口调用
  // 使用Promise.all批量请求
  // 实现请求缓存，避免重复请求
}

优化策略：

• 实现请求防抖和节流
• 使用批量请求减少网络开销
• 实现请求缓存，避免重复请求

八、安全性考虑

8.1 权限管理

应用配置了网络权限：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

权限管理策略：

• 只请求必要的权限
• 在使用前动态申请权限
• 提供清晰的权限使用说明

8.2 数据安全

private saveToHistory(): void {
  // 只存储必要的用户数据
  // 不存储敏感信息（如身份证号、联系方式等）
  // 使用本地存储，不上传云端
}

数据安全原则：

• 最小化数据收集，只收集必要信息
• 本地存储，保护用户隐私
• 数据加密存储，防止数据泄露

8.3 代码安全

// 避免使用any类型
interface PreferencesPut {
  put: (key: string, value: string) => Promise<void>;
  flush: () => Promise<void>;
}

// 严格的类型检查
let prefObj: PreferencesPut = pref as PreferencesPut;

代码安全措施：

• 使用严格类型检查，避免类型漏洞
• 输入验证，防止注入攻击
• 异常处理，避免崩溃暴露信息

九、扩展与未来规划

9.1 AI能力扩展

应用预留了AI接口调用位置，未来可以：

• 接入大模型API，实现更智能的穿搭推荐
• 支持图片上传，分析用户现有衣物
• 基于用户历史记录，学习用户偏好

9.2 功能扩展

• 衣物管理：记录用户现有衣物，推荐搭配方案
• 购物推荐：根据推荐方案，推荐购买链接
• 社交分享：分享穿搭方案到社交平台
• 季节提醒：根据季节变化，主动推送穿搭建议

9.3 平台扩展

• 适配鸿蒙平板，提供大屏体验
• 适配鸿蒙手表，快速查看今日穿搭
• 开发Web版本，跨平台访问

十、总结

10.1 技术亮点

• 纯原生开发：使用ArkTS语言，性能优越
• 类型安全：严格的接口定义，无any类型
• 轻量化架构：@State状态管理，无第三方依赖
• 离线运行：丰富的Mock数据，无需联网即可使用
• 多设备适配：响应式布局，支持手机和PC端

10.2 开发经验

• 接口优先：先定义接口，再实现功能
• 数据驱动：数据模型设计是核心
• 状态管理：合理使用@State装饰器
• 异常处理：完善的Promise异常处理
• 用户体验：清晰的UI设计和交互流程

10.3 未来展望

随着鸿蒙生态的不断发展，AI穿搭搭配建议工具将持续优化，接入更强大的AI能力，提供更个性化的服务。同时，应用将逐步扩展到更多鸿蒙设备，为用户提供一致的跨设备体验。

---

参考代码：[Index.ets](file:///e:/MyApplication/entry/src/main/ets/pages/Index.ets)

开发环境：DevEco Studio 4.0 + HarmonyOS NEXT

技术栈：ArkTS + ArkUI + Preferences