LeetCode Layout Workbench

English | 简体中文

An interactive layout lab built with Vue 3 + Vite that mirrors and extends the LeetCode editor’s multi-panel experience. It supports grouped headers, drag-and-drop reordering, panel splitting, preset layout switching, and resizable panes—useful for online coding UIs or any multi-pane interface.

Highlights

• Layout presets: switch between Leet, Classic, Compact, and Wide with preview cards that reflect the panel distribution.
• Grouped panels: headers for problem details, code, and tests are configurable with active-state highlighting.
• Drag and split: powered by @vue-dnd-kit for header sorting, cross-panel moves, and quadrant/center drops that spawn new groups.
• Resizable panes: custom ResizablePanelGroup supports horizontal/vertical splits, draggable sizing, and auto-hides empty branches.
• Centralized state: pinia manages the layout tree, groups, and active state so preset switches stay predictable.
• Tailwind CSS v4: inline theme tokens for quick background, radius, and divider tuning.

Tech Stack

• Vue 3 + TypeScript
• Vite 7
• Pinia + Vue Router
• @vue-dnd-kit for drag-and-drop (core lib: https://github.com/ZiZIGY/vue-dnd-kit)
• Tailwind CSS 4 + tw-animate-css
• Lucide icons

Getting Started

Prerequisites: Node.js 20.19+ (or 22.12+). pnpm is recommended.

pnpm install          # install deps
pnpm run dev          # start dev server
pnpm run build        # type-check and build
pnpm run preview      # preview the build output
pnpm run lint         # ESLint with --fix --cache
pnpm run format       # Prettier format under src/

Project Tour

• src/main.ts: app entry; registers Pinia, Vue Router, and DnD plugin.
• src/pages/LayoutWorkbench.vue: layout workbench page; defines four presets and boots the store.
• src/stores/headerStore.ts: core state for layout tree, groups, active state, and cross-group drag/split logic.
• src/features/layout/:
  • headers/: top toolbar (navigation, run/submit buttons, layout selector).
  • tree/: recursive layout tree with resizable nodes.
  • panels/: panel shell, header tabs, content placeholder, and drag overlay.
• src/components/ui/: shared UI (buttons, separators, dropdowns, hover cards, resizable).
• src/style.css: Tailwind v4 theme tokens and base styles.

Core Concepts

• Layout nodes: LayoutNode supports container/leaf; containers split horizontally/vertically, leaves bind a group and default size.
• Groups and headers: HeaderGroup holds headers (title + icon + color); supports intra-group sorting, cross-group moves, and split-creates-new-group flows.
• Split rules: dropping a header onto another panel’s edges/center triggers a split, creating a new group/layout leaf and activating it.
• Visibility: empty groups are hidden; containers with no visible children are skipped to keep the layout tight.

Development Notes

• Adding a preset: implement getXxxLayoutConfig in LayoutWorkbench.vue and register it in the switch.
• Persistence: hook into headerStore mutations to sync with local storage or an API if needed.
• UI tuning: adjust theme variables in src/style.css for color/radius/dividers.