【項目實訓】【項目博客#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的響應式系統實現實時更新：

<!-- 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