Skip to content

A
ant-design-pro-vue
Commit 9902f466 by Sendya
Options

feat: add login-form from https://alibaba.github.io/ice/block/login-form?type=react

parent 1896271b
Showing with 564 additions and 341 deletions
src/config/router.config.js
// eslint-disable-next-line
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
export const asyncRouterMap = [
{
path: '/',
name: 'index',
component: BasicLayout,
meta: { title: '首页' },
redirect: '/dashboard/workplace',
children: [
// dashboard
{
path: '/dashboard',
name: 'dashboard',
redirect: '/dashboard/workplace',
component: RouteView,
meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
children: [
{
path: '/dashboard/analysis',
name: 'Analysis',
component: () => import('@/views/dashboard/Analysis'),
meta: { title: '分析页', permission: [ 'dashboard' ] }
},
{
path: '/dashboard/monitor',
name: 'Monitor',
hidden: true,
component: () => import('@/views/dashboard/Monitor'),
meta: { title: '监控页', permission: [ 'dashboard' ] }
},
{
path: '/dashboard/workplace',
name: 'Workplace',
component: () => import('@/views/dashboard/Workplace'),
meta: { title: '工作台', permission: [ 'dashboard' ] }
}
]
},
// forms
{
path: '/form',
redirect: '/form/basic-form',
component: PageView,
meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
children: [
{
path: '/form/base-form',
name: 'BaseForm',
component: () => import('@/views/form/BasicForm'),
meta: { title: '基础表单', permission: [ 'form' ] }
},
{
path: '/form/step-form',
name: 'StepForm',
component: () => import('@/views/form/stepForm/StepForm'),
meta: { title: '分步表单', permission: [ 'form' ] }
},
{
path: '/form/advanced-form',
name: 'AdvanceForm',
component: () => import('@/views/form/advancedForm/AdvancedForm'),
meta: { title: '高级表单', permission: [ 'form' ] }
}
]
},
// list
{
path: '/list',
name: 'list',
component: PageView,
redirect: '/list/query-list',
meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
children: [
{
path: '/list/query-list',
name: 'QueryList',
component: () => import('@/views/list/TableList'),
meta: { title: '查询表格', permission: [ 'table' ] }
},
{
path: '/list/edit-table',
name: 'EditList',
component: () => import('@/views/list/TableInnerEditList'),
meta: { title: '内联编辑表格', permission: [ 'table' ] }
},
{
path: '/list/user-list',
name: 'UserList',
component: () => import('@/views/list/UserList'),
meta: { title: '用户列表', permission: [ 'table' ] }
},
{
path: '/list/role-list',
name: 'RoleList',
component: () => import('@/views/list/RoleList'),
meta: { title: '角色列表', permission: [ 'table' ] }
},
{
path: '/list/system-role',
name: 'SystemRole',
component: () => import('@/views/role/RoleList'),
meta: { title: '角色列表2', permission: [ 'table' ]}
},
{
path: '/list/permission-list',
name: 'PermissionList',
component: () => import('@/views/list/PermissionList'),
meta: { title: '权限列表', permission: [ 'table' ] }
},
{
path: '/list/basic-list',
name: 'BasicList',
component: () => import('@/views/list/StandardList'),
meta: { title: '标准列表', permission: [ 'table' ] }
},
{
path: '/list/card',
name: 'CardList',
component: () => import('@/views/list/CardList'),
meta: { title: '卡片列表', permission: [ 'table' ] }
},
{
path: '/list/search',
name: 'SearchList',
component: () => import('@/views/list/search/SearchLayout'),
redirect: '/list/search/article',
meta: { title: '搜索列表', permission: [ 'table' ] },
children: [
{
path: '/list/search/article',
name: 'SearchArticles',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
},
{
path: '/list/search/project',
name: 'SearchProjects',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
},
{
path: '/list/search/application',
name: 'SearchApplications',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
},
]
},
]
},
// profile
{
path: '/profile',
name: 'profile',
component: RouteView,
redirect: '/profile/basic',
meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
children: [
{
path: '/profile/basic',
name: 'ProfileBasic',
component: () => import('@/views/profile/basic/Index'),
meta: { title: '基础详情页', permission: [ 'profile' ] }
},
{
path: '/profile/advanced',
name: 'ProfileAdvanced',
component: () => import('@/views/profile/advanced/Advanced'),
meta: { title: '高级详情页', permission: [ 'profile' ] }
}
]
},
// result
{
path: '/result',
name: 'result',
component: PageView,
redirect: '/result/success',
meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
children: [
{
path: '/result/success',
name: 'ResultSuccess',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
},
{
path: '/result/fail',
name: 'ResultFail',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
}
]
},
// Exception
{
path: '/exception',
name: 'exception',
component: RouteView,
redirect: '/exception/403',
meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
children: [
{
path: '/exception/403',
name: 'Exception403',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
meta: { title: '403', permission: [ 'exception' ] }
},
{
path: '/exception/404',
name: 'Exception404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
meta: { title: '404', permission: [ 'exception' ] }
},
{
path: '/exception/500',
name: 'Exception500',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
meta: { title: '500', permission: [ 'exception' ] }
}
]
},
// account
{
path: '/account',
component: RouteView,
name: 'account',
meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
children: [
{
path: '/account/center',
name: 'center',
component: () => import('@/views/account/center/Index'),
meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings',
name: 'settings',
component: () => import('@/views/account/settings/Index'),
meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] },
redirect: '/account/settings/base',
alwaysShow: true,
children: [
{
path: '/account/settings/base',
name: 'BaseSettings',
component: () => import('@/views/account/settings/BaseSetting'),
meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/security',
name: 'SecuritySettings',
component: () => import('@/views/account/settings/Security'),
meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/custom',
name: 'CustomSettings',
component: () => import('@/views/account/settings/Custom'),
meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/binding',
name: 'BindingSettings',
component: () => import('@/views/account/settings/Binding'),
meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/notification',
name: 'NotificationSettings',
component: () => import('@/views/account/settings/Notification'),
meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
]
},
]
}
]
},
{
path: '*', redirect: '/404', hidden: true
}
]
/**
* 基础路由
* @type { *[] }
*/
export const constantRouterMap = [
{
path: '/user',
component: UserLayout,
redirect: '/user/login',
hidden: true,
children: [
{
path: 'login',
name: 'login',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
},
{
path: 'register',
name: 'register',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
},
{
path: 'register-result',
name: 'registerResult',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
}
]
},
{
path: '/test',
component: BlankLayout,
redirect: '/test/home',
children: [
{
path: 'home',
name: 'TestHome',
component: () => import('@/views/Home')
}
]
},
{
path: '/404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
},
]
// eslint-disable-next-line
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
export const asyncRouterMap = [
{
path: '/',
name: 'index',
component: BasicLayout,
meta: { title: '首页' },
redirect: '/dashboard/workplace',
children: [
// dashboard
{
path: '/dashboard',
name: 'dashboard',
redirect: '/dashboard/workplace',
component: RouteView,
meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
children: [
{
path: '/dashboard/analysis',
name: 'Analysis',
component: () => import('@/views/dashboard/Analysis'),
meta: { title: '分析页', permission: [ 'dashboard' ] }
},
{
path: '/dashboard/monitor',
name: 'Monitor',
hidden: true,
component: () => import('@/views/dashboard/Monitor'),
meta: { title: '监控页', permission: [ 'dashboard' ] }
},
{
path: '/dashboard/workplace',
name: 'Workplace',
component: () => import('@/views/dashboard/Workplace'),
meta: { title: '工作台', permission: [ 'dashboard' ] }
}
]
},
// forms
{
path: '/form',
redirect: '/form/basic-form',
component: PageView,
meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
children: [
{
path: '/form/base-form',
name: 'BaseForm',
component: () => import('@/views/form/BasicForm'),
meta: { title: '基础表单', permission: [ 'form' ] }
},
{
path: '/form/step-form',
name: 'StepForm',
component: () => import('@/views/form/stepForm/StepForm'),
meta: { title: '分步表单', permission: [ 'form' ] }
},
{
path: '/form/advanced-form',
name: 'AdvanceForm',
component: () => import('@/views/form/advancedForm/AdvancedForm'),
meta: { title: '高级表单', permission: [ 'form' ] }
}
]
},
// list
{
path: '/list',
name: 'list',
component: PageView,
redirect: '/list/query-list',
meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
children: [
{
path: '/list/query-list',
name: 'QueryList',
component: () => import('@/views/list/TableList'),
meta: { title: '查询表格', permission: [ 'table' ] }
},
{
path: '/list/edit-table',
name: 'EditList',
component: () => import('@/views/list/TableInnerEditList'),
meta: { title: '内联编辑表格', permission: [ 'table' ] }
},
{
path: '/list/user-list',
name: 'UserList',
component: () => import('@/views/list/UserList'),
meta: { title: '用户列表', permission: [ 'table' ] }
},
{
path: '/list/role-list',
name: 'RoleList',
component: () => import('@/views/list/RoleList'),
meta: { title: '角色列表', permission: [ 'table' ] }
},
{
path: '/list/system-role',
name: 'SystemRole',
component: () => import('@/views/role/RoleList'),
meta: { title: '角色列表2', permission: [ 'table' ]}
},
{
path: '/list/permission-list',
name: 'PermissionList',
component: () => import('@/views/list/PermissionList'),
meta: { title: '权限列表', permission: [ 'table' ] }
},
{
path: '/list/basic-list',
name: 'BasicList',
component: () => import('@/views/list/StandardList'),
meta: { title: '标准列表', permission: [ 'table' ] }
},
{
path: '/list/card',
name: 'CardList',
component: () => import('@/views/list/CardList'),
meta: { title: '卡片列表', permission: [ 'table' ] }
},
{
path: '/list/search',
name: 'SearchList',
component: () => import('@/views/list/search/SearchLayout'),
redirect: '/list/search/article',
meta: { title: '搜索列表', permission: [ 'table' ] },
children: [
{
path: '/list/search/article',
name: 'SearchArticles',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
},
{
path: '/list/search/project',
name: 'SearchProjects',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
},
{
path: '/list/search/application',
name: 'SearchApplications',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
},
]
},
]
},
// profile
{
path: '/profile',
name: 'profile',
component: RouteView,
redirect: '/profile/basic',
meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
children: [
{
path: '/profile/basic',
name: 'ProfileBasic',
component: () => import('@/views/profile/basic/Index'),
meta: { title: '基础详情页', permission: [ 'profile' ] }
},
{
path: '/profile/advanced',
name: 'ProfileAdvanced',
component: () => import('@/views/profile/advanced/Advanced'),
meta: { title: '高级详情页', permission: [ 'profile' ] }
}
]
},
// result
{
path: '/result',
name: 'result',
component: PageView,
redirect: '/result/success',
meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
children: [
{
path: '/result/success',
name: 'ResultSuccess',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
},
{
path: '/result/fail',
name: 'ResultFail',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
}
]
},
// Exception
{
path: '/exception',
name: 'exception',
component: RouteView,
redirect: '/exception/403',
meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
children: [
{
path: '/exception/403',
name: 'Exception403',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
meta: { title: '403', permission: [ 'exception' ] }
},
{
path: '/exception/404',
name: 'Exception404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
meta: { title: '404', permission: [ 'exception' ] }
},
{
path: '/exception/500',
name: 'Exception500',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
meta: { title: '500', permission: [ 'exception' ] }
}
]
},
// account
{
path: '/account',
component: RouteView,
name: 'account',
meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
children: [
{
path: '/account/center',
name: 'center',
component: () => import('@/views/account/center/Index'),
meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings',
name: 'settings',
component: () => import('@/views/account/settings/Index'),
meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] },
redirect: '/account/settings/base',
alwaysShow: true,
children: [
{
path: '/account/settings/base',
name: 'BaseSettings',
component: () => import('@/views/account/settings/BaseSetting'),
meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/security',
name: 'SecuritySettings',
component: () => import('@/views/account/settings/Security'),
meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/custom',
name: 'CustomSettings',
component: () => import('@/views/account/settings/Custom'),
meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/binding',
name: 'BindingSettings',
component: () => import('@/views/account/settings/Binding'),
meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/notification',
name: 'NotificationSettings',
component: () => import('@/views/account/settings/Notification'),
meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
]
},
]
},
// 扩展组件
{
path: '/views/blocks',
name: 'viewsBlocks',
component: RouteView,
redirect: '/views/blocks/login1',
meta: { title: '扩展组件', icon: 'share-alt' },
children: [
{
path: '/login1',
name: 'login1',
component: () => import(/* webpackChunkName: "blocks" */ '@/views/blocks/login'),
meta: { title: 'Login' }
}
]
}
]
},
{
path: '*', redirect: '/404', hidden: true
}
]
/**
* 基础路由
* @type { *[] }
*/
export const constantRouterMap = [
{
path: '/user',
component: UserLayout,
redirect: '/user/login',
hidden: true,
children: [
{
path: 'login',
name: 'login',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
},
{
path: 'register',
name: 'register',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
},
{
path: 'register-result',
name: 'registerResult',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
}
]
},
{
path: '/blocks',
component: RouteView,
children: [
{
path: 'login1',
name: 'login1',
component: () => import(/* webpackChunkName: "blocks" */ '@/views/blocks/login'),
meta: { title: 'Login' }
}
]
},
{
path: '/test',
component: BlankLayout,
redirect: '/test/home',
children: [
{
path: 'home',
name: 'TestHome',
component: () => import('@/views/Home')
}
]
},
{
path: '/404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
},
]
src/views/blocks/login/LoginForm.vue 0 → 100644
<template>
<div class="form-container">
<div>
<h4 class="title">登录</h4>
<a-form :form="form" @submit="handleSubmit" class="form-items">
<a-form-item>
<a-input
class="custom-input"
placeholder="Username"
v-decorator="[ 'username', { rules: [{ required: true, message: 'Please input your username!' }] }]"
>
<a-icon slot="prefix" type='user' style="color: rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item>
<a-input
class="custom-input"
placeholder="Password"
v-decorator="[ 'password', { rules: [{ required: true, message: 'Please input your password!' }] }]"
>
<a-icon slot="prefix" type='lock' style="color: rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item>
<a-checkbox
v-decorator="[
'remember',
{
valuePropName: 'checked',
initialValue: true,
}
]"
>
Remember me
</a-checkbox>
<a class='login-form-forgot' href='javascript:;' style="float: right;">Forgot password</a>
<a-button type="primary" htmlType="submit" block style="border-radius: 30px;">登录</a-button>
</a-form-item>
</a-form>
</div>
</div>
</template>
<script>
export default {
name: 'LoginForm',
data () {
return {
form: this.$form.createForm(this)
}
},
methods: {
handleSubmit (e) {
e.preventDefault()
const { form: { validateFields } } = this
validateFields((errors, values) => {
if (!errors) {
console.log('values', values)
return
}
console.log('err', errors)
})
}
}
}
</script>
<style lang="less" scoped>
.form-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background: rgb(255, 255, 255);
.title {
margin-bottom: 40px;
font-weight: 500;
font-size: 32px;
text-align: center;
letter-spacing: 4px;
}
.form-items {
width: 320px;
.custom-input {
&:hover {
border-color: transparent;
}
/deep/
input {
border-radius: 0px;
border-top: 0px rgb(235, 237, 242);
border-left: 0px rgb(235, 237, 242);
border-right: 0px rgb(235, 237, 242);
border-bottom-color: rgb(235, 237, 242);
}
}
}
}
</style>
\ No newline at end of file
src/views/blocks/login/LoginIntro.vue 0 → 100644
<template>
<div class="container">
<div class="logo">
<router-link :to="{ name: 'login' }">
<img src="~@/assets/logo.svg" alt="logo">
</router-link>
</div>
<div class="title">让前端开发简单友好</div>
<p class="description">Amazing Stuff is Lorem Here.ICE Team</p>
<a-button class="button" ghost style="border-radius: 30px; width: 120px">注册</a-button>
</div>
</template>
<script>
export default {
name: 'LoginIntro'
}
</script>
<style lang="less" scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
height: 100vh;
.logo {
img {
width: 60px;
}
}
.title {
margin-top: 50px;
font-weight: 500;
font-size: 22px;
line-height: 1.5;
text-align: center;
color: #fff;
}
.description {
margin-top: 30px;
font-size: 13px;
color: #fff;
}
}
</style>
\ No newline at end of file
src/views/blocks/login/index.vue 0 → 100644
<template>
<div class="login-form">
<a-row :gutter="0">
<a-col :xl="12" :sm="24">
<login-intro />
</a-col>
<a-col :xl="12" :sm="24" class="content">
<login-form />
</a-col>
</a-row>
</div>
</template>
<script>
import LoginIntro from './LoginIntro'
import LoginForm from './LoginForm'
export default {
components: {
LoginIntro,
LoginForm
}
}
</script>
<style lang="less" scoped>
.login-form {
position: relative;
width: 100wh;
height: 100vh;
background-image: url("./bg.jpg");
.content {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #fff;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment