diff --git a/public/react/src/app-test.jsx b/public/react/src/app-test.jsx
new file mode 100644
index 000000000..1bdba5f30
--- /dev/null
+++ b/public/react/src/app-test.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import MiniPagination from './components/mini-pagination'
+
+export default () => {
+  function onPageChange(page) {
+    console.log(page, '-----------')
+  }
+  return <MiniPagination onChange={onPageChange} current={1} total={100} pageSize={16} />
+}
\ No newline at end of file
diff --git a/public/react/src/components/mini-pagination/index.jsx b/public/react/src/components/mini-pagination/index.jsx
new file mode 100644
index 000000000..5a940ad68
--- /dev/null
+++ b/public/react/src/components/mini-pagination/index.jsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import './index.less'
+function noop() { }
+
+export default ({ current, defaultCurrent, total, pageSize, onChange = noop }) => {
+  const maxPage = Math.ceil(total / pageSize)
+  const [page, setPage] = useState(current || defaultCurrent)
+
+  function next() {
+    if (page < maxPage) {
+      let value = page + 1
+      setPage(value)
+      onChange(value)
+    }
+  }
+
+  function prev() {
+    if (page > 1) {
+      let value = page - 1
+      setPage(value)
+      onChange(value)
+    }
+  }
+
+  return (
+    <div className="mini-pagination">
+      <a class={page === 1 ? 'disabled' : 'normal'} onClick={prev}>上一页</a>
+      <a class={page === maxPage ? 'disabled' : 'normal'} onClick={next} >下一页</a>
+    </div>
+  )
+
+}
\ No newline at end of file
diff --git a/public/react/src/components/mini-pagination/index.less b/public/react/src/components/mini-pagination/index.less
new file mode 100644
index 000000000..a1e9f053d
--- /dev/null
+++ b/public/react/src/components/mini-pagination/index.less
@@ -0,0 +1,60 @@
+.mini-pagination {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+
+  a {
+    display: block;
+    padding: 0 10px 0 22px;
+    border-width: 1px;
+    border-radius: 3px;
+    margin-right: 4px;
+    font-size: 12px;
+    line-height: 30px;
+    cursor: pointer;
+    border-style: solid;
+    outline: none;
+    border-color: #c4c6cf;
+    background: #fff;
+    color: #333;
+
+    position: relative;
+
+    &:hover {
+      background-color: #f2f3f7;
+      border-color: #a0a2ad;
+      text-decoration: none;
+    }
+
+    &:before {
+      position: absolute;
+      content: ' ';
+      width: 8px;
+      top: 10px;
+      left: 10px;
+      height: 8px;
+      transform: rotate(-45deg);
+      border-top: 1px solid #333;
+      border-left: 1px solid #333;
+    }
+
+    &:last-child {
+      padding: 0 22px 0 10px;
+      margin: 0 0 0 4px;
+
+      &:before {
+        left: auto;
+        right: 10px;
+        transform: rotate(135deg);
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      background-color: #f7f8fa;
+      border-color: #e6e7eb;
+      color: #e0e0e0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/public/react/src/components/TPIMonacoConfig.js b/public/react/src/components/monaco-editor/TPIMonacoConfig.js
similarity index 100%
rename from public/react/src/components/TPIMonacoConfig.js
rename to public/react/src/components/monaco-editor/TPIMonacoConfig.js
diff --git a/public/react/src/components/monaco-editor.css b/public/react/src/components/monaco-editor/index.css
similarity index 100%
rename from public/react/src/components/monaco-editor.css
rename to public/react/src/components/monaco-editor/index.css
diff --git a/public/react/src/components/monaco-editor.jsx b/public/react/src/components/monaco-editor/index.jsx
similarity index 99%
rename from public/react/src/components/monaco-editor.jsx
rename to public/react/src/components/monaco-editor/index.jsx
index 1b79f8ff1..e2cb11db0 100644
--- a/public/react/src/components/monaco-editor.jsx
+++ b/public/react/src/components/monaco-editor/index.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import * as monaco from 'monaco-editor'
 import './TPIMonacoConfig'
-import './monaco-editor.css'
+import './index.css'
 
 function processSize(size) {
   return !/^\d+$/.test(size) ? size : `${size}px`
diff --git a/public/react/src/index.js b/public/react/src/index.js
index 18c11c03f..b14646e0d 100644
--- a/public/react/src/index.js
+++ b/public/react/src/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
-import App from './App'
+import App from './app-test'
 import * as serviceWorker from './serviceWorker'
 
 window.__useKindEditor = false;