diff --git a/src/pages/componentDevelopment/componentTest/index.tsx b/src/pages/componentDevelopment/componentTest/index.tsx
new file mode 100644
index 0000000..ddc4553
--- /dev/null
+++ b/src/pages/componentDevelopment/componentTest/index.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import styles from './style/index.module.less';
+import { Button, Input, Radio, Space, Tag, Divider } from '@arco-design/web-react';
+import { IconSearch } from '@arco-design/web-react/icon';
+import SideBar from '@/pages/componentDevelopment/componentTest/sideBar';
+import InstanceList from '@/pages/componentDevelopment/componentTest/instanceList';
+
+const Group = Radio.Group;
+
+const ComponentTest = () => {
+  return (
+    <div className={styles['component-test']}>
+      <div className={styles['header']}>
+        <Group defaultValue={'Beijing'} name="button-radio-group">
+          {['总数126', '已测试45', '未测试81'].map((item, index) => {
+            return (
+              <Radio key={item} value={item}>
+                {({ checked }) => {
+                  return (
+                    <Tag size="large" tabIndex={-1} key={item} color={['purple', 'arcoblue', 'orangered'][index]}>
+                      {item}
+                    </Tag>
+                  );
+                }}
+              </Radio>
+            );
+          })}
+        </Group>
+
+        <Space split={<Divider type="vertical" />}>
+          <Input
+            prefix={<IconSearch />}
+            placeholder={'搜索'}
+            style={{ width: 236 }}
+          />
+          <Button
+            type="primary"
+            style={{ marginLeft: 5, borderRadius: 4 }}
+          >
+            实例指引
+          </Button>
+        </Space>
+      </div>
+      <div className={styles['content']}>
+        <div className={styles['left']}>
+          <SideBar />
+        </div>
+        <div className={styles['right']}>
+          <InstanceList />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ComponentTest;
\ No newline at end of file
diff --git a/src/pages/componentDevelopment/componentTest/instanceList.tsx b/src/pages/componentDevelopment/componentTest/instanceList.tsx
new file mode 100644
index 0000000..f3aa92a
--- /dev/null
+++ b/src/pages/componentDevelopment/componentTest/instanceList.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const InstanceList = () => {
+  return (
+    <div>
+      实例列表
+    </div>
+  );
+};
+
+export default InstanceList;
\ No newline at end of file
diff --git a/src/pages/componentDevelopment/componentTest/sideBar.tsx b/src/pages/componentDevelopment/componentTest/sideBar.tsx
new file mode 100644
index 0000000..a442d92
--- /dev/null
+++ b/src/pages/componentDevelopment/componentTest/sideBar.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const SideBar = () => {
+  return (
+    <div>
+      侧边栏
+    </div>
+  );
+};
+
+export default SideBar;
\ No newline at end of file
diff --git a/src/pages/componentDevelopment/componentTest/style/index.module.less b/src/pages/componentDevelopment/componentTest/style/index.module.less
new file mode 100644
index 0000000..f77a933
--- /dev/null
+++ b/src/pages/componentDevelopment/componentTest/style/index.module.less
@@ -0,0 +1,25 @@
+.component-test {
+  height: 98%;
+  background-color: #ffffff;
+  padding: 17px 19px 0 24px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ebebeb;
+    margin-bottom: 25px;
+  }
+
+  .content {
+    display: flex;
+
+    .left {
+      width: 20%;
+    }
+
+    .right {
+      width: 80%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/pages/componentDevelopment/componentTest/style/instanceList.module.less b/src/pages/componentDevelopment/componentTest/style/instanceList.module.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/componentDevelopment/componentTest/style/sideBar.module.less b/src/pages/componentDevelopment/componentTest/style/sideBar.module.less
new file mode 100644
index 0000000..e69de29