From 692173e65403d8482db6adebedbc6cf99f5e70e7 Mon Sep 17 00:00:00 2001
From: liulong <18539103286>
Date: Tue, 26 May 2026 21:56:49 +0800
Subject: [PATCH] feat:0

---
 .../src/pages/index/components/nav/index2.vue |  10 +-
 .../src/pages/index/utils/tzzx-iframe.js      |  45 --
 txw-mhzc-web/src/pages/index/views/main.vue   |   3 +-
 .../src/pages/index/views/tzzx/index.vue      | 757 ++++++++++++------
 4 files changed, 507 insertions(+), 308 deletions(-)

diff --git a/txw-mhzc-web/src/pages/index/components/nav/index2.vue b/txw-mhzc-web/src/pages/index/components/nav/index2.vue
index e9157e1..0916ede 100644
--- a/txw-mhzc-web/src/pages/index/components/nav/index2.vue
+++ b/txw-mhzc-web/src/pages/index/components/nav/index2.vue
@@ -474,16 +474,10 @@ export default {
       }
     },
     updateIframeUrl(menus) {
-      if (!menus) return;
+      if (!menus || !this.kxurl) return;
       menus.forEach(menu => {
         if (menu.path) {
-          // 门户内嵌碳证中心：走同源 /web/ 反代（测试/生产 nginx），便于 iframe 高度自适应
-          const portalEmbed = menu.iframeUrl && String(menu.iframeUrl).startsWith('/web/');
-          if (portalEmbed) {
-            menu.iframeUrl = `/web${menu.path}`;
-          } else if (this.kxurl) {
-            menu.iframeUrl = `${this.kxurl}${menu.path}`;
-          }
+          menu.iframeUrl = `${this.kxurl}${menu.path}`;
         }
         if (menu.child && menu.child.length > 0) {
           this.updateIframeUrl(menu.child);
diff --git a/txw-mhzc-web/src/pages/index/utils/tzzx-iframe.js b/txw-mhzc-web/src/pages/index/utils/tzzx-iframe.js
index 60bf8c0..9c38ea7 100644
--- a/txw-mhzc-web/src/pages/index/utils/tzzx-iframe.js
+++ b/txw-mhzc-web/src/pages/index/utils/tzzx-iframe.js
@@ -1,48 +1,3 @@
-/**
- * 碳证中心 iframe 地址归一化：门户内嵌统一走同源 /web/ 反代（如 carbon.liantu.tech/web/...）
- */
-export function normalizeTzzxPageUrl(page) {
-  if (!page || typeof page !== 'string') return '';
-
-  let url = page.trim();
-  if (!url) return '';
-
-  if (url.startsWith('http://') || url.startsWith('https://')) {
-    try {
-      const parsed = new URL(url);
-      if (parsed.origin === window.location.origin) {
-        url = parsed.pathname + parsed.search + parsed.hash;
-      }
-    } catch (e) {
-      return url;
-    }
-  }
-
-  if (url.startsWith('/web/')) {
-    return url;
-  }
-
-  const kxtfwzxMarker = '/view/kxtfwzx';
-  const kxtIdx = url.indexOf(kxtfwzxMarker);
-  if (kxtIdx !== -1) {
-    const rest = url.slice(kxtIdx + kxtfwzxMarker.length);
-    return `/web${rest.startsWith('/') ? rest : `/${rest}`}`;
-  }
-
-  const carbonPathMatch = url.match(/\/(carbon[\w-]*|trustedCarbon[\w-/]*)(?:\?.*)?$/i);
-  if (carbonPathMatch) {
-    const pathStart = url.indexOf(carbonPathMatch[0]);
-    const subPath = url.slice(pathStart);
-    return subPath.startsWith('/web/') ? subPath : `/web${subPath.startsWith('/') ? subPath : `/${subPath}`}`;
-  }
-
-  if (url.startsWith('/') && !url.startsWith('/web/')) {
-    return `/web${url}`;
-  }
-
-  return url;
-}
-
 export function getViewportIframeFallbackHeight() {
   const navOffset = parseInt(
     getComputedStyle(document.documentElement).getPropertyValue('--page-offset-top'),
diff --git a/txw-mhzc-web/src/pages/index/views/main.vue b/txw-mhzc-web/src/pages/index/views/main.vue
index 6fa06ee..ebe241e 100644
--- a/txw-mhzc-web/src/pages/index/views/main.vue
+++ b/txw-mhzc-web/src/pages/index/views/main.vue
@@ -129,8 +129,7 @@ export default {
         return;
       }
       this.$router.push({
-        path: '/tzzx',
-        query: { page: iframeUrl },
+        path: `/tzzx?page=${iframeUrl}`,
       });
     },
 
diff --git a/txw-mhzc-web/src/pages/index/views/tzzx/index.vue b/txw-mhzc-web/src/pages/index/views/tzzx/index.vue
index 43a6141..265ca44 100644
--- a/txw-mhzc-web/src/pages/index/views/tzzx/index.vue
+++ b/txw-mhzc-web/src/pages/index/views/tzzx/index.vue
@@ -1,253 +1,504 @@
-<template>

-  <div class="tzzx-page">

-    <div v-if="loading" class="loading">加载中...</div>

-    <template v-else-if="iframeUrl">

-      <iframe

-        ref="tzzxIframe"

-        :src="iframeUrl"

-        class="tzzx-iframe"

-        frameborder="0"

-        :scrolling="iframeScrolling"

-        :style="iframeStyle"

-        @load="onIframeLoad"

-      ></iframe>

-    </template>

-    <div v-else class="empty">链接错误</div>

-  </div>

-</template>

-

-<script>

-import {

-  normalizeTzzxPageUrl,

-  getViewportIframeFallbackHeight,

-  isAllowedIframeMessageOrigin,

-} from '@/pages/index/utils/tzzx-iframe';

-

-const DEFAULT_IFRAME_HEIGHT = 800;

-

-export default {

-  name: 'tzzx',

-  data() {

-    return {

-      iframeUrl: '',

-      loading: true,

-      iframeHeight: DEFAULT_IFRAME_HEIGHT,

-      iframeScrolling: 'no',

-      heightMode: 'default',

-      resizeObserver: null,

-      heightCheckTimer: null,

-      _messageHandler: null,

-      _iframeLoadGeneration: 0,

-    };

-  },

-  computed: {

-    iframeStyle() {

-      return {

-        width: '100%',

-        height: `${this.iframeHeight}px`,

-        border: 'none',

-        display: 'block',

-      };

-    },

-  },

-  mounted() {

-    this.fetchPage();

-    this.$watch(() => this.$route.query.page, () => this.fetchPage());

-    window.addEventListener('resize', this.onWindowResize);

-  },

-  activated() {

-    this.fetchPage();

-  },

-  beforeDestroy() {

-    window.removeEventListener('resize', this.onWindowResize);

-    this.cleanup();

-  },

-  deactivated() {

-    this.cleanup();

-  },

-  methods: {

-    fetchPage() {

-      const rawPage = this.$route.query.page;

-      const page = Array.isArray(rawPage) ? rawPage[0] : rawPage;

-      const nextUrl = normalizeTzzxPageUrl(page);

-

-      if (nextUrl === this.iframeUrl && !this.loading) {

-        return;

-      }

-

-      this.cleanup();

-      this.resetIframeMetrics();

-

-      if (nextUrl) {

-        this.iframeUrl = nextUrl;

-        this.loading = false;

-      } else {

-        this.iframeUrl = '';

-        this.loading = false;

-      }

-    },

-

-    resetIframeMetrics() {

-      this.iframeHeight = DEFAULT_IFRAME_HEIGHT;

-      this.iframeScrolling = 'no';

-      this.heightMode = 'default';

-      this._iframeLoadGeneration += 1;

-    },

-

-    onWindowResize() {

-      if (this.heightMode === 'viewport-fallback') {

-        this.iframeHeight = getViewportIframeFallbackHeight();

-      }

-    },

-

-    onIframeLoad() {

-      const iframe = this.$refs.tzzxIframe;

-      if (!iframe) return;

-

-      const loadGeneration = this._iframeLoadGeneration;

-      this.cleanupObserversOnly();

-

-      const isSameOrigin = this.trySameOrigin(iframe, loadGeneration);

-      if (!isSameOrigin) {

-        this.setupPostMessage(iframe, loadGeneration);

-      }

-    },

-

-    trySameOrigin(iframe, loadGeneration) {

-      try {

-        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

-        if (!iframeDoc || !iframeDoc.body) {

-          return false;

-        }

-

-        const updateHeight = () => {

-          if (loadGeneration !== this._iframeLoadGeneration) return;

-

-          const height = Math.max(

-            iframeDoc.body.scrollHeight,

-            iframeDoc.body.offsetHeight,

-            iframeDoc.documentElement.scrollHeight,

-            iframeDoc.documentElement.offsetHeight

-          );

-          if (height > 0) {

-            this.iframeHeight = height + 20;

-            this.heightMode = 'same-origin';

-            this.iframeScrolling = 'no';

-          }

-        };

-

-        updateHeight();

-

-        if (window.ResizeObserver) {

-          this.resizeObserver = new ResizeObserver(updateHeight);

-          this.resizeObserver.observe(iframeDoc.body);

-          this.resizeObserver.observe(iframeDoc.documentElement);

-        } else {

-          this.heightCheckTimer = setInterval(updateHeight, 500);

-        }

-

-        const images = iframeDoc.querySelectorAll('img');

-        images.forEach((img) => {

-          if (!img.complete) {

-            img.addEventListener('load', updateHeight);

-            img.addEventListener('error', updateHeight);

-          }

-        });

-

-        return true;

-      } catch (e) {

-        console.log('[tzzx] 检测到跨域 iframe，将使用 postMessage / 视口降级方案');

-        return false;

-      }

-    },

-

-    setupPostMessage(iframe, loadGeneration) {

-      this._messageHandler = (event) => {

-        if (loadGeneration !== this._iframeLoadGeneration) return;

-        if (!isAllowedIframeMessageOrigin(event.origin)) return;

-        if (event.source !== iframe.contentWindow) return;

-

-        const data = event.data;

-        if (!data || data.type !== 'iframeHeight') return;

-

-        const height = Number(data.height);

-        if (!Number.isFinite(height) || height <= 0) return;

-

-        this.iframeHeight = height + 20;

-        this.heightMode = 'post-message';

-        this.iframeScrolling = 'no';

-      };

-      window.addEventListener('message', this._messageHandler);

-

-      const requestHeight = () => {

-        if (loadGeneration !== this._iframeLoadGeneration) return;

-        try {

-          iframe.contentWindow.postMessage({ type: 'REQUEST_HEIGHT' }, '*');

-        } catch (e) {}

-      };

-

-      requestHeight();

-

-      let retryCount = 0;

-      this.heightCheckTimer = setInterval(() => {

-        requestHeight();

-        retryCount += 1;

-        if (retryCount >= 5) {

-          clearInterval(this.heightCheckTimer);

-          this.heightCheckTimer = null;

-          if (loadGeneration === this._iframeLoadGeneration && this.heightMode === 'default') {

-            this.applyViewportFallback();

-          }

-        }

-      }, 1000);

-    },

-

-    applyViewportFallback() {

-      this.iframeHeight = getViewportIframeFallbackHeight();

-      this.heightMode = 'viewport-fallback';

-      this.iframeScrolling = 'auto';

-    },

-

-    cleanupObserversOnly() {

-      if (this.resizeObserver) {

-        this.resizeObserver.disconnect();

-        this.resizeObserver = null;

-      }

-      if (this.heightCheckTimer) {

-        clearInterval(this.heightCheckTimer);

-        this.heightCheckTimer = null;

-      }

-      if (this._messageHandler) {

-        window.removeEventListener('message', this._messageHandler);

-        this._messageHandler = null;

-      }

-    },

-

-    cleanup() {

-      this.cleanupObserversOnly();

-    },

-  },

-};

-</script>

-

-<style lang="less" scoped>

-.tzzx-page {

-  width: 100%;

-

-  .tzzx-iframe {

-    display: block;

-    width: 100%;

-  }

-

-  .loading,

-  .empty {

-    display: flex;

-    align-items: center;

-    justify-content: center;

-    width: 100%;

-    min-height: 480px;

-    font-size: 16px;

-    color: #999;

-  }

-}

-</style>

+<template>
+
+  <div class="tzzx-page">
+
+    <div v-if="loading" class="loading">加载中...</div>
+
+    <template v-else-if="iframeUrl">
+
+      <iframe
+
+        ref="tzzxIframe"
+
+        :src="iframeUrl"
+
+        class="tzzx-iframe"
+
+        frameborder="0"
+
+        :scrolling="iframeScrolling"
+
+        :style="iframeStyle"
+
+        @load="onIframeLoad"
+
+      ></iframe>
+
+    </template>
+
+    <div v-else class="empty">链接错误</div>
+
+  </div>
+
+</template>
+
+
+
+<script>
+
+import {
+
+  getViewportIframeFallbackHeight,
+
+  isAllowedIframeMessageOrigin,
+
+} from '@/pages/index/utils/tzzx-iframe';
+
+
+
+const DEFAULT_IFRAME_HEIGHT = 800;
+
+
+
+export default {
+
+  name: 'tzzx',
+
+  data() {
+
+    return {
+
+      iframeUrl: '',
+
+      loading: true,
+
+      iframeHeight: DEFAULT_IFRAME_HEIGHT,
+
+      iframeScrolling: 'no',
+
+      heightMode: 'default',
+
+      resizeObserver: null,
+
+      heightCheckTimer: null,
+
+      _messageHandler: null,
+
+      _iframeLoadGeneration: 0,
+
+    };
+
+  },
+
+  computed: {
+
+    iframeStyle() {
+
+      return {
+
+        width: '100%',
+
+        height: `${this.iframeHeight}px`,
+
+        border: 'none',
+
+        display: 'block',
+
+      };
+
+    },
+
+  },
+
+  mounted() {
+
+    this.fetchPage();
+
+    this.$watch(() => this.$route.query.page, () => this.fetchPage());
+
+    window.addEventListener('resize', this.onWindowResize);
+
+  },
+
+  activated() {
+
+    this.fetchPage();
+
+  },
+
+  beforeDestroy() {
+
+    window.removeEventListener('resize', this.onWindowResize);
+
+    this.cleanup();
+
+  },
+
+  deactivated() {
+
+    this.cleanup();
+
+  },
+
+  methods: {
+
+    fetchPage() {
+
+      const rawPage = this.$route.query.page;
+
+      const page = Array.isArray(rawPage) ? rawPage[0] : rawPage;
+
+      const nextUrl = page ? String(page).trim() : '';
+
+
+
+      if (nextUrl === this.iframeUrl && !this.loading) {
+
+        return;
+
+      }
+
+
+
+      this.cleanup();
+
+      this.resetIframeMetrics();
+
+
+
+      if (nextUrl) {
+
+        this.iframeUrl = nextUrl;
+
+        this.loading = false;
+
+      } else {
+
+        this.iframeUrl = '';
+
+        this.loading = false;
+
+      }
+
+    },
+
+
+
+    resetIframeMetrics() {
+
+      this.iframeHeight = DEFAULT_IFRAME_HEIGHT;
+
+      this.iframeScrolling = 'no';
+
+      this.heightMode = 'default';
+
+      this._iframeLoadGeneration += 1;
+
+    },
+
+
+
+    onWindowResize() {
+
+      if (this.heightMode === 'viewport-fallback') {
+
+        this.iframeHeight = getViewportIframeFallbackHeight();
+
+      }
+
+    },
+
+
+
+    onIframeLoad() {
+
+      const iframe = this.$refs.tzzxIframe;
+
+      if (!iframe) return;
+
+
+
+      const loadGeneration = this._iframeLoadGeneration;
+
+      this.cleanupObserversOnly();
+
+
+
+      const isSameOrigin = this.trySameOrigin(iframe, loadGeneration);
+
+      if (!isSameOrigin) {
+
+        this.setupPostMessage(iframe, loadGeneration);
+
+      }
+
+    },
+
+
+
+    trySameOrigin(iframe, loadGeneration) {
+
+      try {
+
+        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+
+        if (!iframeDoc || !iframeDoc.body) {
+
+          return false;
+
+        }
+
+
+
+        const updateHeight = () => {
+
+          if (loadGeneration !== this._iframeLoadGeneration) return;
+
+
+
+          const height = Math.max(
+
+            iframeDoc.body.scrollHeight,
+
+            iframeDoc.body.offsetHeight,
+
+            iframeDoc.documentElement.scrollHeight,
+
+            iframeDoc.documentElement.offsetHeight
+
+          );
+
+          if (height > 0) {
+
+            this.iframeHeight = height + 20;
+
+            this.heightMode = 'same-origin';
+
+            this.iframeScrolling = 'no';
+
+          }
+
+        };
+
+
+
+        updateHeight();
+
+
+
+        if (window.ResizeObserver) {
+
+          this.resizeObserver = new ResizeObserver(updateHeight);
+
+          this.resizeObserver.observe(iframeDoc.body);
+
+          this.resizeObserver.observe(iframeDoc.documentElement);
+
+        } else {
+
+          this.heightCheckTimer = setInterval(updateHeight, 500);
+
+        }
+
+
+
+        const images = iframeDoc.querySelectorAll('img');
+
+        images.forEach((img) => {
+
+          if (!img.complete) {
+
+            img.addEventListener('load', updateHeight);
+
+            img.addEventListener('error', updateHeight);
+
+          }
+
+        });
+
+
+
+        return true;
+
+      } catch (e) {
+
+        console.log('[tzzx] 检测到跨域 iframe，将使用 postMessage / 视口降级方案');
+
+        return false;
+
+      }
+
+    },
+
+
+
+    setupPostMessage(iframe, loadGeneration) {
+
+      this._messageHandler = (event) => {
+
+        if (loadGeneration !== this._iframeLoadGeneration) return;
+
+        if (!isAllowedIframeMessageOrigin(event.origin)) return;
+
+        if (event.source !== iframe.contentWindow) return;
+
+
+
+        const data = event.data;
+
+        if (!data || data.type !== 'iframeHeight') return;
+
+
+
+        const height = Number(data.height);
+
+        if (!Number.isFinite(height) || height <= 0) return;
+
+
+
+        this.iframeHeight = height + 20;
+
+        this.heightMode = 'post-message';
+
+        this.iframeScrolling = 'no';
+
+      };
+
+      window.addEventListener('message', this._messageHandler);
+
+
+
+      const requestHeight = () => {
+
+        if (loadGeneration !== this._iframeLoadGeneration) return;
+
+        try {
+
+          iframe.contentWindow.postMessage({ type: 'REQUEST_HEIGHT' }, '*');
+
+        } catch (e) {}
+
+      };
+
+
+
+      requestHeight();
+
+
+
+      let retryCount = 0;
+
+      this.heightCheckTimer = setInterval(() => {
+
+        requestHeight();
+
+        retryCount += 1;
+
+        if (retryCount >= 5) {
+
+          clearInterval(this.heightCheckTimer);
+
+          this.heightCheckTimer = null;
+
+          if (loadGeneration === this._iframeLoadGeneration && this.heightMode === 'default') {
+
+            this.applyViewportFallback();
+
+          }
+
+        }
+
+      }, 1000);
+
+    },
+
+
+
+    applyViewportFallback() {
+
+      this.iframeHeight = getViewportIframeFallbackHeight();
+
+      this.heightMode = 'viewport-fallback';
+
+      this.iframeScrolling = 'auto';
+
+    },
+
+
+
+    cleanupObserversOnly() {
+
+      if (this.resizeObserver) {
+
+        this.resizeObserver.disconnect();
+
+        this.resizeObserver = null;
+
+      }
+
+      if (this.heightCheckTimer) {
+
+        clearInterval(this.heightCheckTimer);
+
+        this.heightCheckTimer = null;
+
+      }
+
+      if (this._messageHandler) {
+
+        window.removeEventListener('message', this._messageHandler);
+
+        this._messageHandler = null;
+
+      }
+
+    },
+
+
+
+    cleanup() {
+
+      this.cleanupObserversOnly();
+
+    },
+
+  },
+
+};
+
+</script>
+
+
+
+<style lang="less" scoped>
+
+.tzzx-page {
+
+  width: 100%;
+
+
+
+  .tzzx-iframe {
+
+    display: block;
+
+    width: 100%;
+
+  }
+
+
+
+  .loading,
+
+  .empty {
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+    width: 100%;
+
+    min-height: 480px;
+
+    font-size: 16px;
+
+    color: #999;
+
+  }
+
+}
+
+</style>
+