morghulis 1.0.23 → 1.0.25

package/README.md

@@ -1,485 +1,85 @@
-# Morghulis UI 组件库
+# Morghulis
 
-基于Vue 3和TypeScript的数据库便捷搭建UI组件库，集成了Element Plus和FontAwesome图标，提供丰富的数据库操作界面组件。
+一个基于Vue 3的组件库，提供了多种实用组件和工具函数。
 
-## 特性
+## 安装
 
-- 基于Vue 3和TypeScript开发
-- 自动集成Element Plus，无需额外安装
-- 集成FontAwesome图标
-- 提供高度可定制的对话框组件，适用于数据库操作交互
-- 简化数据库表单创建和管理流程
-- 内置常用数据库操作UI模板
+```bash
+npm install morghulis
+```
 
-## 快速开始
+## 使用
 
-在你的Vue 3项目中引入并使用组件库：
+### 全局注册
 
-```js
-// main.ts 或 main.js
+```typescript
 import { createApp } from 'vue'
-import App from './App.vue'
 import { createMorghulis } from 'morghulis'
-import 'morghulis/dist/style.css'
+import App from './App.vue'
 
 const app = createApp(App)
 
-// 使用Morghulis UI，自动集成Element Plus
+// 使用默认配置
 app.use(createMorghulis())
 
+// 或者自定义配置
+app.use(createMorghulis({
+  baseURL: '/api/',
+  minioURL: '/dfs/'
+}))
+
 app.mount('#app')
 ```
 
-## 组件
-
-### MTable 表格组件
+### 单独使用组件
 
-高度可定制的表格组件，适用于数据展示和操作。
+```typescript
+import { MTable, MDialog, MForm, DTable } from 'morghulis'
 
-#### 基本用法
-
-```vue
-<template>
-  <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>
-import { ref } from 'vue'
-
-// 表格视图定义
-const tableView = ref({
-  fields: {
-    name: { label: '姓名', domain: 'string' },
-    age: { label: '年龄', domain: 'number' },
-    birthday: { label: '生日', domain: 'date' }
+// 在组件中使用
+export default {
+  components: {
+    MTable,
+    MDialog,
+    MForm,
+    DTable
   }
-})
-
-// 表格按钮定义
-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 等
-})
-
-// 数据项
-const dataItem = ref({
-  name: '张三',
-  age: 30,
-  isActive: true
-})
-</script>
+}
 ```
 
-#### 属性
+### 使用工具函数
 
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| field | MetaField | - | 字段定义，包含prop、domain等属性 |
-| bean | DataItem | - | 数据对象 |
-| disabled | boolean | false | 是否禁用编辑 |
+```typescript
+import { useMorghulisRequest, useMorghulisCookies } from 'morghulis'
 
-### MDialog 对话框组件
-
-高度可定制的对话框组件，适用于数据库操作交互。
-
-#### 基本用法
-
-```vue
-<template>
-  <m-dialog
-    v-model="dialogVisible"
-    title="用户信息"
-    sub-title="编辑用户详情"
-    :confirm="handleConfirm"
-  >
-    <!-- 对话框内容 -->
-  </m-dialog>
+// 在组件中使用
+setup() {
+  const { get, post } = useMorghulisRequest()
+  const { get: getCookie, set: setCookie } = useMorghulisCookies()
   
-  <el-button @click="openDialog">打开对话框</el-button>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const dialogVisible = ref(false)
-const dialogRef = ref(null)
-
-function openDialog() {
-  // 可以通过ref调用open方法打开对话框并传递数据
-  dialogRef.value.open({id: 1, name: '张三'})
-}
-
-function handleConfirm(data, done) {
-  // 处理确认逻辑
-  console.log('提交的数据:', data)
-  // 完成后关闭对话框
-  done()
+  // 使用这些函数...
 }
-</script>
-```
-
-#### 属性
-
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| 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参数指定是否需要认证 |
+- `MTable`: 表格组件
+- `MDialog`: 对话框组件
+- `MForm`: 表单组件
+- `DTable`: 数据表格组件
 
 ## 工具函数
 
-### $message
-
-提供消息提示功能。
-
-```js
-import { $message } from 'morghulis'
+- `useMorghulisAuthorize`: 授权相关函数
+- `useMorghulisChannel`: 通道相关函数
+- `useMorghulisSockets`: Socket相关函数
+- `useMorghulisRequest`: 请求相关函数
+- `useMorghulisCookies`: Cookie相关函数
 
-// 成功提示
-$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 | 显示错误确认框 |
-
-## 配置选项
-
-在使用`createMorghulis`函数时，可以传入以下配置选项：
-
-```js
-app.use(createMorghulis({
-  baseURL: '/api/',  // API基础路径
-  minioURL: '/dfs/', // 文件服务基础路径
-  // 其他配置...
-}))
-```
+所有类型都已导出，可以直接导入使用：
 
-| 选项名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| baseURL | string | '/api/' | API基础路径 |
-| minioURL | string | '/dfs/' | 文件服务基础路径 |
-| timeout | number | - | 请求超时时间 |
-| headers | object | - | 请求头配置 |
+```typescript
+import { MorghulisOptions, UIFeedbackTypes } from 'morghulis'
+```