# home

**Repository Path**: jun-wan/home

## Basic Information

- **Project Name**: home
- **Description**: 一个基于 Vue 3 + Vite + Vuetify 构建的现代化个人主页，集成了丰富的交互功能和精美的UI设计。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://tvemixy.fun/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-23
- **Last Updated**: 2026-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vite

## README

# Susu的个人主页 🎉

<div align="center">

![Vue](https://img.shields.io/badge/Vue-3.5.12-4FC08D?style=flat&logo=vue.js&logoColor=white)
![Vite](https://img.shields.io/badge/Vite-5.4.10-646CFF?style=flat&logo=vite&logoColor=white)
![Vuetify](https://img.shields.io/badge/Vuetify-3.7.4-1867C0?style=flat&logo=vuetify&logoColor=white)
![License](https://img.shields.io/badge/License-MIT-green.svg)

一个基于 Vue 3 + Vite + Vuetify 构建的现代化个人主页，集成了丰富的交互功能和精美的UI设计。

[在线预览](https://tvemixy.fun/) · [功能演示](#功能特性) · [快速开始](#快速开始)

</div>

## ✨ 功能特性

### 🎨 界面设计
- **响应式布局** - 完美适配PC端和移动端
- **动态壁纸** - 支持静态图片和动态视频壁纸切换
- **毛玻璃效果** - 现代化的视觉设计
- **主题定制** - 可自定义主题颜色和背景亮度

### 🎵 音乐播放器
- 集成网易云音乐API（MetingJS）
- 支持歌单播放
- 播放控制和歌曲切换
- 音频加载状态管理

### 💾 数据缓存
- **localStorage缓存** - 热点数据本地缓存
- **智能过期** - 根据数据类型设置不同过期时间
- **自动更新** - 缓存过期后自动重新请求
- **性能优化** - 减少不必要的API请求，提升加载速度

### 📊 数据展示
- **极坐标图** - 技能雷达图展示
- **标签云** - 个人标签展示
- **打字机效果** - 动态文字展示

### 🎮 互动功能
- **幸运转盘** - 趣味抽奖功能
- **多标签页** - 模块化内容展示
- **社交链接** - 快速访问社交平台

### 🚀 项目卡片
- 多个精选项目展示
- 二次元图片API自动切换
- 图片加载失败自动重试
- 支持外部链接跳转

## 🛠 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| [Vue.js](https://vuejs.org/) | 3.5.12 | 渐进式JavaScript框架 |
| [Vite](https://vitejs.dev/) | 5.4.10 | 下一代前端构建工具 |
| [Vuetify](https://vuetifyjs.com/) | 3.7.4 | Vue 3 Material Design组件库 |
| [Chart.js](https://www.chartjs.org/) | 4.4.7 | 图表库 |
| [TypeIt](https://typeitjs.com/) | 8.8.7 | 打字机效果库 |
| [Less](https://lesscss.org/) | 4.2.0 | CSS预处理器 |

## 📦 快速开始

### 环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装依赖

```bash
npm install
```

### 本地开发

```bash
npm run dev
```

访问 [http://localhost:5173](http://localhost:5173) 查看效果

### 生产构建

```bash
npm run build
```

构建产物将输出到 `dist` 目录

### 预览生产构建

```bash
npm run preview
```

## 📁 项目结构

```
home/
├── public/                 # 静态资源
│   ├── css/               # 样式文件
│   ├── fonts/             # 字体文件
│   └── img/               # 图片资源
│       ├── avatar.jpg     # 头像
│       ├── wallpaper/     # 壁纸资源
│       └── stackicon/     # 图标资源
├── src/
│   ├── components/        # 组件目录
│   │   ├── hoemright.vue # 右侧组件
│   │   ├── polarchart.vue # 极坐标图组件
│   │   ├── tabs/         # 标签页组件
│   │   ├── turntable.vue # 转盘组件
│   │   └── typewriter.vue # 打字机组件
│   ├── utils/            # 工具函数
│   │   ├── common.js     # 通用工具
│   │   └── cookieUtils.js # Cookie工具
│   ├── App.vue           # 根组件
│   ├── app.js            # 主应用逻辑
│   ├── config.js         # 配置文件
│   └── main.js           # 入口文件
├── index.html            # HTML模板
├── package.json          # 项目配置
├── vite.config.js        # Vite配置
└── README.md            # 项目文档
```

## ⚙️ 配置说明

### 个性化配置

主要配置位于 `src/config.js` 文件：

```javascript
const config = {
  // 网页元数据
  metaData: {
    title: 'Susu的个人主页🎉',
    description: '欢迎来到Susu的奇妙世界！',
    keywords: 'Susu,个人主页,个人网站',
    icon: '/favicon.ico'
  },

  // 头像和标题
  avatar: "/img/avatar.jpg",
  welcometitle: "Hi, I'm Susu",

  // 颜色配置
  color: {
    themecolor: "#FFFFFF",
    welcometitlecolor: "#FFFFFF",
    turntablecolor1: "#FFFF00",
    turntablecolor2: "#00FFFF"
  },

  // 背景配置
  brightness: 85,  // 背景亮度
  blur: 5,         // 毛玻璃模糊效果

  // 个人标签
  tags: ['温柔体贴', 'INFP', '冷静沉着', '00后', '巨蟹座'],

  // 音乐播放器配置
  musicPlayer: {
    server: 'netease',
    type: 'playlist',
    id: '2028178887'
  },

  // 社交链接
  socialPlatformIcons: [
    { icon: "mdi-git", link: "https://gitee.com/jun-wan" },
    { icon: "mdi-qqchat", link: "..." },
    { icon: "mdi-email-outline", link: "..." }
  ],

  // 项目卡片
  projectcards: [
    {
      go: "🚀 前往",
      img: "图片URL",
      title: "项目名称",
      subtitle: "项目副标题",
      text: "项目描述",
      url: "项目链接",
      show: false
    }
  ]
}
```

### 壁纸配置

支持三种壁纸类型：
1. **本地静态壁纸** - 放置在 `public/img/wallpaper/static/` 目录
2. **本地动态壁纸** - 放置在 `public/img/wallpaper/dynamic/` 目录
3. **网络壁纸API** - 直接在配置中填写网络URL

### 二次元图片API

项目内置了5个国内可用的二次元图片API，支持自动切换：
- 亦次元API
- 魔法少女API
- 欧克API
- R10086 API
- 备用API

当某个API加载失败时，系统会自动切换到下一个API并重新加载。

## 🎯 核心功能实现

### 音乐播放器
使用 [MetingJS](https://github.com/metowolf/MetingJS) 集成网易云音乐API，支持歌单播放、歌曲切换等功能。

### 极坐标图
基于 [Chart.js](https://www.chartjs.org/) 和 [vue-chartjs](https://vue-chartjs.org/) 实现技能雷达图展示。

### 打字机效果
使用 [TypeIt](https://typeitjs.com/) 实现动态打字机效果，支持多段文字循环展示。

### 响应式设计
使用 Vuetify 的断点系统实现响应式布局，完美适配各种屏幕尺寸。

## 📸 在线预览

[![在线预览](https://tvemixy.fun/)](https://tvemixy.fun/)

访问 [https://tvemixy.fun/](https://tvemixy.fun/) 查看在线演示

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

## 📮 联系方式

- 作者：Susu
- 邮箱：TanNic1314@163.com
- Gitee：https://gitee.com/jun-wan

## ⭐ Star History

如果这个项目对你有帮助，请给个 Star 支持一下！

---

<div align="center">

Made with ❤️ by Susu

</div>