✨ 脚本列表最后更新列添加检查更新图标 (#1304)

* ✨ 脚本列表最后更新列添加检查更新图标

closes #1143

* 由 React重绘 改成 CSS

* ♻️ 使用 TailwindCSS 替代 inline style 和 React state 处理视觉效果

* 🔥 删除 linter 自动生成的 CSS 文件，已用 TailwindCSS 替代

* 🐛 防止检查更新时重复点击触发并发请求

---------

Co-authored-by: cyfung1031 <44498510+cyfung1031@users.noreply.github.com>

Author: CodFrm

src/pages/options/routes/ScriptList/components.tsx

@@ -7,7 +7,7 @@ import { TbWorldWww } from "react-icons/tb";
 import { semTime } from "@App/pkg/utils/dayjs";
 import { useTranslation } from "react-i18next";
 import { ListHomeRender } from "../utils";
-import { IconEdit, IconLink, IconUserAdd } from "@arco-design/web-react/icon";
+import { IconEdit, IconLink, IconSync, IconUserAdd } from "@arco-design/web-react/icon";
 import type { SearchType } from "@App/app/service/service_worker/types";
 import type { TFunction } from "i18next";
 import type { SearchFilterKeyEntry, SearchFilterRequest } from "./SearchFilter";
@@ -133,52 +133,61 @@ HomeCell.displayName = "HomeCell";
 
 export const UpdateTimeCell = React.memo(({ className, script }: { className?: string; script: ScriptLoading }) => {
   const { t } = useTranslation();
-  const { handleClick } = {
-    handleClick: () => {
-      if (!script.checkUpdateUrl) {
-        Message.warning(t("update_not_supported")!);
-        return;
-      }
-      Message.info({
-        id: "checkupdate",
-        content: t("checking_for_updates"),
-      });
-      scriptClient
-        .requestCheckUpdate(script.uuid)
-        .then((res) => {
-          if (res) {
-            Message.warning({
-              id: "checkupdate",
-              content: t("new_version_available"),
-            });
-          } else {
-            Message.success({
-              id: "checkupdate",
-              content: t("latest_version"),
-            });
-          }
-        })
-        .catch((e) => {
-          Message.error({
+  const [checking, setChecking] = React.useState(false);
+  const handleClick = () => {
+    if (checking) return;
+    if (!script.checkUpdateUrl) {
+      Message.warning(t("update_not_supported")!);
+      return;
+    }
+    Message.info({
+      id: "checkupdate",
+      content: t("checking_for_updates"),
+    });
+    setChecking(true);
+    scriptClient
+      .requestCheckUpdate(script.uuid)
+      .then((res) => {
+        if (res) {
+          Message.warning({
             id: "checkupdate",
-            content: `${t("update_check_failed")}: ${e.message}`,
+            content: t("new_version_available"),
           });
+        } else {
+          Message.success({
+            id: "checkupdate",
+            content: t("latest_version"),
+          });
+        }
+      })
+      .catch((e) => {
+        Message.error({
+          id: "checkupdate",
+          content: `${t("update_check_failed")}: ${e.message}`,
         });
-    },
+      })
+      .finally(() => {
+        setChecking(false);
+      });
   };
 
   return (
-    <Tooltip content={t("check_update")} position="tl">
-      <Typography.Text
-        className={className}
-        style={{
-          cursor: "pointer",
-        }}
-        onClick={handleClick}
-      >
-        {script.updatetime && semTime(new Date(script.updatetime))}
-      </Typography.Text>
-    </Tooltip>
+    <Space size={4}>
+      <Tooltip content={t("check_update")} position="tl">
+        <Typography.Text className={`tw-cursor-pointer ${className ?? ""}`} onClick={handleClick}>
+          {script.updatetime && semTime(new Date(script.updatetime))}
+        </Typography.Text>
+      </Tooltip>
+      {script.checkUpdateUrl && (
+        <Tooltip content={t("check_update")} position="tl">
+          <IconSync
+            className={`tw-cursor-pointer tw-opacity-45 hover:tw-opacity-100 tw-transition-opacity ${checking ? "arco-icon-loading tw-opacity-100" : ""}`}
+            spin={checking}
+            onClick={handleClick}
+          />
+        </Tooltip>
+      )}
+    </Space>
   );
 });
 UpdateTimeCell.displayName = "UpdateTimeCell";