feat(工作台): 优化入口布局与连接安全状态

frontend/src/views/WebWorkbenchEntry.vue

@@ -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;
   }