style(web): 精简登录品牌与注册入口

This commit is contained in:
Zhou Weidong committed 2026-10-19 11:31:55 +08:00
1 parent 5494190330
commit ada741f53d
6 files changed
+15 -294

No files matched your search

+1 -12
View File
@@ -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
View File
@@ -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: '登录',
+4 -63
View File
@@ -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);
+8 -33
View File
@@ -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>
-172
View File
@@ -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 -2
View File
@@ -1,6 +1,5 @@
// Author: fruit.com.cn
import LoginForm from './LoginForm.vue'
import RegisterForm from './RegisterForm.vue'
export { LoginForm, RegisterForm }
export { LoginForm }