青梧 UI

组件包

青梧 UI 采用按包分发：每个组件是独立的 npm 包，只引入你需要的代码。 所有包均零运行时依赖、纯 TypeScript 编写、ESM / CJS 双格式输出，React / Vue / 原生 HTML 通用。

包名说明
@qingwu-ui/calendar日历 + 农历引擎：农历 / 节气 / 节日 / 黄历宜忌 / 休假表 / 禁用规则
@qingwu-ui/button药丸风格按钮，四变体，零依赖
@qingwu-ui/search搜索框 / 命令面板：打字机占位、类别筛选、全键盘导航
@qingwu-ui/upload图片上传：拖拽、WebP / AVIF 客户端压缩
@qingwu-ui/toast轻提示：ARIA live region、Promise 链、队列管理
@qingwu-ui/skeleton骨架屏：运行时 DOM 测量、SSR 感知
@qingwu-ui/text-layout文字排版引擎：截断 / 分栏 / 虚拟滚动
@qingwu-ui/ai-editorAI 辅助 Markdown / WYSIWYG 编辑器

安装

任选包管理器，安装你需要的组件包：

# npm
npm install @qingwu-ui/calendar

# pnpm
pnpm add @qingwu-ui/calendar

# bun
bun add @qingwu-ui/calendar

快速使用

组件是框架无关的：实例化时传入挂载节点与配置即可。以日历为例：

import { Calendar } from "@qingwu-ui/calendar";
import "@qingwu-ui/calendar/style.css";

const el = document.querySelector("#root");
const cal = new Calendar(el, {
  placeholder: "选择日期",
  onChange: (date) => console.log(date),
});

// 卸载时释放资源
cal.destroy();

在 React 中，通过 useEffect 管理生命周期：

import { useEffect, useRef } from "react";
import { Calendar } from "@qingwu-ui/calendar";
import "@qingwu-ui/calendar/style.css";

function CalendarPicker() {
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = rootRef.current;
    if (!el) return;
    const cal = new Calendar(el, { placeholder: "选择日期" });
    return () => cal.destroy();
  }, []);

  return <div ref={rootRef} />;
}

CDN 引入

无需构建工具，直接通过 unpkg 在浏览器使用：

<script type="module">
  import { Calendar } from "https://unpkg.com/@qingwu-ui/calendar";
</script>
<link rel="stylesheet" href="https://unpkg.com/@qingwu-ui/calendar/style.css" />

浏览器支持

所有组件基于现代浏览器标准（原生 DOM、CSS 自定义属性、ES2020+）， 不兼容 IE。推荐使用最新版 Chrome / Edge / Firefox / Safari。