github_mirrors/gf-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/gf-vben-admin.git synced 2025-02-03 03:32:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

同步vben

Browse Source
This commit is contained in:
JinMao 2021-09-20 11:22:14 +08:00
parent 170c42d3ab
commit d3120cbfc0
4 changed files with 291 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/api/sys/user.ts
View File

@ -6,10 +6,12 @@ import { ErrorMessageMode } from '/#/axios';
enum Api { enum Api {
Login = '/login', Login = '/login',
Logout = '/logout', Logout = '/logout',
Register = '/register',
GetPermCode = '/getPermCode', GetPermCode = '/getPermCode',
GetUserInfo = '/user/info', GetUserInfo = '/user/info',
GetPermCodeByUserId = '/getPermCodeByUserId', GetPermCodeByUserId = '/getPermCodeByUserId',
} }
const url=`http://` + window.location.hostname + `:10088`
/** /**
* @description: user login api * @description: user login api
@ -22,7 +24,19 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal')
}, },
{ {
errorMessageMode: mode, errorMessageMode: mode,
apiUrl: 'http://localhost:10088', apiUrl: url,
},
);
}
export function registerApi(params: LoginParams, mode: ErrorMessageMode = 'modal') {
return defHttp.post(
{
url: Api.Register,
params,
},
{
errorMessageMode: mode,
apiUrl: url,
}, },
); );
} }

62
src/views/sys/login/Login.vue
View File

@ -51,10 +51,10 @@
" "
> >
<LoginForm /> <LoginForm />
<ForgetPasswordForm /> <!-- <ForgetPasswordForm />-->
<RegisterForm /> <RegisterForm />
<MobileForm /> <!-- <MobileForm />-->
<QrCodeForm /> <!-- <QrCodeForm />-->
</div> </div>
</div> </div>
</div> </div>
@ -62,39 +62,39 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue'; import { computed } from 'vue';
import { AppLogo } from '/@/components/Application'; import { AppLogo } from '/@/components/Application';
import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application'; import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
import LoginForm from './LoginForm.vue'; import LoginForm from './LoginForm.vue';
import ForgetPasswordForm from './ForgetPasswordForm.vue'; import ForgetPasswordForm from './ForgetPasswordForm.vue';
import RegisterForm from './RegisterForm.vue'; import RegisterForm from './RegisterForm.vue';
import MobileForm from './MobileForm.vue'; import MobileForm from './MobileForm.vue';
import QrCodeForm from './QrCodeForm.vue'; import QrCodeForm from './QrCodeForm.vue';
import { useGlobSetting } from '/@/hooks/setting'; import { useGlobSetting } from '/@/hooks/setting';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
import { useLocaleStore } from '/@/store/modules/locale'; import { useLocaleStore } from '/@/store/modules/locale';
defineProps({ defineProps({
sessionTimeout: { sessionTimeout: {
type: Boolean, type: Boolean,
}, },
}); });
const globSetting = useGlobSetting(); const globSetting = useGlobSetting();
const { prefixCls } = useDesign('login'); const { prefixCls } = useDesign('login');
const { t } = useI18n(); const { t } = useI18n();
const localeStore = useLocaleStore(); const localeStore = useLocaleStore();
const showLocale = localeStore.getShowPicker; const showLocale = localeStore.getShowPicker;
const title = computed(() => globSetting?.title ?? ''); const title = computed(() => globSetting?.title ?? '');
</script> </script>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-login'; @prefix-cls: ~'@{namespace}-login';
@logo-prefix-cls: ~'@{namespace}-app-logo'; @logo-prefix-cls: ~'@{namespace}-app-logo';
@countdown-prefix-cls: ~'@{namespace}-countdown-input'; @countdown-prefix-cls: ~'@{namespace}-countdown-input';
@dark-bg: #293146; @dark-bg: #293146;
html[data-theme='dark'] { html[data-theme='dark'] {
.@{prefix-cls} { .@{prefix-cls} {
background-color: @dark-bg; background-color: @dark-bg;
@ -125,9 +125,9 @@
-webkit-text-fill-color: #c9d1d9 !important; -webkit-text-fill-color: #c9d1d9 !important;
box-shadow: inherit !important; box-shadow: inherit !important;
} }
} }
.@{prefix-cls} { .@{prefix-cls} {
min-height: 100%; min-height: 100%;
overflow: hidden; overflow: hidden;
@media (max-width: @screen-xl) { @media (max-width: @screen-xl) {
@ -227,5 +227,5 @@
font-size: 12px; font-size: 12px;
color: @text-color-secondary; color: @text-color-secondary;
} }
} }
</style> </style>

102
src/views/sys/login/LoginForm.vue
View File

@ -53,16 +53,16 @@
</Button> --> </Button> -->
</FormItem> </FormItem>
<ARow class="enter-x"> <ARow class="enter-x">
<ACol :md="8" :xs="24"> <!-- <ACol :md="8" :xs="24">-->
<Button block @click="setLoginState(LoginStateEnum.MOBILE)"> <!-- <Button block @click="setLoginState(LoginStateEnum.MOBILE)">-->
{{ t('sys.login.mobileSignInFormTitle') }} <!-- {{ t('sys.login.mobileSignInFormTitle') }}-->
</Button> <!-- </Button>-->
</ACol> <!-- </ACol>-->
<ACol :md="8" :xs="24" class="!my-2 !md:my-0 xs:mx-0 md:mx-2"> <!-- <ACol :md="8" :xs="24" class="!my-2 !md:my-0 xs:mx-0 md:mx-2">-->
<Button block @click="setLoginState(LoginStateEnum.QR_CODE)"> <!-- <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">-->
{{ t('sys.login.qrSignInFormTitle') }} <!-- {{ t('sys.login.qrSignInFormTitle') }}-->
</Button> <!-- </Button>-->
</ACol> <!-- </ACol>-->
<ACol :md="7" :xs="24"> <ACol :md="7" :xs="24">
<Button block @click="setLoginState(LoginStateEnum.REGISTER)"> <Button block @click="setLoginState(LoginStateEnum.REGISTER)">
{{ t('sys.login.registerButton') }} {{ t('sys.login.registerButton') }}
@ -70,66 +70,66 @@
</ACol> </ACol>
</ARow> </ARow>
<Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider> <!-- <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>-->
<div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`"> <!-- <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">-->
<GithubFilled /> <!-- <GithubFilled />-->
<WechatFilled /> <!-- <WechatFilled />-->
<AlipayCircleFilled /> <!-- <AlipayCircleFilled />-->
<GoogleCircleFilled /> <!-- <GoogleCircleFilled />-->
<TwitterCircleFilled /> <!-- <TwitterCircleFilled />-->
</div> <!-- </div>-->
</Form> </Form>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, toRaw, unref, computed } from 'vue'; import { reactive, ref, toRaw, unref, computed } from 'vue';
import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue'; import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
import { import {
GithubFilled, GithubFilled,
WechatFilled, WechatFilled,
AlipayCircleFilled, AlipayCircleFilled,
GoogleCircleFilled, GoogleCircleFilled,
TwitterCircleFilled, TwitterCircleFilled,
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import LoginFormTitle from './LoginFormTitle.vue'; import LoginFormTitle from './LoginFormTitle.vue';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin'; import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
//import { onKeyStroke } from '@vueuse/core'; //import { onKeyStroke } from '@vueuse/core';
const ACol = Col; const ACol = Col;
const ARow = Row; const ARow = Row;
const FormItem = Form.Item; const FormItem = Form.Item;
const InputPassword = Input.Password; const InputPassword = Input.Password;
const { t } = useI18n(); const { t } = useI18n();
const { notification, createErrorModal } = useMessage(); const { notification, createErrorModal } = useMessage();
const { prefixCls } = useDesign('login'); const { prefixCls } = useDesign('login');
const userStore = useUserStore(); const userStore = useUserStore();
const { setLoginState, getLoginState } = useLoginState(); const { setLoginState, getLoginState } = useLoginState();
const { getFormRules } = useFormRules(); const { getFormRules } = useFormRules();
const formRef = ref(); const formRef = ref();
const loading = ref(false); const loading = ref(false);
const rememberMe = ref(false); const rememberMe = ref(false);
const formData = reactive({ const formData = reactive({
account: 'admin', account: '',
password: '123456', password: '',
}); });
const { validForm } = useFormValid(formRef); const { validForm } = useFormValid(formRef);
//onKeyStroke('Enter', handleLogin); //onKeyStroke('Enter', handleLogin);
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN); const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
async function handleLogin() { async function handleLogin() {
const data = await validForm(); const data = await validForm();
if (!data) return; if (!data) return;
try { try {
@ -157,5 +157,5 @@
} finally { } finally {
loading.value = false; loading.value = false;
} }
} }
</script> </script>

106
src/views/sys/login/RegisterForm.vue
View File

@ -1,31 +1,32 @@
<template> <template>
<template v-if="getShow"> <template v-if="getShow">
<LoginFormTitle class="enter-x" /> <LoginFormTitle class="enter-x" />
<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
<Form class="p-4 enter-x" :model="formData" ref="formRef">
<FormItem name="account" class="enter-x"> <FormItem name="account" class="enter-x">
<Input <Input
class="fix-auto-fill" class="fix-auto-fill"
size="large" size="large"
v-model:value="formData.account" v-model:value="formData.username"
:placeholder="t('sys.login.userName')" :placeholder="t('sys.login.userName')"
/> />
</FormItem> </FormItem>
<FormItem name="mobile" class="enter-x"> <!-- <FormItem name="mobile" class="enter-x">-->
<Input <!-- <Input-->
size="large" <!-- size="large"-->
v-model:value="formData.mobile" <!-- v-model:value="formData.mobile"-->
:placeholder="t('sys.login.mobile')" <!-- :placeholder="t('sys.login.mobile')"-->
class="fix-auto-fill" <!-- class="fix-auto-fill"-->
/> <!-- />-->
</FormItem> <!-- </FormItem>-->
<FormItem name="sms" class="enter-x"> <!-- <FormItem name="sms" class="enter-x">-->
<CountdownInput <!-- <CountdownInput-->
size="large" <!-- size="large"-->
class="fix-auto-fill" <!-- class="fix-auto-fill"-->
v-model:value="formData.sms" <!-- v-model:value="formData.sms"-->
:placeholder="t('sys.login.smsCode')" <!-- :placeholder="t('sys.login.smsCode')"-->
/> <!-- />-->
</FormItem> <!-- </FormItem>-->
<FormItem name="password" class="enter-x"> <FormItem name="password" class="enter-x">
<StrengthMeter <StrengthMeter
size="large" size="large"
@ -37,17 +38,17 @@
<InputPassword <InputPassword
size="large" size="large"
visibilityToggle visibilityToggle
v-model:value="formData.confirmPassword" v-model:value="formData.password2"
:placeholder="t('sys.login.confirmPassword')" :placeholder="t('sys.login.confirmPassword')"
/> />
</FormItem> </FormItem>
<FormItem class="enter-x" name="policy"> <!-- <FormItem class="enter-x" name="policy">-->
<!-- No logic, you need to deal with it yourself --> <!-- &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;-->
<Checkbox v-model:checked="formData.policy" size="small"> <!-- <Checkbox v-model:checked="formData.policy" size="small">-->
{{ t('sys.login.policy') }} <!-- {{ t('sys.login.policy') }}-->
</Checkbox> <!-- </Checkbox>-->
</FormItem> <!-- </FormItem>-->
<Button <Button
type="primary" type="primary"
@ -66,39 +67,38 @@
</template> </template>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, unref, computed } from 'vue'; import { reactive, ref, unref, computed } from 'vue';
import LoginFormTitle from './LoginFormTitle.vue'; import LoginFormTitle from './LoginFormTitle.vue';
import { Form, Input, Button, Checkbox } from 'ant-design-vue'; import { Form, Input, Button, Checkbox } from 'ant-design-vue';
import { StrengthMeter } from '/@/components/StrengthMeter'; import { StrengthMeter } from '/@/components/StrengthMeter';
import { CountdownInput } from '/@/components/CountDown'; import { CountdownInput } from '/@/components/CountDown';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin'; import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
import { registerApi } from '/@/api/sys/user';
const FormItem = Form.Item; const FormItem = Form.Item;
const InputPassword = Input.Password; const InputPassword = Input.Password;
const { t } = useI18n(); const { t } = useI18n();
const { handleBackLogin, getLoginState } = useLoginState(); const { handleBackLogin, getLoginState } = useLoginState();
const formRef = ref(); const formRef = ref();
const loading = ref(false); const loading = ref(false);
const formData = reactive({ const formData = reactive({
account: '', username: '',
password: '', password: '',
confirmPassword: '', password2: '',
mobile: '', });
sms: '',
policy: false,
});
const { getFormRules } = useFormRules(formData); const { getFormRules } = useFormRules(formData);
const { validForm } = useFormValid(formRef); const { validForm } = useFormValid(formRef);
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER); const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
async function handleRegister() { async function handleRegister() {
const data = await validForm(); // const data = await validForm();
if (!data) return; // if (!data) return;
console.log(data); console.log(formData);
} await registerApi(formData);
}
</script> </script>