From e596df5305ebf2a57714e786d2b83783c72f2805 Mon Sep 17 00:00:00 2001 From: liufu <809388027@qq.com> Date: Thu, 15 Dec 2022 17:06:53 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=85=A8=E5=B1=80):=20=E5=A2=9E=E5=8A=A0h?= =?UTF-8?q?ook=E7=BB=84=E4=BB=B6,=20=E7=94=A8=E4=BA=8E=E5=AF=B9=E8=AF=9D?= =?UTF-8?q?=E6=A1=86=E3=80=81=E6=B6=88=E6=81=AF=E6=8F=90=E7=A4=BA;=20?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=B3=BB=E7=BB=9F=E6=A0=87=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/README.md | 4 +- frontend/index.html | 2 +- frontend/src/assets/css/hookComponent.css | 8 ++ .../src/components/common/function/index.ts | 21 +++++ .../components/common/hookComponent/dialog.ts | 20 +++++ .../common/hookComponent/dialog.vue | 86 +++++++++++++++++++ .../common/hookComponent/message.ts | 55 ++++++++++++ .../common/hookComponent/message.vue | 33 +++++++ frontend/src/components/login/loginForm.vue | 12 +-- frontend/src/languages/langs/cnZh.ts | 9 ++ frontend/src/languages/langs/enUs.ts | 9 ++ frontend/src/main.ts | 2 + frontend/src/types/system/hookComponent.ts | 20 +++++ 13 files changed, 267 insertions(+), 14 deletions(-) create mode 100644 frontend/src/assets/css/hookComponent.css create mode 100644 frontend/src/components/common/function/index.ts create mode 100644 frontend/src/components/common/hookComponent/dialog.ts create mode 100644 frontend/src/components/common/hookComponent/dialog.vue create mode 100644 frontend/src/components/common/hookComponent/message.ts create mode 100644 frontend/src/components/common/hookComponent/message.vue create mode 100644 frontend/src/types/system/hookComponent.ts diff --git a/frontend/README.md b/frontend/README.md index 3a1c8d0..6a05371 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,4 +1,4 @@ - # 开发环境 - Vue: 3.2.45 + # 系统环境 + Vue + TS: 3.2.45 Vite: 4.0.0 Node: 16.13.1 \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html index 4ef22df..14ba63b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,7 +5,7 @@ - Vite + Vue + TS + ModernWMS diff --git a/frontend/src/assets/css/hookComponent.css b/frontend/src/assets/css/hookComponent.css new file mode 100644 index 0000000..cb04553 --- /dev/null +++ b/frontend/src/assets/css/hookComponent.css @@ -0,0 +1,8 @@ +.messageItems { + position: fixed; + /* top: 10px; */ + left: 50%; + max-width: 90%; + transform: translate(-50%, 0); + transition: all 0.2s; +} diff --git a/frontend/src/components/common/function/index.ts b/frontend/src/components/common/function/index.ts new file mode 100644 index 0000000..97cfcc8 --- /dev/null +++ b/frontend/src/components/common/function/index.ts @@ -0,0 +1,21 @@ +import '@/assets/css/hookComponent.css' // import hookComponent style + +// Use import.meta.globEager to read the files in the components folder, distinguished by the suffix ts +const componentsList: any = import.meta.globEager('../hookComponent/**') + +const List: any = {} +export default function (app: any) { + Object.keys(componentsList).forEach((key) => { + // Filter out ts suffix + if (key.includes('.ts')) { + // Assignment function component, thrown later, imported for use + List[`$${ componentsList[key].default.name }`] = componentsList[key].default + + // Define function components into global variables, and use them in script in vue through proxy + app.config.globalProperties[`$${ componentsList[key].default.name }`] = componentsList[key].default + } + }) +} + +// Export function components for import +export const funComponentList = List diff --git a/frontend/src/components/common/hookComponent/dialog.ts b/frontend/src/components/common/hookComponent/dialog.ts new file mode 100644 index 0000000..44c9ea3 --- /dev/null +++ b/frontend/src/components/common/hookComponent/dialog.ts @@ -0,0 +1,20 @@ +import { createApp } from 'vue' +import DialogComponent from './dialog.vue' +import { DialogOptions } from '@/types/system/hookComponent' +// Use vuetify +import { vuetify } from '@/plugins/vuetify/index' + +// Use the createApp of vue3 and the mount and unmount methods to create a mounted instance +export default function dialog(options: DialogOptions) { + const mountNode = document.createElement('div') + document.body.appendChild(mountNode) + const app = createApp(DialogComponent, { + ...options, + visible: true, + removeComponent: () => { + app.unmount() + document.body.removeChild(mountNode) + } + }).use(vuetify) + return app.mount(mountNode) +} diff --git a/frontend/src/components/common/hookComponent/dialog.vue b/frontend/src/components/common/hookComponent/dialog.vue new file mode 100644 index 0000000..417b869 --- /dev/null +++ b/frontend/src/components/common/hookComponent/dialog.vue @@ -0,0 +1,86 @@ + + + diff --git a/frontend/src/components/common/hookComponent/message.ts b/frontend/src/components/common/hookComponent/message.ts new file mode 100644 index 0000000..f650bf7 --- /dev/null +++ b/frontend/src/components/common/hookComponent/message.ts @@ -0,0 +1,55 @@ +import { createApp } from 'vue' +import MessageComponent from './message.vue' +import { MessageOptions } from '@/types/system/hookComponent' +// Use vuetify +import { vuetify } from '@/plugins/vuetify/index' + +// Use the createApp of vue3 and the mount and unmount methods to create a mounted instance +export default function message(options: MessageOptions) { + const mountNode = document.createElement('div') + mountNode.className = 'messageItems' + mountNode.style.top = `${ getNewMsgTop() }px` + document.body.appendChild(mountNode) + const app = createApp(MessageComponent, { + ...options, + removeComponent: () => { + setTimeout(() => { + mountNode.style.opacity = '0' + setTimeout(() => { + app.unmount() + document.body.removeChild(mountNode) + resetMsgTop() + }, 200) + }, options.shutDelay ? options.shutDelay - 200 : 1300) + } + }).use(vuetify) + return app.mount(mountNode) +} + +// Reset message top +function resetMsgTop() { + const messageDomList: any = document.body.getElementsByClassName('messageItems') + for (let i = 0; i < messageDomList.length; i++) { + messageDomList[i].style.top = `${ getNewMsgTop(i) }px` + } +} + +// Get message top +function getNewMsgTop(index = -1) { + const messageDomList = document.body.querySelectorAll('.messageItems') + let top = 10 + if (index < 0) { + for (let i = 0; i < messageDomList.length; i++) { + top += messageDomList[i].clientHeight + 10 + } + } else { + for (let i = 0; i < messageDomList.length; i++) { + if (i < index) { + top += messageDomList[i].clientHeight + 10 + } else { + break + } + } + } + return top +} diff --git a/frontend/src/components/common/hookComponent/message.vue b/frontend/src/components/common/hookComponent/message.vue new file mode 100644 index 0000000..320fb99 --- /dev/null +++ b/frontend/src/components/common/hookComponent/message.vue @@ -0,0 +1,33 @@ + + + + diff --git a/frontend/src/components/login/loginForm.vue b/frontend/src/components/login/loginForm.vue index aecc8d2..4e047d7 100644 --- a/frontend/src/components/login/loginForm.vue +++ b/frontend/src/components/login/loginForm.vue @@ -25,7 +25,6 @@ > {{ $t('login.mainButtonLabel') }} - @@ -38,6 +37,7 @@ import i18n from '@/languages/i18n' import { login } from '@/api/sys/login' // import { getNotify } from '@/api/sys/test' import { store } from '@/store' +// import { funComponentList } from '@/components/common/function/index' // Get v-form ref const VFormRef = ref() @@ -77,16 +77,6 @@ const method = reactive({ store.commit('user/setEffectiveMinutes', loginRes.data.expire) } } - // testApi: async () => { - // const { data: res } = await getNotify({ - // ifall: true, - // iftodo: true - // }) - - // if (res.isSuccess) { - // console.log('成功！', res) - // } - // } }) diff --git a/frontend/src/languages/langs/cnZh.ts b/frontend/src/languages/langs/cnZh.ts index 1086020..b666ecd 100644 --- a/frontend/src/languages/langs/cnZh.ts +++ b/frontend/src/languages/langs/cnZh.ts @@ -1,4 +1,13 @@ export default { + system: { + hookComponent: { + dialog: { + defaultClose: '关闭', + defaultConfirm: '确认', + defaultTitle: '提示' + } + } + }, login: { welcomeTitle: '欢迎来到ModernWMS!👋🏻', userNameMustInput: '请填写用户名!', diff --git a/frontend/src/languages/langs/enUs.ts b/frontend/src/languages/langs/enUs.ts index 8bf5c04..11f2416 100644 --- a/frontend/src/languages/langs/enUs.ts +++ b/frontend/src/languages/langs/enUs.ts @@ -1,4 +1,13 @@ export default { + system: { + hookComponent: { + dialog: { + defaultClose: 'Close', + defaultConfirm: 'Agree', + defaultTitle: 'Tips' + } + } + }, login: { welcomeTitle: 'Welcome to ModernWMS!👋🏻', userNameMustInput: 'Please fill in the userName!', diff --git a/frontend/src/main.ts b/frontend/src/main.ts index e68e634..26da314 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -8,6 +8,7 @@ import App from './App.vue' // import router import { router } from './router' import { store } from './store/index' +import hookComponent from '@/components/common/function/index' const app = createApp(App) @@ -15,5 +16,6 @@ app.use(router) app.use(store) app.use(vuetify) app.use(i18n) +app.use(hookComponent) app.mount('#app') diff --git a/frontend/src/types/system/hookComponent.ts b/frontend/src/types/system/hookComponent.ts new file mode 100644 index 0000000..a0dce5f --- /dev/null +++ b/frontend/src/types/system/hookComponent.ts @@ -0,0 +1,20 @@ +// Dialog modal options +export interface DialogOptions { + confirmText?: string // confirm btn text + cancleText?: string // cancle btn text + handleConfirm?(): void // confirm trigger method + content: string // dialog content text + title?: string // dialog title text + dialogWidth?: string | number // dialog width pixel or percentage +} + +// System message options +export interface MessageOptions { + type?: 'success' | 'info' | 'warning' | 'error' + variant?: 'flat' | 'elevated' | 'tonal' | 'outlined' | 'text' | 'plain' + content: string + border?: boolean | 'top' | 'end' | 'bottom' | 'start' + shutDelay?: number + color?: string + messageWidth?: string | number // message width pixel or percentage +}