gi-component 0.0.1

package/dist/gi.css

@@ -0,0 +1 @@
+.gi-card[data-v-c2f199fb]{background-color:var(--el-bg-color);display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;--card-padding-x: var(--padding-x);--card-padding-x-small: var(--padding-x-small);--card-padding-y: var(--padding-y);--card-padding-y-small: var(--padding-y-small)}.gi-card--bordered[data-v-c2f199fb]{border:1px solid var(--el-border-color)}.gi-card-header[data-v-c2f199fb]{height:46px;padding:0 var(--card-padding-x);display:flex;justify-content:space-between;align-items:center;color:var(--el-text-color-primary);box-sizing:border-box;position:relative;flex-shrink:0}.gi-card-header__title[data-v-c2f199fb]{position:relative;line-height:1.3em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box;font-weight:500;font-size:16px}.gi-card-header__extra[data-v-c2f199fb]{display:flex}.gi-card-header--bordered[data-v-c2f199fb]{border-bottom:1px solid var(--el-border-color)}.gi-card-body[data-v-c2f199fb]{padding:var(--card-padding-x);box-sizing:border-box;overflow:hidden;height:100%}.gi-card-footer[data-v-c2f199fb]{padding:var(--card-padding-y) var(--card-padding-x);border-top:1px solid var(--el-border-color);box-sizing:border-box}.gi-card--full .gi-card-body[data-v-c2f199fb]{flex:1;display:flex;flex-direction:column}.gi-card--inner .gi-card-header[data-v-c2f199fb],.gi-card--inner .gi-card-body[data-v-c2f199fb],.gi-card--inner .gi-card-footer[data-v-c2f199fb]{padding-left:0;padding-right:0}.gi-card--small .gi-card-header[data-v-c2f199fb]{height:36px;padding:0 var(--card-padding-x-small)}.gi-card--small .gi-card-header__title[data-v-c2f199fb]{font-size:14px}.gi-card--small .gi-card-body[data-v-c2f199fb]{padding:var(--card-padding-x-small)}.gi-card--small .gi-card-footer[data-v-c2f199fb]{padding:var(--card-padding-y-small) var(--card-padding-x-small)}[data-v-079a9f8e] .el-form-item{margin-bottom:0}[data-v-079a9f8e] .el-form-item .el-form-item__label{display:none}[data-v-079a9f8e] .column-required .cell{position:relative}[data-v-079a9f8e] .column-required .cell:after{content:"*";color:red;margin-left:2px}.gi-grid[data-v-4f2b02b0]{display:grid}[data-v-cd21cbfd] .el-button+.el-button{margin-left:0}[data-v-cd21cbfd] .el-select__wrapper{box-shadow:none;border:1px solid var(--el-border-color)}[data-v-cd21cbfd] .el-select__wrapper.is-focused{box-shadow:none;border-color:var(--el-color-primary)}[data-v-cd21cbfd] .el-select__wrapper.is-hovering:not(.is-focused){box-shadow:none;border-color:var(--el-border-color-hover)}.gi-input-group[data-v-cd21cbfd]{display:flex}.gi-input-group[data-v-cd21cbfd]>*:not(:last-child){margin-right:-1px}.gi-input-group[data-v-cd21cbfd]>*:first-child:last-child{border-radius:var(--el-border-radius-base)}.gi-input-group[data-v-cd21cbfd]>*:first-child:last-child .el-input__wrapper,.gi-input-group[data-v-cd21cbfd]>*:first-child:last-child .el-select__wrapper{border-radius:var(--el-border-radius-base)}.gi-input-group[data-v-cd21cbfd]>*:not(:first-child):not(:last-child){border-radius:0}.gi-input-group[data-v-cd21cbfd]>*:not(:first-child):not(:last-child) .el-input__wrapper{border-radius:0}.gi-input-group[data-v-cd21cbfd]>*:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.gi-input-group[data-v-cd21cbfd]>*:first-child .el-input__wrapper,.gi-input-group[data-v-cd21cbfd]>*:first-child .el-select__wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.gi-input-group[data-v-cd21cbfd]>*:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.gi-input-group[data-v-cd21cbfd]>*:last-child .el-input__wrapper,.gi-input-group[data-v-cd21cbfd]>*:last-child .el-select__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.gi-input-group[data-v-cd21cbfd]>*:hover{z-index:1}.gi-input-group[data-v-cd21cbfd]>* .el-input__wrapper.is-focus,.gi-input-group[data-v-cd21cbfd]>* .el-select__wrapper.is-focused{z-index:2}[data-v-788824ed] .el-button{padding-right:12px;padding-left:12px}.el-form[data-v-c2aac7b9]{width:100%}[data-v-c2aac7b9] .el-form-item{align-items:center}[data-v-c2aac7b9] .el-form-item .el-form-item__label{height:inherit;line-height:inherit}[data-v-c2aac7b9] .hide-label .el-form-item__label{display:none}.gi-form-item__content[data-v-c2aac7b9]{width:100%;display:flex}.gi-form-item__component[data-v-c2aac7b9]{flex:1}.gi-form-item__tip[data-v-c2aac7b9]{line-height:1.5;color:var(--el-color-info-light-3)}.gi-form-item__extra[data-v-c2aac7b9]{margin-left:6px}.gi-form__search-btns[data-v-c2aac7b9],.gi-form--search[data-v-c2aac7b9] .el-form-item{margin-bottom:8px}[data-v-c2aac7b9] .w-full,[data-v-c2aac7b9] .w-full .el-date-editor{width:100%}.gi-split-button[data-v-097d86cb]{position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;z-index:9;border:1px solid var(--el-border-color);background-color:var(--el-bg-color);box-sizing:border-box;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform,background-color,border-color}.gi-split-button--disabled[data-v-097d86cb]{cursor:not-allowed;opacity:.6;pointer-events:none}.gi-split-button--default[data-v-097d86cb]{width:18px;height:40px;left:0;box-shadow:2px 0 6px #0000001a}.gi-split-button--circle[data-v-097d86cb]{width:24px;height:24px;border-radius:50%;left:-12px;overflow:hidden;box-shadow:0 4px 10px #0000001a}[data-v-ae1c9bf4] .el-splitter-bar__dragger-horizontal:before,[data-v-ae1c9bf4] .el-splitter-bar__dragger-horizontal:after{width:1px}.gi-page-layout[data-v-ae1c9bf4]{flex:1;width:100%;height:100%;display:flex;overflow:hidden;background-color:var(--el-bg-color)}.gi-page-layout--bordered[data-v-ae1c9bf4]{border:1px solid var(--el-border-color)}.gi-page-layout__left[data-v-ae1c9bf4]{width:100%;height:100%}.gi-page-layout__right[data-v-ae1c9bf4]{flex:1;height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative}.gi-page-layout__header[data-v-ae1c9bf4]{padding:var(--padding-x);padding-bottom:0;border-bottom:1px solid var(--el-border-color);box-sizing:border-box}.gi-page-layout__tool[data-v-ae1c9bf4]{width:100%;padding:var(--padding-x);padding-bottom:0;display:flex;justify-content:end;align-items:center;box-sizing:border-box}.gi-page-layout__body[data-v-ae1c9bf4]{flex:1;padding:var(--padding-x);height:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.gi-page-layout__split[data-v-ae1c9bf4]{width:0;height:auto;position:relative}.gi-page-layout--has-header .gi-page-layout__tool[data-v-ae1c9bf4],.gi-page-layout--has-header .gi-page-layout__body[data-v-ae1c9bf4],.gi-page-layout--has-tool .gi-page-layout__body[data-v-ae1c9bf4]{padding-top:var(--padding-y)}.gi-page-layout--collapsing[data-v-ae1c9bf4] .el-splitter-panel{transition:flex-basis .3s}[data-v-b15a0f4d] .el-pagination__rightwrapper{flex:auto}.gi-table-pagination[data-v-b15a0f4d]{margin-top:10px}[data-v-81f370ec] .el-tabs__nav-prev,[data-v-81f370ec] .el-tabs__nav-next{height:100%;display:flex;align-items:center;justify-content:center}.gi-tabs[data-v-81f370ec]{width:100%;padding:0 var(--padding-x);display:flex;align-items:center;border-bottom:1px solid var(--el-border-color);box-sizing:border-box;background-color:var(--el-bg-color)}.gi-tabs__default[data-v-81f370ec]{flex:1;overflow:hidden}.gi-tabs__default[data-v-81f370ec] .el-tabs__header{margin-bottom:0}.gi-tabs__default[data-v-81f370ec] .el-tabs__header .el-tabs__nav-wrap:after{display:none}.gi-tabs__default[data-v-81f370ec] .el-tabs__active-bar{bottom:1px}.gi-tabs__extra[data-v-81f370ec]{margin-left:10px;align-self:flex-start}[data-v-81f370ec] .el-tabs--card>.el-tabs__header{border-bottom:none}[data-v-81f370ec] .el-tabs--border-card{border-bottom:none}[data-v-81f370ec] .el-tabs--border-card>.el-tabs__content{display:none}[data-v-81f370ec] .el-tabs--border-card>.el-tabs__header{border-bottom:none}.gi-tabs--small[data-v-81f370ec]{padding:0 var(--padding-x-small)}.gi-tabs--small[data-v-81f370ec] .el-tabs{--el-tabs-header-height: 32px}.gi-tabs--small[data-v-81f370ec] .el-tabs .el-tabs__item{font-size:12px}.gi-tabs--inner[data-v-81f370ec]{padding:0}body{--padding: 14px;--margin: 14px;--padding-x: 14px;--padding-x-small: 10px;--padding-y: 10px;--padding-y-small: 6px}.gi-card-title .gi-card-header__title{padding-left:8px;position:relative}.gi-card-title .gi-card-header__title:before{content:"";width:4px;height:20px;position:absolute;left:0;top:50%;transform:translateY(-50%);background-color:var(--el-color-primary);border-radius:0 4px 4px 0}.gi-w-full{width:100%}.gi-h-full{height:100%}.gi-line-1{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gi-line-2{line-clamp:2;-webkit-line-clamp:2}.gi-line-3{line-clamp:3;-webkit-line-clamp:3}.gi-line-4{line-clamp:4;-webkit-line-clamp:4}.gi-line-5{line-clamp:5;-webkit-line-clamp:5}.gi-line-2,.gi-line-3,.gi-line-4,.gi-line-5{overflow:hidden;word-break:break-all;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.gi-mt{margin-top:var(--margin)}.gi-mb{margin-bottom:var(--margin)}.gi-ml{margin-left:var(--margin)}.gi-mr{margin-right:var(--margin)}.gi-mx{margin-left:var(--margin);margin-right:var(--margin)}.gi-my{margin-top:var(--margin);margin-bottom:var(--margin)}.gi-m0{margin:0!important}.gi-pt{padding-top:var(--padding)}.gi-pb{padding-bottom:var(--padding)}.gi-pl{padding-left:var(--padding)}.gi-pr{padding-right:var(--padding)}.gi-px{padding-left:var(--padding);padding-right:var(--padding)}.gi-py{padding-top:var(--padding);padding-bottom:var(--padding)}.gi-p0,.el-dialog{padding:0!important}.el-dialog.is-fullscreen{overflow:hidden;display:inline-flex;flex-direction:column}.el-dialog.is-fullscreen .el-dialog__body{flex:1;overflow-y:auto}.el-dialog .el-dialog__header{height:48px;padding-left:var(--el-dialog-padding-primary);padding-bottom:0;display:flex;align-items:center;border-bottom:1px solid var(--el-border-color)}.el-dialog .el-dialog__body{padding:var(--el-dialog-padding-primary)}.el-dialog .el-dialog__footer{padding:12px var(--el-dialog-padding-primary);border-top:1px solid var(--el-border-color)}.el-dialog.gi-dialog--simple .el-dialog__header{border-bottom:none}.el-dialog.gi-dialog--simple .el-dialog__footer{border-top:none}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { }

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "gi-component",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "Vue3中基于Element Plus二次封装基础组件库",
+  "author": "lin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lin-97/gi-component.git"
+  },
+  "keywords": [
+    "element-plus",
+    "vitepress",
+    "vue3",
+    "gi-component",
+    "二次封装组件",
+    "封装组件"
+  ],
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "packages"
+  ],
+  "scripts": {
+    "dev": "vite --host",
+    "docs:dev": "cd docs && pnpm dev",
+    "docs:build": "cd docs && pnpm build",
+    "docs:preview": "cd docs && pnpm preview",
+    "build:lib": "vite build --mode lib",
+    "build:docs": "cd docs && pnpm build"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.11.2",
+    "vue": "^3.5.15"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^5.2.1",
+    "@element-plus/icons-vue": "^2.3.1",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue-jsx": "^4.2.0",
+    "element-plus": "^2.11.2",
+    "eslint": "^9.27.0",
+    "sass": "^1.89.0",
+    "sass-loader": "^16.0.5",
+    "terser": "^5.44.0",
+    "typescript": "^5.8.3",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.15",
+    "vue-tsc": "^2.2.10"
+  }
+}

package/packages/components/button/index.ts

@@ -0,0 +1,5 @@
+import Button from './src/button.vue';
+
+export type ButtonInstance = InstanceType<typeof Button>;
+export * from './src/type';
+export default Button;

package/packages/components/button/src/button.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-button :class="b('button')" v-bind="bindProps" @click="(e: MouseEvent) => emit('click', e)">
+    <slot>{{ btnText }}</slot>
+  </el-button>
+</template>
+
+<script setup lang="ts">
+import type { ButtonProps as ElButtonProps } from 'element-plus';
+import type { ButtonProps } from './type.ts';
+import {
+  Delete,
+  Download,
+  Edit,
+  Plus,
+  Printer,
+  Search,
+  Upload
+} from '@element-plus/icons-vue';
+import { computed, useAttrs } from 'vue';
+import { useBemClass } from '../../../hooks';
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  type: ''
+});
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void;
+}>();
+
+const attrs = useAttrs();
+
+const { b } = useBemClass();
+
+const obj: Record<string, { btnProps: Partial<ButtonProps>; btnText: string }> =
+{
+  add: { btnProps: { icon: Plus, type: 'primary' }, btnText: '新增' },
+  edit: { btnProps: { icon: Edit, type: 'primary' }, btnText: '编辑' },
+  delete: { btnProps: { icon: Delete, type: 'danger' }, btnText: '删除' },
+  search: { btnProps: { icon: Search, type: 'primary' }, btnText: '搜索' },
+  reset: { btnProps: { type: undefined }, btnText: '重置' },
+  upload: { btnProps: { icon: Upload, type: 'primary' }, btnText: '上传' },
+  download: {
+    btnProps: { icon: Download, type: 'primary' },
+    btnText: '下载'
+  },
+  print: { btnProps: { icon: Printer, type: 'primary' }, btnText: '打印' }
+};
+
+const bindProps = computed(() => {
+  const btnProps = obj?.[props.type]?.btnProps || { type: props.type };
+  return { ...attrs, ...props, ...btnProps } as Omit<ElButtonProps, 'type'>;
+});
+
+const btnText = computed(() => {
+  return obj[props.type].btnText;
+});
+</script>
+
+<style lang="scss" scoped></style>

package/packages/components/button/src/type.ts

@@ -0,0 +1,15 @@
+import type { ButtonProps as ElButtonProps } from 'element-plus';
+
+export interface ButtonProps extends Partial<Omit<ElButtonProps, 'type'>> {
+  type?:
+    | 'add'
+    | 'edit'
+    | 'delete'
+    | 'search'
+    | 'reset'
+    | 'upload'
+    | 'download'
+    | 'print'
+    | ''
+    | ElButtonProps['type'];
+}

package/packages/components/card/index.ts

@@ -0,0 +1,5 @@
+import Card from './src/card.vue';
+
+export type CardInstance = InstanceType<typeof Card>;
+export * from './src/type';
+export default Card;

package/packages/components/card/src/card.vue

@@ -0,0 +1,166 @@
+<template>
+  <div :class="getCardClass">
+    <section :class="getHeaderClass" :style="props.headerStyle">
+      <div :class="b('card-header__title')">
+        <slot name="title">{{ props.title }}</slot>
+      </div>
+      <div :class="b('card-header__extra')">
+        <slot name="extra">{{ props.extra }}</slot>
+      </div>
+    </section>
+    <section :class="b('card-body')" :style="props.bodyStyle">
+      <slot></slot>
+    </section>
+    <section v-if="slot.footer" :class="b('card-footer')">
+      <slot name="footer"></slot>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { CardProps } from './type';
+import { computed, useSlots } from 'vue';
+import { useBemClass } from '../../../hooks';
+
+const props = withDefaults(defineProps<CardProps>(), {
+  title: '',
+  extra: '',
+  size: 'middle' as const,
+  bordered: false,
+  headerBordered: true,
+  headerStyle: () => ({}),
+  bodyStyle: () => ({}),
+  inner: false
+});
+
+defineSlots<{
+  default: () => void;
+  title: () => void;
+  extra: () => void;
+  footer: () => void;
+}>();
+
+const slot = useSlots();
+const { b } = useBemClass();
+
+const getCardClass = computed(() => {
+  const arr: string[] = [b('card')];
+  if (props.bordered) {
+    arr.push(b('card--bordered'));
+  }
+  if (props.inner) {
+    arr.push(b('card--inner'));
+  }
+  arr.push(b(`card--${props.size}`));
+  return arr.join(' ');
+});
+
+const getHeaderClass = computed(() => {
+  const arr: string[] = [b('card-header')];
+  if (props.headerBordered) {
+    arr.push(b('card-header--bordered'));
+  }
+  return arr.join(' ');
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../../styles/var.scss' as a;
+
+.#{a.$prefix}-card {
+  background-color: var(--el-bg-color);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+  --card-padding-x: var(--padding-x);
+  --card-padding-x-small: var(--padding-x-small);
+  --card-padding-y: var(--padding-y);
+  --card-padding-y-small: var(--padding-y-small);
+
+  &--bordered {
+    border: 1px solid var(--el-border-color);
+  }
+}
+
+.#{a.$prefix}-card-header {
+  height: 46px;
+  padding: 0 var(--card-padding-x);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--el-text-color-primary);
+  box-sizing: border-box;
+  position: relative;
+  flex-shrink: 0;
+
+  &__title {
+    position: relative;
+    line-height: 1.3em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    font-weight: 500;
+    font-size: 16px;
+  }
+
+  &__extra {
+    display: flex;
+  }
+
+  &--bordered {
+    border-bottom: 1px solid var(--el-border-color);
+  }
+}
+
+.#{a.$prefix}-card-body {
+  padding: var(--card-padding-x);
+  box-sizing: border-box;
+  overflow: hidden;
+  height: 100%;
+}
+
+.#{a.$prefix}-card-footer {
+  padding: var(--card-padding-y) var(--card-padding-x);
+  box-sizing: border-box;
+  border-top: 1px solid var(--el-border-color);
+  box-sizing: border-box;
+}
+
+.#{a.$prefix}-card--full {
+  .#{a.$prefix}-card-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.#{a.$prefix}-card--inner {
+  .#{a.$prefix}-card-header,
+  .#{a.$prefix}-card-body,
+  .#{a.$prefix}-card-footer {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.#{a.$prefix}-card--small {
+  .#{a.$prefix}-card-header {
+    height: 36px;
+    padding: 0 var(--card-padding-x-small);
+
+    &__title {
+      font-size: 14px;
+    }
+  }
+
+  .#{a.$prefix}-card-body {
+    padding: var(--card-padding-x-small);
+  }
+
+  .#{a.$prefix}-card-footer {
+    padding: var(--card-padding-y-small) var(--card-padding-x-small);
+  }
+}
+</style>

package/packages/components/card/src/type.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'vue';
+
+export interface CardProps {
+  title?: string;
+  extra?: string;
+  bordered?: boolean;
+  size?: 'small' | 'middle';
+  headerBordered?: boolean;
+  headerStyle?: CSSProperties;
+  bodyStyle?: CSSProperties;
+  inner?: boolean; // 内嵌模式
+}

package/packages/components/dialog/index.ts

@@ -0,0 +1,6 @@
+import Dialog from './src/dialog.vue';
+
+export type DialogInstance = InstanceType<typeof Dialog>;
+export * from './src/dialog';
+export * from './src/type';
+export default Dialog;

package/packages/components/dialog/src/dialog.ts

@@ -0,0 +1,87 @@
+import type { DialogInstance } from '../index';
+import ElementPlus from 'element-plus';
+import { createApp, h, ref } from 'vue';
+import GiDialog from './dialog.vue';
+
+type DialogOptions = Partial<DialogInstance['$props']>;
+
+export interface DialogReturnObject {
+  close: () => void;
+  update: (newProps?: Record<string, any>) => void;
+}
+
+const DEF_OPTIONS: DialogOptions = {
+  // width: '600px',
+  // center: false,
+  // footer: true,
+  // closeOnClickModal: true
+};
+
+export function createDialog() {
+  const Dialog = {
+    _context: {},
+    // 核心创建方法
+    create(options: DialogOptions): DialogReturnObject {
+      const mergedOptions = { ...DEF_OPTIONS, ...options };
+      // 创建容器
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+
+      // 状态管理
+      const visible = ref(true);
+      const dialogOptions = ref(mergedOptions || {});
+
+      // 创建弹窗应用
+      const dialogApp = createApp({
+        setup() {
+          // 关闭处理
+          const closed = () => {
+            dialogApp.unmount();
+            container.remove();
+          };
+
+          return () =>
+            h(GiDialog, {
+              ...dialogOptions.value,
+              modelValue: visible.value,
+              'onUpdate:modelValue': (val: boolean) => (visible.value = val),
+              onClosed: () => closed()
+            });
+        }
+      });
+
+      dialogApp.use(ElementPlus);
+
+      // 继承主应用的上下文
+      Object.assign(dialogApp._context, Dialog._context);
+
+      // 挂载
+      dialogApp.mount(container);
+
+      return {
+        /** 关闭对话框 */
+        close: () => {
+          visible.value = false;
+          setTimeout(() => {
+            dialogApp.unmount();
+            container.remove();
+          }, 300);
+        },
+        /** 更新对话框 */
+        update: (newProps?: Record<string, any>) => {
+          dialogOptions.value = { ...dialogOptions.value, ...newProps };
+        }
+      };
+    },
+
+    /** 对话框-打开 */
+    open(options: DialogOptions) {
+      return this.create(options);
+    }
+  };
+
+  return Dialog;
+}
+
+// 默认导出实例
+export const Dialog = createDialog();

package/packages/components/dialog/src/dialog.vue

@@ -0,0 +1,122 @@
+<template>
+  <el-dialog
+    v-bind="dialogProps"
+    v-model="visible"
+    :class="getClass"
+    :title="props.title"
+    :style="{ maxWidth: !props.fullscreen ? '480px' : '100%', ...props.style }"
+  >
+    <slot>
+      <template v-if="typeof props.content === 'string'">
+        <p>{{ props.content }}</p>
+      </template>
+      <template v-if="typeof props.content === 'function'">
+        <component :is="props?.content?.()"></component>
+      </template>
+    </slot>
+    <template v-if="props.footer" #footer>
+      <slot name="footer">
+        <template v-if="typeof props.footer === 'boolean'">
+          <el-space :size="10">
+            <el-button v-bind="props.cancelButtonProps" @click="handleCancel">{{
+              props.cancelText
+            }}</el-button>
+            <el-button
+              type="primary"
+              v-bind="props.okButtonProps"
+              :loading="okLoading"
+              @click="handleOk"
+            >
+              {{ props.okText }}
+            </el-button>
+          </el-space>
+        </template>
+        <template v-else>
+          <component :is="props.footer()"></component>
+        </template>
+      </slot>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import type { VNode } from 'vue';
+import type { DialogProps } from './type';
+import { computed, defineProps, defineSlots, ref } from 'vue';
+import { useBemClass } from '../../../hooks';
+
+const visible = defineModel('modelValue', {
+  type: Boolean,
+  default: false
+});
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  closeOnClickModal: true,
+  showClose: true,
+  footer: true,
+  okText: '确认',
+  cancelText: '取消',
+  width: 'calc(100% - 20px)',
+  alignCenter: true
+});
+
+defineSlots<{
+  title: () => VNode;
+  footer: () => VNode;
+  default: () => VNode;
+}>();
+
+const { b } = useBemClass();
+
+const getClass = computed(() => {
+  const arr: string[] = [b('dialog')];
+  if (props.simple) {
+    arr.push(b('dialog--simple'));
+  }
+  return arr.join(' ');
+});
+
+const dialogProps = computed(() => {
+  return {
+    ...props,
+    content: undefined,
+    footer: undefined,
+    okText: undefined,
+    cancelText: undefined,
+    okButtonProps: undefined,
+    cancelButtonProps: undefined,
+    onOk: undefined,
+    onBeforeOk: undefined,
+    onCancel: undefined,
+    simple: undefined
+  };
+});
+
+const okLoading = ref(false);
+
+const handleCancel = () => {
+  props.onCancel?.();
+  visible.value = false;
+};
+
+const handleOk = async () => {
+  if (props.onBeforeOk) {
+    try {
+      okLoading.value = true;
+      const flag = await props.onBeforeOk();
+      okLoading.value = false;
+      if (flag) {
+        visible.value = false;
+      }
+    } catch (error) {
+      console.error('error', error);
+      okLoading.value = false;
+    }
+  } else {
+    props.onOk?.();
+    visible.value = false;
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/packages/components/dialog/src/type.ts

@@ -0,0 +1,16 @@
+import type { ButtonProps, DialogProps as ElDialogProps } from 'element-plus';
+import type { CSSProperties, VNode } from 'vue';
+
+export interface DialogProps extends Partial<ElDialogProps> {
+  content?: string | (() => VNode);
+  footer?: boolean | (() => VNode);
+  okText?: string;
+  cancelText?: string;
+  okButtonProps?: Partial<ButtonProps>;
+  cancelButtonProps?: Partial<ButtonProps>;
+  style?: CSSProperties;
+  simple?: boolean; // 简单模式
+  onOk?: () => void;
+  onBeforeOk?: () => Promise<boolean>;
+  onCancel?: () => void;
+}

package/packages/components/edit-table/index.ts

@@ -0,0 +1,5 @@
+import EditTable from './src/edit-table.vue';
+
+export type EditTableInstance = InstanceType<typeof EditTable>;
+export * from './src/type';
+export default EditTable;