From 62b6b7877c28170ccb3ed5f069342a0608057663 Mon Sep 17 00:00:00 2001
From: camera-2018 <2907618001@qq.com>
Date: Tue, 25 Apr 2023 00:50:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=99notebook=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=8A=A0=E4=BA=86=E6=8F=90=E7=A4=BA=20=E4=BD=86=E6=98=AF?=
 =?UTF-8?q?=E4=BE=9D=E6=89=98=E7=AD=94=E8=BE=A9=20=E6=88=91=E4=B8=8D?=
 =?UTF-8?q?=E7=9F=A5=E9=81=93=E8=83=BD=E4=B8=8D=E8=83=BD=E8=B7=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vitepress/config.js                 |  4 ++
 .vitepress/theme/style.css           |  2 +-
 components/RenderJupyterNotebook.vue | 57 +++++++++++++++++++++-------
 3 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/.vitepress/config.js b/.vitepress/config.js
index d256b00..140610e 100644
--- a/.vitepress/config.js
+++ b/.vitepress/config.js
@@ -520,6 +520,10 @@ export default defineConfig({
       {
         text: '贡献指南',
         link: '/CONTRIBUTING'
+      },
+      {
+        text: 'notebook测试',
+        link: '/notebook'
       }
     ],
     socialLinks: [
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index de2ebd3..6f6ae1d 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -7,7 +7,7 @@
  * Colors
  * -------------------------------------------------------------------------- */
 
-.dark .vp-doc a, .dark .vp-doc a>code, .dark .VPNavBarMenuLink.VPNavBarMenuLink:hover, .dark .VPNavBarMenuLink.VPNavBarMenuLink.active, .dark .link.link:hover, .dark .link.link.active, .dark .edit-link-button.edit-link-button, .dark .pager-link .title {
+.dark .vp-doc a,#loading, .dark .vp-doc a>code, .dark .VPNavBarMenuLink.VPNavBarMenuLink:hover, .dark .VPNavBarMenuLink.VPNavBarMenuLink.active, .dark .link.link:hover, .dark .link.link.active, .dark .edit-link-button.edit-link-button, .dark .pager-link .title {
   color: var(--vp-c-brand-lighter);
 }
 
diff --git a/components/RenderJupyterNotebook.vue b/components/RenderJupyterNotebook.vue
index 88b153c..5ee7d36 100644
--- a/components/RenderJupyterNotebook.vue
+++ b/components/RenderJupyterNotebook.vue
@@ -1,19 +1,48 @@
 <template>
-  <div ref="NotebookFragment" class="notebook-fragment" />
+  <div ref="NotebookFragment" class="notebook-fragment">
+    <div ref="loading" id="loading">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
+          <path stroke-dasharray="2 4" stroke-dashoffset="6"
+            d="M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3">
+            <animate attributeName="stroke-dashoffset" dur="0.6s" repeatCount="indefinite" values="6;0" />
+          </path>
+          <path stroke-dasharray="30" stroke-dashoffset="30"
+            d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21">
+            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.1s" dur="0.3s" values="30;0" />
+          </path>
+          <path stroke-dasharray="10" stroke-dashoffset="10" d="M12 16v-7.5">
+            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.5s" dur="0.2s" values="10;0" />
+          </path>
+          <path stroke-dasharray="6" stroke-dashoffset="6" d="M12 8.5l3.5 3.5M12 8.5l-3.5 3.5">
+            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.2s" values="6;0" />
+          </path>
+        </g>
+      </svg>
+      本页面包含 Jupyter NoteBook , 正在渲染中... ...
+    </div>
+  </div>
 </template>
 
-<script>
+<script setup>
 import { Notebook } from "../utils/index";
-
-export default {
-  name: "RenderJupyterNotebook",
-  props: {
-    notebook: { required: true, type: Object },
-  },
-  async mounted() {
-    const notebook = new Notebook(this.notebook, false);
-    const fragment = await notebook.render();
-    this.$refs.NotebookFragment.appendChild(fragment);
-  },
-};
+import { defineProps, onMounted, ref } from "vue";
+const props = defineProps({
+  notebook: { required: true, type: Object },
+});
+const NotebookFragment = ref(null);
+const loading = ref(null);
+onMounted(async () => {
+  const notebook = new Notebook(props.notebook, false);
+  const fragment = await notebook.render();
+  NotebookFragment.value.removeChild(loading.value);
+  NotebookFragment.value.appendChild(fragment);
+});
 </script>
+
+<style scoped>
+#loading {
+  font-size: 1.5rem;
+  text-align: center;
+}
+</style>
\ No newline at end of file