组件概览数据提出来

src/docs/data/comData.ts

+export const canvasData =[
+    {
+        name:"金币动效",
+        imgUrl:"/resource/金币动效.gif",
+        href:"金币动效"
+    },
+    {
+        name:"轮播组件",
+        imgUrl:"/resource/轮播.gif",
+        href:"轮播组件"
+    },
+    {
+        name:"多边形坐标系统",
+        imgUrl:"/resource/多边形坐标系统.gif",
+        href:"多边形坐标系统"
+    },
+    {
+        name:"丰富文本",
+        imgUrl:"/resource/丰富文本.gif",
+        href:"丰富文本"
+    }
+]
+export const reactData =[
+    {
+        name:"弹幕",
+        imgUrl:"/resource/reactDanmu.gif",
+        href:"弹幕"
+    }
+]
\ No newline at end of file

src/docs/totalCom.tsx

@@ -4,41 +4,15 @@ import { useEffect } from 'react';
 import {navigate,LinkTo, linkTo,hrefTo } from '@storybook/addon-links';
 import "./totalCom.less"
 
+import {canvasData,reactData} from "./data/comData"
+
 const canvasClickFun = (name)=>{
     linkTo('Canvas组件/'+name)();
 }
 const reactClickFun = (name)=>{
     linkTo('React组件/'+name)();
 }
-const comArrData = [
-    {
-        name:"金币动效",
-        imgUrl:"/resource/金币动效.gif",
-        href:"金币动效"
-    },
-    {
-        name:"轮播组件",
-        imgUrl:"/resource/轮播.gif",
-        href:"轮播组件"
-    },
-    {
-        name:"多边形坐标系统",
-        imgUrl:"/resource/多边形坐标系统.gif",
-        href:"多边形坐标系统"
-    },
-    {
-        name:"丰富文本",
-        imgUrl:"/resource/丰富文本.gif",
-        href:"丰富文本"
-    }
-]
-const reactArrData = [
-    {
-        name:"弹幕",
-        imgUrl:"/resource/reactDanmu.gif",
-        href:"弹幕"
-    }
-]
+
 export const TotalCom = ()=>{
     clearStage();
     return (
@@ -46,7 +20,7 @@ export const TotalCom = ()=>{
             <h2>canvas组件概览</h2>
             <div className ="container-div">
                 {
-                    comArrData.map((el,index)=>{
+                    canvasData.map((el,index)=>{
                         return (
                             <div key={index} className="itemCom">
                                 <img src={el.imgUrl}  width = "200" height = "150"/>
@@ -59,7 +33,7 @@ export const TotalCom = ()=>{
             <h2>React组件概览</h2>
             <div className ="container-div">
                 {
-                    reactArrData.map((el,index)=>{
+                    reactData.map((el,index)=>{
                         return (
                             <div key={index}  className="itemCom">
                                 <img src={el.imgUrl}  width = "200" height = "150"/>