npm package: @specificlab/ui
Description: A Vue 3 UI component library based on tailwindcss
Author: your_name
Latest version: 0.0.31

# @specificlab/ui

A Vue 3 UI component library based on TailwindCSS.

## Installation

```bash
# npm
npm install @specificlab/ui

# pnpm
pnpm add @specificlab/ui

# yarn
yarn add @specificlab/ui
```

## Usage
  
### Global Registration
  
  ```typescript
  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
  
  ```typescript
  // 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:

  ```vue
  <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:

```html
<div style="height: 100vh;">
  <agent-detail-layout>
    <!-- content -->
  </agent-detail-layout>
</div>
```

Or using CSS:

```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:

```typescript
app.use(SpecificUI, {
  theme: {
    AgentBoard: {
      // Custom theme options
      inactiveGradientStart: '#93a8ff',
      inactiveGradientEnd: '#7490ff'
    }
  }
})
```

## License

MIT