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)
2025-08-10 19:08:58 +08:00 · 2025-04-29 17:05:23 +08:00 · 2025-04-29 17:05:23 +08:00 · 77bb7750e9
commit 77bb7750e9
parent 78380fa181
9 changed files with 47 additions and 57 deletions
--- a/web/src/components/ui/segmented.tsx
+++ b/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,
-                'text-colors-text-inverse-strong': value === actualValue,
+                'bg-text-title': value === actualValue,
+                'text-text-title-invert': value === actualValue,
              },
            )}
            onClick={() => onChange?.(actualValue)}
--- 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: (
-          <div className="flex items-center gap-1">
-            <HeaderIcon className="size-5"></HeaderIcon>
+        label:
+          tag.path === Routes.Home ? (
+            <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
-          variant="secondary"
-          className="bg-colors-background-inverse-standard"
-        >
-          <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 className="flex items-center gap-1.5 text-text-sub-title">
+          <Github className="size-3.5" />
+          <span className=" text-base">21.5k stars</span>
+        </div>
      </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
--- 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)}
    >
-      <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 opacity-80">
+            <p className="text-xs text-text-sub-title">
+              {dataset.doc_num} files
+            </p>
+            <p className="text-xs text-text-sub-title">
              {formatDate(dataset.update_time)}
            </p>
          </div>
--- 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"
      >
-        <Button variant={'tertiary'} size={'sm'} onClick={showModal}>
-          <Plus className="mr-2 h-4 w-4" />
+        <Button size={'sm'} onClick={showModal}>
+          <Plus className="mr-2 size-2.5" />
          {t('knowledgeList.createKnowledgeBase')}
        </Button>
      </ListFilterBar>
--- 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"
        ></Segmented>
      </div>
      <div className="flex flex-wrap gap-4">
--- a/web/src/pages/home/banner.tsx
+++ b/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>
--- 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,
--- 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))',
--- 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;