DreamLife_HomePage/README.md

DreamLife - 个人主页网站

一个现代化的个人主页网站，集成了音乐播放器、AI对话、每日一言等功能，采用毛玻璃效果设计，支持响应式布局。

功能特性

音乐播放器

• 集成网易云音乐API
• 自定义播放控制按钮
• 显示歌曲标题和艺术家信息
• 支持播放/暂停、上一首、下一首功能

AI对话功能

• 集成ModelScope DeepSeek-V3.2模型
• 支持数字分身设定（工程导向的技术型思考者）
• 实时流式响应
• 支持Markdown格式渲染
• 消息复制功能

每日一言

• 集成hitokoto API
• 自动显示名言内容和出处
• 优雅的排版样式

视觉设计

• 毛玻璃效果（backdrop-filter）
• 响应式布局（30%:70%比例）
• 平滑过渡动画
• 明暗主题支持
• 自定义CSS变量系统

移动端适配

• 滑动切换界面
• 优化的触摸交互
• 隐藏滚动条
• 调整的UI细节

其他功能

• 实时时间显示
• 项目链接展示
• 个人标签展示
• 全屏模式支持

快速开始

安装依赖

项目使用纯HTML/CSS/JavaScript开发，无需安装额外依赖。

本地运行

# 使用Python启动本地服务器
python -m http.server 8080

# 或使用Node.js
npx serve

然后在浏览器中访问 http://localhost:8080

项目结构

yest/
├── css/                 # CSS样式文件
│   ├── body.css         # 主要样式
│   ├── chat.css         # 聊天功能样式
│   ├── footer.css       # 页脚样式
│   ├── font.css         # 字体样式
│   ├── max_width.css    # 移动端样式
│   ├── svg.css          # SVG图标样式
│   ├── time.css         # 时间显示样式
│   └── tool_card.css    # 工具卡片样式
├── icon/                # 图标文件
├── image/               # 图片文件
├── javascape/           # JavaScript文件
│   ├── ai_api.js        # AI对话API
│   ├── chat.js          # 聊天功能
│   ├── daily_quote.js   # 每日一言
│   ├── full_button.js   # 全屏按钮
│   ├── marked.min.js    # Markdown渲染
│   ├── max_width.js     # 移动端适配
│   ├── music_player.js  # 音乐播放器
│   ├── purify.min.js    # HTML净化
│   ├── switch_interface.js  # 界面切换
│   └── time.js          # 时间显示
├── prompt_word/         # AI提示词
│   └── digital_double.md # 数字分身设定
├── svg/                 # SVG图标
├── index.html           # 主页面
└── README.md            # 项目说明

技术栈

• 前端: HTML5, CSS3, JavaScript (ES6+)
• API: ModelScope DeepSeek-V3.2, 网易云音乐API, hitokoto API
• 工具: marked.js (Markdown渲染), DOMPurify (HTML安全)

设计特点

布局设计

• 左侧面板（30%）：个人信息、头像、标签、每日一言
• 右侧面板（70%）：时间、音乐播放器、项目链接

视觉效果

• 毛玻璃背景（backdrop-filter: blur(20px)）
• 渐变色彩主题
• 平滑过渡动画（transition: 0.3s ease）

交互体验

• 悬停效果
• 点击反馈
• 滚动优化
• 移动端滑动切换

自定义配置

AI对话API配置

在 javascape/ai_api.js 文件中修改：

// ModelScope API密钥
const API_KEY = "your_api_key_here";

数字分身设定

编辑 prompt_word/digital_double.md 文件，自定义AI的性格和回答风格。

移动端使用

• 滑动切换: 左右滑动切换左右面板
• 触摸控制: 支持触摸操作的音乐播放器
• 优化布局: 适配不同屏幕尺寸

特色功能

数字分身

AI助手采用工程导向的技术型思考者设定，专注于提供实用的技术解决方案。

音乐播放器

集成音乐API，支持在线音乐播放，界面简洁优雅。

每日一言

每日自动更新名言警句，增添文化氛围。

许可证

Apache-2.0

贡献

欢迎提交Issue和Pull Request！

联系方式

• 博客: https://halo.dreamlife.top/
• Gitea: https://gitea.dreamlife.top/

---

Design by 张梦南