调整页面布局

LastStranger · May 27, 2023 · 4da6114 · 4da6114
1 parent 0c02010
commit 4da6114
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<any>();
     const [sourceList, setSourceList] = useState<any[]>([
-        { 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<any[]>([]);
@@ -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 (
         <div className="container">
-            <div>
-                {sourceList.map(each => (
-                    <div key={each.key}>
-                        <input name={each.name} type="checkbox" checked={each.active} onChange={handleSelect} />
-                        <span>{each.name}</span>
+            <div className="left-content">
+                <div>
+                    <div className="source-list">
+                        <div className="source-title">选择代理来源: </div>
+                        {sourceList.map(each => (
+                            <div key={each.key} className="source-item">
+                                <input name={each.name} type="checkbox" checked={each.active} onChange={handleSelect} />
+                                <span>{each.name}</span>
+                            </div>
+                        ))}
+                        {/*<input type="checkbox" />*/}
+                        {/*酷狗*/}
+                        {/*<input type="checkbox" />*/}
+                        {/*酷我*/}
+                    </div>
+                    <div className="button" onClick={start}>
+                        开启代理
+                    </div>
+                    <div className="button" onClick={handleClose}>
+                        关闭代理
+                    </div>
+                    <div className="button" onClick={handleReleasePort}>
+                        强制释放端口
+                    </div>
+                    <div className="button" onClick={handleStartSysProxy}>
+                        开启系统代理
+                    </div>
+                    <div className="button" onClick={handleCloseSysProxy}>
+                        关闭系统代理
                     </div>
-                ))}
-                {/*<input type="checkbox" />*/}
-                {/*酷狗*/}
-                {/*<input type="checkbox" />*/}
-                {/*酷我*/}
+                </div>
+                <h3 className="port-status">8080端口状态: {portStatus ? "已开启" : "空闲"}</h3>
             </div>
-            <h1>8080端口状态: {portStatus ? "已开启" : "空闲"}</h1>
-            <button onClick={start}>开启代理</button>
-            <button onClick={handleClose}>关闭代理</button>
-            <button onClick={handleReleasePort}>强制释放端口</button>
-            <button onClick={handleStartSysProxy}>开启系统代理</button>
-            <button onClick={handleCloseSysProxy}>关闭系统代理</button>
-            <div>
-                {list.map((each, index) => (
-                    <div key={index}>
-                        <span>{each.name}</span>
-                        <a href={each.url}>音源: {getSource(each.url)}</a>
+            <div className="right-content">
+                <div className="log-title">日志</div>
+                <div>
+                    <div className="log-desc">
+                        <span>歌曲名称</span>
+                        <span>歌曲来源</span>
                     </div>
-                ))}
+                    {list.map((each, index) => (
+                        <div className="log-item" key={index}>
+                            <span>{each.name}</span>
+                            <span className="source">{getSource(each.url)}</span>
+                        </div>
+                    ))}
+                </div>
             </div>
         </div>
     );

diff --git 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
@@ -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"