🚧 add handler di example

2025-07-28 16:51:26 +00:00 · 2021-12-31 23:58:59 +08:00
parent ec35f292bd
commit 78d0ec847e
12 changed files with 780 additions and 1055 deletions
--- a/website/src/components/Adapter.tsx
+++ b/website/src/components/Adapter.tsx
@ -1,12 +1,20 @@
-import React from "react";
+import clsx from "clsx";
+import React, { useRef, useState } from "react";
+import { ChromePicker } from "react-color";
 import { usePagination } from "react-use-pagination";

 import adapters from "../../static/adapters.json";
-import { useFilteredObjs } from "../libs/store";
+import { Tag, useFilteredObjs } from "../libs/store";
 import Card from "./Card";
+import Modal from "./Modal";
+import ModalAction from "./ModalAction";
+import ModalContent from "./ModalContent";
+import ModalTitle from "./ModalTitle";
 import Paginate from "./Paginate";
+import TagComponent from "./Tag";

 export default function Adapter(): JSX.Element {
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
  const {
    filter,
    setFilter,
@ -20,6 +28,93 @@ export default function Adapter(): JSX.Element {
  const { startIndex, endIndex } = props;
  const currentAdapters = filteredAdapters.slice(startIndex, endIndex + 1);

+  const [form, setForm] = useState<{
+    name: string;
+    desc: string;
+    projectLink: string;
+    moduleName: string;
+    homepage: string;
+  }>({ name: "", desc: "", projectLink: "", moduleName: "", homepage: "" });
+
+  const ref = useRef<HTMLInputElement>(null);
+  const [tags, setTags] = useState<Tag[]>([]);
+  const [label, setLabel] = useState<string>("");
+  const [color, setColor] = useState<string>("#ea5252");
+
+  const onSubmit = () => {
+    setModalOpen(false);
+    const title = encodeURIComponent(`Adapter: ${form.name}`).replace(
+      /%2B/gi,
+      "+"
+    );
+    const body = encodeURIComponent(
+      `
+**协议名称：**
+
+${form.name}
+
+**协议功能：**
+
+${form.desc}
+
+**PyPI 项目名：**
+
+${form.projectLink}
+
+**协议 import 包名：**
+
+${form.moduleName}
+
+**协议项目仓库/主页链接：**
+
+${form.homepage}
+
+**标签：**
+
+${JSON.stringify(tags)}
+`.trim()
+    ).replace(/%2B/gi, "+");
+    window.open(
+      `https://github.com/nonebot/nonebot2/issues/new?title=${title}&body=${body}&labels=Adapter`
+    );
+  };
+  const onChange = (event) => {
+    const target = event.target;
+    const value = target.type === "checkbox" ? target.checked : target.value;
+    const name = target.name;
+
+    setForm({
+      ...form,
+      [name]: value,
+    });
+    event.preventDefault();
+  };
+  const onChangeLabel = (event) => {
+    setLabel(event.target.value);
+  };
+  const onChangeColor = (color) => {
+    setColor(color.hex);
+  };
+  const validateTag = () => {
+    return label.length >= 1 && label.length <= 10;
+  };
+  const newTag = () => {
+    if (tags.length >= 3) {
+      return;
+    }
+    if (validateTag()) {
+      const tag = { label, color };
+      setTags([...tags, tag]);
+    }
+  };
+  const delTag = (index: number) => {
+    setTags(tags.filter((_, i) => i !== index));
+  };
+  const insertTagType = (text: string) => {
+    setLabel(text + label);
+    ref.current.value = text + label;
+  };
+
  return (
    <>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 px-4">
@ -29,7 +124,10 @@ export default function Adapter(): JSX.Element {
          placeholder="搜索适配器"
          onChange={(event) => setFilter(event.target.value)}
        />
-        <button className="w-full rounded-lg bg-hero text-white">
+        <button
+          className="w-full rounded-lg bg-hero text-white"
+          onClick={() => setModalOpen(true)}
+        >
          发布适配器
        </button>
      </div>
@ -44,6 +142,129 @@ export default function Adapter(): JSX.Element {
      <div className="grid grid-cols-1 p-4">
        <Paginate {...props} />
      </div>
+      <Modal active={modalOpen} setActive={setModalOpen}>
+        <ModalTitle title={"适配器信息"} />
+        <ModalContent>
+          <form onSubmit={onSubmit}>
+            <div className="grid grid-cols-1 gap-4 p-4">
+              <label className="flex flex-wrap">
+                <span className="mr-2">适配器名称:</span>
+                <input
+                  type="text"
+                  name="name"
+                  maxLength={20}
+                  className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
+                  onChange={onChange}
+                />
+              </label>
+              <label className="flex flex-wrap">
+                <span className="mr-2">适配器介绍:</span>
+                <input
+                  type="text"
+                  name="desc"
+                  className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
+                  onChange={onChange}
+                />
+              </label>
+              <label className="flex flex-wrap">
+                <span className="mr-2">PyPI 项目名:</span>
+                <input
+                  type="text"
+                  name="projectLink"
+                  className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
+                  onChange={onChange}
+                />
+              </label>
+              <label className="flex flex-wrap">
+                <span className="mr-2">import 包名:</span>
+                <input
+                  type="text"
+                  name="moduleName"
+                  className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
+                  onChange={onChange}
+                />
+              </label>
+              <label className="flex flex-wrap">
+                <span className="mr-2">仓库/主页:</span>
+                <input
+                  type="text"
+                  name="homepage"
+                  className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
+                  onChange={onChange}
+                />
+              </label>
+            </div>
+          </form>
+          <div className="px-4">
+            <label className="flex flex-wrap">
+              <span className="mr-2">标签:</span>
+              {tags.map((tag, index) => (
+                <TagComponent
+                  key={index}
+                  {...tag}
+                  className="cursor-pointer"
+                  onClick={() => delTag(index)}
+                />
+              ))}
+            </label>
+          </div>
+          <div className="px-4 pt-4">
+            <input
+              ref={ref}
+              type="text"
+              className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
+              onChange={onChangeLabel}
+            />
+            <ChromePicker
+              className="mt-2"
+              color={color}
+              disableAlpha={true}
+              onChangeComplete={onChangeColor}
+            />
+            <div className="flex flex-wrap mt-2 items-center">
+              <span className="mr-2">Type:</span>
+              <button
+                className="px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]"
+                onClick={() => insertTagType("a:")}
+              >
+                Adapter
+              </button>
+              <button
+                className="px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]"
+                onClick={() => insertTagType("t:")}
+              >
+                Topic
+              </button>
+            </div>
+            <div className="flex mt-2">
+              <TagComponent label={label} color={color} />
+              <button
+                className={clsx(
+                  "px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]",
+                  { "pointer-events-none opacity-60": !validateTag() }
+                )}
+                onClick={newTag}
+              >
+                添加标签
+              </button>
+            </div>
+          </div>
+        </ModalContent>
+        <ModalAction>
+          <button
+            className="px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]"
+            onClick={() => setModalOpen(false)}
+          >
+            关闭
+          </button>
+          <button
+            className="ml-2 px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]"
+            onClick={onSubmit}
+          >
+            发布
+          </button>
+        </ModalAction>
+      </Modal>
    </>
  );
 }
--- a/website/src/components/Bot.tsx
+++ b/website/src/components/Bot.tsx
@ -1,12 +1,20 @@
-import React from "react";
+import clsx from "clsx";
+import React, { useRef, useState } from "react";
+import { ChromePicker } from "react-color";
 import { usePagination } from "react-use-pagination";

 import bots from "../../static/bots.json";
-import { useFilteredObjs } from "../libs/store";
+import { Tag, useFilteredObjs } from "../libs/store";
 import Card from "./Card";
+import Modal from "./Modal";
+import ModalAction from "./ModalAction";
+import ModalContent from "./ModalContent";
+import ModalTitle from "./ModalTitle";
 import Paginate from "./Paginate";
+import TagComponent from "./Tag";

 export default function Adapter(): JSX.Element {
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
  const {
    filter,
    setFilter,
@ -20,6 +28,80 @@ export default function Adapter(): JSX.Element {
  const { startIndex, endIndex } = props;
  const currentBots = filteredBots.slice(startIndex, endIndex + 1);

+  const [form, setForm] = useState<{
+    name: string;
+    desc: string;
+    homepage: string;
+  }>({ name: "", desc: "", homepage: "" });
+
+  const ref = useRef<HTMLInputElement>(null);
+  const [tags, setTags] = useState<Tag[]>([]);
+  const [label, setLabel] = useState<string>("");
+  const [color, setColor] = useState<string>("#ea5252");
+
+  const onSubmit = () => {
+    setModalOpen(false);
+    const title = encodeURIComponent(`Bot: ${form.name}`).replace(/%2B/gi, "+");
+    const body = encodeURIComponent(
+      `
+**机器人名称：**
+
+${form.name}
+
+**机器人功能：**
+
+${form.desc}
+
+**机器人项目仓库/主页链接：**
+
+${form.homepage}
+
+**标签：**
+
+${JSON.stringify(tags)}
+`.trim()
+    ).replace(/%2B/gi, "+");
+    window.open(
+      `https://github.com/nonebot/nonebot2/issues/new?title=${title}&body=${body}&labels=Bot`
+    );
+  };
+  const onChange = (event) => {
+    const target = event.target;
+    const value = target.type === "checkbox" ? target.checked : target.value;
+    const name = target.name;
+
+    setForm({
+      ...form,
+      [name]: value,
+    });
+    event.preventDefault();
+  };
+  const onChangeLabel = (event) => {
+    setLabel(event.target.value);
+  };
+  const onChangeColor = (color) => {
+    setColor(color.hex);
+  };
+  const validateTag = () => {
+    return label.length >= 1 && label.length <= 10;
+  };
+  const newTag = () => {
+    if (tags.length >= 3) {
+      return;
+    }
+    if (validateTag()) {
+      const tag = { label, color };
+      setTags([...tags, tag]);
+    }
+  };
+  const delTag = (index: number) => {
+    setTags(tags.filter((_, i) => i !== index));
+  };
+  const insertTagType = (text: string) => {
+    setLabel(text + label);
+    ref.current.value = text + label;
+  };
+
  return (
    <>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 px-4">
@ -29,7 +111,10 @@ export default function Adapter(): JSX.Element {
          placeholder="搜索机器人"
          onChange={(event) => setFilter(event.target.value)}
        />
-        <button className="w-full rounded-lg bg-hero text-white">
+        <button
+          className="w-full rounded-lg bg-hero text-white"
+          onClick={() => setModalOpen(true)}
+        >
          发布机器人
        </button>
      </div>
@ -44,6 +129,111 @@ export default function Adapter(): JSX.Element {
      <div className="grid grid-cols-1 p-4">
        <Paginate {...props} />
      </div>
+      <Modal active={modalOpen} setActive={setModalOpen}>
+        <ModalTitle title={"机器人信息"} />
+        <ModalContent>
+          <form onSubmit={onSubmit}>
+            <div className="grid grid-cols-1 gap-4 p-4">
+              <label className="flex flex-wrap">
+                <span className="mr-2">机器人名称:</span>
+                <input
+                  type="text"
+                  name="name"
+                  maxLength={20}
+                  className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
+                  onChange={onChange}
+                />
+              </label>
+              <label className="flex flex-wrap">
+                <span className="mr-2">机器人介绍:</span>
+                <input
+                  type="text"
+                  name="desc"
+                  className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
+                  onChange={onChange}
+                />
+              </label>
+              <label className="flex flex-wrap">
+                <span className="mr-2">仓库/主页:</span>
+                <input
+                  type="text"
+                  name="homepage"
+                  className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
+                  onChange={onChange}
+                />
+              </label>
+            </div>
+          </form>
+          <div className="px-4">
+            <label className="flex flex-wrap">
+              <span className="mr-2">标签:</span>
+              {tags.map((tag, index) => (
+                <TagComponent
+                  key={index}
+                  {...tag}
+                  className="cursor-pointer"
+                  onClick={() => delTag(index)}
+                />
+              ))}
+            </label>
+          </div>
+          <div className="px-4 pt-4">
+            <input
+              ref={ref}
+              type="text"
+              className="px-2 flex-grow rounded bg-light-nonepress-200 dark:bg-dark-nonepress-200"
+              onChange={onChangeLabel}
+            />
+            <ChromePicker
+              className="mt-2"
+              color={color}
+              disableAlpha={true}
+              onChangeComplete={onChangeColor}
+            />
+            <div className="flex flex-wrap mt-2 items-center">
+              <span className="mr-2">Type:</span>
+              <button
+                className="px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]"
+                onClick={() => insertTagType("a:")}
+              >
+                Adapter
+              </button>
+              <button
+                className="px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]"
+                onClick={() => insertTagType("t:")}
+              >
+                Topic
+              </button>
+            </div>
+            <div className="flex mt-2">
+              <TagComponent label={label} color={color} />
+              <button
+                className={clsx(
+                  "px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]",
+                  { "pointer-events-none opacity-60": !validateTag() }
+                )}
+                onClick={newTag}
+              >
+                添加标签
+              </button>
+            </div>
+          </div>
+        </ModalContent>
+        <ModalAction>
+          <button
+            className="px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]"
+            onClick={() => setModalOpen(false)}
+          >
+            关闭
+          </button>
+          <button
+            className="ml-2 px-2 h-9 min-w-[64px] rounded text-hero hover:bg-hero hover:bg-opacity-[.08]"
+            onClick={onSubmit}
+          >
+            发布
+          </button>
+        </ModalAction>
+      </Modal>
    </>
  );
 }