fix(ui): 页面组件无法支持event配置

Tencent · Jun 6, 2022 · cdabe36 · cdabe36
1 parent 5d159ad
commit cdabe36
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 17 deletions.
diff --git a/packages/ui-react/src/page/Page.tsx b/packages/ui-react/src/page/Page.tsx
@@ -18,7 +18,7 @@
 
 import React from 'react';
 
-import { MPage } from '@tmagic/schema';
+import { MComponent, MContainer, MPage } from '@tmagic/schema';
 
 import useApp from '../useApp';
 
@@ -27,15 +27,38 @@ interface PageProps {
 }
 
 const Page: React.FC<PageProps> = ({ config }) => {
-  const { app } = useApp({ config });
+  const { app } = useApp({
+    config,
+    methods: {
+      refresh: () => window.location.reload()
+    }
+  });
 
   if (!app) return null;
 
-  const MagiUiContainer = app.resolveComponent('container');
+  return  <div
+    id={`${config.id || ''}`}
+    className={`magic-ui-page${config.className ? ` ${config.className}` : ''}`}
+    style={app.transformStyle(config.style || {})}
+  >
+    {config.items?.map((item: MComponent | MContainer) => {
+      const MagicUiComp = app.resolveComponent(item.type || 'container');
 
-  return <MagiUiContainer config={{ className: 'magic-ui-page', ...config }}></MagiUiContainer>;
+      if (!MagicUiComp) return null;
+
+      return (
+        <MagicUiComp
+          id={`${item.id || ''}`}
+          key={item.id}
+          config={item}
+          className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
+          style={app.transformStyle(item.style || {})}
+        ></MagicUiComp>
+      );
+    })}
+  </div>;
 };
 
-Page.displayName = 'maigc-ui-page';
+Page.displayName = 'magic-ui-page';
 
 export default Page;
diff --git a/packages/ui-react/src/page/event.ts b/packages/ui-react/src/page/event.ts
@@ -0,0 +1,8 @@
+export default {
+  methods: [
+    {
+      label: '刷新页面',
+      value: 'refresh',
+    },
+  ],
+};
diff --git a/packages/ui-react/src/page/index.ts b/packages/ui-react/src/page/index.ts
@@ -20,5 +20,6 @@ import Page from './Page';
 
 export { default as config } from './formConfig';
 export { default as value } from './initValue';
+export { default as event } from './event';
 
 export default Page;
diff --git a/packages/ui-vue2/src/page/Page.vue b/packages/ui-vue2/src/page/Page.vue
@@ -1,19 +1,25 @@
 <template>
-  <magic-ui-container class="magic-ui-page" :config="config">
+  <div :id="config.id" :class="`magic-ui-page${config.className ? ` ${config.className}` : ''}`" :style="style">
     <slot></slot>
-  </magic-ui-container>
+    <magic-ui-component v-for="item in config.items" :key="item.id" :config="item"></magic-ui-component>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from '@vue/composition-api';
+import { computed, defineComponent, PropType } from '@vue/composition-api';
 
 import { MPage } from '@tmagic/schema';
 
+import Component from '../Component.vue';
 import useApp from '../useApp';
 
 export default defineComponent({
   name: 'magic-ui-page',
 
+  components: {
+    'magic-ui-component': Component,
+  },
+
   props: {
     config: {
       type: Object as PropType<MPage>,
@@ -22,9 +28,15 @@ export default defineComponent({
   },
 
   setup(props) {
-    if (props.config) {
-      useApp(props);
-    }
+    const app = useApp(props);
+
+    return {
+      style: computed(() => app?.transformStyle(props.config.style || {})),
+
+      refresh() {
+        window.location.reload();
+      },
+    };
   },
 });
 </script>
diff --git a/packages/ui-vue2/src/page/event.ts b/packages/ui-vue2/src/page/event.ts
@@ -0,0 +1,8 @@
+export default {
+  methods: [
+    {
+      label: '刷新页面',
+      value: 'refresh',
+    },
+  ],
+};
diff --git a/packages/ui-vue2/src/page/index.ts b/packages/ui-vue2/src/page/index.ts
@@ -20,5 +20,6 @@ import Page from './Page.vue';
 
 export { default as config } from './formConfig';
 export { default as value } from './initValue';
+export { default as event } from './event';
 
 export default Page;
diff --git a/packages/ui/src/page/index.ts b/packages/ui/src/page/index.ts
@@ -20,5 +20,6 @@ import Page from './src/index.vue';
 
 export { default as config } from './src/formConfig';
 export { default as value } from './src/initValue';
+export { default as event } from './src/event';
 
 export default Page;
diff --git a/packages/ui/src/page/src/event.ts b/packages/ui/src/page/src/event.ts
@@ -0,0 +1,8 @@
+export default {
+  methods: [
+    {
+      label: '刷新页面',
+      value: 'refresh',
+    },
+  ],
+};
diff --git a/packages/ui/src/page/src/index.vue b/packages/ui/src/page/src/index.vue
@@ -1,18 +1,29 @@
 <template>
-  <magic-ui-container class="magic-ui-page" :config="config">
+  <div
+    :id="`${config.id || ''}`"
+    :class="`magic-ui-page${config.className ? ` ${config.className}` : ''}`"
+    :style="style"
+  >
     <slot></slot>
-  </magic-ui-container>
+    <magic-ui-component v-for="item in config.items" :key="item.id" :config="item"></magic-ui-component>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 
 import { MPage } from '@tmagic/schema';
 
+import Component from '../../Component.vue';
 import useApp from '../../useApp';
 
 export default defineComponent({
   name: 'magic-ui-page',
+
+  components: {
+    'magic-ui-component': Component,
+  },
+
   props: {
     config: {
       type: Object as PropType<MPage>,
@@ -21,9 +32,15 @@ export default defineComponent({
   },
 
   setup(props) {
-    if (props.config) {
-      useApp(props);
-    }
+    const app = useApp(props);
+
+    return {
+      style: computed(() => app?.transformStyle(props.config.style || {})),
+
+      refresh() {
+        window.location.reload();
+      },
+    };
   },
 });
 </script>