98 lines
4.7 KiB
Markdown
98 lines
4.7 KiB
Markdown
# Project Specification: LiteRequest (Modern REST API Client)
|
|
|
|
**Role:** You are an expert Full-Stack Developer specializing in Rust, Vue.js, and UI/UX Design.
|
|
**Goal:** Generate a production-ready, visually stunning REST API Client using **Tauri 2.0** and **Vue 3**.
|
|
|
|
## 1. Tech Stack Requirements
|
|
|
|
* **Core Framework:** Tauri 2.0 (Rust)
|
|
* **Frontend:**
|
|
* **Framework:** Vue 3 (Composition API, `<script setup>`, TypeScript).
|
|
* **Styling:** Tailwind CSS (v3 or v4).
|
|
* **Icons:** `lucide-vue-next` (for modern, clean SVG icons).
|
|
* **State Management:** Pinia (for managing request history and reactive state).
|
|
* **Editor:** `codemirror` (or `vue-codemirror`) with JSON language support and a dark theme (e.g., One Dark).
|
|
* **Backend (Rust):**
|
|
* `reqwest` (Async, with `json` features).
|
|
* `serde` & `serde_json`.
|
|
* `tokio` (for async runtime).
|
|
|
|
## 2. UI/UX Design Guidelines (Modern & Aesthetic)
|
|
|
|
The application must look like a professional developer tool (similar to linear.app or Raycast).
|
|
|
|
* **Theme:** **Dark Mode** by default. Use a neutral color palette (e.g., Tailwind's `slate` or `zinc`).
|
|
* *Background:* `bg-slate-950`
|
|
* *Panels/Cards:* `bg-slate-900`
|
|
* *Borders:* `border-slate-800`
|
|
* *Accents:* Use a primary color (e.g., `indigo-500` or `emerald-500`) for active states and primary buttons.
|
|
* **Typography:** Clean sans-serif font (Inter or system font). Small, legible text sizes for data.
|
|
* **Visual Details:**
|
|
* Use **rounded corners** (e.g., `rounded-lg`) for inputs and buttons.
|
|
* Use **subtle transitions** (`transition-all duration-200`) for hover states.
|
|
* Inputs should have no default borders but a subtle ring on focus.
|
|
* Scrollbars should be slim and styled to match the dark theme.
|
|
|
|
## 3. Layout Structure (Two-Column)
|
|
|
|
### A. Sidebar (Left - 250px Fixed Width)
|
|
* **Style:** Darker background (`bg-slate-950`), border-r (`border-slate-800`).
|
|
* **Content:**
|
|
* **Header:** App Title ("LiteRequest") with a modern logo/icon.
|
|
* **Navigation:** Tabs for "History" and "Collections".
|
|
* **History List:** A scrollable list of recent requests.
|
|
* Each item shows the HTTP Method badge (small, colored) and the URL path.
|
|
* *Hover Effect:* Lighten background on hover.
|
|
|
|
### B. Main Workspace (Right - Flexible Width)
|
|
* **Style:** Lighter background (`bg-slate-900`).
|
|
* **Top Bar (Address Bar):**
|
|
* A cohesive container holding the Method Selector and URL Input.
|
|
* **Send Button:** A prominent, high-contrast button (e.g., `bg-indigo-600 hover:bg-indigo-500`) with a "Send" icon.
|
|
* **Request Config (Tabs):**
|
|
* Tabs for: **Params**, **Headers**, **Body**.
|
|
* **Key-Value Inputs:** For Params/Headers, use a dynamic grid where users can add/remove rows.
|
|
* **JSON Editor:** A full-height CodeMirror instance for the Body.
|
|
* **Response Area (Bottom or Split Pane):**
|
|
* **Meta Bar:** Status Code (Green for 2xx, Red for 4xx/5xx), Duration (ms), Size (KB).
|
|
* **Output:** Read-only CodeMirror editor with syntax highlighting for the JSON response.
|
|
|
|
## 4. Functional Requirements
|
|
|
|
### 4.1 Request Logic (Rust Backend)
|
|
Create a Tauri Command `execute_request` that handles the heavy lifting:
|
|
* **Inputs:** `method` (GET/POST/etc), `url`, `headers` (Map), `body` (String/JSON), `query_params` (Map).
|
|
* **Logic:**
|
|
* Construct the request using `reqwest::Client`.
|
|
* Handle timeouts (default 30s).
|
|
* Capture precise timing (start/end).
|
|
* **Outputs:** A struct containing `status`, `headers`, `body` (text), and `time_elapsed`.
|
|
|
|
### 4.2 Frontend Logic
|
|
* **Method Color Coding:**
|
|
* GET: Blue/Sky
|
|
* POST: Green/Emerald
|
|
* PUT: Orange/Amber
|
|
* DELETE: Red/Rose
|
|
* **Persisted History:**
|
|
* Automatically save successful requests to `localStorage` via Pinia.
|
|
* Allow users to click a history item to repopulate the Main Workspace inputs.
|
|
* **Formatting:**
|
|
* Automatically "Pretty Print" (indent) JSON responses in the viewer.
|
|
|
|
## 5. Implementation Roadmap for Generation
|
|
|
|
Please provide the code in the following logical chunks:
|
|
|
|
1. **Rust Backend:** `Cargo.toml` dependencies and the `main.rs` with the `execute_request` command.
|
|
2. **Frontend Setup:** `package.json`, `tailwind.config.js`, and `main.ts`.
|
|
3. **State Store:** `stores/requestStore.ts` (Pinia setup for managing request state and history).
|
|
4. **UI Components (The "Modern" Look):**
|
|
* `MethodBadge.vue` (Reusable component for colored badges).
|
|
* `KeyValueEditor.vue` (For editing Headers/Params).
|
|
* `RequestPanel.vue` (The main input area).
|
|
* `ResponsePanel.vue` (The results display).
|
|
5. **Main Layout:** `App.vue` bringing it all together.
|
|
|
|
---
|
|
**Instruction to AI:** Generate the code based on these modern design principles and functional requirements. Start with Part 1: Rust Backend. |