init

2026-03-09 13:22:45 +08:00
commit 3b392f4e83
300 changed files with 54217 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,10 @@
+/node_modules
+/.env.local
+/.umirc.local.ts
+/config/config.local.ts
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/dist
+.swc
+/web-wxp-print-portal
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1,2 @@
+registry=https://registry.npmmirror.com/
+
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,8 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}
--- a/.umirc.ts
+++ b/.umirc.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'umi';
+
+export default defineConfig({
+  routes: [
+    { path: '/', component: 'indexPage' },
+    { path: '/casePage', component: 'casePage' },
+    { path: '/docPage', component: 'docPage' },
+    { path: '/sourcePage', component: 'sourcePage' },
+    { path: '/aboutPage', component: 'aboutPage' },
+  ],
+  title: '打印模版设计器',
+  npmClient: 'yarn',
+  base: '/web-wxp-print-portal',
+  publicPath: '/web-wxp-print-portal/',
+  outputPath: 'web-wxp-print-portal'
+});
--- a/README.md
+++ b/README.md
@@ -0,0 +1,39 @@
+# printDesigner-website
+## 使用
+
+### 安装依赖:
+
+~~~bash
+npm install
+or
+yarn install
+~~~
+
+### 启动服务:
+
+~~~bash
+yarn start
+~~~
+
+### 编译打包
+
+~~~bash
+yarn build
+~~~
+
+### 发布流程
+
+### 登录运维平台 --> 选择Linux服务端运维 --> PBC_运营平台197/PBC_构建服务器52，进入文件目录
+### winning>app>html>web-wxp-print-portal
+### 将打包好的dist压缩上传，删除原文件
+### 进入终端，进入对应目录下解压(需要先cd ..进入上一级目录)
+
+~~~bash
+cd /winning/app/html/
+unzip web-wxp-print-portal.zip
+~~~
+
+### 发布完成
+
+### 其他说明
+#### 图片统一放在目录在src/pages/image下，需要改动将新图片拷贝至目录然后在图片引用代码修改图片名称即可
--- a/package.json
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+  "private": true,
+  "author": "joe <q_yn@winning.com.cn>",
+  "scripts": {
+    "dev": "umi dev",
+    "build": "umi build",
+    "postinstall": "umi setup",
+    "setup": "umi setup",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "ace-builds": "^1.30.0",
+    "ahooks": "^3.7.8",
+    "antd": "^5.9.4",
+    "prettier": "^3.0.3",
+    "raw-loader": "^4.0.2",
+    "react-ace": "^10.1.0",
+    "umi": "^4.0.83"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^5.0.3"
+  }
+}
--- a/src/assets/yay.jpg
+++ b/src/assets/yay.jpg
--- a/src/favicon.ico
+++ b/src/favicon.ico
--- a/src/global.less
+++ b/src/global.less
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  min-width: 1400px;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+// .ant-btn-default,
+// .ant-btn-primary {
+//   border-radius: 2px;
+// }
--- a/src/layouts/index.less
+++ b/src/layouts/index.less
@@ -0,0 +1,76 @@
+.layout {
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    border-bottom: 1px solid #eee;
+  }
+  .shadow {
+    box-shadow: 0px 3px 10px #ccc;
+  }
+  .navs {
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .navsLeft {
+      display: flex;
+      justify-content: left;
+      align-items: center;
+
+      .logo {
+        height: 48px;
+        text-align: center;
+        color: #fff;
+        margin-right: 100px;
+        display: flex;
+        align-items: center;
+
+        .logoContent {
+          width: 100px;
+          height: 29px;
+          background: url('../pages/image/原色@2x.png') no-repeat;
+          background-size: 100px 29px;
+          margin-right: 8px;
+        }
+        .logoText {
+          color: #000;
+          font-weight: bold;
+          font-size: 18px;
+        }
+      }
+
+      .menuList {
+        display: flex;
+        align-items: center;
+        .hover {
+          color: #2d5afa;
+          font-weight: 400;
+        }
+        div {
+          width: 100px;
+          text-align: center;
+          cursor: pointer;
+          font-size: 16px;
+          font-weight: 500;
+          &:hover {
+            color: #2d5afa;
+          }
+        }
+      }
+    }
+  }
+
+  .layoutContent {
+    width: 100%;
+    height: 100%;
+    background: #fff;
+  }
+}
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -0,0 +1,160 @@
+import { Link, Outlet, useLocation, history } from 'umi';
+import styles from './index.less';
+
+import { useEffect, useState, useRef } from 'react';
+import { Button, Layout, Menu, ConfigProvider } from 'antd';
+const { Header, Content, Footer } = Layout;
+import zhCN from 'antd/locale/zh_CN';
+import { useScroll } from 'ahooks';
+
+const App = () => {
+  const location = useLocation();
+  const [selectKeys, setSelectKeys] = useState('1');
+  const ref = useRef<any>(null);
+  const headerRef = useRef<any>(null);
+  const scroll = useScroll(document);
+
+  const onClick = (e: any) => {
+    if (e == 1) {
+      //首页
+      history.push('/');
+    }
+    if (e == 2) {
+      //文档
+      history.push('/docPage');
+    }
+    if (e == 3) {
+      //案例
+      history.push('/casePage');
+    }
+    if (e == 4) {
+      //资源
+      history.push('/sourcePage');
+    }
+    if (e == 5) {
+      //关于
+      history.push('/aboutPage');
+    }
+    setSelectKeys(e.toString());
+  };
+
+  const download = () => {
+    history.push('/sourcePage');
+  };
+
+  useEffect(() => {
+    switch (location.pathname) {
+      case '/':
+        setSelectKeys('1');
+        break;
+      case '/docPage':
+        setSelectKeys('2');
+        break;
+      case '/casePage':
+        setSelectKeys('3');
+        break;
+      case '/sourcePage':
+        setSelectKeys('4');
+        break;
+      case '/aboutPage':
+        setSelectKeys('5');
+        break;
+
+      default:
+        break;
+    }
+
+    localStorage.clear();
+    sessionStorage.clear();
+    clearAllCookie();
+  }, [location]);
+
+  const clearAllCookie = () => {
+    document.cookie
+      .split(';')
+      .forEach(
+        (cookie) =>
+          (document.cookie = cookie
+            .replace(/^ +/, '')
+            .replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`)),
+      );
+  };
+
+  useEffect(() => {
+    if (scroll?.top == 0) {
+      headerRef.current.className = `${styles.header}`;
+    } else {
+      headerRef.current.className = `${styles.header} ${styles.shadow}`;
+    }
+  }, [scroll?.top]);
+
+  return (
+    <ConfigProvider locale={zhCN} theme={{ token: { borderRadius: 2 } }}>
+      <Layout className={styles.layout}>
+        <Header className={styles.header} ref={headerRef}>
+          <div className={styles.navs} ref={ref}>
+            <div className={styles.navsLeft}>
+              <div className={styles.logo}>
+                <div className={styles.logoContent}></div>
+                <div className={styles.logoText}>打印设计器</div>
+              </div>
+              <div className={styles.menuList}>
+                <div
+                  onClick={() => onClick(1)}
+                  className={`${selectKeys == '1' ? styles.hover : {}}`}
+                >
+                  首页
+                </div>
+                <div
+                  onClick={() => onClick(2)}
+                  className={`${selectKeys == '2' ? styles.hover : {}}`}
+                >
+                  研发
+                </div>
+                <div
+                  onClick={() => onClick(3)}
+                  className={`${selectKeys == '3' ? styles.hover : {}}`}
+                >
+                  模板设计器
+                </div>
+                <div
+                  onClick={() => onClick(4)}
+                  className={`${selectKeys == '4' ? styles.hover : {}}`}
+                >
+                  资源
+                </div>
+                {/* <div
+                  onClick={() => onClick(5)}
+                  className={`${selectKeys == '5' ? styles.hover : {}}`}
+                >
+                  关于
+                </div> */}
+              </div>
+            </div>
+
+            <div>
+              <Button
+                type="primary"
+                style={{ borderRadius: 4, width: 96, background: '#2D5AFA' }}
+                onClick={download}
+              >
+                下载
+              </Button>
+            </div>
+          </div>
+        </Header>
+        <Content>
+          <div className={styles.layoutContent}>
+            <Outlet />
+          </div>
+        </Content>
+        {/* <Footer
+          style={{
+            textAlign: 'center',
+          }}
+        ></Footer> */}
+      </Layout>
+    </ConfigProvider>
+  );
+};
+export default App;
--- a/src/loader.js
+++ b/src/loader.js
@@ -0,0 +1,7 @@
+function mdLoader(content) {
+  return `
+      const content = '${JSON.stringify(content)}'
+      export default { content };
+  `;
+}
+module.exports = mdLoader;
--- a/src/pages/aboutPage/index.less
+++ b/src/pages/aboutPage/index.less
@@ -0,0 +1,36 @@
+.sourcePage {
+  display: flex;
+  // flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  background: #f7f8fa;
+  height: calc(100vh - 64px);
+
+  .content {
+    width: 1200px;
+    height: calc(100vh - 104px);
+    padding: 0 16px;
+    background: #fff;
+    margin-top: 20px;
+
+    .product {
+      padding-top: 40px;
+      padding-left: 24px;
+
+      .title {
+        font-size: 24px;
+        font-weight: bold;
+      }
+
+      .description {
+        font-size: 18px;
+      }
+
+      .emailBox {
+        .email {
+          font-size: 18px;
+        }
+      }
+    }
+  }
+}
--- a/src/pages/aboutPage/index.tsx
+++ b/src/pages/aboutPage/index.tsx
@@ -0,0 +1,61 @@
+import { List, Typography } from 'antd';
+import styles from './index.less';
+
+const index = () => {
+  let list = [
+    {
+      name: '刘晓勇',
+      email: 'lxy11@winning.com.cn',
+      type: '运行态问题',
+    },
+    {
+      name: '王鹏',
+      email: 'wang_peng@winning.com.cn',
+      type: '项目对接相关',
+    },
+    {
+      name: '乔宇宁',
+      email: 'q_yn@winning.com.cn',
+      type: '设计态使用',
+    },
+  ];
+  return (
+    <div className={styles.sourcePage}>
+      <div className={styles.content}>
+        <div className={styles.product}>
+          <div className={styles.title}>工具介绍</div>
+          <div className={styles.description}>
+            <p>
+              WXP打印设计器是WXP研发平台部研发的web浏览器端的打印组件，
+              功能丰富，支持常见的控件。
+            </p>
+            <p> 如：线条，文本框，复选框，图片(条形码)，表格，交叉表等。</p>
+            <p>目前已在住院临床业务，护理业务，药品业务等业务部门上线。</p>
+            <p>
+              解决了批量打印可能存在的打印性能问题，实现了高效打印，
+              并在临床实践中得到了验证。
+            </p>
+            <p>可为现阶段fast report组件的有效平替。</p>
+          </div>
+        </div>
+        <div className={styles.product}>
+          <div className={styles.title}>联系人员</div>
+          <div className={styles.emailBox}>
+            {list.map((item, key) => {
+              return (
+                <p key={key} className={styles.email}>
+                  {item.type}， 联系方式:
+                  <span style={{ color: '#3d86ef', cursor: 'pointer' }}>
+                    {item.email}
+                  </span>
+                </p>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default index;
--- a/src/pages/casePage/index.less
+++ b/src/pages/casePage/index.less
@@ -0,0 +1,78 @@
+.indexContent {
+  height: calc(100vh - 64px);
+
+  :global(.ant-menu-light .ant-menu-item-selected) {
+    background: #eef2fd;
+    margin: 0;
+    width: 100%;
+    border-left: 4px solid #2d5afa !important;
+    border-radius: 0;
+  }
+  :global(.ant-menu-light .ant-menu-item) {
+    margin: 0;
+    width: 100%;
+    border-left: 4px solid transparent;
+    border-radius: 0;
+  }
+  :global(.ant-menu-inline .ant-menu-item) {
+    margin: 0;
+    width: 100%;
+    border-radius: 0;
+  }
+
+  .componentContent1 {
+    width: 100%;
+    height: calc(100vh - 84px);
+    display: flex;
+    justify-content: center;
+    background: #fff;
+    overflow: auto;
+
+    .content {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      position: relative;
+
+      .leftNav {
+        width: 215px;
+        height: calc(100vh - 110px);
+        overflow: auto;
+        background: #fff;
+        position: absolute;
+        padding-top: 18px;
+        top: 20px;
+        left: 15%;
+        z-index: 1;
+      }
+
+      .mainContent {
+        width: 1000px;
+        height: calc(100vh - 110px);
+        // overflow: auto;
+        padding-left: 12px;
+        margin-top: 20px;
+        left: calc(15% + 240px);
+        // position: relative;
+
+        & > div:first-child {
+          width: 1000px;
+          height: calc(100vh - 110px);
+          background-color: #fff;
+          padding-left: 32px;
+          padding-top: 24px;
+          // overflow: auto;
+
+          h1 {
+            margin-top: 0;
+          }
+        }
+
+        .imageBox {
+          display: flex;
+          justify-content: start;
+        }
+      }
+    }
+  }
+}
--- a/src/pages/casePage/index.tsx
+++ b/src/pages/casePage/index.tsx
--- a/src/pages/docPage/CompareWithFastReport/index.less
+++ b/src/pages/docPage/CompareWithFastReport/index.less
--- a/src/pages/docPage/CompareWithFastReport/index.tsx
+++ b/src/pages/docPage/CompareWithFastReport/index.tsx
@@ -0,0 +1,212 @@
+import { Table, Image } from 'antd';
+import React from 'react';
+
+const index = () => {
+  const dataSource1 = [
+    {
+      key: '0-1',
+      types: 'sessionStorageAuthorization',
+      type: '使用链路',
+    },
+    {
+      key: '0-2',
+      types: 'sessionStorageAuthorization',
+      type: '浏览器web端设计器',
+    },
+    {
+      key: '0-3',
+      types: 'sessionStorageAuthorization',
+      type: '运行态web跨平台使用',
+    },
+    {
+      key: '0-4',
+      types: 'sessionStorageAuthorization',
+      type: '集成方式',
+    },
+    {
+      key: '1-0',
+      types: 'sessionStorageAuthorization',
+      type: '计算方式',
+    },
+    {
+      key: '1-1',
+      types: 'sessionStorageUserInfo',
+      type: '性能',
+    },
+    {
+      key: '1-2',
+      types: 'id',
+      type: '设计器易用性',
+    },
+    {
+      key: '1-3',
+      types: 'sessionStorageAuthorization',
+      type: '对接成本',
+    },
+    {
+      key: '1-4',
+      types: 'sessionStorageUserInfo',
+      type: '常见控件(线条/文本/图片/条码/复选框/表格/交叉表)',
+    },
+    {
+      key: '1-5',
+      types: 'id',
+      type: '事件脚本',
+    },
+    {
+      key: '1-6',
+      types: 'sessionStorageAuthorization',
+      type: '数据循环',
+    },
+    {
+      key: '1-7',
+      types: 'sessionStorageUserInfo',
+      type: '套打',
+    },
+    {
+      key: '1-8',
+      types: 'id',
+      type: '续打',
+    },
+    {
+      key: '1-9',
+      types: 'sessionStorageAuthorization',
+      type: '补打',
+    },
+    {
+      key: '1-10',
+      types: 'sessionStorageUserInfo',
+      type: '小票纸打印等特殊打印',
+    },
+    {
+      key: '1-11',
+      types: 'id',
+      type: '核心特点',
+    },
+    {
+      key: '1-12',
+      types: 'sessionStorageAuthorization',
+      type: '核心优势',
+    },
+    {
+      key: '1-13',
+      types: 'sessionStorageUserInfo',
+      type: '模版维护',
+    },
+    {
+      key: '1-14',
+      types: 'id',
+      type: '制作时机',
+    },
+    {
+      key: '1-15',
+      types: 'id',
+      type: '问题点',
+    },
+  ];
+  let arr: any = [];
+  dataSource1.map((item, key) => {
+    arr.push({
+      key,
+      comp: '',
+      type:
+        key <= 8 ? '调用方案' : key > 8 && key <= 15 ? '功能特性' : '优缺点',
+      types: item.type,
+      fast: '1',
+      pango: '2',
+    });
+  });
+
+  const sharedOnCell = (_: any, index: any) => {
+    return {
+      colSpan: 1,
+    };
+  };
+
+  const columns1 = [
+    {
+      title: '对比',
+      dataIndex: 'comp',
+      key: 'comp',
+      width: '10%',
+      render: () => {
+        return '特性对比';
+      },
+      colSpan: 3,
+      onCell: (_: any, index: any) => {
+        if (index === 0) {
+          return {
+            rowSpan: 20,
+          };
+        } else {
+          return {
+            rowSpan: 0,
+          };
+        }
+      },
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      key: 'type',
+      width: '10%',
+      colSpan: 0,
+      onCell: (_: any, index: any) => {
+        if (index <= 8) {
+          return {
+            rowSpan: 9,
+          };
+        } else if (index > 8 && index <= 15) {
+          return {
+            rowSpan: 7,
+          };
+        } else {
+          return {
+            rowSpan: 4,
+          };
+        }
+      },
+    },
+    {
+      title: '分类项',
+      dataIndex: 'types',
+      key: 'types',
+      width: '20%',
+      colSpan: 0,
+      onCell: sharedOnCell,
+    },
+    {
+      title: 'fast report',
+      dataIndex: 'fast',
+      key: 'fast',
+      width: '30%',
+      onCell: sharedOnCell,
+    },
+    {
+      title: 'pango print(wxp web打印)',
+      dataIndex: 'pango',
+      key: 'pango',
+      width: '30%',
+      onCell: sharedOnCell,
+    },
+  ];
+
+  return (
+    <div>
+      {/* <Table
+        dataSource={arr}
+        columns={columns1}
+        pagination={false}
+        style={{ width: 1000 }}
+        bordered
+      /> */}
+      <Image
+        width={770}
+        height={1684}
+        src={require('../../image/对比1.png')}
+      ></Image>
+    </div>
+  );
+};
+
+export default index;
--- a/src/pages/docPage/barCodeComp/index.less
+++ b/src/pages/docPage/barCodeComp/index.less
@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(242, 121, 189);
+}
--- a/src/pages/docPage/barCodeComp/index.styled-components.tsx
+++ b/src/pages/docPage/barCodeComp/index.styled-components.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { styled } from 'umi';
+
+const Wrapper = styled.div`
+  h1 { background: rgb(121, 184, 242); }
+`;
+
+export default function Page() {
+  return (
+    <Wrapper>
+      <h1>Page index</h1>
+    </Wrapper>
+  );
+}
--- a/src/pages/docPage/barCodeComp/index.tsx
+++ b/src/pages/docPage/barCodeComp/index.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Table } from 'antd';
+const index = () => {
+  const dataSource = [
+    {
+      key: '1',
+      name: '编码类型',
+      description: '条形码显示方式',
+      values:
+        'Codabar、' +
+        'Code39、' +
+        'Code128、' +
+        'EAN13、' +
+        'PDF417、' +
+        'QR、' +
+        'DataMatrix',
+    },
+    {
+      key: '2',
+      name: '文本显示',
+      description: '条形码文字描述是否显示',
+      values: '是/否',
+    },
+    {
+      key: '3',
+      name: 'QR容错级别',
+      description: '编码类型为QR时候生成的二维码容错级别',
+      values: 'L级(7%)、' + 'M级(15%)、' + 'Q级(20%)、' + 'H级(25%)',
+    },
+    {
+      key: '4',
+      name: '旋转角度',
+      description: '条形码旋转角度',
+      values: 'number',
+    },
+  ];
+  const columns = [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '可选值',
+      dataIndex: 'values',
+      key: 'values',
+    },
+  ];
+
+  return (
+    <>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+    </>
+  );
+};
+
+export default index;
--- a/src/pages/docPage/checkboxComp/index.less
+++ b/src/pages/docPage/checkboxComp/index.less
@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(136, 242, 121);
+}
--- a/src/pages/docPage/checkboxComp/index.styled-components.tsx
+++ b/src/pages/docPage/checkboxComp/index.styled-components.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { styled } from 'umi';
+
+const Wrapper = styled.div`
+  h1 { background: rgb(121, 184, 242); }
+`;
+
+export default function Page() {
+  return (
+    <Wrapper>
+      <h1>Page index</h1>
+    </Wrapper>
+  );
+}
--- a/src/pages/docPage/checkboxComp/index.tsx
+++ b/src/pages/docPage/checkboxComp/index.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { Table } from 'antd';
+const index = () => {
+  const dataSource = [
+    {
+      key: '1',
+      name: '自动折行',
+      description: '文字超出是否换行',
+      values: '是/否',
+    },
+    {
+      key: '2',
+      name: '折行间距',
+      description: '选择折行之后生效，为各行之间距离',
+      values: 'number',
+    },
+    {
+      key: '3',
+      name: '列距',
+      description: '每列之间的距离',
+      values: 'number',
+    },
+    {
+      key: '4',
+      name: '自动尺寸',
+      description:
+        '复选框右侧放置文本的位置宽度依据文本内容自动调整，正常情况下此字段需选择"是"',
+      values: '是/否',
+    },
+    {
+      key: '5',
+      name: '竖向排版',
+      description: '从上到下排列',
+      values: '是/否',
+    },
+    {
+      key: '6',
+      name: '显示级别',
+      description: '组件的显示方式',
+      values: '不显示、除首级外、全显示、仅末级',
+    },
+    {
+      key: '7',
+      name: '选择形状',
+      description: '文本前勾选框的样式',
+      values: '圆形/矩形',
+    },
+    {
+      key: '8',
+      name: '选择填充',
+      description: '文本前勾选框内的充填物',
+      values: '勾选、半实心、全实心、字符充填',
+    },
+    {
+      key: '9',
+      name: '隐藏选中框',
+      description: '是否隐藏选中框',
+      values: '是/否',
+    },
+    {
+      key: '10',
+      name: '子项括号',
+      description:
+        '复选框单个选项内有子项时的子项括号，目前此属性暂未开放，维持默认值即可',
+      values: '小括号、中括号、大括号、尖括号',
+    },
+    {
+      key: '11',
+      name: '子项连接',
+      description: '横向排版时每项之间的分隔符',
+      values: '空格、逗号、点',
+    },
+    {
+      key: '12',
+      name: '隐藏未选中',
+      description: '未选中的子项是否隐藏',
+      values: '是/否',
+    },
+    {
+      key: '13',
+      name: '复选框宽',
+      description: '复选框的方格宽度',
+      values: '正常情况需与字体字号相匹配',
+    },
+    {
+      key: '14',
+      name: '复选框高',
+      description: '复选框的方格高度',
+      values: '正常情况需与字体字号相匹配',
+    },
+  ];
+  const columns = [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '可选值',
+      dataIndex: 'values',
+      key: 'values',
+    },
+  ];
+
+  return (
+    <>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+    </>
+  );
+};
+
+export default index;
--- a/src/pages/docPage/codecComp/index.less
+++ b/src/pages/docPage/codecComp/index.less
@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(242, 121, 239);
+}
--- a/src/pages/docPage/codecComp/index.styled-components.tsx
+++ b/src/pages/docPage/codecComp/index.styled-components.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { styled } from 'umi';
+
+const Wrapper = styled.div`
+  h1 { background: rgb(121, 184, 242); }
+`;
+
+export default function Page() {
+  return (
+    <Wrapper>
+      <h1>Page index</h1>
+    </Wrapper>
+  );
+}
--- a/src/pages/docPage/codecComp/index.tsx
+++ b/src/pages/docPage/codecComp/index.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { Table } from 'antd';
+const index = () => {
+  const dataSource = [
+    {
+      key: '1',
+      name: '自动折行',
+      description: '文字超出是否换行',
+      values: '是/否',
+    },
+    {
+      key: '2',
+      name: '自动尺寸',
+      description: '格子自动充填和均分当前框体',
+      values: '是/否',
+    },
+    {
+      key: '3',
+      name: '格子形状',
+      description: '格子形状',
+      values: '矩形、圆角矩形、圆形',
+    },
+    {
+      key: '4',
+      name: '格子数量',
+      description: '编码组格子数量',
+      values: 'number',
+    },
+    {
+      key: '5',
+      name: '格子宽',
+      description: '编码自格子宽度',
+      values: 'number',
+    },
+    {
+      key: '6',
+      name: '格子高',
+      description: '编码自格子高度',
+      values: 'number',
+    },
+    {
+      key: '7',
+      name: '显示边框',
+      description: '是否显示格子边框',
+      values: '是/否',
+    },
+    {
+      key: '8',
+      name: '边框颜色',
+      description: '边框颜色',
+      values: '-',
+    },
+    {
+      key: '9',
+      name: '边框宽',
+      description: '边框宽',
+      values: '0.5pt-8pt',
+    },
+    {
+      key: '10',
+      name: '充填类型',
+      description: '格子内容填充物',
+      values: '字符充填、勾选、半实心、全实心',
+    },
+    {
+      key: '11',
+      name: '格子间距',
+      description: '格子间距',
+      values: 'number',
+    },
+  ];
+  const columns = [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '可选值',
+      dataIndex: 'values',
+      key: 'values',
+    },
+  ];
+
+  return (
+    <>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+    </>
+  );
+};
+
+export default index;
--- a/src/pages/docPage/data.js
+++ b/src/pages/docPage/data.js
@@ -0,0 +1,315 @@
+// 存储部分未使用数据
+
+// doc
+const treeData = [
+  {
+    key: `0`,
+    title: `使用入门`,
+    children: [],
+  },
+  {
+    key: `1`,
+    title: `组件相关`,
+    children: [
+      {
+        key: `1-0`,
+        title: `线条`,
+        children: [],
+      },
+      {
+        key: `1-1`,
+        title: `标签`,
+        children: [],
+      },
+      {
+        key: `1-2`,
+        title: `标记符`,
+        children: [],
+      },
+      {
+        key: `1-3`,
+        title: `复选框`,
+        children: [],
+      },
+      {
+        key: `1-4`,
+        title: `图片`,
+        children: [],
+      },
+      {
+        key: `1-5`,
+        title: `编码组`,
+        children: [],
+      },
+      {
+        key: `1-6`,
+        title: `条形码`,
+        children: [],
+      },
+      {
+        key: `1-7`,
+        title: `面板`,
+        children: [],
+      },
+      {
+        key: `1-8`,
+        title: `表格`,
+        children: [],
+      },
+      {
+        key: `1-9`,
+        title: `列板、行板`,
+        children: [],
+      },
+
+      // {
+      //   key: `1-11`,
+      //   title: `交叉表`,
+      //   children: [],
+      // },
+      {
+        key: `1-12`,
+        title: `公共属性`,
+        children: [],
+      },
+      // {
+      //   key: `1-13`,
+      //   title: `变量`,
+      //   children: [],
+      // },
+      // {
+      //   key: `1-14`,
+      //   title: `公共事件`,
+      //   children: [],
+      // },
+    ],
+  },
+  {
+    key: `2`,
+    title: `工具栏相关`,
+    children: [
+      {
+        key: `2-0`,
+        title: `控件拖拽`,
+        children: [],
+      },
+      {
+        key: `2-1`,
+        title: `撤销回退`,
+        children: [],
+      },
+      {
+        key: `2-2`,
+        title: `新增页面删除页面`,
+        children: [],
+      },
+      {
+        key: `2-3`,
+        title: `新建文件，保存`,
+        children: [],
+      },
+      {
+        key: `2-4`,
+        title: `模板预览`,
+        children: [],
+      },
+      {
+        key: `2-5`,
+        title: `置前置后`,
+        children: [],
+      },
+      {
+        key: `2-6`,
+        title: `页面设置`,
+        children: [],
+      },
+    ],
+  },
+  {
+    key: `3`,
+    title: `数据集树相关`,
+    children: [],
+  },
+  {
+    key: `4`,
+    title: `模板制作视频`,
+    children: [],
+  },
+  {
+    key: `5`,
+    title: `模板树相关`,
+    children: [],
+  },
+  {
+    key: `6`,
+    title: `模板运行态API`,
+    children: [],
+  },
+  // {
+  //   key: `7`,
+  //   title: `画布操作`,
+  //   children: [],
+  // },
+  {
+    key: `8`,
+    title: `混合框架打印对接`,
+    children: [],
+  },
+];
+
+//case
+const treeData1 = [
+  {
+    key: `1`,
+    title: `使用简单控件`,
+    children: [
+      {
+        key: `1-0`,
+        title: `线条`,
+        children: [],
+      },
+      {
+        key: `1-1`,
+        title: `文本框`,
+        children: [],
+      },
+      {
+        key: `1-2`,
+        title: `复选框`,
+        children: [],
+      },
+      {
+        key: `1-3`,
+        title: `图片`,
+        children: [],
+      },
+      {
+        key: `1-4`,
+        title: `面板`,
+        children: [],
+      },
+    ],
+  },
+  {
+    key: `2`,
+    title: `使用脚本打印`,
+    children: [
+      {
+        key: `2-1`,
+        title: `动态设置边框`,
+        children: [],
+      },
+      {
+        key: `2-2`,
+        title: `表格合计等`,
+        children: [],
+      },
+    ],
+  },
+  {
+    key: `3`,
+    title: `使用简单表格`,
+    children: [
+      {
+        key: `3-2`,
+        title: `横向表格(横表&行板)`,
+        children: [],
+      },
+      {
+        key: `3-3`,
+        title: `纵向表格(列表&列板)`,
+        children: [],
+      },
+    ],
+  },
+  {
+    key: `4`,
+    title: `使用文本打印样式`,
+    children: [
+      {
+        key: `4-1`,
+        title: `自动大小、最大行数、最大宽度`,
+        children: [],
+      },
+      {
+        key: `4-2`,
+        title: `换行文本、页缝换行`,
+        children: [],
+      },
+    ],
+  },
+  {
+    key: `5`,
+    title: `使用循环打印样式`,
+    children: [
+      {
+        key: `5-2`,
+        title: `每页打印`,
+        children: [],
+      },
+      {
+        key: `5-3`,
+        title: `循环方向、最大水平、垂直打印设置`,
+        children: [],
+      },
+      {
+        key: `5-4`,
+        title: `使用补齐空行`,
+        children: [],
+      },
+    ],
+  },
+  {
+    key: `6`,
+    title: `使用数据分组打印`,
+    children: [
+      {
+        key: `6-1`,
+        title: `简单分组`,
+        children: [],
+      },
+      {
+        key: `6-2`,
+        title: `多级分组`,
+        children: [],
+      },
+    ],
+  },
+  {
+    key: `7`,
+    title: `使用交叉报表打印`,
+    children: [],
+  },
+  {
+    key: `8`,
+    title: `使用多页模版打印`,
+    children: [],
+  },
+  {
+    key: `9`,
+    title: `医嘱打印`,
+    children: [
+      {
+        key: `9-1`,
+        title: `续打实现`,
+        children: [],
+      },
+      {
+        key: `9-2`,
+        title: `补打实现`,
+        children: [],
+      },
+
+      {
+        key: `9-3`,
+        title: `套打实现`,
+        children: [],
+      },
+      {
+        key: `9-4`,
+        title: `回调数据`,
+        children: [],
+      },
+    ],
+  },
+];
--- a/src/pages/docPage/index.less
+++ b/src/pages/docPage/index.less
@@ -0,0 +1,76 @@
+.indexContent {
+  height: calc(100vh - 64px);
+
+  :global(.ant-menu-light .ant-menu-item-selected) {
+    background: #eef2fd;
+    margin: 0;
+    width: 100%;
+    border-left: 4px solid #2d5afa !important;
+    border-radius: 0;
+  }
+  :global(.ant-menu-light .ant-menu-item) {
+    margin: 0;
+    width: 100%;
+    border-left: 4px solid transparent;
+    border-radius: 0;
+  }
+  :global(.ant-menu-inline .ant-menu-item) {
+    margin: 0;
+    width: 100%;
+    border-radius: 0;
+  }
+
+  .componentContent1 {
+    width: 100%;
+    height: calc(100vh - 84px);
+    display: flex;
+    justify-content: center;
+    background: #fff;
+    overflow: auto;
+
+    .content {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      position: relative;
+
+      .leftNav {
+        width: 215px;
+        height: calc(100vh - 110px);
+        background: #fff;
+        position: absolute;
+        padding-top: 18px;
+        top: 20px;
+        left: 15%;
+        z-index: 1;
+      }
+
+      .mainContent {
+        width: 1000px;
+        height: calc(100vh - 110px);
+        // overflow: auto;
+        margin-top: 20px;
+        left: calc(15% + 240px);
+        // position: relative;
+
+        & > div:first-child {
+          width: 1000px;
+          height: calc(100vh - 110px);
+          background-color: #fff;
+          padding-left: 32px;
+          padding-top: 24px;
+          // overflow: auto;
+
+          h1 {
+            margin-top: 0;
+          }
+        }
+
+        .imageBox {
+          display: flex;
+          justify-content: start;
+        }
+      }
+    }
+  }
+}
--- a/src/pages/docPage/index.tsx
+++ b/src/pages/docPage/index.tsx
@@ -0,0 +1,896 @@
+import { Tree, Image, Table, Menu, Layout } from 'antd';
+import styles from './index.less';
+import { useEffect, useState } from 'react';
+import TextComp from './textComp';
+import LineComp from './lineComp';
+import MarkComp from './markComp';
+import CheckboxComp from './checkboxComp';
+import PicComp from './picComp';
+import CodecComp from './codecComp';
+import BarCodeComp from './barCodeComp';
+import PanelComp from './panelComp';
+import TableComp from './tableComp';
+import RowComp from './rowComp';
+import PublicComp from './publicComp';
+import CompareWithFastReport from './CompareWithFastReport';
+const { Sider } = Layout;
+
+function getItem(label: any, key: any, icon?: any, children?: any, type?: any) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  };
+}
+
+export default function HomePage() {
+  const [selectedKeys, setSelectedKeys] = useState(['0-0']);
+  const [openKeys, setOpenKeys] = useState(['0']);
+  const rootSubmenuKeys = ['0', '1', '2', '3', '4', '5', '6', '8'];
+
+  const onOpenChange = (keys: any) => {
+    const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);
+    if (latestOpenKey && rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
+      setOpenKeys(keys);
+    } else {
+      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
+    }
+  };
+
+  const items = [
+    getItem('使用入门', '0', null, [
+      getItem('使用入门', '0-0'),
+      getItem('与FastReport对比', '0-1'),
+    ]),
+    // getItem('组件相关', '1', null, [
+    //   getItem('线条', '1-0'),
+    //   getItem('标签', '1-1'),
+    //   getItem('标记符', '1-2'),
+    //   getItem('复选框', '1-3'),
+    //   getItem('图片', '1-4'),
+    //   getItem('编码组', '1-5'),
+    //   getItem('条形码', '1-6'),
+    //   getItem('面板', '1-7'),
+    //   getItem('表格', '1-8'),
+    //   getItem('列板、行板', '1-9'),
+    //   getItem('公共属性', '1-12'),
+    // ]),
+    // getItem('工具栏相关', '2', null, [
+    //   getItem('控件拖拽', '2-0'),
+    //   getItem('撤销回退', '2-1'),
+    //   getItem('新增页面删除页面', '2-2'),
+    //   getItem('新建文件，保存', '2-3'),
+    //   getItem('模版预览', '2-4'),
+    //   getItem('置前置后', '2-5'),
+    //   getItem('页面设置', '2-6'),
+    // ]),
+    // getItem('数据集树相关', '3', null, [getItem('数据集树相关', '3-0')]),
+    // getItem('模版制作视频', '4', null, [getItem('模版制作视频', '4-0')]),
+    // getItem('模版树相关', '5', null, [getItem('模版树相关', '5-0')]),
+    getItem('模版运行态API', '6', null, [getItem('模版运行态API', '6-0')]),
+    getItem('混合框架打印对接', '8', null, [
+      getItem('混合框架打印对接', '8-0'),
+    ]),
+  ];
+
+  const dataSource = [
+    {
+      key: '1',
+      name: 'winning.report.printSvg(string printerName, string svgStrs,string printParams)',
+      description: 'svg 打印',
+    },
+    {
+      key: '2',
+      name: 'winning.report.getPrinters()',
+      description: '获取打印机列表',
+      values: '0.25-10.0',
+    },
+    {
+      key: '3',
+      name: 'winning.report.savePrintConfig(string configFileName, string config)',
+      description: '打印机配置保存',
+      values: ``,
+    },
+    {
+      key: '4',
+      name: 'winning.report.loadPrintConfig(string configFileName)',
+      description: '加载打印机配置',
+      values: '平行、起点相同、终点相同',
+    },
+  ];
+  const columns = [
+    {
+      title: '接口',
+      dataIndex: 'name',
+      key: 'name',
+      width: '40%',
+    },
+    {
+      title: '功能报表',
+      dataIndex: 'description',
+      key: 'description',
+      width: '10%',
+    },
+    {
+      title: '参数说明',
+      dataIndex: 'values',
+      key: 'values',
+      width: '50%',
+      render: (text: any, record: any, index: any) => {
+        console.log(index);
+        if (index == 0) {
+          return (
+            <>
+              <div>printerName：打印机名称</div>
+              <div>svgStrs：svg内容</div>
+              <div>（多页打印格式如下：</div>
+              <div>{'<pages>'}</div>
+              <div style={{ paddingLeft: 12 }}>{'<page>'}</div>
+              <div style={{ paddingLeft: 24 }}>{'<svg>....</svg>'}</div>
+              <div style={{ paddingLeft: 12 }}>{'</page>'}</div>
+              <div style={{ paddingLeft: 12 }}>{'<page>'}</div>
+              <div style={{ paddingLeft: 24 }}>{'<svg>....</svg>'}</div>
+              <div style={{ paddingLeft: 12 }}>{'</page>'}</div>
+              <div>{'</page>'}</div>
+              <div>{')'}</div>
+              <div>
+                printParams：
+                打印参数(必传：printerName，其他参数根据需求场景选择)
+              </div>
+              <div>{'{'}</div>
+              <div>
+                "printerName":"Microsoft Print to PDF",//
+                打印机名称，默认使用本地默认打印机
+              </div>
+              <div>
+                "paperSide": 0 , // 单双面打印，默认值 0，单面 1，手动双面
+                2，自动双面（长边）3，自动双面（短边）4
+              </div>
+              <div>"printCopies": 1, // 打印份数，默认值 1</div>
+              <div>
+                "printCollate":false, // 文档是否逐份打印，默认值
+                false(需要打印机支持)
+              </div>
+              <div>
+                逐份：1，2，3，4，1，2，3，4），逐页：1，1，2，2，3，3，4，4
+              </div>
+              <div>"offsetX": 0.0, // 水平偏移 单位 mm</div>
+              <div>"offsetY": 0.0, // 垂直偏移 单位 mm</div>
+              <div>
+                "doubleAutoForceOddStart": false, //
+                自动双面打印，偶数页开始是否强制不填充空白页
+              </div>
+              <div>
+                "printMode": 0, // 0 无任何模式，2 一般续打，4
+                一般补打(包括撤销打印)，8
+                混合打印(续、补打)，该参数仅适用医嘱单打印
+              </div>
+              <div>{'}'}</div>
+            </>
+          );
+        } else if (index == 1) {
+          return <>列表第一个为默认打印机</>;
+        } else if (index == 2) {
+          return (
+            <>
+              <div>文件保存目录：混合框架/report_configs</div>
+              <div>configFileName： 配置文件名称</div>
+              <div>config：打印机配置（自己定义文件内容）</div>
+            </>
+          );
+        } else if (index == 3) {
+          return <>configFileName： 配置文件名称</>;
+        }
+      },
+    },
+  ];
+
+  const dataSource1 = [
+    {
+      key: '1',
+      name: 'sessionStorageAuthorization',
+      description: '业务用户登录信息，业务系统里的 sessionStorage里的',
+    },
+    {
+      key: '1-1',
+      name: 'sessionStorageUserInfo',
+      description:
+        '业务用户登录后的用户信息业务系统里的 sessionStorage里的userInfo字段(登录后写入)，用以获取租户信息 形如: {"userHopitalSOID": "256181"}',
+    },
+    {
+      key: '2',
+      name: 'id',
+      description: '模板id',
+    },
+    {
+      key: '2-1',
+      name: 'code',
+      description: '模板分类编码(业务定义)',
+    },
+    {
+      key: '3',
+      name: 'businessData',
+      description: '业务数据',
+    },
+    {
+      key: '4',
+      name: 'callBackFunc',
+      description:
+        '回调函数，在指定步长转换完成后sdk调用，参数分别是(svg, startPageNo, ending, percent, identifier)',
+    },
+    {
+      key: '5',
+      name: 'transferStep',
+      description:
+        '同时渲染模板个数步长,即转换几页之后就开始渲染并执行回调方法',
+    },
+    {
+      key: '6',
+      name: 'urlPrefix',
+      description: '环境对应的交付平台前缀，一般为业务host+ ‘wxp-designer’',
+    },
+    {
+      key: '7',
+      name: 'identifier',
+      description:
+        '一个固定字符串，业务传进来，回调的时候传回去，避免回调没结束',
+    },
+    {
+      key: '8',
+      name: 'callbackData',
+      description: '是否返回页尾最后一行叶子节点数据',
+    },
+    {
+      key: '9',
+      name: 'throwCallBack',
+      description: '异常抛出的回调',
+    },
+  ];
+  const columns1 = [
+    {
+      title: '参数',
+      dataIndex: 'name',
+      key: 'name',
+      width: '20%',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+      width: '80%',
+    },
+  ];
+
+  const onSelect = (info: any) => {
+    setSelectedKeys([info.key]);
+  };
+
+  return (
+    <div className={styles.indexContent}>
+      <Layout>
+        <Sider width={255} style={{ background: '#fff' }}>
+          <Menu
+            mode="inline"
+            openKeys={openKeys}
+            onOpenChange={onOpenChange}
+            onSelect={onSelect}
+            selectedKeys={selectedKeys}
+            style={{ width: 256, height: '100%' }}
+            items={items}
+          />
+        </Sider>
+        <Layout style={{ padding: '0' }}>
+          <div className={styles.componentContent1}>
+            <div className={styles.content}>
+              <div className={styles.mainContent}>
+                {selectedKeys[0] == '0-0' ? (
+                  <div>
+                    <h1>研发入门</h1>
+                    <h2>总则：</h2>
+                    <p>1.业务系统正常请求得到业务数据</p>
+                    <p>
+                      2. 使用web打印提供的js
+                      API,调用指定方法，传入设计器模板id，环境地址前缀，业务数据，得到最终的svg字符串列表在业务方系统预览或将其发送到混合框架调用打印机
+                    </p>
+                    <p></p>
+                    <h4>
+                      相关对接视频地址：
+                      <a href="https://winwiki.winning.com.cn/pages/viewpage.action?pageId=60366441">
+                        模板制作视频讲解
+                      </a>
+                    </h4>
+                    <h4>
+                      REACT版本以及VUE版本对接相关代码：
+                      <a href="https://winwiki.winning.com.cn/pages/viewpage.action?pageId=55116755">
+                        REACT或VUE项目对接示例demo
+                      </a>
+                    </h4>
+                    <h2>使用对接流程:</h2>
+                    <p>
+                      1.低开平台→打印设计器:{' '}
+                      <span style={{ color: 'red' }}>设计打印模板</span>，地址:
+                      <a href="https://wxplcdp.winning.com.cn/lcdp/index.html/#/login">
+                        https://wxplcdp.winning.com.cn/lcdp/index.html/#/login
+                      </a>
+                      打印设计器使用方法参见:{' '}
+                      <a href="https://winwiki.winning.com.cn/pages/viewpage.action?pageId=48599475">
+                        使用手册
+                      </a>
+                    </p>
+                    <Image
+                      width={900}
+                      height={500}
+                      src={require('../image/dikai2.png')}
+                    ></Image>
+                    <p>
+                      2.业务方前端项目从60 npm仓库
+                      <span style={{ color: 'red' }}>安装pango-print依赖</span>:
+                      npm install pango-print
+                      --registry=http://172.16.9.242:8081/repository/npm-group/
+                    </p>
+
+                    <p>
+                      WxPPrint6.0对接请参见:{' '}
+                      <a href="https://winwiki.winning.com.cn/pages/viewpage.action?pageId=55116755">
+                        REACT或VUE项目对接示例demo
+                      </a>
+                    </p>
+                    {/* <p>
+                      WxPPrint6.0及更早版本请参见：
+                      <a href="https://winwiki.winning.com.cn/pages/viewpage.action?pageId=60367400">
+                        web版打印SDK对接-0.3.4版本及之前版本
+                      </a>
+                    </p> */}
+                  </div>
+                ) : selectedKeys[0] == '0-1' ? (
+                  <div>
+                    <h1>与FastReport对比</h1>
+
+                    <CompareWithFastReport />
+                  </div>
+                ) : // : selectedKeys[0] == '1-0' ? (
+                //   <div>
+                //     <h1>线条</h1>
+                //     <div>
+                //       <Image
+                //         width={800}
+                //         height={500}
+                //         src={require('../image/线条.jpg')}
+                //       ></Image>
+                //     </div>
+                //     <LineComp />
+                //   </div>
+                // ) : selectedKeys[0] == '1-1' ? (
+                //   <div>
+                //     <h1>标签</h1>
+                //     <div>
+                //       <Image
+                //         width={800}
+                //         height={500}
+                //         src={require('../image/标签.jpg')}
+                //       ></Image>
+                //     </div>
+                //     <TextComp />
+                //   </div>
+                // ) : selectedKeys[0] == '1-2' ? (
+                //   <div>
+                //     <h1>标记符</h1>
+                //     <div>
+                //       <Image
+                //         width={800}
+                //         height={500}
+                //         src={require('../image/标记符.jpg')}
+                //       ></Image>
+                //     </div>
+                //     <MarkComp />
+                //   </div>
+                // ) : selectedKeys[0] == '1-3' ? (
+                //   <div>
+                //     <h1>复选框</h1>
+                //     <div>
+                //       <Image
+                //         width={800}
+                //         height={500}
+                //         src={require('../image/复选框.jpg')}
+                //       ></Image>
+                //     </div>
+                //     <CheckboxComp />
+                //   </div>
+                // ) : selectedKeys[0] == '1-4' ? (
+                //   <div>
+                //     <h1>图片</h1>
+                //     <div>
+                //       <Image
+                //         width={800}
+                //         height={500}
+                //         src={require('../image/图片.jpg')}
+                //       ></Image>
+                //     </div>
+                //     <PicComp />
+                //   </div>
+                // ) : selectedKeys[0] == '1-5' ? (
+                //   <div>
+                //     <h1>编码组</h1>
+                //     <div>
+                //       <Image
+                //         width={800}
+                //         height={500}
+                //         src={require('../image/编码组.jpg')}
+                //       ></Image>
+                //     </div>
+                //     <CodecComp />
+                //   </div>
+                // ) : selectedKeys[0] == '1-6' ? (
+                //   <div>
+                //     <h1>条形码</h1>
+                //     <div>
+                //       <Image
+                //         width={800}
+                //         height={500}
+                //         src={require('../image/条形码.jpg')}
+                //       ></Image>
+                //     </div>
+                //     <BarCodeComp />
+                //   </div>
+                // ) : selectedKeys[0] == '1-7' ? (
+                //   <div>
+                //     <h1>面板</h1>
+                //     <div>
+                //       <Image
+                //         width={800}
+                //         height={500}
+                //         src={require('../image/面板.jpg')}
+                //       ></Image>
+                //     </div>
+                //     <PanelComp />
+                //   </div>
+                // ) : selectedKeys[0] == '1-8' ? (
+                //   <div>
+                //     <h1>表格</h1>
+                //     <div>
+                //       <Image
+                //         width={800}
+                //         height={500}
+                //         src={require('../image/表格.jpg')}
+                //       ></Image>
+                //     </div>
+                //     <TableComp />
+                //   </div>
+                // ) : selectedKeys[0] == '1-9' ? (
+                //   <div>
+                //     <h1>列板、行板</h1>
+                //     <div>
+                //       <Image
+                //         width={800}
+                //         height={500}
+                //         src={require('../image/行板.jpg')}
+                //       ></Image>
+                //     </div>
+                //     <RowComp />
+                //   </div>
+                // ) : selectedKeys[0] == '1-12' ? (
+                //   <div>
+                //     <h1>公共属性</h1>
+                //     <PublicComp />
+                //   </div>
+                // ) : selectedKeys[0] == '2-0' ? (
+                //   <div>
+                //     <h1>控件拖拽</h1>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/控件拖拽.png')}
+                //     ></Image>
+                //     <p>红色框中的控件支持拖拽，目前支持11种控件的拖拽。</p>
+                //     <p>拖拽注意事项：</p>
+                //     <p>1. 拖拽前，必须先选中要放入的容器。</p>
+                //     <p>2. 拖拽只能拖拽到画布上，其他地方不允许放入。</p>
+                //     <p>
+                //       3.
+                //       无法实时获取到拖拽组件在画布位置，只能放到画布(0,0)点的位置。
+                //     </p>
+                //   </div>
+                // ) : selectedKeys[0] == '2-1' ? (
+                //   <div>
+                //     <h1>撤销回退</h1>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/撤销回退.jpg')}
+                //     ></Image>
+                //     <p>针对用户最近十步的所有操作，支持撤回操作与重做操作。</p>
+                //     <p>超过十步的内容会被最近十步的操作所覆盖</p>
+                //   </div>
+                // ) : selectedKeys[0] == '2-2' ? (
+                //   <div>
+                //     <h1>新增页面删除页面</h1>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/新增删除页面.jpg')}
+                //     ></Image>
+                //     <p></p>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/新增删除页面1.png')}
+                //     ></Image>
+                //     <p></p>
+                //     <p>
+                //       通过点击新增页面/删除页面增加多一页模板，渲染模版的时候将会以新增的所有页面为整体来进行循环
+                //     </p>
+                //   </div>
+                // ) : selectedKeys[0] == '2-3' ? (
+                //   <div>
+                //     <h1>新建、文件、保存</h1>
+                //     <p>对应设计器工具栏左侧：</p>
+                //     <Image
+                //       width={800}
+                //       height={200}
+                //       src={require('../image/新建1.png')}
+                //     ></Image>
+                //     <p>1.新建</p>
+                //     <p>
+                //       在左侧模板树选中对应目录后点击新建新建模板，新建时需输入模板名称，此名称对应左侧模板树展示名称及模板文件名称属性:
+                //     </p>
+                //     <Image
+                //       width={900}
+                //       height={500}
+                //       src={require('../image/新建2.jpg')}
+                //     ></Image>
+                //     <p>
+                //       未选中左侧模板树目录而直接点新建按钮时会提示请选择模板存储目录:
+                //     </p>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/新建3.png')}
+                //     ></Image>
+                //     <p>2.文件:打开本地文件实现模板展示及画布预览</p>
+                //     <p>
+                //       3.保存:
+                //       当点击左侧模板树在画布渲染出画布之后，点击保存会将画布所做修改进行存库操作，保存成功会提示:保存成功
+                //     </p>
+                //   </div>
+                // ) : selectedKeys[0] == '2-4' ? (
+                //   <div>
+                //     <h1>模板预览</h1>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/模版预览1.jpg')}
+                //     ></Image>
+                //     <p>
+                //       设计器提供了三种预览模式：预置预览、模拟预览、打印预览
+                //     </p>
+                //     <h2>预置预览：</h2>
+                //     <p>
+                //       提供功能可使用户提前为某些模版保存数据，点击
+                //       <span style={{ color: '' }}>预置预览</span>
+                //       可直接调取预置好的数据进行打印预览操作
+                //     </p>
+                //     <h2>模拟预览：</h2>
+                //     <p>
+                //       提供功能可使用户自定义模版数据，点击提交使用当前输入的数据进行打印预览操作
+                //     </p>
+                //     <p>此数据为一次性，使用之后需重新提供数据进行预览操作</p>
+                //     <p>如需多次调试模版，建议使用预置数据和预置预览功能</p>
+                //     <h2>打印预览</h2>
+                //     <p>
+                //       按照模版内定义的数据源去请求接口获取数据，再进行预览操作
+                //     </p>
+                //   </div>
+                // ) : selectedKeys[0] == '2-5' ? (
+                //   <div>
+                //     <h1>置前置后</h1>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/置前置后.jpg')}
+                //     ></Image>
+                //     <p>置前置后功能是将画布内组件的垂直方向层级进行改动</p>
+                //   </div>
+                // ) : selectedKeys[0] == '2-6' ? (
+                //   <div>
+                //     <h1>页面设置</h1>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/页面设置.jpg')}
+                //     ></Image>
+                //     <p>
+                //       页面设置功能包括：纸张类型、纸张方向、进纸方向、页边距以及页面页脚功能
+                //     </p>
+                //     <h1>纸张类型</h1>
+                //     <p>设计器预置了十几种常用纸张类型以及尺寸大小可供选择</p>
+                //     <p>
+                //       同时也支持用户自定义纸张大小，使用自定义纸张时只需讲纸张类型选为自定义即可
+                //     </p>
+                //     <p>
+                //       <b>特殊纸张</b>
+                //       ：指【小票（瓶贴）】和【打孔纸】相关纸张类型打印。通常处理连续纸张打印，即
+                //     </p>
+                //     高度跟随内容多少而变化，最大为设置的纸张尺寸。
+                //     <p></p>
+                //     <h1>方向</h1>
+                //     <p>指纸张方向，通常与打印相结合使用。</p>
+                //     <h1>进纸方向</h1>
+                //     <p>
+                //       指放入打印机时纸张的方向，短边进入为纵向，长边进入为横向。
+                //     </p>
+                //     <h1>页边距</h1>
+                //     <p>控制画布与边缘的四个方向的距离长度</p>
+                //     <p>注意：由于部分打印机不支持无边距，所以预留不能太小。</p>
+                //     <p>
+                //       建议：普通打印 即 A3、A4、B5、B6 纸张预留不得低于
+                //       5mm。瓶贴、标签打印则无要求。
+                //     </p>
+                //     <h1>页眉页脚</h1>
+                //     <p>控制画布页眉页脚是否显示</p>
+                //     <p>
+                //       页眉、页脚内容每页打印都会展示。通常设置模板标题、页码、备注信息以及每页相同不发生变化的内容。
+                //     </p>
+                //   </div>
+                // ) : selectedKeys[0] == '3-0' ? (
+                //   <div>
+                //     <h1>数据集树相关</h1>
+                //     <p>数据集 分为 微服务数据集、JavaBean数据集和SQL数据集。</p>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/数据集1.png')}
+                //     ></Image>
+                //     <p>
+                //       <b>微服务数据集</b>
+                //     </p>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/数据集2.png')}
+                //     ></Image>
+                //     <p>
+                //       1.如果 <span style={{ color: 'red' }}>API描述JSON</span>
+                //        有值,则不请求后台接口， 反之,k请求后台接口。
+                //     </p>
+                //     <p>
+                //       2.微服务数据集，只能在
+                //       <span style={{ color: 'red' }}> root</span> 节点建。
+                //     </p>
+
+                //     <p>
+                //       <b>JavaBean数据集</b>
+                //     </p>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/数据集3.png')}
+                //     ></Image>
+                //     <p>
+                //       1.JavaBean 数据集，目前只支持
+                //       <span style={{ color: 'red' }}>类路径</span>。
+                //     </p>
+                //     <p>
+                //       2.类路径输入会通过方法校验，
+                //       <span style={{ color: 'red' }}>要确保类路径输入正确</span>
+                //       ,  如果不正确，无法进行下一步。
+                //     </p>
+                //     <p>
+                //       3.如果
+                //       <span style={{ color: 'red' }}>父级没有微服务数据集</span>
+                //       ，则
+                //       <span style={{ color: 'red' }}>
+                //         当前节点无法建JavaBean数据集节点
+                //       </span>
+                //       。
+                //     </p>
+                //     <p>
+                //       4.JavaBean 数据集 下一步的排序字段取得是 微服务
+                //       ResponseStruct 字段的值。
+                //     </p>
+                //     <p>
+                //       <b>SQL数据集</b>
+                //     </p>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/数据集4.png')}
+                //     ></Image>
+                //     <p>
+                //       <span style={{ color: 'red' }}>
+                //         所有数据集都有下一步 数据分组 操作
+                //       </span>
+                //     </p>
+                //     <Image
+                //       width={900}
+                //       height={500}
+                //       src={require('../image/数据集5.png')}
+                //     ></Image>
+                //     <p>
+                //       默认是 <span style={{ color: 'red' }}>不进行分组的</span>
+                //       。如果要进行分组操作，交互如下图：
+                //     </p>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/数据集6.png')}
+                //     ></Image>
+                //     <p>分组字段和 排序字段是取上一步的propsList 组合而成的。</p>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/数据集7.png')}
+                //     ></Image>
+                //     <p>
+                //       排序方式 现有三种方式{' '}
+                //       <span style={{ color: 'red' }}>
+                //         升序、降序和 原始顺序
+                //       </span>
+                //     </p>
+                //     <Image
+                //       width={900}
+                //       height={600}
+                //       src={require('../image/数据集8.png')}
+                //     ></Image>
+                //   </div>
+                // ) : selectedKeys[0] == '4-0' ? (
+                //   <div>
+                //     <h1>模板相关视频讲解</h1>
+
+                //     <p>培训视频</p>
+                //     <p>
+                //       链接:{' '}
+                //       <a
+                //         href="https://winwiki.winning.com.cn/pages/viewpage.action?pageId=20409180"
+                //         target="_blank"
+                //       >
+                //         https://winwiki.winning.com.cn/pages/viewpage.action?pageId=20409180
+                //       </a>
+                //     </p>
+                //     <p>主要针对SQL数据集培训</p>
+                //     <p>
+                //       链接:{' '}
+                //       <a
+                //         href="https://pan.baidu.com/s/15vBBnnKSXrB9w80lDR-B-Q?pwd=hdur"
+                //         target="_blank"
+                //       >
+                //         https://pan.baidu.com/s/15vBBnnKSXrB9w80lDR-B-Q?pwd=hdur
+                //       </a>
+                //       提取码: hdur
+                //     </p>
+                //     <p>混合框架对接</p>
+                //     <p>
+                //       链接:{' '}
+                //       <a
+                //         href="https://winwiki.winning.com.cn/pages/viewpage.action?pageId=20409168"
+                //         target="_blank"
+                //       >
+                //         https://winwiki.winning.com.cn/pages/viewpage.action?pageId=20409168
+                //       </a>
+                //     </p>
+                //   </div>
+                // ) : selectedKeys[0] == '5-0' ? (
+                //   <div>
+                //     <h1>模版树相关</h1>
+                //     <p>一级树节点不支持操作，为默认内容</p>
+                //     <Image
+                //       width={800}
+                //       height={500}
+                //       src={require('../image/模板树1.jpg')}
+                //     ></Image>
+                //     <p>二级树节点支持新建自定义文件夹以及刷新操作</p>
+                //     <Image
+                //       width={800}
+                //       height={500}
+                //       src={require('../image/模板树2.jpg')}
+                //     ></Image>
+                //     <p>三级文件夹支持更多功能的操作：</p>
+                //     <p>新建模板：在当前文件夹下创建一个新的空模版</p>
+                //     <p>新建文件夹：在当前文件夹下创建一个新的文件夹</p>
+                //     <p>重命名：重命名当前文件夹名称</p>
+                //     <p>删除文件夹 ：删除当前文件夹</p>
+                //     <p>上传文件：将本地XML模板上传至当前文件夹下</p>
+                //     <p>刷新：刷新当前模板树</p>
+                //     <Image
+                //       width={800}
+                //       height={500}
+                //       src={require('../image/模板树3.jpg')}
+                //     ></Image>
+                //     <p>模版的右键操作列表：</p>
+                //     <p>重命名：重命名当前模板的名称</p>
+                //     <p>删除模板：删除当前模板</p>
+                //     <p>上传文件：将本地XML模板上传至当前文件夹下</p>
+                //     <p>下载文件：讲当前XML模板下载至本地电脑内</p>
+                //     <p>刷新：刷新当前模板树</p>
+                //     <p>
+                //       创建副本：将当前模板以一个新的名字创建一个相同的副本模板
+                //     </p>
+                //   </div>
+                // )
+                selectedKeys[0] == '6-0' ? (
+                  <div>
+                    <h1>模板运行态API</h1>
+                    <h2>提供四种API进行多情况下的调用</h2>
+                    <h3>previewWithCallBack(参数顺序不可改变)</h3>
+                    <b>依据打印设计器内部id异步预览API</b>
+                    <p>
+                      function previewWithCallBack( sessionStorageAuthorization,
+                      id, businessData, callBackFunc,
+                    </p>
+                    <p>transferStep, urlPrefix, identifier, callbackData )</p>
+                    <h3>previewByCodeWithCallBack(参数顺序不可改变)</h3>
+                    <b>使用业务编码与打印设计器映射异步预览API</b>
+                    <p>
+                      function previewByCodeWithCallBack(
+                      sessionStorageUserInfo, sessionStorageAuthorization, code,
+                      businessData, callBackFunc,
+                    </p>
+                    <p>
+                      transferStep, urlPrefix?, identifier, throwCallBack,
+                      callbackData)
+                    </p>
+                    <h3>previewWithFetchTemplateByCode(参数顺序不可改变)</h3>
+                    <b>使用业务编码与打印设计器映射获取打印模版内容</b>
+                    <p>
+                      function previewWithFetchTemplateByCode(
+                      sessionStorageUserInfo, sessionStorageAuthorization, code,
+                      urlPrefix, callbackData)
+                    </p>
+                    <h3>
+                      previewWithFetchTemplateByCodeTransferStep(参数顺序不可改变)
+                    </h3>
+                    <b>直接使用打印模版内容进行异步预览 </b>
+                    <p>
+                      function previewWithFetchTemplateByCodeTransferStep(
+                      reportXML, businessData, callBackFunc, transferStep,
+                      identifier, callbackData)
+                    </p>
+
+                    <p>参数说明：</p>
+                    <Table
+                      dataSource={dataSource1}
+                      columns={columns1}
+                      pagination={false}
+                      style={{ width: 1000 }}
+                      bordered
+                    />
+                    <p>
+                      更多详细内容请跳转至项目对接示例DEMO内查看{' '}
+                      <a
+                        href="https://winwiki.winning.com.cn/pages/viewpage.action?pageId=55116755"
+                        target="_blank"
+                      >
+                        点此跳转
+                      </a>
+                    </p>
+                  </div>
+                ) : selectedKeys[0] == '8-0' ? (
+                  <div>
+                    <h1>混合框架打印对接</h1>
+                    <Table
+                      dataSource={dataSource}
+                      columns={columns}
+                      pagination={false}
+                      style={{ width: 1000 }}
+                      bordered
+                    />
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+              </div>
+            </div>
+          </div>
+        </Layout>
+      </Layout>
+
+      {/* <div className={styles.componentContent1}>
+        <div className={styles.content}>
+          <div className={styles.leftNav}></div>
+          <div className={styles.mainContent}></div>
+        </div>
+      </div> */}
+    </div>
+  );
+}
--- a/src/pages/docPage/lineComp/index.less
+++ b/src/pages/docPage/lineComp/index.less
--- a/src/pages/docPage/lineComp/index.tsx
+++ b/src/pages/docPage/lineComp/index.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Table } from 'antd';
+const index = () => {
+  const dataSource = [
+    {
+      key: '1',
+      name: '线型',
+      description: '线条显示样式',
+      values: '实线、点线、短划线、点切线、长划线、双点划线',
+    },
+    {
+      key: '2',
+      name: '线宽',
+      description: '线条显示宽度',
+      values: '0.25-10.0',
+    },
+    {
+      key: '3',
+      name: '方向',
+      description: '线条显示方向',
+      values: '水平线、竖直线、左斜线、右斜线',
+    },
+    {
+      key: '4',
+      name: '汇合端点',
+      description: '多分区时端点所处位置',
+      values: '平行、起点相同、终点相同',
+    },
+    {
+      key: '5',
+      name: '分区数',
+      description: '将线条组件分为若干部分',
+      values: '1-10',
+    },
+  ];
+  const columns = [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '可选值',
+      dataIndex: 'values',
+      key: 'values',
+    },
+  ];
+
+  return (
+    <>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+    </>
+  );
+};
+
+export default index;
--- a/src/pages/docPage/markComp/index.less
+++ b/src/pages/docPage/markComp/index.less
@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(242, 227, 121);
+}
--- a/src/pages/docPage/markComp/index.styled-components.tsx
+++ b/src/pages/docPage/markComp/index.styled-components.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { styled } from 'umi';
+
+const Wrapper = styled.div`
+  h1 { background: rgb(121, 184, 242); }
+`;
+
+export default function Page() {
+  return (
+    <Wrapper>
+      <h1>Page index</h1>
+    </Wrapper>
+  );
+}
--- a/src/pages/docPage/markComp/index.tsx
+++ b/src/pages/docPage/markComp/index.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Table } from 'antd';
+const index = () => {
+  const dataSource = [
+    {
+      key: '1',
+      name: '符号形状',
+      description: '标记符样式',
+      values: '小括号、中括号、大括号',
+    },
+    {
+      key: '2',
+      name: '右侧符号',
+      description: '符号方向',
+      values: '左侧/右侧',
+    },
+    {
+      key: '3',
+      name: '线型',
+      description: '符号线条样式',
+      values: '实线、点线、短划线、点划线、长划线、双点划线',
+    },
+    {
+      key: '4',
+      name: '线宽',
+      description: '标记符线宽',
+      values: '0.25-10',
+    },
+  ];
+  const columns = [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '可选值',
+      dataIndex: 'values',
+      key: 'values',
+    },
+  ];
+
+  return (
+    <>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+    </>
+  );
+};
+
+export default index;
--- a/src/pages/docPage/panelComp/index.less
+++ b/src/pages/docPage/panelComp/index.less
@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(174, 121, 242);
+}
--- a/src/pages/docPage/panelComp/index.styled-components.tsx
+++ b/src/pages/docPage/panelComp/index.styled-components.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { styled } from 'umi';
+
+const Wrapper = styled.div`
+  h1 { background: rgb(121, 184, 242); }
+`;
+
+export default function Page() {
+  return (
+    <Wrapper>
+      <h1>Page index</h1>
+    </Wrapper>
+  );
+}
--- a/src/pages/docPage/panelComp/index.tsx
+++ b/src/pages/docPage/panelComp/index.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Table } from 'antd';
+const index = () => {
+  const dataSource = [
+    {
+      key: '1',
+      name: '数据节点',
+      description: '要绑定的业务数据节点名称',
+      values: '-',
+    },
+  ];
+  const columns = [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '可选值',
+      dataIndex: 'values',
+      key: 'values',
+    },
+  ];
+
+  return (
+    <>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+    </>
+  );
+};
+
+export default index;
--- a/src/pages/docPage/picComp/index.less
+++ b/src/pages/docPage/picComp/index.less
@@ -0,0 +1,3 @@
+.title {
+  background: rgb(121, 242, 163);
+}
--- a/src/pages/docPage/picComp/index.styled-components.tsx
+++ b/src/pages/docPage/picComp/index.styled-components.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { styled } from 'umi';
+
+const Wrapper = styled.div`
+  h1 { background: rgb(121, 184, 242); }
+`;
+
+export default function Page() {
+  return (
+    <Wrapper>
+      <h1>Page index</h1>
+    </Wrapper>
+  );
+}
--- a/src/pages/docPage/picComp/index.tsx
+++ b/src/pages/docPage/picComp/index.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Table } from 'antd';
+const index = () => {
+  const dataSource = [
+    {
+      key: '1',
+      name: '替换文本',
+      description: '图片未加载时候展示的文字内容',
+      values: 'string',
+    },
+    {
+      key: '2',
+      name: '宽度',
+      description: '图片的宽',
+      values: 'number',
+    },
+    {
+      key: '3',
+      name: '高度',
+      description: '图片的高',
+      values: 'number',
+    },
+    {
+      key: '4',
+      name: '旋转角度',
+      description: '图片旋转的角度',
+      values: 'number',
+    },
+    {
+      key: '5',
+      name: '缩放方式',
+      description: '图片缩放的方式',
+      values: '等比例缩放、拉伸缩放、原始尺寸',
+    },
+    {
+      key: '6',
+      name: '类型',
+      description: '图片源',
+      values: '本地文件、数据变量(格式为base64或URL)',
+    },
+  ];
+  const columns = [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '可选值',
+      dataIndex: 'values',
+      key: 'values',
+    },
+  ];
+
+  return (
+    <>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+    </>
+  );
+};
+
+export default index;
--- a/src/pages/docPage/powerTableComp/index.less
+++ b/src/pages/docPage/powerTableComp/index.less
@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(242, 164, 121);
+}
--- a/src/pages/docPage/powerTableComp/index.styled-components.tsx
+++ b/src/pages/docPage/powerTableComp/index.styled-components.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { styled } from 'umi';
+
+const Wrapper = styled.div`
+  h1 { background: rgb(121, 184, 242); }
+`;
+
+export default function Page() {
+  return (
+    <Wrapper>
+      <h1>Page index</h1>
+    </Wrapper>
+  );
+}
--- a/src/pages/docPage/powerTableComp/index.tsx
+++ b/src/pages/docPage/powerTableComp/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './index.less';
+
+export default function Page() {
+  return (
+    <div>
+      <h1 className={styles.title}>Page index</h1>
+    </div>
+  );
+}
--- a/src/pages/docPage/publicComp/index.less
+++ b/src/pages/docPage/publicComp/index.less
@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(233, 242, 121);
+}
--- a/src/pages/docPage/publicComp/index.styled-components.tsx
+++ b/src/pages/docPage/publicComp/index.styled-components.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { styled } from 'umi';
+
+const Wrapper = styled.div`
+  h1 { background: rgb(121, 184, 242); }
+`;
+
+export default function Page() {
+  return (
+    <Wrapper>
+      <h1>Page index</h1>
+    </Wrapper>
+  );
+}
--- a/src/pages/docPage/publicComp/index.tsx
+++ b/src/pages/docPage/publicComp/index.tsx
@@ -0,0 +1,317 @@
+import React from 'react';
+import { Table } from 'antd';
+const index = () => {
+  //格式
+  const dataSource = [
+    {
+      key: '1',
+      name: '选择格式',
+      description: '对应字段的格式处理',
+      values: '无、数字、日期、时间',
+    },
+  ];
+
+  //边框
+  const dataSource1 = [
+    {
+      key: '1',
+      name: '选择边框',
+      description: '对应组件的边框样式',
+      values: '各单独方向边框、全部边框 宽度、样式、颜色',
+    },
+  ];
+
+  //字体
+  const dataSource2 = [
+    {
+      key: '1',
+      name: '字体',
+      description: '对应组件的字体样式',
+      values: '-',
+    },
+    {
+      key: '2',
+      name: '字号',
+      description: '对应组件的字号',
+      values: '-',
+    },
+    {
+      key: '3',
+      name: '颜色',
+      description: '对应组件的字体颜色',
+      values: '-',
+    },
+    {
+      key: '4',
+      name: '样式',
+      description: '对应组件的字体样式',
+      values: '普通、粗体、斜体、粗斜体',
+    },
+  ];
+
+  //背景图片
+  const dataSource3 = [
+    {
+      key: '1',
+      name: '背景色',
+      description: '背景色',
+      values: 'string',
+    },
+    {
+      key: '2',
+      name: '宽度',
+      description: '图片的宽',
+      values: 'number',
+    },
+    {
+      key: '3',
+      name: '高度',
+      description: '图片的高',
+      values: 'number',
+    },
+    {
+      key: '4',
+      name: '透明度',
+      description: '图片透明度',
+      values: 'number',
+    },
+    {
+      key: '5',
+      name: '缩放方式',
+      description: '图片缩放的方式',
+      values: '等比例缩放、拉伸缩放、原始尺寸',
+    },
+    {
+      key: '6',
+      name: '类型',
+      description: '图片源',
+      values: '网络文件、本地文件、数据变量',
+    },
+    {
+      key: '7',
+      name: '水平',
+      description: '图片水平方向的样式',
+      values: '居左对齐、居中对齐、居右对齐',
+    },
+    {
+      key: '8',
+      name: '垂直',
+      description: '图片垂直方向的样式',
+      values: '顶端对齐、居中对齐、底端对齐',
+    },
+    {
+      key: '9',
+      name: '重复',
+      description: '图片设置平铺',
+      values: '不重复、横向平铺、纵向平铺、双向平铺',
+    },
+  ];
+
+  //布局
+  const dataSource4 = [
+    {
+      key: '1',
+      name: '左',
+      description: '组件距离父容器左边的距离',
+      values: 'number',
+    },
+    {
+      key: '2',
+      name: '上',
+      description: '组件距离父容器上边的距离',
+      values: 'number',
+    },
+    {
+      key: '3',
+      name: '宽',
+      description: '组件的宽',
+      values: 'number',
+    },
+    {
+      key: '4',
+      name: '高',
+      description: '组件的高',
+      values: 'number',
+    },
+    {
+      key: '7',
+      name: '水平',
+      description: '组件内容水平方向的样式',
+      values: '居左对齐、居中对齐、居右对齐',
+    },
+    {
+      key: '8',
+      name: '垂直',
+      description: '组件内容垂直方向的样式',
+      values: '顶端对齐、居中对齐、底端对齐',
+    },
+  ];
+  //文本打印样式
+  const dataSource5 = [
+    {
+      key: '1',
+      name: '自动大小',
+      description: '单元格或者文本框随着文字内容多少进行大小调整',
+      values: '原始控件尺寸、自动宽度、自动高度、空间不足时打到父容器',
+    },
+    {
+      key: '2',
+      name: '最大行数',
+      description:
+        '当自动大小设置为自动高度时，对文字内容的最大渲染行数进行限制，超过则截断',
+      values: 'number',
+    },
+    {
+      key: '3',
+      name: '最大宽度',
+      description:
+        '当自动大小设置为自动宽度时，对文字内容的最大宽度进行限制，超过则截断',
+      values: 'number',
+    },
+    {
+      key: '4',
+      name: '换行文本',
+      description:
+        '当单元格同一行其余兄弟单元格有换行时，当前单元格文本的渲染方式：可每行渲染，首尾行渲染，尾行渲染，默认所有行渲染',
+      values: '默认、所有行显示、首行显示、尾行显示、首位行显示',
+    },
+    {
+      key: '7',
+      name: '页缝换行',
+      description:
+        '当渲染跨页时，在页缝处，如此单元格的兄弟单元格换行，即此单元格的此兄弟单元格在前一页有渲染，在后一页仍有渲染，则此单元格换行渲染的情况设置',
+      values: '全部行显示、不显示、上页尾行显示、下页首行显示、页缝首位行显示',
+    },
+  ];
+  //循环
+  const dataSource6 = [
+    {
+      key: '1',
+      name: '循环方向',
+      description:
+        '板或者表格的循环方向，默认先横向再纵向，即先往下渲染，再往右渲染；当使用"一式多份"打印时，可以按照要求，选择是先往右渲染再往下渲染还是先往下再往右',
+      values: '先横向再纵向、横向、纵向',
+    },
+    {
+      key: '2',
+      name: '打印模式',
+      description:
+        '默认为只打一次。如选择了每页打印，则此行板(列板)每页均会打印，此功能常见于每组打印时需要打印每个分组的表头的情况',
+      values: '只打一次、每页打印',
+    },
+    {
+      key: '3',
+      name: '最大水平打印次数',
+      description: '"一式多份"打印模式下，表格最大水平方向能打多少次',
+      values: 'number',
+    },
+    {
+      key: '4',
+      name: '最大垂直打印次数',
+      description: '"一式多份"打印模式下，表格最大垂直方向能打多少次',
+      values: 'number',
+    },
+    {
+      key: '7',
+      name: '空间不足时',
+      description:
+        ' 默认为父容器循环，设置为不再打印则如果仍有数据没有空间则停止打印，会丢失数据',
+      values: '自动选择、不再打印、父容器循环',
+    },
+    {
+      key: '8',
+      name: '垂直间隔',
+      description: '"一式多份"打印模式下，两个表格纵向间隔',
+      values: 'number',
+    },
+    {
+      key: '9',
+      name: '水平间隔',
+      description: '"一式多份"打印模式下，两个表格横向间隔',
+      values: 'number',
+    },
+  ];
+
+  const columns = [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+      width: '10%',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+      width: '45%',
+    },
+    {
+      title: '可选值',
+      dataIndex: 'values',
+      key: 'values',
+      width: '45%',
+    },
+  ];
+
+  return (
+    <div>
+      <h2>格式</h2>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+
+      <h2>边框</h2>
+      <Table
+        dataSource={dataSource1}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+
+      <h2>字体</h2>
+      <Table
+        dataSource={dataSource2}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+
+      <h2>背景图片</h2>
+      <Table
+        dataSource={dataSource3}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+
+      <h2>布局</h2>
+      <Table
+        dataSource={dataSource4}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+
+      <h2>文本打印样式</h2>
+      <Table
+        dataSource={dataSource5}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+
+      <h2>循环</h2>
+      <Table
+        dataSource={dataSource6}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+    </div>
+  );
+};
+
+export default index;
--- a/src/pages/docPage/rowComp/index.less
+++ b/src/pages/docPage/rowComp/index.less
@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(123, 121, 242);
+}
--- a/src/pages/docPage/rowComp/index.styled-components.tsx
+++ b/src/pages/docPage/rowComp/index.styled-components.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { styled } from 'umi';
+
+const Wrapper = styled.div`
+  h1 { background: rgb(121, 184, 242); }
+`;
+
+export default function Page() {
+  return (
+    <Wrapper>
+      <h1>Page index</h1>
+    </Wrapper>
+  );
+}
--- a/src/pages/docPage/rowComp/index.tsx
+++ b/src/pages/docPage/rowComp/index.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Table } from 'antd';
+const index = () => {
+  const dataSource = [
+    {
+      key: '1',
+      name: '数据节点',
+      description: '要绑定的业务数据节点名称',
+      values: '-',
+    },
+    {
+      key: '2',
+      name: '补齐空行',
+      description: '表格数据循环结束后，是否将空余界面用空白行填充',
+      values: '是/否',
+    },
+  ];
+  const columns = [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '可选值',
+      dataIndex: 'values',
+      key: 'values',
+    },
+  ];
+
+  return (
+    <>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+    </>
+  );
+};
+
+export default index;
--- a/src/pages/docPage/tableComp/index.less
+++ b/src/pages/docPage/tableComp/index.less
@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(150, 121, 242);
+}
--- a/src/pages/docPage/tableComp/index.styled-components.tsx
+++ b/src/pages/docPage/tableComp/index.styled-components.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { styled } from 'umi';
+
+const Wrapper = styled.div`
+  h1 { background: rgb(121, 184, 242); }
+`;
+
+export default function Page() {
+  return (
+    <Wrapper>
+      <h1>Page index</h1>
+    </Wrapper>
+  );
+}
--- a/src/pages/docPage/tableComp/index.tsx
+++ b/src/pages/docPage/tableComp/index.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Table } from 'antd';
+const index = () => {
+  const dataSource = [
+    {
+      key: '1',
+      name: '数据节点',
+      description: '要绑定的业务数据节点名称',
+      values: '-',
+    },
+    {
+      key: '2',
+      name: '横向延展',
+      description: '表格是否向右循环，默认是向下循环',
+      values: '是/否',
+    },
+    {
+      key: '3',
+      name: '最大高度',
+      description: '属性暂未开放',
+      values: '-',
+    },
+  ];
+  const columns = [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '可选值',
+      dataIndex: 'values',
+      key: 'values',
+    },
+  ];
+
+  return (
+    <>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+    </>
+  );
+};
+
+export default index;
--- a/src/pages/docPage/textComp/index.less
+++ b/src/pages/docPage/textComp/index.less
@@ -0,0 +1,4 @@
+
+.title {
+  background: rgb(121, 242, 173);
+}
--- a/src/pages/docPage/textComp/index.tsx
+++ b/src/pages/docPage/textComp/index.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Table } from 'antd';
+const index = () => {
+  const dataSource = [
+    {
+      key: '1',
+      name: '竖向排版',
+      description: '文字展示方向',
+      values: '是/否',
+    },
+    {
+      key: '2',
+      name: '自动缩印',
+      description: '按比例缩放文字，使其展示在控件内(竖向排版不生效)',
+      values: '是/否',
+    },
+    {
+      key: '3',
+      name: '自动折行',
+      description: '文本超出控件之后自动换行(竖向排版不生效)',
+      values: '是/否',
+    },
+    {
+      key: '4',
+      name: '首行缩进',
+      description: '文本首行缩进距离(竖向排版不生效)',
+      values: 'number',
+    },
+    {
+      key: '5',
+      name: '折行间距',
+      description: '选择折行之后生效，为各行之间距离',
+      values: 'number',
+    },
+    {
+      key: '6',
+      name: '文本超出',
+      description: '文本超出组件的显示方式',
+      values: '无、省略号、截断内容、显示出界',
+    },
+    {
+      key: '7',
+      name: '下划线长',
+      description: '文本的下划线',
+      values: '按文本宽度/按控件宽度',
+    },
+    {
+      key: '8',
+      name: '删除线',
+      description: '文本的删除线',
+      values: '单线/双线',
+    },
+    {
+      key: '9',
+      name: '旋转角度',
+      description: '文本的旋转角度',
+      values: 'number',
+    },
+  ];
+  const columns = [
+    {
+      title: '属性名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '可选值',
+      dataIndex: 'values',
+      key: 'values',
+    },
+  ];
+
+  return (
+    <>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        style={{ width: 1000 }}
+      />
+    </>
+  );
+};
+
+export default index;
--- a/src/pages/image/banner@2x.png
+++ b/src/pages/image/banner@2x.png
--- a/src/pages/image/dikai1.png
+++ b/src/pages/image/dikai1.png
--- a/src/pages/image/dikai10.png
+++ b/src/pages/image/dikai10.png
--- a/src/pages/image/dikai2.png
+++ b/src/pages/image/dikai2.png
--- a/src/pages/image/logo@2x.png
+++ b/src/pages/image/logo@2x.png
--- a/src/pages/image/交叉报表案例1.png
+++ b/src/pages/image/交叉报表案例1.png
--- a/src/pages/image/交叉报表案例10.png
+++ b/src/pages/image/交叉报表案例10.png
--- a/src/pages/image/交叉报表案例11.png
+++ b/src/pages/image/交叉报表案例11.png
--- a/src/pages/image/交叉报表案例12.png
+++ b/src/pages/image/交叉报表案例12.png
--- a/src/pages/image/交叉报表案例13.png
+++ b/src/pages/image/交叉报表案例13.png
--- a/src/pages/image/交叉报表案例14.png
+++ b/src/pages/image/交叉报表案例14.png
--- a/src/pages/image/交叉报表案例2.png
+++ b/src/pages/image/交叉报表案例2.png
--- a/src/pages/image/交叉报表案例3.png
+++ b/src/pages/image/交叉报表案例3.png
--- a/src/pages/image/交叉报表案例4.png
+++ b/src/pages/image/交叉报表案例4.png
--- a/src/pages/image/交叉报表案例5.png
+++ b/src/pages/image/交叉报表案例5.png
--- a/src/pages/image/交叉报表案例6.png
+++ b/src/pages/image/交叉报表案例6.png
--- a/src/pages/image/交叉报表案例7.png
+++ b/src/pages/image/交叉报表案例7.png
--- a/src/pages/image/交叉报表案例8.png
+++ b/src/pages/image/交叉报表案例8.png
--- a/src/pages/image/交叉报表案例9.png
+++ b/src/pages/image/交叉报表案例9.png
--- a/src/pages/image/入门1.png
+++ b/src/pages/image/入门1.png
--- a/src/pages/image/入门2.png
+++ b/src/pages/image/入门2.png
--- a/src/pages/image/入门3.png
+++ b/src/pages/image/入门3.png
--- a/src/pages/image/入门4.png
+++ b/src/pages/image/入门4.png
--- a/src/pages/image/入门5.png
+++ b/src/pages/image/入门5.png
--- a/src/pages/image/入门6.png
+++ b/src/pages/image/入门6.png
--- a/src/pages/image/入门7.png
+++ b/src/pages/image/入门7.png
--- a/src/pages/image/动态边框案例1.png
+++ b/src/pages/image/动态边框案例1.png
--- a/src/pages/image/动态边框案例2.png
+++ b/src/pages/image/动态边框案例2.png
--- a/src/pages/image/动态边框案例3.png
+++ b/src/pages/image/动态边框案例3.png
--- a/src/pages/image/原色@2x.png
+++ b/src/pages/image/原色@2x.png
--- a/src/pages/image/回调案例1.png
+++ b/src/pages/image/回调案例1.png
--- a/src/pages/image/回调案例2.png
+++ b/src/pages/image/回调案例2.png
--- a/src/pages/image/回调案例3.png
+++ b/src/pages/image/回调案例3.png
--- a/src/pages/image/回调案例4.png
+++ b/src/pages/image/回调案例4.png
--- a/src/pages/image/回调案例5.png
+++ b/src/pages/image/回调案例5.png
--- a/src/pages/image/回调案例6.png
+++ b/src/pages/image/回调案例6.png
--- a/src/pages/image/图片.jpg
+++ b/src/pages/image/图片.jpg
--- a/src/pages/image/图片控件案例1.png
+++ b/src/pages/image/图片控件案例1.png
--- a/src/pages/image/图片控件案例2.png
+++ b/src/pages/image/图片控件案例2.png
--- a/src/pages/image/图片控件案例3.png
+++ b/src/pages/image/图片控件案例3.png
--- a/src/pages/image/图片控件案例4.png
+++ b/src/pages/image/图片控件案例4.png
--- a/src/pages/image/图片控件案例5.png
+++ b/src/pages/image/图片控件案例5.png
--- a/src/pages/image/图片控件案例6.png
+++ b/src/pages/image/图片控件案例6.png
--- a/src/pages/image/图片控件案例7.png
+++ b/src/pages/image/图片控件案例7.png
--- a/Show More
+++ b/Show More