# home

**Repository Path**: fishfishh/home

## Basic Information

- **Project Name**: home
- **Description**: 主页重构
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://fish.kesug.com
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-20
- **Last Updated**: 2026-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 魚魚の主页

一个简洁美观的个人主页，基于 Vue 3 + Vite 8 构建

## ✨ 功能特性

- [x] 载入动画
- [x] 站点简介
- [x] Hitokoto 一言
- [x] 日期及时间
- [x] 实时天气
- [x] 时光进度条
- [x] 移动端适配

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- pnpm >= 8.0.0

### 安装依赖

```bash
# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn
```

### 开发运行

```bash
pnpm dev
```

访问 http://localhost:3000 查看效果

### 构建生产

```bash
pnpm build
```

构建产物将生成在 `dist` 目录

### 预览构建

```bash
pnpm preview
```

## 📁 项目结构

```
home/
├── public/              # 静态资源
│   ├── font/           # 字体文件
│   └── images/         # 图片资源
├── src/
│   ├── api/            # API 接口
│   ├── assets/         # 资源文件
│   │   ├── siteLinks.json    # 网站链接配置
│   │   └── socialLinks.json  # 社交链接配置
│   ├── components/     # 通用组件
│   ├── composables/    # 组合式函数
│   │   ├── useAnniversary.js   # 纪念日检测
│   │   ├── useBackground.js    # 背景图管理
│   │   ├── useMessage.js       # 消息提示
│   │   ├── useResponsive.js    # 响应式检测
│   │   └── useTime.js          # 时间管理
│   ├── config/         # 配置文件
│   │   └── index.js    # 项目配置
│   ├── services/       # 服务层
│   ├── stores/         # Pinia 状态管理
│   ├── styles/         # 全局样式
│   ├── utils/          # 工具函数
│   ├── views/          # 页面组件
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
├── .env                # 环境变量
├── index.html          # HTML 模板
├── vite.config.js      # Vite 配置
└── package.json        # 项目依赖
```

## ⚙️ 配置说明

### 环境变量

复制 `.env.example` 为 `.env` 并按需修改：

```bash
# 站点名称
VITE_SITE_NAME = "魚魚の主页"
# 站点描述
VITE_SITE_DES = "简单的小主页"
# 站点关键字
VITE_SITE_KEYWORDS = "homepage,个人主页"
# 站点开始运行时间
VITE_SITE_START_DATE = "2024-01-01"

# 高德天气 API Key
VITE_WEATHER_KEY = "your_api_key"
```

### 配置文件

主要配置在 `src/config/index.js` 中：

```javascript
export const SITE = {
  name: env.VITE_SITE_NAME || "魚魚の主页",
  // ...
};
```

### 网站链接

编辑 `src/assets/siteLinks.json` 自定义网站链接：

```json
[
  {
    "icon": "Blog",
    "name": "博客",
    "link": "https://blog.example.com/"
  }
]
```

### 社交链接

编辑 `src/assets/socialLinks.json` 自定义社交链接。

## 🌤️ 天气配置

天气功能需要高德开放平台 API：

1. 前往 [高德开放平台控制台](https://console.amap.com/dev/index)
2. 创建一个 `Web 服务` 类型的 `Key`
3. 将 `Key` 填入 `.env` 中的 `VITE_WEATHER_KEY`

## 🎨 自定义样式

### 网站背景

在 `public/images` 中修改网站背景，图片命名格式为 `background{数字}.{格式}`。

### 网站图标

在 `public/images/icon` 中修改网站图标。

## 📦 技术栈

- [Vue 3](https://cn.vuejs.org/) - 渐进式 JavaScript 框架
- [Vite 8](https://vitejs.dev/) - 下一代前端构建工具
- [Pinia](https://pinia.vuejs.org/zh/) - 新一代状态管理
- [Element Plus](https://element-plus.org/) - Vue 3 组件库
- [IconPark](https://iconpark.oceanengine.com/official) - 图标库
- [xicons](https://xicons.org/) - 图标组件库
- [Swiper](https://swiperjs.com/) - 轮播图组件

## 🔗 API 来源

- [Hitokoto 一言](https://hitokoto.cn/)
- [韩小韩 WebAPI 接口](https://api.vvhan.com/)
- [教书先生 API](https://api.oioweb.cn/doc/weather/GetWeather)
- [高德开放平台](https://lbs.amap.com/)

## 📝 开发说明

### Composables 模块

项目采用 Vue 3 组合式函数封装常用逻辑：

- `useBackground` - 背景图加载和切换
- `useTime` - 时间获取、问候语、时光进度
- `useAnniversary` - 特殊纪念日检测
- `useResponsive` - 响应式断点判断
- `useMessage` - 消息提示封装

### 状态管理

使用 Pinia 进行状态管理，核心状态在 `src/stores/index.js`。

## 📄 许可证

本项目仅供学习和参考使用。

---

**注意**：本项目已移除音乐播放器相关功能，进行了瘦身优化。