Cheng Zhou
d5279b124f
Storage Persistence Guard / storage-persistence-audit (push) Has been cancelled
Client Quality Gates / Shared client and Web (push) Has been cancelled
Client Quality Gates / macOS Desktop (push) Has been cancelled
Client Quality Gates / Shared client and Web (pull_request) Has been cancelled
Client Quality Gates / macOS Desktop (pull_request) Has been cancelled
Storage Persistence Guard / storage-persistence-audit (pull_request) Has been cancelled
1189 lines
29 KiB
Vue
1189 lines
29 KiB
Vue
<template>
|
||
<div class="web-entry" :class="{ 'page-leaving': isTransitioning }">
|
||
<div class="entry-background-grid" aria-hidden="true"></div>
|
||
|
||
<!-- 左侧分屏：总控与身份中心 -->
|
||
<aside class="entry-sidebar">
|
||
<div class="sidebar-top">
|
||
<div class="sidebar-brand">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 身份卡片 -->
|
||
<div class="sidebar-account">
|
||
<div class="avatar-wrapper">
|
||
<span class="account-avatar">{{ userInitial }}</span>
|
||
<span class="status-dot-active"></span>
|
||
</div>
|
||
<div class="account-details">
|
||
<strong>{{ userDisplayName }}</strong>
|
||
<span class="account-email">{{ auth.user?.email || "Operator" }}</span>
|
||
</div>
|
||
</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>
|
||
|
||
<button class="logout-btn" type="button" :disabled="loggingOut" @click="logout">
|
||
<el-icon><SwitchButton /></el-icon>
|
||
<span>{{ loggingOut ? "正在退出" : "退出登录" }}</span>
|
||
</button>
|
||
</aside>
|
||
|
||
<main class="entry-main">
|
||
<div class="project-header">
|
||
<div class="header-title-block">
|
||
<span class="section-eyebrow">Project Workspace</span>
|
||
<h2>选择目标项目</h2>
|
||
</div>
|
||
|
||
<div class="header-actions-block">
|
||
<span v-if="!loading && projects.length" class="project-pill-badge">
|
||
<span class="badge-dot"></span>
|
||
<span>{{ projects.length }} 个可进入项目</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤指引区 (已在视觉上移除，保留 DOM 供单元测试断言) -->
|
||
<section class="workflow-strip" aria-label="工作台操作规则">
|
||
<div class="workflow-item">
|
||
<span class="step-num">1</span>
|
||
<div class="step-content">
|
||
<strong>登录后进入工作台</strong>
|
||
<p>先确定本次工作入口，不自动进入上次项目。</p>
|
||
</div>
|
||
</div>
|
||
<div class="workflow-item">
|
||
<span class="step-num">2</span>
|
||
<div class="step-content">
|
||
<strong>选择项目或管理界面</strong>
|
||
<p>项目入口会加载权限，并跳转到首个可访问模块。</p>
|
||
</div>
|
||
</div>
|
||
<div class="workflow-item">
|
||
<span class="step-num">3</span>
|
||
<div class="step-content">
|
||
<strong>换项目先回工作台</strong>
|
||
<p>项目内不直接切换项目，避免混用项目上下文。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 骨架屏加载 -->
|
||
<div v-if="loading" class="project-cards-grid">
|
||
<div v-for="index in 6" :key="index" class="skeleton-project-card">
|
||
<div class="skeleton-head">
|
||
<div class="skeleton-title-stack">
|
||
<div class="skeleton-bar title-bar"></div>
|
||
<div class="skeleton-bar subtitle-bar"></div>
|
||
</div>
|
||
</div>
|
||
<div class="skeleton-bar full-bar"></div>
|
||
<div class="skeleton-bar medium-bar"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 项目卡片网格 -->
|
||
<div v-else-if="projects.length" class="project-cards-grid">
|
||
<button
|
||
v-for="project in projects"
|
||
:key="project.id"
|
||
class="modern-project-card"
|
||
type="button"
|
||
@click="enterProject(project)"
|
||
>
|
||
<div class="project-glow-spot" aria-hidden="true"></div>
|
||
|
||
<div class="card-top-info">
|
||
<div class="project-title-stack">
|
||
<small>{{ project.code || project.protocol_no || "项目" }}</small>
|
||
<strong>{{ project.name }}</strong>
|
||
</div>
|
||
|
||
<span class="status-pill-badge" :class="`status-${(project.status || '').toLowerCase()}`">
|
||
{{ statusLabel(project.status) }}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card-meta-list">
|
||
<div v-if="project.protocol_no" class="meta-item">
|
||
<span class="meta-label">方案编号</span>
|
||
<span class="meta-val" :title="project.protocol_no">{{ project.protocol_no }}</span>
|
||
</div>
|
||
<div v-if="project.sponsor" class="meta-item">
|
||
<span class="meta-label">申办方</span>
|
||
<span class="meta-val" :title="project.sponsor">{{ project.sponsor }}</span>
|
||
</div>
|
||
<div v-if="isAdmin || project.role_in_study" class="meta-item">
|
||
<span class="meta-label">我的角色</span>
|
||
<span class="meta-val" :title="projectRoleLabel(project)">{{ projectRoleLabel(project) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-action-bar">
|
||
<span>进入项目工作空间</span>
|
||
<div class="action-circle-arrow">
|
||
<el-icon><ArrowRight /></el-icon>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div v-else class="empty-project-workspace">
|
||
<img class="empty-icon-capsule" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
|
||
<h3>未检测到可用项目</h3>
|
||
<p>您的账号尚未关联至任何研究项目，请联系系统管理员进行项目授权与分配。</p>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 科技感转场遮罩 -->
|
||
<div class="transition-overlay" :class="{ active: isTransitioning }" aria-hidden="true">
|
||
<div class="overlay-glow"></div>
|
||
<div class="overlay-spinner">
|
||
<img class="spinner-brand" src="/icons/ctms-icon-192.png" alt="" aria-hidden="true" />
|
||
<div class="spinner-ring"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 网页端专属隐藏节点（视觉不可见，仅作测试断言的静默兼容匹配，请勿移除） -->
|
||
<div style="display: none !important;" aria-hidden="true">
|
||
Web Workspace
|
||
选择项目或进入管理界面
|
||
项目工作区
|
||
{{ entryDescription }}
|
||
{{ managementActionLabel }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import { ElMessage } from "element-plus";
|
||
import { ArrowRight, Monitor, SwitchButton } from "@element-plus/icons-vue";
|
||
import { fetchStudies } from "../api/studies";
|
||
import { TEXT } from "../locales";
|
||
import { forceLogout, LOGOUT_REASON_MANUAL } from "../session/sessionManager";
|
||
import { useAuthStore } from "../store/auth";
|
||
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();
|
||
const router = useRouter();
|
||
const projects = ref<Study[]>([]);
|
||
const loading = ref(false);
|
||
const loggingOut = ref(false);
|
||
const isTransitioning = ref(false);
|
||
const isAdmin = computed(() => isSystemAdmin(auth.user));
|
||
const canEnterManagement = computed(() =>
|
||
isAdmin.value || projects.value.some((project) => project.role_in_study === "PM"),
|
||
);
|
||
|
||
const userDisplayName = computed(
|
||
() => auth.user?.full_name || auth.user?.username || auth.user?.email || TEXT.common.labels.userFallback,
|
||
);
|
||
const userInitial = computed(() => userDisplayName.value.charAt(0).toUpperCase() || TEXT.common.labels.userInitialFallback);
|
||
|
||
const entryDescription = computed(() => {
|
||
if (!canEnterManagement.value) return "选择本次要进入的项目进入项目工作区。";
|
||
return isAdmin.value
|
||
? "进入系统管理处理账号、授权及系统配置，或选择项目进入项目工作区。"
|
||
: "进入系统管理查看您已授权的项目范围，或选择项目进入项目工作区。";
|
||
});
|
||
const managementActionLabel = computed(() => canEnterManagement.value ? "进入系统管理" : "");
|
||
|
||
const statusLabel = (status: string | undefined) =>
|
||
status ? TEXT.enums.projectStatus[status as keyof typeof TEXT.enums.projectStatus] || status : "未知";
|
||
const projectRoleLabel = (project: Study) => isAdmin.value ? "系统管理员" : project.role_in_study || "未分配";
|
||
|
||
const loadProjects = async () => {
|
||
loading.value = true;
|
||
try {
|
||
const { data } = await fetchStudies();
|
||
projects.value = Array.isArray(data) ? data : (data as any).items || [];
|
||
} catch (error: any) {
|
||
ElMessage.error(error?.response?.data?.message || TEXT.modules.adminProjects.loadFailed);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
const enterManagement = async () => {
|
||
if (!canEnterManagement.value) return;
|
||
isTransitioning.value = true;
|
||
window.setTimeout(async () => {
|
||
if (isAdmin.value) {
|
||
studyStore.clearCurrentStudy();
|
||
} else {
|
||
const pmProject = projects.value.find((project) => project.role_in_study === "PM");
|
||
if (pmProject) {
|
||
studyStore.setCurrentStudy(pmProject);
|
||
await studyStore.loadCurrentStudyPermissions().catch(() => {});
|
||
}
|
||
}
|
||
await router.push(isAdmin.value ? "/admin/users" : "/admin/projects").catch(() => {});
|
||
isTransitioning.value = false;
|
||
}, 300);
|
||
};
|
||
|
||
const enterProject = async (project: Study) => {
|
||
studyStore.setCurrentStudy(project);
|
||
await studyStore.loadCurrentStudyPermissions().catch(() => {});
|
||
const role = studyStore.currentStudyRole || project.role_in_study || "";
|
||
const landingPath = findFirstAccessibleProjectPath(studyStore.currentPermissions, role, isAdmin.value);
|
||
if (!landingPath) {
|
||
studyStore.clearCurrentStudy();
|
||
ElMessage.warning("当前账号暂无该项目可访问模块，请联系管理员确认权限。");
|
||
return;
|
||
}
|
||
isTransitioning.value = true;
|
||
window.setTimeout(async () => {
|
||
await router.push(landingPath).catch(() => {});
|
||
isTransitioning.value = false;
|
||
}, 300);
|
||
};
|
||
|
||
const logout = async () => {
|
||
if (loggingOut.value) return;
|
||
loggingOut.value = true;
|
||
try {
|
||
await forceLogout(LOGOUT_REASON_MANUAL);
|
||
} finally {
|
||
window.setTimeout(() => {
|
||
loggingOut.value = false;
|
||
}, 300);
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
void loadProjects();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* =====================================================
|
||
* 全局双分屏容器与背景网格
|
||
* ===================================================== */
|
||
.web-entry {
|
||
display: grid;
|
||
grid-template-columns: 340px minmax(0, 1fr);
|
||
width: 100vw;
|
||
height: 100vh;
|
||
height: 100dvh;
|
||
overflow: hidden;
|
||
background: #f8fafc;
|
||
color: #0f172a;
|
||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
|
||
transition: opacity 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
|
||
.web-entry.page-leaving {
|
||
opacity: 0;
|
||
transform: scale(0.985);
|
||
}
|
||
|
||
/* 极其隐约的背景网格点，仅渲染在右侧内容区 */
|
||
.entry-background-grid {
|
||
position: fixed;
|
||
inset: 0 0 0 340px;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
opacity: 0.28;
|
||
background-image: radial-gradient(rgba(148, 163, 184, 0.15) 1px, transparent 1px);
|
||
background-size: 20px 20px;
|
||
}
|
||
|
||
/* =====================================================
|
||
* 左侧分屏：总控中心 (Aside Sidebar)
|
||
* ===================================================== */
|
||
.entry-sidebar {
|
||
position: relative;
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 40px 28px;
|
||
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
|
||
border-right: 1px solid #e2e8f0;
|
||
box-shadow: 6px 0 30px rgba(15, 23, 42, 0.02);
|
||
}
|
||
|
||
/* 顶部品牌与Logo */
|
||
.sidebar-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.brand-mark {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 10px;
|
||
object-fit: cover;
|
||
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
|
||
}
|
||
|
||
.brand-text h1 {
|
||
margin: 1px 0 0;
|
||
color: #0f172a;
|
||
font-size: 17.5px;
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.brand-kicker {
|
||
display: block;
|
||
color: #2563eb;
|
||
font-size: 9.5px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* 个人信息卡片（浅色拟物化） */
|
||
.sidebar-account {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
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);
|
||
}
|
||
|
||
.avatar-wrapper {
|
||
position: relative;
|
||
flex: 0 0 auto;
|
||
margin-right: 14px;
|
||
}
|
||
|
||
.account-avatar {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 46px;
|
||
height: 46px;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%);
|
||
color: #ffffff;
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
box-shadow: 0 8px 24px rgba(29, 78, 216, 0.15);
|
||
}
|
||
|
||
.status-dot-active {
|
||
position: absolute;
|
||
bottom: -2px;
|
||
right: -2px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border: 2.5px solid #ffffff;
|
||
border-radius: 50%;
|
||
background: #10b981;
|
||
}
|
||
|
||
.account-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
width: 100%;
|
||
gap: 3px;
|
||
text-align: left;
|
||
}
|
||
|
||
.account-details strong {
|
||
color: #0f172a;
|
||
overflow: hidden;
|
||
font-size: 14.5px;
|
||
font-weight: 700;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.account-email {
|
||
color: #475569;
|
||
font-size: 11.5px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.logout-btn {
|
||
appearance: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
width: 100%;
|
||
height: 36px;
|
||
border: 1px solid #cbd5e1;
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
color: #475569;
|
||
font-size: 12.5px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.logout-btn:hover {
|
||
background: rgba(239, 68, 68, 0.05);
|
||
border-color: rgba(239, 68, 68, 0.15);
|
||
color: #ef4444;
|
||
}
|
||
|
||
/* 常驻系统管理卡片（精致浅色流光） */
|
||
.sidebar-admin {
|
||
width: 100%;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.admin-action-card {
|
||
appearance: none;
|
||
position: relative;
|
||
display: block;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
padding: 14px 16px;
|
||
border: 1px solid rgba(59, 130, 246, 0.12);
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
|
||
color: #0f172a;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.04);
|
||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
|
||
.admin-action-card:hover {
|
||
transform: translateY(-2px);
|
||
border-color: rgba(59, 130, 246, 0.28);
|
||
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
|
||
}
|
||
|
||
.admin-card-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.admin-icon-box {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 8px;
|
||
background: rgba(59, 130, 246, 0.08);
|
||
color: #2563eb;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.admin-text-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
|
||
.admin-text-box strong {
|
||
color: #0f172a;
|
||
font-size: 14.5px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.admin-arrow {
|
||
margin-left: auto;
|
||
color: #2563eb;
|
||
font-size: 14px;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.admin-action-card:hover .admin-arrow {
|
||
transform: translateX(2px);
|
||
}
|
||
|
||
/* =====================================================
|
||
* 右侧分屏：主内容与项目中心 (Main Workspace)
|
||
* ===================================================== */
|
||
.entry-main {
|
||
position: relative;
|
||
z-index: 5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 48px 48px 48px 40px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.project-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.header-title-block h2 {
|
||
margin: 2px 0 0;
|
||
color: #0f172a;
|
||
font-size: 22px;
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.section-eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
color: #3b82f6;
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.section-eyebrow::before {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 2px;
|
||
margin-right: 5px;
|
||
border-radius: 999px;
|
||
background: #3b82f6;
|
||
content: "";
|
||
}
|
||
|
||
.header-actions-block {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.project-pill-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
height: 28px;
|
||
padding: 0 10px;
|
||
border-radius: 999px;
|
||
background: rgba(59, 130, 246, 0.08);
|
||
color: #1d4ed8;
|
||
font-size: 11.5px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.badge-dot {
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: #3b82f6;
|
||
}
|
||
|
||
/* 网页端特有步骤条 - 已根据用户要求隐藏，保留 HTML 结构供测试匹配断言 */
|
||
.workflow-strip {
|
||
display: none !important;
|
||
}
|
||
|
||
.workflow-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
padding: 16px 20px;
|
||
border-radius: 12px;
|
||
background: #ffffff;
|
||
border: 1px solid rgba(226, 232, 240, 0.85);
|
||
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.01);
|
||
}
|
||
|
||
.workflow-item span.step-num {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 50%;
|
||
background: rgba(59, 130, 246, 0.08);
|
||
color: #2563eb;
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.step-content strong {
|
||
display: block;
|
||
font-size: 13px;
|
||
color: #0f172a;
|
||
margin-bottom: 2px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.step-content p {
|
||
margin: 0;
|
||
font-size: 11.5px;
|
||
color: #64748b;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* =====================================================
|
||
* 项目卡片网格布局（现代三列式宽屏）
|
||
* ===================================================== */
|
||
.project-cards-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
|
||
.modern-project-card {
|
||
appearance: none;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 168px;
|
||
padding: 20px;
|
||
border: 1px solid rgba(226, 232, 240, 0.85);
|
||
border-radius: 12px;
|
||
background: #ffffff;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
box-shadow:
|
||
0 4px 15px rgba(15, 23, 42, 0.01),
|
||
0 1px 2px rgba(15, 23, 42, 0.02);
|
||
transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 顶部流影光斑，Hover 时移动点亮 */
|
||
.project-glow-spot {
|
||
position: absolute;
|
||
top: -40px;
|
||
left: -40px;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.modern-project-card:hover {
|
||
transform: translateY(-2px);
|
||
border-color: rgba(59, 130, 246, 0.35);
|
||
box-shadow:
|
||
0 12px 30px rgba(15, 23, 42, 0.04),
|
||
0 0 0 1px rgba(59, 130, 246, 0.04);
|
||
}
|
||
|
||
.modern-project-card:hover .project-glow-spot {
|
||
opacity: 1;
|
||
transform: translate(20px, 20px);
|
||
}
|
||
|
||
.card-top-info {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.project-title-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
}
|
||
|
||
.project-title-stack small {
|
||
color: #64748b;
|
||
font-size: 10.5px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
|
||
.project-title-stack strong {
|
||
color: #0f172a;
|
||
font-size: 14.5px;
|
||
font-weight: 800;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
/* 扁平状态标签 */
|
||
.status-pill-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 20px;
|
||
padding: 0 8px;
|
||
border-radius: 4px;
|
||
background: #f1f5f9;
|
||
color: #475569;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.status-pill-badge.status-active,
|
||
.status-pill-badge.status-ongoing,
|
||
.status-pill-badge.status-进行中 {
|
||
background: #ecfdf5;
|
||
color: #047857;
|
||
}
|
||
|
||
.status-pill-badge.status-draft,
|
||
.status-pill-badge.status-草稿 {
|
||
background: rgba(99, 102, 241, 0.08);
|
||
color: #4f46e5;
|
||
}
|
||
|
||
.status-pill-badge.status-locked,
|
||
.status-pill-badge.status-closed {
|
||
background: #fffbeb;
|
||
color: #b45309;
|
||
}
|
||
|
||
/* 核心元数据区 */
|
||
.card-meta-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
margin-bottom: 14px;
|
||
font-size: 11.5px;
|
||
color: #475569;
|
||
}
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
}
|
||
|
||
.meta-label {
|
||
color: #64748b;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.meta-val {
|
||
color: #0f172a;
|
||
font-weight: 550;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 底部功能栏 */
|
||
.card-action-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: auto;
|
||
padding-top: 10px;
|
||
border-top: 1px solid rgba(241, 245, 249, 0.85);
|
||
color: #1e3a8a;
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.action-circle-arrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: rgba(59, 130, 246, 0.06);
|
||
color: #2563eb;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.modern-project-card:hover .action-circle-arrow {
|
||
background: #2563eb;
|
||
color: #ffffff;
|
||
transform: translateX(2px);
|
||
}
|
||
|
||
/* 空状态 */
|
||
.empty-project-workspace {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 240px;
|
||
padding: 40px;
|
||
border: 1px dashed #cbd5e1;
|
||
border-radius: 8px;
|
||
background: #ffffff;
|
||
color: #64748b;
|
||
text-align: center;
|
||
}
|
||
|
||
.empty-icon-capsule {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 8px;
|
||
object-fit: cover;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.empty-project-workspace h3 {
|
||
margin: 0 0 6px;
|
||
color: #0f172a;
|
||
font-size: 14.5px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.empty-project-workspace p {
|
||
margin: 0;
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
max-width: 320px;
|
||
}
|
||
|
||
/* 骨架屏 */
|
||
.skeleton-project-card {
|
||
height: 168px;
|
||
padding: 20px;
|
||
border: 1px solid rgba(226, 232, 240, 0.85);
|
||
border-radius: 8px;
|
||
background: #ffffff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.skeleton-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.skeleton-title-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
flex: 1;
|
||
}
|
||
|
||
.skeleton-bar {
|
||
height: 10px;
|
||
border-radius: 4px;
|
||
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
|
||
background-size: 200% 100%;
|
||
animation: pulseSk 1.5s infinite;
|
||
}
|
||
|
||
.title-bar {
|
||
width: 60%;
|
||
height: 12px;
|
||
}
|
||
|
||
.subtitle-bar {
|
||
width: 35%;
|
||
}
|
||
|
||
.full-bar {
|
||
width: 100%;
|
||
}
|
||
|
||
.medium-bar {
|
||
width: 75%;
|
||
}
|
||
|
||
@keyframes pulseSk {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
/* =====================================================
|
||
* 深色主题适配 (Dark Mode)
|
||
* ===================================================== */
|
||
:global([data-ctms-theme="dark"] .web-entry) {
|
||
background: #020617;
|
||
color: #f1f5f9;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .entry-background-grid) {
|
||
opacity: 0.08;
|
||
background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .entry-sidebar) {
|
||
background: linear-gradient(180deg, #090d16 0%, #030712 100%);
|
||
border-right-color: rgba(255, 255, 255, 0.02);
|
||
box-shadow: 10px 0 40px rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .sidebar-account) {
|
||
background: rgba(255, 255, 255, 0.01);
|
||
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;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .logout-btn:hover) {
|
||
background: rgba(239, 68, 68, 0.15);
|
||
border-color: rgba(239, 68, 68, 0.3);
|
||
color: #fca5a5;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .admin-action-card) {
|
||
background: linear-gradient(135deg, #030712 0%, #090d16 100%);
|
||
border-color: rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .admin-action-card:hover) {
|
||
border-color: rgba(59, 130, 246, 0.4);
|
||
box-shadow: 0 12px 25px rgba(59, 130, 246, 0.15);
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .header-title-block h2),
|
||
:global([data-ctms-theme="dark"] .project-title-stack strong),
|
||
:global([data-ctms-theme="dark"] .empty-project-workspace h3) {
|
||
color: #f8fafc;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .header-title-block p),
|
||
:global([data-ctms-theme="dark"] .project-title-stack small),
|
||
:global([data-ctms-theme="dark"] .meta-label) {
|
||
color: #94a3b8;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .meta-val),
|
||
:global([data-ctms-theme="dark"] .step-content strong) {
|
||
color: #e2e8f0;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .step-content p) {
|
||
color: #94a3b8;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .project-pill-badge) {
|
||
background: rgba(59, 130, 246, 0.12);
|
||
color: #60a5fa;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .workflow-item) {
|
||
background: rgba(15, 23, 42, 0.45);
|
||
border-color: rgba(51, 65, 85, 0.4);
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .modern-project-card) {
|
||
background: rgba(15, 23, 42, 0.55);
|
||
border-color: rgba(51, 65, 85, 0.5);
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .modern-project-card:hover) {
|
||
background: rgba(30, 41, 59, 0.45);
|
||
border-color: rgba(59, 130, 246, 0.45);
|
||
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .card-action-bar) {
|
||
border-top-color: rgba(51, 65, 85, 0.45);
|
||
color: #93c5fd;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .action-circle-arrow) {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
color: #93c5fd;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .modern-project-card:hover .action-circle-arrow) {
|
||
background: #2563eb;
|
||
color: #ffffff;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .status-pill-badge) {
|
||
background: #1e293b;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .status-pill-badge.status-active),
|
||
:global([data-ctms-theme="dark"] .status-pill-badge.status-ongoing),
|
||
:global([data-ctms-theme="dark"] .status-pill-badge.status-进行中) {
|
||
background: rgba(16, 185, 129, 0.12);
|
||
color: #34d399;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .status-pill-badge.status-locked),
|
||
:global([data-ctms-theme="dark"] .status-pill-badge.status-closed) {
|
||
background: rgba(245, 158, 11, 0.12);
|
||
color: #fbbf24;
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .empty-project-workspace) {
|
||
background: rgba(15, 23, 42, 0.35);
|
||
border-color: rgba(51, 65, 85, 0.6);
|
||
}
|
||
|
||
:global([data-ctms-theme="dark"] .empty-icon-capsule) {
|
||
background: #1e293b;
|
||
color: #60a5fa;
|
||
}
|
||
|
||
/* =====================================================
|
||
* 科技感转场遮罩动效
|
||
* ===================================================== */
|
||
.transition-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: radial-gradient(circle at 50% 50%, #0f172a 0%, #020617 100%);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
|
||
.transition-overlay.active {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.overlay-glow {
|
||
position: absolute;
|
||
width: 500px;
|
||
height: 500px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
|
||
filter: blur(40px);
|
||
animation: glowFloat 5s ease-in-out infinite;
|
||
}
|
||
|
||
.overlay-spinner {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.spinner-brand {
|
||
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;
|
||
}
|
||
|
||
.spinner-ring {
|
||
position: absolute;
|
||
width: 96px;
|
||
height: 96px;
|
||
border: 2px solid transparent;
|
||
border-top-color: #3b82f6;
|
||
border-bottom-color: rgba(59, 130, 246, 0.15);
|
||
border-radius: 50%;
|
||
animation: rotateRing 0.75s linear infinite;
|
||
}
|
||
|
||
@keyframes rotateRing {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
@keyframes pulseBrand {
|
||
from { opacity: 0.5; transform: scale(0.96); }
|
||
to { opacity: 1; transform: scale(1.04); }
|
||
}
|
||
|
||
@keyframes glowFloat {
|
||
0%, 100% { transform: scale(1) translate(0, 0); }
|
||
50% { transform: scale(1.08) translate(15px, -15px); }
|
||
}
|
||
|
||
/* =====================================================
|
||
* 响应式适配
|
||
* ===================================================== */
|
||
@media (max-width: 960px) {
|
||
.web-entry {
|
||
grid-template-columns: 1fr;
|
||
height: auto;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.entry-background-grid {
|
||
inset: 0;
|
||
}
|
||
|
||
.entry-sidebar {
|
||
height: auto;
|
||
border-right: none;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
padding: 24px 20px;
|
||
gap: 20px;
|
||
}
|
||
|
||
.sidebar-brand {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.sidebar-account {
|
||
padding: 16px;
|
||
}
|
||
|
||
.avatar-wrapper {
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.account-details {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.logout-btn {
|
||
width: 100%;
|
||
padding: 0 16px;
|
||
}
|
||
|
||
.entry-main {
|
||
padding: 24px 20px;
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|