Commit b335e7511b90988e5dbe3d42402ad6d52b646e43

Authored by vben
1 parent 1f96eaef

chore: fix the error-log list as the system route

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
... ... @@ -6,5 +6,5 @@ export enum PageEnum {
6 6 // error page path
7 7 ERROR_PAGE = '/exception',
8 8 // error log page path
9   - ERROR_LOG_PAGE = '/feat/error-log',
  9 + ERROR_LOG_PAGE = '/error-log/list',
10 10 }
... ...
src/layouts/default/header/components/index.ts
... ... @@ -10,6 +10,4 @@ export const FullScreen = createAsyncComponent(() =&gt; import(&#39;./FullScreen.vue&#39;))
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
1 1 export default {
2 2 login: 'Login',
  3 + errorLogList: 'Error Log',
3 4 };
... ...
src/locales/lang/zh_CN/routes/basic.ts
1 1 export default {
2 2 login: '登录',
  3 + errorLogList: '错误日志列表',
3 4 };
... ...
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 &#39;/@/router/helper/routeHelper&#39;;
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  
... ...