feat: M3-M7 全模块落地 + 集成接线
- M3 认证/权限/审计/限流 + 全部 REST 接口 - M4 管理面板（MIUIx + 成绩录入/积分榜下钻/大屏控制） - M5a 大屏页面（六页 + 明细覆盖层 + 缩放适配） - M6 WebSocket 实时同步中心 - M7 xlsx 导出 + 赛事包 zip + 备份 - 规则包 YAML 导入导出（差异预览） - 字体 vendor 子集化（4 套 x2 字重） - 集成：realtime/export/rules 接入 main+httpapi；backup 子命令 - 修复：中间件包装 ResponseWriter 丢失 Hijacker，导致 WS 握手 501
This commit is contained in:
AskaEth committed
1 parent
d0e3b93e76
commit
bc8b1ee6c0
145 files changed
+25159
-321
No files matched your search
Vendored
+230
@@ -0,0 +1,230 @@
|
||||
/* ═══════════════════════════════════════════
|
||||
MIUIX CONSOLE — Liquid Glass Effect v2
|
||||
液体玻璃效果系统（完整版）
|
||||
通过 [data-glass="liquid"] 属性启用
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
/* ── Glass Variables ── */
|
||||
:root {
|
||||
--mx-glass-blur: 12px;
|
||||
--mx-glass-saturation: 180%;
|
||||
--mx-glass-displacement: 25;
|
||||
--mx-glass-aberration: 2;
|
||||
--mx-glass-elasticity: 0.15;
|
||||
--mx-glass-corner-radius: 16px;
|
||||
--mx-glass-activation-zone: 200;
|
||||
--mx-glass-bg-light: rgba(255, 255, 255, 0.25);
|
||||
--mx-glass-bg-dark: rgba(0, 0, 0, 0.35);
|
||||
--mx-glass-border-light: rgba(255, 255, 255, 0.2);
|
||||
--mx-glass-border-dark: rgba(255, 255, 255, 0.08);
|
||||
--mx-glass-mouse-x: 0;
|
||||
--mx-glass-mouse-y: 0;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
DARK MODE (default)
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
/* ── TopBar ── */
|
||||
[data-glass="liquid"] .mx-topbar {
|
||||
background: rgba(22, 22, 22, 0.45);
|
||||
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
border-bottom: 1px solid var(--mx-glass-border-dark);
|
||||
filter: url(#mx-glass-filter);
|
||||
}
|
||||
|
||||
/* ── Sidebar ── */
|
||||
[data-glass="liquid"] .mx-sidebar {
|
||||
background: rgba(22, 22, 22, 0.45);
|
||||
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
border-right: 1px solid var(--mx-glass-border-dark);
|
||||
filter: url(#mx-glass-filter);
|
||||
}
|
||||
|
||||
/* ── Bottom Nav ── */
|
||||
[data-glass="liquid"] .mx-bottom-nav {
|
||||
background: rgba(22, 22, 22, 0.45);
|
||||
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
border-top: 1px solid var(--mx-glass-border-dark);
|
||||
filter: url(#mx-glass-filter);
|
||||
}
|
||||
|
||||
/* ── Modal ── */
|
||||
[data-glass="liquid"] .mx-modal {
|
||||
background: rgba(30, 30, 30, 0.5);
|
||||
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
border: 1px solid var(--mx-glass-border-dark);
|
||||
filter: url(#mx-glass-filter);
|
||||
}
|
||||
|
||||
/* ── Drawer ── */
|
||||
[data-glass="liquid"] .mx-drawer {
|
||||
background: rgba(22, 22, 22, 0.5);
|
||||
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
border-left: 1px solid var(--mx-glass-border-dark);
|
||||
filter: url(#mx-glass-filter);
|
||||
}
|
||||
|
||||
/* ── Popover ── */
|
||||
[data-glass="liquid"] .mx-popover {
|
||||
background: rgba(30, 30, 30, 0.5);
|
||||
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
border: 1px solid var(--mx-glass-border-dark);
|
||||
filter: url(#mx-glass-filter);
|
||||
}
|
||||
|
||||
/* ── Select Dropdown ── */
|
||||
[data-glass="liquid"] .mx-select-dropdown {
|
||||
background: rgba(30, 30, 30, 0.5);
|
||||
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
border: 1px solid var(--mx-glass-border-dark);
|
||||
filter: url(#mx-glass-filter);
|
||||
}
|
||||
|
||||
/* ── Card (opt-in via .mx-card-glass) ── */
|
||||
[data-glass="liquid"] .mx-card-glass {
|
||||
background: rgba(30, 30, 30, 0.4);
|
||||
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
|
||||
border: 1px solid var(--mx-glass-border-dark);
|
||||
filter: url(#mx-glass-filter);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
LIGHT MODE
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
[data-theme="light"][data-glass="liquid"] .mx-topbar {
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
border-bottom: 1px solid var(--mx-glass-border-light);
|
||||
}
|
||||
|
||||
[data-theme="light"][data-glass="liquid"] .mx-sidebar {
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
border-right: 1px solid var(--mx-glass-border-light);
|
||||
}
|
||||
|
||||
[data-theme="light"][data-glass="liquid"] .mx-bottom-nav {
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
border-top: 1px solid var(--mx-glass-border-light);
|
||||
}
|
||||
|
||||
[data-theme="light"][data-glass="liquid"] .mx-modal {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--mx-glass-border-light);
|
||||
}
|
||||
|
||||
[data-theme="light"][data-glass="liquid"] .mx-drawer {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-left: 1px solid var(--mx-glass-border-light);
|
||||
}
|
||||
|
||||
[data-theme="light"][data-glass="liquid"] .mx-popover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--mx-glass-border-light);
|
||||
}
|
||||
|
||||
[data-theme="light"][data-glass="liquid"] .mx-select-dropdown {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--mx-glass-border-light);
|
||||
}
|
||||
|
||||
[data-theme="light"][data-glass="liquid"] .mx-card-glass {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border: 1px solid var(--mx-glass-border-light);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
OVER-LIGHT 模式
|
||||
亮色背景上使用的深色玻璃
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
[data-glass="liquid"][data-glass-over-light="true"] .mx-topbar,
|
||||
[data-glass="liquid"][data-glass-over-light="true"] .mx-sidebar,
|
||||
[data-glass="liquid"][data-glass-over-light="true"] .mx-bottom-nav,
|
||||
[data-glass="liquid"][data-glass-over-light="true"] .mx-modal,
|
||||
[data-glass="liquid"][data-glass-over-light="true"] .mx-drawer,
|
||||
[data-glass="liquid"][data-glass-over-light="true"] .mx-popover,
|
||||
[data-glass="liquid"][data-glass-over-light="true"] .mx-select-dropdown,
|
||||
[data-glass="liquid"][data-glass-over-light="true"] .mx-card-glass {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
GLASS 可追踪元素
|
||||
鼠标跟踪 + 弹性变换 + 双层边框
|
||||
═══════════════════════════════════════════ */
|
||||
|
||||
.mx-glass-trackable {
|
||||
position: relative;
|
||||
transition: transform 0.2s ease-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.mx-glass-trackable .mx-glass-border-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Hover 高光层 */
|
||||
.mx-glass-trackable::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-out;
|
||||
background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%);
|
||||
mix-blend-mode: overlay;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.mx-glass-trackable:hover::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx-glass-trackable:active::after {
|
||||
opacity: 0.8;
|
||||
background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%);
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
FALLBACK — browsers without SVG filter support
|
||||
═══════════════════════════════════════════ */
|
||||
@supports not (filter: url(#mx-glass-filter)) {
|
||||
[data-glass="liquid"] .mx-topbar,
|
||||
[data-glass="liquid"] .mx-sidebar,
|
||||
[data-glass="liquid"] .mx-bottom-nav,
|
||||
[data-glass="liquid"] .mx-modal,
|
||||
[data-glass="liquid"] .mx-drawer,
|
||||
[data-glass="liquid"] .mx-popover,
|
||||
[data-glass="liquid"] .mx-select-dropdown,
|
||||
[data-glass="liquid"] .mx-card-glass {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
REDUCED MOTION
|
||||
═══════════════════════════════════════════ */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.mx-glass-trackable {
|
||||
transition: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.mx-glass-trackable::after {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user