快速上手

node -v   # v22.x.x 这样的输出（≥ v20 即满足要求）
npm -v    # 10.x 这样的输出

pnpm -v   # 9.x 或更高

my-plugin/
├── src/
│   ├── main.ts          # 入口
│   ├── App.vue          # 根组件
│   └── ...              # 你的页面与组件
├── dist/                # 构建产物（pnpm build 生成）
├── index.html           # Vite HTML 模板
├── logo.png             # 插件图标
├── plugin.json          # 插件清单（放插件根目录，与官方插件一致）
├── package.json
├── tsconfig.json
├── uno.config.ts
└── vite.config.ts

{
  "name": "my-plugin",
  "title": "我的插件",
  "description": "一句话描述插件做什么",
  "author": "你的名字",
  "version": "1.0.0",
  "logo": "logo.png",
  "loading": { "variant": "Drive", "label": "加载中" },
  "permissions": [],
  "pluginSetting": {
    "slot": "workspace",
    "Detach": true,
    "Menu": true,
    "DesktopShortcut": true
  },
  "development": { "main": "http://localhost:5261" },
  "features": [
    {
      "code": "main",
      "explain": "我的插件主功能",
      "icon": "logo.png",
      "cmds": ["我的插件", "mypl"]
    }
  ],
  "dist": "dist/index.html",
  "build": ["dist"],
  "readme": "这里是插件详情页展示的完整介绍，支持 Markdown。"
}

{
  "name": "@udhold-plugin/my-plugin",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "typecheck": "vue-tsc --noEmit"
  },
  "dependencies": {
    "vue": "^3.5.13",
    "@udhold/udhold-ui": "workspace:*",
    "@udhold/udhold-api-types": "workspace:*"
  },
  "devDependencies": {
    "@iconify/utils": "^3.1.0",
    "@unocss/preset-attributify": "^66.6.6",
    "@unocss/preset-icons": "^66.6.6",
    "@unocss/transformer-directives": "^66.6.6",
    "@vitejs/plugin-vue": "^5.2.1",
    "typescript": "~5.6.2",
    "unocss": "^66.6.6",
    "vite": "^6.0.3",
    "vue-tsc": "^2.1.10"
  }
}

{
  "compilerOptions": {
    "types": ["@udhold/udhold-api-types"]
  }
}

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  base: './',
  // 端口自定义，避开常用端口即可；strictPort 防止 vite 自行换端口导致宿主连不上
  server: { port: 5261, strictPort: true, open: false },
  plugins: [
    vue(),
    UnoCSS(),
    {
      // 与内置插件对齐：允许 file:/udhold-icon: 资源源（指令图标协议）
      name: 'configure-response-headers',
      configureServer: (server) => {
        server.middlewares.use((_req, res, next) => {
          res.setHeader(
            'Content-Security-Policy',
            "default-src * 'unsafe-inline' 'unsafe-eval' data: blob: udhold-icon: file:; img-src * data: blob: udhold-icon: file:;"
          )
          next()
        })
      }
    }
  ],
  resolve: {
    optimizeDeps: { exclude: ['@udhold/udhold-ui'] },
    ssr: { noExternal: ['@udhold/udhold-ui'] },
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

import { createApp } from 'vue'
import App from './App.vue'
import 'virtual:uno.css'
import '@udhold/udhold-ui/styles/global.css'
import { setupThemeSync } from '@udhold/udhold-ui/utils'

// 应用宿主主题（明暗 + 主题色），并注册后续变更监听
setupThemeSync()

createApp(App).mount('#app')

<script setup lang="ts">
import { ref } from 'vue'
import { Message, ConfirmDialog, useMessage } from '@udhold/udhold-ui/components/common'

const { messageState, handleClose, handleAction, confirmState, handleConfirm, handleCancel } = useMessage()
const count = ref(0)
</script>

<template>
  <div class="p-4">
    <h1 class="text-base text-highlighted">我的插件</h1>
    <button class="btn-solid" @click="count++">点了 {{ count }} 次</button>
  </div>

  <!-- 全局消息与确认弹窗，挂一次即可全局使用 -->
  <Message :items="messageState" @close="handleClose" @action-click="handleAction" />
  <ConfirmDialog
    v-model:visible="confirmState.visible" v-model:extra-values="confirmState.extraValues"
    :title="confirmState.title" :message="confirmState.message" :type="confirmState.type"
    :confirm-text="confirmState.confirmText" :cancel-text="confirmState.cancelText" :extra="confirmState.extra"
    @confirm="handleConfirm" @cancel="handleCancel"
  />
</template>

// 基础能力（免权限声明）
udhold.dbStorage.setItem('launchCount', String((Number(udhold.dbStorage.getItem('launchCount')) || 0) + 1))
udhold.shellOpenExternal('https://udhold.cn')
await udhold.copyText('已复制的内容')

// 敏感能力：先在 plugin.json 声明 permissions，再按信封处理结果
const res = await udhold.clipboard.getHistory(1, 20)
if (res.code !== 0) {
  console.error('调用失败：', res.msg)   // 403 → 检查 permissions 声明
} else {
  console.log('历史条目：', res.data)
}

udhold.plugin.onMounted((action) => {
  // action.code：命中的 feature 标识（缺省 'main'）
  // action.payload：启动参数（即 router.push 的 query）
  // action.from：唤起来源 main / panel / hotkey / redirect / workflow / api
  if (action.code === 'convert') {
    const input = action.payload?.text ?? ''
    // ...
  }
})

const off = udhold.plugin.onBeforeUnmount(() => {
  clearInterval(timer)
})