mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-06-09 15:26:03 +00:00
chore: rename web_ui dir to web
This commit is contained in:
Junyan Qin
46
web/src/app/home/plugins/page.tsx
Normal file
46
web/src/app/home/plugins/page.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
"use client"
|
||||
import { Radio } from 'antd';
|
||||
import {useState} from "react";
|
||||
import PluginInstalledComponent from "@/app/home/plugins/plugin-installed/PluginInstalledComponent";
|
||||
import PluginMarketComponent from "@/app/home/plugins/plugin-market/PluginMarketComponent";
|
||||
import styles from './plugins.module.css'
|
||||
|
||||
export default function PluginConfigPage() {
|
||||
enum PageType {
|
||||
INSTALLED = "installed",
|
||||
MARKET = 'market'
|
||||
}
|
||||
|
||||
const [nowPageType, setNowPageType] = useState(PageType.INSTALLED)
|
||||
|
||||
return (
|
||||
<div className={`${styles.pageContainer}`}>
|
||||
<div>
|
||||
<Radio.Group
|
||||
block
|
||||
options={[
|
||||
{ label: '已安装', value: PageType.INSTALLED },
|
||||
{ label: '插件市场', value: PageType.MARKET },
|
||||
]}
|
||||
defaultValue={PageType.INSTALLED}
|
||||
value={nowPageType}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
onChange={(e) => {
|
||||
// 这里静态类型检测有问题
|
||||
setNowPageType(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={`${styles.pageContainer}`}>
|
||||
{
|
||||
nowPageType === PageType.INSTALLED && <PluginInstalledComponent/>
|
||||
}
|
||||
{
|
||||
nowPageType === PageType.MARKET && <PluginMarketComponent/>
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
web/src/app/home/plugins/plugin-installed/PluginCardVO.ts
Normal file
27
web/src/app/home/plugins/plugin-installed/PluginCardVO.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
export interface IPluginCardVO {
|
||||
author: string,
|
||||
version: string,
|
||||
name: string,
|
||||
description: string,
|
||||
handlerCount: number,
|
||||
isInitialized: boolean,
|
||||
}
|
||||
|
||||
export class PluginCardVO implements IPluginCardVO {
|
||||
description: string;
|
||||
handlerCount: number;
|
||||
name: string;
|
||||
author: string;
|
||||
version: string;
|
||||
isInitialized: boolean;
|
||||
|
||||
constructor(prop: IPluginCardVO) {
|
||||
this.description = prop.description
|
||||
this.handlerCount = prop.handlerCount
|
||||
this.name = prop.name
|
||||
this.author = prop.author
|
||||
this.version = prop.version
|
||||
this.isInitialized = prop.isInitialized
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
"use client";
|
||||
|
||||
import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
|
||||
import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO";
|
||||
import { useEffect, useState } from "react";
|
||||
import PluginCardComponent from "@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent";
|
||||
import styles from "@/app/home/plugins/plugins.module.css";
|
||||
import { Modal, Input } from "antd";
|
||||
import { GithubOutlined } from "@ant-design/icons";
|
||||
import { httpClient } from "@/app/infra/http/HttpClient";
|
||||
|
||||
export default function PluginInstalledComponent() {
|
||||
const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [githubURL, setGithubURL] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
initData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
function initData() {
|
||||
getPluginList();
|
||||
}
|
||||
|
||||
function getPluginList() {
|
||||
httpClient.getPlugins().then((value) => {
|
||||
setPluginList(
|
||||
value.plugins.map((plugin) => {
|
||||
return new PluginCardVO({
|
||||
author: plugin.author,
|
||||
description: plugin.description.zh_CN,
|
||||
handlerCount: 0,
|
||||
name: plugin.name,
|
||||
version: plugin.version,
|
||||
isInitialized: plugin.status === "initialized"
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function handleModalConfirm() {
|
||||
installPlugin(githubURL);
|
||||
setModalOpen(false);
|
||||
}
|
||||
|
||||
function installPlugin(url: string) {
|
||||
httpClient
|
||||
.installPluginFromGithub(url)
|
||||
.then(() => {
|
||||
// 安装后重新拉取
|
||||
getPluginList();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("error when install plugin:", err);
|
||||
});
|
||||
}
|
||||
return (
|
||||
<div className={`${styles.pluginListContainer}`}>
|
||||
<Modal
|
||||
title={
|
||||
<div className={`${styles.modalTitle}`}>
|
||||
<GithubOutlined
|
||||
style={{
|
||||
fontSize: "30px",
|
||||
marginRight: "20px"
|
||||
}}
|
||||
type="setting"
|
||||
/>
|
||||
<span>从 GitHub 安装插件</span>
|
||||
</div>
|
||||
}
|
||||
centered
|
||||
open={modalOpen}
|
||||
onOk={() => handleModalConfirm()}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
width={500}
|
||||
destroyOnClose={true}
|
||||
>
|
||||
<div className={`${styles.modalBody}`}>
|
||||
<div>目前仅支持从 GitHub 安装</div>
|
||||
<Input
|
||||
placeholder="请输入插件的Github链接"
|
||||
value={githubURL}
|
||||
onChange={(e) => setGithubURL(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
{pluginList.map((vo, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<PluginCardComponent cardVO={vo} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<CreateCardComponent
|
||||
width={360}
|
||||
height={140}
|
||||
plusSize={90}
|
||||
onClick={() => {
|
||||
setModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import styles from "./pluginCard.module.css";
|
||||
import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO";
|
||||
import { GithubOutlined, LinkOutlined, ToolOutlined } from "@ant-design/icons";
|
||||
import { Switch, Tag } from "antd";
|
||||
import { useState } from "react";
|
||||
import { httpClient } from "@/app/infra/http/HttpClient";
|
||||
|
||||
export default function PluginCardComponent({
|
||||
cardVO
|
||||
}: {
|
||||
cardVO: PluginCardVO;
|
||||
}) {
|
||||
const [initialized, setInitialized] = useState(cardVO.isInitialized);
|
||||
const [switchEnable, setSwitchEnable] = useState(true);
|
||||
|
||||
function handleEnable() {
|
||||
setSwitchEnable(false);
|
||||
httpClient
|
||||
.togglePlugin(cardVO.author, cardVO.name, !initialized)
|
||||
.then(() => {
|
||||
setInitialized(!initialized);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("error: ", err);
|
||||
})
|
||||
.finally(() => {
|
||||
setSwitchEnable(true);
|
||||
});
|
||||
}
|
||||
return (
|
||||
<div className={`${styles.cardContainer}`}>
|
||||
{/* header */}
|
||||
<div className={`${styles.cardHeader}`}>
|
||||
{/* left author */}
|
||||
<div className={`${styles.fontGray}`}>{cardVO.author}</div>
|
||||
{/* right icon & version */}
|
||||
<div className={`${styles.iconVersionContainer}`}>
|
||||
<GithubOutlined style={{ fontSize: "26px" }} type="setting" />
|
||||
<Tag color="#108ee9">v{cardVO.version}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
{/* content */}
|
||||
<div className={`${styles.cardContent}`}>
|
||||
<div className={`${styles.boldFont}`}>{cardVO.name}</div>
|
||||
<div className={`${styles.fontGray}`}>{cardVO.description}</div>
|
||||
</div>
|
||||
{/* footer */}
|
||||
<div className={`${styles.cardFooter}`}>
|
||||
<div className={`${styles.linkSettingContainer}`}>
|
||||
<div className={`${styles.link}`}>
|
||||
<LinkOutlined style={{ fontSize: "22px" }} />
|
||||
<span>1</span>
|
||||
</div>
|
||||
<ToolOutlined style={{ fontSize: "22px" }} />
|
||||
</div>
|
||||
|
||||
<Switch
|
||||
value={initialized}
|
||||
onClick={handleEnable}
|
||||
disabled={!switchEnable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
.cardContainer {
|
||||
width: 360px;
|
||||
height: 140px;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFF;
|
||||
border-radius: 9px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.cardHeader {
|
||||
width: 90%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.iconVersionContainer {
|
||||
width: 90px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
width: 90%;
|
||||
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.cardFooter {
|
||||
width: 90%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.fontGray {
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.boldFont {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.linkSettingContainer {
|
||||
width: 80px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.link {
|
||||
width: 32px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import styles from "@/app/home/plugins/plugins.module.css";
|
||||
import { PluginMarketCardVO } from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
|
||||
import PluginMarketCardComponent from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent";
|
||||
import { Input, Pagination } from "antd";
|
||||
import { spaceClient } from "@/app/infra/http/HttpClient";
|
||||
|
||||
export default function PluginMarketComponent() {
|
||||
const [marketPluginList, setMarketPluginList] = useState<
|
||||
PluginMarketCardVO[]
|
||||
>([]);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [nowPage, setNowPage] = useState(1);
|
||||
const [searchKeyword, setSearchKeyword] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
initData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
function initData() {
|
||||
getPluginList();
|
||||
}
|
||||
|
||||
function onInputSearchKeyword(keyword: string) {
|
||||
// 这里记得加防抖，暂时没加
|
||||
setSearchKeyword(keyword);
|
||||
setNowPage(1);
|
||||
getPluginList(1, keyword);
|
||||
}
|
||||
|
||||
function getPluginList(
|
||||
page: number = nowPage,
|
||||
keyword: string = searchKeyword
|
||||
) {
|
||||
spaceClient.getMarketPlugins(page, 10, keyword).then((res) => {
|
||||
setMarketPluginList(
|
||||
res.plugins.map(
|
||||
(marketPlugin) =>
|
||||
new PluginMarketCardVO({
|
||||
author: marketPlugin.author,
|
||||
description: marketPlugin.description,
|
||||
githubURL: marketPlugin.repository,
|
||||
name: marketPlugin.name,
|
||||
pluginId: String(marketPlugin.ID),
|
||||
starCount: marketPlugin.stars
|
||||
})
|
||||
)
|
||||
);
|
||||
setTotalCount(res.total);
|
||||
console.log("market plugins:", res);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${styles.marketComponentBody}`}>
|
||||
<Input
|
||||
style={{
|
||||
width: "300px",
|
||||
marginTop: "10px"
|
||||
}}
|
||||
value={searchKeyword}
|
||||
placeholder="搜索插件"
|
||||
onChange={(e) => onInputSearchKeyword(e.target.value)}
|
||||
/>
|
||||
<div className={`${styles.pluginListContainer}`}>
|
||||
{marketPluginList.map((vo, index) => {
|
||||
return (
|
||||
<div key={index}>
|
||||
<PluginMarketCardComponent cardVO={vo} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Pagination
|
||||
defaultCurrent={1}
|
||||
total={totalCount}
|
||||
onChange={(pageNumber) => {
|
||||
setNowPage(pageNumber);
|
||||
getPluginList(pageNumber);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import styles from "./pluginMarketCard.module.css"
|
||||
import {GithubOutlined, StarOutlined} from '@ant-design/icons';
|
||||
import {PluginMarketCardVO} from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
|
||||
import {Button} from "antd";
|
||||
|
||||
export default function PluginMarketCardComponent({
|
||||
cardVO
|
||||
}: {
|
||||
cardVO: PluginMarketCardVO
|
||||
}) {
|
||||
|
||||
|
||||
function handleInstallClick (pluginId: string) {
|
||||
console.log("Install plugin: ", pluginId)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${styles.cardContainer}`}>
|
||||
{/* header */}
|
||||
<div className={`${styles.cardHeader}`}>
|
||||
{/* left author */}
|
||||
<div className={`${styles.fontGray}`}>{cardVO.author}</div>
|
||||
{/* right icon */}
|
||||
<GithubOutlined
|
||||
style={{fontSize: '26px'}}
|
||||
type="setting"
|
||||
/>
|
||||
</div>
|
||||
{/* content */}
|
||||
<div className={`${styles.cardContent}`}>
|
||||
<div className={`${styles.boldFont}`}>{cardVO.name}</div>
|
||||
<div className={`${styles.fontGray}`}>{cardVO.description}</div>
|
||||
</div>
|
||||
{/* footer */}
|
||||
<div className={`${styles.cardFooter}`}>
|
||||
<div className={`${styles.linkSettingContainer}`}>
|
||||
<div className={`${styles.link}`}>
|
||||
<StarOutlined
|
||||
style={{fontSize: '22px'}}
|
||||
/>
|
||||
<span>{cardVO.starCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
size={"small"}
|
||||
onClick={() => {
|
||||
handleInstallClick(cardVO.pluginId)
|
||||
}}
|
||||
>
|
||||
安装
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
export interface IPluginMarketCardVO {
|
||||
pluginId: string;
|
||||
author: string,
|
||||
name: string,
|
||||
description: string,
|
||||
starCount: number,
|
||||
githubURL: string,
|
||||
}
|
||||
|
||||
export class PluginMarketCardVO implements IPluginMarketCardVO {
|
||||
pluginId: string;
|
||||
description: string;
|
||||
name: string;
|
||||
author: string;
|
||||
githubURL: string;
|
||||
starCount: number;
|
||||
|
||||
constructor(prop: IPluginMarketCardVO) {
|
||||
this.description = prop.description
|
||||
this.name = prop.name
|
||||
this.author = prop.author
|
||||
this.githubURL = prop.githubURL
|
||||
this.starCount = prop.starCount
|
||||
this.pluginId = prop.pluginId
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
.cardContainer {
|
||||
width: 360px;
|
||||
height: 140px;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFF;
|
||||
border-radius: 9px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.cardHeader {
|
||||
width: 90%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.iconVersionContainer {
|
||||
width: 90px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
width: 90%;
|
||||
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.cardFooter {
|
||||
width: 90%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.fontGray {
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.boldFont {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.linkSettingContainer {
|
||||
width: 80px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.link {
|
||||
width: 32px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: #6062E7;
|
||||
align-self: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
38
web/src/app/home/plugins/plugins.module.css
Normal file
38
web/src/app/home/plugins/plugins.module.css
Normal file
@@ -0,0 +1,38 @@
|
||||
.pageContainer {
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.marketComponentBody {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.pluginListContainer {
|
||||
align-self: flex-start;
|
||||
justify-self: flex-start;
|
||||
width: calc(100% - 60px);
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(auto-fill, minmax(160px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||||
gap: 15px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.modalTitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modalBody {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
Reference in New Issue
Block a user