xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-06-02 03:55:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: card layout in each page

Browse Source
This commit is contained in:
Junyan Qin
2025-05-10 09:25:39 +08:00
parent f8b877fde0
commit 55087e54d0
15 changed files with 48 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/app/home/bots/botConfig.module.css
View File

@@ -1,12 +1,10 @@
.botListContainer {
align-self: flex-start;
justify-self: flex-start;
width: calc(100%);
margin: auto;
width: 100%;
padding-left: 0.8rem;
padding-right: 0.8rem;
display: grid;
grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
gap: 2rem;
justify-items: center;
align-items: center;
justify-items: stretch;
align-items: start;
}

2
web/src/app/home/bots/components/bot-card/botCard.module.css
View File

@@ -1,5 +1,5 @@
.cardContainer {
width: 24rem;
width: 100%;
height: 10rem;
background-color: #fff;
border-radius: 10px;

2
web/src/app/home/bots/page.tsx
View File

@@ -106,7 +106,7 @@ export default function BotConfigPage() {
{/* 注意：其余的返回内容需要保持在Spin组件外部 */}
<div className={`${styles.botListContainer}`}>
<CreateCardComponent
width={'24rem'}
width={'100%'}
height={'10rem'}
plusSize={'90px'}
onClick={handleCreateBotClick}

13
web/src/app/home/models/LLMConfig.module.css
View File

@@ -1,15 +1,12 @@
.modelListContainer {
align-self: flex-start;
justify-self: flex-start;
width: calc(100%);
margin: auto;
width: 100%;
padding-left: 0.8rem;
padding-right: 0.8rem;
display: grid;
grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
gap: 2rem;
justify-items: center;
align-items: center;
justify-items: stretch;
align-items: start;
}
.emptyContainer {

2
web/src/app/home/models/component/llm-card/LLMCard.module.css
View File

@@ -1,5 +1,5 @@
.cardContainer {
width: 24rem;
width: 100%;
height: 10rem;
background-color: #fff;
border-radius: 10px;

2
web/src/app/home/models/page.tsx
View File

@@ -98,7 +98,7 @@ export default function LLMConfigPage() {
</Dialog>
<div className={`${styles.modelListContainer}`}>
<CreateCardComponent
width={'24rem'}
width={'100%'}
height={'10rem'}
plusSize={'90px'}
onClick={handleCreateModelClick}

2
web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css
View File

@@ -1,5 +1,5 @@
.cardContainer {
width: 24rem;
width: 100%;
height: 10rem;
background-color: #fff;
border-radius: 10px;

2
web/src/app/home/pipelines/page.tsx
View File

@@ -118,7 +118,7 @@ export default function PluginConfigPage() {
<div className={styles.pipelineListContainer}>
<CreateCardComponent
width={'24rem'}
width={'100%'}
height={'10rem'}
plusSize={'90px'}
onClick={() => {

17
web/src/app/home/pipelines/pipelineConfig.module.css
View File

@@ -1,8 +1,3 @@
.formItemSubTitle {
font-size: 30px;
font-weight: bold;
}
.configPageContainer {
width: 100%;
height: 100%;
@@ -10,14 +5,12 @@
.pipelineListContainer {
align-self: flex-start;
justify-self: flex-start;
width: calc(100%);
margin: auto;
width: 100%;
padding-left: 0.8rem;
padding-right: 0.8rem;
display: grid;
grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
gap: 2rem;
justify-items: center;
align-items: center;
justify-items: stretch;
align-items: start;
}

10
web/src/app/home/plugins/page.tsx
View File

@@ -18,7 +18,7 @@ import { Input } from '@/components/ui/input';
import { GithubIcon } from 'lucide-react';
import { useState, useRef } from 'react';
import { httpClient } from '@/app/infra/http/HttpClient';
import { toast } from 'sonner';
enum PluginInstallStatus {
WAIT_INPUT = 'wait_input',
INSTALLING = 'installing',
@@ -43,6 +43,8 @@ export default function PluginConfigPage() {
.then((resp) => {
const taskId = resp.task_id;
let alreadySuccess = false;
// 每秒拉取一次任务状态
const interval = setInterval(() => {
httpClient.getAsyncTask(taskId).then((resp) => {
@@ -54,6 +56,10 @@ export default function PluginConfigPage() {
setPluginInstallStatus(PluginInstallStatus.ERROR);
} else {
// success
if (!alreadySuccess) {
toast.success('插件安装成功');
alreadySuccess = true;
}
setGithubURL('');
setModalOpen(false);
pluginInstalledRef.current?.refreshPluginList();
@@ -72,7 +78,7 @@ export default function PluginConfigPage() {
return (
<div className={styles.pageContainer}>
<Tabs defaultValue="installed" className="w-full">
<div className="flex flex-row justify-between items-center">
<div className="flex flex-row justify-between items-center px-[0.8rem]">
<TabsList className="shadow-md py-5 bg-[#f0f0f0]">
<TabsTrigger value="installed" className="px-6 py-4 cursor-pointer">
已安装

2
web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
View File

@@ -32,7 +32,7 @@ export default function PluginCardComponent({
}
return (
<div
className="w-[26rem] h-[10rem] bg-white rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] p-[1.2rem] cursor-pointer"
className="w-[100%] h-[10rem] bg-white rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] p-[1.2rem] cursor-pointer"
onClick={onCardClick}
>
<div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">

7
web/src/app/home/plugins/plugin-installed/plugin-form/PluginForm.tsx
View File

@@ -79,6 +79,8 @@ export default function PluginForm({
.then((res) => {
const taskId = res.task_id;
let alreadySuccess = false;
const interval = setInterval(() => {
httpClient.getAsyncTask(taskId).then((res) => {
if (res.runtime.done) {
@@ -87,6 +89,11 @@ export default function PluginForm({
setPluginRemoveError(res.runtime.exception);
setPluginRemoveStatus(PluginRemoveStatus.ERROR);
} else {
// success
if (!alreadySuccess) {
toast.success('插件删除成功');
alreadySuccess = true;
}
setPluginRemoveStatus(PluginRemoveStatus.WAIT_INPUT);
setShowDeleteConfirmModal(false);
onFormSubmit();

2
web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx
View File

@@ -125,7 +125,7 @@ export default function PluginMarketComponent({
return (
<div className={`${styles.marketComponentBody}`}>
<div className="flex items-center justify-start mb-2 mt-2">
<div className="flex items-center justify-start mb-2 mt-2 pl-[0.8rem] pr-[0.8rem]">
<Input
style={{
width: '300px',

2
web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
View File

@@ -13,7 +13,7 @@ export default function PluginMarketCardComponent({
}
return (
<div className="w-[26rem] h-[10rem] bg-white rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] p-[1.2rem]">
<div className="w-[100%] h-[10rem] bg-white rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] p-[1.2rem]">
<div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">
<svg
className="w-16 h-16 text-[#2288ee]"

31
web/src/app/home/plugins/plugins.module.css
View File

@@ -9,26 +9,13 @@
}
.pluginListContainer {
align-self: flex-start;
justify-self: flex-start;
margin: auto;
width: 100%;
padding-left: 0.8rem;
padding-right: 0.8rem;
padding-top: 2rem;
display: grid;
grid-template-rows: repeat(auto-fill, minmax(12rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
gap: 15px;
/* justify-items: center; */
align-items: center;
}
.modalTitle {
display: flex;
flex-direction: row;
align-items: center;
}
.modalBody {
height: 80px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
gap: 2rem;
justify-items: stretch;
align-items: start;
}