🚧 add store tags

2025-02-17 16:20:05 +08:00 · 2021-12-30 22:46:15 +08:00 · 2021-12-30 22:46:15 +08:00 · e4691f0525
commit e4691f0525
parent 2beed6bf16
8 changed files with 103 additions and 25 deletions
--- a/website/src/components/Adapter.tsx
+++ b/website/src/components/Adapter.tsx
@ -3,6 +3,7 @@ import { usePagination } from "react-use-pagination";

 import adapters from "../../static/adapters.json";
 import { useFilteredObjs } from "../libs/store";
+import Card from "./Card";
 import Paginate from "./Paginate";

 export default function Adapter(): JSX.Element {
@ -28,16 +29,16 @@ export default function Adapter(): JSX.Element {
          placeholder="搜索适配器"
          onChange={(event) => setFilter(event.target.value)}
        />
-        <button className="w-full rounded-lg bg-hero text-white" disabled>
+        <button className="w-full rounded-lg bg-hero text-white">
          发布适配器
        </button>
      </div>
      <div className="grid grid-cols-1 p-4">
        <Paginate {...props} />
      </div>
-      <div>
-        {currentAdapters.map((driver, index) => (
-          <p key={index}>{driver.name}</p>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
+        {currentAdapters.map((adapter, index) => (
+          <Card key={index} {...adapter} />
        ))}
      </div>
      <div className="grid grid-cols-1 p-4">
--- a/website/src/components/Bot.tsx
+++ b/website/src/components/Bot.tsx
@ -3,6 +3,7 @@ import { usePagination } from "react-use-pagination";

 import bots from "../../static/bots.json";
 import { useFilteredObjs } from "../libs/store";
+import Card from "./Card";
 import Paginate from "./Paginate";

 export default function Adapter(): JSX.Element {
@ -28,16 +29,16 @@ export default function Adapter(): JSX.Element {
          placeholder="搜索机器人"
          onChange={(event) => setFilter(event.target.value)}
        />
-        <button className="w-full rounded-lg bg-hero text-white" disabled>
+        <button className="w-full rounded-lg bg-hero text-white">
          发布机器人
        </button>
      </div>
      <div className="grid grid-cols-1 p-4">
        <Paginate {...props} />
      </div>
-      <div>
-        {currentBots.map((driver, index) => (
-          <p key={index}>{driver.name}</p>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
+        {currentBots.map((bot, index) => (
+          <Card key={index} {...bot} />
        ))}
      </div>
      <div className="grid grid-cols-1 p-4">
--- a/website/src/components/Card/index.tsx
+++ b/website/src/components/Card/index.tsx
@ -1,23 +1,85 @@
 import React from "react";

 import Link from "@docusaurus/Link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import type { Obj } from "../../libs/store";

+function pickTextColor(bgColor, lightColor, darkColor) {
+  var color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
+  var r = parseInt(color.substring(0, 2), 16); // hexToR
+  var g = parseInt(color.substring(2, 4), 16); // hexToG
+  var b = parseInt(color.substring(4, 6), 16); // hexToB
+  return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? darkColor : lightColor;
+}
+
 export default function Card({
+  module_name,
  name,
  desc,
  author,
  homepage,
+  tags,
+  is_official,
 }: Obj): JSX.Element {
+  const isGithub = /^https:\/\/github.com\/[^/]+\/[^/]+/.test(homepage);
+
  return (
-    <div className="block max-w-full border rounded-lg outline-none no-underline bg-white shadow">
-      <div>
-        {name}
-        {homepage && <Link href={homepage}></Link>}
+    <div className="block max-w-full px-4 border-2 rounded-lg outline-none no-underline bg-light-nonepress-100 dark:bg-dark-nonepress-100 border-light-nonepress-200 dark:border-dark-nonepress-200 shadow-md shadow-light-nonepress-300 dark:shadow-dark-nonepress-300">
+      <div className="flex justify-between pt-4 text-lg font-medium">
+        <span>
+          {name}
+          {is_official && (
+            <FontAwesomeIcon
+              icon={["fas", "check-circle"]}
+              className="text-green-600 ml-2"
+            />
+          )}
+        </span>
+        {homepage && (
+          <Link
+            href={homepage}
+            className="text-black dark:text-white opacity-60 hover:text-hero hover:opacity-100"
+          >
+            {isGithub ? (
+              <FontAwesomeIcon icon={["fab", "github"]} />
+            ) : (
+              <FontAwesomeIcon icon={["fas", "link"]} />
+            )}
+          </Link>
+        )}
      </div>
-      <div>{desc}</div>
-      <div>{author}</div>
+      {tags && (
+        <div className="pt-2 pb-4">
+          {tags.map((tag, index) => (
+            <span
+              key={index}
+              className="inline-flex px-3 rounded-full items-center align-middle mr-2"
+              style={{
+                backgroundColor: tag.color,
+                color: pickTextColor(tag.color, "#fff", "#000"),
+              }}
+            >
+              {tag.label}
+            </span>
+          ))}
+        </div>
+      )}
+      {desc && (
+        <div className="pb-4 text-sm font-normal opacity-60">{desc}</div>
+      )}
+      {module_name && (
+        <div className="my-2 text-sm font-normal opacity-60 font-mono">
+          <FontAwesomeIcon icon={["fas", "fingerprint"]} className="mr-2" />
+          {module_name}
+        </div>
+      )}
+      {author && (
+        <div className="my-2 text-sm font-normal opacity-60 font-mono">
+          <FontAwesomeIcon icon={["fas", "user"]} className="mr-2" />
+          {author}
+        </div>
+      )}
    </div>
  );
 }
--- a/website/src/components/Driver.tsx
+++ b/website/src/components/Driver.tsx
@ -3,6 +3,7 @@ import { usePagination } from "react-use-pagination";

 import drivers from "../../static/drivers.json";
 import { useFilteredObjs } from "../libs/store";
+import Card from "./Card";
 import Paginate from "./Paginate";

 export default function Driver(): JSX.Element {
@ -35,9 +36,9 @@ export default function Driver(): JSX.Element {
      <div className="grid grid-cols-1 p-4">
        <Paginate {...props} />
      </div>
-      <div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
        {currentDrivers.map((driver, index) => (
-          <p key={index}>{driver.name}</p>
+          <Card key={index} {...driver} />
        ))}
      </div>
      <div className="grid grid-cols-1 p-4">
--- a/website/src/components/Paginate/index.tsx
+++ b/website/src/components/Paginate/index.tsx
@ -9,6 +9,7 @@ import styles from "./styles.module.css";
 export default function Paginate({
  totalPages,
  setPage,
+  currentPage,
 }: ReturnType<typeof usePagination>): JSX.Element {
  const onPageChange = useCallback(
    (selectedItem: { selected: number }) => {
@ -21,6 +22,7 @@ export default function Paginate({
    <nav role="navigation" aria-label="Pagination Navigation">
      <ReactPaginate
        pageCount={totalPages}
+        forcePage={currentPage}
        onPageChange={onPageChange}
        containerClassName={styles.container}
        pageClassName={styles.li}
--- a/website/src/components/Paginate/styles.module.css
+++ b/website/src/components/Paginate/styles.module.css
@ -1,5 +1,5 @@
 .container {
-  @apply w-full max-w-full inline-flex justify-center items-center m-0 pl-0 list-none;
+  @apply w-full max-w-full inline-flex justify-center items-center m-0 pl-0 list-none select-none;
 }

 .li {
@ -11,15 +11,16 @@
  width: auto;
  min-width: 34px;
  @apply m-1 px-1 border-2 rounded shadow-lg text-center;
-  @apply text-black;
-  @apply bg-light-nonepress-100;
+  @apply border-light-nonepress-200 shadow-light-nonepress-300;
+  @apply text-black bg-light-nonepress-100;
 }

 :global(.dark) .a {
+  @apply border-dark-nonepress-200 shadow-dark-nonepress-300;
  @apply text-white bg-dark-nonepress-100;
 }

-.active {
+.a.active {
  @apply bg-hero text-white border-hero;
 }

--- a/website/src/components/Plugin.tsx
+++ b/website/src/components/Plugin.tsx
@ -29,7 +29,7 @@ export default function Adapter(): JSX.Element {
          placeholder="搜索插件"
          onChange={(event) => setFilter(event.target.value)}
        />
-        <button className="w-full rounded-lg bg-hero text-white" disabled>
+        <button className="w-full rounded-lg bg-hero text-white">
          发布插件
        </button>
      </div>
@ -37,8 +37,8 @@ export default function Adapter(): JSX.Element {
        <Paginate {...props} />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
-        {currentPlugins.map((driver, index) => (
-          <Card key={index} {...driver} />
+        {currentPlugins.map((plugin, index) => (
+          <Card key={index} {...plugin} />
        ))}
      </div>
      <div className="grid grid-cols-1 p-4">
--- a/website/static/plugins.json
+++ b/website/static/plugins.json
@ -6,7 +6,12 @@
    "desc": "通过戳一戳获取服务器状态",
    "author": "yanyongyu",
    "homepage": "https://github.com/cscs181/QQ-GitHub-Bot/tree/master/src/plugins/nonebot_plugin_status",
-    "tags": [],
+    "tags": [
+      {
+        "label": "server",
+        "color": "#ff0000"
+      }
+    ],
    "is_official": true
  },
  {
@ -16,7 +21,12 @@
    "desc": "将B站UP主的动态和直播信息推送至QQ",
    "author": "SK-415",
    "homepage": "https://github.com/SK-415/HarukaBot",
-    "tags": [],
+    "tags": [
+      {
+        "label": "bilibili",
+        "color": "#e55d80"
+      }
+    ],
    "is_official": false
  },
  {