# DreamLife - 个人主页网站

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

## 功能特性

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

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

### 每日一言
- 集成hitokoto API
- 自动显示名言内容和出处
- 优雅的排版样式

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

### 移动端适配
- 滑动切换界面
- 优化的触摸交互
- 隐藏滚动条
- 调整的UI细节

### 其他功能
- 实时时间显示
- 项目链接展示
- 个人标签展示
- 全屏模式支持

## 快速开始

### 安装依赖

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

### 本地运行

```bash
# 使用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` 文件中修改：

```javascript
// 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/](https://halo.dreamlife.top/)
- Gitea: [https://gitea.dreamlife.top/](https://gitea.dreamlife.top/)

---

**Design by 张梦南**