zui

Appearance

Zui 0.0.5 版本发布说明 ​

🎉 发布日期 ​

2025 年 8 月 29 日

🚀 核心更新 ​

Textarea 组件重大修复 ​

问题修复

  • 修复 rows 属性失效问题：当不启用 autosize 时，rows 属性无法正确生效
  • 优化 autosize 交互逻辑：解决初始高度计算不准确的问题
  • 改进初始高度计算：确保组件渲染时正确显示指定的行数高度

技术改进

  • 重构 adjustTextareaHeight 函数，增加空内容时的最小高度保护
  • 优化 onMounted 钩子中的初始高度设置逻辑
  • 新增 setTimeout 延迟处理，确保 DOM 完全渲染后再调整高度

Tabs 标签页组件 ​

新增功能

  • 多种类型支持：primary、success、warning、danger、info 五种颜色主题
  • 灵活位置控制：支持 top、bottom、left、right 四个位置
  • 丰富样式选项：
    • 按钮样式标签页
    • 文本按钮样式
    • 全宽按钮标签
  • 交互功能：
    • 可关闭标签页
    • 自定义背景类名
    • 禁用标签选项

API 完善

  • 完整的 Props 接口定义
  • Tabs 事件系统（tab-change、tab-close）
  • 丰富的插槽支持（默认、tab、extra）

Select 选择器组件 ​

功能特性

  • 多样化类型：primary、success、warning、danger、info 五种颜色主题
  • 尺寸系统：small、default、large 三种尺寸
  • 高级功能：
    • 多选模式
    • 可清空选项
    • 可搜索过滤
    • 加载状态
  • 标签折叠：多选时自动折叠超出标签
  • 自定义图标：支持前缀和后缀图标自定义

用户体验

  • 智能下拉位置计算
  • 键盘导航支持
  • 响应式宽度适配

Card 卡片组件 ​

设计升级

  • 视觉层次：五种颜色类型（default、primary、success、warning、danger）
  • 尺寸体系：small、default、large 三种规格
  • 交互增强：
    • 悬浮效果
    • 可折叠设计
    • 骨架屏加载状态

布局创新

  • 灵活布局模式：default、flexible、tight 三种布局方式
  • 插槽系统：
    • 默认内容插槽
    • 标题自定义插槽
    • 右上角操作区域
    • 底部三区域布局（左中右）

样式控制

  • 边框显隐控制
  • 阴影效果调节
  • 内边距精确控制
  • 宽高自定义设置

Switch 开关组件 ​

设计规范

  • 形状选择：round（圆形）和 square（方形）两种开关形状
  • 尺寸体系：small、default、large 三种规格
  • 颜色主题：五种内置颜色类型
  • 状态管理：
    • 禁用状态
    • 加载状态

自定义能力

  • 文本描述：active-text 和 inactive-text 支持
  • 颜色自定义：active-color 和 inactive-color 可配置
  • 值类型：支持 boolean、string、number 多种绑定值类型

交互体验

  • 平滑过渡动画
  • 键盘操作支持
  • 自定义图标插槽

🛠️ 技术优化 ​

代码质量 ​

  • 类型安全：所有组件完善 TypeScript 类型定义
  • 性能优化：减少不必要的重渲染和计算
  • 可访问性：增强键盘导航和屏幕阅读器支持

开发体验 ​

  • 文档完善：每个组件配备完整的使用文档和示例
  • 测试覆盖：新增组件测试用例和示例页面
  • 主题系统：统一的 CSS 变量命名规范

📖 文档更新 ​

新增文档 ​

示例页面 ​

  • Textarea 初始高度测试页面
  • Card 插槽功能测试页面
  • 各组件交互演示页面

🔮 未来规划 ​

短期目标 ​

  • 表单验证组件（Form、FormItem）
  • 数据展示组件（Table、Pagination）
  • 反馈组件（Message、Notification）

长期愿景 ​

  • 组件主题定制工具

🎯 升级指南 ​

安装更新 ​

bash
npm update @zui/ui

使用示例 ​

vue
<template>
  <!-- Textarea 修复后使用 -->
  <Textarea v-model="content" :rows="4" autosize />

  <!-- Tabs 标签页 -->
  <Tabs v-model="activeTab" type="primary">
    <TabPane label="标签1" name="tab1">内容1</TabPane>
    <TabPane label="标签2" name="tab2">内容2</TabPane>
  </Tabs>

  <!-- Select 选择器 -->
  <Select v-model="value" multiple filterable>
    <Option label="选项1" value="1" />
    <Option label="选项2" value="2" />
  </Select>

  <!-- Card 卡片 -->
  <Card title="标题" hoverable collapsible>
    <template #topRight>
      <Button>操作</Button>
    </template>
    卡片内容
  </Card>

  <!-- Switch 开关 -->
  <Switch v-model="enabled" type="success" />
</template>