Commit bcab4b774d384a5de9b87a0c700a9937c79eb5cd
1 parent
0f4b847d
perf(use-message): fix typo
Showing
7 changed files
with
56 additions
and
17 deletions
CHANGELOG.zh_CN.md
src/hooks/web/useMessage.tsx
1 | 1 | import type { ModalFunc, ModalFuncProps } from 'ant-design-vue/lib/modal/Modal'; |
2 | +import type { MessageApi } from 'ant-design-vue/lib/message/index'; | |
3 | +import type { VNodeTypes, CSSProperties } from 'vue'; | |
2 | 4 | |
3 | 5 | import { Modal, message as Message, notification } from 'ant-design-vue'; |
4 | 6 | import { InfoCircleFilled, CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue'; |
5 | 7 | |
6 | 8 | import { useSetting } from '/@/hooks/core/useSetting'; |
7 | 9 | |
10 | +export interface ArgsProps { | |
11 | + message: VNodeTypes; | |
12 | + description?: VNodeTypes; | |
13 | + btn?: VNodeTypes; | |
14 | + key?: string; | |
15 | + onClose?: () => void; | |
16 | + duration?: number | null; | |
17 | + icon?: VNodeTypes; | |
18 | + placement?: NotificationPlacement; | |
19 | + style?: CSSProperties; | |
20 | + prefixCls?: string; | |
21 | + class?: string; | |
22 | + readonly type?: IconType; | |
23 | + onClick?: () => void; | |
24 | + top?: number; | |
25 | + bottom?: number; | |
26 | + getContainer?: () => HTMLElement; | |
27 | + closeIcon?: VNodeTypes; | |
28 | +} | |
29 | + | |
30 | +export declare type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; | |
31 | +export declare type IconType = 'success' | 'info' | 'error' | 'warning'; | |
32 | +export interface ConfigProps { | |
33 | + top?: string | number; | |
34 | + bottom?: string | number; | |
35 | + duration?: number; | |
36 | + placement?: NotificationPlacement; | |
37 | + getContainer?: () => HTMLElement; | |
38 | + closeIcon?: VNodeTypes; | |
39 | +} | |
40 | + | |
8 | 41 | export interface ModalOptionsEx extends Omit<ModalFuncProps, 'iconType'> { |
9 | 42 | iconType: 'warning' | 'success' | 'error' | 'info'; |
10 | 43 | } |
... | ... | @@ -84,8 +117,8 @@ notification.config({ |
84 | 117 | */ |
85 | 118 | export function useMessage() { |
86 | 119 | return { |
87 | - createMessage: Message, | |
88 | - notification, | |
120 | + createMessage: Message as MessageApi, | |
121 | + notification: notification as (arg: ArgsProps) => void, | |
89 | 122 | createConfirm: createConfirm, |
90 | 123 | createSuccessModal, |
91 | 124 | createErrorModal, | ... | ... |
src/router/menus/modules/demo/exception.ts
src/router/menus/modules/demo/feat.ts
src/router/routes/modules/demo/exception.ts
... | ... | @@ -78,13 +78,5 @@ export default { |
78 | 78 | afterCloseLoading: true, |
79 | 79 | }, |
80 | 80 | }, |
81 | - { | |
82 | - path: '/error-log', | |
83 | - name: 'ErrorLog', | |
84 | - component: () => import('/@/views/sys/error-log/index.vue'), | |
85 | - meta: { | |
86 | - title: '错误日志', | |
87 | - }, | |
88 | - }, | |
89 | 81 | ], |
90 | 82 | } as AppRouteModule; | ... | ... |
src/router/routes/modules/demo/feat.ts
... | ... | @@ -97,6 +97,14 @@ export default { |
97 | 97 | }, |
98 | 98 | }, |
99 | 99 | { |
100 | + path: '/error-log', | |
101 | + name: 'ErrorLog', | |
102 | + component: () => import('/@/views/sys/error-log/index.vue'), | |
103 | + meta: { | |
104 | + title: '错误日志', | |
105 | + }, | |
106 | + }, | |
107 | + { | |
100 | 108 | path: '/testTab/:id', |
101 | 109 | name: 'TestTab', |
102 | 110 | component: () => import('/@/views/demo/feat/tab-params/index.vue'), | ... | ... |
src/views/sys/error-log/index.vue
... | ... | @@ -22,6 +22,7 @@ |
22 | 22 | |
23 | 23 | import DetailModal from './DetailModal.vue'; |
24 | 24 | import { useModal } from '/@/components/Modal/index'; |
25 | + import { useMessage } from '/@/hooks/web/useMessage'; | |
25 | 26 | |
26 | 27 | import { BasicTable, useTable, TableAction } from '/@/components/Table/index'; |
27 | 28 | |
... | ... | @@ -32,6 +33,7 @@ |
32 | 33 | import { getColumns } from './data'; |
33 | 34 | |
34 | 35 | import { cloneDeep } from 'lodash-es'; |
36 | + import { isDevMode } from '/@/utils/env'; | |
35 | 37 | |
36 | 38 | export default defineComponent({ |
37 | 39 | name: 'ErrorHandler', |
... | ... | @@ -39,8 +41,8 @@ |
39 | 41 | setup() { |
40 | 42 | const rowInfoRef = ref<ErrorInfo>(); |
41 | 43 | const imgListRef = ref<string[]>([]); |
44 | + | |
42 | 45 | const [register, { setTableData }] = useTable({ |
43 | - titleHelpMessage: '只在`/src/settings/projectSetting.ts` 内的useErrorHandle=true时生效!', | |
44 | 46 | title: '错误日志列表', |
45 | 47 | columns: getColumns(), |
46 | 48 | actionColumn: { |
... | ... | @@ -50,8 +52,8 @@ |
50 | 52 | slots: { customRender: 'action' }, |
51 | 53 | }, |
52 | 54 | }); |
53 | - | |
54 | 55 | const [registerModal, { openModal }] = useModal(); |
56 | + | |
55 | 57 | watch( |
56 | 58 | () => errorStore.getErrorInfoState, |
57 | 59 | (list) => { |
... | ... | @@ -63,7 +65,10 @@ |
63 | 65 | immediate: true, |
64 | 66 | } |
65 | 67 | ); |
66 | - | |
68 | + const { createMessage } = useMessage(); | |
69 | + if (isDevMode()) { | |
70 | + createMessage.info('只在`/src/settings/projectSetting.ts` 内的useErrorHandle=true时生效!'); | |
71 | + } | |
67 | 72 | // 查看详情 |
68 | 73 | function handleDetail(row: ErrorInfo) { |
69 | 74 | rowInfoRef.value = row; | ... | ... |