【项目实训】【项目博客#07】HarmonySmartCodingSystem系统前端开发技术详解（5.12-6.15）

一、项目概述与目标

HarmonySmartCodingSystem是一个面向HarmonyOS开发者的智能编码辅助平台，旨在通过自然语言交互简化开发流程，提供智能化的API文档检索和代码生成服务。系统集成了多项创新功能，包括智能代码生成、API文档检索、代码高亮显示等，帮助开发者提高编码效率和代码质量。

系统的主要目标包括：

  1. 提供智能化的API文档检索服务，支持自然语言查询
  2. 实现代码智能生成功能，根据用户需求自动生成代码
  3. 提供代码高亮显示，提升代码可读性
  4. 支持文件系统操作，实现代码的保存和管理
  5. 优化开发体验，提供便捷的操作方式

二、技术栈选择

HarmonySmartCodingSystem前端采用了现代化的技术栈：

  • 前端框架：Vue 3（基于Composition API）
  • 开发语言：TypeScript
  • 构建工具：Vite
  • UI组件库：Element Plus
  • 代码高亮：highlight.js
  • CSS预处理器：SCSS

技术选型考虑了以下几个方面：

  1. 性能与响应速度：Vue 3的响应式系统和虚拟DOM渲染机制确保了界面的高效更新
  2. 类型安全：TypeScript提供了静态类型检查，减少运行时错误
  3. 开发效率：Vite的快速热重载和按需编译大幅提升了开发效率
  4. 组件化：基于组件的开发方式提高了代码复用率和可维护性

在package.json中，我们使用了以下主要依赖版本：

{"dependencies": {"vue": "^3.3.0","typescript": "^5.0.0","element-plus": "^2.3.0","highlight.js": "^11.11.1"}
}

三、系统架构设计

HarmonySmartCodingSystem前端采用了模块化、组件化的架构设计：

1. 核心架构

  • 主视图层（views/）：包含主要页面视图，如代码编辑器、API检索页面等
  • 组件层（components/）：可复用的UI组件，如代码高亮器、文件浏览器等
  • 服务层（services/）：封装与后端API交互、文件系统操作等功能
  • 状态管理：使用Vue 3的响应式API管理应用状态

2. 前端项目结构

frontend/
├── public/                 # 静态资源目录
│   ├── index.html         # HTML模板
│   └── favicon.ico        # 网站图标
├── src/                   # 源代码目录
│   ├── assets/           # 资源文件
│   │   ├── styles/       # 样式文件
│   │   └── images/       # 图片资源
│   ├── components/       # 公共组件
│   │   ├── CodeHighlighter.vue    # 代码高亮组件
│   │   ├── FileExplorer.vue       # 文件浏览器组件
│   │   └── OutputPanel.vue        # 输出面板组件
│   ├── views/            # 页面视图
│   │   ├── CodeEditor.vue         # 代码编辑器页面
│   │   └── PureRAG.vue           # API检索页面
│   ├── services/         # 服务层
│   │   ├── fileSystemService.ts   # 文件系统服务
│   │   └── ragService.ts         # API检索服务
│   ├── utils/            # 工具函数
│   ├── App.vue           # 根组件
│   └── main.ts           # 入口文件
├── package.json          # 项目依赖配置
├── tsconfig.json         # TypeScript配置
├── vue.config.js         # Vue项目配置
└── .eslintrc.js         # ESLint配置

3. 目录说明

  1. public目录：

    • 存放静态资源文件
    • 包含HTML模板和网站图标

  2. src目录：

    • assets：存放项目资源文件
      • styles：全局样式和主题文件
      • images：图片资源
    • components：可复用组件
      • CodeHighlighter：代码高亮组件
      • FileExplorer：文件浏览器组件
      • OutputPanel：输出面板组件
    • views：页面级组件
      • CodeEditor：代码编辑器页面
      • PureRAG：API检索页面
    • services：服务层
      • fileSystemService：文件系统操作服务
      • ragService：API检索服务
    • utils：工具函数和辅助方法

  3. 配置文件：

    • package.json：项目依赖和脚本配置
    • tsconfig.json：TypeScript编译配置
    • vue.config.js：Vue项目构建配置
    • .eslintrc.js：代码规范配置

4. 数据流设计

系统采用了单向数据流设计模式：

  • 用户操作触发事件
  • 事件处理函数调用服务层API
  • 服务层返回数据更新状态
  • 状态变化驱动UI更新

这种设计使得数据流向清晰可预测，便于调试和维护。

四、核心模块实现

1. PureRAG模块：智能API检索系统

PureRAG模块是系统的核心功能之一，提供了智能化的API文档检索服务。

1.1 核心组件

  1. 搜索框：支持自然语言查询和API名称直查

    • 实现了智能提示功能，根据用户输入实时推荐可能的API
    • 支持历史查询记录，方便用户重复查询
    • 提供API版本筛选功能，确保查询结果与目标版本兼容

  2. 内容展示区：结构化展示API文档和示例代码

    • 采用卡片式布局，清晰展示API名称、描述、参数和返回值
    • 集成代码高亮功能，提升示例代码的可读性
    • 支持代码复制和运行功能

  3. 悬浮工具栏：提供复制代码、主题切换等功能

    • 实现了代码一键复制功能，提高开发效率
    • 支持明暗主题切换，适应不同使用场景
    • 提供API文档导出功能
1.2 技术实现

PureRAG模块通过ragService与后端API交互：

// ragService.ts核心实现
static async search(query: string, filters: any): Promise<any> {try {const response = await axios.post(`${this.apiUrl}/rag_query`, { query,filters: {version: filters.version,category: filters.category}});return response.data;} catch (error) {console.error("Search error:", error);throw error;}
}

在UI层面，使用Vue的响应式系统实现实时更新：

<!-- PureRAG.vue简化示例 -->
<template><div class="rag-container"><SearchBox @search="handleSearch" /><RAGResultTab :result="searchResult" /></div>
</template><script setup>
import { ref } from 'vue';
import { ragService } from '@/services';const searchResult = ref(null);const handleSearch = async (query) => {searchResult.value = await ragService.search(query);
};
</script>

2. 代码高亮模块：提升代码可读性

2.1 技术选型

选择了highlight.js库作为代码高亮的核心技术，主要原因有：

  • 丰富的语言支持：支持超过190种编程语言的语法高亮
  • 自定义主题：提供多种内置主题，并支持自定义样式
  • 轻量级：可按需引入语言包，减小打包体积
  • 易于集成：与Vue3框架良好兼容
  • 社区活跃：持续更新和维护
2.2 组件设计

创建了独立的CodeHighlighter组件：

<template><pre><code :class="languageClass" ref="codeBlock" v-html="highlightedCode"></code></pre>
</template><script lang="ts">
import { defineComponent, ref, onMounted, watch, PropType } from 'vue';
import hljs from 'highlight.js';
import 'highlight.js/styles/vs2015.css';export default defineComponent({name: 'CodeHighlighter',props: {code: {type: String,required: true,default: ''},language: {type: String as PropType<string>,default: ''}}
});
</script>

组件接收两个主要属性：

  • code：要高亮显示的代码字符串
  • language：代码的语言类型
2.3 核心实现
// 注册语言
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('arkts', typescript); // 使用TypeScript高亮规则处理ArkTS// 高亮处理逻辑
const highlightCode = () => {languageClass.value = props.language ? `language-${props.language}` : '';if (props.code && props.language) {try {const highlighted = hljs.highlight(props.code, {language: props.language,ignoreIllegals: true});highlightedCode.value = highlighted.value;} catch (error) {console.error('高亮处理错误:', error);highlightedCode.value = props.code;}} else {highlightedCode.value = props.code;}
};
2.4 样式配置
/* 高亮样式不应该被scoped限制 */
pre {margin: 0;padding: 0;border-radius: 4px;overflow: auto;
}code {font-family: 'Fira Code', Consolas, Monaco, 'Andale Mono', monospace;font-size: 14px;line-height: 1.5;padding: 1em;white-space: pre;word-spacing: normal;word-break: normal;tab-size: 4;
}.hljs {display: block;overflow-x: auto;padding: 0.5em;background: #1E1E1E;color: #DCDCDC;
}

3. 智能代码模块：编辑与生成的完美结合

3.1 整体架构

该模块基于Vue 3 Composition API构建，核心架构包括：

  • 主视图：负责管理所有状态和调度子组件
  • 子组件：处理特定领域的任务
  • 服务层：抽象出与外部（本地文件系统、后端API）的交互
3.2 轻量级代码编辑器实现

通过两层叠加实现了编辑功能：

  • 底层：<textarea> - 负责输入

    • 绑定v-model="currentFileContent"，接收所有键盘输入
    • 通过CSScolor: transparent;使其文本透明，但caret-color设为可见
    • 作为光标位置计算的基准

  • 上层：<CodeHighlighter> - 负责显示

    • 通过position: absolute覆盖在<textarea>之上
    • 接收:code="currentFileContent"属性，对代码进行语法高亮
    • 通过watch和adjustEditorHeight函数确保两层同步
3.3 文件系统集成

通过fileSystemService与本地文件系统交互：

  • 打开工作区：通过fileSystemService.openDirectory()获取文件夹句柄
  • 保存文件：通过fileSystemService.saveFile(filePath, content)将内容写入本地文件
  • 文件切换与读取：通过fileSystemService.openFile(filePath)异步读取文件内容
3.4 状态管理：dirtyFiles与响应式UI

系统通过Set对象dirtyFiles管理文件的未保存状态：

  • 添加：当用户输入或应用AI代码时，将文件路径添加到集合中
  • 移除：当用户保存或放弃更改时，从集合中移除文件路径

UI根据dirtyFiles状态动态更新：

  • 标签页上显示未保存指示器
  • 保存按钮高亮显示
  • 关闭文件时弹出确认对话框
3.5 AI代码应用：四种注入模式

系统支持四种AI代码注入模式：

  1. 光标处：在当前光标位置插入代码
  2. 文件开头：在文件开头插入代码
  3. 文件结尾：在文件末尾插入代码
  4. 替换：替换选中的代码段

五、总结

HarmonySmartCodingSystem前端开发是一次将现代前端技术与复杂业务逻辑深度结合的实践。通过Vue 3框架的强大能力，结合精心设计的组件和服务，系统实现了高效、易用的智能编码辅助功能。

系统的核心价值在于：

  • 提升开发效率：通过智能API检索和代码生成，减少开发者查询文档和编写重复代码的时间
  • 降低学习成本：通过自然语言交互，降低HarmonyOS开发的学习门槛
  • 优化开发体验：通过代码高亮、文件管理等功能，提供一站式开发辅助工具

作为HarmonyOS开发工具链中的一个尝试，HarmonySmartCodingSystem仍在不断探索和改进中。我们期待通过持续的技术创新和用户反馈，为HarmonyOS开发者提供更好的开发体验，同时也为鸿蒙生态的发展贡献一份力量。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/84308.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/84308.shtml
英文地址，请注明出处：http://en.pswp.cn/web/84308.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

系统性能优化-2 CPU

系统性能优化-2 CPU

系统性能优化-2 CPU 其实除了 CPU 的频率&#xff0c;多核架构以及多 CPU 架构对系统运行的性能也是很大影响的&#xff0c;那么该如何充分利用 CPU 呢&#xff1f; CPU 架构 首先介绍一下当前主流的 CPU 架构&#xff0c;现在的系统基本都是多 CPU&#xff0c;一个 CPU 处理…
阅读更多...
Docker Pull 相关配置指南

Docker Pull 相关配置指南

在Docker环境中&#xff0c;docker pull命令用于从Docker镜像仓库拉取镜像。为了确保Docker镜像能够快速、稳定地拉取&#xff0c;配置 docker pull相关的设置是非常重要的。本文将详细介绍如何配置Docker以优化 docker pull操作&#xff0c;涵盖镜像源配置、登录私有仓库、网络…
阅读更多...
Python的Matplotlib库：从入门到精通的数据可视化实战指南

Python的Matplotlib库：从入门到精通的数据可视化实战指南

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 持续学习&#xff0c;不断…
阅读更多...
CentOS查日志

CentOS查日志

在 CentOS 系统中&#xff0c;查看日志是系统维护和故障排查的重要技能。以下是常用的日志查看方法和工具&#xff1a; 1. 基本日志位置 CentOS 使用systemd管理服务&#xff0c;主要日志存储在&#xff1a; /var/log/messages&#xff1a;系统主日志/var/log/secure&#x…
阅读更多...
Linux运维新人自用笔记（用虚拟机Ubuntu部署lamp环境，搭建WordPress博客）

Linux运维新人自用笔记（用虚拟机Ubuntu部署lamp环境，搭建WordPress博客）

内容全为个人理解和自查资料梳理&#xff0c;欢迎各位大神指点&#xff01; 每天学习较为零散。 day20 一、./configure 脚本命令 ./configure 是 Unix/Linux 系统中用于配置软件源代码的脚本命令&#xff0c;通常用于为后续的 make 和 make install 准备编译环境。 选项作…
阅读更多...
JetBrains 2025 全家桶 包含 IDEA、WebStorm、DataGrip、Pycharm、CLion、GoLand、PhpStorm

JetBrains 2025 全家桶 包含 IDEA、WebStorm、DataGrip、Pycharm、CLion、GoLand、PhpStorm

JetBrains 2025 全家桶 11合1 包含&#xff1a;IDEA、WebStorm、DataSpell、DataGrip、Pycharm、RustRover、CLion、Rider、PhpStorm、RubyMine、GoLand。 原文地址&#xff1a;JetBrains 2025 全家桶 11合1 含 IDEA、PyCharm、DataGrip、WebStrom、GoLand、CLion、PhpStorm、D…
阅读更多...
【一手实测】字节豆包 1.6 + Trae + 火山 MCP + FaaS：AI云原生 Agent 开发部署全流程体验！

【一手实测】字节豆包 1.6 + Trae + 火山 MCP + FaaS：AI云原生 Agent 开发部署全流程体验！

原创 Aitrainee AI进修生 2025年06月13日 16:42 湖南 标题已修改 缘起 —— 火山引擎在 2025 原动力大会上&#xff0c;也端出了自家的豆包大模型&#xff1a;Doubao-Seed-1.6 系列。 这三兄弟都支持文本、图片、视频输入&#xff0c;都带着 256K 的长上下文。 Doubao-Seed-…
阅读更多...
Vulkan学习笔记8—顶点输入描述与顶点缓冲

Vulkan学习笔记8—顶点输入描述与顶点缓冲

一、着色器代码更新及构建时自动编译着色器脚本 用内存中的顶点缓冲区替换顶点着色器中硬编码的顶点数据 之前的顶点着色器&#xff1a; #version 450layout(location 0) out vec3 fragColor;// 顶点数据硬编码 vec2 positions[3] vec2[](vec2(0.0, -0.5),vec2(0.5, 0.5),…
阅读更多...
Day04_数据结构(栈链栈循环队列)

Day04_数据结构(栈链栈循环队列)

01.栈 main.c #include "stack.h" int main() { stack_p S(stack_p)create_stack(); //1.入栈 …
阅读更多...
PyTorch 的 CUDA GPU 支持 · 安装五条铁律（最新版 2025 修订）（适用于所有用户）

PyTorch 的 CUDA GPU 支持 · 安装五条铁律（最新版 2025 修订）（适用于所有用户）

相关参考资料&#xff08;往期博客&#xff09;&#xff1a; 是否需要预先安装 CUDA Toolkit&#xff1f;——按使用场景分级推荐及进阶说明-CSDN博客 太方便&#xff0c;WIN系统CUDA12.4下使用conda便捷管理虚拟环境中的不同版本的CUDA、cuDNN、PyTorch-CSDN博客 好消息&#…
阅读更多...
Django构建简易视频编辑管理系统

Django构建简易视频编辑管理系统

Django构建简易视频编辑管理系统 以下是基于Django构建简易视频编辑管理系统的可运行代码框架&#xff0c;包含核心功能模块和实现逻辑。该系统支持视频上传、基本剪辑操作和管理功能。 环境准备 安装必要依赖包&#xff1a; pip install django pillow moviepy django-cri…
阅读更多...
Java求职者面试题详解：计算机网络、操作系统、设计模式与数据结构

Java求职者面试题详解：计算机网络、操作系统、设计模式与数据结构

Java求职者面试题详解&#xff1a;计算机网络、操作系统、设计模式与数据结构 第一轮&#xff1a;基础概念问题 1. 请解释TCP和UDP的区别。 2. 什么是操作系统&#xff1f;它的主要功能是什么&#xff1f; 3. 请解释设计模式中的单例模式&#xff0c;并给出一个实际应用的例…
阅读更多...
【mysql】docker运行mysql8.0

【mysql】docker运行mysql8.0

背景 mariadb10.5.8报错&#xff1a;Error 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near ‘LIMIT ?’ at line 1 所以更换为mysql8.0.39试试 docker run启动…
阅读更多...
C#实现语音预处理:降噪/静音检测/自动增益

C#实现语音预处理:降噪/静音检测/自动增益

无论是在音视频录制系统&#xff0c;还是音视频通话系统、或视频会议系统中&#xff0c;对从麦克风采集到的说话的声音数据进行预处理&#xff0c;都是是非常必要的。 语音数据预处理主要包括&#xff1a;​​降噪&#xff08;Noise Reduction&#xff09;、静音检测&#xff0…
阅读更多...
组合模式Composite Pattern

组合模式Composite Pattern

模式定义 又称整体-部分模式 组合多个对象形成 树形结构 以表示“整体-部分”的结构层次 组合模式对单个对象&#xff08;即叶子对象&#xff09;和组合对象&#xff08;即容器对象&#xff09;的使用具有一致性对象结构型模式 模式结构 Component&#xff1a;抽象构件Leaf&a…
阅读更多...
商代大模型：智能重构下的文明曙光与青铜密码

商代大模型：智能重构下的文明曙光与青铜密码

引言&#xff1a;技术奇点的历史想象 在人类文明的长河中&#xff0c;技术的进步始终是推动社会变革的核心动力。从青铜冶炼到文字发明&#xff0c;从农业革命到工业革命&#xff0c;每一次技术飞跃都重塑了人类对世界的认知与生存方式。而如今&#xff0c;人工智能的崛起正以…
阅读更多...
【Python】python系列之函数作用域

【Python】python系列之函数作用域

Python 系列文章学习记录&#xff1a; Python系列之Windows环境安装配置_开着拖拉机回家的博客-CSDN博客 Python系列之变量和运算符_开着拖拉机回家的博客-CSDN博客 Python系列之判断和循环_开着拖拉机回家的博客-CSDN博客 Python系列之字符串和列表_开着拖拉机回家的博客…
阅读更多...
Unity UI 核心类解析之Graphic

Unity UI 核心类解析之Graphic

&#x1f9f1; Unity UI 核心类解析&#xff1a;Graphic 类详解 一、什么是 Graphic&#xff1f; 在 Unity 的 UI 系统中&#xff0c;Graphic 是一个抽象基类&#xff0c;继承自 UIBehaviour 并实现了 ICanvasElement 接口。它是所有可以被绘制到屏幕上的 UI 元素的基础类。 …
阅读更多...
【Elasticsearch】文档迁移（Reindex）

【Elasticsearch】文档迁移（Reindex）

文档迁移 1.为什么要进行 reindex 操作2.Reindex 操作的本质3.实际案例3.1 同集群索引之间的全量数据迁移3.2 同集群索引之间基于特定条件的数据迁移3.2.1 源索引设置检索条件3.2.2 基于 script 脚本的索引迁移3.2.3 基于预处理管道的数据迁移 3.3 不同集群之间的索引迁移3.4 查…
阅读更多...
WordPress 区块版面配置指南

WordPress 区块版面配置指南

WordPress 的区块编辑器(Gutenberg)提供了灵活的版面配置选项&#xff0c;以下是主要配置方法&#xff1a; 基本区块布局 添加区块&#xff1a;点击””按钮或按”/”键快速插入区块 常用内容区块&#xff1a; 段落(Paragraph) 标题(Heading) 图像(Image) 画廊(Gallery)…
阅读更多...
最新文章

Copyright @ 2022~2023