elon_z
elon_z

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

【项目实训】【项目博客#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的响应式系统实现实时更新：

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

2.1 技术选型

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

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

创建了独立的CodeHighlighter组件：

组件接收两个主要属性：

  • 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 轻量级代码编辑器实现

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

  • 底层：