feat: 🚀 增加iframe loading

17359898647 · Sep 26, 2023 · 5a306c3 · 5a306c3
1 parent 9933b05
commit 5a306c3
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 13 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "@formkit/auto-animate": "^0.8.0",
     "@iconify/vue": "^4.1.1",
     "@types/lodash-es": "^4.17.9",
-    "@types/sortablejs": "^1.15.2",
+    "@types/sortablejs": "^1.15.3",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vueuse/core": "^10.4.1",
     "@vueuse/integrations": "^10.4.1",
@@ -41,12 +41,12 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "1.0.0-beta.8",
+    "@antfu/eslint-config": "1.0.0-beta.10",
     "@iconify-json/carbon": "^1.1.21",
-    "@types/node": "^20.6.5",
-    "@unocss/eslint-config": "^0.56.1",
-    "@unocss/eslint-plugin": "^0.56.1",
-    "@unocss/reset": "^0.56.1",
+    "@types/node": "^20.7.0",
+    "@unocss/eslint-config": "^0.56.2",
+    "@unocss/eslint-plugin": "^0.56.2",
+    "@unocss/reset": "^0.56.2",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/test-utils": "^2.4.1",
     "eslint": "^8.50.0",
@@ -59,12 +59,12 @@
     "simple-git-hooks": "^2.9.0",
     "taze": "^0.11.2",
     "typescript": "^5.2.2",
-    "unocss": "^0.56.1",
+    "unocss": "^0.56.2",
     "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.9",
     "vitest": "^0.34.5",
-    "vue-tsc": "^1.8.13"
+    "vue-tsc": "^1.8.14"
   },
   "simple-git-hooks": {
     "pre-commit": "bun lint-staged && bun lint && bun typecheck"

diff --git a/src/components/IframeCom/IframeCom.vue b/src/components/IframeCom/IframeCom.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+  src: string
+}>()
+const [loading, setLoading] = useToggle(true)
+</script>
+
+<template>
+  <NSpin
+    class="flex flex-1 flex-col"
+    :show="loading"
+  >
+    <iframe
+      class="flex-1"
+      :src="src"
+      @load="setLoading(false)"
+    />
+  </NSpin>
+</template>
+
+<style scoped>
+:deep(.n-spin-content){
+  @apply flex flex-col flex-1
+}
+</style>
diff --git a/src/layout/HKeepAlive/HKeepAlive.vue b/src/layout/HKeepAlive/HKeepAlive.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { inject } from 'vue'
+import IframeKeep from '@/layout/HKeepAlive/IframeKeep.vue'
 import { useKeepAliveCacheStore } from '@/layout/HKeepAlive/useKeepAliveCacheStore'
 
 const { isRefreshPage, isHeaderHeight, isTagViewHeight, isContentPadding, isFooterHeight } = inject(layoutProvide)!
@@ -44,7 +45,7 @@ const paddingAttribute = computed(() => {
       </KeepAlive>
     </Transition>
     <!-- eslint-disable-next-line vue/valid-v-for -->
-    <IframKeep
+    <IframeKeep
       :isIframe="isIframe"
       :routeName="name"
     />

diff --git a/src/layout/HKeepAlive/IframKeep.vue → src/layout/HKeepAlive/IframeKeep.vue b/src/layout/HKeepAlive/IframKeep.vue → src/layout/HKeepAlive/IframeKeep.vue
diff --git a/src/views/OutsideChain/LineNet.vue b/src/views/OutsideChain/LineNet.vue
@@ -10,5 +10,5 @@ definePage({
 </script>
 
 <template>
-  <iframe src="https://17359898647.github.io/" />
+  <IframeCom src="https://17359898647.github.io/" />
 </template>
diff --git a/src/views/OutsideChain/NaiveUi.vue b/src/views/OutsideChain/NaiveUi.vue
@@ -10,5 +10,5 @@ definePage({
 </script>
 
 <template>
-  <iframe src="https://www.naiveui.com/zh-CN/light" />
+  <IframeCom src="https://www.naiveui.com/zh-CN/light" />
 </template>
diff --git a/src/views/OutsideChain/VueJs.vue b/src/views/OutsideChain/VueJs.vue
@@ -10,5 +10,5 @@ definePage({
 </script>
 
 <template>
-  <iframe src="https://cn.vuejs.org/" />
+  <IframeCom src="https://cn.vuejs.org/" />
 </template>
diff --git a/src/views/OutsideChain/VueUse.vue b/src/views/OutsideChain/VueUse.vue
@@ -10,5 +10,5 @@ definePage({
 </script>
 
 <template>
-  <iframe src="https://vueuse.org/" />
+  <IframeCom src="https://vueuse.org/" />
 </template>