tunji/CLAUDE.md

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.