mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-06-08 14:56:03 +00:00
chore: rename web_ui dir to web
This commit is contained in:
Junyan Qin
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user