✨ 站点匹配在列表里可以展示并支持点击 #419

Author: CodFrm

src/app/service/offscreen/client.ts

@@ -33,8 +33,8 @@ export function stopScript(msg: MessageSend, uuid: string) {
   return sendMessage(msg, "offscreen/script/stopScript", uuid);
 }
 
-export function createObjectURL(msg: MessageSend, data: Blob) {
-  return sendMessage(msg, "offscreen/createObjectURL", data);
+export function createObjectURL(msg: MessageSend, data: Blob, persistence: boolean = false) {
+  return sendMessage(msg, "offscreen/createObjectURL", { data, persistence });
 }
 
 export class VscodeConnectClient extends Client {

src/app/service/offscreen/index.ts

@@ -58,11 +58,14 @@ export class OffscreenManager {
     const vscodeConnect = new VSCodeConnect(this.windowServer.group("vscodeConnect"), this.extensionMessage);
     vscodeConnect.init();
 
-    this.windowServer.on("createObjectURL", (data: Blob) => {
-      const url = URL.createObjectURL(data);
-      setTimeout(() => {
-        URL.revokeObjectURL(url);
-      }, 1000 * 60);
+    this.windowServer.on("createObjectURL", (params: { data: Blob; persistence: boolean }) => {
+      const url = URL.createObjectURL(params.data);
+      if (!params.persistence) {
+        // 如果不是持久化的，则在1分钟后释放
+        setTimeout(() => {
+          URL.revokeObjectURL(url);
+        }, 1000 * 60);
+      }
       return Promise.resolve(url);
     });
   }

src/app/service/service_worker/client.ts

@@ -349,4 +349,8 @@ export class SystemClient extends Client {
   connectVSCode(params: Parameters<VSCodeConnect["connect"]>[0]): ReturnType<VSCodeConnect["connect"]> {
     return this.do("connectVSCode", params);
   }
+
+  loadFavicon(icon: string): Promise<string> {
+    return this.do("loadFavicon", icon);
+  }
 }

src/app/service/service_worker/system.ts

@@ -1,6 +1,6 @@
 import { SystemConfig } from "@App/pkg/config/config";
 import { Group, MessageSend } from "@Packages/message/server";
-import { VscodeConnectClient } from "../offscreen/client";
+import { createObjectURL, VscodeConnectClient } from "../offscreen/client";
 import Cache from "@App/app/cache";
 
 // 一些系统服务
@@ -30,5 +30,14 @@ export class SystemService {
     this.group.on("connectVSCode", (params) => {
       return vscodeConnect.connect(params);
     });
+    this.group.on("loadFavicon", async (url) => {
+      // 加载favicon图标
+      return fetch(url)
+        .then((response) => response.blob())
+        .then((blob) => createObjectURL(this.sender, blob, true))
+        .catch(() => {
+          return "";
+        });
+    });
   }
 }

src/pages/options/routes/ScriptList.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import {
+  Avatar,
   Button,
   Card,
   Divider,
@@ -16,6 +17,7 @@ import {
   Tooltip,
   Typography,
 } from "@arco-design/web-react";
+import { TbWorldWww } from "react-icons/tb";
 import { ColumnProps } from "@arco-design/web-react/es/Table";
 import { ComponentsProps } from "@arco-design/web-react/es/Table/interface";
 import {
@@ -30,7 +32,7 @@ import {
 } from "@App/app/repo/scripts";
 import {
   IconClockCircle,
-  IconCommon,
+  IconDesktop,
   IconEdit,
   IconLink,
   IconMenu,
@@ -88,9 +90,9 @@ import {
 } from "@App/pages/store/features/script";
 import { message, systemConfig } from "@App/pages/store/global";
 import { ValueClient } from "@App/app/service/service_worker/client";
-import { JSX } from "react/jsx-runtime";
+import { loadScriptFavicons } from "@App/pages/store/utils";
 
-type ListType = Script & { loading?: boolean };
+type ListType = ScriptLoading;
 
 function ScriptList() {
   const [userConfig, setUserConfig] = useState<{
@@ -113,7 +115,12 @@ function ScriptList() {
   const [dealColumns, setDealColumns] = useState<ColumnProps[]>([]);
 
   useEffect(() => {
-    dispatch(fetchScriptList());
+    dispatch(fetchScriptList()).then((action) => {
+      if (fetchScriptList.fulfilled.match(action)) {
+        // 在脚本列表加载完成后，加载favicon
+        loadScriptFavicons(action.payload);
+      }
+    });
   }, [dispatch]);
 
   const columns: ColumnProps[] = [
@@ -250,7 +257,7 @@ function ScriptList() {
       title: t("apply_to_run_status"),
       width: t("script_list_apply_to_run_status_width"),
       className: "apply_to_run_status",
-      render(col, item: Script) {
+      render(col, item: ListType) {
         const toLogger = () => {
           navigate({
             pathname: "logger",
@@ -266,20 +273,44 @@ function ScriptList() {
           });
         };
         if (item.type === SCRIPT_TYPE_NORMAL) {
+          // 处理站点icon
           return (
-            <Tooltip content={t("foreground_page_script_tooltip")}>
-              <Tag
-                style={{
-                  cursor: "pointer",
-                }}
-                icon={<IconCommon color="" />}
-                color="cyan"
-                bordered
-                onClick={toLogger}
-              >
-                {t("page_script")}
-              </Tag>
-            </Tooltip>
+            <>
+              <Avatar.Group size={20} style={{ margin: 10 }}>
+                {item.favorite &&
+                  // 排序并且只显示前5个
+                  // 排序将有icon的放在前面
+                  [...item.favorite]
+                    .sort((a, b) => {
+                      if (a.icon && !b.icon) return -1;
+                      if (!a.icon && b.icon) return 1;
+                      return a.match.localeCompare(b.match);
+                    })
+                    .slice(0, 5)
+                    .map((fav) => (
+                      <Avatar
+                        key={fav.match}
+                        shape="square"
+                        style={{
+                          backgroundColor: "unset",
+                          borderWidth: 1,
+                        }}
+                        className={fav.website ? "cursor-pointer" : "cursor-default"}
+                        onClick={() => {
+                          if (fav.website) {
+                            window.open(fav.website, "_blank");
+                          }
+                        }}
+                      >
+                        {fav.icon ? (
+                          <img title={fav.match} src={fav.icon} />
+                        ) : (
+                          <TbWorldWww title={fav.match} color="#aaa" size={24} />
+                        )}
+                      </Avatar>
+                    ))}
+              </Avatar.Group>
+            </>
           );
         }
         let tooltip = "";

src/pages/store/features/script.ts

@@ -19,6 +19,8 @@ import {
   ValueClient,
 } from "@App/app/service/service_worker/client";
 import { message } from "../global";
+import { extractFavicons } from "@App/pkg/utils/favicon";
+import { store } from "../store";
 
 export const scriptClient = new ScriptClient(message);
 export const subscribeClient = new SubscribeClient(message);
@@ -52,7 +54,15 @@ export const requestDeleteScript = createAsyncThunk("script/deleteScript", async
   return scriptClient.delete(uuid);
 });
 
-export type ScriptLoading = Script & { enableLoading?: boolean; actionLoading?: boolean };
+export type ScriptLoading = Script & {
+  enableLoading?: boolean;
+  actionLoading?: boolean;
+  favorite?: {
+    match: string;
+    website?: string;
+    icon?: string;
+  }[];
+};
 
 const updateScript = (scripts: ScriptLoading[], uuid: string, update: (s: ScriptLoading) => void) => {
   const script = scripts.find((s) => s.uuid === uuid);
@@ -120,6 +130,12 @@ export const scriptSlice = createAppSlice({
         return s;
       });
     },
+    setScriptFavicon: (state, action: PayloadAction<{ uuid: string; fav: { match: string; icon?: string }[] }>) => {
+      const script = state.scripts.find((s) => s.uuid === action.payload.uuid);
+      if (script) {
+        script.favorite = action.payload.fav;
+      }
+    },
   },
   extraReducers: (builder) => {
     builder

src/pages/store/utils.ts

@@ -0,0 +1,53 @@
+import { Script } from "@App/app/repo/scripts";
+import { extractFavicons } from "@App/pkg/utils/favicon";
+import { store } from "./store";
+import { scriptSlice } from "./features/script";
+import Cache from "@App/app/cache";
+import { SystemClient } from "@App/app/service/service_worker/client";
+import { message } from "./global";
+
+// 在scriptSlice创建后处理favicon加载
+export const loadScriptFavicons = (scripts: Script[]) => {
+  scripts.forEach(async (item) => {
+    const icons = await Cache.getInstance().getOrSet(`favicon:${item.uuid}`, () => {
+      return extractFavicons(item.metadata!.match || [], item.metadata!.include || []).then(async (icons) => {
+        if (icons.length > 0) {
+          // 从缓存中获取favicon图标
+          const systemClient = new SystemClient(message);
+          const newIcons = await Promise.all(
+            icons.map((icon) => {
+              // 没有的话缓存到本地使用URL.createObjectURL
+              if (!icon.icon) {
+                return Promise.resolve({
+                  match: icon.match,
+                  website: icon.website,
+                  icon: "",
+                });
+              }
+              // 因为需要持久化URL.createObjectURL，所以需要通过调用到offscreen来创建
+              return systemClient
+                .loadFavicon(icon.icon)
+                .then((url) => {
+                  return {
+                    match: icon.match,
+                    website: icon.website,
+                    icon: url,
+                  };
+                })
+                .catch(() => {
+                  return {
+                    match: icon.match,
+                    website: icon.website,
+                    icon: "",
+                  };
+                });
+            })
+          );
+          return newIcons;
+        }
+        return [];
+      });
+    });
+    store.dispatch(scriptSlice.actions.setScriptFavicon({ uuid: item.uuid, fav: icons }));
+  });
+};