54 lines
2.5 KiB
Markdown
54 lines
2.5 KiB
Markdown
|
# SVFS 插件开发模板（Vue 3 + Vite）
|
|||
|
|
|
|||
|
|
用 Vue 3 开发 SVFS 插件的起点模板：构建产物打进 `.svfs` 包、在客户端的
|
|||
|
|
WebView 里以 `svfs://<插件id>/` 独立 origin 运行。附赠浏览器 mock，让
|
|||
|
|
`npm run dev` 不进客户端也能迭代 UI。
|
|||
|
|
|
|||
|
|
## 目录结构
|
|||
|
|
|
|||
|
|
```text
|
|||
|
|
public/plugin.json 插件清单（vite 会原样拷进 dist 根目录——清单必须在包根）
|
|||
|
|
src/main.js 入口；dev 模式自动装 window.svfs 模拟器
|
|||
|
|
src/svfs.js window.svfs 的薄封装（Promise + JSON 便捷层），组件统一从这里用
|
|||
|
|
src/mock-svfs.js 浏览器版宿主模拟器（storage→localStorage，net→fetch，对话框→confirm/alert）
|
|||
|
|
src/App.vue 分页签的组织方式（主机信息 / 存储 / 网络 / 界面·对话框）
|
|||
|
|
src/components/*.vue 每类能力一个面板组件，照着抄就行
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 开发流程
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
|
|||
|
|
# 1) 浏览器里迭代 UI（mock 桥；net 相对路径打到 vite dev server）
|
|||
|
|
npm run dev
|
|||
|
|
|
|||
|
|
# 2) 构建 + 打包（plugin.json 在 public/ 下，构建后位于 dist 根，满足"清单在包根"）
|
|||
|
|
npm run build
|
|||
|
|
svfs pack ./dist plugin.svfs --compress
|
|||
|
|
|
|||
|
|
# 3a) 安装到客户端：客户端「设置 → 插件管理 → 安装本地插件…」选 plugin.svfs
|
|||
|
|
# 3b) 或发布到示例服务端，客户端「从服务器安装」填 com.example.vue-demo：
|
|||
|
|
svfs publish plugin.svfs svfs-plugins-root/com.example.vue-demo
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 桥能力速查（src/svfs.js）
|
|||
|
|
|
|||
|
|
| 能力 | 需要权限 | 说明 |
|
|||
|
|
|---|---|---|
|
|||
|
|
| `getHostInfo()` | 无 | `host.info`；含登录用户 `authUser`（v3+） |
|
|||
|
|
| `createStorage(prefix)` | storage | 按插件隔离的键值存储 |
|
|||
|
|
| `netRequest/netJson` | net | 宿主代发 HTTP，绕开 CORS，同源请求自动带登录 token |
|
|||
|
|
| `notify / setTitle` | notify / title | 状态栏通知 / 改窗口标题 |
|
|||
|
|
| `confirmDialog / messageBox` | dialog | 宿主**原生对话框**（v4+），Promise 返回用户选择 |
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
* **`vite.config` 里 `base: "./"` 不能丢**：包内是独立 origin，绝对路径资源会 404。
|
|||
|
|
* manifest 的 `api_version` 是你要求的最低宿主版本：用了 `dialog` 就写 4，
|
|||
|
|
没用新能力可以写 2（兼容面更大）。改 id 记得同步 `public/plugin.json`
|
|||
|
|
与上传路径——两处必须一致。
|
|||
|
|
* 静态资源放 `src/assets/` 里 `import` 引用（会被 vite 重写为相对路径）；
|
|||
|
|
放 `public/` 的文件按根相对路径引用。
|
|||
|
|
* 真实桥的行为以客户端「设置 → 桥调试台」插件为准；mock 只覆盖日常迭代。
|