feat: iframe

.roadhogrc.mock.js

@@ -135,161 +135,180 @@ const proxy = {
       path: '/base/category/list',
     });
   },
-   'GET /api/menus':[
-       {
-         name: 'dashboard',
-         icon: 'dashboard',
-         path: 'dashboard',
-         children: [
-           {
-             name: '分析页',
-             path: 'analysis',
-           },
-           {
-             name: '监控页',
-             path: 'monitor',
-           },
-           {
-             name: '工作台',
-             path: 'workplace',
-             // hideInBreadcrumb: true,
-             // hideInMenu: true,
-           },
-         ],
-       },
-       {
-         name: '表单页',
-         icon: 'form',
-         path: 'form',
-         children: [
-           {
-             name: '基础表单',
-             path: 'basic-form',
-           },
-           {
-             name: '分步表单',
-             path: 'step-form',
-           },
-           {
-             name: '高级表单',
-             authority: 'admin',
-             path: 'advanced-form',
-           },
-         ],
-       },
-       {
-         name: '列表页',
-         icon: 'table',
-         path: 'list',
-         children: [
-           {
-             name: '查询表格',
-             path: 'table-list',
-           },
-           {
-             name: '标准列表',
-             path: 'basic-list',
-           },
-           {
-             name: '卡片列表',
-             path: 'card-list',
-           },
-           {
-             name: '搜索列表',
-             path: 'search',
-             children: [
-               {
-                 name: '搜索列表（文章）',
-                 path: 'articles',
-               },
-               {
-                 name: '搜索列表（项目）',
-                 path: 'projects',
-               },
-               {
-                 name: '搜索列表（应用）',
-                 path: 'applications',
-               },
-             ],
-           },
-         ],
-       },
-       {
-         name: '详情页',
-         icon: 'profile',
-         path: 'profile',
-         children: [
-           {
-             name: '基础详情页',
-             path: 'basic',
-           },
-           {
-             name: '高级详情页',
-             path: 'advanced',
-             authority: 'admin',
-           },
-         ],
-       },
-       {
-         name: '结果页',
-         icon: 'check-circle-o',
-         path: 'result',
-         children: [
-           {
-             name: '成功',
-             path: 'success',
-           },
-           {
-             name: '失败',
-             path: 'fail',
-           },
-         ],
-       },
-       {
-         name: '异常页',
-         icon: 'warning',
-         path: 'exception',
-         children: [
-           {
-             name: '403',
-             path: '403',
-           },
-           {
-             name: '404',
-             path: '404',
-           },
-           {
-             name: '500',
-             path: '500',
-           },
-           {
-             name: '触发异常',
-             path: 'trigger',
-             hideInMenu: true,
-           },
-         ],
-       },
-       {
-         name: '账户',
-         icon: 'user',
-         path: 'user',
-         authority: 'guest',
-         children: [
-           {
-             name: '登录',
-             path: 'login',
-           },
-           {
-             name: '注册',
-             path: 'register',
-           },
-           {
-             name: '注册结果',
-             path: 'register-result',
-           },
-         ],
-       },
-     ]
+  'GET /api/menus': [
+    {
+      name: 'dashboard',
+      icon: 'dashboard',
+      path: 'dashboard',
+      children: [
+        {
+          name: '分析页',
+          path: 'analysis',
+        },
+        {
+          name: '监控页',
+          path: 'monitor',
+        },
+        {
+          name: '工作台',
+          path: 'workplace',
+          // hideInBreadcrumb: true,
+          // hideInMenu: true,
+        },
+      ],
+    },
+    {
+      name: '表单页',
+      icon: 'form',
+      path: 'form',
+      children: [
+        {
+          name: '基础表单',
+          path: 'basic-form',
+        },
+        {
+          name: '分步表单',
+          path: 'step-form',
+        },
+        {
+          name: '高级表单',
+          authority: 'admin',
+          path: 'advanced-form',
+        },
+      ],
+    },
+    {
+      name: '列表页',
+      icon: 'table',
+      path: 'list',
+      children: [
+        {
+          name: '查询表格',
+          path: 'table-list',
+        },
+        {
+          name: '标准列表',
+          path: 'basic-list',
+        },
+        {
+          name: '卡片列表',
+          path: 'card-list',
+        },
+        {
+          name: '搜索列表',
+          path: 'search',
+          children: [
+            {
+              name: '搜索列表（文章）',
+              path: 'articles',
+            },
+            {
+              name: '搜索列表（项目）',
+              path: 'projects',
+            },
+            {
+              name: '搜索列表（应用）',
+              path: 'applications',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: '详情页',
+      icon: 'profile',
+      path: 'profile',
+      children: [
+        {
+          name: '基础详情页',
+          path: 'basic',
+        },
+        {
+          name: '高级详情页',
+          path: 'advanced',
+          authority: 'admin',
+        },
+      ],
+    },
+    {
+      name: '结果页',
+      icon: 'check-circle-o',
+      path: 'result',
+      children: [
+        {
+          name: '成功',
+          path: 'success',
+        },
+        {
+          name: '失败',
+          path: 'fail',
+        },
+      ],
+    },
+    {
+      name: '异常页',
+      icon: 'warning',
+      path: 'exception',
+      children: [
+        {
+          name: '403',
+          path: '403',
+        },
+        {
+          name: '404',
+          path: '404',
+        },
+        {
+          name: '500',
+          path: '500',
+        },
+        {
+          name: '触发异常',
+          path: 'trigger',
+          hideInMenu: true,
+        },
+      ],
+    },
+    {
+      name: '账户',
+      icon: 'user',
+      path: 'user',
+      authority: 'guest',
+      children: [
+        {
+          name: '登录',
+          path: 'login',
+        },
+        {
+          name: '注册',
+          path: 'register',
+        },
+        {
+          name: '注册结果',
+          path: 'register-result',
+        },
+      ],
+    },
+    {
+      name: 'iframe',
+      icon: 'desktop',
+      path: 'iframe',
+      children: [
+        {
+          name: 'Note',
+          path: 'note', // https://team.links123.com/Note
+        },
+        {
+          name: 'Project',
+          path: 'project', // https://team.links123.com/Note
+        },
+        {
+          name: 'Member',
+          path: 'member', // https://team.links123.com/Member
+        },
+      ],
+    },
+  ],
 };
 
 export default (noProxy ? {} : delay(proxy, 1000));

package.json

@@ -46,6 +46,7 @@
     "react-document-title": "^2.0.3",
     "react-dom": "^16.2.0",
     "react-fittext": "^1.0.0",
+    "react-iframe": "^1.1.0",
     "rollbar": "^2.3.4",
     "url-polyfill": "^1.0.10"
   },

src/common/router.js

@@ -171,6 +171,16 @@ export const getRouterData = app => {
     // '/user/:id': {
     //   component: dynamicWrapper(app, [], () => import('../routes/User/SomeComponent')),
     // },
+
+    '/iframe/note': {
+      component: dynamicWrapper(app, [], () => import('../routes/Iframe/Note')),
+    },
+    '/iframe/project': {
+      component: dynamicWrapper(app, [], () => import('../routes/Iframe/Project')),
+    },
+    '/iframe/member': {
+      component: dynamicWrapper(app, [], () => import('../routes/Iframe/Member')),
+    },
   };
   // Get name from ./menu.js or just set it in the router data.
   // const menuData = getFlatMenuData(getMenuData());

src/routes/Iframe/Member/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Iframe from 'react-iframe';
+
+const Member = () => (
+  <Iframe
+    url="https://team.links123.com/Member"
+    width="100%"
+    height="500"
+    // height="100%"
+    position="relative"
+  />
+);
+
+export default Member;

src/routes/Iframe/Note/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Note = () => (
+  <div
+    style={{
+      width: '100%',
+      height: '100%',
+      background: '#fff',
+    }}
+  >
+    {/* <iframe src="https://team.links123.com/Note" title="Note" /> */}
+    <iframe
+      src="http://localhost:5000"
+      title="Note"
+      // scrolling="no"
+      frameBorder="0"
+      width="100%"
+      height="100%"
+    />
+  </div>
+);
+
+export default Note;

src/routes/Iframe/Project/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Iframe from 'react-iframe';
+
+const Project = () => (
+  <Iframe
+    url="https://team.links123.com/Project"
+    width="100%"
+    // height="500"
+    height="100%"
+    position="relative"
+  />
+);
+
+export default Project;