FluenzymeT UI

一套基于 Vue3 + TypeScript 的 WinUI3 风格组件库，提供现代化的 Windows 11 视觉体验。

✨ 特性

• 🎨 WinUI3 设计：遵循 Windows 11 Fluent Design 设计规范
• ⚡ Vue3 组合式：基于 Composition API 构建
• 🔧 TypeScript：完整的类型定义支持
• 📱 响应式：适配不同屏幕尺寸
• 🎯 轻量级：按需引入，无额外依赖

📦 安装

npm install fluenzymet-ui
# 或
yarn add fluenzymet-ui
# 或
pnpm add fluenzymet-ui

🔨 使用

全局引入

import { createApp } from 'vue'
import FluenzymeTUI from 'fluenzymet-ui'
import 'fluenzymet-ui/dist/style.css'

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

按需引入

import { FButton, FInput, FSwitch } from 'fluenzymet-ui'
import 'fluenzymet-ui/dist/style.css'

export default {
  components: {
    FButton,
    FInput,
    FSwitch
  }
}

📋 组件列表

| 组件 | 描述 | 状态 | 事件支持 | |------|------|------|----------| | FButton | 按钮组件 | ✅ | ✅ 完整事件 | | FInput | 输入框组件 | ✅ | ✅ 完整事件 | | FSwitch | 开关组件 | ✅ | ✅ 完整事件 | | FComboBox | 下拉框组件 | ✅ | ✅ 完整事件 | | FContentDialog | 内容对话框 | ✅ | ✅ 完整事件 | | FMenuFlyout | 菜单弹出框 | ✅ | ✅ 完整事件 | | FNavigationView | 导航视图 | ✅ | ✅ 完整事件 | | FNotification | 通知组件 | ✅ | ✅ 完整事件 | | FRadio | 单选框组件 | ✅ | ✅ 完整事件 | | FRadioGroup | 单选框组 | ✅ | ✅ 完整事件 | | FSilder | 滑块组件 | ✅ | ✅ 完整事件 | | FTooltips | 工具提示 | ✅ | ✅ 完整事件 |

🎯 示例

按钮组件

<template>
  <FButton type="primary" @click="handleClick">主要按钮</FButton>
  <FButton type="secondary">次要按钮</FButton>
  <FButton disabled>禁用按钮</FButton>
</template>

<script setup>
const handleClick = (event) => {
  console.log('按钮被点击', event)
}
</script>

下拉框组件（带事件监听）

<template>
  <FComboBox
    v-model="selectedValue"
    :items="items"
    placeholder="请选择..."
    @open="handleOpen"
    @close="handleClose"
    @search="handleSearch"
    @change="handleChange"
  />
</template>

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

const selectedValue = ref('')
const items = [
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' }
]

const handleOpen = () => console.log('下拉菜单打开')
const handleClose = () => console.log('下拉菜单关闭')
const handleSearch = (value) => console.log('搜索:', value)
const handleChange = (value) => console.log('值改变:', value)
</script>

开关组件（带事件监听）

<template>
  <FSwitch 
    v-model="isEnabled" 
    @change="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</template>

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

const isEnabled = ref(false)

const handleChange = (value) => console.log('开关状态:', value)
const handleFocus = () => console.log('获得焦点')
const handleBlur = () => console.log('失去焦点')
</script>

通知组件（带事件监听）

<template>
  <FNotification
    @show="handleShow"
    @close="handleClose"
    @action="handleAction"
  />
</template>

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

const handleShow = (notification) => console.log('通知显示:', notification)
const handleClose = (notification) => console.log('通知关闭:', notification)
const handleAction = ({ notification, action }) => console.log('操作点击:', action)
</script>

🔔 事件支持

所有组件都支持完整的事件系统，包括：

通用事件

• click - 点击事件
• focus - 获得焦点事件
• blur - 失去焦点事件
• keydown / keyup - 键盘事件

组件特有事件

• FComboBox: open, close, search
• FMenuFlyout: show, hide, itemClick, triggerClick, triggerEnter, triggerLeave, menuEnter, menuLeave
• FNavigationView: paneToggle, groupToggle, itemClick
• FNotification: show, close, closeAll, action, pause, resume
• FSwitch: change
• FRadioGroup: change
• FTooltips: show, hide

🎨 主题定制

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

:root {
  --primary-color: #0078d4;
  --secondary-color: #106ebe;
  --text-color: #323130;
  --border-color: #d1d1d1;
}

🔧 开发

# 克隆项目
git clone https://github.com/fluenzymet/fluenzymet-ui.git

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build

# 发布到 NPM
npm publish

📄 许可证

MIT License - 详见 LICENSE 文件

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 联系

• GitHub: @fluenzymet
• Email: [email protected]