诗词创作助手：基于 HarmonyOS ArkTS 的 AI 古典文学创作应用开发实践

tyqtyq22

17人浏览 · 2026-06-29 20:21:04

tyqtyq22 · 2026-06-29 20:21:04 发布

诗词创作助手：基于 HarmonyOS ArkTS 的 AI 古典文学创作应用开发实践

本文基于 HarmonyOS 6.0 + ArkTS + DevEco Studio，从零构建一个覆盖六大诗词创作场景的 AI 对话应用。涵盖 @Entry/@Component/@Builder 声明式 UI、@State 响应式状态管理、router 多页面导航、三层架构设计，以及 AI 诗词创作的体系化生成策略，适合鸿蒙应用开发者参考。

在这里插入图片描述

一、项目背景

“熟读唐诗三百首，不会作诗也会吟”——但真正能写出合格诗词的人并不多。诗词创作的门槛在于：格律规则（平仄、押韵、对仗）、意象积累（风花雪月、山水草木）、典故运用（化用前人、自出机杼），三者缺一不可。

本项目基于 HarmonyOS 6.0 平台，构建了一个 「诗词创作助手」 AI 对话应用。应用集成了六大诗词创作场景——唐诗、宋词、现代诗、对联、诗词赏析、灵感启发——用户输入主题或关键词，即可获得 AI 创作的诗词作品。

鸿蒙特色亮点：

@Entry + @Component + @Builder 声明式组件化 UI
@State 响应式状态驱动 UI 自动刷新
router.pushUrl 实现首页卡片到聊天页的无缝导航
ForEach + Scroll 高性能渲染消息列表

二、核心架构

2.1 三层架构

entry/src/main/ets/
├── models/
│   └── ShiCiChuangZuoModel.ets   # 数据模型：消息、话题、诗词条目
├── services/
│   └── ShiCiChuangZuoService.ets # 业务服务：AI 诗词生成、关键词匹配
└── pages/
    └── ShiCiChuangZuo.ets        # UI 页面：聊天界面、话题栏、输入区

2.2 鸿蒙 ArkTS 装饰器速查

装饰器	作用	本应用中的使用
`@Entry`	页面入口标记	`ShiCiChuangZuo` 作为独立路由页面
`@Component`	自定义组件声明	所有 struct 结构体
`@State`	响应式状态	`messages`、`inputText`、`isLoading`、`selectedTopic`
`@Builder`	UI 构建器方法	`buildHeader()`、`buildTopicBar()`、`buildMessageBubble()` 等

2.3 数据模型（ShiCiChuangZuoModel.ets）

export enum MessageRole { USER = 'user', ASSISTANT = 'assistant' }

export enum ShiCiTopic {
  TANGSHI = '唐诗', SONGCI = '宋词', XIANDAI = '现代诗',
  DUILIAN = '对联', SHANGXI = '诗词赏析', LINGGAN = '灵感启发'
}

export class ChatMessage {
  role: MessageRole; content: string; timestamp: number
  constructor(role: MessageRole, content: string) {
    this.role = role; this.content = content; this.timestamp = Date.now()
  }
}

export class ShiCiItem {
  title: string; author: string; dynasty: string; content: string; style: string
  // 为诗词收藏和分享预留的数据结构
}

三、AI 服务层：六大诗词创作场景

3.1 系统提示词设计

private systemPrompt: string =
  '你是一位精通中国古典诗词的AI创作助手，擅长唐诗、宋词、现代诗、对联等多种文体。\n\n' +
  '你的任务：\n' +
  '1. 创作唐诗（五言/七言绝句、律诗，讲究平仄、押韵、对仗）\n' +
  '2. 填写宋词（各词牌如蝶恋花、水调歌头、如梦令等）\n' +
  '3. 创作现代诗（自由诗、抒情诗、哲理诗）\n' +
  '4. 对对联（出上联对下联，或出下联对上联）\n' +
  '5. 诗词赏析（解读意境、典故、艺术手法）\n' +
  '6. 灵感启发（以物作诗、以景作诗、以情作诗）\n\n' +
  '创作原则：\n' +
  '- 格律严谨：唐诗遵守平仄和押韵规则，宋词遵循词牌格律\n' +
  '- 意境优先：诗以意境为上，言之有物，情景交融\n' +
  '- 雅俗共赏：兼顾文采和可读性，既有古典韵味，又不晦涩难懂'

3.2 六大话题内容结构

话题	创作类型	示例输出
唐诗	五言/七言绝句、律诗	以"春"为题创作七言绝句
宋词	蝶恋花、水调歌头等词牌	以"月"为题填《水调歌头》
现代诗	自由诗、抒情诗	以"城市的夜"创作现代诗
对联	上下联创作	出上联征下联，赏析对仗技巧
诗词赏析	名篇解读	解读《静夜思》的意境和手法
灵感启发	主题创作	以"梅花"为题，提供创作角度

每个话题的回复都包含完整的诗词作品、创作说明和格律注释，让用户不仅"看到诗"，还能"读懂诗"。

四、鸿蒙 UI 组件化实现

4.1 组件树

ShiCiChuangZuo (主页面)
├── buildHeader()        # 标题栏：📜 + "诗词创作助手"
├── buildTopicBar()      # 横向滚动话题标签
├── Scroll + ForEach     # 消息列表
│   ├── buildMessageBubble()  # 消息气泡
│   └── buildLoadingBubble()  # 加载中状态
└── buildInputArea()     # 底部输入区

4.2 @State 驱动 UI 刷新

@State messages: ChatMessage[] = []   // 聊天记录 → ForEach 自动渲染
@State inputText: string = ''         // 输入内容 → 发送按钮状态联动
@State isLoading: boolean = false     // 加载状态 → 显示"创作中"提示
@State selectedTopic: string = ''     // 选中话题 → 高亮切换

4.3 发送逻辑：异步模拟 + 滚动优化

private onSend(): void {
  this.messages.push(new ChatMessage(MessageRole.USER, text))
  this.inputText = ''; this.isLoading = true

  setTimeout(() => { this.scroller.scrollEdge(Edge.Bottom) }, 200)

  setTimeout(() => {
    const reply = this.service.generateMockReply(text)
    this.messages.push(reply)
    this.isLoading = false
    setTimeout(() => { this.scroller.scrollEdge(Edge.Bottom) }, 100)
  }, 1500)
}

五、首页整合与路由导航

应用首页 [Index.ets](file:///c:/Users/l/DevEcoStudioProjects/MyApplication/entry/src/main/ets/pages/Index.ets) 通过 router.pushUrl 实现卡片点击跳转：

import { router } from '@kit.ArkUI'

.onClick(() => {
  router.pushUrl({ url: 'pages/ShiCiChuangZuo' })
})

路由注册在 [main_pages.json](file:///c:/Users/l/DevEcoStudioProjects/MyApplication/entry/src/main/resources/base/profile/main_pages.json)：

{
  "src": [
    "pages/Index",
    "pages/LvxingPage",
    "pages/XuexiPage",
    "pages/JiankangPage",
    "pages/ShiCiChuangZuo"
  ]
}

六、紫色主题配色

用途	色值	语义
页面背景	`#FAF5FF`	极浅紫色，典雅而不沉闷
主色调	`#8B5CF6`	标准紫色，代表典雅、文化、诗意
边框	`#DDD6FE`	浅紫色，柔和分隔
强调色	`#EA580C`	橙色，与紫色形成对比，用于"清除"按钮