Commit b335e7511b90988e5dbe3d42402ad6d52b646e43
1 parent
1f96eaef
chore: fix the error-log list as the system route
Showing
20 changed files
with
248 additions
and
357 deletions
src/components/Application/src/AppLocalePicker.vue
... | ... | @@ -11,7 +11,7 @@ |
11 | 11 | :overlayClassName="`${prefixCls}-overlay`" |
12 | 12 | > |
13 | 13 | <span :class="prefixCls"> |
14 | - <Icon icon="cil:language" /> | |
14 | + <Icon icon="ion:language" /> | |
15 | 15 | <span v-if="showText" :class="`${prefixCls}__text`">{{ getLangText }}</span> |
16 | 16 | </span> |
17 | 17 | </Dropdown> | ... | ... |
src/components/Application/src/search/AppSearch.vue
... | ... | @@ -10,7 +10,7 @@ |
10 | 10 | |
11 | 11 | export default defineComponent({ |
12 | 12 | name: 'AppSearch', |
13 | - components: { AppSearchModal, Tooltip, SearchOutlined }, | |
13 | + components: { AppSearchModal, Tooltip }, | |
14 | 14 | setup() { |
15 | 15 | const showModal = ref(false); |
16 | 16 | const { prefixCls } = useDesign('app-search'); | ... | ... |
src/enums/pageEnum.ts
src/layouts/default/header/components/index.ts
... | ... | @@ -10,6 +10,4 @@ export const FullScreen = createAsyncComponent(() => import('./FullScreen.vue')) |
10 | 10 | |
11 | 11 | export const Notify = createAsyncComponent(() => import('./notify/index.vue')); |
12 | 12 | |
13 | -export const LockItem = createAsyncComponent(() => import('./lock/index.vue')); | |
14 | - | |
15 | 13 | export const ErrorAction = createAsyncComponent(() => import('./ErrorAction.vue')); | ... | ... |
src/layouts/default/header/components/lock/LockAction.less deleted
100644 → 0
1 | -.lock-modal { | |
2 | - &__entry { | |
3 | - position: relative; | |
4 | - height: 240px; | |
5 | - padding: 130px 30px 60px 30px; | |
6 | - background: #fff; | |
7 | - border-radius: 10px; | |
8 | - } | |
9 | - | |
10 | - &__header { | |
11 | - position: absolute; | |
12 | - top: 0; | |
13 | - left: calc(50% - 45px); | |
14 | - width: auto; | |
15 | - text-align: center; | |
16 | - | |
17 | - &-img { | |
18 | - width: 70px; | |
19 | - border-radius: 50%; | |
20 | - } | |
21 | - | |
22 | - &-name { | |
23 | - margin-top: 5px; | |
24 | - } | |
25 | - } | |
26 | - | |
27 | - &__footer { | |
28 | - text-align: center; | |
29 | - } | |
30 | -} |
src/layouts/default/header/components/lock/LockAction.tsx deleted
100644 → 0
1 | -import './LockAction.less'; | |
2 | - | |
3 | -import { defineComponent } from 'vue'; | |
4 | -import { BasicModal, useModalInner } from '/@/components/Modal/index'; | |
5 | -import { Button } from '/@/components/Button'; | |
6 | -import { BasicForm, useForm } from '/@/components/Form/index'; | |
7 | - | |
8 | -import headerImg from '/@/assets/images/header.jpg'; | |
9 | - | |
10 | -import { userStore } from '/@/store/modules/user'; | |
11 | -import { useI18n } from '/@/hooks/web/useI18n'; | |
12 | -import { lockStore } from '/@/store/modules/lock'; | |
13 | - | |
14 | -const prefixCls = 'lock-modal'; | |
15 | -export default defineComponent({ | |
16 | - name: 'LockModal', | |
17 | - setup(_, { attrs }) { | |
18 | - const { t } = useI18n(); | |
19 | - const [register, { closeModal }] = useModalInner(); | |
20 | - | |
21 | - const [registerForm, { validateFields, resetFields }] = useForm({ | |
22 | - showActionButtonGroup: false, | |
23 | - schemas: [ | |
24 | - { | |
25 | - field: 'password', | |
26 | - label: t('layout.header.lockScreenPassword'), | |
27 | - component: 'InputPassword', | |
28 | - required: true, | |
29 | - }, | |
30 | - ], | |
31 | - }); | |
32 | - | |
33 | - async function lock() { | |
34 | - const values = (await validateFields()) as any; | |
35 | - const password: string | undefined = values.password; | |
36 | - closeModal(); | |
37 | - | |
38 | - lockStore.commitLockInfoState({ | |
39 | - isLock: true, | |
40 | - pwd: password, | |
41 | - }); | |
42 | - await resetFields(); | |
43 | - } | |
44 | - | |
45 | - return () => ( | |
46 | - <BasicModal | |
47 | - footer={null} | |
48 | - title={t('layout.header.lockScreen')} | |
49 | - {...attrs} | |
50 | - class={prefixCls} | |
51 | - onRegister={register} | |
52 | - > | |
53 | - {() => ( | |
54 | - <div class={`${prefixCls}__entry`}> | |
55 | - <div class={`${prefixCls}__header`}> | |
56 | - <img src={headerImg} class={`${prefixCls}__header-img`} /> | |
57 | - <p class={`${prefixCls}__header-name`}>{userStore.getUserInfoState.realName}</p> | |
58 | - </div> | |
59 | - | |
60 | - <BasicForm onRegister={registerForm} /> | |
61 | - | |
62 | - <div class={`${prefixCls}__footer`}> | |
63 | - <Button type="primary" block class="mt-2" onClick={lock}> | |
64 | - {() => t('layout.header.lockScreenBtn')} | |
65 | - </Button> | |
66 | - </div> | |
67 | - </div> | |
68 | - )} | |
69 | - </BasicModal> | |
70 | - ); | |
71 | - }, | |
72 | -}); |
src/layouts/default/header/components/lock/index.vue deleted
100644 → 0
1 | -<template> | |
2 | - <span @click="handleLock"> | |
3 | - <Tooltip :title="t('layout.header.tooltipLock')" placement="bottom" :mouseEnterDelay="0.5"> | |
4 | - <LockOutlined /> | |
5 | - </Tooltip> | |
6 | - <LockAction @register="register" /> | |
7 | - </span> | |
8 | -</template> | |
9 | -<script lang="ts"> | |
10 | - import { defineComponent } from 'vue'; | |
11 | - import { Tooltip } from 'ant-design-vue'; | |
12 | - import { useI18n } from '/@/hooks/web/useI18n'; | |
13 | - import { LockOutlined } from '@ant-design/icons-vue'; | |
14 | - import { useModal } from '/@/components/Modal'; | |
15 | - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; | |
16 | - export default defineComponent({ | |
17 | - name: 'FullScreen', | |
18 | - components: { | |
19 | - LockOutlined, | |
20 | - Tooltip, | |
21 | - LockAction: createAsyncComponent(() => import('./LockModal.vue')), | |
22 | - }, | |
23 | - | |
24 | - setup() { | |
25 | - const { t } = useI18n(); | |
26 | - const [register, { openModal }] = useModal(); | |
27 | - | |
28 | - function handleLock() { | |
29 | - openModal(true); | |
30 | - } | |
31 | - return { | |
32 | - t, | |
33 | - register, | |
34 | - handleLock, | |
35 | - }; | |
36 | - }, | |
37 | - }); | |
38 | -</script> |
src/layouts/default/header/components/user-dropdown/index.vue
... | ... | @@ -12,18 +12,24 @@ |
12 | 12 | <MenuItem |
13 | 13 | key="doc" |
14 | 14 | :text="t('layout.header.dropdownItemDoc')" |
15 | - icon="gg:loadbar-doc" | |
15 | + icon="ion:document-text-outline" | |
16 | 16 | v-if="getShowDoc" |
17 | 17 | /> |
18 | 18 | <MenuDivider /> |
19 | 19 | <MenuItem |
20 | + key="lock" | |
21 | + :text="t('layout.header.tooltipLock')" | |
22 | + icon="ion:lock-closed-outline" | |
23 | + /> | |
24 | + <MenuItem | |
20 | 25 | key="loginOut" |
21 | 26 | :text="t('layout.header.dropdownItemLoginOut')" |
22 | - icon="carbon:power" | |
27 | + icon="ion:exit-outline" | |
23 | 28 | /> |
24 | 29 | </Menu> |
25 | 30 | </template> |
26 | 31 | </Dropdown> |
32 | + <LockAction @register="register" /> | |
27 | 33 | </template> |
28 | 34 | <script lang="ts"> |
29 | 35 | // components |
... | ... | @@ -31,23 +37,21 @@ |
31 | 37 | |
32 | 38 | import { defineComponent, computed } from 'vue'; |
33 | 39 | |
34 | - // res | |
35 | - | |
36 | - import { userStore } from '/@/store/modules/user'; | |
37 | - | |
38 | 40 | import { DOC_URL } from '/@/settings/siteSetting'; |
39 | 41 | |
40 | - import { openWindow } from '/@/utils'; | |
41 | - | |
42 | + import { userStore } from '/@/store/modules/user'; | |
42 | 43 | import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; |
43 | 44 | import { useI18n } from '/@/hooks/web/useI18n'; |
44 | - | |
45 | 45 | import { useDesign } from '/@/hooks/web/useDesign'; |
46 | - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; | |
47 | - import { propTypes } from '/@/utils/propTypes'; | |
46 | + import { useModal } from '/@/components/Modal'; | |
47 | + | |
48 | 48 | import headerImg from '/@/assets/images/header.jpg'; |
49 | + import { propTypes } from '/@/utils/propTypes'; | |
50 | + import { openWindow } from '/@/utils'; | |
51 | + | |
52 | + import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; | |
49 | 53 | |
50 | - type MenuEvent = 'loginOut' | 'doc'; | |
54 | + type MenuEvent = 'loginOut' | 'doc' | 'lock'; | |
51 | 55 | |
52 | 56 | export default defineComponent({ |
53 | 57 | name: 'UserDropdown', |
... | ... | @@ -56,6 +60,7 @@ |
56 | 60 | Menu, |
57 | 61 | MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')), |
58 | 62 | MenuDivider: Menu.Divider, |
63 | + LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')), | |
59 | 64 | }, |
60 | 65 | props: { |
61 | 66 | theme: propTypes.oneOf(['dark', 'light']), |
... | ... | @@ -70,6 +75,12 @@ |
70 | 75 | return { realName, desc }; |
71 | 76 | }); |
72 | 77 | |
78 | + const [register, { openModal }] = useModal(); | |
79 | + | |
80 | + function handleLock() { | |
81 | + openModal(true); | |
82 | + } | |
83 | + | |
73 | 84 | // login out |
74 | 85 | function handleLoginOut() { |
75 | 86 | userStore.confirmLoginOut(); |
... | ... | @@ -88,6 +99,9 @@ |
88 | 99 | case 'doc': |
89 | 100 | openDoc(); |
90 | 101 | break; |
102 | + case 'lock': | |
103 | + handleLock(); | |
104 | + break; | |
91 | 105 | } |
92 | 106 | } |
93 | 107 | |
... | ... | @@ -98,6 +112,7 @@ |
98 | 112 | handleMenuClick, |
99 | 113 | getShowDoc, |
100 | 114 | headerImg, |
115 | + register, | |
101 | 116 | }; |
102 | 117 | }, |
103 | 118 | }); | ... | ... |
src/layouts/default/header/index.vue
... | ... | @@ -37,8 +37,6 @@ |
37 | 37 | |
38 | 38 | <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" /> |
39 | 39 | |
40 | - <LockItem v-if="getUseLockPage" :class="`${prefixCls}-action__item lock-item`" /> | |
41 | - | |
42 | 40 | <Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" /> |
43 | 41 | |
44 | 42 | <FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" /> |
... | ... | @@ -61,7 +59,7 @@ |
61 | 59 | |
62 | 60 | import { Layout } from 'ant-design-vue'; |
63 | 61 | import { AppLogo } from '/@/components/Application'; |
64 | - import LayoutMenu from '../menu'; | |
62 | + import LayoutMenu from '../menu/index.vue'; | |
65 | 63 | import LayoutTrigger from '../trigger/index.vue'; |
66 | 64 | |
67 | 65 | import { AppSearch } from '/@/components/Application'; |
... | ... | @@ -74,14 +72,7 @@ |
74 | 72 | import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum'; |
75 | 73 | import { AppLocalePicker } from '/@/components/Application'; |
76 | 74 | |
77 | - import { | |
78 | - UserDropDown, | |
79 | - LayoutBreadcrumb, | |
80 | - FullScreen, | |
81 | - Notify, | |
82 | - LockItem, | |
83 | - ErrorAction, | |
84 | - } from './components'; | |
75 | + import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction } from './components'; | |
85 | 76 | import { useAppInject } from '/@/hooks/web/useAppInject'; |
86 | 77 | import { useDesign } from '/@/hooks/web/useDesign'; |
87 | 78 | |
... | ... | @@ -97,7 +88,6 @@ |
97 | 88 | AppLocalePicker, |
98 | 89 | FullScreen, |
99 | 90 | Notify, |
100 | - LockItem, | |
101 | 91 | AppSearch, |
102 | 92 | ErrorAction, |
103 | 93 | }, | ... | ... |
src/layouts/default/menu/index.less deleted
100644 → 0
1 | -@prefix-cls: ~'@{namespace}-layout-menu'; | |
2 | -@logo-prefix-cls: ~'@{namespace}-app-logo'; | |
3 | - | |
4 | -.@{prefix-cls} { | |
5 | - &-logo { | |
6 | - height: @header-height; | |
7 | - padding: 10px 4px 10px 10px; | |
8 | - | |
9 | - img { | |
10 | - width: @logo-width; | |
11 | - height: @logo-width; | |
12 | - } | |
13 | - } | |
14 | - | |
15 | - &--mobile { | |
16 | - .@{logo-prefix-cls} { | |
17 | - &__title { | |
18 | - opacity: 1; | |
19 | - } | |
20 | - } | |
21 | - } | |
22 | -} |
src/layouts/default/menu/index.tsx renamed to src/layouts/default/menu/index.vue
1 | -import './index.less'; | |
2 | - | |
3 | -import type { PropType, CSSProperties } from 'vue'; | |
4 | - | |
5 | -import { computed, defineComponent, unref, toRef } from 'vue'; | |
6 | -import { BasicMenu } from '/@/components/Menu'; | |
7 | -import { SimpleMenu } from '/@/components/SimpleMenu'; | |
8 | -import { AppLogo } from '/@/components/Application'; | |
1 | +<script lang="tsx"> | |
2 | + import type { PropType, CSSProperties } from 'vue'; | |
3 | + | |
4 | + import { computed, defineComponent, unref, toRef } from 'vue'; | |
5 | + import { BasicMenu } from '/@/components/Menu'; | |
6 | + import { SimpleMenu } from '/@/components/SimpleMenu'; | |
7 | + import { AppLogo } from '/@/components/Application'; | |
8 | + | |
9 | + import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum'; | |
10 | + | |
11 | + import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; | |
12 | + import { ScrollContainer } from '/@/components/Container'; | |
13 | + | |
14 | + import { useGo } from '/@/hooks/web/usePage'; | |
15 | + import { useSplitMenu } from './useLayoutMenu'; | |
16 | + import { openWindow } from '/@/utils'; | |
17 | + import { propTypes } from '/@/utils/propTypes'; | |
18 | + import { isUrl } from '/@/utils/is'; | |
19 | + import { useRootSetting } from '/@/hooks/setting/useRootSetting'; | |
20 | + import { useAppInject } from '/@/hooks/web/useAppInject'; | |
21 | + import { useDesign } from '/@/hooks/web/useDesign'; | |
22 | + | |
23 | + export default defineComponent({ | |
24 | + name: 'LayoutMenu', | |
25 | + props: { | |
26 | + theme: propTypes.oneOf(['light', 'dark']), | |
27 | + | |
28 | + splitType: { | |
29 | + type: Number as PropType<MenuSplitTyeEnum>, | |
30 | + default: MenuSplitTyeEnum.NONE, | |
31 | + }, | |
32 | + | |
33 | + isHorizontal: propTypes.bool, | |
34 | + // menu Mode | |
35 | + menuMode: { | |
36 | + type: [String] as PropType<Nullable<MenuModeEnum>>, | |
37 | + default: '', | |
38 | + }, | |
39 | + }, | |
40 | + setup(props) { | |
41 | + const go = useGo(); | |
9 | 42 | |
10 | -import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum'; | |
43 | + const { | |
44 | + getMenuMode, | |
45 | + getMenuType, | |
46 | + getMenuTheme, | |
47 | + getCollapsed, | |
48 | + getCollapsedShowTitle, | |
49 | + getAccordion, | |
50 | + getIsHorizontal, | |
51 | + getIsSidebarType, | |
52 | + } = useMenuSetting(); | |
53 | + const { getShowLogo } = useRootSetting(); | |
11 | 54 | |
12 | -import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; | |
13 | -import { ScrollContainer } from '/@/components/Container'; | |
55 | + const { prefixCls } = useDesign('layout-menu'); | |
14 | 56 | |
15 | -import { useGo } from '/@/hooks/web/usePage'; | |
16 | -import { useSplitMenu } from './useLayoutMenu'; | |
17 | -import { openWindow } from '/@/utils'; | |
18 | -import { propTypes } from '/@/utils/propTypes'; | |
19 | -import { isUrl } from '/@/utils/is'; | |
20 | -import { useRootSetting } from '/@/hooks/setting/useRootSetting'; | |
21 | -import { useAppInject } from '/@/hooks/web/useAppInject'; | |
22 | -import { useDesign } from '/@/hooks/web/useDesign'; | |
57 | + const { menusRef } = useSplitMenu(toRef(props, 'splitType')); | |
23 | 58 | |
24 | -export default defineComponent({ | |
25 | - name: 'LayoutMenu', | |
26 | - props: { | |
27 | - theme: propTypes.oneOf(['light', 'dark']), | |
59 | + const { getIsMobile } = useAppInject(); | |
28 | 60 | |
29 | - splitType: { | |
30 | - type: Number as PropType<MenuSplitTyeEnum>, | |
31 | - default: MenuSplitTyeEnum.NONE, | |
32 | - }, | |
61 | + const getComputedMenuMode = computed(() => | |
62 | + unref(getIsMobile) ? MenuModeEnum.INLINE : props.menuMode || unref(getMenuMode) | |
63 | + ); | |
33 | 64 | |
34 | - isHorizontal: propTypes.bool, | |
35 | - // menu Mode | |
36 | - menuMode: { | |
37 | - type: [String] as PropType<Nullable<MenuModeEnum>>, | |
38 | - default: '', | |
39 | - }, | |
40 | - }, | |
41 | - setup(props) { | |
42 | - const go = useGo(); | |
43 | - | |
44 | - const { | |
45 | - getMenuMode, | |
46 | - getMenuType, | |
47 | - getMenuTheme, | |
48 | - getCollapsed, | |
49 | - getCollapsedShowTitle, | |
50 | - getAccordion, | |
51 | - getIsHorizontal, | |
52 | - getIsSidebarType, | |
53 | - } = useMenuSetting(); | |
54 | - const { getShowLogo } = useRootSetting(); | |
55 | - | |
56 | - const { prefixCls } = useDesign('layout-menu'); | |
57 | - | |
58 | - const { menusRef } = useSplitMenu(toRef(props, 'splitType')); | |
59 | - | |
60 | - const { getIsMobile } = useAppInject(); | |
61 | - | |
62 | - const getComputedMenuMode = computed(() => | |
63 | - unref(getIsMobile) ? MenuModeEnum.INLINE : props.menuMode || unref(getMenuMode) | |
64 | - ); | |
65 | - | |
66 | - const getComputedMenuTheme = computed(() => props.theme || unref(getMenuTheme)); | |
67 | - | |
68 | - const getIsShowLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType)); | |
69 | - | |
70 | - const getUseScroll = computed(() => { | |
71 | - return ( | |
72 | - !unref(getIsHorizontal) && | |
73 | - (unref(getIsSidebarType) || | |
74 | - props.splitType === MenuSplitTyeEnum.LEFT || | |
75 | - props.splitType === MenuSplitTyeEnum.NONE) | |
65 | + const getComputedMenuTheme = computed(() => props.theme || unref(getMenuTheme)); | |
66 | + | |
67 | + const getIsShowLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType)); | |
68 | + | |
69 | + const getUseScroll = computed(() => { | |
70 | + return ( | |
71 | + !unref(getIsHorizontal) && | |
72 | + (unref(getIsSidebarType) || | |
73 | + props.splitType === MenuSplitTyeEnum.LEFT || | |
74 | + props.splitType === MenuSplitTyeEnum.NONE) | |
75 | + ); | |
76 | + }); | |
77 | + | |
78 | + const getWrapperStyle = computed( | |
79 | + (): CSSProperties => { | |
80 | + return { | |
81 | + height: `calc(100% - ${unref(getIsShowLogo) ? '48px' : '0px'})`, | |
82 | + }; | |
83 | + } | |
76 | 84 | ); |
77 | - }); | |
78 | 85 | |
79 | - const getWrapperStyle = computed( | |
80 | - (): CSSProperties => { | |
81 | - return { | |
82 | - height: `calc(100% - ${unref(getIsShowLogo) ? '48px' : '0px'})`, | |
83 | - }; | |
86 | + const getLogoClass = computed(() => { | |
87 | + return [ | |
88 | + `${prefixCls}-logo`, | |
89 | + unref(getComputedMenuTheme), | |
90 | + { | |
91 | + [`${prefixCls}--mobile`]: unref(getIsMobile), | |
92 | + }, | |
93 | + ]; | |
94 | + }); | |
95 | + /** | |
96 | + * click menu | |
97 | + * @param menu | |
98 | + */ | |
99 | + | |
100 | + function handleMenuClick(path: string) { | |
101 | + go(path); | |
84 | 102 | } |
85 | - ); | |
86 | - | |
87 | - const getLogoClass = computed(() => { | |
88 | - return [ | |
89 | - `${prefixCls}-logo`, | |
90 | - unref(getComputedMenuTheme), | |
91 | - { | |
92 | - [`${prefixCls}--mobile`]: unref(getIsMobile), | |
93 | - }, | |
94 | - ]; | |
95 | - }); | |
96 | - /** | |
97 | - * click menu | |
98 | - * @param menu | |
99 | - */ | |
100 | - | |
101 | - function handleMenuClick(path: string) { | |
102 | - go(path); | |
103 | - } | |
104 | 103 | |
105 | - /** | |
106 | - * before click menu | |
107 | - * @param menu | |
108 | - */ | |
109 | - async function beforeMenuClickFn(path: string) { | |
110 | - if (!isUrl(path)) { | |
111 | - return true; | |
104 | + /** | |
105 | + * before click menu | |
106 | + * @param menu | |
107 | + */ | |
108 | + async function beforeMenuClickFn(path: string) { | |
109 | + if (!isUrl(path)) { | |
110 | + return true; | |
111 | + } | |
112 | + openWindow(path); | |
113 | + return false; | |
112 | 114 | } |
113 | - openWindow(path); | |
114 | - return false; | |
115 | - } | |
116 | 115 | |
117 | - function renderHeader() { | |
118 | - if (!unref(getIsShowLogo) && !unref(getIsMobile)) return null; | |
116 | + function renderHeader() { | |
117 | + if (!unref(getIsShowLogo) && !unref(getIsMobile)) return null; | |
119 | 118 | |
120 | - return ( | |
121 | - <AppLogo | |
122 | - showTitle={!unref(getCollapsed)} | |
123 | - class={unref(getLogoClass)} | |
124 | - theme={unref(getComputedMenuTheme)} | |
125 | - /> | |
126 | - ); | |
127 | - } | |
119 | + return ( | |
120 | + <AppLogo | |
121 | + showTitle={!unref(getCollapsed)} | |
122 | + class={unref(getLogoClass)} | |
123 | + theme={unref(getComputedMenuTheme)} | |
124 | + /> | |
125 | + ); | |
126 | + } | |
128 | 127 | |
129 | - function renderMenu() { | |
130 | - const menus = unref(menusRef); | |
131 | - // console.log(menus); | |
132 | - if (!menus || !menus.length) return null; | |
133 | - return !props.isHorizontal ? ( | |
134 | - <SimpleMenu | |
135 | - beforeClickFn={beforeMenuClickFn} | |
136 | - items={menus} | |
137 | - theme={unref(getComputedMenuTheme)} | |
138 | - accordion={unref(getAccordion)} | |
139 | - collapse={unref(getCollapsed)} | |
140 | - collapsedShowTitle={unref(getCollapsedShowTitle)} | |
141 | - onMenuClick={handleMenuClick} | |
142 | - /> | |
143 | - ) : ( | |
144 | - <BasicMenu | |
145 | - beforeClickFn={beforeMenuClickFn} | |
146 | - isHorizontal={props.isHorizontal} | |
147 | - type={unref(getMenuType)} | |
148 | - collapsedShowTitle={unref(getCollapsedShowTitle)} | |
149 | - showLogo={unref(getIsShowLogo)} | |
150 | - mode={unref(getComputedMenuMode)} | |
151 | - theme={unref(getComputedMenuTheme)} | |
152 | - items={menus} | |
153 | - accordion={unref(getAccordion)} | |
154 | - onMenuClick={handleMenuClick} | |
155 | - /> | |
156 | - ); | |
128 | + function renderMenu() { | |
129 | + const menus = unref(menusRef); | |
130 | + // console.log(menus); | |
131 | + if (!menus || !menus.length) return null; | |
132 | + return !props.isHorizontal ? ( | |
133 | + <SimpleMenu | |
134 | + beforeClickFn={beforeMenuClickFn} | |
135 | + items={menus} | |
136 | + theme={unref(getComputedMenuTheme)} | |
137 | + accordion={unref(getAccordion)} | |
138 | + collapse={unref(getCollapsed)} | |
139 | + collapsedShowTitle={unref(getCollapsedShowTitle)} | |
140 | + onMenuClick={handleMenuClick} | |
141 | + /> | |
142 | + ) : ( | |
143 | + <BasicMenu | |
144 | + beforeClickFn={beforeMenuClickFn} | |
145 | + isHorizontal={props.isHorizontal} | |
146 | + type={unref(getMenuType)} | |
147 | + collapsedShowTitle={unref(getCollapsedShowTitle)} | |
148 | + showLogo={unref(getIsShowLogo)} | |
149 | + mode={unref(getComputedMenuMode)} | |
150 | + theme={unref(getComputedMenuTheme)} | |
151 | + items={menus} | |
152 | + accordion={unref(getAccordion)} | |
153 | + onMenuClick={handleMenuClick} | |
154 | + /> | |
155 | + ); | |
156 | + } | |
157 | + | |
158 | + return () => { | |
159 | + return ( | |
160 | + <> | |
161 | + {renderHeader()} | |
162 | + {unref(getUseScroll) ? ( | |
163 | + <ScrollContainer style={unref(getWrapperStyle)}>{() => renderMenu()}</ScrollContainer> | |
164 | + ) : ( | |
165 | + renderMenu() | |
166 | + )} | |
167 | + </> | |
168 | + ); | |
169 | + }; | |
170 | + }, | |
171 | + }); | |
172 | +</script> | |
173 | +<style lang="less"> | |
174 | + @prefix-cls: ~'@{namespace}-layout-menu'; | |
175 | + @logo-prefix-cls: ~'@{namespace}-app-logo'; | |
176 | + | |
177 | + .@{prefix-cls} { | |
178 | + &-logo { | |
179 | + height: @header-height; | |
180 | + padding: 10px 4px 10px 10px; | |
181 | + | |
182 | + img { | |
183 | + width: @logo-width; | |
184 | + height: @logo-width; | |
185 | + } | |
157 | 186 | } |
158 | 187 | |
159 | - return () => { | |
160 | - return ( | |
161 | - <> | |
162 | - {renderHeader()} | |
163 | - {unref(getUseScroll) ? ( | |
164 | - <ScrollContainer style={unref(getWrapperStyle)}>{() => renderMenu()}</ScrollContainer> | |
165 | - ) : ( | |
166 | - renderMenu() | |
167 | - )} | |
168 | - </> | |
169 | - ); | |
170 | - }; | |
171 | - }, | |
172 | -}); | |
188 | + &--mobile { | |
189 | + .@{logo-prefix-cls} { | |
190 | + &__title { | |
191 | + opacity: 1; | |
192 | + } | |
193 | + } | |
194 | + } | |
195 | + } | |
196 | +</style> | ... | ... |
src/layouts/default/setting/index.vue
1 | 1 | <template> |
2 | 2 | <div @click="openDrawer" :class="prefixCls"> |
3 | - <SettingOutlined /> | |
3 | + <Icon icon="ion:settings-outline" /> | |
4 | 4 | <SettingDrawer @register="register" /> |
5 | 5 | </div> |
6 | 6 | </template> |
7 | 7 | <script lang="ts"> |
8 | 8 | import { defineComponent } from 'vue'; |
9 | - import { SettingOutlined } from '@ant-design/icons-vue'; | |
10 | 9 | import SettingDrawer from './SettingDrawer'; |
10 | + import Icon from '/@/components/Icon'; | |
11 | 11 | |
12 | 12 | import { useDrawer } from '/@/components/Drawer'; |
13 | 13 | import { useDesign } from '/@/hooks/web/useDesign'; |
14 | 14 | |
15 | 15 | export default defineComponent({ |
16 | 16 | name: 'SettingButton', |
17 | - components: { SettingOutlined, SettingDrawer }, | |
17 | + components: { SettingDrawer, Icon }, | |
18 | 18 | setup() { |
19 | 19 | const [register, { openDrawer }] = useDrawer(); |
20 | 20 | ... | ... |
src/layouts/default/sider/LayoutSider.vue
... | ... | @@ -29,7 +29,7 @@ |
29 | 29 | import { computed, defineComponent, ref, unref, CSSProperties } from 'vue'; |
30 | 30 | |
31 | 31 | import { Layout } from 'ant-design-vue'; |
32 | - import LayoutMenu from '../menu'; | |
32 | + import LayoutMenu from '../menu/index.vue'; | |
33 | 33 | import LayoutTrigger from '/@/layouts/default/trigger/index.vue'; |
34 | 34 | |
35 | 35 | import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum'; | ... | ... |
src/layouts/default/sider/index.vue
... | ... | @@ -17,8 +17,9 @@ |
17 | 17 | import { defineComponent } from 'vue'; |
18 | 18 | |
19 | 19 | import Sider from './LayoutSider.vue'; |
20 | - import { Drawer } from 'ant-design-vue'; | |
21 | 20 | import MixSider from './MixSider.vue'; |
21 | + import { Drawer } from 'ant-design-vue'; | |
22 | + | |
22 | 23 | import { useAppInject } from '/@/hooks/web/useAppInject'; |
23 | 24 | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; |
24 | 25 | import { useDesign } from '/@/hooks/web/useDesign'; | ... | ... |
src/layouts/default/tabs/components/TabContent.vue
... | ... | @@ -5,7 +5,7 @@ |
5 | 5 | </div> |
6 | 6 | |
7 | 7 | <span :class="`${prefixCls}__extra-quick`" v-else @click="handleContext"> |
8 | - <RightOutlined /> | |
8 | + <Icon icon="ion:chevron-down"></Icon> | |
9 | 9 | </span> |
10 | 10 | </Dropdown> |
11 | 11 | </template> |
... | ... | @@ -14,6 +14,7 @@ |
14 | 14 | |
15 | 15 | import { defineComponent, computed } from 'vue'; |
16 | 16 | import { Dropdown } from '/@/components/Dropdown/index'; |
17 | + import Icon from '/@/components/Icon'; | |
17 | 18 | |
18 | 19 | import { TabContentProps, TabContentEnum } from '../types'; |
19 | 20 | |
... | ... | @@ -26,7 +27,7 @@ |
26 | 27 | import { RouteLocationNormalized } from 'vue-router'; |
27 | 28 | export default defineComponent({ |
28 | 29 | name: 'TabContent', |
29 | - components: { Dropdown, RightOutlined }, | |
30 | + components: { Dropdown, RightOutlined, Icon }, | |
30 | 31 | props: { |
31 | 32 | tabItem: { |
32 | 33 | type: Object as PropType<RouteLocationNormalized>, | ... | ... |
src/locales/lang/en/routes/basic.ts
src/locales/lang/zh_CN/routes/basic.ts
src/router/constant.ts
1 | 1 | import type { AppRouteRecordRaw } from '/@/router/types'; |
2 | 2 | import ParentLayout from '/@/layouts/page/ParentView.vue'; |
3 | +import { t } from '/@/hooks/web/useI18n'; | |
3 | 4 | |
4 | 5 | const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue'); |
5 | 6 | |
... | ... | @@ -65,3 +66,24 @@ export const REDIRECT_ROUTE: AppRouteRecordRaw = { |
65 | 66 | }, |
66 | 67 | ], |
67 | 68 | }; |
69 | + | |
70 | +export const ERROR_LOG_ROUTE: AppRouteRecordRaw = { | |
71 | + path: '/error-log', | |
72 | + name: 'errorLog', | |
73 | + component: LAYOUT, | |
74 | + meta: { | |
75 | + title: 'ErrorLog', | |
76 | + hideBreadcrumb: true, | |
77 | + }, | |
78 | + children: [ | |
79 | + { | |
80 | + path: 'list', | |
81 | + name: 'errorLogList', | |
82 | + component: () => import('/@/views/sys/error-log/index.vue'), | |
83 | + meta: { | |
84 | + title: t('routes.basic.errorLogList'), | |
85 | + hideBreadcrumb: true, | |
86 | + }, | |
87 | + }, | |
88 | + ], | |
89 | +}; | ... | ... |
src/store/modules/permission.ts
... | ... | @@ -18,9 +18,8 @@ import { transformObjToRoute } from '/@/router/helper/routeHelper'; |
18 | 18 | import { transformRouteToMenu } from '/@/router/helper/menuHelper'; |
19 | 19 | |
20 | 20 | import { useMessage } from '/@/hooks/web/useMessage'; |
21 | -// import { warn } from '/@/utils/log'; | |
22 | 21 | import { useI18n } from '/@/hooks/web/useI18n'; |
23 | -import { PAGE_NOT_FOUND_ROUTE } from '/@/router/constant'; | |
22 | +import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from '/@/router/constant'; | |
24 | 23 | |
25 | 24 | const { createMessage } = useMessage(); |
26 | 25 | const NAME = 'permission'; |
... | ... | @@ -121,6 +120,7 @@ class Permission extends VuexModule { |
121 | 120 | |
122 | 121 | routes = [PAGE_NOT_FOUND_ROUTE, ...routeList]; |
123 | 122 | } |
123 | + routes.push(ERROR_LOG_ROUTE); | |
124 | 124 | return routes; |
125 | 125 | } |
126 | 126 | } | ... | ... |
src/views/demo/page/list/card/index.vue
... | ... | @@ -5,7 +5,7 @@ |
5 | 5 | <div :class="`${prefixCls}__link`"> |
6 | 6 | <a><Icon icon="bx:bx-paper-plane" color="#1890ff" /><span>开始</span></a> |
7 | 7 | <a><Icon icon="carbon:warning" color="#1890ff" /><span>简介</span></a> |
8 | - <a><Icon icon="gg:loadbar-doc" color="#1890ff" /><span>文档</span></a> | |
8 | + <a><Icon icon="ion:document-text-outline" color="#1890ff" /><span>文档</span></a> | |
9 | 9 | </div> |
10 | 10 | </template> |
11 | 11 | ... | ... |