@specificlab/ui NPM

@specificlab/ui

A Vue 3 UI component library based on TailwindCSS.

Installation

# npm
npm install @specificlab/ui

# pnpm
pnpm add @specificlab/ui

# yarn
yarn add @specificlab/ui

Usage

Global Registration

import { createApp } from 'vue'
import SpecificUI from '@specificlab/ui'
import '@specificlab/ui/dist/style.css'

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

On-Demand Import

// 1. Import component
import { AgentBoard } from '@specificlab/ui'
import '@specificlab/ui/dist/style.css'

// 2. Register in your component
export default {
  components: {
    [AgentBoard.name]: AgentBoard
  }
}

Or in setup script:

<script setup lang="ts">
import { AgentBoard } from '@specificlab/ui'
import '@specificlab/ui/dist/style.css'
</script>

<template>
  <agent-board
    title="Agent Name"
    status="INACTIVE"
  />
</template>

Components

AgentBoard

A card component for displaying AI agent status and controls.

Props

Name	Type	Default	Description
title	string	'Agent Alpha'	Agent name
status	'INACTIVE' \| 'RUNNING' \| 'STOPPED' \| 'ERROR'	'INACTIVE'	Agent status
description	string	'An AI agent...'	Agent description
progress	number	0	Progress percentage
currentStep	number	1	Current step
totalSteps	number	4	Total steps

Events

Name	Parameters	Description
start	-	Emitted when start button clicked
view	-	Emitted when view button clicked

Slots

Name	Description
avatar	Custom avatar content

AgentStepTimeline Slots

Name	Props	Description
timeline	steps	整个时间线的自定义渲染
indicator	step, isLast	步骤指示器的自定义渲染
dot	step	步骤圆点的自定义渲染
completed-icon	-	完成状态图标
processing-icon	-	处理中状态图标
pending-icon	-	待处理状态图标
line	step, isLast	连接线的自定义渲染
header	step	步骤头部的自定义渲染
title	step	步骤标题的自定义渲染
status	step	步骤状态的自定义渲染
details	step, content	步骤详情的自定义渲染
content-title	content	内容标题的自定义渲染
content	step, content	步骤内容的自定义渲染

AgentDetailLayout

The layout component requires a parent container with a defined height. Example:

<div style="height: 100vh;">
  <agent-detail-layout>
    <!-- content -->
  </agent-detail-layout>
</div>

Or using CSS:

.parent-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

AgentCompletedCard

Slots

Name	Props	Description
avatar	-	自定义头像内容
name	name	自定义名称内容
tag	type	自定义标签内容
summary	summary	自定义摘要内容

Customization

You can customize the theme when installing:

app.use(SpecificUI, {
  theme: {
    AgentBoard: {
      // Custom theme options
      inactiveGradientStart: '#93a8ff',
      inactiveGradientEnd: '#7490ff'
    }
  }
})