From bb89c5059c3a5db97c8ddccc7a7bd82b44785ffd Mon Sep 17 00:00:00 2001 From: vben <anncwb@126.com> Date: Thu, 12 Aug 2021 23:54:12 +0800 Subject: [PATCH] refactor(sys): change to setup syntax --- .eslintrc.js | 2 +- src/App.vue | 17 ++++------------- src/components/Button/src/BasicButton.vue | 4 ++-- src/views/sys/about/index.vue | 139 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------- src/views/sys/error-log/DetailModal.vue | 36 +++++++++++------------------------- src/views/sys/error-log/index.vue | 117 ++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------- src/views/sys/exception/Exception.vue | 5 ----- src/views/sys/iframe/index.vue | 80 ++++++++++++++++++++++++++++++++------------------------------------------------ src/views/sys/lock/LockPage.vue | 99 ++++++++++++++++++++++++++++++++++++++------------------------------------------------------------- src/views/sys/lock/index.vue | 17 +++++------------ src/views/sys/login/ForgetPasswordForm.vue | 63 +++++++++++++++++++-------------------------------------------- src/views/sys/login/Login.vue | 45 ++++++++++++--------------------------------- src/views/sys/login/LoginForm.vue | 144 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------- src/views/sys/login/LoginFormTitle.vue | 36 +++++++++++++----------------------- src/views/sys/login/MobileForm.vue | 63 +++++++++++++++++++-------------------------------------------- src/views/sys/login/QrCodeForm.vue | 29 +++++------------------------ src/views/sys/login/RegisterForm.vue | 75 ++++++++++++++++++++++++--------------------------------------------------- src/views/sys/login/SessionTimeoutLogin.vue | 54 +++++++++++++++++++++++------------------------------- src/views/sys/redirect/index.vue | 25 +++++++++---------------- 19 files changed, 384 insertions(+), 666 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index f2dbfa1..5fcac9e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -25,6 +25,7 @@ module.exports = defineConfig({ 'plugin:jest/recommended', ], rules: { + 'vue/script-setup-uses-vars': 'error', '@typescript-eslint/ban-ts-ignore': 'off', '@typescript-eslint/explicit-function-return-type': 'off', '@typescript-eslint/no-explicit-any': 'off', @@ -61,7 +62,6 @@ module.exports = defineConfig({ 'vue/singleline-html-element-content-newline': 'off', 'vue/attribute-hyphenation': 'off', 'vue/require-default-prop': 'off', - 'vue/script-setup-uses-vars': 'off', 'vue/html-self-closing': [ 'error', { diff --git a/src/App.vue b/src/App.vue index ad629b9..9084a8f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,23 +6,14 @@ </ConfigProvider> </template> -<script lang="ts"> - import { defineComponent } from 'vue'; +<script lang="ts" setup> import { ConfigProvider } from 'ant-design-vue'; import { AppProvider } from '/@/components/Application'; import { useTitle } from '/@/hooks/web/useTitle'; import { useLocale } from '/@/locales/useLocale'; - export default defineComponent({ - name: 'App', - components: { ConfigProvider, AppProvider }, - setup() { - useTitle(); + // support Multi-language + const { getAntdLocale } = useLocale(); - // support Multi-language - const { getAntdLocale } = useLocale(); - - return { getAntdLocale }; - }, - }); + useTitle(); </script> diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue index 3b6fb52..5a5039f 100644 --- a/src/components/Button/src/BasicButton.vue +++ b/src/components/Button/src/BasicButton.vue @@ -1,8 +1,8 @@ <template> <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick"> - <template #default="data"> + <template #default> <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" /> - <slot v-bind="data"></slot> + <slot></slot> <Icon :icon="postIcon" v-if="postIcon" :size="iconSize" /> </template> </Button> diff --git a/src/views/sys/about/index.vue b/src/views/sys/about/index.vue index 4031852..1b2cf37 100644 --- a/src/views/sys/about/index.vue +++ b/src/views/sys/about/index.vue @@ -14,94 +14,85 @@ <Description @register="registerDev" class="enter-y" /> </PageWrapper> </template> -<script lang="ts"> - import { defineComponent, h } from 'vue'; - +<script lang="ts" setup> + import { h } from 'vue'; import { Tag } from 'ant-design-vue'; import { PageWrapper } from '/@/components/Page'; import { Description, DescItem, useDescription } from '/@/components/Description/index'; - import { GITHUB_URL, SITE_URL, DOC_URL } from '/@/settings/siteSetting'; - export default defineComponent({ - name: 'AboutPage', - components: { Description, PageWrapper }, - setup() { - const { pkg, lastBuildTime } = __APP_INFO__; - const { dependencies, devDependencies, name, version } = pkg; + const { pkg, lastBuildTime } = __APP_INFO__; - const schema: DescItem[] = []; - const devSchema: DescItem[] = []; + const { dependencies, devDependencies, name, version } = pkg; - const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal); - const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text); + const schema: DescItem[] = []; + const devSchema: DescItem[] = []; - const infoSchema: DescItem[] = [ - { - label: '版本', - field: 'version', - render: commonTagRender('blue'), - }, - { - label: '最后编译时间', - field: 'lastBuildTime', - render: commonTagRender('blue'), - }, - { - label: '文档地址', - field: 'doc', - render: commonLinkRender('文档地址'), - }, - { - label: '预览地址', - field: 'preview', - render: commonLinkRender('预览地址'), - }, - { - label: 'Github', - field: 'github', - render: commonLinkRender('Github'), - }, - ]; + const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal); + const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text); - const infoData = { - version, - lastBuildTime, - doc: DOC_URL, - preview: SITE_URL, - github: GITHUB_URL, - }; + const infoSchema: DescItem[] = [ + { + label: '版本', + field: 'version', + render: commonTagRender('blue'), + }, + { + label: '最后编译时间', + field: 'lastBuildTime', + render: commonTagRender('blue'), + }, + { + label: '文档地址', + field: 'doc', + render: commonLinkRender('文档地址'), + }, + { + label: '预览地址', + field: 'preview', + render: commonLinkRender('预览地址'), + }, + { + label: 'Github', + field: 'github', + render: commonLinkRender('Github'), + }, + ]; - Object.keys(dependencies).forEach((key) => { - schema.push({ field: key, label: key }); - }); + const infoData = { + version, + lastBuildTime, + doc: DOC_URL, + preview: SITE_URL, + github: GITHUB_URL, + }; - Object.keys(devDependencies).forEach((key) => { - devSchema.push({ field: key, label: key }); - }); + Object.keys(dependencies).forEach((key) => { + schema.push({ field: key, label: key }); + }); - const [register] = useDescription({ - title: '生产环境依赖', - data: dependencies, - schema: schema, - column: 3, - }); + Object.keys(devDependencies).forEach((key) => { + devSchema.push({ field: key, label: key }); + }); - const [registerDev] = useDescription({ - title: '开发环境依赖', - data: devDependencies, - schema: devSchema, - column: 3, - }); + const [register] = useDescription({ + title: '生产环境依赖', + data: dependencies, + schema: schema, + column: 3, + }); - const [infoRegister] = useDescription({ - title: '项目信息', - data: infoData, - schema: infoSchema, - column: 2, - }); + const [registerDev] = useDescription({ + title: '开发环境依赖', + data: devDependencies, + schema: devSchema, + column: 3, + }); - return { register, registerDev, infoRegister, name, GITHUB_URL }; - }, + const [infoRegister] = useDescription({ + title: '项目信息', + data: infoData, + schema: infoSchema, + column: 2, }); </script> diff --git a/src/views/sys/error-log/DetailModal.vue b/src/views/sys/error-log/DetailModal.vue index ac49e39..2073b2e 100644 --- a/src/views/sys/error-log/DetailModal.vue +++ b/src/views/sys/error-log/DetailModal.vue @@ -3,40 +3,26 @@ <Description :data="info" @register="register" /> </BasicModal> </template> -<script lang="ts"> +<script lang="ts" setup> import type { PropType } from 'vue'; import type { ErrorLogInfo } from '/#/store'; - - import { defineComponent } from 'vue'; + import { defineProps } from 'vue'; import { BasicModal } from '/@/components/Modal/index'; import { Description, useDescription } from '/@/components/Description/index'; - import { useI18n } from '/@/hooks/web/useI18n'; - import { getDescSchema } from './data'; - export default defineComponent({ - name: 'ErrorLogDetailModal', - components: { BasicModal, Description }, - props: { - info: { - type: Object as PropType<ErrorLogInfo>, - default: null, - }, + defineProps({ + info: { + type: Object as PropType<ErrorLogInfo>, + default: null, }, - setup() { - const { t } = useI18n(); + }); - const [register] = useDescription({ - column: 2, - schema: getDescSchema()!, - }); + const { t } = useI18n(); - return { - register, - useI18n, - t, - }; - }, + const [register] = useDescription({ + column: 2, + schema: getDescSchema()!, }); </script> diff --git a/src/views/sys/error-log/index.vue b/src/views/sys/error-log/index.vue index 86b2882..828968d 100644 --- a/src/views/sys/error-log/index.vue +++ b/src/views/sys/error-log/index.vue @@ -27,91 +27,66 @@ </div> </template> -<script lang="ts"> +<script lang="ts" setup> import type { ErrorLogInfo } from '/#/store'; - - import { defineComponent, watch, ref, nextTick } from 'vue'; - + import { watch, ref, nextTick } from 'vue'; import DetailModal from './DetailModal.vue'; import { BasicTable, useTable, TableAction } from '/@/components/Table/index'; - import { useModal } from '/@/components/Modal'; import { useMessage } from '/@/hooks/web/useMessage'; import { useI18n } from '/@/hooks/web/useI18n'; - import { useErrorLogStore } from '/@/store/modules/errorLog'; - import { fireErrorApi } from '/@/api/demo/error'; - import { getColumns } from './data'; - import { cloneDeep } from 'lodash-es'; - export default defineComponent({ - name: 'ErrorHandler', - components: { DetailModal, BasicTable, TableAction }, - setup() { - const rowInfo = ref<ErrorLogInfo>(); - const imgList = ref<string[]>([]); + const rowInfo = ref<ErrorLogInfo>(); + const imgList = ref<string[]>([]); - const { t } = useI18n(); - const errorLogStore = useErrorLogStore(); - const [register, { setTableData }] = useTable({ - title: t('sys.errorLog.tableTitle'), - columns: getColumns(), - actionColumn: { - width: 80, - title: 'Action', - dataIndex: 'action', - slots: { customRender: 'action' }, - }, - }); - const [registerModal, { openModal }] = useModal(); - - watch( - () => errorLogStore.getErrorLogInfoList, - (list) => { - nextTick(() => { - setTableData(cloneDeep(list)); - }); - }, - { - immediate: true, - } - ); - const { createMessage } = useMessage(); - if (import.meta.env.DEV) { - createMessage.info(t('sys.errorLog.enableMessage')); - } - // 查看详情 - function handleDetail(row: ErrorLogInfo) { - rowInfo.value = row; - openModal(true); - } + const { t } = useI18n(); + const errorLogStore = useErrorLogStore(); + const [register, { setTableData }] = useTable({ + title: t('sys.errorLog.tableTitle'), + columns: getColumns(), + actionColumn: { + width: 80, + title: 'Action', + dataIndex: 'action', + slots: { customRender: 'action' }, + }, + }); + const [registerModal, { openModal }] = useModal(); - function fireVueError() { - throw new Error('fire vue error!'); - } + watch( + () => errorLogStore.getErrorLogInfoList, + (list) => { + nextTick(() => { + setTableData(cloneDeep(list)); + }); + }, + { + immediate: true, + } + ); + const { createMessage } = useMessage(); + if (import.meta.env.DEV) { + createMessage.info(t('sys.errorLog.enableMessage')); + } + // 查看详情 + function handleDetail(row: ErrorLogInfo) { + rowInfo.value = row; + openModal(true); + } - function fireResourceError() { - imgList.value.push(`${new Date().getTime()}.png`); - } + function fireVueError() { + throw new Error('fire vue error!'); + } - async function fireAjaxError() { - await fireErrorApi(); - } + function fireResourceError() { + imgList.value.push(`${new Date().getTime()}.png`); + } - return { - register, - registerModal, - handleDetail, - fireVueError, - fireResourceError, - fireAjaxError, - imgList, - rowInfo, - t, - }; - }, - }); + async function fireAjaxError() { + await fireErrorApi(); + } </script> diff --git a/src/views/sys/exception/Exception.vue b/src/views/sys/exception/Exception.vue index dab9c57..6e56f08 100644 --- a/src/views/sys/exception/Exception.vue +++ b/src/views/sys/exception/Exception.vue @@ -1,19 +1,14 @@ <script lang="tsx"> import type { PropType } from 'vue'; - import { Result, Button } from 'ant-design-vue'; import { defineComponent, ref, computed, unref } from 'vue'; - import { ExceptionEnum } from '/@/enums/exceptionEnum'; - import notDataSvg from '/@/assets/svg/no-data.svg'; import netWorkSvg from '/@/assets/svg/net-error.svg'; - import { useRoute } from 'vue-router'; import { useDesign } from '/@/hooks/web/useDesign'; import { useI18n } from '/@/hooks/web/useI18n'; import { useGo, useRedo } from '/@/hooks/web/usePage'; - import { PageEnum } from '/@/enums/pageEnum'; interface MapValue { diff --git a/src/views/sys/iframe/index.vue b/src/views/sys/iframe/index.vue index bafdca2..961aedc 100644 --- a/src/views/sys/iframe/index.vue +++ b/src/views/sys/iframe/index.vue @@ -10,66 +10,50 @@ </Spin> </div> </template> -<script lang="ts"> +<script lang="ts" setup> import type { CSSProperties } from 'vue'; - import { defineComponent, ref, unref, computed } from 'vue'; + import { ref, unref, computed, defineProps } from 'vue'; import { Spin } from 'ant-design-vue'; - import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn'; - import { propTypes } from '/@/utils/propTypes'; import { useDesign } from '/@/hooks/web/useDesign'; import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight'; - export default defineComponent({ - name: 'IFrame', - components: { Spin }, - props: { - frameSrc: propTypes.string.def(''), - }, - setup() { - const loading = ref(true); - const topRef = ref(50); - const heightRef = ref(window.innerHeight); - const frameRef = ref<HTMLFrameElement>(); - const { headerHeightRef } = useLayoutHeight(); - - const { prefixCls } = useDesign('iframe-page'); - useWindowSizeFn(calcHeight, 150, { immediate: true }); + defineProps({ + frameSrc: propTypes.string.def(''), + }); - const getWrapStyle = computed((): CSSProperties => { - return { - height: `${unref(heightRef)}px`, - }; - }); + const loading = ref(true); + const topRef = ref(50); + const heightRef = ref(window.innerHeight); + const frameRef = ref<HTMLFrameElement>(); + const { headerHeightRef } = useLayoutHeight(); - function calcHeight() { - const iframe = unref(frameRef); - if (!iframe) { - return; - } - const top = headerHeightRef.value; - topRef.value = top; - heightRef.value = window.innerHeight - top; - const clientHeight = document.documentElement.clientHeight - top; - iframe.style.height = `${clientHeight}px`; - } + const { prefixCls } = useDesign('iframe-page'); + useWindowSizeFn(calcHeight, 150, { immediate: true }); - function hideLoading() { - loading.value = false; - calcHeight(); - } + const getWrapStyle = computed((): CSSProperties => { + return { + height: `${unref(heightRef)}px`, + }; + }); - return { - getWrapStyle, - loading, - frameRef, - prefixCls, + function calcHeight() { + const iframe = unref(frameRef); + if (!iframe) { + return; + } + const top = headerHeightRef.value; + topRef.value = top; + heightRef.value = window.innerHeight - top; + const clientHeight = document.documentElement.clientHeight - top; + iframe.style.height = `${clientHeight}px`; + } - hideLoading, - }; - }, - }); + function hideLoading() { + loading.value = false; + calcHeight(); + } </script> <style lang="less" scoped> @prefix-cls: ~'@{namespace}-iframe-page'; diff --git a/src/views/sys/lock/LockPage.vue b/src/views/sys/lock/LockPage.vue index e34323d..a2c7787 100644 --- a/src/views/sys/lock/LockPage.vue +++ b/src/views/sys/lock/LockPage.vue @@ -92,84 +92,61 @@ </div> </div> </template> -<script lang="ts"> - import { defineComponent, ref, computed } from 'vue'; +<script lang="ts" setup> + import { ref, computed } from 'vue'; import { Input } from 'ant-design-vue'; - import { useUserStore } from '/@/store/modules/user'; import { useLockStore } from '/@/store/modules/lock'; import { useI18n } from '/@/hooks/web/useI18n'; - import { useNow } from './useNow'; import { useDesign } from '/@/hooks/web/useDesign'; - import { LockOutlined } from '@ant-design/icons-vue'; import headerImg from '/@/assets/images/header.jpg'; - export default defineComponent({ - name: 'LockPage', - components: { LockOutlined, InputPassword: Input.Password }, - - setup() { - const password = ref(''); - const loading = ref(false); - const errMsg = ref(false); - const showDate = ref(true); + const InputPassword = Input.Password; - const { prefixCls } = useDesign('lock-page'); - const lockStore = useLockStore(); - const userStore = useUserStore(); + const password = ref(''); + const loading = ref(false); + const errMsg = ref(false); + const showDate = ref(true); - const { ...state } = useNow(true); + const { prefixCls } = useDesign('lock-page'); + const lockStore = useLockStore(); + const userStore = useUserStore(); - const { t } = useI18n(); + const { hour, month, minute, meridiem, year, day, week } = useNow(true); - const userinfo = computed(() => { - return userStore.getUserInfo || {}; - }); + const { t } = useI18n(); - /** - * @description: unLock - */ - async function unLock() { - if (!password.value) { - return; - } - let pwd = password.value; - try { - loading.value = true; - const res = await lockStore.unLock(pwd); - errMsg.value = !res; - } finally { - loading.value = false; - } - } + const userinfo = computed(() => { + return userStore.getUserInfo || {}; + }); - function goLogin() { - userStore.logout(true); - lockStore.resetLockInfo(); - } + /** + * @description: unLock + */ + async function unLock() { + if (!password.value) { + return; + } + let pwd = password.value; + try { + loading.value = true; + const res = await lockStore.unLock(pwd); + errMsg.value = !res; + } finally { + loading.value = false; + } + } - function handleShowForm(show = false) { - showDate.value = show; - } + function goLogin() { + userStore.logout(true); + lockStore.resetLockInfo(); + } - return { - goLogin, - userinfo, - unLock, - errMsg, - loading, - t, - prefixCls, - showDate, - password, - handleShowForm, - headerImg, - ...state, - }; - }, - }); + function handleShowForm(show = false) { + showDate.value = show; + } </script> <style lang="less" scoped> @prefix-cls: ~'@{namespace}-lock-page'; diff --git a/src/views/sys/lock/index.vue b/src/views/sys/lock/index.vue index 9ae07fb..e8c4d55 100644 --- a/src/views/sys/lock/index.vue +++ b/src/views/sys/lock/index.vue @@ -3,18 +3,11 @@ <LockPage v-if="getIsLock" /> </transition> </template> -<script lang="ts"> - import { defineComponent, computed } from 'vue'; +<script lang="ts" setup> + import { computed } from 'vue'; import LockPage from './LockPage.vue'; - import { useLockStore } from '/@/store/modules/lock'; - export default defineComponent({ - name: 'Lock', - components: { LockPage }, - setup() { - const lockStore = useLockStore(); - const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false); - return { getIsLock }; - }, - }); + + const lockStore = useLockStore(); + const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false); </script> diff --git a/src/views/sys/login/ForgetPasswordForm.vue b/src/views/sys/login/ForgetPasswordForm.vue index 7e8332e..aca24aa 100644 --- a/src/views/sys/login/ForgetPasswordForm.vue +++ b/src/views/sys/login/ForgetPasswordForm.vue @@ -32,58 +32,33 @@ </Form> </template> </template> -<script lang="ts"> - import { defineComponent, reactive, ref, computed, unref } from 'vue'; - +<script lang="ts" setup> + import { reactive, ref, computed, unref } from 'vue'; import LoginFormTitle from './LoginFormTitle.vue'; import { Form, Input, Button } from 'ant-design-vue'; import { CountdownInput } from '/@/components/CountDown'; - import { useI18n } from '/@/hooks/web/useI18n'; import { useLoginState, useFormRules, LoginStateEnum } from './useLogin'; - export default defineComponent({ - name: 'ForgetPasswordForm', - components: { - Button, - Form, - FormItem: Form.Item, - Input, - CountdownInput, - LoginFormTitle, - }, - setup() { - const { t } = useI18n(); - const { handleBackLogin, getLoginState } = useLoginState(); - const { getFormRules } = useFormRules(); - - const formRef = ref(); - const loading = ref(false); + const FormItem = Form.Item; + const { t } = useI18n(); + const { handleBackLogin, getLoginState } = useLoginState(); + const { getFormRules } = useFormRules(); - const formData = reactive({ - account: '', - mobile: '', - sms: '', - }); + const formRef = ref(); + const loading = ref(false); - const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD); + const formData = reactive({ + account: '', + mobile: '', + sms: '', + }); - async function handleReset() { - const form = unref(formRef); - if (!form) return; - await form.resetFields(); - } + const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD); - return { - t, - formRef, - formData, - getFormRules, - handleReset, - loading, - handleBackLogin, - getShow, - }; - }, - }); + async function handleReset() { + const form = unref(formRef); + if (!form) return; + await form.resetFields(); + } </script> diff --git a/src/views/sys/login/Login.vue b/src/views/sys/login/Login.vue index 4a925c6..b3fc347 100644 --- a/src/views/sys/login/Login.vue +++ b/src/views/sys/login/Login.vue @@ -61,9 +61,8 @@ </div> </div> </template> -<script lang="ts"> - import { defineComponent, computed } from 'vue'; - +<script lang="ts" setup> + import { computed, defineProps } from 'vue'; import { AppLogo } from '/@/components/Application'; import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application'; import LoginForm from './LoginForm.vue'; @@ -71,43 +70,23 @@ import RegisterForm from './RegisterForm.vue'; import MobileForm from './MobileForm.vue'; import QrCodeForm from './QrCodeForm.vue'; - import { useGlobSetting } from '/@/hooks/setting'; import { useI18n } from '/@/hooks/web/useI18n'; import { useDesign } from '/@/hooks/web/useDesign'; import { useLocaleStore } from '/@/store/modules/locale'; - export default defineComponent({ - name: 'Login', - components: { - AppLogo, - LoginForm, - ForgetPasswordForm, - RegisterForm, - MobileForm, - QrCodeForm, - AppLocalePicker, - AppDarkModeToggle, - }, - props: { - sessionTimeout: { - type: Boolean, - }, - }, - setup() { - const globSetting = useGlobSetting(); - const { prefixCls } = useDesign('login'); - const { t } = useI18n(); - const localeStore = useLocaleStore(); - - return { - t, - prefixCls, - title: computed(() => globSetting?.title ?? ''), - showLocale: localeStore.getShowPicker, - }; + defineProps({ + sessionTimeout: { + type: Boolean, }, }); + + const globSetting = useGlobSetting(); + const { prefixCls } = useDesign('login'); + const { t } = useI18n(); + const localeStore = useLocaleStore(); + const showLocale = localeStore.getShowPicker; + const title = computed(() => globSetting?.title ?? ''); </script> <style lang="less"> @prefix-cls: ~'@{namespace}-login'; diff --git a/src/views/sys/login/LoginForm.vue b/src/views/sys/login/LoginForm.vue index a8a8ee3..79fedd3 100644 --- a/src/views/sys/login/LoginForm.vue +++ b/src/views/sys/login/LoginForm.vue @@ -81,8 +81,8 @@ </div> </Form> </template> -<script lang="ts"> - import { defineComponent, reactive, ref, toRaw, unref, computed } from 'vue'; +<script lang="ts" setup> + import { reactive, ref, toRaw, unref, computed } from 'vue'; import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue'; import { @@ -102,92 +102,60 @@ import { useDesign } from '/@/hooks/web/useDesign'; //import { onKeyStroke } from '@vueuse/core'; - export default defineComponent({ - name: 'LoginForm', - components: { - [Col.name]: Col, - [Row.name]: Row, - Checkbox, - Button, - Form, - FormItem: Form.Item, - Input, - Divider, - LoginFormTitle, - InputPassword: Input.Password, - GithubFilled, - WechatFilled, - AlipayCircleFilled, - GoogleCircleFilled, - TwitterCircleFilled, - }, - setup() { - const { t } = useI18n(); - const { notification, createErrorModal } = useMessage(); - const { prefixCls } = useDesign('login'); - const userStore = useUserStore(); - - const { setLoginState, getLoginState } = useLoginState(); - const { getFormRules } = useFormRules(); - - const formRef = ref(); - const loading = ref(false); - const rememberMe = ref(false); - - const formData = reactive({ - account: 'vben', - password: '123456', - }); - - const { validForm } = useFormValid(formRef); - - //onKeyStroke('Enter', handleLogin); - - const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN); + const ACol = Col; + const ARow = Row; + const FormItem = Form.Item; + const InputPassword = Input.Password; + const { t } = useI18n(); + const { notification, createErrorModal } = useMessage(); + const { prefixCls } = useDesign('login'); + const userStore = useUserStore(); + + const { setLoginState, getLoginState } = useLoginState(); + const { getFormRules } = useFormRules(); + + const formRef = ref(); + const loading = ref(false); + const rememberMe = ref(false); + + const formData = reactive({ + account: 'vben', + password: '123456', + }); - async function handleLogin() { - const data = await validForm(); - if (!data) return; - try { - loading.value = true; - const userInfo = await userStore.login( - toRaw({ - password: data.password, - username: data.account, - mode: 'none', //不要默认的错误提示 - }) - ); - if (userInfo) { - notification.success({ - message: t('sys.login.loginSuccessTitle'), - description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`, - duration: 3, - }); - } - } catch (error) { - createErrorModal({ - title: t('sys.api.errorTip'), - content: error.message || t('sys.api.networkExceptionMsg'), - getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body, - }); - } finally { - loading.value = false; - } + const { validForm } = useFormValid(formRef); + + //onKeyStroke('Enter', handleLogin); + + const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN); + + async function handleLogin() { + const data = await validForm(); + if (!data) return; + try { + loading.value = true; + const userInfo = await userStore.login( + toRaw({ + password: data.password, + username: data.account, + mode: 'none', //不要默认的错误提示 + }) + ); + if (userInfo) { + notification.success({ + message: t('sys.login.loginSuccessTitle'), + description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`, + duration: 3, + }); } - - return { - t, - prefixCls, - formRef, - formData, - getFormRules, - rememberMe, - handleLogin, - loading, - setLoginState, - LoginStateEnum, - getShow, - }; - }, - }); + } catch (error) { + createErrorModal({ + title: t('sys.api.errorTip'), + content: error.message || t('sys.api.networkExceptionMsg'), + getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body, + }); + } finally { + loading.value = false; + } + } </script> diff --git a/src/views/sys/login/LoginFormTitle.vue b/src/views/sys/login/LoginFormTitle.vue index 1c94c74..a673636 100644 --- a/src/views/sys/login/LoginFormTitle.vue +++ b/src/views/sys/login/LoginFormTitle.vue @@ -3,33 +3,23 @@ {{ getFormTitle }} </h2> </template> -<script lang="ts"> - import { defineComponent, computed, unref } from 'vue'; - +<script lang="ts" setup> + import { computed, unref } from 'vue'; import { useI18n } from '/@/hooks/web/useI18n'; import { LoginStateEnum, useLoginState } from './useLogin'; - export default defineComponent({ - name: 'LoginFormTitle', - setup() { - const { t } = useI18n(); - - const { getLoginState } = useLoginState(); + const { t } = useI18n(); - const getFormTitle = computed(() => { - const titleObj = { - [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'), - [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'), - [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'), - [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'), - [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'), - }; - return titleObj[unref(getLoginState)]; - }); + const { getLoginState } = useLoginState(); - return { - getFormTitle, - }; - }, + const getFormTitle = computed(() => { + const titleObj = { + [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'), + [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'), + [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'), + [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'), + [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'), + }; + return titleObj[unref(getLoginState)]; }); </script> diff --git a/src/views/sys/login/MobileForm.vue b/src/views/sys/login/MobileForm.vue index 1baa69d..88b9f82 100644 --- a/src/views/sys/login/MobileForm.vue +++ b/src/views/sys/login/MobileForm.vue @@ -30,59 +30,34 @@ </Form> </template> </template> -<script lang="ts"> - import { defineComponent, reactive, ref, computed, unref } from 'vue'; - +<script lang="ts" setup> + import { reactive, ref, computed, unref } from 'vue'; import { Form, Input, Button } from 'ant-design-vue'; import { CountdownInput } from '/@/components/CountDown'; import LoginFormTitle from './LoginFormTitle.vue'; - import { useI18n } from '/@/hooks/web/useI18n'; import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin'; - export default defineComponent({ - name: 'MobileForm', - components: { - Button, - Form, - FormItem: Form.Item, - Input, - CountdownInput, - LoginFormTitle, - }, - setup() { - const { t } = useI18n(); - const { handleBackLogin, getLoginState } = useLoginState(); - const { getFormRules } = useFormRules(); - - const formRef = ref(); - const loading = ref(false); + const FormItem = Form.Item; + const { t } = useI18n(); + const { handleBackLogin, getLoginState } = useLoginState(); + const { getFormRules } = useFormRules(); - const formData = reactive({ - mobile: '', - sms: '', - }); + const formRef = ref(); + const loading = ref(false); - const { validForm } = useFormValid(formRef); + const formData = reactive({ + mobile: '', + sms: '', + }); - const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE); + const { validForm } = useFormValid(formRef); - async function handleLogin() { - const data = await validForm(); - if (!data) return; - console.log(data); - } + const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE); - return { - t, - formRef, - formData, - getFormRules, - handleLogin, - loading, - handleBackLogin, - getShow, - }; - }, - }); + async function handleLogin() { + const data = await validForm(); + if (!data) return; + console.log(data); + } </script> diff --git a/src/views/sys/login/QrCodeForm.vue b/src/views/sys/login/QrCodeForm.vue index e501e11..680c07c 100644 --- a/src/views/sys/login/QrCodeForm.vue +++ b/src/views/sys/login/QrCodeForm.vue @@ -14,37 +14,18 @@ </div> </template> </template> -<script lang="ts"> - import { defineComponent, computed, unref } from 'vue'; - +<script lang="ts" setup> + import { computed, unref } from 'vue'; import LoginFormTitle from './LoginFormTitle.vue'; import { Button, Divider } from 'ant-design-vue'; import { QrCode } from '/@/components/Qrcode/index'; - import { useI18n } from '/@/hooks/web/useI18n'; import { useLoginState, LoginStateEnum } from './useLogin'; const qrCodeUrl = 'https://vvbin.cn/next/login'; - export default defineComponent({ - name: 'QrCodeForm', - components: { - Button, - QrCode, - Divider, - LoginFormTitle, - }, - setup() { - const { t } = useI18n(); - const { handleBackLogin, getLoginState } = useLoginState(); - const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE); + const { t } = useI18n(); + const { handleBackLogin, getLoginState } = useLoginState(); - return { - t, - handleBackLogin, - qrCodeUrl, - getShow, - }; - }, - }); + const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE); </script> diff --git a/src/views/sys/login/RegisterForm.vue b/src/views/sys/login/RegisterForm.vue index 07eed0b..e70917e 100644 --- a/src/views/sys/login/RegisterForm.vue +++ b/src/views/sys/login/RegisterForm.vue @@ -65,67 +65,40 @@ </Form> </template> </template> -<script lang="ts"> - import { defineComponent, reactive, ref, unref, computed } from 'vue'; - +<script lang="ts" setup> + import { reactive, ref, unref, computed } from 'vue'; import LoginFormTitle from './LoginFormTitle.vue'; import { Form, Input, Button, Checkbox } from 'ant-design-vue'; import { StrengthMeter } from '/@/components/StrengthMeter'; import { CountdownInput } from '/@/components/CountDown'; - import { useI18n } from '/@/hooks/web/useI18n'; import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin'; - export default defineComponent({ - name: 'RegisterPasswordForm', - components: { - Button, - Form, - FormItem: Form.Item, - Input, - InputPassword: Input.Password, - Checkbox, - StrengthMeter, - CountdownInput, - LoginFormTitle, - }, - setup() { - const { t } = useI18n(); - const { handleBackLogin, getLoginState } = useLoginState(); - - const formRef = ref(); - const loading = ref(false); + const FormItem = Form.Item; + const InputPassword = Input.Password; + const { t } = useI18n(); + const { handleBackLogin, getLoginState } = useLoginState(); - const formData = reactive({ - account: '', - password: '', - confirmPassword: '', - mobile: '', - sms: '', - policy: false, - }); + const formRef = ref(); + const loading = ref(false); - const { getFormRules } = useFormRules(formData); - const { validForm } = useFormValid(formRef); + const formData = reactive({ + account: '', + password: '', + confirmPassword: '', + mobile: '', + sms: '', + policy: false, + }); - const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER); + const { getFormRules } = useFormRules(formData); + const { validForm } = useFormValid(formRef); - async function handleRegister() { - const data = await validForm(); - if (!data) return; - console.log(data); - } + const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER); - return { - t, - formRef, - formData, - getFormRules, - handleRegister, - loading, - handleBackLogin, - getShow, - }; - }, - }); + async function handleRegister() { + const data = await validForm(); + if (!data) return; + console.log(data); + } </script> diff --git a/src/views/sys/login/SessionTimeoutLogin.vue b/src/views/sys/login/SessionTimeoutLogin.vue index 34a6554..d1a2f34 100644 --- a/src/views/sys/login/SessionTimeoutLogin.vue +++ b/src/views/sys/login/SessionTimeoutLogin.vue @@ -5,47 +5,39 @@ </div> </transition> </template> -<script lang="ts"> - import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'; +<script lang="ts" setup> + import { onBeforeUnmount, onMounted, ref } from 'vue'; import Login from './Login.vue'; - import { useDesign } from '/@/hooks/web/useDesign'; import { useUserStore } from '/@/store/modules/user'; import { usePermissionStore } from '/@/store/modules/permission'; import { useAppStore } from '/@/store/modules/app'; import { PermissionModeEnum } from '/@/enums/appEnum'; - export default defineComponent({ - name: 'SessionTimeoutLogin', - components: { Login }, - setup() { - const { prefixCls } = useDesign('st-login'); - const userStore = useUserStore(); - const permissionStore = usePermissionStore(); - const appStore = useAppStore(); - const userId = ref<Nullable<number | string>>(0); - const isBackMode = () => { - return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK; - }; + const { prefixCls } = useDesign('st-login'); + const userStore = useUserStore(); + const permissionStore = usePermissionStore(); + const appStore = useAppStore(); + const userId = ref<Nullable<number | string>>(0); - onMounted(() => { - // 记录当前的UserId - userId.value = userStore.getUserInfo?.userId; - console.log('Mounted', userStore.getUserInfo); - }); + const isBackMode = () => { + return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK; + }; - onBeforeUnmount(() => { - if (userId.value && userId.value !== userStore.getUserInfo.userId) { - // 登录的不是同一个用户,刷新整个页面以便丢弃之前用户的页面状态 - document.location.reload(); - } else if (isBackMode() && permissionStore.getLastBuildMenuTime === 0) { - // 后台权限模式下,没有成功加载过菜单,就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景 - document.location.reload(); - } - }); + onMounted(() => { + // 记录当前的UserId + userId.value = userStore.getUserInfo?.userId; + console.log('Mounted', userStore.getUserInfo); + }); - return { prefixCls }; - }, + onBeforeUnmount(() => { + if (userId.value && userId.value !== userStore.getUserInfo.userId) { + // 登录的不是同一个用户,刷新整个页面以便丢弃之前用户的页面状态 + document.location.reload(); + } else if (isBackMode() && permissionStore.getLastBuildMenuTime === 0) { + // 后台权限模式下,没有成功加载过菜单,就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景 + document.location.reload(); + } }); </script> <style lang="less" scoped> diff --git a/src/views/sys/redirect/index.vue b/src/views/sys/redirect/index.vue index 706533b..726c6f0 100644 --- a/src/views/sys/redirect/index.vue +++ b/src/views/sys/redirect/index.vue @@ -1,26 +1,19 @@ <template> <div></div> </template> -<script lang="ts"> - import { defineComponent, unref } from 'vue'; +<script lang="ts" setup> + import { unref } from 'vue'; import { useRouter } from 'vue-router'; - export default defineComponent({ - name: 'Redirect', - setup() { - const { currentRoute, replace } = useRouter(); + const { currentRoute, replace } = useRouter(); - const { params, query } = unref(currentRoute); - const { path } = params; + const { params, query } = unref(currentRoute); + const { path } = params; - const _path = Array.isArray(path) ? path.join('/') : path; + const _path = Array.isArray(path) ? path.join('/') : path; - replace({ - path: '/' + _path, - query, - }); - - return {}; - }, + replace({ + path: '/' + _path, + query, }); </script> -- libgit2 0.23.3