# vue-time-trae

**Repository Path**: wang_xi_yu/vue-time-trae

## Basic Information

- **Project Name**: vue-time-trae
- **Description**: Vue Time 是一个基于 Vue 3 开发的多功能时钟应用，集成了本地时间显示、世界时钟、农历黄历、实时天气查询及主题切换功能，提供美观且可定制的界面体验。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-21
- **Last Updated**: 2025-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Time - 多功能时钟应用（用ai一键生成的）
![输入图片说明](d/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250621154650_110.png)
## 项目简介
Vue Time 是一个基于 Vue 3 开发的多功能时钟应用，集成了本地时间显示、世界时钟、农历黄历、实时天气查询及主题切换功能，提供美观且可定制的界面体验。

## 核心功能
- **本地时间显示**：高精度实时时钟（时/分/秒），支持呼吸动画和渐变文字效果。
- **世界时钟**：展示北京、纽约、伦敦、东京等4个城市的实时时间，采用响应式Grid布局。
- **农历黄历**：显示农历日期及完整黄历信息（可点击展开/收起）。
- **天气查询**：展示实时天气状态、温度、湿度、风速、气压等5项天气指标（双卡片布局）。
- **主题切换**：支持10套预设主题（不同主色+壁纸），支持动态切换。

## 技术栈
- 前端框架：Vue 3.5.13（Composition API + `<script setup>`）
- 时间处理：Luxon（世界时钟时区转换）、lunar-javascript（农历计算）
- 网络请求：Axios（天气API调用）
- 样式方案：CSS变量（主题色）、Flex/Grid布局、毛玻璃效果（backdrop-filter）
- 开发工具：Trae IDE（世界最佳IDE）、Doubao 1.5-Tinking-Pro（智能编码助手）

## 安装与运行
1. 克隆项目：
   ```bash
   git clone https://github.com/your-username/vue-time.git
   cd vue-time
   ```
2. 安装依赖（需Node.js 16+）：
   ```bash
   npm install
   ```
3. 启动开发服务器：
   ```bash
   npm run dev
   ```
4. 访问预览：打开浏览器访问 `http://localhost:5173`

## 功能配置
### 主题扩展
在 `src/components/ClockDisplay.vue` 的 `themes` 数组中添加新主题对象即可扩展主题：
```javascript
{ id: 11, color: '#新颜色值', wallpaper: '新壁纸路径' }
```

### 世界时钟城市修改
修改 `worldCities` 数组中的城市名称和时区（IANA时区格式）即可调整显示城市：
```javascript
worldCities.value = [
  { name: '巴黎', zone: 'Europe/Paris' }, // 示例修改
  // ...其他城市
]
```

## 天气API说明
当前使用 [Open-Meteo](https://open-meteo.com/) 免费天气API，需注意：
- 接口限制：免费套餐有调用频率限制（建议生产环境替换为付费API）。
- 数据字段：当前获取 `weathercode`（天气状态）、`temperature`（温度）、`relative_humidity_2m`（湿度）等字段。

## 贡献与反馈
欢迎提交Issue或Pull Request！如有功能建议或Bug反馈，请通过GitHub Issues联系。

---
**版本**：v1.0.0
**最后更新**：2024-07-15