希望通过这份笔记系统记录使用 OpenCode 开发桌面应用的全过程，包括环境搭建、核心开发流程、常见问题及解决方案，方便后续查阅和复盘。以下是一份结构完整、实用性强的开发笔记模板，你可根据实际开发的技术栈（如 Electro

一、开发准备

1.1 技术选型与背景

• 开发目标：基于 OpenCode 构建轻量级桌面应用（如文本编辑器 / 数据可视化工具），支持 Windows/macOS 跨平台运行
• 核心框架：替代 Electron
• 技术栈：
  • 前端：Vue3 + Vite + TypeScript（界面层）
  • 构建工具：OpenCode AI 代码编辑器
• 环境要求：
  • Node.js ≥ 18.0.0
  • OpenCode ≥ 1.80.0（安装 Tauri、Rust 相关插件）

1.2 环境搭建步骤

1.2.1 OpenCode 配置

1. 安装必备插件：
   • Volar：Vue3 语法支持
   • TypeScript Vue Plugin：TS + Vue 类型校验
2. 配置终端：OpenCode → 设置 → 终端 → 选择系统默认终端

打开OpenCode选择目录编写promt

请基于以下技术栈和需求，生成一个完整、可运行的终端命令行桌面应用代码：

### 一、核心技术栈
1. 前端框架：Vue 3 (Composition API + <script setup>)
2. UI 组件库：naive-ui (最新版)
3. 桌面框架：Electron (最新版，使用 electron-vite 脚手架)
4. 其他：TypeScript、Pinia (状态管理)、electron-store (本地存储)

### 二、核心功能需求
1. 基础界面
   - 窗口：固定宽度 800px、高度 600px，支持最小化/最大化/关闭，自定义标题栏（使用 naive-ui 样式）
   - 布局：顶部导航栏（显示应用名称“Electron 终端工具”）+ 主体终端区域 + 底部输入区
2. 终端核心功能
   - 输入框：支持输入任意终端命令（如 ls、cd、npm run dev 等），按回车执行
   - 命令执行：调用系统终端执行命令，实时输出 stdout/stderr 内容到界面
   - 历史记录：保存最近 50 条命令执行记录，支持点击历史命令重新执行
   - 样式：终端输出区域模拟 Linux 终端样式（黑色背景、绿色文字），支持清屏功能
3. 交互体验
   - 输入框支持快捷键（Ctrl+C 清空、Ctrl+L 清屏）
   - 执行命令时显示加载状态，执行完成后提示“命令执行完成”
   - 错误命令执行失败时，输出红色提示文本

### 三、代码规范要求
1. 项目结构：使用 electron-vite 官方推荐的目录结构，区分主进程（main）和渲染进程（renderer）
2. 代码风格：
   - 变量/函数命名使用驼峰式，组件名使用 PascalCase
   - 关键逻辑添加中文注释，核心函数说明入参/出参
   - 错误处理：捕获命令执行异常、进程调用异常，避免应用崩溃
3. 依赖管理：package.json 中明确所有依赖版本，确保可直接 npm install 安装

### 四、输出要求
1. 先输出完整的项目目录结构
2. 按文件路径依次输出核心文件代码（main.ts、App.vue、Terminal.vue 等）
3. 提供详细的环境搭建、启动、打包步骤（适配 Windows/macOS）
4. 说明核心功能的实现逻辑（如主进程与渲染进程通信、命令执行原理）

补充说明（帮助你理解和调整 Prompt）

1. 核心适配点：

   • 针对 Electron 特性：提示词中明确了主进程 / 渲染进程通信（命令执行需要主进程调用系统终端，渲染进程负责界面展示），这是 Electron 开发的核心；
   • 针对 naive-ui 适配：要求自定义标题栏、终端样式，确保 UI 组件与终端场景结合；
   • 针对实用性：加入了历史记录、快捷键、错误处理等生产级功能，避免生成 “玩具级” 代码

1. 使用后 AI 生成代码的验证步骤：

   bash

   运行

   # 1. 初始化项目（AI 生成的步骤中会提供）
   npm create electron-vite@latest my-terminal-app -- --template vue-ts
   cd my-terminal-app
   
   # 2. 安装依赖
   npm install naive-ui pinia electron-store
   
   # 3. 替换 AI 生成的核心文件（main.ts、App.vue 等）
   
   # 4. 启动开发环境
   npm run dev
   
   # 5. 打包应用
   npm run build
   

总结

1. 这份 Prompt 明确了 技术栈（naive-ui+Vue+Electron）+ 核心功能（终端命令执行 / 历史记录）+ 代码规范，能让 OpenCode 生成可直接运行的终端应用代码；
2. 核心逻辑聚焦于 Electron 主进程调用系统终端、渲染进程展示输出，以及 naive-ui 实现终端样式和交互；
3. 使用时可根据需求增减功能（如添加命令补全、主题切换等），只需在 Prompt 的 “核心功能需求” 中补充即可。

最终实现的代码框架：

总结来说对于初学技术栈的人来说，OpenCode给到的帮助十分的多，对于自身新技术的开荒，或者对于接手老项目的学习都是十分有帮助的！