feat: 给notebook加载加了提示

但是依托答辩 我不知道能不能跑

.vitepress/config.js

@@ -520,6 +520,10 @@ export default defineConfig({
       {
         text: '贡献指南',
         link: '/CONTRIBUTING'
+      },
+      {
+        text: 'notebook测试',
+        link: '/notebook'
       }
     ],
     socialLinks: [

.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);
 }
 

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";
-
+import { defineProps, onMounted, ref } from "vue";
-export default {
+const props = defineProps({
-  name: "RenderJupyterNotebook",
+  notebook: { required: true, type: Object },
-  props: {
+});
-    notebook: { required: true, type: Object },
+const NotebookFragment = ref(null);
-  },
+const loading = ref(null);
-  async mounted() {
+onMounted(async () => {
-    const notebook = new Notebook(this.notebook, false);
+  const notebook = new Notebook(props.notebook, false);
-    const fragment = await notebook.render();
+  const fragment = await notebook.render();
-    this.$refs.NotebookFragment.appendChild(fragment);
+  NotebookFragment.value.removeChild(loading.value);
-  },
+  NotebookFragment.value.appendChild(fragment);
-};
+});
 </script>
+
+<style scoped>
+#loading {
+  font-size: 1.5rem;
+  text-align: center;
+}
+</style>