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

perf: card shadowbox

Browse Source
This commit is contained in:
Junyan Qin
2025-08-11 20:41:57 +08:00
parent 2aef139577
commit 0124448479
19 changed files with 73 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/home/bots/components/bot-card/botCard.module.css
+3 -3
View File
@@ -10,8 +10,8 @@
} }
:global(.dark) .cardContainer { :global(.dark) .cardContainer {
background-color: #1a1a1e; background-color: #1f1f22;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1); box-shadow: 0;
} }
.cardContainer:hover { .cardContainer:hover {
@@ -19,7 +19,7 @@
} }
:global(.dark) .cardContainer:hover { :global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15); box-shadow: 0;
} }
.iconBasicInfoContainer { .iconBasicInfoContainer {
web/src/app/home/bots/components/bot-form/BotForm.tsx
+2 -2
View File
@@ -394,7 +394,7 @@ export default function BotForm({
<FormLabel>{t('bots.bindPipeline')}</FormLabel> <FormLabel>{t('bots.bindPipeline')}</FormLabel>
<FormControl> <FormControl>
<Select onValueChange={field.onChange} {...field}> <Select onValueChange={field.onChange} {...field}>
<SelectTrigger className="bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue <SelectValue
placeholder={t('bots.selectPipeline')} placeholder={t('bots.selectPipeline')}
/> />
@@ -467,7 +467,7 @@ export default function BotForm({
}} }}
value={field.value} value={field.value}
> >
<SelectTrigger className="w-[180px] bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="w-[180px] bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('bots.selectAdapter')} /> <SelectValue placeholder={t('bots.selectAdapter')} />
</SelectTrigger> </SelectTrigger>
<SelectContent className="fixed z-[1000]"> <SelectContent className="fixed z-[1000]">
web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
+4 -4
View File
@@ -132,7 +132,7 @@ export default function DynamicFormItemComponent({
case DynamicFormItemType.SELECT: case DynamicFormItemType.SELECT:
return ( return (
<Select value={field.value} onValueChange={field.onChange}> <Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className="bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('common.select')} /> <SelectValue placeholder={t('common.select')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -150,7 +150,7 @@ export default function DynamicFormItemComponent({
case DynamicFormItemType.LLM_MODEL_SELECTOR: case DynamicFormItemType.LLM_MODEL_SELECTOR:
return ( return (
<Select value={field.value} onValueChange={field.onChange}> <Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className="bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('models.selectModel')} /> <SelectValue placeholder={t('models.selectModel')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -267,7 +267,7 @@ export default function DynamicFormItemComponent({
case DynamicFormItemType.KNOWLEDGE_BASE_SELECTOR: case DynamicFormItemType.KNOWLEDGE_BASE_SELECTOR:
return ( return (
<Select value={field.value} onValueChange={field.onChange}> <Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger className="bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('knowledge.selectKnowledgeBase')} /> <SelectValue placeholder={t('knowledge.selectKnowledgeBase')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -303,7 +303,7 @@ export default function DynamicFormItemComponent({
field.onChange(newValue); field.onChange(newValue);
}} }}
> >
<SelectTrigger className="w-[120px] bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="w-[120px] bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
web/src/app/home/components/empty-and-create-component/EmptyAndCreateComponent.tsx
-27
View File
@@ -1,27 +0,0 @@
import styles from './emptyAndCreate.module.css';
export default function EmptyAndCreateComponent({
title,
subTitle,
buttonText,
onButtonClick,
}: {
title: string;
subTitle: string;
buttonText: string;
onButtonClick: () => void;
}) {
return (
<div className={`${styles.emptyPageContainer}`}>
<div className={`${styles.emptyContainer}`}>
<div className={`${styles.emptyInfoContainer}`}>
<div className={`${styles.emptyInfoText}`}>{title}</div>
<div className={`${styles.emptyInfoSubText}`}>{subTitle}</div>
</div>
<div className={`${styles.emptyCreateButton}`} onClick={onButtonClick}>
{buttonText}
</div>
</div>
</div>
);
}
web/src/app/home/components/empty-and-create-component/emptyAndCreate.module.css
-54
View File
@@ -1,54 +0,0 @@
.emptyPageContainer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #c5c5c5;
border-radius: 10px;
}
.emptyContainer {
width: 100%;
height: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.emptyCreateButton {
width: 200px;
height: 50px;
border-radius: 20px;
background-color: #2288ee;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 50px;
user-select: none;
}
.emptyCreateButton:hover {
background-color: #1b77d2;
}
.emptyInfoContainer {
width: 100%;
height: 60px;
display: flex;
flex-direction: column;
align-items: center;
color: #353535;
}
.emptyInfoText {
font-size: 30px;
}
.emptyInfoSubText {
font-size: 28px;
}
web/src/app/home/knowledge/components/kb-card/KBCard.module.css
+3 -3
View File
@@ -14,8 +14,8 @@
} }
:global(.dark) .cardContainer { :global(.dark) .cardContainer {
background-color: #1a1a1e; background-color: #1f1f22;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1); box-shadow: 0;
} }
.cardContainer:hover { .cardContainer:hover {
@@ -23,7 +23,7 @@
} }
:global(.dark) .cardContainer:hover { :global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15); box-shadow: 0;
} }
.basicInfoContainer { .basicInfoContainer {
web/src/app/home/knowledge/components/kb-form/KBForm.tsx
+1 -1
View File
@@ -200,7 +200,7 @@ export default function KBForm({
}} }}
value={field.value} value={field.value}
> >
<SelectTrigger className="w-[180px] bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="w-[180px] bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue <SelectValue
placeholder={t('knowledge.selectEmbeddingModel')} placeholder={t('knowledge.selectEmbeddingModel')}
/> />
web/src/app/home/models/component/embedding-card/EmbeddingCard.module.css
+3 -3
View File
@@ -10,8 +10,8 @@
} }
:global(.dark) .cardContainer { :global(.dark) .cardContainer {
background-color: #1a1a1e; background-color: #1f1f22;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1); box-shadow: 0;
} }
.cardContainer:hover { .cardContainer:hover {
@@ -19,7 +19,7 @@
} }
:global(.dark) .cardContainer:hover { :global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15); box-shadow: 0;
} }
.iconBasicInfoContainer { .iconBasicInfoContainer {
web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx
+2 -2
View File
@@ -404,7 +404,7 @@ export default function EmbeddingForm({
}} }}
value={field.value} value={field.value}
> >
<SelectTrigger className="w-[180px] bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="w-[180px] bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue <SelectValue
placeholder={t('models.selectModelProvider')} placeholder={t('models.selectModelProvider')}
/> />
@@ -479,7 +479,7 @@ export default function EmbeddingForm({
updateExtraArg(index, 'type', value) updateExtraArg(index, 'type', value)
} }
> >
<SelectTrigger className="w-[120px] bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="w-[120px] bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('models.type')} /> <SelectValue placeholder={t('models.type')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
web/src/app/home/models/component/llm-card/LLMCard.module.css
+3 -3
View File
@@ -10,8 +10,8 @@
} }
:global(.dark) .cardContainer { :global(.dark) .cardContainer {
background-color: #1a1a1e; background-color: #1f1f22;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1); box-shadow: 0;
} }
.cardContainer:hover { .cardContainer:hover {
@@ -19,7 +19,7 @@
} }
:global(.dark) .cardContainer:hover { :global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15); box-shadow: 0;
} }
.iconBasicInfoContainer { .iconBasicInfoContainer {
web/src/app/home/models/component/llm-form/LLMForm.tsx
+2 -2
View File
@@ -420,7 +420,7 @@ export default function LLMForm({
}} }}
value={field.value} value={field.value}
> >
<SelectTrigger className="w-[180px] bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="w-[180px] bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue <SelectValue
placeholder={t('models.selectModelProvider')} placeholder={t('models.selectModelProvider')}
/> />
@@ -553,7 +553,7 @@ export default function LLMForm({
updateExtraArg(index, 'type', value) updateExtraArg(index, 'type', value)
} }
> >
<SelectTrigger className="w-[120px] bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="w-[120px] bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('models.type')} /> <SelectValue placeholder={t('models.type')} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css
+3 -3
View File
@@ -14,8 +14,8 @@
} }
:global(.dark) .cardContainer { :global(.dark) .cardContainer {
background-color: #1a1a1e; background-color: #1f1f22;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1); box-shadow: 0;
} }
.cardContainer:hover { .cardContainer:hover {
@@ -23,7 +23,7 @@
} }
:global(.dark) .cardContainer:hover { :global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15); box-shadow: 0;
} }
.basicInfoContainer { .basicInfoContainer {
web/src/app/home/pipelines/page.tsx
+14 -5
View File
@@ -125,17 +125,26 @@ export default function PluginConfigPage() {
value={`${sortByValue},${sortOrderValue}`} value={`${sortByValue},${sortOrderValue}`}
onValueChange={handleSortChange} onValueChange={handleSortChange}
> >
<SelectTrigger className="w-[180px] cursor-pointer bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="w-[180px] cursor-pointer bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('pipelines.sortBy')} /> <SelectValue placeholder={t('pipelines.sortBy')} />
</SelectTrigger> </SelectTrigger>
<SelectContent className="bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectContent className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectItem value="created_at,DESC" className="text-gray-900 dark:text-gray-100"> <SelectItem
value="created_at,DESC"
className="text-gray-900 dark:text-gray-100"
>
{t('pipelines.newestCreated')} {t('pipelines.newestCreated')}
</SelectItem> </SelectItem>
<SelectItem value="updated_at,DESC" className="text-gray-900 dark:text-gray-100"> <SelectItem
value="updated_at,DESC"
className="text-gray-900 dark:text-gray-100"
>
{t('pipelines.recentlyEdited')} {t('pipelines.recentlyEdited')}
</SelectItem> </SelectItem>
<SelectItem value="updated_at,ASC" className="text-gray-900 dark:text-gray-100"> <SelectItem
value="updated_at,ASC"
className="text-gray-900 dark:text-gray-100"
>
{t('pipelines.earliestEdited')} {t('pipelines.earliestEdited')}
</SelectItem> </SelectItem>
</SelectContent> </SelectContent>
web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
+7 -3
View File
@@ -34,7 +34,7 @@ export default function PluginCardComponent({
} }
return ( return (
<div <div
className="w-[100%] h-[10rem] bg-white dark:bg-[#1a1a1e] rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] dark:shadow-[0px_2px_8px_0_rgba(255,255,255,0.1)] p-[1.2rem] cursor-pointer transition-all duration-200 hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0px_4px_12px_0_rgba(255,255,255,0.15)]" className="w-[100%] h-[10rem] bg-white dark:bg-[#1f1f22] rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] dark:shadow-[0] p-[1.2rem] cursor-pointer transition-all duration-200 hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0]"
onClick={onCardClick} onClick={onCardClick}
> >
<div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]"> <div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">
@@ -54,7 +54,9 @@ export default function PluginCardComponent({
{cardVO.author} /{' '} {cardVO.author} /{' '}
</div> </div>
<div className="flex flex-row items-center justify-start gap-[0.4rem]"> <div className="flex flex-row items-center justify-start gap-[0.4rem]">
<div className="text-[1.2rem] text-black dark:text-[#f0f0f0]">{cardVO.name}</div> <div className="text-[1.2rem] text-black dark:text-[#f0f0f0]">
{cardVO.name}
</div>
<Badge variant="outline" className="text-[0.7rem]"> <Badge variant="outline" className="text-[0.7rem]">
v{cardVO.version} v{cardVO.version}
</Badge> </Badge>
@@ -115,7 +117,9 @@ export default function PluginCardComponent({
<div className="flex items-center justify-center gap-[0.4rem]"> <div className="flex items-center justify-center gap-[0.4rem]">
<svg <svg
className={`w-[1.4rem] h-[1.4rem] cursor-pointer ${ className={`w-[1.4rem] h-[1.4rem] cursor-pointer ${
cardVO.repository ? 'text-black dark:text-[#f0f0f0]' : 'text-gray-400 dark:text-gray-600' cardVO.repository
? 'text-black dark:text-[#f0f0f0]'
: 'text-gray-400 dark:text-gray-600'
}`} }`}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx
+16 -5
View File
@@ -141,15 +141,26 @@ export default function PluginMarketComponent({
value={`${sortByValue},${sortOrderValue}`} value={`${sortByValue},${sortOrderValue}`}
onValueChange={handleSortChange} onValueChange={handleSortChange}
> >
<SelectTrigger className="w-[180px] ml-2 cursor-pointer bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectTrigger className="w-[180px] ml-2 cursor-pointer bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('plugins.sortBy')} /> <SelectValue placeholder={t('plugins.sortBy')} />
</SelectTrigger> </SelectTrigger>
<SelectContent className="bg-[#f0f0f0] dark:bg-[#2a2a2e]"> <SelectContent className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectItem value="stars,DESC" className="text-gray-900 dark:text-gray-100">{t('plugins.mostStars')}</SelectItem> <SelectItem
<SelectItem value="created_at,DESC" className="text-gray-900 dark:text-gray-100"> value="stars,DESC"
className="text-gray-900 dark:text-gray-100"
>
{t('plugins.mostStars')}
</SelectItem>
<SelectItem
value="created_at,DESC"
className="text-gray-900 dark:text-gray-100"
>
{t('plugins.recentlyAdded')} {t('plugins.recentlyAdded')}
</SelectItem> </SelectItem>
<SelectItem value="pushed_at,DESC" className="text-gray-900 dark:text-gray-100"> <SelectItem
value="pushed_at,DESC"
className="text-gray-900 dark:text-gray-100"
>
{t('plugins.recentlyUpdated')} {t('plugins.recentlyUpdated')}
</SelectItem> </SelectItem>
</SelectContent> </SelectContent>
web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
+4 -2
View File
@@ -16,7 +16,7 @@ export default function PluginMarketCardComponent({
} }
return ( return (
<div className="w-[100%] h-[10rem] bg-white dark:bg-[#1a1a1e] rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] dark:shadow-[0px_2px_8px_0_rgba(255,255,255,0.1)] p-[1.2rem] transition-all duration-200 hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0px_4px_12px_0_rgba(255,255,255,0.15)]"> <div className="w-[100%] h-[10rem] bg-white dark:bg-[#1f1f22] rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] dark:shadow-[0] p-[1.2rem] transition-all duration-200 hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0]">
<div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]"> <div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">
<svg <svg
className="w-16 h-16 text-[#2288ee]" className="w-16 h-16 text-[#2288ee]"
@@ -34,7 +34,9 @@ export default function PluginMarketCardComponent({
{cardVO.author} /{' '} {cardVO.author} /{' '}
</div> </div>
<div className="flex flex-row items-center justify-start gap-[0.4rem]"> <div className="flex flex-row items-center justify-start gap-[0.4rem]">
<div className="text-[1.2rem] text-black dark:text-[#f0f0f0]">{cardVO.name}</div> <div className="text-[1.2rem] text-black dark:text-[#f0f0f0]">
{cardVO.name}
</div>
</div> </div>
</div> </div>
web/src/app/infra/basic-component/create-card-component/createCartComponent.module.css
+3 -3
View File
@@ -11,8 +11,8 @@
} }
:global(.dark) .cardContainer { :global(.dark) .cardContainer {
background-color: #1a1a1e; background-color: #1f1f22;
box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.1); box-shadow: 0;
} }
.cardContainer:hover { .cardContainer:hover {
@@ -20,7 +20,7 @@
} }
:global(.dark) .cardContainer:hover { :global(.dark) .cardContainer:hover {
box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.15); box-shadow: 0;
} }
.createCardContainer { .createCardContainer {
web/src/components/providers/theme-provider.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
'use client'; 'use client';
import { ThemeProvider as NextThemesProvider } from 'next-themes'; import { ThemeProvider as NextThemesProvider } from 'next-themes';
import { type ThemeProviderProps } from 'next-themes/dist/types'; import { type ThemeProviderProps } from 'next-themes';
export function ThemeProvider({ children, ...props }: ThemeProviderProps) { export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return ( return (
@@ -15,4 +15,4 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
{children} {children}
</NextThemesProvider> </NextThemesProvider>
); );
} }
web/src/components/ui/theme-toggle.tsx
+1 -2
View File
@@ -18,7 +18,6 @@ export function ThemeToggle() {
> >
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">切换主题</span>
</Button> </Button>
); );
} }