Feat:前端登录页面

This commit is contained in:
wood911010 committed 2025-07-31 20:40:37 +08:00
1 parent f93716c023
commit 55be4ad741
18 files changed
+1849 -457

No files matched your search

+9
View File
@@ -0,0 +1,9 @@
{
"permissions": {
"allow": [
"mcp__Framelink_Figma_MCP__get_figma_data",
"Bash(npm run dev:*)"
],
"deny": []
}
}
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.5, maximum-scale=3.0" />
<title>Vite + Vue3.0 + TS项目模板</title>
</head>
<body>
+1247 -150
View File
File diff suppressed because it is too large. Load diff
-2
View File
@@ -22,8 +22,6 @@
"devDependencies": {
"@types/node": "^18.16.16",
"@vitejs/plugin-vue": "^4.1.0",
"amfe-flexible": "^2.2.1",
"postcss-pxtorem": "^6.0.0",
"terser": "^5.43.1",
"typescript": "^5.8.3",
"vite": "^4.3.0",
+9 -4
View File
@@ -1,10 +1,15 @@
<template>
<!-- 路由出口 -->
<router-view></router-view>
<div id="app">
<router-view />
</div>
</template>
<script setup lang="ts">
console.log(import.meta.env.VITE_API_BASE_URL)
// 根组件,只负责渲染路由视图
</script>
<style scoped></style>
<style>
#app {
height: 100%;
}
</style>
Binary file not shown.

After

Width:  |  Height:  |  Size: 249 KiB

+17
View File
@@ -0,0 +1,17 @@
/* 全局样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#app {
height: 100%;
}
@@ -1,6 +0,0 @@
$primary-color: #42b983;
body {
font-family: Arial;
color: $primary-color;
}
-31
View File
@@ -1,31 +0,0 @@
<!--
* @Author: 13895237362 2205451508@qq.com
* @Date: 2025-07-29 09:37:26
* @LastEditors: 13895237362 2205451508@qq.com
* @LastEditTime: 2025-07-29 11:19:01
* @FilePath: /vue-demo3.0/src/components/layout/footer.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
* @author: 马国胜
* @since: 2023-04-23
* footer.vue
-->
<template>
<div></div>
</template>
<script setup lang='ts'>
import { onBeforeMount, onMounted } from "vue";
onBeforeMount(() => {
//console.log('2.组件挂载页面之前执行----onBeforeMount')
});
onMounted(() => {
//console.log('3.-组件挂载到页面之后执行-------onMounted')
});
</script>
<style scoped lang='scss'>
.text {
color: $primary-color;
}
</style>
-23
View File
@@ -1,23 +0,0 @@
<!--
* @author: 马国胜
* @since: 2023-04-23
* header.vue
-->
<template>
<div></div>
</template>
<script setup lang='ts'>
import { onBeforeMount, onMounted } from "vue";
onBeforeMount(() => {
//console.log('2.组件挂载页面之前执行----onBeforeMount')
});
onMounted(() => {
//console.log('3.-组件挂载到页面之后执行-------onMounted')
});
</script>
<style scoped lang='scss'>
.text {
color: $primary-color;
}
</style>
+2 -15
View File
@@ -1,26 +1,13 @@
/*
* @Author: 13895237362 2205451508@qq.com
* @Date: 2025-07-29 09:37:26
* @LastEditors: 13895237362 2205451508@qq.com
* @LastEditTime: 2025-07-29 15:16:39
* @FilePath: /vue-demo3.0/src/main.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus' //ui框架
import 'element-plus/dist/index.css'
import 'amfe-flexible' // 自适应分辨率与屏幕
// 全局样式重置
import './assets/styles/global.css'
import i18n from './i18n' // 国际化
const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.use(i18n)
app.mount('#app')
+24 -13
View File
@@ -1,32 +1,43 @@
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 路由类型:RouteRecordRaw
// 路由配置
const routes: Array<RouteRecordRaw> = [
{
path: "/",
component: () => import("@/view/Home.vue"),
meta: { title: '首页' }
redirect: "/login"
},
{
path: "/login",
component: () => import("@/view/login.vue"),
meta: { title: '登录' }
component: () => import("@/views/Login.vue"),
meta: { title: "登录" }
},
{
path: "/register",
component: () => import("@/view/register.vue"),
meta: { title: '注册' }
},
path: "/dashboard",
component: () => import("@/views/Dashboard.vue"),
meta: { title: "仪表板", requiresAuth: true }
}
];
const router = createRouter({
// 路由模式
history: createWebHistory(),
routes,
});
router.beforeEach(async(to) => {
document.title = typeof(to.meta.title) === "string" ? to.meta.title : ""
})
// 路由守卫
router.beforeEach((to, from, next) => {
// 设置页面标题
document.title = typeof(to.meta.title) === "string" ? to.meta.title : "授权管理平台";
// 检查是否需要认证
if (to.meta.requiresAuth) {
const token = localStorage.getItem("token");
if (!token) {
next("/login");
return;
}
}
next();
});
export default router;
-14
View File
@@ -1,14 +0,0 @@
<template>
<!-- 切换路由 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 测试路径别名配置 -->
<img src="@assets/image/1.jpg" />
</template>
<script setup lang="ts">
console.log('测试生产环境移出console')
console.log(import.meta.env)
</script>
<style scoped></style>
-166
View File
@@ -1,166 +0,0 @@
<template>
<div class="login-container">
<h2>{{ t('login.title') }}</h2>
<form @submit.prevent="handleLogin">
<div class="form-group">
<label for="username">{{ t('login.username') }}</label>
<input
id="username"
v-model="username"
type="text"
:placeholder="t('login.usernamePlaceholder')"
required
/>
</div>
<div class="form-group">
<label for="password">{{ t('login.password') }}</label>
<input
id="password"
v-model="password"
type="password"
:placeholder="t('login.passwordPlaceholder')"
required
/>
</div>
<div class="form-group remember-row">
<input
id="remember"
v-model="rememberMe"
type="checkbox"
/>
<label for="remember">{{ t('login.remember') }}</label>
</div>
<button type="submit">{{ t('login.submit') }}</button>
</form>
<p
v-if="errorMsg"
class="error"
>{{ errorMsg }}</p>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
const router = useRouter();
const { t } = useI18n();
// 登录表单数据
const username = ref("");
const password = ref("");
const rememberMe = ref(false);
const errorMsg = ref("");
onMounted(() => {
// 记住密码功能
const saved = localStorage.getItem("loginInfo");
if (saved) {
const info = JSON.parse(saved);
username.value = info.username || "";
password.value = info.password || "";
rememberMe.value = true;
}
});
function handleLogin() {
// 基本验证
if (!username.value || !password.value) {
errorMsg.value = t("login.error.required");
return;
}
// 模拟登录逻辑
if (username.value === "admin" && password.value === "123456") {
errorMsg.value = "";
if (rememberMe.value) {
localStorage.setItem(
"loginInfo",
JSON.stringify({
username: username.value,
password: password.value,
})
);
} else {
localStorage.removeItem("loginInfo");
}
// 这里可以添加登录成功后的跳转逻辑
router.push("/");
} else {
errorMsg.value = t("login.error.invalid");
}
}
</script>
<style scoped>
.login-container {
max-width: 350px;
margin: 60px auto;
padding: 32px 24px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
h2 {
margin-bottom: 24px;
color: #333;
}
.form-group {
width: 100%;
margin-bottom: 18px;
display: flex;
flex-direction: column;
}
.remember-row {
flex-direction: row;
align-items: center;
margin-bottom: 10px;
}
.remember-row input[type="checkbox"] {
margin-right: 6px;
}
label {
margin-bottom: 6px;
color: #555;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 15px;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background: #42b983;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
button[type="submit"]:hover {
background: #369870;
}
.error {
color: #e74c3c;
margin-top: 12px;
}
</style>
-7
View File
@@ -1,7 +0,0 @@
<template>
<div>我是注册组件</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>
+53
View File
@@ -0,0 +1,53 @@
<template>
<div class="dashboard">
<h1>欢迎来到授权管理平台</h1>
<p>您已成功登录!</p>
<button @click="logout" class="logout-btn">退出登录</button>
</div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
function logout() {
localStorage.removeItem("token");
router.push("/login");
}
</script>
<style scoped>
.dashboard {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: #f5f5f5;
}
h1 {
color: #333;
margin-bottom: 20px;
}
p {
color: #666;
margin-bottom: 30px;
}
.logout-btn {
padding: 10px 20px;
background: #2E69F7;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.logout-btn:hover {
background: #1557E5;
}
</style>
+486
View File
@@ -0,0 +1,486 @@
<template>
<div class="login-page">
<!-- 背景层 -->
<div class="background-layer"></div>
<!-- Logo -->
<div class="logo-section">
<div class="logo-icon">
<div class="logo-shape-1"></div>
<div class="logo-shape-2"></div>
</div>
<span class="logo-text">Cedar-V</span>
</div>
<!-- 登录区域 -->
<div class="login-section">
<div class="login-container">
<h1 class="title">授权管理平台</h1>
<p class="subtitle">登录您的账户</p>
<form @submit.prevent="handleLogin" class="login-form">
<!-- 用户名输入框 -->
<div class="form-group">
<div class="input-container active">
<div class="input-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="7" r="5" stroke="#AABCE6" stroke-width="1.5"/>
<path d="M3 20c0-5.523 4.477-10 9-10s9 4.477 9 10" stroke="#AABCE6" stroke-width="1.5"/>
</svg>
</div>
<input
v-model="username"
type="text"
placeholder="kuikuiya 1020666"
required
/>
</div>
</div>
<!-- 密码输入框 -->
<div class="form-group">
<div class="input-container">
<div class="input-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3.1 11h17.84v9a2 2 0 0 1-2 2H5.1a2 2 0 0 1-2-2v-9Z" fill="#AABCE6"/>
<circle cx="12" cy="16" r="1" fill="#FFFFFF"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="#AABCE6" stroke-width="1.5" fill="none"/>
</svg>
</div>
<input
v-model="password"
type="password"
placeholder="请输入密码"
required
/>
</div>
</div>
<!-- 记住密码和忘记密码 -->
<div class="form-options">
<div class="remember-password">
<div class="checkbox-container" @click="toggleRemember">
<div class="checkbox" :class="{ checked: rememberMe }">
<svg v-if="rememberMe" width="10" height="10" viewBox="0 0 10 10" fill="none">
<path d="M8.5 2.5L3.5 7.5L1.5 5.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<span class="remember-text">记住密码</span>
</div>
</div>
<div class="forgot-password">
<a href="#" @click.prevent="handleForgotPassword">忘记密码?</a>
</div>
</div>
<!-- 登录按钮 -->
<button type="submit" class="login-button">
开始使用
</button>
</form>
<div v-if="errorMsg" class="error-message">{{ errorMsg }}</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const username = ref("");
const password = ref("");
const rememberMe = ref(false);
const errorMsg = ref("");
function toggleRemember() {
rememberMe.value = !rememberMe.value;
}
function handleForgotPassword() {
alert("忘记密码功能暂未实现");
}
function handleLogin() {
if (!username.value || !password.value) {
errorMsg.value = "请输入用户名和密码";
return;
}
if (username.value === "admin" && password.value === "123456") {
errorMsg.value = "";
localStorage.setItem("token", "mock-jwt-token-12345");
if (rememberMe.value) {
localStorage.setItem(
"loginInfo",
JSON.stringify({
username: username.value,
password: password.value,
})
);
} else {
localStorage.removeItem("loginInfo");
}
router.push("/dashboard");
} else {
errorMsg.value = "用户名或密码错误";
}
}
</script>
<style scoped>
.login-page {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
overflow: hidden;
}
/* 背景层 */
.background-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('@/assets/images/login-background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
/* Logo区域 */
.logo-section {
position: absolute;
top: 50px;
left: 70px;
display: flex;
align-items: center;
gap: 14px;
z-index: 100;
}
.logo-icon {
position: relative;
width: 54px;
height: 53px;
}
.logo-shape-1 {
position: absolute;
top: 0;
left: 0;
width: 39px;
height: 53px;
background: #019C7C;
clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}
.logo-shape-2 {
position: absolute;
top: 27px;
right: 0;
width: 22px;
height: 26px;
background: #146B59;
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
.logo-text {
font-family: 'Swis721 BlkCn BT', Arial, sans-serif;
font-weight: 400;
font-size: 32px;
line-height: 1.2;
color: #333333;
}
/* 登录区域 */
.login-section {
position: absolute;
top: 0;
right: 0;
width: 828px;
height: 100vh;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(40px);
box-shadow: -6px 0px 30px 0px rgba(63, 139, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
padding: 40px 30px;
box-sizing: border-box;
}
.login-container {
width: 581px;
max-width: 581px;
}
.title {
margin: 0 0 29px 0;
font-family: 'Source Han Sans CN', sans-serif;
font-weight: 700;
font-size: 44px;
line-height: 1.5;
color: #333333;
}
.subtitle {
margin: 0 0 72px 0;
font-family: 'Source Han Sans CN', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 1.5;
color: #333333;
}
.login-form {
width: 100%;
}
.form-group {
margin-bottom: 40px;
}
.input-container {
position: relative;
width: 100%;
height: 62px;
border: 1px solid #9CA7C7;
border-radius: 8px;
background: #FFFFFF;
display: flex;
align-items: center;
padding: 0 16px;
transition: border-color 0.3s ease;
}
.input-container.active {
border-color: #2E69F7;
}
.input-container:focus-within {
border-color: #2E69F7;
box-shadow: 0 0 0 2px rgba(46, 105, 247, 0.1);
}
.input-icon {
width: 24px;
height: 24px;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: 'Source Han Sans CN', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.5;
color: #333333;
}
input::placeholder {
color: #999999;
font-weight: 400;
}
/* 记住密码和忘记密码 */
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 96px;
height: 20px;
}
.remember-password {
display: flex;
align-items: center;
}
.checkbox-container {
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.checkbox {
width: 14px;
height: 14px;
border-radius: 2px;
background: #4B7FF9;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
transition: all 0.2s ease;
}
.checkbox:not(.checked) {
background: transparent;
border: 1px solid #9CA7C7;
}
.remember-text {
font-family: 'Alibaba PuHuiTi 2.0', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: #999999;
}
.forgot-password a {
font-family: 'Alibaba PuHuiTi 2.0', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: #999999;
text-decoration: none;
transition: color 0.3s ease;
}
.forgot-password a:hover {
color: #2E69F7;
}
.login-button {
width: 100%;
height: 62px;
background: #2E69F7;
border: none;
border-radius: 8px;
font-family: 'Source Han Sans CN', sans-serif;
font-weight: 500;
font-size: 20px;
letter-spacing: 0.15em;
color: #FFFFFF;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.login-button:hover {
background: #1557E5;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(46, 105, 247, 0.3);
}
.login-button:active {
transform: translateY(0);
}
.error-message {
margin-top: 20px;
padding: 15px;
background: #fee;
border: 1px solid #f99;
border-radius: 8px;
color: #d33;
text-align: center;
font-size: 16px;
}
/* 响应式 */
@media (max-width: 1024px) {
.login-section {
width: 100vw;
right: 0;
background: rgba(255, 255, 255, 0.95);
}
.background-layer {
filter: blur(2px);
}
}
@media (max-width: 768px) {
.login-section {
padding: 20px;
}
.login-container {
width: 100%;
max-width: 400px;
}
.logo-section {
top: 20px;
left: 20px;
}
.logo-text {
font-size: 24px;
}
.title {
font-size: 32px;
margin-bottom: 20px;
}
.subtitle {
font-size: 18px;
margin-bottom: 40px;
}
.form-group {
margin-bottom: 32px;
}
.form-options {
margin-bottom: 60px;
}
.input-container {
height: 55px;
}
.login-button {
height: 55px;
font-size: 18px;
}
}
@media (max-width: 480px) {
.login-section {
width: 100vw;
padding: 15px;
}
.login-container {
width: 100%;
max-width: 100%;
}
.title {
font-size: 24px;
}
.input-container {
height: 50px;
}
.login-button {
height: 50px;
font-size: 16px;
}
}
</style>
+1 -25
View File
@@ -2,14 +2,11 @@ import { ConfigEnv, UserConfig, defineConfig, loadEnv } from 'vite'
import viteCompression from 'vite-plugin-compression'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import postCssPxToRem from "postcss-pxtorem" // px转rem插件
import { visualizer } from 'rollup-plugin-visualizer' // 打包分析插件
// import eslintPlugin from 'vite-plugin-eslint' // 如需ESLint支持可解注
// 获取当前时间戳,用于构建输出的文件名
const Timestamp = new Date().getTime();
// 路径解析辅助函数
function _resolve(dir: string) {
return path.resolve(__dirname, dir);
@@ -29,15 +26,13 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
plugins: [
// Vue插件
vue(),
// 如需ESLint支持可启用以下插件
// eslintPlugin(),
// Gzip压缩插件(仅生产环境启用)
viteCompression({
verbose: true, // 显示压缩日志
disable: !isProd, // 非生产环境禁用
deleteOriginFile: false, // 不删除源文件
threshold: 10240, // 文件大于10KB才压缩
threshold: 10240, // 文件大小10KB才压缩
algorithm: 'gzip', // 压缩算法
ext: '.gz', // 压缩文件扩展名
}),
@@ -59,7 +54,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
changeOrigin: true, // 修改请求头中的origin为目标URL
rewrite: path => path.replace(/^\/test/, "") // 路径重写
},
// 可以继续添加其他代理规则
}
},
@@ -105,24 +99,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
}
},
// CSS相关配置
css: {
preprocessorOptions: { // 预处理器配置
scss: {
// 全局注入scss变量文件
additionalData: `@import "@assets/styles/variables.scss";`
}
},
postcss: { // PostCSS插件
plugins: [
postCssPxToRem({ // px转rem插件配置
rootValue: 192, // 设计稿宽度/10(假设设计稿1920px)
propList: ["*", "!border"], // 转换所有属性,除了border
})
]
},
},
// JSON文件处理配置
json: {
stringify: false