feat(auth): 集成认证授权功能并优化API客户端
- 实现了完整的登录注册认证流程，包括密码验证和用户资料获取 - 集成了JWT令牌管理和自动刷新机制，支持设备ID生成和管理 - 添加了WebSocket连接配置和API基础URL环境变量设置 - 实现了API客户端的请求拦截器，包括令牌验证和错误处理逻辑 - 集成了MD5加密和认证令牌缓存机制，提升安全性 - 添加了多语言国际化支持，包括英语、中文、马来语和印尼语 - 实现了认证状态管理和本地存储持久化功能 - 添加了表单验证schema和错误处理机制，增强用户体验
This commit is contained in:
JiaJun
@@ -198,6 +198,7 @@
|
||||
border-radius: 5px;
|
||||
padding: calc(var(--design-unit) * 8) calc(var(--design-unit) * 10);
|
||||
box-shadow: inset 0 0 8px rgba(128, 223, 231, 0.65);
|
||||
color: #d5fbff;
|
||||
}
|
||||
|
||||
.common-neon-inset-glow {
|
||||
@@ -346,6 +347,173 @@
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.game-toaster {
|
||||
--width: min(
|
||||
calc(100vw - calc(var(--design-unit) * 32)),
|
||||
calc(var(--design-unit) * 520)
|
||||
);
|
||||
}
|
||||
|
||||
.game-toast {
|
||||
width: min(
|
||||
calc(100vw - calc(var(--design-unit) * 32)),
|
||||
calc(var(--design-unit) * 520)
|
||||
);
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
column-gap: calc(var(--design-unit) * 14);
|
||||
align-items: center;
|
||||
min-height: calc(var(--design-unit) * 60);
|
||||
padding: calc(var(--design-unit) * 16) calc(var(--design-unit) * 20);
|
||||
border-radius: calc(var(--design-unit) * 16);
|
||||
border: 1px solid rgba(128, 223, 231, 0.68);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 35, 49, 0.98), rgba(6, 16, 24, 0.98)),
|
||||
radial-gradient(circle at top, rgba(124, 232, 255, 0.22), transparent 58%);
|
||||
box-shadow:
|
||||
inset 0 0 calc(var(--design-unit) * 16) rgba(128, 223, 231, 0.18),
|
||||
0 0 calc(var(--design-unit) * 24) rgba(29, 190, 219, 0.26),
|
||||
0 calc(var(--design-unit) * 18) calc(var(--design-unit) * 52)
|
||||
rgba(2, 8, 16, 0.42);
|
||||
backdrop-filter: blur(14px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.game-toast::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 1px;
|
||||
border-radius: inherit;
|
||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||
border-top-color: rgba(215, 250, 255, 0.32);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.game-toast-success {
|
||||
border-color: rgba(79, 220, 155, 0.72);
|
||||
box-shadow:
|
||||
inset 0 0 calc(var(--design-unit) * 16) rgba(79, 220, 155, 0.16),
|
||||
0 0 calc(var(--design-unit) * 24) rgba(79, 220, 155, 0.24),
|
||||
0 calc(var(--design-unit) * 18) calc(var(--design-unit) * 52)
|
||||
rgba(2, 8, 16, 0.42);
|
||||
}
|
||||
|
||||
.game-toast-error {
|
||||
border-color: rgba(255, 94, 122, 0.68);
|
||||
box-shadow:
|
||||
inset 0 0 calc(var(--design-unit) * 16) rgba(255, 94, 122, 0.16),
|
||||
0 0 calc(var(--design-unit) * 24) rgba(255, 94, 122, 0.24),
|
||||
0 calc(var(--design-unit) * 18) calc(var(--design-unit) * 52)
|
||||
rgba(2, 8, 16, 0.42);
|
||||
}
|
||||
|
||||
.game-toast-warning {
|
||||
border-color: rgba(255, 214, 110, 0.72);
|
||||
box-shadow:
|
||||
inset 0 0 calc(var(--design-unit) * 16) rgba(255, 214, 110, 0.16),
|
||||
0 0 calc(var(--design-unit) * 24) rgba(255, 214, 110, 0.22),
|
||||
0 calc(var(--design-unit) * 18) calc(var(--design-unit) * 52)
|
||||
rgba(2, 8, 16, 0.42);
|
||||
}
|
||||
|
||||
.game-toast-info,
|
||||
.game-toast-loading,
|
||||
.game-toast-default {
|
||||
border-color: rgba(128, 223, 231, 0.52);
|
||||
}
|
||||
|
||||
.game-toast-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(var(--design-unit) * 30);
|
||||
height: calc(var(--design-unit) * 30);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
box-shadow:
|
||||
inset 0 0 calc(var(--design-unit) * 8) rgba(255, 255, 255, 0.04),
|
||||
0 0 calc(var(--design-unit) * 12) rgba(124, 232, 255, 0.12);
|
||||
}
|
||||
|
||||
.game-toast-content {
|
||||
min-width: 0;
|
||||
padding-right: calc(var(--design-unit) * 22);
|
||||
}
|
||||
|
||||
.game-toast-title {
|
||||
font-size: calc(var(--design-unit) * 17);
|
||||
line-height: 1.3;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.03em;
|
||||
color: #f2fdff;
|
||||
text-shadow:
|
||||
0 0 calc(var(--design-unit) * 8) rgba(124, 232, 255, 0.18),
|
||||
0 0 calc(var(--design-unit) * 16) rgba(124, 232, 255, 0.08);
|
||||
}
|
||||
|
||||
.game-toast-description {
|
||||
margin-top: calc(var(--design-unit) * 5);
|
||||
font-size: calc(var(--design-unit) * 13);
|
||||
line-height: 1.45;
|
||||
color: rgba(213, 251, 255, 0.84);
|
||||
}
|
||||
|
||||
.game-toast-close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: calc(var(--design-unit) * 14);
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(var(--design-unit) * 28);
|
||||
height: calc(var(--design-unit) * 28);
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(128, 223, 231, 0.34);
|
||||
background: rgba(4, 18, 27, 0.82);
|
||||
box-shadow:
|
||||
inset 0 0 calc(var(--design-unit) * 6) rgba(255, 255, 255, 0.04),
|
||||
0 0 calc(var(--design-unit) * 10) rgba(124, 232, 255, 0.14);
|
||||
transition:
|
||||
border-color 180ms ease,
|
||||
background-color 180ms ease,
|
||||
transform 180ms ease,
|
||||
box-shadow 180ms ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.game-toast-close:hover {
|
||||
transform: translateY(-50%) scale(1.04);
|
||||
border-color: rgba(128, 223, 231, 0.58);
|
||||
background: rgba(10, 28, 40, 0.96);
|
||||
box-shadow:
|
||||
inset 0 0 calc(var(--design-unit) * 8) rgba(255, 255, 255, 0.06),
|
||||
0 0 calc(var(--design-unit) * 14) rgba(124, 232, 255, 0.22);
|
||||
}
|
||||
|
||||
.game-toast-action,
|
||||
.game-toast-cancel {
|
||||
margin-top: calc(var(--design-unit) * 10);
|
||||
border-radius: calc(var(--design-unit) * 999);
|
||||
padding: calc(var(--design-unit) * 6) calc(var(--design-unit) * 12);
|
||||
font-size: calc(var(--design-unit) * 12);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.game-toast-action {
|
||||
border: 1px solid rgba(128, 223, 231, 0.52);
|
||||
background: rgba(10, 34, 47, 0.9);
|
||||
color: #d5fbff;
|
||||
}
|
||||
|
||||
.game-toast-cancel {
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: rgba(213, 251, 255, 0.74);
|
||||
}
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
|
||||
Reference in New Issue
Block a user