shalu-marketplace/src/pages/template/index.tsx

import { useState, useEffect } from "react";
import ItemCard from "@/components/ItemCard";
import { APPLICATION_SCENARIOS_OPTIONS } from "@/constants";
import { useRequest } from "umi";
import { GetTemplatePublicList } from "@/api/templateStore";
import { Input, Spin, Empty, Pagination } from "antd";
import { MODULE_TEMPLATE_TYPE } from "@/constants";
import noDataImg from "@/assets/no-data.svg";
import '@/style/index.less';

type OptionItem = {
  label: string;
  value: string;
  icon?: JSX.Element;
};

const scenes: OptionItem[] = [
  {
    label: "推荐",
    icon: <i className="iconfont icon-tuijian mr-1" />,
    value: "recommend",
  },
  ...APPLICATION_SCENARIOS_OPTIONS,
];
const categorys: OptionItem[] = [
  { label: "全部类型", value: "all" },
  ...MODULE_TEMPLATE_TYPE,
];

export default function Template() {
  const [search, setSearch] = useState("");
  const [industryFilter, setIndustryFilter] = useState("all");
  const [sceneFilter, setSceneFilter] = useState("recommend");
  const [currentPage, setCurrentPage] = useState(1);
  const { data, run, loading } = useRequest(GetTemplatePublicList, {
    defaultParams: [
      {
        currentPage: 1,
        pageSize: 20,
        filters: [
          { name: "isDel", value: 0 },
          { name: "isOnMarket", value: 1 },
        ],
      },
    ],
  });

  useEffect(() => {
    setCurrentPage(1);
    run({
      currentPage: 1,
      pageSize: 20,
      filters: [
        { name: "isDel", value: 0 },
        { name: "isOnMarket", value: 1 },
        { name: "name", value: search },
        {
          name: "industries",
          value: industryFilter === "all" ? "" : industryFilter,
        },
        {
          name: "applicationScenarios",
          value: sceneFilter === "recommend" ? "" : sceneFilter,
        },
      ],
    });
  }, [industryFilter, sceneFilter, search]);

  const handleChangePage = (page: number) => {
    setCurrentPage(page);
    run({
      currentPage: page,
      pageSize: 20,
      filters: [
        { name: "isDel", value: 0 },
        { name: "isOnMarket", value: 1 },
        { name: "name", value: search },
        {
          name: "industries",
          value: industryFilter === "all" ? "" : industryFilter,
        },
        {
          name: "applicationScenarios",
          value: sceneFilter === "recommend" ? "" : sceneFilter,
        },
      ],
    });
  };

  const handleToAppDetail = (id: string) => {
    window.open(`#/detail/template/${id}`, "_blank");
  };

  return (
    <div className="flex h-full">
      <div className="left w-fit sm:w-[216px] shrink-0 pt-6 px-4 border-gray-200 border-0 border-r border-solid border-gray-200">
        <ul className="flex flex-col gap-y-2">
          {categorys.map((item) => (
            <li
              key={item.value}
              className={`cursor-pointer text-14px text-secondary gap-2 flex items-center pc:justify-start pc:w-full mobile:justify-center mobile:w-fit h-9 px-3 mobile:px-2 rounded-lg ${industryFilter === item.value ? "bg-white font-semibold !text-primary shadow-xs" : ""}`}
              onClick={() => setIndustryFilter(item.value)}
            >
              <span>{item.label}</span>
            </li>
          ))}
        </ul>
      </div>
      <div className="right flex-1 pt-6 px-4 h-full flex flex-col">
        <div className="shrink-0 pt-6 px-12">
          <div className="mb-1 text-primary text-xl font-semibold">
            探索模块模版
          </div>
          <div className="text-gray-500 text-sm">
            使用这些内容模块，可以快速完善你的系统功能模块。
          </div>
        </div>
        <div className="flex items-center justify-between mt-6 px-12">
          <div className="flex space-x-1 text-[13px] flex-wrap">
            {scenes.map((scene) => (
              <div
                key={scene.value}
                className={`cursor-pointer px-3 py-[7px] h-[32px] rounded-lg font-medium leading-[18px] cursor-pointer ${scene.value === sceneFilter ? "bg-white shadow-xs text-primary-600 text-primary" : "border-transparent text-gray-700 hover:bg-gray-200"}`}
                onClick={() => setSceneFilter(scene.value)}
              >
                {scene.icon}
                {scene.label}
              </div>
            ))}
          </div>
          <div>
            <Input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="搜索"
              prefix={<i className="iconfont icon-sousuo" />}
              allowClear
            ></Input>
          </div>
        </div>

        <div className="relative flex flex-1 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow mt-4">
          <nav
            className="style_appList grid content-start shrink-0 gap-4 px-6 sm:px-12"
          >
            {(data?.result?.model || []).map((item: any, index: number) => (
              <ItemCard data={item} key={index} onClick={handleToAppDetail} />
            ))}
          </nav>

          <Pagination
            className="mt-6"
            align="center"
            hideOnSinglePage
            current={currentPage}
            total={data?.result?.totalCount || 0}
            onChange={handleChangePage}
          />

          {!data?.result.model.length && !loading && (
            <Empty description="暂无数据" image={noDataImg} />
          )}

          <div className="h-200px w-full absolute left-0 top0 flex items-center justify-center pointer-events-none">
            <Spin spinning={loading} />
          </div>
        </div>
      </div>
    </div>
  );
}