hydros-agent-list

Vue3 智能体列表管理组件，基于 Element Plus。提供列表展示、搜索、新建、详情等功能。

安装

npm install hydros-agent-list

依赖

• Vue 3
• Element Plus
• @element-plus/icons-vue

请确保项目中已安装上述依赖。

样式异常？ 若组件样式与预期不符，请确认已按下方示例引入 hydros-agent-list/style.css，且与 Element Plus 版本兼容（^2.0.0）。

使用

1. 全局注册

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'hydros-agent-list/style.css'  // 组件样式（必须引入）
import HydrosAgentList from 'hydros-agent-list'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(HydrosAgentList)
app.mount('#app')

2. 按需使用

<template>
  <AgentList
    :data="agentList"
    :total="total"
    @create="onCreate"
    @detail="onDetail"
    @submit="onSubmit"
  />
</template>

<script setup>
import { ref } from 'vue'
import 'hydros-agent-list/style.css'  // 组件样式（必须引入）
import { AgentList } from 'hydros-agent-list'

const agentList = ref([
  {
    code: 'AGT-001',
    type: 'Assistant',
    name: 'Customer Bot',
    status: 'running',
    group: 'Service',
    creator: 'Zhang San',
  },
])
const total = ref(24)

function onCreate() {
  console.log('新建')
}

function onDetail(row) {
  console.log('详情', row)
}

function onSubmit(data) {
  console.log('提交', data)
  // 调用 API 创建智能体
}
</script>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | data | Agent[] | [] | 列表数据 | | total | number | data.length | 总条数（分页用） |

Events

| 事件 | 参数 | 说明 | |------|------|------| | create | - | 点击新建按钮 | | detail | row: Agent | 点击详情 | | submit | data: AgentFormData | 提交新建表单 | | search | keyword: string | 搜索时触发 |

类型

interface Agent {
  code: string
  type: string
  name: string
  status: 'running' | 'stopped' | 'pending'
  group: string
  creator: string
  description?: string
}

interface AgentFormData {
  code: string
  type: string
  name: string
  description: string
}

发布到 npm（官方 registry.npmjs.org）

本仓库已在 package.json 中配置 publishConfig.registry 为 https://registry.npmjs.org/，执行 npm publish 时会发到 npm 官网，不会发到阿里云 / 淘宝等镜像源。

1. 登录 npm 官网 账号（在 npmjs.com 注册）：

   npm login --registry https://registry.npmjs.org/

2. 若包名 hydros-agent-list 已被占用，可在 package.json 中修改为作用域包，例如 @你的用户名/hydros-agent-list

3. 构建并发布：

   cd hydros-agent-list-pkg
   npm install
   npm run build
   npm publish

   若使用作用域包且首次发布，需加 --access public：

   npm publish --access public

若本机全局 registry 指向了镜像，仍想显式指定官网发布，可执行：

npm publish --registry https://registry.npmjs.org/

License

MIT