📝 Docs: 添加商店表单支持 (#2460)

Co-authored-by: Ju4tCode <42488585+yanyongyu@users.noreply.github.com>
2025-09-10 14:07:04 +00:00 · 2023-11-22 14:04:22 +08:00
parent af9327de14
commit ef882927f3
20 changed files with 972 additions and 18 deletions
--- a/website/src/components/Store/Content/Adapter.tsx
+++ b/website/src/components/Store/Content/Adapter.tsx
@ -5,8 +5,11 @@ import { usePagination } from "react-use-pagination";

 import Admonition from "@theme/Admonition";

+import AdapterForm from "@/components/Form/Adapter";
+import Modal from "@/components/Modal";
 import Paginate from "@/components/Paginate";
 import ResourceCard from "@/components/Resource/Card";
+import ResourceDetailCard from "@/components/Resource/DetailCard";
 import Searcher from "@/components/Searcher";
 import StoreToolbar, { type Action } from "@/components/Store/Toolbar";
 import { authorFilter, tagFilter } from "@/libs/filter";
@ -21,6 +24,9 @@ export default function AdapterPage(): JSX.Element {
  const loading = adapters === null;

  const [error, setError] = useState<Error | null>(null);
+  const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
+  const [isOpenCardModal, setIsOpenCardModal] = useState<boolean>(false);
+  const [clickedAdapter, setClickedAdapter] = useState<Adapter | null>(null);

  const {
    filteredResources: filteredAdapters,
@ -69,16 +75,13 @@ export default function AdapterPage(): JSX.Element {
    label: "发布适配器",
    icon: ["fas", "plus"],
    onClick: () => {
-      // TODO: open adapter release modal
-      window.open(
-        "https://github.com/nonebot/nonebot2/issues/new?template=adapter_publish.yml&title=Adapter%3A+%7Bname%7D&labels=Adapter"
-      );
+      setIsOpenModal(true);
    },
  };

  const onCardClick = useCallback((adapter: Adapter) => {
-    // TODO: open adapter modal
-    console.log(adapter, "clicked");
+    setClickedAdapter(adapter);
+    setIsOpenCardModal(true);
  }, []);

  const onCardTagClick = useCallback(
@ -170,6 +173,25 @@ export default function AdapterPage(): JSX.Element {
        nextEnabled={nextEnabled}
        previousEnabled={previousEnabled}
      />
+      {isOpenModal && (
+        <Modal
+          className="not-prose"
+          title="发布适配器"
+          setOpenModal={setIsOpenModal}
+        >
+          <AdapterForm />
+        </Modal>
+      )}
+      {isOpenCardModal && (
+        <Modal
+          className="not-prose"
+          title="适配器详情"
+          backdropExit
+          setOpenModal={setIsOpenCardModal}
+        >
+          {clickedAdapter && <ResourceDetailCard resource={clickedAdapter} />}
+        </Modal>
+      )}
    </>
  );
 }
--- a/website/src/components/Store/Content/Bot.tsx
+++ b/website/src/components/Store/Content/Bot.tsx
@ -5,6 +5,8 @@ import { usePagination } from "react-use-pagination";

 import Admonition from "@theme/Admonition";

+import BotForm from "@/components/Form/Bot";
+import Modal from "@/components/Modal";
 import Paginate from "@/components/Paginate";
 import ResourceCard from "@/components/Resource/Card";
 import Searcher from "@/components/Searcher";
@ -21,6 +23,7 @@ export default function PluginPage(): JSX.Element {
  const loading = bots === null;

  const [error, setError] = useState<Error | null>(null);
+  const [isOpenModal, setIsOpenModal] = useState<boolean>(false);

  const {
    filteredResources: filteredBots,
@ -69,10 +72,7 @@ export default function PluginPage(): JSX.Element {
    label: "发布机器人",
    icon: ["fas", "plus"],
    onClick: () => {
-      // TODO: open bot release modal
-      window.open(
-        "https://github.com/nonebot/nonebot2/issues/new?template=bot_publish.yml&title=Bot%3A+%7Bname%7D&labels=Bot"
-      );
+      setIsOpenModal(true);
    },
  };

@ -164,6 +164,15 @@ export default function PluginPage(): JSX.Element {
        nextEnabled={nextEnabled}
        previousEnabled={previousEnabled}
      />
+      {isOpenModal && (
+        <Modal
+          className="not-prose"
+          title="发布机器人"
+          setOpenModal={setIsOpenModal}
+        >
+          <BotForm />
+        </Modal>
+      )}
    </>
  );
 }
--- a/website/src/components/Store/Content/Driver.tsx
+++ b/website/src/components/Store/Content/Driver.tsx
@ -5,8 +5,10 @@ import { usePagination } from "react-use-pagination";

 import Admonition from "@theme/Admonition";

+import Modal from "@/components/Modal";
 import Paginate from "@/components/Paginate";
 import ResourceCard from "@/components/Resource/Card";
+import ResourceDetailCard from "@/components/Resource/DetailCard";
 import Searcher from "@/components/Searcher";
 import { authorFilter, tagFilter } from "@/libs/filter";
 import { useSearchControl } from "@/libs/search";
@ -19,6 +21,8 @@ export default function DriverPage(): JSX.Element {
  const loading = drivers === null;

  const [error, setError] = useState<Error | null>(null);
+  const [isOpenCardModal, setIsOpenCardModal] = useState<boolean>(false);
+  const [clickedDriver, setClickedDriver] = useState<Driver | null>(null);

  const {
    filteredResources: filteredDrivers,
@ -59,8 +63,8 @@ export default function DriverPage(): JSX.Element {
  }, []);

  const onCardClick = useCallback((driver: Driver) => {
-    // TODO: open driver modal
-    console.log(driver, "clicked");
+    setClickedDriver(driver);
+    setIsOpenCardModal(true);
  }, []);

  const onCardTagClick = useCallback(
@ -146,6 +150,17 @@ export default function DriverPage(): JSX.Element {
        nextEnabled={nextEnabled}
        previousEnabled={previousEnabled}
      />
+      {isOpenCardModal && (
+        <Modal
+          className="not-prose"
+          useCustomTitle
+          backdropExit
+          title="驱动器详情"
+          setOpenModal={setIsOpenCardModal}
+        >
+          {clickedDriver && <ResourceDetailCard resource={clickedDriver} />}
+        </Modal>
+      )}
    </>
  );
 }
--- a/website/src/components/Store/Content/Plugin.tsx
+++ b/website/src/components/Store/Content/Plugin.tsx
@ -5,8 +5,11 @@ import { usePagination } from "react-use-pagination";

 import Admonition from "@theme/Admonition";

+import PluginForm from "@/components/Form/Plugin";
+import Modal from "@/components/Modal";
 import Paginate from "@/components/Paginate";
 import ResourceCard from "@/components/Resource/Card";
+import ResourceDetailCard from "@/components/Resource/DetailCard";
 import Searcher from "@/components/Searcher";
 import StoreToolbar, { type Action } from "@/components/Store/Toolbar";
 import { authorFilter, tagFilter } from "@/libs/filter";
@ -21,6 +24,9 @@ export default function PluginPage(): JSX.Element {
  const loading = plugins === null;

  const [error, setError] = useState<Error | null>(null);
+  const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
+  const [isOpenCardModal, setIsOpenCardModal] = useState<boolean>(false);
+  const [clickedPlugin, setClickedPlugin] = useState<Plugin | null>(null);

  const {
    filteredResources: filteredPlugins,
@ -69,16 +75,13 @@ export default function PluginPage(): JSX.Element {
    label: "发布插件",
    icon: ["fas", "plus"],
    onClick: () => {
-      // TODO: open plugin release modal
-      window.open(
-        "https://github.com/nonebot/nonebot2/issues/new?template=plugin_publish.yml&title=Plugin%3A+%7Bname%7D&labels=Plugin"
-      );
+      setIsOpenModal(true);
    },
  };

  const onCardClick = useCallback((plugin: Plugin) => {
-    // TODO: open plugin modal
-    console.log(plugin, "clicked");
+    setClickedPlugin(plugin);
+    setIsOpenCardModal(true);
  }, []);

  const onCardTagClick = useCallback(
@ -167,6 +170,26 @@ export default function PluginPage(): JSX.Element {
        nextEnabled={nextEnabled}
        previousEnabled={previousEnabled}
      />
+      {isOpenModal && (
+        <Modal
+          className="not-prose"
+          title="发布插件"
+          setOpenModal={setIsOpenModal}
+        >
+          <PluginForm />
+        </Modal>
+      )}
+      {isOpenCardModal && (
+        <Modal
+          className="not-prose"
+          useCustomTitle
+          backdropExit
+          title="插件详情"
+          setOpenModal={setIsOpenCardModal}
+        >
+          {clickedPlugin && <ResourceDetailCard resource={clickedPlugin} />}
+        </Modal>
+      )}
    </>
  );
 }