yc-component

天幕低代码 Vue 3 组件库，基于 Element Plus + Pinia。

仓库：https://gitee.com/dai_xiang_tian/yc-component

安装

npm install yc-component

本地开发可 npm install file:../yc-component 或 link。

Peer 依赖（需自行安装，不会打进包内）：vue、pinia、element-plus、@element-plus/icons-vue、axios

按需导入（推荐，轻量）

发布产物为 ES Module + preserveModules，未使用的模块不会打进业务包。

// 仅 AI 任务
import { YcAiTaskProvider, useAiTask } from 'yc-component/ai-task'
import 'yc-component/ai-task/style.css'

// 仅 PageWindow
import { YcPageWindow } from 'yc-component/page-window'
import 'yc-component/page-window/style.css'

// 仅安装配置
import { installYcComponent } from 'yc-component/plugin'

也可从主入口全量导入（兼容旧写法，Tree-shaking 依赖打包工具）：

import { YcAiTaskProvider, YcPageWindow, installYcComponent } from 'yc-component'

发布到 npm

cd yc-component
npm run build          # 输出 dist/（仅发布 dist，不含 src）
npm pack               # 本地预览包内容
npm login              # 首次需登录 npm
npm publish            # prepublishOnly 会自动 build

files 字段仅包含 dist、README.md，体积约 ~50KB（gzip 后更小），依赖均为 peerDependencies。

快速开始（sky-ai / 任意 Vue3 项目）

// main.ts —— 最简接入，无需 Token / 白名单判断
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { installYcComponent } from 'yc-component'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.use(ElementPlus)
installYcComponent({
  aiTask: {
    projectId: 'default-project',
    storageKey: 'my-ai-task-queue',
  },
})
app.mount('#app')

鉴权由 yc_ai_service 处理：请求会带上浏览器 Origin，后端按「域名白名单」决定是否允许无 Token 调用提示词/工作流。在 sky-ai 控制台可配置白名单。

管理端（需登录访问全部 API）可额外传入 getToken / onUnauthorized：

installYcComponent({
  aiTask: {
    projectId: 'default-project',
    getToken: () => localStorage.getItem('admin_token'),
    onUnauthorized: () => router.push('/login'),
  },
})

<!-- App.vue -->
<template>
  <router-view />
  <YcAiTaskProvider
    title="AI 项目 JSON 生成"
    :prompt-id="1"
    :auto-match="false"
    :free-text="'生成一个登录页…'"
    @finish="onAiFinish"
  />
</template>

<script setup lang="ts">
import { YcAiTaskProvider, type AiTaskFinishPayload } from 'yc-component'

function onAiFinish(data: AiTaskFinishPayload) {
  console.log('任务完成', data.runId, data.result)
}
</script>

AI 任务组件 API

挂载 Provider

全局挂载一次 YcAiTaskProvider（或 AiTaskProvider），包含弹窗 + 任务面板。

重要：useAiTask() 必须在 Provider 的子组件内调用（可用默认插槽包裹页面），否则无法打开弹窗。

弹窗 Props（Provider / AiUseDialog 均支持）

| Prop | 说明 | 默认 | |------|------|------| | title | 弹窗标题 | AI 生成 | | freeText | 默认需求描述 | '' | | promptId | 提示词 ID（弹窗不展示选择器时由 props 传入） | - | | autoMatch | 是否按需求自动匹配提示词 | false（手动指定） | | prompts | 提示词列表（传入后不请求接口） | - | | showAutoMatch | 是否显示自动匹配开关 | false | | showPromptSelect | 是否显示提示词下拉 | false | | autoMatchLabel | 自动匹配区域标签 | 自动匹配提示词 | | promptLabel | 提示词字段标签 | 提示词 | | freeTextLabel | 需求描述标签 | 需求描述 | | freeTextPlaceholder | 需求描述占位符 | - | | submitText | 提交按钮文案 | 发送 | | showTaskListButton | 是否显示「查看 AI 任务」按钮 | true | | taskListButtonText | 查看任务按钮文案 | 查看 AI 任务 | | width | 弹窗宽度 | 520px | | v-model / modelValue | 受控显示（单独用 AiUseDialog 时） | store 模式 |

openUseDialog({ title, promptId, autoMatch, ... }) 会在本次打开时覆盖上述 Props。

| 事件 | 说明 | |------|------| | @finish | 任务成功完成，data.result 为工作流产物 |

composable

import { useAiTask } from 'yc-component'

const ai = useAiTask()

// 打开弹窗
ai.openUseDialog({
  title: 'AI 项目 JSON 生成',
  freeText: '生成登录页…',
  onFinish: (data) => { /* ... */ },
})

// 直接提交
ai.submitTask({
  freeText: '生成登录页…',
  promptId: 1,
  onFinish: (data) => { /* ... */ },
})

ai.openTaskPanel()
ai.onTaskFinish((data) => { /* 全局监听 */ })

配置项 YcAiTaskConfig

| 字段 | 说明 | 默认 | |------|------|------| | projectId | 工作流 projectId | default-project | | storageKey | localStorage 键 | yc-ai-task-queue-v1 | | baseURL | API 根路径 | 空（相对路径） | | getToken | 可选，Bearer Token | 不传（由后端白名单鉴权） | | onUnauthorized | 401 回调 | - | | listPrompts | 自定义提示词加载 | GET /yc-ai/ai/prompts |

本地演示（推荐先体验）

npm install
npm run demo

浏览器打开 http://localhost:5180：

• 默认 Mock API，无需启动后端，约 5 秒模拟任务完成
• 可测试：弹窗提交、任务面板、刷新恢复、@finish 回调

连接真实 yc_ai_service：

npm run demo:real

需保证 http://localhost:8083 可访问。

开发

npm run build   # 输出 dist/
npm run dev     # watch 模式构建

组件列表

| 组件 | 说明 | |------|------| | YcAiTaskProvider | 弹窗 + 任务面板（推荐全局挂载） | | YcAiUseDialog | 仅弹窗 | | YcAiTaskPanel | 仅任务列表面板 |

License

MIT