当前位置：首页 > news >正文

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

news 来源：原创 2025/6/16 5:30:59

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

一、项目概述与目标

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

系统的主要目标包括：

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

二、技术栈选择

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

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

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

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

在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. 目录说明

public目录：
- 存放静态资源文件
- 包含HTML模板和网站图标
src目录：
- assets：存放项目资源文件
  - styles：全局样式和主题文件
  - images：图片资源
- components：可复用组件
  - CodeHighlighter：代码高亮组件
  - FileExplorer：文件浏览器组件
  - OutputPanel：输出面板组件
- views：页面级组件
  - CodeEditor：代码编辑器页面
  - PureRAG：API检索页面
- services：服务层
  - fileSystemService：文件系统操作服务
  - ragService：API检索服务
- utils：工具函数和辅助方法
配置文件：
- package.json：项目依赖和脚本配置
- tsconfig.json：TypeScript编译配置
- vue.config.js：Vue项目构建配置
- .eslintrc.js：代码规范配置

4. 数据流设计

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

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

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

四、核心模块实现

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

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

1.1 核心组件

搜索框：支持自然语言查询和API名称直查
- 实现了智能提示功能，根据用户输入实时推荐可能的API
- 支持历史查询记录，方便用户重复查询
- 提供API版本筛选功能，确保查询结果与目标版本兼容
内容展示区：结构化展示API文档和示例代码
- 采用卡片式布局，清晰展示API名称、描述、参数和返回值
- 集成代码高亮功能，提升示例代码的可读性
- 支持代码复制和运行功能
悬浮工具栏：提供复制代码、主题切换等功能
- 实现了代码一键复制功能，提高开发效率
- 支持明暗主题切换，适应不同使用场景
- 提供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函数确保两层同步