送礼推荐：鸿蒙AI应用开发实战——AI送礼顾问，心意送到位

一、引言

送礼是一门艺术，也是一门学问。选对礼物，能让人感受到你的用心和诚意；选错礼物，不仅浪费金钱，还可能造成尴尬。然而，面对琳琅满目的商品和不同的送礼对象、关系程度、预算限制，很多人常常陷入选择困难。

送礼推荐 正是为了解决这一痛点而诞生的鸿蒙AI应用。用户只需选择送礼对象（长辈/伴侣/朋友/同事/孩子）、输入预算范围和选择关系程度（亲密/一般/商务），AI即可自动生成3个合适的礼物推荐，每个礼物都附带推荐理由和价格带，让送礼变得轻松而有心意。

本文将从应用架构设计、鸿蒙核心技术实现、AI应用亮点等维度，深度剖析这款应用的开发全流程。

---

二、应用架构设计：Model-Service-Page 三层架构

2.1 架构概览

┌─────────────────────────────────────────────────────────┐
│                     Page 层 (UI)                         │
│             GiftAdvisorPage.ets                          │
│   @State 预算输入 / @Builder 礼物卡片 / Flex 标签      │
├─────────────────────────────────────────────────────────┤
│                   Service 层 (业务逻辑)                  │
│            GiftAdvisorService.ets                        │
│   礼物库管理 / 预算筛选 / 组合匹配                     │
├─────────────────────────────────────────────────────────┤
│                    Model 层 (数据模型)                   │
│            GiftAdvisorModel.ets                          │
│   GiftEntry / GiftData / GAMessage / 常量              │
└─────────────────────────────────────────────────────────┘

2.2 Model 层：数据结构定义

核心数据类：

• GiftEntry：单个礼物条目，包含名称、推荐理由和价格范围
• GiftData：礼物列表的聚合（3个礼物）

关键常量：

• GA_TARGETS：5种送礼对象（长辈/伴侣/朋友/同事/孩子）
• GA_RELATIONS：3种关系程度（亲密/一般/商务）

2.3 Service 层：礼物推荐算法

Service 层预置了45个礼物的数据库，覆盖5种对象×3种关系的组合：

const map: Record<string, GiftEntry[]> = {
    '长辈|亲密': [
        new GiftEntry('按摩椅垫', '实用性强，每天都能用，体现孝心与关怀', '500-2000元'),
        new GiftEntry('高品质茶叶礼盒', '长辈大多爱喝茶，好茶有面子又有品味', '300-800元'),
        new GiftEntry('健康体检套餐', '送健康最贴心，全面体检让子女放心', '800-3000元')
    ],
    '伴侣|亲密': [/* ... */],
    '朋友|一般': [/* ... */],
    '同事|商务': [/* ... */],
    // ... 15种组合 × 3个礼物 = 45个礼物
}

2.4 Page 层：UI展示

Page 层实现了对象选择、预算输入、关系选择等交互，以及礼物推荐结果展示。

---

三、鸿蒙技术深度解析

3.1 @State 预算输入验证

预算输入使用 TextInput 组件，并设计了验证逻辑：

@State selectedTarget: string = ''        // 送礼对象
@State selectedBudget: string = ''         // 预算范围
@State selectedRelation: string = ''       // 关系程度
@State currentData: GiftData | null = null  // 推荐结果

预算输入：

TextInput({ text: this.selectedBudget, placeholder: '请输入预算，如 200-500' })
    .fontSize(14)
    .fontColor(COLOR_TEXT)
    .placeholderColor(COLOR_TEXT_SEC)
    .backgroundColor(COLOR_CARD)
    .borderRadius(12)
    .border({ width: 1, color: COLOR_BORDER })
    .padding(12)
    .margin({ left: 16, right: 16, top: 4, bottom: 8 })
    .onChange((val: string) => { this.selectedBudget = val })

设计要点：

• 占位符提示输入格式"200-500"，降低用户输入成本
• 预算非必填，用户可以不输入直接生成推荐
• 预算信息传递给 Service 层，用于后续的智能筛选

3.2 @Builder 礼物卡片（带价格带标签）

礼物推荐结果以卡片形式展示，每个礼物独立成卡，包含名称、理由和价格带标签：

@Builder
buildResultCard(data: GiftData) {
    Column() {
        Text('🎁 礼物推荐')
            .fontSize(16)
            .fontWeight(FontWeight.Bold)
        ForEach(data.gifts, (gift: GiftEntry, idx: number) => {
            Column() {
                Row() {
                    Column() {
                        Text('${idx + 1}')
                            // 圆形序号
                    }
                    Column() {
                        Text(gift.name)
                            .fontSize(16)
                            .fontWeight(FontWeight.Bold)
                        Text(gift.reason)
                            .fontSize(13)
                            .fontColor(COLOR_TEXT_SEC)
                        Text(gift.price_range)
                            .fontSize(12)
                            .fontColor(COLOR_PRIMARY)
                            .backgroundColor(COLOR_SELECTED_BG)
                            .borderRadius(8)
                    }
                }
            }
            // 卡片样式
        })
    }
}

礼物卡片的设计特点：

• 序号使用青色圆形标识，突出显示
• 礼物名称使用大号加粗字体
• 推荐理由使用灰色常规字体，详细说明推荐原因
• 价格带使用标签样式，青色背景+青色文字，一目了然

3.3 Flex 标签选择

送礼对象和关系程度使用 Flex + ForEach 标签选择：

this.buildSection('🎯 送礼对象', GA_TARGETS, this.selectedTarget,
    (item: string) => { this.selectedTarget = item })
this.buildSection('🤝 关系程度', GA_RELATIONS, this.selectedRelation,
    (item: string) => { this.selectedRelation = item })

3.4 Scroll 滚动展示

3个礼物推荐结果使用 Scroll 包裹，确保所有内容可滚动查看：

if (this.currentData !== null) {
    Scroll() {
        Column() {
            this.buildResultCard(this.currentData)
        }
        .padding({ bottom: 20 })
    }
    .layoutWeight(1)
    .scrollBar(BarState.Off)
}

---

四、AI 应用亮点分析

4.1 15种组合覆盖（5×3）

应用通过5种送礼对象 × 3种关系程度的笛卡尔积组合，实现了15种不同的推荐场景：

5 对象 × 3 关系 = 15 种组合
每种组合包含 3 个礼物
总计 45 个礼物预置

对象覆盖：长辈、伴侣、朋友、同事、孩子
关系程度：亲密、一般、商务

4.2 45个礼物预置库

应用内置了45个精心挑选的礼物，覆盖各种场景和预算：

长辈礼物：

• 亲密：按摩椅垫（500-2000元）、茶叶礼盒（300-800元）、体检套餐（800-3000元）
• 一般：水果礼篮（200-500元）、保健品礼盒（300-600元）、羊绒围巾（300-800元）

伴侣礼物：

• 亲密：定制情侣饰品（500-2000元）、香水（500-1500元）、周末度假套餐（1000-3000元）
• 一般：鲜花+巧克力（200-500元）、品牌手表（500-1500元）、蓝牙音箱（300-800元）

朋友礼物：

• 亲密：个性定制礼物（200-800元）、高品质耳机（500-1500元）、桌游/游戏（200-500元）
• 一般：香薰蜡烛礼盒（100-300元）、创意文具套装（100-300元）、零食大礼包（100-300元）

同事礼物：

• 商务：品牌钢笔（300-1000元）、办公桌摆件（200-500元）、茶叶/咖啡礼盒（200-600元）
• 一般：桌面绿植（50-200元）、保温杯（100-300元）、书签套装（50-150元）

孩子礼物：

• 亲密：乐高/积木套装（200-800元）、绘本套装（100-300元）、科学实验套装（150-400元）
• 一般：文具礼盒（50-200元）、毛绒玩具（50-200元）、益智拼图（50-150元）

4.3 预算自动筛选

用户输入的预算范围可以作为筛选条件，系统会根据预算推荐价格合适的礼物：

// 预算信息传递给 Service 层
const data = this.service.getGift(this.selectedTarget, this.selectedBudget, this.selectedRelation)

预算处理逻辑：

• 当用户输入预算时，Service 层可以筛选出价格带在预算范围内的礼物
• 当用户不输入预算时，返回默认推荐
• 每个礼物都标注了明确的价格带，方便用户参考

4.4 推荐理由多样化

每个礼物都附带了详细的推荐理由，帮助用户理解为什么这个礼物适合：

• '实用性强，每天都能用，体现孝心与关怀'——强调实用性
• '独一无二，刻上名字或纪念日，浪漫满分'——强调个性化
• '商务场合经典礼品，体现专业和尊重'——强调场合适配性
• '开发智力又有趣，孩子可以玩很久'——强调教育和娱乐性

---

五、关键技术挑战与解决方案

5.1 挑战一：礼物库的合理组织

挑战：45个礼物需要按照对象和关系两级维度组织，确保快速检索。

解决方案：

• 采用 Record<string, GiftEntry[]> 映射表结构
• 键为 "对象|关系" 组合，如 "长辈|亲密"
• 直接通过键值匹配返回对应的3个礼物
• 内置兜底方案，当没有匹配时返回通用礼物

5.2 挑战二：预算信息的处理

挑战：预算输入格式不统一，需要灵活处理。

解决方案：

• 当前版本将预算信息作为字符串传递给 Service 层
• 预留了预算解析和筛选的逻辑扩展接口
• 无论用户是否输入预算，都能正常生成推荐

5.3 挑战三：礼物信息的丰富展示

挑战：每个礼物包含名称、理由、价格带三个维度的信息。

解决方案：

• 名称使用大号加粗字体，视觉突出
• 理由使用常规字体，提供详细说明
• 价格带使用标签样式，轻量呈现
• 每个礼物独立成卡，层次分明

---

六、用户交互体验设计

6.1 青色的温情主题

应用采用青色系配色（#F0FDFA背景、#14B8A6主题色），传达温暖、贴心的品牌调性：

const COLOR_BG = '#F0FDFA'
const COLOR_PRIMARY = '#14B8A6'
const COLOR_SELECTED_BG = '#CCFBF1'

6.2 清晰的三步配置

1. 选择送礼对象：5种对象类型
2. 输入预算范围：可选，格式如"200-500"
3. 选择关系程度：亲密/一般/商务

6.3 结果展示的丰富性

每个礼物结果包含三层信息：

• 礼物名称（大号加粗）
• 推荐理由（详细说明）
• 价格带（标签样式）

---

七、总结

送礼推荐 应用展示了鸿蒙 ArkTS 在生活服务领域的应用潜力，三个核心技术亮点值得关注：

1. 45个礼物预置库：通过两级映射表结构高效组织和管理礼物数据
2. @Builder 礼物卡片组件：统一的结果卡片组件，含名称、理由、价格带标签
3. 预算输入验证：灵活的预算输入和传递机制

未来展望：未来可以引入 AI 大模型实现真正的智能礼物推荐（结合用户画像）、支持更多送礼场景（如节日、生日、纪念日等）、提供礼物购买链接、送礼记录管理等功能，让送礼更加智能化和个性化。