From 4da6114eeedeb3dbfa7e3a874fcfec0ed125ab2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=8C=AF?= Date: Sat, 27 May 2023 16:18:06 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2=E5=B8=83?= =?UTF-8?q?=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src-tauri/src/command.rs | 5 +++ src/App.css | 88 +++++++++++++++++++++++++++++++++++++--- src/App.tsx | 73 +++++++++++++++++++++------------ src/main.tsx | 2 +- yarn.lock | 5 +++ 6 files changed, 143 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 5dad0f5..d4f2b92 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@tauri-apps/api": "^1.2.0", + "normalize.css": "^8.0.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/src-tauri/src/command.rs b/src-tauri/src/command.rs index ce052ec..a240085 100644 --- a/src-tauri/src/command.rs +++ b/src-tauri/src/command.rs @@ -5,6 +5,8 @@ use tauri::api::process::{Command, CommandEvent}; use std::process::Command as SysCommand; // use tauri::Wry; + +// 测试端口是否被占用 #[tauri::command] pub fn if_port_available() -> bool { // let if_free = port_check::is_local_port_free(8080); @@ -21,6 +23,7 @@ pub fn if_port_available() -> bool { } } +// 释放端口 #[tauri::command] pub fn release_port () -> bool { let output = SysCommand::new("lsof") @@ -42,6 +45,7 @@ pub fn release_port () -> bool { true } +// rust端启动node服务,未完全完成,仅启动了node服务,未获取unblockMusic的输出 #[tauri::command] pub fn start_server(app_handle: tauri::AppHandle) { tauri::async_runtime::spawn(async move { @@ -69,6 +73,7 @@ pub fn start_server(app_handle: tauri::AppHandle) { }); } +// 测试版本 #[tauri::command] pub fn get_node_version() -> String { let output = Command::new("node").args(["-v"]).output().unwrap(); diff --git a/src/App.css b/src/App.css index a89ebd1..eee6afb 100644 --- a/src/App.css +++ b/src/App.css @@ -1,7 +1,85 @@ -.logo.vite:hover { - filter: drop-shadow(0 0 2em #747bff); +.container { + /* background-color: red; */ + width: 100vw; + height: 100vh; + padding: 8px; + display: flex; + box-sizing: border-box; } - -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafb); +.left-content { + width: 35vw; + height: 100%; + display: flex; + flex-flow: column nowrap; + justify-content: space-between; + /* align-items: center; */ + /* background-color: blue; */ +} +.port-status { + /* color: red; */ + margin: 0 auto; +} +.right-content { + width: 65vw; + height: 100%; + display: flex; + flex-direction: column; + padding-left: 16px; + box-sizing: border-box; + /* justify-content: space-between; */ + /* align-items: center; */ +} +.log-grid { + display: grid; + grid-template-columns: 1fr; + /* grid-template: 1fr / 1f 1fr; */ +} +.log-desc { + display: grid; + grid-template-columns: 2fr 1fr; + place-items: center; +} +.log-desc > span { + font-weight: bold; + font-size: 1.2em; +} +.log-item { + display: grid; + grid-template-columns: 2fr 1fr; + place-items: center; + margin-top: 10px; +} +.log-item > .source { + /* place-self: center center; */ +} +.log-title { + font-size: 24px; + font-weight: bold; + margin-bottom: 16px; + text-align: center; +} +.source-title { + margin-right: 10px; +} +.source-list { + display: flex; + /* justify-content: center; */ + /* align-items: center; */ + width: 100%; +} +.source-item { + margin-right: 10px; +} +.button { + width: 100%; + height: 40px; + margin-top: 10px; + background-color: #ccc; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} +.button:active { + opacity: 0.5; } diff --git a/src/App.tsx b/src/App.tsx index 3c79fd0..c036444 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import { useEffect, useRef, useState } from "react"; import reactLogo from "./assets/react.svg"; import { invoke } from "@tauri-apps/api/tauri"; +import "normalize.css"; import "./App.css"; import { Command } from "@tauri-apps/api/shell"; import { resolveResource } from "@tauri-apps/api/path"; @@ -11,8 +12,8 @@ function App() { const [name, setName] = useState(""); const childRef = useRef(); const [sourceList, setSourceList] = useState([ - { name: "酷狗", key: "kugou", active: true }, { name: "酷我", key: "kuwo", active: true }, + { name: "酷狗", key: "kugou", active: true }, { name: "B站", key: "bilibili", active: false }, ]); const [list, setList] = useState([]); @@ -26,7 +27,7 @@ function App() { }, []); const start = async () => { - console.log("", 1<=2); + console.log("", 1 <= 2); const ifPortAvailable = await invoke("if_port_available"); console.log("%cifPortAvailable", "color: #22E1FF; font-size: 16px", ifPortAvailable); if (ifPortAvailable) { @@ -154,35 +155,57 @@ function App() { const handleCloseSysProxy = () => { const command = new Command("setProxy", ["-setwebproxystate", "Wi-Fi", "off"]).execute(); - } + }; return (
-
- {sourceList.map(each => ( -
- - {each.name} +
+
+
+
选择代理来源:
+ {sourceList.map(each => ( +
+ + {each.name} +
+ ))} + {/**/} + {/*酷狗*/} + {/**/} + {/*酷我*/} +
+
+ 开启代理 +
+
+ 关闭代理 +
+
+ 强制释放端口 +
+
+ 开启系统代理 +
+
+ 关闭系统代理
- ))} - {/**/} - {/*酷狗*/} - {/**/} - {/*酷我*/} +
+

8080端口状态: {portStatus ? "已开启" : "空闲"}

-

8080端口状态: {portStatus ? "已开启" : "空闲"}

- - - - - -
- {list.map((each, index) => ( -
- {each.name} - 音源: {getSource(each.url)} +
+
日志
+
+
+ 歌曲名称 + 歌曲来源
- ))} + {list.map((each, index) => ( +
+ {each.name} + {getSource(each.url)} +
+ ))} +
); diff --git a/src/main.tsx b/src/main.tsx index f5a4ea4..3b29992 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; -import "./styles.css"; +// import "./styles.css"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( <> diff --git a/yarn.lock b/yarn.lock index 366052b..fa0e63a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -643,6 +643,11 @@ node-releases@^2.0.8: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f" integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w== +normalize.css@^8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3" + integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg== + picocolors@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"