🎉 发布日期

2025年9月5日

✨ 新功能与组件

Accordion 手风琴组件

• 灵活配置：支持手风琴和折叠面板两种模式
• 展开控制：支持默认展开项、同时展开多个项
• 交互增强：点击标题区域展开/折叠内容，支持禁用状态
• 自定义样式：提供多种颜色类型（default、primary、success、warning、danger）和尺寸（small、default、large）
• 丰富的插槽：支持标题、内容、图标等自定义插槽

Divider 分割线组件

• 多方向支持：水平和垂直两种方向
• 多样式类型：实线、虚线、点线、双线四种样式
• 文字位置：支持左、中、右以及自定义百分比位置
• 尺寸和边距：可调整分割线粗细和外边距
• 自定义颜色：支持分割线颜色和文字颜色自定义

Form 表单组件

• 表单验证：支持表单验证规则配置和错误提示
• 布局控制：支持行内、水平、垂直三种布局方式
• 组件封装：统一的表单元素包裹，简化表单开发
• 联动效果：支持表单项之间的联动和依赖
• 表单状态：提供禁用、只读等状态控制

Popover 弹出框组件

• 触发方式：支持点击、悬停、聚焦等多种触发方式
• 位置控制：提供12个方向的弹出位置选择
• 自定义内容：支持HTML内容和Vue组件
• 交互体验：支持点击外部关闭、ESC键关闭
• 样式定制：支持主题色和自定义样式

Space 间距组件

• 方向控制：支持水平和垂直方向
• 尺寸调整：提供多种尺寸预设和自定义间距
• 对齐方式：支持不同的对齐方式（start、end、center、baseline）
• 自动换行：支持内容过多时自动换行
• 充满整行：可设置fill属性使内容充满整行
• 分隔符：支持自定义分割符
• 响应式布局：适配不同屏幕尺寸

Tooltip 提示组件

• 触发方式：支持悬停、点击等触发方式
• 位置控制：提供多个方向的提示位置选择
• 自定义内容：支持文本内容和简单HTML
• 动画效果：平滑的显示/隐藏动画
• 样式定制：支持主题色和自定义样式
• 可访问性：优化键盘导航和屏幕阅读器支持

Menubar 菜单栏组件

• 灵活配置：支持多级嵌套菜单和快捷键提示
• 交互增强：点击外部自动关闭菜单，支持键盘导航
• 自定义样式：提供多种颜色类型和禁用状态
• 丰富的插槽：支持菜单项内容和图标自定义

📖 文档更新

新增文档

• Accordion 组件文档
• Divider 组件文档
• Form 组件文档
• Popover 组件文档
• Space 组件文档
• Tooltip 组件文档
• Menubar 组件文档

示例页面

• 各组件完整的使用示例和API展示
• 组件交互演示页面
• 组件组合使用场景示例

🛠️ 技术优化

组件重构

• 统一所有组件的导入方式和使用模式
• 优化组件内部结构，提升代码可读性和维护性
• 完善组件TypeScript类型定义

文档优化

• 重构文档结构，统一文档格式
• 将组件示例代码提取到单独的文件中，便于维护
• 优化文档导航和搜索功能

🎯 升级指南

安装更新

npm update @zui/ui

使用示例

<template>
  <!-- Accordion 手风琴 -->
  <Accordion v-model:current-active-keys="activeKeys">
    <AccordionPanel title="面板1" name="1">内容1</AccordionPanel>
    <AccordionPanel title="面板2" name="2">内容2</AccordionPanel>
  </Accordion>

  <!-- Divider 分割线 -->
  <div>
    <span>上方内容</span>
    <Divider text="分割线" />
    <span>下方内容</span>
  </div>

  <!-- Form 表单 -->
  <Form :model="formData" :rules="rules">
    <FormItem label="用户名" prop="username">
      <Input v-model="formData.username" />
    </FormItem>
    <FormItem>
      <Button type="primary" @click="submitForm">提交</Button>
    </FormItem>
  </Form>

  <!-- Popover 弹出框 -->
  <Popover content="这是一段提示内容">
    <Button>点击显示弹出框</Button>
  </Popover>

  <!-- Space 间距 -->
  <Space size="large">
    <Button>按钮1</Button>
    <Button>按钮2</Button>
    <Button>按钮3</Button>
  </Space>

  <!-- Tooltip 提示 -->
  <Tooltip content="这是提示文字">
    <span>悬停查看提示</span>
  </Tooltip>
</template>

<script setup>
import { ref } from 'vue'
import {
  Accordion,
  AccordionPanel,
  Divider,
  Form,
  FormItem,
  Popover,
  Space,
  Tooltip,
  Button,
  Input
} from '@/components'

const activeKeys = ref(['1'])
const formData = ref({ username: '' })
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
}

const submitForm = () => {
  // 表单提交逻辑
}
</script>

🔮 未来规划

短期目标

• 数据展示组件（Table、Pagination）
• 反馈组件（Message、Notification、Loading）
• 导航组件（Menu、Breadcrumb）

长期愿景

• 完善组件生态系统
• 提供主题定制工具
• 增强国际化支持

---