项目工作区

项目工作区让插件在右侧主工作区同时显示一块内容：左侧是插件路由页（列表），右侧是工作区（画布、详情）。它是 project.sidebar-actions 的可选方法 renderWorkspace，不是独立扩展点。

fh2-plugin-sdk 是插件开发 SDK；下文模块名用于说明，实际导入路径保留生成工程配置。模块名不表示已发布的 npm 包名。

项	值
所属扩展点	`project.sidebar-actions`
可选字段	`renderWorkspace(): ViewHandle`
界面位置	项目页右侧主工作区

规则：

render() 始终必填（左侧路由页）；renderWorkspace() 可省略。

提供后，同一插件路由激活期间，左右两块同时存在、独立挂载和释放。

目标平台版本需支持项目工作区；宿主未提供工作区容器时，右侧不显示，左侧页面仍可用。

可照抄示例

清单仍只声明一个扩展：

fh2-plugin.json（节选）：

{
  "permissions": ["project:context"],
  "extensions": [
    {
      "id": "asset-review",
      "point": "project.sidebar-actions",
      "path": "/asset-review",
      "position": 3
    }
  ],
  "views": {
    "asset-list": { "entry": "./views/asset-list.js" },
    "asset-canvas": { "entry": "./views/asset-canvas.js" }
  },
  "contributes": {
    "icons": [
      { "id": "asset-review", "src": "./static/icons/asset-review.svg" }
    ]
  }
}

// plugin.ts
import { createViewState, definePluginView } from 'fh2-plugin-sdk'

interface ReviewContract {
  state: { selectedAssetId: string | null }
  methods: { select(input: { assetId: string }): void }
}
const assetList = definePluginView<ReviewContract>('asset-list')
const assetCanvas = definePluginView<ReviewContract>('asset-canvas')

export async function activateProject (ctx) {
  const state = createViewState<ReviewContract['state']>({ selectedAssetId: null })
  const provider = {
    state,
    methods: {
      select: ({ assetId }: { assetId: string }) => {
        state.update(() => ({ selectedAssetId: assetId }))
      },
    },
  }
  await assetList.handle(ctx, provider)
  await assetCanvas.handle(ctx, provider)

  await ctx.extensions.contribute('asset-review', {
    icon: 'asset-review',
    label: '资产复核',
    disabled: false,
    showBadge: false,
    render: () => assetList.get(ctx),
    renderWorkspace: () => assetCanvas.get(ctx),
  })
}

生命周期

插件路由激活且 renderWorkspace 是函数时，右侧开始挂载；宿主重新挂载后，满足路由与扩展条件时会恢复显示。

右侧界面直接挂到最终容器，不会移动已挂载的 DOM。

路由离开、扩展消失或右侧容器卸载时，界面被释放。

快速切换路由时，迟到的挂载会立即被丢弃，不会残留。

限制

同一时间只有一个工作区：后激活的路由替换前一个，不支持同屏多个工作区。

工作区铺满右侧容器，层级由宿主控制，插件不能指定 z-index。

工作区只随侧边栏路由激活，不支持没有入口的常驻页面。

renderWorkspace 是方法，不能通过 contribution.update() 动态增删。

左右两个界面通过入口代码里的共享状态（或跨宿主通信服务）协调，不能直接访问对方 DOM。

常见问题

现象	原因与处理
右侧不出现	`renderWorkspace` 未提供，或目标平台版本/宿主未提供工作区容器（静默降级，左侧仍可用）
左右状态不同步	两块界面是独立挂载的；用共享状态或跨宿主通信服务同步，别指望共享 DOM
快速切路由出现重复内容	宿主已处理迟到挂载；确认自己没有在业务里重复 `contribute`
工作区内容变形	工作区是 100% 宽高自适应，不要依赖固定尺寸

可照抄示例#

生命周期#

限制#

常见问题#

可照抄示例

生命周期

限制

常见问题