切换到文档时清楚canvas

.storybook/manager.js

 // .storybook/manager.js
 import { addons } from '@storybook/addons';
 import { themes } from '@storybook/theming';
+
 addons.setConfig({
   isFullscreen: false,
   showNav: true,
@@ -26,4 +27,4 @@ addons.setConfig({
     copy: { hidden: false, },
     fullscreen: { hidden: false, },
   },
-});
\ No newline at end of file
+});

.storybook/preview-body.html

 <!--  .storybook/preview-body.html -->
 <!-- 渲染引擎 -->
-<script src="//yun.duiba.com.cn/db_games/libs0924/fyge2023z.minSpine.js" crossorigin="anonymous"></script>
-<!-- <canvas id="canvas-container"></canvas> -->
 <style>
   html {
     font-size: 15px;
   }
 </style>
-<script>
-  window.FYGE = FYGE;
-</script>
-<script>
-</script>
-<!-- <script>
-   window.addEventListener("load", function () {
-    let canvas = document.getElementById("canvas-container")
-    canvas.style.height = document.body.clientHeight*(window.devicePixelRatio || 1)+"px";
-    canvas.style.width = document.body.clientWidth*(window.devicePixelRatio || 1)+"px";
-    console.log(window.devicePixelRatio)
-    console.log( document.body.clientWidth, document.body.clientHeight);
-    var stage = new FYGE.Stage(
-        canvas,
-        750,
-        1624,
-        750,
-        1624,
-        FYGE.RENDERER_TYPE.CANVAS,
-        false,
-        false
-    )
-    
-    //点击事件绑定
-    var mouseEvent = stage.onMouseEvent.bind(stage);
-    canvas.addEventListener("touchstart",mouseEvent,false);
-    canvas.addEventListener("touchmove",mouseEvent,false);
-    canvas.addEventListener("touchend",mouseEvent,false);
-    canvas.addEventListener("click",mouseEvent,false);
-    function loop() { 
-        stage.flush();
-        FYGE.Tween.flush();
-        requestAnimationFrame(loop);
-    }
-
-    loop();
-     window.stage = stage;
-  })
-   
-</script> -->
+<script src="//yun.duiba.com.cn/db_games/libs0924/fyge2023z.minSpine.js" crossorigin="anonymous"></script>
 

src/common/createStage.ts

@@ -5,8 +5,6 @@ export const createStage = ()=>{
     // const width = 750;
     const scale = window.devicePixelRatio;
     let canvas = document.getElementById("canvas-container");
-  
-
     if(!canvas){
         canvas = document.createElement("canvas");
         canvas.setAttribute("id","canvas-container")

src/docs/Introduction.stories.mdx

 import { Meta } from '@storybook/addon-docs';
+import {clearStage} from "../common/createStage.ts";
+
+<Source source={clearStage()}/> 
 
 <Meta title="Introduction"/>
 
 # 组件库简介
 
-Let's define a story for our `金币动效` component
+## 背景
+组件文档收录组件时，不能直观的看出此组件的真实运行效果，使用者无法针对现有的需求来判断是否命中组件，导致不用组件、或耗费时间去接入看效果。
+针对此类场景，组件预览方案能解决此类问题
+
+## 目标
++ 收录完整组件
++ 可预览组件真实运行效果
++ 组件源码下载、以及使用文档
++ 改变相应参数可事实观看效果
 
-## 组件库简介
-Let's define a story for our `金币动效` component
-[Go to specific documentation page](?path=/docs/some--id)
 
-![test image size](/resource/test.gif)
\ No newline at end of file

src/docs/TotalCom.stories.tsx

 import React from 'react';
 import {TotalCom} from "./totalCom";
+import { clearStage } from '../common/createStage';
+import {
+  Title,
+  Subtitle,
+  Description,
+  ArgsTable,
+  PRIMARY_STORY,
+} from '@storybook/addon-docs';
+
+window.addEventListener("hashchange", (e)=>{
+  console.log(e)
+});
 export default {
   component: TotalCom,
   title: '组件概览',
   parameters:{
-    layout:"fullscreen"
-  }
-
+    layout:"fullscreen",
+    docs: { 
+      page: () => {
+        clearStage();
+        return <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+        },
+    } 
+  },
 };
 const Template = () => <TotalCom />;
 export const componentsPreview = Template.bind({});