From 77bb7750e9422d3c2883fc3345f12b0564335ede Mon Sep 17 00:00:00 2001 From: balibabu Date: Tue, 29 Apr 2025 17:05:23 +0800 Subject: [PATCH] Feat: Modify the segmented component style #3221 (#7409) ### What problem does this PR solve? Feat: Modify the segmented component style #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/src/components/ui/segmented.tsx | 8 ++-- web/src/layouts/next-header.tsx | 59 +++++++------------------ web/src/pages/datasets/dataset-card.tsx | 14 ++++-- web/src/pages/datasets/index.tsx | 4 +- web/src/pages/home/applications.tsx | 2 +- web/src/pages/home/banner.tsx | 2 +- web/src/pages/home/datasets.tsx | 2 - web/tailwind.config.js | 3 ++ web/tailwind.css | 10 ++++- 9 files changed, 47 insertions(+), 57 deletions(-) diff --git a/web/src/components/ui/segmented.tsx b/web/src/components/ui/segmented.tsx index 855479ece..00b9174b2 100644 --- a/web/src/components/ui/segmented.tsx +++ b/web/src/components/ui/segmented.tsx @@ -34,7 +34,7 @@ export function Segmented({ return (
@@ -46,10 +46,10 @@ export function Segmented({
onChange?.(actualValue)} diff --git a/web/src/layouts/next-header.tsx b/web/src/layouts/next-header.tsx index 88defad16..94c076619 100644 --- a/web/src/layouts/next-header.tsx +++ b/web/src/layouts/next-header.tsx @@ -5,7 +5,6 @@ import { Segmented, SegmentedValue } from '@/components/ui/segmented'; import { useTranslate } from '@/hooks/common-hooks'; import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks'; import { useNavigateWithFromState } from '@/hooks/route-hook'; -import { cn } from '@/lib/utils'; import { Routes } from '@/routes'; import { ChevronDown, @@ -16,7 +15,6 @@ import { Library, MessageSquareText, Search, - Star, Zap, } from 'lucide-react'; import { useCallback, useMemo } from 'react'; @@ -26,10 +24,11 @@ export function Header() { const { t } = useTranslate('header'); const { pathname } = useLocation(); const navigate = useNavigateWithFromState(); - const { navigateToHome, navigateToProfile } = useNavigatePage(); + const { navigateToProfile } = useNavigatePage(); const tagsData = useMemo( () => [ + { path: Routes.Home, name: t('home'), icon: House }, { path: Routes.Datasets, name: t('knowledgeBase'), icon: Library }, { path: Routes.Chats, name: t('chat'), icon: MessageSquareText }, { path: Routes.Searches, name: t('search'), icon: Search }, @@ -44,12 +43,12 @@ export function Header() { const HeaderIcon = tag.icon; return { - label: ( -
- + label: + tag.path === Routes.Home ? ( + + ) : ( {tag.name} -
- ), + ), value: tag.path, }; }); @@ -61,8 +60,6 @@ export function Header() { ); }, [pathname, tagsData]); - const isHome = Routes.Home === currentPath; - const handleChange = (path: SegmentedValue) => { navigate(path as Routes); }; @@ -77,41 +74,19 @@ export function Header() { logo - -
-
- -
- +
+ + 21.5k stars +
+
V 0.13.0 diff --git a/web/src/pages/datasets/dataset-card.tsx b/web/src/pages/datasets/dataset-card.tsx index 019a9e132..6c4157032 100644 --- a/web/src/pages/datasets/dataset-card.tsx +++ b/web/src/pages/datasets/dataset-card.tsx @@ -29,7 +29,7 @@ export function DatasetCard({ className="bg-colors-background-inverse-weak w-40" onClick={navigateToDataset(dataset.id)} > - +
@@ -46,7 +46,11 @@ export function DatasetCard({ showDatasetRenameModal={showDatasetRenameModal} dataset={dataset} > - @@ -56,8 +60,10 @@ export function DatasetCard({

{dataset.name}

-

{dataset.doc_num} files

-

+

+ {dataset.doc_num} files +

+

{formatDate(dataset.update_time)}

diff --git a/web/src/pages/datasets/index.tsx b/web/src/pages/datasets/index.tsx index 1c06ce521..ea5355f59 100644 --- a/web/src/pages/datasets/index.tsx +++ b/web/src/pages/datasets/index.tsx @@ -63,8 +63,8 @@ export default function Datasets() { onChange={handleFilterSubmit} className="px-8" > - diff --git a/web/src/pages/home/applications.tsx b/web/src/pages/home/applications.tsx index 0330dcbf3..97505ed73 100644 --- a/web/src/pages/home/applications.tsx +++ b/web/src/pages/home/applications.tsx @@ -67,7 +67,7 @@ export function Applications() { options={options} value={val} onChange={handleChange} - className="bg-colors-background-inverse-standard text-colors-text-neutral-standard" + className="bg-transparent" >
diff --git a/web/src/pages/home/banner.tsx b/web/src/pages/home/banner.tsx index 6b7f03ed9..84a784cef 100644 --- a/web/src/pages/home/banner.tsx +++ b/web/src/pages/home/banner.tsx @@ -42,7 +42,7 @@ export function NextBanner() { return (
Welcome to - + RAGFlow
diff --git a/web/src/pages/home/datasets.tsx b/web/src/pages/home/datasets.tsx index 18b7c4c5f..183ea903f 100644 --- a/web/src/pages/home/datasets.tsx +++ b/web/src/pages/home/datasets.tsx @@ -1,12 +1,10 @@ import { RenameDialog } from '@/components/rename-dialog'; import { CardSkeleton } from '@/components/ui/skeleton'; -import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks'; import { useFetchNextKnowledgeListByPage } from '@/hooks/use-knowledge-request'; import { DatasetCard, SeeAllCard } from '../datasets/dataset-card'; import { useRenameDataset } from '../datasets/use-rename-dataset'; export function Datasets() { - const { navigateToDatasetList } = useNavigatePage(); const { kbs, loading } = useFetchNextKnowledgeListByPage(); const { datasetRenameLoading, diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 680822972..f09f2c7e2 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -45,6 +45,9 @@ module.exports = { 'background-badge': 'var(--background-badge)', 'text-badge': 'var(--text-badge)', 'text-title': 'var(--text-title)', + 'text-sub-title': 'var(--text-sub-title)', + 'text-title-invert': 'var(--text-title-invert)', + 'background-header-bar': 'var(--background-header-bar)', primary: { DEFAULT: 'hsl(var(--primary))', diff --git a/web/tailwind.css b/web/tailwind.css index 9659452cc..dab606cb8 100644 --- a/web/tailwind.css +++ b/web/tailwind.css @@ -78,6 +78,10 @@ --text-badge: rgba(151, 154, 171, 1); --text-title: rgba(22, 22, 24, 1); + --text-sub-title: rgba(151, 154, 171, 1); + + --background-header-bar: rgba(11, 11, 12, 1); + --text-title-invert: rgba(255, 255, 255, 1); } .dark { @@ -176,6 +180,10 @@ --sidebar-ring: 217.2 91.2% 59.8%; --text-title: rgba(255, 255, 255, 1); + --text-sub-title: rgba(91, 93, 106, 1); + --background-header-bar: rgba(11, 11, 12, 1); + + --text-title-invert: rgba(22, 22, 24, 1); } } @@ -184,7 +192,7 @@ @apply border-border; } body { - @apply bg-colors-background-neutral-standard text-foreground; + @apply bg-text-title-invert text-foreground; font-feature-settings: 'rlig' 1, 'calt' 1;