fix(web): fix ignore case & use template (#1329)

* fix(web): fix ignorecase

* fix(web): fix use Template

web/src/components/ConfirmButton/index.tsx

@@ -40,7 +40,7 @@ const ConfirmButton = ({
     <>
       {React.cloneElement(children, {
         onClick: (event: any) => {
-          event?.preventDefault();
+          // event?.preventDefault();
           onOpen();
         },
       })}

web/src/pages/functionTemplate/FuncTemplateItem/TemplateFunctionInfo.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import { Divider, useColorMode } from "@chakra-ui/react";
+import clsx from "clsx";
+
+import MonacoEditor from "../Mods/MonacoEditor";
+
+import { TFunctionTemplate } from "@/apis/typing";
+
+const TemplateFunctionInfo = ({
+  template,
+  popover = false,
+}: {
+  template: TFunctionTemplate;
+  popover?: boolean;
+}) => {
+  const { colorMode } = useColorMode();
+  const darkMode = colorMode === "dark";
+
+  const [currentFunction, setCurrentFunction] = useState<TFunctionTemplate["items"][number]>(
+    template.items[0],
+  );
+
+  return (
+    <>
+      <div className="flex justify-between">
+        <div className="w-full">
+          <div className="truncate pb-2 text-[24px] font-semibold">{template.name}</div>
+          <div className="truncate text-second">{template.description}</div>
+        </div>
+      </div>
+      <Divider marginY={4} variant="dashed" />
+      <div className="mb-2 flex w-full overflow-auto">
+        {template.items.map((item) => (
+          <div
+            className={clsx(
+              "mb-2 mr-2 cursor-pointer rounded-md border px-8 py-1 text-[14px]",
+              !darkMode && "bg-[#F6F8F9]",
+              "hover:border-blue-400 hover:bg-blue-100 hover:text-blue-700",
+              currentFunction?.name === item.name && "border-blue-400 bg-blue-100 text-blue-700",
+            )}
+            onClick={() => {
+              setCurrentFunction(item);
+            }}
+            key={item.name}
+          >
+            {item.name}
+          </div>
+        ))}
+      </div>
+      <div
+        className="overflow-auto"
+        style={{
+          height: popover ? "400px" : "60vh",
+        }}
+      >
+        <MonacoEditor
+          value={currentFunction.source.code}
+          colorMode={colorMode}
+          readOnly={true}
+          title={currentFunction.name}
+          currentFunction={currentFunction}
+        />
+      </div>
+    </>
+  );
+};
+
+export default TemplateFunctionInfo;

web/src/pages/functionTemplate/FuncTemplateItem/index.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { ChevronRightIcon } from "@chakra-ui/icons";
+import { useColorMode } from "@chakra-ui/react";
+import clsx from "clsx";
+
+import { changeURL } from "@/utils/format";
+
+import TemplateInfo from "../Mods/TemplateInfo";
+import { useGetFunctionTemplateUsedByQuery, useGetOneFunctionTemplateQuery } from "../service";
+
+import TemplateFunctionInfo from "./TemplateFunctionInfo";
+
+import { TFunctionTemplate } from "@/apis/typing";
+
+const FuncTemplateItem = (props: { setSelectedItem: any; selectedItem: any; isModal: boolean }) => {
+  const { setSelectedItem, isModal } = props;
+  const { colorMode } = useColorMode();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [template, setTemplate] = useState<TFunctionTemplate>();
+  const [usedBy, setUsedBy] = useState<any[]>([]);
+  const pathname = window.location.href;
+  const id = pathname.split("/").pop();
+
+  useGetOneFunctionTemplateQuery(
+    { id: id },
+    {
+      enabled: (id as string)?.length > 12,
+      onSuccess: (data: any) => {
+        setTemplate(data.data[0]);
+      },
+    },
+  );
+
+  useGetFunctionTemplateUsedByQuery(
+    { id: id },
+    {
+      enabled: (id as string)?.length > 12,
+      onSuccess: (data: any) => {
+        setUsedBy(data.data.list);
+      },
+    },
+  );
+
+  return (
+    <div
+      className={clsx(
+        "flex flex-col",
+        colorMode === "dark" ? "" : "bg-white",
+        isModal ? "" : "px-20 pt-8",
+      )}
+    >
+      <div className="text-lg">
+        <span
+          className="cursor-pointer text-second"
+          onClick={() => {
+            navigate(changeURL(`/recommended`));
+            setSelectedItem({ text: t("Template.Recommended"), value: "recommended" });
+          }}
+        >
+          {t("HomePage.NavBar.funcTemplate")}
+        </span>
+        <span className="px-3">
+          <ChevronRightIcon />
+        </span>
+        <span>{t("Template.Details")}</span>
+      </div>
+      {template && (
+        <div className="flex pt-3">
+          <div className="mr-9 h-full w-4/5">
+            <TemplateFunctionInfo template={template} />
+          </div>
+          <div className="w-1/5">
+            <TemplateInfo functionTemplate={template} usedBy={usedBy} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FuncTemplateItem;