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 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

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

@@ -10,8 +10,8 @@
}
:global(.dark) .cardContainer {
background-color: #1a1a1e;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1);
background-color: #1f1f22;
box-shadow: 0;
}
.cardContainer:hover {
@@ -19,7 +19,7 @@
}
:global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15);
box-shadow: 0;
}
.iconBasicInfoContainer {

4
web/src/app/home/bots/components/bot-form/BotForm.tsx
View File

@@ -394,7 +394,7 @@ export default function BotForm({
<FormLabel>{t('bots.bindPipeline')}</FormLabel>
<FormControl>
<Select onValueChange={field.onChange} {...field}>
<SelectTrigger className="bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue
placeholder={t('bots.selectPipeline')}
/>
@@ -467,7 +467,7 @@ export default function BotForm({
}}
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')} />
</SelectTrigger>
<SelectContent className="fixed z-[1000]">

8
web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
View File

@@ -132,7 +132,7 @@ export default function DynamicFormItemComponent({
case DynamicFormItemType.SELECT:
return (
<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')} />
</SelectTrigger>
<SelectContent>
@@ -150,7 +150,7 @@ export default function DynamicFormItemComponent({
case DynamicFormItemType.LLM_MODEL_SELECTOR:
return (
<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')} />
</SelectTrigger>
<SelectContent>
@@ -267,7 +267,7 @@ export default function DynamicFormItemComponent({
case DynamicFormItemType.KNOWLEDGE_BASE_SELECTOR:
return (
<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')} />
</SelectTrigger>
<SelectContent>
@@ -303,7 +303,7 @@ export default function DynamicFormItemComponent({
field.onChange(newValue);
}}
>
<SelectTrigger className="w-[120px] bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectTrigger className="w-[120px] bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue />
</SelectTrigger>
<SelectContent>

27
web/src/app/home/components/empty-and-create-component/EmptyAndCreateComponent.tsx
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>
);
}

54
web/src/app/home/components/empty-and-create-component/emptyAndCreate.module.css
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;
}

6
web/src/app/home/knowledge/components/kb-card/KBCard.module.css
View File

@@ -14,8 +14,8 @@
}
:global(.dark) .cardContainer {
background-color: #1a1a1e;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1);
background-color: #1f1f22;
box-shadow: 0;
}
.cardContainer:hover {
@@ -23,7 +23,7 @@
}
:global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15);
box-shadow: 0;
}
.basicInfoContainer {

2
web/src/app/home/knowledge/components/kb-form/KBForm.tsx
View File

@@ -200,7 +200,7 @@ export default function KBForm({
}}
value={field.value}
>
<SelectTrigger className="w-[180px] bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectTrigger className="w-[180px] bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue
placeholder={t('knowledge.selectEmbeddingModel')}
/>

6
web/src/app/home/models/component/embedding-card/EmbeddingCard.module.css
View File

@@ -10,8 +10,8 @@
}
:global(.dark) .cardContainer {
background-color: #1a1a1e;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1);
background-color: #1f1f22;
box-shadow: 0;
}
.cardContainer:hover {
@@ -19,7 +19,7 @@
}
:global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15);
box-shadow: 0;
}
.iconBasicInfoContainer {

4
web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx
View File

@@ -404,7 +404,7 @@ export default function EmbeddingForm({
}}
value={field.value}
>
<SelectTrigger className="w-[180px] bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectTrigger className="w-[180px] bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue
placeholder={t('models.selectModelProvider')}
/>
@@ -479,7 +479,7 @@ export default function EmbeddingForm({
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')} />
</SelectTrigger>
<SelectContent>

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

@@ -10,8 +10,8 @@
}
:global(.dark) .cardContainer {
background-color: #1a1a1e;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1);
background-color: #1f1f22;
box-shadow: 0;
}
.cardContainer:hover {
@@ -19,7 +19,7 @@
}
:global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15);
box-shadow: 0;
}
.iconBasicInfoContainer {

4
web/src/app/home/models/component/llm-form/LLMForm.tsx
View File

@@ -420,7 +420,7 @@ export default function LLMForm({
}}
value={field.value}
>
<SelectTrigger className="w-[180px] bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectTrigger className="w-[180px] bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue
placeholder={t('models.selectModelProvider')}
/>
@@ -553,7 +553,7 @@ export default function LLMForm({
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')} />
</SelectTrigger>
<SelectContent>

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

@@ -14,8 +14,8 @@
}
:global(.dark) .cardContainer {
background-color: #1a1a1e;
box-shadow: 0px 2px 8px 0 rgba(255, 255, 255, 0.1);
background-color: #1f1f22;
box-shadow: 0;
}
.cardContainer:hover {
@@ -23,7 +23,7 @@
}
:global(.dark) .cardContainer:hover {
box-shadow: 0px 4px 12px 0 rgba(255, 255, 255, 0.15);
box-shadow: 0;
}
.basicInfoContainer {

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

@@ -125,17 +125,26 @@ export default function PluginConfigPage() {
value={`${sortByValue},${sortOrderValue}`}
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')} />
</SelectTrigger>
<SelectContent className="bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectItem value="created_at,DESC" className="text-gray-900 dark:text-gray-100">
<SelectContent className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectItem
value="created_at,DESC"
className="text-gray-900 dark:text-gray-100"
>
{t('pipelines.newestCreated')}
</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')}
</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')}
</SelectItem>
</SelectContent>

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

@@ -34,7 +34,7 @@ export default function PluginCardComponent({
}
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] 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}
>
<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} /{' '}
</div>
<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]">
v{cardVO.version}
</Badge>
@@ -115,7 +117,9 @@ export default function PluginCardComponent({
<div className="flex items-center justify-center gap-[0.4rem]">
<svg
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"
viewBox="0 0 24 24"

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

@@ -141,15 +141,26 @@ export default function PluginMarketComponent({
value={`${sortByValue},${sortOrderValue}`}
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')} />
</SelectTrigger>
<SelectContent className="bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectItem 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">
<SelectContent className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectItem
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')}
</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')}
</SelectItem>
</SelectContent>

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

@@ -16,7 +16,7 @@ export default function PluginMarketCardComponent({
}
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]">
<svg
className="w-16 h-16 text-[#2288ee]"
@@ -34,7 +34,9 @@ export default function PluginMarketCardComponent({
{cardVO.author} /{' '}
</div>
<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>

6
web/src/app/infra/basic-component/create-card-component/createCartComponent.module.css
View File

@@ -11,8 +11,8 @@
}
:global(.dark) .cardContainer {
background-color: #1a1a1e;
box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.1);
background-color: #1f1f22;
box-shadow: 0;
}
.cardContainer:hover {
@@ -20,7 +20,7 @@
}
:global(.dark) .cardContainer:hover {
box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.15);
box-shadow: 0;
}
.createCardContainer {

4
web/src/components/providers/theme-provider.tsx
View File

@@ -1,7 +1,7 @@
'use client';
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) {
return (
@@ -15,4 +15,4 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
{children}
</NextThemesProvider>
);
}
}

3
web/src/components/ui/theme-toggle.tsx
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" />
<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>
);
}
}