[mod] gui 开发, 引入 toast, 超多优化ヾ(≧▽≦*)o

crates/gui/package.json

@@ -13,7 +13,8 @@
     "license": "MIT",
     "dependencies": {
         "@tauri-apps/api": "^1.4.0",
-        "solid-js": "^1.7.8"
+        "solid-js": "^1.7.8",
+        "solid-toast": "^0.5.0"
     },
     "devDependencies": {
         "@tauri-apps/cli": "^1.4.0",

crates/gui/src/App.css

@@ -16,6 +16,7 @@
   background-color: #262626;
   box-sizing: border-box;
   border-right: #363636 1px solid;
+  overflow: auto;
 }
 
 .loader {
@@ -25,12 +26,21 @@
   text-align: center;
 }
 
-.logo {
+.release {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo,
+.name,
+.version {
   color: #fff;
+  display: inline-flex;
 }
 
 .name {
-  color: #fff;
   font-size: 20px;
   font-weight: bold;
 }
@@ -41,58 +51,64 @@
   font-size: 12px;
 }
 
-.loader-item-container {
-  margin-top: 40px;
-  padding: 0 20px;
+.live-item-container {
+  margin: 10px 20px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+input,
+button {
+  text-align: center;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #ffffff;
+  background-color: #0f0f0f98;
+  transition: border-color 0.25s;
+  box-shadow: inset 0 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.1), 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 1.5px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .2), 0 0 0 0 transparent;
 }
 
-.loader-item {
-  width: 100%;
-  display: flex;
-  padding: 10px;
-  border-bottom: #363636 1px solid;
+button {
+  cursor: pointer;
+  background-color: #d57614;
 }
 
-.loader-item-info {
-  width: 61.8%;
-  text-align: left;
+button:hover {
+  filter: brightness(1.2);
 }
 
-.loader-item-info-title {
+.live-item {
+  display: inline-flex;
+  padding: 6px 15px;
+  margin: 3px;
   color: #fff;
-  font-size: 14px;
+  background-color: #3f3f3f;
 }
 
-.loader-item-info-description {
-  padding: 3px 0;
-  color: #aaa9a9;
-  font-size: 12px;
+.live-item.is-checked {
+  background-color: #d57614;
+  box-shadow: inset 0 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.09), 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 1.5px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .2), 0 0 0 0 transparent;
+
 }
 
-.loader-item-control {
-  flex: 1;
-  text-align: right;
-  justify-content: center;
+.rid-input {
+  margin: 10px 20px;
 }
 
-.loader-item-control button {
-  box-sizing: border-box;
-  width: 80px;
-  height: 30px;
-  color: #fff;
-  font-size: 12px;
-  padding: 5px 10px;
-  border: none;
-  border-radius: 8px;
-  background-color: #3f3f3f;
-  cursor: pointer;
-  box-shadow: inset 0 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.09), 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 1.5px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .2), 0 0 0 0 transparent;
+
+/* 美化滚动条 */
+::-webkit-scrollbar {
+  width: 0;
 }
 
-.loader-item-control-new button {
-  background-color: #ec9f17;
+::-webkit-scrollbar-track {
+  background-color: #3f3f3f;
 }
 
-.hover-buling:hover {
-  filter: brightness(1.2);
+::-webkit-scrollbar-thumb {
+  background-color: #555;
 }

crates/gui/src/App.tsx

@@ -2,18 +2,24 @@ import "./App.css";
 
 import { invoke } from "@tauri-apps/api/tauri";
 import { createSignal, For, onMount } from "solid-js";
+import toast, { Toaster } from "solid-toast";
 
 import logo from "./assets/logo.png";
 import Bar from "./components/Bar";
 import SilderItem, { SilderItemProps } from "./components/SilderItem";
+import allLives from "./model/Live";
 
 const App = () => {
-    const [repos] = createSignal<SilderItemProps[]>([]);
+    const [repos, setRepos] = createSignal<SilderItemProps[]>([
+        { live: "bili", rid: "12345", title: "BBBBB", url: "https://123.com" },
+    ]);
+    const [live, setLive] = createSignal<string>("bili");
+    const [rid, setRid] = createSignal<string>("");
 
     onMount(async () => {
-        // 全局取消右键菜单
+        // 全局取消右键菜单;
         // document.oncontextmenu = (event) => {
-        //   event.preventDefault();
+        //     event.preventDefault();
         // };
 
         // 避免窗口闪烁, 等待500ms再显示窗口
@@ -30,25 +36,76 @@ const App = () => {
 
     invoke<string>("greet");
 
+    const onFuck = () => {
+        if (rid() == "") {
+            toast.error("房间号不能为空");
+        } else {
+            // TODO 调用服务获取信息
+            const newRepos = [
+                {
+                    live: live(),
+                    rid: rid(),
+                    title: rid(),
+                    url: "https://bilibili.com/" + rid(),
+                },
+                ...repos(),
+            ];
+            setRepos(newRepos);
+            toast.success("获取成功");
+        }
+    };
+
     return (
         <>
             <div class="container  not-draggable">
                 <div class="sider">
                     <For each={repos()}>
-                        {(item) => (
-                            <SilderItem name={item.name} path={item.path} />
-                        )}
+                        {(item) => <SilderItem {...item} />}
                     </For>
                 </div>
                 <div data-tauri-drag-region class="loader">
                     <Bar maximize={false} />
-
-                    <div>
+                    <div data-tauri-drag-region class="release">
                         <img src={logo} alt="Logo" width={"100px"} />
                         <div class="name">Seam</div>
                         <div class="version">0.1.0</div>
                     </div>
+
+                    <input
+                        placeholder="房间号"
+                        class="rid-input"
+                        onInput={(event) => setRid(event.target.value)}
+                    />
+                    <button onClick={async () => onFuck()}>获取</button>
+
+                    <div class="live-item-container">
+                        <For each={allLives()}>
+                            {(item) => (
+                                <button
+                                    classList={{
+                                        "is-checked": live() === item.cmd,
+                                    }}
+                                    class="live-item"
+                                    onClick={() => setLive(item.cmd)}>
+                                    {item.name}
+                                </button>
+                            )}
+                        </For>
+                    </div>
                 </div>
+                <Toaster
+                    position="bottom-center"
+                    gutter={8}
+                    toastOptions={{
+                        // Define default options that each toast will inherit. Will be overwritten by individual toast options
+                        className: "",
+                        duration: 5000,
+                        style: {
+                            background: "#363636",
+                            color: "#fff",
+                        },
+                    }}
+                />
             </div>
         </>
     );

crates/gui/src/components/Bar.tsx

@@ -48,7 +48,7 @@ const Bar = (props: BarProps) => {
     const setting = { ...defaultProps, ...props };
     return (
         <>
-            <div class="top-bar">
+            <div data-tauri-drag-region class="top-bar">
                 <div class="top-bar-button-container">
                     <Show when={setting.minimize}>
                         <div

crates/gui/src/components/SilderItem.tsx

@@ -1,39 +1,34 @@
 import "../css/SilderItem.css";
 
+import toast from "solid-toast";
+
 export interface SilderItemProps {
-    name: string;
-    path: string;
+    live: string;
+    rid: string;
+    title: string;
+    url: string;
 }
 
-const More = () => {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="sider-item-svg-menu-icon">
-            <circle cx="12" cy="12" r="1" />
-            <circle cx="12" cy="5" r="1" />
-            <circle cx="12" cy="19" r="1" />
-        </svg>
-    );
+const copy = async (text: string) => {
+    try {
+        await navigator.clipboard.writeText(text);
+        toast.success("复制成功");
+    } catch (err) {
+        toast.error("复制失败");
+    }
 };
 
 const SilderItem = (props: SilderItemProps) => {
     return (
         <div class="sider-item">
             <div class="sider-item-info">
-                <div class="sider-item-name">{props.name}</div>
-                <div class="sider-item-path">{props.path}</div>
+                <div class="sider-item-title">{props.title}</div>
+                <div class="sider-item-live-rid">
+                    {props.live} ◆ {props.rid}
+                </div>
             </div>
-            <div class="sider-item-menu">
-                <More />
+            <div class="sider-item-button">
+                <button onClick={() => copy(props.url)}>复制</button>
             </div>
         </div>
     );

crates/gui/src/css/SilderItem.css

@@ -15,33 +15,18 @@
     flex: 1;
 }
 
-.sider-item-name {
+.sider-item-title {
     color: #fff;
-    font-size: 15px;
+    font-size: 14px;
 }
 
-.sider-item-path {
-    padding-top: 3px;
+.sider-item-live-rid {
     color: #aaa9a9;
     font-size: 12px;
 }
 
-.sider-item-menu {
-    display: inline;
-    justify-items: center;
-    padding: 7px 0;
-}
-
-.sider-item-svg-menu-icon {
-    height: 18px;
-    width: 18px;
-    stroke-width: 1.75px;
-    cursor: pointer;
-    color: #aaa9a9;
-    text-align: center;
-    justify-content: center;
-}
-
-.sider-item-svg-menu-icon:hover {
-    color: #fff;
+/* 垂直居中 */
+.sider-item-button {
+    display: flex;
+    align-items: center;
 }