mirror of
https://github.com/remvze/moodist.git
synced 2025-12-19 09:54:17 +00:00
010fb9674b
## 🎯 核心功能重构 ### 音乐列表显示优化 - **自动展示**: 登录用户页面打开时自动显示音乐列表，无需手动展开 - **权限控制**: 未登录用户完全隐藏"我的音乐"部分 - **独立展开**: 每个音乐项配备独立的展开/收起按钮 - **渐进展示**: 点击展开按钮显示音乐收录的声音详情 ### JWT认证系统完整实现 - **安全升级**: 完全替代密码传输，实现JWT令牌认证 - **自动管理**: 登录时自动生成和存储JWT令牌 - **API集成**: 所有音乐相关API统一使用JWT认证 - **容错机制**: 多层级token获取策略确保认证稳定性 ## 🔧 技术架构升级 ### 新增核心模块 - `src/lib/jwt.ts` - JWT令牌创建与验证核心 - `src/lib/jwt-auth-middleware.ts` - JWT认证中间件 - `src/lib/api-client.ts` - 自动JWT令牌注入的API客户端 - `src/hooks/useNotification.ts` - 统一通知系统 ### 组件化重构 - `src/components/buttons/save-music/` - 音乐保存按钮组件 - `src/components/buttons/delete-music/` - 音乐删除按钮组件 - `src/components/notification/` - 通知组件系统 ### API安全强化 - 所有认证相关API集成JWT中间件 - 用户注册/登录自动返回JWT令牌 - 音乐CRUD操作统一JWT认证验证 ## 🎨 用户体验优化 ### 交互流程简化 - 登录即见：音乐列表自动展示，减少用户操作步骤 - 按需展开：声音详情按需显示，避免信息过载 - 状态持久：JWT令牌自动管理，无需重复登录 ### 视觉层次优化 - 音乐名称与展开按钮并排布局，提升操作便利性 - 声音列表折叠显示，保持界面整洁 - 统一通知样式，确保视觉一致性 ## 🛡️ 安全性提升 - **零密码传输**: API请求完全移除明文密码传输 - **令牌过期**: JWT令牌7天自动过期机制 - **状态隔离**: 认证状态与业务状态完全分离 版本: v2.7.0 技术栈: React + TypeScript + Astro + SQLite + JWT
90 lines
No EOL
1.6 KiB
CSS
90 lines
No EOL
1.6 KiB
CSS
.notification {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1002;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
animation: notificationSlideIn 0.3s ease-out;
|
|
max-width: 400px;
|
|
width: calc(100vw - 40px);
|
|
}
|
|
|
|
.notificationContent {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.notificationMessage {
|
|
font-size: 14px;
|
|
color: white;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.notificationClose {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 2px;
|
|
transition: background-color 0.2s ease;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.notificationClose:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 成功通知样式 */
|
|
.notification.success {
|
|
background: linear-gradient(135deg, #10b981, #059669);
|
|
color: white;
|
|
border: 1px solid #059669;
|
|
}
|
|
|
|
/* 错误通知样式 */
|
|
.notification.error {
|
|
background: linear-gradient(135deg, #ef4444, #dc2626);
|
|
color: white;
|
|
border: 1px solid #dc2626;
|
|
}
|
|
|
|
/* 通知动画 */
|
|
@keyframes notificationSlideIn {
|
|
from {
|
|
transform: translateX(-50%) translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(-50%) translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.notification {
|
|
top: 15px;
|
|
max-width: calc(100vw - 30px);
|
|
width: calc(100vw - 30px);
|
|
}
|
|
|
|
.notificationContent {
|
|
padding: 10px 14px;
|
|
}
|
|
|
|
.notificationMessage {
|
|
font-size: 13px;
|
|
}
|
|
} |