fix: 左侧菜单超出屏幕不能滚动问题

Author: buqiyuan

package.json

@@ -34,7 +34,7 @@
     "nprogress": "^1.0.0-1",
     "pinia": "2.0.9",
     "qs": "^6.10.2",
-    "socket.io-client": "4.4.0",
+    "socket.io-client": "4.4.1",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.26",
     "vue-i18n": "^9.2.0-beta.26",

src/components/core/schema-form/schema-form.vue

@@ -38,7 +38,7 @@
   } from 'vue';
   import { Form, Row } from 'ant-design-vue';
   import { formProps } from 'ant-design-vue/lib/form';
-  import { isNullOrUnDef, isObject, isArray, isFunction, isBoolean } from '@/utils/is';
+  import { isNullOrUnDef, isObject, isArray, isFunction, isBoolean, isString } from '@/utils/is';
   import { deepMerge } from '@/utils/';
   import SchemaFormItem from './schema-form-item.vue';
   import type { FormItemSchema, FormSchema, FormActionType } from './types/form';
@@ -71,7 +71,7 @@
       let oldFormSchema: FormSchema;
       // TODO 将formSchema克隆一份，避免修改原有的formSchema
       // TODO 类型为FormSchema 提示：类型实例化过深，且可能无限
-      const formSchemaRef = ref<any>({});
+      const formSchemaRef = ref<FormSchema>(cloneDeep(props.formSchema));
       // 表单项数据
       const formModel = reactive({ ...props.initialValues });
       // 表单默认数据
@@ -172,7 +172,9 @@
        */
       function itemIsDateType(key: string) {
         return unref(formSchemaRef).schemas.some((item) => {
-          return item.field === key ? dateItemType.includes(item.component) : false;
+          return item.field === key && isString(item.component)
+            ? dateItemType.includes(item.component)
+            : false;
         });
       }
 
@@ -191,7 +193,9 @@
           let value = values[key];
 
           const hasKey = Reflect.has(values, key);
-          value = handleInputNumberValue(schema?.component, value);
+          if (isString(schema?.component)) {
+            value = handleInputNumberValue(schema?.component, value);
+          }
           // 0| '' is allow
           if (hasKey && fields.includes(key)) {
             // time type
@@ -227,7 +231,7 @@
         if (isArray(data)) {
           updateData = [...data];
         }
-
+        // @ts-ignore
         unref(formSchemaRef).schemas = updateData as FormItemSchema[];
       }
 

src/components/core/schema-form/types/form.ts

@@ -52,7 +52,7 @@ export type RegisterFn = (formInstance: FormActionType) => void;
 export type UseFormReturnType = [RegisterFn, FormActionType];
 
 /** 表单 */
-export interface FormSchema extends FormProps {
+export interface FormSchema<T = any> extends FormProps {
   // Form value
   model?: any;
   // The width of all items in the entire form
@@ -69,7 +69,7 @@ export interface FormSchema extends FormProps {
   baseColProps?: Partial<ColEx>;
 
   // Form configuration rules
-  schemas: FormItemSchema<any>[];
+  schemas: FormItemSchema<T>[];
   // Function values used to merge into dynamic control form items
   mergeDynamicData?: any;
   // Compact mode for search forms
@@ -116,9 +116,9 @@ export interface FormSchema extends FormProps {
   transformDateFunc?: (date: any) => string;
 }
 /** 表单项 */
-export interface FormItemSchema<T = string> {
+export interface FormItemSchema<T = any> {
   /** 字段名 */
-  field: T extends string ? string : keyof T;
+  field: T extends any ? string : keyof T;
   // Event name triggered by internal value change, default change
   changeEvent?: string;
   // Variable name bound to v-model Default value

src/layout/menu/menu.vue

@@ -1,18 +1,19 @@
 <template>
-  <Menu
-    v-model:open-keys="state.openKeys"
-    v-model:selected-keys="state.selectedKeys"
-    mode="inline"
-    theme="dark"
-    :collapsed="props.collapsed"
-    collapsible
-    class="menu-container"
-    @click="clickMenuItem"
-  >
-    <template v-for="item in menus" :key="item.name">
-      <MenuItem :menu-info="item" />
-    </template>
-  </Menu>
+  <div class="menu-container">
+    <Menu
+      v-model:open-keys="state.openKeys"
+      v-model:selected-keys="state.selectedKeys"
+      mode="inline"
+      theme="dark"
+      :collapsed="props.collapsed"
+      collapsible
+      @click="clickMenuItem"
+    >
+      <template v-for="item in menus" :key="item.name">
+        <MenuItem :menu-info="item" />
+      </template>
+    </Menu>
+  </div>
 </template>
 
 <script setup lang="ts">

src/layout/tabs/tabs-view.vue

@@ -24,7 +24,7 @@
                   <close-outlined />
                   {{ $t('layout.multipleTab.close') }}
                 </Menu.Item>
-                <a-menu-divider />
+                <Menu.Divider />
                 <Menu.Item key="3" @click="closeLeft(pageItem)">
                   <vertical-right-outlined />
                   {{ $t('layout.multipleTab.closeLeft') }}
@@ -33,7 +33,7 @@
                   <vertical-left-outlined />
                   {{ $t('layout.multipleTab.closeRight') }}
                 </Menu.Item>
-                <a-menu-divider />
+                <Menu.Divider />
                 <Menu.Item key="5" @click="closeOther(pageItem)">
                   <column-width-outlined />
                   {{ $t('layout.multipleTab.closeOther') }}
@@ -63,7 +63,7 @@
                 <close-outlined />
                 {{ $t('layout.multipleTab.close') }}
               </Menu.Item>
-              <a-menu-divider />
+              <Menu.Divider />
               <Menu.Item key="5" @click="closeOther(route)">
                 <column-width-outlined />
                 {{ $t('layout.multipleTab.closeOther') }}

src/views/system/permission/user/index.vue

@@ -32,9 +32,9 @@
                 >
                   编辑 <EditOutlined />
                 </Menu.Item>
-                <a-menu-item key="2" :disabled="!$auth('sys.dept.delete')" @click="delDept(key)">
+                <Menu.Item key="2" :disabled="!$auth('sys.dept.delete')" @click="delDept(key)">
                   删除 <DeleteOutlined />
-                </a-menu-item>
+                </Menu.Item>
               </Menu>
             </template>
           </Dropdown>
@@ -100,11 +100,8 @@
     SwapOutlined,
   } from '@ant-design/icons-vue';
   import { SplitPanel } from '@/components/basic/split-panel';
-  import {
-    DynamicTable,
-    type LoadDataParams,
-    type DynamicTableInstance,
-  } from '@/components/core/dynamic-table';
+  import { DynamicTable } from '@/components/core/dynamic-table';
+  import type { LoadDataParams, DynamicTableInstance } from '@/components/core/dynamic-table';
   import {
     deleteUsers,
     getUserListPage,

yarn.lock

@@ -8118,10 +8118,10 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-socket.io-client@4.4.0:
-  version "4.4.0"
-  resolved "https://registry.npmmirror.com/socket.io-client/download/socket.io-client-4.4.0.tgz?cache=0&sync_timestamp=1637241002786&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsocket.io-client%2Fdownload%2Fsocket.io-client-4.4.0.tgz#d6568ebd79ac12e2d6b628e7e90e60f1d48d99ff"
-  integrity sha512-g7riSEJXi7qCFImPow98oT8X++MSsHz6MMFRXkWNJ6uEROSHOa3kxdrsYWMq85dO+09CFMkcqlpjvbVXQl4z6g==
+socket.io-client@4.4.1:
+  version "4.4.1"
+  resolved "https://registry.npmmirror.com/socket.io-client/download/socket.io-client-4.4.1.tgz#b6aa9448149d09b8d0b2bbf3d2fac310631fdec9"
+  integrity sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==
   dependencies:
     "@socket.io/component-emitter" "~3.0.0"
     backo2 "~1.0.2"