fix

index.html

@@ -18,8 +18,9 @@
     <div class="app"></div> -->
     <a
       data-type="jupyter"
-      data-url="http://test-code.csdn.net/cpongo6/ipynb-test/-/blob/master/Cell%20Magics.ipynb"
-      >http://test-code.csdn.net/cpongo6/ipynb-test/-/blob/master/Cell%20Magics.ipynb</a
+      class="jupyterEl"
+      href="https://codechina.csdn.net/xiongjiamu/jupyter-101/-/blob/master/002-demo.ipynb"
+      >https://codechina.csdn.net/xiongjiamu/jupyter-101/-/blob/master/002-demo.ipynb</a
     >
     <!-- <div
       data-type="jupyter"

src/App.vue

 <template>
-  <div>
-    <div class="jupyter_container">
+  <div :class="['relative', { fullScreen }]">
+    <div :class="['jupyter_container', { fullScreen }]">
       <Cell v-for="item in cells" :key="item.id" :info="item" />
     </div>
+    <button @click="fullScreen = false" v-if="fullScreen" class="copyButton">
+      退出全屏
+    </button>
+    <button @click="fullScreen = true" v-else class="copyButton">
+      全屏显示
+    </button>
     <a :href="linkHref" target="_blank" v-if="cells.length" class="link">
       点击这里去<span>notebook</span>中调试该代码
     </a>
@@ -13,7 +19,8 @@
 import { defineComponent } from "vue";
 import { CellObject } from "./assets/js/interface";
 import Cell from "./components/cell.vue";
-import api from "./api/index";
+import axios from "axios";
+// import api from "./api/index";
 
 export default defineComponent({
   name: "App",
@@ -26,7 +33,8 @@ export default defineComponent({
   components: { Cell },
   data() {
     return {
-      cells: [] as any[]
+      cells: [] as any[],
+      fullScreen: false
     };
   },
   created() {
@@ -50,8 +58,10 @@ export default defineComponent({
       const fetchUrl = `${urlInfo.prex}/api/v4/projects/${encodeURIComponent(
         urlInfo.project_path
       )}/repository/files/${urlInfo.path}/raw?ref=${urlInfo.branch}`;
-      api.fetchCells(fetchUrl).then(({ data: res }) => {
+      axios.get(fetchUrl).then(({ data: res }) => {
         this.cells = this.getCells(res);
+        console.log(111, res);
+        console.log(222, this.cells);
       });
     },
     getCells(obj: CellObject) {
@@ -62,7 +72,7 @@ export default defineComponent({
       obj.worksheets?.forEach((item: CellObject) => {
         list.push(...item.cells);
       });
-      console.log(list);
+      console.log(3333, list);
       return list;
     }
   }
@@ -70,13 +80,52 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
+.relative {
+  &:hover {
+    .copyButton {
+      display: block;
+    }
+  }
+  &.fullScreen {
+    .jupyter_container {
+      position: fixed;
+      width: 100vw;
+      height: 100vh;
+      top: 0;
+      left: 0;
+      z-index: 9999999;
+      margin: 0;
+      max-height: unset;
+    }
+    .copyButton {
+      position: fixed;
+      right: 20px;
+      z-index: 9999999;
+    }
+  }
+  .copyButton {
+    display: none;
+    outline: none;
+    border: 1px solid rgba(0, 0, 0, 0.07);
+    position: absolute;
+    border-radius: 2px;
+    color: #000;
+    top: 4px;
+    right: 20px;
+    padding: 2px 8px;
+    margin: 8px;
+    cursor: pointer;
+  }
+}
 .jupyter_container {
   font-size: 14px;
   max-height: 320px;
   overflow-y: auto;
   background: #282c34;
   margin: 14px 0;
+  position: relative;
 }
+
 .link {
   cursor: pointer;
   text-decoration: none;

src/assets/css/style.less

@@ -11,6 +11,10 @@ img {
   margin: 0;
 }
 
+.relative {
+  position: relative;
+}
+
 .jupyter_container {
   pre {
     // border-left: 1px solid @color-blue;

src/main.ts

@@ -2,24 +2,22 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './assets/css/style.less';
 
-// document.addEventListener('DOMContentLoaded', () => {
-console.log('render jupyter')
-const jupyterLinks = Array.from(document.querySelectorAll('a'))
+document.addEventListener('DOMContentLoaded', () => {
+  const jupyterLinks = Array.from(document.querySelectorAll('a'))
 
-function insertAfter(newNode: HTMLElement, referenceNode: HTMLElement) {
-  (referenceNode as any).parentNode.insertBefore(newNode, referenceNode.nextSibling);
-}
-
-if (jupyterLinks.length) {
-  jupyterLinks.forEach(item => {
-    const url = item.innerHTML
-    if (!url.includes('.ipynb')) return
-    const targetEL = document.createElement('div')
-    insertAfter(targetEL, item)
-    // item.style.display = 'none'
-    createApp(App, {
-      url
-    }).mount(targetEL)
-  })
-};
-// })
+  function insertAfter(newNode: HTMLElement, referenceNode: HTMLElement) {
+    (referenceNode as any).parentNode.insertBefore(newNode, referenceNode.nextSibling);
+  }
+  if (jupyterLinks.length) {
+    jupyterLinks.forEach(item => {
+      const url = item.href
+      if (!url?.includes('.ipynb') || !item.className.includes('jupyterEl')) return
+      const targetEL = document.createElement('div')
+      insertAfter(targetEL, item)
+      
+      createApp(App, {
+        url
+      }).mount(targetEL)
+    })
+  };
+})