@duxi999/usdp-xjgz-conversation

AIGC: ContentProducer: '001191110102MAD55U9H0F10002' ContentPropagator: '001191110102MAD55U9H0F10002' Label: '1' ProduceID: '5aa6a920-96ea-48c9-8bec-0c843c9f4f62' PropagateID: '5aa6a920-96ea-48c9-8bec-0c843c9f4f62' ReservedCode1: 'f337fd8e-d741-4f30-9c11-2234bdc62525' ReservedCode2: 'f337fd8e-d741-4f30-9c11-2234bdc62525'

@duxi999/usdp-xjgz-conversation

政务信息化智能对话会话组件库。承载单个智能体会话的完整生命周期：环境启动/停止/重启/重建、iframe 加载监控、轮询与心跳保活。

特性

• 基于 Vue 3 + TypeScript + Element Plus
• 组件自包含：HTTP 请求对象（axios 封装）由宿主通过 request prop 注入，组件内部直接调用请求地址，不依赖任何宿主业务模块（store / api / utils）
• 状态机完备：not_exist / starting / running / start_failed / stopped / stopping
• iframe 加载监控：域名可达性探测（HEAD /test）、加载超时兜底、自动重试（最多 30 次）
• 轮询（2s × 30 次）与心跳（5 分钟）保活
• 环境数量超限弹窗（内置于 ConversationSession）自动拉取运行中环境并支持批量关闭后重试

安装

npm install @duxi999/usdp-xjgz-conversation

需要 peer 依赖：

npm install vue element-plus @element-plus/icons-vue

快速开始

ConversationSession 通过 request prop 接收一个由宿主应用提供的 HTTP 请求适配器（满足 RequestAdapter 接口，通常为 axios 封装）。

request 适配器

宿主需提供一个满足 RequestAdapter 接口的对象（get / post / put / delete），约定返回解包后的业务数据（Promise<T>）：

import axios from 'axios'
import type { AxiosResponse } from 'axios'
import type { RequestAdapter } from '@duxi999/usdp-xjgz-conversation'

const http = axios.create({ baseURL: '/api', timeout: 30000 })

// 响应拦截器：解包 { code, message, data } 为 data
http.interceptors.response.use(
  (response: AxiosResponse<{ code: number; message: string; data: any }>) => {
    const res = response.data
    if (res.code === 200) return res.data
    const error = new Error(res.message || '请求失败') as Error & { code: number }
    error.code = res.code
    return Promise.reject(error)
  },
  (error) => Promise.reject(error)
)

const request: RequestAdapter = {
  get: (url, params) => http.get(url, { params }),
  post: (url, data) => http.post(url, data),
  put: (url, data) => http.put(url, data),
  delete: (url, params) => http.delete(url, { params }),
}

注意：RequestAdapter 的 get 返回 Promise<T>（业务数据）。若直接传入原生 axios 实例，需注意其返回类型为 Promise<AxiosResponse<T>>，建议在封装层解包（如上拦截器）并做类型适配。

模板中使用

<template>
  <ConversationSession
    :request="request"
    :scene-type="'workspace'"
    :scene-id="'workspace-001'"
    :agent-id="123"
    @state-change="onStateChange"
  />
</template>

<script setup lang="ts">
import type { RequestAdapter } from '@duxi999/usdp-xjgz-conversation'

const request: RequestAdapter = /* 见上文 */

function onStateChange(e) {
  console.log(e.status, e.nickname, e.agentId)
}
</script>

Props

Events

Exposed 方法（通过 ref 获取）

start / stop / restart / rebuild / refresh / resolveAgentId

组件内部请求地址

组件自包含，请求地址直接在组件内部写死调用：

全局注册（可选）

组件库默认导出 Vue 插件，支持 app.use() 一次注册全部组件。注册名与包名一致（usdp-xjgz-conversation），模板中即可使用 <usdp-xjgz-conversation>：

import UsdpXjgzConversation from '@duxi999/usdp-xjgz-conversation'
app.use(UsdpXjgzConversation)

<template>
  <usdp-xjgz-conversation
    :request="request"
    :scene-type="'workspace'"
    :scene-id="'workspace-001'"
  />
</template>

全局注册同时注册了两种名字，均可使用：

• <usdp-xjgz-conversation>（kebab-case，与包名一致）
• <UsdpXjgzConversation>（PascalCase，Vue 推荐写法）

组件内部 defineOptions({ name: 'UsdpXjgzConversation' }) 也已设置组件名，DevTools 中显示为 UsdpXjgzConversation。

导出内容

• 组件：ConversationSession
• 类型：RequestAdapter、EnvironmentStatus、SceneType、EnvironmentParams、EnvironmentStatusResult、SessionInfoResult、RunningEnvironmentItem、BatchStopResult

开发

npm install          # 安装依赖
npm run dev          # 启动 demo 页（http://localhost:5174）
npm run type-check   # TS 类型检查
npm run build        # 构建 npm 包（产出 dist/）

发布

npm login
npm run build
npm publish --access public

包名：@duxi999/usdp-xjgz-conversation。发布前请确认包名未被占用且有权限。

AI生成