From d6662983ff5764f2e6002c0994b970c9de121c85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=8C=AF?= Date: Tue, 6 Jun 2023 23:03:12 +0800 Subject: [PATCH] fix UI --- .postcssrc.json | 5 ++ package.json | 58 +++++++++------- src-tauri/Cargo.toml | 2 +- src-tauri/tauri.conf.json | 6 +- src/App.css | 143 ++++++++++++++++++++++++++++++++++++-- src/App.tsx | 41 +++++++---- yarn.lock | 54 +++++++++++++- 7 files changed, 260 insertions(+), 49 deletions(-) create mode 100644 .postcssrc.json diff --git a/.postcssrc.json b/.postcssrc.json new file mode 100644 index 0000000..529e0a2 --- /dev/null +++ b/.postcssrc.json @@ -0,0 +1,5 @@ +{ + "plugins": { + "autoprefixer": {} + } +} diff --git a/package.json b/package.json index d4f2b92..bc26c20 100644 --- a/package.json +++ b/package.json @@ -1,29 +1,33 @@ { - "name": "unblockNCM", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "preview": "vite preview", - "tauri": "tauri" - }, - "dependencies": { - "@tauri-apps/api": "^1.2.0", - "normalize.css": "^8.0.1", - "react": "^18.2.0", - "react-dom": "^18.2.0" - }, - "devDependencies": { - "@tauri-apps/cli": "^1.2.3", - "@types/node": "^18.7.10", - "@types/react": "^18.0.15", - "@types/react-dom": "^18.0.6", - "@vitejs/plugin-react": "^3.0.0", - "eslint-config-lz": "^2.0.0", - "prettier": "^2.8.8", - "typescript": "^4.9.5", - "vite": "^4.2.1" - } + "name": "unblockNCM", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview", + "tauri": "tauri" + }, + "dependencies": { + "@tauri-apps/api": "^1.2.0", + "normalize.css": "^8.0.1", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@tauri-apps/cli": "^1.2.3", + "@types/node": "^18.7.10", + "@types/react": "^18.0.15", + "@types/react-dom": "^18.0.6", + "@vitejs/plugin-react": "^3.0.0", + "autoprefixer": "^10.4.14", + "eslint-config-lz": "^2.0.0", + "prettier": "^2.8.8", + "typescript": "^4.9.5", + "vite": "^4.2.1" + }, + "browserslist": [ + "defaults" + ] } diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 52c2d7f..a6d3fb0 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -13,7 +13,7 @@ edition = "2021" tauri-build = { version = "1.2", features = [] } [dependencies] -tauri = { version = "1.2", features = ["notification-all", "path-all", "shell-all", "system-tray"] } +tauri = { version = "1.2", features = ["macos-private-api", "notification-all", "path-all", "shell-all", "system-tray"] } serde = { version = "1.0", features = ["derive"] } port_check = "0.1.5" serde_json = "1.0" diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index dad8dde..99c6f8f 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -66,9 +66,13 @@ "resizable": true, "title": "unblockNCM", "width": 800, - "height": 600 + "height": 600, + "hiddenTitle": true, + "titleBarStyle": "Overlay", + "transparent": true } ], + "macOSPrivateApi": true, "systemTray": { "iconPath":"icons/icon.png", "iconAsTemplate": true diff --git a/src/App.css b/src/App.css index eee6afb..8948899 100644 --- a/src/App.css +++ b/src/App.css @@ -1,10 +1,32 @@ +/*@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");*/ + +html, +body { + /*border-radius: 10px;*/ + overflow: hidden; + /*background-color: red;*/ + /*padding-top: 10px;*/ +} + +* { + user-select: none; +} + +.element-inside-your-body { + overflow: auto; +} + .container { - /* background-color: red; */ + /* background-color: #fff; */ width: 100vw; height: 100vh; - padding: 8px; + padding: 28px 8px 8px; display: flex; box-sizing: border-box; + background-color: #202124; + /*color: ;*/ + color: #21ebff; + /*color: #00ffe7;*/ } .left-content { width: 35vw; @@ -18,6 +40,7 @@ .port-status { /* color: red; */ margin: 0 auto; + user-select: none; } .right-content { width: 65vw; @@ -71,15 +94,125 @@ margin-right: 10px; } .button { - width: 100%; + width: 140px; height: 40px; - margin-top: 10px; - background-color: #ccc; + /*width: max-content;*/ + margin-top: 20px; + /*background-color: #ccc;*/ display: flex; align-items: center; justify-content: center; cursor: pointer; + position: relative; + color: #21ebff; + font-size: 20px; + letter-spacing: 2px; + padding: 2px 10px; + overflow: hidden; + transition: 0.5s; +} +.button:hover { + background-color: #21ebff; + color: #111; + box-shadow: 0 0 50px #21ebff; + transition-delay: 0.1s; +} +.button-wrp { + width: 100%; + display: flex; + flex-flow: column nowrap; + /*justify-content: center;*/ + align-items: center; +} +.button:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 5px; + border-top: 2px solid #21ebff; + border-left: 2px solid #21ebff; + /*background-color: #21ebff;*/ + transition: 0.5s; +} +.button:after { + content: ""; + position: absolute; + bottom: 0; + right: 0; + width: 5px; + height: 5px; + border-bottom: 2px solid #21ebff; + border-right: 2px solid #21ebff; + /*background-color: #21ebff;*/ + transition: 0.5s; +} +.button:hover:before { + width: 100%; + height: 100%; + /*transition: 0s;*/ +} +.button:hover:after { + width: 100%; + height: 100%; + /*transition: 0s;*/ } .button:active { opacity: 0.5; } + +.author-wrp { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + bottom: -10px; + right: 10px; +} +.author-wrp>sub{ + margin-right: 4px; +} +.author { + font-size: 24px; +} +.author span { + display: table-cell; + margin: 0; + padding: 0; + animation: animate 2s linear infinite; +} +.author span:nth-child(1) { + animation-delay: 0s; +} +.author span:nth-child(2) { + animation-delay: 0.25s; +} +.author span:nth-child(3) { + animation-delay: 0.5s; +} +.author span:nth-child(4) { + animation-delay: 0.75s; +} +.author span:nth-child(5) { + animation-delay: 1s; +} +.author span:nth-child(6) { + animation-delay: 1.25s; +} + +@keyframes animate { + 0%, + 100% { + color: #fff; + filter: blur(2px); + text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff, 0 0 40px #00b3ff, 0 0 80px #00b3ff, 0 0 120px #00b3ff, + 0 0 200px #00b3ff, 0 0 300px #00b3ff, 0 0 400px #00b3ff; + } + 5%, + 95% { + color: #111; + filter: blur(0); + text-shadow: none; + } +} diff --git a/src/App.tsx b/src/App.tsx index c036444..fef30e5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -174,20 +174,22 @@ function App() { {/**/} {/*酷我*/} -
- 开启代理 -
-
- 关闭代理 -
-
- 强制释放端口 -
-
- 开启系统代理 -
-
- 关闭系统代理 +
+
+ 开启代理 +
+
+ 关闭代理 +
+
+ 强制释放端口 +
+
+ 开启系统代理 +
+
+ 关闭系统代理 +

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

@@ -206,6 +208,17 @@ function App() { ))} +
+ made by +

+ R + u + s + k + e + r +

+
); diff --git a/yarn.lock b/yarn.lock index fa0e63a..c48b91b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -471,6 +471,18 @@ ansi-styles@^3.2.1: dependencies: color-convert "^1.9.0" +autoprefixer@^10.4.14: + version "10.4.14" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d" + integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ== + dependencies: + browserslist "^4.21.5" + caniuse-lite "^1.0.30001464" + fraction.js "^4.2.0" + normalize-range "^0.1.2" + picocolors "^1.0.0" + postcss-value-parser "^4.2.0" + browserslist@^4.21.3: version "4.21.5" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7" @@ -481,11 +493,26 @@ browserslist@^4.21.3: node-releases "^2.0.8" update-browserslist-db "^1.0.10" +browserslist@^4.21.5: + version "4.21.7" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.7.tgz#e2b420947e5fb0a58e8f4668ae6e23488127e551" + integrity sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA== + dependencies: + caniuse-lite "^1.0.30001489" + electron-to-chromium "^1.4.411" + node-releases "^2.0.12" + update-browserslist-db "^1.0.11" + caniuse-lite@^1.0.30001449: version "1.0.30001481" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz#f58a717afe92f9e69d0e35ff64df596bfad93912" integrity sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ== +caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001489: + version "1.0.30001495" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001495.tgz#64a0ccef1911a9dcff647115b4430f8eff1ef2d9" + integrity sha512-F6x5IEuigtUfU5ZMQK2jsy5JqUUlEFRVZq8bO2a+ysq5K7jD6PPc9YXZj78xDNS3uNchesp1Jw47YXEqr+Viyg== + chalk@^2.0.0: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" @@ -529,6 +556,11 @@ electron-to-chromium@^1.4.284: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.377.tgz#7f326a0b2c1b96eca6bb65907addc505d0d15989" integrity sha512-H3BYG6DW5Z+l0xcfXaicJGxrpA4kMlCxnN71+iNX+dBLkRMOdVJqFJiAmbNZZKA1zISpRg17JR03qGifXNsJtw== +electron-to-chromium@^1.4.411: + version "1.4.421" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.421.tgz#2b8c0ef98ba00d4aef4c664933d570922da52161" + integrity sha512-wZOyn3s/aQOtLGAwXMZfteQPN68kgls2wDAnYOA8kCjBvKVrW5RwmWVspxJYTqrcN7Y263XJVsC66VCIGzDO3g== + esbuild@^0.17.5: version "0.17.18" resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.18.tgz#f4f8eb6d77384d68cd71c53eb6601c7efe05e746" @@ -572,6 +604,11 @@ eslint-config-lz@^2.0.0: resolved "https://registry.yarnpkg.com/eslint-config-lz/-/eslint-config-lz-2.0.0.tgz#ce082513c29079c454885d172c1f1682ee41b0fa" integrity sha512-JSAlwLeevT+eI0vMv1ygw/HTTGAyfIZHWieaalXmzH4r54a+36OWcZ0Qgxw2gVpnLYeLJJqElv3usIzgUEKO6g== +fraction.js@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950" + integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA== + fsevents@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" @@ -638,11 +675,21 @@ nanoid@^3.3.6: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== +node-releases@^2.0.12: + version "2.0.12" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.12.tgz#35627cc224a23bfb06fb3380f2b3afaaa7eb1039" + integrity sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ== + node-releases@^2.0.8: version "2.0.10" resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f" integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w== +normalize-range@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" + integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA== + normalize.css@^8.0.1: version "8.0.1" resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3" @@ -653,6 +700,11 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== +postcss-value-parser@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + postcss@^8.4.23: version "8.4.23" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.23.tgz#df0aee9ac7c5e53e1075c24a3613496f9e6552ab" @@ -728,7 +780,7 @@ typescript@^4.9.5: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== -update-browserslist-db@^1.0.10: +update-browserslist-db@^1.0.10, update-browserslist-db@^1.0.11: version "1.0.11" resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940" integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==