morghulis 1.0.31 → 1.0.32

package/README.md

@@ -1,6 +1,6 @@
 # Morghulis
 
-一个基于Vue 3的组件库，提供了多种实用组件和工具函数。
+Morghulis是一个基于Vue 3的UI组件和工具函数库，提供了常用的UI交互、请求处理、Cookie管理等功能。
 
 ## 安装
 
@@ -8,15 +8,14 @@
 npm install morghulis
 ```
 
-## 使用
+## 使用方法
 
-### 全局注册
+### 作为Vue插件使用
 
-```typescript
+```js
 import { createApp } from 'vue'
-import { createMorghulis } from 'morghulis'
-import 'morghulis/dist/index.css'
 import App from './App.vue'
+import { createMorghulis } from 'morghulis'
 
 const app = createApp(App)
 
@@ -25,385 +24,110 @@ app.use(createMorghulis())
 
 // 或者自定义配置
 app.use(createMorghulis({
-  baseURL: '/api/',
-  minioURL: '/dfs/'
+  baseURL: '/custom-api/',
+  minioURL: '/custom-dfs/'
 }))
 
 app.mount('#app')
 ```
 
-### 样式导入
-
-你可以通过以下任意方式导入样式:
-
-```typescript
-// 推荐方式
-import 'morghulis/dist/index.css'
-
-// 或使用以下方式之一
-import 'morghulis/style'
-import 'morghulis/dist/style'
-import 'morghulis/dist/style.css'
-```
-
-### 单独使用组件
-
-```typescript
-import { MDialog, MTable, MForm, DTable, DCell, DForm, DController, MCell } from 'morghulis'
-import 'morghulis/dist/index.css'
-
-// 在组件中使用
-export default {
-  components: {
-    MDialog,
-    MTable,
-    MForm,
-    DTable,
-    DCell,
-    DForm,
-    DController,
-    MCell
-  }
-}
-```
-
 ### 使用工具函数
 
-```typescript
-import { useMorghulisAuthorize, useMorghulisRequest, useMorghulisCookies } from 'morghulis'
-
-// 在组件中使用
-setup() {
-  const { get, post } = useMorghulisRequest()
-  const { get: getCookie, set: setCookie } = useMorghulisCookies()
-  const { login, logout, check, bearer } = useMorghulisAuthorize()
-  
-  // 使用这些函数...
-}
-```
-
-## 组件详解
-
-### MDialog 对话框组件
-
-对话框组件，用于创建自定义对话框。
-
-#### 属性
-
-```typescript
-import { MDialog } from 'morghulis'
-import type { MorDialogProps, MorDialogConfig } from 'morghulis'
-
-// 在模板中使用
-<MDialog
-  v-model="dialogVisible"  // 控制对话框显示/隐藏
-  title="标题"            // 对话框标题
-  subTitle="副标题"       // 对话框副标题
-  :width="600"           // 宽度，支持数字或字符串
-  :fullscreen="false"    // 是否全屏
-  :modal="true"          // 是否显示遮罩层
-  :modalClass="'custom-modal'"  // 遮罩层自定义类名
-  :headerClass="'custom-header'" // 头部自定义类名
-  :bodyClass="'custom-body'"    // 内容区自定义类名
-  :footerClass="'custom-footer'" // 底部自定义类名
-  :appendToBody="true"   // 是否将对话框插入至body元素
-  :lockScroll="true"     // 是否在显示对话框时将body滚动锁定
-  :closeOnClickModal="false" // 是否可通过点击遮罩层关闭对话框
-  :closeOnPressEscape="false" // 是否可通过按ESC键关闭对话框
-  :showClose="true"      // 是否显示关闭按钮
-  :draggable="true"      // 是否可拖拽
-  :center="false"        // 是否居中布局
-  :destroyOnClose="true" // 关闭时销毁其中的元素
-  :confirmButtonText="'确认'" // 确认按钮文字
-  :cancelButtonText="'取消'" // 取消按钮文字
-  :confirm="handleConfirm" // 确认回调，接收(data, done)参数
-  :cancel="handleCancel"   // 取消回调，接收(data, done)参数
-  @close="handleClose"
-  @update:modelValue="(val) => dialogVisible = val"
-  @update:title="(val) => title = val"
-  @update:subTitle="(val) => subTitle = val"
-/>
-```
-
-#### 方法
-
-```typescript
-// 在组件中使用方法
-const dialog = ref()
-
-// 打开对话框，可传入数据和配置
-dialog.value.open(
-  { id: 1, name: '张三' }, // 传递给对话框的数据
-  { title: '用户详情', subTitle: '编辑用户信息' } // 可选配置
-)
-
-// 关闭对话框
-dialog.value.close()
-```
+```js
+import { $message, $alert, $confirm, useMCookies, useMoRequest, useMAuthorize } from 'morghulis'
 
-### MTable 表格组件
-
-通用数据表格组件，支持自定义列和操作按钮。
-
-#### 属性
-
-```typescript
-import { MTable } from 'morghulis'
-import type { MorghulisTableProps, MTableButton, MTableColumn } from 'morghulis'
-
-<MTable
-  :data="tableData"               // 表格数据
-  :view="metaView"                // 元数据视图，定义表格结构
-  :loading="isLoading"            // 加载状态
-  :buttons="tableButtons"         // 操作按钮配置
-  :columns="tableColumns"         // 自定义列配置
-  :sortableCallback="handleSort"  // 排序回调
-  
-  // 以下是基础表格属性
-  :border="true"                  // 是否带有边框
-  :stripe="true"                  // 是否为斑马纹表格
-  :highlightCurrentRow="true"     // 是否高亮当前行
-  :row-key="'id'"                 // 行数据的唯一标识
-  :headerCellClassName="'custom-header'" // 表头单元格类名
-  
-  @selection-change="handleSelectionChange" // 选择项变化事件
-  @sort="handleColumnSort"        // 排序事件
->
-  <!-- 自定义插槽 -->
-  <template #header>
-    <!-- 自定义表格头部内容 -->
-  </template>
-  
-  <template #header-tool>
-    <!-- 自定义表格头部工具区 -->
-  </template>
-  
-  <template #cell="{ field, row, prop }">
-    <!-- 自定义单元格内容 -->
-  </template>
-  
-  <template #footer>
-    <!-- 自定义表格底部内容 -->
-  </template>
-  
-  <template #footer-tool>
-    <!-- 自定义表格底部工具区 -->
-  </template>
-</MTable>
-```
+// 使用消息提示
+$message.success('操作成功')
+$message.error('操作失败')
+$message.warning('警告信息')
+$message.info('提示信息')
 
-#### 方法
+// 使用警告框
+$alert.info('信息内容', '标题').then(() => {
+  // 用户点击确定按钮后的操作
+})
 
-```typescript
-// 引用表格组件
-const table = ref()
+// 使用确认框
+$confirm.warning('确定要删除吗?', '警告').then(() => {
+  // 用户点击确定按钮后的操作
+}).catch(() => {
+  // 用户点击取消按钮后的操作
+})
 
-// 获取当前选中的行
-const selectedRows = table.value.getSelection()
+// 使用Cookie管理
+const { get, set, remove, load } = useMCookies()
+set('user.name', '张三')
+const userName = get('user.name') // 获取Cookie值
 
-// 设置选中的行
-table.value.setSelection(rows)
+// 使用授权管理
+const { login, logout, user, check } = useMAuthorize()
+login('user123') // 登录
+logout() // 登出
+const currentUser = user() // 获取当前用户ID
 
-// 关闭弹出框
-table.value.closePopover()
+// 使用请求工具
+const { getHttpRequest, getMinioRequest } = useMoRequest()
+const httpRequest = getHttpRequest()
+httpRequest.get('/users').then(data => {
+  console.log(data)
+})
 ```
 
-### MForm 表单组件
+## 类型支持
 
-表单组件，支持自动生成表单字段和字段验证。
+Morghulis提供了完整的TypeScript类型定义，支持IDE的代码补全：
 
-#### 属性
+```ts
+import type { MOptions, MFeedback, MMsg, MBox } from 'morghulis'
 
-```typescript
-import { MForm } from 'morghulis'
-import type { MFormProps } from 'morghulis'
-
-<MForm
-  :item="formData"     // 表单数据
-  :view="metaView"     // 元数据视图，定义表单结构
-  :db="databaseObject" // 数据库对象，用于CRUD操作
-/>
-```
-
-#### 方法
-
-```typescript
-// 引用表单组件
-const form = ref()
-
-// 获取表单数据
-const formData = form.value.getData()
-
-// 重置特定字段
-form.value.reset('fieldName')
-```
-
-### DTable 数据表格组件
-
-基于MTable的数据表格组件，提供完整的CRUD功能。
-
-#### 属性
-
-```typescript
-import { DTable } from 'morghulis'
-import type { DTableProps } from 'morghulis'
-
-<DTable
-  :db="databaseObject"     // 数据库对象，用于CRUD操作
-  :entity="'users'"        // 实体名称，对应后端接口
-  :code="'user'"           // 代码标识，用于元数据
-  :size="10"               // 每页数量
-  :page="1"                // 当前页码
-  :includes="includeFields" // 包含的字段
-  :excludes="excludeFields" // 排除的字段
-  :orders="orderConfig"    // 排序配置
-  :buttons="actionButtons" // 操作按钮
-  :columns="customColumns" // 自定义列
-  :auth="requireAuth"      // 是否需要授权
->
-  <!-- 自定义插槽 -->
-  <template #header>
-    <!-- 自定义头部 -->
-  </template>
-  
-  <template #cell="{ field, row, prop }">
-    <!-- 自定义单元格 -->
-  </template>
-</DTable>
+// 使用类型定义
+const customMessage: MMsg = {
+  // IDE将提供代码补全
+}
 ```
 
-#### 方法
+## 组件
 
-```typescript
-// 引用数据表格组件
-const dataTable = ref()
+库中集成了Element Plus和FontAwesome图标库：
 
-// 刷新表格数据
-dataTable.value.refresh()
-
-// 添加新记录
-dataTable.value.add()
-
-// 编辑某条记录
-dataTable.value.edit(row)
-
-// 删除某条记录
-dataTable.value.remove(row)
-
-// 加载数据
-dataTable.value.load()
-
-// 上传数据
-dataTable.value.upload(dataArray)
-
-// 修改每页显示数量
-dataTable.value.handlePageSizeChange(20)
-
-// 修改当前页码
-dataTable.value.handleCurrentPageChange(2)
+```vue
+<template>
+  <div>
+    <!-- FontAwesome图标使用 -->
+    <fa icon="user" />
+    
+    <!-- Element Plus组件可以直接使用 -->
+    <el-button type="primary">按钮</el-button>
+  </div>
+</template>
 ```
 
-### DForm 数据表单组件
+## Recommended IDE Setup
 
-用于数据操作的表单组件。
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 
-#### 属性
+## Type Support for `.vue` Imports in TS
 
-```typescript
-import { DForm } from 'morghulis'
-import type { DFormProps } from 'morghulis'
+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.
 
-<DForm
-  :selection="selectedRows" // 选中的数据行
-  :view="metaView"         // 元数据视图
-  :db="databaseObject"     // 数据库对象
-  :bean="formData"         // 表单数据
-/>
-```
+## Customize configuration
 
-#### 方法
+See [Vite Configuration Reference](https://vite.dev/config/).
 
-```typescript
-// 引用数据表单
-const dataForm = ref()
+## Project Setup
 
-// 获取表单数据
-const formData = dataForm.value.getData()
+```sh
+npm install
 ```
 
-### DCell 数据单元格组件
-
-用于表格中单个数据单元格的编辑。
+### Compile and Hot-Reload for Development
 
-#### 属性
-
-```typescript
-import { DCell } from 'morghulis'
-import type { DCellProps } from 'morghulis'
-
-<DCell
-  :view="metaView"         // 元数据视图
-  :prop="fieldName"        // 字段名称
-  :bean="rowData"          // 行数据
-  :db="databaseObject"     // 数据库对象
-  :disabled="false"        // 是否禁用
-  @cancel="handleCancel"   // 取消事件
-  @save="handleSave"       // 保存事件
-/>
+```sh
+npm run dev
 ```
 
-## 全局类型支持
-
-组件库提供全局类型支持，导入后可以在模板中直接使用组件名称，TypeScript 会自动提供类型检查和属性提示：
+### Type-Check, Compile and Minify for Production
 
-```vue
-<template>
-  <MDialog
-    v-model="dialogVisible"
-    title="标题"
-    @close="handleClose"
-  />
-  
-  <!-- Element Plus 组件也有类型提示 -->
-  <ElButton type="primary">按钮</ElButton>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-// 无需导入组件，但需要导入库
-import 'morghulis'
-
-const dialogVisible = ref(false)
-const handleClose = () => {
-  dialogVisible.value = false
-}
-</script>
+```sh
+npm run build
 ```
-
-## 版本历史
-
-### 1.0.30
-- 优化了组件类型定义，修复IDE无法识别和自动补全组件属性的问题
-- 改进了类型导出机制，增强了组件与IDE的集成
-- 添加了对v-model属性的明确类型支持
-- 扩展了组件的方法类型定义，使API更加清晰
-
-### 1.0.29
-- 增强了类型定义，补充了 MTable, MForm, DTable 组件的方法导出
-- 更新了 README.md，添加了详细的组件属性和方法说明
-
-### 1.0.28
-- 修复了类型声明冲突问题
-- 添加了完整的组件类型定义
-- 增加了全局类型支持，现在可以在模板中获得完整的属性提示
-- 解决了CSS导入问题，支持多种导入路径
-
-### 1.0.27
-- 修改了类型定义，避免与 Vue 内置类型冲突
-- 优化了组件属性和事件定义
-
-## 工具函数
-
-### 授权功能
-
-```