create-ax-trusted-plugin 1.0.10 → 1.0.12

package/README.md

@@ -1,7 +1,7 @@
 # create-ax-trusted-plugin
 
 可信(internal)插件**脚手架**:一条命令生成一个基于 `@ax-npm/host-trusted-sdk-v4` 的可信插件骨架
-(默认「形态一」:ESM 直出 `activate` + 自带 Vue + 自定义元素面板 + 调 `map.flyTo` + 遥测订阅;
+(ESM 直出 `activate` + 自带 Vue + 自定义元素面板 + 调 `map.flyTo` + 遥测订阅;
 dev 走裸 `vite`,原生 sourcemap、无构建步)。
 
 > 脚手架本身已发**公网 npm**,生成这步**零配置**;生成出的工程才走私有源(`192.168.1.209` GitLab)拉
@@ -38,7 +38,7 @@ npm run dev
 
 ## 生成内容
 `template/` 经占位替换(`__ID__`/`__TITLE__`/`__ANCHOR__`)后落地:`src/{index.ts,Panel.vue,state.ts}`、
-`manifest.json`(trust:internal、entry:main.js)、`vite.config.ts`(形态一 lib 构建 + dev 市场源桥)、
+`manifest.json`(trust:internal、entry:main.js)、`vite.config.ts`(一行调 `trustedPluginConfig` 预设)、
 `package.json`、`tsconfig.json`、`.npmrc`、`.gitignore`、`README.md`。
 
 ## 发布(维护者)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-ax-trusted-plugin",
-  "version": "1.0.10",
-  "description": "可信(internal)插件脚手架:一条命令生成一个基于 @ax-npm/host-trusted-sdk-v4 的可信插件骨架(默认形态一:ESM 直出 activate + 自带 Vue,dev 裸 vite 原生 sourcemap)。用法:npm create ax-trusted-plugin <id>。生成器本身无机密,公网可装;生成出的工程仍走私有源拉 @ax-npm/* 依赖。",
+  "version": "1.0.12",
+  "description": "可信(internal)插件脚手架:一条命令生成一个基于 @ax-npm/host-trusted-sdk-v4 的可信插件骨架(ESM 直出 activate + 自带 Vue,dev 裸 vite 原生 sourcemap)。用法:npm create ax-trusted-plugin <id>。生成器本身无机密,公网可装;生成出的工程仍走私有源拉 @ax-npm/* 依赖。",
   "type": "module",
   "license": "MIT",
   "keywords": [

package/template/README.md

@@ -1,7 +1,7 @@
 # __ID__
 
-可信(internal)插件「形态一」:模块直接 `export activate`,壳 `import` 即用;进程内拿完整 `ctx`。
-Vue 打进本插件 bundle(与宿主/其它插件隔离)。由 `create-ax-trusted-plugin` 脚手架生成。
+可信(internal)插件:模块直接 `export activate`(ESM 直出),壳 `import` 即用;进程内拿完整 `ctx`。
+Vue 打进本插件 bundle(经 Shadow DOM 自包含、与宿主/其它插件隔离)。由 `create-ax-trusted-plugin` 脚手架生成。
 
 ## 开发
 ```bash
@@ -13,8 +13,8 @@ npm run dev   # concurrently: vite(:5174,市场源) + host-dev 真宿主(:5173)
 ```
 浏览器打开 `http://localhost:5173`,锚点出现「__TITLE__」面板。**改代码 → 刷新浏览器即生效**(原生 sourcemap)。
 
-> dev 走裸 `vite`:`vite.config.ts` 的 `hostSourceBridge` 把单插件服务伪装成市场源,
-> `/<id>/main.js` 实时转译 `src/index.ts`。多插件并行各自 `vite --port 5175/5176/…`。
+> dev 走裸 `vite`:`vite.config.ts` 一行调 `trustedPluginConfig` 预设,内含的市场源桥把单插件服务伪装成市场源,
+> `/<id>/main.js` 实时转译 `src/index.ts`。多插件并行用 `trustedPluginConfig({ port: 5175 })`。
 
 ## 构建 / 上架
 ```bash
@@ -24,10 +24,7 @@ npm run build   # → dist/main.js(+ main.js.map)
 
 ## 关键约定
 - 入口 `src/index.ts` 必须 `export function activate(ctx)`(可选 `elementTag`/`deactivate`);`manifest.entry`=`main.js`。
-- `vue({customElement:true})` 把样式注入 shadow root;Vue 自带打包,不与宿主共享。
+- 预设的 `vue({customElement:true})` 把样式注入 shadow root;Vue 自带打包,不与宿主共享。
+- 静态资源:直接 `import x from './x.png'`(无需 `?inline`),预设保证 dev/build 都内联成 data URI(可信插件跑在宿主 origin,普通 URL 会裂图);大图用 `new URL('./big.png', import.meta.url).href`。
 - 提供能力须命名空间化(`__ID__/...`)且在 `contributes.capabilities` 声明;消费(含**调自己提供的能力**)须在 `uses.capabilities` 声明——contributes 与 uses 是两道独立门,`execute` 一律过 uses 闸。
 - 插件间不互相 import,只走 `ctx.commands` / `ctx.events`。
-
-> 需要多个可信插件**共享单例** Vue / 跨边界共享响应式 store,或要省 Vue 体积时,才回退「形态二」
-> (Module Federation):`vite.config` 改用 `@originjs/vite-plugin-federation`、`manifest` 加 `mfExpose`、
-> dev 走 `vite build --watch` + 静态托管。详见 `@ax-npm/host-trusted-sdk-v4` 的 README 与《三角色开发方法.md》。

package/template/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
-  "description": "可信(internal)插件「形态一」:ESM 直出 activate,壳 import 即用、Vue 自带打包(隔离)、拿完整 ctx。dev 走裸 vite(原生 sourcemap、无构建步)。只依赖 @ax-npm/host-trusted-sdk-v4。",
+  "description": "可信(internal)插件",
   "scripts": {
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite",
@@ -12,11 +12,14 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@ax-npm/host-trusted-sdk-v4": "^1.0.5",
-    "vue": "^3.4.0"
+    "@ax-npm/host-trusted-sdk-v4": "^1.0.12",
+    "@ax-npm/common-v4": "^1.0.0",
+    "@ax-npm/capability-kit-v4": "^1.0.9",
+    "vue": "^3.5.0",
+    "vue-i18n": "^11"
   },
   "devDependencies": {
-    "@ax-npm/host-dev-v4": "^1.0.7",
+    "@ax-npm/host-dev-v4": "^1.0.15",
     "@vitejs/plugin-vue": "^5.0.0",
     "concurrently": "^9.0.0",
     "electron": "^39.0.0",

package/template/src/Panel.vue

@@ -3,12 +3,6 @@
 // 能力接线在 activate(ctx) 里完成,经 window 事件桥回(自定义元素拿不到 ctx)。
 import { state } from './state';
 
-function ping() {
-  window.dispatchEvent(new CustomEvent('__ID__:ping'));
-}
-function flyTo() {
-  window.dispatchEvent(new CustomEvent('__ID__:flyto'));
-}
 </script>
 
 <template>
@@ -16,22 +10,12 @@ function flyTo() {
     <div class="title">__TITLE__</div>
     <p class="hint">可信插件</p>
 
-    <div class="row">
-      <button @click="ping">调用自有能力 ping</button>
-      <span class="val">{{ state.lastPing || '—' }}</span>
-    </div>
-
-    <div class="row">
-      <button @click="flyTo">map.flyTo 北京</button>
-      <span class="val">{{ state.flyToNote || '—' }}</span>
-    </div>
-
     <div class="tele">
-      <div class="tele-h">遥测 telemetry:fcs.basic</div>
+      <div class="tele-h">遥测</div>
       <div v-if="state.telemetry" class="tele-b">
-        lon {{ state.telemetry.lng ?? '—' }} ·
-        lat {{ state.telemetry.lat ?? '—' }} ·
-        alt {{ state.telemetry.alt ?? '—' }}
+        lon {{ state.tele.pos_lon ?? '—' }} ·
+        lat {{ state.tele.pos_lat ?? '—' }} ·
+        alt {{ state.tele.pos_alt ?? '—' }}
       </div>
       <div v-else class="tele-b muted">等待遥测…</div>
     </div>

package/template/src/i18n.ts

@@ -0,0 +1,19 @@
+import { createI18n } from 'vue-i18n';
+import zhCN from './locales/zh-CN';
+import enUS from './locales/en-US';
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: 'zh-CN',
+  fallbackLocale: 'zh-CN',
+  missingWarn: false,
+  fallbackWarn: false,
+  messages: {
+    'zh-CN': zhCN,
+    'en-US': enUS,
+  },
+})
+
+export function setLocale(lang: string) {
+  i18n.global.locale.value = lang as typeof i18n.global.locale.value
+}

package/template/src/index.ts

@@ -1,36 +1,41 @@
-// 可信插件入口「形态一」:本模块直接导出 activate/elementTag(manifest.entry → main.js)。
-// 宿主 loader `import(url)` 命中「直出 activate」分支,调 activate(ctx),据 elementTag +
-// manifest.component 挂自定义元素。(业务代码与形态二一致,只差打包/加载方式。)
-import { definePluginElement, type PluginCtx } from '@ax-npm/host-trusted-sdk-v4';
+// 可信插件入口:本模块直接导出 activate/elementTag(manifest.entry → main.js)。
+// 宿主 loader `import(url)` 调 activate(ctx),据 elementTag + manifest.component 挂自定义元素。
 import Panel from './Panel.vue';
-import { state, type FcsBasic } from './state';
+import { state } from './state';
+import { i18n, setLocale } from './i18n'
+import * as fcs from '@ax-npm/common-v4/fcs';
+import { FCS_EVENTS, STAGE_EVENTS } from '@ax-npm/capability-kit-v4';
+import { definePluginElement, type PluginCtx } from '@ax-npm/host-trusted-sdk-v4';
 
-export const elementTag = definePluginElement(Panel, { tag: 'plugin-__ID__' });
+export const elementTag = definePluginElement(
+  Panel, 
+  { 
+    tag: 'plugin-__ID__',    
+    configureApp: (app) => app.use(i18n),
+  }
+);
 
 export function activate(ctx: PluginCtx) {
-  // ① 提供能力:id 须命名空间化 + 在 manifest.contributes.capabilities 声明。
-  //    注意:contributes(提供)与 uses(调用)是两道独立门——execute 走 uses 闸,**调自己
-  //    register 的能力也要在 manifest.uses.capabilities 声明**(见下方 ③ 的 __ID__/ping)。
-  ctx.commands.register('__ID__/ping', async () => 'pong @ ' + new Date().toLocaleTimeString());
 
-  // ② 订阅宿主遥测(广播)。
-  ctx.events.on('telemetry:fcs.basic', (p) => {
-    state.telemetry = p as FcsBasic;
-  });
+  // 多语言切换
+  ctx.events.on(STAGE_EVENTS.LOCALE_CHANGED, (p) => {
+    console.log(p.lang)
+    setLocale(p.lang)
+  })
+
+  // 订阅宿主遥测(广播)
+  ctx.events.on(FCS_EVENTS.BASIC, (p) => {
+    console.log(p)    
+    state.tele = p;
+  });  
+  // 订阅飞机属性信息
+  ctx.events.on(FCS_EVENTS.INFO, (p) => {
+    console.log(p)
+    state.aircraftInfo = p
+  })  
 
-  // ③ Panel 是自定义元素,拿不到 ctx;经 window 事件把用户动作桥回 activate 作用域。
-  window.addEventListener('__ID__:ping', async () => {
-    state.lastPing = String(await ctx.commands.execute('__ID__/ping'));
-  });
-  window.addEventListener('__ID__:flyto', async () => {
-    try {
-      // 调宿主地图能力(需在 manifest.uses.capabilities 声明 map.flyTo)。
-      await ctx.commands.execute('map.flyTo', 116.397, 39.908);
-      state.flyToNote = '已飞至北京';
-    } catch (e) {
-      state.flyToNote = '失败:' + (e instanceof Error ? e.message : String(e));
-    }
-  });
+  // 类似c++的头文件定义，从common-v4中导出
+  console.log(fcs.PT_FCS_MR);
 
   return {
     elementTag,

package/template/src/locales/en-US.tx

@@ -0,0 +1,5 @@
+const messages: Record<string, string> = {
+  "TEST": "TEST"
+};
+
+export default messages;

package/template/src/locales/zh-CN.ts

@@ -0,0 +1,5 @@
+const messages: Record<string, string> = {
+  "TEST": "测试"
+};
+
+export default messages;

package/template/src/state.ts

@@ -1,16 +1,23 @@
-// activate(ctx) 与 Panel 自定义元素之间的共享响应式状态。
-// 二者 import 同一模块 → 同一宿主 vue reactive(MF 共享,单例),activate 更新即触发 Panel 重渲染。
-import { reactive } from 'vue';
-
-export interface FcsBasic {
-  lng?: number;
-  lat?: number;
-  alt?: number;
-  [k: string]: unknown;
-}
-
-export const state = reactive({
-  lastPing: '',
-  telemetry: null as FcsBasic | null,
-  flyToNote: '',
-});
+// activate(ctx) 与 Panel 自定义元素之间的共享响应式状态。
+// 二者 import 同一模块 → 插件自带的同一份 vue reactive(单例),activate 更新即触发 Panel 重渲染。
+import { 
+  FcsBasicTelemetry, 
+  FcsModeTelemetry, 
+  FcsNavposTelemetry,
+  AircraftInfo 
+} from '@ax-npm/capability-kit-v4';
+import { reactive } from 'vue';
+
+export interface FcsBasic {
+  lng?: number;
+  lat?: number;
+  alt?: number;
+  [k: string]: unknown;
+}
+
+export const state = reactive({
+  tele: null as FcsBasicTelemetry | null,  
+  mode: null as FcsModeTelemetry | null,
+  navPos: null as FcsNavposTelemetry | null,
+  aircraftInfo: null as AircraftInfo | null,
+});

package/template/vite.config.ts

@@ -1,86 +1,7 @@
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import { fileURLToPath, URL } from 'node:url';
-import { readFileSync } from 'node:fs';
+// 可信插件「形态一」(ESM 直出 activate)构建 —— 全套配置收口在 SDK 预设里:
+// Vue 自定义元素编译、dev 市场源桥、dev 资源内联(使 asset 朴素 import 在 dev/build 一致)、
+// lib 单文件产物、process.env 替换。详见 @ax-npm/host-trusted-sdk-v4/vite。
+// 多插件并行调试时:trustedPluginConfig({ port: 5175 })。
+import { trustedPluginConfig } from '@ax-npm/host-trusted-sdk-v4/vite';
 
-// 可信插件「形态一」(ESM 直出 activate)构建。与「形态二」(Module Federation 容器)对比:
-// - 形态一:本模块 import(url) 后**直接导出 activate/elementTag**,壳 loader 命中直出分支。
-//   Vue 打进 bundle(自带依赖,与宿主/其它插件隔离 —— 宿主升级 Vue 波及不到本插件)。
-// - 形态二:打成 federation remoteEntry,运行时与宿主**共享单例** Vue/Pinia。
-// 只经 ctx 交互的内部插件用形态一**功能零损失**,且换来:dev 走裸 `vite`(实时转译、原生
-// sourcemap、无构建步),build 产单文件 `main.js`。仅当需要跨边界共享响应式 store / 省体积
-// 到单份 Vue 时才回退形态二(见 README 与《三角色开发方法.md》)。
-//
-// vue({ customElement: true }):SFC 以自定义元素模式编译,样式自动注入 shadow root,
-// 故无独立 CSS 产物,单个 main.js 即完整插件。
-
-const MANIFEST = JSON.parse(
-  readFileSync(fileURLToPath(new URL('./manifest.json', import.meta.url)), 'utf-8'),
-) as { id: string };
-const PLUGIN_ID = MANIFEST.id;
-
-// —— dev 桥:让「单插件 vite 服务」对外长得像宿主的插件市场源 ——
-// 宿主(LocalRegistry)会请求 /plugins.json、/<id>/manifest.json、/<id>/<entry>。
-// 这里:① /plugins.json = [{ id }];② 把 /<id>/* 重写回 /*(插件本体在根目录);
-//        ③ manifest.entry 是 `main.js`(生产构建产物),dev 无此产物 → 把对它的请求
-//           顶替为 `src/index.ts`,由 vite 实时转译(原生 sourcemap、无构建步)。
-// 这样单跑 `vite` 即可被 harness/host-dev 当市场源加载,改代码刷新即生效。
-function hostSourceBridge() {
-  return {
-    name: 'host-source-bridge',
-    configureServer(server: {
-      middlewares: { use: (fn: (req: any, res: any, next: () => void) => void) => void };
-    }) {
-      server.middlewares.use((req, res, next) => {
-        const url = (req.url || '').split('?')[0];
-        if (url === '/plugins.json') {
-          res.setHeader('content-type', 'application/json');
-          res.setHeader('access-control-allow-origin', '*');
-          res.end(JSON.stringify([{ id: PLUGIN_ID }]));
-          return;
-        }
-        // /<id>/xxx → /xxx(去掉宿主加的 id 前缀)
-        if (req.url === `/${PLUGIN_ID}` || req.url === `/${PLUGIN_ID}/`) {
-          req.url = '/';
-        } else if (req.url && req.url.startsWith(`/${PLUGIN_ID}/`)) {
-          req.url = req.url.slice(PLUGIN_ID.length + 1);
-        }
-        // 形态一 dev:把 main.js 入口请求顶替为可实时转译的源文件。
-        if ((req.url || '').split('?')[0] === '/main.js') req.url = '/src/index.ts';
-        next();
-      });
-    },
-  };
-}
-
-export default defineConfig({
-  // 形态一 build 产物在真宿主(无 Node process)运行:替换 Vue 的 process.env.NODE_ENV,
-  // 否则运行时报 ReferenceError: process is not defined。dev 模式 vite 本就注入,加此无副作用。
-  define: { 'process.env.NODE_ENV': JSON.stringify('production') },
-  plugins: [vue({ customElement: true }), hostSourceBridge()],
-  server: {
-    // 活跃集多插件并行时用 `vite --port 5175/5176/…` 覆盖,一份多源 plugins.json 列各端口。
-    port: 5174,
-    strictPort: true,
-    // 宿主(:5180 / app://)跨源拉清单/manifest/入口模块,需放开 CORS。
-    cors: { origin: '*' },
-  },
-  build: {
-    target: 'esnext',
-    outDir: 'dist',
-    emptyOutDir: true,
-    // 源码级调试可信插件产物:留 sourcemap、不混淆。
-    sourcemap: true,
-    minify: false,
-    // library 模式:入口导出(activate/elementTag/deactivate)即模块导出,壳 import(url) 直出。
-    lib: {
-      entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
-      formats: ['es'],
-      fileName: () => 'main.js',
-    },
-    rollupOptions: {
-      // 保住入口导出签名,别被当可执行 chunk 摇掉 activate。
-      preserveEntrySignatures: 'strict',
-    },
-  },
-});
+export default trustedPluginConfig();