新增：Form组件支持响应式配置，路由支持外部地址（内联）

src/components/Form/src/BasicForm.vue

@@ -102,11 +102,7 @@
             type="primary"
             text
             icon-placement="right"
-            v-if="
+            v-if="overflow && isInline && getProps.showAdvancedButton"
-              isInline &&
-              getSchema.length > (getProps.gridProps?.cols || 0) &&
-              getProps.showAdvancedButton
-            "
             @click="unfoldToggle"
           >
             <template #icon>
@@ -212,6 +208,7 @@
         return {
           ...gridProps,
           collapsed: isInline.value ? gridCollapsed.value : false,
+          responsive: 'screen',
         };
       });
 

src/components/Upload/src/BasicUpload.vue

@@ -101,8 +101,8 @@
       const state = reactive({
         showModal: false,
         previewUrl: '',
-        originalImgList: [],
+        originalImgList: [] as string[],
-        imgList: [],
+        imgList: [] as string[],
       });
 
       //赋值默认图片显示
@@ -176,7 +176,7 @@
         const result = res[infoField];
         //成功
         if (code === ResultEnum.SUCCESS) {
-          let imgUrl = getImgUrl(result.photo);
+          let imgUrl: string = getImgUrl(result.photo);
           state.imgList.push(imgUrl);
           state.originalImgList.push(result.photo);
           emit('uploadChange', state.originalImgList);
@@ -220,6 +220,7 @@
 
         &:hover {
           background: 0 0;
+
           .upload-card-item-info::before {
             opacity: 1;
           }

src/layout/components/Menu/index.vue

@@ -104,7 +104,6 @@
           const matched = currentRoute.matched;
           state.openKeys = matched.map((item) => item.name);
           const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
-          console.log(currentRoute);
           selectedKeys.value = activeMenu ? (activeMenu as string) : (currentRoute.name as string);
         }
       );

src/router/modules/about.ts

@@ -9,7 +9,7 @@ const routes: Array<RouteRecordRaw> = [
     name: 'about',
     component: Layout,
     meta: {
-      sort: 9,
+      sort: 10,
       isRoot: true,
       activeMenu: 'about_index',
     },

src/router/modules/docs.ts

@@ -11,7 +11,7 @@ const routes: Array<RouteRecordRaw> = [
     meta: {
       title: '项目文档',
       icon: renderIcon(DocumentTextOutline),
-      sort: 8,
+      sort: 9,
     },
   },
 ];

src/router/modules/frame.ts

@@ -0,0 +1,42 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { DesktopOutline } from '@vicons/ionicons5';
+import { renderIcon } from '@/utils/index';
+
+const IFrame = () => import('@/views/iframe/index.vue');
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/frame',
+    name: 'Frame',
+    redirect: '/frame/docs',
+    component: Layout,
+    meta: {
+      title: '外部页面',
+      sort: 8,
+      icon: renderIcon(DesktopOutline),
+    },
+    children: [
+      {
+        path: 'docs',
+        name: 'frame-docs',
+        meta: {
+          title: '项目文档(内嵌)',
+          frameSrc: 'https://naive-ui-admin-docs.vercel.app',
+        },
+        component: IFrame,
+      },
+      {
+        path: 'naive',
+        name: 'frame-naive',
+        meta: {
+          title: 'NaiveUi(内嵌)',
+          frameSrc: 'https://www.naiveui.com',
+        },
+        component: IFrame,
+      },
+    ],
+  },
+];
+
+export default routes;

src/views/frame/docs.vue

@@ -0,0 +1 @@
+<template> 项目文档 </template>

src/views/iframe/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <n-spin :show="loading">
+    <div class="frame">
+      <iframe :src="frameSrc" class="frame-iframe" scrolling="no" ref="frameRef"></iframe>
+    </div>
+  </n-spin>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref, onMounted, nextTick } from 'vue';
+  import { useRoute } from 'vue-router';
+
+  export default defineComponent({
+    name: 'IFrame',
+    setup() {
+      const currentRoute = useRoute();
+      const loading = ref(false);
+      const frameRef = ref<HTMLFrameElement | null>(null);
+      const frameSrc = ref<string>('');
+
+      if (unref(currentRoute.meta)?.frameSrc) {
+        frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
+      }
+
+      function hideLoading() {
+        loading.value = false;
+      }
+
+      function init() {
+        nextTick(() => {
+          const iframe = unref(frameRef);
+          if (!iframe) return;
+          const _frame = iframe as any;
+          if (_frame.attachEvent) {
+            _frame.attachEvent('onload', () => {
+              hideLoading();
+            });
+          } else {
+            iframe.onload = () => {
+              hideLoading();
+            };
+          }
+        });
+      }
+
+      onMounted(() => {
+        loading.value = true;
+        init();
+      });
+
+      return {
+        loading,
+        frameRef,
+        frameSrc,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .frame {
+    width: 100%;
+    height: 100vh;
+
+    &-iframe {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      border: 0;
+      box-sizing: border-box;
+    }
+  }
+</style>

src/views/list/basicList/index.vue

@@ -285,7 +285,7 @@
       });
 
       const [register, {}] = useForm({
-        gridProps: { cols: '4' },
+        gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
         labelWidth: 80,
         schemas,
       });