fix

.gitignore

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

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;