Fun UI 组件库

Fun UI 是 Green Resources Manager 的自定义 UI 组件库，所有组件都以 fun- 开头。

📁 目录结构

组件按功能分类组织：

fun-ui/
├── components/
│   ├── basic/              # 基本组件
│   │   └── Button/
│   │       └── FunButton.vue
│   ├── data-input/         # 数据录入
│   │   └── Rate/
│   │       └── FunRate.vue
│   ├── data-display/       # 数据展示
│   │   └── BusinessCard/
│   │       └── FunBusinessCard.vue
│   ├── navigation/         # 导航组件
│   └── feedback/           # 反馈组件
└── index.ts                # 统一导出入口

📦 使用方式

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

<template>
  <!-- 基本组件 -->
  <fun-button>点击我</fun-button>
  
  <!-- 数据录入 -->
  <fun-rate v-model="rating" />
  
  <!-- 数据展示 -->
  <fun-business-card />
</template>

🎨 组件分类

Basic 基本组件

基础 UI 组件，如按钮、图标等。

• Button (fun-button) - 按钮组件

Data Input 数据录入

用于用户输入数据的组件。

• Rate (fun-rate) - 评分组件

Data Display 数据展示

用于展示数据的组件。

• BusinessCard (fun-business-card) - 名片卡片组件

Navigation 导航组件

用于页面导航的组件。

• (待添加)

Feedback 反馈组件

用于用户反馈的组件，如对话框、提示等。

• (待添加)

🎯 设计原则

• BEM 命名规范：所有 CSS 类名遵循 BEM（Block Element Modifier）规范
  • Block（块）：组件名，如 fun-button
  • Element（元素）：块的一部分，使用 __ 连接，如 fun-button__icon
  • Modifier（修饰符）：状态或变体，使用 -- 连接，如 fun-button--primary
• 组件命名：所有组件以 fun- 开头，如 <fun-button>
• 主题系统：所有组件使用 CSS 变量（设计令牌），支持主题切换
• 技术栈：遵循 Vue 3 Composition API 最佳实践
• 类型安全：提供完整的 TypeScript 类型支持

BEM 命名示例

// Block（块）
.fun-button { }

// Element（元素）
.fun-button__icon { }
.fun-button__content { }

// Modifier（修饰符）
.fun-button--primary { }
.fun-button--large { }
.fun-button--disabled { }

// 元素 + 修饰符
.fun-button__icon--left { }

📝 添加新组件

1. 根据组件功能，选择对应的分类目录
2. 在分类目录下创建组件文件夹和 Vue 文件
3. 在 fun-ui/index.ts 中导入并注册组件
4. 更新本文档的组件列表