优化后台界面与无操作退出体验

frontend/src/views/Login.vue

@@ -27,6 +27,23 @@
           <p class="sys-subtitle">Log in to your account</p>
         </div>
 
+        <div v-if="logoutNotice" class="logout-notice" :class="'logout-notice--' + logoutNotice.type">
+          <div class="logout-notice-icon" aria-hidden="true">
+            <svg v-if="logoutNotice.type === 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"></circle>
+              <path d="M12 7v6"></path>
+              <path d="M12 17h.01"></path>
+            </svg>
+            <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M20 6 9 17l-5-5"></path>
+            </svg>
+          </div>
+          <div class="logout-notice-body">
+            <strong>{{ logoutNotice.title }}</strong>
+            <span>{{ logoutNotice.message }}</span>
+          </div>
+        </div>
+
         <el-form
           ref="formRef"
           :model="form"
@@ -133,7 +150,12 @@ import { ElMessage, type FormInstance, type FormRules } from "element-plus";
 import { useAuthStore } from "../store/auth";
 import { useStudyStore } from "../store/study";
 import { TEXT, requiredMessage } from "../locales";
-import { consumeLogoutReason, LOGOUT_REASON_TIMEOUT } from "../session/sessionManager";
+import {
+  consumeLogoutReason,
+  LOGOUT_REASON_AUTH_EXPIRED,
+  LOGOUT_REASON_MANUAL,
+  LOGOUT_REASON_TIMEOUT,
+} from "../session/sessionManager";
 import { authProtocolSections } from "../content/authProtocol";
 
 const auth = useAuthStore();
@@ -162,13 +184,30 @@ const rules: FormRules<typeof form> = {
 
 const loading = ref(false);
 const protocolDialogVisible = ref(false);
+const logoutNotice = ref<{ type: "info" | "warning"; title: string; message: string } | null>(null);
 
 const protocolSections = authProtocolSections;
 
 onMounted(async () => {
   const logoutReason = consumeLogoutReason();
   if (logoutReason === LOGOUT_REASON_TIMEOUT) {
-    ElMessage.warning("长时间未操作，已自动退出登录，请重新登录");
+    logoutNotice.value = {
+      type: "warning",
+      title: "已自动退出登录",
+      message: "30 分钟未检测到任何操作。为保护项目数据，请重新登录后继续。",
+    };
+  } else if (logoutReason === LOGOUT_REASON_AUTH_EXPIRED) {
+    logoutNotice.value = {
+      type: "warning",
+      title: "登录状态已失效",
+      message: "当前会话无法继续使用，请重新登录。",
+    };
+  } else if (logoutReason === LOGOUT_REASON_MANUAL) {
+    logoutNotice.value = {
+      type: "info",
+      title: "已安全退出",
+      message: "本机登录状态已清除，需要时可再次登录。",
+    };
   }
   form.email = localStorage.getItem("ctms_last_login_email") || "";
   form.rememberPassword = localStorage.getItem(REMEMBER_PASSWORD_KEY) === "true";
@@ -357,6 +396,62 @@ const onSubmit = async () => {
   margin: 0;
 }
 
+.logout-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin: -14px 0 24px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid;
+}
+
+.logout-notice--warning {
+  color: #8a5b12;
+  background: #fff7e8;
+  border-color: #f3d19e;
+}
+
+.logout-notice--info {
+  color: #315f49;
+  background: #eef8f2;
+  border-color: #b9dec8;
+}
+
+.logout-notice-icon {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.logout-notice-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.logout-notice-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.logout-notice-body strong {
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 800;
+}
+
+.logout-notice-body span {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 600;
+}
+
 .login-form :deep(.el-form-item) {
   margin-bottom: 22px;
 }