morghulis 1.0.27 → 1.0.28

package/README.md

@@ -15,6 +15,7 @@ npm install morghulis
 ```typescript
 import { createApp } from 'vue'
 import { createMorghulis } from 'morghulis'
+import 'morghulis/dist/index.css'
 import App from './App.vue'
 
 const app = createApp(App)
@@ -31,18 +32,37 @@ app.use(createMorghulis({
 app.mount('#app')
 ```
 
+### 样式导入
+
+你可以通过以下任意方式导入样式:
+
+```typescript
+// 推荐方式
+import 'morghulis/dist/index.css'
+
+// 或使用以下方式之一
+import 'morghulis/style'
+import 'morghulis/dist/style'
+import 'morghulis/dist/style.css'
+```
+
 ### 单独使用组件
 
 ```typescript
-import { MTable, MDialog, MForm, DTable } from 'morghulis'
+import { MDialog, MTable, MForm, DTable, DCell, DForm, DController, MCell } from 'morghulis'
+import 'morghulis/dist/index.css'
 
 // 在组件中使用
 export default {
   components: {
-    MTable,
     MDialog,
+    MTable,
     MForm,
-    DTable
+    DTable,
+    DCell,
+    DForm,
+    DController,
+    MCell
   }
 }
 ```
@@ -50,12 +70,13 @@ export default {
 ### 使用工具函数
 
 ```typescript
-import { useMorghulisRequest, useMorghulisCookies } from 'morghulis'
+import { useMorghulisAuthorize, useMorghulisRequest, useMorghulisCookies } from 'morghulis'
 
 // 在组件中使用
 setup() {
   const { get, post } = useMorghulisRequest()
   const { get: getCookie, set: setCookie } = useMorghulisCookies()
+  const { login, logout, check, bearer } = useMorghulisAuthorize()
   
   // 使用这些函数...
 }
@@ -63,23 +84,153 @@ setup() {
 
 ## 组件
 
-- `MTable`: 表格组件
-- `MDialog`: 对话框组件
-- `MForm`: 表单组件
-- `DTable`: 数据表格组件
+### 对话框
+
+```typescript
+import { MDialog } from 'morghulis'
+import type { MorDialogProps, MorDialogConfig } from 'morghulis'
+
+// 在模板中使用
+<MDialog
+  v-model="dialogVisible"
+  title="标题"
+  subTitle="副标题"
+  :width="600"
+  :fullscreen="false"
+  :modal="true"
+  @close="handleClose"
+/>
+
+// 使用组件的方法
+const dialog = ref()
+// 打开对话框
+dialog.value.open(data, { title: '自定义标题', subTitle: '自定义副标题' })
+// 关闭对话框
+dialog.value.close()
+```
+
+### 表格组件
+
+```typescript
+import { MTable, DTable, DCell, DForm, DController } from 'morghulis'
+
+// 数据表格
+<DTable
+  :data="tableData"
+  :columns="columns"
+/>
+
+// 普通表格
+<MTable
+  :data="tableData"
+  :columns="columns"
+/>
+```
 
 ## 工具函数
 
-- `useMorghulisAuthorize`: 授权相关函数
-- `useMorghulisChannel`: 通道相关函数
-- `useMorghulisSockets`: Socket相关函数
-- `useMorghulisRequest`: 请求相关函数
-- `useMorghulisCookies`: Cookie相关函数
+### 授权功能
+
+```typescript
+import { useMorghulisAuthorize } from 'morghulis'
+import type { MorghulisAuthorize } from 'morghulis'
+
+const auth = useMorghulisAuthorize()
+
+// 登录
+auth.login(userId)
+
+// 检查用户是否登录
+if (auth.check()) {
+  // 已登录
+}
+
+// 获取认证令牌
+const token = auth.bearer()
+
+// 登出
+auth.logout()
+```
+
+### 请求功能
+
+```typescript
+import { useMorghulisRequest } from 'morghulis'
+
+const { get, post, put, delete: del } = useMorghulisRequest()
+
+// 发送请求
+const response = await get('/api/users')
+```
 
 ## 类型
 
 所有类型都已导出，可以直接导入使用：
 
 ```typescript
-import { MorghulisOptions, UIFeedbackTypes } from 'morghulis'
-```
+// 导入组件属性类型
+import type { 
+  MorDialogProps,
+  MorDialogConfig, 
+  MorOption,
+  MorghulisAuthorize
+} from 'morghulis'
+
+// 使用类型
+const dialogProps: MorDialogProps = {
+  title: '标题',
+  width: 600,
+  modal: true,
+  confirmButtonText: '确认',
+  cancelButtonText: '取消',
+  confirm: (data, done) => {
+    // 处理确认逻辑
+    done()
+  }
+}
+
+// 使用配置类型
+const options: MorOption = {
+  baseURL: '/api/',
+  minioURL: '/dfs/',
+  // 其他自定义配置...
+}
+```
+
+## 全局类型支持
+
+组件库提供全局类型支持，导入后可以在模板中直接使用组件名称，TypeScript 会自动提供类型检查和属性提示：
+
+```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>
+```
+
+## 版本说明
+
+当前版本: 1.0.28
+
+- 解决了类型声明冲突问题
+- 提供了完整的组件类型定义
+- 添加了全局类型支持
+- 修复了CSS样式文件导入问题
+- 增强了组件属性和方法的TypeScript智能提示

package/dist/index.d.ts

@@ -2,7 +2,12 @@ import type { App } from 'vue';
 import type { ElDialog, ElButton, ElText, ElDivider, ElSpace } from 'element-plus';
 
 // 导入Vue组件实例类型
-import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, EmitsOptions } from 'vue';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, EmitsOptions, Component } from 'vue';
+
+// 基础类型定义
+export type UIFeedbackTypes = "success" | "info" | "warning" | "error";
+export type UITextTypes = "success" | "info" | "warning" | "danger" | 'primary';
+export type UISizeTypes = 'default' | 'small' | 'large' | "";
 
 // 直接在类型定义文件中定义MorDialogProps，避免相对路径引用
 export interface MorDialogProps {
@@ -54,6 +59,140 @@ export interface MorOption {
   [key: string]: any
 }
 
+// 定义表格相关类型
+export interface DataItem {
+  [key: string]: any;
+}
+
+export type Orders = Array<{
+  column: string;
+  asc?: boolean;
+}>;
+
+export interface DaoTypes {
+  add: (entity: string, bean: DataItem) => Promise<any>;
+  update: (entity: string, bean: DataItem) => Promise<any>;
+  delete: (entity: string, id: string | number) => Promise<any>;
+  get: (entity: string, id: string | number, options?: any) => Promise<any>;
+  list: (entity: string, options?: any) => Promise<any>;
+  page: (entity: string, page: number, size: number, options?: any) => Promise<any>;
+}
+
+export interface MetaField {
+  code: string;
+  name: string;
+  type: string;
+  options?: any[];
+  required?: boolean;
+  readonly?: boolean;
+  hidden?: boolean;
+  [key: string]: any;
+}
+
+export interface MetaView {
+  code: string;
+  name: string;
+  fields: MetaField[];
+  [key: string]: any;
+}
+
+export type SortableCallbackFn = (newIndex: number, oldIndex: number) => void;
+
+export type MTableButton = {
+  size?: UISizeTypes;
+  handler?: (row: any, event?: Event) => void;
+  title?: string | Function;
+  type?: UITextTypes | Function;
+  link?: boolean | Function;
+  plain?: boolean | Function;
+  text?: boolean | Function;
+  round?: boolean | Function;
+  circle?: boolean | Function;
+  disabled?: boolean | Function;
+  dark?: boolean | Function;
+  color?: string | Function;
+  tag?: string | Function;
+};
+
+export type MTableColumn = {
+  label: string;
+  component: Component;
+  width?: string | number;
+};
+
+export interface TableProps {
+  data?: any[];
+  height?: string | number;
+  maxHeight?: string | number;
+  stripe?: boolean;
+  border?: boolean;
+  size?: string;
+  fit?: boolean;
+  showHeader?: boolean;
+  highlightCurrentRow?: boolean;
+  currentRowKey?: string | number;
+  rowClassName?: string | ((param: { row: any, rowIndex: number }) => string);
+  rowStyle?: object | ((param: { row: any, rowIndex: number }) => object);
+  cellClassName?: string | ((param: { row: any, column: any, rowIndex: number, columnIndex: number }) => string);
+  cellStyle?: object | ((param: { row: any, column: any, rowIndex: number, columnIndex: number }) => object);
+  headerRowClassName?: string | ((param: { row: any, rowIndex: number }) => string);
+  headerRowStyle?: object | ((param: { row: any, rowIndex: number }) => object);
+  headerCellClassName?: string | ((param: { row: any, column: any, rowIndex: number, columnIndex: number }) => string);
+  headerCellStyle?: object | ((param: { row: any, column: any, rowIndex: number, columnIndex: number }) => object);
+  rowKey?: string | ((row: any) => string);
+  emptyText?: string;
+  defaultExpandAll?: boolean;
+  expandRowKeys?: any[];
+  defaultSort?: { prop: string, order: string };
+  tooltipEffect?: string;
+  showSummary?: boolean;
+  sumText?: string;
+  summaryMethod?: (param: { columns: any[], data: any[] }) => any[];
+  spanMethod?: (param: { row: any, column: any, rowIndex: number, columnIndex: number }) => number[] | { rowspan: number, colspan: number };
+  selectOnIndeterminate?: boolean;
+  indent?: number;
+  lazy?: boolean;
+  load?: (row: any, treeNode: any, resolve: (data: any[]) => void) => void;
+  treeProps?: { children: string, hasChildren: string };
+}
+
+export interface MorghulisTableProps extends TableProps {
+  loading?: boolean;
+  view: MetaView;
+  buttons?: MTableButton[];
+  columns?: MTableColumn[];
+  sortableCallback?: SortableCallbackFn;
+}
+
+export interface DTableProps {
+  auth?: boolean;
+  db: DaoTypes;
+  entity: string;
+  code?: string;
+  size?: number;
+  page?: number;
+  includes?: DataItem;
+  excludes?: DataItem;
+  orders?: Orders;
+  buttons?: MTableButton[];
+  columns?: MTableColumn[];
+}
+
+export interface DCellProps {
+  view: MetaView;
+  prop: string;
+  bean: DataItem;
+  db: DaoTypes;
+  disabled?: boolean;
+}
+
+export interface DFormProps {
+  selection: any[];
+  view: MetaView;
+  db: DaoTypes;
+  bean: DataItem;
+}
+
 // 定义useMorghulisAuthorize函数的返回类型
 export interface MorghulisAuthorize {
   $client: string;
@@ -127,21 +266,129 @@ export declare const MDialog: DefineComponent<
 // 导出MCell组件
 export declare const MCell: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
 
+// 导出MTable组件
+export declare const MTable: DefineComponent<
+  MorghulisTableProps,
+  {},
+  {},
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  {
+    'selection-change': (selection: any[]) => true;
+    'sort': (column: any, prop: string, order: string) => true;
+  },
+  string,
+  VNodeProps & AllowedComponentProps & ComponentCustomProps,
+  Readonly<MorghulisTableProps> & {
+    'onSelection-change'?: (selection: any[]) => any;
+    'onSort'?: (column: any, prop: string, order: string) => any;
+  },
+  {}
+>;
+
+// 导出MForm组件
+export declare const MForm: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
+
 // 导出数据表格相关组件
-export declare const DTable: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
-export declare const DForm: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
-export declare const DCell: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
+export declare const DTable: DefineComponent<
+  DTableProps,
+  {},
+  {},
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  {},
+  string,
+  VNodeProps & AllowedComponentProps & ComponentCustomProps,
+  Readonly<DTableProps>,
+  {
+    size: number;
+    page: number;
+  }
+> & {
+  refresh: () => void;
+  add: () => void;
+  edit: (row: any) => void;
+  remove: (row: any) => void;
+  handlePageSizeChange: (size: number) => void;
+  handleCurrentPageChange: (page: number) => void;
+};
+
+export declare const DCell: DefineComponent<
+  DCellProps,
+  {},
+  {},
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  {
+    cancel: (...args: any[]) => void;
+    save: (...args: any[]) => void;
+  },
+  string,
+  VNodeProps & AllowedComponentProps & ComponentCustomProps,
+  Readonly<DCellProps> & {
+    onCancel?: (...args: any[]) => any;
+    onSave?: (...args: any[]) => any;
+  },
+  {}
+>;
+
+export declare const DForm: DefineComponent<
+  DFormProps,
+  {},
+  {},
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  {},
+  string,
+  VNodeProps & AllowedComponentProps & ComponentCustomProps,
+  Readonly<DFormProps>,
+  {}
+> & {
+  getData: () => any[];
+};
+
 export declare const DController: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
 
 // 声明useMorghulisAuthorize函数
 export declare function useMorghulisAuthorize(): MorghulisAuthorize;
 
+// 其他hooks
+export declare function useMorghulisChannel(): any;
+export declare function useMorghulisSockets(baseURL?: string): any;
+export declare function loadMorghulisSockets(baseURL?: string): any;
+export declare function useMorghulisRequest(): {
+  get: <T = any>(url: string, params?: any, config?: any) => Promise<T>;
+  post: <T = any>(url: string, data?: any, config?: any) => Promise<T>;
+  put: <T = any>(url: string, data?: any, config?: any) => Promise<T>;
+  delete: <T = any>(url: string, data?: any, config?: any) => Promise<T>;
+};
+export declare function useMorghulisCookies(): {
+  get: (key: string, defaultValue?: any) => any;
+  set: (key: string, value: any, options?: any) => void;
+  remove: (key: string, options?: any) => void;
+  load: (key: string, defaultValue?: any) => any;
+};
+
 // 声明全局组件类型
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     // Morghulis组件
     MDialog: typeof MDialog;
+    MTable: typeof MTable;
+    MForm: typeof MForm;
     MCell: typeof MCell;
+    DTable: typeof DTable;
+    DCell: typeof DCell;
+    DForm: typeof DForm;
+    DController: typeof DController;
     
     // Element Plus组件
     ElButton: typeof ElButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morghulis",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "private": false,
   "description": "Vue 3组件库",
   "type": "module",
@@ -16,7 +16,10 @@
       "require": "./dist/index.umd.cjs",
       "types": "./dist/index.d.ts"
     },
-    "./dist/style.css": "./dist/index.css"
+    "./dist/index.css": "./dist/index.css",
+    "./dist/style.css": "./dist/index.css",
+    "./style": "./dist/index.css",
+    "./dist/style": "./dist/index.css"
   },
   "typesVersions": {
     "*": {