canrd-outside / order-erp-front · Commits

Commit 439291746fe237410140575be2a634a74e8ef382

Authored by vben
1 parent 4ff6b73c

perf: layout code adjustment

Inline Side-by-side
Showing 22 changed files with 387 additions and 421 deletions
src/layouts/default/LayoutContent.tsx
  View file @4392917
1   -import { defineComponent } from 'vue';
  1 +import { computed, defineComponent, unref } from 'vue';
2 2 import { Layout } from 'ant-design-vue';
  3 +import { FullLoading } from '/@/components/Loading/index';
  4 +
3 5 import { RouterView } from 'vue-router';
4 6  
5 7 import { ContentEnum } from '/@/enums/appEnum';
... ... @@ -7,14 +9,24 @@ import { appStore } from '/@/store/modules/app';
7 9 export default defineComponent({
8 10 name: 'DefaultLayoutContent',
9 11 setup() {
  12 + const getProjectConfigRef = computed(() => {
  13 + return appStore.getProjectConfig;
  14 + });
  15 +
10 16 return () => {
11   - const { getProjectConfig } = appStore;
12   - const { contentMode } = getProjectConfig;
  17 + const { contentMode, openPageLoading } = unref(getProjectConfigRef);
  18 + const { getPageLoading } = appStore;
  19 +
13 20 const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
14 21 return (
15   - <Layout.Content class={`layout-content ${wrapClass} `}>
16   - {() => <RouterView />}
17   - </Layout.Content>
  22 + <div class={[`default-layout__main`]}>
  23 + {openPageLoading && (
  24 + <FullLoading class={[`default-layout__loading`, !getPageLoading && 'hidden']} />
  25 + )}
  26 + <Layout.Content class={`layout-content ${wrapClass} `}>
  27 + {() => <RouterView />}
  28 + </Layout.Content>
  29 + </div>
18 30 );
19 31 };
20 32 },
... ...
src/layouts/default/LayoutSideBar.tsx
  View file @4392917
... ... @@ -2,13 +2,15 @@ import { computed, defineComponent, nextTick, onMounted, ref, unref } from &#39;vue&#39;
2 2  
3 3 import { Layout } from 'ant-design-vue';
4 4 import LayoutTrigger from './LayoutTrigger';
5   -import { menuStore } from '/@/store/modules/menu';
  5 +import LayoutMenu from '/@/layouts/default/menu/LayoutMenu';
6 6  
  7 +import { menuStore } from '/@/store/modules/menu';
7 8 import { appStore } from '/@/store/modules/app';
  9 +
8 10 import { MenuModeEnum, MenuSplitTyeEnum, TriggerEnum } from '/@/enums/menuEnum';
9 11 import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
  12 +
10 13 import { useDebounce } from '/@/hooks/core/useDebounce';
11   -import LayoutMenu from './LayoutMenu';
12 14  
13 15 export default defineComponent({
14 16 name: 'DefaultLayoutSideBar',
... ... @@ -111,13 +113,6 @@ export default defineComponent({
111 113 brokenRef.value = broken;
112 114 }
113 115  
114   - onMounted(() => {
115   - nextTick(() => {
116   - const [exec] = useDebounce(changeWrapWidth, 20);
117   - exec();
118   - });
119   - });
120   -
121 116 const getDragBarStyle = computed(() => {
122 117 if (menuStore.getCollapsedState) {
123 118 return { left: `${unref(getMiniWidth)}px` };
... ... @@ -136,6 +131,13 @@ export default defineComponent({
136 131 return trigger !== TriggerEnum.NONE && trigger === TriggerEnum.FOOTER;
137 132 });
138 133  
  134 + onMounted(() => {
  135 + nextTick(() => {
  136 + const [exec] = useDebounce(changeWrapWidth, 20);
  137 + exec();
  138 + });
  139 + });
  140 +
139 141 function handleSiderClick(e: ChangeEvent) {
140 142 if (!e || !e.target || e.target.className !== 'basic-menu__content') return;
141 143  
... ...
src/layouts/default/LayoutBreadcrumb.tsx renamed to src/layouts/default/header/LayoutBreadcrumb.tsx
  View file @4392917
src/layouts/default/LayoutHeader.tsx renamed to src/layouts/default/header/LayoutHeader.tsx
  View file @4392917
1 1 import { defineComponent, unref, computed, ref } from 'vue';
2 2  
3 3 import { Layout, Tooltip, Badge } from 'ant-design-vue';
4   -import Logo from '/@/layouts/Logo.vue';
  4 +import Logo from '/@/layouts/logo/index.vue';
5 5 import UserDropdown from './UserDropdown';
6   -import LayoutMenu from './LayoutMenu';
  6 +import LayoutMenu from '/@/layouts/default/menu/LayoutMenu';
7 7 import LayoutBreadcrumb from './LayoutBreadcrumb';
8   -import LockAction from './actions/LockActionItem';
9   -import LayoutTrigger from './LayoutTrigger';
10   -import NoticeAction from './actions/notice/NoticeActionItem.vue';
  8 +import LockAction from './LockActionItem';
  9 +import LayoutTrigger from '../LayoutTrigger';
  10 +import NoticeAction from './notice/NoticeActionItem.vue';
11 11 import {
12 12 RedoOutlined,
13 13 FullscreenExitOutlined,
... ... @@ -28,6 +28,8 @@ import { errorStore } from &#39;/@/store/modules/error&#39;;
28 28  
29 29 import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
30 30 import { GITHUB_URL } from '/@/settings/siteSetting';
  31 +
  32 +import './index.less';
31 33 export default defineComponent({
32 34 name: 'DefaultLayoutHeader',
33 35 setup() {
... ...
src/layouts/default/actions/LockActionItem.less renamed to src/layouts/default/header/LockActionItem.less
  View file @4392917
src/layouts/default/actions/LockActionItem.tsx renamed to src/layouts/default/header/LockActionItem.tsx
  View file @4392917
src/layouts/default/UserDropdown.tsx renamed to src/layouts/default/header/UserDropdown.tsx
  View file @4392917
... ... @@ -39,8 +39,7 @@ export default defineComponent({
39 39 function handleMenuClick(e: any) {
40 40 if (e.key === 'loginOut') {
41 41 handleLoginOut();
42   - }
43   - if (e.key === 'doc') {
  42 + } else if (e.key === 'doc') {
44 43 openDoc();
45 44 }
46 45 }
... ...
src/layouts/default/header/index.less 0 → 100644
  View file @4392917
  1 +@import (reference) '../../../design/index.less';
  2 +
  3 +.layout-header {
  4 + display: flex;
  5 + height: @header-height;
  6 + padding: 0 20px 0 0;
  7 + line-height: @header-height;
  8 + color: @white;
  9 + background: @white;
  10 + align-items: center;
  11 + justify-content: space-between;
  12 +
  13 + &__left {
  14 + display: flex;
  15 + flex-grow: 1;
  16 + align-items: center;
  17 +
  18 + .layout-trigger {
  19 + padding: 4px 10px 0 16px;
  20 + cursor: pointer;
  21 +
  22 + .anticon {
  23 + font-size: 17px;
  24 + }
  25 +
  26 + &.light {
  27 + &:hover {
  28 + background: @header-light-bg-hover-color;
  29 + }
  30 +
  31 + svg {
  32 + fill: #000;
  33 + }
  34 + }
  35 +
  36 + &.dark {
  37 + &:hover {
  38 + background: @header-dark-bg-hover-color;
  39 + }
  40 + }
  41 + }
  42 +
  43 + .layout-breadcrumb {
  44 + padding: 0 8px;
  45 + }
  46 + }
  47 +
  48 + &__content {
  49 + display: flex;
  50 + flex-grow: 1;
  51 + align-items: center;
  52 + }
  53 +
  54 + &__header--light {
  55 + background: @white;
  56 + border-bottom: 1px solid @header-light-bottom-border-color;
  57 +
  58 + .layout-header__menu {
  59 + height: calc(@header-height - 1px);
  60 +
  61 + .ant-menu-submenu {
  62 + height: @header-height;
  63 + line-height: @header-height;
  64 + }
  65 + }
  66 +
  67 + .layout-header__logo {
  68 + height: @header-height;
  69 + color: @text-color-base;
  70 +
  71 + img {
  72 + width: @logo-width;
  73 + height: @logo-width;
  74 + margin-right: 6px;
  75 + }
  76 +
  77 + &:hover {
  78 + background: @header-light-bg-hover-color;
  79 + }
  80 + }
  81 +
  82 + .layout-header__action {
  83 + &-item {
  84 + &:hover {
  85 + background: @header-light-bg-hover-color;
  86 + }
  87 + }
  88 +
  89 + &-icon {
  90 + color: @text-color-base;
  91 + }
  92 + }
  93 +
  94 + .layout-header__user-dropdown {
  95 + &:hover {
  96 + background: @header-light-bg-hover-color;
  97 + }
  98 + }
  99 +
  100 + .user-dropdown {
  101 + &__name {
  102 + color: @text-color-base;
  103 + }
  104 +
  105 + &__desc {
  106 + color: @header-light-desc-color;
  107 + }
  108 + }
  109 + }
  110 +
  111 + &__header--dark {
  112 + background: @header-dark-bg-color;
  113 +
  114 + .layout-header__action {
  115 + &-item {
  116 + &:hover {
  117 + background: @header-dark-bg-hover-color;
  118 + }
  119 + }
  120 + }
  121 +
  122 + .layout-header__logo {
  123 + height: @header-height;
  124 +
  125 + img {
  126 + width: @logo-width;
  127 + height: @logo-width;
  128 + margin-right: 10px;
  129 + }
  130 +
  131 + &:hover {
  132 + background: @header-dark-bg-hover-color;
  133 + }
  134 + }
  135 +
  136 + .layout-header__user-dropdown {
  137 + &:hover {
  138 + background: @header-dark-bg-hover-color;
  139 + }
  140 + }
  141 +
  142 + .breadcrumb {
  143 + &__item:last-child .breadcrumb__inner,
  144 + &__item:last-child &__inner a,
  145 + &__item:last-child &__inner a:hover,
  146 + &__item:last-child &__inner:hover {
  147 + font-weight: 400;
  148 + color: rgba(255, 255, 255, 0.6);
  149 + cursor: text;
  150 + }
  151 +
  152 + &__inner,
  153 + &__separator {
  154 + color: @white;
  155 + }
  156 + }
  157 + }
  158 +
  159 + &__logo {
  160 + padding: 0 10px;
  161 + }
  162 +
  163 + &__bread {
  164 + display: none;
  165 + flex: 1;
  166 + }
  167 +
  168 + &__action {
  169 + display: flex;
  170 + align-items: center;
  171 +
  172 + &-item {
  173 + display: flex;
  174 + height: @header-height;
  175 + padding: 0 2px;
  176 + font-size: 1.2em;
  177 + cursor: pointer;
  178 + align-items: center;
  179 + }
  180 +
  181 + &-icon {
  182 + padding: 0 8px;
  183 + }
  184 + }
  185 +
  186 + &__menu {
  187 + margin-left: 20px;
  188 + overflow: hidden;
  189 + align-items: center;
  190 + }
  191 +
  192 + &__user-dropdown {
  193 + height: @header-height;
  194 + padding: 0 0 0 10px;
  195 + }
  196 +
  197 + .user-dropdown {
  198 + display: flex;
  199 + padding-right: 10px;
  200 + font-size: 12px;
  201 + cursor: pointer;
  202 + align-items: center;
  203 +
  204 + img {
  205 + width: 26px;
  206 + height: 26px;
  207 + margin-right: 12px;
  208 + }
  209 +
  210 + &__header {
  211 + border-radius: 50%;
  212 + }
  213 + }
  214 +}
... ...
src/layouts/default/actions/notice/NoticeActionItem.vue renamed to src/layouts/default/header/notice/NoticeActionItem.vue
  View file @4392917
src/layouts/default/actions/notice/NoticeList.vue renamed to src/layouts/default/header/notice/NoticeList.vue
  View file @4392917
src/layouts/default/actions/notice/data.ts renamed to src/layouts/default/header/notice/data.ts
  View file @4392917
src/layouts/default/index.less
  View file @4392917
... ... @@ -30,7 +30,6 @@
30 30  
31 31 .layout-content {
32 32 position: relative;
33   - // height: 100%;
34 33  
35 34 &.fixed {
36 35 width: 1200px;
... ... @@ -38,30 +37,6 @@
38 37 }
39 38 }
40 39  
41   - .layout-menu {
42   - &__logo {
43   - height: @header-height;
44   - padding: 10px 4px 10px 10px;
45   -
46   - img {
47   - width: @logo-width;
48   - height: @logo-width;
49   - }
50   -
51   - &.light {
52   - .logo-title {
53   - color: @text-color-base;
54   - }
55   - }
56   -
57   - &.dark {
58   - .logo-title {
59   - color: @white;
60   - }
61   - }
62   - }
63   - }
64   -
65 40 .layout-sidebar {
66 41 background-size: 100% 100%;
67 42  
... ... @@ -99,312 +74,6 @@
99 74 }
100 75 }
101 76 }
102   -
103   - &__tabs {
104   - z-index: 10;
105   - height: @multiple-height;
106   - padding: 0;
107   - line-height: @multiple-height;
108   - background: @border-color-shallow-light;
109   - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
110   - }
111   -}
112   -
113   -.setting-drawer {
114   - .ant-drawer-body {
115   - padding-top: 0;
116   - background: @white;
117   - }
118   -
119   - &__footer {
120   - display: flex;
121   - flex-direction: column;
122   - align-items: center;
123   - }
124   -
125   - &__cell-item {
126   - display: flex;
127   - justify-content: space-between;
128   - margin: 16px 0;
129   - }
130   -
131   - &__theme-item {
132   - display: flex;
133   - flex-wrap: wrap;
134   - margin: 16px 0;
135   -
136   - span {
137   - display: inline-block;
138   - width: 20px;
139   - height: 20px;
140   - margin-top: 10px;
141   - margin-right: 10px;
142   - cursor: pointer;
143   - border-radius: 4px;
144   -
145   - svg {
146   - display: none;
147   - }
148   -
149   - &.active {
150   - svg {
151   - display: inline-block;
152   - margin-left: 4px;
153   - font-size: 0.8em;
154   - fill: @white;
155   - }
156   - }
157   - }
158   - }
159   -
160   - &__siderbar {
161   - display: flex;
162   -
163   - > div {
164   - position: relative;
165   -
166   - .check-icon {
167   - position: absolute;
168   - top: 40%;
169   - left: 40%;
170   - display: none;
171   - color: @primary-color;
172   -
173   - &.active {
174   - display: inline-block;
175   - }
176   - }
177   - }
178   -
179   - img {
180   - margin-right: 10px;
181   - cursor: pointer;
182   - }
183   - }
184   -}
185   -
186   -.ant-layout-header:not(.default-layout__tabs) {
187   - height: @header-height;
188   - line-height: @header-height;
189   -}
190   -
191   -.ant-layout-header.default-layout__tabs {
192   - height: @multiple-height + 2;
193   - line-height: @multiple-height + 2;
194   - background: @white;
195   -}
196   -
197   -.layout-header {
198   - display: flex;
199   - height: @header-height;
200   - padding: 0 20px 0 0;
201   - color: @white;
202   - background: @white;
203   - align-items: center;
204   - justify-content: space-between;
205   -
206   - &__content {
207   - flex-grow: 1;
208   - display: flex;
209   - // justify-content: center;
210   - align-items: center;
211   - }
212   -
213   - &__header--light {
214   - background: @white;
215   - border-bottom: 1px solid @header-light-bottom-border-color;
216   -
217   - .layout-header__menu {
218   - height: calc(@header-height - 1px);
219   -
220   - .ant-menu-submenu {
221   - height: @header-height;
222   - line-height: @header-height;
223   - }
224   - }
225   -
226   - .layout-header__logo {
227   - height: @header-height;
228   - color: @text-color-base;
229   -
230   - img {
231   - width: @logo-width;
232   - height: @logo-width;
233   - margin-right: 6px;
234   - }
235   -
236   - &:hover {
237   - background: @header-light-bg-hover-color;
238   - }
239   - }
240   -
241   - .layout-header__action {
242   - &-item {
243   - &:hover {
244   - background: @header-light-bg-hover-color;
245   - }
246   - }
247   -
248   - &-icon {
249   - color: @text-color-base;
250   - }
251   - }
252   -
253   - .layout-header__user-dropdown {
254   - &:hover {
255   - background: @header-light-bg-hover-color;
256   - }
257   - }
258   -
259   - .user-dropdown {
260   - &__name {
261   - color: @text-color-base;
262   - }
263   -
264   - &__desc {
265   - color: @header-light-desc-color;
266   - }
267   - }
268   - }
269   -
270   - &__header--dark {
271   - background: @header-dark-bg-color;
272   -
273   - .layout-header__action {
274   - &-item {
275   - &:hover {
276   - background: @header-dark-bg-hover-color;
277   - }
278   - }
279   - }
280   -
281   - .layout-header__logo {
282   - height: @header-height;
283   -
284   - img {
285   - width: @logo-width;
286   - height: @logo-width;
287   - margin-right: 10px;
288   - }
289   -
290   - &:hover {
291   - background: @header-dark-bg-hover-color;
292   - }
293   - }
294   -
295   - .layout-header__user-dropdown {
296   - &:hover {
297   - background: @header-dark-bg-hover-color;
298   - }
299   - }
300   -
301   - .breadcrumb {
302   - &__item:last-child .breadcrumb__inner,
303   - &__item:last-child &__inner a,
304   - &__item:last-child &__inner a:hover,
305   - &__item:last-child &__inner:hover {
306   - font-weight: 400;
307   - color: rgba(255, 255, 255, 0.6);
308   - cursor: text;
309   - }
310   -
311   - &__inner,
312   - &__separator {
313   - color: @white;
314   - }
315   - }
316   - }
317   -
318   - &__logo {
319   - padding: 0 10px;
320   - }
321   -
322   - &__bread {
323   - flex: 1;
324   - display: none;
325   - }
326   -
327   - &__action {
328   - display: flex;
329   - align-items: center;
330   -
331   - &-item {
332   - display: flex;
333   - align-items: center;
334   - height: @header-height;
335   - padding: 0 2px;
336   - font-size: 1.2em;
337   - cursor: pointer;
338   - }
339   -
340   - &-icon {
341   - padding: 0 8px;
342   - }
343   - }
344   -
345   - &__menu {
346   - margin-left: 20px;
347   - overflow: hidden;
348   - align-items: center;
349   - }
350   -
351   - &__user-dropdown {
352   - height: @header-height;
353   - padding: 0 0 0 10px;
354   - }
355   -}
356   -
357   -.user-dropdown {
358   - display: flex;
359   - padding-right: 10px;
360   - font-size: 12px;
361   - cursor: pointer;
362   - align-items: center;
363   -
364   - img {
365   - width: 26px;
366   - height: 26px;
367   - margin-right: 12px;
368   - }
369   -
370   - &__header {
371   - border-radius: 50%;
372   - }
373   -}
374   -
375   -.layout-header__left {
376   - flex-grow: 1;
377   - display: flex;
378   - align-items: center;
379   -
380   - .layout-trigger {
381   - padding: 4px 10px 0 16px;
382   - cursor: pointer;
383   -
384   - .anticon {
385   - font-size: 17px;
386   - }
387   -
388   - &.light {
389   - &:hover {
390   - background: @header-light-bg-hover-color;
391   - }
392   -
393   - svg {
394   - fill: #000;
395   - }
396   - }
397   -
398   - &.dark {
399   - &:hover {
400   - background: @header-dark-bg-hover-color;
401   - }
402   - }
403   - }
404   -
405   - .layout-breadcrumb {
406   - padding: 0 8px;
407   - }
408 77 }
409 78  
410 79 .ant-layout-sider-trigger {
... ...
src/layouts/default/index.tsx
  View file @4392917
1 1 import { defineComponent, unref, computed } from 'vue';
2 2 import { Layout, BackTop } from 'ant-design-vue';
3   -import LayoutHeader from './LayoutHeader';
  3 +import LayoutHeader from './header/LayoutHeader';
4 4  
5 5 import { appStore } from '/@/store/modules/app';
6 6 import LayoutContent from './LayoutContent';
7 7 import LayoutSideBar from './LayoutSideBar';
8 8 import SettingBtn from './setting/index.vue';
9 9 import MultipleTabs from './multitabs/index';
10   -import { FullLoading } from '/@/components/Loading/index';
11 10  
12 11 import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
13 12 import { useFullContent } from '/@/hooks/web/useFullContent';
... ... @@ -63,9 +62,8 @@ export default defineComponent({
63 62 }
64 63  
65 64 return () => {
66   - const { getPageLoading, getLockInfo } = appStore;
  65 + const { getLockInfo } = appStore;
67 66 const {
68   - openPageLoading,
69 67 useOpenBackTop,
70 68 showSettingButton,
71 69 multiTabsSetting: { show: showTabs },
... ... @@ -84,14 +82,17 @@ export default defineComponent({
84 82 <Layout class="default-layout relative">
85 83 {() => (
86 84 <>
  85 + {/* lock page */}
87 86 {isLock && <LockPage />}
  87 + {/* back top */}
  88 + {useOpenBackTop && <BackTop target={getTarget} />}
  89 + {/* open setting drawer */}
  90 + {showSettingButton && <SettingBtn />}
88 91  
89 92 {!unref(getFullContent) && unref(isShowMixHeaderRef) && unref(showHeaderRef) && (
90 93 <LayoutHeader />
91 94 )}
92 95  
93   - {showSettingButton && <SettingBtn />}
94   -
95 96 <Layout>
96 97 {() => (
97 98 <>
... ... @@ -103,22 +104,9 @@ export default defineComponent({
103 104 !unref(isShowMixHeaderRef) &&
104 105 unref(showHeaderRef) && <LayoutHeader />}
105 106  
106   - {showTabs && !unref(getFullContent) && (
107   - <Layout.Header class={`default-layout__tabs`}>
108   - {() => <MultipleTabs />}
109   - </Layout.Header>
110   - )}
111   -
112   - {useOpenBackTop && <BackTop target={getTarget} />}
113   -
114   - <div class={[`default-layout__main`, fixedHeaderCls]}>
115   - {openPageLoading && (
116   - <FullLoading
117   - class={[`default-layout__loading`, !getPageLoading && 'hidden']}
118   - />
119   - )}
120   - <LayoutContent />
121   - </div>
  107 + {showTabs && !unref(getFullContent) && <MultipleTabs />}
  108 +
  109 + <LayoutContent class={fixedHeaderCls} />
122 110 </>
123 111 )}
124 112 </Layout>
... ...
src/layouts/default/LayoutMenu.tsx renamed to src/layouts/default/menu/LayoutMenu.tsx
  View file @4392917
... ... @@ -3,7 +3,7 @@ import type { Menu } from &#39;/@/router/types&#39;;
3 3  
4 4 import { computed, defineComponent, unref, ref, onMounted, watch } from 'vue';
5 5 import { BasicMenu } from '/@/components/Menu/index';
6   -import Logo from '/@/layouts/Logo.vue';
  6 +import Logo from '/@/layouts/logo/index.vue';
7 7  
8 8 import { MenuModeEnum, MenuSplitTyeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
9 9  
... ... @@ -22,10 +22,8 @@ import {
22 22 import { useRouter } from 'vue-router';
23 23 import { useThrottle } from '/@/hooks/core/useThrottle';
24 24 import { permissionStore } from '/@/store/modules/permission';
25   -// import { useTabs } from '/@/hooks/web/useTabs';
26   -// import { PageEnum } from '/@/enums/pageEnum';
27 25  
28   -// import
  26 +import './index.less';
29 27 export default defineComponent({
30 28 name: 'DefaultLayoutMenu',
31 29 props: {
... ...
src/layouts/default/menu/index.less 0 → 100644
  View file @4392917
  1 +@import (reference) '../../../design/index.less';
  2 +
  3 +.layout-menu {
  4 + &__logo {
  5 + height: @header-height;
  6 + padding: 10px 4px 10px 10px;
  7 +
  8 + img {
  9 + width: @logo-width;
  10 + height: @logo-width;
  11 + }
  12 +
  13 + &.light {
  14 + .logo-title {
  15 + color: @text-color-base;
  16 + }
  17 + }
  18 +
  19 + &.dark {
  20 + .logo-title {
  21 + color: @white;
  22 + }
  23 + }
  24 + }
  25 +}
... ...
src/layouts/default/multitabs/TabContent.tsx
  View file @4392917
1   -import { TabItem, tabStore } from '/@/store/modules/tab';
  1 +import { defineComponent, unref, computed } from 'vue';
  2 +
2 3 import type { PropType } from 'vue';
  4 +
  5 +import { TabItem, tabStore } from '/@/store/modules/tab';
3 6 import { getScaleAction, TabContentProps } from './tab.data';
4 7  
5   -import { defineComponent, unref, computed } from 'vue';
6 8 import { Dropdown } from '/@/components/Dropdown/index';
7 9 import Icon from '/@/components/Icon/index';
8 10 import { RightOutlined } from '@ant-design/icons-vue';
... ...
src/layouts/default/multitabs/index.less
  View file @4392917
1 1 @import (reference) '../../../design/index.less';
2 2  
3 3 .multiple-tabs {
  4 + z-index: 10;
  5 + height: @multiple-height+2;
  6 + padding: 0 0 2px 0;
  7 + line-height: @multiple-height+2;
  8 + background: @white;
  9 + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
  10 +
4 11 .ant-tabs-small {
5 12 height: @multiple-height;
6 13 }
... ... @@ -63,8 +70,8 @@
63 70 }
64 71  
65 72 svg {
66   - fill: @white;
67 73 width: 0.7em;
  74 + fill: @white;
68 75 }
69 76 }
70 77 }
... ...
src/layouts/default/multitabs/index.tsx
  View file @4392917
... ... @@ -34,20 +34,7 @@ export default defineComponent({
34 34 let isAddAffix = false;
35 35 const go = useGo();
36 36 const { currentRoute } = useRouter();
37   - const {
38   - // addTab,
39   - activeKeyRef,
40   - } = useTabs();
41   - // onMounted(() => {
42   - // const route = unref(currentRoute);
43   - // addTab(unref(currentRoute).path as PageEnum, false, {
44   - // query: route.query,
45   - // params: route.params,
46   - // });
47   - // });
48   -
49   - // 当前激活tab
50   - // const activeKeyRef = ref<string>('');
  37 + const { activeKeyRef } = useTabs();
51 38  
52 39 // 当前tab列表
53 40 const getTabsState = computed(() => {
... ... @@ -67,21 +54,9 @@ export default defineComponent({
67 54 if (activeKeyRef.value !== (fullPath || rPath)) {
68 55 activeKeyRef.value = fullPath || rPath;
69 56 }
70   - // 监听路由的话虽然可以，但是路由切换的时间会造成卡顿现象？
71   - // 使用useTab的addTab的话，当用户手动调转，需要自行调用addTab
72 57 tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
73   -
74   - // const { affix } = currentRoute.value.meta || {};
75   - // if (affix) return;
76   - // const hasInTab = tabStore.getTabsState.some(
77   - // (item) => item.fullPath === currentRoute.value.fullPath
78   - // );
79   - // if (!hasInTab) {
80   - // tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
81   - // }
82 58 },
83 59 {
84   - // flush: 'post',
85 60 immediate: true,
86 61 }
87 62 );
... ...
src/layouts/default/setting/SettingDrawer.tsx
  View file @4392917
... ... @@ -226,7 +226,13 @@ export default defineComponent({
226 226 def: collapsedShowTitle,
227 227 disabled: !unref(getShowMenuRef) || !collapsed,
228 228 }),
229   -
  229 + renderSwitchItem('固定header', {
  230 + handler: (e) => {
  231 + baseHandler(HandlerEnum.HEADER_FIXED, e);
  232 + },
  233 + def: fixed,
  234 + disabled: !unref(getShowHeaderRef),
  235 + }),
230 236 renderSelectItem('顶部菜单布局', {
231 237 handler: (e) => {
232 238 baseHandler(HandlerEnum.MENU_TOP_ALIGN, e);
... ... @@ -242,13 +248,7 @@ export default defineComponent({
242 248 def: trigger,
243 249 options: menuTriggerOptions,
244 250 }),
245   - renderSwitchItem('固定header', {
246   - handler: (e) => {
247   - baseHandler(HandlerEnum.HEADER_FIXED, e);
248   - },
249   - def: fixed,
250   - disabled: !unref(getShowHeaderRef),
251   - }),
  251 +
252 252 renderSelectItem('内容区域宽度', {
253 253 handler: (e) => {
254 254 baseHandler(HandlerEnum.CONTENT_MODE, e);
... ...
src/layouts/default/setting/index.less 0 → 100644
  View file @4392917
  1 +.setting-drawer {
  2 + .ant-drawer-body {
  3 + padding-top: 0;
  4 + background: @white;
  5 + }
  6 +
  7 + &__footer {
  8 + display: flex;
  9 + flex-direction: column;
  10 + align-items: center;
  11 + }
  12 +
  13 + &__cell-item {
  14 + display: flex;
  15 + justify-content: space-between;
  16 + margin: 16px 0;
  17 + }
  18 +
  19 + &__theme-item {
  20 + display: flex;
  21 + flex-wrap: wrap;
  22 + margin: 16px 0;
  23 +
  24 + span {
  25 + display: inline-block;
  26 + width: 20px;
  27 + height: 20px;
  28 + margin-top: 10px;
  29 + margin-right: 10px;
  30 + cursor: pointer;
  31 + border-radius: 4px;
  32 +
  33 + svg {
  34 + display: none;
  35 + }
  36 +
  37 + &.active {
  38 + svg {
  39 + display: inline-block;
  40 + margin-left: 4px;
  41 + font-size: 0.8em;
  42 + fill: @white;
  43 + }
  44 + }
  45 + }
  46 + }
  47 +
  48 + &__siderbar {
  49 + display: flex;
  50 +
  51 + > div {
  52 + position: relative;
  53 +
  54 + .check-icon {
  55 + position: absolute;
  56 + top: 40%;
  57 + left: 40%;
  58 + display: none;
  59 + color: @primary-color;
  60 +
  61 + &.active {
  62 + display: inline-block;
  63 + }
  64 + }
  65 + }
  66 +
  67 + img {
  68 + margin-right: 10px;
  69 + cursor: pointer;
  70 + }
  71 + }
  72 +}
... ...
src/layouts/default/setting/index.vue
  View file @4392917
... ... @@ -23,8 +23,9 @@
23 23 },
24 24 });
25 25 </script>
26   -<style lang="less" scoped>
  26 +<style lang="less">
27 27 @import (reference) '../../../design/index.less';
  28 + @import './index.less';
28 29  
29 30 .setting-button {
30 31 position: absolute;
... ...
src/layouts/Logo.vue renamed to src/layouts/logo/index.vue
  View file @4392917
... ... @@ -12,10 +12,10 @@
12 12 import { useGo } from '/@/hooks/web/usePage';
13 13  
14 14 import { PageEnum } from '/@/enums/pageEnum';
15   - import { MenuTypeEnum } from '../enums/menuEnum';
  15 + import { MenuTypeEnum } from '/@/enums/menuEnum';
16 16  
17   - import { menuStore } from '../store/modules/menu';
18   - import { appStore } from '../store/modules/app';
  17 + import { menuStore } from '/@/store/modules/menu';
  18 + import { appStore } from '/@/store/modules/app';
19 19  
20 20 export default defineComponent({
21 21 name: 'Logo',
... ... @@ -72,7 +72,7 @@
72 72 });
73 73 </script>
74 74 <style lang="less" scoped>
75   - @import (reference) '../design/index.less';
  75 + @import (reference) '../../design/index.less';
76 76  
77 77 .app-logo {
78 78 display: flex;
... ...