fix

.gitignore

 node_modules
 .DS_Store
-dist
+# dist
 dist-ssr
 *.local

dist/assets/index.css

-@keyframes loading-77b4f0f9{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.jupyter_input[data-v-77b4f0f9]{background:#282c34;color:#abb2bf;padding:14px 14px 14px 52px;box-sizing:border-box;position:relative}.jupyter_input .run_btn[data-v-77b4f0f9]{width:32px;height:32px;position:absolute;left:12px;top:12px;cursor:pointer;background:url(./run.svg) center / 24px no-repeat}.jupyter_output[data-v-77b4f0f9]{background:#3a414f;color:#abb2bf;padding:20px 14px 20px 30px;margin:0 14px 0 52px;border-radius:4px;box-sizing:border-box}.jupyter_output .loading[data-v-77b4f0f9]{width:24px;height:24px;margin:0;background:url(./loading.svg) center / cover no-repeat;animation:loading-77b4f0f9 2s linear infinite}.jupyter_output[data-v-77b4f0f9] .jupyter_result{line-height:24px;white-space:pre-wrap;letter-spacing:1px}.jupyter_output[data-v-77b4f0f9] .jupyter_result img,.jupyter_output[data-v-77b4f0f9] .jupyter_result svg{display:block}.jupyter_container[data-v-e437a226]{font-size:14px;background:#282c34}.jupyter_container address,.jupyter_container cite,.jupyter_container dfn,.jupyter_container em,.jupyter_container i,.jupyter_container span[lang],.jupyter_container var{font-style:italic}.jupyter_container{font-family:-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif,SimHei,SimSun;box-sizing:border-box;word-break:break-all}.jupyter_container code{vertical-align:middle;background:rgba(0,0,0,.2);padding:0 6px;line-height:1.6em;box-sizing:border-box}.jupyter_container .marker{background-color:#ff0}.jupyter_container figure{text-align:center;margin:0 14px;display:inline-block}.jupyter_container figure>figcaption{text-align:center;margin:8px;color:#999;font-size:14px;display:block}.jupyter_container a{color:#4ea1db;text-decoration:none}.jupyter_container a>img{padding:1px;margin:1px;border:none;outline:#0782c1 solid 1px}.jupyter_container a:visited{color:#6795b5}.jupyter_container .code-featured{border:5px solid red}.jupyter_container .math-featured{padding:20px;box-shadow:0 0 2px #c80000;background-color:#ff00000d;margin:10px}.jupyter_container .image-clean{border:0;background:0 0;padding:0}.jupyter_container .image-clean>figcaption{font-size:.9em;text-align:right}.jupyter_container .image-grayscale{background-color:#fff;color:#666}.jupyter_container .embed-240p{max-width:426px;max-height:240px;margin:0 auto}.jupyter_container .embed-360p{max-width:640px;max-height:360px;margin:0 auto}.jupyter_container .embed-480p{max-width:854px;max-height:480px;margin:0 auto}.jupyter_container .embed-720p{max-width:1280px;max-height:720px;margin:0 auto}.jupyter_container .embed-1080p{max-width:1920px;max-height:1080px;margin:0 auto}.jupyter_container p{font-size:14px;font-weight:400;line-height:1.6em;overflow-x:auto;overflow-y:hidden}.jupyter_container *{box-sizing:border-box}.jupyter_container ul ol{margin:0 0 14px 12px}.jupyter_container ul li{list-style-type:disc;margin:0 0 0 12px}.jupyter_container ul.code_line_num{background:rgba(0,0,0,.2);padding-left:0}.jupyter_container ol li{list-style-type:decimal;margin-left:40px;margin-top:8px}.jupyter_container h1{font-size:28px;line-height:36px}.jupyter_container h2{font-size:24px;line-height:32px}.jupyter_container h3{font-size:22px;line-height:30px}.jupyter_container h4{font-size:20px;line-height:28px}.jupyter_container h5{font-size:18px;line-height:26px}.jupyter_container h6{font-size:16px;line-height:24px}.jupyter_container blockquote{display:block;padding-left:16px;border-left:8px solid rgba(0,0,0,.2);background:rgba(0,0,0,.2);overflow:auto;overflow-scrolling:touch;word-wrap:normal;word-break:normal}.jupyter_container blockquote p{font-size:14px;line-height:1.6em;font-weight:400}.jupyter_container hr{margin:14px 0;border:none;border-bottom:solid #ccc 1px}.jupyter_container table{border-collapse:collapse;display:table;width:100%;text-align:left;margin-bottom:14px;margin-left:auto;margin-right:auto}.jupyter_container table tr{border:0;border-top:1px solid #ddd;background-color:#fff}.jupyter_container table tr:nth-child(2n){background-color:#f7f7f7}.jupyter_container table tr th{font-weight:700;background-color:#eff3f5}.jupyter_container table tr th p{font-weight:700}.jupyter_container tbody{border:0}.jupyter_container dl{margin:14px}.jupyter_container dl dt{margin:8px;font-weight:700}.jupyter_container dl dt dd{margin:8px}.jupyter_container dl dd{margin:0 0 8px 20px}.jupyter_container .initialism{font-size:90%;text-transform:uppercase}.jupyter_container .jupyter_code pre{white-space:pre-wrap;word-wrap:break-word;margin:0 0 14px;overflow-x:auto;background:inherit;border:none}.jupyter_container .jupyter_code pre code{overflow-x:auto;white-space:pre;word-wrap:normal;border-radius:4px;tab-size:4}.jupyter_container .jupyter_code pre code code.md_hljs{padding:0}.jupyter_container code{border-radius:4px;display:inline-block}.jupyter_container code ol{margin:0;overflow:hidden}.jupyter_container code ol li{list-style-type:none;margin-left:0;margin-top:0;height:22px}.jupyter_container code ol li div.hljs-ln-code{margin-left:8px}.jupyter_container code ol li div.hljs-ln-numbers{width:24px;border-right:1px solid #c5c5c5}.jupyter_container code ol li div.hljs-ln-numbers .hljs-ln-line{word-wrap:normal}.jupyter_container code ol.hundred li div.hljs-ln-numbers{width:30px}.jupyter_container code ol.thousand li div.hljs-ln-numbers{width:36px}.jupyter_container .hot-keyword:visited{color:#3399ea}.jupyter_container .footnote{vertical-align:top;position:relative;top:-4px;font-size:12px}.jupyter_container .MathJax_SVG_Display{text-align:center;margin:24px 0;font-size:18px;font-weight:400;color:#4f4f4f;position:relative;text-indent:0;max-width:none;max-height:none;min-width:0;min-height:0;width:100%}.jupyter_container .prettyprint .pre-numbering{position:absolute;width:48px;background-color:#eef0f4;top:0;left:0;margin:0;padding:8px 0;list-style:none;text-align:right}.jupyter_container .pre-numbering li{padding:0 8px;list-style:none;margin:0}.jupyter_container kbd{padding:2px 8px;border:1px solid rgba(63,63,63,.25);box-shadow:0 1px #3f3f3f40;background-color:#fff;color:#333;border-radius:4px;display:inline-block;margin:0 2px;white-space:nowrap}.jupyter_container .dp-highlighter{font-size:12px;text-align:left;margin:0 0 14px}.jupyter_container .csdn-data-video{width:200px}.jupyter_container .csdn-data-video img{margin:0;display:block;width:200px;height:112px}.jupyter_container .csdn-data-video p{margin-top:10px;margin-bottom:0;font-size:14px}.jupyter_container pre[data-from=code-for-outside]{overflow:hidden}.jupyter_container pre[data-from=code-for-outside] code{overflow-x:auto;overflow-y:hidden}.jupyter_container pre[data-from=code-for-outside] code *{overflow:visible;overflow-wrap:break-word}.jupyter_container pre[data-from=code-for-outside] p code{padding:0}.cke_editable{margin:24px;word-wrap:break-word}.jupyter_container .image-grayscale img,.jupyter_container img.image-grayscale{filter:grayscale(100%)}p[align=center]{text-align:center}.jupyter_container strong,.jupyter_container strong span,.jupyter_container strong em{font-weight:700}.jupyter_container em strong{font-style:italic}.jupyter_container p,.jupyter_container h1,.jupyter_container h2,.jupyter_container h3,.jupyter_container h4,.jupyter_container h5,.jupyter_container h6{color:#abb2bf;border:none;margin:0;font-weight:700}.jupyter_container ol,.jupyter_container ul{padding:0;font-size:14px}.jupyter_container blockquote ol,.jupyter_container blockquote ul{margin-bottom:14px;padding:0;font-size:14px;line-height:24px}.jupyter_container blockquote ol li,.jupyter_container blockquote ul li{margin-bottom:0}.jupyter_container table tr td,.jupyter_container table tr th{border:1px solid #ddd;font-size:14px;color:#4f4f4f;line-height:22px;padding:8px;text-align:left}.jupyter_container table tr td p,.jupyter_container table tr th p{font-size:14px;color:#4f4f4f;margin:0;padding:0;text-align:left;line-height:22px}.jupyter_container table tr td code,.jupyter_container table tr th code{white-space:normal;word-break:break-word}.jupyter_container abbr[data-original-title],.jupyter_container abbr[title]{cursor:help;border-bottom:1px dotted #999}.marker{background-color:#ff0}.jupyter_container pre{overflow:hidden}.jupyter_container pre code{overflow-y:hidden}.jupyter_container kbd,.jupyter_container pre,.jupyter_container samp{font-family:Consolas,Inconsolata,Courier,monospace;font-size:14px;line-height:22px}.jupyter_container code ol li div.hljs-ln-code,.jupyter_container code ol li div.hljs-ln-numbers,.jupyter_container pre code,.jupyter_container pre code div,.jupyter_container pre code span{font-family:"Source Code Pro","DejaVu Sans Mono","Ubuntu Mono","Anonymous Pro","Droid Sans Mono",Menlo,Monaco,Consolas,Inconsolata,Courier,monospace,"PingFang SC","Microsoft YaHei",sans-serif}.jupyter_container a:focus,.jupyter_container a:hover{color:#ca0c16}.jupyter_container .flow-chart,.jupyter_container .sequence-diagram{text-align:center;margin-bottom:14px;font-size:14px!important}.jupyter_container .flow-chart [fill="#000"],.jupyter_container .flow-chart [fill="#000000"],.jupyter_container .flow-chart [fill=black],.jupyter_container .sequence-diagram [fill="#000"],.jupyter_container .sequence-diagram [fill="#000000"],.jupyter_container .sequence-diagram [fill=black]{fill:#4f4f4f}.jupyter_container .flow-chart [stroke="#000000"],.jupyter_container .sequence-diagram [stroke="#000000"]{stroke:#4f4f4f}.jupyter_container pre code,.jupyter_container pre code div,.jupyter_container pre code span{font-size:14px}.jupyter_container .prettyprint,.jupyter_container pre.prettyprint{margin:0 0 14px;padding:8px 16px 4px 56px;background-color:#f6f8fa;border:none}.jupyter_container code ol li div.hljs-ln-code,.jupyter_container code ol li div.hljs-ln-numbers{float:left;height:22px}.jupyter_container pre code .hljs-comment{color:green}pre code.hljs{display:block;overflow-x:auto;padding:0;margin:0}code.hljs{padding:0}.hljs{color:#abb2bf;background:transparent}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}*{padding:0;margin:0}img{margin:0}.jupyter_container pre{white-space:pre-wrap;word-wrap:break-word;overflow-x:auto;margin:0;padding:0}.jupyter_container pre code{overflow-x:auto;white-space:pre;word-wrap:normal;tab-size:2;box-sizing:border-box;margin:0}.jupyter_container pre code ul{list-style:decimal;margin:0 0 0 28px;padding:0}.jupyter_container pre code ul li{list-style:decimal;padding:2px 12px;margin:0;line-height:14px;width:100%;box-sizing:border-box}.jupyter_container pre code ul li:first-child{padding-top:6px}.jupyter_container pre code ul li:last-child{padding-bottom:6px}.jupyter_container pre code ul li::marker{content:counter(list-item) " ";color:gray}
+@keyframes loading-a390f1c2{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.jupyter_input[data-v-a390f1c2]{background:#282c34;color:#abb2bf;padding:14px 14px 14px 52px;box-sizing:border-box;position:relative}.jupyter_input .run_btn[data-v-a390f1c2],.jupyter_input .stop_btn[data-v-a390f1c2]{width:32px;height:32px;position:absolute;left:12px;top:12px}.jupyter_input .run_btn[data-v-a390f1c2]{cursor:pointer;background:url(./run.svg) center / 24px no-repeat}.jupyter_input .stop_btn[data-v-a390f1c2]{background:url(./stop.svg) center / 30px no-repeat}.jupyter_output[data-v-a390f1c2]{background:#3a414f;color:#abb2bf;padding:20px 14px 20px 30px;margin:0 14px 0 52px;border-radius:4px;box-sizing:border-box}.jupyter_output .loading[data-v-a390f1c2]{width:24px;height:24px;margin:0;background:url(./loading.svg) center / cover no-repeat;animation:loading-a390f1c2 2s linear infinite}.jupyter_output[data-v-a390f1c2] .jupyter_result{white-space:pre-wrap;letter-spacing:1px}.jupyter_output[data-v-a390f1c2] .jupyter_result img,.jupyter_output[data-v-a390f1c2] .jupyter_result svg{display:block}.jupyter_container[data-v-e437a226]{font-size:14px;background:#282c34}.jupyter_container address,.jupyter_container cite,.jupyter_container dfn,.jupyter_container em,.jupyter_container i,.jupyter_container span[lang],.jupyter_container var{font-style:italic}.jupyter_container{font-family:-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif,SimHei,SimSun;box-sizing:border-box;word-break:break-all}.jupyter_container code{vertical-align:middle;background:rgba(0,0,0,.2);padding:0 6px;line-height:1.6em;box-sizing:border-box}.jupyter_container .marker{background-color:#ff0}.jupyter_container figure{text-align:center;margin:0 14px;display:inline-block}.jupyter_container figure>figcaption{text-align:center;margin:8px;color:#999;font-size:14px;display:block}.jupyter_container a{color:#4ea1db;text-decoration:none}.jupyter_container a>img{padding:1px;margin:1px;border:none;outline:#0782c1 solid 1px}.jupyter_container a:visited{color:#6795b5}.jupyter_container .code-featured{border:5px solid red}.jupyter_container .math-featured{padding:20px;box-shadow:0 0 2px #c80000;background-color:#ff00000d;margin:10px}.jupyter_container .image-clean{border:0;background:0 0;padding:0}.jupyter_container .image-clean>figcaption{font-size:.9em;text-align:right}.jupyter_container .image-grayscale{background-color:#fff;color:#666}.jupyter_container .embed-240p{max-width:426px;max-height:240px;margin:0 auto}.jupyter_container .embed-360p{max-width:640px;max-height:360px;margin:0 auto}.jupyter_container .embed-480p{max-width:854px;max-height:480px;margin:0 auto}.jupyter_container .embed-720p{max-width:1280px;max-height:720px;margin:0 auto}.jupyter_container .embed-1080p{max-width:1920px;max-height:1080px;margin:0 auto}.jupyter_container p{font-size:14px;font-weight:400;line-height:1.6em;overflow-x:auto;overflow-y:hidden}.jupyter_container *{box-sizing:border-box}.jupyter_container ul ol{margin:0 0 14px 12px}.jupyter_container ul li{list-style-type:disc;margin:0 0 0 12px}.jupyter_container ul.code_line_num{background:rgba(0,0,0,.2);padding-left:0}.jupyter_container ol li{list-style-type:decimal;margin-left:40px;margin-top:8px}.jupyter_container h1{font-size:28px;line-height:36px}.jupyter_container h2{font-size:24px;line-height:32px}.jupyter_container h3{font-size:22px;line-height:30px}.jupyter_container h4{font-size:20px;line-height:28px}.jupyter_container h5{font-size:18px;line-height:26px}.jupyter_container h6{font-size:16px;line-height:24px}.jupyter_container blockquote{display:block;padding-left:16px;border-left:8px solid rgba(0,0,0,.2);background:rgba(0,0,0,.2);overflow:auto;overflow-scrolling:touch;word-wrap:normal;word-break:normal}.jupyter_container blockquote p{font-size:14px;line-height:1.6em;font-weight:400}.jupyter_container hr{margin:14px 0;border:none;border-bottom:solid #ccc 1px}.jupyter_container table{border-collapse:collapse;display:table;width:100%;text-align:left;margin-bottom:14px;margin-left:auto;margin-right:auto}.jupyter_container table tr{border:0;border-top:1px solid #ddd;background-color:#fff}.jupyter_container table tr:nth-child(2n){background-color:#f7f7f7}.jupyter_container table tr th{font-weight:700;background-color:#eff3f5}.jupyter_container table tr th p{font-weight:700}.jupyter_container tbody{border:0}.jupyter_container dl{margin:14px}.jupyter_container dl dt{margin:8px;font-weight:700}.jupyter_container dl dt dd{margin:8px}.jupyter_container dl dd{margin:0 0 8px 20px}.jupyter_container .initialism{font-size:90%;text-transform:uppercase}.jupyter_container .jupyter_code pre{white-space:pre-wrap;word-wrap:break-word;margin:0 0 14px;overflow-x:auto;background:inherit;border:none}.jupyter_container .jupyter_code pre code{overflow-x:auto;white-space:pre;word-wrap:normal;border-radius:4px;tab-size:4}.jupyter_container .jupyter_code pre code code.md_hljs{padding:0}.jupyter_container code{border-radius:4px;display:inline-block}.jupyter_container code ol{margin:0;overflow:hidden}.jupyter_container code ol li{list-style-type:none;margin-left:0;margin-top:0;height:22px}.jupyter_container code ol li div.hljs-ln-code{margin-left:8px}.jupyter_container code ol li div.hljs-ln-numbers{width:24px;border-right:1px solid #c5c5c5}.jupyter_container code ol li div.hljs-ln-numbers .hljs-ln-line{word-wrap:normal}.jupyter_container code ol.hundred li div.hljs-ln-numbers{width:30px}.jupyter_container code ol.thousand li div.hljs-ln-numbers{width:36px}.jupyter_container .hot-keyword:visited{color:#3399ea}.jupyter_container .footnote{vertical-align:top;position:relative;top:-4px;font-size:12px}.jupyter_container .MathJax_SVG_Display{text-align:center;margin:24px 0;font-size:18px;font-weight:400;color:#4f4f4f;position:relative;text-indent:0;max-width:none;max-height:none;min-width:0;min-height:0;width:100%}.jupyter_container .prettyprint .pre-numbering{position:absolute;width:48px;background-color:#eef0f4;top:0;left:0;margin:0;padding:8px 0;list-style:none;text-align:right}.jupyter_container .pre-numbering li{padding:0 8px;list-style:none;margin:0}.jupyter_container kbd{padding:2px 8px;border:1px solid rgba(63,63,63,.25);box-shadow:0 1px #3f3f3f40;background-color:#fff;color:#333;border-radius:4px;display:inline-block;margin:0 2px;white-space:nowrap}.jupyter_container .dp-highlighter{font-size:12px;text-align:left;margin:0 0 14px}.jupyter_container .csdn-data-video{width:200px}.jupyter_container .csdn-data-video img{margin:0;display:block;width:200px;height:112px}.jupyter_container .csdn-data-video p{margin-top:10px;margin-bottom:0;font-size:14px}.jupyter_container pre[data-from=code-for-outside]{overflow:hidden}.jupyter_container pre[data-from=code-for-outside] code{overflow-x:auto;overflow-y:hidden}.jupyter_container pre[data-from=code-for-outside] code *{overflow:visible;overflow-wrap:break-word}.jupyter_container pre[data-from=code-for-outside] p code{padding:0}.cke_editable{margin:24px;word-wrap:break-word}.jupyter_container .image-grayscale img,.jupyter_container img.image-grayscale{filter:grayscale(100%)}p[align=center]{text-align:center}.jupyter_container strong,.jupyter_container strong span,.jupyter_container strong em{font-weight:700}.jupyter_container em strong{font-style:italic}.jupyter_container p,.jupyter_container h1,.jupyter_container h2,.jupyter_container h3,.jupyter_container h4,.jupyter_container h5,.jupyter_container h6{color:#abb2bf;border:none;margin:0;font-weight:700}.jupyter_container ol,.jupyter_container ul{padding:0;font-size:14px}.jupyter_container blockquote ol,.jupyter_container blockquote ul{margin-bottom:14px;padding:0;font-size:14px;line-height:24px}.jupyter_container blockquote ol li,.jupyter_container blockquote ul li{margin-bottom:0}.jupyter_container table tr td,.jupyter_container table tr th{border:1px solid #ddd;font-size:14px;color:#4f4f4f;line-height:22px;padding:8px;text-align:left}.jupyter_container table tr td p,.jupyter_container table tr th p{font-size:14px;color:#4f4f4f;margin:0;padding:0;text-align:left;line-height:22px}.jupyter_container table tr td code,.jupyter_container table tr th code{white-space:normal;word-break:break-word}.jupyter_container abbr[data-original-title],.jupyter_container abbr[title]{cursor:help;border-bottom:1px dotted #999}.marker{background-color:#ff0}.jupyter_container pre{overflow:hidden}.jupyter_container pre code{overflow-y:hidden}.jupyter_container kbd,.jupyter_container pre,.jupyter_container samp{font-family:Consolas,Inconsolata,Courier,monospace;font-size:14px;line-height:22px}.jupyter_container code ol li div.hljs-ln-code,.jupyter_container code ol li div.hljs-ln-numbers,.jupyter_container pre code,.jupyter_container pre code div,.jupyter_container pre code span{font-family:"Source Code Pro","DejaVu Sans Mono","Ubuntu Mono","Anonymous Pro","Droid Sans Mono",Menlo,Monaco,Consolas,Inconsolata,Courier,monospace,"PingFang SC","Microsoft YaHei",sans-serif}.jupyter_container a:focus,.jupyter_container a:hover{color:#ca0c16}.jupyter_container .flow-chart,.jupyter_container .sequence-diagram{text-align:center;margin-bottom:14px;font-size:14px!important}.jupyter_container .flow-chart [fill="#000"],.jupyter_container .flow-chart [fill="#000000"],.jupyter_container .flow-chart [fill=black],.jupyter_container .sequence-diagram [fill="#000"],.jupyter_container .sequence-diagram [fill="#000000"],.jupyter_container .sequence-diagram [fill=black]{fill:#4f4f4f}.jupyter_container .flow-chart [stroke="#000000"],.jupyter_container .sequence-diagram [stroke="#000000"]{stroke:#4f4f4f}.jupyter_container pre code,.jupyter_container pre code div,.jupyter_container pre code span{font-size:14px}.jupyter_container .prettyprint,.jupyter_container pre.prettyprint{margin:0 0 14px;padding:8px 16px 4px 56px;background-color:#f6f8fa;border:none}.jupyter_container code ol li div.hljs-ln-code,.jupyter_container code ol li div.hljs-ln-numbers{float:left;height:22px}.jupyter_container pre code .hljs-comment{color:green}pre code.hljs{display:block;overflow-x:auto;padding:0;margin:0}code.hljs{padding:0}.hljs{color:#abb2bf;background:transparent}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}*{padding:0;margin:0}img{margin:0}.jupyter_container pre{white-space:pre-wrap;word-wrap:break-word;overflow-x:auto;margin:0;padding:0}.jupyter_container pre code{overflow-x:auto;white-space:pre;word-wrap:normal;tab-size:2;box-sizing:border-box;margin:0}.jupyter_container pre code ul{list-style:decimal;margin:0 0 0 28px;padding:0}.jupyter_container pre code ul li{list-style:decimal;padding:2px 12px;margin:0;line-height:14px;width:100%;box-sizing:border-box}.jupyter_container pre code ul li:first-child{padding-top:6px}.jupyter_container pre code ul li:last-child{padding-bottom:6px}.jupyter_container pre code ul li::marker{content:counter(list-item) " ";color:gray}

dist/assets/index.js

-import{d as e,l as t,m as n,p as r,a as s,c as o,b as l,e as i,f as a,w as u,T as c,o as d,_ as p,r as h,F as f,g,h as m,i as v}from"./vendor.js";!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))t(e);new MutationObserver((e=>{for(const n of e)if("childList"===n.type)for(const e of n.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&t(e)})).observe(document,{childList:!0,subtree:!0})}function t(e){if(e.ep)return;e.ep=!0;const t=function(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?t.credentials="include":"anonymous"===e.crossorigin?t.credentials="omit":t.credentials="same-origin",t}(e);fetch(e.href,t)}}();var y=e({name:"HelloWorld",props:{info:{type:Object,default:{cell_type:"",source:[],outputs:[]}}},computed:{input(){const e=this.info,n=(e.input?e.input.join(""):"")+(e.source?e.source.join(""):"");switch(e.cell_type){case"heading":const r=e.level;return`<h${r}>${n}</h${r}>`;case"markdown":return this.marked(n);case"code":return`<code class="hljs">${this.generateCodeLineNum(n?t.highlightAuto(n).value:"")}</code>`;default:return n}},output(){var e;const n=null==(e=this.info.outputs)?void 0:e.map((e=>(e.text?e.text.join(""):"")+(e.png?`<img src="data:image/png;base64,${e.png}" />`:"")+(e.svg?e.svg.join(""):""))).join("");return n?/[img|svg]/.test(n)?n:t.highlightAuto(n).value:""}},data:()=>({showResult:!1,loading:!0}),methods:{run(){this.loading=!0,this.showResult=!0,setTimeout((()=>{this.loading=!1}),1e3)},marked(e){if(!e)return"";n.setOptions({breaks:!1,gfm:!0,langPrefix:"hljs language-",highlight:e=>this.generateCodeLineNum(t.highlightAuto(e).value)});return n(e)},generateCodeLineNum:e=>e?`<ul class="code_line_num"><li>${e.replace(/\n/g,"\n</li><li>")}\n</li></ul>`:""}});r("data-v-77b4f0f9");const j={class:"jupyter_input"},_={class:"jupyter_code"},b=["innerHTML"],k={key:0,class:"jupyter_output"},L={key:0,class:"loading"},C=["innerHTML"];s(),y.render=function(e,t,n,r,s,p){return d(),o("div",null,[l("div",j,[e.output?(d(),o("div",{key:0,class:"run_btn",onClick:t[0]||(t[0]=(...t)=>e.run&&e.run(...t))})):i("",!0),l("div",_,[l("pre",null,[l("p",{innerHTML:e.input},null,8,b)])])]),a(c,{name:"fade"},{default:u((()=>[e.showResult?(d(),o("div",k,[e.loading?(d(),o("div",L)):(d(),o("div",{key:1,class:"jupyter_result",innerHTML:e.output},null,8,C))])):i("",!0)])),_:1})])},y.__scopeId="data-v-77b4f0f9";var $=(e,t)=>p.get(e,{params:t}),w=e({name:"App",props:{url:{type:String,default:""}},components:{Cell:y},data:()=>({cells:[]}),created(){this.fetchCells()},methods:{fetchCells(){const e=this.url;if(!e)return;const{groups:t}=/(?<prex>^https?:\/\/\S+.net)\/(?<project_path>\S*)\/\-\/blob\/(?<branch>\S+)\/(?<path>\S*)/.exec(e),n=`${t.prex}/api/v4/projects/${encodeURIComponent(t.project_path)}/repository/files/${t.path}/raw?ref=${t.branch}`;$(n).then((({data:e})=>{this.cells=this.getCells(e)}))},getCells(e){var t;const n=[];return e.cells&&n.push(...e.cells),null==(t=e.worksheets)||t.forEach((e=>{n.push(...e.cells)})),console.log(n),n}}});r("data-v-e437a226");const A={class:"jupyter_container"};s(),w.render=function(e,t,n,r,s,l){const i=h("Cell");return d(),o("div",A,[(d(!0),o(f,null,g(e.cells,(e=>(d(),m(i,{key:e.id,info:e},null,8,["info"])))),128))])},w.__scopeId="data-v-e437a226";console.log("render jupyter");const S=Array.from(document.querySelectorAll("a"));S.length&&S.forEach((e=>{var t;const n=e.innerHTML;if(!n.includes(".ipynb"))return;const r=document.createElement("div");null==(t=e.parentElement)||t.insertBefore(r,e),v(w,{url:n}).mount(r)}));
+import{d as e,l as t,m as n,p as s,a as r,c as o,b as l,e as i,f as a,w as u,T as c,o as d,_ as p,r as h,F as g,g as f,h as m,i as v}from"./vendor.js";!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))t(e);new MutationObserver((e=>{for(const n of e)if("childList"===n.type)for(const e of n.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&t(e)})).observe(document,{childList:!0,subtree:!0})}function t(e){if(e.ep)return;e.ep=!0;const t=function(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?t.credentials="include":"anonymous"===e.crossorigin?t.credentials="omit":t.credentials="same-origin",t}(e);fetch(e.href,t)}}();var y=e({name:"HelloWorld",props:{info:{type:Object,default:{cell_type:"",source:[],outputs:[]}}},computed:{input(){const e=this.info,n=(e.input?e.input.join(""):"")+(e.source?e.source.join(""):"");switch(e.cell_type){case"heading":const s=e.level;return`<h${s}>${n}</h${s}>`;case"markdown":return this.marked(n);case"code":return`<code class="hljs">${this.generateCodeLineNum(n?t.highlightAuto(n).value:"")}</code>`;default:return n}},output(){var e;const n=null==(e=this.info.outputs)?void 0:e.map((e=>(e.text?e.text.join(""):"")+(e.png?`<img src="data:image/png;base64,${e.png}" />`:"")+(e.svg?e.svg.join(""):""))).join("");return n?/[img|svg]/.test(n)?n:t.highlightAuto(n).value:""}},data:()=>({showResult:!1,loading:!1}),methods:{run(){this.loading=!0,this.showResult=!0,setTimeout((()=>{this.loading=!1}),1e3)},marked(e){if(!e)return"";n.setOptions({breaks:!1,gfm:!0,langPrefix:"hljs language-",highlight:e=>this.generateCodeLineNum(t.highlightAuto(e).value)});return n(e)},generateCodeLineNum:e=>e?`<ul class="code_line_num"><li>${e.replace(/\n/g,"\n</li><li>")}\n</li></ul>`:""}});s("data-v-a390f1c2");const _={class:"jupyter_input"},j={key:1,class:"stop_btn"},b={class:"jupyter_code"},k=["innerHTML"],L={key:0,class:"jupyter_output"},C={key:0,class:"loading"},$=["innerHTML"];r(),y.render=function(e,t,n,s,r,p){return d(),o("div",null,[l("div",_,[e.output&&!e.loading?(d(),o("div",{key:0,class:"run_btn",onClick:t[0]||(t[0]=(...t)=>e.run&&e.run(...t))})):i("",!0),e.output&&e.loading?(d(),o("div",j)):i("",!0),l("div",b,[l("pre",null,[l("p",{innerHTML:e.input},null,8,k)])])]),a(c,{name:"fade"},{default:u((()=>[e.showResult?(d(),o("div",L,[e.loading?(d(),o("div",C)):(d(),o("div",{key:1,class:"jupyter_result",innerHTML:e.output},null,8,$))])):i("",!0)])),_:1})])},y.__scopeId="data-v-a390f1c2";var w=(e,t)=>p.get(e,{params:t}),A=e({name:"App",props:{url:{type:String,default:""}},components:{Cell:y},data:()=>({cells:[]}),created(){this.fetchCells()},methods:{fetchCells(){const e=this.url;if(!e)return;const{groups:t}=/(?<prex>^https?:\/\/\S+.net)\/(?<project_path>\S*)\/\-\/blob\/(?<branch>\S+)\/(?<path>\S*)/.exec(e),n=`${t.prex}/api/v4/projects/${encodeURIComponent(t.project_path)}/repository/files/${t.path}/raw?ref=${t.branch}`;w(n).then((({data:e})=>{this.cells=this.getCells(e)}))},getCells(e){var t;const n=[];return e.cells&&n.push(...e.cells),null==(t=e.worksheets)||t.forEach((e=>{n.push(...e.cells)})),console.log(n),n}}});s("data-v-e437a226");const S={class:"jupyter_container"};r(),A.render=function(e,t,n,s,r,l){const i=h("Cell");return d(),o("div",S,[(d(!0),o(g,null,f(e.cells,(e=>(d(),m(i,{key:e.id,info:e},null,8,["info"])))),128))])},A.__scopeId="data-v-e437a226";console.log("render jupyter");const T=Array.from(document.querySelectorAll("a"));T.length&&T.forEach((e=>{var t;const n=e.innerHTML;if(!n.includes(".ipynb"))return;const s=document.createElement("div");null==(t=e.parentElement)||t.insertBefore(s,e),e.style.display="none",v(A,{url:n}).mount(s)}));

dist/assets/stop.svg

+<svg t="1631789535144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2883" width="200" height="200"><path d="M518.86 921.21c-224.81 0-407.71-182.9-407.71-407.71S294 105.79 518.86 105.79s407.71 182.9 407.71 407.71-182.9 407.71-407.71 407.71z m0-754c-190.94 0-346.28 155.34-346.28 346.29s155.33 346.29 346.28 346.29S865.14 704.45 865.14 513.5 709.8 167.22 518.86 167.22z" p-id="2884" fill="#409eff"></path><path d="M392.17 386.81h253.38v253.38H392.17z" p-id="2885" fill="#409eff"></path></svg>
\ No newline at end of file

src/assets/img/close.svg

+<svg t="1631847023347" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3498" width="200" height="200"><path d="M511.98711 73.139605a438.834339 438.834339 0 0 1 310.84099 749.675329 438.834339 438.834339 0 1 1-621.68198-621.68198 436.091625 436.091625 0 0 1 310.84099-127.993349m0-73.139056a511.973396 511.973396 0 1 0 362.03833 149.935065A510.144919 510.144919 0 0 0 511.98711 0.000549z" p-id="3499" fill="#409eff"></path><path d="M318.016685 654.193814m18.100993-18.100993l299.959313-299.959313q18.100993-18.100993 36.201986 0l15.515137 15.515137q18.100993 18.100993 0 36.201986l-299.959313 299.959313q-18.100993 18.100993-36.201986 0l-15.515137-15.515137q-18.100993-18.100993 0-36.201986Z" p-id="3500" fill="#409eff"></path><path d="M318.016685 369.749638m18.100993-18.100993l15.515137-15.515137q18.100993-18.100993 36.201986 0l299.959313 299.959313q18.100993 18.100993 0 36.201986l-15.515137 15.515137q-18.100993 18.100993-36.201986 0l-299.959313-299.959313q-18.100993-18.100993 0-36.201986Z" p-id="3501" fill="#409eff"></path></svg>
\ No newline at end of file

src/components/cell.vue

@@ -10,7 +10,10 @@
     <transition name="fade">
       <div v-if="showResult" class="jupyter_output">
         <div class="loading" v-if="loading"></div>
-        <div class="jupyter_result" v-else v-html="output"></div>
+        <template v-else>
+          <div class="close_btn" @click="showResult = false"></div>
+          <div class="jupyter_result" v-html="output"></div>
+        </template>
       </div>
     </transition>
   </div>
@@ -75,16 +78,25 @@ export default defineComponent({
   data() {
     return {
       showResult: false,
-      loading: false
+      loading: false,
+      timeObj: "" as any
     };
   },
+
   methods: {
     run() {
       this.loading = true;
       this.showResult = true;
-      setTimeout(() => {
+      const time = this.loadTime();
+      this.timeObj = setTimeout(() => {
         this.loading = false;
-      }, 1000);
+        clearTimeout(this.timeObj);
+      }, time);
+    },
+    loadTime() {
+      const min = 500;
+      const max = 2000;
+      return Math.floor(Math.random() * (max - min) + min);
     },
     marked(content: string) {
       if (!content) return "";
@@ -121,6 +133,15 @@ export default defineComponent({
   }
 }
 
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 .jupyter_input {
   background: #282c34;
   color: #abb2bf;
@@ -152,6 +173,7 @@ export default defineComponent({
   margin: 0 14px 0 52px;
   border-radius: 4px;
   box-sizing: border-box;
+  position: relative;
   .loading {
     width: 24px;
     height: 24px;
@@ -159,9 +181,19 @@ export default defineComponent({
     background: url("../assets/img/loading.svg") center / cover no-repeat;
     animation: loading 2s linear infinite;
   }
+  .close_btn {
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    left: -40px;
+    top: 16px;
+    cursor: pointer;
+    background: url("../assets/img/close.svg") center / 24px no-repeat;
+  }
   :deep(.jupyter_result) {
     white-space: pre-wrap;
     letter-spacing: 1px;
+    line-height: 24px;
     img,
     svg {
       display: block;