# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## 项目命令

```sh
npm install         # 安装依赖
npm run dev         # 启动开发服务器（热重载）
npm run build       # 构建生产版本
npm run preview     # 预览生产构建（端口 5050）
```

## 架构

- **Vue 3** 单页应用，使用组合式 API（`<script setup>`）
- **Pinia** 状态管理（`src/stores/`）
- **Vue Router 4** 路由（`src/router/index.js`），懒加载视图
- **Vite** 构建工具，`@` 别名指向 `src/`
- **国际化**：简单的 i18n 实现（`src/i18n/index.js` + `src/composables/useI18n.js`）

## 页面结构

| 路由 | 组件 | 说明 |
|------|------|------|
| `/` | HomeView + PostList | 文章列表 |
| `/post/:id` | PostDetail | 文章详情 |
| `/about` | AboutView | 关于页面 |
| `/cron` | CronView | 定时任务系统 |
| `/settings` | SettingsView | 设置（背景、语言、图标） |

## 核心文件

- `src/App.vue` - 根组件，包含背景层和路由出口
- `src/stores/settings.js` - 用户设置（背景、语言、网站图标、已上传资源库）
- `src/stores/posts.js` - 文章数据
- `src/components/SiteHeader.vue` - 顶部导航栏（国际化的站点名称和导航链接）
- `src/i18n/index.js` - 翻译文本（中英文）

## 设置系统

设置存储在 localStorage `site-settings` 中，包含：
- `bgType`: 'color' | 'image'
- `bgColor`: 背景颜色
- `bgImage`: 背景图片URL（支持base64本地图片）
- `bgOpacity`: 背景透明度 0-1
- `language`: 'zh' | 'en'
- `favicon`: 网站图标（base64）
- `uploadedImages`: 已上传的背景图片库
- `uploadedIcons`: 已上传的图标库

背景通过 `App.vue` 中的固定定位背景层渲染，透明度独立于内容层。

## 定时任务系统

`CronView.vue` 实现简单的定时任务系统：
- Cron表达式格式：`分 时 日 月 周`
- 任务保存在 localStorage `cron-tasks` 中
- 每 10 秒检查一次是否需要执行
- 支持 GET/POST/PUT/PATCH/DELETE 请求
- 使用 `useI18n` composable 实现国际化