KT 管理组件库

简化版的 Vue 3 + Ant Design Vue 组件库，用于 KT 项目间的组件共享。

🚀 安装

# 开发阶段使用 yarn link
yarn link "kt-manage-components"

# 生产环境安装
npm install kt-manage-components-1.0.0.tgz

📦 使用方法

导入组件

// 推荐：从 components 子路径导入
import { KtStudy, KtModal, useModal } from 'kt-manage-components/components'

// 或者从主入口导入
import { KtStudy, KtModal } from 'kt-manage-components'

导入样式

// 在 main.ts 或入口文件中导入样式
import 'kt-manage-components/style.css'

完整示例

<template>
  <KtStudy 
    title="Vue 3 进阶学习"
    description="深入学习 Vue 3 核心概念"
    :progress="75"
    :duration="120"
    action-text="开始学习"
    @action="handleStart"
    @view="handleView"
    @edit="handleEdit"
    @delete="handleDelete"
  />
</template>

<script setup lang="ts">
import { KtStudy } from 'kt-manage-components/components'
import type { KtStudyProps } from 'kt-manage-components/components'

const handleStart = () => {
  console.log('开始学习')
}

const handleView = () => {
  console.log('查看详情')
}

const handleEdit = () => {
  console.log('编辑')
}

const handleDelete = () => {
  console.log('删除')
}
</script>

🧩 组件列表

KtStudy - 学习项目组件

<KtStudy 
  title="Vue 3 学习"
  :progress="75"
  @action="handleStart"
/>

Modal 系列 - 模态框组件

推荐使用模式：创建独立的业务Modal组件

<!-- 1. 创建业务Modal组件 -->
<template>
  <KtModalBase
    ref="modalRef"
    title="编辑用户"
    @ok="handleSubmit"
  >
    <!-- 你的业务逻辑 -->
    <a-form :model="formData">
      <a-form-item label="用户名">
        <a-input v-model:value="formData.username" />
      </a-form-item>
    </a-form>
  </KtModalBase>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { KtModalBase } from 'kt-manage-components/components'

const modalRef = ref()

// 关键：暴露 open 方法
defineExpose({
  open: (userId?: number) => {
    modalRef.value.open()
    if (userId) {
      // 加载数据逻辑
      modalRef.value.setLoading(true, '加载中...')
      // await fetchData(userId)
      modalRef.value.setLoading(false)
    }
  }
})
</script>

<!-- 2. 在页面中使用 -->
<template>
  <div>
    <a-button @click="userModalRef.open(123)">编辑用户</a-button>
    
    <!-- 页面保持简洁，只有一行Modal引用 -->
    <UserEditModal ref="userModalRef" @success="handleSuccess" />
  </div>
</template>

优势:

• ✅ 页面简洁 - 避免页面中大量Modal标签
• ✅ 组件复用 - 业务Modal可在多个页面使用
• ✅ 逻辑集中 - Modal相关逻辑封装在组件内
• ✅ 接口统一 - 统一的 open(id, data) 调用方式
• ✅ 支持接口调用 - 内置加载状态管理

🔧 开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

# 类型检查
npm run type-check

📝 添加新组件

1. 在 src/components/ 中创建新组件
2. 在 src/components/index.ts 中导出组件
3. 运行 npm run build 构建
4. 在目标项目中使用：

import { YourNewComponent } from 'kt-manage-components/components'

🎯 项目结构

kt-manage-components/
├── src/
│   ├── components/           # 组件目录
│   │   ├── KtStudy.vue      # 示例组件
│   │   └── index.ts         # 组件导出
│   ├── types/               # 类型定义
│   ├── dev/                 # 开发预览
│   └── index.ts             # 主入口
├── components.ts            # 组件入口
├── dist/                    # 构建产物
└── README.md

📄 许可证

MIT License