ai音乐电台

Claudio AI Radio 是一个 Next.js + Tailwind CSS + TypeScript 构建的本地 AI 私人音乐电台。用户输入心情、天气、状态、时间段或一句自然语言后，系统会自动推荐歌曲，生成温柔的 AI DJ 过渡文案，用浏览器免费 SpeechSynthesis 朗读，然后再播放音乐。

功能
Claudio 风格深色 Web 电台播放器，包含 ON AIR 状态、播放进度、控制栏、歌曲队列和聊天区
用户可以输入心情、天气、状态、音乐风格或自然语言
/api/recommend 根据本地曲库标签和打分机制推荐歌曲
/api/chat 模拟深夜 AI 主播回复，并根据用户对话调整下一首推荐
浏览器原生 SpeechSynthesis 免费朗读 DJ 过渡文案
DJ 文案朗读结束后自动播放歌曲
data/songs.json 提供 18 首本地 mock 曲库，即使网易云 API 没启动也能推荐和播放
本地曲库不够时，后端通过网易云 API 代理兜底搜索
网易云歌曲无播放 URL 时自动切换备用音频，并显示友好提示
/api/radio 后端接口
配置 OPENAI_API_KEY 时调用 OpenAI 生成电台
配置 NEXT_PUBLIC_NETEASE_API_URL 时接入网易云音乐搜索结果
未配置 API Key 或生成失败时自动使用本地 mock 数据
使用 localStorage 保存用户输入、喜欢/不喜欢歌曲、偏好风格和最近播放记录

一、整体架构

本项目是一个基于 Web 的环境监控系统，主要用于展示和管理环境数据，例如温度、湿度、光照、空气质量等信息。系统整体采用前端页面展示 + 数据模拟/本地存储的方式实现，适合用于课程设计、软件著作权材料、项目展示和基础后台系统演示。

整体架构可以分为以下几层：

1. 页面展示层

页面展示层负责用户看到的所有界面内容，包括首页、数据看板、监控数据列表、数据录入表单、设备状态展示等模块。

主要功能包括：

展示环境监控数据
显示温度、湿度、空气质量等指标
支持用户录入新的监控数据
展示系统运行状态
提供简洁的后台管理界面
2. 业务逻辑层

业务逻辑层主要负责处理页面中的交互逻辑，例如：

用户输入数据后的校验
新增数据后的页面刷新
根据数据状态显示正常、异常、警告等提示
对监控数据进行简单分类和展示
控制页面之间的跳转和组件显示
3. 数据存储层

当前版本主要采用前端本地模拟数据和浏览器本地存储的方式进行数据管理。

数据来源包括：

系统预设的模拟环境数据
用户手动录入的数据
浏览器 localStorage 保存的数据

这种方式不依赖真实服务器，适合本地运行、课程演示和项目原型展示。后续如果需要上线或扩展，可以替换为真实数据库，例如 MySQL、Supabase、MongoDB 或云数据库。

4. 功能模块划分

系统主要包括以下模块：

模块 说明
首页概览模块 展示系统名称、核心数据和运行状态
环境数据展示模块 展示温度、湿度、空气质量等监控数据
数据录入模块 支持用户手动录入新的监控信息
设备状态模块 展示监测设备是否在线、异常或离线
数据列表模块 展示历史监控记录
页面交互模块 控制按钮、表单、弹窗、刷新等操作
二、设计思路

本系统的设计思路是：先完成一个可以运行、可以展示、可以录入数据的 Web 版本，再逐步扩展真实数据采集、后端接口和数据库功能。

1. 先做可视化界面

环境监控系统的核心是让用户能够直观看到环境状态，所以页面设计优先考虑数据展示效果。系统通过卡片、表格、状态标签等方式，把温度、湿度、空气质量等数据清晰展示出来。

例如：

温度过高时显示警告状态
湿度正常时显示正常状态
设备离线时显示异常状态

这样可以让用户快速判断当前环境是否安全。

2. 先用模拟数据实现功能

由于真实环境监控系统通常需要传感器、物联网设备、后端接口和数据库支持，开发复杂度较高。因此在 V1.0 版本中，先使用模拟数据完成系统基本功能。

这样做的好处是：

可以快速完成系统原型
不依赖硬件设备
方便本地运行和演示
后期可以平滑替换成真实接口数据
3. 功能设计以简单实用为主

系统没有一开始就做复杂的权限、算法和服务器部署，而是优先实现最核心的功能：

数据展示
数据录入
状态判断
页面交互
本地保存

这种方式更适合