@okcy/tdesign

基于 TDesign Vue Next 的 Vue 3 Web 增强组件库。

在 tdesign-vue-next 基础上扩展了表单增强、富文本编辑器、上传、加载态防抖等实用组件。

安装

pnpm add @okcy/tdesign

同时需确保项目已引入 TDesign 的样式：

import "@okcy/tdesign/style.css";

入口

| 子路径 | 说明 | | ------------- | --------------------------------------------- | | . | 主入口 — 重导出 tdesign-vue-next + 扩展组件 | | ./style.css | 扩展组件样式 |

扩展组件

表单

| 组件 | 说明 | | --------------- | ------------------------------------------------------------------------------ | | FormItem | 增强型表单项，支持 readonly / zod / rules / render，自动合并校验规则 | | useFormSubmit | 表单提交 hook，封装 validate / submit / handlerSubmit，统一成功/失败回调 |

import { FormItem, useFormSubmit } from "@okcy/tdesign";
import { z } from "zod";

// 表单 Schema
const schema = z.object({
  name: z.string().min(1, "请输入姓名"),
  email: z.string().email("邮箱格式错误"),
});

// 在 TDesign Form 中使用
const submit = useFormSubmit({
  schema,
  onSuccess: (data) => api.save(data),
  onError: (errors) => /* 处理错误 */,
});

内容容器

| 组件 | 说明 | | -------------- | ------------------------------------------ | | ContentBlock | 内容卡片容器，圆角 + 阴影 + 边框布局 | | ContentTitle | 标题组件，支持 title / subtitle 双层级 |

import { ContentBlock, ContentTitle } from "@okcy/tdesign";

<ContentBlock>
  <ContentTitle title="用户信息" subtitle="最近更新：2024-01-01" />
  {/* 内容 */}
</ContentBlock>;

上传

| 组件 / Hook | 说明 | | --------------- | --------------------------------------------------------------------------------------- | | useUploadBase | 上传基础逻辑，封装 CDN 转换、文件处理、成功回调，返回 UploadImage / UploadFile 组件 | | UploadImage | 图片上传组件（由 useUploadBase 返回） | | UploadFile | 文件上传组件（由 useUploadBase 返回） |

import { useUploadBase } from "@okcy/tdesign";

const upload = useUploadBase({
  handler: (file, name) => uploadToServer(file),
  cdnUrl: (url) => `https://cdn.example.com/${url}`,
  cdnImg: (url) => `https://img.example.com/${url}`,
});

const { UploadImage, setModel } = upload;

富文本

| 组件 | 说明 | | -------------------- | -------------------------------------------------------------- | | Quill | 富文本编辑器，基于 @vueup/vue-quill，内置图片上传能力 | | QuillImageUploader | Quill 图片上传模块（工具栏/粘贴/拖放），上传后自动插入图片 URL |

import { Quill } from "@okcy/tdesign";

<Quill
  v-model={content}
  :on-upload-image="(file) => uploadToServer(file)"
/>

加载与占位

| 组件 | 说明 | | ---------- | ---------------------------------------------------------------------------- | | Loading | 带防抖的加载组件，loading 状态持续 delay（默认 200ms）后才渲染，避免闪烁 | | Skeleton | 带防抖的骨架屏，同 Loading 的防抖策略 |

import { Loading, Skeleton } from "@okcy/tdesign";

<Loading :loading="loading">
  {/* 实际内容 */}
</Loading>

<Skeleton :loading="loading">
  {/* 实际内容 */}
</Skeleton>

其他

| 组件 | 说明 | | ------------- | ----------------------------------------------------------------- | | Button | 基于 TDesign Button 的主题扩展封装 | | Link | 基于 TDesign Link，默认 hover="color" | | InputTag | 标签输入组件，维护 modelValue: string[]，支持添加/删除/编辑标签 | | ImageViewer | 图片预览，包装 TdImageViewer，支持 trigger 插槽 |

插件

| 插件 | 说明 | | -------------- | --------------------------------------------- | | DialogPlugin | 增强 Dialog 插件，基于 TDesign DialogPlugin | | DrawerPlugin | 增强 Drawer 插件，基于 TDesign DrawerPlugin |

完整导出示例

// 推荐：按需导入
import {
  // TDesign 原生（重导出）
  Button,
  Input,
  Form,
  Tabs,
  // 扩展组件
  ContentBlock,
  ContentTitle,
  FormItem,
  useFormSubmit,
  Quill,
  Loading,
  Skeleton,
  InputTag,
  ImageViewer,
  useUploadBase,
  DialogPlugin,
  DrawerPlugin,
} from "@okcy/tdesign";

依赖

• Vue 3、tdesign-vue-next
• @okcy/core
• @vueup/vue-quill + quill（富文本）
• @vitejs/plugin-vue-jsx（JSX 支持）
• UnoCSS（样式）、sass