30 lines
2.0 KiB
Typst
30 lines
2.0 KiB
Typst
#import "@preview/brilliant-cv:3.1.2": cvEntry, cvSection
|
||
|
||
|
||
#cvEntry(
|
||
title: [AI 赋能的前端开发工具],
|
||
society: [GuiiAI Devtools],
|
||
date: [2024.8 - 2025.1],
|
||
location: [杭州],
|
||
tags: ("Unplugin", "Vue", "Monorepo", "TypeScript", "Vite"),
|
||
description: "",
|
||
)
|
||
|
||
这是一个作为 Vite Devtools 的 AI 编程开发工具，安装到任意现有项目，不依赖编辑器、IDE。
|
||
|
||
在2024年 AdventureX 黑客松中的作品，后续维护过几个月、开放过限量内测，内测用户大约 1k 人左右。
|
||
|
||
我主要负责的部分是：在比赛阶段和伙伴在三天内做出产品原型、VitePlugin Server 注入SPA 页面的部分、悬浮球的动画、Monorepo 重构后 RPC 库的构建，也参与产品设计的讨论、与投资人的沟通。
|
||
|
||
|
||
- *[项目架构]* GuiiAI Devtools 分为多个包。主要组成部分为：Vite Plugin Server、悬浮球叠加层、操作面板。Vite Server 提供修改代码文件、获取源码的能力，悬浮球叠加层和操作面板可以让用户发出 Prompt。
|
||
|
||
|
||
- *[项目基建]* GuiiAI Devtools 的仓库是一个大的 Monorepo，分为多个包发布。最开始使用 Vercel 的 ai-sdk 作为 AI 库，但由于其自定义能力不够，我们自己封装了 neuri 库作为替代
|
||
|
||
- *[编译时 DOM 注入]* 通过 Vite Plugin 的能力，将一个悬浮球注入到用户 Dev 模式的网页，作为用户控制 AI 写代码的操作中心。注入的元素使用另一个 Vue 实例，因此不要求用户使用 Vue 开发。
|
||
|
||
- *[UI 样式隔离]* 为避免用户页面的全局样式污染悬浮球和面板，我们使用 shadow-dom 隔离了悬浮球和主页面的样式，避免了样式污染，主面板使用 Iframe，隔绝上下文。
|
||
|
||
- *[Vite 到浏览器的 RPC 通信]* 为保证 Vite Plugin Server 和 前端的双向通信，我封装了一个简易的 RPC 库。浏览器不同上下文之间使用 BroadcastChannel 通信，浏览器与 Vite Plugin Server 复用 dev ws 相互通信。
|