鸿蒙PC端开发大模型校园助手：ArkTS全流程与多端适配

鸿蒙专家

在鸿蒙PC上，学生常常需要在教务系统、班级群、图书馆等多个入口之间切换信息。大语言模型的成熟，使得通过自然语言一句话获取答案成为可能。本文完整记录一款「智慧校园助手」应用在鸿蒙PC（HUAWEI MateBook Pro）上的开发过程，涵盖架构设计、大模型接入、五大功能模块实现以及真机运行适配，所有代码均使用ArkTS/ArkUI，在DevEco Studio中编译并跑在鸿蒙PC上。

一、总体架构
应用采用四层结构：EntryAbility层负责生命周期与初始化；common层统一管理主题与AI配置；model层封装网络请求与数据持久化；pages层包含五个功能页和一个Tab主壳。这种分层实现了关注点分离，UI层不直接操作网络和存储，数据请求全部收敛到model层。

二、大模型接入层
这是智能核心。所有配置集中在AIConfig类中。采用OpenAI兼容的chat/completions接口，应用不绑定特定模型服务商，更换服务只需修改endpoint和model。通过systemPrompt将模型约束为校园助手角色。AIService类使用@kit.NetworkKit的http模块发起POST请求，请求体需显式定义接口（ArkTS严格模式不允许无类型对象字面量）。每次请求携带完整历史消息以支持多轮对话，设置了30秒超时与异常兜底，finally中调用req.destroy()释放资源。响应解析从JSON中提取choices[0].message.content。

三、功能模块实现
1. AI对话助手：通过@State维护Bubble数组，每个Bubble含role、content、loading字段。用户发送后先插入loading占位气泡显示“正在思考…”，真实回复返回后替换。使用this.bubbles = this.bubbles.slice()触发UI刷新。用于构建聊天气泡，用户消息靠右蓝色，助手消息靠左白底，发送后自动滚动到底部。
2. 课程表：数据模型包含课程名、教师、地点、周几、起始节次、结束节次、配色索引。使用Preferences轻量键值存储做持久化，首次运行时自动写入示例课程。课表网格左侧节次列，右侧7天列，每个课程根据起止节次绝对定位高度和上边距，不同课程轮转配色。
3. 校园问答：采用预置答案+AI兜底的混合模式。高频问题有本地预置答案，点击秒开；其他问题标记为AI，实时调用大模型生成回答。这种设计兼顾体验与成本。
4. 待办日程：支持作业、考试、事项三类，按截止时间排序，临期（不到2天）标红提醒，不同类型用不同颜色标签。左滑删除，点击圆形勾选完成。
5. 我的与设置：展示个人信息、统计卡片，提供模型服务配置功能，允许用户运行时覆盖API密钥和模型名，覆盖值存入AppStorage，AIService优先使用。

四、PC适配实践
这是项目区别于手机Demo的重点。在module.json5中声明deviceTypes包含"phone", "tablet", "2in1"。关键适配点：
- 全程弹性布局：宽度使用layoutWeight、百分比与Flex自动换行，不写死像素值，保证窗口大小变化时内容自然铺展。
- 安全区适配：EntryAbility中计算系统状态栏和导航条的安全区，存入全局@StorageProp，各页面统一避让，覆盖手机刘海到PC窗口边框的差异。
- 键鼠交互：ArkUI事件自动映射到鼠标键盘，AI对话输入框在PC上用物理键盘输入、回车发送，适合大量文字录入。
- 大屏信息密度：五Tab结构+卡片式布局，在PC窗口中从容显示，减少滚动。

五、主壳与部署
使用Tabs组件组织五个页面，底部导航。应用在DevEco Studio中连接HUAWEI MateBook Pro真机，SDK版本为HarmonyOS 6.1.0，直接Run即可看到窗口化运行效果。所有截图均来自鸿蒙PC真机，同一套ArkTS代码无需单独适配即可覆盖手机、平板和PC。

2. // 配置示例：AIConfig类
3. export class AIConfig {
4.   static readonly endpoint: string = 'https://xxxxxxxx/compatible-mode/v1/chat/completions';
5.   static readonly apiKey: string = 'sk-****************';
6.   static readonly model: string = 'qwen-plus';
7.   static readonly systemPrompt: string = '你是"智慧校园助手"，一款面向高校学生的智能助手。...';
8.   static readonly temperature: number = 0.7;
9.   static readonly maxTokens: number = 800;
10.   static readonly timeoutMs: number = 30000;
11. }

复制代码

2. // AIService核心方法
3. export class AIService {
4.   static async chat(history: ChatMessage[]): Promise<string> {
5.     const messages: ChatMessage[] = [
6.       { role: 'system', content: AIConfig.systemPrompt }
7.     ];
8.     for (const m of history) {
9.       messages.push(m);
10.     }
11.     const body: ChatRequest = {
12.       model: currentModel(),
13.       messages: messages,
14.       temperature: AIConfig.temperature,
15.       max_tokens: AIConfig.maxTokens
16.     };
17.     const req = http.createHttp();
18.     try {
19.       const resp = await req.request(AIConfig.endpoint, {
20.         method: http.RequestMethod.POST,
21.         header: {
22.           'Content-Type': 'application/json',
23.           'Authorization': 'Bearer ' + currentKey()
24.         },
25.         extraData: JSON.stringify(body),
26.         connectTimeout: AIConfig.timeoutMs,
27.         readTimeout: AIConfig.timeoutMs
28.       });
29.       if (resp.responseCode !== 200) {
30.         return `（请求失败：${resp.responseCode}）请检查网络或服务配置。`;
31.       }
32.       const text = AIService.parseContent(`${resp.result}`);
33.       return text !== '' ? text : '（助手暂时没有返回内容，请重试）';
34.     } catch (e) {
35.       return '（网络异常）请检查设备网络连接后重试。';
36.     } finally {
37.       req.destroy();
38.     }
39.   }
40. }

复制代码

通过以上实践，开发者可以在鸿蒙PC上快速搭建一个集成本地数据管理与云端AI能力的智能校园助手应用，并充分利用PC的大屏和键鼠交互优势。

热心网友4

楼主这篇鸿蒙PC端大模型校园助手的开发分享真的太详实了！从分层架构到每个功能模块的ArkTS实现，再到PC适配的弹性布局、安全区避让和键鼠交互，条理清晰，干货满满。特别是AIService中显式定义接口、加载占位气泡刷新、以及校园问答的混合模式，都是实际开发中很实用的技巧。请问在真机部署时，API密钥的运行时覆盖方案中，AppStorage和AIService的优先级具体是怎么处理的？另外，多轮对话时的历史消息长度管理有做限制吗？期待后续的优化分享！

热心网友4

楼主的分享太实用了，正好我也在做鸿蒙PC上的校园类应用，ArkTS的PC适配细节一直头疼。你提到的弹性布局用layoutWeight和Flex自动换行，这个我踩过坑，之前写死像素在窗口缩放后直接崩了。还有安全区通过@StorageProp全局避让，这个思路比我在每个页面单独适配要优雅多了。 有个问题想请教：AIService里请求完调用req.destroy()释放资源，这个在PC端长时间对话频繁调用时，会不会有内存或连接池的隐患？另外，你那个预置答案+AI兜底的混合模式，预置答案的数据结构是直接放在model层硬编码，还是额外从assets里读取JSON？我想借鉴一下。

热心网友4

非常详细的分享！架构分层清晰，尤其大模型接入的开放兼容设计很实用，后续换服务商只需改配置，维护成本低。想请教一下，在 ArkTS 严格模式下，你定义的 `ChatRequest` 接口具体是怎么写的？另外，PC 端安全区计算时，`@StorageProp` 的键名是统一约定好的，还是每个页面各自定义？感谢分享实战经验！