40 lines
2.3 KiB
Markdown
40 lines
2.3 KiB
Markdown
o# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
Tunji is a Markdown editor desktop app inspired by Typora, built with Electron + Vue 3. The UI is in Chinese (Simplified). The app is in early development — all data is mock/hardcoded with no persistence layer yet.
|
|
|
|
## Commands
|
|
|
|
- `npm run dev` — Start development with hot reload (electron-vite dev)
|
|
- `npm run build` — Production build to `out/`
|
|
- `npm run preview` — Preview production build
|
|
- `npm run package` — Package with electron-builder
|
|
|
|
No test framework is installed.
|
|
|
|
## Architecture
|
|
|
|
This is an **electron-vite** project with three build targets configured in `electron.vite.config.mjs`:
|
|
|
|
- **Main process** (`src/main/index.js`) — BrowserWindow creation, IPC for theme sync, titleBarOverlay color management
|
|
- **Preload** (`src/main/indexpreload.js`) — Exposes `window.electronAPI` (platform, setTheme) via contextBridge
|
|
- **Renderer** (`src/renderer/`) — Vue 3 SPA, path alias `@` → `src/renderer/src`
|
|
|
|
### Key Tech Decisions
|
|
|
|
- **Tailwind CSS v4** — uses `@tailwindcss/vite` plugin and `@theme` directive syntax (not `tailwind.config.js`)
|
|
- **PrimeVue** — component library with Aura theme preset; dark mode selector is `.dark`
|
|
- **Icons** — use `@lucide/vue` for all icons, not PrimeVue's built-in icon components
|
|
- **Theme system** — `composables/useTheme.js` manages light/dark/system modes, persisted to localStorage (`tunji-theme`), synced to Electron main process via IPC for titleBarOverlay colors. Dark palette is Catppuccin Mocha-inspired.
|
|
- **Markdown rendering** — unified/remark-parse/remark-gfm/remark-rehype/rehype-stringify pipeline in EditorPanel.vue
|
|
|
|
### Component Layout
|
|
|
|
`App.vue` orchestrates three panels: `SideBar` (navigation, search, notebooks, tags, theme toggle) → `NotesOverview` (card/list grid of notes) → `EditorPanel` (markdown editor with edit/preview/split modes, formatting toolbar, auto-generated outline from headings). `ButtonIcon.vue` is a shared icon button component.
|
|
|
|
### Styling
|
|
|
|
Custom CSS properties are defined in `src/renderer/src/assets/styles/main.css` using Tailwind v4's `@theme` syntax for primary (indigo), neutral, semantic, and app-level colors. Light and dark mode palettes are both defined there. |