feat: 增加 iframe 网址内嵌页面对网址增加主题色的参数拼装（监听动态切换实现网址重载），来实现 media 项目中主题色的改变。

src/layout/routerView/iframes.vue

@@ -3,7 +3,7 @@
     <div class="jump" @click="jump">
       <img src="/@/assets/open.svg">
     </div>
-    <iframe allowfullscreen="true" :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" v-show="!iframeLoading"></iframe>
+    <iframe allowfullscreen="true" v-if="show" :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" @load="iframeLoading = false"></iframe>
   </div>
 </template>
 
@@ -18,24 +18,15 @@ export default defineComponent({
     const store = useStore();
     const state = reactive({
       iframeLoading: true,
-      iframeUrl: '',
+      show: true,
+      iframeUrl: route.meta?.linkUrl as string,
     });
     // 跳转到新页面
     const jump = () => {
       window.open(state.iframeUrl);
     };
     // 初始化页面加载 loading
-    const initIframeLoad = () => {
-      state.iframeUrl = <any>route.meta?.linkUrl;
-      nextTick(() => {
-        state.iframeLoading = true;
-        const iframe = document.getElementById('iframe');
-        if (!iframe) return false;
-        iframe.onload = () => {
-          state.iframeLoading = false;
-        };
-      });
-    };
+    const initIframeLoad = () => { };
     // 设置 iframe 的高度
     const setIframeHeight = computed(() => {
       let { isTagsview } = store.state.themeConfig.themeConfig;
@@ -58,6 +49,31 @@ export default defineComponent({
         initIframeLoad();
       }
     );
+
+    // 监听 vuex 中是否开启深色主题
+    watch(
+      () => store.state.themeConfig.themeConfig.isIsDark,
+      (isIsDark) => {
+        state.iframeLoading = true
+        state.show = false
+        nextTick(() => {
+          state.show = true
+        })
+        if (!state.iframeUrl.includes('?')) {
+          return state.iframeUrl += '?theme=' + (isIsDark ? 'dark' : 'light');
+        }
+        if (state.iframeUrl.includes('theme=dark')) {
+          return state.iframeUrl = state.iframeUrl.replace('theme=dark', 'theme=light')
+        }
+        if (state.iframeUrl.includes('theme=light')) {
+          return state.iframeUrl = state.iframeUrl.replace('theme=light', 'theme=dark')
+        }
+      },
+      {
+        deep: true,
+        immediate: true,
+      }
+    );
     return {
       jump,
       setIframeHeight,
@@ -68,15 +84,16 @@ export default defineComponent({
 </script>
 <style scoped lang="scss">
 .jump {
-	position: absolute;
-	top: 12px;
-	right: 12px;
-	z-index: 10;
-	cursor: pointer;
-	img {
-		width: 40px;
-		height: 40px;
-		display: block;
-	}
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 10;
+  cursor: pointer;
+
+  img {
+    width: 40px;
+    height: 40px;
+    display: block;
+  }
 }
 </style>