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

dark mode

Browse Source
This commit is contained in:
TwperBody
2025-08-10 22:17:06 +08:00
parent eb7b5dcc25
commit 2aef139577
35 changed files with 450 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/home/pipelines/components/debug-dialog/AtBadge.tsx
+2 -2
View File
@@ -15,13 +15,13 @@ export default function AtBadge({
return (
<Badge
variant="secondary"
className="flex items-center gap-1 px-2 py-1 text-sm bg-blue-100 text-blue-600 hover:bg-blue-200"
className="flex items-center gap-1 px-2 py-1 text-sm bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-900/60"
>
@{targetName}
{!readonly && onRemove && (
<button
onClick={onRemove}
className="ml-1 hover:text-blue-800 focus:outline-none"
className="ml-1 hover:text-blue-800 dark:hover:text-blue-200 focus:outline-none"
>
<X className="h-3 w-3" />
</button>
web/src/app/home/pipelines/components/debug-dialog/DebugDialog.tsx
+12 -12
View File
@@ -218,14 +218,14 @@ export default function DebugDialog({
const renderContent = () => (
<div className="flex flex-1 h-full min-h-0">
<div className="w-14 bg-white p-2 pl-0 flex-shrink-0 flex flex-col justify-start gap-2">
<div className="w-14 bg-white dark:bg-black p-2 pl-0 flex-shrink-0 flex flex-col justify-start gap-2">
<Button
variant="ghost"
size="icon"
className={`w-10 h-10 justify-center rounded-md transition-none ${
sessionType === 'person'
? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
: 'bg-white text-gray-800 hover:bg-gray-100'
: 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
} border-0 shadow-none`}
onClick={() => setSessionType('person')}
>
@@ -244,7 +244,7 @@ export default function DebugDialog({
className={`w-10 h-10 justify-center rounded-md transition-none ${
sessionType === 'group'
? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
: 'bg-white text-gray-800 hover:bg-gray-100'
: 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
} border-0 shadow-none`}
onClick={() => setSessionType('group')}
>
@@ -261,7 +261,7 @@ export default function DebugDialog({
</div>
<div className="flex-1 flex flex-col w-[10rem] h-full min-h-0">
<ScrollArea className="flex-1 p-6 overflow-y-auto min-h-0 bg-white">
<ScrollArea className="flex-1 p-6 overflow-y-auto min-h-0 bg-white dark:bg-black">
<div className="space-y-6">
{messages.length === 0 ? (
<div className="text-center text-muted-foreground py-12 text-lg">
@@ -281,7 +281,7 @@ export default function DebugDialog({
'max-w-md px-5 py-3 rounded-2xl',
message.role === 'user'
? 'bg-[#2288ee] text-white rounded-br-none'
: 'bg-gray-100 text-gray-900 rounded-bl-none',
: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-bl-none',
)}
>
{renderMessageContent(message)}
@@ -290,7 +290,7 @@ export default function DebugDialog({
'text-xs mt-2',
message.role === 'user'
? 'text-white/70'
: 'text-gray-500',
: 'text-gray-500 dark:text-gray-400',
)}
>
{message.role === 'user'
@@ -305,7 +305,7 @@ export default function DebugDialog({
</div>
</ScrollArea>
<div className="p-4 pb-0 bg-white flex gap-2">
<div className="p-4 pb-0 bg-white dark:bg-black flex gap-2">
<div className="flex-1 flex items-center gap-2">
{hasAt && (
<AtBadge targetName="webchatbot" onRemove={handleAtRemove} />
@@ -322,23 +322,23 @@ export default function DebugDialog({
? t('pipelines.debugDialog.privateChat')
: t('pipelines.debugDialog.groupChat'),
})}
className="flex-1 rounded-md px-3 py-2 border border-gray-300 focus:border-[#2288ee] transition-none text-base"
className="flex-1 rounded-md px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 focus:border-[#2288ee] transition-none text-base"
/>
{showAtPopover && (
<div
ref={popoverRef}
className="absolute bottom-full left-0 mb-2 w-auto rounded-md border bg-white shadow-lg"
className="absolute bottom-full left-0 mb-2 w-auto rounded-md border bg-white dark:bg-gray-800 dark:border-gray-600 shadow-lg"
>
<div
className={cn(
'flex items-center gap-2 px-4 py-1.5 rounded cursor-pointer',
isHovering ? 'bg-gray-100' : 'bg-white',
isHovering ? 'bg-gray-100 dark:bg-gray-700' : 'bg-white dark:bg-gray-800',
)}
onClick={handleAtSelect}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
<span>
<span className="text-gray-800 dark:text-gray-200">
@webchatbot - {t('pipelines.debugDialog.atTips')}
</span>
</div>
@@ -369,7 +369,7 @@ export default function DebugDialog({
// 原有的Dialog包装
return (
<DialogContent className="!max-w-[70vw] max-w-6xl h-[70vh] p-6 flex flex-col rounded-2xl shadow-2xl bg-white">
<DialogContent className="!max-w-[70vw] max-w-6xl h-[70vh] p-6 flex flex-col rounded-2xl shadow-2xl bg-white dark:bg-black">
{renderContent()}
</DialogContent>
);
web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css
+37
View File
@@ -10,12 +10,22 @@
flex-direction: row;
justify-content: space-between;
gap: 0.5rem;
transition: all 0.2s ease;
}
:global(.dark) .cardContainer {
background-color: #1a1a1e;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1);
}
.cardContainer:hover {
box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
}
:global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15);
}
.basicInfoContainer {
width: 100%;
height: 100%;
@@ -35,6 +45,11 @@
.basicInfoNameText {
font-size: 1.4rem;
font-weight: 500;
color: #1a1a1a;
}
:global(.dark) .basicInfoNameText {
color: #f0f0f0;
}
.basicInfoDescriptionText {
@@ -48,6 +63,10 @@
color: #b1b1b1;
}
:global(.dark) .basicInfoDescriptionText {
color: #888888;
}
.basicInfoLastUpdatedTimeContainer {
display: flex;
flex-direction: row;
@@ -58,11 +77,21 @@
.basicInfoUpdateTimeIcon {
width: 1.2rem;
height: 1.2rem;
color: #626262;
}
:global(.dark) .basicInfoUpdateTimeIcon {
color: #a0a0a0;
}
.basicInfoUpdateTimeText {
font-size: 1rem;
font-weight: 400;
color: #626262;
}
:global(.dark) .basicInfoUpdateTimeText {
color: #a0a0a0;
}
.operationContainer {
@@ -86,12 +115,20 @@
color: #ffcd27;
}
:global(.dark) .operationDefaultBadgeIcon {
color: #fbbf24;
}
.operationDefaultBadgeText {
font-size: 1rem;
font-weight: 400;
color: #ffcd27;
}
:global(.dark) .operationDefaultBadgeText {
color: #fbbf24;
}
.bigText {
white-space: nowrap;
overflow: hidden;
web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
+2 -2
View File
@@ -342,7 +342,7 @@ export default function PipelineFormComponent({
return (
<>
<div className="!max-w-[70vw] max-w-6xl h-full p-0 flex flex-col bg-white">
<div className="!max-w-[70vw] max-w-6xl h-full p-0 flex flex-col bg-white dark:bg-black">
<Form {...form}>
<form
id="pipeline-form"
@@ -456,7 +456,7 @@ export default function PipelineFormComponent({
</form>
{/* 按钮栏移到 Tabs 外部，始终固定底部 */}
{showButtons && (
<div className="flex justify-end gap-2 pt-4 border-t mb-0 bg-white sticky bottom-0 z-10">
<div className="flex justify-end gap-2 pt-4 border-t mb-0 bg-white dark:bg-black sticky bottom-0 z-10">
{isEditMode && !isDefaultPipeline && (
<Button
type="button"