从 0 到 1 开发梦精灵提示词管理器：我的全栈开发实战记录-CSDN博客

本文链接：https://blog.csdn.net/longyong26/article/details/147628726

从 0 到 1 开发梦精灵提示词管理器：我的全栈开发实战记录

作为一名每天与多个 AI 平台打交道的程序员，被混乱的提示词管理折磨许久后，我决定开发一款专属的浏览器插件 —— 梦精灵提示词管理器。历时两个多月，基于 Golang、Vue3 和 WXT 框架完成了从后端到前端再到浏览器插件的全栈开发。本文将毫无保留地分享技术实现细节与踩坑经验，希望能为同行提供参考。

一、技术栈选型：为何选择这些工具？

（一）后端 API：Golang+HotGo 框架的高效组合

选择 Golang 主要基于三点考虑：

高性能：原生协程模型非常适合处理高频 API 请求
开发效率：HotGo 框架（基于 GoFrame）提供了完整的企业级开发解决方案，内置 ORM、缓存、JWT 认证等常用组件
生态成熟：丰富的中间件支持（如 CORS、限流、日志），开箱即用的代码生成工具节省 30% 以上开发时间
hotgo的addons设计模式，很方便的在不改变框架核心的基础上，扩展自己的业务逻辑，如开发一个小程序app的接口模块

实际开发中，HotGo 的代码生成器帮了大忙。管理后台可以直接通过代码生成工具来生成逻辑和界面，后端的增删改查，没什么特殊要求，基本可以不用改。例如后台的提示词管理模块，从创建数据库表到前后端联调，很快就完成基础功能开发。

（二）后台管理界面：Vue3+Naive UI 的极简实践

后台界面也是找了是用Naive-ui开发的框架，正好hotgo就是：

响应式设计：组合式 API 更适合复杂状态管理

性能优势：相比 Vue2，编译速度提升 40%，打包体积减少 25%

Naive UI 的选择则是因为：

极简风格：符合工具类产品的设计定位，组件样式可定制性强
轻量高效：不含任何第三方依赖，运行时性能优异
完整文档：对 Vue3 组合式 API 的支持非常友好，开发过程中几乎零障碍

（三）浏览器插件：WXT 框架的跨浏览器解决方案

在插件开发选型时，WXT 框架的优势脱颖而出：

统一 API：支持 Chrome、Edge、Firefox 等主流浏览器，一次开发多端运行

现代技术栈：基于 TypeScript 和 Web Extensions API 标准，支持 ES6 + 特性

高效调试：内置的热更新功能，修改代码后无需重新加载插件

实际使用中发现，WXT 对浏览器存储 API（如 chrome.storage）的封装非常实用，通过统一的 Storage 类，轻松实现不同存储区域（local、sync、managed）的读写操作，兼容各浏览器的差异。再配合naive-ui来开发弹窗等管理界面，真的是太方便了。

二、核心功能实现：从需求到代码的落地

（一）私有提示词管理：数据安全的三重保障

传输层加密：全站启用 HTTPS，API 接口使用 JWT 认证，每次请求携带签名令牌
提示词隐私：提示词内容查询只能根据当前登录用户来查询
访问控制：每个用户只能操作自己的提示词和分类

（二）跨平台管理：统一数据模型的设计

为支持多 AI 平台，设计了统一的提示词数据结构：

// 前端数据模型

interface Prompt {

id: number;

platform: 'jimeng' | 'vidu' | 'keling' | 'duiyou' | 'tongyi'; // 支持的平台列表

content: string;

tags: string[]; // 标签分类

createTime: Date;

updateTime: Date;

}

后端 API 通过platform参数区分不同平台，在浏览器插件中实现平台识别逻辑：

// 插件中自动识别当前平台

function detectPlatform(url: string): string | null {

const platformMap = {

'jimeng.com': 'jimeng',

'vidu.ai': 'vidu',

// 其他平台映射...

};

return platformMap[new URL(url).hostname] || null;

}

（三）全场景操作：浏览器插件的核心能力

一键收藏功能：通过监听浏览器动作，在支持的平台页面注入收藏按钮，调用 WXT 的 tabs API 获取当前页面信息

    // 检查是否已经插入过
    if (!document?.querySelector("#dreamelf-top-btn")) {
      // 创建一个新的div元素
      const newDiv = document.createElement("div");
      // console.log("elementselementselementselements", elements);
      newDiv.innerHTML = await dreamelfTopBtnElement("one");
      newDiv.className = "dreamelf-top-btn-lay-container";
      newDiv.addEventListener("click", () => {
        // 点击后显示我的记录弹窗
        showMyRecordDialog.value = true;
      });

      // 追加此按钮前，先移除界面已有的按钮，保证界面只有一个按钮
      document.querySelector("#dreamelf-top-btn")?.remove();

      // 插入到第一个元素位置 
      targetContainer?.insertBefore(newDiv, targetContainer.firstChild);
      
    }

右键保存功能：监听 contextMenu 事件，获取选中的文本内容

// 注册右键菜单

broswer.contextMenus.create({

id: 'save-selected-text',

title: '保存到梦精灵',

contexts: ['selection']

});

broswer.contextMenus.onClicked.addListener((info) => {

if (info.selectionText) {

broswer.runtime.sendMessage({

action: 'savePrompt',

prompt: { content: info.selectionText, platform: detectCurrentPlatform() }

});

}

});

（四）游戏化设计：等级系统的实现

后端逻辑：在用户表中增加power（灵力值）和level（等级）字段，每次收藏提示词时触发更新（大概示例）

-- 数据库表结构

CREATE TABLE user (

id INT PRIMARY KEY AUTO_INCREMENT,

power INT DEFAULT 0,

level INT DEFAULT 1,

-- 其他字段...

);

-- 更新语句

UPDATE user SET power = power + 1 WHERE id = ?;

前端展示：在 Naive UI 的卡片组件中显示等级信息（大概示例）




<template>

<n-card>

<h3>精灵名称：{{ user.name}}</h3>

<p>等级：LV{{ user.id}} {{ user.levelname }}</p>

</n-card>

</template>

<script setup>

const { user } = useStore();

</script>

三、开发中的挑战与解决方案

（一）前后端联调效率

HotGo 框架自带的 Swagger 文档解决了大部分联调问题，但在处理文件上传（如提示词截图）时遇到格式不一致问题。通过统一使用 FormData 格式传输，后端使用 multipart 包解析，前端通过 Naive UI 的 Upload 组件封装上传逻辑，最终实现全平台一致的文件处理方案。还有一种是生成base64字符串到后台转为图片存储。