xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-09-04 08:37:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1351 from baicai99/feat/webui-refactor

Browse Source 
feat：重构并改进应用的用户界面组件
This commit is contained in:
HYana
2025-04-29 17:04:31 +08:00
committed by GitHub
parent 9d6a56b496 f1beb10893
commit 09e70d70e9
17 changed files with 490 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/home/bots/page.tsx
+65 -59
View File
@@ -1,47 +1,50 @@
"use client" "use client";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
import styles from "./botConfig.module.css"; import styles from "./botConfig.module.css";
import EmptyAndCreateComponent from "@/app/home/components/empty-and-create-component/EmptyAndCreateComponent"; import EmptyAndCreateComponent from "@/app/home/components/empty-and-create-component/EmptyAndCreateComponent";
import {useRouter} from "next/navigation"; import { useRouter } from "next/navigation";
import {BotCardVO} from "@/app/home/bots/components/bot-card/BotCardVO"; import { BotCardVO } from "@/app/home/bots/components/bot-card/BotCardVO";
import {Modal, notification, Spin} from "antd"; import { Modal, notification, Spin } from "antd";
import BotForm from "@/app/home/bots/components/bot-form/BotForm"; import BotForm from "@/app/home/bots/components/bot-form/BotForm";
import BotCard from "@/app/home/bots/components/bot-card/BotCard"; import BotCard from "@/app/home/bots/components/bot-card/BotCard";
import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent" import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
import {httpClient} from "@/app/infra/http/HttpClient"; import { httpClient } from "@/app/infra/http/HttpClient";
import { Bot } from "@/app/infra/api/api-types"; import { Bot } from "@/app/infra/api/api-types";
export default function BotConfigPage() { export default function BotConfigPage() {
const router = useRouter(); const router = useRouter();
const [pageShowRule, setPageShowRule] = useState<BotConfigPageShowRule>(BotConfigPageShowRule.NO_BOT) const [pageShowRule, setPageShowRule] = useState<BotConfigPageShowRule>(
BotConfigPageShowRule.NO_BOT
);
const [modalOpen, setModalOpen] = useState<boolean>(false); const [modalOpen, setModalOpen] = useState<boolean>(false);
const [botList, setBotList] = useState<BotCardVO[]>([]) const [botList, setBotList] = useState<BotCardVO[]>([]);
const [isEditForm, setIsEditForm] = useState(false) const [isEditForm, setIsEditForm] = useState(false);
const [nowSelectedBotCard, setNowSelectedBotCard] = useState<BotCardVO>() const [nowSelectedBotCard, setNowSelectedBotCard] = useState<BotCardVO>();
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false);
useEffect(() => { useEffect(() => {
// TODO：补齐加载转圈逻辑 // TODO：补齐加载转圈逻辑
setIsLoading(true) setIsLoading(true);
checkHasLLM().then((hasLLM) => { checkHasLLM().then((hasLLM) => {
if (hasLLM) { if (hasLLM) {
getBotList() getBotList();
} else { } else {
setPageShowRule(BotConfigPageShowRule.NO_LLM) setPageShowRule(BotConfigPageShowRule.NO_LLM);
setIsLoading(false) setIsLoading(false);
} }
}) });
}, []) }, []);
async function checkHasLLM(): Promise<boolean> { async function checkHasLLM(): Promise<boolean> {
// NOT IMPL // NOT IMPL
return true return true;
} }
function getBotList() { function getBotList() {
httpClient.getBots().then((resp) => { httpClient
.getBots()
.then((resp) => {
const botList: BotCardVO[] = resp.bots.map((bot: Bot) => { const botList: BotCardVO[] = resp.bots.map((bot: Bot) => {
return new BotCardVO({ return new BotCardVO({
adapter: bot.adapter, adapter: bot.adapter,
@@ -49,48 +52,50 @@ export default function BotConfigPage() {
id: bot.uuid || "", id: bot.uuid || "",
name: bot.name, name: bot.name,
updateTime: bot.updated_at || "", updateTime: bot.updated_at || "",
pipelineName: bot.use_pipeline_name || "", pipelineName: bot.use_pipeline_name || ""
}) });
}) });
if (botList.length === 0) { if (botList.length === 0) {
setPageShowRule(BotConfigPageShowRule.NO_BOT) setPageShowRule(BotConfigPageShowRule.NO_BOT);
} else { } else {
setPageShowRule(BotConfigPageShowRule.HAVE_BOT) setPageShowRule(BotConfigPageShowRule.HAVE_BOT);
} }
setBotList(botList) setBotList(botList);
}).catch((err) => { })
console.error("get bot list error", err) .catch((err) => {
console.error("get bot list error", err);
// TODO HACK: need refactor to hook mode Notification, but it's not working under render // TODO HACK: need refactor to hook mode Notification, but it's not working under render
notification.error({ notification.error({
message: "获取机器人列表失败", message: "获取机器人列表失败",
description: err.message, description: err.message,
placement: "bottomRight", placement: "bottomRight"
}) });
}).finally(() => {
setIsLoading(false)
}) })
.finally(() => {
setIsLoading(false);
});
} }
function handleCreateBotClick() { function handleCreateBotClick() {
setIsEditForm(false) setIsEditForm(false);
setNowSelectedCard(undefined) setNowSelectedCard(undefined);
setModalOpen(true); setModalOpen(true);
} }
function setNowSelectedCard(cardVO: BotCardVO | undefined) { function setNowSelectedCard(cardVO: BotCardVO | undefined) {
setNowSelectedBotCard(cardVO) setNowSelectedBotCard(cardVO);
} }
function selectBot(cardVO: BotCardVO) { function selectBot(cardVO: BotCardVO) {
setIsEditForm(true) setIsEditForm(true);
setNowSelectedCard(cardVO) setNowSelectedCard(cardVO);
console.log("set now vo", cardVO) console.log("set now vo", cardVO);
setModalOpen(true) setModalOpen(true);
} }
return ( return (
<Spin spinning={isLoading}>
<div className={styles.configPageContainer}> <div className={styles.configPageContainer}>
<Spin spinning={isLoading} tip="加载中..." size="large">
<Modal <Modal
title={isEditForm ? "编辑机器人" : "创建机器人"} title={isEditForm ? "编辑机器人" : "创建机器人"}
centered centered
@@ -104,13 +109,13 @@ export default function BotConfigPage() {
<BotForm <BotForm
initBotId={nowSelectedBotCard?.id} initBotId={nowSelectedBotCard?.id}
onFormSubmit={() => { onFormSubmit={() => {
getBotList() getBotList();
setModalOpen(false) setModalOpen(false);
}} }}
onFormCancel={() => setModalOpen(false)} onFormCancel={() => setModalOpen(false)}
/> />
</Modal> </Modal>
{pageShowRule === BotConfigPageShowRule.NO_LLM && {pageShowRule === BotConfigPageShowRule.NO_LLM && (
<EmptyAndCreateComponent <EmptyAndCreateComponent
title={"需要先创建大模型才能配置机器人哦～"} title={"需要先创建大模型才能配置机器人哦～"}
subTitle={"快去创建一个吧！"} subTitle={"快去创建一个吧！"}
@@ -119,44 +124,45 @@ export default function BotConfigPage() {
router.push("/home/models"); router.push("/home/models");
}} }}
/> />
} )}
{pageShowRule === BotConfigPageShowRule.NO_BOT && {pageShowRule === BotConfigPageShowRule.NO_BOT && (
<EmptyAndCreateComponent <EmptyAndCreateComponent
title={"您还未配置机器人哦～"} title={"您还未配置机器人哦～"}
subTitle={"快去创建一个吧！"} subTitle={"快去创建一个吧！"}
buttonText={"创建机器人 +"} buttonText={"创建机器人 +"}
onButtonClick={handleCreateBotClick} onButtonClick={handleCreateBotClick}
/> />
} )}
</Spin>
{pageShowRule === BotConfigPageShowRule.HAVE_BOT && {/* 注意：其余的返回内容需要保持在Spin组件外部 */}
<div className={`${styles.botListContainer}`} {pageShowRule === BotConfigPageShowRule.HAVE_BOT && (
> <div className={`${styles.botListContainer}`}>
{botList.map(cardVO => { {botList.map((cardVO) => {
return ( return (
<div <div
key={cardVO.id} key={cardVO.id}
onClick={() => {selectBot(cardVO)}} onClick={() => {
selectBot(cardVO);
}}
> >
<BotCard botCardVO={cardVO} /> <BotCard botCardVO={cardVO} />
</div>) </div>
);
})} })}
<CreateCardComponent <CreateCardComponent
width={360}
height={200} height={200}
plusSize={90} plusSize={90}
onClick={handleCreateBotClick} onClick={handleCreateBotClick}
/> />
</div> </div>
} )}
</div> </div>
</Spin> );
)
} }
enum BotConfigPageShowRule { enum BotConfigPageShowRule {
NO_LLM, NO_LLM,
NO_BOT, NO_BOT,
HAVE_BOT, HAVE_BOT
} }
web/src/app/home/components/home-sidebar/HomeSidebar.tsx
+15 -7
View File
@@ -67,23 +67,29 @@ export default function HomeSidebar({
} }
} }
return ( return (
<div className={`${styles.sidebarContainer}`}> <div className={`${styles.sidebarContainer}`}>
{/* LangBot、ICON区域 */} {/* LangBot、ICON区域 */}
<div className={`${styles.langbotIconContainer}`}> <div className={`${styles.langbotIconContainer}`}>
{/* icon */} {/* icon */}
<div className={`${styles.langbotIcon}`}>L</div> <div className={`${styles.langbotIcon}`}>
<div className={`${styles.langbotText}`}>Langbot</div> L
</div>
<div className={`${styles.langbotText}`}>
Langbot
</div>
</div> </div>
{/* 菜单列表，后期可升级成配置驱动 */} {/* 菜单列表，后期可升级成配置驱动 */}
<div> <div>
{sidebarConfigList.map((config) => { {
sidebarConfigList.map(config => {
return ( return (
<div <div
key={config.id} key={config.id}
onClick={() => { onClick={() => {
console.log("click:", config.id); console.log('click:', config.id)
handleChildClick(config); handleChildClick(config)
}} }}
> >
<SidebarChild <SidebarChild
@@ -92,8 +98,10 @@ export default function HomeSidebar({
name={config.name} name={config.name}
/> />
</div> </div>
); )
})} })
}
</div> </div>
</div> </div>
); );
web/src/app/home/layout.module.css
+6 -7
View File
@@ -1,3 +1,4 @@
/* 主布局容器 */
.homeLayoutContainer { .homeLayoutContainer {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@@ -5,14 +6,12 @@
flex-direction: row; flex-direction: row;
} }
/* 主内容区域 */
.main { .main {
background-color: #f5f5f7;
padding: 0;
overflow: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #FAFBFB; padding: 20px;
}
.mainContent {
width: calc(100% - 40px);
height: calc(100% - 110px);
margin: 20px;
} }
web/src/app/home/layout.tsx
+33 -15
View File
@@ -1,30 +1,48 @@
"use client"; "use client"
import "@ant-design/v5-patch-for-react-19"; import '@ant-design/v5-patch-for-react-19';
import styles from "./layout.module.css"; import styles from "./layout.module.css"
import HomeSidebar from "@/app/home/components/home-sidebar/HomeSidebar"; import HomeSidebar from "@/app/home/components/home-sidebar/HomeSidebar";
import HomeTitleBar from "@/app/home/components/home-titlebar/HomeTitleBar"; import HomeTitleBar from "@/app/home/components/home-titlebar/HomeTitleBar";
import React, { useState } from "react"; import React, { useState } from "react";
import { SidebarChildVO } from "@/app/home/components/home-sidebar/HomeSidebarChild"; import { SidebarChildVO } from "@/app/home/components/home-sidebar/HomeSidebarChild";
import { useRouter } from 'next/navigation';
import { Layout } from 'antd';
const { Sider, Content } = Layout;
export default function HomeLayout({ export default function HomeLayout({
children children
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const [title, setTitle] = useState<string>(""); const router = useRouter();
const onSelectedChange = (child: SidebarChildVO) => { const [title, setTitle] = useState<string>("")
setTitle(child.name); const onSelectedChangeAction = (child: SidebarChildVO) => {
}; setTitle(child.name)
}
return ( return (
<div className={`${styles.homeLayoutContainer}`}> <Layout className={styles.homeLayoutContainer}>
<HomeSidebar onSelectedChangeAction={onSelectedChange} /> {/* homeLayoutContainer 是整个容器的入口,使用 flex 的左右布局 */}
<div className={`${styles.main}`}>
<Sider className="left">
<HomeSidebar
onSelectedChangeAction={onSelectedChangeAction}
/>
{/* HomeSidebar 为侧边栏 */}
</Sider>
<Layout className="right">
{/* right 为内容显示区域，right使用 flex 上下布局，right 使用 flex 布局吃掉剩余部分 */}
<HomeTitleBar title={title} /> <HomeTitleBar title={title} />
{/* 主页面 */}
<div className={`${styles.mainContent}`}>{children}</div> <Content className={styles.main}>
</div> {/* mainContent 为主页面 */}
</div> {children}
); </Content>
</Layout>
</Layout>
)
} }
web/src/app/home/plugins/page.tsx
+5 -14
View File
@@ -1,6 +1,6 @@
"use client" "use client"
import { Radio } from 'antd'; import { Radio } from 'antd';
import {useState} from "react"; import { useState } from "react";
import PluginInstalledComponent from "@/app/home/plugins/plugin-installed/PluginInstalledComponent"; import PluginInstalledComponent from "@/app/home/plugins/plugin-installed/PluginInstalledComponent";
import PluginMarketComponent from "@/app/home/plugins/plugin-market/PluginMarketComponent"; import PluginMarketComponent from "@/app/home/plugins/plugin-market/PluginMarketComponent";
import styles from './plugins.module.css' import styles from './plugins.module.css'
@@ -14,8 +14,7 @@ export default function PluginConfigPage() {
const [nowPageType, setNowPageType] = useState(PageType.INSTALLED) const [nowPageType, setNowPageType] = useState(PageType.INSTALLED)
return ( return (
<div className={`${styles.pageContainer}`}> <div className={styles.pageContainer}>
<div>
<Radio.Group <Radio.Group
block block
options={[ options={[
@@ -26,21 +25,13 @@ export default function PluginConfigPage() {
value={nowPageType} value={nowPageType}
optionType="button" optionType="button"
buttonStyle="solid" buttonStyle="solid"
style={{ marginBottom: '20px' }}
onChange={(e) => { onChange={(e) => {
// 这里静态类型检测有问题 setNowPageType(e.target.value as PageType)
setNowPageType(e.target.value)
}} }}
/> />
</div>
<div className={`${styles.pageContainer}`}>
{
nowPageType === PageType.INSTALLED && <PluginInstalledComponent/>
}
{
nowPageType === PageType.MARKET && <PluginMarketComponent/>
}
</div>
{nowPageType === PageType.INSTALLED ? <PluginInstalledComponent /> : <PluginMarketComponent />}
</div> </div>
); );
} }
web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx
+2 -7
View File
@@ -1,8 +1,8 @@
"use client"; "use client";
import { useState, useEffect } from "react";
import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent"; import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO"; 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 PluginCardComponent from "@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent";
import styles from "@/app/home/plugins/plugins.module.css"; import styles from "@/app/home/plugins/plugins.module.css";
import { Modal, Input } from "antd"; import { Modal, Input } from "antd";
@@ -66,16 +66,12 @@ export default function PluginInstalledComponent() {
fontSize: "30px", fontSize: "30px",
marginRight: "20px" marginRight: "20px"
}} }}
type="setting"
/> />
<span>从 GitHub 安装插件</span>
</div> </div>
} }
centered
open={modalOpen} open={modalOpen}
onOk={() => handleModalConfirm()} onOk={handleModalConfirm}
onCancel={() => setModalOpen(false)} onCancel={() => setModalOpen(false)}
width={500}
destroyOnClose={true} destroyOnClose={true}
> >
<div className={`${styles.modalBody}`}> <div className={`${styles.modalBody}`}>
@@ -95,7 +91,6 @@ export default function PluginInstalledComponent() {
); );
})} })}
<CreateCardComponent <CreateCardComponent
width={360}
height={140} height={140}
plusSize={90} plusSize={90}
onClick={() => { onClick={() => {
web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
+5 -2
View File
@@ -46,14 +46,15 @@ export default function PluginCardComponent({
</div> </div>
{/* footer */} {/* footer */}
<div className={`${styles.cardFooter}`}> <div className={`${styles.cardFooter}`}>
<div className={`${styles.linkSettingContainer}`}> <div className={`${styles.footerContainer}`}>
<div className={`${styles.linkAndToolContainer}`}>
<div className={`${styles.link}`}> <div className={`${styles.link}`}>
<LinkOutlined style={{ fontSize: "22px" }} /> <LinkOutlined style={{ fontSize: "22px" }} />
<span>1</span> <span>1</span>
</div> </div>
<ToolOutlined style={{ fontSize: "22px" }} /> <ToolOutlined style={{ fontSize: "22px" }} />
</div> </div>
<div className={`${styles.switchContainer}`}>
<Switch <Switch
value={initialized} value={initialized}
onClick={handleEnable} onClick={handleEnable}
@@ -61,5 +62,7 @@ export default function PluginCardComponent({
/> />
</div> </div>
</div> </div>
</div>
</div>
); );
} }
web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
+19 -1
View File
@@ -1,5 +1,6 @@
.cardContainer { .cardContainer {
width: 360px; width: 100%;
/* 修改为 100% 以撑满整个网格单元 */
height: 140px; height: 140px;
box-sizing: border-box; box-sizing: border-box;
background-color: #FFF; background-color: #FFF;
@@ -40,12 +41,29 @@
.cardFooter { .cardFooter {
width: 90%; width: 90%;
height: 30px; height: 30px;
position: relative;
}
.footerContainer {
width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.linkAndToolContainer {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.switchContainer {
display: flex;
justify-content: flex-end;
}
.fontGray { .fontGray {
color: #6C6C6C; color: #6C6C6C;
web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx
+35 -15
View File
@@ -14,6 +14,8 @@ export default function PluginMarketComponent() {
const [totalCount, setTotalCount] = useState(0); const [totalCount, setTotalCount] = useState(0);
const [nowPage, setNowPage] = useState(1); const [nowPage, setNowPage] = useState(1);
const [searchKeyword, setSearchKeyword] = useState(""); const [searchKeyword, setSearchKeyword] = useState("");
const [loading, setLoading] = useState(false);
const pageSize = 10;
useEffect(() => { useEffect(() => {
initData(); initData();
@@ -35,7 +37,8 @@ export default function PluginMarketComponent() {
page: number = nowPage, page: number = nowPage,
keyword: string = searchKeyword keyword: string = searchKeyword
) { ) {
spaceClient.getMarketPlugins(page, 10, keyword).then((res) => { setLoading(true);
spaceClient.getMarketPlugins(page, pageSize, keyword).then((res) => {
setMarketPluginList( setMarketPluginList(
res.plugins.map( res.plugins.map(
(marketPlugin) => (marketPlugin) =>
@@ -45,43 +48,60 @@ export default function PluginMarketComponent() {
githubURL: marketPlugin.repository, githubURL: marketPlugin.repository,
name: marketPlugin.name, name: marketPlugin.name,
pluginId: String(marketPlugin.ID), pluginId: String(marketPlugin.ID),
starCount: marketPlugin.stars starCount: marketPlugin.stars,
version: "version" in marketPlugin ? String(marketPlugin.version) : "1.0.0", // Default version if not provided
}) })
) )
); );
setTotalCount(res.total); setTotalCount(res.total);
setLoading(false);
console.log("market plugins:", res); console.log("market plugins:", res);
}).catch(error => {
console.error("获取插件列表失败:", error);
setLoading(false);
}); });
} }
function handlePageChange(page: number) {
setNowPage(page);
getPluginList(page);
}
return ( return (
<div className={`${styles.marketComponentBody}`}> <div className={`${styles.marketComponentBody}`}>
<Input <Input
style={{ style={{
width: "300px", width: '300px',
marginTop: "10px" marginBottom: '10px',
}} }}
value={searchKeyword} value={searchKeyword}
placeholder="搜索插件" placeholder="搜索插件"
onChange={(e) => onInputSearchKeyword(e.target.value)} onChange={(e) => onInputSearchKeyword(e.target.value)}
/> />
<div className={`${styles.pluginListContainer}`}> <div className={`${styles.pluginListContainer}`}>
{marketPluginList.map((vo, index) => { {loading ? (
return ( <div style={{ textAlign: 'center', padding: '20px' }}>加载中...</div>
<div key={index}> ) : marketPluginList.length === 0 ? (
<div style={{ textAlign: 'center', padding: '20px' }}>没有找到匹配的插件</div>
) : (
marketPluginList.map((vo, index) => (
<div key={`${vo.pluginId}-${index}`}>
<PluginMarketCardComponent cardVO={vo} /> <PluginMarketCardComponent cardVO={vo} />
</div> </div>
); ))
})} )}
</div> </div>
{totalCount > 0 && (
<div style={{ display: 'flex', justifyContent: 'center', width: '100%', marginTop: '20px' }}>
<Pagination <Pagination
defaultCurrent={1} current={nowPage}
total={totalCount} total={totalCount}
onChange={(pageNumber) => { pageSize={pageSize}
setNowPage(pageNumber); onChange={handlePageChange}
getPluginList(pageNumber); showSizeChanger={false}
}}
/> />
</div> </div>
); )}
</div>
)
} }
web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
+11 -18
View File
@@ -1,17 +1,15 @@
import styles from "./pluginMarketCard.module.css" import styles from "./pluginMarketCard.module.css";
import {GithubOutlined, StarOutlined} from '@ant-design/icons'; import { GithubOutlined, StarOutlined } from "@ant-design/icons";
import {PluginMarketCardVO} from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO"; import { PluginMarketCardVO } from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
import {Button} from "antd"; import { Button } from "antd";
export default function PluginMarketCardComponent({ export default function PluginMarketCardComponent({
cardVO cardVO
}: { }: {
cardVO: PluginMarketCardVO cardVO: PluginMarketCardVO;
}) { }) {
function handleInstallClick(pluginId: string) {
console.log("Install plugin: ", pluginId);
function handleInstallClick (pluginId: string) {
console.log("Install plugin: ", pluginId)
} }
return ( return (
@@ -21,10 +19,7 @@ export default function PluginMarketCardComponent({
{/* left author */} {/* left author */}
<div className={`${styles.fontGray}`}>{cardVO.author}</div> <div className={`${styles.fontGray}`}>{cardVO.author}</div>
{/* right icon */} {/* right icon */}
<GithubOutlined <GithubOutlined style={{ fontSize: "26px" }} type="setting" />
style={{fontSize: '26px'}}
type="setting"
/>
</div> </div>
{/* content */} {/* content */}
<div className={`${styles.cardContent}`}> <div className={`${styles.cardContent}`}>
@@ -35,17 +30,15 @@ export default function PluginMarketCardComponent({
<div className={`${styles.cardFooter}`}> <div className={`${styles.cardFooter}`}>
<div className={`${styles.linkSettingContainer}`}> <div className={`${styles.linkSettingContainer}`}>
<div className={`${styles.link}`}> <div className={`${styles.link}`}>
<StarOutlined <StarOutlined style={{ fontSize: "22px" }} />
style={{fontSize: '22px'}} <span style={{ paddingLeft: "5px" }}>{cardVO.starCount}</span>
/>
<span>{cardVO.starCount}</span>
</div> </div>
</div> </div>
<Button <Button
type="primary" type="primary"
size={"small"} size={"small"}
onClick={() => { onClick={() => {
handleInstallClick(cardVO.pluginId) handleInstallClick(cardVO.pluginId);
}} }}
> >
安装 安装
web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO.ts
+3
View File
@@ -5,6 +5,7 @@ export interface IPluginMarketCardVO {
description: string, description: string,
starCount: number, starCount: number,
githubURL: string, githubURL: string,
version: string,
} }
export class PluginMarketCardVO implements IPluginMarketCardVO { export class PluginMarketCardVO implements IPluginMarketCardVO {
@@ -14,6 +15,7 @@ export class PluginMarketCardVO implements IPluginMarketCardVO {
author: string; author: string;
githubURL: string; githubURL: string;
starCount: number; starCount: number;
version: string;
constructor(prop: IPluginMarketCardVO) { constructor(prop: IPluginMarketCardVO) {
this.description = prop.description this.description = prop.description
@@ -22,5 +24,6 @@ export class PluginMarketCardVO implements IPluginMarketCardVO {
this.githubURL = prop.githubURL this.githubURL = prop.githubURL
this.starCount = prop.starCount this.starCount = prop.starCount
this.pluginId = prop.pluginId this.pluginId = prop.pluginId
this.version = prop.version
} }
} }
web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css
+1 -2
View File
@@ -1,6 +1,4 @@
.cardContainer { .cardContainer {
width: 360px;
height: 140px;
box-sizing: border-box; box-sizing: border-box;
background-color: #FFF; background-color: #FFF;
border-radius: 9px; border-radius: 9px;
@@ -73,5 +71,6 @@
color: #6062E7; color: #6062E7;
align-self: center; align-self: center;
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
} }
web/src/app/home/plugins/plugins.module.css
+2 -6
View File
@@ -1,8 +1,8 @@
.pageContainer { .pageContainer {
width: 100%; width: 100%;
height: calc(100% - 30px);
} }
.marketComponentBody { .marketComponentBody {
width: 100%; width: 100%;
height: calc(100% - 60px); height: calc(100% - 60px);
@@ -11,17 +11,13 @@
.pluginListContainer { .pluginListContainer {
align-self: flex-start; align-self: flex-start;
justify-self: flex-start; justify-self: flex-start;
width: calc(100% - 60px);
height: 100%;
max-height: 100%;
margin: auto; margin: auto;
display: grid; display: grid;
grid-template-rows: repeat(auto-fill, minmax(160px, 1fr)); grid-template-rows: repeat(auto-fill, minmax(160px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 15px; gap: 15px;
justify-items: center; /* justify-items: center; */
align-items: center; align-items: center;
overflow-y: scroll;
} }
.modalTitle { .modalTitle {
web/src/app/infra/basic-component/create-card-component/CreateCardComponent.tsx
+1 -3
View File
@@ -1,12 +1,10 @@
import styles from "./createCartComponent.module.css"; import styles from "./createCartComponent.module.css";
export default function CreateCardComponent({ export default function CreateCardComponent({
width,
height, height,
plusSize, plusSize,
onClick, onClick,
}: { }: {
width: number;
height: number; height: number;
plusSize: number; plusSize: number;
onClick: () => void onClick: () => void
@@ -15,7 +13,7 @@ export default function CreateCardComponent({
<div <div
className={`${styles.cardContainer} ${styles.createCardContainer} `} className={`${styles.cardContainer} ${styles.createCardContainer} `}
style={{ style={{
width: `${width}px`, width: `100%`,
height: `${height}px`, height: `${height}px`,
fontSize: `${plusSize}px` fontSize: `${plusSize}px`
}} }}
web/src/app/infra/http/HttpClient.ts
+9 -11
View File
@@ -26,7 +26,8 @@ import {
ApiRespSystemInfo, ApiRespSystemInfo,
ApiRespAsyncTasks, ApiRespAsyncTasks,
ApiRespAsyncTask, ApiRespAsyncTask,
ApiRespUserToken, MarketPluginResponse ApiRespUserToken,
MarketPluginResponse
} from "../api/api-types"; } from "../api/api-types";
import { notification } from "antd"; import { notification } from "antd";
@@ -50,22 +51,19 @@ export interface RequestConfig extends AxiosRequestConfig {
class HttpClient { class HttpClient {
private instance: AxiosInstance; private instance: AxiosInstance;
private disableToken: boolean = false private disableToken: boolean = false;
// 暂不需要SSR // 暂不需要SSR
// private ssrInstance: AxiosInstance | null = null // private ssrInstance: AxiosInstance | null = null
constructor( constructor(baseURL?: string, disableToken?: boolean) {
baseURL?: string,
disableToken?: boolean
) {
this.instance = axios.create({ this.instance = axios.create({
baseURL: baseURL || this.getBaseUrl(), baseURL: baseURL || this.getBaseUrl(),
timeout: 15000, timeout: 15000,
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json"
} }
}); });
this.disableToken = disableToken || false this.disableToken = disableToken || false;
this.initInterceptors(); this.initInterceptors();
} }
@@ -358,7 +356,7 @@ class HttpClient {
public getMarketPlugins( public getMarketPlugins(
page: number, page: number,
page_size: number, page_size: number,
query: string, query: string
): Promise<MarketPluginResponse> { ): Promise<MarketPluginResponse> {
return this.post(`/api/v1/market/plugins`, { return this.post(`/api/v1/market/plugins`, {
page, page,
@@ -366,7 +364,7 @@ class HttpClient {
query, query,
sort_by: "stars", sort_by: "stars",
sort_order: "DESC" sort_order: "DESC"
}) });
} }
public installPluginFromGithub( public installPluginFromGithub(
source: string source: string
@@ -415,4 +413,4 @@ class HttpClient {
export const httpClient = new HttpClient("https://version-4.langbot.dev"); export const httpClient = new HttpClient("https://version-4.langbot.dev");
// 临时写法，未来两种Client都继承自HttpClient父类，不允许共享方法 // 临时写法，未来两种Client都继承自HttpClient父类，不允许共享方法
export const spaceClient = new HttpClient("https://space.langbot.app") export const spaceClient = new HttpClient("https://space.langbot.app");
web/src/app/not-found.tsx
+5 -2
View File
@@ -10,8 +10,10 @@ export default function NotFound() {
const router = useRouter(); const router = useRouter();
return ( return (
<Layout style={{ height: '100vh', display: 'flex', background: 'white', justifyContent: 'center' }}> <Row justify="center" align="middle" style={{ minHeight: '100vh' }}> <Layout style={{ minHeight: '100vh', background: 'white' }}>
<div className="error-container" style={{ width: '100%', textAlign: 'center' }}> <Row justify="center" align="middle" style={{ minHeight: '100vh' }}>
<Col xs={22} sm={20} md={18} lg={14} xl={10}>
<div className="error-container" style={{ width: '100%', padding: '20px 0', textAlign: 'center' }}>
<div className="error-card" style={{ <div className="error-card" style={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@@ -69,6 +71,7 @@ export default function NotFound() {
</div> </div>
</div> </div>
</div> </div>
</Col>
</Row> </Row>
</Layout> </Layout>
); );