first functionable
This commit is contained in:
Julian Freeman
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
7
.vscode/extensions.json
vendored
Normal file
7
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"Vue.volar",
|
||||||
|
"tauri-apps.tauri-vscode",
|
||||||
|
"rust-lang.rust-analyzer"
|
||||||
|
]
|
||||||
|
}
|
||||||
7
README.md
Normal file
7
README.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
# Tauri + Vue + TypeScript
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
|
||||||
14
index.html
Normal file
14
index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Tauri + Vue + Typescript App</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
package.json
Normal file
36
package.json
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"name": "rest-client",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc --noEmit && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"tauri": "tauri"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@codemirror/lang-json": "^6.0.2",
|
||||||
|
"@codemirror/theme-one-dark": "^6.1.3",
|
||||||
|
"@codemirror/view": "^6.38.8",
|
||||||
|
"@tauri-apps/api": "^2",
|
||||||
|
"@tauri-apps/plugin-opener": "^2",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"lucide-vue-next": "^0.555.0",
|
||||||
|
"pinia": "^3.0.4",
|
||||||
|
"tailwind-merge": "^3.4.0",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"vue-codemirror": "^6.1.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tauri-apps/cli": "^2",
|
||||||
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"autoprefixer": "^10.4.22",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^3.4.18",
|
||||||
|
"typescript": "~5.6.2",
|
||||||
|
"vite": "^6.0.3",
|
||||||
|
"vue-tsc": "^2.1.10"
|
||||||
|
},
|
||||||
|
"packageManager": "pnpm@10.22.0+sha512.bf049efe995b28f527fd2b41ae0474ce29186f7edcb3bf545087bd61fbbebb2bf75362d1307fda09c2d288e1e499787ac12d4fcb617a974718a6051f2eee741c"
|
||||||
|
}
|
||||||
1957
pnpm-lock.yaml
generated
Normal file
1957
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
6
public/tauri.svg
Normal file
6
public/tauri.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<svg width="206" height="231" viewBox="0 0 206 231" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M143.143 84C143.143 96.1503 133.293 106 121.143 106C108.992 106 99.1426 96.1503 99.1426 84C99.1426 71.8497 108.992 62 121.143 62C133.293 62 143.143 71.8497 143.143 84Z" fill="#FFC131"/>
|
||||||
|
<ellipse cx="84.1426" cy="147" rx="22" ry="22" transform="rotate(180 84.1426 147)" fill="#24C8DB"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M166.738 154.548C157.86 160.286 148.023 164.269 137.757 166.341C139.858 160.282 141 153.774 141 147C141 144.543 140.85 142.121 140.558 139.743C144.975 138.204 149.215 136.139 153.183 133.575C162.73 127.404 170.292 118.608 174.961 108.244C179.63 97.8797 181.207 86.3876 179.502 75.1487C177.798 63.9098 172.884 53.4021 165.352 44.8883C157.82 36.3744 147.99 30.2165 137.042 27.1546C126.095 24.0926 114.496 24.2568 103.64 27.6274C92.7839 30.998 83.1319 37.4317 75.8437 46.1553C74.9102 47.2727 74.0206 48.4216 73.176 49.5993C61.9292 50.8488 51.0363 54.0318 40.9629 58.9556C44.2417 48.4586 49.5653 38.6591 56.679 30.1442C67.0505 17.7298 80.7861 8.57426 96.2354 3.77762C111.685 -1.01901 128.19 -1.25267 143.769 3.10474C159.348 7.46215 173.337 16.2252 184.056 28.3411C194.775 40.457 201.767 55.4101 204.193 71.404C206.619 87.3978 204.374 103.752 197.73 118.501C191.086 133.25 180.324 145.767 166.738 154.548ZM41.9631 74.275L62.5557 76.8042C63.0459 72.813 63.9401 68.9018 65.2138 65.1274C57.0465 67.0016 49.2088 70.087 41.9631 74.275Z" fill="#FFC131"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4045 76.4519C47.3493 70.6709 57.2677 66.6712 67.6171 64.6132C65.2774 70.9669 64 77.8343 64 85.0001C64 87.1434 64.1143 89.26 64.3371 91.3442C60.0093 92.8732 55.8533 94.9092 51.9599 97.4256C42.4128 103.596 34.8505 112.392 30.1816 122.756C25.5126 133.12 23.9357 144.612 25.6403 155.851C27.3449 167.09 32.2584 177.598 39.7906 186.112C47.3227 194.626 57.153 200.784 68.1003 203.846C79.0476 206.907 90.6462 206.743 101.502 203.373C112.359 200.002 122.011 193.568 129.299 184.845C130.237 183.722 131.131 182.567 131.979 181.383C143.235 180.114 154.132 176.91 164.205 171.962C160.929 182.49 155.596 192.319 148.464 200.856C138.092 213.27 124.357 222.426 108.907 227.222C93.458 232.019 76.9524 232.253 61.3736 227.895C45.7948 223.538 31.8055 214.775 21.0867 202.659C10.3679 190.543 3.37557 175.59 0.949823 159.596C-1.47592 143.602 0.768139 127.248 7.41237 112.499C14.0566 97.7497 24.8183 85.2327 38.4045 76.4519ZM163.062 156.711L163.062 156.711C162.954 156.773 162.846 156.835 162.738 156.897C162.846 156.835 162.954 156.773 163.062 156.711Z" fill="#24C8DB"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
98
spec/rest-client-doc.md
Normal file
98
spec/rest-client-doc.md
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
# 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.
|
||||||
7
src-tauri/.gitignore
vendored
Normal file
7
src-tauri/.gitignore
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
# Generated by Cargo
|
||||||
|
# will have compiled files and executables
|
||||||
|
/target/
|
||||||
|
|
||||||
|
# Generated by Tauri
|
||||||
|
# will have schema files for capabilities auto-completion
|
||||||
|
/gen/schemas
|
||||||
5577
src-tauri/Cargo.lock
generated
Normal file
5577
src-tauri/Cargo.lock
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
src-tauri/Cargo.toml
Normal file
27
src-tauri/Cargo.toml
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
[package]
|
||||||
|
name = "rest-client"
|
||||||
|
version = "0.1.0"
|
||||||
|
description = "A Tauri App"
|
||||||
|
authors = ["you"]
|
||||||
|
edition = "2021"
|
||||||
|
|
||||||
|
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||||
|
|
||||||
|
[lib]
|
||||||
|
# The `_lib` suffix may seem redundant but it is necessary
|
||||||
|
# to make the lib name unique and wouldn't conflict with the bin name.
|
||||||
|
# This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
|
||||||
|
name = "rest_client_lib"
|
||||||
|
crate-type = ["staticlib", "cdylib", "rlib"]
|
||||||
|
|
||||||
|
[build-dependencies]
|
||||||
|
tauri-build = { version = "2", features = [] }
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
tauri = { version = "2", features = [] }
|
||||||
|
tauri-plugin-opener = "2"
|
||||||
|
serde = { version = "1", features = ["derive"] }
|
||||||
|
serde_json = "1"
|
||||||
|
reqwest = { version = "0.12", features = ["json", "multipart"] }
|
||||||
|
tokio = { version = "1", features = ["full"] }
|
||||||
|
|
||||||
3
src-tauri/build.rs
Normal file
3
src-tauri/build.rs
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
fn main() {
|
||||||
|
tauri_build::build()
|
||||||
|
}
|
||||||
10
src-tauri/capabilities/default.json
Normal file
10
src-tauri/capabilities/default.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"$schema": "../gen/schemas/desktop-schema.json",
|
||||||
|
"identifier": "default",
|
||||||
|
"description": "Capability for the main window",
|
||||||
|
"windows": ["main"],
|
||||||
|
"permissions": [
|
||||||
|
"core:default",
|
||||||
|
"opener:default"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
src-tauri/icons/128x128.png
Normal file
BIN
src-tauri/icons/128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src-tauri/icons/128x128@2x.png
Normal file
BIN
src-tauri/icons/128x128@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
src-tauri/icons/32x32.png
Normal file
BIN
src-tauri/icons/32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 974 B |
BIN
src-tauri/icons/Square107x107Logo.png
Normal file
BIN
src-tauri/icons/Square107x107Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src-tauri/icons/Square142x142Logo.png
Normal file
BIN
src-tauri/icons/Square142x142Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src-tauri/icons/Square150x150Logo.png
Normal file
BIN
src-tauri/icons/Square150x150Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
src-tauri/icons/Square284x284Logo.png
Normal file
BIN
src-tauri/icons/Square284x284Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
src-tauri/icons/Square30x30Logo.png
Normal file
BIN
src-tauri/icons/Square30x30Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 903 B |
BIN
src-tauri/icons/Square310x310Logo.png
Normal file
BIN
src-tauri/icons/Square310x310Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
src-tauri/icons/Square44x44Logo.png
Normal file
BIN
src-tauri/icons/Square44x44Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src-tauri/icons/Square71x71Logo.png
Normal file
BIN
src-tauri/icons/Square71x71Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src-tauri/icons/Square89x89Logo.png
Normal file
BIN
src-tauri/icons/Square89x89Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src-tauri/icons/StoreLogo.png
Normal file
BIN
src-tauri/icons/StoreLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src-tauri/icons/icon.icns
Normal file
BIN
src-tauri/icons/icon.icns
Normal file
Binary file not shown.
BIN
src-tauri/icons/icon.ico
Normal file
BIN
src-tauri/icons/icon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
src-tauri/icons/icon.png
Normal file
BIN
src-tauri/icons/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
85
src-tauri/src/lib.rs
Normal file
85
src-tauri/src/lib.rs
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
use std::collections::HashMap;
|
||||||
|
use std::time::Instant;
|
||||||
|
use serde::{Serialize, Deserialize};
|
||||||
|
|
||||||
|
#[derive(Serialize, Deserialize)]
|
||||||
|
struct HttpResponse {
|
||||||
|
status: u16,
|
||||||
|
headers: HashMap<String, String>,
|
||||||
|
body: String,
|
||||||
|
time_elapsed: u128, // milliseconds
|
||||||
|
}
|
||||||
|
|
||||||
|
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||||
|
#[tauri::command]
|
||||||
|
fn greet(name: &str) -> String {
|
||||||
|
format!("Hello, {}! You've been greeted from Rust!", name)
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
async fn execute_request(
|
||||||
|
method: String,
|
||||||
|
url: String,
|
||||||
|
headers: HashMap<String, String>,
|
||||||
|
body: Option<String>,
|
||||||
|
query_params: Option<HashMap<String, String>>,
|
||||||
|
) -> Result<HttpResponse, String> {
|
||||||
|
let client = reqwest::Client::builder()
|
||||||
|
.timeout(std::time::Duration::from_secs(30))
|
||||||
|
.build()
|
||||||
|
.map_err(|e| e.to_string())?;
|
||||||
|
|
||||||
|
let req_method = method.parse::<reqwest::Method>().map_err(|e| e.to_string())?;
|
||||||
|
|
||||||
|
let mut request_builder = client.request(req_method, &url);
|
||||||
|
|
||||||
|
// Add Query Params
|
||||||
|
if let Some(params) = query_params {
|
||||||
|
request_builder = request_builder.query(¶ms);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add Headers
|
||||||
|
for (key, value) in headers {
|
||||||
|
request_builder = request_builder.header(key, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add Body
|
||||||
|
if let Some(b) = body {
|
||||||
|
if !b.is_empty() {
|
||||||
|
request_builder = request_builder.body(b);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let start_time = Instant::now();
|
||||||
|
// Execute request
|
||||||
|
let response = request_builder.send().await.map_err(|e| e.to_string())?;
|
||||||
|
let time_elapsed = start_time.elapsed().as_millis();
|
||||||
|
|
||||||
|
let status = response.status().as_u16();
|
||||||
|
|
||||||
|
let mut response_headers = HashMap::new();
|
||||||
|
for (key, value) in response.headers() {
|
||||||
|
// Handle header value to string conversion (skipping non-utf8 for simplicity or lossy conv)
|
||||||
|
let val_str = value.to_str().unwrap_or("").to_string();
|
||||||
|
// Capitalize or keep standard key format? keeping standard.
|
||||||
|
response_headers.insert(key.to_string(), val_str);
|
||||||
|
}
|
||||||
|
|
||||||
|
let body_text = response.text().await.map_err(|e| e.to_string())?;
|
||||||
|
|
||||||
|
Ok(HttpResponse {
|
||||||
|
status,
|
||||||
|
headers: response_headers,
|
||||||
|
body: body_text,
|
||||||
|
time_elapsed,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
#[cfg_attr(mobile, tauri::mobile_entry_point)]
|
||||||
|
pub fn run() {
|
||||||
|
tauri::Builder::default()
|
||||||
|
.plugin(tauri_plugin_opener::init())
|
||||||
|
.invoke_handler(tauri::generate_handler![greet, execute_request])
|
||||||
|
.run(tauri::generate_context!())
|
||||||
|
.expect("error while running tauri application");
|
||||||
|
}
|
||||||
6
src-tauri/src/main.rs
Normal file
6
src-tauri/src/main.rs
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
// Prevents additional console window on Windows in release, DO NOT REMOVE!!
|
||||||
|
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
rest_client_lib::run()
|
||||||
|
}
|
||||||
35
src-tauri/tauri.conf.json
Normal file
35
src-tauri/tauri.conf.json
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://schema.tauri.app/config/2",
|
||||||
|
"productName": "rest-client",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"identifier": "top.volan.rest-client",
|
||||||
|
"build": {
|
||||||
|
"beforeDevCommand": "pnpm dev",
|
||||||
|
"devUrl": "http://localhost:1420",
|
||||||
|
"beforeBuildCommand": "pnpm build",
|
||||||
|
"frontendDist": "../dist"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"windows": [
|
||||||
|
{
|
||||||
|
"title": "rest-client",
|
||||||
|
"width": 800,
|
||||||
|
"height": 600
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"security": {
|
||||||
|
"csp": null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bundle": {
|
||||||
|
"active": true,
|
||||||
|
"targets": "all",
|
||||||
|
"icon": [
|
||||||
|
"icons/32x32.png",
|
||||||
|
"icons/128x128.png",
|
||||||
|
"icons/128x128@2x.png",
|
||||||
|
"icons/icon.icns",
|
||||||
|
"icons/icon.ico"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
67
src/App.vue
Normal file
67
src/App.vue
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useRequestStore } from './stores/requestStore';
|
||||||
|
import RequestPanel from './components/RequestPanel.vue';
|
||||||
|
import ResponsePanel from './components/ResponsePanel.vue';
|
||||||
|
import MethodBadge from './components/MethodBadge.vue';
|
||||||
|
import { History, Layers, Zap } from 'lucide-vue-next';
|
||||||
|
|
||||||
|
const store = useRequestStore();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex h-screen w-full bg-slate-950 text-slate-200 font-sans overflow-hidden">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="w-64 flex-shrink-0 border-r border-slate-800 flex flex-col bg-slate-950">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="h-14 flex items-center px-4 border-b border-slate-800 gap-2">
|
||||||
|
<div class="bg-indigo-500/20 p-1.5 rounded-lg">
|
||||||
|
<Zap class="w-5 h-5 text-indigo-400" />
|
||||||
|
</div>
|
||||||
|
<span class="font-bold text-slate-100 tracking-tight">LiteRequest</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nav Tabs -->
|
||||||
|
<div class="flex p-2 gap-1">
|
||||||
|
<button class="flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-medium bg-slate-900 text-slate-200 rounded border border-slate-800 shadow-sm">
|
||||||
|
<History class="w-3.5 h-3.5" /> History
|
||||||
|
</button>
|
||||||
|
<button class="flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-medium text-slate-500 hover:bg-slate-900 hover:text-slate-300 rounded transition-colors">
|
||||||
|
<Layers class="w-3.5 h-3.5" /> Collections
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- History List -->
|
||||||
|
<div class="flex-1 overflow-y-auto">
|
||||||
|
<div v-if="store.history.length === 0" class="p-8 text-center text-slate-600 text-xs">
|
||||||
|
No history yet. Make a request!
|
||||||
|
</div>
|
||||||
|
<div v-else class="flex flex-col">
|
||||||
|
<button
|
||||||
|
v-for="item in store.history"
|
||||||
|
:key="item.timestamp"
|
||||||
|
@click="store.loadRequest(item)"
|
||||||
|
class="text-left px-3 py-3 border-b border-slate-800/50 hover:bg-slate-900 transition-colors group flex flex-col gap-1.5"
|
||||||
|
>
|
||||||
|
<div class="flex items-center gap-2 overflow-hidden w-full">
|
||||||
|
<MethodBadge :method="item.method" />
|
||||||
|
<span class="text-xs text-slate-400 truncate font-mono opacity-75">{{ new Date(item.timestamp).toLocaleTimeString() }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-slate-300 truncate px-1 font-medium" :title="item.url">
|
||||||
|
{{ item.url || 'No URL' }}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Workspace -->
|
||||||
|
<main class="flex-1 flex flex-col min-w-0 bg-slate-900">
|
||||||
|
<div class="flex-1 min-h-0">
|
||||||
|
<RequestPanel />
|
||||||
|
</div>
|
||||||
|
<div class="h-1/2 border-t border-slate-800 min-h-0">
|
||||||
|
<ResponsePanel />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
91
src/components/KeyValueEditor.vue
Normal file
91
src/components/KeyValueEditor.vue
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Trash2, Plus } from 'lucide-vue-next';
|
||||||
|
import type { KeyValue } from '../stores/requestStore';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
modelValue: KeyValue[];
|
||||||
|
title?: string;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
|
const addRow = () => {
|
||||||
|
const newData = [...props.modelValue, {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
key: '',
|
||||||
|
value: '',
|
||||||
|
enabled: true
|
||||||
|
}];
|
||||||
|
emit('update:modelValue', newData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeRow = (index: number) => {
|
||||||
|
const newData = [...props.modelValue];
|
||||||
|
newData.splice(index, 1);
|
||||||
|
emit('update:modelValue', newData);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col h-full">
|
||||||
|
<div class="flex-1 overflow-y-auto p-4">
|
||||||
|
<table class="w-full text-left border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr class="text-xs text-slate-500 border-b border-slate-800">
|
||||||
|
<th class="pb-2 pl-2 font-medium w-8"></th>
|
||||||
|
<th class="pb-2 font-medium w-1/3">Key</th>
|
||||||
|
<th class="pb-2 font-medium">Value</th>
|
||||||
|
<th class="pb-2 w-8"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="(item, index) in modelValue"
|
||||||
|
:key="item.id"
|
||||||
|
class="group"
|
||||||
|
>
|
||||||
|
<td class="py-1 pl-2 align-middle">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
v-model="item.enabled"
|
||||||
|
class="rounded bg-slate-800 border-slate-700 text-indigo-500 focus:ring-indigo-500/50 focus:ring-offset-0"
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
<td class="py-1 pr-2 align-middle">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
v-model="item.key"
|
||||||
|
placeholder="Key"
|
||||||
|
class="w-full bg-transparent border-b border-transparent hover:border-slate-700 focus:border-indigo-500 focus:outline-none py-1 px-1 text-sm text-slate-300 transition-colors"
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
<td class="py-1 pr-2 align-middle">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
v-model="item.value"
|
||||||
|
placeholder="Value"
|
||||||
|
class="w-full bg-transparent border-b border-transparent hover:border-slate-700 focus:border-indigo-500 focus:outline-none py-1 px-1 text-sm text-slate-300 transition-colors"
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
<td class="py-1 align-middle text-right">
|
||||||
|
<button
|
||||||
|
@click="removeRow(index)"
|
||||||
|
class="p-1 text-slate-600 hover:text-rose-400 opacity-0 group-hover:opacity-100 transition-all"
|
||||||
|
title="Remove"
|
||||||
|
>
|
||||||
|
<Trash2 class="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="addRow"
|
||||||
|
class="mt-2 flex items-center text-xs text-slate-500 hover:text-indigo-400 transition-colors px-2 py-1"
|
||||||
|
>
|
||||||
|
<Plus class="w-3 h-3 mr-1" /> Add Item
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
27
src/components/MethodBadge.vue
Normal file
27
src/components/MethodBadge.vue
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
method: string;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const colors = computed(() => {
|
||||||
|
switch (props.method.toUpperCase()) {
|
||||||
|
case 'GET': return 'bg-sky-500/20 text-sky-400 border-sky-500/30';
|
||||||
|
case 'POST': return 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30';
|
||||||
|
case 'PUT': return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
|
||||||
|
case 'DELETE': return 'bg-rose-500/20 text-rose-400 border-rose-500/30';
|
||||||
|
case 'PATCH': return 'bg-violet-500/20 text-violet-400 border-violet-500/30';
|
||||||
|
default: return 'bg-slate-500/20 text-slate-400 border-slate-500/30';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span
|
||||||
|
class="px-2 py-0.5 text-xs font-bold rounded border backdrop-blur-sm uppercase tracking-wider select-none"
|
||||||
|
:class="colors"
|
||||||
|
>
|
||||||
|
{{ method }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
133
src/components/RequestPanel.vue
Normal file
133
src/components/RequestPanel.vue
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useRequestStore } from '../stores/requestStore';
|
||||||
|
import KeyValueEditor from './KeyValueEditor.vue';
|
||||||
|
import { invoke } from '@tauri-apps/api/core';
|
||||||
|
import { Codemirror } from 'vue-codemirror';
|
||||||
|
import { json } from '@codemirror/lang-json';
|
||||||
|
import { oneDark } from '@codemirror/theme-one-dark';
|
||||||
|
import { Play, Loader2 } from 'lucide-vue-next';
|
||||||
|
|
||||||
|
const store = useRequestStore();
|
||||||
|
const activeTab = ref('params');
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
|
const extensions = [json(), oneDark];
|
||||||
|
|
||||||
|
const methods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'];
|
||||||
|
|
||||||
|
const executeRequest = async () => {
|
||||||
|
if (!store.activeRequest.url) return;
|
||||||
|
|
||||||
|
isLoading.value = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Prepare headers and params map
|
||||||
|
const headers: Record<string, string> = {};
|
||||||
|
store.activeRequest.headers.filter(h => h.enabled && h.key).forEach(h => headers[h.key] = h.value);
|
||||||
|
|
||||||
|
const params: Record<string, string> = {};
|
||||||
|
store.activeRequest.params.filter(p => p.enabled && p.key).forEach(p => params[p.key] = p.value);
|
||||||
|
|
||||||
|
// Execute
|
||||||
|
const response: any = await invoke('execute_request', {
|
||||||
|
method: store.activeRequest.method,
|
||||||
|
url: store.activeRequest.url,
|
||||||
|
headers,
|
||||||
|
body: store.activeRequest.body || null,
|
||||||
|
queryParams: params,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update Store
|
||||||
|
store.activeRequest.response = {
|
||||||
|
status: response.status,
|
||||||
|
headers: response.headers,
|
||||||
|
body: response.body,
|
||||||
|
time: response.time_elapsed,
|
||||||
|
size: new Blob([response.body]).size
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add to history if successful
|
||||||
|
store.addToHistory(store.activeRequest);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
// Simple alert for now, or could use a toast
|
||||||
|
alert('Request Failed: ' + error);
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col h-full bg-slate-900">
|
||||||
|
<!-- Top Bar -->
|
||||||
|
<div class="p-4 border-b border-slate-800 flex gap-2 items-center">
|
||||||
|
<div class="flex-1 flex items-center bg-slate-950 rounded-lg border border-slate-800 focus-within:border-indigo-500/50 focus-within:ring-1 focus-within:ring-indigo-500/50 transition-all overflow-hidden">
|
||||||
|
<select
|
||||||
|
v-model="store.activeRequest.method"
|
||||||
|
class="bg-transparent text-xs font-bold px-3 py-2 text-slate-300 border-r border-slate-800 focus:outline-none hover:bg-slate-900 cursor-pointer uppercase appearance-none"
|
||||||
|
>
|
||||||
|
<option v-for="m in methods" :key="m" :value="m">{{ m }}</option>
|
||||||
|
</select>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
v-model="store.activeRequest.url"
|
||||||
|
placeholder="https://api.example.com/v1/users"
|
||||||
|
class="flex-1 bg-transparent border-none focus:ring-0 text-sm text-slate-200 px-3 py-2 placeholder-slate-600"
|
||||||
|
@keydown.enter="executeRequest"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
@click="executeRequest"
|
||||||
|
:disabled="isLoading"
|
||||||
|
class="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2 rounded-lg font-medium text-sm flex items-center gap-2 transition-all shadow-lg shadow-indigo-900/20"
|
||||||
|
>
|
||||||
|
<Loader2 v-if="isLoading" class="w-4 h-4 animate-spin" />
|
||||||
|
<Play v-else class="w-4 h-4 fill-current" />
|
||||||
|
Send
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Configuration Tabs -->
|
||||||
|
<div class="flex border-b border-slate-800">
|
||||||
|
<button
|
||||||
|
v-for="tab in ['params', 'headers', 'body']"
|
||||||
|
:key="tab"
|
||||||
|
@click="activeTab = tab"
|
||||||
|
class="px-4 py-2 text-xs font-medium uppercase tracking-wide border-b-2 transition-colors"
|
||||||
|
:class="activeTab === tab ? 'border-indigo-500 text-indigo-400 bg-indigo-500/5' : 'border-transparent text-slate-500 hover:text-slate-300 hover:bg-slate-800/50'"
|
||||||
|
>
|
||||||
|
{{ tab }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content Area -->
|
||||||
|
<div class="flex-1 overflow-hidden relative">
|
||||||
|
<KeepAlive>
|
||||||
|
<KeyValueEditor
|
||||||
|
v-if="activeTab === 'params'"
|
||||||
|
v-model="store.activeRequest.params"
|
||||||
|
/>
|
||||||
|
</KeepAlive>
|
||||||
|
<KeepAlive>
|
||||||
|
<KeyValueEditor
|
||||||
|
v-if="activeTab === 'headers'"
|
||||||
|
v-model="store.activeRequest.headers"
|
||||||
|
/>
|
||||||
|
</KeepAlive>
|
||||||
|
<div v-if="activeTab === 'body'" class="h-full w-full overflow-hidden">
|
||||||
|
<Codemirror
|
||||||
|
v-model="store.activeRequest.body"
|
||||||
|
placeholder="Request Body (JSON)"
|
||||||
|
:style="{ height: '100%' }"
|
||||||
|
:autofocus="true"
|
||||||
|
:indent-with-tab="true"
|
||||||
|
:tab-size="2"
|
||||||
|
:extensions="extensions"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
60
src/components/ResponsePanel.vue
Normal file
60
src/components/ResponsePanel.vue
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { useRequestStore } from '../stores/requestStore';
|
||||||
|
import { Codemirror } from 'vue-codemirror';
|
||||||
|
import { json } from '@codemirror/lang-json';
|
||||||
|
import { oneDark } from '@codemirror/theme-one-dark';
|
||||||
|
import { EditorView } from '@codemirror/view';
|
||||||
|
|
||||||
|
const store = useRequestStore();
|
||||||
|
|
||||||
|
const extensions = [json(), oneDark, EditorView.editable.of(false)];
|
||||||
|
|
||||||
|
const formattedBody = computed(() => {
|
||||||
|
if (!store.activeRequest.response) return '';
|
||||||
|
try {
|
||||||
|
// Auto pretty print
|
||||||
|
return JSON.stringify(JSON.parse(store.activeRequest.response.body), null, 2);
|
||||||
|
} catch (e) {
|
||||||
|
return store.activeRequest.response.body;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const statusColor = computed(() => {
|
||||||
|
const s = store.activeRequest.response?.status || 0;
|
||||||
|
if (s >= 200 && s < 300) return 'text-emerald-400';
|
||||||
|
if (s >= 400) return 'text-rose-400';
|
||||||
|
return 'text-amber-400';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex flex-col h-full border-t border-slate-800 bg-slate-900">
|
||||||
|
<div v-if="store.activeRequest.response" class="flex flex-col h-full">
|
||||||
|
<!-- Meta Bar -->
|
||||||
|
<div class="px-4 py-2 border-b border-slate-800 flex gap-4 text-xs items-center bg-slate-950/50">
|
||||||
|
<div class="font-mono">
|
||||||
|
Status: <span :class="['font-bold', statusColor]">{{ store.activeRequest.response.status }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-slate-500">
|
||||||
|
Time: <span class="text-slate-300">{{ store.activeRequest.response.time }}ms</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-slate-500">
|
||||||
|
Size: <span class="text-slate-300">{{ (store.activeRequest.response.size / 1024).toFixed(2) }} KB</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Output -->
|
||||||
|
<div class="flex-1 overflow-hidden">
|
||||||
|
<Codemirror
|
||||||
|
:model-value="formattedBody"
|
||||||
|
:style="{ height: '100%' }"
|
||||||
|
:extensions="extensions"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="flex-1 flex items-center justify-center text-slate-600 text-sm">
|
||||||
|
No response yet
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
8
src/main.ts
Normal file
8
src/main.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import { createApp } from "vue";
|
||||||
|
import { createPinia } from "pinia";
|
||||||
|
import "./style.css";
|
||||||
|
import App from "./App.vue";
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
app.use(createPinia());
|
||||||
|
app.mount("#app");
|
||||||
99
src/stores/requestStore.ts
Normal file
99
src/stores/requestStore.ts
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
|
|
||||||
|
export interface KeyValue {
|
||||||
|
id: string;
|
||||||
|
key: string;
|
||||||
|
value: string;
|
||||||
|
enabled: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RequestData {
|
||||||
|
id: string;
|
||||||
|
method: string;
|
||||||
|
url: string;
|
||||||
|
params: KeyValue[];
|
||||||
|
headers: KeyValue[];
|
||||||
|
body: string;
|
||||||
|
response?: {
|
||||||
|
status: number;
|
||||||
|
headers: Record<string, string>;
|
||||||
|
body: string;
|
||||||
|
time: number;
|
||||||
|
size: number;
|
||||||
|
};
|
||||||
|
timestamp: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useRequestStore = defineStore('request', () => {
|
||||||
|
// State
|
||||||
|
const history = ref<RequestData[]>([]);
|
||||||
|
const activeRequest = ref<RequestData>({
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
method: 'GET',
|
||||||
|
url: '',
|
||||||
|
params: [
|
||||||
|
{ id: crypto.randomUUID(), key: '', value: '', enabled: true }
|
||||||
|
],
|
||||||
|
headers: [
|
||||||
|
{ id: crypto.randomUUID(), key: '', value: '', enabled: true }
|
||||||
|
],
|
||||||
|
body: '',
|
||||||
|
timestamp: Date.now(),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load history from local storage
|
||||||
|
const savedHistory = localStorage.getItem('request_history');
|
||||||
|
if (savedHistory) {
|
||||||
|
try {
|
||||||
|
history.value = JSON.parse(savedHistory);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to parse history', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
const addToHistory = (req: RequestData) => {
|
||||||
|
// Add to beginning, limit to 50
|
||||||
|
const newEntry = { ...req, timestamp: Date.now() };
|
||||||
|
// Don't store the empty trailing rows in history to save space?
|
||||||
|
// Actually keep them for consistency or filter them. Let's filter empty keys.
|
||||||
|
newEntry.params = newEntry.params.filter(p => p.key.trim() !== '');
|
||||||
|
newEntry.headers = newEntry.headers.filter(h => h.key.trim() !== '');
|
||||||
|
|
||||||
|
history.value.unshift(newEntry);
|
||||||
|
if (history.value.length > 50) {
|
||||||
|
history.value.pop();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearHistory = () => {
|
||||||
|
history.value = [];
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadRequest = (req: RequestData) => {
|
||||||
|
// Deep copy
|
||||||
|
const loaded = JSON.parse(JSON.stringify(req));
|
||||||
|
loaded.id = crypto.randomUUID();
|
||||||
|
loaded.response = undefined;
|
||||||
|
|
||||||
|
// Ensure at least one empty row for editing
|
||||||
|
if (loaded.params.length === 0) loaded.params.push({ id: crypto.randomUUID(), key: '', value: '', enabled: true });
|
||||||
|
if (loaded.headers.length === 0) loaded.headers.push({ id: crypto.randomUUID(), key: '', value: '', enabled: true });
|
||||||
|
|
||||||
|
activeRequest.value = loaded;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Watch and Save
|
||||||
|
watch(history, (newVal) => {
|
||||||
|
localStorage.setItem('request_history', JSON.stringify(newVal));
|
||||||
|
}, { deep: true });
|
||||||
|
|
||||||
|
return {
|
||||||
|
history,
|
||||||
|
activeRequest,
|
||||||
|
addToHistory,
|
||||||
|
clearHistory,
|
||||||
|
loadRequest
|
||||||
|
};
|
||||||
|
});
|
||||||
11
src/style.css
Normal file
11
src/style.css
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-slate-950 text-slate-200 h-screen overflow-hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
@apply h-full w-full;
|
||||||
|
}
|
||||||
7
src/vite-env.d.ts
vendored
Normal file
7
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module "*.vue" {
|
||||||
|
import type { DefineComponent } from "vue";
|
||||||
|
const component: DefineComponent<{}, {}, any>;
|
||||||
|
export default component;
|
||||||
|
}
|
||||||
11
tailwind.config.js
Normal file
11
tailwind.config.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
25
tsconfig.json
Normal file
25
tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
32
vite.config.ts
Normal file
32
vite.config.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
|
||||||
|
// @ts-expect-error process is a nodejs global
|
||||||
|
const host = process.env.TAURI_DEV_HOST;
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig(async () => ({
|
||||||
|
plugins: [vue()],
|
||||||
|
|
||||||
|
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
|
||||||
|
//
|
||||||
|
// 1. prevent Vite from obscuring rust errors
|
||||||
|
clearScreen: false,
|
||||||
|
// 2. tauri expects a fixed port, fail if that port is not available
|
||||||
|
server: {
|
||||||
|
port: 1420,
|
||||||
|
strictPort: true,
|
||||||
|
host: host || false,
|
||||||
|
hmr: host
|
||||||
|
? {
|
||||||
|
protocol: "ws",
|
||||||
|
host,
|
||||||
|
port: 1421,
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
|
watch: {
|
||||||
|
// 3. tell Vite to ignore watching `src-tauri`
|
||||||
|
ignored: ["**/src-tauri/**"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
Reference in New Issue
Block a user