morghulis 1.0.11 → 1.0.13

package/README.md

@@ -1,33 +1,124 @@
-# morghulis
+# Morghulis UI 组件库
 
-This template should help get you started developing with Vue 3 in Vite.
+基于Vue 3和TypeScript的数据库便捷搭建UI组件库，集成了Element Plus和FontAwesome图标，提供丰富的数据库操作界面组件。
 
-## Recommended IDE Setup
+## 特性
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+- 基于Vue 3和TypeScript开发
+- 自动集成Element Plus，无需额外安装
+- 集成FontAwesome图标
+- 提供高度可定制的对话框组件，适用于数据库操作交互
+- 简化数据库表单创建和管理流程
+- 内置常用数据库操作UI模板
 
-## Type Support for `.vue` Imports in TS
+## 安装
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+```bash
+npm install morghulis
+```
+
+或
+
+```bash
+yarn add morghulis
+```
+
+## 快速开始
 
-## Customize configuration
+在你的Vue 3项目中引入并使用组件库：
 
-See [Vite Configuration Reference](https://vite.dev/config/).
+```js
+// main.ts 或 main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createMorghulis } from 'morghulis'
 
-## Project Setup
+const app = createApp(App)
 
-```sh
-npm install
+// 使用Morghulis UI，自动集成Element Plus
+app.use(createMorghulis())
+
+app.mount('#app')
 ```
 
-### Compile and Hot-Reload for Development
+## 组件
+
+### MDialog 对话框组件
+
+一个基于Element Plus Dialog的增强对话框组件，专为数据库操作设计，提供表单验证、数据预览和批量操作等功能，让数据库操作更加直观和高效。
+
+#### 基本用法
+
+```vue
+<template>
+  <div>
+    <el-button @click="dialogVisible = true">打开对话框</el-button>
+    
+    <MDialog 
+      v-model="dialogVisible" 
+      title="对话框标题"
+      sub-title="副标题"
+      :confirm="handleConfirm"
+    >
+      <p>这是对话框的内容</p>
+    </MDialog>
+  </div>
+</template>
 
-```sh
-npm run dev
+<script setup>
+import { ref } from 'vue'
+
+const dialogVisible = ref(false)
+
+const handleConfirm = () => {
+  // 处理确认逻辑
+  console.log('确认')
+  dialogVisible.value = false
+  return Promise.resolve()
+}
+</script>
 ```
 
-### Type-Check, Compile and Minify for Production
+#### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| modelValue / v-model | boolean | false | 控制对话框是否显示 |
+| title | string | '对话框' | 对话框标题 |
+| subTitle | string | - | 对话框副标题 |
+| width | string / number | 600 | 对话框宽度 |
+| fullscreen | boolean | false | 是否全屏显示 |
+| confirm | Function | - | 确认按钮点击时的回调函数，返回Promise |
+| cancel | Function | - | 取消按钮点击时的回调函数 |
+| confirmButtonText | string | '确定' | 确认按钮文本 |
+| cancelButtonText | string | '取消' | 取消按钮文本 |
+
+组件还支持Element Plus Dialog的所有属性。
+
+#### 插槽
 
-```sh
-npm run build
+| 插槽名 | 说明 |
+| --- | --- |
+| default | 对话框内容 |
+| title | 自定义标题区域 |
+| sub-title | 自定义副标题区域 |
+| header | 自定义头部区域 |
+| footer | 自定义底部区域 |
+
+## 配置选项
+
+创建Morghulis实例时可以传入配置选项：
+
+```js
+app.use(createMorghulis({
+  baseUrl: 'https://api.example.com',
+  timeout: 5000,
+  headers: {
+    'X-Custom-Header': 'value'
+  }
+}))
 ```
+
+## 许可证
+
+MIT