@mingto/mt-ui 1.1.47 → 1.1.49

package/README.md

@@ -1,14 +1,6 @@
 # @mingto/mt-ui
 
-基于 Vue 3 的企业级 UI 组件库，提供丰富的业务组件，帮助快速构建现代化应用界面。
-
-## 特性
-
-- 🎨 **设计优雅**：简洁现代的视觉风格
-- 📦 **开箱即用**：无需复杂配置，直接引入使用
-- 🔧 **按需加载**：支持组件按需引入，优化打包体积
-- 🎯 **类型安全**：完整的 TypeScript 类型定义
-- 🌏 **国际化**：内置多语言支持
+基于 Vue 3 的 UI 组件库，提供业务常用组件、布局组件、反馈组件、上传组件、国际化和工具 Hook。
 
 ## 安装
 
@@ -16,6 +8,8 @@
 pnpm add @mingto/mt-ui
 ```
 
+需要项目中已安装 Vue 3，当前 peer dependency 为 `vue@^3.5.13`。
+
 ## 快速开始
 
 ### 全量引入
@@ -24,9 +18,9 @@ pnpm add @mingto/mt-ui
 import MtUi from '@mingto/mt-ui'
 import { createApp } from 'vue'
 import App from './App.vue'
-import '@mingto/mt-ui/dist/style.css'
 
 const app = createApp(App)
+
 app.use(MtUi)
 app.mount('#app')
 ```
@@ -37,105 +31,136 @@ app.mount('#app')
 import { MtButton, MtDialog, MtMessage } from '@mingto/mt-ui'
 import { createApp } from 'vue'
 import App from './App.vue'
-import '@mingto/mt-ui/dist/style.css'
 
 const app = createApp(App)
+
 app.use(MtButton)
 app.use(MtDialog)
 app.use(MtMessage)
 app.mount('#app')
 ```
 
-## 基础组件
-
-| 组件      | 说明     |
-| --------- | -------- |
-| MtButton  | 按钮     |
-| MtIcon    | 图标     |
-| MtImage   | 图片     |
-| MtLoading | 加载     |
-| MtBadge   | 徽标     |
-| MtBacktop | 回到顶部 |
-
-## 表单组件
-
-| 组件       | 说明     |
-| ---------- | -------- |
-| MtUpload   | 文件上传 |
-| MtProgress | 进度条   |
-
-## 展示组件
-
-| 组件          | 说明     |
-| ------------- | -------- |
-| MtAvatarImage | 图片头像 |
-| MtAvatarText  | 文字头像 |
-| MtEmpty       | 空状态   |
-| MtTag         | 标签     |
-| MtQrcode      | 二维码   |
-| MtTable       | 表格     |
-| MtTableColumn | 表格列   |
-| MtPopover     | 气泡卡片 |
-| MtTooltip     | 文字提示 |
-| MtFilePreview | 文件预览 |
-
-## 导航组件
-
-| 组件             | 说明     |
-| ---------------- | -------- |
-| MtTabs           | 标签页   |
-| MtTab            | 标签     |
-| MtInfiniteScroll | 无限滚动 |
-
-## 反馈组件
-
-| 组件      | 说明     |
-| --------- | -------- |
-| MtDialog  | 对话框   |
-| MtMessage | 消息提示 |
-| MtOverlay | 遮罩层   |
-| MtPoster  | 海报     |
-
-## 布局组件
-
-| 组件                 | 说明         |
-| -------------------- | ------------ |
-| MtCell               | 单元格       |
-| MtCellGroup          | 单元格组     |
-| MtButtonGroup        | 按钮组       |
-| MtCollapseTransition | 折叠过渡     |
-| MtFadeTransition     | 淡入淡出过渡 |
-| MtTeleport           | 传送门       |
-| MtConfigProvider     | 全局配置     |
-
-## 使用示例
-
-### 按钮
+### 在 setup 中使用
 
 ```vue
-<mt-button type="primary">
-主要按钮
-</mt-button>
+<script setup lang="ts">
+import { MtMessage } from '@mingto/mt-ui'
 
-<mt-button type="success">
-成功按钮
-</mt-button>
+function submit() {
+  MtMessage.success('操作成功')
+}
+</script>
 
-<mt-button type="danger">
-危险按钮
-</mt-button>
+<template>
+  <MtButton type="primary" @click="submit">
+    提交
+  </MtButton>
+</template>
+```
+
+## 组件列表
+
+### 基础组件
+
+| 组件 | 说明 |
+|------|------|
+| `MtButton` | 按钮 |
+| `MtButtonGroup` | 按钮组 |
+| `MtIcon` | 图标 |
+| `MtImage` | 图片 |
+| `MtLoading` | 加载 |
+| `MtBadge` | 徽标 |
+| `MtBacktop` | 回到顶部 |
+
+### 展示组件
+
+| 组件 | 说明 |
+|------|------|
+| `MtAvatarImage` | 图片头像 |
+| `MtAvatarText` | 文字头像 |
+| `MtEmpty` | 空状态 |
+| `MtFilePreview` | 文件预览 |
+| `MtPopover` | 气泡卡片 |
+| `MtProgress` | 进度条 |
+| `MtQrcode` | 二维码 |
+| `MtTable` | 表格 |
+| `MtTableColumn` | 表格列 |
+| `MtTag` | 标签 |
+| `MtTooltip` | 文字提示 |
+
+### 导航组件
+
+| 组件 | 说明 |
+|------|------|
+| `MtTabs` | 标签页容器 |
+| `MtTab` | 标签页项 |
+| `MtInfiniteScroll` | 无限滚动 |
+
+### 反馈组件
+
+| 组件 | 说明 |
+|------|------|
+| `MtDialog` | 对话框 |
+| `MtDialogConfirmLayout` | 对话框确认布局 |
+| `MtMessage` | 消息提示 |
+| `MtOverlay` | 遮罩层 |
+| `MtPoster` | 海报 |
+
+### 布局与过渡组件
+
+| 组件 | 说明 |
+|------|------|
+| `MtCell` | 单元格 |
+| `MtCellGroup` | 单元格组 |
+| `MtCollapseTransition` | 折叠过渡 |
+| `MtFadeTransition` | 淡入淡出过渡 |
+| `MtTeleport` | 传送门 |
+| `MtConfigProvider` | 全局配置 |
+
+### 上传组件
+
+| 组件或方法 | 说明 |
+|------------|------|
+| `MtUpload` | 上传组件 |
+| `MtUploadFileListLayout` | 上传文件列表布局 |
+| `MtUploadImageGridLayout` | 上传图片宫格布局 |
+| `MtUploadImageOnlyLayout` | 仅图片上传布局 |
+| `formatUploadFiles` | 格式化上传文件数据 |
+
+## 常用示例
+
+### 按钮
+
+```vue
+<template>
+  <MtButton type="primary">
+    主要按钮
+  </MtButton>
+  <MtButton type="success">
+    成功按钮
+  </MtButton>
+  <MtButton type="danger">
+    危险按钮
+  </MtButton>
+</template>
 ```
 
 ### 对话框
 
 ```vue
-<mt-dialog v-model="visible" title="标题">
-  <p>对话框内容</p>
-  <template #footer>
-    <mt-button @click="visible = false">取消</mt-button>
-    <mt-button type="primary" @click="visible = false">确定</mt-button>
-  </template>
-</mt-dialog>
+<template>
+  <MtDialog v-model="visible" title="标题">
+    <p>对话框内容</p>
+    <template #footer>
+      <MtButton @click="visible = false">
+        取消
+      </MtButton>
+      <MtButton type="primary" @click="visible = false">
+        确定
+      </MtButton>
+    </template>
+  </MtDialog>
+</template>
 ```
 
 ### 消息提示
@@ -144,30 +169,41 @@ app.mount('#app')
 import { MtMessage } from '@mingto/mt-ui'
 
 MtMessage.success('操作成功')
-MtMessage.error('操作失败')
 MtMessage.warning('警告提示')
+MtMessage.error('操作失败')
 ```
 
-### 文件上传
+### 上传
 
 ```vue
-<mt-upload v-model="fileList" :limit="9">
-  <mt-button type="primary">点击上传</mt-button>
-</mt-upload>
+<template>
+  <MtUpload v-model="fileList" :limit="9">
+    <MtButton type="primary">
+      点击上传
+    </MtButton>
+  </MtUpload>
+</template>
 ```
 
-## 全局配置
+### 全局配置
 
 ```vue
-<mt-config-provider :locale="{ lang: 'en' }">
-  <app />
-</mt-config-provider>
+<template>
+  <MtConfigProvider :locale="{ lang: 'en' }">
+    <App />
+  </MtConfigProvider>
+</template>
 ```
 
-## 完整文档
+## 其它导出
+
+```typescript
+import { iconfontJson } from '@mingto/mt-ui'
+import { useLocale } from '@mingto/mt-ui'
+```
 
-更多组件和详细用法请参考 [官方文档](https://mingto.github.io/mt-utils/ui/)
+包内同时导出 `hooks` 与 `locale` 模块，可按需从主入口导入使用。
 
 ## 许可证
 
-MIT
+ISC