src/assets/home/success.png | 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/router/modules/remaining.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/style/element-plus-new.scss | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/style/index.scss | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/style/login.css | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/home/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/login/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/register/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/register/registernav.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/register/registersucess.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
vite.config.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/assets/home/success.png
src/router/modules/remaining.ts
@@ -52,6 +52,16 @@ } }, { path: "/registernav", name: "RegisterNav", component: () => import("@/views/register/registernav.vue"), meta: { title: "注册向导", showLink: false, rank: 103 } }, { path: "/redirect", component: Layout, meta: { src/style/element-plus-new.scss
New file @@ -0,0 +1,14 @@ // 修改element-plus主题色 @forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: ( "primary": ( "base": #007d7b, ), ), $button-padding-horizontal: ( // "default": 80px ) ); src/style/index.scss
@@ -24,7 +24,9 @@ --pure-theme-sidebar-logo: none; --pure-theme-menu-title-hover: initial; --pure-theme-menu-active-before: transparent; --el-color-primary: #0F5FD2; } $--color-primary: #0F5FD2; // 蓝色 /* 灰色模式 */ .html-grey { src/style/login.css
@@ -55,7 +55,7 @@ .login-form h2 { text-transform: uppercase; margin: 15px 0; color: #999; color: var(--el-color-primary); font: bold 200% Consolas, Monaco, src/views/home/index.vue
@@ -163,29 +163,36 @@ v-if="state.rolesCode.indexOf(item.code) !== -1" :underline="false" class="hover:cursor-pointer" @click="toRegister" @click="logOut" >退出</el-link > <el-link v-else-if="!state.accessToken" :underline="false" class="hover:cursor-pointer" @click="toRegister" >注册</el-link > <el-link v-else :underline="false" class="hover:cursor-pointer" @click="toRegister" @click="toApply" >申请</el-link ><span class="m-2">|</span> <el-link v-if="state.rolesCode.indexOf(item.code) !== -1" :underline="false" class="hover:cursor-pointer" @click="toWelcome" @click="toWelcome(item)" >进入</el-link > <el-link v-else :underline="false" class="hover:cursor-pointer" :disabled="state.accessToken" @click="toLogin" :disabled="!!state.accessToken" @click="toLogin(item)" >登录</el-link > </div> @@ -394,6 +401,8 @@ import { getToken } from "@/utils/auth"; import { useRoute, useRouter } from "vue-router"; const router = useRouter(); defineOptions({ name: "Main" }); @@ -401,7 +410,7 @@ /** 角色(如果昵称为空则显示用户名) */ const getUseRoles = () => { state.userInfo = storageLocal().getItem("user-info"); state.userInfo.exRoles.forEach(element => { state.userInfo?.exRoles.forEach(element => { state.rolesCode.push(element.code); }); }; @@ -416,18 +425,32 @@ state.roleList = res.result; }); getUseRoles(); state.accessToken = getToken().accessToken; state.accessToken = getToken()?.accessToken; }); const router = useRouter(); const toRegister = () => { router.push({ name: "Register" }); }; const toWelcome = () => { router.push({ name: "Welcome" }); // 退出 const logOut = () => { useUserStoreHook().logOut(); }; const toLogin = () => { router.push({ name: "Login" }); // 申请 const toApply = () => {}; // 去首页 const toWelcome = item => { let role = state.userInfo?.exRoles.find(ele => { return item.code == ele.code; }); console.log(role); if (role.hasFlsh) { return router.push({ name: "Welcome" }); } router.push({ name: "RegisterNav" }); }; // 去登录 const toLogin = item => { router.push({ name: "Login", query: item }); }; </script> src/views/login/index.vue
@@ -110,7 +110,8 @@ hideTenantForLogin: false, expirySeconds: 60, // 验证码过期时间 phoneSeconds: 0, // 手机验证码倒计时 roleList: [] roleList: [], nowRole: {} }); // 验证码过期计时器 let timer: any = null; @@ -119,7 +120,7 @@ // 页面初始化 onMounted(async () => { // 若URL带有Token参数(第三方登录) const accessToken = route.query.token; // if (accessToken) await saveTokenAndInitRoutes(accessToken); // watch( // () => themeConfig.value.isLoaded, @@ -134,6 +135,13 @@ getCaptcha(); exRole().then(res => { state.roleList = res.result; const role = route.query; if (role.code) { state.nowRole = role; } else { state.nowRole = state.roleList[0]; } state.ruleForm.exRoleCode = state.nowRole?.code; }); // 注册验证码过期计时器 // if (state.captchaEnabled) { @@ -242,7 +250,7 @@ <div class="login-form"> <!-- <avatar class="avatar" /> --> <Motion> <h2 class="outline-hidden">{{ title }}</h2> <h2 class="logintitle">{{ state.nowRole.name }}登录</h2> </Motion> <el-form @@ -251,7 +259,7 @@ :rules="loginRules" size="large" > <Motion :delay="150"> <!-- <Motion :delay="150"> <el-form-item prop="exRoleCode"> <el-radio-group v-model="state.ruleForm.exRoleCode"> <el-radio @@ -262,7 +270,7 @@ > </el-radio-group> </el-form-item> </Motion> </Motion> --> <Motion :delay="100"> <el-form-item :rules="[ @@ -382,4 +390,44 @@ #suffix-span { cursor: pointer; } .login-content-code { display: flex; align-items: center; justify-content: space-around; position: relative; .login-content-code-img { width: 100%; height: 40px; line-height: 40px; background-color: #ffffff; // /* border: 1px solid rgb(220, 223, 230); */ cursor: pointer; transition: all ease 0.2s; border-radius: 4px; user-select: none; &:hover { border-color: #c0c4cc; transition: all ease 0.2s; } } } .login-content-code-expired { @extend .login-content-code; &::before { content: "验证码已过期"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px; background-color: rgba(0, 0, 0, 0.5); color: #ffffff; text-align: center; line-height: 40px; } } </style> src/views/register/index.vue
@@ -359,7 +359,9 @@ label: `${idx + 1}` })); </script> <style scoped> @import url("@/style/login.css"); </style> <style lang="scss" scoped> .content { background-color: #f8f8f8; @@ -459,6 +461,7 @@ background-color: rgba(0, 0, 0, 0.5); color: #ffffff; text-align: center; line-height: 40px; } } </style> src/views/register/registernav.vue
New file @@ -0,0 +1,36 @@ <template> <div class="content"> <div class="header"> <div class="headimg"> <img width="167px" height="44px" src="@/assets/home/logo.png" alt="" /> </div> </div> <div class="center w-[70%] h-[584px] bg-white mx-auto mt-25"> <el-button type="primary">保存</el-button> </div> </div> </template> <script setup> defineOptions({ name: "RegisterNav" }); </script> <style lang="scss" scoped> .content { background-color: #f8f8f8; width: 100%; height: 100%; .header { display: flex; align-items: center; height: 80px; width: 100%; margin: 0 auto; background-color: #fff; .headimg { width: 1200px; margin: 0 auto; } } } </style> src/views/register/registersucess.vue
@@ -6,14 +6,43 @@ </div> </div> <div class="center w-[70%] h-[584px] bg-white mx-auto mt-25"> <el-button type="primary">马上登录</el-button> <div class="w-[20%] mx-auto flex flex-wrap justify-center items-center pt-38" > <div> <img width="90px" height="90px" src="@/assets/home/success.png" alt="" /> </div> <div class="w-[100%] text-center font-550 m-4 text-3xl"> 账号注册成功 </div> <div class="w-[100%] text-center font-bold m-4 mt-10 text-2xl"> <el-button type="primary" class="w-[100%]">马上登录</el-button> </div> <div class="w-[100%] text-center text-[#0F5FD2] cursor-pointer" @click="toIndex" > 完成注册,返回首页 </div> </div> </div> </div> </template> <script setup> import { useRoute, useRouter } from "vue-router"; const router = useRouter(); defineOptions({ name: "RegisterSucess" }); const toIndex = () => { router.replace("Index"); }; </script> <style lang="scss" scoped> .content { vite.config.ts
@@ -38,6 +38,14 @@ } }, plugins: getPluginsList(VITE_CDN, VITE_COMPRESSION), css: { preprocessorOptions: { scss: { // 自动导入定制化样式进行文件覆盖 additionalData: `@use "@/style/element-plus-new.scss" as *;` } } }, // https://cn.vitejs.dev/config/dep-optimization-options.html#dep-optimization-options optimizeDeps: { include,