vue-2024-ui 0.0.7 → 0.0.8

package/README.form.md

@@ -10,8 +10,8 @@
 | --------- | ------------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
 | columns   | 表单列数                                                            | number | 2                                                                                            |
 | footer    | 控制表单底部按钮是否显示和样式设置，hidden默认是false,style控制样式 | object | ```{hidden: false, style:{ display:"flex","align-items":"center",justifyContent:"center"}``` |
-| submit    | 表单提交按钮，增加了submitText，hidden 属性和submit方法             | object | ``` {type: "primary",submitText: "提交",hidden: false,submit: async (model) => {...}, } ```  |
-| reset     | 表单重置按钮，增加了restText，hidden 属性和reset方法                | object | ``` {type: "primary",resetText: "重置",hidden: false,reset: () => {...}, } ```               |
+| submit    | 表单提交按钮，增加了label，hidden 属性和click方法             | object | ``` {type: "primary",label: "提交",hidden: false,click: async (model) => {...}, } ```  |
+| reset     | 表单重置按钮，增加了label，hidden 属性和click方法                | object | ``` {type: "primary",label: "重置",hidden: false,click: () => {...}, } ```               |
 | formItems | 通过style属性设置所有items的样式                                    | object | ``` style:{width:100%} ```                                                                   |
 
 ## form 增加的事件

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-2024-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": false,
   "type": "module",
   "main": "src/components/index.js",

package/src/components/g-form.vue

@@ -2,8 +2,8 @@
     <el-form ref="gform" :model="model" v-bind="model.form" class="g-form-container">
         <slot>
             <el-form-item :label="item.label" :prop="`${key}.value`" :rules="getItemRulesByItem(item)"
-                v-for="(item, key) of items" :key="key" v-bind="{ ...model.formItems, ...item.formItem }"
-                :style="{ ...model.formItems.style, ...item?.formItem?.style }">
+                v-for="(item, key) of items" :key="key" v-bind="{ ...model?.formItems, ...item?.formItem }"
+                :style="{ ...model?.formItems?.style, ...item?.formItem?.style }">
                 <slot :name="key" :item :model>
                     <g-ctrl v-model="model[key].value" :item :ctrlKey="key" :model class="g-ctrl-container">
                         <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
@@ -15,29 +15,28 @@
                     <slot :name="`${key}-label`" :data :item :model>{{ item.label }}</slot>
                 </template>
             </el-form-item>
-            <el-form-item style="width: 100%;" v-if="!model.form.footer.hidden">
-                <slot name="footer">
-                    <div :style="model.form.footer.style">
-                        <slot name="footer-left"></slot>
-                        <el-button @click="model.form.submit.submit(model)" v-bind="model.form.submit"
-                            v-if="!model.form.submit.hidden">
-                            {{ model.form.submit.submitText }}
-                        </el-button>
-                        <el-button @click="model.form.reset.reset(model)" v-bind="model.form.reset"
-                            v-if="!model.form.reset.hidden">{{
-                                model.form.reset.resetText
-                            }}</el-button>
-                        <slot name="footer-right"></slot>
-                    </div>
-                </slot>
-            </el-form-item>
+            <slot name="footer" v-if="!model.form.footer.hidden">
+                <div :style="model.form.footer.style">
+                    <slot name="footer-left"></slot>
+                    <el-button @click="model.form.submit.click(model)" v-bind="model.form.submit"
+                        v-if="!model?.form?.submit?.hidden">
+                        {{ model?.form?.submit?.label }}
+                    </el-button>
+                    <el-button @click="model.form.reset.click(model)" v-bind="model.form.reset"
+                        v-if="!model?.form?.reset?.hidden">{{
+                            model?.form?.reset?.label
+                        }}</el-button>
+                    <slot name="footer-right"></slot>
+                </div>
+            </slot>
         </slot>
     </el-form>
 </template>
 
 <script setup>
-import { computed, inject, onMounted, ref, useAttrs, watch } from "vue";
+import { computed, inject, onMounted, ref, useAttrs, watch, watchEffect } from "vue";
 import gCtrl from "./g-ctrl.vue";
+import { convertToPx, mergeObjects } from "./index";
 defineOptions({
     name: "g-form",
     inheritAttrs: false
@@ -45,11 +44,10 @@ defineOptions({
 const model = defineModel({ required: true });
 const emits = defineEmits(["submit", "reset"]);
 const gform = ref(null);
-const columnsWidth = ref(0);
 let marginRight = ref(32);
-const options=inject('options');
-//合并表单默认属性
-model.value.form = {
+const options = inject('options');
+
+const defaultFormAttrs = {
     inline: true,
     type: "hidden",
     "scroll-to-error": true,
@@ -57,40 +55,25 @@ model.value.form = {
     "status-icon": true,
     "scroll-into-view-options": true,
     columns: 2,
-    ...options?.form,
-    ...model.value.form,
     style: {
         width: "600px",
-        border: "1px solid rgba(0, 0, 0,0.09)",
-        borderRadius: "10px",
-        padding: "0px",
-        paddingTop: "20px",
-        margin: "0px",
-        boxShadow: "0 0 5px rgba(0, 0, 0, 0.1)",
-        ...options?.form?.style,
-        ...model.value.form?.style,
-        ...useAttrs().style
+        ...useAttrs()?.style
     },
     // 表单底部属性
     footer: {
         hidden: false,
-        ...options?.form?.footer,
-        ...model.value.form?.footer,
         style: {
-            display: "flex", width: "100%", "align-items": "center", justifyContent: "center", margin: "5px", 
-            ...options?.form?.footer?.style,
-            ...model.value.form?.footer?.style
+            display: "flex", width: "100%", "align-items": "center", justifyContent: "center", margin: "5px",
         },
     },
     //表单提交按钮属性
     submit: {
         type: "primary",
         disabled: false,
-        submitText: "提交",
+        label: "提交",
         plain: true,
         hidden: false,
-        ...options?.form?.submit,
-        submit: async (model) => {
+        click: async (model) => {
             if (!gform.value) return
             await gform.value.validate((valid, fields) => {
                 if (valid) {
@@ -100,15 +83,14 @@ model.value.form = {
                 }
             })
         },
-        ...model.value.form?.submit
     },
     //表单重置按钮属性
     reset: {
         disabled: false,
-        resetText: "重置",
+        label: "重置",
         hidden: false,
         plain: true,
-        reset: () => {
+        click: () => {
             if (!gform.value) return
             let isreset = true;
             emits("reset", (flag) => {
@@ -118,25 +100,24 @@ model.value.form = {
                 gform.value.resetFields();
             }
         },
-        ...options?.form?.reset,
-        ...model.value.form?.reset
     },
-    dialog: {
-        width: 635,
-        ...options?.form?.dialog,
-        ...model.value.form?.dialog
-    }
 };
-//合并表单项默认属性
-model.value.formItems = {
+model.value.form = mergeObjects(
+    defaultFormAttrs,
+    options?.form,
+    model.value?.form
+);
+const defaultFormItemsAttrs = {
     type: "hidden",
     style: {
         width: "100%",
-        ...options?.formItems?.style,
-        ...model.value.formItems?.style
-    },
-    ...model.value.formItems,
+    }
 };
+model.value.formItems = mergeObjects(
+    defaultFormItemsAttrs,
+    options?.formItems,
+    model?.formItems
+);
 
 //获取表单项验证规则
 const getItemRulesByItem = (item) => {
@@ -223,48 +204,38 @@ const getItemRulesByItem = (item) => {
     return itemRules;
 }
 
-onMounted(() => {
-    load();
-})
+onMounted(() => { load(); })
 
 const load = () => {
     if (!model.value.form.inline) {
         model.value.form.columns = 1;
     }
-    if (model.value.form.style.width) {
-        columnsWidth.value = removePx(model.value.form.style.width) / model.value.form.columns;
-    }
-    else {
-        model.value.form.style.width = "600px";
-    }
-    model.value.form.dialog.width = +model.value?.form?.style?.width.replace("px", "") + 35 + "px";
     for (const [key, value] of Object.entries(items.value)) {
-        model.value[key].formItem = { ...model.value[key].formItem, ...value.formItem }
+        model.value[key].formItem = { ...model.value[key].formItem, ...value.formItem };
         model.value[key].formItem.style = { ...model.value[key].formItem.style, ...value.formItem.style };
-        if (value.columns && value.columns > 1) {
-            if (model.value.form.inline) {
-                let column = columnsWidth.value * value.columns - (value.columns - 1) * marginRight.value;
-                model.value[key].formItem.style.width = `calc(${column}px)`;
-            } else {
-                model.value[key].formItem.style.width = `calc(${columnsWidth.value - marginRight.value}px)`;
-            }
-        } else {
-            model.value[key].formItem.style.width = `calc(${columnsWidth.value - marginRight.value}px)`;
-        }
+
+        const columnWidth = value.columns && value.columns > 1 ?
+            columnsWidth.value * value.columns - (value.columns - 1) * marginRight.value :
+            columnsWidth.value - marginRight.value;
+        model.value[key].formItem.style.width = `calc(${columnWidth}px)`;
     }
-}
+};
 
 watch(() => model.value.form.columns, () => load());
 watch(() => model.value.form.inline, () => load());
 
-const removePx = (el) => parseFloat(el.replace("px", ""));
+const columnsWidth = computed(() => convertToPx(model.value.form.style.width) / model.value.form.columns);
+console.log(columnsWidth.value);
 //表单项
-const items = computed(() => Object.fromEntries(Object.entries(model.value).filter(a => a[1].type != "hidden")
+const items = computed(() => Object.fromEntries(Object.entries(model.value)
+    .filter(a => a[1].type != "hidden")
     .filter(a => (a[1].edit !== false))
     .filter(a => (a[1].type !== "control"))
     .map(key => [key[0], key[1]])));
 //表单提交对象
-const formInfo = computed(() => Object.fromEntries(Object.entries(model.value).filter(a => a[1].type != "hidden").map(key => [key[0], key[1].value])));
-//表单列数
-const columns = computed(() => model.value.form.columns);
+const formInfo = computed(() => Object.fromEntries(Object.entries(model.value)
+    .filter(a => a[1].type != "hidden")
+    .filter(a => a[1].type != "control")
+    .map(key => [key[0], key[1].value])));
+
 </script>

package/src/components/g-table.vue

@@ -16,7 +16,7 @@
                             <slot name="control-view" :row :column :$index
                                 v-if="model.control.view.auth(row, column, $index)">
                                 <el-button v-bind="model.control.view"
-                                    @click="model.control.view.view(row, column, $index, model)">{{
+                                    @click="model.control.view.click(row, column, $index, model)">{{
                                         model.control.view.label
                                     }}</el-button>
                             </slot>
@@ -24,7 +24,7 @@
                             <slot name="control-edit" :row :column :$index
                                 v-if="model.control.edit.auth(row, column, $index)">
                                 <el-button v-bind="model.control.edit"
-                                    @click="model.control.edit.edit(row, column, $index, model)">{{
+                                    @click="model.control.edit.click(row, column, $index, model)">{{
                                         model.control.edit.label
                                     }}</el-button>
                             </slot>
@@ -32,7 +32,7 @@
                             <slot name="control-delete" :row :column :$index
                                 v-if="model.control.delete.auth(row, column, $index)">
                                 <el-button v-bind="model.control.delete"
-                                    @click="model.control.delete.delete(row, column, $index)">{{
+                                    @click="model.control.delete.click(row, column, $index)">{{
                                         model.control.delete.label }}</el-button>
                             </slot>
                             <slot name="control-right" :row :column :$index> </slot>
@@ -65,9 +65,9 @@
 <script setup>
 import dayjs from 'dayjs';
 import { ElMessageBox } from 'element-plus';
-import { computed, onMounted, reactive, watchEffect, h ,inject} from 'vue';
+import { computed, onMounted, ref, watchEffect, h, inject } from 'vue';
 import GForm from './g-form.vue';
-import { openModal } from './index';
+import { openModal, mergeObjects,convertToPx } from './index';
 
 defineOptions({
     name: "g-table",
@@ -79,7 +79,7 @@ const model = defineModel({ required: true });
 const options = inject('options');
 
 //table default attrs
-model.value.table = {
+const defaultTableAttrs = {
     data: [],
     border: true,
     stripe: true,
@@ -87,8 +87,6 @@ model.value.table = {
     fit: false,
     type: "hidden",
     height: "calc(100vh - 55px)",
-    ...options?.table,
-    ...model.value.table,
     load: () => {
         let { currentPage, pageSize } = model.value.table.page;
         emits('load', { currentPage, pageSize }, (data, total) => {
@@ -97,112 +95,139 @@ model.value.table = {
         });
     },
     page: {
-        background: true,
+        background: "red",
         total: 0,
         pageSize: 20,
         currentPage: 1,
         pageSizes: [5, 10, 20, 30, 40, 50],
         layout: 'total, sizes, prev, pager, next, jumper',
-        ...options?.table?.page,
-        ...model.value.table?.page,
         style: {
             display: 'flex',
             justifyContent: 'flex-end',
             padding: "10px",
-            ...model.value.table?.page?.style
         },
     }
-}
+};
+model.value.table = mergeObjects(
+    defaultTableAttrs,
+    options?.table,
+    model.value.table
+);
 
-model.value.form = {
-    type: 'hidden',
-    ...options?.form,
-    ...model.value.form,
-    dialog: {
-        width: 635,
-        ...model.value.form?.dialog,
-        style: {
-            ...model.value.form?.dialog?.style
-        }
-    }
-}
-model.value.control = {
-    type: 'control', label: '操作', edit: false, width: 250, fixed: 'right',...options?.control, ...model.value?.control,
+const defaultControl = {
+    type: 'control', label: '操作', edit: false, width: 250, fixed: 'right',
     style: { ...model.value?.control?.style },
+    add: {
+        label: '新增', text: false, type: 'primary',
+        dialog: {
+            title: '新增',
+            popMode: "dialog",
+            slots: {
+                default: () => h(GForm, { modelValue: model.value }),
+            },
+        },
+        auth: () => {
+            return true;
+        },
+        click: (row, column, $index, m) => {
+            model.value.form.disabled = undefined;
+            emits("add", row, column, $index, m);
+            Object.keys(row).forEach(key => {
+                if (model.value[key]) {
+                    model.value[key].value = row[key];
+                }
+            });
+            openModal(model.value.control.add.dialog, model.value?.control?.add?.dialog?.popMode);
+        },
+    },
     view: {
         label: '查看', text: true, type: 'success',
+        dialog: {
+            title: '查看',
+            popMode: "dialog",
+            slots: {
+                default: () => h(GForm, { modelValue: model.value }),
+            },
+        },
         auth: (row, column, $index) => {
             return false;
         },
-        view: (row, column, $index, m) => {
+        click: (row, column, $index, m) => {
+            let w = model.value?.form?.style?.width || 600;
+            if (model.value.control.view.dialog.popMode == "drawer") {
+                model.value.control.view.dialog.size = convertToPx(w) + 45;
+            } else {
+                model.value.control.view.dialog.width = convertToPx(w) + 35;
+            }
             model.value.form.disabled = true;
             emits("view", row, column, $index, m);
-            model.value.form.dialog.width = +(model.value?.form?.style?.width?.replace("px", "")) + 35 || 635;
-            openModal({
-                title: '查看',
-                width: model.value.form?.dialog?.width,
-                ...model.value.form.dialog,
-                slots: {
-                    // 自定义插槽内容
-                    default: () => h(GForm, { modelValue: model.value }),
-                    ...model.value?.form?.dialog?.slots
-                },
+            Object.keys(row).forEach(key => {
+                if (model.value[key]) {
+                    model.value[key].value = row[key];
+                }
             });
+            openModal(model.value.control.view.dialog, model.value?.control?.view?.dialog?.popMode);
         },
-        ...options?.control?.view,
-        ...model.value?.control?.view
     },
     edit: {
         label: '编辑', text: true, type: 'primary',
+        dialog: {
+            title: '编辑',
+            popMode: "dialog",
+            slots: {
+                default: () => h(GForm, { modelValue: model.value }),
+            },
+        },
         auth: (row, column, $index) => {
             return true;
         },
-        edit: (row, column, $index, m) => {
+        click: (row, column, $index, m) => {
             model.value.form.disabled = undefined;
+            let w = model.value?.form?.style?.width || 600;
+            if (model.value.control.edit.dialog.popMode == "drawer") {
+                model.value.control.edit.dialog.size = convertToPx(w) + 45;
+            } else {
+                model.value.control.edit.dialog.width = convertToPx(w) + 35;
+            }
             emits("edit", row, column, $index, m);
-            model.value.form.dialog.width = +(model.value?.form?.style?.width?.replace("px", "")) + 35 || 635;
-            openModal({
-                title: '编辑',
-                width: model.value.form?.dialog?.width,
-                ...model.value.form.dialog,
-                slots: {
-                    // 自定义插槽内容
-                    default: () => h(GForm, { modelValue: model.value }),
-                    ...model.value?.form?.dialog?.slots
-                },
+            Object.keys(row).forEach(key => {
+                if (model.value[key]) {
+                    model.value[key].value = row[key];
+                }
             });
-
-        }, 
-        ...options?.control?.edit,
-        ...model.value?.control?.edit
+            openModal(model.value?.control?.edit?.dialog, model.value?.control?.edit?.dialog?.popMode);
+        },
     },
     delete: {
         text: true, label: '删除', type: 'danger',
         auth: (row, column, $index) => {
             return true;
         },
-        delete: (row, column, $index) => {
-            ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
+        dialog: {
+            message: '此操作将永久删除该文件, 是否继续?', title: '提示', options: { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
+        },
+        click: (row, column, $index) => {
+            let { message, title, options } = model.value.control.delete.dialog;
+            ElMessageBox.confirm(message, title, options).then(() => {
                 emits("delete", { row, column, $index }, (res) => {
                     if (res) {
                         model.value.table.data.splice($index, 1);
-                        console.log(model.value.table.data)
                     }
                 })
             }).catch(() => { });
 
-        }, 
-        ...options?.control?.delete,
-        ...model.value?.control?.delete
+        },
     },
 };
 
+model.value.control = mergeObjects(
+    defaultControl,
+    options?.control,
+    model.value?.control
+);
+
 //table column default attrs 
-const itemValue = reactive({
+const itemValue = ref({
     width: 100, align: "center", formatter: (row, column, cellValue, index) => {
         return cellValue;
     }
@@ -260,7 +285,10 @@ const tableColumns = computed(() => Object.fromEntries(
     Object.entries(model.value)
         .filter(a => a[1].type != "hidden")
         .filter(a => a[1].visible !== false)
-        .map(key => [key[0], key[1]]))
+        .map(key => {
+            key[1].sort = key[1].sort || 0;
+            return [key[0], key[1]]
+        }).sort((a, b) => a[1].sort - b[1].sort))
 );
 </script>
 

package/src/components/index.d.ts

@@ -1,19 +1,34 @@
 import { App } from 'vue';
+import { Component } from 'vue';
+import { ElDialogProps, ElDrawerProps } from 'element-plus';
 
-interface ModalProps {
-    slots: {
-        header?: () => JSX.Element;
-        default?: () => JSX.Element;
-        footer?: () => JSX.Element;
-        [key: string]: (() => JSX.Element) | undefined;
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        openModel: typeof openModal;
+    }
+}
+
+export interface GlobalOptions {
+    // 在这里定义全局选项的类型
+}
+
+export interface OpenModalProps {
+    slots?: {
+        default?: () => any;
+        header?: () => any;
+        footer?: () => any;
     };
-    [key: string]: any;
+    // 在这里定义其他传递给openModal函数的属性
 }
 
-declare const _default: {
-    install(app: App, options?: any): void;
-};
+export function install(app: App, options?: GlobalOptions): void;
+export function openModal(props?: OpenModalProps, popMode?: 'dialog' | 'drawer'): void;
+export function convertToPx(value: string | number, referenceSize?: number): number;
+export function mergeObjects<T extends object>(...objects: T[]): T;
 
-export default _default;
+declare const components: {
+    gTable: Component;
+    gForm: Component;
+};
 
-export declare const openModal: (props?: ModalProps, comType?: 'dialog' | 'drawer') => void;
+export default components;

package/src/components/index.js

@@ -4,18 +4,25 @@ import ElementPlus from 'element-plus'
 import { ElDialog, ElDrawer } from "element-plus";
 import gTable from "./g-table.vue";
 import gForm from "./g-form.vue";
-import { createApp, h, provide, reactive, readonly, ref } from "vue";
-const goptions={};
+import { createApp, h, provide, readonly, ref } from "vue";
+const globalOptions = {};
+
+const components = [
+    gTable,
+    gForm
+]
 
 export default {
     install(app, options = {}) {
-        Object.assign(goptions, options);
-        app.component("g-table", gTable);
-        app.component("g-form", gForm);
+        Object.assign(globalOptions, options);
+        for (const component of components) {
+            app.component(component.name, component);
+        }
         app.provide("options", readonly(options));
+        app.config.globalProperties.openModel = openModal;
     }
 }
-const openModal = (props = {}, comType = "dialog") => {
+const openModal = (props = {}, popMode = "dialog") => {
     const el = document.createElement('div');
     const app = createApp({
         setup() {
@@ -25,25 +32,95 @@ const openModal = (props = {}, comType = "dialog") => {
                 app.unmount(); // 关闭对话框时卸载组件
                 delete el.remove(); // 关闭对话框时删除元素
             };
-            provide("options", goptions);
-            return () => h(comType == "dialog" ? ElDialog : comType == "drawer" ? ElDrawer : null, {
+            provide("options", globalOptions);
+            return () => h(popMode == "dialog" ? ElDialog : popMode == "drawer" ? ElDrawer : null, {
                 modelValue: visible.value,
                 'onUpdate:modelValue': closeModal,
                 draggable: true,
                 "append-to-body": true,
-                "v-if": visible.value,
                 ...props
             },
-                () => [
-                    props.slots.header ? h('div', { slot: 'header' }, props.slots.header()) : null,
-                    props.slots.default ? h(props.slots.default()) : null,
-                    props.slots.footer ? h('div', { slot: 'footer' }, props.slots.footer()) : null,
-                ]
+                {
+                    default: props.slots?.default ? () => h('div', {}, props.slots.default()) : null,
+                    header: props.slots?.header ? () => h('div', {}, props.slots.header()) : null,
+                    footer: props.slots?.footer ? () => h('div', {}, props.slots.footer()) : null
+                }
             );
         }
     });
+    for (const component of components) {
+        app.component(component.name, component);
+    }
     app.use(ElementPlus).mount(el);
     document.body.appendChild(el);
 };
 
-export { openModal };
+function convertToPx(value, referenceSize = window.innerWidth) {
+    // 如果已经是px，直接返回
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (value.endsWith('px')) {
+        return parseFloat(value);
+    }
+
+    // 处理vh和vw
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    if (value.endsWith('vh')) {
+        return (viewportHeight * parseFloat(value) / 100);
+    }
+    if (value.endsWith('vw')) {
+        return (viewportWidth * parseFloat(value) / 100);
+    }
+
+    // 处理%值，需要提供参考大小
+    if (value.endsWith('%')) {
+        if (typeof referenceSize !== 'number') {
+            throw new Error('Reference size is required to convert % to px');
+        }
+        return (referenceSize * parseFloat(value) / 100);
+    }
+
+    // 处理calc表达式
+    if (value.startsWith('calc(') && value.endsWith(')')) {
+        const calcExpr = value.slice(5, -1).trim();
+        // 使用一个安全的eval替代方案来解析calc表达式
+        function safeEval(expr) {
+            // 只允许数字、加减乘除运算符、小括号和空格
+            if (/[0-9+\-*/().\s]+$/.test(expr)) {
+                return new Function('return ' + expr)();
+            } else {
+                throw new Error('Invalid calc expression');
+            }
+        }
+        // 在这里，我们假设calc表达式中可能包含其他单位，因此递归调用parseValueToPx
+        const result = safeEval(calcExpr.replace(/([0-9.]+)([a-z%]+)/g, (match, number, unit) => {
+            return convertToPx(number + unit, referenceSize);
+        }));
+        return result;
+    }
+
+    // 如果无法识别单位，抛出错误
+    throw new Error('Unsupported unit in value: ' + value);
+}
+
+
+function mergeObjects(...objects) {
+    const result = ref({});
+    for (const obj of objects) {
+        if (obj && typeof obj === 'object') {
+            for (const key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
+                        result.value[key] = mergeObjects(result.value[key], obj[key]);
+                    } else {
+                        result.value[key] = obj[key];
+                    }
+                }
+            }
+        }
+    }
+    return result.value;
+}
+export { openModal, convertToPx, mergeObjects };