canrd-outside / order-erp-front · Commits

Commit a1ffb61804940f1ebaea741b0df41485ad95d5f2

Authored by vben
1 parent 84b8302c

perf(table): optimize effect performance

Inline Side-by-side
Showing 18 changed files with 132 additions and 142 deletions
src/components/Container/src/collapse/CollapseContainer.vue
  View file @a1ffb61
1 1 <template>
2 2 <div class="collapse-container p-2">
3 3 <CollapseHeader v-bind="$props" :show="show" @expand="handleExpand">
4   - <template #title>
5   - <slot name="title" />
6   - </template>
  4 + <template #title>
  5 + <slot name="title" />
  6 + </template>
7 7 </CollapseHeader>
8 8 <CollapseTransition :enable="canExpan">
9 9 <Skeleton v-if="loading" />
... ... @@ -102,7 +102,7 @@
102 102 <style lang="less">
103 103 .collapse-container {
104 104 background: #fff;
105   - border-radius: 8px;
  105 + border-radius: 2px;
106 106 transition: all 0.3s ease-in-out;
107 107  
108 108 &.no-shadow {
... ...
src/components/Menu/src/index.less
  View file @a1ffb61
... ... @@ -2,12 +2,13 @@
2 2  
3 3 .active-style() {
4 4 color: @white;
  5 + // background: @primary-color !important;
5 6 background: linear-gradient(
6 7 118deg,
7 8 rgba(@primary-color, 0.8),
8 9 rgba(@primary-color, 1)
9 10 ) !important;
10   - border-radius: 2px;
  11 + // border-radius: 2px;
11 12 box-shadow: 0 0 4px 1px rgba(@primary-color, 0.7);
12 13 }
13 14  
... ...
src/components/Table/src/BasicTable.vue
  View file @a1ffb61
... ... @@ -21,8 +21,8 @@
21 21 </BasicForm>
22 22 <Table
23 23 ref="tableElRef"
24   - :rowClassName="getRowClassName"
25 24 v-bind="getBindValues"
  25 + :rowClassName="getRowClassName"
26 26 v-show="getEmptyDataIsShowTable"
27 27 @change="handleTableChange"
28 28 >
... ... @@ -33,9 +33,6 @@
33 33 </div>
34 34 </template>
35 35 <script lang="ts">
36   - import { defineComponent, ref, computed, unref, watch, nextTick, toRaw } from 'vue';
37   - import { Table } from 'ant-design-vue';
38   - import { basicProps } from './props';
39 36 import type {
40 37 BasicTableProps,
41 38 FetchParams,
... ... @@ -45,12 +42,18 @@
45 42 SorterResult,
46 43 TableCustomRecord,
47 44 } from './types/table';
  45 + import { PaginationProps } from './types/pagination';
48 46  
49   - import { isFunction, isString } from '/@/utils/is';
50   -
  47 + import { defineComponent, ref, computed, unref, watch, nextTick, toRaw } from 'vue';
  48 + import { Table } from 'ant-design-vue';
51 49 import renderTitle from './components/renderTitle';
52 50 import renderFooter from './components/renderFooter';
53 51 import renderExpandIcon from './components/renderExpandIcon';
  52 + import { BasicForm, FormProps, useForm } from '/@/components/Form/index';
  53 +
  54 + import { isFunction, isString } from '/@/utils/is';
  55 + import { deepMerge } from '/@/utils';
  56 + import { omit } from 'lodash-es';
54 57  
55 58 import { usePagination } from './hooks/usePagination';
56 59 import { useColumns } from './hooks/useColumns';
... ... @@ -59,13 +62,10 @@
59 62 import { useRowSelection } from './hooks/useRowSelection';
60 63 import { useTableScroll } from './hooks/useTableScroll';
61 64 import { provideTable } from './hooks/useProvinceTable';
62   - import { BasicForm, FormProps, useForm } from '/@/components/Form/index';
63   - import { omit } from 'lodash-es';
64   - import { ROW_KEY } from './const';
65   - import { PaginationProps } from './types/pagination';
66   - import { deepMerge } from '/@/utils';
67   - import { useEvent } from '/@/hooks/event/useEvent';
68 65  
  66 + import { useEvent } from '/@/hooks/event/useEvent';
  67 + import { basicProps } from './props';
  68 + import { ROW_KEY } from './const';
69 69 import './style/index.less';
70 70 export default defineComponent({
71 71 props: basicProps,
... ...
src/components/Table/src/hooks/useColumns.ts
  View file @a1ffb61
... ... @@ -101,7 +101,7 @@ export function useColumns(
101 101 columnsRef.value = columns as any;
102 102 } else {
103 103 const newColumns = unref(cacheColumnsRef).filter((item) =>
104   - (columns as string[]).includes(item.key! || item.dataIndex!)
  104 + (columns as string[]).includes(`${item.key}`! || item.dataIndex!)
105 105 );
106 106 columnsRef.value = newColumns;
107 107 }
... ...
src/components/Table/src/hooks/useDataSource.ts
  View file @a1ffb61
1   -import { useTimeout } from '/@/hooks/core/useTimeout';
2   -import { BasicTableProps, FetchParams } from '../types/table';
3   -import { PaginationProps } from '../types/pagination';
  1 +import type { BasicTableProps, FetchParams } from '../types/table';
  2 +import type { PaginationProps } from '../types/pagination';
  3 +
4 4 import { watch, ref, unref, ComputedRef, computed, onMounted, Ref } from 'vue';
  5 +
  6 +import { useTimeout } from '/@/hooks/core/useTimeout';
  7 +
5 8 import { buildUUID } from '/@/utils/uuid';
6 9 import { isFunction, isBoolean } from '/@/utils/is';
7   -import { FETCH_SETTING, ROW_KEY } from '../const';
8 10 import { get } from 'lodash-es';
  11 +
9 12 import { useProps } from './useProps';
10 13  
  14 +import { FETCH_SETTING, ROW_KEY } from '../const';
11 15 interface ActionType {
12 16 getPaginationRef: ComputedRef<false | PaginationProps>;
13 17 setPagination: (info: Partial<PaginationProps>) => void;
... ...
src/components/Table/src/hooks/usePagination.tsx
  View file @a1ffb61
  1 +import type { PaginationProps } from '../types/pagination';
  2 +import type { BasicTableProps } from '../types/table';
  3 +
1 4 import { computed, unref, ref, ComputedRef } from 'vue';
2   -import { PaginationProps } from '../types/pagination';
3   -import { isBoolean } from '/@/utils/is';
4 5 import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
5 6  
  7 +import { isBoolean } from '/@/utils/is';
  8 +
6 9 import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../const';
7 10 import { useProps } from './useProps';
8   -import { BasicTableProps } from '../..';
9 11 export function usePagination(refProps: ComputedRef<BasicTableProps>) {
10 12 const configRef = ref<PaginationProps>({});
11 13 const { propsRef } = useProps(refProps);
... ...
src/components/Table/src/hooks/useProps.ts
  View file @a1ffb61
1 1 import { Ref, ref, watch, unref } from 'vue';
2   -import { BasicTableProps } from '../types/table';
  2 +
  3 +import type { BasicTableProps } from '../types/table';
3 4  
4 5 /**
5 6 * @description:
... ...
src/components/Table/src/hooks/useProvinceTable.ts
  View file @a1ffb61
1 1 import type { Ref } from 'vue';
  2 +import type { TableActionType } from '../types/table';
  3 +
2 4 import { provide, inject } from 'vue';
3   -import { TableActionType } from '../types/table';
4 5  
5 6 const key = Symbol('table');
6 7  
... ...
src/components/Table/src/hooks/useRowSelection.ts
  View file @a1ffb61
1   -import { computed, ref, unref, ComputedRef } from 'vue';
2 1 import type { BasicTableProps, TableRowSelection } from '../types/table';
  2 +
  3 +import { computed, ref, unref, ComputedRef } from 'vue';
3 4 import { useProps } from './useProps';
4 5  
5 6 /* eslint-disable */
... ... @@ -28,6 +29,7 @@ export function useRowSelection(refProps: ComputedRef&lt;BasicTableProps&gt;, emit: Em
28 29 ...rowSelection,
29 30 };
30 31 });
  32 +
31 33 function setSelectedRowKeys(rowKeys: string[]) {
32 34 selectedRowKeysRef.value = rowKeys;
33 35 }
... ...
src/components/Table/src/hooks/useTable.ts
  View file @a1ffb61
1 1 import type { BasicTableProps, TableActionType, FetchParams, BasicColumn } from '../types/table';
2 2 import type { PaginationProps } from '../types/pagination';
  3 +
3 4 import { ref, getCurrentInstance, onUnmounted, unref } from 'vue';
4 5 import { isProdMode } from '/@/utils/env';
5 6  
... ...
src/components/Table/src/hooks/useTableScroll.ts
  View file @a1ffb61
1   -import { BasicTableProps } from '../types/table';
  1 +import type { BasicTableProps } from '../types/table';
2 2 import { computed, Ref, onMounted, unref, ref, nextTick, ComputedRef, watch } from 'vue';
  3 +
  4 +import { injectModal } from '/@/components/Modal/src/provideModal';
  5 +
3 6 import { getViewportOffset } from '/@/utils/domUtils';
4   -import { triggerWindowResize } from '/@/utils/event/triggerWindowResizeEvent';
5 7 import { isBoolean } from '/@/utils/is';
6   -import { useTimeout } from '/@/hooks/core/useTimeout';
  8 +
7 9 import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
8 10 import { useProps } from './useProps';
9   -import { injectModal } from '/@/components/Modal/src/provideModal';
10 11  
11 12 export function useTableScroll(refProps: ComputedRef<BasicTableProps>, tableElRef: Ref<any>) {
12 13 const { propsRef } = useProps(refProps);
... ... @@ -29,7 +30,9 @@ export function useTableScroll(refProps: ComputedRef&lt;BasicTableProps&gt;, tableElRe
29 30 calcTableHeight();
30 31 }
31 32  
32   - async function calcTableHeight(cb?: () => void) {
  33 + let paginationEl: HTMLElement | null;
  34 + let footerEl: HTMLElement | null;
  35 + async function calcTableHeight() {
33 36 const { canResize, resizeHeightOffset, pagination, maxHeight } = unref(propsRef);
34 37 if (!canResize) return;
35 38  
... ... @@ -39,40 +42,44 @@ export function useTableScroll(refProps: ComputedRef&lt;BasicTableProps&gt;, tableElRe
39 42  
40 43 const tableEl: Element = table.$el;
41 44 if (!tableEl) return;
42   -
43   - const el: HTMLElement | null = tableEl.querySelector('.ant-table-thead ');
  45 + const headEl = tableEl.querySelector('.ant-table-thead ');
44 46 // const layoutMain: Element | null = document.querySelector('.default-layout__main ');
45   - if (!el) return;
  47 + if (!headEl) return;
46 48  
47 49 // ่กจๆ ผ่ท็ฆปๅบ•้ƒจ้ซ˜ๅบฆ
48   - const { bottomIncludeBody } = getViewportOffset(el);
  50 + const { bottomIncludeBody } = getViewportOffset(headEl);
49 51 // ่กจๆ ผ้ซ˜ๅบฆ+่ท็ฆปๅบ•้ƒจ้ซ˜ๅบฆ-่‡ชๅฎšไน‰ๅ็งป้‡
50 52  
51 53 const paddingHeight = 32;
52 54 const borderHeight = 2 * 2;
53 55 // ๅˆ†้กตๅ™จ้ซ˜ๅบฆ
54 56  
55   - // TODO ๅ…ˆๅ›บๅฎš20
56   - const paginationHeight = 20;
57   - // if (!isBoolean(pagination)) {
58   - // const paginationDom = tableEl.querySelector('.ant-pagination') as HTMLElement;
59   - // if (paginationDom) {
60   - // const offsetHeight = paginationDom.offsetHeight;
61   - // paginationHeight += offsetHeight || 0;
62   - // }
63   - // }
  57 + let paginationHeight = 2;
  58 + if (!isBoolean(pagination)) {
  59 + if (!paginationEl) {
  60 + paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement;
  61 + }
  62 + if (paginationEl) {
  63 + const offsetHeight = paginationEl.offsetHeight;
  64 + paginationHeight += offsetHeight || 0;
  65 + } else {
  66 + // TODO ๅ…ˆๅ›บๅฎš24
  67 + paginationHeight += 24;
  68 + }
  69 + }
64 70  
65 71 let footerHeight = 0;
66 72 if (!isBoolean(pagination)) {
67   - const footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
68   - if (footerEl) {
  73 + if (!footerEl) {
  74 + footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
  75 + } else {
69 76 const offsetHeight = footerEl.offsetHeight;
70 77 footerHeight += offsetHeight || 0;
71 78 }
72 79 }
73 80 let headerHeight = 0;
74   - if (el) {
75   - headerHeight = (el as HTMLElement).offsetHeight;
  81 + if (headEl) {
  82 + headerHeight = (headEl as HTMLElement).offsetHeight;
76 83 }
77 84 tableHeightRef.value =
78 85 bottomIncludeBody -
... ... @@ -82,13 +89,13 @@ export function useTableScroll(refProps: ComputedRef&lt;BasicTableProps&gt;, tableElRe
82 89 paginationHeight -
83 90 footerHeight -
84 91 headerHeight;
85   - useTimeout(() => {
  92 +
  93 + setTimeout(() => {
86 94 tableHeightRef.value =
87 95 tableHeightRef.value! > maxHeight! ? (maxHeight as number) : tableHeightRef.value;
88   - cb && cb();
89 96 // ่งฃๅ†ณ่กจๆ ผๆ”พmodalๅ†…็š„ๆ—ถๅ€™๏ผŒmodal่‡ช้€‚ๅบ”้ซ˜ๅบฆ่ฎก็ฎ—้—ฎ้ข˜
90 97 redoModalHeight && redoModalHeight();
91   - }, 0);
  98 + }, 16);
92 99 }
93 100  
94 101 const getCanResize = computed(() => {
... ... @@ -98,24 +105,22 @@ export function useTableScroll(refProps: ComputedRef&lt;BasicTableProps&gt;, tableElRe
98 105  
99 106 useWindowSizeFn(calcTableHeight, 100);
100 107  
101   - // function clear() {
102   - // window.clearInterval(timer);
103   - // }
104   -
105 108 onMounted(() => {
106 109 if (unref(getCanResize)) {
107   - calcTableHeight();
108   - const hasFixedLeft = (unref(propsRef).columns || []).some((item) => item.fixed === 'left');
109   - // TODO antv table้—ฎ้ข˜ๆƒ…ๅ†ตๅคชๅคš๏ผŒๅช่ƒฝๅ…ˆ็”จไธ‹้ขๆ–นๅผๅฎšๆ—ถๅ™จhack
110   - useTimeout(() => {
111   - calcTableHeight(() => {
112   - // ๆœ‰ๅทฆไพงๅ›บๅฎšๅˆ—็š„ๆ—ถๅ€™ๆ‰ๆœ‰้—ฎ้ข˜
113   - hasFixedLeft &&
114   - useTimeout(() => {
115   - triggerWindowResize();
116   - }, 300);
117   - });
118   - }, 200);
  110 + nextTick(() => {
  111 + calcTableHeight();
  112 + });
  113 + // const hasFixedLeft = (unref(propsRef).columns || []).some((item) => item.fixed === 'left');
  114 + // // TODO antv table้—ฎ้ข˜ๆƒ…ๅ†ตๅคชๅคš๏ผŒๅช่ƒฝๅ…ˆ็”จไธ‹้ขๆ–นๅผๅฎšๆ—ถๅ™จhack
  115 + // useTimeout(() => {
  116 + // calcTableHeight(() => {
  117 + // // ๆœ‰ๅทฆไพงๅ›บๅฎšๅˆ—็š„ๆ—ถๅ€™ๆ‰ๆœ‰้—ฎ้ข˜
  118 + // hasFixedLeft &&
  119 + // useTimeout(() => {
  120 + // triggerWindowResize();
  121 + // }, 300);
  122 + // });
  123 + // }, 200);
119 124 }
120 125 });
121 126 const getScrollRef = computed(() => {
... ...
src/components/Tree/src/BasicTree.tsx
  View file @a1ffb61
  1 +import type { ReplaceFields, TreeItem, Keys, CheckKeys, InsertNodeParams } from './types';
  2 +
1 3 import { defineComponent, reactive, computed, unref, ref, watchEffect } from 'vue';
2 4 import { Tree } from 'ant-design-vue';
3   -import { extendSlots } from '/@/utils/helper/tsxHelper';
4   -import { useContextMenu, ContextMenuItem } from '/@/hooks/web/useContextMenu';
5   -import { basicProps } from './props';
6   -import { isFunction } from '/@/utils/is';
7   -import { omit } from 'lodash-es';
8 5 import { DownOutlined } from '@ant-design/icons-vue';
9 6  
10   -import type { ReplaceFields, TreeItem, Keys, CheckKeys, InsertNodeParams } from './types';
  7 +import { useContextMenu, ContextMenuItem } from '/@/hooks/web/useContextMenu';
  8 +
  9 +import { isFunction } from '/@/utils/is';
  10 +import { omit, cloneDeep } from 'lodash-es';
  11 +import { forEach } from '/@/utils/helper/treeHelper';
  12 +import { extendSlots } from '/@/utils/helper/tsxHelper';
11 13 import { tryTsxEmit } from '/@/utils/helper/vueHelper';
12 14  
  15 +import { basicProps } from './props';
  16 +
13 17 import './index.less';
14   -import { forEach } from '/@/utils/helper/treeHelper';
15   -import { cloneDeep } from 'lodash-es';
16 18  
17 19 interface State {
18 20 expandedKeys: Keys;
... ... @@ -72,7 +74,6 @@ export default defineComponent({
72 74 if (!data) {
73 75 return null;
74 76 }
75   -
76 77 return data.map((item) => {
77 78 const { title: titleField, key: keyField, children: childrenField } = unref(
78 79 getReplaceFields
... ... @@ -94,6 +95,7 @@ export default defineComponent({
94 95 );
95 96 });
96 97 }
  98 +
97 99 // ๅค„็†ๅณ้”ฎไบ‹ไปถ
98 100 async function handleRightClick({ event, node }: any) {
99 101 const { rightMenuList: menuList = [], beforeRightClick } = props;
... ... @@ -154,6 +156,7 @@ export default defineComponent({
154 156 }
155 157 return res as string[] | number[];
156 158 }
  159 +
157 160 /**
158 161 * ๆทปๅŠ ่Š‚็‚น
159 162 */
... ...
src/components/VirtualScroll/src/index.tsx
  View file @a1ffb61
... ... @@ -75,6 +75,7 @@ export default defineComponent({
75 75 function getFirst(): number {
76 76 return Math.floor(state.scrollTop / unref(getItemHeightRef));
77 77 }
  78 +
78 79 function onScroll() {
79 80 const wrapEl = unref(wrapElRef);
80 81 if (!wrapEl) {
... ... @@ -84,10 +85,12 @@ export default defineComponent({
84 85 state.first = getFirst();
85 86 state.last = getLast(state.first);
86 87 }
  88 +
87 89 function renderChildren() {
88 90 const { items = [] } = props;
89 91 return items.slice(unref(getFirstToRenderRef), unref(getLastToRenderRef)).map(genChild);
90 92 }
  93 +
91 94 function genChild(item: any, index: number) {
92 95 index += unref(getFirstToRenderRef);
93 96  
... ... @@ -98,6 +101,7 @@ export default defineComponent({
98 101 </div>
99 102 );
100 103 }
  104 +
101 105 onMounted(() => {
102 106 state.last = getLast(0);
103 107 nextTick(() => {
... ...
src/design/ant/pagination.less
  View file @a1ffb61
1 1 .ant-pagination {
2 2 &.mini {
3   - height: 20px;
4   - font-size: 13px;
5   -
6 3 .ant-pagination-prev,
7 4 .ant-pagination-next {
8   - width: 20px;
9   - height: 20px;
10   - min-width: 20px;
11   - line-height: 20px;
12   - color: @border-color-shallow-dark;
  5 + font-size: 12px;
  6 + color: @text-color-base;
13 7 border: 1px solid;
14 8 }
15 9  
... ... @@ -17,15 +11,23 @@
17 11 .ant-pagination-next:hover,
18 12 .ant-pagination-item:focus,
19 13 .ant-pagination-item:hover {
20   - color: @primary-color;
21   - border: 1px solid @primary-color;
  14 + a {
  15 + color: @primary-color;
  16 + }
22 17 }
23 18  
  19 + .ant-pagination-prev,
  20 + .ant-pagination-next,
24 21 .ant-pagination-item {
25   - height: 20px;
26   - min-width: 20px;
27   - margin: 0 3px;
28   - line-height: 20px;
  22 + margin: 0 4px;
  23 + background: #f4f4f5 !important;
  24 + border: none;
  25 + border-radius: none !important;
  26 +
  27 + a {
  28 + margin-top: 1px;
  29 + color: #606266;
  30 + }
29 31  
30 32 &:last-child {
31 33 margin-right: 0 !important;
... ... @@ -33,58 +35,26 @@
33 35 }
34 36  
35 37 .ant-pagination-item-active {
36   - background: @primary-color;
  38 + background: @primary-color !important;
  39 + border: none;
  40 + border-radius: none !important;
37 41  
38 42 a {
39   - color: @white;
  43 + color: @white !important;
40 44 }
41 45 }
42 46  
43 47 .ant-pagination-options {
44   - margin-left: 20px;
45   - }
46   -
47   - .ant-select-sm .ant-select-selection--single {
48   - height: 20px;
49   - }
50   -
51   - .ant-pagination-options,
52   - .ant-pagination-total-text,
53   - .ant-pagination-options-quick-jumper {
54   - height: 20px;
55   - line-height: 20px;
56   - }
57   -
58   - .ant-select-selection__rendered {
59   - height: 18px;
60   - line-height: 18px;
61   - }
62   -
63   - .ant-pagination-total-text,
64   - .ant-select-selection__rendered,
65   - .ant-select-dropdown-menu-item,
66   - .ant-pagination-options-quick-jumper {
67   - font-size: 13px;
  48 + margin-left: 12px;
68 49 }
69 50  
70 51 .ant-pagination-options-quick-jumper input {
71   - width: 40px;
72   - height: 20px;
  52 + height: 22px;
73 53 margin: 0 6px;
74   - line-height: 20px;
  54 + line-height: 22px;
75 55 text-align: center;
76 56 }
77 57  
78   - .ant-pagination-jump-prev,
79   - .ant-pagination-jump-next {
80   - height: 20px;
81   - line-height: 20px;
82   - }
83   -
84   - .ant-pagination-options-size-changer.ant-select {
85   - margin-right: 20px;
86   - }
87   -
88 58 .ant-select-arrow {
89 59 color: @border-color-shallow-dark;
90 60 }
... ...
src/layouts/Logo.vue
  View file @a1ffb61
... ... @@ -79,6 +79,7 @@
79 79 align-items: center;
80 80 padding-left: 16px;
81 81 cursor: pointer;
  82 + justify-content: center;
82 83  
83 84 .logo-title {
84 85 display: none;
... ...
src/layouts/default/index.less
  View file @a1ffb61
... ... @@ -103,7 +103,7 @@
103 103 padding: 0;
104 104 line-height: @multiple-height;
105 105 background: @border-color-shallow-light;
106   - box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.12);
  106 + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
107 107 }
108 108 }
109 109  
... ...
src/layouts/default/multitabs/TabContent.tsx
  View file @a1ffb61
... ... @@ -5,7 +5,7 @@ import { getScaleAction, TabContentProps } from &#39;./tab.data&#39;;
5 5 import { defineComponent, unref, computed } from 'vue';
6 6 import { Dropdown } from '/@/components/Dropdown/index';
7 7 import Icon from '/@/components/Icon/index';
8   -import { DoubleRightOutlined } from '@ant-design/icons-vue';
  8 +import { RightOutlined } from '@ant-design/icons-vue';
9 9 import { appStore } from '/@/store/modules/app';
10 10  
11 11 import { TabContentEnum } from './tab.data';
... ... @@ -74,7 +74,7 @@ export default defineComponent({
74 74 function renderExtraContent() {
75 75 return (
76 76 <span class={`multiple-tabs-content__extra `}>
77   - <DoubleRightOutlined />
  77 + <RightOutlined />
78 78 </span>
79 79 );
80 80 }
... ...
src/layouts/default/multitabs/index.less
  View file @a1ffb61
... ... @@ -20,6 +20,7 @@
20 20  
21 21 .ant-tabs-tab {
22 22 height: calc(@multiple-height - 2px);
  23 + padding-right: 12px;
23 24 line-height: calc(@multiple-height - 2px);
24 25 color: @text-color-call-out;
25 26 background: @white;
... ... @@ -37,17 +38,10 @@
37 38 &:hover {
38 39 svg {
39 40 width: 0.8em;
40   - transition: all 0.1s;
41 41 }
42 42 }
43 43 }
44 44  
45   - &:hover {
46   - .ant-tabs-close-x {
47   - display: block;
48   - }
49   - }
50   -
51 45 > div {
52 46 display: flex;
53 47 justify-content: center;
... ... @@ -106,9 +100,10 @@
106 100 width: @multiple-height;
107 101 height: @multiple-height;
108 102 line-height: @multiple-height;
109   - color: @primary-color;
  103 + color: #999;
110 104 text-align: center;
111 105 cursor: pointer;
  106 + border-left: 1px solid #eee;
112 107 // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
113 108  
114 109 span[role='img'] {
... ...