morghulis 1.0.16 → 1.0.18

package/README.md

@@ -11,18 +11,6 @@
 - 简化数据库表单创建和管理流程
 - 内置常用数据库操作UI模板
 
-## 安装
-
-```bash
-npm install morghulis
-```
-
-或
-
-```bash
-yarn add morghulis
-```
-
 ## 快速开始
 
 在你的Vue 3项目中引入并使用组件库：
@@ -32,6 +20,7 @@ yarn add morghulis
 import { createApp } from 'vue'
 import App from './App.vue'
 import { createMorghulis } from 'morghulis'
+import 'morghulis/dist/style.css'
 
 const app = createApp(App)
 
@@ -45,36 +34,40 @@ app.mount('#app')
 
 ### 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>
+  <m-dialog
+    v-model="dialogVisible"
+    title="用户信息"
+    sub-title="编辑用户详情"
+    :confirm="handleConfirm"
+  >
+    <!-- 对话框内容 -->
+  </m-dialog>
+  
+  <el-button @click="openDialog">打开对话框</el-button>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 
 const dialogVisible = ref(false)
+const dialogRef = ref(null)
 
-const handleConfirm = () => {
+function openDialog() {
+  // 可以通过ref调用open方法打开对话框并传递数据
+  dialogRef.value.open({id: 1, name: '张三'})
+}
+
+function handleConfirm(data, done) {
   // 处理确认逻辑
-  console.log('确认')
-  dialogVisible.value = false
-  return Promise.resolve()
+  console.log('提交的数据:', data)
+  // 完成后关闭对话框
+  done()
 }
 </script>
 ```
@@ -83,17 +76,36 @@ const handleConfirm = () => {
 
 | 属性名 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| modelValue / v-model | boolean | false | 控制对话框是否显示 |
+| modelValue | boolean | false | 控制对话框显示/隐藏 |
 | title | string | '对话框' | 对话框标题 |
-| subTitle | string | - | 对话框副标题 |
-| width | string / number | 600 | 对话框宽度 |
+| subTitle | string | '' | 对话框副标题 |
+| width | string/number | 600 | 对话框宽度 |
 | fullscreen | boolean | false | 是否全屏显示 |
-| confirm | Function | - | 确认按钮点击时的回调函数，返回Promise |
-| cancel | Function | - | 取消按钮点击时的回调函数 |
+| top | string | '30px' | 对话框距离顶部的距离 |
+| modal | boolean | true | 是否显示遮罩层 |
+| modalClass | string | 'mor-dialog-modal' | 遮罩层的自定义类名 |
+| headerClass | string | 'mor-dialog-header' | 头部的自定义类名 |
+| bodyClass | string | 'mor-dialog-body-wrapper' | 内容区的自定义类名 |
+| footerClass | string | 'mor-dialog-footer' | 底部的自定义类名 |
+| appendToBody | boolean | true | 是否将对话框插入至body元素 |
+| lockScroll | boolean | true | 是否在对话框出现时将body滚动锁定 |
+| closeOnClickModal | boolean | true | 是否可以通过点击遮罩层关闭对话框 |
+| closeOnPressEscape | boolean | true | 是否可以通过按下ESC键关闭对话框 |
+| showClose | boolean | true | 是否显示关闭按钮 |
+| draggable | boolean | false | 是否可拖拽 |
+| center | boolean | false | 是否对头部和底部采用居中布局 |
+| destroyOnClose | boolean | false | 关闭时是否销毁对话框内的元素 |
+| confirm | Function | - | 确认按钮点击时的回调函数，参数为(data, done) |
+| cancel | Function | - | 取消按钮点击时的回调函数，参数为(data, done) |
 | confirmButtonText | string | '确定' | 确认按钮文本 |
 | cancelButtonText | string | '取消' | 取消按钮文本 |
 
-组件还支持Element Plus Dialog的所有属性。
+#### 方法
+
+| 方法名 | 参数 | 说明 |
+| --- | --- | --- |
+| open | (data, config) | 打开对话框并传入数据，config可选，包含title和subTitle |
+| close | - | 关闭对话框 |
 
 #### 插槽
 
@@ -105,20 +117,221 @@ const handleConfirm = () => {
 | header | 自定义头部区域 |
 | footer | 自定义底部区域 |
 
+## Hooks
+
+### useMorghulisCookies
+
+提供Cookie操作的工具函数。
+
+```js
+import { useMorghulisCookies } from 'morghulis'
+
+const { get, set, remove, load } = useMorghulisCookies()
+
+// 设置Cookie
+set('user.name', '张三')
+
+// 获取Cookie
+const userName = get('user.name')
+
+// 加载Cookie，如果不存在则设置默认值
+const config = load('config', { theme: 'dark' })
+
+// 删除Cookie
+remove('user.name')
+```
+
+#### 方法
+
+| 方法名 | 参数 | 返回值 | 说明 |
+| --- | --- | --- | --- |
+| get | (path: string) | any | 获取指定路径的Cookie值 |
+| set | (path: string, value?: any) | void | 设置指定路径的Cookie值 |
+| load | (key: string, value?: any) | any | 获取指定键的Cookie值，如果不存在则设置默认值 |
+| remove | (path: string) | void | 删除指定路径的Cookie值 |
+
+### useMorghulisAuthorize
+
+提供用户授权相关的工具函数。
+
+```js
+import { useMorghulisAuthorize } from 'morghulis'
+
+const { $client, user, check, login, logout, bearer } = useMorghulisAuthorize()
+
+// 获取当前用户ID
+const currentUser = user()
+
+// 检查是否为指定用户
+const isAdmin = check('admin')
+
+// 登录
+login('user123')
+
+// 登出
+logout()
+
+// 获取Bearer令牌
+const token = bearer()
+```
+
+#### 方法和属性
+
+| 名称 | 类型 | 说明 |
+| --- | --- | --- |
+| $client | string | 客户端唯一标识 |
+| user | Function | 获取当前用户ID |
+| check | Function | 检查当前用户是否为指定用户 |
+| login | Function | 设置用户登录状态 |
+| logout | Function | 清除用户登录状态 |
+| bearer | Function | 获取Bearer认证令牌 |
+
+### useMorghulisChannel
+
+提供通道相关的工具函数。
+
+```js
+import { useMorghulisChannel } from 'morghulis'
+
+const { http } = useMorghulisChannel('/api')
+
+// 使用http发送请求
+http.get('/users').then(response => {
+  console.log(response.data)
+})
+```
+
+#### 方法
+
+| 方法名 | 返回值 | 说明 |
+| --- | --- | --- |
+| http | AxiosInstance | 返回配置好的Axios实例 |
+
+### useMorghulisRequest
+
+提供请求相关的工具函数。
+
+```js
+import { useMorghulisRequest } from 'morghulis'
+
+const { getRequest } = useMorghulisRequest('/api')
+
+// 获取配置好的请求实例
+const http = getRequest()
+
+// 发送请求
+http.get('/users').then(response => {
+  console.log(response.data)
+})
+```
+
+#### 方法
+
+| 方法名 | 参数 | 返回值 | 说明 |
+| --- | --- | --- | --- |
+| getRequest | (auth?: boolean) | AxiosInstance | 获取配置好的Axios实例，auth参数指定是否需要认证 |
+
+## 工具函数
+
+### $message
+
+提供消息提示功能。
+
+```js
+import { $message } from 'morghulis'
+
+// 成功提示
+$message.success('操作成功')
+
+// 信息提示
+$message.info('提示信息')
+
+// 警告提示
+$message.warning('警告信息')
+
+// 错误提示
+$message.error('错误信息')
+```
+
+#### 方法
+
+| 方法名 | 参数 | 说明 |
+| --- | --- | --- |
+| info | (message: string) | 显示信息提示 |
+| success | (message: string) | 显示成功提示 |
+| warning | (message: string) | 显示警告提示 |
+| error | (message: string) | 显示错误提示 |
+
+### $alert
+
+提供警告对话框功能。
+
+```js
+import { $alert } from 'morghulis'
+
+// 成功提示
+$alert.success('操作成功', '提示').then(() => {
+  // 点击确定按钮后的回调
+})
+
+// 信息提示
+$alert.info('提示信息')
+
+// 警告提示
+$alert.warning('警告信息', '警告')
+
+// 错误提示
+$alert.error('错误信息', '错误')
+```
+
+#### 方法
+
+| 方法名 | 参数 | 返回值 | 说明 |
+| --- | --- | --- | --- |
+| info | (message: string, title?: string) | Promise | 显示信息警告框 |
+| success | (message: string, title?: string) | Promise | 显示成功警告框 |
+| warning | (message: string, title?: string) | Promise | 显示警告警告框 |
+| error | (message: string, title?: string) | Promise | 显示错误警告框 |
+
+### $confirm
+
+提供确认对话框功能。
+
+```js
+import { $confirm } from 'morghulis'
+
+// 确认操作
+$confirm.warning('确定要删除吗?', '警告').then(() => {
+  // 点击确定按钮后的回调
+}).catch(() => {
+  // 点击取消按钮后的回调
+})
+```
+
+#### 方法
+
+| 方法名 | 参数 | 返回值 | 说明 |
+| --- | --- | --- | --- |
+| info | (message: string, title?: string) | Promise | 显示信息确认框 |
+| success | (message: string, title?: string) | Promise | 显示成功确认框 |
+| warning | (message: string, title?: string) | Promise | 显示警告确认框 |
+| error | (message: string, title?: string) | Promise | 显示错误确认框 |
+
 ## 配置选项
 
-创建Morghulis实例时可以传入配置选项：
+在使用`createMorghulis`函数时，可以传入以下配置选项：
 
 ```js
 app.use(createMorghulis({
-  baseUrl: 'https://api.example.com',
-  timeout: 5000,
-  headers: {
-    'X-Custom-Header': 'value'
-  }
+  baseURL: '/api/',  // API基础路径
+  minioURL: '/dfs/', // 文件服务基础路径
+  // 其他配置...
 }))
 ```
 
-## 许可证
-
-MIT
+| 选项名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| baseURL | string | '/api/' | API基础路径 |
+| minioURL | string | '/dfs/' | 文件服务基础路径 |
+| timeout | number | - | 请求超时时间 |
+| headers | object | - | 请求头配置 |