[Style 0000] 修复了地图因缩放导致的异形问题，修复部分布局内容溢出问题

src/App.vue

@@ -1,111 +1,106 @@
 <template>
-  <AdaptiveContainer :options="adaptiveOptions">
-    <ConfigProvider :theme="appTheme" :locale="getAntdLocale">
-      <AppProvider>
-        <RouterView />
-      </AppProvider>
-    </ConfigProvider>
-  </AdaptiveContainer>
+  <ConfigProvider :theme="appTheme" :locale="getAntdLocale">
+    <AppProvider>
+      <RouterView />
+    </AppProvider>
+  </ConfigProvider>
 </template>
 
 <script lang="ts" setup>
-import { watch, ref } from 'vue';
-import { theme } from 'ant-design-vue';
-import { ConfigProvider } from 'ant-design-vue';
-import { AppProvider } from '/@/components/Application';
-import { useTitle } from '/@/hooks/web/useTitle';
-import { useLocale } from '/@/locales/useLocale';
-import { useAppStore } from '/@/store/modules/app';
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-import { ThemeEnum } from '/@/enums/appEnum';
-import { changeTheme } from '/@/logics/theme/index';
-import AdaptiveContainer from '/@/components/Container/src/AdaptiveContainer.vue';
+  import { watch, ref } from 'vue';
+  import { theme } from 'ant-design-vue';
+  import { ConfigProvider } from 'ant-design-vue';
+  import { AppProvider } from '/@/components/Application';
+  import { useTitle } from '/@/hooks/web/useTitle';
+  import { useLocale } from '/@/locales/useLocale';
+  import { useAppStore } from '/@/store/modules/app';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { ThemeEnum } from '/@/enums/appEnum';
+  import { changeTheme } from '/@/logics/theme/index';
 
-const appStore = useAppStore();
-// 解决日期时间国际化问题
-import 'dayjs/locale/zh-cn';
-// support Multi-language
-const { getAntdLocale } = useLocale();
+  const appStore = useAppStore();
+  // 解决日期时间国际化问题
+  import 'dayjs/locale/zh-cn';
+  // support Multi-language
+  const { getAntdLocale } = useLocale();
 
-const adaptiveOptions = ref({});
+  useTitle();
+  /**
+   * 2024-04-07
+   * liaozhiyang
+   * 暗黑模式下默认文字白色，白天模式默认文字 #333
+   * */
+  const modeAction = (data) => {
+    if (data.token) {
+      if (getDarkMode.value === ThemeEnum.DARK) {
+        Object.assign(data.token, { colorTextBase: 'fff' });
+      } else {
+        Object.assign(data.token, { colorTextBase: '#333' });
+      }
 
-useTitle();
-/**
- * 2024-04-07
- * liaozhiyang
- * 暗黑模式下默认文字白色，白天模式默认文字 #333
- * */
-const modeAction = (data) => {
-  if (data.token) {
-    if (getDarkMode.value === ThemeEnum.DARK) {
-      Object.assign(data.token, { colorTextBase: 'fff' });
-    } else {
-      Object.assign(data.token, { colorTextBase: '#333' });
+      // 定义主题色 css 变量
+      if (data.token.colorPrimary) {
+        document.documentElement.style.setProperty('--j-global-primary-color', data.token.colorPrimary);
+      }
     }
-
-    // 定义主题色 css 变量
-    if (data.token.colorPrimary) {
-      document.documentElement.style.setProperty('--j-global-primary-color', data.token.colorPrimary);
-    }
-  }
-};
-// 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
-const appTheme: any = ref({});
-const { getDarkMode } = useRootSetting();
-watch(
-  () => getDarkMode.value,
-  (newValue) => {
-    delete appTheme.value.algorithm;
-    if (newValue === ThemeEnum.DARK) {
-      appTheme.value.algorithm = theme.darkAlgorithm;
-    }
-    // 代码逻辑说明: 【QQYUN-8570】生产环境暗黑模式下主题色不生效
-    if (import.meta.env.PROD) {
-      changeTheme(appStore.getProjectConfig.themeColor);
-    }
-    modeAction(appTheme.value);
-    appTheme.value = {
-      ...appTheme.value,
-    };
-  },
-  { immediate: true }
-);
-watch(
-  appStore.getProjectConfig,
-  (newValue) => {
-    const primary = newValue.themeColor;
-    const result = {
-      ...appTheme.value,
-      ...{
-        token: {
-          colorPrimary: primary,
-          wireframe: true,
-          fontSize: 14,
-          colorTextBase: '#333',
-          colorSuccess: '#55D187',
-          colorInfo: primary,
-          borderRadius: 4,
-          sizeStep: 4,
-          sizeUnit: 4,
-          colorWarning: '#EFBD47',
-          colorError: '#ED6F6F',
-          fontFamily:
-            '-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
+  };
+  // 代码逻辑说明: 【QQYUN-6366】升级到antd4.x
+  const appTheme: any = ref({});
+  const { getDarkMode } = useRootSetting();
+  watch(
+    () => getDarkMode.value,
+    (newValue) => {
+      delete appTheme.value.algorithm;
+      if (newValue === ThemeEnum.DARK) {
+        appTheme.value.algorithm = theme.darkAlgorithm;
+      }
+      // 代码逻辑说明: 【QQYUN-8570】生产环境暗黑模式下主题色不生效
+      if (import.meta.env.PROD) {
+        changeTheme(appStore.getProjectConfig.themeColor);
+      }
+      modeAction(appTheme.value);
+      appTheme.value = {
+        ...appTheme.value,
+      };
+    },
+    { immediate: true }
+  );
+  watch(
+    appStore.getProjectConfig,
+    (newValue) => {
+      const primary = newValue.themeColor;
+      const result = {
+        ...appTheme.value,
+        ...{
+          token: {
+            colorPrimary: primary,
+            wireframe: true,
+            fontSize: 14,
+            colorTextBase: '#333',
+            colorSuccess: '#55D187',
+            colorInfo: primary,
+            borderRadius: 4,
+            sizeStep: 4,
+            sizeUnit: 4,
+            colorWarning: '#EFBD47',
+            colorError: '#ED6F6F',
+            fontFamily:
+              '-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol',
+          },
         },
-      },
-    };
-    appTheme.value = result;
-    modeAction(result);
-  },
-  { immediate: true }
-);
-setTimeout(() => {
-  appStore.getProjectConfig?.themeColor && changeTheme(appStore.getProjectConfig.themeColor);
-}, 300);
+      };
+      appTheme.value = result;
+      modeAction(result);
+    },
+    { immediate: true }
+  );
+  setTimeout(() => {
+    appStore.getProjectConfig?.themeColor && changeTheme(appStore.getProjectConfig.themeColor);
+  }, 300);
 </script>
 <style lang="less">
-// 代码逻辑说明: 【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
-img {
-  display: inline-block;
-}
+  // 代码逻辑说明: 【QQYUN-5839】windi会影响到html2canvas绘制的图片样式
+  img {
+    display: inline-block;
+  }
 </style>

src/layouts/default/feature/SimpleMap.vue

@@ -292,8 +292,8 @@
     // filter: grayscale(80%) invert(0%) sepia(10%) hue-rotate(150deg) saturate(200%) brightness(100%) contrast(100%);
 
     canvas {
-      width: 100% !important;
-      height: 100% !important;
+      /* width: 1920px !important;
+      height: 948px !important; */
     }
   }
 

src/layouts/default/index.vue

@@ -1,24 +1,27 @@
 <template>
   <!-- <div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: yellow"></div> -->
   <Layout :class="prefixCls" v-bind="lockEvents">
-    <LayoutFeatures />
-    <LayoutHeader />
-    <!-- <SystemSelect /> -->
     <SimpleMap :slience="true" />
-    <Layout :class="[layoutClass]">
-      <LayoutSideBar />
-      <Layout :class="`${prefixCls}-main`">
-        <MultipleTabs />
-        <LayoutContent />
-        <LayoutFooter />
+    <AdaptiveContainer :class="`${prefixCls}__adaptive`">
+      <LayoutFeatures />
+      <LayoutHeader />
+      <!-- <SystemSelect /> -->
+      <Layout :class="[layoutClass]">
+        <LayoutSideBar />
+        <Layout :class="`${prefixCls}-main`">
+          <MultipleTabs />
+          <LayoutContent />
+          <LayoutFooter />
+        </Layout>
       </Layout>
-    </Layout>
+    </AdaptiveContainer>
   </Layout>
 </template>
 
 <script lang="ts">
   import { defineComponent, computed, unref } from 'vue';
   import { Layout } from 'ant-design-vue';
+  import AdaptiveContainer from '/@/components/Container/src/AdaptiveContainer.vue';
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
   import LayoutHeader from './header/index.vue';
@@ -47,6 +50,7 @@
       Layout,
       // SystemSelect,
       SimpleMap,
+      AdaptiveContainer,
     },
     setup() {
       const { prefixCls } = useDesign('default-layout');
@@ -84,12 +88,15 @@
     min-height: 100%;
     flex-direction: column;
 
-    > .ant-layout {
-      height: 0;
-      margin: 10px;
-      background-color: transparent;
+    &__adaptive {
       position: relative;
       z-index: @layout-basic-z-index;
+
+      > .ant-layout {
+        height: calc(100% - @header-height - 20px);
+        margin: 10px;
+        background-color: transparent;
+      }
     }
 
     &-main {

src/layouts/default/plain.vue

@@ -1,16 +1,19 @@
 <template>
   <!-- <div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: yellow"></div> -->
   <Layout :class="prefixCls" v-bind="lockEvents">
-    <LayoutFeatures />
-    <LayoutHeader />
     <SimpleMap :slience="false" />
-    <LayoutContent />
+    <AdaptiveContainer :class="`${prefixCls}__adaptive`">
+      <LayoutFeatures />
+      <LayoutHeader />
+      <LayoutContent />
+    </AdaptiveContainer>
   </Layout>
 </template>
 
 <script lang="ts">
   import { defineComponent, computed, unref } from 'vue';
   import { Layout } from 'ant-design-vue';
+  import AdaptiveContainer from '/@/components/Container/src/AdaptiveContainer.vue';
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
   import LayoutHeader from './header/index.vue';
@@ -34,6 +37,7 @@
       Layout,
       // SystemSelect,
       SimpleMap,
+      AdaptiveContainer,
     },
     setup() {
       const { prefixCls } = useDesign('default-layout');
@@ -71,13 +75,20 @@
     min-height: 100%;
     flex-direction: column;
 
-    > .ant-layout {
+    &__adaptive {
+      background-color: transparent;
+      position: relative;
+      z-index: @layout-basic-z-index;
+      pointer-events: none;
+    }
+
+    /* > .ant-layout {
       height: 0;
       margin: 10px;
       background-color: transparent;
       position: relative;
       z-index: @layout-basic-z-index;
-    }
+    } */
 
     &-main {
       width: 100%;

src/layouts/default/sider/LayoutSider.vue

@@ -124,7 +124,7 @@
     border-bottom-left-radius: 10px;
     z-index: @layout-sider-fixed-z-index;
     flex: 1 !important;
-    height: calc(100% - @header-height);
+    height: calc(100% - @header-height - @header-height);
 
     &.ant-layout-sider-dark {
       background-color: @sider-dark-bg-color;