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

@@ -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)}
           >

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

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}>

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 (

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">