From cdabe36b9395b5b4c5e565919b5b7a3a74db8d05 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 6 Jun 2022 15:24:59 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E9=A1=B5=E9=9D=A2=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E6=94=AF=E6=8C=81event=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui-react/src/page/Page.tsx | 33 ++++++++++++++++++++++++-----
 packages/ui-react/src/page/event.ts |  8 +++++++
 packages/ui-react/src/page/index.ts |  1 +
 packages/ui-vue2/src/page/Page.vue  | 24 +++++++++++++++------
 packages/ui-vue2/src/page/event.ts  |  8 +++++++
 packages/ui-vue2/src/page/index.ts  |  1 +
 packages/ui/src/page/index.ts       |  1 +
 packages/ui/src/page/src/event.ts   |  8 +++++++
 packages/ui/src/page/src/index.vue  | 29 +++++++++++++++++++------
 9 files changed, 96 insertions(+), 17 deletions(-)
 create mode 100644 packages/ui-react/src/page/event.ts
 create mode 100644 packages/ui-vue2/src/page/event.ts
 create mode 100644 packages/ui/src/page/src/event.ts

diff --git a/packages/ui-react/src/page/Page.tsx b/packages/ui-react/src/page/Page.tsx
index 98b9c0b6e..bc0dc39cd 100644
--- 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
new file mode 100644
index 000000000..ee58371fa
--- /dev/null
+++ 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
index 7f889b8ab..f89f7ed5a 100644
--- 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
index de3b3dc1f..ea863a5d9 100644
--- 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
new file mode 100644
index 000000000..ee58371fa
--- /dev/null
+++ 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
index 55ba38900..58556d6ad 100644
--- 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
index 0d0736b72..db33c31ec 100644
--- 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
new file mode 100644
index 000000000..ee58371fa
--- /dev/null
+++ 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
index 61541a2da..ab1baa710 100644
--- 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>