鸿蒙原生 ArkTS — AI 编程导师

一款基于 HarmonyOS Next + ArkTS + DeepSeek 大模型打造的 AI 编程导师应用

实时对话 · 代码高亮 · 沉浸式暗色主题 · 纯原生体验

快速开始 · 功能特性 · 技术架构 · 核心实现 · 常见问题

演示效果:

---

目录

• 项目背景
• 功能特性
• 技术架构
• 项目结构
• 核心实现
  • 1. AI 对话引擎
  • 2. ArkTS 词法分析器
  • 3. 深色主题设计系统
  • 4. 终端风格交互
• 快速开始
• 配置说明
• 效果预览
• 路线规划
• 常见问题
• 致谢

---

项目背景

随着 HarmonyOS Next 生态的快速发展，越来越多的开发者开始接触 ArkTS 和 ArkUI 框架。然而，鸿蒙原生开发的学习资料相对稀缺，开发者在遇到问题时往往需要在多个文档和社区之间反复查阅。

AI 编程导师 旨在解决这一痛点 —— 将 AI 大模型能力直接集成到开发辅助工具中，让开发者可以一边看代码、一边问问题，获得即时的、上下文相关的编程指导。

为什么选择这个方案？

传统方式	AI 编程导师
在浏览器和 IDE 之间频繁切换	左侧代码 + 右侧对话，一站式体验
搜索引擎结果参差不齐	基于 DeepSeek 大模型，回答专业准确
无法即时获得代码示例	实时生成 ArkTS 代码片段
深色/浅色主题割裂	统一沉浸式暗色主题，长时间使用不疲劳

---

功能特性

智能 AI 对话

• 接入 DeepSeek-V4-Pro 大模型

• 支持上下文连续对话

• 自动携带完整聊天历史

• 网络异常友好提示

代码语法高亮

• 自研 ArkTS 词法分析器

• 支持关键字、类型、装饰器、字符串等高亮

• 行号显示 + 当前行高亮

• 模拟真实 IDE 编辑体验

沉浸式暗色主题

• 参考 VS Code 暗色配色方案

• 30+ 精调颜色常量

• 终端风格输入框

• 细腻的圆角与阴影

纯鸿蒙原生体验

• 100% ArkTS + ArkUI 构建

• 声明式 UI 开发范式

• 响应式状态管理

• 无第三方 UI 依赖

---

技术架构

┌─────────────────────────────────────────────────────┐
│                    应用层 (UI)                       │
│  ┌──────────────┐  ┌──────────────┐  ┌───────────┐ │
│  │   CodePanel   │  │  ChatPanel   │  │ TopToolbar│ │
│  │  代码编辑面板  │  │  AI 对话面板  │  │  顶部工具栏 │ │
│  └──────┬───────┘  └──────┬───────┘  └───────────┘ │
│         │                  │                         │
│  ┌──────┴───────┐  ┌──────┴───────┐                │
│  │  CodeLine     │  │  ChatBubble  │                │
│  │  语法高亮行    │  │  聊天气泡     │                │
│  └──────────────┘  └──────────────┘                │
├─────────────────────────────────────────────────────┤
│                    逻辑层                            │
│  ┌──────────────────────────────────────────────┐   │
│  │  Tokenizer (词法分析)                         │   │
│  │  API Client (网络请求)                        │   │
│  │  State Management (状态管理)                   │   │
│  └──────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────┤
│                    基础设施层                        │
│  ┌──────────────┐  ┌──────────────┐                │
│  │ @ohos.net.http│  │  ArkUI 框架   │                │
│  │  网络请求模块  │  │  UI 渲染引擎  │                │
│  └──────────────┘  └──────────────┘                │
├─────────────────────────────────────────────────────┤
│                  外部服务                            │
│  ┌──────────────────────────────────────────────┐   │
│  │  GitCode AI API (DeepSeek-V4-Pro)            │   │
│  └──────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────┘

核心技术点

模块	技术方案	说明
UI 框架	ArkUI 声明式语法	@Component + build() 组件化开发
状态管理	@State / @Prop	响应式数据绑定，状态变更自动刷新 UI
网络请求	@ohos.net.http	鸿蒙原生 HTTP 模块，支持异步请求
AI 对话	GitCode AI API	OpenAI 兼容协议，支持流式/非流式响应
语法高亮	自研 Tokenizer	基于正则的词法分析，支持 10 种 Token 类型

---

项目结构

AI/
├── AppScope/                          # 应用全局配置
│   ├── app.json5                      # 应用级配置（bundleName、版本号等）
│   └── resources/                     # 全局资源（图标、字符串）
│
├── entry/                             # 主模块（entry 类型）
│   └── src/main/
│       ├── ets/
│       │   ├── entryability/
│       │   │   └── EntryAbility.ets   # 应用入口 Ability
│       │   ├── entrybackupability/
│       │   │   └── EntryBackupAbility.ets
│       │   └── pages/
│       │       └── Index.ets          # ⭐ 主页面（核心代码，约 800 行）
│       ├── module.json5               # 模块配置（权限、Ability 声明）
│       └── resources/                 # 模块资源文件
│
├── hvigor/                            # 构建工具配置
├── build-profile.json5                # 项目级构建配置
└── oh-package.json5                   # 依赖管理

核心文件：Index.ets 包含了应用的所有 UI 组件、AI 对话逻辑和语法高亮引擎。

---

核心实现

1. AI 对话引擎

基于 @ohos.net.http 模块实现与 DeepSeek 大模型的交互：

import http from '@ohos.net.http';

// API 配置
const AI_API_URL = 'https://api-ai.gitcode.com/v1/chat/completions';
const AI_MODEL = 'deepseek-ai/DeepSeek-V4-Pro';

// 发送消息并获取 AI 回复
private async sendMessage(): Promise<void> {
  const httpRequest = http.createHttp();
  const response = await httpRequest.request(
    AI_API_URL,
    {
      method: http.RequestMethod.POST,
      header: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + AI_TOKEN
      },
      extraData: JSON.stringify({
        model: AI_MODEL,
        messages: apiMessages,  // 包含系统提示 + 聊天历史
        stream: false,
        max_tokens: 2048,
        temperature: 0.6
      }),
      connectTimeout: 15000,
      readTimeout: 30000
    }
  );
  httpRequest.destroy();

  if (response.responseCode === 200) {
    const result: ApiResponse = JSON.parse(response.result as string);
    const reply = result.choices[0].message.content;
    this.messages.push({ role: 'ai', text: reply });
  }
}

设计要点：

• 每次请求携带完整聊天历史，保持上下文连贯
• 系统提示词（System Prompt）定义 AI 为"鸿蒙编程导师"角色
• 异常处理覆盖网络错误和非 200 响应码
• 请求期间显示加载状态，防止重复提交

---

2. ArkTS 词法分析器

自研的轻量级代码语法高亮引擎，支持 10 种 Token 类型：

type TokenType = 'keyword' | 'string' | 'comment' | 'number'
  | 'decorator' | 'type' | 'function' | 'operator'
  | 'punctuation' | 'plain';

interface Token {
  text: string;
  type: TokenType;
}

function tokenize(line: string): Token[] {
  const tokens: Token[] = [];
  let i = 0;

  while (i < line.length) {
    // 注释检测：// 或 /* */
    if (line[i] === '/' && line[i + 1] === '/') {
      tokens.push({ text: line.substring(i), type: 'comment' });
      return tokens;
    }

    // 装饰器检测：@Entry, @State, @Component 等
    if (line[i] === '@') {
      let end = i + 1;
      while (end < line.length && /[a-zA-Z_$]/.test(line[end])) end++;
      tokens.push({ text: line.substring(i, end), type: 'decorator' });
      i = end;
      continue;
    }

    // 字符串、数字、标识符、运算符等...
    // ...
  }
  return tokens;
}

支持的高亮类型：

Token 类型	示例	颜色
keyword	import, struct, build	#569CD6 蓝色
type	string, FontWeight, Column	#4EC9B0 青色
decorator	@Entry, @State, @Component	#DCDCAA 黄色
string	'你好，鸿蒙！'	#CE9178 橙色
comment	// 在AI助手中获取指导	#6A9955 绿色
number	28, 0.95	#B5CEA8 浅绿
function	tokenize(), sendMessage()	#DCDCAA 黄色

---

3. 深色主题设计系统

采用统一的颜色管理方案，参考 VS Code 默认暗色主题：

interface ColorScheme {
  bg: string;           // 主背景色
  sidebarBg: string;    // 侧边栏背景
  panelBg: string;      // 面板背景
  accent: string;       // 强调色（按钮、选中态）
  terminalBg: string;   // 终端风格输入区背景
  // ... 共 30+ 颜色变量
}

const COLORS: ColorScheme = {
  bg: '#1E1E1E',        // 主背景
  accent: '#007ACC',    // VS Code 标志性蓝色
  terminalBg: '#0D1117', // GitHub Dark 风格终端
  // ...
};

设计原则：

• 所有颜色通过 ColorScheme 接口统一管理
• 主背景 #1E1E1E 参考 VS Code Dark+
• 强调色 #007ACC 为 HarmonyOS 品牌蓝
• 终端区域 #0D1117 参考 GitHub Dark 主题

---

4. 终端风格交互

输入区域采用终端命令行风格设计，增强开发者友好度：

Row() {
  // 终端提示符
  Text('❯')
    .fontSize(16)
    .fontColor(COLORS.terminalPrompt)
    .fontFamily('Courier New')
    .fontWeight(FontWeight.Bold)

  // 输入框
  TextInput({ placeholder: '输入你的编程问题...' })
    .fontFamily('Courier New')
    .fontColor(COLORS.terminalText)
    .backgroundColor(Color.Transparent)

  // 发送按钮
  Row() { Text('⏎') }
    .backgroundColor(COLORS.accent)
}
.backgroundColor(COLORS.terminalBg)

---

快速开始

环境要求

工具	版本要求	说明
DevEco Studio	5.0+	鸿蒙官方 IDE
HarmonyOS SDK	API 12+	鸿蒙系统 SDK
Node.js	18+	构建工具依赖

安装步骤

Step 1 · 克隆项目

git clone https://github.com/your-username/AI.git
cd AI

Step 2 · 用 DevEco Studio 打开项目

打开 DevEco Studio → File → Open → 选择项目根目录

Step 3 · 配置 API Token

打开 Index.ets，修改以下配置：

const AI_API_URL = 'https://api-ai.gitcode.com/v1/chat/completions';
const AI_TOKEN = 'your-api-token-here';  // 替换为你的 Token
const AI_MODEL = 'deepseek-ai/DeepSeek-V4-Pro';

Step 4 · 运行

• 连接鸿蒙设备或启动模拟器
• 点击 DevEco Studio 工具栏的 Run ▶️
• 等待编译完成，应用自动安装并启动

---

配置说明

网络权限

项目已在 module.json5 中声明了网络权限：

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

AI 模型参数

可在 sendMessage() 方法中调整模型参数：

参数	默认值	说明
temperature	0.6	控制回答的随机性（0-1，越高越发散）
top_p	0.95	核采样参数
max_tokens	2048	最大输出 Token 数
stream	false	是否启用流式响应

---

效果预览

应用采用左右分栏布局：

┌─────────────────────────────────────────────────────┐
│  🧠 编程导师AI  v1.0    📄 💾 ▶️ 🔍 ⚙️ ❓          │
├────────────────────────┬────────────────────────────┤
│  ● main.ets    🟢 已连接 │  💬 AI 编程导师  ● 在线    │
├────────────────────────┤                            │
│ 1 │ @Entry             │  👋 你好！我是鸿蒙编程导师AI  │
│ 2 │ @Component         │                            │
│ 3 │ struct HelloWorld { │  我可以帮助你学习 ArkTS 语法 │
│ 4 │   @State msg: str.. │  ...                       │
│ 5 │                    │                            │
│ 6 │   build() {        │  ─────────────────────────  │
│ 7 │     Column() {     │  💡 你可以问我：             │
│ 8 │       Text(this... │  • @State 的作用是什么？     │
│   │                    │                            │
│   │                    │  ❯ 输入你的编程问题...    [⏎] │
├────────────────────────┴────────────────────────────┤
│  Ln 14, Col 1  |  ArkTS • UTF-8      🐞 0 ⚠️ 0 ✅  │
└─────────────────────────────────────────────────────┘

---

路线规划

• 流式响应支持（打字机效果逐字输出）
• 多轮对话记忆优化
• 代码块语法高亮渲染
• 本地对话历史持久化
• 多模型切换支持
• 深色 / 浅色主题切换
• 语音输入支持

---

常见问题

Q: 编译报错 "ohos.permission.INTERNET" 怎么办？

确认 entry/src/main/module.json5 中已添加网络权限声明。详见 配置说明。

Q: AI 回复 "网络请求出错" 怎么排查？

1. 确认设备已连接互联网
2. 检查 API Token 是否正确配置
3. 确认 AI_API_URL 地址可访问
4. 查看控制台的错误信息详情

Q: 如何替换为其他 AI 模型？

修改 Index.ets 中的 AI_MODEL 常量即可。只要目标模型兼容 OpenAI Chat Completions 协议，无需修改其他代码。

Q: 语法高亮支持哪些语言？

当前词法分析器针对 ArkTS 语言优化，支持关键字、类型、装饰器、字符串、注释、数字等高亮。可通过扩展 KEYWORDS 和 TYPES 集合添加更多语言支持。

---

致谢

• HarmonyOS Developer - 官方开发文档
• DeepSeek - 大语言模型
• GitCode AI - AI 模型 API 服务
• VS Code - 暗色主题配色灵感

---

如果这个项目对你有帮助，欢迎 Star 支持！

Made with ❤️ by ArkTS & HarmonyOS