From 4080f6a54ab7a2685664cb3bbd7ae9e66c35f79f Mon Sep 17 00:00:00 2001
From: chanx <1243304602@qq.com>
Date: Thu, 21 Aug 2025 09:32:04 +0800
Subject: [PATCH] Feature (web): Optimize dataset pages and segmented
 components #3221 (#9605)

### What problem does this PR solve?

Feature (web): Optimize dataset pages and segmented components #3221
-Add the activeClassName property to Segmented components to customize
the selected state style
-Update the icons and captions of the relevant components on the dataset
page
-Modify the parsing status column title of the dataset table
-Optimize the Segmented component style of the homepage application
section

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/components/ui/segmented.tsx                       | 5 +++++
 web/src/locales/en.ts                                     | 4 ++--
 web/src/pages/dataset/dataset/dataset-action-cell.tsx     | 8 ++++----
 .../pages/dataset/dataset/use-dataset-table-columns.tsx   | 2 +-
 web/src/pages/home/applications.tsx                       | 3 ++-
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/web/src/components/ui/segmented.tsx b/web/src/components/ui/segmented.tsx
index e82bafc6d..7aa9565db 100644
--- a/web/src/components/ui/segmented.tsx
+++ b/web/src/components/ui/segmented.tsx
@@ -23,6 +23,7 @@ export interface SegmentedProps
   prefixCls?: string;
   direction?: 'ltr' | 'rtl';
   motionName?: string;
+  activeClassName?: string;
 }
 
 export function Segmented({
@@ -30,6 +31,7 @@ export function Segmented({
   value,
   onChange,
   className,
+  activeClassName,
 }: SegmentedProps) {
   const [selectedValue, setSelectedValue] = React.useState<
     SegmentedValue | undefined
@@ -60,6 +62,9 @@ export function Segmented({
                 'text-bg-base bg-metallic-gradient border-b-[#00BEB4] border-b-2':
                   selectedValue === actualValue,
               },
+              activeClassName && selectedValue === actualValue
+                ? activeClassName
+                : '',
             )}
             onClick={() => handleOnChange(actualValue)}
           >
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 348e63bb0..e21588a45 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -70,7 +70,7 @@ export default {
       review: 'from 500+ reviews',
     },
     header: {
-      knowledgeBase: 'Knowledge Base',
+      knowledgeBase: 'Dataset',
       chat: 'Chat',
       register: 'Register',
       signin: 'Sign in',
@@ -86,7 +86,7 @@ export default {
     knowledgeList: {
       welcome: 'Welcome back',
       description: 'Which knowledge bases will you use today?',
-      createKnowledgeBase: 'Create knowledge base',
+      createKnowledgeBase: 'Create Dataset',
       name: 'Name',
       namePlaceholder: 'Please input name!',
       doc: 'Docs',
diff --git a/web/src/pages/dataset/dataset/dataset-action-cell.tsx b/web/src/pages/dataset/dataset/dataset-action-cell.tsx
index c1cf8dadc..68a760ff5 100644
--- a/web/src/pages/dataset/dataset/dataset-action-cell.tsx
+++ b/web/src/pages/dataset/dataset/dataset-action-cell.tsx
@@ -11,7 +11,7 @@ import { IDocumentInfo } from '@/interfaces/database/document';
 import { formatFileSize } from '@/utils/common-util';
 import { formatDate } from '@/utils/date';
 import { downloadDocument } from '@/utils/file-util';
-import { ArrowDownToLine, FolderPen, ScrollText, Trash2 } from 'lucide-react';
+import { Download, Eye, PenLine, Trash2 } from 'lucide-react';
 import { useCallback } from 'react';
 import { UseRenameDocumentShowType } from './use-rename-document';
 import { isParserRunning } from './utils';
@@ -57,12 +57,12 @@ export function DatasetActionCell({
         disabled={isRunning}
         onClick={handleRename}
       >
-        <FolderPen />
+        <PenLine />
       </Button>
       <HoverCard>
         <HoverCardTrigger>
           <Button variant="ghost" disabled={isRunning} size={'sm'}>
-            <ScrollText />
+            <Eye />
           </Button>
         </HoverCardTrigger>
         <HoverCardContent className="w-[40vw] max-h-[40vh] overflow-auto">
@@ -93,7 +93,7 @@ export function DatasetActionCell({
           disabled={isRunning}
           size={'sm'}
         >
-          <ArrowDownToLine />
+          <Download />
         </Button>
       )}
       <ConfirmDeleteDialog onOk={handleRemove}>
diff --git a/web/src/pages/dataset/dataset/use-dataset-table-columns.tsx b/web/src/pages/dataset/dataset/use-dataset-table-columns.tsx
index febc6e560..368650412 100644
--- a/web/src/pages/dataset/dataset/use-dataset-table-columns.tsx
+++ b/web/src/pages/dataset/dataset/use-dataset-table-columns.tsx
@@ -141,7 +141,7 @@ export function useDatasetTableColumns({
     },
     {
       accessorKey: 'run',
-      header: t('parsingStatus'),
+      header: t('Parse'),
       // meta: { cellClassName: 'min-w-[20vw]' },
       cell: ({ row }) => {
         return (
diff --git a/web/src/pages/home/applications.tsx b/web/src/pages/home/applications.tsx
index 2b4fa37f6..9147b8a5f 100644
--- a/web/src/pages/home/applications.tsx
+++ b/web/src/pages/home/applications.tsx
@@ -51,7 +51,8 @@ export function Applications() {
           options={options}
           value={val}
           onChange={handleChange}
-          className="bg-transparent"
+          className="bg-bg-card border border-border-button rounded-full"
+          activeClassName="bg-text-primary border-none"
         ></Segmented>
       </div>
       <div className="flex flex-wrap gap-4">