style(web): 精简登录品牌与注册入口
This commit is contained in:
1 parent
5494190330
commit
ada741f53d
6 files changed
+15
-294
No files matched your search
+1
-12
@@ -105,25 +105,14 @@ export default {
|
||||
login: {
|
||||
welcome: 'Short-drama workspace',
|
||||
consoleLabel: 'Content Operations',
|
||||
message: 'Manage dramas, episodes, publishing, and access.',
|
||||
hint: 'Sign in with an admin account',
|
||||
noAccount: 'No account yet?',
|
||||
pointDrama: 'Dramas and episodes',
|
||||
pointPublish: 'Publishing',
|
||||
pointAccess: 'Access',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
register: 'Register',
|
||||
checkPassword: 'Confirm password',
|
||||
login: 'Sign in',
|
||||
otherLogin: 'Sign in with',
|
||||
remember: 'Remember me',
|
||||
hasUser: 'Existing account? Go to login',
|
||||
forgetPassword: 'Forget password',
|
||||
usernamePlaceholder: 'Please input username',
|
||||
passwordPlaceholder: 'Please input password',
|
||||
code: 'Verification code',
|
||||
codePlaceholder: 'Please input verification code'
|
||||
passwordPlaceholder: 'Please input password'
|
||||
},
|
||||
router: {
|
||||
login: 'Login',
|
||||
|
||||
+1
-12
@@ -105,25 +105,14 @@ export default {
|
||||
login: {
|
||||
welcome: '短剧内容管理',
|
||||
consoleLabel: '内容运营后台',
|
||||
message: '管理短剧、剧集、发布状态和后台权限。',
|
||||
hint: '使用管理员账号进入工作台',
|
||||
noAccount: '还没有账号?',
|
||||
pointDrama: '短剧与剧集',
|
||||
pointPublish: '发布状态',
|
||||
pointAccess: '角色权限',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
register: '注册',
|
||||
checkPassword: '确认密码',
|
||||
login: '登录',
|
||||
otherLogin: '其它登录方式',
|
||||
remember: '记住我',
|
||||
hasUser: '已有账号?去登录',
|
||||
forgetPassword: '忘记密码',
|
||||
usernamePlaceholder: '请输入用户名',
|
||||
passwordPlaceholder: '请输入密码',
|
||||
code: '验证码',
|
||||
codePlaceholder: '请输入验证码'
|
||||
passwordPlaceholder: '请输入密码'
|
||||
},
|
||||
router: {
|
||||
login: '登录',
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { LoginForm, RegisterForm } from './components'
|
||||
import { LoginForm } from './components'
|
||||
import { ThemeSwitch } from '@/components/ThemeSwitch'
|
||||
import { LocaleDropdown } from '@/components/LocaleDropdown'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { getCssVar, underlineToHump } from '@/utils'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { ElScrollbar } from 'element-plus'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const { t } = useI18n()
|
||||
const isLogin = ref(true)
|
||||
const isDark = computed(() => appStore.getIsDark)
|
||||
const toolColor = computed(() => (isDark.value ? '#e5eaf3' : '#303133'))
|
||||
|
||||
@@ -35,12 +34,6 @@ const themeChange = () => {
|
||||
<div class="hero-copy">
|
||||
<p class="hero-kicker">{{ t('login.consoleLabel') }}</p>
|
||||
<h1>{{ t('login.welcome') }}</h1>
|
||||
<p>{{ t('login.message') }}</p>
|
||||
<ul>
|
||||
<li>{{ t('login.pointDrama') }}</li>
|
||||
<li>{{ t('login.pointPublish') }}</li>
|
||||
<li>{{ t('login.pointAccess') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -50,8 +43,7 @@ const themeChange = () => {
|
||||
<LocaleDropdown :color="toolColor" />
|
||||
</div>
|
||||
<div class="login-card">
|
||||
<LoginForm v-if="isLogin" @to-register="isLogin = false" />
|
||||
<RegisterForm v-else @to-login="isLogin = true" />
|
||||
<LoginForm />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -130,40 +122,16 @@ const themeChange = () => {
|
||||
line-height: 1.2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
color: rgb(255 255 255 / 82%);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-kicker {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
color: #d9ecff !important;
|
||||
}
|
||||
|
||||
.hero-copy ul {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 28px 0 0;
|
||||
list-style: none;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
li {
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
background: rgb(255 255 255 / 12%);
|
||||
border: 1px solid rgb(255 255 255 / 18%);
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -228,10 +196,6 @@ const themeChange = () => {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.hero-copy ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding: 44px 16px 12px;
|
||||
}
|
||||
@@ -253,10 +217,6 @@ const themeChange = () => {
|
||||
padding: 16px 18px 18px;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 28px 20px 24px;
|
||||
}
|
||||
@@ -282,25 +242,6 @@ const themeChange = () => {
|
||||
}
|
||||
}
|
||||
|
||||
.login-register {
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-card :deep(.el-button--primary) {
|
||||
--el-button-bg-color: var(--app-brand);
|
||||
--el-button-border-color: var(--app-brand);
|
||||
|
||||
@@ -6,7 +6,7 @@ import { Form, FormSchema } from '@/components/Form'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { ElCheckbox, ElLink } from 'element-plus'
|
||||
import { useForm } from '@/hooks/web/useForm'
|
||||
import { loginApi, getTestRoleApi, getAdminRoleApi } from '@/api/login'
|
||||
import { loginApi, getAdminRoleApi } from '@/api/login'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
import { usePermissionStore } from '@/store/modules/permission'
|
||||
import { landingPath } from '@/utils/landing'
|
||||
@@ -19,8 +19,6 @@ import { BaseButton } from '@/components/Button'
|
||||
|
||||
const { required } = useValidator()
|
||||
|
||||
const emit = defineEmits(['to-register'])
|
||||
|
||||
const appStore = useAppStore()
|
||||
|
||||
const userStore = useUserStore()
|
||||
@@ -113,24 +111,11 @@ const schema = reactive<FormSchema[]>([
|
||||
slots: {
|
||||
default: () => {
|
||||
return (
|
||||
<>
|
||||
<div class="w-[100%]">
|
||||
<BaseButton
|
||||
loading={loading.value}
|
||||
type="primary"
|
||||
class="w-[100%]"
|
||||
onClick={signIn}
|
||||
>
|
||||
{t('login.login')}
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div class="login-register">
|
||||
<span>{t('login.noAccount')}</span>
|
||||
<button type="button" onClick={toRegister}>
|
||||
{t('login.register')}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
<div class="w-[100%]">
|
||||
<BaseButton loading={loading.value} type="primary" class="w-[100%]" onClick={signIn}>
|
||||
{t('login.login')}
|
||||
</BaseButton>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -218,16 +203,11 @@ const getRole = async () => {
|
||||
const params = {
|
||||
roleName: formData.username
|
||||
}
|
||||
const res =
|
||||
appStore.getDynamicRouter && appStore.getServerDynamicRouter
|
||||
? await getAdminRoleApi(params)
|
||||
: await getTestRoleApi(params)
|
||||
const res = await getAdminRoleApi(params)
|
||||
if (res) {
|
||||
const routers = res.data || []
|
||||
userStore.setRoleRouters(routers)
|
||||
appStore.getDynamicRouter && appStore.getServerDynamicRouter
|
||||
? await permissionStore.generateRoutes('server', routers).catch(() => {})
|
||||
: await permissionStore.generateRoutes('frontEnd', routers).catch(() => {})
|
||||
await permissionStore.generateRoutes('server', routers).catch(() => {})
|
||||
|
||||
permissionStore.getAddRouters.forEach((route) => {
|
||||
addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
|
||||
@@ -238,11 +218,6 @@ const getRole = async () => {
|
||||
push({ path: redirect.value || landingPath() })
|
||||
}
|
||||
}
|
||||
|
||||
// 去注册页面
|
||||
const toRegister = () => {
|
||||
emit('to-register')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,172 +0,0 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { Form, FormSchema } from '@/components/Form'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useForm } from '@/hooks/web/useForm'
|
||||
import { ElButton, ElInput, FormRules } from 'element-plus'
|
||||
import { useValidator } from '@/hooks/web/useValidator'
|
||||
|
||||
const emit = defineEmits(['to-login'])
|
||||
|
||||
const { formRegister, formMethods } = useForm()
|
||||
const { getElFormExpose } = formMethods
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const { required } = useValidator()
|
||||
|
||||
const schema = reactive<FormSchema[]>([
|
||||
{
|
||||
field: 'title',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
formItemProps: {
|
||||
slots: {
|
||||
default: () => {
|
||||
return (
|
||||
<div class="login-heading">
|
||||
<h2>{t('login.register')}</h2>
|
||||
<p>{t('login.message')}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'username',
|
||||
label: t('login.username'),
|
||||
value: '',
|
||||
component: 'Input',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
componentProps: {
|
||||
placeholder: t('login.usernamePlaceholder')
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'password',
|
||||
label: t('login.password'),
|
||||
value: '',
|
||||
component: 'InputPassword',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
componentProps: {
|
||||
style: {
|
||||
width: '100%'
|
||||
},
|
||||
strength: true,
|
||||
placeholder: t('login.passwordPlaceholder')
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'check_password',
|
||||
label: t('login.checkPassword'),
|
||||
value: '',
|
||||
component: 'InputPassword',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
componentProps: {
|
||||
style: {
|
||||
width: '100%'
|
||||
},
|
||||
strength: true,
|
||||
placeholder: t('login.passwordPlaceholder')
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'code',
|
||||
label: t('login.code'),
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
formItemProps: {
|
||||
slots: {
|
||||
default: (formData) => {
|
||||
return (
|
||||
<div class="w-[100%] flex">
|
||||
<ElInput v-model={formData.code} placeholder={t('login.codePlaceholder')} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'register',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
formItemProps: {
|
||||
slots: {
|
||||
default: () => {
|
||||
return (
|
||||
<>
|
||||
<div class="w-[100%]">
|
||||
<ElButton
|
||||
type="primary"
|
||||
class="w-[100%]"
|
||||
loading={loading.value}
|
||||
onClick={loginRegister}
|
||||
>
|
||||
{t('login.register')}
|
||||
</ElButton>
|
||||
</div>
|
||||
<div class="w-[100%] mt-15px">
|
||||
<ElButton class="w-[100%]" onClick={toLogin}>
|
||||
{t('login.hasUser')}
|
||||
</ElButton>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
const rules: FormRules = {
|
||||
username: [required()],
|
||||
password: [required()],
|
||||
check_password: [required()],
|
||||
code: [required()]
|
||||
}
|
||||
|
||||
const toLogin = () => {
|
||||
emit('to-login')
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const loginRegister = async () => {
|
||||
const formRef = await getElFormExpose()
|
||||
formRef?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
loading.value = true
|
||||
toLogin()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
:schema="schema"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
hide-required-asterisk
|
||||
size="large"
|
||||
class="login-form"
|
||||
@register="formRegister"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,6 +1,5 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import LoginForm from './LoginForm.vue'
|
||||
import RegisterForm from './RegisterForm.vue'
|
||||
|
||||
export { LoginForm, RegisterForm }
|
||||
export { LoginForm }
|
||||
Reference in new issue
Block a user