From 74779fa83bce4c55f24d7d0b20efb8b024fae44b Mon Sep 17 00:00:00 2001
From: ccccpj <ccccpj@outlook.com>
Date: Wed, 22 Feb 2023 16:19:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20feat:=20=E6=89=93=E5=BC=80=E5=A4=96?=
 =?UTF-8?q?=E9=83=A8=E9=A1=B5=E9=9D=A2=EF=BC=88=E5=86=85=E5=B5=8C/?=
 =?UTF-8?q?=E5=A4=96=E9=93=BE=EF=BC=89=20(#226)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #173
---
 src/pages/frame/doc/index.vue     | 86 +++++++++++++++++++++++++++++++
 src/pages/frame/tdesign/index.vue | 86 +++++++++++++++++++++++++++++++
 src/router/modules/components.ts  | 26 ++++++++++
 3 files changed, 198 insertions(+)
 create mode 100644 src/pages/frame/doc/index.vue
 create mode 100644 src/pages/frame/tdesign/index.vue

diff --git a/src/pages/frame/doc/index.vue b/src/pages/frame/doc/index.vue
new file mode 100644
index 0000000..1cdf7c2
--- /dev/null
+++ b/src/pages/frame/doc/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <div :class="`${prefix}-iframe-page`" :style="getWrapStyle">
+    <t-loading :loading="loading" size="large" :style="getWrapStyle">
+      <iframe ref="frameRef" :src="frameSrc" :class="`${prefix}-iframe-page__main`" @load="hideLoading"></iframe>
+    </t-loading>
+  </div>
+</template>
+<script lang="ts">
+import { prefix } from '@/config/global';
+import STYLE_CONFIG from '@/config/style';
+
+const computedStyle = getComputedStyle(document.documentElement);
+const sizeXxxl = computedStyle.getPropertyValue('--td-comp-size-xxxl');
+const paddingTBXxl = computedStyle.getPropertyValue('--td-comp-paddingTB-xxl');
+
+export default {
+  name: 'DetailAdvanced',
+  data() {
+    return {
+      prefix,
+      loading: true,
+      frameSrc: 'https://tdesign.tencent.com/starter/docs/vue/get-started',
+      settingStore: { ...STYLE_CONFIG },
+      getWrapStyle: `height: ${window.innerHeight}px`,
+    };
+  },
+  mounted() {
+    window.addEventListener('resize', this.calcHeight, false);
+    this.$nextTick(() => {
+      this.calcHeight();
+    });
+  },
+  methods: {
+    hideLoading() {
+      this.loading = false;
+      this.calcHeight();
+    },
+
+    getOuterHeight(dom: Element) {
+      let height = dom.clientHeight;
+      const computedStyle = window.getComputedStyle(dom);
+      height += parseInt(computedStyle.marginTop, 10);
+      height += parseInt(computedStyle.marginBottom, 10);
+      height += parseInt(computedStyle.borderTopWidth, 10);
+      height += parseInt(computedStyle.borderBottomWidth, 10);
+      return height;
+    },
+
+    calcHeight() {
+      const iframe = this.$refs.frameRef;
+      if (!iframe) {
+        return;
+      }
+      let clientHeight = 0;
+      const { showFooter, isUseTabsRouter, showBreadcrumb } = this.settingStore;
+      const headerHeight = parseFloat(sizeXxxl);
+      const navDom = document.querySelector('.t-tabs__nav');
+      const navHeight = isUseTabsRouter ? this.getOuterHeight(navDom) : 0;
+      const breadcrumbDom = document.querySelector('.t-breadcrumb');
+      const breadcrumbHeight = showBreadcrumb ? this.getOuterHeight(breadcrumbDom) : 0;
+      const contentPadding = parseFloat(paddingTBXxl) * 2;
+      const footerDom = document.querySelector('.t-layout__footer');
+      const footerHeight = showFooter ? this.getOuterHeight(footerDom) : 0;
+      const top = headerHeight + navHeight + breadcrumbHeight + contentPadding + footerHeight + 2;
+      window.innerHeight -= top;
+      clientHeight = document.documentElement.clientHeight - top;
+      iframe.style.height = `${clientHeight}px`;
+      this.getWrapStyle = `height: ${window.innerHeight}px`;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import '@/style/variables';
+
+.@{starter-prefix}-iframe-page {
+  &__main {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #fff;
+    border: 0;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/src/pages/frame/tdesign/index.vue b/src/pages/frame/tdesign/index.vue
new file mode 100644
index 0000000..c7be24a
--- /dev/null
+++ b/src/pages/frame/tdesign/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <div :class="`${prefix}-iframe-page`" :style="getWrapStyle">
+    <t-loading :loading="loading" size="large" :style="getWrapStyle">
+      <iframe ref="frameRef" :src="frameSrc" :class="`${prefix}-iframe-page__main`" @load="hideLoading"></iframe>
+    </t-loading>
+  </div>
+</template>
+<script lang="ts">
+import { prefix } from '@/config/global';
+import STYLE_CONFIG from '@/config/style';
+
+const computedStyle = getComputedStyle(document.documentElement);
+const sizeXxxl = computedStyle.getPropertyValue('--td-comp-size-xxxl');
+const paddingTBXxl = computedStyle.getPropertyValue('--td-comp-paddingTB-xxl');
+
+export default {
+  name: 'DetailAdvanced',
+  data() {
+    return {
+      prefix,
+      loading: true,
+      frameSrc: 'https://tdesign.tencent.com/vue-next/getting-started',
+      settingStore: { ...STYLE_CONFIG },
+      getWrapStyle: `height: ${window.innerHeight}px`,
+    };
+  },
+  mounted() {
+    window.addEventListener('resize', this.calcHeight, false);
+    this.$nextTick(() => {
+      this.calcHeight();
+    });
+  },
+  methods: {
+    hideLoading() {
+      this.loading = false;
+      this.calcHeight();
+    },
+
+    getOuterHeight(dom: Element) {
+      let height = dom.clientHeight;
+      const computedStyle = window.getComputedStyle(dom);
+      height += parseInt(computedStyle.marginTop, 10);
+      height += parseInt(computedStyle.marginBottom, 10);
+      height += parseInt(computedStyle.borderTopWidth, 10);
+      height += parseInt(computedStyle.borderBottomWidth, 10);
+      return height;
+    },
+
+    calcHeight() {
+      const iframe = this.$refs.frameRef;
+      if (!iframe) {
+        return;
+      }
+      let clientHeight = 0;
+      const { showFooter, isUseTabsRouter, showBreadcrumb } = this.settingStore;
+      const headerHeight = parseFloat(sizeXxxl);
+      const navDom = document.querySelector('.t-tabs__nav');
+      const navHeight = isUseTabsRouter ? this.getOuterHeight(navDom) : 0;
+      const breadcrumbDom = document.querySelector('.t-breadcrumb');
+      const breadcrumbHeight = showBreadcrumb ? this.getOuterHeight(breadcrumbDom) : 0;
+      const contentPadding = parseFloat(paddingTBXxl) * 2;
+      const footerDom = document.querySelector('.t-layout__footer');
+      const footerHeight = showFooter ? this.getOuterHeight(footerDom) : 0;
+      const top = headerHeight + navHeight + breadcrumbHeight + contentPadding + footerHeight + 2;
+      window.innerHeight -= top;
+      clientHeight = document.documentElement.clientHeight - top;
+      iframe.style.height = `${clientHeight}px`;
+      this.getWrapStyle = `height: ${window.innerHeight}px`;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import '@/style/variables';
+
+.@{starter-prefix}-iframe-page {
+  &__main {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #fff;
+    border: 0;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index fb56cca..2e000c8 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -89,6 +89,32 @@ export default [
       },
     ],
   },
+  {
+    path: '/frame',
+    name: 'frame',
+    component: Layout,
+    redirect: '/frame/doc',
+    meta: { title: '外部页面', icon: 'internet' },
+    children: [
+      {
+        path: 'doc',
+        name: 'Doc',
+        component: () => import('@/pages/frame/doc/index.vue'),
+        meta: { title: '使用文档（内嵌）' },
+      },
+      {
+        path: 'TDesign',
+        name: 'TDesign',
+        component: () => import('@/pages/frame/tdesign/index.vue'),
+        meta: { title: 'TDesign 文档（内嵌）' },
+      },
+      {
+        path: 'https://tdesign.tencent.com/vue-next/getting-started',
+        name: 'TDesign2',
+        meta: { title: 'TDesign 文档（外链）' },
+      },
+    ],
+  },
   {
     path: '/result',
     name: 'result',