166 lines
4.2 KiB
Markdown
166 lines
4.2 KiB
Markdown
|
# 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 张梦南**
|