From 5b6600be63ff9bde21516dc474c4dc0137e45cd5 Mon Sep 17 00:00:00 2001
From: liulong <18539103286>
Date: Tue, 26 May 2026 21:42:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E5=A4=8D=E9=A1=B5=E8=84=9A?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/index/components/nav/index2.vue |  10 +-
 .../src/pages/index/utils/tzzx-iframe.js      |  65 +++
 txw-mhzc-web/src/pages/index/views/main.vue   |   6 +-
 .../src/pages/index/views/tzzx/index.vue      | 432 ++++++++++--------
 4 files changed, 329 insertions(+), 184 deletions(-)
 create mode 100644 txw-mhzc-web/src/pages/index/utils/tzzx-iframe.js

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 0916ede..e9157e1 100644
--- a/txw-mhzc-web/src/pages/index/components/nav/index2.vue
+++ b/txw-mhzc-web/src/pages/index/components/nav/index2.vue
@@ -474,10 +474,16 @@ export default {
       }
     },
     updateIframeUrl(menus) {
-      if (!menus || !this.kxurl) return;
+      if (!menus) return;
       menus.forEach(menu => {
         if (menu.path) {
-          menu.iframeUrl = `${this.kxurl}${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}`;
+          }
         }
         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
new file mode 100644
index 0000000..60bf8c0
--- /dev/null
+++ b/txw-mhzc-web/src/pages/index/utils/tzzx-iframe.js
@@ -0,0 +1,65 @@
+/**
+ * 碳证中心 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'),
+    10
+  );
+  const offset = Number.isFinite(navOffset) ? navOffset : 76;
+  return Math.max(window.innerHeight - offset, 480);
+}
+
+export function isAllowedIframeMessageOrigin(origin) {
+  if (!origin) return false;
+  if (origin === window.location.origin) return true;
+  try {
+    const host = window.location.hostname;
+    if (host === 'localhost' || host === '127.0.0.1') return true;
+  } catch (e) {
+    return false;
+  }
+  return false;
+}
diff --git a/txw-mhzc-web/src/pages/index/views/main.vue b/txw-mhzc-web/src/pages/index/views/main.vue
index 5a9af56..6fa06ee 100644
--- a/txw-mhzc-web/src/pages/index/views/main.vue
+++ b/txw-mhzc-web/src/pages/index/views/main.vue
@@ -128,10 +128,10 @@ export default {
         window.location.href = `/view/mhzc/login`;
         return;
       }
-      // this.iframeUrl = iframeUrl;
       this.$router.push({
-        path: `/tzzx?page=${iframeUrl}`
-      })
+        path: '/tzzx',
+        query: { 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 7c647bd..43a6141 100644
--- a/txw-mhzc-web/src/pages/index/views/tzzx/index.vue
+++ b/txw-mhzc-web/src/pages/index/views/tzzx/index.vue
@@ -1,179 +1,253 @@
-<template>
-  <div class="tzzx-page">
-    <div v-if="loading" class="loading">加载中...</div>
-    <template v-else-if="iframeUrl">
-      <iframe
-        ref="tzzxIframe"
-        :src="iframeUrl"
-        width="100%"
-        :height="iframeHeight"
-        frameborder="0"
-        scrolling="no"
-        @load="onIframeLoad"
-      ></iframe>
-      <Footer />
-    </template>
-    <div v-else class="empty">链接错误</div>
-  </div>
-</template>
-
-<script>
-import Footer from '@/pages/index/components/footer/index.vue';
-
-export default {
-  name: 'tzzx',
-  components: { Footer },
-  data() {
-    return {
-      iframeUrl: '',
-      loading: true,
-      iframeHeight: 800,
-      resizeObserver: null,
-      heightCheckTimer: null,
-    };
-  },
-  mounted() {
-    this.fetchPage();
-    this.$watch(() => this.$route.query, () => this.fetchPage());
-  },
-  beforeDestroy() {
-    this.cleanup();
-  },
-  methods: {
-    fetchPage() {
-      const { page } = this.$route.query;
-      if (page) {
-        this.iframeUrl = page;
-        this.loading = false;
-      } else {
-        this.iframeUrl = '';
-        this.loading = false;
-      }
-    },
-
-    onIframeLoad() {
-      const iframe = this.$refs.tzzxIframe;
-      if (!iframe) return;
-
-      const isSameOrigin = this.trySameOrigin(iframe);
-
-      if (!isSameOrigin) {
-        this.setupPostMessage(iframe);
-      }
-    },
-
-    trySameOrigin(iframe) {
-      try {
-        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-
-        if (!iframeDoc || !iframeDoc.body) {
-          return false;
-        }
-
-        const updateHeight = () => {
-          const height = Math.max(
-            iframeDoc.body.scrollHeight,
-            iframeDoc.body.offsetHeight,
-            iframeDoc.documentElement.scrollHeight,
-            iframeDoc.documentElement.offsetHeight
-          );
-          if (height > 0) {
-            this.iframeHeight = height + 20;
-          }
-        };
-
-        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) {
-      this._messageHandler = (event) => {
-        if (event.data && event.data.type === 'iframeHeight') {
-          this.iframeHeight = event.data.height;
-        }
-      };
-      window.addEventListener('message', this._messageHandler);
-
-      const requestHeight = () => {
-        try {
-          iframe.contentWindow.postMessage(
-            { type: 'REQUEST_HEIGHT' },
-            '*'
-          );
-        } catch (e) {}
-      };
-
-      requestHeight();
-
-      let retryCount = 0;
-      this.heightCheckTimer = setInterval(() => {
-        requestHeight();
-        retryCount++;
-        if (retryCount > 5) {
-          clearInterval(this.heightCheckTimer);
-          this.heightCheckTimer = null;
-        }
-      }, 1000);
-    },
-
-    cleanup() {
-      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;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.tzzx-page {
-  width: 100%;
-
-  iframe {
-    display: block;
-    width: 100%;
-    border: none;
-  }
-
-  .loading,
-  .empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100vh;
-    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 {

+  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>