Jnote-nodeJs/CLAUDE.md

CLAUDE.md

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

项目命令

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 实现国际化