组件概览完善

.storybook/preview.js

@@ -52,7 +52,7 @@ export const parameters = {
     viewport: { viewports: customViewports },
     options: {
       storySort: {
-        order: ["Introduction","Canvas组件概览","React组件概览","Canvas组件","React组件"], 
+        order: ["Introduction","组件概览","React组件概览","Canvas组件","React组件"], 
       },
     },
   };

src/canvasCom/carouselCom/carouselCom.tsx

@@ -15,8 +15,13 @@ interface TestProps {
     num:number;
     /** 缓动系数，系数越大移动越快。在0-1之间*/
     k:number;
+    /**轮播组件的x坐标 */
+    x:number;
+    /**轮播组件的y坐标 */
+    y:number;
     /**轮播的数据 */
     data:any;
+
 }
 
 export const CarouselCom = (pros:TestProps)=>{
@@ -25,6 +30,7 @@ export const CarouselCom = (pros:TestProps)=>{
       window.stage.removeAllChildren();
       const {carouselItem,itemWidth,itemHeight,vertical,num,k} = pros
       const carouseCom = new CarouselComponent(carouselItem, itemWidth, itemHeight,vertical, num, k);
+      carouseCom.position.set(pros.x,pros.y)
       window.stage.addChild(carouseCom);
       carouseCom.updateData(pros.data);
     })

src/canvasStories/carousel.stories.tsx

@@ -66,6 +66,8 @@ Demo1.args = {
   vertical:false,
   num:3,
   k:0.3,
+  x:100,
+  y:100,
   data:[
     {
         "rule": "ru_1",

src/docs/TotalCanvas.stories.tsx

-import React from 'react';
-import {TotalCom} from "./totalCanvasCom";
-import {
-  Title,
-  Subtitle,
-  Description,
-  ArgsTable,
-  PRIMARY_STORY,
-} from '@storybook/addon-docs';
-export default {
-  component: TotalCom,
-  title: 'Canvas组件概览',
-};
-const Template = () => <TotalCom />;
-export const CanvasPreview = Template.bind({});
\ No newline at end of file

src/docs/TotaReact.stories.tsx → src/docs/TotalCom.stories.tsx

 import React from 'react';
-import {TotalCom} from "./totalReactCom";
+import {TotalCom} from "./totalCom";
 import {
   Title,
   Subtitle,
@@ -9,7 +9,11 @@ import {
 } from '@storybook/addon-docs';
 export default {
   component: TotalCom,
-  title: 'React组件概览',
+  title: '组件概览',
+  parameters:{
+    layout:"left"
+  }
+
 };
 const Template = () => <TotalCom />;
-export const CanvasPreview = Template.bind({});
\ No newline at end of file
+export const componentsPreview = Template.bind({});

src/docs/totalCanvasCom.css

-.container-div{
-    width: 750px;
-    height: 1624px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-    align-content: flex-start;
-
-}
-.itemCom{
-    width: 250px;
-    height: 200px;
-}
-span{
-    display: block;
-    color: #ffffff;
-}
-*{color: #ffffff;}
\ No newline at end of file

src/docs/totalReactCom.css → src/docs/totalCom.less

+.total-container{
+    margin: 50px;
+}
 .container-div{
-    width: 750px;
-    height: 1624px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: flex-start;
     align-content: flex-start;
-
 }
 .itemCom{
     width: 250px;
@@ -15,6 +15,12 @@
 }
 span{
     display: block;
+    width: 200px;
+    text-align: center;
     color: #ffffff;
+    &:hover{
+        color: cyan;
+        cursor: pointer;
+    }
 }
 *{color: #ffffff;}
\ No newline at end of file

src/docs/totalCanvasCom.tsx → src/docs/totalCom.tsx

@@ -2,45 +2,68 @@ import React from 'react';
 import {clearStage} from "../common/createStage"
 import { useEffect } from 'react';
 import {navigate,LinkTo, linkTo,hrefTo } from '@storybook/addon-links';
-import "./totalCanvasCom.css"
+import "./totalCom.less"
 
-const clickFun = (name)=>{
+const canvasClickFun = (name)=>{
     linkTo('Canvas组件/'+name)();
 }
+const reactClickFun = (name)=>{
+    linkTo('React组件/'+name)();
+}
 const comArrData = [
     {
         name:"金币动效",
-        imgUrl:"/resource/test.gif",
+        imgUrl:"/resource/金币动效.gif",
         href:"金币动效"
     },
     {
         name:"轮播组件",
-        imgUrl:"/resource/test.gif",
+        imgUrl:"/resource/轮播.gif",
         href:"轮播组件"
     },
     {
         name:"多边形坐标系统",
-        imgUrl:"/resource/test.gif",
+        imgUrl:"/resource/多边形坐标系统.gif",
         href:"多边形坐标系统"
     },
     {
         name:"丰富文本",
-        imgUrl:"/resource/test.gif",
+        imgUrl:"/resource/丰富文本.gif",
         href:"丰富文本"
-    },
+    }
+]
+const reactArrData = [
+    {
+        name:"弹幕",
+        imgUrl:"/resource/reactDanmu.gif",
+        href:"弹幕"
+    }
 ]
 export const TotalCom = ()=>{
     clearStage();
     return (
-        <div >
+        <div className="total-container">
             <h2>canvas组件概览</h2>
             <div className ="container-div">
                 {
                     comArrData.map((el,index)=>{
                         return (
-                            <div className="itemCom">
+                            <div key={index} className="itemCom">
+                                <img src={el.imgUrl}  width = "200" height = "150"/>
+                                <span onClick = {canvasClickFun.bind(this,el.name)} >{el.name}</span>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+            <h2>React组件概览</h2>
+            <div className ="container-div">
+                {
+                    reactArrData.map((el,index)=>{
+                        return (
+                            <div key={index}  className="itemCom">
                                 <img src={el.imgUrl}  width = "200" height = "150"/>
-                                <span onClick = {clickFun.bind(this,el.name)} >{el.name}</span>
+                                <span onClick = {reactClickFun.bind(this,el.name)} >{el.name}</span>
                             </div>
                         )
                     })

src/docs/totalReactCom.tsx

-import React from 'react';
-import {clearStage} from "../common/createStage"
-import { useEffect } from 'react';
-import {navigate,LinkTo, linkTo,hrefTo } from '@storybook/addon-links';
-import "./totalCanvasCom.css"
-
-const clickFun = (name)=>{
-    linkTo('React组件/'+name)();
-}
-const comArrData = [
-    {
-        name:"弹幕",
-        imgUrl:"/resource/test.gif",
-        href:"弹幕"
-    }
-]
-export const TotalCom = ()=>{
-    clearStage();
-    return (
-        <div >
-            <h2>canvas组件概览</h2>
-            <div className ="container-div">
-                {
-                    comArrData.map((el,index)=>{
-                        return (
-                            <div className="itemCom">
-                                <img src={el.imgUrl}  width = "200" height = "150"/>
-                                <span onClick = {clickFun.bind(this,el.name)} >{el.name}</span>
-                            </div>
-                        )
-                    })
-                }
-            </div>
-        </div>
-      
-    )
-}
-