@daflow-ui/ui-tabs

基于 Ark UI 封装的 Tabs 组件（单体组件包），支持 v-model、lazy 加载、disabled 状态等功能。

💡 单体组件设计：独立发布、按需升级，避免"组件库"的整体升级障碍

📦 安装

npm install @daflow-ui/ui-tabs
# or
pnpm add @daflow-ui/ui-tabs

🚀 快速开始

全局引入样式（在 main.ts 中）：

import '@daflow-ui/ui-tabs/style.css'

在组件中使用：

<script setup lang="ts">
import { ref } from 'vue'
import { DfTabs, DfTabPane } from '@daflow-ui/ui-tabs'

const active = ref('first')
</script>

<template>
  <DfTabs v-model="active">
    <DfTabPane label="用户" name="first">用户内容</DfTabPane>
    <DfTabPane label="配置" name="second" lazy>配置内容</DfTabPane>
    <DfTabPane label="禁用" name="disabled" disabled>禁用内容</DfTabPane>
  </DfTabs>
</template>

📖 API

DfTabs Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | string \| number | - | 当前激活的 tab（支持 v-model） | | variant | 'underline' | 'underline' | 样式变体 |

DfTabs Emits

| 事件 | 参数 | 说明 | |------|------|------| | update:modelValue | (value: string \| number) | v-model 更新事件 | | tab-change | (name: string \| number) | tab 切换时触发 |

DfTabPane Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | label | string | - | 标签文本（必填） | | name | string \| number | - | 唯一标识符（必填） | | disabled | boolean | false | 是否禁用 | | lazy | boolean | false | 是否延迟渲染（首次激活时才渲染） |

📝 文档

组件文档（本仓库）

• COMPONENT_SPEC.md - 完整的组件 API 规格
• DECISIONS.md - 设计决策记录
• INDICATOR_EXPLORATION.md - 技术探索细节

开发规范

本组件遵循 DaFlow UI 组件库的统一开发规范。

📖 通用开发规范：（TODO: 添加在线文档链接或规范仓库 URL）

🛠️ 本地开发

# 安装依赖
pnpm install

# 启动开发环境（playground 使用源码，支持热更新）
pnpm dev

# 代码检查
pnpm lint
pnpm typecheck

# 构建产物
pnpm build

# 发布前检查（自动执行 lint + typecheck + build）
pnpm prepublishOnly

🏗️ 项目结构

ui-tabs/
├── src/                 # 组件源码
│   ├── index.ts        # 入口（自动读取包名，无硬编码）
│   ├── Tabs.vue        # Tabs 组件
│   ├── TabPane.vue     # TabPane 组件
│   ├── types.ts        # 类型定义
│   └── style.css       # 样式
├── playground/         # 开发预览
├── docs/              # 组件文档
├── dist/              # 构建产物（发布到 npm）
└── package.json       # 包配置

📄 License

MIT