morghulis 2.0.65 → 2.0.67

package/README.md

@@ -1,99 +1,485 @@
-# Morghulis 按钮组件
+# Morghulis UI 组件库
 
-一个简单的Vue 3 TypeScript按钮组件库，提供美观且易用的按钮组件。
+基于Vue 3和TypeScript的数据库便捷搭建UI组件库，集成了Element Plus和FontAwesome图标，提供丰富的数据库操作界面组件。
 
-## 安装
+## 特性
 
-```bash
-npm install morghulis
+- 基于Vue 3和TypeScript开发
+- 自动集成Element Plus，无需额外安装
+- 集成FontAwesome图标
+- 提供高度可定制的对话框组件，适用于数据库操作交互
+- 简化数据库表单创建和管理流程
+- 内置常用数据库操作UI模板
+
+## 快速开始
+
+在你的Vue 3项目中引入并使用组件库：
+
+```js
+// main.ts 或 main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createMorghulis } from 'morghulis'
+import 'morghulis/dist/style.css'
+
+const app = createApp(App)
+
+// 使用Morghulis UI，自动集成Element Plus
+app.use(createMorghulis())
+
+app.mount('#app')
 ```
 
-## 使用
+## 组件
+
+### MTable 表格组件
 
-### 基本用法
+高度可定制的表格组件，适用于数据展示和操作。
+
+#### 基本用法
 
 ```vue
 <template>
-  <MButton>默认按钮</MButton>
-  <MButton color="success" round>成功按钮</MButton>
-  <MButton color="warning" size="large">警告按钮</MButton>
-  <MButton color="danger" disabled>危险按钮</MButton>
+  <m-table
+    :view="tableView"
+    :loading="loading"
+    :buttons="tableButtons"
+  >
+    <!-- 自定义单元格 -->
+    <template #cell="{ field, row, prop }">
+      <m-cell
+        :field="field"
+        :bean="row"
+        :disabled="false"
+      ></m-cell>
+    </template>
+    
+    <!-- 自定义头部 -->
+    <template #header>
+      <h3>表格标题</h3>
+    </template>
+    
+    <!-- 自定义底部 -->
+    <template #footer>
+      <el-pagination :total="total" />
+    </template>
+  </m-table>
 </template>
 
-<script setup lang="ts">
-import { MButton } from 'morghulis'
+<script setup>
+import { ref } from 'vue'
+
+// 表格视图定义
+const tableView = ref({
+  fields: {
+    name: { label: '姓名', domain: 'string' },
+    age: { label: '年龄', domain: 'number' },
+    birthday: { label: '生日', domain: 'date' }
+  }
+})
+
+// 表格按钮定义
+const tableButtons = [
+  {
+    title: '编辑',
+    type: 'primary',
+    handler: (row) => {
+      console.log('编辑行:', row)
+    }
+  },
+  {
+    title: '删除',
+    type: 'danger',
+    handler: (row) => {
+      console.log('删除行:', row)
+    }
+  }
+]
+
+const loading = ref(false)
+const total = ref(100)
 </script>
 ```
 
-### 导入样式
+#### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| loading | boolean | false | 是否显示加载状态 |
+| view | MetaView | - | 表格视图定义，包含字段配置 |
+| buttons | MTableButton[] | [] | 表格行操作按钮配置 |
+| columns | MTableColumn[] | [] | 自定义列配置 |
+| sortableCallback | Function | - | 排序回调函数 |
+| border | boolean | true | 是否显示边框 |
+| fit | boolean | true | 列的宽度是否自撑开 |
+| showHeader | boolean | true | 是否显示表头 |
+| highlightCurrentRow | boolean | false | 是否高亮当前行 |
+
+#### 插槽
+
+| 插槽名 | 说明 |
+| --- | --- |
+| header | 表格顶部区域 |
+| header-tool | 表格顶部工具区域 |
+| footer | 表格底部区域 |
+| footer-tool | 表格底部工具区域 |
+| cell | 自定义单元格内容，参数包含 field, row, prop |
+| pop-meta | 元数据弹出框内容 |
+| pop-search | 搜索弹出框内容 |
+| pop-field | 字段弹出框内容 |
+| pop-cell | 单元格弹出框内容 |
+| pop-index | 索引弹出框内容 |
+
+#### 方法
+
+| 方法名 | 参数 | 说明 |
+| --- | --- | --- |
+| getSelection | - | 获取当前选中的行 |
+| setSelection | (rows) | 设置选中的行 |
+| closePopover | - | 关闭当前打开的弹出框 |
+
+### MCell 单元格组件
+
+根据字段类型自动渲染不同类型的单元格组件。
+
+#### 基本用法
+
+```vue
+<template>
+  <m-cell
+    :field="field"
+    :bean="dataItem"
+    :disabled="false"
+  ></m-cell>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// 字段定义
+const field = ref({
+  prop: 'name',
+  label: '姓名',
+  domain: 'string' // 可选值: string, number, boolean, date, time, select, color 等
+})
 
-```ts
-// 在main.ts中导入样式
-import 'morghulis/dist/morghulis.css'
+// 数据项
+const dataItem = ref({
+  name: '张三',
+  age: 30,
+  isActive: true
+})
+</script>
 ```
 
-### 使用弹窗功能
+#### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| field | MetaField | - | 字段定义，包含prop、domain等属性 |
+| bean | DataItem | - | 数据对象 |
+| disabled | boolean | false | 是否禁用编辑 |
+
+### MDialog 对话框组件
+
+高度可定制的对话框组件，适用于数据库操作交互。
+
+#### 基本用法
 
 ```vue
 <template>
-  <MButton ref="buttonRef" popupMessage="自定义弹窗消息">点击弹窗</MButton>
-  <button @click="showCustomPopup">手动调用弹窗</button>
+  <m-dialog
+    v-model="dialogVisible"
+    title="用户信息"
+    sub-title="编辑用户详情"
+    :confirm="handleConfirm"
+  >
+    <!-- 对话框内容 -->
+  </m-dialog>
+  
+  <el-button @click="openDialog">打开对话框</el-button>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
-import { MButton } from 'morghulis'
 
-const buttonRef = ref()
+const dialogVisible = ref(false)
+const dialogRef = ref(null)
 
-function showCustomPopup() {
-  buttonRef.value.popup('这是一个自定义弹窗！')
+function openDialog() {
+  // 可以通过ref调用open方法打开对话框并传递数据
+  dialogRef.value.open({id: 1, name: '张三'})
+}
+
+function handleConfirm(data, done) {
+  // 处理确认逻辑
+  console.log('提交的数据:', data)
+  // 完成后关闭对话框
+  done()
 }
 </script>
 ```
 
-## API
+#### 属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| modelValue | boolean | false | 控制对话框显示/隐藏 |
+| title | string | '对话框' | 对话框标题 |
+| subTitle | string | '' | 对话框副标题 |
+| width | string/number | 600 | 对话框宽度 |
+| fullscreen | boolean | false | 是否全屏显示 |
+| 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 | '取消' | 取消按钮文本 |
+
+#### 方法
+
+| 方法名 | 参数 | 说明 |
+| --- | --- | --- |
+| open | (data, config) | 打开对话框并传入数据，config可选，包含title和subTitle |
+| close | - | 关闭对话框 |
+
+#### 插槽
+
+| 插槽名 | 说明 |
+| --- | --- |
+| default | 对话框内容 |
+| title | 自定义标题区域 |
+| sub-title | 自定义副标题区域 |
+| 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
 
-| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
-|-------|------|-------|-------|------|
-| color | string | 'primary' | 'primary', 'success', 'warning', 'danger', 'info' | 按钮颜色 |
-| size | string | 'medium' | 'small', 'medium', 'large' | 按钮尺寸 |
-| round | boolean | false | - | 是否为圆角按钮 |
-| disabled | boolean | false | - | 是否禁用 |
-| popupMessage | string | '按钮被点击！' | - | 自定义弹窗消息 |
+提供警告对话框功能。
 
-### 事件
+```js
+import { $alert } from 'morghulis'
 
-| 事件名 | 参数 | 说明 |
-|-------|------|------|
-| click | MouseEvent | 按钮点击事件 |
-| popup | string | 弹窗显示事件，参数为弹窗消息 |
+// 成功提示
+$alert.success('操作成功', '提示').then(() => {
+  // 点击确定按钮后的回调
+})
 
-### 方法
+// 信息提示
+$alert.info('提示信息')
+
+// 警告提示
+$alert.warning('警告信息', '警告')
+
+// 错误提示
+$alert.error('错误信息', '错误')
+```
+
+#### 方法
 
 | 方法名 | 参数 | 返回值 | 说明 |
-|-------|------|-------|------|
-| popup | message: string | string | 显示弹窗，参数为弹窗消息 |
+| --- | --- | --- | --- |
+| info | (message: string, title?: string) | Promise | 显示信息警告框 |
+| success | (message: string, title?: string) | Promise | 显示成功警告框 |
+| warning | (message: string, title?: string) | Promise | 显示警告警告框 |
+| error | (message: string, title?: string) | Promise | 显示错误警告框 |
 
-## Python使用方法
+### $confirm
 
-当使用pip安装morghulis包后，您可以在Python项目中使用此组件，并享受自动代码补全功能。
+提供确认对话框功能。
 
-```python
-# 在您的Python项目中使用
-from morghulis import MButton
+```js
+import { $confirm } from 'morghulis'
 
-# 创建按钮实例
-button = MButton(
-    color="primary",
-    size="medium",
-    round=True,
-    disabled=False,
-    popupMessage="这是一个弹窗消息"
-)
+// 确认操作
+$confirm.warning('确定要删除吗?', '警告').then(() => {
+  // 点击确定按钮后的回调
+}).catch(() => {
+  // 点击取消按钮后的回调
+})
+```
 
-# 调用按钮方法
-button.popup("显示自定义弹窗")
+#### 方法
+
+| 方法名 | 参数 | 返回值 | 说明 |
+| --- | --- | --- | --- |
+| info | (message: string, title?: string) | Promise | 显示信息确认框 |
+| success | (message: string, title?: string) | Promise | 显示成功确认框 |
+| warning | (message: string, title?: string) | Promise | 显示警告确认框 |
+| error | (message: string, title?: string) | Promise | 显示错误确认框 |
+
+## 配置选项
+
+在使用`createMorghulis`函数时，可以传入以下配置选项：
+
+```js
+app.use(createMorghulis({
+  baseURL: '/api/',  // API基础路径
+  minioURL: '/dfs/', // 文件服务基础路径
+  // 其他配置...
+}))
 ```
+
+| 选项名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| baseURL | string | '/api/' | API基础路径 |
+| minioURL | string | '/dfs/' | 文件服务基础路径 |
+| timeout | number | - | 请求超时时间 |
+| headers | object | - | 请求头配置 |