@swdg/spotlight

Vue 3 Spotlight 指令面板插件，支持：

• Ctrl/Cmd + K 呼出面板
• 历史问题记录与上下键选择
• 长按 Tab 进入语音录入（可选）
• 可注入业务 submit 逻辑与步骤状态（thinking bar）

安装

pnpm add @swdg/spotlight

最小使用示例

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { createSpotlightPlugin } from "@swdg/spotlight";

const spotlight = createSpotlightPlugin({
  async submit(prompt, api) {
    api.setSteps([
      { id: "1", label: "解析问题", status: "active" },
      { id: "2", label: "执行动作", status: "pending" },
    ]);
    api.setStep("1", "done", `问题：${prompt}`);
    api.setStep("2", "active");
    await new Promise((resolve) => setTimeout(resolve, 600));
    api.setStep("2", "done", "执行完成");
  },
});

createApp(App).use(spotlight).mount("#app");

<!-- App.vue -->
<template>
  <router-view />
  <SpotlightPanel />
</template>

可选语音能力

给 createSpotlightPlugin 传入 startVoice：

startVoice: async (handlers) => {
  handlers.onState(true);
  handlers.onInterim("正在听你说...");

  return {
    stop: async () => {
      handlers.onFinal("这是语音识别结果");
      handlers.onState(false);
    },
  };
};

发布到 npm

在 packages/spotlight 目录执行：

pnpm install
pnpm build
npm login
npm publish --access public

首次发布 scoped 包必须带 --access public。

本地测试

在仓库根目录执行：

pnpm dev:spotlight

打开 http://localhost:5176/，按 Ctrl/Cmd + K 验证面板行为。