添加组件概览页面

.gitignore

@@ -8,6 +8,8 @@ coverage/
 
 dist/ 
 
+release/ 
+
 npm-debug.log 
 
 selenium-debug.log 

.storybook/main.js

 
 module.exports = {
-    stories: ['../src/**/*.stories.tsx'],
+    stories: ['../src/**/*.stories.tsx',"../src/**/*.stories.mdx"],
     addons:[
+        "@storybook/addon-links",
         "@storybook/addon-essentials",
+        "@storybook/addon-notes",
+      
     ]
 };
\ No newline at end of file

.storybook/manager.js

@@ -9,6 +9,10 @@ addons.setConfig({
   enableShortcuts: true,
   isToolshown: true,
   theme: themes.dark,
+  // theme:{
+  //   brandTitle:'DUI',
+  //   brandUrl: null,
+  // },
   selectedPanel: undefined,
   initialActive: 'sidebar',
   sidebar: {

.storybook/preview-body.html

@@ -10,6 +10,8 @@
 <script>
   window.FYGE = FYGE;
 </script>
+<script>
+</script>
 <!-- <script>
    window.addEventListener("load", function () {
     let canvas = document.getElementById("canvas-container")

.storybook/preview.js

@@ -10,8 +10,18 @@ import "codemirror/addon/fold/foldcode.js";
 import "codemirror/addon/fold/foldgutter.js";
 import "codemirror/addon/fold/brace-fold.js";
 import "codemirror/addon/fold/comment-fold.js";
-
+import { addParameters ,configure} from '@storybook/react';
 import "./global.less";
+
+addParameters({
+  options: {
+    theme:{
+      brandTitle:'DUI',
+      brandUrl: null,
+    },
+  }
+});
+
 const customViewports = {
     kindleFire2: {
       name: 'Kindle Fire 2',
@@ -40,5 +50,10 @@ export const parameters = {
         theme: themes.dark,
     },
     viewport: { viewports: customViewports },
+    options: {
+      storySort: {
+        order: ["Introduction","Canvas组件概览","React组件概览","Canvas组件","React组件"], 
+      },
+    },
   };
   
\ No newline at end of file

.storybook/tsconfig.json

+{
+    "files": [
+        "./typings.d.ts"
+      ]
+}
\ No newline at end of file

.storybook/typings.d.ts

+declare module "*.md" {
+    const content: string;
+    export default content;
+}
+declare module "*.mdx" {
+    const content: string;
+    export default content;
+}
\ No newline at end of file

.storybook/webpack.config.js

@@ -5,23 +5,10 @@ module.exports = ({config, mode}) => {
     loaders: ["style-loader", "css-loader", "less-loader"],
     include: path.resolve(__dirname, '../')
   });
-  // config.module.rules.push( {
-
-  //   test: /\.css$/,
-
-  //   //user可为loader加入选项
-
-  //   use: [
-
-  //     'style-loader',
-
-  //     {loader: 'css-loader',options: {importLoaders: 1}},
-
-  //     {loader: 'postcss-loader',options: {plugins: [require('autoprefixer')({browsers:["last 5 versions"]})]}}
-
-  //   ],
-
-  // })
+  config.module.rules.push({
+    test: /\.(gif|png|jpe?g|eot|woff|ttf|pdf)$/,
+    loader: 'file-loader',
+  });
   config.module.rules.push({
     test: /\.(js|jsx|ts|tsx)$/,
     loader: require.resolve('babel-loader'),

package.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "npm run storybook",
     "storybook": "start-storybook -s src/asserts -p 9003 -c .storybook",
-    "build":"yarn build-storybook -s src/asserts -o ./path/to/build"
+    "build": "yarn build-storybook -s src/asserts -o ./released/"
   },
   "keywords": [],
   "author": "",
@@ -33,14 +33,19 @@
     "@storybook/addon-docs": "^6.3.2",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/preset-ant-design": "^0.0.2",
+    "ali-oss": "^6.15.2",
     "antd": "^4.16.6",
     "babel-preset-react-app": "^10.0.0",
+    "chalk": "^4.1.1",
+    "co": "^4.6.0",
     "codemirror": "^5.62.0",
     "css-loader": "5.2.6",
+    "file-loader": "^6.2.0",
     "js-beautify": "^1.14.0",
     "less": "3.13.1",
     "less-loader": "5.0.0",
     "postcss-loader": "^6.1.1",
+    "progress": "^2.0.3",
     "react": "^17.0.2",
     "react-codemirror2": "^7.2.1",
     "react-dom": "^17.0.2",

path/to/build/4.0fdf8ed5.iframe.bundle.js.LICENSE.txt

-/**
- * Prism: Lightweight, robust, elegant syntax highlighting
- *
- * @license MIT <https://opensource.org/licenses/MIT>
- * @author Lea Verou <https://lea.verou.me>
- * @namespace
- * @public
- */

path/to/build/4.0fdf8ed5.iframe.bundle.js.map

-{"version":3,"file":"4.0fdf8ed5.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file

path/to/build/4.de77a9be555f64d412b6.manager.bundle.js.LICENSE.txt

-/**
- * Prism: Lightweight, robust, elegant syntax highlighting
- *
- * @license MIT <https://opensource.org/licenses/MIT>
- * @author Lea Verou <https://lea.verou.me>
- * @namespace
- * @public
- */

path/to/build/6.0a2630bb.iframe.bundle.js.LICENSE.txt

-/*!
- * OverlayScrollbars
- * https://github.com/KingSora/OverlayScrollbars
- *
- * Version: 1.13.0
- *
- * Copyright KingSora | Rene Haas.
- * https://github.com/KingSora
- *
- * Released under the MIT license.
- * Date: 02.08.2020
- */

path/to/build/6.0a2630bb.iframe.bundle.js.map

-{"version":3,"file":"6.0a2630bb.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file

path/to/build/6.ab9e474c4c9eb4a6b803.manager.bundle.js.LICENSE.txt

-/*!
- * OverlayScrollbars
- * https://github.com/KingSora/OverlayScrollbars
- *
- * Version: 1.13.0
- *
- * Copyright KingSora | Rene Haas.
- * https://github.com/KingSora
- *
- * Released under the MIT license.
- * Date: 02.08.2020
- */

path/to/build/8.83bb50b2cde877493317.manager.bundle.js

-(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{966:function(module,exports){module.exports=function(e,n){return n=n||{},new Promise((function(t,r){var s=new XMLHttpRequest,o=[],u=[],i={},a=function(){return{ok:2==(s.status/100|0),statusText:s.statusText,status:s.status,url:s.responseURL,text:function(){return Promise.resolve(s.responseText)},json:function(){return Promise.resolve(s.responseText).then(JSON.parse)},blob:function(){return Promise.resolve(new Blob([s.response]))},clone:a,headers:{keys:function(){return o},entries:function(){return u},get:function(e){return i[e.toLowerCase()]},has:function(e){return e.toLowerCase()in i}}}};for(var l in s.open(n.method||"get",e,!0),s.onload=function(){s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,n,t){o.push(n=n.toLowerCase()),u.push([n,t]),i[n]=i[n]?i[n]+","+t:t})),t(a())},s.onerror=r,s.withCredentials="include"==n.credentials,n.headers)s.setRequestHeader(l,n.headers[l]);s.send(n.body||null)}))}}}]);
\ No newline at end of file

path/to/build/iframe.html

-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-main) > .sb-main,
-  :not(.sb-show-nopreview) > .sb-nopreview,
-  :not(.sb-show-errordisplay) > .sb-errordisplay {
-    display: none;
-  }
-
-  .sb-show-main.sb-main-centered {
-    margin: 0;
-    display: flex;
-    align-items: center;
-    min-height: 100vh;
-  }
-
-  .sb-show-main.sb-main-centered #root {
-    box-sizing: border-box;
-    margin: auto;
-    padding: 1rem;
-    max-height: 100%; /* Hack for centering correctly in IE11 */
-  }
-
-  /* Vertical centering fix for IE11 */
-  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    .sb-show-main.sb-main-centered:after {
-      content: '';
-      min-height: inherit;
-      font-size: 0;
-    }
-  }
-
-  .sb-show-main.sb-main-fullscreen {
-    margin: 0;
-    padding: 0;
-    display: block;
-  }
-
-  .sb-show-main.sb-main-padded {
-    margin: 0;
-    padding: 1rem;
-    display: block;
-    box-sizing: border-box;
-  }
-
-  .sb-wrapper {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 20px;
-    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    overflow: auto;
-  }
-
-  .sb-heading {
-    font-size: 14px;
-    font-weight: 600;
-    letter-spacing: 0.2px;
-    margin: 10px 0;
-    padding-right: 25px;
-  }
-
-  .sb-nopreview {
-    display: flex;
-    align-content: center;
-    justify-content: center;
-  }
-
-  .sb-nopreview_main {
-    margin: auto;
-    padding: 30px;
-    border-radius: 10px;
-    background: rgba(0,0,0,0.03);
-  }
-
-  .sb-nopreview_heading {
-    text-align: center;
-  }
-
-  .sb-errordisplay {
-    border: 20px solid rgb(187, 49, 49);
-    background: #222;
-    color: #fff;
-    z-index: 999999;
-  }
-
-  .sb-errordisplay_code {
-    padding: 10px;
-    background: #000;
-    color: #eee;
-    font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
-  }
-
-  .sb-errordisplay pre {
-    white-space: pre-wrap;
-  }</style><script>/* globals window */
-  /* eslint-disable no-underscore-dangle */
-  try {
-    if (window.top !== window) {
-      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
-      window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
-    }
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.warn('unable to connect to top frame for connecting dev tools');
-  }
-
-  window.onerror = function onerror(message, source, line, column, err) {
-    if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
-    // eslint-disable-next-line no-var, vars-on-top
-    var xhr = new window.XMLHttpRequest();
-    xhr.open('POST', '/runtime-error');
-    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-    xhr.send(
-      JSON.stringify({
-        /* eslint-disable object-shorthand */
-        message: message,
-        source: source,
-        line: line,
-        column: column,
-        error: err && { message: err.message, name: err.name, stack: err.stack },
-        origin: 'preview',
-        /* eslint-enable object-shorthand */
-      })
-    );
-  };</script><style>#root[hidden],
-      #docs-root[hidden] {
-        display: none !important;
-      }</style></head><body><script src="//yun.duiba.com.cn/db_games/libs0924/fyge2023z.minSpine.js" crossorigin="anonymous"></script><style>html {
-    font-size: 15px;
-  }</style><script>window.FYGE = FYGE;</script><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['LOGLEVEL'] = "info";
-            
-        
-            
-              window['FRAMEWORK_OPTIONS'] = {};
-            
-        
-            
-              window['FEATURES'] = {"postcss":true};</script><script src="runtime~main.e9d206bb.iframe.bundle.js"></script><script src="vendors~main.814fc0dd.iframe.bundle.js"></script><script src="main.7a76eb1d.iframe.bundle.js"></script></body></html>
\ No newline at end of file

path/to/build/index.html

-<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"/><style>html, body {
-    overflow: hidden;
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-
-  * {
-    box-sizing: border-box;
-  }</style><script>/* globals window */
-  /* eslint-disable no-underscore-dangle */
-  try {
-    if (window.top !== window) {
-      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-    }
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.warn('unable to connect to top frame for connecting dev tools');
-  }
-
-  window.onerror = function onerror(message, source, line, column, err) {
-    if (window.CONFIG_TYPE !== 'DEVELOPMENT') return;
-    // eslint-disable-next-line no-var, vars-on-top
-    var xhr = new window.XMLHttpRequest();
-    xhr.open('POST', '/runtime-error');
-    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-    xhr.send(
-      JSON.stringify({
-        /* eslint-disable object-shorthand */
-        message: message,
-        source: source,
-        line: line,
-        column: column,
-        error: err && { message: err.message, name: err.name, stack: err.stack },
-        origin: 'manager',
-        /* eslint-enable object-shorthand */
-      })
-    );
-  };</script><style>#root[hidden],
-      #docs-root[hidden] {
-        display: none !important;
-      }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
-            
-        
-            
-              window['LOGLEVEL'] = "info";
-            
-        
-            
-        
-            
-        
-            
-              window['DOCS_MODE'] = false;</script><script src="runtime~main.aa4ad03c3cb5965ee0df.manager.bundle.js"></script><script src="vendors~main.330edc5015a87fb97848.manager.bundle.js"></script><script src="main.dcd65b9062fe21212723.manager.bundle.js"></script></body></html>
\ No newline at end of file

path/to/build/main.dcd65b9062fe21212723.manager.bundle.js

-(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{484:function(module,exports,__webpack_require__){__webpack_require__(485),__webpack_require__(641),__webpack_require__(888),__webpack_require__(896),__webpack_require__(889),__webpack_require__(892),__webpack_require__(891),__webpack_require__(893),__webpack_require__(890),__webpack_require__(894),module.exports=__webpack_require__(895)},552:function(module,exports){},641:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var _storybook_addons__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(114),_storybook_theming__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(176);_storybook_addons__WEBPACK_IMPORTED_MODULE_0__.a.setConfig({isFullscreen:!1,showNav:!0,showPanel:!0,panelPosition:"bottom",enableShortcuts:!0,isToolshown:!0,theme:_storybook_theming__WEBPACK_IMPORTED_MODULE_1__.a.dark,selectedPanel:void 0,initialActive:"sidebar",sidebar:{showRoots:!1,collapsedRoots:["other"]},toolbar:{title:{hidden:!1},zoom:{hidden:!1},eject:{hidden:!1},copy:{hidden:!1},fullscreen:{hidden:!1}}})}},[[484,2,3]]]);
\ No newline at end of file

path/to/build/runtime~main.aa4ad03c3cb5965ee0df.manager.bundle.js

-!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={2:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.e=function requireEnsure(chunkId){var promises=[],installedChunkData=installedChunks[chunkId];if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else{var promise=new Promise((function(resolve,reject){installedChunkData=installedChunks[chunkId]=[resolve,reject]}));promises.push(installedChunkData[2]=promise);var onScriptComplete,script=document.createElement("script");script.charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.src=function jsonpScriptSrc(chunkId){return __webpack_require__.p+""+({}[chunkId]||chunkId)+"."+{0:"77c5a24fe8fb06f099a5",4:"de77a9be555f64d412b6",5:"c8a767b85172c5cd2f16",6:"ab9e474c4c9eb4a6b803",7:"4d95f94fbae87199771f",8:"83bb50b2cde877493317"}[chunkId]+".manager.bundle.js"}(chunkId);var error=new Error;onScriptComplete=function(event){script.onerror=script.onload=null,clearTimeout(timeout);var chunk=installedChunks[chunkId];if(0!==chunk){if(chunk){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,chunk[1](error)}installedChunks[chunkId]=void 0}};var timeout=setTimeout((function(){onScriptComplete({type:"timeout",target:script})}),12e4);script.onerror=script.onload=onScriptComplete,document.head.appendChild(script)}return Promise.all(promises)},__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__.oe=function(err){throw console.error(err),err};var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
\ No newline at end of file

path/to/build/runtime~main.e9d206bb.iframe.bundle.js

-!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={2:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.e=function requireEnsure(chunkId){var promises=[],installedChunkData=installedChunks[chunkId];if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else{var promise=new Promise((function(resolve,reject){installedChunkData=installedChunks[chunkId]=[resolve,reject]}));promises.push(installedChunkData[2]=promise);var onScriptComplete,script=document.createElement("script");script.charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.src=function jsonpScriptSrc(chunkId){return __webpack_require__.p+""+({}[chunkId]||chunkId)+"."+{0:"febf8a05",4:"0fdf8ed5",5:"82cf1948",6:"0a2630bb",7:"623f985d"}[chunkId]+".iframe.bundle.js"}(chunkId);var error=new Error;onScriptComplete=function(event){script.onerror=script.onload=null,clearTimeout(timeout);var chunk=installedChunks[chunkId];if(0!==chunk){if(chunk){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,chunk[1](error)}installedChunks[chunkId]=void 0}};var timeout=setTimeout((function(){onScriptComplete({type:"timeout",target:script})}),12e4);script.onerror=script.onload=onScriptComplete,document.head.appendChild(script)}return Promise.all(promises)},__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__.oe=function(err){throw console.error(err),err};var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
\ No newline at end of file

path/to/build/vendors~main.330edc5015a87fb97848.manager.bundle.js.LICENSE.txt

-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
-*/
-
-/*!
- * Fuse.js v3.6.1 - Lightweight fuzzy-search (http://fusejs.io)
- * 
- * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
- * All Rights Reserved. Apache Software License 2.0
- * 
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-
-/*!
- * https://github.com/es-shims/es5-shim
- * @license es5-shim Copyright 2009-2020 by contributors, MIT License
- * see https://github.com/es-shims/es5-shim/blob/master/LICENSE
- */
-
-/*!
- * https://github.com/paulmillr/es6-shim
- * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com)
- *   and contributors,  MIT License
- * es6-shim: v0.35.4
- * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE
- * Details and documentation:
- * https://github.com/paulmillr/es6-shim/
- */
-
-/*!
- * isobject <https://github.com/jonschlinkert/isobject>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-/** @license React v0.20.2
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

path/to/build/vendors~main.814fc0dd.iframe.bundle.js.LICENSE.txt

-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/*!
- * The buffer module from node.js, for the browser.
- *
- * @author   Feross Aboukhadijeh <feross@feross.org> <http://feross.org>
- * @license  MIT
- */
-
-/*!
- * https://github.com/es-shims/es5-shim
- * @license es5-shim Copyright 2009-2020 by contributors, MIT License
- * see https://github.com/es-shims/es5-shim/blob/master/LICENSE
- */
-
-/*!
- * https://github.com/paulmillr/es6-shim
- * @license es6-shim Copyright 2013-2016 by Paul Miller (http://paulmillr.com)
- *   and contributors,  MIT License
- * es6-shim: v0.35.4
- * see https://github.com/paulmillr/es6-shim/blob/0.35.3/LICENSE
- * Details and documentation:
- * https://github.com/paulmillr/es6-shim/
- */
-
-/*!
- * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-/*!
- * isobject <https://github.com/jonschlinkert/isobject>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-/** @license React v0.20.2
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-//! stable.js 0.1.8, https://github.com/Two-Screen/stable
-
-//! © 2018 Angry Bytes and contributors. MIT licensed.

path/to/build/vendors~main.814fc0dd.iframe.bundle.js.map

-{"version":3,"file":"vendors~main.814fc0dd.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""}
\ No newline at end of file

project.json

+{
+    "type": "activity",
+    "name": "template"
+}
\ No newline at end of file

scripts/upload.js

+var fs = require('fs');
+var path = require('path');
+const co = require('co');
+const OSS = require('ali-oss');
+
+const chalk = require('chalk');
+const ProgressBar = require('progress');
+
+class TuiaAutoUpload {
+    constructor(props, type) {
+        this.type = type;
+        const defaultOptions = {
+            dir: undefined,
+            originDir: undefined
+        }
+        this.options = Object.assign({}, defaultOptions, props);
+        if (!this.options.dir || !this.options.originDir) {
+            console.log(chalk.red('缺少参数，初始化失败'))
+            return;
+        }
+        this.init();
+    }
+    init() {
+        var _this = this;
+        this.client = new OSS({
+            region: 'oss-cn-hangzhou',
+            accessKeyId: 'LTAI4Fw25WcfcGv7FvcHoiHK',
+            accessKeySecret: 'NZk1NtT9J5HFaAolNbtQdzTzLLvLYm',
+            bucket: _this.type === 'prod' ? 'duiba' : 'daily-duiba'
+        });
+        this.bar = new ProgressBar(chalk.yellow(`  文件上传中 [:bar] :current/${this.files().length} :percent :elapseds`), {
+            complete: '●',
+            incomplete: '○',
+            width: 20,
+            total: this.files().length,
+            callback: () => {
+                console.log(chalk.green('\n  All complete.'));
+                console.log(chalk.blue(`\n  本次队列文件共${this.files().length}个，已存在文件${this.existFiles}个，上传文件${this.uploadFiles}个，上传失败文件${this.errorFiles}个\n`));
+            }
+        })
+        return this;
+    }
+    files() {
+        var _this = this;
+        if (this._files) return this._files;
+        this._files = [];
+
+        /**
+         * 文件遍历方法
+         * @param filePath 需要遍历的文件路径
+         */
+        function fileDisplay(filePath) {
+            //根据文件路径读取文件，返回文件列表
+            var files = fs.readdirSync(filePath);
+            files.forEach(function (filename) {
+                //获取当前文件的绝对路径
+                var filedir = path.join(filePath, filename);
+                //根据文件路径获取文件信息，返回一个fs.Stats对象
+                var stats = fs.statSync(filedir);
+                var isFile = stats.isFile();//是文件
+                var isDir = stats.isDirectory();//是文件夹
+                if (isFile) {
+                    var sep = '/';
+                    if ('win32' == process.platform)
+                        sep = '\\';
+                    var newDirArr = filedir.split(sep);
+                    newDirArr.shift();
+                    _this._files.push(newDirArr.join('/'));
+                }
+                if (isDir) {
+                    fileDisplay(filedir);//递归，如果是文件夹，就继续遍历该文件夹下面的文件
+                }
+            });
+
+        }
+
+        //调用文件遍历方法
+        fileDisplay(this.options.dir);
+        return this._files;
+    }
+    start() {
+        this.files().map((file, index) => {
+            let _this = this;
+            const path1 = path.join(path.resolve(__dirname, '..'), 'released', file);
+            let originFile;
+            this.existFiles = 0;
+            this.uploadFiles = 0;
+            this.errorFiles = 0;
+            co(function* () {
+                const originPath = `${_this.options.originDir}${file}`;
+                try {
+                    originFile = yield _this.client.head(originPath);
+                } catch (error) {
+                    originFile = error;
+                }
+                if (_this.type === 'prod') {
+                    if (originFile.status === 404) {
+                        yield _this.client.put(originPath, path1);
+                        _this.uploadFiles += 1;
+                    } else {
+                        _this.existFiles += 1;
+                    }
+                } else if (_this.type === 'dev') {
+                    if (originFile.status === 404 || originFile.status === 200) {
+                        _this.existFiles += 1;
+                    }
+                    yield _this.client.put(originPath, path1, {
+                        headers: {
+                            'Cache-Control': 'no-cache'
+                        }
+                    })
+                    _this.uploadFiles += 1;
+                }
+                _this.bar.tick();
+            }).catch(function (err) {
+                _this.errorFiles += 1;
+                console.log(err);
+            });
+        });
+    }
+}
+
+const configFileName = 'project.json';
+if (!fs.existsSync(configFileName)) {
+    throw new Error(`${configFileName}不存在.`)
+}
+let config = fs.readFileSync('project.json');
+config = JSON.parse(config + '');
+if (!config.type) {
+    throw new Error(`${configFileName}的type不存在.`)
+}
+
+if (!config.name) {
+    throw new Error(`${configFileName}的name不存在.`)
+}
+
+const now = new Date();
+const version = Math.round(now.getTime() / 1000);
+console.log(`版本号：
+    ${version}`)
+
+const autoupload = new TuiaAutoUpload({
+    dir: './released/',
+    // dir: path.join(__dirname, './released/'),
+    originDir: `/db_games/${config.type}/${config.name}/${version}/`
+}, "prod")
+
+autoupload.start()
+
+var iconv = require('iconv-lite');
+var readPath = "./released/resource/";
+//读取json文件
+var data = iconv.decode(fs.readFileSync(readPath + "res.json"), "utf-8");//GBK
+//反序列化
+data = JSON.parse(data);
+data.path = `https://yun.duiba.com.cn/db_games/${config.type}/${config.name}/${version}/resource/`
+//写入目标文件夹，可配置，每个项目必须修改，或者直接和project的保持一致（淘宝项目文件固定后）
+var endPath = './src/';
+var endFile = `export const ResJson = ${JSON.stringify(data, "", "\t")}`
+fs.writeFileSync(endPath + "ResJson.ts", endFile);
+
+
+//根据参数吧，有就是web。需要生成皮肤和js，没有就不执行后续
+let arg = process.argv.splice(2);
+if (!arg[0]) return;
+//有版本号了，模板也生成吧
+require("./createHtml")(`${config.type}/${config.name}/${version}`);
+
+var uploadSingleJs = require("./uploadSingleJs")
+var exec = require('child_process').exec;
+//打包js
+exec("webpack --config webpack.prod.js", { encoding: 'utf8' }, (e) => {
+    if (e) {
+        console.log(e)
+        return
+    }
+    uploadSingleJs(`${config.type}/${config.name}/${version}`)
+    //再打印一次
+    console.log(`版本号：
+    ${version}`)
+})
\ No newline at end of file

src/asserts/pages/totalCom/indexCanvas.html

+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            .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;
+            }
+            a{
+                display: block;
+                color: #ffffff;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="container-div" class="container-div"></div>
+        <script>
+            var comArrData = [
+                {
+                    name:"金币动效",
+                    imgUrl:"/resource/test.gif",
+                    href:"金币动效"
+                },
+                {
+                    name:"轮播组件",
+                    imgUrl:"/resource/test.gif",
+                    href:"轮播组件"
+                },
+                {
+                    name:"多变形坐标系统",
+                    imgUrl:"/resource/test.gif",
+                    href:"多变形坐标系统"
+                },
+                {
+                    name:"丰富文本",
+                    imgUrl:"/resource/test.gif",
+                    href:"丰富文本"
+                },
+            ]
+            var container = document.getElementById("container-div");
+            comArrData.forEach((el,index)=>{
+                var  item  = document.createElement("div");
+                item.className = "itemCom";
+                var imgStr = `<img src="${el.imgUrl}" width = "200" height = "150" />`;
+                var url = "http://"+document.domain+":"+ location.port+"?/story/Canvas组件-"+el.href;
+                console.log(url)
+                var aStr = `<a href = "${url}" >${el.name}</a>`
+                item.innerHTML = imgStr + aStr;
+                container.appendChild(item);
+            }) 
+        </script>
+    </body>
+</html>
\ No newline at end of file

src/canvasCom/carouselCom/CarouselCom.md

+ # Storybook教程
+ 
+### CSF格式的优点
+ 
+-  很简单。编写故事就像从您的故事文件中以您知道和喜欢的干净标准格式导出ES6功能一样容易。
+-  便携式。可以轻松地在ES6模块存在的任何地方使用组件故事，包括您最喜欢的测试工具（如Jest和Cypress）。
+-  优化。组件故事除了您的组件之外不需要任何库。而且因为它们是ES6模块，所以它们甚至可以Tree Shaking！
+-  ☝️声明式的。声明性语法与更高级别的格式（如MDX）同构，从而实现了清晰可验证的转换。-
\ No newline at end of file

src/canvasStories/carousel.stories.tsx

@@ -9,6 +9,8 @@ import {
   PRIMARY_STORY,
 } from '@storybook/addon-docs';
 import { clearStage } from '../common/createStage';
+
+import {Story, Meta} from '@storybook/react/types-6-0';
 class carouselItem extends window.FYGE.Container {
   constructor(data) {
       super();
@@ -33,25 +35,8 @@ export default {
   component: CarouselCom,
   title: 'Canvas组件/轮播组件',
   //👇 Creates specific argTypes
-  argTypes: {
-    label: {
-      description: 'Overwritten description',
-      table: {
-        type: { 
-          summary: 'Something short', 
-          detail: 'Something really really long' 
-        },
-      },
-      control: {
-        type: null,
-      },
-    },
-  },
-  args: {
-    //👇 Now all Button stories will be primary.
-    primary: false,
-  },
   parameters: { 
+    layout: 'centered',
     docs: { 
       page: () => {
         clearStage();
@@ -66,16 +51,13 @@ export default {
     } 
   },
   
-};
+} as Meta;
 //👇 We create a “template” of how args map to rendering
 const Template = (args) => <CarouselCom {...args} />;
 
 //👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.parameters = {
-  layout: 'centered',
-};
-Primary.args = {
+export const Demo1 = Template.bind({});
+Demo1.args = {
   primary: true,
   label: '金币动效',
   carouselItem:carouselItem, 

src/canvasStories/goldCoin.stories.tsx

@@ -15,21 +15,8 @@ export default {
   component: GoldCoinCom,
   title: 'Canvas组件/金币动效',
   //👇 Creates specific argTypes
-  argTypes: {
-    label: {
-      description: 'Overwritten description',
-      table: {
-        type: { 
-          summary: 'Something short', 
-          detail: 'Something really really long' 
-        },
-      },
-      control: {
-        type: null,
-      },
-    },
-  },
   parameters: { 
+    layout: 'centered',
     docs: { 
       page: () => {
         clearStage();
@@ -53,15 +40,6 @@ const Template = (args) => <GoldCoinCom {...args} />;
 
 //👇 Each story then reuses that template
 export const Primary = Template.bind({});
-Primary.parameters = {
-  layout: 'centered',
-  backgrounds: {
-    values: [
-      { name: 'red', value: '#f00' },
-      { name: 'green', value: '#0f0' },
-    ],
-  },
-};
 Primary.args = {
   primary: true,
   label: '金币动效',

src/canvasStories/polygonSystem.stories.tsx

@@ -12,23 +12,10 @@ import { clearStage } from '../common/createStage';
 
 export default {
   component: PolygonSystemCom,
-  title: 'Canvas组件/多变形坐标系统',
+  title: 'Canvas组件/多边形坐标系统',
   //👇 Creates specific argTypes
-  argTypes: {
-    label: {
-      description: 'Overwritten description',
-      table: {
-        type: { 
-          summary: 'Something short', 
-          detail: 'Something really really long' 
-        },
-      },
-      control: {
-        type: null,
-      },
-    },
-  },
   parameters: { 
+    layout: 'centered',
     docs: { 
       page: () => {
         clearStage();
@@ -49,9 +36,6 @@ const Template = (args) => <PolygonSystemCom {...args} />;
 
 //👇 Each story then reuses that template
 export const Primary = Template.bind({});
-Primary.parameters = {
-  layout: 'centered',
-};
 Primary.args = {
   primary: true,
   label: '多变形坐标系统',

src/canvasStories/richText.stories.tsx

@@ -13,21 +13,8 @@ export default {
   component: RichTextCom,
   title: 'Canvas组件/丰富文本',
   //👇 Creates specific argTypes
-  argTypes: {
-    label: {
-      description: 'Overwritten description',
-      table: {
-        type: { 
-          summary: 'Something short', 
-          detail: 'Something really really long' 
-        },
-      },
-      control: {
-        type: null,
-      },
-    },
-  },
   parameters: { 
+    layout: 'centered',
     docs: { 
       page: () => {
         clearStage();
@@ -49,15 +36,6 @@ const Template = (args) => <RichTextCom {...args} />;
 
 //👇 Each story then reuses that template
 export const Primary = Template.bind({});
-Primary.parameters = {
-  layout: 'centered',
-  backgrounds: {
-    values: [
-      { name: 'red', value: '#f00' },
-      { name: 'green', value: '#0f0' },
-    ],
-  },
-};
 Primary.args = {
   primary: true,
   label: '丰富文本',

src/docs/Introduction.stories.mdx

+import { Meta } from '@storybook/addon-docs';
+
+<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/TotaReact.stories.tsx

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

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/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/totalCanvasCom.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('Canvas组件/'+name)();
+}
+const comArrData = [
+    {
+        name:"金币动效",
+        imgUrl:"/resource/test.gif",
+        href:"金币动效"
+    },
+    {
+        name:"轮播组件",
+        imgUrl:"/resource/test.gif",
+        href:"轮播组件"
+    },
+    {
+        name:"多边形坐标系统",
+        imgUrl:"/resource/test.gif",
+        href:"多边形坐标系统"
+    },
+    {
+        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>
+      
+    )
+}
+

src/docs/totalReactCom.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.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>
+      
+    )
+}
+

src/typings/global.ts

@@ -2,3 +2,7 @@ interface Window {
     FYGE: any;
     stage: any;
 }
+declare module "*.md" {
+    const content: string;
+    export default content;
+}
\ No newline at end of file

test/Test.stories.mdx

+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import {linkTo} from '@storybook/addon-links';
+
+<Meta title="Canvas组件概览"  />
+
+# 组件库简介
+<iframe src="/pages/totalCom/indexCanvas.html" frameBorder="0" width = "750" height = "1624" ></iframe>

tsconfig.json

+{
+    "files": [
+        "./typings.d.ts"
+      ]
+}
\ No newline at end of file

typings.d.ts

+declare module "*.md" {
+    const content: string;
+    export default content;
+  }
\ No newline at end of file