feat: bootstrap tauri motrix-style UI and aria2 torrent flow
This commit is contained in:
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?
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
5
README.md
Normal file
5
README.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# Vue 3 + TypeScript + Vite
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||||
67
docs/PORTING_PLAN.md
Normal file
67
docs/PORTING_PLAN.md
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
# Motrix (Electron) -> gdown (Tauri + Vue) 포팅 계획서
|
||||||
|
|
||||||
|
## 1. 목표
|
||||||
|
- Electron 중심 구조를 Tauri + Vue 구조로 전환한다.
|
||||||
|
- 기존 Motrix의 핵심 기능(aria2 엔진 제어, 다운로드 큐, 설정/세션, 트레이/알림)을 단계적으로 재구현한다.
|
||||||
|
- 초기 단계에서 "동작 가능한 최소 제품(MVP)"을 빠르게 만들고, 이후 안정화와 기능 확장을 진행한다.
|
||||||
|
|
||||||
|
## 2. 기준 환경
|
||||||
|
- Node.js: 24.x
|
||||||
|
- npm: 11.x
|
||||||
|
- Rust: stable (1.93.1+)
|
||||||
|
- Tauri: v2 계열
|
||||||
|
- Vue: v3 + Vite
|
||||||
|
|
||||||
|
## 3. 아키텍처 매핑
|
||||||
|
- Electron main (`src/main/*`) -> Tauri Rust (`src-tauri/src/*`)
|
||||||
|
- Electron renderer (`src/renderer/*`) -> Vue UI (`src/*`)
|
||||||
|
- aria2 프로세스 관리 (`main/core/Engine.js`) -> Rust process manager (`src-tauri/src/engine.rs`)
|
||||||
|
- 앱 설정 저장(`electron-store`) -> Tauri plugin-store(차기 단계)
|
||||||
|
- 트레이/알림/OS 훅 -> Tauri tray/notification/deep-link plugin(차기 단계)
|
||||||
|
|
||||||
|
## 4. 단계별 구현
|
||||||
|
|
||||||
|
### Phase 1 (진행 중): 엔진 부트스트랩
|
||||||
|
- [x] Tauri + Vue 프로젝트 초기화
|
||||||
|
- [x] Rust command: `engine_start`, `engine_stop`, `engine_status`
|
||||||
|
- [x] Vue 대시보드에서 엔진 제어 UI 연결
|
||||||
|
- [ ] aria2 번들 바이너리 경로 자동 탐지 (`resources/engine/*`)
|
||||||
|
- [ ] 에러 메시지 분류(파일 없음, 권한 오류, 포트 충돌)
|
||||||
|
|
||||||
|
### Phase 2: 다운로드 RPC/큐
|
||||||
|
- [ ] aria2 JSON-RPC client 계층 구현 (Rust 또는 Vue 중 1안 선택)
|
||||||
|
- [ ] 작업 추가/중지/재시도/삭제
|
||||||
|
- [ ] 작업 목록/속도/진행률 실시간 갱신
|
||||||
|
- [ ] Magnet/Torrent 입력 파이프라인
|
||||||
|
|
||||||
|
### Phase 3: 설정/세션/마이그레이션
|
||||||
|
- [ ] 설정 저장소 도입 (다운로드 폴더, 동시작업 수, 속도 제한 등)
|
||||||
|
- [ ] 세션 파일 관리(종료 시 저장, 시작 시 복구)
|
||||||
|
- [ ] Motrix 설정 키 매핑표 작성 및 자동 마이그레이션 도구
|
||||||
|
|
||||||
|
### Phase 4: 플랫폼 기능
|
||||||
|
- [ ] 시스템 트레이 메뉴
|
||||||
|
- [ ] 알림/자동 시작
|
||||||
|
- [ ] 파일 연결(.torrent) 및 magnet scheme 등록
|
||||||
|
- [ ] 업데이트 전략(자체 업데이트 또는 외부 배포 전략)
|
||||||
|
|
||||||
|
### Phase 5: 품질/배포
|
||||||
|
- [ ] 단위/통합 테스트
|
||||||
|
- [ ] 성능 측정(메모리, CPU, 대용량 큐)
|
||||||
|
- [ ] macOS/Windows/Linux 빌드 파이프라인
|
||||||
|
|
||||||
|
## 5. 리스크 및 대응
|
||||||
|
- aria2 바이너리 번들/서명: 플랫폼별 바이너리 동봉 규칙 문서화 + CI 검증
|
||||||
|
- Electron API 차이: 기능별 대체표를 먼저 만들고 Tauri plugin으로 대응
|
||||||
|
- 설정 호환성: 기존 키를 그대로 유지하지 않고 매핑 테이블로 이관
|
||||||
|
|
||||||
|
## 6. 현재 구현 상태 (2026-02-23)
|
||||||
|
- 완료:
|
||||||
|
- `src-tauri/src/engine.rs`: aria2 프로세스 시작/중지/상태 조회
|
||||||
|
- `src-tauri/src/lib.rs`: Tauri invoke handler 연결
|
||||||
|
- `src/lib/engineApi.ts`: 프런트 command 호출 래퍼
|
||||||
|
- `src/App.vue`: 엔진 제어 UI
|
||||||
|
- 다음 우선순위:
|
||||||
|
1. aria2 바이너리 경로 자동 탐지 + 리소스 번들 구조 확정
|
||||||
|
2. JSON-RPC 기반 다운로드 목록 API 구현
|
||||||
|
3. 설정 저장소 도입
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!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>gdown</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1707
package-lock.json
generated
Normal file
1707
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
package.json
Normal file
29
package.json
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "gdown",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=24 <25"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc -b && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"tauri:dev": "tauri dev",
|
||||||
|
"tauri:build": "tauri build"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tauri-apps/api": "^2.10.1",
|
||||||
|
"vue": "^3.5.25"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tauri-apps/cli": "^2.10.0",
|
||||||
|
"@types/node": "^24.10.1",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.2",
|
||||||
|
"@vue/tsconfig": "^0.8.1",
|
||||||
|
"typescript": "~5.9.3",
|
||||||
|
"vite": "^7.3.1",
|
||||||
|
"vue-tsc": "^3.1.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
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 |
4
src-tauri/.gitignore
vendored
Normal file
4
src-tauri/.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
# Generated by Cargo
|
||||||
|
# will have compiled files and executables
|
||||||
|
/target/
|
||||||
|
/gen/schemas
|
||||||
5392
src-tauri/Cargo.lock
generated
Normal file
5392
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 = "app"
|
||||||
|
version = "0.1.0"
|
||||||
|
description = "A Tauri App"
|
||||||
|
authors = ["you"]
|
||||||
|
license = ""
|
||||||
|
repository = ""
|
||||||
|
edition = "2021"
|
||||||
|
rust-version = "1.77.2"
|
||||||
|
|
||||||
|
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||||
|
|
||||||
|
[lib]
|
||||||
|
name = "app_lib"
|
||||||
|
crate-type = ["staticlib", "cdylib", "rlib"]
|
||||||
|
|
||||||
|
[build-dependencies]
|
||||||
|
tauri-build = { version = "2.5.4", features = [] }
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
serde_json = "1.0"
|
||||||
|
serde = { version = "1.0", features = ["derive"] }
|
||||||
|
log = "0.4"
|
||||||
|
tauri = { version = "2.10.0", features = [] }
|
||||||
|
tauri-plugin-log = "2"
|
||||||
|
reqwest = { version = "0.12.24", default-features = false, features = ["json", "rustls-tls"] }
|
||||||
|
base64 = "0.22"
|
||||||
3
src-tauri/build.rs
Normal file
3
src-tauri/build.rs
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
fn main() {
|
||||||
|
tauri_build::build()
|
||||||
|
}
|
||||||
11
src-tauri/capabilities/default.json
Normal file
11
src-tauri/capabilities/default.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"$schema": "../gen/schemas/desktop-schema.json",
|
||||||
|
"identifier": "default",
|
||||||
|
"description": "enables the default permissions",
|
||||||
|
"windows": [
|
||||||
|
"main"
|
||||||
|
],
|
||||||
|
"permissions": [
|
||||||
|
"core: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: 11 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: 23 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: 2.2 KiB |
BIN
src-tauri/icons/Square107x107Logo.png
Normal file
BIN
src-tauri/icons/Square107x107Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 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: 12 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: 13 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: 25 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: 2.0 KiB |
BIN
src-tauri/icons/Square310x310Logo.png
Normal file
BIN
src-tauri/icons/Square310x310Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 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: 3.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: 5.9 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: 7.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: 3.9 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: 37 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: 49 KiB |
447
src-tauri/src/engine.rs
Normal file
447
src-tauri/src/engine.rs
Normal file
@@ -0,0 +1,447 @@
|
|||||||
|
use base64::{engine::general_purpose::STANDARD, Engine as _};
|
||||||
|
use reqwest::Client;
|
||||||
|
use serde::{Deserialize, Serialize};
|
||||||
|
use serde_json::{json, Value};
|
||||||
|
use std::path::Path;
|
||||||
|
use std::process::{Child, Command, Stdio};
|
||||||
|
use std::sync::Mutex;
|
||||||
|
use std::time::{SystemTime, UNIX_EPOCH};
|
||||||
|
use tauri::State;
|
||||||
|
|
||||||
|
#[derive(Debug, Deserialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct EngineStartRequest {
|
||||||
|
pub binary_path: Option<String>,
|
||||||
|
pub rpc_listen_port: Option<u16>,
|
||||||
|
pub rpc_secret: Option<String>,
|
||||||
|
pub download_dir: Option<String>,
|
||||||
|
pub max_concurrent_downloads: Option<u16>,
|
||||||
|
pub split: Option<u16>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, Deserialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct Aria2RpcConfig {
|
||||||
|
pub rpc_listen_port: Option<u16>,
|
||||||
|
pub rpc_secret: Option<String>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, Deserialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct Aria2AddUriRequest {
|
||||||
|
pub rpc: Aria2RpcConfig,
|
||||||
|
pub uri: String,
|
||||||
|
pub out: Option<String>,
|
||||||
|
pub dir: Option<String>,
|
||||||
|
pub split: Option<u16>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, Deserialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct Aria2AddTorrentRequest {
|
||||||
|
pub rpc: Aria2RpcConfig,
|
||||||
|
pub torrent_base64: String,
|
||||||
|
pub out: Option<String>,
|
||||||
|
pub dir: Option<String>,
|
||||||
|
pub split: Option<u16>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, Serialize, Clone)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct EngineStatusResponse {
|
||||||
|
pub running: bool,
|
||||||
|
pub pid: Option<u32>,
|
||||||
|
pub binary_path: Option<String>,
|
||||||
|
pub args: Vec<String>,
|
||||||
|
pub started_at: Option<u64>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, Serialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct Aria2TaskSummary {
|
||||||
|
pub gid: String,
|
||||||
|
pub status: String,
|
||||||
|
pub total_length: String,
|
||||||
|
pub completed_length: String,
|
||||||
|
pub download_speed: String,
|
||||||
|
pub dir: String,
|
||||||
|
pub file_name: String,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, Serialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct Aria2TaskSnapshot {
|
||||||
|
pub active: Vec<Aria2TaskSummary>,
|
||||||
|
pub waiting: Vec<Aria2TaskSummary>,
|
||||||
|
pub stopped: Vec<Aria2TaskSummary>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, Serialize)]
|
||||||
|
#[serde(rename_all = "camelCase")]
|
||||||
|
pub struct TorrentFilePayload {
|
||||||
|
pub name: String,
|
||||||
|
pub base64: String,
|
||||||
|
pub size: u64,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug)]
|
||||||
|
struct EngineRuntime {
|
||||||
|
child: Option<Child>,
|
||||||
|
binary_path: Option<String>,
|
||||||
|
args: Vec<String>,
|
||||||
|
started_at: Option<u64>,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl Default for EngineRuntime {
|
||||||
|
fn default() -> Self {
|
||||||
|
Self {
|
||||||
|
child: None,
|
||||||
|
binary_path: None,
|
||||||
|
args: vec![],
|
||||||
|
started_at: None,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Default)]
|
||||||
|
pub struct EngineState {
|
||||||
|
runtime: Mutex<EngineRuntime>,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl EngineState {
|
||||||
|
fn status(runtime: &EngineRuntime) -> EngineStatusResponse {
|
||||||
|
EngineStatusResponse {
|
||||||
|
running: runtime.child.is_some(),
|
||||||
|
pid: runtime.child.as_ref().map(std::process::Child::id),
|
||||||
|
binary_path: runtime.binary_path.clone(),
|
||||||
|
args: runtime.args.clone(),
|
||||||
|
started_at: runtime.started_at,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn build_engine_args(request: &EngineStartRequest) -> Vec<String> {
|
||||||
|
let mut args = vec![
|
||||||
|
"--enable-rpc=true".to_string(),
|
||||||
|
"--rpc-listen-all=true".to_string(),
|
||||||
|
"--rpc-allow-origin-all=true".to_string(),
|
||||||
|
"--rpc-listen-port=".to_string() + &request.rpc_listen_port.unwrap_or(6800).to_string(),
|
||||||
|
"--max-concurrent-downloads=".to_string() + &request.max_concurrent_downloads.unwrap_or(5).to_string(),
|
||||||
|
"--split=".to_string() + &request.split.unwrap_or(8).to_string(),
|
||||||
|
"--continue=true".to_string(),
|
||||||
|
];
|
||||||
|
|
||||||
|
if let Some(secret) = &request.rpc_secret {
|
||||||
|
if !secret.trim().is_empty() {
|
||||||
|
args.push(format!("--rpc-secret={secret}"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if let Some(download_dir) = &request.download_dir {
|
||||||
|
if !download_dir.trim().is_empty() {
|
||||||
|
args.push(format!("--dir={download_dir}"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
args
|
||||||
|
}
|
||||||
|
|
||||||
|
fn default_aria2_binary() -> String {
|
||||||
|
if cfg!(target_os = "windows") {
|
||||||
|
"aria2c.exe".to_string()
|
||||||
|
} else {
|
||||||
|
"aria2c".to_string()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn rpc_endpoint(config: &Aria2RpcConfig) -> String {
|
||||||
|
format!(
|
||||||
|
"http://127.0.0.1:{}/jsonrpc",
|
||||||
|
config.rpc_listen_port.unwrap_or(6800)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
fn rpc_token(config: &Aria2RpcConfig) -> Option<String> {
|
||||||
|
let secret = config.rpc_secret.as_ref()?.trim();
|
||||||
|
if secret.is_empty() {
|
||||||
|
None
|
||||||
|
} else {
|
||||||
|
Some(format!("token:{secret}"))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async fn call_aria2_rpc(
|
||||||
|
client: &Client,
|
||||||
|
config: &Aria2RpcConfig,
|
||||||
|
method: &str,
|
||||||
|
mut params: Vec<Value>,
|
||||||
|
) -> Result<Value, String> {
|
||||||
|
if let Some(token) = rpc_token(config) {
|
||||||
|
params.insert(0, json!(token));
|
||||||
|
}
|
||||||
|
|
||||||
|
let endpoint = rpc_endpoint(config);
|
||||||
|
let payload = json!({
|
||||||
|
"jsonrpc": "2.0",
|
||||||
|
"id": "gdown",
|
||||||
|
"method": method,
|
||||||
|
"params": params,
|
||||||
|
});
|
||||||
|
|
||||||
|
let response = client
|
||||||
|
.post(&endpoint)
|
||||||
|
.json(&payload)
|
||||||
|
.send()
|
||||||
|
.await
|
||||||
|
.map_err(|err| format!("aria2 RPC request failed ({method}): {err}"))?;
|
||||||
|
|
||||||
|
let status = response.status();
|
||||||
|
let body: Value = response
|
||||||
|
.json()
|
||||||
|
.await
|
||||||
|
.map_err(|err| format!("aria2 RPC invalid response ({method}): {err}"))?;
|
||||||
|
|
||||||
|
if !status.is_success() {
|
||||||
|
return Err(format!("aria2 RPC HTTP error ({method}): {status} / {body}"));
|
||||||
|
}
|
||||||
|
|
||||||
|
if let Some(error) = body.get("error") {
|
||||||
|
return Err(format!("aria2 RPC error ({method}): {error}"));
|
||||||
|
}
|
||||||
|
|
||||||
|
body
|
||||||
|
.get("result")
|
||||||
|
.cloned()
|
||||||
|
.ok_or_else(|| format!("aria2 RPC missing result ({method}): {body}"))
|
||||||
|
}
|
||||||
|
|
||||||
|
fn value_to_string(value: Option<&Value>) -> String {
|
||||||
|
value
|
||||||
|
.and_then(Value::as_str)
|
||||||
|
.unwrap_or_default()
|
||||||
|
.to_string()
|
||||||
|
}
|
||||||
|
|
||||||
|
fn pick_file_name(path: &str) -> String {
|
||||||
|
if path.is_empty() {
|
||||||
|
return "-".to_string();
|
||||||
|
}
|
||||||
|
Path::new(path)
|
||||||
|
.file_name()
|
||||||
|
.map(|name| name.to_string_lossy().to_string())
|
||||||
|
.filter(|name| !name.is_empty())
|
||||||
|
.unwrap_or_else(|| path.to_string())
|
||||||
|
}
|
||||||
|
|
||||||
|
fn map_task(task: &Value) -> Aria2TaskSummary {
|
||||||
|
let file_path = task
|
||||||
|
.get("files")
|
||||||
|
.and_then(Value::as_array)
|
||||||
|
.and_then(|files| files.first())
|
||||||
|
.and_then(|file| file.get("path"))
|
||||||
|
.and_then(Value::as_str)
|
||||||
|
.unwrap_or("");
|
||||||
|
|
||||||
|
Aria2TaskSummary {
|
||||||
|
gid: value_to_string(task.get("gid")),
|
||||||
|
status: value_to_string(task.get("status")),
|
||||||
|
total_length: value_to_string(task.get("totalLength")),
|
||||||
|
completed_length: value_to_string(task.get("completedLength")),
|
||||||
|
download_speed: value_to_string(task.get("downloadSpeed")),
|
||||||
|
dir: value_to_string(task.get("dir")),
|
||||||
|
file_name: pick_file_name(file_path),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn map_tasks(result: Value) -> Vec<Aria2TaskSummary> {
|
||||||
|
result
|
||||||
|
.as_array()
|
||||||
|
.map(|items| items.iter().map(map_task).collect())
|
||||||
|
.unwrap_or_default()
|
||||||
|
}
|
||||||
|
|
||||||
|
fn build_rpc_options(out: Option<&String>, dir: Option<&String>, split: Option<u16>) -> Value {
|
||||||
|
let mut options = serde_json::Map::new();
|
||||||
|
if let Some(value) = out {
|
||||||
|
if !value.trim().is_empty() {
|
||||||
|
options.insert("out".to_string(), json!(value));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if let Some(value) = dir {
|
||||||
|
if !value.trim().is_empty() {
|
||||||
|
options.insert("dir".to_string(), json!(value));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if let Some(value) = split {
|
||||||
|
options.insert("split".to_string(), json!(value.to_string()));
|
||||||
|
}
|
||||||
|
Value::Object(options)
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
pub fn engine_start(
|
||||||
|
state: State<'_, EngineState>,
|
||||||
|
request: EngineStartRequest,
|
||||||
|
) -> Result<EngineStatusResponse, String> {
|
||||||
|
let mut runtime = state
|
||||||
|
.runtime
|
||||||
|
.lock()
|
||||||
|
.map_err(|err| format!("failed to lock engine state: {err}"))?;
|
||||||
|
|
||||||
|
if let Some(child) = runtime.child.as_mut() {
|
||||||
|
match child.try_wait() {
|
||||||
|
Ok(Some(_)) => {
|
||||||
|
runtime.child = None;
|
||||||
|
}
|
||||||
|
Ok(None) => {
|
||||||
|
return Ok(EngineState::status(&runtime));
|
||||||
|
}
|
||||||
|
Err(err) => {
|
||||||
|
return Err(format!("failed to inspect current engine process: {err}"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let args = build_engine_args(&request);
|
||||||
|
let binary = request.binary_path.unwrap_or_else(default_aria2_binary);
|
||||||
|
|
||||||
|
let child = Command::new(&binary)
|
||||||
|
.args(&args)
|
||||||
|
.stdin(Stdio::null())
|
||||||
|
.stdout(Stdio::null())
|
||||||
|
.stderr(Stdio::null())
|
||||||
|
.spawn()
|
||||||
|
.map_err(|err| format!("failed to start aria2 engine with '{binary}': {err}"))?;
|
||||||
|
|
||||||
|
runtime.child = Some(child);
|
||||||
|
runtime.binary_path = Some(binary);
|
||||||
|
runtime.args = args;
|
||||||
|
runtime.started_at = Some(
|
||||||
|
SystemTime::now()
|
||||||
|
.duration_since(UNIX_EPOCH)
|
||||||
|
.map_err(|err| format!("failed to get system time: {err}"))?
|
||||||
|
.as_secs(),
|
||||||
|
);
|
||||||
|
|
||||||
|
Ok(EngineState::status(&runtime))
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
pub fn engine_stop(state: State<'_, EngineState>) -> Result<EngineStatusResponse, String> {
|
||||||
|
let mut runtime = state
|
||||||
|
.runtime
|
||||||
|
.lock()
|
||||||
|
.map_err(|err| format!("failed to lock engine state: {err}"))?;
|
||||||
|
|
||||||
|
if let Some(mut child) = runtime.child.take() {
|
||||||
|
child
|
||||||
|
.kill()
|
||||||
|
.map_err(|err| format!("failed to stop aria2 engine: {err}"))?;
|
||||||
|
let _ = child.wait();
|
||||||
|
}
|
||||||
|
|
||||||
|
runtime.started_at = None;
|
||||||
|
Ok(EngineState::status(&runtime))
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
pub fn engine_status(state: State<'_, EngineState>) -> Result<EngineStatusResponse, String> {
|
||||||
|
let mut runtime = state
|
||||||
|
.runtime
|
||||||
|
.lock()
|
||||||
|
.map_err(|err| format!("failed to lock engine state: {err}"))?;
|
||||||
|
|
||||||
|
if let Some(child) = runtime.child.as_mut() {
|
||||||
|
match child.try_wait() {
|
||||||
|
Ok(Some(_)) => {
|
||||||
|
runtime.child = None;
|
||||||
|
runtime.started_at = None;
|
||||||
|
}
|
||||||
|
Ok(None) => {}
|
||||||
|
Err(err) => {
|
||||||
|
return Err(format!("failed to inspect engine process status: {err}"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Ok(EngineState::status(&runtime))
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
pub async fn aria2_add_uri(request: Aria2AddUriRequest) -> Result<String, String> {
|
||||||
|
if request.uri.trim().is_empty() {
|
||||||
|
return Err("uri is required".to_string());
|
||||||
|
}
|
||||||
|
|
||||||
|
let client = Client::new();
|
||||||
|
|
||||||
|
let mut params = vec![json!([request.uri.trim()])];
|
||||||
|
let options = build_rpc_options(request.out.as_ref(), request.dir.as_ref(), request.split);
|
||||||
|
if options.as_object().map(|obj| !obj.is_empty()).unwrap_or(false) {
|
||||||
|
params.push(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
let result = call_aria2_rpc(&client, &request.rpc, "aria2.addUri", params).await?;
|
||||||
|
result
|
||||||
|
.as_str()
|
||||||
|
.map(|gid| gid.to_string())
|
||||||
|
.ok_or_else(|| format!("aria2.addUri returned unexpected result: {result}"))
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
pub async fn aria2_add_torrent(request: Aria2AddTorrentRequest) -> Result<String, String> {
|
||||||
|
if request.torrent_base64.trim().is_empty() {
|
||||||
|
return Err("torrentBase64 is required".to_string());
|
||||||
|
}
|
||||||
|
|
||||||
|
let client = Client::new();
|
||||||
|
let options = build_rpc_options(request.out.as_ref(), request.dir.as_ref(), request.split);
|
||||||
|
|
||||||
|
let mut params = vec![json!(request.torrent_base64.trim())];
|
||||||
|
if options.as_object().map(|obj| !obj.is_empty()).unwrap_or(false) {
|
||||||
|
params.push(json!([]));
|
||||||
|
params.push(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
let result = call_aria2_rpc(&client, &request.rpc, "aria2.addTorrent", params).await?;
|
||||||
|
result
|
||||||
|
.as_str()
|
||||||
|
.map(|gid| gid.to_string())
|
||||||
|
.ok_or_else(|| format!("aria2.addTorrent returned unexpected result: {result}"))
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
pub async fn aria2_list_tasks(config: Aria2RpcConfig) -> Result<Aria2TaskSnapshot, String> {
|
||||||
|
let client = Client::new();
|
||||||
|
|
||||||
|
let active = call_aria2_rpc(&client, &config, "aria2.tellActive", vec![]).await?;
|
||||||
|
let waiting =
|
||||||
|
call_aria2_rpc(&client, &config, "aria2.tellWaiting", vec![json!(0), json!(30)]).await?;
|
||||||
|
let stopped =
|
||||||
|
call_aria2_rpc(&client, &config, "aria2.tellStopped", vec![json!(0), json!(30)]).await?;
|
||||||
|
|
||||||
|
Ok(Aria2TaskSnapshot {
|
||||||
|
active: map_tasks(active),
|
||||||
|
waiting: map_tasks(waiting),
|
||||||
|
stopped: map_tasks(stopped),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
pub fn load_torrent_file(path: String) -> Result<TorrentFilePayload, String> {
|
||||||
|
if !path.to_ascii_lowercase().ends_with(".torrent") {
|
||||||
|
return Err("torrent 파일만 허용됩니다.".to_string());
|
||||||
|
}
|
||||||
|
|
||||||
|
let bytes = std::fs::read(&path).map_err(|err| format!("파일 읽기 실패: {err}"))?;
|
||||||
|
let name = Path::new(&path)
|
||||||
|
.file_name()
|
||||||
|
.map(|v| v.to_string_lossy().to_string())
|
||||||
|
.filter(|v| !v.is_empty())
|
||||||
|
.ok_or_else(|| "파일명을 확인할 수 없습니다.".to_string())?;
|
||||||
|
|
||||||
|
Ok(TorrentFilePayload {
|
||||||
|
name,
|
||||||
|
base64: STANDARD.encode(bytes.as_slice()),
|
||||||
|
size: bytes.len() as u64,
|
||||||
|
})
|
||||||
|
}
|
||||||
33
src-tauri/src/lib.rs
Normal file
33
src-tauri/src/lib.rs
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
mod engine;
|
||||||
|
|
||||||
|
use engine::{
|
||||||
|
aria2_add_torrent, aria2_add_uri, aria2_list_tasks, engine_start, engine_status, engine_stop,
|
||||||
|
load_torrent_file, EngineState,
|
||||||
|
};
|
||||||
|
|
||||||
|
#[cfg_attr(mobile, tauri::mobile_entry_point)]
|
||||||
|
pub fn run() {
|
||||||
|
tauri::Builder::default()
|
||||||
|
.manage(EngineState::default())
|
||||||
|
.setup(|app| {
|
||||||
|
if cfg!(debug_assertions) {
|
||||||
|
app.handle().plugin(
|
||||||
|
tauri_plugin_log::Builder::default()
|
||||||
|
.level(log::LevelFilter::Info)
|
||||||
|
.build(),
|
||||||
|
)?;
|
||||||
|
}
|
||||||
|
Ok(())
|
||||||
|
})
|
||||||
|
.invoke_handler(tauri::generate_handler![
|
||||||
|
engine_start,
|
||||||
|
engine_stop,
|
||||||
|
engine_status,
|
||||||
|
aria2_add_torrent,
|
||||||
|
aria2_add_uri,
|
||||||
|
aria2_list_tasks,
|
||||||
|
load_torrent_file
|
||||||
|
])
|
||||||
|
.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() {
|
||||||
|
app_lib::run();
|
||||||
|
}
|
||||||
37
src-tauri/tauri.conf.json
Normal file
37
src-tauri/tauri.conf.json
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
|
||||||
|
"productName": "gdown",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"identifier": "com.tauri.dev",
|
||||||
|
"build": {
|
||||||
|
"frontendDist": "../dist",
|
||||||
|
"devUrl": "http://localhost:5173",
|
||||||
|
"beforeDevCommand": "npm run dev",
|
||||||
|
"beforeBuildCommand": "npm run build"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"windows": [
|
||||||
|
{
|
||||||
|
"title": "gdown",
|
||||||
|
"width": 800,
|
||||||
|
"height": 600,
|
||||||
|
"resizable": true,
|
||||||
|
"fullscreen": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
674
src/App.vue
Normal file
674
src/App.vue
Normal file
@@ -0,0 +1,674 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||||
|
import { getCurrentWindow } from '@tauri-apps/api/window'
|
||||||
|
import type { UnlistenFn } from '@tauri-apps/api/event'
|
||||||
|
import {
|
||||||
|
addAria2Torrent,
|
||||||
|
addAria2Uri,
|
||||||
|
getEngineStatus,
|
||||||
|
listAria2Tasks,
|
||||||
|
loadTorrentFile,
|
||||||
|
startEngine,
|
||||||
|
stopEngine,
|
||||||
|
type Aria2Task,
|
||||||
|
type Aria2TaskSnapshot,
|
||||||
|
type EngineStatus,
|
||||||
|
} from './lib/engineApi'
|
||||||
|
|
||||||
|
type TaskFilter = 'all' | 'active' | 'waiting' | 'stopped'
|
||||||
|
type AddTab = 'url' | 'torrent'
|
||||||
|
|
||||||
|
const binaryPath = ref('aria2c')
|
||||||
|
const rpcPort = ref(6800)
|
||||||
|
const rpcSecret = ref('')
|
||||||
|
const downloadDir = ref('')
|
||||||
|
const split = ref(8)
|
||||||
|
const maxConcurrentDownloads = ref(5)
|
||||||
|
|
||||||
|
const loadingEngine = ref(false)
|
||||||
|
const loadingTasks = ref(false)
|
||||||
|
const loadingAddTask = ref(false)
|
||||||
|
const errorMessage = ref('')
|
||||||
|
const successMessage = ref('')
|
||||||
|
const autoRefresh = ref(true)
|
||||||
|
const filter = ref<TaskFilter>('all')
|
||||||
|
|
||||||
|
const showAddModal = ref(false)
|
||||||
|
const addTab = ref<AddTab>('url')
|
||||||
|
const addUrl = ref('')
|
||||||
|
const addOut = ref('')
|
||||||
|
const addSplit = ref(64)
|
||||||
|
const torrentBase64 = ref('')
|
||||||
|
const torrentFileName = ref('')
|
||||||
|
const torrentFileExt = ref('')
|
||||||
|
const torrentFileSize = ref(0)
|
||||||
|
const appDropActive = ref(false)
|
||||||
|
const modalDropActive = ref(false)
|
||||||
|
const torrentFileInput = ref<HTMLInputElement | null>(null)
|
||||||
|
|
||||||
|
const status = ref<EngineStatus>({
|
||||||
|
running: false,
|
||||||
|
pid: null,
|
||||||
|
binaryPath: null,
|
||||||
|
args: [],
|
||||||
|
startedAt: null,
|
||||||
|
})
|
||||||
|
|
||||||
|
const tasks = ref<Aria2TaskSnapshot>({
|
||||||
|
active: [],
|
||||||
|
waiting: [],
|
||||||
|
stopped: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
let refreshTimer: number | null = null
|
||||||
|
let unlistenDragDrop: UnlistenFn | null = null
|
||||||
|
|
||||||
|
const totalCount = computed(() => tasks.value.active.length + tasks.value.waiting.length + tasks.value.stopped.length)
|
||||||
|
|
||||||
|
const filteredTasks = computed(() => {
|
||||||
|
if (filter.value === 'active') return tasks.value.active
|
||||||
|
if (filter.value === 'waiting') return tasks.value.waiting
|
||||||
|
if (filter.value === 'stopped') return tasks.value.stopped
|
||||||
|
return [...tasks.value.active, ...tasks.value.waiting, ...tasks.value.stopped]
|
||||||
|
})
|
||||||
|
|
||||||
|
const runtimeLabel = computed(() => (status.value.running ? 'Running' : 'Stopped'))
|
||||||
|
|
||||||
|
function pushError(message: string) {
|
||||||
|
successMessage.value = ''
|
||||||
|
errorMessage.value = message
|
||||||
|
}
|
||||||
|
|
||||||
|
function pushSuccess(message: string) {
|
||||||
|
errorMessage.value = ''
|
||||||
|
successMessage.value = message
|
||||||
|
}
|
||||||
|
|
||||||
|
function rpcConfig() {
|
||||||
|
return {
|
||||||
|
rpcListenPort: rpcPort.value,
|
||||||
|
rpcSecret: rpcSecret.value.trim() || undefined,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDateTime(epochSec: number | null): string {
|
||||||
|
if (!epochSec) return '-'
|
||||||
|
return new Date(epochSec * 1000).toLocaleString()
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatBytes(value: string): string {
|
||||||
|
const n = Number(value)
|
||||||
|
if (!Number.isFinite(n)) return '-'
|
||||||
|
return formatBytesNumber(n)
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatBytesNumber(n: number): string {
|
||||||
|
if (!Number.isFinite(n)) return '-'
|
||||||
|
if (n < 1024) return `${n} B`
|
||||||
|
const kb = n / 1024
|
||||||
|
if (kb < 1024) return `${kb.toFixed(1)} KB`
|
||||||
|
const mb = kb / 1024
|
||||||
|
if (mb < 1024) return `${mb.toFixed(1)} MB`
|
||||||
|
const gb = mb / 1024
|
||||||
|
return `${gb.toFixed(2)} GB`
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatSpeed(value: string): string {
|
||||||
|
const n = Number(value)
|
||||||
|
if (!Number.isFinite(n) || n <= 0) return '0 B/s'
|
||||||
|
if (n < 1024) return `${n} B/s`
|
||||||
|
const kb = n / 1024
|
||||||
|
if (kb < 1024) return `${kb.toFixed(1)} KB/s`
|
||||||
|
const mb = kb / 1024
|
||||||
|
return `${mb.toFixed(1)} MB/s`
|
||||||
|
}
|
||||||
|
|
||||||
|
function progress(task: Aria2Task): number {
|
||||||
|
const total = Number(task.totalLength)
|
||||||
|
const done = Number(task.completedLength)
|
||||||
|
if (!Number.isFinite(total) || total <= 0 || !Number.isFinite(done)) return 0
|
||||||
|
return Math.min(100, Math.max(0, (done / total) * 100))
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refreshEngineStatus() {
|
||||||
|
try {
|
||||||
|
status.value = await getEngineStatus()
|
||||||
|
} catch (error) {
|
||||||
|
pushError(String(error))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refreshTasks(silent = false) {
|
||||||
|
if (!status.value.running) {
|
||||||
|
tasks.value = { active: [], waiting: [], stopped: [] }
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!silent) loadingTasks.value = true
|
||||||
|
try {
|
||||||
|
tasks.value = await listAria2Tasks(rpcConfig())
|
||||||
|
} catch (error) {
|
||||||
|
pushError(String(error))
|
||||||
|
} finally {
|
||||||
|
if (!silent) loadingTasks.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateRefreshTimer() {
|
||||||
|
if (refreshTimer !== null) {
|
||||||
|
window.clearInterval(refreshTimer)
|
||||||
|
refreshTimer = null
|
||||||
|
}
|
||||||
|
if (!autoRefresh.value) return
|
||||||
|
|
||||||
|
refreshTimer = window.setInterval(() => {
|
||||||
|
void refreshEngineStatus()
|
||||||
|
void refreshTasks(true)
|
||||||
|
}, 3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onStartEngine() {
|
||||||
|
loadingEngine.value = true
|
||||||
|
try {
|
||||||
|
status.value = await startEngine({
|
||||||
|
binaryPath: binaryPath.value.trim() || undefined,
|
||||||
|
rpcListenPort: rpcPort.value,
|
||||||
|
rpcSecret: rpcSecret.value.trim() || undefined,
|
||||||
|
downloadDir: downloadDir.value.trim() || undefined,
|
||||||
|
maxConcurrentDownloads: maxConcurrentDownloads.value,
|
||||||
|
split: split.value,
|
||||||
|
})
|
||||||
|
pushSuccess('aria2 engine started.')
|
||||||
|
await refreshTasks()
|
||||||
|
} catch (error) {
|
||||||
|
pushError(String(error))
|
||||||
|
} finally {
|
||||||
|
loadingEngine.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onStopEngine() {
|
||||||
|
loadingEngine.value = true
|
||||||
|
try {
|
||||||
|
status.value = await stopEngine()
|
||||||
|
tasks.value = { active: [], waiting: [], stopped: [] }
|
||||||
|
pushSuccess('aria2 engine stopped.')
|
||||||
|
} catch (error) {
|
||||||
|
pushError(String(error))
|
||||||
|
} finally {
|
||||||
|
loadingEngine.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openAddModal() {
|
||||||
|
showAddModal.value = true
|
||||||
|
addTab.value = 'url'
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeAddModal() {
|
||||||
|
showAddModal.value = false
|
||||||
|
modalDropActive.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function openAddModalForTorrent() {
|
||||||
|
showAddModal.value = true
|
||||||
|
addTab.value = 'torrent'
|
||||||
|
}
|
||||||
|
|
||||||
|
async function toBase64(file: File): Promise<string> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader()
|
||||||
|
reader.onload = () => {
|
||||||
|
const result = reader.result
|
||||||
|
if (typeof result !== 'string') {
|
||||||
|
reject(new Error('파일을 읽을 수 없습니다.'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const base64 = result.includes(',') ? (result.split(',')[1] ?? '') : result
|
||||||
|
resolve(base64)
|
||||||
|
}
|
||||||
|
reader.onerror = () => reject(new Error('파일 읽기 실패'))
|
||||||
|
reader.readAsDataURL(file)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function fileExt(name: string): string {
|
||||||
|
const idx = name.lastIndexOf('.')
|
||||||
|
if (idx < 0) return '-'
|
||||||
|
return name.slice(idx + 1).toLowerCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function applyTorrentFile(file: File) {
|
||||||
|
if (!/\.torrent$/i.test(file.name)) {
|
||||||
|
pushError('torrent 파일만 추가할 수 있습니다.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
torrentBase64.value = await toBase64(file)
|
||||||
|
torrentFileName.value = file.name
|
||||||
|
torrentFileSize.value = file.size
|
||||||
|
torrentFileExt.value = fileExt(file.name)
|
||||||
|
|
||||||
|
if (!addOut.value) {
|
||||||
|
addOut.value = file.name.replace(/\.torrent$/i, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
openAddModalForTorrent()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function applyTorrentPath(path: string) {
|
||||||
|
const payload = await loadTorrentFile(path)
|
||||||
|
torrentBase64.value = payload.base64
|
||||||
|
torrentFileName.value = payload.name
|
||||||
|
torrentFileSize.value = payload.size
|
||||||
|
torrentFileExt.value = fileExt(payload.name)
|
||||||
|
if (!addOut.value) {
|
||||||
|
addOut.value = payload.name.replace(/\\.torrent$/i, '')
|
||||||
|
}
|
||||||
|
openAddModalForTorrent()
|
||||||
|
}
|
||||||
|
|
||||||
|
function triggerTorrentPick() {
|
||||||
|
torrentFileInput.value?.click()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onTorrentFileChange(event: Event) {
|
||||||
|
const input = event.target as HTMLInputElement
|
||||||
|
const file = input.files?.[0]
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
await applyTorrentFile(file)
|
||||||
|
} catch (error) {
|
||||||
|
pushError(String(error))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onModalTorrentDrop(event: DragEvent) {
|
||||||
|
event.preventDefault()
|
||||||
|
modalDropActive.value = false
|
||||||
|
|
||||||
|
const file = event.dataTransfer?.files?.[0]
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
await applyTorrentFile(file)
|
||||||
|
} catch (error) {
|
||||||
|
pushError(String(error))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onModalTorrentDragOver(event: DragEvent) {
|
||||||
|
event.preventDefault()
|
||||||
|
modalDropActive.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function onModalTorrentDragLeave() {
|
||||||
|
modalDropActive.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function extractDroppedFile(event: DragEvent): File | null {
|
||||||
|
const files = event.dataTransfer?.files
|
||||||
|
if (files && files.length > 0) {
|
||||||
|
return files[0] ?? null
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = event.dataTransfer?.items
|
||||||
|
if (!items) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
for (const item of Array.from(items)) {
|
||||||
|
const file = item.getAsFile()
|
||||||
|
if (file) {
|
||||||
|
return file
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWindowDragEnter(event: DragEvent) {
|
||||||
|
event.preventDefault()
|
||||||
|
appDropActive.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWindowDragOver(event: DragEvent) {
|
||||||
|
event.preventDefault()
|
||||||
|
appDropActive.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWindowDragLeave() {
|
||||||
|
appDropActive.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onWindowDrop(event: DragEvent) {
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
appDropActive.value = false
|
||||||
|
|
||||||
|
const file = extractDroppedFile(event)
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
await applyTorrentFile(file)
|
||||||
|
} catch (error) {
|
||||||
|
pushError(String(error))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSubmitAddTask() {
|
||||||
|
if (!status.value.running) {
|
||||||
|
pushError('먼저 엔진을 시작하세요.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loadingAddTask.value = true
|
||||||
|
try {
|
||||||
|
if (addTab.value === 'url') {
|
||||||
|
if (!addUrl.value.trim()) {
|
||||||
|
pushError('URL을 입력하세요.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const gid = await addAria2Uri({
|
||||||
|
rpc: rpcConfig(),
|
||||||
|
uri: addUrl.value.trim(),
|
||||||
|
out: addOut.value.trim() || undefined,
|
||||||
|
dir: downloadDir.value.trim() || undefined,
|
||||||
|
split: addSplit.value,
|
||||||
|
})
|
||||||
|
pushSuccess(`작업이 추가되었습니다. gid=${gid}`)
|
||||||
|
} else {
|
||||||
|
if (!torrentBase64.value.trim()) {
|
||||||
|
pushError('.torrent 파일을 선택하세요.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const gid = await addAria2Torrent({
|
||||||
|
rpc: rpcConfig(),
|
||||||
|
torrentBase64: torrentBase64.value,
|
||||||
|
out: addOut.value.trim() || undefined,
|
||||||
|
dir: downloadDir.value.trim() || undefined,
|
||||||
|
split: addSplit.value,
|
||||||
|
})
|
||||||
|
pushSuccess(`토렌트가 추가되었습니다. gid=${gid}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
addUrl.value = ''
|
||||||
|
addOut.value = ''
|
||||||
|
torrentBase64.value = ''
|
||||||
|
torrentFileName.value = ''
|
||||||
|
torrentFileExt.value = ''
|
||||||
|
torrentFileSize.value = 0
|
||||||
|
showAddModal.value = false
|
||||||
|
await refreshTasks()
|
||||||
|
} catch (error) {
|
||||||
|
pushError(String(error))
|
||||||
|
} finally {
|
||||||
|
loadingAddTask.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await refreshEngineStatus()
|
||||||
|
await refreshTasks()
|
||||||
|
updateRefreshTimer()
|
||||||
|
|
||||||
|
window.addEventListener('dragover', onWindowDragOver)
|
||||||
|
window.addEventListener('dragenter', onWindowDragEnter)
|
||||||
|
window.addEventListener('dragleave', onWindowDragLeave)
|
||||||
|
window.addEventListener('drop', onWindowDrop)
|
||||||
|
|
||||||
|
unlistenDragDrop = await getCurrentWindow().onDragDropEvent(async (event) => {
|
||||||
|
if (event.payload.type === 'over' || event.payload.type === 'enter') {
|
||||||
|
appDropActive.value = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (event.payload.type === 'leave') {
|
||||||
|
appDropActive.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (event.payload.type === 'drop') {
|
||||||
|
appDropActive.value = false
|
||||||
|
const droppedPath = event.payload.paths[0]
|
||||||
|
if (!droppedPath) return
|
||||||
|
try {
|
||||||
|
await applyTorrentPath(droppedPath)
|
||||||
|
} catch (error) {
|
||||||
|
pushError(String(error))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (refreshTimer !== null) {
|
||||||
|
window.clearInterval(refreshTimer)
|
||||||
|
}
|
||||||
|
|
||||||
|
window.removeEventListener('dragover', onWindowDragOver)
|
||||||
|
window.removeEventListener('dragenter', onWindowDragEnter)
|
||||||
|
window.removeEventListener('dragleave', onWindowDragLeave)
|
||||||
|
window.removeEventListener('drop', onWindowDrop)
|
||||||
|
|
||||||
|
if (unlistenDragDrop) {
|
||||||
|
unlistenDragDrop()
|
||||||
|
unlistenDragDrop = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main class="app-shell" :class="{ 'app-drop-active': appDropActive }">
|
||||||
|
<aside class="sidebar">
|
||||||
|
<div class="brand">m</div>
|
||||||
|
<div class="side-icons">
|
||||||
|
<button class="side-icon" title="목록">☰</button>
|
||||||
|
<button class="side-icon add" title="새 작업" @click="openAddModal">＋</button>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<a class="active">다운로드 중</a>
|
||||||
|
<a>대기 중</a>
|
||||||
|
<a>중단됨</a>
|
||||||
|
</nav>
|
||||||
|
<div class="sidebar-foot">
|
||||||
|
<button class="side-icon" title="설정">⚙</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<section class="content">
|
||||||
|
<header class="toolbar">
|
||||||
|
<div class="toolbar-left">
|
||||||
|
<h1>다운로드 중</h1>
|
||||||
|
<span class="count">{{ totalCount }} tasks</span>
|
||||||
|
</div>
|
||||||
|
<div class="toolbar-right">
|
||||||
|
<label class="switcher">
|
||||||
|
<input v-model="autoRefresh" type="checkbox" @change="updateRefreshTimer" />
|
||||||
|
<span>Auto refresh</span>
|
||||||
|
</label>
|
||||||
|
<button class="ghost" :disabled="loadingTasks" @click="refreshTasks()">새로고침</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section v-if="errorMessage" class="notice error">{{ errorMessage }}</section>
|
||||||
|
<section v-if="successMessage" class="notice success">{{ successMessage }}</section>
|
||||||
|
|
||||||
|
<section class="main-grid">
|
||||||
|
<article class="task-pane card">
|
||||||
|
<div class="tabs">
|
||||||
|
<button :class="{ active: filter === 'all' }" @click="filter = 'all'">전체</button>
|
||||||
|
<button :class="{ active: filter === 'active' }" @click="filter = 'active'">
|
||||||
|
다운로드 중 ({{ tasks.active.length }})
|
||||||
|
</button>
|
||||||
|
<button :class="{ active: filter === 'waiting' }" @click="filter = 'waiting'">
|
||||||
|
대기 중 ({{ tasks.waiting.length }})
|
||||||
|
</button>
|
||||||
|
<button :class="{ active: filter === 'stopped' }" @click="filter = 'stopped'">
|
||||||
|
중단됨 ({{ tasks.stopped.length }})
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="task-table-wrap">
|
||||||
|
<table class="task-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>작업</th>
|
||||||
|
<th>상태</th>
|
||||||
|
<th>진행률</th>
|
||||||
|
<th>속도</th>
|
||||||
|
<th>전체 크기</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="task in filteredTasks" :key="task.gid">
|
||||||
|
<td>
|
||||||
|
<div class="file-cell">
|
||||||
|
<strong>{{ task.fileName || '-' }}</strong>
|
||||||
|
<small>{{ task.gid }}</small>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="status-tag" :class="task.status">{{ task.status }}</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="progress-row">
|
||||||
|
<div class="bar">
|
||||||
|
<span :style="{ width: `${progress(task).toFixed(1)}%` }" />
|
||||||
|
</div>
|
||||||
|
<small>{{ progress(task).toFixed(1) }}%</small>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>{{ formatSpeed(task.downloadSpeed) }}</td>
|
||||||
|
<td>{{ formatBytes(task.totalLength) }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr v-if="filteredTasks.length === 0">
|
||||||
|
<td colspan="5" class="empty">현재 다운로드 없음</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="right-pane card">
|
||||||
|
<h2>Engine</h2>
|
||||||
|
<p class="runtime" :class="status.running ? 'ok' : 'off'">{{ runtimeLabel }}</p>
|
||||||
|
<p><strong>PID:</strong> {{ status.pid ?? '-' }}</p>
|
||||||
|
<p><strong>Started:</strong> {{ formatDateTime(status.startedAt) }}</p>
|
||||||
|
|
||||||
|
<div class="engine-actions">
|
||||||
|
<button :disabled="loadingEngine || status.running" @click="onStartEngine">Start</button>
|
||||||
|
<button class="ghost" :disabled="loadingEngine || !status.running" @click="onStopEngine">Stop</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>연결 설정</h3>
|
||||||
|
<label>
|
||||||
|
<span>Binary Path</span>
|
||||||
|
<input v-model="binaryPath" type="text" placeholder="aria2c" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>RPC Port</span>
|
||||||
|
<input v-model.number="rpcPort" type="number" min="1" max="65535" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>RPC Secret</span>
|
||||||
|
<input v-model="rpcSecret" type="text" placeholder="optional" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>폴더</span>
|
||||||
|
<input v-model="downloadDir" type="text" placeholder="/path/to/downloads" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>Split</span>
|
||||||
|
<input v-model.number="split" type="number" min="1" max="64" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>Max Concurrent</span>
|
||||||
|
<input v-model.number="maxConcurrentDownloads" type="number" min="1" max="20" />
|
||||||
|
</label>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div v-if="showAddModal" class="modal-backdrop" @click.self="closeAddModal">
|
||||||
|
<section class="add-modal">
|
||||||
|
<header class="modal-header">
|
||||||
|
<div class="modal-tabs">
|
||||||
|
<button :class="{ active: addTab === 'url' }" @click="addTab = 'url'">URL</button>
|
||||||
|
<button :class="{ active: addTab === 'torrent' }" @click="addTab = 'torrent'">토렌트</button>
|
||||||
|
</div>
|
||||||
|
<button class="icon-btn" @click="closeAddModal">×</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="modal-body">
|
||||||
|
<template v-if="addTab === 'url'">
|
||||||
|
<label>
|
||||||
|
<span>URL</span>
|
||||||
|
<textarea v-model="addUrl" placeholder="한 줄에 작업 URL 하나 (HTTP / FTP / Magnet)" rows="4" />
|
||||||
|
</label>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<input ref="torrentFileInput" class="hidden-input" type="file" accept=".torrent" @change="onTorrentFileChange" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="!torrentBase64"
|
||||||
|
class="torrent-drop-zone"
|
||||||
|
:class="{ active: modalDropActive }"
|
||||||
|
@click="triggerTorrentPick"
|
||||||
|
@dragover="onModalTorrentDragOver"
|
||||||
|
@dragleave="onModalTorrentDragLeave"
|
||||||
|
@drop="onModalTorrentDrop"
|
||||||
|
>
|
||||||
|
<p>토렌트 파일을 여기로 드래그하거나 클릭해서 선택하십시오</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="torrent-selected">
|
||||||
|
<div class="torrent-head">
|
||||||
|
<strong>{{ torrentFileName }}</strong>
|
||||||
|
<button class="ghost small" @click="triggerTorrentPick">파일 변경</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="torrent-file-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>파일 이름</th>
|
||||||
|
<th>파일 확장자</th>
|
||||||
|
<th>파일 크기</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><input type="checkbox" checked disabled /></td>
|
||||||
|
<td>{{ addOut || torrentFileName.replace(/\.torrent$/i, '') }}</td>
|
||||||
|
<td>{{ torrentFileExt || '-' }}</td>
|
||||||
|
<td>{{ formatBytesNumber(torrentFileSize) }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="modal-row">
|
||||||
|
<label>
|
||||||
|
<span>이름 변경</span>
|
||||||
|
<input v-model="addOut" type="text" placeholder="선택" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<span>분할</span>
|
||||||
|
<input v-model.number="addSplit" type="number" min="1" max="64" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<span>폴더</span>
|
||||||
|
<input v-model="downloadDir" type="text" placeholder="/Users/.../Downloads" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="modal-footer">
|
||||||
|
<button class="ghost" @click="closeAddModal">취소</button>
|
||||||
|
<button :disabled="loadingAddTask" @click="onSubmitAddTask">확인</button>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</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 |
41
src/components/HelloWorld.vue
Normal file
41
src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
defineProps<{ msg: string }>()
|
||||||
|
|
||||||
|
const count = ref(0)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1>{{ msg }}</h1>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<button type="button" @click="count++">count is {{ count }}</button>
|
||||||
|
<p>
|
||||||
|
Edit
|
||||||
|
<code>components/HelloWorld.vue</code> to test HMR
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Check out
|
||||||
|
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||||
|
>create-vue</a
|
||||||
|
>, the official Vue + Vite starter
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Learn more about IDE Support for Vue in the
|
||||||
|
<a
|
||||||
|
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||||
|
target="_blank"
|
||||||
|
>Vue Docs Scaling up Guide</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.read-the-docs {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
89
src/lib/engineApi.ts
Normal file
89
src/lib/engineApi.ts
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
import { invoke } from '@tauri-apps/api/core'
|
||||||
|
|
||||||
|
export interface EngineStatus {
|
||||||
|
running: boolean
|
||||||
|
pid: number | null
|
||||||
|
binaryPath: string | null
|
||||||
|
args: string[]
|
||||||
|
startedAt: number | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EngineStartPayload {
|
||||||
|
binaryPath?: string
|
||||||
|
rpcListenPort?: number
|
||||||
|
rpcSecret?: string
|
||||||
|
downloadDir?: string
|
||||||
|
maxConcurrentDownloads?: number
|
||||||
|
split?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Aria2RpcConfig {
|
||||||
|
rpcListenPort?: number
|
||||||
|
rpcSecret?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Aria2Task {
|
||||||
|
gid: string
|
||||||
|
status: string
|
||||||
|
totalLength: string
|
||||||
|
completedLength: string
|
||||||
|
downloadSpeed: string
|
||||||
|
dir: string
|
||||||
|
fileName: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Aria2TaskSnapshot {
|
||||||
|
active: Aria2Task[]
|
||||||
|
waiting: Aria2Task[]
|
||||||
|
stopped: Aria2Task[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AddUriPayload {
|
||||||
|
rpc: Aria2RpcConfig
|
||||||
|
uri: string
|
||||||
|
out?: string
|
||||||
|
dir?: string
|
||||||
|
split?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AddTorrentPayload {
|
||||||
|
rpc: Aria2RpcConfig
|
||||||
|
torrentBase64: string
|
||||||
|
out?: string
|
||||||
|
dir?: string
|
||||||
|
split?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TorrentFilePayload {
|
||||||
|
name: string
|
||||||
|
base64: string
|
||||||
|
size: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getEngineStatus(): Promise<EngineStatus> {
|
||||||
|
return invoke<EngineStatus>('engine_status')
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function startEngine(payload: EngineStartPayload): Promise<EngineStatus> {
|
||||||
|
return invoke<EngineStatus>('engine_start', { request: payload })
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function stopEngine(): Promise<EngineStatus> {
|
||||||
|
return invoke<EngineStatus>('engine_stop')
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function listAria2Tasks(config: Aria2RpcConfig): Promise<Aria2TaskSnapshot> {
|
||||||
|
return invoke<Aria2TaskSnapshot>('aria2_list_tasks', { config })
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function addAria2Uri(payload: AddUriPayload): Promise<string> {
|
||||||
|
return invoke<string>('aria2_add_uri', { request: payload })
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function addAria2Torrent(payload: AddTorrentPayload): Promise<string> {
|
||||||
|
return invoke<string>('aria2_add_torrent', { request: payload })
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function loadTorrentFile(path: string): Promise<TorrentFilePayload> {
|
||||||
|
return invoke<TorrentFilePayload>('load_torrent_file', { path })
|
||||||
|
}
|
||||||
5
src/main.ts
Normal file
5
src/main.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
497
src/style.css
Normal file
497
src/style.css
Normal file
@@ -0,0 +1,497 @@
|
|||||||
|
:root {
|
||||||
|
--bg-app: #121317;
|
||||||
|
--bg-sidebar: #0a0b0d;
|
||||||
|
--bg-sidebar-active: #202227;
|
||||||
|
--bg-main: #15171c;
|
||||||
|
--bg-card: #1f2127;
|
||||||
|
--bg-card-soft: #2a2d34;
|
||||||
|
--line: #31353f;
|
||||||
|
--line-soft: #3a3f4a;
|
||||||
|
--text-main: #e4e8f1;
|
||||||
|
--text-sub: #a4adbf;
|
||||||
|
--brand: #5e62f3;
|
||||||
|
--brand-dark: #4e52dd;
|
||||||
|
--success: #27b47a;
|
||||||
|
--danger: #d06375;
|
||||||
|
--radius: 10px;
|
||||||
|
|
||||||
|
font-family: "SF Pro Text", "Pretendard", "Noto Sans KR", sans-serif;
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--bg-app);
|
||||||
|
color: var(--text-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
#app { min-height: 100vh; }
|
||||||
|
|
||||||
|
.app-shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 74px 1fr;
|
||||||
|
background: var(--bg-main);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-shell.app-drop-active::after {
|
||||||
|
content: 'torrent 파일을 놓으면 추가 창이 열립니다';
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(15, 18, 24, 0.74);
|
||||||
|
border: 2px dashed rgba(122, 131, 255, 0.72);
|
||||||
|
color: #d5daff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
z-index: 90;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
background: var(--bg-sidebar);
|
||||||
|
border-right: 1px solid #14161b;
|
||||||
|
padding: 12px 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #d7dff0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-icons { display: flex; flex-direction: column; gap: 8px; }
|
||||||
|
|
||||||
|
.side-icon {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: transparent;
|
||||||
|
color: #9ca6ba;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-icon:hover,
|
||||||
|
.side-icon.add { background: #15181e; color: #d8def0; }
|
||||||
|
|
||||||
|
.sidebar nav {
|
||||||
|
margin-top: 6px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar nav a {
|
||||||
|
color: #98a3b8;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.74rem;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar nav a.active,
|
||||||
|
.sidebar nav a:hover { background: var(--bg-sidebar-active); color: #ecf0fa; }
|
||||||
|
|
||||||
|
.sidebar-foot { margin-top: auto; }
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 14px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-left { display: flex; align-items: baseline; gap: 10px; }
|
||||||
|
|
||||||
|
h1 { margin: 0; font-size: 1.16rem; font-weight: 600; }
|
||||||
|
|
||||||
|
.count { color: var(--text-sub); font-size: 0.8rem; }
|
||||||
|
|
||||||
|
.toolbar-right { display: flex; align-items: center; gap: 8px; }
|
||||||
|
|
||||||
|
.switcher {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-sub);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice.error {
|
||||||
|
background: rgba(208, 99, 117, 0.16);
|
||||||
|
color: #ffb8c3;
|
||||||
|
border: 1px solid rgba(208, 99, 117, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice.success {
|
||||||
|
background: rgba(39, 180, 122, 0.16);
|
||||||
|
color: #a7f0cc;
|
||||||
|
border: 1px solid rgba(39, 180, 122, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) 280px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-pane { padding: 10px; min-height: 560px; }
|
||||||
|
|
||||||
|
.tabs { display: flex; gap: 6px; margin-bottom: 8px; }
|
||||||
|
|
||||||
|
.tabs button {
|
||||||
|
border: 1px solid var(--line-soft);
|
||||||
|
background: #23262d;
|
||||||
|
color: #a4aec0;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 7px;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs button.active {
|
||||||
|
border-color: #575ced;
|
||||||
|
background: #30335c;
|
||||||
|
color: #e0e3ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-table-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
|
||||||
|
|
||||||
|
.task-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.84rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-table th,
|
||||||
|
.task-table td {
|
||||||
|
text-align: left;
|
||||||
|
padding: 9px;
|
||||||
|
border-bottom: 1px solid #2b2f37;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-table th {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: #8f9ab0;
|
||||||
|
background: #1a1c22;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-cell { display: flex; flex-direction: column; gap: 2px; }
|
||||||
|
.file-cell strong { font-weight: 600; }
|
||||||
|
.file-cell small { color: var(--text-sub); font-size: 0.72rem; }
|
||||||
|
|
||||||
|
.status-tag {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: capitalize;
|
||||||
|
background: #343948;
|
||||||
|
color: #aeb8d1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag.active { background: #1d365f; color: #9ec7ff; }
|
||||||
|
.status-tag.waiting { background: #504122; color: #f0ce86; }
|
||||||
|
.status-tag.complete,
|
||||||
|
.status-tag.stopped { background: #264735; color: #9fe5c2; }
|
||||||
|
.status-tag.error,
|
||||||
|
.status-tag.removed { background: #5a2d39; color: #ffb8c3; }
|
||||||
|
|
||||||
|
.progress-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
position: relative;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #343844;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar span {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0 auto 0 0;
|
||||||
|
background: linear-gradient(90deg, #5b86ff, #5860f0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-row small { color: #a8b2c4; font-size: 0.72rem; }
|
||||||
|
|
||||||
|
.empty { text-align: center; color: var(--text-sub); }
|
||||||
|
|
||||||
|
.right-pane {
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-pane h2 { margin: 0; font-size: 0.98rem; }
|
||||||
|
.right-pane h3 { margin: 6px 0 2px; font-size: 0.86rem; }
|
||||||
|
|
||||||
|
.runtime { margin: 0; font-weight: 700; }
|
||||||
|
.runtime.ok { color: var(--success); }
|
||||||
|
.runtime.off { color: #949db0; }
|
||||||
|
|
||||||
|
.right-pane p { margin: 0; color: #9aa3b8; font-size: 0.8rem; }
|
||||||
|
|
||||||
|
.right-pane label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #a3acbe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-pane input,
|
||||||
|
.add-modal input,
|
||||||
|
.add-modal textarea {
|
||||||
|
height: 33px;
|
||||||
|
border: 1px solid #434955;
|
||||||
|
border-radius: 7px;
|
||||||
|
padding: 7px 9px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-main);
|
||||||
|
background: #242830;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-modal textarea {
|
||||||
|
resize: none;
|
||||||
|
height: auto;
|
||||||
|
min-height: 92px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-pane input:focus,
|
||||||
|
.add-modal input:focus,
|
||||||
|
.add-modal textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #656cf5;
|
||||||
|
box-shadow: 0 0 0 2px rgba(94, 98, 243, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: 1px solid var(--brand);
|
||||||
|
background: var(--brand);
|
||||||
|
color: #f7f8ff;
|
||||||
|
border-radius: 7px;
|
||||||
|
padding: 7px 11px;
|
||||||
|
font-size: 0.81rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
|
||||||
|
|
||||||
|
button.ghost {
|
||||||
|
background: #2a2d34;
|
||||||
|
color: #c1c8d8;
|
||||||
|
border-color: #424854;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.ghost:hover {
|
||||||
|
background: #333741;
|
||||||
|
border-color: #525a69;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.small { padding: 4px 8px; font-size: 0.74rem; }
|
||||||
|
|
||||||
|
button:disabled { opacity: 0.55; cursor: not-allowed; }
|
||||||
|
|
||||||
|
.engine-actions { display: flex; gap: 7px; margin: 4px 0 6px; }
|
||||||
|
|
||||||
|
.modal-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.45);
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 90px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-modal {
|
||||||
|
width: min(680px, calc(100vw - 32px));
|
||||||
|
background: var(--bg-card-soft);
|
||||||
|
border: 1px solid #434955;
|
||||||
|
border-radius: 9px;
|
||||||
|
box-shadow: 0 22px 56px rgba(0, 0, 0, 0.44);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-bottom: 1px solid #484f5b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-tabs { display: flex; gap: 8px; }
|
||||||
|
|
||||||
|
.modal-tabs button {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #a9b1c4;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 4px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-tabs button.active { color: #e7eaff; border-bottom-color: #5b62f3; }
|
||||||
|
|
||||||
|
.icon-btn {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: transparent;
|
||||||
|
color: #a5aec1;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-input { display: none; }
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #a9b2c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body small { color: #919cb2; font-size: 0.74rem; }
|
||||||
|
|
||||||
|
.torrent-drop-zone {
|
||||||
|
border: 1px dashed #5a606f;
|
||||||
|
border-radius: 8px;
|
||||||
|
min-height: 118px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px;
|
||||||
|
color: #adb5c7;
|
||||||
|
background: #242830;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.torrent-drop-zone.active {
|
||||||
|
border-color: #6f75ff;
|
||||||
|
background: #2b2f45;
|
||||||
|
color: #d4d9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.torrent-selected {
|
||||||
|
border: 1px solid #454b59;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.torrent-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 8px 10px;
|
||||||
|
background: #2f333a;
|
||||||
|
border-bottom: 1px solid #454b59;
|
||||||
|
}
|
||||||
|
|
||||||
|
.torrent-head strong {
|
||||||
|
font-size: 0.84rem;
|
||||||
|
color: #d8deed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.torrent-file-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.torrent-file-table th,
|
||||||
|
.torrent-file-table td {
|
||||||
|
border-bottom: 1px solid #3f4450;
|
||||||
|
padding: 8px;
|
||||||
|
color: #cad2e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.torrent-file-table th {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: #a0abc0;
|
||||||
|
background: #262a31;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 140px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
border-top: 1px solid #484f5b;
|
||||||
|
padding: 10px 12px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1180px) {
|
||||||
|
.main-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.app-shell { grid-template-columns: 1fr; }
|
||||||
|
.sidebar { display: none; }
|
||||||
|
}
|
||||||
16
tsconfig.app.json
Normal file
16
tsconfig.app.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
26
tsconfig.node.json
Normal file
26
tsconfig.node.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user