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

【项目实训】【项目博客#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函数确保两层同步

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代码注入模式：

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

五、总结

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

系统的核心价值在于：

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

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

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