ProjectHentai/nonebot2
6
0
Fork 0
mirror of https://github.com/nonebot/nonebot2.git synced 2024-11-24 00:55:07 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

🚧 process store pagination

Browse Source
This commit is contained in:
yanyongyu 2021-12-30 16:05:05 +08:00
parent d1706e438b
commit 2beed6bf16
11 changed files with 242 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
website/src/components/Adapter.tsx
View File

@ -1,5 +1,48 @@
import React from "react";
import { usePagination } from "react-use-pagination";
export default function Adapter() {
return <></>;
import adapters from "../../static/adapters.json";
import { useFilteredObjs } from "../libs/store";
import Paginate from "./Paginate";
export default function Adapter(): JSX.Element {
const {
filter,
setFilter,
filteredObjs: filteredAdapters,
} = useFilteredObjs(adapters);
const props = usePagination({
totalItems: filteredAdapters.length,
initialPageSize: 10,
});
const { startIndex, endIndex } = props;
const currentAdapters = filteredAdapters.slice(startIndex, endIndex + 1);
return (
<>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 px-4">
<input
className="w-full px-4 py-2 border rounded-full bg-light-nonepress-100 dark:bg-dark-nonepress-100"
value={filter}
placeholder="搜索适配器"
onChange={(event) => setFilter(event.target.value)}
/>
<button className="w-full rounded-lg bg-hero text-white" disabled>
发布适配器
</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>
<div className="grid grid-cols-1 p-4">
<Paginate {...props} />
</div>
</>
);
}

47
website/src/components/Bot.tsx
View File

@ -1,5 +1,48 @@
import React from "react";
import { usePagination } from "react-use-pagination";
export default function Bot() {
return <></>;
import bots from "../../static/bots.json";
import { useFilteredObjs } from "../libs/store";
import Paginate from "./Paginate";
export default function Adapter(): JSX.Element {
const {
filter,
setFilter,
filteredObjs: filteredBots,
} = useFilteredObjs(bots);
const props = usePagination({
totalItems: filteredBots.length,
initialPageSize: 10,
});
const { startIndex, endIndex } = props;
const currentBots = filteredBots.slice(startIndex, endIndex + 1);
return (
<>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 px-4">
<input
className="w-full px-4 py-2 border rounded-full bg-light-nonepress-100 dark:bg-dark-nonepress-100"
value={filter}
placeholder="搜索机器人"
onChange={(event) => setFilter(event.target.value)}
/>
<button className="w-full rounded-lg bg-hero text-white" disabled>
发布机器人
</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>
<div className="grid grid-cols-1 p-4">
<Paginate {...props} />
</div>
</>
);
}

23
website/src/components/Card/index.tsx Normal file
View File

@ -0,0 +1,23 @@
import React from "react";
import Link from "@docusaurus/Link";
import type { Obj } from "../../libs/store";
export default function Card({
name,
desc,
author,
homepage,
}: Obj): JSX.Element {
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>
<div>{desc}</div>
<div>{author}</div>
</div>
);
}

4
website/src/components/Driver.tsx
View File

@ -17,7 +17,7 @@ export default function Driver(): JSX.Element {
initialPageSize: 10,
});
const { startIndex, endIndex } = props;
const currentDrivers = filteredDrivers.slice(startIndex, endIndex);
const currentDrivers = filteredDrivers.slice(startIndex, endIndex + 1);
return (
<>
@ -28,7 +28,7 @@ export default function Driver(): JSX.Element {
placeholder="搜索驱动器"
onChange={(event) => setFilter(event.target.value)}
/>
<button className="w-full rounded bg-hero text-white" disabled>
<button className="w-full rounded-lg bg-hero text-white opacity-60">
发布驱动器
</button>
</div>

12
website/src/components/Paginate.tsx → website/src/components/Paginate/index.tsx
View File

@ -4,6 +4,8 @@ import { usePagination } from "react-use-pagination";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import styles from "./styles.module.css";
export default function Paginate({
totalPages,
setPage,
@ -20,7 +22,15 @@ export default function Paginate({
<ReactPaginate
pageCount={totalPages}
onPageChange={onPageChange}
containerClassName="w-full m-w-full inline-flex justify-center align-center m-0 pl-0 list-none"
containerClassName={styles.container}
pageClassName={styles.li}
pageLinkClassName={styles.a}
previousClassName={styles.li}
previousLinkClassName={styles.a}
nextClassName={styles.li}
nextLinkClassName={styles.a}
activeLinkClassName={styles.active}
disabledLinkClassName={styles.disabled}
breakLabel={<FontAwesomeIcon icon="ellipsis-h" />}
previousLabel={<FontAwesomeIcon icon="chevron-left" />}
nextLabel={<FontAwesomeIcon icon="chevron-right" />}

29
website/src/components/Paginate/styles.module.css Normal file
View File

@ -0,0 +1,29 @@
.container {
@apply w-full max-w-full inline-flex justify-center items-center m-0 pl-0 list-none;
}
.li {
@apply flex items-center;
}
.a {
height: 34px;
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;
}
:global(.dark) .a {
@apply text-white bg-dark-nonepress-100;
}
.active {
@apply bg-hero text-white border-hero;
}
.disabled {
@apply opacity-60 pointer-events-none;
}

48
website/src/components/Plugin.tsx
View File

@ -1,5 +1,49 @@
import React from "react";
import { usePagination } from "react-use-pagination";
export default function Plugin() {
return <></>;
import plugins from "../../static/plugins.json";
import { useFilteredObjs } from "../libs/store";
import Card from "./Card";
import Paginate from "./Paginate";
export default function Adapter(): JSX.Element {
const {
filter,
setFilter,
filteredObjs: filteredPlugins,
} = useFilteredObjs(plugins);
const props = usePagination({
totalItems: filteredPlugins.length,
initialPageSize: 10,
});
const { startIndex, endIndex } = props;
const currentPlugins = filteredPlugins.slice(startIndex, endIndex + 1);
return (
<>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 px-4">
<input
className="w-full px-4 py-2 border rounded-full bg-light-nonepress-100 dark:bg-dark-nonepress-100"
value={filter}
placeholder="搜索插件"
onChange={(event) => setFilter(event.target.value)}
/>
<button className="w-full rounded-lg bg-hero text-white" disabled>
发布插件
</button>
</div>
<div className="grid grid-cols-1 p-4">
<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} />
))}
</div>
<div className="grid grid-cols-1 p-4">
<Paginate {...props} />
</div>
</>
);
}

4
website/src/libs/store.ts
View File

@ -1,11 +1,11 @@
import { useState } from "react";
type Tag = {
export type Tag = {
label: string;
color: string;
};
type Obj = {
export type Obj = {
module_name?: string;
project_link?: string;
name: string;

2
website/src/pages/store.mdx
View File

@ -14,7 +14,7 @@ import Bot from "../components/Bot";
# 商店
<div className="w-full border rounded shadow">
<Tabs defaultValue="plugin" className="justify-center font-light text-sm">
<Tabs defaultValue="plugin" className="justify-center font-light">
<TabItem value="driver" label="驱动器">
<Driver />
</TabItem>

44
website/static/adapters.json
View File

@ -1,13 +1,13 @@
[
{
"module_name": "nonebot.adapters.cqhttp",
"project_link": "nonebot-adapter-cqhttp",
"name": "cqhttp",
"desc": "OneBot(CQHTTP) 协议",
"module_name": "nonebot.adapters.onebot.v11",
"project_link": "nonebot-adapter-onebot",
"name": "OneBot V11",
"desc": "OneBot V11 协议",
"author": "yanyongyu",
"homepage": "https://github.com/nonebot/nonebot2/tree/master/packages/nonebot-adapter-cqhttp",
"homepage": "https://github.com/nonebot/adapter-onebot",
"tags": [],
"is_official": false
"is_official": true
},
{
"module_name": "nonebot.adapters.ding",
@ -15,9 +15,9 @@
"name": "ding",
"desc": "钉钉协议",
"author": "Artin",
"homepage": "https://github.com/nonebot/nonebot2/tree/master/packages/nonebot-adapter-ding",
"homepage": "https://github.com/nonebot/adapter-ding",
"tags": [],
"is_official": false
"is_official": true
},
{
"module_name": "nonebot.adapters.mirai",
@ -25,9 +25,9 @@
"name": "mirai",
"desc": "Mirai-Api-HTTP 协议",
"author": "Mix",
"homepage": "https://github.com/nonebot/nonebot2/tree/master/packages/nonebot-adapter-mirai",
"homepage": "https://github.com/nonebot/adapter-mirai",
"tags": [],
"is_official": false
"is_official": true
},
{
"module_name": "nonebot.adapters.feishu",
@ -35,8 +35,28 @@
"name": "feishu",
"desc": "飞书协议",
"author": "StarHeartHunt",
"homepage": "https://github.com/nonebot/nonebot2/tree/master/packages/nonebot-adapter-feishu",
"homepage": "https://github.com/nonebot/adapter-feishu",
"tags": [],
"is_official": false
"is_official": true
},
{
"module_name": "nonebot.adapters.telegram",
"project_link": "nonebot-adapter-telegram",
"name": "telegram",
"desc": "Telegram 协议",
"author": "StarHeartHunt",
"homepage": "https://github.com/nonebot/adapter-telegram",
"tags": [],
"is_official": true
},
{
"module_name": "nonebot.adapters.qqguild",
"project_link": "nonebot-adapter-qqguild",
"name": "QQ 频道",
"desc": "QQ 频道官方机器人",
"author": "yanyongyu",
"homepage": "https://github.com/nonebot/adapter-qqguild",
"tags": [],
"is_official": true
}
]

22
website/static/plugins.json
View File

@ -7,7 +7,7 @@
"author": "yanyongyu",
"homepage": "https://github.com/cscs181/QQ-GitHub-Bot/tree/master/src/plugins/nonebot_plugin_status",
"tags": [],
"is_official": false
"is_official": true
},
{
"module_name": "haruka_bot",
@ -37,7 +37,7 @@
"name": "NoneBot离线文档",
"homepage": "https://github.com/nonebot/nonebot2/tree/master/packages/nonebot-plugin-docs",
"tags": [],
"is_official": false
"is_official": true
},
{
"module_name": "nonebot_plugin_sentry",
@ -47,17 +47,7 @@
"name": "Sentry日志监控",
"homepage": "https://github.com/cscs181/QQ-GitHub-Bot/tree/master/src/plugins/nonebot_plugin_sentry",
"tags": [],
"is_official": false
},
{
"module_name": "nonebot_plugin_test",
"project_link": "nonebot-plugin-test",
"author": "yanyongyu",
"desc": "在浏览器中测试你的 NoneBot 机器人",
"name": "前端测试机器人插件",
"homepage": "https://github.com/nonebot/plugin-test",
"tags": [],
"is_official": false
"is_official": true
},
{
"module_name": "nonebot_plugin_apscheduler",
@ -67,7 +57,7 @@
"name": "定时任务",
"homepage": "https://github.com/nonebot/plugin-apscheduler",
"tags": [],
"is_official": false
"is_official": true
},
{
"module_name": "nonebot_plugin_picsearcher",
@ -287,7 +277,7 @@
"author": "yanyongyu",
"homepage": "https://github.com/nonebot/plugin-localstore",
"tags": [],
"is_official": false
"is_official": true
},
{
"module_name": "nonebot_plugin_puppet",
@ -497,7 +487,7 @@
"author": "mnixry",
"homepage": "https://github.com/mnixry/nonebot-plugin-filehost",
"tags": [],
"is_official": false
"is_official": true
},
{
"module_name": "nonebot_plugin_simplemusic",