From 012444847925f8fb95d05ddc70b99e33cae32375 Mon Sep 17 00:00:00 2001 From: Junyan Qin Date: Mon, 11 Aug 2025 20:41:57 +0800 Subject: [PATCH] perf: card shadowbox --- .../components/bot-card/botCard.module.css | 6 +-- .../home/bots/components/bot-form/BotForm.tsx | 4 +- .../dynamic-form/DynamicFormItemComponent.tsx | 8 +-- .../EmptyAndCreateComponent.tsx | 27 ---------- .../emptyAndCreate.module.css | 54 ------------------- .../components/kb-card/KBCard.module.css | 6 +-- .../knowledge/components/kb-form/KBForm.tsx | 2 +- .../embedding-card/EmbeddingCard.module.css | 6 +-- .../embedding-form/EmbeddingForm.tsx | 4 +- .../component/llm-card/LLMCard.module.css | 6 +-- .../models/component/llm-form/LLMForm.tsx | 4 +- .../pipeline-card/pipelineCard.module.css | 6 +-- web/src/app/home/pipelines/page.tsx | 19 +++++-- .../plugin-card/PluginCardComponent.tsx | 10 ++-- .../plugin-market/PluginMarketComponent.tsx | 21 ++++++-- .../PluginMarketCardComponent.tsx | 6 ++- .../createCartComponent.module.css | 6 +-- .../components/providers/theme-provider.tsx | 4 +- web/src/components/ui/theme-toggle.tsx | 3 +- 19 files changed, 73 insertions(+), 129 deletions(-) delete mode 100644 web/src/app/home/components/empty-and-create-component/EmptyAndCreateComponent.tsx delete mode 100644 web/src/app/home/components/empty-and-create-component/emptyAndCreate.module.css diff --git a/web/src/app/home/bots/components/bot-card/botCard.module.css b/web/src/app/home/bots/components/bot-card/botCard.module.css index 0c316049..d9b82b9b 100644 --- a/web/src/app/home/bots/components/bot-card/botCard.module.css +++ b/web/src/app/home/bots/components/bot-card/botCard.module.css @@ -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 { diff --git a/web/src/app/home/bots/components/bot-form/BotForm.tsx b/web/src/app/home/bots/components/bot-form/BotForm.tsx index 02291027..92811a65 100644 --- a/web/src/app/home/bots/components/bot-form/BotForm.tsx +++ b/web/src/app/home/bots/components/bot-form/BotForm.tsx @@ -394,7 +394,7 @@ export default function BotForm({ {t('bots.bindPipeline')} - + @@ -150,7 +150,7 @@ export default function DynamicFormItemComponent({ case DynamicFormItemType.LLM_MODEL_SELECTOR: return ( - + @@ -303,7 +303,7 @@ export default function DynamicFormItemComponent({ field.onChange(newValue); }} > - + diff --git a/web/src/app/home/components/empty-and-create-component/EmptyAndCreateComponent.tsx b/web/src/app/home/components/empty-and-create-component/EmptyAndCreateComponent.tsx deleted file mode 100644 index b55b4cee..00000000 --- a/web/src/app/home/components/empty-and-create-component/EmptyAndCreateComponent.tsx +++ /dev/null @@ -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 ( -
-
-
-
{title}
-
{subTitle}
-
-
- {buttonText} -
-
-
- ); -} diff --git a/web/src/app/home/components/empty-and-create-component/emptyAndCreate.module.css b/web/src/app/home/components/empty-and-create-component/emptyAndCreate.module.css deleted file mode 100644 index 3504d7a3..00000000 --- a/web/src/app/home/components/empty-and-create-component/emptyAndCreate.module.css +++ /dev/null @@ -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; -} diff --git a/web/src/app/home/knowledge/components/kb-card/KBCard.module.css b/web/src/app/home/knowledge/components/kb-card/KBCard.module.css index dfc0002a..d2bfebca 100644 --- a/web/src/app/home/knowledge/components/kb-card/KBCard.module.css +++ b/web/src/app/home/knowledge/components/kb-card/KBCard.module.css @@ -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 { diff --git a/web/src/app/home/knowledge/components/kb-form/KBForm.tsx b/web/src/app/home/knowledge/components/kb-form/KBForm.tsx index 010d14bf..bad97cfa 100644 --- a/web/src/app/home/knowledge/components/kb-form/KBForm.tsx +++ b/web/src/app/home/knowledge/components/kb-form/KBForm.tsx @@ -200,7 +200,7 @@ export default function KBForm({ }} value={field.value} > - + diff --git a/web/src/app/home/models/component/embedding-card/EmbeddingCard.module.css b/web/src/app/home/models/component/embedding-card/EmbeddingCard.module.css index 8a43224a..9545619b 100644 --- a/web/src/app/home/models/component/embedding-card/EmbeddingCard.module.css +++ b/web/src/app/home/models/component/embedding-card/EmbeddingCard.module.css @@ -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 { diff --git a/web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx b/web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx index a7d241db..abc717c6 100644 --- a/web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx +++ b/web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx @@ -404,7 +404,7 @@ export default function EmbeddingForm({ }} value={field.value} > - + @@ -479,7 +479,7 @@ export default function EmbeddingForm({ updateExtraArg(index, 'type', value) } > - + diff --git a/web/src/app/home/models/component/llm-card/LLMCard.module.css b/web/src/app/home/models/component/llm-card/LLMCard.module.css index ecd6a549..aedbebde 100644 --- a/web/src/app/home/models/component/llm-card/LLMCard.module.css +++ b/web/src/app/home/models/component/llm-card/LLMCard.module.css @@ -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 { diff --git a/web/src/app/home/models/component/llm-form/LLMForm.tsx b/web/src/app/home/models/component/llm-form/LLMForm.tsx index 4268261f..54e0b9ce 100644 --- a/web/src/app/home/models/component/llm-form/LLMForm.tsx +++ b/web/src/app/home/models/component/llm-form/LLMForm.tsx @@ -420,7 +420,7 @@ export default function LLMForm({ }} value={field.value} > - + @@ -553,7 +553,7 @@ export default function LLMForm({ updateExtraArg(index, 'type', value) } > - + diff --git a/web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css b/web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css index dfc0002a..d2bfebca 100644 --- a/web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css +++ b/web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css @@ -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 { diff --git a/web/src/app/home/pipelines/page.tsx b/web/src/app/home/pipelines/page.tsx index c81eb5fd..c7801a33 100644 --- a/web/src/app/home/pipelines/page.tsx +++ b/web/src/app/home/pipelines/page.tsx @@ -125,17 +125,26 @@ export default function PluginConfigPage() { value={`${sortByValue},${sortOrderValue}`} onValueChange={handleSortChange} > - + - - + + {t('pipelines.newestCreated')} - + {t('pipelines.recentlyEdited')} - + {t('pipelines.earliestEdited')} diff --git a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx index f965a9a9..fed9c53f 100644 --- a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx +++ b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx @@ -34,7 +34,7 @@ export default function PluginCardComponent({ } return (
@@ -54,7 +54,9 @@ export default function PluginCardComponent({ {cardVO.author} /{' '}
-
{cardVO.name}
+
+ {cardVO.name} +
v{cardVO.version} @@ -115,7 +117,9 @@ export default function PluginCardComponent({
- + - - {t('plugins.mostStars')} - + + + {t('plugins.mostStars')} + + {t('plugins.recentlyAdded')} - + {t('plugins.recentlyUpdated')} diff --git a/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx b/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx index 02e01277..fc4a4812 100644 --- a/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx +++ b/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx @@ -16,7 +16,7 @@ export default function PluginMarketCardComponent({ } return ( -
+
-
{cardVO.name}
+
+ {cardVO.name} +
diff --git a/web/src/app/infra/basic-component/create-card-component/createCartComponent.module.css b/web/src/app/infra/basic-component/create-card-component/createCartComponent.module.css index 1536df0f..76a5672d 100644 --- a/web/src/app/infra/basic-component/create-card-component/createCartComponent.module.css +++ b/web/src/app/infra/basic-component/create-card-component/createCartComponent.module.css @@ -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 { diff --git a/web/src/components/providers/theme-provider.tsx b/web/src/components/providers/theme-provider.tsx index 278f54c7..cc8cd30f 100644 --- a/web/src/components/providers/theme-provider.tsx +++ b/web/src/components/providers/theme-provider.tsx @@ -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} ); -} \ No newline at end of file +} diff --git a/web/src/components/ui/theme-toggle.tsx b/web/src/components/ui/theme-toggle.tsx index 14cad0f4..143e9460 100644 --- a/web/src/components/ui/theme-toggle.tsx +++ b/web/src/components/ui/theme-toggle.tsx @@ -18,7 +18,6 @@ export function ThemeToggle() { > - 切换主题 ); -} \ No newline at end of file +}