驾驶舱动作与左侧面板

{
  "id": "exp_minimal",
  "name": "最小示例",
  "version": "0.1.0",
  "entry": "./plugin.js",
  "permissions": ["platform:storage"],
  "extensions": [
    { "id": "open-minimal-panel", "point": "cockpit.ui.toolbar-actions" },
    { "id": "minimal-panel", "point": "cockpit.ui.left-panel" }
  ],
  "contributes": {
    "icons": [{ "id": "plugin", "src": "./icons/plugin.svg" }]
  },
  "views": {
    "minimal-panel": { "entry": "./views/minimal-panel.js" }
  }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2563eb" d="M4 4h16v16H4z"/></svg>

// src/plugin.ts
import { createViewState, definePlugin } from 'fh2-plugin-sdk'
import type { AppCockpitContext } from './generated/plugin-types'
import { minimalPanelView } from './views/minimal-panel/contract'

export default definePlugin({
  async activate (rawCtx) {
    if (rawCtx.host.id !== 'cockpit')
      return
    const ctx = rawCtx as AppCockpitContext

    // 图标 Blob：写入一次，之后直接取受管 URL
    let logo = await ctx.blobs.get('minimal-logo')
    if (!logo) {
      logo = new Blob([
        '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">'
        + '<rect width="64" height="64" rx="12" fill="#2563eb"/>'
        + '<text x="32" y="38" text-anchor="middle" font-size="20" fill="white">FH2</text>'
        + '</svg>',
      ], { type: 'image/svg+xml' })
      await ctx.blobs.put('minimal-logo', logo)
    }
    const blobUrl = (await ctx.blobs.url('minimal-logo')) ?? ''

    // 注册界面会话：这里用 handle 的工厂形态——
    // get(ctx, initialState) 传入的初始状态会作为工厂函数的入参，用于按内容创建状态
    await minimalPanelView.handle(ctx, initialState => ({
      state: createViewState(initialState),
      methods: {},
    }))
    // 常规场景（状态固定、不按实例区分）直接用对象形态：
    // await minimalPanelView.handle(ctx, { state: createViewState(...), methods: {...} })
    // 两种形态的说明见「界面与状态」一页。

    // 左侧面板：初始隐藏，等待 reveal()
    const panel = await ctx.extensions.contribute('minimal-panel', {
      visible: false,
      label: '最小示例',
      icon: 'plugin', // 图标 ID 需在清单 contributes.icons 声明
      render: () => minimalPanelView.get(ctx, { blobUrl }),
    })

    // 工具栏按钮：点击打开面板
    await ctx.extensions.contribute('open-minimal-panel', {
      icon: 'plugin', // 图标 ID 需在清单 contributes.icons 声明
      label: '最小示例',
      active: false,
      disabled: false,
      async onTrigger () {
        await panel.reveal()
      },
    })
  },
})

// src/views/minimal-panel/contract.ts
import { definePluginView } from 'fh2-plugin-sdk'

export interface MinimalPanelState {
  readonly blobUrl: string;
}

export const minimalPanelView = definePluginView<{
  state: MinimalPanelState;
  initialState: MinimalPanelState;
  methods: Record<string, never>;
}>('minimal-panel')

// src/views/minimal-panel/index.ts
import { createApp, reactive } from 'vue'
import { defineView } from 'fh2-plugin-sdk'
import { minimalPanelView } from './contract'
import MinimalPanelView from './MinimalPanelView.vue'

export default defineView({
  mount (ctx) {
    const state = reactive({ blobUrl: '', count: 0 })
    const client = minimalPanelView.client(ctx.port)
    const subscription = client.state.subscribe((next) => {
      state.blobUrl = next.blobUrl
    })
    const app = createApp(MinimalPanelView, { state })
    app.mount(ctx.mountElement)
    return {
      dispose: () => {
        subscription.dispose()
        client.dispose()
        app.unmount()
      },
    }
  },
})

<!-- src/views/minimal-panel/MinimalPanelView.vue -->
<script setup lang="ts">
import { reactive } from 'vue'

const props = defineProps<{ state: { blobUrl: string; count: number } }>()
const local = reactive({ count: 0 }) // 点击计数是界面局部状态，关闭后重置
</script>

<template>
  <div class="minimal-panel">
    <img v-if="props.state.blobUrl" :src="props.state.blobUrl" alt="logo" width="32">
    <h3>最小示例</h3>
    <button @click="local.count++">
      点击了 {{ local.count }} 次
    </button>
  </div>
</template>

import { describe, expect, it, vi } from 'vitest'
import type { PluginContext } from 'fh2-plugin-sdk'
import plugin from '../src/plugin'

const captured = vi.hoisted(() => ({ factory: undefined as any }))
vi.mock('../src/views/minimal-panel/contract', () => ({ minimalPanelView: {
  handle: async (_ctx: unknown, factory: unknown) => {
    captured.factory = factory
  },
  get: () => ({}),
} }))

describe('驾驶舱面板', () => {
  it('只注册一份面板，用 reveal 展示，并用受管 Blob URL', async () => {
    const reveal = vi.fn().mockResolvedValue(undefined)
    const contributions = new Map<string, any>()
    const contribute = vi.fn(async (id, value) => {
      contributions.set(id, value)
      return { reveal, dispose: vi.fn() }
    })
    const put = vi.fn().mockResolvedValue(undefined)
    await plugin.activate({ host: { id: 'cockpit' }, blobs: { get: vi.fn().mockResolvedValue(undefined), put, url: vi.fn().mockResolvedValue('blob:example') }, extensions: { contribute } } as unknown as PluginContext)
    expect(put).toHaveBeenCalledOnce()
    expect(contribute).toHaveBeenCalledTimes(2)
    await contributions.get('open-minimal-panel').onTrigger()
    expect(reveal).toHaveBeenCalledOnce()
    expect(captured.factory({ blobUrl: 'blob:example' }).state.get()).toEqual({ blobUrl: 'blob:example' })
  })
})