feat(tabs): added tab folding

vbenjs · Jan 6, 2021 · 0e7c57b · 0e7c57b
1 parent 144ab57
commit 0e7c57b
Show file tree

Hide file tree

Showing 30 changed files with 271 additions and 177 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -6,6 +6,7 @@
 - 新增`mixSideFixed`配置。用于固定左侧混合模式菜单
 - modal 组件新增`height`和`min-height`属性
 - 新增`PageWrapper`组件。并应用于示例页面
+- 新增标签页折叠功能
 
 ### 🐛 Bug Fixes
 

diff --git a/mock/_createProductionServer.ts b/mock/_createProductionServer.ts
@@ -2,10 +2,18 @@ import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
 import userMock from './sys/user';
 import menuMock from './sys/menu';
 import tableDemoMock from './demo/table-demo';
+import accountDemoMock from './demo/account';
+import selectDemoMock from './demo/select-demo';
 
 /**
  * Used in a production environment. Need to manually import all modules
  */
 export function setupProdMockServer() {
-  createProdMockServer([...userMock, ...menuMock, ...tableDemoMock]);
+  createProdMockServer([
+    ...userMock,
+    ...menuMock,
+    ...tableDemoMock,
+    ...accountDemoMock,
+    ...selectDemoMock,
+  ]);
 }
diff --git a/src/components/Icon/src/index.vue b/src/components/Icon/src/index.vue
@@ -74,7 +74,7 @@
         }
       );
 
-      // watch(() => props.icon, update, { flush: 'post' });
+      watch(() => props.icon, update, { flush: 'post' });
 
       onMounted(update);
 

diff --git a/src/components/Menu/src/useOpenKeys.ts b/src/components/Menu/src/useOpenKeys.ts
@@ -16,16 +16,20 @@ export function useOpenKeys(
   mode: Ref<MenuModeEnum>,
   accordion: Ref<boolean>
 ) {
-  const { getCollapsed, getIsMixSidebar, getMixSideFixed } = useMenuSetting();
+  const { getCollapsed, getIsMixSidebar } = useMenuSetting();
 
   async function setOpenKeys(path: string) {
     if (mode.value === MenuModeEnum.HORIZONTAL) {
       return;
     }
-    const native = unref(getIsMixSidebar) && unref(getMixSideFixed);
+    const native = unref(getIsMixSidebar);
     useTimeoutFn(
       () => {
         const menuList = toRaw(menus.value);
+        if (menuList?.length === 0) {
+          menuState.openKeys = [];
+          return;
+        }
         if (!unref(accordion)) {
           menuState.openKeys = es6Unique([
             ...menuState.openKeys,

diff --git a/src/components/Modal/src/BasicModal.vue b/src/components/Modal/src/BasicModal.vue
@@ -51,7 +51,6 @@
     watchEffect,
     toRef,
     getCurrentInstance,
-    nextTick,
   } from 'vue';
 
   import Modal from './components/Modal';
@@ -111,7 +110,6 @@
             visible: unref(visibleRef),
             title: undefined,
           };
-
           return {
             ...opt,
             wrapClassName: unref(getWrapClassName),

diff --git a/src/components/Modal/src/components/ModalWrapper.vue b/src/components/Modal/src/components/ModalWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <ScrollContainer ref="wrapperRef" :style="wrapStyle">
+  <ScrollContainer ref="wrapperRef">
     <div ref="spinRef" :style="spinStyle" v-loading="loading" :loading-tip="loadingTip">
       <slot />
     </div>
@@ -62,19 +62,10 @@
         redoModalHeight: setModalHeight,
       });
 
-      const wrapStyle = computed(
-        (): CSSProperties => {
-          return {
-            minHeight: `${props.minHeight}px`,
-            height: `${unref(realHeightRef)}px`,
-            // overflow: 'auto',
-          };
-        }
-      );
-
       const spinStyle = computed(
         (): CSSProperties => {
           return {
+            minHeight: `${props.minHeight}px`,
             // padding 28
             height: `${unref(realHeightRef) - 28}px`,
           };
@@ -159,7 +150,7 @@
         }
       }
 
-      return { wrapStyle, wrapperRef, spinRef, spinStyle };
+      return { wrapperRef, spinRef, spinStyle };
     },
   });
 </script>
diff --git a/src/components/Modal/src/index.less b/src/components/Modal/src/index.less
@@ -21,12 +21,9 @@
   width: 520px;
   padding-bottom: 0;
 
-  .scroll-container {
+  .scrollbar {
     padding: 14px;
   }
-  // .ant-spin-nested-loading {
-  //   padding: 16px;
-  // }
 
   &-title {
     font-size: 16px;

diff --git a/src/components/Scrollbar/src/index.vue b/src/components/Scrollbar/src/index.vue
@@ -18,7 +18,8 @@
 </template>
 <script lang="ts">
   import { addResizeListener, removeResizeListener } from '/@/utils/event/resizeEvent';
-
+  import componentSetting from '/@/settings/componentSetting';
+  const { scrollbar } = componentSetting;
   import { toObject } from './util';
   import {
     defineComponent,
@@ -38,7 +39,7 @@
     props: {
       native: {
         type: Boolean,
-        default: false,
+        default: scrollbar?.native ?? false,
       },
       wrapStyle: {
         type: [String, Array],

diff --git a/src/components/Table/src/components/settings/ColumnSetting.vue b/src/components/Table/src/components/settings/ColumnSetting.vue
@@ -421,7 +421,7 @@
         // flex-wrap: wrap;
       }
 
-      .scroll-container {
+      .scrollbar {
         height: 220px;
       }
     }

diff --git a/src/components/Table/src/const.ts b/src/components/Table/src/const.ts
@@ -1,40 +1,24 @@
-import type { SorterResult } from './types/table';
+import componentSetting from '/@/settings/componentSetting';
+
+const { table } = componentSetting;
+
+const { pageSizeOptions, defaultPageSize, fetchSetting, defaultSortFn, defaultFilterFn } = table;
 
 export const ROW_KEY = 'key';
 
 // 可选的每页显示条数;
-export const PAGE_SIZE_OPTIONS = ['10', '50', '80', '100'];
+export const PAGE_SIZE_OPTIONS = pageSizeOptions;
 
 // 每页显示条数
-export const PAGE_SIZE = ~~PAGE_SIZE_OPTIONS[0];
+export const PAGE_SIZE = defaultPageSize;
 
 // 通用接口字段设置
-// 支持 xxx.xxx.xxx格式
-export const FETCH_SETTING = {
-  // 传给后台的当前页字段名
-  pageField: 'page',
-  // 传给后台的每页显示记录数字段名
-  sizeField: 'pageSize',
-  // 接口返回的表格数据字段名
-  listField: 'items',
-  // 接口返回的表格总数字段名
-  totalField: 'total',
-};
+export const FETCH_SETTING = fetchSetting;
 
 // 配置通用排序函数
-export function DEFAULT_SORT_FN(sortInfo: SorterResult) {
-  const { field, order } = sortInfo;
-  return {
-    // 传给后台的排序字段你
-    field,
-    // 传给后台的排序方式  asc/desc
-    order,
-  };
-}
-
-export function DEFAULT_FILTER_FN(data: Partial<Recordable<string[]>>) {
-  return data;
-}
+export const DEFAULT_SORT_FN = defaultSortFn;
+
+export const DEFAULT_FILTER_FN = defaultFilterFn;
 
 //  表格单元格默认布局
 export const DEFAULT_ALIGN = 'center';

diff --git a/src/hooks/setting/useMenuSetting.ts b/src/hooks/setting/useMenuSetting.ts
@@ -78,7 +78,9 @@ const getIsMixMode = computed(() => {
 });
 
 const getRealWidth = computed(() => {
-  return unref(getCollapsed) ? unref(getMiniWidthNumber) : unref(getMenuWidth);
+  return unref(getCollapsed) && !unref(getMixSideFixed)
+    ? unref(getMiniWidthNumber)
+    : unref(getMenuWidth);
 });
 
 const getMiniWidthNumber = computed(() => {
@@ -94,7 +96,6 @@ const getCalcContentWidth = computed(() => {
       ? SIDE_BAR_SHOW_TIT_MINI_WIDTH +
         (unref(getMixSideFixed) && unref(mixSideHasChildren) ? unref(getRealWidth) : 0)
       : unref(getRealWidth);
-
   return `calc(100% - ${unref(width)}px)`;
 });
 

diff --git a/src/hooks/setting/useMultipleTabSetting.ts b/src/hooks/setting/useMultipleTabSetting.ts
@@ -12,6 +12,8 @@ const getShowQuick = computed(() => unref(getMultipleTabSetting).showQuick);
 
 const getShowRedo = computed(() => unref(getMultipleTabSetting).showRedo);
 
+const getShowFold = computed(() => unref(getMultipleTabSetting).showFold);
+
 function setMultipleTabSetting(multiTabsSetting: Partial<MultiTabsSetting>) {
   appStore.commitProjectConfigState({ multiTabsSetting });
 }
@@ -24,5 +26,6 @@ export function useMultipleTabSetting() {
     getShowMultipleTab,
     getShowQuick,
     getShowRedo,
+    getShowFold,
   };
 }
diff --git a/src/hooks/web/useTabs.ts b/src/hooks/web/useTabs.ts
@@ -1,5 +1,6 @@
 import { tabStore } from '/@/store/modules/tab';
 import { appStore } from '/@/store/modules/app';
+import type { RouteLocationNormalized } from 'vue-router';
 
 export function useTabs() {
   function canIUseFn(): boolean {
@@ -21,5 +22,7 @@ export function useTabs() {
     closeRight: () => canIUseFn() && tabStore.closeRightTabAction(tabStore.getCurrentTab),
     closeOther: () => canIUseFn() && tabStore.closeOtherTabAction(tabStore.getCurrentTab),
     closeCurrent: () => canIUseFn() && tabStore.closeTabAction(tabStore.getCurrentTab),
+    close: (tab?: RouteLocationNormalized) =>
+      canIUseFn() && tabStore.closeTabAction(tab || tabStore.getCurrentTab),
   };
 }
diff --git a/src/layouts/default/setting/SettingDrawer.tsx b/src/layouts/default/setting/SettingDrawer.tsx
@@ -85,7 +85,7 @@ export default defineComponent({
       getShowSearch,
     } = useHeaderSetting();
 
-    const { getShowMultipleTab, getShowQuick, getShowRedo } = useMultipleTabSetting();
+    const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
 
     const getShowMenuRef = computed(() => {
       return unref(getShowMenu) && !unref(getIsHorizontal);
@@ -105,33 +105,6 @@ export default defineComponent({
             }}
             def={unref(getMenuType)}
           />
-          <SwitchItem
-            title={t('layout.setting.splitMenu')}
-            event={HandlerEnum.MENU_SPLIT}
-            def={unref(getSplit)}
-            disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
-          />
-          <SwitchItem
-            title={t('layout.setting.mixSidebarFixed')}
-            event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR}
-            def={unref(getMixSideFixed)}
-            disabled={!unref(getIsMixSidebar)}
-          />
-
-          <SwitchItem
-            title={t('layout.setting.closeMixSidebarOnChange')}
-            event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE}
-            def={unref(getCloseMixSidebarOnChange)}
-            disabled={!unref(getIsMixSidebar)}
-          />
-
-          <SelectItem
-            title={t('layout.setting.mixSidebarTrigger')}
-            event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}
-            def={unref(getMixSideTrigger)}
-            options={mixSidebarTriggerOptions}
-            disabled={!unref(getIsMixSidebar)}
-          />
         </>
       );
     }
@@ -170,6 +143,32 @@ export default defineComponent({
 
       return (
         <>
+          <SwitchItem
+            title={t('layout.setting.splitMenu')}
+            event={HandlerEnum.MENU_SPLIT}
+            def={unref(getSplit)}
+            disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
+          />
+          <SwitchItem
+            title={t('layout.setting.mixSidebarFixed')}
+            event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR}
+            def={unref(getMixSideFixed)}
+            disabled={!unref(getIsMixSidebar)}
+          />
+
+          <SwitchItem
+            title={t('layout.setting.closeMixSidebarOnChange')}
+            event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE}
+            def={unref(getCloseMixSidebarOnChange)}
+            disabled={!unref(getIsMixSidebar)}
+          />
+          <SwitchItem
+            title={t('layout.setting.menuCollapse')}
+            event={HandlerEnum.MENU_COLLAPSED}
+            def={unref(getCollapsed)}
+            disabled={!unref(getShowMenuRef)}
+          />
+
           <SwitchItem
             title={t('layout.setting.menuDrag')}
             event={HandlerEnum.MENU_HAS_DRAG}
@@ -188,17 +187,12 @@ export default defineComponent({
             def={unref(getAccordion)}
             disabled={!unref(getShowMenuRef)}
           />
-          <SwitchItem
-            title={t('layout.setting.menuCollapse')}
-            event={HandlerEnum.MENU_COLLAPSED}
-            def={unref(getCollapsed)}
-            disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
-          />
+
           <SwitchItem
             title={t('layout.setting.collapseMenuDisplayName')}
             event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
             def={unref(getCollapsedShowTitle)}
-            disabled={!unref(getShowMenuRef) || !unref(getCollapsed)}
+            disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)}
           />
 
           <SwitchItem
@@ -213,6 +207,13 @@ export default defineComponent({
             def={unref(getMenuFixed)}
             disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
           />
+          <SelectItem
+            title={t('layout.setting.mixSidebarTrigger')}
+            event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}
+            def={unref(getMixSideTrigger)}
+            options={mixSidebarTriggerOptions}
+            disabled={!unref(getIsMixSidebar)}
+          />
           <SelectItem
             title={t('layout.setting.topMenuLayout')}
             event={HandlerEnum.MENU_TOP_ALIGN}
@@ -299,6 +300,12 @@ export default defineComponent({
             def={unref(getShowQuick)}
             disabled={!unref(getShowMultipleTab)}
           />
+          <SwitchItem
+            title={t('layout.setting.tabsFoldBtn')}
+            event={HandlerEnum.TABS_SHOW_FOLD}
+            def={unref(getShowFold)}
+            disabled={!unref(getShowMultipleTab)}
+          />
 
           <SwitchItem
             title={t('layout.setting.sidebar')}

diff --git a/src/layouts/default/setting/enum.ts b/src/layouts/default/setting/enum.ts
@@ -39,6 +39,7 @@ export enum HandlerEnum {
   TABS_SHOW_QUICK,
   TABS_SHOW_REDO,
   TABS_SHOW,
+  TABS_SHOW_FOLD,
 
   LOCK_TIME,
   FULL_CONTENT,
-Original file line number
+Diff line change
@@ Expand Up / @@ -74,7 +74,7 @@ @@
             }
           );
-          // watch(() => props.icon, update, { flush: 'post' });
+          watch(() => props.icon, update, { flush: 'post' });
           onMounted(update);
@@ Expand Down @@