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 张梦南**
|