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

@@ -34,7 +34,7 @@ export function Segmented({
   return (
     <div
       className={cn(
-        'flex items-center rounded-sm p-1 gap-2 bg-zinc-200',
+        'flex items-center rounded-3xl p-1 gap-2 bg-background-header-bar px-5 py-2.5',
         className,
       )}
     >
@@ -46,10 +46,10 @@ export function Segmented({
           <div
             key={actualValue}
             className={cn(
-              'inline-flex items-center px-3 py-2 text-sm font-medium rounded-sm cursor-pointer',
+              'inline-flex items-center px-6 py-2 text-base font-normal rounded-3xl cursor-pointer text-text-badge',
               {
-                'bg-colors-background-inverse-strong': value === actualValue,
+                'bg-text-title': value === actualValue,
-                'text-colors-text-inverse-strong': value === actualValue,
+                'text-text-title-invert': value === actualValue,
               },
             )}
             onClick={() => onChange?.(actualValue)}

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:
-          <div className="flex items-center gap-1">
+          tag.path === Routes.Home ? (
-            <HeaderIcon className="size-5"></HeaderIcon>
+            <HeaderIcon className="size-6"></HeaderIcon>
+          ) : (
             <span>{tag.name}</span>
-          </div>
+          ),
-        ),
         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() {
         <img
           src={'/logo.svg'}
           alt="logo"
-          className="w-[100] h-[100] mr-[12]"
+          className="size-10 mr-[12]"
           onClick={handleLogoClick}
         />
-        <Button
+        <div className="flex items-center gap-1.5 text-text-sub-title">
-          variant="secondary"
+          <Github className="size-3.5" />
-          className="bg-colors-background-inverse-standard"
+          <span className=" text-base">21.5k stars</span>
-        >
+        </div>
-          <Github />
-          21.5k stars
-          <Star />
-        </Button>
-      </div>
-      <div className="flex gap-2 items-center">
-        <Button
-          variant={'icon'}
-          size={'icon'}
-          onClick={navigateToHome}
-          className={cn({
-            'bg-colors-background-inverse-strong': isHome,
-          })}
-        >
-          <House
-            className={cn({
-              'text-colors-text-inverse-strong': isHome,
-            })}
-          />
-        </Button>
-        <div className="h-8 w-[1px] bg-colors-outline-neutral-strong"></div>
-        <Segmented
-          options={options}
-          value={currentPath}
-          onChange={handleChange}
-          className="bg-colors-background-inverse-standard text-backgroundInverseStandard-foreground"
-        ></Segmented>
       </div>
+      <Segmented
+        options={options}
+        value={currentPath}
+        onChange={handleChange}
+      ></Segmented>
       <div className="flex items-center gap-4">
         <Container className="bg-colors-background-inverse-standard hidden xl:flex">
           V 0.13.0

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)}
     >
-      <CardContent className="p-2.5 pt-1">
+      <CardContent className="p-2.5 pt-1 group">
         <section className="flex justify-between mb-2">
           <div className="flex gap-2 items-center">
             <Avatar className="size-6 rounded-lg">
@@ -46,7 +46,11 @@ export function DatasetCard({
             showDatasetRenameModal={showDatasetRenameModal}
             dataset={dataset}
           >
-            <Button variant="ghost" size="icon">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="invisible group-hover:visible"
+            >
               <Ellipsis />
             </Button>
           </DatasetDropdown>
@@ -56,8 +60,10 @@ export function DatasetCard({
             <h3 className="text-lg font-semibold mb-2 line-clamp-1">
               {dataset.name}
             </h3>
-            <p className="text-xs opacity-80">{dataset.doc_num} files</p>
+            <p className="text-xs text-text-sub-title">
-            <p className="text-xs opacity-80">
+              {dataset.doc_num} files
+            </p>
+            <p className="text-xs text-text-sub-title">
               {formatDate(dataset.update_time)}
             </p>
           </div>

web/src/pages/datasets/index.tsx

@@ -63,8 +63,8 @@ export default function Datasets() {
         onChange={handleFilterSubmit}
         className="px-8"
       >
-        <Button variant={'tertiary'} size={'sm'} onClick={showModal}>
+        <Button size={'sm'} onClick={showModal}>
-          <Plus className="mr-2 h-4 w-4" />
+          <Plus className="mr-2 size-2.5" />
           {t('knowledgeList.createKnowledgeBase')}
         </Button>
       </ListFilterBar>

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"
         ></Segmented>
       </div>
       <div className="flex flex-wrap gap-4">

web/src/pages/home/banner.tsx

@@ -42,7 +42,7 @@ export function NextBanner() {
   return (
     <section className="text-5xl pt-10 pb-14 font-bold">
       <span className="text-text-title">Welcome to</span>
-      <span className="pl-3 text-transparent bg-clip-text  bg-gradient-to-b from-[#40EBE3] to-[#4A51FF]">
+      <span className="pl-3 text-transparent bg-clip-text  bg-gradient-to-l from-[#40EBE3] to-[#4A51FF]">
         RAGFlow
       </span>
     </section>

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,

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))',

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;