# VTK 组件使用指南

本项目已全局注册所有 VTK 组件，可以在任何 `.vue` 文件中直接使用，无需手动导入。

## 🚀 快速开始

### 直接使用（推荐）

由于组件已全局注册，你可以直接在模板中使用：

```vue
<template>
  <div>
    <!-- 步骤条 -->
    <VtkStepper :list="['步骤1', '步骤2', '步骤3']" :el="1" />

    <!-- 选择器 -->
    <VtkSelect
      v-model="selectedValue"
      :items="options"
      label="请选择"
    />

    <!-- 日期选择器 -->
    <VtkDatePicker v-model="date" label="选择日期" />

    <!-- 搜索组件 -->
    <VtkSearch
      v-model="searchText"
      placeholder="搜索..."
      @search="handleSearch"
    />

    <!-- 分页组件 -->
    <VtkPage
      :total="100"
      :page-size="10"
      @change="handlePageChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectedValue = ref('')
const date = ref(null)
const searchText = ref('')

const options = [
  { title: '选项1', value: 1 },
  { title: '选项2', value: 2 },
  { title: '选项3', value: 3 }
]

const handleSearch = (keyword) => {
  console.log('搜索关键词:', keyword)
}

const handlePageChange = (page) => {
  console.log('当前页:', page)
}
</script>
```

## 📦 可用组件列表

### 表单组件
- **VtkSelect** - 下拉选择器（基于 v-select）
- **VtkDatePicker** - 日期选择器
- **VtkCheckbox** - 复选框组
- **VtkRadio** - 单选框组
- **VtkFormItem** - 表单项容器

### 布局组件
- **VtkArea** - 区域容器
- **VtkPage** - 分页组件
- **VtkEmpty** - 空状态展示

### 交互组件
- **VtkSearch** - 搜索框
- **VtkStepper** - 步骤条
- **VtkFab** - 浮动操作按钮
- **VtkCount** - 计数器

### 展示组件
- **VtkImg** - 图片展示
- **VtkPdf** - PDF 查看器
- **VtkProj** - 项目卡片

## 🔧 组件详细说明

### VtkStepper（步骤条）

```vue
<VtkStepper
  :list="['填写信息', '确认信息', '完成']"
  :el="currentStep"
  @change="handleStepChange"
/>
```

**Props:**
- `list` (Array): 步骤列表
- `el` (Number): 当前步骤索引（从 0 开始）

**Events:**
- `change`: 步骤切换时触发

### VtkSelect（选择器）

```vue
<VtkSelect
  v-model="value"
  :items="items"
  label="请选择"
  placeholder="请选择一项"
  clearable
  multiple
/>
```

**Props:**
- `items` (Array): 选项数据 `[{ title: '显示文本', value: '值' }]`
- `label` (String): 标签文本
- `placeholder` (String): 占位符
- `clearable` (Boolean): 是否可清除
- `multiple` (Boolean): 是否多选

### VtkDatePicker（日期选择器）

```vue
<VtkDatePicker
  v-model="date"
  label="选择日期"
  format="YYYY-MM-DD"
  :min-date="minDate"
  :max-date="maxDate"
/>
```

**Props:**
- `label` (String): 标签文本
- `format` (String): 日期格式
- `minDate` (Date): 最小日期
- `maxDate` (Date): 最大日期

### VtkSearch（搜索组件）

```vue
<VtkSearch
  v-model="keyword"
  placeholder="输入关键词搜索"
  @search="handleSearch"
  @clear="handleClear"
/>
```

**Events:**
- `search`: 搜索时触发
- `clear`: 清除时触发

### VtkPage（分页组件）

```vue
<VtkPage
  :total="totalItems"
  :page-size="pageSize"
  :current-page="currentPage"
  @change="handlePageChange"
/>
```

**Props:**
- `total` (Number): 总条目数
- `pageSize` (Number): 每页条目数
- `currentPage` (Number): 当前页码

**Events:**
- `change`: 页码变化时触发

## 🎨 样式定制

VTK 组件基于 Vuetify 3 开发，继承了 Vuetify 的主题系统。你可以通过修改 Vuetify 主题来统一定制样式：

```javascript
// src/plugins/vuetify/theme.js
export const themes = {
  light: {
    colors: {
      primary: '#9155FD',  // 修改主色调
      secondary: '#8A8D93',
      // ...
    }
  }
}
```

## 💡 工具类使用

除了组件，还可以使用 VTK 提供的工具类：

```javascript
// 导入工具类
import storage from '@yxhl/specter-pui/src/commons/storage'
import request from '@yxhl/specter-pui/src/commons/request'
import { formatDate, formatMoney } from '@yxhl/specter-pui/src/commons/filters/format'

// 使用 localStorage 封装
storage.set('token', 'your-token')
const token = storage.get('token')
storage.remove('token')

// 使用日期格式化
const formatted = formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')

// 使用金额格式化
const money = formatMoney(1234.56) // ¥1,234.56
```

## 📚 更多信息

- VTK 组件自动在 `src/plugins/z-vtk-components.js` 中注册
- 组件源码位于 `@yxhl/specter-pui` npm 包中
- 如需添加新组件到全局注册，编辑 `z-vtk-components.js` 文件