admin343/browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 前端优化

Browse Source
This commit is contained in:
npc0-hue
2026-07-21 13:44:23 +08:00
parent 0cb91b5f88
commit b06623d0ce
11 changed files with 386 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform_web/theme/tokens.ts
+24 -7
View File
@@ -90,6 +90,14 @@ const mechaMaterialVariables = {
"--frosted-surface": "linear-gradient(145deg, rgba(14, 28, 38, 0.62), rgba(5, 12, 18, 0.46) 48%, rgba(72, 230, 255, 0.07))",
"--frame-corner": "linear-gradient(135deg, rgba(72, 230, 255, 0.9) 0 2px, transparent 2px), linear-gradient(315deg, rgba(255, 184, 77, 0.72) 0 2px, transparent 2px)",
"--frame-accent": "linear-gradient(90deg, rgba(72, 230, 255, 0), rgba(72, 230, 255, 0.78), rgba(255, 184, 77, 0.58), rgba(72, 230, 255, 0))",
"--orbital-construct-image": "url(\"/theme/stellar-megastructure.svg\")",
"--orbital-construct-filter":
"drop-shadow(0 0 18px rgba(72, 230, 255, 0.28)) drop-shadow(0 0 34px rgba(255, 184, 77, 0.1))",
"--magic-lightfall":
"linear-gradient(180deg, transparent 0 4%, rgba(154, 247, 255, 0.34) 18%, rgba(72, 230, 255, 0.1) 42%, transparent 74%)",
"--magic-side-rays": "linear-gradient(90deg, rgba(72, 230, 255, 0.3), transparent 72%)",
"--command-ring-sheen":
"radial-gradient(circle at 50% 50%, rgba(154, 247, 255, 0.32), rgba(72, 230, 255, 0.12) 42%, transparent 68%)",
"--frame-accessory-top": mechaFrameAccessoryTop,
"--frame-accessory-bottom": mechaFrameAccessoryBottom,
"--frame-accessory-opacity": "0.22",
@@ -99,15 +107,15 @@ const mechaMaterialVariables = {
"--menu-glyph-bg": "linear-gradient(135deg, rgba(72, 230, 255, 0.28), rgba(255, 184, 77, 0.14)), repeating-linear-gradient(90deg, rgba(137, 239, 255, 0.18) 0 1px, transparent 1px 6px), rgba(5, 9, 15, 0.9)",
"--menu-title-shadow": "0 0 14px rgba(72, 230, 255, 0.5), 0 0 2px rgba(255, 184, 77, 0.8)",
"--menu-active-outline": "linear-gradient(90deg, rgba(72, 230, 255, 0.95), rgba(255, 184, 77, 0.72), rgba(72, 230, 255, 0.95))",
"--panel-material": "var(--sugar-dust), var(--glass-wash), linear-gradient(135deg, rgba(5, 12, 18, 0.46), rgba(10, 24, 32, 0.38))",
"--panel-material": "var(--sugar-dust), var(--glass-wash), linear-gradient(135deg, rgba(5, 12, 18, 0.3), rgba(10, 24, 32, 0.22))",
"--panel-shadow": "var(--jelly-inset), inset 0 0 0 1px rgba(119, 237, 255, 0.24), inset 9px 0 0 rgba(72, 230, 255, 0.06), 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 28px rgba(72, 230, 255, 0.11)"
} as const;
const magicalMaterialVariables = {
"--surface": "rgba(88, 18, 52, 0.48)",
"--surface-solid": "rgba(78, 14, 46, 0.82)",
"--surface-raised": "rgba(118, 26, 68, 0.54)",
"--glass-wash": "linear-gradient(180deg, rgba(255, 226, 242, 0.2), rgba(120, 24, 68, 0.32) 56%, rgba(72, 12, 42, 0.28))",
"--surface": "rgba(88, 18, 52, 0.38)",
"--surface-solid": "rgba(78, 14, 46, 0.7)",
"--surface-raised": "rgba(118, 26, 68, 0.42)",
"--glass-wash": "linear-gradient(180deg, rgba(255, 226, 242, 0.13), rgba(120, 24, 68, 0.22) 56%, rgba(72, 12, 42, 0.18))",
"--shine-sweep": "radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.58) 0 2px, transparent 3px)",
"--glass-tint": "rgba(255, 119, 200, 0.1)",
"--crystal-rim": "rgba(255, 236, 250, 0.92)",
@@ -125,9 +133,18 @@ const magicalMaterialVariables = {
"--crystal-edge-glow": "0 0 0 1px rgba(255, 217, 239, 0.78), 0 0 18px rgba(255, 119, 200, 0.46), 0 0 34px rgba(255, 221, 117, 0.18)",
"--jelly-inset": "inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 -1px 0 rgba(255, 119, 200, 0.28), inset 0 0 20px rgba(255, 255, 255, 0.18)",
"--frosted-edge": "linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 119, 200, 0.2) 48%, rgba(255, 221, 117, 0.18))",
"--frosted-surface": "linear-gradient(180deg, rgba(255, 226, 242, 0.18), rgba(118, 24, 66, 0.36) 52%, rgba(72, 12, 42, 0.28))",
"--frosted-surface": "linear-gradient(180deg, rgba(255, 226, 242, 0.12), rgba(118, 24, 66, 0.24) 52%, rgba(72, 12, 42, 0.18))",
"--frame-corner": "radial-gradient(circle at 0 0, rgba(255, 221, 117, 0.9) 0 4px, transparent 5px), radial-gradient(circle at 100% 100%, rgba(255, 119, 200, 0.9) 0 4px, transparent 5px)",
"--frame-accent": "linear-gradient(90deg, rgba(255, 221, 117, 0), rgba(255, 221, 117, 0.86), rgba(255, 119, 200, 0.78), rgba(255, 221, 117, 0))",
"--orbital-construct-image": "url(\"/theme/magical-circle.svg\")",
"--orbital-construct-filter":
"drop-shadow(0 0 18px rgba(255, 119, 200, 0.24)) drop-shadow(0 0 28px rgba(255, 221, 117, 0.16))",
"--magic-lightfall":
"linear-gradient(180deg, transparent 0 6%, rgba(255, 246, 253, 0.32) 18%, rgba(255, 119, 200, 0.12) 48%, transparent 76%)",
"--magic-side-rays":
"linear-gradient(90deg, rgba(255, 246, 253, 0.44), rgba(255, 221, 117, 0.18) 34%, rgba(255, 119, 200, 0.08) 62%, transparent)",
"--command-ring-sheen":
"radial-gradient(circle at 50% 50%, rgba(255, 246, 253, 0.5), rgba(255, 221, 117, 0.18) 42%, transparent 70%)",
"--frame-accessory-top": magicalFrameAccessoryWand,
"--frame-accessory-bottom": magicalFrameAccessoryCircle,
"--frame-accessory-heart": magicalFrameAccessoryHeart,
@@ -143,7 +160,7 @@ const magicalMaterialVariables = {
"--menu-glyph-bg": "radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.78), transparent 34%), radial-gradient(circle at 72% 80%, rgba(255, 221, 117, 0.42), transparent 30%), linear-gradient(135deg, rgba(255, 119, 200, 0.82), rgba(255, 221, 117, 0.44))",
"--menu-title-shadow": "0 2px 0 rgba(96, 24, 24, 0.86), 1px 0 0 rgba(96, 24, 24, 0.86), -1px 0 0 rgba(96, 24, 24, 0.86), 0 0 12px rgba(255, 221, 117, 0.48)",
"--menu-active-outline": "linear-gradient(90deg, rgba(255, 221, 117, 0.96), rgba(255, 246, 253, 0.92), rgba(255, 119, 200, 0.9), rgba(255, 221, 117, 0.96))",
"--panel-material": "var(--sugar-dust), var(--glass-wash), linear-gradient(180deg, rgba(106, 22, 60, 0.3), rgba(72, 12, 42, 0.3))",
"--panel-material": "var(--sugar-dust), var(--glass-wash), linear-gradient(180deg, rgba(106, 22, 60, 0.11), rgba(72, 12, 42, 0.09))",
"--panel-shadow": "var(--jelly-inset), inset 0 0 0 1px rgba(255, 217, 239, 0.5), 0 18px 42px rgba(72, 0, 34, 0.28), 0 0 30px rgba(255, 119, 200, 0.2), 0 0 16px rgba(255, 221, 117, 0.1)"
} as const;