feat(工作台): 优化入口布局与连接安全状态
This commit is contained in:
Cheng Zhou
@@ -13,9 +13,12 @@ describe("DesktopProjectEntry", () => {
|
||||
expect(source).toContain("Desktop Workbench");
|
||||
expect(source).toContain('class="entry-background-grid"');
|
||||
expect(source).toContain("系统管理");
|
||||
expect(source).toContain("ADMIN SYSTEM");
|
||||
expect(source).toContain("SYSTEM MANAGEMENT");
|
||||
expect(source).toContain("<strong>系统管理</strong>");
|
||||
expect(source).toContain('class="admin-arrow"');
|
||||
expect(source).toContain('loggingOut ? "正在退出" : "退出登录"');
|
||||
expect(source).toContain('<AccountConnectionStatus mode="network" />');
|
||||
expect(source).not.toContain("当前操作员");
|
||||
expect(source).not.toContain('class="admin-desc"');
|
||||
expect(source).toContain('v-if="canEnterManagement"');
|
||||
expect(source).toContain('projects.value.some((project) => project.role_in_study === "PM")');
|
||||
expect(source).toContain("project-cards-grid");
|
||||
|
||||
@@ -20,40 +20,33 @@
|
||||
<span class="status-dot-active"></span>
|
||||
</div>
|
||||
<div class="account-details">
|
||||
<small>当前操作员</small>
|
||||
<strong>{{ userDisplayName }}</strong>
|
||||
<span class="account-email">{{ auth.user?.email || "Operator" }}</span>
|
||||
</div>
|
||||
|
||||
<button class="logout-btn" type="button" :disabled="loggingOut" @click="logout">
|
||||
<el-icon><SwitchButton /></el-icon>
|
||||
<span>{{ loggingOut ? "正在退出" : "注销账号" }}</span>
|
||||
</div>
|
||||
|
||||
<!-- ADMIN / PM 可进入系统管理，其他角色仅可选择项目 -->
|
||||
<div v-if="canEnterManagement" class="sidebar-admin">
|
||||
<button class="admin-action-card" type="button" @click="enterManagement">
|
||||
<div class="admin-card-head">
|
||||
<div class="admin-icon-box">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
</div>
|
||||
<div class="admin-text-box">
|
||||
<strong>系统管理</strong>
|
||||
</div>
|
||||
<el-icon class="admin-arrow"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AccountConnectionStatus mode="network" />
|
||||
</div>
|
||||
|
||||
<!-- ADMIN / PM 可进入系统管理，其他角色仅可选择项目 -->
|
||||
<div v-if="canEnterManagement" class="sidebar-admin">
|
||||
<button class="admin-action-card" type="button" @click="enterManagement">
|
||||
<span class="admin-glow-layer" aria-hidden="true"></span>
|
||||
<div class="admin-card-head">
|
||||
<div class="admin-icon-box">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
</div>
|
||||
<div class="admin-text-box">
|
||||
<span class="admin-kicker">{{ isAdmin ? "ADMIN SYSTEM" : "SYSTEM MANAGEMENT" }}</span>
|
||||
<strong>系统管理</strong>
|
||||
</div>
|
||||
</div>
|
||||
<p class="admin-desc">
|
||||
{{ isAdmin ? "人员账号管理、项目授权、审计及系统配置" : "查看并维护您负责项目的授权与范围配置" }}
|
||||
</p>
|
||||
<div class="admin-foot">
|
||||
<span>进入控制台</span>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<button class="logout-btn" type="button" :disabled="loggingOut" @click="logout">
|
||||
<el-icon><SwitchButton /></el-icon>
|
||||
<span>{{ loggingOut ? "正在退出" : "退出登录" }}</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<main class="entry-main">
|
||||
@@ -163,6 +156,7 @@ import { useStudyStore } from "../store/study";
|
||||
import type { Study } from "../types/api";
|
||||
import { findFirstAccessibleProjectPath } from "../utils/projectRoutePermissions";
|
||||
import { isSystemAdmin } from "../utils/roles";
|
||||
import AccountConnectionStatus from "../components/AccountConnectionStatus.vue";
|
||||
|
||||
const auth = useAuthStore();
|
||||
const studyStore = useStudyStore();
|
||||
@@ -302,7 +296,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 48px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
@@ -335,11 +329,10 @@ onMounted(() => {
|
||||
/* 个人信息卡片（浅色拟物化） */
|
||||
.sidebar-account {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 24px 20px;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(226, 232, 240, 0.9);
|
||||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
|
||||
@@ -347,19 +340,20 @@ onMounted(() => {
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 14px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.account-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 14px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
|
||||
color: #ffffff;
|
||||
font-size: 21px;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 8px 24px rgba(29, 78, 216, 0.15);
|
||||
}
|
||||
@@ -378,29 +372,27 @@ onMounted(() => {
|
||||
.account-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
gap: 2px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.account-details small {
|
||||
color: #64748b;
|
||||
font-size: 9.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
gap: 3px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.account-details strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
overflow: hidden;
|
||||
font-size: 14.5px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.account-email {
|
||||
color: #475569;
|
||||
font-size: 11.5px;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
@@ -430,6 +422,7 @@ onMounted(() => {
|
||||
/* 常驻系统管理卡片（精致浅色流光） */
|
||||
.sidebar-admin {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.admin-action-card {
|
||||
@@ -438,7 +431,7 @@ onMounted(() => {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 18px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.12);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
|
||||
@@ -449,18 +442,6 @@ onMounted(() => {
|
||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.admin-glow-layer {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: -40px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: rgba(59, 130, 246, 0.06);
|
||||
filter: blur(15px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.admin-action-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(59, 130, 246, 0.28);
|
||||
@@ -470,16 +451,15 @@ onMounted(() => {
|
||||
.admin-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-icon-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
color: #2563eb;
|
||||
@@ -489,44 +469,23 @@ onMounted(() => {
|
||||
.admin-text-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-kicker {
|
||||
color: #2563eb;
|
||||
font-size: 8.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admin-text-box strong {
|
||||
color: #0f172a;
|
||||
font-size: 13.5px;
|
||||
font-size: 14.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-desc {
|
||||
margin: 0 0 12px;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.admin-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.admin-arrow {
|
||||
margin-left: auto;
|
||||
color: #2563eb;
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-foot .el-icon {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-action-card:hover .admin-foot .el-icon {
|
||||
.admin-action-card:hover .admin-arrow {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
@@ -931,6 +890,11 @@ onMounted(() => {
|
||||
border-color: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .account-details strong),
|
||||
:global([data-ctms-theme="dark"] .admin-text-box strong) {
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .logout-btn) {
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
color: #94a3b8;
|
||||
|
||||
@@ -103,6 +103,17 @@ describe("Login protocol agreement", () => {
|
||||
expect(source).toContain("max-width: calc(100vw - 40px);");
|
||||
});
|
||||
|
||||
it("keeps the login shell inside the viewport without a visible page scrollbar", () => {
|
||||
const source = readLoginView();
|
||||
|
||||
expect(source).toContain("height: 100dvh;");
|
||||
expect(source).toContain('document.body.classList.add("is-login-page")');
|
||||
expect(source).toContain("scrollbar-width: none;");
|
||||
expect(source).toContain(".login-wrapper::-webkit-scrollbar");
|
||||
expect(source).toContain("overflow-y: auto;");
|
||||
expect(source).toContain("@media (min-width: 961px) and (max-height: 820px)");
|
||||
});
|
||||
|
||||
it("falls back to full email input when no server-configured domains exist", () => {
|
||||
const source = readLoginView();
|
||||
|
||||
|
||||
@@ -410,6 +410,8 @@ const syncRememberedCredential = async () => {
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
document.documentElement.classList.add("is-login-page");
|
||||
document.body.classList.add("is-login-page");
|
||||
window.addEventListener(DESKTOP_SERVER_URL_CHANGED_EVENT, refreshDesktopServerUrl);
|
||||
await loadEmailDomains();
|
||||
const reason = consumeLogoutReason();
|
||||
@@ -426,6 +428,8 @@ onMounted(async () => {
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.documentElement.classList.remove("is-login-page");
|
||||
document.body.classList.remove("is-login-page");
|
||||
window.removeEventListener(DESKTOP_SERVER_URL_CHANGED_EVENT, refreshDesktopServerUrl);
|
||||
});
|
||||
|
||||
@@ -480,20 +484,39 @@ const onSubmit = async () => {
|
||||
═══════════════════════ */
|
||||
.login-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
overflow: hidden;
|
||||
scrollbar-width: none;
|
||||
background: #ffffff;
|
||||
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
|
||||
}
|
||||
|
||||
.login-wrapper::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
:global(html.is-login-page),
|
||||
:global(body.is-login-page) {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-split-container {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ═══════════════════════
|
||||
@@ -502,6 +525,8 @@ const onSubmit = async () => {
|
||||
.login-left-brand {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #e0f2fe 0%, #e0e7ff 50%, #f3e8ff 100%);
|
||||
padding: 60px 80px;
|
||||
position: relative;
|
||||
@@ -749,12 +774,15 @@ const onSubmit = async () => {
|
||||
.login-right-form {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
padding: 60px 80px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 上方浏览器兼容建议 */
|
||||
@@ -1404,4 +1432,115 @@ const onSubmit = async () => {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 统一收口：小屏允许触摸滚动，但不显示页面右侧滚动条。 */
|
||||
@media (max-width: 960px) {
|
||||
.login-wrapper {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.login-split-container {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.login-right-form {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
padding: clamp(20px, 5vh, 40px) clamp(16px, 6vw, 56px) 24px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.login-card-container {
|
||||
width: min(440px, 100%);
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 中等高度桌面窗口：压缩纵向间距，确保双栏始终锁在视口内。 */
|
||||
@media (min-width: 961px) and (max-height: 820px) {
|
||||
.login-left-brand,
|
||||
.login-right-form {
|
||||
padding-top: clamp(24px, 3.5vh, 44px);
|
||||
padding-bottom: clamp(24px, 3.5vh, 44px);
|
||||
}
|
||||
|
||||
.brand-slogan-block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.brand-main-title {
|
||||
margin-bottom: 12px;
|
||||
font-size: clamp(30px, 5vh, 36px);
|
||||
}
|
||||
|
||||
.brand-features-grid {
|
||||
gap: 10px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.login-brand-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.login-tabs {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.login-form :deep(.el-form-item) {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.login-options {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.login-right-footer {
|
||||
margin-top: 20px;
|
||||
padding-top: 14px;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) and (max-height: 700px) {
|
||||
.login-right-form {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.login-brand-header {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.login-tabs {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.login-form :deep(.el-form-item) {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.login-options {
|
||||
gap: 6px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.login-right-footer {
|
||||
margin-top: 20px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -19,6 +19,11 @@ describe("WebWorkbenchEntry", () => {
|
||||
expect(source).toContain('projects.value.some((project) => project.role_in_study === "PM")');
|
||||
expect(source).toContain('v-if="canEnterManagement"');
|
||||
expect(source).toContain('<strong>系统管理</strong>');
|
||||
expect(source).toContain('class="admin-arrow"');
|
||||
expect(source).toContain('loggingOut ? "正在退出" : "退出登录"');
|
||||
expect(source).toContain('<AccountConnectionStatus mode="network" />');
|
||||
expect(source).not.toContain("当前操作员");
|
||||
expect(source).not.toContain('class="admin-desc"');
|
||||
expect(source).toContain('const managementActionLabel = computed(() => canEnterManagement.value ? "进入系统管理" : "");');
|
||||
expect(source).toContain("studyStore.clearCurrentStudy()");
|
||||
expect(source).toContain("studyStore.setCurrentStudy(pmProject)");
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<aside class="entry-sidebar">
|
||||
<div class="sidebar-top">
|
||||
<div class="sidebar-brand">
|
||||
<div class="brand-mark"><span>CTMS</span></div>
|
||||
<img class="brand-mark" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
|
||||
<div class="brand-text">
|
||||
<span class="brand-kicker">Web Workspace</span>
|
||||
<h1>工作台总控</h1>
|
||||
@@ -20,40 +20,33 @@
|
||||
<span class="status-dot-active"></span>
|
||||
</div>
|
||||
<div class="account-details">
|
||||
<small>当前操作员</small>
|
||||
<strong>{{ userDisplayName }}</strong>
|
||||
<span class="account-email">{{ auth.user?.email || "Operator" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="logout-btn" type="button" :disabled="loggingOut" @click="logout">
|
||||
<el-icon><SwitchButton /></el-icon>
|
||||
<span>{{ loggingOut ? "正在退出" : "注销账号" }}</span>
|
||||
<!-- ADMIN / PM 可进入系统管理，其他角色仅可选择项目 -->
|
||||
<div v-if="canEnterManagement" class="sidebar-admin">
|
||||
<button class="admin-action-card" type="button" @click="enterManagement">
|
||||
<div class="admin-card-head">
|
||||
<div class="admin-icon-box">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
</div>
|
||||
<div class="admin-text-box">
|
||||
<strong>系统管理</strong>
|
||||
</div>
|
||||
<el-icon class="admin-arrow"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AccountConnectionStatus mode="network" />
|
||||
</div>
|
||||
|
||||
<!-- ADMIN / PM 可进入系统管理，其他角色仅可选择项目 -->
|
||||
<div v-if="canEnterManagement" class="sidebar-admin">
|
||||
<button class="admin-action-card" type="button" @click="enterManagement">
|
||||
<span class="admin-glow-layer" aria-hidden="true"></span>
|
||||
<div class="admin-card-head">
|
||||
<div class="admin-icon-box">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
</div>
|
||||
<div class="admin-text-box">
|
||||
<span class="admin-kicker">{{ isAdmin ? "ADMIN SYSTEM" : "SYSTEM MANAGEMENT" }}</span>
|
||||
<strong>系统管理</strong>
|
||||
</div>
|
||||
</div>
|
||||
<p class="admin-desc">
|
||||
{{ isAdmin ? "人员账号管理、项目授权、审计及系统配置" : "查看已授权研究项目的详细授权与范围配置" }}
|
||||
</p>
|
||||
<div class="admin-foot">
|
||||
<span>进入控制台</span>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<button class="logout-btn" type="button" :disabled="loggingOut" @click="logout">
|
||||
<el-icon><SwitchButton /></el-icon>
|
||||
<span>{{ loggingOut ? "正在退出" : "退出登录" }}</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<main class="entry-main">
|
||||
@@ -158,7 +151,7 @@
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="empty-project-workspace">
|
||||
<div class="empty-icon-capsule"><span>CTMS</span></div>
|
||||
<img class="empty-icon-capsule" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
|
||||
<h3>未检测到可用项目</h3>
|
||||
<p>您的账号尚未关联至任何研究项目，请联系系统管理员进行项目授权与分配。</p>
|
||||
</div>
|
||||
@@ -168,7 +161,7 @@
|
||||
<div class="transition-overlay" :class="{ active: isTransitioning }" aria-hidden="true">
|
||||
<div class="overlay-glow"></div>
|
||||
<div class="overlay-spinner">
|
||||
<span class="spinner-brand">CTMS</span>
|
||||
<img class="spinner-brand" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
|
||||
<div class="spinner-ring"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,6 +190,7 @@ import { useStudyStore } from "../store/study";
|
||||
import type { Study } from "../types/api";
|
||||
import { findFirstAccessibleProjectPath } from "../utils/projectRoutePermissions";
|
||||
import { isSystemAdmin } from "../utils/roles";
|
||||
import AccountConnectionStatus from "../components/AccountConnectionStatus.vue";
|
||||
|
||||
const auth = useAuthStore();
|
||||
const studyStore = useStudyStore();
|
||||
@@ -343,22 +337,14 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 48px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.1);
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
color: #ffffff;
|
||||
font-size: 13.5px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.05em;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
|
||||
}
|
||||
|
||||
@@ -382,11 +368,10 @@ onMounted(() => {
|
||||
/* 个人信息卡片（浅色拟物化） */
|
||||
.sidebar-account {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 24px 20px;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(226, 232, 240, 0.9);
|
||||
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
|
||||
@@ -394,19 +379,20 @@ onMounted(() => {
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 14px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.account-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-radius: 14px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
|
||||
color: #ffffff;
|
||||
font-size: 21px;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 8px 24px rgba(29, 78, 216, 0.15);
|
||||
}
|
||||
@@ -425,29 +411,27 @@ onMounted(() => {
|
||||
.account-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
gap: 2px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.account-details small {
|
||||
color: #64748b;
|
||||
font-size: 9.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
gap: 3px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.account-details strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
overflow: hidden;
|
||||
font-size: 14.5px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.account-email {
|
||||
color: #475569;
|
||||
font-size: 11.5px;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
@@ -477,6 +461,7 @@ onMounted(() => {
|
||||
/* 常驻系统管理卡片（精致浅色流光） */
|
||||
.sidebar-admin {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.admin-action-card {
|
||||
@@ -485,7 +470,7 @@ onMounted(() => {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 18px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid rgba(59, 130, 246, 0.12);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
|
||||
@@ -496,18 +481,6 @@ onMounted(() => {
|
||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.admin-glow-layer {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
right: -40px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: rgba(59, 130, 246, 0.06);
|
||||
filter: blur(15px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.admin-action-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(59, 130, 246, 0.28);
|
||||
@@ -517,16 +490,15 @@ onMounted(() => {
|
||||
.admin-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-icon-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
color: #2563eb;
|
||||
@@ -536,44 +508,23 @@ onMounted(() => {
|
||||
.admin-text-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-kicker {
|
||||
color: #2563eb;
|
||||
font-size: 8.5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admin-text-box strong {
|
||||
color: #0f172a;
|
||||
font-size: 13.5px;
|
||||
font-size: 14.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-desc {
|
||||
margin: 0 0 12px;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.admin-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.admin-arrow {
|
||||
margin-left: auto;
|
||||
color: #2563eb;
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-foot .el-icon {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-action-card:hover .admin-foot .el-icon {
|
||||
.admin-action-card:hover .admin-arrow {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
@@ -895,17 +846,10 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.empty-icon-capsule {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 8px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.05em;
|
||||
object-fit: cover;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@@ -1006,6 +950,11 @@ onMounted(() => {
|
||||
border-color: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .account-details strong),
|
||||
:global([data-ctms-theme="dark"] .admin-text-box strong) {
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
:global([data-ctms-theme="dark"] .logout-btn) {
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
color: #94a3b8;
|
||||
@@ -1153,11 +1102,11 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.spinner-brand {
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.4));
|
||||
animation: pulseBrand 1.4s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@@ -1213,26 +1162,19 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.sidebar-account {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-bottom: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.account-details {
|
||||
margin-bottom: 0;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
margin-left: 12px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: auto;
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user