- Updated Vue components in `src/pages/list/index.vue`, `src/pages/settings.vue`, and `src/pages/socket-debugger.vue` for better readability by adjusting indentation and line breaks. - Enhanced the `dataProvider.js` utility to streamline server and local data handling, including the introduction of a sync queue for offline write buffering. - Incremented the local database version in `kvLocalProvider.js` to accommodate new sync queue features. - Added a new `CLAUDE.md` file to provide project overview and development guidelines. - Commented out the Sentry vendor chunk in `vite.config.mjs` for potential future use.
2.9 KiB
CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
Project Overview
Classworks (作业板) is a homework board widget for classroom large screens. It's a Vue 3 + Vuetify 3 PWA with real-time sync via Socket.IO. The UI is in Chinese.
Commands
pnpm install # Install dependencies
pnpm run dev # Dev server at localhost:3031 (network-accessible)
pnpm run build # Production build (auto-runs prebuild to regenerate sound list)
pnpm run preview # Preview production build
pnpm run lint # ESLint with auto-fix
Tech Stack
- Framework: Vue 3 (Composition API + Options API mixed), JavaScript (no TypeScript)
- UI: Vuetify 3 (Material Design 3),
@mdi/fonticons, SCSS - State: Pinia 3
- Routing: Vue Router 4 with file-based routes (
unplugin-vue-router+vite-plugin-vue-layouts) - Build: Vite 5, pnpm
- Real-time: Socket.IO client (singleton in
src/utils/socketClient.js) - Data: Pluggable KV provider abstraction (
src/utils/dataProvider.js) with IndexedDB local and HTTP server backends - PWA:
vite-plugin-pwawith Workbox service worker
Architecture
Data Layer
src/utils/dataProvider.js abstracts data operations. It routes to either:
src/utils/providers/kvLocalProvider.js— IndexedDB viaidbsrc/utils/providers/kvServerProvider.js— HTTP API via axios
Server failover is handled by src/utils/serverRotation.js.
Real-time Layer
src/utils/socketClient.js — Socket.IO singleton with room-based token join/leave for live updates.
Settings Layer
src/utils/settings.js — Comprehensive localStorage-based settings with typed definitions, defaults, and legacy migration. ~600 lines.
UI Layer
File-based routing: each .vue in src/pages/ becomes a route. Layouts in src/layouts/. The main dashboard is src/pages/index.vue (78KB — the core view composing homework grid, time card, noise monitor, random picker, exam schedule, etc.).
Components are organized by feature:
src/components/home/— Home page componentssrc/components/settings/— Settings cardssrc/components/auth/— Authentication flowsrc/components/attendance/— Attendance managementsrc/components/common/— Shared components
Key Utilities
src/axios/axios.js— Axios instance with auth interceptors and rate limit handlingsrc/utils/api.js— API helpers, namespace info, server rotationsrc/utils/visitorId.js— FingerprintJS device identificationsrc/utils/soundList.js— Auto-generated frompublic/sounds/byscripts/generate-sound-list.js(runs asprebuild)
Code Style
- 2-space indent, trim trailing whitespace (
.editorconfig) - Path alias:
@/maps tosrc/(jsconfig.json) - ESLint flat config (ESLint 9) with Vue recommended rules (
eslint.config.js) - Mixed Composition API and Options API usage
- No TypeScript