docs(readme): 编写项目README文档，描述功能与架构
- 完整撰写玉宗珠宝设计大师项目README，介绍项目概况及核心功能 - 说明用户认证系统实现及优势，包含JWT鉴权和密码加密细节 - 详细描述品类管理系统，支持多流程类型和多种玉石品类 - 说明设计图生成方案及技术，包含Pillow生成示例及字体支持 - 介绍设计管理功能，支持分页浏览、预览、下载和删除设计 - 个人信息管理模块说明，涵盖昵称、手机号、密码的安全修改 - 绘制业务流程图和关键数据流图，清晰展现系统架构与数据流 - 提供详细API调用链路及参数说明，涵盖用户、品类、设计接口 - 列明技术栈及版本，包含前后端框架、ORM、认证、加密等工具 - 展示目录结构，标明后端与前端项目布局 - 规划本地开发环境与启动步骤，包括数据库初始化及运行命令 - 说明服务器部署流程和Nginx配置方案 - 详细数据库表结构说明及环境变量配置指导 - 汇总常用开发及测试命令，方便开发调试与部署管理
This commit is contained in:
changyoutongxue
199
frontend/src/views/Login.vue
Normal file
199
frontend/src/views/Login.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-card">
|
||||
<!-- 品牌区域 -->
|
||||
<div class="brand-section">
|
||||
<h1 class="brand-name">玉宗</h1>
|
||||
<p class="brand-subtitle">珠宝设计大师</p>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
class="login-form"
|
||||
@submit.prevent="handleLogin"
|
||||
>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="form.username"
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
:prefix-icon="User"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
:prefix-icon="Lock"
|
||||
show-password
|
||||
@keyup.enter="handleLogin"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
class="login-button"
|
||||
:loading="loading"
|
||||
@click="handleLogin"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 底部链接 -->
|
||||
<div class="footer-links">
|
||||
<span class="text">没有账号？</span>
|
||||
<router-link to="/register" class="link">立即注册</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { User, Lock } from '@element-plus/icons-vue'
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const loading = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const rules: FormRules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
const valid = await formRef.value.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
await userStore.login(form.username, form.password)
|
||||
ElMessage.success('登录成功')
|
||||
router.push('/')
|
||||
} catch (error: any) {
|
||||
// 错误已在拦截器中处理
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-page {
|
||||
min-height: calc(100vh - 108px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FAF8F5;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 48px 40px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.brand-section {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.brand-name {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #5B7E6B;
|
||||
letter-spacing: 8px;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
letter-spacing: 4px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
:deep(.el-input__wrapper) {
|
||||
border-radius: 8px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
:deep(.el-input__prefix) {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
background-color: #5B7E6B;
|
||||
border-color: #5B7E6B;
|
||||
letter-spacing: 2px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #3D5A4A;
|
||||
border-color: #3D5A4A;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
font-size: 14px;
|
||||
|
||||
.text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #5B7E6B;
|
||||
text-decoration: none;
|
||||
margin-left: 4px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: #3D5A4A;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user