# focusany-plugin-example

**Repository Path**: modstart-lib/focusany-plugin-example

## Basic Information

- **Project Name**: focusany-plugin-example
- **Description**: FocusAny 插件开发示例 | FocusAny Plugin Example
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: https://focusany.com
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-12-16
- **Last Updated**: 2026-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FocusAny 插件开发示例

本仓库收录 FocusAny 插件的原生 HTML、Vue 与 React 示例，可作为新插件的开发起点。

## 示例目录

| 目录 | 说明 |
| --- | --- |
| `Bare` | 最小化原生 HTML、CSS、JavaScript 插件模板 |
| `BasicExample` | 原生插件 API 使用示例 |
| `VueExample` | Vue 3、Vite、Tailwind CSS 基础示例 |
| `VueLayoutExample` | Vue 3、Tailwind CSS、Ant Design Vue 布局模板 |
| `ReactExample` | React、Vite、Tailwind CSS 基础示例 |
| `ReactLayoutExample` | React、Tailwind CSS、Ant Design 布局模板 |
| `FileEditorExample` | Vue 文件编辑器插件示例 |
| `WebRemoteExample` | 远程网页离线缓存插件示例 |

## 快速开始

1. 进入目标示例目录并安装依赖：`npm install`。
2. Vue / React 示例可执行 `npm run dev` 进行开发，执行 `npm run build` 生成构建产物。
3. 在 FocusAny 中选择对应的 `focusany-plugin/` 目录作为本地目录插件安装。

## 测试与截图

每个插件均在 `focusany-plugin/test/index.cjs` 提供回归测试，并在 `focusany-plugin/snapshot/index.cjs` 提供界面快照脚本。测试脚本统一直接导入 SDK：

```js
const { it, run, installPlugin, runPlugin } = require('focusany-sdk/test');
```

SDK 统一使用发布版依赖：

```json
{
  "focusany-sdk": "^2.1.0"
}
```

运行测试：

```bash
node focusany-plugin/test/index.cjs
```

运行截图：

```bash
node focusany-plugin/snapshot/index.cjs
```

运行前请保持 FocusAny 桌面应用开启。

## 相关资源

- [FocusAny 开发文档](https://focusany.com/doc)
- [FocusAny 插件市场](https://focusany.com/store)