zhouchengcheng/ctms
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

UI美化及渐变效果

Browse Source
This commit is contained in:
Cheng Zhou
2025-12-23 21:17:31 +08:00
parent 7694311882
commit c9d1535428
4 changed files with 306 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dist/index.html
Vendored
+2 -2
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CTMS</title> <title>CTMS</title>
<script type="module" crossorigin src="/assets/index-cQqawB_h.js"></script> <script type="module" crossorigin src="/assets/index-CLgelUhv.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BtT9sBSg.css"> <link rel="stylesheet" crossorigin href="/assets/index-CpYJ-5eT.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
frontend/src/components/Layout.vue
+95 -92
View File
@@ -92,10 +92,14 @@
<StudySelector /> <StudySelector />
<el-dropdown trigger="click" @command="onCommand" class="user-profile"> <el-dropdown trigger="click" @command="onCommand" class="user-profile">
<span class="dropdown-trigger compact"> <span class="dropdown-trigger compact">
<div class="user-avatar"> <el-avatar
<img v-if="auth.user?.avatar_url" :src="auth.user.avatar_url" alt="avatar" /> :size="28"
<span v-else>{{ (auth.user?.username || auth.user?.email || "用户").charAt(0).toUpperCase() }}</span> :src="auth.user?.avatar_url"
</div> shape="square"
class="user-avatar-comp"
>
{{ (auth.user?.username || auth.user?.email || "U").charAt(0).toUpperCase() }}
</el-avatar>
<span class="username">{{ auth.user?.username || auth.user?.email || "用户" }}</span> <span class="username">{{ auth.user?.username || auth.user?.email || "用户" }}</span>
<el-icon><ArrowDown /></el-icon> <el-icon><ArrowDown /></el-icon>
</span> </span>
@@ -117,10 +121,13 @@
<el-main class="layout-main"> <el-main class="layout-main">
<div class="content-wrapper"> <div class="content-wrapper">
<router-view /> <router-view v-slot="{ Component }">
<transition name="fade-transform" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div> </div>
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>
</template> </template>
@@ -153,7 +160,6 @@ const onCommand = (cmd: string) => {
if (cmd === "logout") { if (cmd === "logout") {
onLogout(); onLogout();
} else if (cmd === "profile") { } else if (cmd === "profile") {
// 预留个人设置路由占位，如后续有页面则跳转
router.push("/profile"); router.push("/profile");
} }
}; };
@@ -162,15 +168,16 @@ const onCommand = (cmd: string) => {
<style scoped> <style scoped>
.layout-container { .layout-container {
height: 100vh; height: 100vh;
background-color: var(--ctms-bg-base); background-color: #f6f8fb;
} }
.layout-aside { .layout-aside {
background-color: #001529; background-color: #001529; /* 经典深色，保持专业感 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
z-index: 10; z-index: 10;
border-right: 1px solid rgba(255, 255, 255, 0.05);
} }
.aside-logo { .aside-logo {
@@ -178,21 +185,22 @@ const onCommand = (cmd: string) => {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 24px; padding: 0 24px;
background-color: #002140; background-color: #001529;
} }
.logo-icon { .logo-icon {
width: 24px; width: 28px;
height: 24px; height: 28px;
background-color: var(--ctms-primary); background: linear-gradient(135deg, var(--ctms-primary) 0%, #6366f1 100%);
border-radius: 4px; border-radius: 8px;
margin-right: 12px; margin-right: 12px;
box-shadow: 0 4px 8px rgba(47, 84, 235, 0.3);
} }
.logo-text { .logo-text {
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 800;
letter-spacing: 1px; letter-spacing: 1px;
} }
@@ -200,45 +208,60 @@ const onCommand = (cmd: string) => {
border-right: none; border-right: none;
background-color: transparent; background-color: transparent;
flex: 1; flex: 1;
padding: 16px 0; padding: 12px 0;
overflow-y: auto; overflow-y: auto;
} }
.menu-divider { .menu-divider {
padding: 16px 24px 8px; padding: 16px 24px 8px;
font-size: 12px; font-size: 11px;
color: rgba(255, 255, 255, 0.45); font-weight: 600;
color: rgba(255, 255, 255, 0.35);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1.5px;
} }
:deep(.el-menu-item) { :deep(.el-menu-item) {
height: 48px; height: 44px;
line-height: 48px; line-height: 44px;
margin: 4px 12px; margin: 4px 12px;
border-radius: var(--ctms-radius); border-radius: var(--ctms-radius);
color: rgba(255, 255, 255, 0.65) !important; color: rgba(255, 255, 255, 0.7) !important;
transition: var(--ctms-transition);
} }
:deep(.el-menu-item:hover) { :deep(.el-menu-item:hover) {
color: #fff !important; color: #fff !important;
background-color: transparent !important; background-color: rgba(255, 255, 255, 0.05) !important;
} }
:deep(.el-menu-item.is-active) { :deep(.el-menu-item.is-active) {
color: #fff !important; color: #fff !important;
background-color: var(--ctms-primary) !important; background-color: var(--ctms-primary) !important;
box-shadow: 0 4px 12px rgba(47, 84, 235, 0.2);
}
:deep(.el-menu-item.is-active::before) {
content: "";
position: absolute;
left: -12px;
top: 12px;
bottom: 12px;
width: 4px;
background-color: #fff;
border-radius: 0 4px 4px 0;
} }
:deep(.el-sub-menu__title) { :deep(.el-sub-menu__title) {
color: rgba(255, 255, 255, 0.65) !important; color: rgba(255, 255, 255, 0.7) !important;
margin: 4px 12px; margin: 4px 12px;
border-radius: var(--ctms-radius); border-radius: var(--ctms-radius);
height: 44px;
line-height: 44px;
} }
:deep(.el-sub-menu__title:hover) { :deep(.el-sub-menu.is-active .el-sub-menu__title) {
color: #fff !important; color: #fff !important;
background-color: rgba(255, 255, 255, 0.1) !important;
} }
:deep(.el-menu--inline) { :deep(.el-menu--inline) {
@@ -257,7 +280,7 @@ const onCommand = (cmd: string) => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 24px; padding: 0 24px;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
height: 64px !important; height: 64px !important;
z-index: 9; z-index: 9;
} }
@@ -265,85 +288,49 @@ const onCommand = (cmd: string) => {
.header-right { .header-right {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 24px; gap: 20px;
} }
.user-profile { .user-profile {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px;
padding-left: 16px;
border-left: 1px solid var(--ctms-border-color);
cursor: pointer; cursor: pointer;
} }
.user-avatar { .dropdown-trigger.compact {
width: 32px;
height: 32px;
background-color: var(--ctms-primary-light);
color: var(--ctms-primary);
border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; padding: 4px 12px;
font-weight: 600; border-radius: 14px;
font-size: 14px; background: #f8fafc;
overflow: hidden; border: 1px solid #eef2f6;
} color: #334155;
.user-avatar img { transition: var(--ctms-transition);
width: 100%; height: 40px;
height: 100%;
object-fit: cover;
} }
.user-details { .dropdown-trigger.compact:hover {
display: flex; background: #f1f5f9;
flex-direction: column; border-color: #e2e8f0;
}
.user-avatar-comp {
color: var(--ctms-primary) !important;
background-color: transparent !important;
border-radius: 8px !important;
font-weight: 700;
flex-shrink: 0;
font-size: 14px;
} }
.username { .username {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 600;
color: var(--ctms-text-main); margin: 0 10px 0 8px;
line-height: 1.2; max-width: 150px;
} overflow: hidden;
text-overflow: ellipsis;
.user-role { white-space: nowrap;
font-size: 12px;
color: var(--ctms-text-secondary);
}
.logout-btn {
margin-left: 8px;
}
.dropdown-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
}
.dropdown-trigger.compact {
padding: 6px 10px;
border-radius: 10px;
background: #f4f6fa;
border: 1px solid #e2e6f0;
color: #333;
}
.avatar-icon {
font-size: 18px;
}
.user-dropdown-menu :deep(.el-dropdown-menu__item) {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
}
.study-tag {
font-weight: 500;
color: var(--ctms-primary);
border-color: var(--ctms-primary-hover);
background-color: var(--ctms-primary-light);
} }
.layout-main { .layout-main {
@@ -352,7 +339,23 @@ const onCommand = (cmd: string) => {
} }
.content-wrapper { .content-wrapper {
padding: var(--ctms-spacing-lg); padding: 24px;
min-height: calc(100vh - 64px); min-height: calc(100vh - 64px);
} }
/* 过渡动画 */
.fade-transform-enter-active,
.fade-transform-leave-active {
transition: all 0.3s;
}
.fade-transform-enter-from {
opacity: 0;
transform: translateX(-15px);
}
.fade-transform-leave-to {
opacity: 0;
transform: translateX(15px);
}
</style> </style>
frontend/src/styles/main.css
+31 -3
View File
@@ -35,10 +35,38 @@
--ctms-spacing-lg: 24px; --ctms-spacing-lg: 24px;
--ctms-spacing-xl: 32px; --ctms-spacing-xl: 32px;
/* 圆角 & 阴影 */ /* 圆角 & 阴影 - 升级为更多层级 */
--ctms-radius: 4px; --ctms-radius-sm: 4px;
--ctms-radius: 8px;
--ctms-radius-lg: 12px;
--ctms-radius-round: 50%;
--ctms-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --ctms-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
--ctms-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --ctms-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
--ctms-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);
--ctms-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
/* 动画 */
--ctms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 现代滚动条 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #bfbfbf;
} }
/* 全局重置 */ /* 全局重置 */
frontend/src/views/Login.vue
+178 -69
View File
@@ -1,5 +1,12 @@
<template> <template>
<div class="login-container"> <div class="login-container">
<!-- 动态背景元素 -->
<div class="bg-animate">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
<div class="login-content"> <div class="login-content">
<div class="login-brand"> <div class="login-brand">
<h1 class="brand-title">CTMS</h1> <h1 class="brand-title">CTMS</h1>
@@ -8,8 +15,8 @@
<el-card class="login-card"> <el-card class="login-card">
<div class="login-header"> <div class="login-header">
<h2 class="form-title">用户登录</h2> <h2 class="form-title">欢迎回来</h2>
<p class="form-desc">请输入邮箱与密码登录，未激活账号将无法登录</p> <p class="form-desc">请输入您的凭据以访问系统</p>
</div> </div>
<el-form <el-form
@@ -18,43 +25,56 @@
:rules="rules" :rules="rules"
label-position="top" label-position="top"
@keyup.enter.native="onSubmit" @keyup.enter.native="onSubmit"
class="elegant-form"
> >
<el-form-item label="邮箱" prop="email"> <el-form-item label="电子邮箱" prop="email">
<el-input <el-input
v-model="form.email" v-model="form.email"
placeholder="请输入邮箱" placeholder="name@company.com"
autocomplete="email" autocomplete="email"
/> >
<template #prefix>
<el-icon><Message /></el-icon>
</template>
</el-input>
</el-form-item> </el-form-item>
<el-form-item label="密码" prop="password"> <el-form-item label="登录密码" prop="password">
<el-input <el-input
v-model="form.password" v-model="form.password"
type="password" type="password"
placeholder="请输入密码" placeholder="最小 8 位字符"
autocomplete="current-password" autocomplete="current-password"
show-password show-password
/> >
<template #prefix>
<el-icon><Lock /></el-icon>
</template>
</el-input>
</el-form-item> </el-form-item>
<div class="form-footer"> <div class="form-options">
<el-checkbox v-model="form.remember">记住账号密码</el-checkbox> <el-checkbox v-model="form.remember">记住我</el-checkbox>
<el-button <RouterLink to="/forgot-password" class="forgot-link">忘记密码？</RouterLink>
type="primary" </div>
:loading="loading"
class="submit-btn" <el-button
@click="onSubmit" type="primary"
> :loading="loading"
登 录 class="submit-btn"
</el-button> @click="onSubmit"
<div class="link-row"> >
<RouterLink to="/register">没有账号？注册</RouterLink> 登 录
</div> </el-button>
<div class="register-prompt">
<span>还没有账号？</span>
<RouterLink to="/register">立即注册</RouterLink>
</div> </div>
</el-form> </el-form>
</el-card> </el-card>
<div class="login-footer"> <div class="login-footer">
<p>© 2025 Clinical Trial Management System. All Rights Reserved.</p> <p>© 2025 CTMS Enterprise. Powered by Professional Clinical Research.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -64,6 +84,7 @@
import { reactive, ref, onMounted } from "vue"; import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { ElCheckbox, ElMessage, type FormInstance, type FormRules } from "element-plus"; import { ElCheckbox, ElMessage, type FormInstance, type FormRules } from "element-plus";
import { Message, Lock } from "@element-plus/icons-vue";
import { useAuthStore } from "../store/auth"; import { useAuthStore } from "../store/auth";
import { getCachedCredential, setCachedCredential, clearCachedCredential } from "../utils/auth"; import { getCachedCredential, setCachedCredential, clearCachedCredential } from "../utils/auth";
@@ -79,10 +100,10 @@ const form = reactive({
const rules: FormRules<typeof form> = { const rules: FormRules<typeof form> = {
email: [ email: [
{ required: true, message: "请输入邮箱", trigger: "blur" }, { required: true, message: "请输入有效的邮箱地址", trigger: "blur" },
{ type: "email", message: "邮箱格式不正确", trigger: "blur" }, { type: "email", message: "邮箱格式不正确", trigger: "blur" },
], ],
password: [{ required: true, message: "请输入密码", trigger: "blur" }], password: [{ required: true, message: "请输入您的密码", trigger: "blur" }],
}; };
const loading = ref(false); const loading = ref(false);
@@ -111,7 +132,7 @@ const onSubmit = async () => {
router.push("/"); router.push("/");
} catch (error: any) { } catch (error: any) {
const detail = error?.response?.data?.detail || error?.response?.data?.message; const detail = error?.response?.data?.detail || error?.response?.data?.message;
ElMessage.error(detail || "邮箱或密码错误"); ElMessage.error(detail || "认证失败，请检查您的凭据");
} finally { } finally {
loading.value = false; loading.value = false;
} }
@@ -124,103 +145,191 @@ const onSubmit = async () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
background: radial-gradient(circle at 50% 50%, #f0f2f5 0%, #e6e9f0 100%); background-color: #f8fafc;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
/* 装饰性背景元素，不使用外部资源 */ /* 动态背景 */
.login-container::before { .bg-animate {
content: ""; position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.circle {
position: absolute; position: absolute;
width: 600px;
height: 600px;
background: var(--ctms-primary);
opacity: 0.03;
border-radius: 50%; border-radius: 50%;
top: -200px; filter: blur(80px);
right: -200px; z-index: 0;
opacity: 0.4;
animation: move 20s infinite alternate;
}
.circle-1 {
width: 500px;
height: 500px;
background: #3b82f6;
top: -100px;
left: -100px;
}
.circle-2 {
width: 400px;
height: 400px;
background: #10b981;
bottom: -50px;
right: -50px;
animation-delay: -5s;
}
.circle-3 {
width: 300px;
height: 300px;
background: #6366f1;
top: 40%;
left: 30%;
animation-delay: -10s;
}
@keyframes move {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(50px, 100px) scale(1.1); }
} }
.login-content { .login-content {
width: 400px; width: 420px;
z-index: 1; z-index: 1;
position: relative;
} }
.login-brand { .login-brand {
text-align: center; text-align: center;
margin-bottom: 40px; margin-bottom: 32px;
} }
.brand-title { .brand-title {
font-size: 36px; font-size: 48px;
font-weight: 700; font-weight: 800;
color: var(--ctms-primary); background: linear-gradient(135deg, var(--ctms-primary) 0%, #6366f1 100%);
letter-spacing: 2px; -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -1px;
margin: 0; margin: 0;
} }
.brand-subtitle { .brand-subtitle {
font-size: 16px; font-size: 14px;
color: var(--ctms-text-secondary); color: #64748b;
margin-top: 8px; margin-top: 8px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
} }
.login-card { .login-card {
padding: 8px; border: 1px solid rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(20px);
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
padding: 12px;
} }
.login-header { .login-header {
text-align: center;
margin-bottom: 32px; margin-bottom: 32px;
} }
.form-title { .form-title {
font-size: 20px; font-size: 24px;
font-weight: 600; font-weight: 700;
color: var(--ctms-text-main); color: #1e293b;
margin: 0; margin: 0;
} }
.form-desc { .form-desc {
font-size: 14px; font-size: 14px;
color: var(--ctms-text-secondary); color: #94a3b8;
margin-top: 8px; margin-top: 8px;
} }
.elegant-form :deep(.el-form-item__label) {
font-size: 13px;
font-weight: 600;
color: #475569;
padding-bottom: 8px;
}
.elegant-form :deep(.el-input__wrapper) {
background-color: #f8fafc;
box-shadow: 0 0 0 1px #e2e8f0 inset;
padding: 8px 12px;
border-radius: 10px;
transition: var(--ctms-transition);
}
.elegant-form :deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 1px var(--ctms-primary) inset, 0 0 0 4px rgba(47, 84, 235, 0.1) !important;
background-color: #fff;
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.forgot-link {
font-size: 13px;
color: var(--ctms-primary);
text-decoration: none;
font-weight: 500;
}
.submit-btn { .submit-btn {
width: 100%; width: 100%;
height: 44px; height: 48px;
font-size: 16px; font-size: 16px;
margin-top: 16px; font-weight: 600;
border-radius: 12px;
background: linear-gradient(135deg, var(--ctms-primary) 0%, #4f46e5 100%);
border: none;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
transition: var(--ctms-transition);
} }
.link-row {
margin-top: 12px; .submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}
.register-prompt {
margin-top: 24px;
text-align: center; text-align: center;
}
.link-row a {
color: var(--ctms-primary);
font-size: 14px; font-size: 14px;
color: #64748b;
}
.register-prompt a {
color: var(--ctms-primary);
font-weight: 600;
text-decoration: none;
margin-left: 4px;
} }
.login-footer { .login-footer {
text-align: center; text-align: center;
margin-top: 48px; margin-top: 40px;
} }
.login-footer p { .login-footer p {
font-size: 12px; font-size: 12px;
color: var(--ctms-text-disabled); color: #94a3b8;
}
:deep(.el-form-item__label) {
padding-bottom: 4px;
}
:deep(.el-input__wrapper) {
box-shadow: 0 0 0 1px #d9d9d9 inset;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: 0 0 0 1px var(--ctms-primary) inset !important;
} }
</style> </style>