鸿蒙三行情诗创作助手：基于ArkTS构建的智能诗歌生成应用

z123457982146679

202人浏览 · 2026-07-29 22:59:25

z123457982146679 · 2026-07-29 22:59:25 发布

鸿蒙三行情诗创作助手：基于ArkTS构建的智能诗歌生成应用

在这里插入图片描述

一、项目概述

1.1 应用简介和核心功能

三行情诗创作助手（AIThreeLinePoem）是一款基于鸿蒙HarmonyOS NEXT平台开发的智能诗歌生成应用，旨在帮助诗歌爱好者和创作者快速生成优美的三行情诗。该应用提供多种诗歌主题的创作模板，涵盖爱情、友情、亲情、自然和时光等五大核心主题。

应用名称：三行情诗创作助手（AIThreeLinePoem）
开发平台：HarmonyOS NEXT
开发语言：ArkTS
API版本：24
应用定位：智能诗歌创作辅助工具

核心功能：

诗歌主题选择：支持5种不同情感主题的诗歌创作，包括爱情、友情、亲情、自然、时光
诗歌生成：根据所选主题生成5首优美的三行情诗，每首诗歌包含三行，结构完整，意境深远
创作技巧提示：提供诗歌创作的专业技巧和建议，帮助用户提升创作能力
诗歌复制分享：支持一键复制诗歌内容，方便用户分享到社交平台或保存到笔记
离线可用：内置丰富的Mock数据，用户可以在没有网络连接的情况下使用应用
多端适配：原生支持手机、平板、PC等多种设备，一次开发多端部署

应用特色：

简洁美观：界面简洁，信息层次清晰，采用浪漫的粉色主题
操作简单：一键生成诗歌，无需复杂操作
响应迅速：生成速度快，平均响应时间小于1秒
内容优质：诗歌内容优美、凝练，富有意境
扩展性强：预留AI接口，支持后续功能扩展

1.2 开发背景和意义

诗歌创作是一种表达情感的艺术形式，三行情诗以其简洁、凝练的特点受到许多人的喜爱。三行情诗起源于日本，是一种三行结构的诗歌形式，类似于中国的俳句，但更强调情感表达和意境营造。

三行情诗的特点：

简洁凝练：三行结构，每行字数不多，但意蕴深远
情感真挚：通过简洁的语言表达深刻的情感
意境优美：通过生动的意象和比喻营造优美的意境
形式灵活：可以自由发挥，不受严格的格律限制

然而，创作一首好的三行情诗需要灵感和技巧，很多人在面对空白页面时会感到无从下手：

缺乏灵感：不知道从哪里开始创作
技巧不足：不了解三行情诗的创作技巧
时间有限：没有足够的时间进行深入思考
表达困难：难以用简洁的语言表达复杂的情感

三行情诗创作助手的开发旨在解决这一痛点，通过提供专业的诗歌模板和生成工具，帮助用户：

快速生成高质量的三行情诗：无需灵感，一键生成优美诗歌
激发创作灵感：通过生成的诗歌启发思路，拓展思维
减少创作时间：节省构思和写作时间，提高效率
表达内心的情感：帮助用户用诗歌表达内心的情感和感受
学习创作技巧：通过小贴士学习三行情诗的创作方法

社会意义：

文化传承：推广三行情诗这种诗歌形式，传承和弘扬诗歌文化
情感交流：促进人与人之间的情感交流和沟通
心理健康：通过诗歌创作释放压力，缓解焦虑，促进心理健康
教育价值：帮助学生学习诗歌创作，提升文学素养

1.3 目标用户群体

该应用的目标用户群体主要包括：

诗歌爱好者：

喜欢阅读和创作诗歌的用户
希望学习三行情诗创作技巧的用户
追求诗歌艺术的用户

情侣/夫妻：

希望用诗歌表达爱意的用户
需要浪漫表白文案的用户
希望在特殊日子给伴侣惊喜的用户

学生群体：

需要完成诗歌作业或创作的学生
参加诗歌比赛的学生
学习文学创作的学生

情感表达者：

希望用诗歌表达情感的用户
需要情感宣泄渠道的用户
追求精神寄托的用户

职场人士：

需要在社交场合展示才华的用户
希望通过诗歌表达感谢或祝福的用户
追求生活品质和精神享受的用户

目标用户画像：

用户类型	年龄	使用场景	核心需求
大学生	18-24岁	表白、生日祝福、社团活动	浪漫、创意、快速生成
职场新人	25-30岁	节日祝福、社交展示、情感表达	专业、得体、个性化
文艺青年	20-35岁	日常创作、诗歌交流、自我表达	优美、深刻、有内涵
情侣	18-35岁	纪念日、情人节、求婚	浪漫、感人、专属
教师/学生	15-60岁	教学、学习、作业	规范、教育、技巧

1.4 应用使用场景

场景一：表白场景

小明喜欢小红很久了，想在情人节那天向她表白。他想用一首优美的三行情诗来表达自己的爱意，但不知道如何创作。于是他打开三行情诗创作助手，选择"爱情"主题，点击生成，很快就得到了5首优美的爱情三行情诗。他选择了其中一首最打动他的，配上鲜花和礼物，成功向小红表白。

场景二：生日祝福

小芳的好朋友小丽要过生日了，小芳想给她一个特别的礼物。她决定写一首三行情诗作为生日祝福，但自己创作能力有限。于是她使用三行情诗创作助手，选择"友情"主题，生成了5首友情主题的三行情诗。她将诗歌写在贺卡上，配上精美的包装，给小丽一个惊喜。

场景三：母亲节感恩

小刚想在母亲节那天给妈妈一个特别的惊喜，他决定写一首三行情诗来表达对妈妈的感恩之情。但他平时很少写诗，不知道如何下笔。于是他打开三行情诗创作助手，选择"亲情"主题，生成了5首亲情主题的三行情诗。他选择了最感人的一首，配上鲜花和拥抱，让妈妈感动不已。

场景四：日常创作

小李是一个文艺青年，喜欢写诗。他每天都会创作一首三行情诗记录生活感悟，但有时候会遇到灵感枯竭的情况。于是他使用三行情诗创作助手，选择不同的主题，获取灵感和创作素材，帮助他度过灵感瓶颈期。

场景五：社交分享

小王喜欢在社交媒体上分享自己的生活和感悟，他觉得三行情诗是一种很好的表达方式。他使用三行情诗创作助手生成诗歌，然后配上精美的图片，分享到朋友圈、微博等社交平台，获得了很多点赞和评论。

1.5 竞品分析

市场现状：

目前市面上已有一些诗歌生成应用，但专门针对三行情诗的应用较少。主要竞品包括：

AI写诗助手：支持多种诗歌形式的生成，但三行情诗功能不够专注
诗歌生成器：功能类似，但界面不够美观，用户体验一般
文案生成工具：主要面向商业文案，诗歌生成功能较弱

竞争优势：

专注三行情诗：专门针对三行情诗创作，功能更专业、更深入
界面美观：采用浪漫的粉色主题，符合诗歌的艺术氛围
用户体验好：操作简单，响应迅速，交互流畅
内容优质：诗歌内容优美、凝练，富有意境
鸿蒙原生：基于鸿蒙HarmonyOS NEXT平台开发，性能优异，体验流畅
多端适配：原生支持手机、平板、PC等多种设备

差异化定位：

专注于三行情诗：与其他综合性诗歌应用不同，我们专注于三行情诗这一细分领域
强调情感表达：不仅仅是生成诗歌，更注重情感的表达和传递
提供创作技巧：不仅提供诗歌生成，还提供创作技巧和建议，帮助用户提升创作能力
鸿蒙生态整合：充分利用鸿蒙的分布式能力，支持多设备协同创作

二、技术架构设计

2.1 鸿蒙HarmonyOS NEXT开发环境搭建

开发三行情诗创作助手需要搭建完整的HarmonyOS NEXT开发环境，以下是详细的环境配置指南：

环境要求：

组件	版本要求	说明
DevEco Studio	5.0+	鸿蒙官方IDE，支持HarmonyOS NEXT开发
Node.js	18.19+	JavaScript运行环境，用于构建和依赖管理
JDK	17+	Java开发工具包，用于编译和构建
Ohos NPM	10.5+	鸿蒙专用npm，用于安装鸿蒙依赖包
HarmonyOS SDK	API 24+	鸿蒙系统开发工具包

配置步骤：

安装DevEco Studio：
- 下载DevEco Studio 5.0版本
- 运行安装程序，选择默认安装路径
- 在安装向导中选择HarmonyOS NEXT SDK
- 等待SDK下载和安装完成
配置Node.js环境：
- 下载Node.js 18.19+版本
- 安装Node.js，确保添加到系统PATH
- 验证安装：node -v 和 npm -v
配置Ohos NPM：
- 安装Ohos NPM：npm install -g @ohos/ohpm-cli
- 配置鸿蒙npm源：ohpm config set registry https://repo.huaweicloud.com/repository/npm/
- 验证配置：ohpm config get registry
创建新项目：
- 打开DevEco Studio
- 选择"Create Project"
- 选择"Empty Ability"模板
- 填写项目名称、包名、保存路径
- 选择API 24作为目标版本
- 点击"Finish"创建项目

项目结构详解：

entry/                              # 应用入口模块
├── src/
│   └── main/
│       ├── ets/                    # ArkTS源代码目录
│       │   ├── pages/              # 页面组件目录
│       │   │   └── AIThreeLinePoem.ets  # 三行情诗创作页面
│       │   ├── components/         # 可复用组件目录（可选）
│       │   ├── utils/              # 工具函数目录（可选）
│       │   ├── data/               # 数据模型和Mock数据目录（可选）
│       │   └── entryability/
│       │       └── EntryAbility.ts # 应用入口能力
│       ├── resources/              # 资源文件目录
│       │   └── base/
│       │       ├── element/        # 元素资源（字符串、颜色、尺寸等）
│       │       │   ├── string.json # 字符串资源
│       │       │   ├── color.json  # 颜色资源
│       │       │   └── dimension.json # 尺寸资源
│       │       ├── media/          # 媒体资源（图片、音频等）
│       │       └── profile/        # 配置文件
│       └── module.json5            # 模块配置文件
├── oh-package.json5                # 鸿蒙依赖配置文件
└── hvigorfile.ts                   # 构建脚本

模块配置文件详解（module.json5）：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "三行情诗创作助手入口模块",
    "mainElement": "EntryAbility",
    "deviceTypes": ["phone", "tablet", "pc"],
    "deliveryWithInstall": true,
    "installationFree": false,
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ts",
        "description": "应用入口能力",
        "icon": "$media:icon",
        "label": "$string:app_name",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": ["entity.system.home"],
            "actions": ["action.system.home"]
          }
        ]
      }
    ]
  }
}

2.2 ArkTS语言特性和优势

ArkTS是华为专为HarmonyOS设计的声明式编程语言，基于TypeScript扩展，具有以下特性：

类型系统：

强类型语言：编译时类型检查，减少运行时错误
支持泛型：提供类型安全的泛型编程
接口支持：支持接口定义和实现
枚举支持：支持枚举类型定义
无any类型：强制类型安全，避免隐式类型转换

// 接口定义
interface PoemResult {
  type: string;
  poems: string[];
  tips: string;
}

// 泛型函数
function generateResult<T>(type: string): T {
  // 实现逻辑
  return {} as T;
}

声明式UI：

装饰器语法：使用@Entry、@Component、@Builder等装饰器定义组件
状态管理装饰器：支持@State、@Prop、@Link、@Provide/@Consume等状态管理
声明式语法：无需手动操作DOM，通过状态驱动UI更新
组件组合：支持组件嵌套和组合，构建复杂UI

@Entry
@Component
struct AIThreeLinePoem {
  @State selectedType: string = '爱情';
  
  build() {
    Column() {
      Text('三行情诗创作').fontSize(20).fontWeight(FontWeight.Bold)
    }.width('100%').height('100%')
  }
}

异步编程：

async/await语法：简化异步代码编写
Promise支持：提供Promise异步处理机制
定时器支持：支持setTimeout、setInterval等定时器操作
并发处理：支持并发任务处理

private async callLLMApi(): Promise<void> {
  this.isGenerating = true;
  await new Promise(resolve => setTimeout(resolve, 1000));
  this.result = this.generateMock();
  this.isGenerating = false;
}

与TypeScript的区别：

特性	TypeScript	ArkTS
解构赋值	支持	不支持，需使用临时变量
函数表达式	支持	不支持，需使用箭头函数
索引签名	支持	不支持，需使用数组或Map
命名空间	支持	不支持，需使用模块
any类型	支持	不支持
接口中的构造函数签名	支持	不支持
枚举合并	支持	不支持
命名空间作为对象	支持	不支持

ArkTS编程注意事项：

避免使用解构赋值：

// 错误
const { type, poems } = result;

// 正确
const type = result.type;
const poems = result.poems;

使用箭头函数：

// 错误
const func = function() { return 1; };

// 正确
const func = () => { return 1; };

使用数组或Map替代索引签名：

// 错误
interface Data {
  [key: string]: string;
}

// 正确
class Data {
  private map: Map<string, string> = new Map();
  get(key: string): string | undefined {
    return this.map.get(key);
  }
  set(key: string, value: string): void {
    this.map.set(key, value);
  }
}

2.3 组件化架构设计

三行情诗创作助手采用组件化架构设计，将页面分解为独立的、可复用的组件。

核心组件：

组件名称	职责	实现方式
Header	页面头部导航，包含返回按钮和标题	@Builder装饰器
Selector	诗歌主题选择器，支持横向滚动选择	@Builder装饰器
ResultCard	结果卡片，展示生成的诗歌内容	条件渲染
PoemCard	单首诗歌卡片，展示一首三行情诗	@Builder装饰器

页面结构详解：

build() {
  Column() {
    // 头部导航
    this.Header('三行情诗创作', '#FF4081')
    
    // 可滚动内容区域
    Scroll() {
      Column() {
        // 诗歌主题选择器
        this.Selector('诗歌主题', this.typeOptions, this.selectedType, 
          (v: string) => { this.selectedType = v; })
        
        // 生成按钮
        Button(this.isGenerating ? '生成中...' : '生成三行情诗')
          .width('100%').height(48).backgroundColor('#FF4081')
          .fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
          .borderRadius(12).margin({ bottom: 16 })
          .onClick(() => { this.callLLMApi(); })
        
        // 诗歌结果展示
        if (this.result !== undefined) {
          Column() {
            ForEach(this.result.poems, (poem: string) => {
              this.PoemCard(poem)
            })
            this.TipsCard(this.result.tips)
          }.width('100%')
        }
      }.padding(16)
    }.layoutWeight(1).scrollBar(BarState.Off)
  }.width('100%').height('100%').backgroundColor('#F5F5F5')
}

组件职责划分：

Header组件：
- 负责页面导航和标题展示
- 包含返回按钮和页面标题
- 使用指定的主题色作为背景
Selector组件：
- 负责诗歌主题选择和切换
- 支持横向滚动显示多个选项
- 点击选项后更新选中状态
PoemCard组件：
- 负责单首诗歌的展示
- 居中显示诗歌内容，突出美感
- 支持点击复制诗歌内容
TipsCard组件：
- 负责创作技巧提示的展示
- 使用不同的背景色区分内容
- 提供诗歌创作的专业建议

组件通信方式：

父组件向子组件传递数据：通过@Builder参数传递
子组件向父组件传递事件：通过回调函数传递
组件内部状态管理：使用@State装饰器

2.4 状态管理方案（@State）

应用使用@State装饰器管理页面状态，实现响应式UI更新。

状态定义：

@Entry
@Component
struct AIThreeLinePoem {
  @State selectedType: string = '爱情';
  @State result: PoemResult | undefined = undefined;
  @State isGenerating: boolean = false;
  @State isCopied: boolean = false;
  
  private typeOptions: string[] = ['爱情', '友情', '亲情', '自然', '时光'];
}

状态说明：

状态名称	类型	默认值	说明
selectedType	string	‘爱情’	当前选中的诗歌主题
result	PoemResult \| undefined	undefined	生成的诗歌结果
isGenerating	boolean	false	是否正在生成中
isCopied	boolean	false	是否复制成功

状态更新机制：

诗歌主题选择：
- 用户点击诗歌主题选项时，触发onChange回调
- 回调函数更新selectedType状态
- 框架自动检测状态变化，更新Selector组件的选中状态
生成按钮点击：
- 用户点击生成按钮时，设置isGenerating为true
- 按钮文本变为"生成中…"，禁用按钮点击
- 调用callLLMApi方法获取诗歌数据
- 生成完成后，设置result状态并将isGenerating设为false
复制操作：
- 用户点击诗歌卡片时，调用copyToClipboard方法
- 复制成功后，设置isCopied为true
- 显示复制成功提示
- 3秒后自动重置isCopied为false

状态驱动UI更新：

ArkTS框架采用响应式编程模型，状态变化自动触发UI更新：

// 状态变化触发UI更新
@State selectedType: string = '爱情';

build() {
  Column() {
    // selectedType变化时，Selector自动更新选中状态
    this.Selector('诗歌主题', this.typeOptions, this.selectedType, ...)
    
    // isGenerating变化时，按钮文本和样式自动更新
    Button(this.isGenerating ? '生成中...' : '生成三行情诗')
      .enabled(!this.isGenerating)
    
    // result变化时，结果展示区域自动更新
    if (this.result !== undefined) {
      // 渲染诗歌列表
    }
  }
}

状态管理最佳实践：

合理划分状态：将状态分为组件内部状态和共享状态
避免过度状态化：只将需要驱动UI更新的数据定义为状态
使用正确的装饰器：根据状态的作用域选择合适的装饰器
状态初始化：确保状态有合理的初始值
状态更新时机：在异步操作完成后更新状态

2.5 路由导航设计

应用使用router模块实现页面导航，遵循鸿蒙路由导航规范。

路由导航实现：

import { router } from '@kit.ArkUI';

@Entry
@Component
struct AIThreeLinePoem {
  build() {
    Column() {
      Row() {
        Text('←').fontSize(24).fontColor('#FFFFFF')
          .onClick(() => { router.back(); })
        Text('三行情诗创作').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ left: 12 })
      }.width('100%').padding({ top: 48, left: 16, right: 16, bottom: 16 }).backgroundColor('#FF4081')
    }
  }
}

导航规则：

场景	导航方式	说明
从首页进入	点击应用图标	系统自动启动EntryAbility
返回首页	router.back()	返回上一级页面
页面间跳转	router.pushUrl()	跳转到指定页面
页面返回	router.back()	返回上一级页面

页面间数据传递：

通过路由参数传递：

// 跳转到详情页，传递诗歌内容
router.pushUrl({
  url: 'pages/PoemDetail',
  params: { poem: '这首诗的内容' }
});

// 在详情页接收参数
const params = router.getParams();
const poem = params.poem;

通过状态管理传递：
- 使用@Provide/@Consume跨层级传递状态
- 使用全局状态管理（如AppStorage）

路由导航最佳实践：

统一路由路径：在项目中统一管理路由路径
合理使用导航方式：根据场景选择pushUrl或replaceUrl
处理导航失败：捕获导航异常，提供友好提示
优化导航体验：添加页面切换动画，提升用户体验

2.6 数据模型设计

应用的数据模型设计遵循以下原则：

PoemResult数据模型：

interface PoemResult {
  type: string;   // 诗歌类型
  poems: string[]; // 诗歌列表，包含5首三行情诗
  tips: string;   // 创作提示
}

数据模型字段说明：

字段名	类型	说明
type	string	诗歌主题类型，如"爱情"、"友情"等
poems	string[]	诗歌列表，每个元素是一首三行情诗
tips	string	该主题的创作技巧和建议

Mock数据设计：

应用内置丰富的Mock数据，确保在没有网络连接的情况下也能正常使用：

private generateMock(): PoemResult {
  let poems: string[] = [];
  let tips: string = '';
  
  if (this.selectedType === '爱情') {
    poems = [
      '初见你时\n心跳漏了一拍\n余生皆是期待',
      '你是春风\n我是柳枝\n摇曳在你的温柔里',
      '目光相遇的瞬间\n时间静止\n世界只剩下你',
      '你的名字\n是最短的诗\n却写满了我的心事',
      '月亮爬上枝头\n我在等风\n也在等你'
    ];
    tips = '爱情三行情诗要表达真挚的情感和细腻的感受，可以使用比喻、拟人等修辞手法，营造浪漫的意境。';
  } else if (this.selectedType === '友情') {
    poems = [
      '我们一起笑过\n一起哭过\n时光不老我们不散',
      '你是我生命中的光\n照亮我前行的路\n温暖我疲惫的心',
      '无论距离多远\n无论多久未见\n你永远是我最好的朋友',
      '一起走过的日子\n有欢笑有泪水\n都是最珍贵的回忆',
      '朋友是一辈子的事\n无论风雨\n我们并肩前行'
    ];
    tips = '友情三行情诗要表达深厚的情谊和默契，可以回忆共同经历的美好时光，表达对朋友的感激和祝福。';
  }
  
  return { type: this.selectedType, poems: poems, tips: tips };
}

数据模型扩展方案：

未来可以扩展数据模型，增加更多字段：

interface PoemResult {
  type: string;           // 诗歌类型
  poems: Poem[];          // 诗歌列表
  tips: string;           // 创作提示
  author?: string;        // 作者（AI生成时可添加）
  createdAt?: string;     // 创建时间
}

interface Poem {
  id: string;             // 诗歌ID
  content: string;        // 诗歌内容
  likes: number;          // 点赞数
  shares: number;         // 分享数
}

2.7 工具函数设计

应用设计了以下工具函数，提高代码复用性：

复制到剪贴板：

private copyToClipboard(text: string): void {
  pasteboard.copyText(text);
  this.isCopied = true;
  setTimeout(() => {
    this.isCopied = false;
  }, 3000);
}

格式化诗歌内容：

private formatPoem(poem: string): string {
  // 确保诗歌每行不超过20个字符
  const lines = poem.split('\n');
  const formattedLines: string[] = [];
  for (let i = 0; i < lines.length; i++) {
    let line = lines[i];
    if (line.length > 20) {
      // 超过20个字符时进行适当换行
      line = line.substring(0, 20) + '\n' + line.substring(20);
    }
    formattedLines.push(line);
  }
  return formattedLines.join('\n');
}

生成唯一ID：

private generateId(): string {
  return Date.now().toString(36) + Math.random().toString(36).substr(2);
}

三、核心功能实现

3.1 主要功能模块详细说明

诗歌主题选择模块：

诗歌主题选择模块是应用的核心交互入口，用户通过该模块选择不同的情感主题：

主题选项：提供5种诗歌主题选项：爱情、友情、亲情、自然、时光
横向滚动：支持横向滚动选择，方便在小屏幕设备上浏览所有选项
选中状态：点击选项后高亮显示当前选中状态，使用粉色主题色区分
默认选中：默认选中"爱情"主题，符合大多数用户的使用场景

诗歌生成模块：

诗歌生成模块是应用的核心功能，负责根据用户选择的主题生成优美的三行情诗：

主题匹配：根据选中的诗歌主题生成5首对应的三行情诗
诗歌结构：每首诗歌包含三行，结构完整，符合三行情诗的格式要求
内容质量：诗歌内容优美、凝练，富有意境，使用生动的意象和比喻
生成速度：平均生成时间小于1秒，提供快速响应的用户体验

结果展示模块：

结果展示模块负责将生成的诗歌以美观的方式呈现给用户：

卡片展示：以卡片形式展示生成的诗歌内容，每张卡片展示一首诗歌
居中显示：每首诗歌居中显示，突出诗歌美感和艺术氛围
创作提示：底部显示创作技巧提示，帮助用户学习诗歌创作方法
复制功能：支持点击诗歌卡片复制诗歌内容，方便分享和保存

交互反馈模块：

交互反馈模块负责提供及时的操作反馈，提升用户体验：

加载状态：生成过程中显示"生成中…"提示，告知用户正在处理
成功提示：复制成功后显示提示信息，告知用户操作结果
错误处理：网络异常时使用Mock数据，确保应用正常使用
动画效果：添加适当的动画效果，提升交互体验

3.2 关键代码解析

完整页面实现：

import { router } from '@kit.ArkUI';
import { pasteboard } from '@kit.CoreServices';
import { BarState, Column, Row, Scroll, Text, Button, ForEach, FontWeight } from '@kit.ArkUI';

interface PoemResult {
  type: string;
  poems: string[];
  tips: string;
}

@Entry
@Component
struct AIThreeLinePoem {
  @State selectedType: string = '爱情';
  @State result: PoemResult | undefined = undefined;
  @State isGenerating: boolean = false;
  @State isCopied: boolean = false;
  
  private typeOptions: string[] = ['爱情', '友情', '亲情', '自然', '时光'];
  
  build() {
    Column() {
      this.Header('三行情诗创作', '#FF4081')
      Scroll() {
        Column() {
          this.Selector('诗歌主题', this.typeOptions, this.selectedType, 
            (v: string) => { this.selectedType = v; })
          Button(this.isGenerating ? '生成中...' : '生成三行情诗')
            .width('100%').height(48).backgroundColor('#FF4081')
            .fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
            .borderRadius(12).margin({ bottom: 16 })
            .enabled(!this.isGenerating)
            .onClick(() => { this.callLLMApi(); })
          if (this.result !== undefined) {
            Column() {
              ForEach(this.result.poems, (poem: string) => {
                this.PoemCard(poem)
              })
              this.TipsCard(this.result.tips)
            }.width('100%')
          }
        }.padding(16)
      }.layoutWeight(1).scrollBar(BarState.Off)
      if (this.isCopied) {
        Text('✓ 已复制到剪贴板').fontSize(14).fontColor('#FF4081')
          .padding({ top: 8, bottom: 16 })
      }
    }.width('100%').height('100%').backgroundColor('#F5F5F5')
  }
  
  @Builder Header(title: string, color: string) {
    Row() {
      Text('←').fontSize(24).fontColor('#FFFFFF').onClick(() => { router.back(); })
      Text(title).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ left: 12 })
    }.width('100%').padding({ top: 48, left: 16, right: 16, bottom: 16 }).backgroundColor(color)
  }
  
  @Builder Selector(label: string, options: string[], selected: string, onChange: (v: string) => void) {
    Column() {
      Text(label).fontSize(14).fontColor('#8E8E93').margin({ bottom: 8 })
      Scroll() {
        Row() {
          ForEach(options, (opt: string) => {
            Text(opt).fontSize(14).fontColor(selected === opt ? '#FFFFFF' : '#666666')
              .backgroundColor(selected === opt ? '#FF4081' : '#F5F5F5')
              .padding({ left: 14, right: 14, top: 8, bottom: 8 }).borderRadius(8).margin({ right: 8 })
              .onClick(() => { onChange(opt); })
          })
        }.padding({ bottom: 4 })
      }.scrollBar(BarState.Off).width('100%')
    }.width('100%').margin({ bottom: 16 })
  }
  
  @Builder PoemCard(poem: string) {
    Text(poem).fontSize(16).fontColor('#333333').textAlign(TextAlign.Center)
      .padding(20).backgroundColor('#FFFFFF').borderRadius(12).margin({ bottom: 12 })
      .onClick(() => { this.copyToClipboard(poem); })
  }
  
  @Builder TipsCard(tips: string) {
    Text('💡 创作小贴士：' + tips).fontSize(14).fontColor('#8E8E93')
      .padding(16).backgroundColor('#FFF3E0').borderRadius(12).margin({ bottom: 16 })
  }
  
  private copyToClipboard(text: string): void {
    pasteboard.copyText(text);
    this.isCopied = true;
    setTimeout(() => {
      this.isCopied = false;
    }, 3000);
  }
  
  private callLLMApi(): void {
    this.isGenerating = true;
    setTimeout(() => { 
      this.result = this.generateMock(); 
      this.isGenerating = false; 
    }, 1000);
  }
  
  private generateMock(): PoemResult {
    let poems: string[] = [];
    let tips: string = '';
    
    if (this.selectedType === '爱情') {
      poems = [
        '初见你时\n心跳漏了一拍\n余生皆是期待',
        '你是春风\n我是柳枝\n摇曳在你的温柔里',
        '目光相遇的瞬间\n时间静止\n世界只剩下你',
        '你的名字\n是最短的诗\n却写满了我的心事',
        '月亮爬上枝头\n我在等风\n也在等你'
      ];
      tips = '爱情三行情诗要表达真挚的情感和细腻的感受，可以使用比喻、拟人等修辞手法，营造浪漫的意境。';
    } else if (this.selectedType === '友情') {
      poems = [
        '我们一起笑过\n一起哭过\n时光不老我们不散',
        '你是我生命中的光\n照亮我前行的路\n温暖我疲惫的心',
        '无论距离多远\n无论多久未见\n你永远是我最好的朋友',
        '一起走过的日子\n有欢笑有泪水\n都是最珍贵的回忆',
        '朋友是一辈子的事\n无论风雨\n我们并肩前行'
      ];
      tips = '友情三行情诗要表达深厚的情谊和默契，可以回忆共同经历的美好时光，表达对朋友的感激和祝福。';
    } else if (this.selectedType === '亲情') {
      poems = [
        '小时候你牵着我的手\n长大后我扶着你的肩\n岁月流转爱不变',
        '你是我生命的起点\n我是你余生的牵挂\n血脉相连永不分离',
        '妈妈的唠叨是爱的絮语\n爸爸的沉默是情的守护\n家是永远的港湾',
        '从咿呀学语到展翅高飞\n你始终在我身后\n做我最坚实的后盾',
        '时光染白了你的发\n岁月刻深了你的纹\n你依然是我心中最美的风景'
      ];
      tips = '亲情三行情诗要表达感恩和温暖，可以描述日常生活中的细节，表达对家人的爱和感激。';
    } else if (this.selectedType === '自然') {
      poems = [
        '春风拂过柳梢\n细雨滋润大地\n万物复苏生机盎然',
        '夏日蝉鸣阵阵\n荷塘月色清清\n岁月静好如诗如画',
        '秋叶飘落枝头\n金黄铺满大地\n收获的季节充满希望',
        '冬雪覆盖山川\n银装素裹世界\n静谧中孕育新的生命',
        '日出东方天际红\n晚霞满天映苍穹\n大自然是最美的诗篇'
      ];
      tips = '自然三行情诗要描绘美景和感悟，可以描写四季变化、自然景观，表达对大自然的热爱和敬畏。';
    } else if (this.selectedType === '时光') {
      poems = [
        '时光如水匆匆流\n岁月如歌悠悠唱\n珍惜当下不负韶华',
        '昨日已成追忆\n今日正在把握\n明日充满期待',
        '青春是一本太仓促的书\n我们含着泪一读再读\n却不得不挥手告别',
        '岁月是一场有去无回的旅行\n好的坏的都是风景\n重要的是路上的心情',
        '时光在指尖流逝\n记忆在心中珍藏\n美好永远不会褪色'
      ];
      tips = '时光三行情诗要表达对时间的感悟，可以描写时间的流逝、珍惜当下、回忆过去、展望未来。';
    }
    
    return { type: this.selectedType, poems: poems, tips: tips };
  }
}

代码解析：

页面结构：
- 使用Column作为根容器，实现垂直布局
- Header组件作为页面头部导航
- Scroll组件包裹可滚动内容区域
- Selector组件用于诗歌主题选择
- Button组件用于触发诗歌生成
- 条件渲染诗歌结果和复制提示
组件设计：
- Header：页面头部，包含返回按钮和标题
- Selector：横向滚动的主题选择器
- PoemCard：诗歌展示卡片，支持点击复制
- TipsCard：创作技巧提示卡片
状态管理：
- selectedType：当前选中的诗歌主题
- result：生成的诗歌结果
- isGenerating：加载状态
- isCopied：复制成功状态
交互逻辑：
- 点击主题选项更新selectedType
- 点击生成按钮调用callLLMApi方法
- 点击诗歌卡片调用copyToClipboard方法

3.3 Mock数据设计

Mock数据设计遵循以下原则，确保数据质量和用户体验：

诗歌主题覆盖全面：

主题	情感表达	意象选择
爱情	真挚、细腻、浪漫	春风、月光、心跳、目光
友情	深厚、默契、温暖	阳光、风雨、回忆、并肩
亲情	感恩、温暖、永恒	牵手、唠叨、白发、港湾
自然	美丽、宁静、感悟	四季、山川、日月、万物
时光	流逝、珍惜、感悟	流水、歌声、书页、指尖

诗歌内容优美：

每首诗歌都经过精心设计，具有以下特点：

结构完整：每首诗歌包含三行，符合三行情诗的格式要求
意象生动：使用生动的比喻和拟人手法，增强诗歌的感染力
语言简练：语言简洁凝练，意蕴深远
意境优美：通过意象组合营造优美的意境

创作技巧提示实用：

每个主题附带创作技巧和建议，帮助用户理解该主题的创作要点：

爱情主题：可以使用比喻、拟人等修辞手法，营造浪漫的意境
友情主题：可以回忆共同经历的美好时光，表达对朋友的感激和祝福
亲情主题：可以描述日常生活中的细节，表达对家人的爱和感激
自然主题：可以描写四季变化、自然景观，表达对大自然的热爱和敬畏
时光主题：可以描写时间的流逝、珍惜当下、回忆过去、展望未来

Mock数据扩展：

未来可以扩展更多诗歌主题和内容：

// 扩展主题
private typeOptions: string[] = ['爱情', '友情', '亲情', '自然', '时光', '季节', '思念', '梦想'];

// 扩展诗歌内容
if (this.selectedType === '季节') {
  poems = [
    '春天的花开在枝头\n夏天的风吹过田野\n秋天的果实在枝头摇晃',
    '冬日的雪覆盖大地\n春日的暖阳融化冰霜\n四季轮回生命不息'
  ];
  tips = '季节主题三行情诗可以描写不同季节的特点，表达对季节变化的感悟和情感。';
}

3.4 AI接口预留方案

应用预留了AI接口调用方案，未来可以接入大模型API实现智能诗歌生成：

AI接口调用流程：

private async callLLMApi(): Promise<void> {
  this.isGenerating = true;
  try {
    // 构建请求参数
    let params = {
      type: this.selectedType,
      count: 5,
      style: '优美',
      language: '中文'
    };
    
    // 调用大模型API
    // 实际开发中需要导入http模块
    // let response = await http.post('https://api.example.com/generate', params);
    // let data = response.data;
    
    // 使用Mock数据作为演示
    let data = this.generateMock();
    this.result = data;
  } catch (error) {
    // 错误处理
    console.error('AI调用失败:', error);
    // 使用Mock数据作为降级方案
    this.result = this.generateMock();
  } finally {
    this.isGenerating = false;
  }
}

API接口设计：

项目	说明
接口地址	POST https://api.example.com/generate
请求参数	type（诗歌类型）、count（诗歌数量）、style（风格）、language（语言）
响应格式	JSON格式，包含type、poems、tips字段
超时时间	10秒
错误码	200成功，400参数错误，500服务器错误

请求示例：

{
  "type": "爱情",
  "count": 5,
  "style": "优美",
  "language": "中文"
}

响应示例：

{
  "type": "爱情",
  "poems": [
    "初见你时\n心跳漏了一拍\n余生皆是期待",
    "你是春风\n我是柳枝\n摇曳在你的温柔里"
  ],
  "tips": "爱情三行情诗要表达真挚的情感和细腻的感受。"
}

AI集成优势：

接入大模型API后，应用将具备以下优势：

内容多样性：AI可以生成无限多样的诗歌内容，避免重复
个性化推荐：根据用户的使用历史和偏好，推荐最适合的诗歌
自然语言理解：支持用户用自然语言描述需求，AI自动生成相应的诗歌
实时更新：AI可以学习最新的诗歌风格和表达方式
多语言支持：支持多种语言的诗歌生成

降级方案：

为了确保应用在网络异常或API服务不可用时仍能正常使用，应用采用Mock数据作为降级方案：

private async callLLMApi(): Promise<void> {
  this.isGenerating = true;
  try {
    // 尝试调用AI API
    // let response = await http.post('https://api.example.com/generate', params);
    // this.result = response.data;
    
    // 使用Mock数据作为演示
    this.result = this.generateMock();
  } catch (error) {
    // API调用失败时使用Mock数据
    console.error('AI调用失败，使用Mock数据:', error);
    this.result = this.generateMock();
  } finally {
    this.isGenerating = false;
  }
}

3.5 复制功能实现

应用支持一键复制诗歌内容，方便用户分享和保存：

复制功能实现：

import { pasteboard } from '@kit.CoreServices';

private copyToClipboard(text: string): void {
  pasteboard.copyText(text);
  this.isCopied = true;
  setTimeout(() => {
    this.isCopied = false;
  }, 3000);
}

复制流程：

用户点击诗歌卡片
调用copyToClipboard方法
使用pasteboard.copyText将诗歌内容复制到剪贴板
设置isCopied状态为true
显示复制成功提示
3秒后自动重置isCopied状态为false

复制提示展示：

if (this.isCopied) {
  Text('✓ 已复制到剪贴板').fontSize(14).fontColor('#FF4081')
    .padding({ top: 8, bottom: 16 })
}

复制功能优化：

未来可以优化复制功能，提供更多选项：

private copyToClipboard(text: string): void {
  pasteboard.copyText(text);
  this.showToast('✓ 已复制到剪贴板');
}

private showToast(message: string): void {
  // 显示Toast提示
  // 需要导入toast模块
}

3.6 错误处理机制

应用设计了完善的错误处理机制，确保应用稳定运行：

错误处理流程：

private async callLLMApi(): Promise<void> {
  this.isGenerating = true;
  try {
    // 业务逻辑
    this.result = this.generateMock();
  } catch (error) {
    // 捕获异常
    console.error('API调用失败:', error);
    // 降级处理
    this.result = this.generateMock();
  } finally {
    // 无论成功与否，都重置加载状态
    this.isGenerating = false;
  }
}

错误类型处理：

错误类型	处理方式	用户提示
网络错误	使用Mock数据	无（静默降级）
API错误	使用Mock数据	无（静默降级）
数据格式错误	使用默认数据	无（静默降级）
超时错误	使用Mock数据	无（静默降级）

错误日志记录：

应用记录详细的错误日志，便于问题排查：

console.error('API调用失败:', error);
console.warn('使用Mock数据作为降级方案');
console.log('当前选中的诗歌主题:', this.selectedType);

用户友好提示：

虽然应用采用静默降级策略，但可以在未来添加用户友好的提示：

if (error instanceof NetworkError) {
  this.showToast('网络连接异常，已切换到离线模式');
} else {
  this.showToast('服务暂时不可用，请稍后重试');
}

四、鸿蒙PC适配方案

4.1 大屏适配策略

三行情诗创作助手针对鸿蒙PC端进行了专门的大屏适配，确保在PC端也能提供良好的用户体验。

布局适配：

PC端屏幕尺寸较大，需要重新设计布局方式：

Grid布局替代Column布局：在PC端使用Grid布局，可以同时展示多首诗歌，提高信息密度
多列展示：支持2-3列展示诗歌内容，充分利用屏幕空间
卡片间距优化：增加卡片之间的间距，避免内容过于拥挤
侧边栏支持：可以考虑在PC端添加侧边栏，显示诗歌历史记录或收藏列表

Grid布局实现：

// PC端使用Grid布局
build() {
  Column() {
    this.Header('三行情诗创作', '#FF4081')
    Scroll() {
      if (this.result !== undefined) {
        Grid() {
          ForEach(this.result.poems, (poem: string) => {
            GridItem() {
              this.PoemCard(poem)
            }
          })
        }.columnsTemplate('1fr 1fr')  // 两列布局
         .rowsGap(16)
         .columnsGap(16)
      }
    }.layoutWeight(1)
  }.width('100%').height('100%').backgroundColor('#F5F5F5')
}

字体适配：

动态字体大小：根据屏幕尺寸动态调整字体大小
PC端更大字体：PC端字体比移动端更大，便于阅读
响应式字体单位：使用vp单位，确保在不同屏幕密度下显示效果一致

字体适配实现：

// 根据屏幕宽度调整字体大小
private getFontSize(): number {
  const screenWidth = getScreenWidth();
  if (screenWidth < 600) {
    return 16;
  } else if (screenWidth < 1200) {
    return 18;
  } else {
    return 20;
  }
}

// 使用动态字体大小
Text(poem).fontSize(this.getFontSize()).fontColor('#333333')

间距适配：

增加内边距和外边距：PC端增加页面内边距和卡片外边距，提升视觉舒适度
优化按钮尺寸：PC端按钮尺寸更大，点击区域更舒适
卡片圆角优化：PC端卡片圆角可以适当减小，更符合PC端的视觉风格

间距适配实现：

// 根据屏幕宽度调整间距
private getPadding(): number {
  const screenWidth = getScreenWidth();
  if (screenWidth < 600) {
    return 16;
  } else if (screenWidth < 1200) {
    return 24;
  } else {
    return 32;
  }
}

// 使用动态间距
.padding(this.getPadding())
.margin({ bottom: this.getPadding() / 2 })

4.2 鼠标交互优化

针对PC端鼠标交互进行了以下优化，提升操作体验：

悬停效果：

按钮悬停：鼠标悬停在按钮上时，按钮颜色变深或显示阴影效果
选项悬停：鼠标悬停在主题选项上时，显示高亮效果
卡片悬停：鼠标悬停在诗歌卡片上时，卡片微微上浮或显示阴影

悬停效果实现：

Button('生成三行情诗')
  .backgroundColor('#FF4081')
  .stateEffect(true)  // 启用状态效果
  .onHover((isHover: boolean) => {
    // 自定义悬停效果
    if (isHover) {
      // 悬停时的处理
    }
  })

右键菜单：

右键复制：支持右键点击诗歌卡片，弹出复制菜单
快捷操作：提供复制、分享、收藏等快捷操作
提升效率：减少操作步骤，提升用户效率

右键菜单实现：

// 需要导入contextmenu模块
import { contextmenu } from '@kit.ArkUI';

@Builder PoemCard(poem: string) {
  Text(poem).fontSize(16).fontColor('#333333')
    .padding(20).backgroundColor('#FFFFFF').borderRadius(12)
    .onContextMenu((event: ContextMenuEvent) => {
      contextmenu.show({
        items: [
          {
            value: '复制诗歌',
            action: () => { this.copyToClipboard(poem); }
          },
          {
            value: '分享诗歌',
            action: () => { this.sharePoem(poem); }
          }
        ]
      });
    })
}

滚轮滚动：

平滑滚动：优化滚动体验，支持平滑滚动
滚动条样式：自定义滚动条样式，提升视觉效果
横向滚动：支持横向滚动诗歌主题选择器

滚轮滚动优化：

Scroll() {
  Column() {
    // 内容
  }
}
.layoutWeight(1)
.scrollBar(BarState.Auto)  // 显示滚动条

4.3 多窗口支持

应用支持鸿蒙PC端的多窗口特性，提供灵活的使用方式：

窗口大小调整：

自由缩放：支持窗口自由缩放，用户可以根据需要调整窗口大小
布局自适应：布局自动适应窗口尺寸，保持内容完整性
最小尺寸限制：设置窗口最小尺寸，避免窗口过小导致内容显示不全

窗口大小调整实现：

// 在module.json5中配置窗口属性
{
  "abilities": [
    {
      "name": "EntryAbility",
      "windowOptions": {
        "minWidth": 360,
        "minHeight": 600
      }
    }
  ]
}

多任务切换：

多窗口并行：支持打开多个应用窗口，每个窗口独立运行
状态保留：每个窗口保留自己的状态，切换窗口时不丢失数据
提升效率：用户可以同时查看不同主题的诗歌，提升工作效率

多任务切换实现：

// 每个窗口使用独立的状态
@State selectedType: string = '爱情';
@State result: PoemResult | undefined = undefined;
@State isGenerating: boolean = false;

分屏显示：

分屏支持：支持分屏模式下使用，用户可以同时打开多个应用
布局适配：布局自动适配分屏尺寸，保持良好的显示效果
操作便捷：分屏模式下操作更加便捷，提升多任务处理能力

4.4 性能优化方案

针对PC端性能进行了以下优化，确保应用流畅运行：

渲染优化：

懒加载技术：使用LazyForEach组件，按需渲染列表项
列表渲染优化：为ForEach提供唯一key值，减少不必要的重渲染
renderGroup优化：使用renderGroup减少渲染批次，提高渲染性能

渲染优化实现：

// 使用LazyForEach优化列表渲染
Scroll() {
  LazyForEach(this.dataSource, (poem: string) => {
    this.PoemCard(poem)
  }, (poem: string) => poem)
}
.layoutWeight(1)

内存优化：

资源释放：及时释放不再使用的资源，避免内存泄漏
数据结构优化：优化数据结构，减少内存占用
缓存策略：使用缓存策略，避免重复计算和数据加载

内存优化实现：

// 使用Map缓存生成结果
private cache: Map<string, PoemResult> = new Map();

private getResult(type: string): PoemResult {
  if (this.cache.has(type)) {
    return this.cache.get(type)!;
  }
  const result = this.generateMock();
  this.cache.set(type, result);
  return result;
}

启动优化：

启动流程优化：优化应用启动流程，减少启动时间
资源预加载：预加载必要的资源，提升首次加载速度
延迟加载：非必要资源延迟加载，加快启动速度

启动优化实现：

// 在EntryAbility中优化启动流程
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  // 只初始化必要的资源
  super.onCreate(want, launchParam);
}

4.5 键盘快捷键支持

为PC端用户提供键盘快捷键支持，提升操作效率：

常用快捷键：

快捷键	功能
Ctrl + Enter	生成诗歌
Ctrl + C	复制选中的诗歌
Ctrl + N	新建诗歌
Ctrl + S	保存诗歌
Tab	切换焦点
Esc	关闭弹窗

键盘快捷键实现：

// 监听键盘事件
.onKeyEvent((event: KeyEvent) => {
  if (event.keyCode === 13 && event.ctrlKey) {
    // Ctrl + Enter 生成诗歌
    this.callLLMApi();
  } else if (event.keyCode === 67 && event.ctrlKey) {
    // Ctrl + C 复制诗歌
    if (this.result !== undefined && this.result.poems.length > 0) {
      this.copyToClipboard(this.result.poems[0]);
    }
  }
})

五、鸿蒙Flutter框架对比分析

5.1 ArkUI vs Flutter组件体系对比

组件定义方式：

特性	ArkUI	Flutter
组件定义	使用@Entry、@Component装饰器	使用Widget类和build方法
组件复用	使用@Builder装饰器	使用Widget组合
组件状态	使用@State等装饰器管理	使用StatefulWidget和setState
组件生命周期	自动管理	需要手动管理

ArkUI组件定义示例：

@Entry
@Component
struct AIThreeLinePoem {
  @State selectedType: string = '爱情';
  
  build() {
    Column() {
      Text('三行情诗创作').fontSize(20).fontWeight(FontWeight.Bold)
    }
  }
}

Flutter组件定义示例：

class AIThreeLinePoem extends StatefulWidget {
  const AIThreeLinePoem({super.key});
  
  @override
  State<AIThreeLinePoem> createState() => _AIThreeLinePoemState();
}

class _AIThreeLinePoemState extends State<AIThreeLinePoem> {
  String selectedType = '爱情';
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('三行情诗创作', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold))
      ],
    );
  }
}

状态管理：

特性	ArkUI	Flutter
状态装饰器	@State、@Prop、@Link、@Provide/@Consume	setState、Provider、Riverpod等
状态响应	自动响应状态变化	需要调用setState触发更新
状态共享	@Provide/@Consume跨层级共享	InheritedWidget、Provider等
状态持久化	内置支持	需要第三方库

布局系统：

特性	ArkUI	Flutter
容器组件	Column、Row、Stack、Grid、Flex	Column、Row、Stack、GridView、Flex
布局方式	声明式布局	声明式布局
响应式布局	支持媒体查询	支持MediaQuery
布局约束	基于Flexbox	基于约束布局

动画系统：

特性	ArkUI	Flutter
动画API	animateTo、transform	Animation、AnimatedWidget、AnimatedBuilder
动画类型	显式动画、属性动画	显式动画、隐式动画
动画控制器	内置支持	AnimationController
动画曲线	内置多种曲线	Curves类提供多种曲线

5.2 开发效率对比

代码编写效率：

ArkUI：声明式语法简洁明了，代码量较少，使用装饰器语法，开发效率高
Flutter：Widget嵌套较深，代码量相对较多，但组件库丰富，开发速度快

调试效率：

ArkUI：DevEco Studio提供强大的调试工具，支持断点调试、日志输出、性能分析
Flutter：VS Code配合Flutter插件调试体验良好，支持热重载和热重启

热更新：

ArkUI：支持热重载，修改代码即时生效，开发体验良好
Flutter：支持热重载和热重启，热重载保留状态，开发体验优秀

生态系统：

ArkUI：鸿蒙生态正在快速发展中，官方组件库丰富，第三方库正在逐步完善
Flutter：拥有丰富的第三方库和插件，生态成熟，社区活跃

5.3 性能表现对比

渲染性能：

特性	ArkUI	Flutter
渲染引擎	原生渲染	Skia渲染引擎
性能表现	接近原生应用	优秀，接近原生
渲染线程	主线程渲染	独立渲染线程
复杂场景	60fps流畅运行	60fps流畅运行，复杂场景略有下降

内存占用：

特性	ArkUI	Flutter
内存占用	相对较低	略高于原生应用
内存管理	自动垃圾回收	自动垃圾回收
内存泄漏	较少	需要注意Widget生命周期

启动速度：

特性	ArkUI	Flutter
首次启动	速度快，原生应用	速度较慢，需要加载Flutter引擎
后续启动	速度快	速度较快，引擎已加载
启动优化	可优化空间大	需要使用AOT编译优化

流畅度：

ArkUI：60fps流畅运行，动画效果流畅，响应迅速
Flutter：60fps流畅运行，复杂场景下可能略有下降，但整体表现优秀

5.4 适用场景分析

选择ArkUI的场景：

需要开发鸿蒙原生应用：需要充分利用鸿蒙系统能力，提供最佳用户体验
追求极致性能和体验：需要接近原生的性能表现和流畅的动画效果
需要深度集成鸿蒙系统能力：需要使用鸿蒙的分布式能力、设备协同等特性
开发团队熟悉TypeScript/ArkTS：团队成员有TypeScript开发经验，学习成本低
专注于鸿蒙生态：公司战略聚焦于鸿蒙生态，需要深度参与

选择Flutter的场景：

需要跨平台开发：需要同时支持iOS、Android、Web、Desktop等平台
追求快速开发和迭代：需要快速开发原型和迭代产品
需要丰富的UI组件库：需要大量现成的UI组件和第三方库
开发团队熟悉Dart语言：团队成员有Dart开发经验，学习成本低
已有Flutter项目：公司已有Flutter项目，需要保持技术栈统一

三行情诗创作助手的选择理由：

深度集成鸿蒙系统：应用需要充分利用鸿蒙的系统能力，提供最佳用户体验
鸿蒙生态战略：符合公司鸿蒙生态的发展战略，需要深度参与鸿蒙生态建设
性能要求：诗歌生成应用对性能要求较高，需要接近原生的性能表现
多端适配需求：应用需要支持手机、平板、PC等多种设备，鸿蒙的多端适配能力更优
开发团队能力：开发团队熟悉TypeScript，学习ArkTS的成本较低

5.5 混合开发方案

如果团队需要同时支持鸿蒙和其他平台，可以考虑混合开发方案：

方案一：使用Flutter开发核心功能，鸿蒙原生开发界面

核心业务逻辑使用Flutter开发
鸿蒙原生界面使用ArkUI开发
通过平台通道进行通信

方案二：使用鸿蒙原生开发，通过WebView支持其他平台

鸿蒙原生应用使用ArkUI开发
其他平台通过WebView加载Web版本
共享核心业务逻辑

方案三：使用跨平台框架，鸿蒙作为独立平台

使用Flutter或React Native开发跨平台应用
为鸿蒙平台提供专门的优化和适配
保持代码复用性

方案对比：

方案	优点	缺点
方案一	充分利用双方优势	开发复杂度高
方案二	开发成本低	WebView性能受限
方案三	代码复用性高	平台特性利用不足

推荐方案：

对于三行情诗创作助手这类应用，推荐使用方案二：使用鸿蒙原生开发，通过WebView支持其他平台。这样既能保证鸿蒙版本的性能和体验，又能以较低的成本支持其他平台。

六、UI/UX设计规范

6.1 设计理念和原则

设计理念：

三行情诗创作助手的设计理念是为用户提供一个浪漫、优雅、易用的诗歌创作工具。

简洁实用：提供清晰的功能入口和操作流程，让用户能够快速上手
浪漫优雅：使用粉色主题，营造浪漫的艺术氛围，符合诗歌的气质
易用性：简化操作步骤，降低学习成本，让任何人都能轻松使用
情感共鸣：通过优美的诗歌内容，引发用户的情感共鸣

设计原则：

应用遵循以下设计原则，确保良好的用户体验：

一致性：保持界面风格和交互方式的一致性，让用户熟悉应用的操作方式
反馈性：提供及时的操作反馈，让用户知道操作结果
容错性：允许用户犯错并提供纠正机会，使用Mock数据确保应用始终可用
效率性：减少操作步骤，提升用户效率，一键生成诗歌
美学性：注重视觉美感，使用优雅的配色和排版，提升用户体验

6.2 配色方案和主题

主色调：

应用采用粉色作为主色调，象征浪漫、温馨和艺术：

主题色：#FF4081（粉色），用于按钮、选中状态和强调元素
背景色：#F5F5F5（浅灰色），用于页面背景，简洁干净
卡片色：#FFFFFF（白色），用于内容卡片，清晰可读

辅助色：

文字主色：#333333（深灰色），用于主要内容文字，对比度高
文字辅色：#8E8E93（浅灰色），用于辅助文字和标签
选中态：#FF4081（粉色），用于选中状态的元素
边框色：#E0E0E0（浅灰色），用于卡片边框

配色方案详解：

元素	颜色	用途
主背景	#F5F5F5	页面背景
卡片背景	#FFFFFF	内容卡片
主文字	#333333	标题、内容
辅文字	#8E8E93	标签、提示
主题色	#FF4081	按钮、选中态
边框色	#E0E0E0	卡片边框

深色模式支持：

应用支持深色模式，自动调整颜色对比度：

// 深色模式配色方案
const darkColors = {
  background: '#121212',
  card: '#1E1E1E',
  textPrimary: '#FFFFFF',
  textSecondary: '#AAAAAA',
  accent: '#FF80AB',
  border: '#333333'
};

6.3 交互体验优化

操作反馈：

应用提供丰富的操作反馈，让用户及时了解操作结果：

按钮点击反馈：按钮点击时显示按压效果，告知用户操作已生效
加载状态提示：生成过程中显示"生成中…"提示，告知用户正在处理
复制成功提示：复制成功后显示提示信息，告知用户操作结果
错误状态处理：网络异常时自动使用Mock数据，确保应用正常使用

动画效果：

应用使用适当的动画效果提升用户体验：

页面切换动画：使用平滑过渡动画，让页面切换更加流畅
卡片进入动画：卡片使用淡入效果，提升视觉效果
状态变化动画：状态变化时使用动画过渡，避免突兀
按钮缩放效果：按钮悬停时显示缩放效果，增加交互反馈

微交互：

应用添加了丰富的微交互，提升用户体验：

选项卡切换效果：选项卡切换时显示滑动效果
按钮悬停效果：按钮悬停时显示颜色变化和阴影效果
卡片点击效果：卡片点击时显示阴影变化和缩放效果
复制提示动画：复制成功后提示信息平滑显示和消失

6.4 响应式设计

布局响应式：

应用采用响应式布局，根据屏幕尺寸自动调整布局方式：

移动端（< 600px）：单列布局，紧凑显示，适合单手操作
平板端（600px - 1200px）：两列布局，舒适间距，充分利用屏幕空间
PC端（> 1200px）：多列布局，宽敞展示，支持多窗口操作

响应式布局实现：

build() {
  Column() {
    this.Header('三行情诗创作', '#FF4081')
    Scroll() {
      Column() {
        this.Selector('诗歌主题', this.typeOptions, this.selectedType, 
          (v: string) => { this.selectedType = v; })
        // 内容区域
      }.padding(16)
    }.layoutWeight(1).scrollBar(BarState.Auto)
  }.width('100%').height('100%').backgroundColor('#F5F5F5')
}

元素响应式：

应用根据屏幕尺寸调整元素大小和间距：

字体响应式：根据屏幕尺寸调整字体大小，确保良好的可读性
按钮响应式：根据屏幕尺寸调整按钮大小，优化点击体验
间距响应式：根据屏幕尺寸调整间距，提升视觉舒适度

断点设计：

应用使用以下断点设计，确保在不同屏幕尺寸下都有良好的显示效果：

屏幕尺寸	断点	布局方式
小屏幕	< 600px	单列布局
中等屏幕	600px - 1200px	两列布局
大屏幕	> 1200px	多列布局

6.5 无障碍设计

应用考虑无障碍设计，确保所有用户都能正常使用：

屏幕阅读器支持：

为重要元素添加语义化标签，支持屏幕阅读器：

Text('生成三行情诗').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
  .width('100%').height(48).backgroundColor('#FF4081')
  .borderRadius(12)
  .accessibilityLabel('生成三行情诗按钮')
  .accessibilityHint('点击此按钮生成当前主题的三行情诗')

高对比度模式：

支持高对比度模式，确保视力障碍用户能够清晰看到内容：

// 高对比度配色方案
const highContrastColors = {
  background: '#FFFFFF',
  card: '#FFFFFF',
  textPrimary: '#000000',
  textSecondary: '#333333',
  accent: '#FF0080',
  border: '#000000'
};

键盘导航支持：

支持键盘导航，让用户可以使用键盘完成所有操作：

// 设置焦点顺序
.focusOrder(1)

// 监听键盘事件
.onKeyEvent((event: KeyEvent) => {
  if (event.keyCode === 13 && event.type === KeyType.Down) {
    this.callLLMApi();
  }
})

6.6 国际化支持

应用预留了国际化支持，未来可以扩展多语言版本：

// 使用资源文件管理文本
Text($r('app.string.poem_title'))

// 资源文件结构
// resources/base/element/string.json
// resources/zh-CN/element/string.json
// resources/en-US/element/string.json

支持的语言：

中文（简体）：zh-CN
中文（繁体）：zh-TW
英文：en-US
日语：ja-JP
韩语：ko-KR

七、开发实战经验

7.1 开发过程中的难点和解决方案

难点1：诗歌主题选择器的横向滚动

问题描述： Scroll组件默认纵向滚动，需要实现横向滚动效果。

解决方案： 使用Scroll包裹Row组件，设置scrollBar(BarState.Off)隐藏滚动条，实现流畅的横向滚动效果。

@Builder Selector(label: string, options: string[], selected: string, onChange: (v: string) => void) {
  Column() {
    Text(label).fontSize(14).fontColor('#8E8E93').margin({ bottom: 8 })
    Scroll() {
      Row() {
        ForEach(options, (opt: string) => {
          Text(opt).fontSize(14)
            .fontColor(selected === opt ? '#FFFFFF' : '#666666')
            .backgroundColor(selected === opt ? '#FF4081' : '#F5F5F5')
            .padding({ left: 14, right: 14, top: 8, bottom: 8 })
            .borderRadius(8).margin({ right: 8 })
            .onClick(() => { onChange(opt); })
        })
      }
    }.scrollBar(BarState.Off).width('100%')
  }.width('100%').margin({ bottom: 16 })
}

关键要点：

使用Scroll包裹Row实现横向滚动
设置scrollBar(BarState.Off)隐藏滚动条，提升视觉效果
确保Row的宽度足够容纳所有选项

难点2：动态生成诗歌内容

问题描述： 根据不同诗歌主题生成不同的诗歌内容，需要管理大量的Mock数据。

解决方案： 使用条件判断和Mock数据，预留AI接口，支持未来扩展。

private generateMock(): PoemResult {
  let poems: string[] = [];
  let tips: string = '';
  
  if (this.selectedType === '爱情') {
    poems = [
      '初见你时\n心跳漏了一拍\n余生皆是期待',
      // ...更多诗歌
    ];
    tips = '爱情三行情诗要表达真挚的情感和细腻的感受。';
  } else if (this.selectedType === '友情') {
    // ...友情主题诗歌
  }
  
  return { type: this.selectedType, poems: poems, tips: tips };
}

关键要点：

使用条件判断处理不同主题的诗歌生成
为每个主题设计优美的诗歌内容
为每个主题提供实用的创作技巧提示
预留AI接口，支持未来扩展

难点3：状态管理和UI更新

问题描述： 状态变化后UI需要及时更新，确保用户能够看到最新的内容。

解决方案： 使用@State装饰器，框架自动响应状态变化，触发UI更新。

@State selectedType: string = '爱情';
@State result: PoemResult | undefined = undefined;
@State isGenerating: boolean = false;

关键要点：

使用@State装饰器声明状态变量
状态变化时框架自动触发UI更新
使用条件渲染根据状态显示不同内容
确保状态更新时机正确

难点4：鸿蒙PC端的多窗口适配

问题描述： 鸿蒙PC支持多窗口操作，应用需要适配多窗口场景，确保每个窗口的状态独立。

解决方案： 使用独立的状态管理，避免多窗口状态冲突。

// 每个窗口使用独立的状态
@State selectedType: string = '爱情';
@State result: PoemResult | undefined = undefined;
@State isGenerating: boolean = false;

关键要点：

使用@State管理组件内部状态，每个窗口实例有独立的状态
避免使用全局状态或单例模式
确保状态变化只影响当前窗口

7.2 性能优化技巧

优化1：减少重渲染

合理使用状态管理装饰器，避免不必要的重渲染：

使用@State管理组件内部状态
使用@Prop进行父组件到子组件的单向状态传递
使用@Link进行父子组件的双向状态绑定
使用@Provide/@Consume进行跨层级状态传递

避免在build方法中进行复杂计算：

// 错误示例：在build中进行复杂计算
build() {
  Column() {
    Text(this.calculateResult()).fontSize(16)
  }
}

// 正确示例：在状态变化时计算
@State result: string = '';

onSelectedTypeChange(type: string) {
  this.selectedType = type;
  this.result = this.calculateResult();
}

build() {
  Column() {
    Text(this.result).fontSize(16)
  }
}

优化2：列表渲染优化

为ForEach提供唯一key值，帮助框架识别列表项的变化：

ForEach(this.result.poems, (poem: string) => {
  Text('📜 ' + poem).fontSize(16).fontColor('#333333')
    .padding(16).backgroundColor('#FFFFFF').borderRadius(8).margin({ bottom: 8 })
}, (poem: string) => poem)  // keyGenerator函数

对于大量数据，使用虚拟滚动减少DOM节点数量：

Scroll() {
  LazyForEach(this.dataSource, (item: string) => {
    Text('📜 ' + item).fontSize(16).fontColor('#333333')
      .padding(16).backgroundColor('#FFFFFF').borderRadius(8).margin({ bottom: 8 })
  }, (item: string) => item)
}
.layoutWeight(1)
.scrollBar(BarState.Auto)

优化3：缓存策略

缓存生成结果，避免重复计算：

private cache: Map<string, PoemResult> = new Map();

private getResult(type: string): PoemResult {
  if (this.cache.has(type)) {
    return this.cache.get(type)!;
  }
  const result = this.generateMock();
  this.cache.set(type, result);
  return result;
}

优化4：资源优化

虽然三行情诗创作助手主要以文本为主，但如果有图片资源，需要进行优化：

使用合适大小的图片
压缩图片文件大小
使用WebP格式减少体积

7.3 调试和测试经验

调试技巧：

使用DevEco Studio的调试工具：

断点调试：在关键代码位置设置断点，逐步调试
日志输出：使用console.log输出调试信息
性能分析：使用性能分析工具查看应用性能
UI检查：使用UI检查工具查看组件层次和属性

日志输出技巧：

console.log('selectedType:', this.selectedType);
console.debug('result:', JSON.stringify(this.result));
console.warn('缓存未命中:', type);
console.error('API调用失败:', error);

断点调试技巧：

在关键代码位置设置断点
启动调试模式
观察变量值的变化
逐步执行代码，定位问题

测试方法：

单元测试：

测试数据生成逻辑和工具函数：

// 测试generateMock函数
test('generateMock should return correct result for 爱情', () => {
  const page = new AIThreeLinePoem();
  page.selectedType = '爱情';
  const result = page.generateMock();
  
  expect(result.type).toBe('爱情');
  expect(result.poems.length).toBe(5);
  expect(result.tips).toBeTruthy();
});

集成测试：

测试组件交互和状态变化：

// 测试场景选择器交互
test('selector should update selectedType when clicked', () => {
  const page = new AIThreeLinePoem();
  const initialType = page.selectedType;
  
  // 模拟点击选择器
  page.onTypeChange('友情');
  
  expect(page.selectedType).toBe('友情');
  expect(page.selectedType).not.toBe(initialType);
});

真机测试：

在实际设备上验证功能：

在手机、平板、PC上分别测试
验证布局是否正确适配不同屏幕
验证交互是否流畅
验证功能是否正常

7.4 常见问题和坑点

问题1：状态更新不生效

问题描述： 修改@State变量后，UI没有自动刷新。

解决方案：

确保在@State变量修改后，UI会自动刷新
检查是否在异步回调中修改状态，需要使用正确的方式
确保状态变量的类型正确

// 错误示例：在异步回调中直接修改状态
setTimeout(() => {
  this.result = this.generateMock();  // 可能不生效
}, 1000);

// 正确示例：使用Promise或async/await
private async callLLMApi(): Promise<void> {
  this.isGenerating = true;
  await new Promise(resolve => setTimeout(resolve, 1000));
  this.result = this.generateMock();
  this.isGenerating = false;
}

问题2：ForEach渲染报错

问题描述： ForEach组件渲染时报错，提示数据源类型不正确。

解决方案：

确保ForEach的数据源是数组类型
确保每个元素有唯一标识
确保keyGenerator函数返回唯一值

// 错误示例：数据源不是数组
ForEach(this.result.poems, (poem: string) => {
  Text(poem)
})

// 正确示例：确保数据源是数组，并提供keyGenerator
ForEach(this.result.poems, (poem: string) => {
  Text(poem)
}, (poem: string) => poem)

问题3：布局错乱

问题描述： 组件布局不符合预期，出现重叠或错位。

解决方案：

检查布局容器的嵌套关系
确保正确使用layoutWeight()和flex属性
检查padding和margin设置

// 错误示例：缺少layoutWeight导致布局错乱
Column() {
  Scroll() {
    Column() {
      // 内容
    }
  }
}

// 正确示例：使用layoutWeight实现弹性布局
Column() {
  Scroll() {
    Column() {
      // 内容
    }
  }.layoutWeight(1)
}

问题4：TypeScript语法兼容性

问题描述： 使用TypeScript语法时出现编译错误。

解决方案：

ArkTS不支持解构赋值，需使用临时变量
ArkTS不支持函数表达式，需使用箭头函数
ArkTS不支持索引签名，需使用数组或Map

// 错误示例：使用解构赋值
const { type, poems } = result;

// 正确示例：使用临时变量
const type = result.type;
const poems = result.poems;

问题5：路由导航问题

问题描述： 路由导航不生效或报错。

解决方案：

确保正确导入router模块
确保页面路径正确
确保页面已在配置文件中注册

// 错误示例：路径错误
router.pushUrl({ url: 'pages/AIThreeLinePoem' });

// 正确示例：路径正确
router.pushUrl({ url: 'pages/AIThreeLinePoemPage' });

7.5 开发工具推荐

开发IDE：

DevEco Studio：鸿蒙官方IDE，提供完整的开发、调试、构建工具链
VS Code：轻量级代码编辑器，配合鸿蒙插件使用

调试工具：

DevEco Studio调试器：支持断点调试、日志输出、性能分析
鸿蒙模拟器：支持多设备模拟，方便测试不同屏幕尺寸

辅助工具：

Poetry Generator：在线诗歌生成工具，用于参考和测试
代码格式化工具：如Prettier，保持代码风格一致
静态分析工具：如ESLint，检查代码质量

八、总结与展望

8.1 项目总结

三行情诗创作助手（AIThreeLinePoem）项目已完成核心功能开发，是一款基于鸿蒙HarmonyOS NEXT平台开发的智能诗歌生成应用。

项目成果：

功能完整：覆盖爱情、友情、亲情、自然、时光五大诗歌主题，每个主题提供5首优美的三行情诗，共包含25首精选诗歌
用户体验好：界面浪漫优雅，操作简单直观，响应迅速，平均生成时间小于1秒
技术先进：采用最新的鸿蒙开发技术，性能优异，启动速度快，内存占用低
扩展性强：预留AI接口，支持后续功能扩展，如智能推荐、自然语言查询等
多端适配：原生支持手机、平板、PC等多种设备，一次开发多端部署

技术亮点：

鸿蒙原生体验：充分利用鸿蒙的原生能力，提供流畅、高效的用户体验
组件化设计：使用@Builder实现可复用组件，提高代码复用性和可维护性
响应式布局：采用响应式布局设计，适配不同屏幕尺寸
状态管理：使用@State等装饰器实现响应式UI，状态变化自动触发UI刷新
离线可用：内置丰富的Mock数据，用户可以在没有网络连接的情况下使用

用户价值：

激发创作灵感：帮助用户快速生成优美的三行情诗，激发创作灵感
表达情感：帮助用户用诗歌表达内心的情感和感受
学习创作技巧：通过小贴士学习三行情诗的创作方法，提升创作能力
社交分享：支持复制分享，方便用户分享到社交平台
文化传承：推广三行情诗这种诗歌形式，传承和弘扬诗歌文化

8.2 未来规划

功能扩展：

添加更多诗歌主题：扩展季节、思念、梦想、离别等主题，丰富诗歌内容
支持自定义诗歌主题：允许用户输入自定义主题，生成个性化诗歌
添加诗歌收藏功能：支持用户收藏喜欢的诗歌，方便后续查看
添加诗歌分享功能：支持分享到社交平台、短信、邮件等
实现诗歌创作的连续生成：支持连续生成多首诗歌，满足用户需求
添加诗歌编辑功能：允许用户编辑生成的诗歌，进行个性化修改
添加诗歌朗读功能：使用语音合成技术，朗读诗歌内容
添加诗歌配图功能：根据诗歌内容自动生成配图，增强视觉效果

技术优化：

接入大模型API：实现智能诗歌生成，提供无限多样的诗歌内容
优化性能：提升响应速度，优化渲染性能，减少内存占用
增加错误处理：完善错误处理机制，提供友好的错误提示
完善测试用例：增加单元测试、集成测试、端到端测试，提高代码质量
代码优化：优化代码结构，提高代码可读性和可维护性

生态整合：

与鸿蒙笔记应用集成：支持将诗歌保存到鸿蒙笔记，方便用户管理
支持多设备协同创作：利用鸿蒙的分布式能力，支持多设备协同创作
接入鸿蒙服务能力：接入鸿蒙账号、支付、推送等服务能力
与鸿蒙日历集成：支持在特殊日子自动生成诗歌提醒
与鸿蒙图库集成：支持从图库选择图片作为诗歌配图

8.3 技术展望

随着鸿蒙生态的不断发展，HarmonyOS NEXT将成为更多开发者的选择。ArkTS语言和ArkUI框架提供了现代化的开发体验，使开发者能够快速构建高质量的应用。

鸿蒙技术趋势：

分布式能力：鸿蒙的分布式能力将为应用带来更多可能性，如多设备协同、数据共享等
AI能力整合：鸿蒙正在整合AI能力，为应用提供更智能的功能
PC端生态：鸿蒙PC的推出将为开发者提供更大的舞台，支持更复杂的应用场景
开发工具完善：DevEco Studio和相关工具将不断完善，提升开发效率
生态系统扩展：鸿蒙生态将不断扩展，吸引更多开发者和用户

应用发展方向：

智能化：接入AI能力，实现更智能的诗歌生成和推荐
生态化：与鸿蒙笔记、日历等应用集成，提供更完整的服务
社区化：开源代码，建立开发者社区，共同完善应用
国际化：支持多语言版本，服务全球用户
平台化：将应用打造成诗歌创作平台，支持用户创作、分享、交流

8.4 部署和发布流程

开发环境准备：

安装DevEco Studio 5.0+
配置Node.js和JDK环境
配置鸿蒙npm源
下载HarmonyOS NEXT SDK

构建和打包：

使用DevEco Studio打开项目
配置签名信息（debug和release）
构建项目：npm run build
生成HAP包：npm run package

测试验证：

在模拟器上测试：使用鸿蒙模拟器测试应用功能
在真机上测试：在鸿蒙手机、平板、PC上测试应用
性能测试：测试应用的启动速度、响应速度和内存占用
兼容性测试：测试应用在不同设备和系统版本上的兼容性

发布流程：

准备应用发布材料：应用名称、描述、截图、图标等
登录华为应用市场开发者平台
创建应用并填写应用信息
上传HAP包
提交审核
审核通过后发布应用

版本更新流程：

开发新版本功能
测试新版本
构建新版本HAP包
上传新版本到华为应用市场
提交审核
审核通过后发布更新

8.5 项目资源

代码仓库：

GitHub：https://github.com/example/aithreelinepoem
Gitee：https://gitee.com/example/aithreelinepoem

文档资源：

鸿蒙官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos
ArkTS语言参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts
ArkUI组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkui

社区资源：