feat(监控): 完善系统监控、登录状态与访问审计能力

frontend/src/styles/main.css

@@ -1056,9 +1056,11 @@ body.is-desktop-runtime .el-dialog {
   max-width: min(calc(100vw - 72px), var(--el-dialog-width, 960px));
 }
 
-/* profile-settings-dialog / desktop-preferences-dialog：移除外层卡片外壳，内容区自带圆角阴影 */
+/* 这些对话框的内容区已具备独立结构，移除桌面端通用的外层卡片外壳。 */
 body.is-desktop-runtime .profile-settings-dialog,
-body.is-desktop-runtime .desktop-preferences-dialog {
+body.is-desktop-runtime .desktop-preferences-dialog,
+body.is-desktop-runtime .user-form-dialog,
+body.is-desktop-runtime .reset-password-dialog {
   overflow: visible !important;
   border: none !important;
   border-radius: 0 !important;
@@ -1108,6 +1110,29 @@ body.is-desktop-runtime .el-dialog__body {
   font-size: 13px;
 }
 
+/* 账号表单去掉外框后，内容区仍需作为标题与底栏之间的连续面板。 */
+body.is-desktop-runtime .user-form-dialog .el-dialog__body,
+body.is-desktop-runtime .reset-password-dialog .el-dialog__body {
+  background: rgba(248, 250, 252, 0.98);
+}
+
+/* 账号操作弹窗保留单层面板：以小圆角和细边框明确边界，关闭按钮置于标题栏内。 */
+body.is-desktop-runtime .user-form-dialog,
+body.is-desktop-runtime .reset-password-dialog {
+  padding: 0 !important;
+  overflow: hidden !important;
+  border: 1px solid rgba(148, 163, 184, 0.5) !important;
+  border-radius: 8px !important;
+}
+
+body.is-desktop-runtime .user-form-dialog .el-dialog__headerbtn,
+body.is-desktop-runtime .reset-password-dialog .el-dialog__headerbtn {
+  top: 5px;
+  right: 7px;
+  width: 28px;
+  height: 28px;
+}
+
 body.is-desktop-runtime .desktop-preferences-dialog {
   background: transparent !important;
   box-shadow: none !important;
@@ -1195,6 +1220,8 @@ body.is-desktop-runtime .msgbox-fade-leave-to .el-message-box {
 }
 
 :root[data-ctms-theme="dark"] body.is-desktop-runtime .desktop-preferences-dialog,
+:root[data-ctms-theme="dark"] body.is-desktop-runtime .user-form-dialog,
+:root[data-ctms-theme="dark"] body.is-desktop-runtime .reset-password-dialog,
 :root[data-ctms-theme="dark"] body.is-desktop-runtime .desktop-preferences-dialog .el-dialog__body {
   background: transparent !important;
 }
@@ -1216,6 +1243,16 @@ body.is-desktop-runtime .msgbox-fade-leave-to .el-message-box {
   color: #cbd5e1;
 }
 
+:root[data-ctms-theme="dark"] body.is-desktop-runtime .user-form-dialog .el-dialog__body,
+:root[data-ctms-theme="dark"] body.is-desktop-runtime .reset-password-dialog .el-dialog__body {
+  background: rgba(17, 24, 39, 0.98);
+}
+
+:root[data-ctms-theme="dark"] body.is-desktop-runtime .user-form-dialog,
+:root[data-ctms-theme="dark"] body.is-desktop-runtime .reset-password-dialog {
+  border-color: rgba(71, 85, 105, 0.9) !important;
+}
+
 :root[data-ctms-theme="dark"] body.is-desktop-runtime .el-dialog__footer,
 :root[data-ctms-theme="dark"] body.is-desktop-runtime .el-message-box__btns {
   border-top-color: rgba(51, 65, 85, 0.92);
@@ -1230,3 +1267,106 @@ body.is-desktop-runtime .msgbox-fade-leave-to .el-message-box {
     transition-duration: 1ms !important;
   }
 }
+
+.ctms-updated-at {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 12px !important;
+  color: #64748b !important;
+  font-weight: 400 !important;
+  line-height: 1.5 !important;
+  white-space: nowrap !important;
+}
+
+:root[data-ctms-theme="dark"] .ctms-updated-at {
+  color: #94a3b8 !important;
+}
+
+/* 触发弹窗/新视窗的专属物理按钮动效 */
+.ctms-btn-dialog {
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease !important;
+  font-weight: 550 !important;
+}
+
+.ctms-btn-dialog:hover {
+  transform: translateY(-1px) !important;
+  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.12) !important;
+}
+
+.ctms-btn-dialog.primary-dialog:hover {
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
+}
+
+.ctms-btn-dialog:active {
+  transform: translateY(1px) !important;
+  box-shadow: none !important;
+}
+
+.ctms-btn-link-dialog {
+  font-weight: 600 !important;
+  transition: color 0.15s ease, opacity 0.15s ease !important;
+}
+
+.ctms-btn-link-dialog:hover {
+  opacity: 0.85 !important;
+  text-decoration: underline !important;
+  text-underline-offset: 3px !important;
+}
+
+/* 专属物理按钮圆角胶囊与渐变色方案 */
+
+/* 1. 危险/高危胶囊（查看异常分析） */
+.ctms-btn-capsule-danger {
+  background: #fff5f5 !important;
+  color: #e11d48 !important;
+  border: 1px solid #fee2e2 !important;
+  border-radius: 999px !important;
+  font-size: 11px !important;
+  height: 24px !important;
+  padding: 0 10px !important;
+}
+.ctms-btn-capsule-danger:hover {
+  background: #ffe4e6 !important;
+  border-color: #fecdd3 !important;
+  color: #be123c !important;
+}
+
+/* 2. 统计/排行胶囊（IP访问排行） */
+.ctms-btn-capsule-info {
+  background: #eff6ff !important;
+  color: #1d4ed8 !important;
+  border: 1px solid #dbeafe !important;
+  border-radius: 999px !important;
+}
+.ctms-btn-capsule-info:hover {
+  background: #dbeafe !important;
+  border-color: #bfdbfe !important;
+  color: #1e40af !important;
+}
+
+/* 3. 靛紫渐变胶囊（安全日志） */
+.ctms-btn-gradient-indigo {
+  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
+  color: #ffffff !important;
+  border: none !important;
+  border-radius: 999px !important;
+  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15) !important;
+}
+.ctms-btn-gradient-indigo:hover {
+  background: linear-gradient(135deg, #4338ca, #4f46e5) !important;
+  color: #ffffff !important;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
+}
+
+/* 4. 蓝绿双向渐变胶囊（访问日志） */
+.ctms-btn-gradient-blue {
+  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
+  color: #ffffff !important;
+  border: none !important;
+  border-radius: 999px !important;
+  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important;
+}
+.ctms-btn-gradient-blue:hover {
+  background: linear-gradient(135deg, #0369a1, #075985) !important;
+  color: #ffffff !important;
+  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
+}