Merge pull request #13 from alley-rs/dev

feat: 将 Result 组件从 Search 中分离，添加到 App 组件中

src/App.scss

@@ -0,0 +1,5 @@
+#right {
+  flex: 2;
+  justify-content: center;
+  align-items: center;
+}

src/App.tsx

@@ -1,11 +1,12 @@
-import { createResource, createSignal } from "solid-js";
-import "./App.scss";
+import { createResource, createSignal, Show } from "solid-js";
+import { LazyFlex, LazyToast } from "./lazy";
+import { AppContext } from "./context";
 import { getAllHistory, readConfigFile } from "./command";
 import History from "./components/history";
 import Search from "./components/search";
-import { AppContext } from "./context";
 import Settings from "./components/settings";
-import { LazyToast } from "./lazy";
+import Result from "./components/result";
+import "./App.scss";
 
 const App = () => {
   const [items, { refetch: refetchHistoryItems }] =
@@ -29,7 +30,15 @@ const App = () => {
       >
         <History items={items()} />
 
-        <Search />
+        <LazyFlex id="right" direction="vertical">
+          <Search />
+
+          <LazyFlex class="parsed-result" direction="vertical" gap={8}>
+            <Show when={parsedResult()?.links.length}>
+              <Result {...parsedResult()!} />
+            </Show>
+          </LazyFlex>
+        </LazyFlex>
 
         <Settings />
       </AppContext.Provider>

src/components/result/index.scss

@@ -0,0 +1,58 @@
+.parsed-result {
+  background-color: rgba($color: #000000, $alpha: 0.2);
+  backdrop-filter: blur(5px);
+  border-radius: 16px;
+  padding: 5px 10px;
+  width: 440px;
+  min-height: 440px;
+  color: #fff;
+  box-shadow: var(--alley-box-shadow-secondary);
+  margin-top: 20px;
+
+  .alley-button {
+    --alley-color-button-text: #fff;
+
+    &-plain:hover:not(:disabled) {
+      color: #fff;
+      background: var(--alley-color-primary);
+    }
+  }
+
+  .parsed-result-header {
+    flex: 1;
+  }
+
+  .parsed-links-wrapper {
+    flex: 8;
+  }
+
+  .parsed-links {
+    flex: 8;
+
+    .link {
+      color: var(--alley-color-primary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .parsed-links-note {
+    flex: 1;
+  }
+}
+
+.parsed-result-dialog {
+  .alley-dialog-close-button {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    color: #fff;
+    z-index: 99;
+  }
+}

src/components/result/index.tsx

@@ -0,0 +1,141 @@
+import { AiFillChrome, AiFillCopy, AiFillPlayCircle } from "solid-icons/ai";
+import { createEffect, For, useContext } from "solid-js";
+import { createStore } from "solid-js/store";
+import { insertHistory, open, play } from "~/command";
+import { AppContext } from "~/context";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { platforms } from "~/parser";
+import {
+  LazyAlert,
+  LazyButton,
+  LazyCol,
+  LazyDivider,
+  LazyFlex,
+  LazyLabel,
+  LazyRow,
+  LazySpace,
+  LazyTooltip,
+} from "~/lazy";
+import "./index.scss";
+
+const Result = (props: ParsedResult) => {
+  const [{ refetchHistoryItems }, { setToast }] = useContext(AppContext)!;
+
+  const [links, setLinks] = createStore<string[]>([]);
+
+  createEffect(() => setLinks(props.links ?? []));
+
+  const onPlay = async (index: number) => {
+    await play(props!.links[index]);
+
+    // 解析出来的链接只能访问一次，访问后即删除
+    setLinks((prev) => prev.filter((_, idx) => index !== idx));
+
+    await insertHistory({
+      id: 0,
+      platform: props.platform,
+      anchor: props.anchor,
+      room_id: props.roomID,
+      category: props.category,
+      last_title: props.title,
+      last_play_time: new Date(),
+    });
+    refetchHistoryItems();
+  };
+
+  const onCopy = async (link: string) => {
+    await writeText(link);
+    setToast({
+      type: "success",
+      message: "已复制链接到系统剪贴板，可粘贴到其他播放器播放",
+    });
+  };
+
+  return (
+    <>
+      <LazyFlex direction="vertical" class="parsed-result-header">
+        <LazySpace justify="between">
+          <h3>{props.title}</h3>
+
+          <LazyTooltip text="浏览器中打开直播间" delay={1000}>
+            <LazyButton
+              icon={<AiFillChrome />}
+              shape="circle"
+              size="small"
+              type="plain"
+              onClick={() =>
+                open(platforms[props.platform].roomBaseURL + props.roomID)
+              }
+            />
+          </LazyTooltip>
+        </LazySpace>
+
+        <LazySpace gap={16}>
+          <LazySpace>
+            <LazyLabel>分类</LazyLabel>
+            <span>{props.category ?? "无"}</span>
+          </LazySpace>
+
+          <LazySpace>
+            <LazyLabel>主播</LazyLabel>
+            <span>{props.anchor}</span>
+          </LazySpace>
+        </LazySpace>
+
+        <LazyDivider
+          dashed
+          style={{ "--alley-color-split": "#fff", margin: "8px 0" }}
+        />
+      </LazyFlex>
+
+      <LazyFlex direction="vertical" class="parsed-links-wrapper">
+        <div class="parsed-links">
+          <For each={links}>
+            {(link, index) => (
+              <LazyRow>
+                <LazyCol span={21} align="center">
+                  <span class="link">{link}</span>
+                </LazyCol>
+
+                <LazyCol span={3} align="center" justify="end">
+                  <LazyTooltip
+                    text="播放此直播流"
+                    delay={1000}
+                    placement="bottom"
+                  >
+                    <LazyButton
+                      icon={<AiFillPlayCircle />}
+                      shape="circle"
+                      size="small"
+                      type="plain"
+                      onClick={() => onPlay(index())}
+                    />
+                  </LazyTooltip>
+
+                  <LazyTooltip text="复制链接" delay={1000} placement="bottom">
+                    <LazyButton
+                      icon={<AiFillCopy />}
+                      shape="circle"
+                      size="small"
+                      type="plain"
+                      onClick={() => onCopy(link)}
+                    />
+                  </LazyTooltip>
+                </LazyCol>
+              </LazyRow>
+            )}
+          </For>
+        </div>
+
+        <LazyAlert
+          class="parsed-links-note"
+          type="info"
+          message="点击播放按钮后因播放器需发起网络请求需要短暂的时间，等待 1~3 秒若未打开播放器，则为播放失败，届时请播放其他链接或重新解析。"
+          showIcon
+        />
+      </LazyFlex>
+    </>
+  );
+};
+
+export default Result;

src/components/search/index.scss

@@ -1,5 +1,4 @@
 #search {
-  flex: 2;
   justify-content: center;
   align-items: center;
 
@@ -8,65 +7,6 @@
   }
 }
 
-.parsed-result {
-  background-color: rgba($color: #000000, $alpha: 0.2);
-  backdrop-filter: blur(5px);
-  border-radius: 16px;
-  padding: 5px 10px;
-  width: 440px;
-  min-height: 440px;
-  color: #fff;
-  box-shadow: var(--alley-box-shadow-secondary);
-  margin-top: 20px;
-
-  .alley-button {
-    --alley-color-button-text: #fff;
-
-    &-plain:hover:not(:disabled) {
-      color: #fff;
-      background: var(--alley-color-primary);
-    }
-  }
-
-  .parsed-result-header {
-    flex: 1;
-  }
-
-  .parsed-links-wrapper {
-    flex: 8;
-  }
-
-  .parsed-links {
-    flex: 8;
-
-    .link {
-      color: var(--alley-color-primary);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: pointer;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .parsed-links-note {
-    flex: 1;
-  }
-}
-
-.parsed-result-dialog {
-  .alley-dialog-close-button {
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    color: #fff;
-    z-index: 99;
-  }
-}
-
 .bili-cookie-dialog {
   textarea {
     width: 480px;

src/components/search/index.tsx

@@ -1,7 +1,6 @@
 import "./index.scss";
 import { children, createSignal, For, useContext } from "solid-js";
 import { platforms } from "~/parser";
-import Result from "./result";
 import { AiOutlineCheck } from "solid-icons/ai";
 import { AppContext } from "~/context";
 import BiliCookieEditor from "./bili-cookie";
@@ -16,7 +15,7 @@ import {
 } from "~/lazy";
 
 const Search = () => {
-  const [_, { setToast }, { config }, { parsedResult, setParsedResult }] =
+  const [_, { setToast }, { config }, { setParsedResult }] =
     useContext(AppContext)!;
 
   const [input, setInput] = createSignal("");
@@ -112,8 +111,6 @@ const Search = () => {
         <LazySpace gap={8} style={{ "margin-top": "1rem" }}>
           {buttons()}
         </LazySpace>
-
-        <Result {...parsedResult()!} />
       </LazyFlex>
 
       <LazyDialog