feat(web): recommend function template config with templateid (#1947)

* feat(web): recommend function template config with templateid

web/src/pages/app/functions/mods/FunctionPanel/CreateModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import {
@@ -31,7 +31,10 @@ import useFunctionStore from "../../../store";
 import { TFunctionTemplate, TMethod } from "@/apis/typing";
 import FunctionTemplate from "@/pages/functionTemplate";
 import TemplateCard from "@/pages/functionTemplate/Mods/TemplateCard";
-import { useGetRecommendFunctionTemplatesQuery } from "@/pages/functionTemplate/service";
+import {
+  useGetFunctionTemplatesQuery,
+  useGetRecommendFunctionTemplatesQuery,
+} from "@/pages/functionTemplate/service";
 import useTemplateStore from "@/pages/functionTemplate/store";
 import useGlobalStore from "@/pages/globalStore";
 
@@ -54,6 +57,13 @@ const CreateModal = (props: {
     useFunctionStore();
   const { setShowTemplateItem } = useTemplateStore();
 
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const templateId = searchParams.get("templateId");
+    if (!templateId) return;
+    localStorage.setItem("templateId", templateId);
+  }, []);
+
   const defaultValues = {
     name: functionItem?.name || "",
     description: functionItem?.desc || "",
@@ -100,6 +110,31 @@ const CreateModal = (props: {
       enabled: !isOpen && !isEdit,
     },
   );
+  const searchedTemplateList = useGetFunctionTemplatesQuery(
+    {
+      page: 1,
+      pageSize: 3,
+      keyword: localStorage.getItem("templateId") || "",
+      type: "default",
+      asc: 1,
+      sort: null,
+    },
+    {
+      enabled: !!localStorage.getItem("templateId") && !isEdit,
+    },
+  );
+
+  const recommendedList = useMemo(
+    () => InitialTemplateList.data?.data.list || [],
+    [InitialTemplateList],
+  );
+  const searchedList = useMemo(
+    () => searchedTemplateList.data?.data.list || [],
+    [searchedTemplateList],
+  );
+  const showedList = useMemo(() => {
+    return [...searchedList, ...recommendedList].slice(0, 3);
+  }, [searchedList, recommendedList]);
 
   const onSubmit = async (data: any) => {
     let res: any = {};
@@ -226,7 +261,6 @@ const CreateModal = (props: {
                   />
                 </div>
               </FormControl>
-
               <Button
                 type="submit"
                 onClick={handleSubmit(onSubmit)}
@@ -246,7 +280,7 @@ const CreateModal = (props: {
                     {t("Template.Recommended")}
                   </div>
                   <div className="mb-11 flex w-full">
-                    {InitialTemplateList.data?.data.list.map((item: TFunctionTemplate) => (
+                    {showedList.map((item: TFunctionTemplate) => (
                       <section
                         className="h-28 w-1/3 px-1.5 py-1"
                         key={item._id}