@me-framework/me-ui-antdv-next 0.0.35 → 0.0.36

package/README.md

@@ -1,56 +1,67 @@
 # me-ui-antdv-next
 
-#### 介绍
-
-基于 Vue 3 + TypeScript + antdv-next 的企业级 UI 组件库。
-
-- Vue 3 Composition API
-- TypeScript 类型支持
-- antdv-next 生态
-- Lucide 图标库
-- Vite 构建
-
-#### 软件架构
-
-- `src/` - 组件库源码
-  - `components/` - 组件目录，每个组件一个子目录
-  - `styles/` - 全局样式和设计变量
-  - `utils/` - 工具函数
-  - `composables/` - 组合式函数
-  - `types/` - 全局类型定义
-  - `index.ts` - 组件库入口
-- `demo/` - 开发演示站点
-  - `views/` - 演示页面
-  - `layout/` - 布局组件
-  - `router/` - 路由配置
-  - `composables/` - 演示用组合式函数
-  - `config/` - 配置文件
-- `document/` - Markdown 格式文档
-- `scripts/` - 发布脚本
-
-#### 安装教程
+> 基于 Vue 3 + TypeScript + antdv-next 的企业级 UI 组件库
+
+## 特性
+
+- **Vue 3 Composition API** + `<script setup>`
+- **TypeScript** 全量类型支持，附带组件级子路径类型
+- 基于 **antdv-next**（Ant Design Vue 的 Vue 3 分支）二次封装，`a-` 前缀组件由消费项目全局注册
+- **Lucide** 图标库 + 支持阿里 **iconfont** 动态加载
+- **双构建形态**：全量（ES + UMD + 单 style.css）与按需（组件级子路径 + Resolver）
+- Vite 8 构建，支持按需导入自动 Tree-shaking
+
+## 组件列表
+
+| 分类 | 组件 | 说明 |
+| --- | --- | --- |
+| 基础 | [MeIcon](document/components/me-icon.md) | 图标（Lucide + iconfont） |
+| 基础 | [MeText](document/components/me-text.md) | 文字 |
+| 导航 | [MeBreadcrumb](document/components/me-breadcrumb.md) | 面包屑 |
+| 导航 | [MeNav](document/components/me-nav.md) | 导航标签（手写斜角 tab） |
+| 导航 | [MeMenu](document/components/me-menu.md) | 导航菜单 |
+| 导航 | [MeTreeMenu](document/components/me-tree-menu.md) | 树形菜单 |
+| 布局 | [MeBox](document/components/me-box.md) | 容器 |
+| 布局 | [MeCard](document/components/me-card.md) | 卡片 |
+| 布局 | [MeBody](document/components/me-body.md) | 内容体 |
+| 布局 | [MeSkeleton](document/components/me-skeleton.md) | 骨架屏 |
+| 布局 | [MeCodeBox](document/components/me-code-box.md) | 代码展示（含行号高亮） |
+| 表单 | [MeInputGps](document/components/me-input-gps.md) | GPS 坐标输入 |
+| 表单 | [MeInputIconSelector](document/components/me-input-icon-selector.md) | 图标选择器 |
+| 表单 | [MeInputRadio](document/components/me-input-radio.md) | 单选卡片 |
+| 表单 | [MeLoadJson](document/components/me-load-json.md) | JSON 导入编辑器 |
+| 表单 | [MeInputProperty](document/components/me-input-property.md) | 属性编辑器（支持数组/弹窗模式） |
+| 表单 | [MeInputNumber](document/components/me-input-number.md) | 数字输入框 |
+| 表单 | [MeInputJson](document/components/me-input-json.md) | JSON 编辑器 |
+| 表单 | [MeLoginPage](document/components/me-login-page.md) | 登录页 |
+| 反馈 | [MeMessage](document/components/me-message.md) | 消息对话框（支持函数式调用） |
+| 反馈 | [MeModal](document/components/me-modal.md) | 对话框 |
+
+> 组件完整 API 与示例见 `document/components/` 目录，在线演示见 `demo/`。
+
+## 环境要求
+
+- **Vue** ≥ 3.0（peerDependency）
+- **antdv-next**：组件内部使用 `a-` 前缀组件，消费项目需先全局注册
+- **TypeScript** ≥ 4.7（支持 `exports` 子路径通配解析）
+
+## 安装
 
 ```bash
-# 安装依赖
-npm install
+npm install @me-framework/me-ui-antdv-next
+# 或
+yarn add @me-framework/me-ui-antdv-next
+# 或
+pnpm add @me-framework/me-ui-antdv-next
+```
 
-# 启动开发服务器
-npm run dev
+> 注意：`antdv-next` 为 peer 依赖，需在消费项目中一并安装。
 
-# 构建组件库
-npm run build
+## 快速开始
 
-# 构建演示站点
-npm run build:demo
-
-# 类型检查
-npm run type-check
-```
-
-#### 使用说明
+### 全局引入
 
 ```ts
-// 全局引入
 import { createApp } from 'vue'
 import Antd from 'antdv-next'
 import 'antdv-next/dist/reset.css'
@@ -58,27 +69,26 @@ import MeUiAntdv from '@me-framework/me-ui-antdv-next'
 import '@me-framework/me-ui-antdv-next/dist/style.css'
 
 const app = createApp(App)
-app.use(Antd)
+app.use(Antd)        // 先注册 antdv-next（组件内部依赖 a- 前缀组件）
 app.use(MeUiAntdv)
 app.mount('#app')
 ```
 
 ```vue
-<!-- 组件使用 -->
 <template>
-  <MeButton type="primary">按钮</MeButton>
+  <MeIcon name="Home" />
 </template>
 ```
 
 ### 按需引入（推荐，减小打包体积）
 
-组件库支持**组件级子路径按需导入**，每个组件可独立引入 JS 与样式，避免全量体积负担。
+组件库支持**组件级子路径按需导入**，每个组件可独立引入 JS 与样式。
 
 ```ts
 import { createApp } from 'vue'
 import Antd from 'antdv-next'
 import 'antdv-next/dist/reset.css'
-// 1) 先引入基础 token 基线（设计变量：:root / html.dark），按需引任意组件都需引一次
+// 1) 先引入基础 token 基线（:root / html.dark 设计变量），按需引入任意组件都需引一次
 import '@me-framework/me-ui-antdv-next/base.css'
 // 2) 按需引入组件
 import MeMenu from '@me-framework/me-ui-antdv-next/menu'
@@ -90,7 +100,7 @@ app.use(MeMenu)
 app.mount('#app')
 ```
 
-#### 使用 unplugin-vue-components 自动按需引入
+### 使用 unplugin-vue-components 自动按需引入
 
 在 Vite 项目中配置：
 
@@ -111,13 +121,109 @@ export default defineConfig({
 > - 组件内部依赖的兄弟组件（如 `menu` 依赖 `icon`）会随子入口自动引入，无需手动补引。
 > - 需要 TypeScript ≥ 4.7 以支持 `exports` 子路径通配解析。
 
-#### 参与贡献
+### 函数式 API
+
+`MeMessage` 支持函数式调用，可传入配置对象直接弹出消息对话框：
+
+```ts
+import { $message } from '@me-framework/me-ui-antdv-next'
+
+// 打开（normal / process 双状态，请求期间自动切换 loading）
+const instance = $message({
+  data: {
+    normal: { title: '提示', message: '确认执行该操作？' },
+    process: { title: '处理中', message: '请稍候…', loading: true },
+  },
+  handler: {
+    confirm: (data) => { /* 确认回调 */ },
+    cancel: () => { /* 取消回调 */ },
+  },
+})
+// 手动关闭
+instance.close()
+// 关闭所有
+$message.closeAll()
+```
+
+`MeIcon` 提供 `loadIconfont()` 动态加载阿里 iconfont Symbol 资源：
+
+```ts
+import { loadIconfont } from '@me-framework/me-ui-antdv-next'
+
+loadIconfont('//at.alicdn.com/t/c/font_xxx.js')
+```
+
+## 构建产物
+
+包同时输出**全量**与**按需**两种形态，均通过 `package.json` 的 `exports` 字段暴露子路径：
+
+```
+dist/
+├── me-ui-antdv-next.js          # 全量 ES
+├── me-ui-antdv-next.umd.cjs     # 全量 UMD（<script> 直引）
+├── style.css                    # 全量样式（已含 base token）
+├── index.d.ts                   # 全量类型入口
+├── base/index.css               # 按需：基础 token 基线
+├── menu/                        # 按需：每组件一个子路径
+│   ├── index.js
+│   ├── index.css
+│   └── index.d.ts
+├── resolver/index.js            # unplugin Resolver
+└── ...
+```
+
+## 本地开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发演示服务器
+npm run dev
+
+# 构建组件库（vue-tsc 类型检查 + 全量构建 + 按需构建 + 重组子路径 dts）
+npm run build
+# 或
+npm run build:lib
+
+# 构建演示站点
+npm run build:demo
+
+# 类型检查
+npm run type-check
+
+# 发布（patch/minor/major，或 beta 预发布）
+npm run release
+npm run release:beta
+npm run quick-patch   # 快速 patch 版本发布
+```
+
+## 项目结构
+
+```
+├── src/                     # 组件库源码
+│   ├── components/          # 组件目录，每个组件一个子目录（含 index.ts/index.vue/style.scss/types.ts）
+│   ├── styles/              # 全局样式与设计变量（base.scss 为按需 token 基线入口）
+│   ├── resolver/            # 按需 Resolver（componentDirMap 维护组件名→目录映射）
+│   ├── utils/               # 工具函数
+│   ├── composables/         # 组合式函数
+│   ├── types/               # 全局类型定义
+│   └── index.ts             # 组件库入口
+├── demo/                    # 开发演示站点（views/layout/router/config）
+├── document/                # Markdown 组件文档
+├── scripts/                 # 构建后处理与发布脚本
+├── vite.config.ts           # 全量构建配置（ES + UMD + style.css）
+├── vite.ondemand.config.ts  # 按需构建配置（多入口 + 子路径 dts）
+└── package.json             # 包入口与 exports 声明
+```
+
+## 参与贡献
 
 1.  Fork 本仓库
-2.  新建 Feat_xxx 分支
+2.  新建 `Feat_xxx` 分支
 3.  提交代码
 4.  新建 Pull Request
 
-#### License
+## License
 
-MIT
+[MIT](LICENSE)