Fantasia UI

✨ 特性

• 🎨 现代化设计 - 简洁优雅的设计风格
• 🔧 TypeScript - 完整的类型定义支持
• 📦 按需加载 - 支持 Tree Shaking，减小打包体积
• ⚡ Vue 3 - 基于 Vue 3 Composition API
• 🎯 开箱即用 - 丰富的组件，满足日常开发需求
• 📱 响应式 - 移动端友好的交互体验

📦 安装

# npm
npm install fantasia-ui

# yarn
yarn add fantasia-ui

# pnpm
pnpm add fantasia-ui

可选依赖

如果你需要使用图标组件，需要额外安装：

# 安装图标库（可选）
npm install @vicons/ionicons5

# 如果使用了 VueUse 相关功能（可选）
npm install @vueuse/core

🔨 快速开始

全局注册

// main.ts
import { createApp } from 'vue'
import FantasiaUI, { install } from 'fantasia-ui'
import 'fantasia-ui/dist/index.css'
import App from './App.vue'

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

按需引入

<script setup lang="ts">
import { FButton, FInput } from 'fantasia-ui'
import 'fantasia-ui/dist/index.css'
</script>

<template>
  <FButton type="primary">按钮</FButton>
  <FInput v-model="value" placeholder="请输入" />
</template>

📚 组件列表

基础组件

• FButton - 按钮
• FIcon - 图标
• FText - 文本
• FLink - 链接
• FTypography - 排版

布局组件

• FContainer - 容器
• FRow - 行
• FCol - 列
• FSpace - 间距
• FDivider - 分割线

数据展示

• FCard - 卡片
• FImage - 图片
• FAvatar - 头像
• FBadge - 徽章
• FTag - 标签
• FProgress - 进度条
• FRate - 评分
• FBreadcrumb - 面包屑

表单组件

• FInput - 输入框
• FSelect - 选择器
• FUpload - 上传

数据组件

• FPagination - 分页
• FTabs - 标签页

反馈组件

• FLoading - 加载
• FTooltip - 提示
• FSliderCaptcha - 滑块验证

其他

• FDropdown - 下拉菜单
• FAffix - 固钉

📝 使用示例

按钮组件

<script setup lang="ts">
import { FButton } from 'fantasia-ui'

const handleClick = () => {
  console.log('clicked!')
}
</script>

<template>
  <FButton type="primary" @click="handleClick">
    主要按钮
  </FButton>
  <FButton type="success">成功按钮</FButton>
  <FButton type="warning">警告按钮</FButton>
  <FButton type="danger">危险按钮</FButton>
</template>

上传组件

<script setup lang="ts">
import { FUpload } from 'fantasia-ui'

const handleUpload = (file: File, done: () => void, error: (err: any) => void) => {
  try {
    // 上传逻辑
    console.log('上传文件:', file)
    done()
  } catch (err) {
    error(err)
  }
}
</script>

<template>
  <FUpload 
    crop 
    mosaic 
    @upload="handleUpload" 
  />
</template>

分页组件

<script setup lang="ts">
import { FPagination } from 'fantasia-ui'
import { ref } from 'vue'

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

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

<template>
  <FPagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    @change="handlePageChange"
  />
</template>

布局组件

<script setup lang="ts">
import { FRow, FCol, FSpace } from 'fantasia-ui'
</script>

<template>
  <!-- 栅格布局 -->
  <FRow :gutter="20">
    <FCol :span="12">列 1</FCol>
    <FCol :span="12">列 2</FCol>
  </FRow>

  <!-- 间距布局 -->
  <FSpace direction="horizontal" :size="16">
    <FButton>按钮 1</FButton>
    <FButton>按钮 2</FButton>
    <FButton>按钮 3</FButton>
  </FSpace>
</template>

🎨 主题定制

组件库支持 CSS 变量自定义主题：

:root {
  --primary-color: #409eff;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #909399;
}

📝 TypeScript 支持

Fantasia UI 提供完整的 TypeScript 类型定义：

<script setup lang="ts">
import { FButton } from 'fantasia-ui'

// TypeScript 会自动推断 props 类型
// 无需手动导入 FButtonProps
</script>

<template>
  <FButton variant="primary" size="large">
    按钮
  </FButton>
</template>

如果需要组件 Props 类型

可以使用 TypeScript 工具类型从组件推断：

import { FButton } from 'fantasia-ui'
import type { ComponentProps } from 'vue'

// 从组件推断 props 类型
type FButtonProps = ComponentProps<typeof FButton>

const buttonProps: FButtonProps = {
  variant: 'primary',
  size: 'large'
}

Volar / IDE 类型提示

如果编辑器无法提示组件属性，请参考 类型支持文档 进行配置。

快速配置（全局注册）：

在 tsconfig.json 中添加：

{
  "compilerOptions": {
    "types": ["fantasia-ui/global"]
  }
}

或在 src/env.d.ts 中添加：

/// <reference types="fantasia-ui/global" />

🔗 相关链接

• 更新日志（中文）
• 更新日志（English）
• 优化报告
• 问题反馈

📄 开源协议

MIT License © 2024 Shuster

🤝 贡献

欢迎提交 Issue 和 Pull Request！

如果这个项目对你有帮助，请给一个 ⭐️ Star 支持一下！