refactor: refactor stat

src/pages/question/stat/components/StatContainer.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
-import StatContainerLeft from './StatContainerLeft'
-import StatContainerCenter from './StatContainerCenter'
-import StatContainerRight from './StatContainerRight'
+import StatContainerLeft from './leftPanel'
+import StatContainerCenter from './centerPanel'
+import StatContainerRight from './rightPanel'
 
 const StatContainer: FC = () => {
   return (

src/pages/question/stat/components/leftPanel/ComponentLayer.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react'
+
+const ComponentLayer: FC = () => {
+  return <>ComponentLayer</>
+}
+
+export default ComponentLayer

src/pages/question/stat/components/leftPanel/ComponentLib.tsx

@@ -0,0 +1,64 @@
+import {
+  ComponentConfType,
+  componentConfGroup,
+} from '@/components/QuestionComponents'
+import { addComponent } from '@/store/modules/componentsReducer'
+import { nanoid } from '@reduxjs/toolkit'
+import { Typography } from 'antd'
+import { FC } from 'react'
+import { useDispatch } from 'react-redux'
+
+const { Title } = Typography
+
+const genComponent = (c: ComponentConfType) => {
+  const { title, type, Component, defaultProps } = c
+  const dispatch = useDispatch()
+
+  const handleClick = useCallback(() => {
+    dispatch(
+      addComponent({
+        fe_id: nanoid(),
+        title,
+        type,
+        props: defaultProps,
+      }),
+    )
+  }, [])
+
+  return (
+    <div
+      key={type}
+      onClick={handleClick}
+      className="mb-3 cursor-pointer rounded border-solid bg-white p-3 hover:border-cyan"
+    >
+      <div className="pointer-events-none">
+        <Component />
+      </div>
+    </div>
+  )
+}
+
+const ComponentLib: FC = () => {
+  return (
+    <>
+      {componentConfGroup.map((group, index) => {
+        const { groupId, groupName, components } = group
+
+        return (
+          <div key={groupId}>
+            <Title
+              level={3}
+              style={{ fontSize: '16px', marginTop: index > 0 ? '20px' : '0' }}
+            >
+              {groupName}
+            </Title>
+
+            <div>{components.map((c) => genComponent(c))}</div>
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+export default ComponentLib

src/pages/question/stat/components/StatContainerLeft.tsx → src/pages/question/stat/components/leftPanel/index.tsx

@@ -1,6 +1,8 @@
 import { FC } from 'react'
 import { Tabs } from 'antd'
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons'
+import ComponentLib from './ComponentLib'
+import ComponentLayer from './ComponentLayer'
 
 const StatContainerLeft: FC = () => {
   const tabsItems = [
@@ -12,7 +14,7 @@ const StatContainerLeft: FC = () => {
           组件库
         </span>
       ),
-      children: <div>子组件</div>,
+      children: <ComponentLib />,
     },
     {
       key: 'layers',
@@ -22,7 +24,7 @@ const StatContainerLeft: FC = () => {
           图层
         </span>
       ),
-      children: <div>图层</div>,
+      children: <ComponentLayer />,
     },
   ]