feat(design): 默认使用element-plus

packages/design/src/config.ts

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import defaultAdapter from './defaultAdapter';
 import { PluginOptions } from './type';
 
 let $MAGIC_DESIGN: PluginOptions = {};
@@ -24,6 +25,6 @@ const setConfig = (options: PluginOptions): void => {
   $MAGIC_DESIGN = options;
 };
 
-const getConfig = (key: keyof PluginOptions): any => $MAGIC_DESIGN[key];
+const getConfig = (key: string): any => $MAGIC_DESIGN[key] || (defaultAdapter as any)[key];
 
 export { getConfig, setConfig };

packages/design/src/defaultAdapter.ts

@@ -0,0 +1,208 @@
+export default {
+  components: {
+    button: {
+      component: 'el-button',
+      props: (props: any) => props,
+    },
+
+    card: {
+      component: 'el-card',
+      props: (props: any) => props,
+    },
+
+    cascader: {
+      component: 'el-cascader',
+      props: (props: any) => props,
+    },
+
+    checkbox: {
+      component: 'el-checkbox',
+      props: (props: any) => props,
+    },
+
+    checkboxGroup: {
+      component: 'el-checkbox-group',
+      props: (props: any) => props,
+    },
+
+    col: {
+      component: 'el-col',
+      props: (props: any) => props,
+    },
+
+    collapse: {
+      component: 'el-collapse',
+      props: (props: any) => props,
+    },
+
+    collapseItem: {
+      component: 'el-collapse-item',
+      props: (props: any) => props,
+    },
+
+    colorPicker: {
+      component: 'el-color-picker',
+      props: (props: any) => props,
+    },
+
+    datePicker: {
+      component: 'el-date-picker',
+      props: (props: any) => props,
+    },
+
+    dialog: {
+      component: 'el-dialog',
+      props: (props: any) => props,
+    },
+
+    divider: {
+      component: 'el-divider',
+      props: (props: any) => props,
+    },
+
+    dropdown: {
+      component: 'el-dropdown',
+      props: (props: any) => props,
+    },
+
+    dropdownItem: {
+      component: 'dropdown-item',
+      props: (props: any) => props,
+    },
+
+    dropdownMenu: {
+      component: 'dropdown-menu',
+      props: (props: any) => props,
+    },
+
+    form: {
+      component: 'el-form',
+      props: (props: any) => props,
+    },
+
+    formItem: {
+      component: 'el-form-item',
+      props: (props: any) => props,
+    },
+
+    icon: {
+      component: 'el-icon',
+      props: (props: any) => props,
+    },
+
+    input: {
+      component: 'el-input',
+      props: (props: any) => props,
+    },
+
+    inputNumber: {
+      component: 'el-input-number',
+      props: (props: any) => props,
+    },
+
+    option: {
+      component: 'el-option',
+      props: (props: any) => props,
+    },
+
+    optionGroup: {
+      component: 'el-option-group',
+      props: (props: any) => props,
+    },
+
+    pagination: {
+      component: 'el-pagination',
+      props: (props: any) => props,
+    },
+
+    popover: {
+      component: 'el-popover',
+      props: (props: any) => props,
+    },
+
+    radio: {
+      component: 'el-radio',
+      props: (props: any) => props,
+    },
+
+    radioGroup: {
+      component: 'el-radio-group',
+      props: (props: any) => props,
+    },
+
+    row: {
+      component: 'el-row',
+      props: (props: any) => props,
+    },
+
+    scrollbar: {
+      component: 'el-scrollbar',
+      props: (props: any) => props,
+    },
+
+    select: {
+      component: 'el-select',
+      props: (props: any) => props,
+    },
+
+    step: {
+      component: 'el-step',
+      props: (props: any) => props,
+    },
+
+    steps: {
+      component: 'el-steps',
+      props: (props: any) => props,
+    },
+
+    switch: {
+      component: 'el-switch',
+      props: (props: any) => props,
+    },
+
+    table: {
+      component: 'el-table',
+      props: (props: any) => props,
+    },
+
+    tableColumn: {
+      component: 'el-table-column',
+      props: (props: any) => props,
+    },
+
+    tabPane: {
+      component: 'el-tab-pane',
+      props: (props: any) => props,
+    },
+
+    tabs: {
+      component: 'el-tabs',
+      props: (props: any) => props,
+    },
+
+    tag: {
+      component: 'el-tag',
+      props: (props: any) => props,
+    },
+
+    timePicker: {
+      component: 'el-time-picker',
+      props: (props: any) => props,
+    },
+
+    tooltip: {
+      component: 'el-tooltip',
+      props: (props: any) => props,
+    },
+
+    tree: {
+      component: 'el-tree',
+      props: (props: any) => props,
+    },
+
+    upload: {
+      component: 'el-upload',
+      props: (props: any) => props,
+    },
+  },
+};

packages/design/src/index.ts

@@ -49,8 +49,33 @@ export { default as TMagicTooltip } from './Tooltip.vue';
 export { default as TMagicTree } from './Tree.vue';
 export { default as TMagicUpload } from './Upload.vue';
 
-export const tMagicMessage = {} as unknown as TMagicMessage;
-export const tMagicMessageBox = {} as unknown as TMagicMessageBox;
+export const tMagicMessage = {
+  error: (msg: string) => {
+    console.error(msg);
+  },
+  success: (msg: string) => {
+    console.log(msg);
+  },
+  warning: (msg: string) => {
+    console.warn(msg);
+  },
+  info: (msg: string) => {
+    console.info(msg);
+  },
+  closeAll: (msg: string) => {},
+} as unknown as TMagicMessage;
+
+export const tMagicMessageBox = {
+  alert: (msg: string) => {
+    console.log(msg);
+  },
+  confirm: (msg: string) => {
+    console.log(msg);
+  },
+  close: (msg: string) => {
+    console.log(msg);
+  },
+} as unknown as TMagicMessageBox;
 
 export default {
   install(app: App, options: PluginOptions) {
@@ -68,6 +93,7 @@ export default {
       tMagicMessageBox.prompt = options.messageBox?.prompt;
       tMagicMessageBox.close = options.messageBox?.close;
     }
+
     app.config.globalProperties.$MAGIC_DESIGN = options;
     setConfig(options);
   },

packages/design/src/type.ts

@@ -37,4 +37,5 @@ export interface PluginOptions {
   message?: TMagicMessage;
   messageBox?: TMagicMessageBox;
   components?: Record<string, any>;
+  [key: string]: any;
 }