github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-22 16:43:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: 简化css动画以降低gpu占用高问题

Browse Source
This commit is contained in:
shaw
2025-09-11 22:22:05 +08:00
parent 7c4feec5aa
commit 009f7c84f6
3 changed files with 69 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/admin-spa/src/assets/styles/components.css
View File

@@ -1,22 +1,24 @@
/* Glass效果 */
/* Glass效果 - 优化版 */
.glass {
background: var(--glass-color);
backdrop-filter: blur(20px);
/* 降低模糊强度 */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--border-color);
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.glass-strong {
background: var(--surface-color);
backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.3);
/* 降低模糊强度 */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
/* 标签按钮 */
@@ -216,13 +218,13 @@
/* 表单输入 */
.form-input {
background: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: 8px 12px;
font-size: 14px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
transition: all 0.2s ease;
/* 移除模糊效果，使用纯色背景 */
}
.form-input:focus {
@@ -255,18 +257,18 @@
/* 模态框 */
.modal {
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.4);
/* 移除模糊，使用半透明背景 */
background: rgba(0, 0, 0, 0.6);
}
.modal-content {
background: rgba(255, 255, 255, 0.95);
background: rgba(255, 255, 255, 0.98);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 10px 25px -5px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
/* 移除模糊效果 */
}
/* 弹窗滚动内容样式 */

40
web/admin-spa/src/assets/styles/global.css
View File

@@ -108,13 +108,13 @@ body::before {
.glass {
background: var(--glass-color);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* 降低模糊强度 */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--border-color);
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition:
background-color 0.3s ease,
border-color 0.3s ease;
@@ -129,13 +129,12 @@ body::before {
.glass-strong {
background: var(--glass-strong-color);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
/* 降低模糊强度 */
/* 移除模糊效果 */
border: 1px solid var(--border-color);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
transition:
background-color 0.3s ease,
border-color 0.3s ease;
@@ -269,8 +268,7 @@ body::before {
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* 移除模糊效果 */
}
.form-input:focus {
@@ -461,8 +459,7 @@ body::before {
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* 移除模糊效果 */
}
.form-input:focus {
@@ -511,8 +508,7 @@ body::before {
}
.modal {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
/* 移除模糊效果 */
background: var(--modal-bg);
transition: background-color 0.3s ease;
}
@@ -522,10 +518,9 @@ body::before {
border-radius: 24px;
border: 1px solid rgba(229, 231, 235, 0.8);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 10px 25px -5px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* 移除模糊效果 */
transition:
background-color 0.3s ease,
border-color 0.3s ease;
@@ -730,7 +725,12 @@ body::before {
}
.animate-pulse {
animation: pulse 2s infinite;
/* 移除无限脉冲动画，改为 hover 效果 */
transition: transform 0.2s ease;
}
.animate-pulse:hover {
animation: pulse 0.3s ease;
}
/* 用户菜单下拉框优化 */

120
web/admin-spa/src/components/common/ThemeToggle.vue
View File

@@ -138,57 +138,42 @@ const selectTheme = (mode) => {
.theme-toggle-button {
@apply flex items-center justify-center;
@apply h-9 w-9 rounded-full;
@apply bg-white/80 dark:bg-gray-800/80;
@apply hover:bg-white/90 dark:hover:bg-gray-700/90;
@apply bg-white/90 dark:bg-gray-800/90;
@apply hover:bg-white dark:hover:bg-gray-700;
@apply text-gray-600 dark:text-gray-300;
@apply border border-gray-200/50 dark:border-gray-600/50;
@apply transition-all duration-200 ease-out;
@apply shadow-md backdrop-blur-sm hover:shadow-lg;
/* 移除 backdrop-blur 减少 GPU 负担 */
@apply shadow-md hover:shadow-lg;
@apply hover:scale-110 active:scale-95;
position: relative;
overflow: hidden;
}
/* 添加优雅的光环效果 */
/* 简化的 hover 效果 */
.theme-toggle-button::before {
content: '';
position: absolute;
inset: -2px;
inset: 0;
border-radius: inherit;
background: conic-gradient(
from 180deg at 50% 50%,
rgba(59, 130, 246, 0.2),
rgba(147, 51, 234, 0.2),
rgba(59, 130, 246, 0.2)
);
background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent);
opacity: 0;
transition: opacity 0.3s ease;
transition: opacity 0.2s ease;
pointer-events: none;
animation: rotate 3s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.theme-toggle-button:hover::before {
opacity: 0.6;
opacity: 1;
}
/* 图标样式优化 - 更生动 */
/* 图标样式优化 - 简洁高效 */
.theme-toggle-button i {
@apply text-base;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.2s ease;
}
.theme-toggle-button:hover i {
transform: rotate(180deg) scale(1.1);
transform: scale(1.1);
}
/* 不同主题的图标颜色 */
@@ -300,13 +285,13 @@ const selectTheme = (mode) => {
pointer-events: none;
}
/* 星星装饰（深色模式） */
/* 星星装饰（深色模式） - 优化版 */
.stars {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease;
transition: opacity 0.3s ease;
}
.theme-switch.is-dark .stars {
@@ -320,56 +305,42 @@ const selectTheme = (mode) => {
height: 2px;
background: white;
border-radius: 50%;
box-shadow: 0 0 2px white;
animation: twinkle 3s infinite;
opacity: 0.6;
}
.stars span:nth-child(1) {
top: 25%;
left: 20%;
animation-delay: 0s;
}
.stars span:nth-child(2) {
top: 40%;
left: 40%;
animation-delay: 1s;
width: 1.5px;
height: 1.5px;
}
.stars span:nth-child(3) {
top: 60%;
left: 25%;
animation-delay: 2s;
}
@keyframes twinkle {
0%,
100% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1);
}
}
/* 云朵装饰（浅色模式） */
/* 云朵装饰（浅色模式） - 优化版 */
.clouds {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease;
transition: opacity 0.3s ease;
}
.theme-switch:not(.is-dark):not(.is-auto) .clouds {
opacity: 1;
opacity: 0.7;
}
.clouds span {
position: absolute;
background: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.3);
border-radius: 100px;
}
@@ -378,7 +349,6 @@ const selectTheme = (mode) => {
height: 8px;
top: 40%;
left: 15%;
animation: float 4s infinite ease-in-out;
}
.clouds span:nth-child(2) {
@@ -386,18 +356,6 @@ const selectTheme = (mode) => {
height: 6px;
top: 60%;
left: 35%;
animation: float 4s infinite ease-in-out;
animation-delay: 1s;
}
@keyframes float {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
}
/* 切换滑块 */
@@ -428,16 +386,17 @@ const selectTheme = (mode) => {
0 0 0 1px rgba(255, 255, 255, 0.1);
}
/* 自动模式滑块位置 - 玻璃态设计 */
/* 自动模式滑块位置 - 优化后的半透明设计 */
.theme-switch.is-auto .switch-handle {
transform: translateY(-50%) translateX(19px);
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.25);
/* 降低 blur 强度，减少 GPU 负担 */
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.1),
inset 0 0 8px rgba(255, 255, 255, 0.2);
inset 0 0 8px rgba(255, 255, 255, 0.25);
}
/* 滑块图标 */
@@ -471,28 +430,7 @@ const selectTheme = (mode) => {
font-size: 15px;
}
/* 滑块悬停动画 */
.theme-switch:hover .switch-handle {
animation: bounce 0.5s ease;
}
@keyframes bounce {
0%,
100% {
transform: translateY(-50%) translateX(var(--handle-x, 0));
}
50% {
transform: translateY(calc(-50% - 3px)) translateX(var(--handle-x, 0));
}
}
.theme-switch.is-dark:hover .switch-handle {
--handle-x: 38px;
}
.theme-switch.is-auto:hover .switch-handle {
--handle-x: 19px;
}
/* 移除弹跳动画，保持简洁 */
/* 分段按钮样式 - 更现代 */
.theme-segmented {