feat: 完整实现中英文双语支持并修复所有声音翻译问题 #88
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
## 主要功能 - 实现完整的中英文双语支持系统 - 添加语言切换器和路由配置 - 创建统一的翻译文件和hooks ## 核心组件 - 新增语言切换器组件 - 实现中英文页面路由 - 添加翻译系统核心文件 ## 翻译修复 - 修复所有声音名称的dataI18n映射 - 解决重复翻译键冲突问题 - 完善所有分类的声音翻译 ## 声音分类优化 - 修复雨声分类的重复翻译键问题 - 清理跨分类翻译键冲突 - 优化声音分类归属 ## UI优化 - 移除页面底部开源模块 - 完善顶部捐赠文本翻译 - 优化所有菜单项的翻译显示
…tation - Add Docker deployment configuration with multiple Dockerfile variants - Implement simplified Docker build scripts for better compatibility - Update docker-compose configurations to use walllee/moodist image - Create comprehensive Docker deployment documentation - Add Chinese README (README.zh-CN.md) with full translation - Implement language selection links in both README files - Add quick start guide and Docker deployment instructions in Chinese - Include Docker build and push commands in package.json scripts New files added: - Docker configurations (Dockerfile.* variants) - Docker Compose files (dev, optimized versions) - Build scripts (scripts/*.sh) - Docker deployment documentation (DOCKER_DEPLOY.md) - Chinese README with complete translation
## 主要功能更新 ### 🎨 优化昼夜模式主题系统 - 参考现代设计标准（GitHub、VSCode）重新设计颜色方案 - 明亮主题：纯白背景 + 深灰文字，提供高对比度阅读体验 - 暗色主题：深蓝灰背景 + 高亮白色，护眼且现代 - 全面适配：所有组件背景色、边框色、前景色都跟随主题切换 ### 🎲 改进随机音频功能 - 智能单参数随机：每次只随机调整一个参数（速度/音调/音量） - 合理变化频率：调整为60-90秒，避免频繁变化影响体验 - 精确范围控制： - 速度和音调：默认值 ±0.25 范围内随机 - 音量：30%-70% 范围内随机 ### 📚 完善文档系统 - 创建英文版 README (README.en.md) - 完善中文版 README，包含： - 详细的使用说明和操作指南 - 完整的 Docker 部署教程 - 生产环境配置指南 - 在线体验地址：https://calm.zlext.com ### 🔧 技术改进 - 新增完整的主题切换组件 (ThemeToggle) - 优化随机音频控制组件 (RandomSpeed) - 改进声音控制组件的样式和交互 - 更新所有组件样式以支持主题变量 ## 版本信息 - 版本升级：v2.1.0 → v2.2.0 - 新增功能：昼夜主题、智能随机、完整文档 - 向后兼容：完全兼容现有配置和数据
- 更新 Dockerfile.simple 使用动态构建参数 - 确保镜像标签信息与实际版本一致 - 支持正确的版本号、构建时间和 Git 提交信息
- Create SelectedSoundsDisplay component to show selected sounds at the top of the page - Add displayMode parameter to Sound component for functionality in display mode - Implement complete audio controls including volume, speed, and rate progress bars - Add random effects support with proper interval management - Integrate multi-language support (Chinese: "当前声音", English: "Current Sounds") - Update App component to include the new display module - Use consistent styling with existing sound categories for seamless integration - Upgrade version to 2.3.0 for this feature release
- 准备为新功能发布进行版本升级
- 添加 SQLite 数据库支持用户存储 - 实现用户注册和登录 API 端点 - 新增独立的认证按钮组件，位于右上角 - 集成 Zustand 状态管理支持持久化登录状态 - 添加密码哈希和验证功能 - 支持登录表单模态框和用户状态显示 - 启用服务端渲染支持 API 路由
- 移除顶部捐赠支持组件，简化页面布局 - 精简菜单功能，删除睡眠定时器、倒计时器、番茄钟等不常用功能 - 将登录按钮移至右上角，主题切换按钮左侧 - 保留核心功能：预设、分享、随机播放、快捷键和音量控制 - 优化界面布局，提升用户使用体验
- 修复明亮模式下的组件背景色问题，移除黑色背景 - 统一所有按钮和组件的灰色调，提升视觉一致性 - 加深灰色对比度，提高可读性和用户体验 - 优化声音组件、分类图标、删除按钮等样式 - 统一播放按钮、菜单按钮、滚动到顶部按钮风格 - 改进主题切换系统的CSS变量使用 - 新增数据库目录用于SQLite数据存储
主要功能: ✨ 完整的用户认证系统 - 用户注册与登录功能 (SQLite + bcrypt) - JWT会话管理与持久化 - 用户状态实时显示 🎨 UI/UX 重大改进 - 垂直布局右上角控制面板 - 顶部通知提示系统 (3秒自动关闭) - 响应式设计与暗色主题优化 - 用户下拉菜单 (点击外部关闭) 🔧 技术优化 - 修复JSON解析错误与ES模块问题 - 清理重复组件，统一LanguageSwitcher - API错误处理改进 - z-index层级优化 🌐 国际化支持 - 中英文双语界面完善 - 通知消息本地化 数据库: SQLite (用户表) 认证: bcrypt 密码加密 前端: React + TypeScript + CSS Modules 后端: Astro API Routes
🎵 新增音乐保存功能 - 实现用户音乐配置保存到SQLite数据库 - 支持保存音量、速度、频率和随机效果等完整配置 - 添加音乐重命名和删除功能 🎨 完善用户界面体验 - 新增保存按钮UI，集成到SelectedSoundsDisplay组件 - 实现SavedMusicList组件，显示用户保存的音乐列表 - 支持一键播放已保存的音乐配置 🔧 优化认证系统架构 - 修复API密码认证问题，添加sessionPassword机制 - 改进错误处理和用户反馈 - 优化用户菜单位置和z-index层级问题 🛠️ 技术改进 - 扩展SQLite数据库，新增saved_music表 - 创建完整的音乐管理API接口（保存/列表/重命名/删除） - 增强用户认证状态管理，支持会话密码 - 优化CSS样式和动画效果 🎯 用户体验提升 - 修复用户菜单层级遮挡问题 - 重新设计用户菜单位置到左侧展开 - 添加退出登录功能和个人设置预留 - 完善登录提示和错误反馈机制 📝 数据库变更 - 添加saved_music表，存储用户音乐配置 - 支持JSON格式存储复杂的音频参数 - 实现用户关联和权限控制 这次提交实现了完整的音乐保存与管理系统，用户现在可以： 1. 保存当前声音配置为"音乐" 2. 在左侧查看和管理保存的音乐 3. 一键恢复之前的音乐配置 4. 重命名或删除不需要的音乐 5. 享受更好的用户界面体验
## 🎯 核心功能重构 ### 音乐列表显示优化 - **自动展示**: 登录用户页面打开时自动显示音乐列表，无需手动展开 - **权限控制**: 未登录用户完全隐藏"我的音乐"部分 - **独立展开**: 每个音乐项配备独立的展开/收起按钮 - **渐进展示**: 点击展开按钮显示音乐收录的声音详情 ### 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
- 将原生fetch替换为ApiClient，确保JWT Authorization头正确发送 - 修复删除音乐、重命名音乐、保存音乐功能的认证问题 - 移除不必要的用户名密码字段，依赖JWT认证 - 解决因缺少Authorization头导致的401未授权错误 Issues Fixed: - 音乐删除失败返回401错误 - 音乐操作API调用缺少认证头
重构所有拖动条使用统一的Slider组件，建立一致的视觉体验： - 统一所有音量、速度、倍速拖动条使用相同的Slider组件 - 创建统一的控件背景色CSS变量，与声音图标保持一致 - 优化拖动条配色：已选中部分和拖动点使用相同的温和色调 - 添加明亮模式下的滚动条样式，提升视觉体验 - 调整音乐列表布局，优化声音名称显示和展开按钮 - 精简CSS代码，减少重复样式定义 技术改进： - 移除重复的range input样式代码（从122行减至46行） - 使用CSS变量统一管理控件配色方案 - 保持组件间的一致性和可维护性
优化组件视觉一致性，建立统一的背景色系统： - 创建统一的组件背景色CSS变量 --color-component-bg - 声音选项背景色与播放按钮下方区域使用相同颜色 - 移除播放列表区域的边框线，简化视觉层次 - 保持整体界面的视觉协调性和简洁性 技术细节： - 使用 --bg-tertiary 作为统一的基础色值 - 确保明亮和暗色主题下的视觉一致性 - 通过CSS变量系统化管理背景色配置
重构音乐管理界面，实现高级交互体验： - 为当前选中音乐添加展开/收起按钮，默认展开状态 - 为我的音乐添加展开/收起按钮，默认收起状态 - 实现互斥展开逻辑：两个区域只能有一个展开 - 音乐记录展开时显示具体的声音组件和播放按钮 - 添加播放音乐记录功能：一键加载保存的声音配置 技术架构改进： - 使用React hooks管理复杂的状态逻辑和互斥展开 - 统一的CSS变量系统管理背景色和组件样式 - 完整的错误处理和用户交互反馈 - 优化动画效果和视觉过渡体验 - 重构组件结构，提升代码可维护性 用户体验优化： - 直观的展开/收起视觉反馈 - 平滑的动画过渡效果 - 清晰的操作流程和状态指示 - 统一的视觉设计语言 - 响应式布局适配不同屏幕 代码质量提升： - 清除所有TypeScript和JSX语法错误 - 优化React组件的props传递和状态管理 - 统一的颜色变量和CSS类命名规范 - 完善的错误边界和异常处理机制
- 重命名"当前选中音乐"为"当前选中的声音" - 完全分离两个模块为独立UI组件，移除互斥展开逻辑 - 优化音乐列表横向布局：音乐名称、声音名称和按钮在同一行显示 - 实现智能展开逻辑：音乐列表默认展开，超过5项时自动收起 - 增加模块间32px间距，提升视觉层次 - 修复展开按钮样式冲突，优化CSS类名结构 - 改进组件状态管理，确保模块独立性
- 修复声音名称容器对齐方式，从居中改为左对齐 - 确保音乐名称、声音名称和按钮在同一行完美对齐 - 提升音乐列表视觉一致性和用户体验
## 核心功能 - 手风琴效果：展开任意音乐时收起其他所有展开项 - 互斥展开：展开音乐时自动收起当前选中声音模块 - 动态高度：音乐展开时移除容器高度限制，完整展示所有内容 ## UI优化 - 音乐信息横向布局：音乐名、声音名、按钮同排对齐 - 声音名称位置调整：优化垂直对齐，增加下移间距 - 平滑动画：添加容器高度过渡动画效果 ## 技术实现 - 重构展开逻辑：统一状态管理，确保互斥性 - 动态CSS类：基于展开状态动态添加hasExpanded类 - 响应式设计：容器高度自适应内容变化 ## 用户体验 - 界面整洁：同时只展开一个区域，避免视觉混乱 - 内容完整：展开时确保所有声音信息可见 - 交互流畅：平滑动画过渡，提升操作体验
## 移除的功能 - 当前选中声音区域：移除删除按钮，避免误操作 - 音乐列表头部：移除展开/收起按钮，简化界面 ## 优化理念 - 保持界面简洁：减少不必要的UI元素 - 专注核心功能：保留音乐项的独立展开功能 - 提升用户体验：避免操作混乱，界面更清爽 ## 保留功能 - 音乐保存功能：保留SaveMusicButton - 音乐项展开：每个音乐项仍可独立展开查看声音详情 - 手风琴效果：展开音乐时自动收起其他项目
🎉 版本升级: 2.5.0 → 3.0.0 🎵 音乐播放系统重构: - 独立的音乐播放系统，不影响当前选中声音 - 修复 React Hooks 调用错误 - 使用直接 Howl API 实现音频控制 - 添加播放/停止状态视觉反馈 - 组件显示逻辑完全分离 🐳 Docker 部署优化: - 所有 compose 文件添加 SQLite 数据库挂载 - 支持 WAL 模式和并发写入 - 数据持久化，容器重启不丢失数据 - 创建详细的 Docker 数据库挂载文档 🎨 UI/UX 改进: - 修复当前选中声音与音乐列表显示互斥问题 - 播放按钮状态动态显示 - 组件模块完全独立展示 🗄️ 数据库性能优化: - 启用 WAL 模式提高并发性能 - 优化 SQLite 配置参数 - 添加详细日志和错误处理 📦 新增文件: - docker-database-mount.md: Docker 数据库挂载说明文档
🛠️ 构建修复: - 添加 @astrojs/node 适配器 (v8.3.4) - 配置 standalone 模式用于 Docker 部署 - 修复 "No adapter installed" 构建错误 - 更新 package-lock.json 依赖锁定 📦 这确保了 v3.0.0 镜像能够正常构建和运行
🛠️ 构建修复: - 改为 output: 'static' 静态构建 - 移除 Node.js 适配器依赖 - 修复 Docker 容器部署显示问题 - 确保静态文件能正确通过Nginx提供服务⚠️ 注意: 静态模式下API端点将不可用 如需API功能，需要改用Node.js服务器部署
- 新增 Dockerfile.dev-server：类生产模式容器（无热重载干扰） - 新增 Dockerfile.prod-like：纯生产模式容器尝试 - 新增 Dockerfile.server：服务器模式容器 - 更新 docker-compose.yml：移除过时 version 字段，优化卷挂载 - 更新 .gitignore：忽略 data 目录（SQLite 数据库） - 更新 astro.config.mjs：支持服务器端渲染模式 这解决了 react-icons 在生产构建中的 ES 模块兼容性问题， 提供了稳定的生产级 Docker 部署方案。
- 移除本地构建配置，直接使用远程镜像 - 使用 walllee/moodist:latest 简化部署流程 - 保留所有重要配置（端口映射、数据卷挂载等） 这样用户可以直接使用 'docker-compose up -d' 启动最新版本， 无需本地构建，部署更简单快捷。
- 修复 Dockerfile.dev-server 的 NODE_ENV 设置为 development - 更改 docker-compose.yml 端口映射为 11081:8080 避免端口冲突 - 添加容器启动命令确保安装必要的开发依赖 - 解决 astro 构建时的依赖问题 这些修改确保开发环境能够正常启动和运行， 同时避免与主机上的其他服务端口冲突。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
主要功能
核心组件
翻译修复
声音分类优化
UI优化