diff --git a/web/app/components/app-sidebar/snippet-info/dropdown.tsx b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
index 2856bc1dc7..c4edbda8cd 100644
--- a/web/app/components/app-sidebar/snippet-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/snippet-info/dropdown.tsx
@@ -2,9 +2,6 @@
 
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import type { SnippetDetail } from '@/models/snippet'
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   AlertDialog,
   AlertDialogActions,
@@ -13,7 +10,8 @@ import {
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogTitle,
-} from '@/app/components/base/ui/alert-dialog'
+} from '@langgenius/dify-ui/alert-dialog'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -22,6 +20,8 @@ import {
   DropdownMenuTrigger,
 } from '@langgenius/dify-ui/dropdown-menu'
 import { toast } from '@langgenius/dify-ui/toast'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import CreateSnippetDialog from '@/app/components/workflow/create-snippet-dialog'
 import { useRouter } from '@/next/navigation'
 import { useDeleteSnippetMutation, useExportSnippetMutation, useUpdateSnippetMutation } from '@/service/use-snippets'
@@ -53,10 +53,10 @@ const SnippetInfoDropdown = ({ snippet }: SnippetInfoDropdownProps) => {
     description: snippet.description,
     icon: snippet.icon
       ? {
-        type: 'emoji' as const,
-        icon: snippet.icon,
-        background: snippet.iconBackground || FALLBACK_ICON.background,
-      }
+          type: 'emoji' as const,
+          icon: snippet.icon,
+          background: snippet.iconBackground || FALLBACK_ICON.background,
+        }
       : FALLBACK_ICON,
   }), [snippet.description, snippet.icon, snippet.iconBackground, snippet.name])
 
diff --git a/web/app/components/app/workflow-log/evaluation-cell.tsx b/web/app/components/app/workflow-log/evaluation-cell.tsx
index 3e49015454..539ae5b538 100644
--- a/web/app/components/app/workflow-log/evaluation-cell.tsx
+++ b/web/app/components/app/workflow-log/evaluation-cell.tsx
@@ -2,13 +2,13 @@
 
 import type { EvaluationLogItem } from '@/models/log'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
+} from '@langgenius/dify-ui/popover'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { getNodeVisual, getToneClasses } from '@/app/components/evaluation/components/metric-selector/utils'
 
 type EvaluationCellProps = {
@@ -30,7 +30,7 @@ const EvaluationCell = ({
 
   if (!evaluation.length) {
     return (
-      <div className="system-sm-regular flex items-center justify-center px-2 py-3 text-text-quaternary">
+      <div className="flex items-center justify-center px-2 py-3 system-sm-regular text-text-quaternary">
         -
       </div>
     )
@@ -73,19 +73,19 @@ const EvaluationCell = ({
                 )}
               >
                 <div className="min-w-0">
-                  <div className="system-sm-medium truncate text-text-secondary">{item.name}</div>
+                  <div className="truncate system-sm-medium text-text-secondary">{item.name}</div>
                   {item.nodeInfo && nodeVisual && nodeToneClasses && (
                     <div className="mt-1 flex min-w-0 items-center gap-1.5">
                       <div className={cn('flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border-[0.45px] border-divider-subtle shadow-xs shadow-shadow-shadow-3', nodeToneClasses.solid)}>
                         <span aria-hidden="true" className={cn(nodeVisual.icon, 'h-3.5 w-3.5')} />
                       </div>
-                      <span className="system-xs-regular truncate text-text-tertiary">
+                      <span className="truncate system-xs-regular text-text-tertiary">
                         {item.nodeInfo.title}
                       </span>
                     </div>
                   )}
                 </div>
-                <div className="system-sm-regular max-w-[120px] text-right wrap-break-word text-text-secondary">
+                <div className="max-w-[120px] text-right system-sm-regular wrap-break-word text-text-secondary">
                   {formatEvaluationValue(item.value)}
                 </div>
               </div>
diff --git a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
index de25671489..a9c293297d 100644
--- a/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
+++ b/web/app/components/evaluation/components/batch-test-panel/input-fields/upload-run-popover.tsx
@@ -1,14 +1,14 @@
 import type { ChangeEvent, DragEvent } from 'react'
 import type { InputField } from './input-fields-utils'
-import { cn } from '@langgenius/dify-ui/cn'
-import { useRef } from 'react'
-import { useTranslation } from 'react-i18next'
 import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
+} from '@langgenius/dify-ui/popover'
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 import { getExampleValue } from './input-fields-utils'
 
 type UploadRunPopoverProps = {
@@ -87,71 +87,71 @@ const UploadRunPopover = ({
             />
             {currentFileName
               ? (
-                <div className="flex h-20 items-center gap-3 rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg px-3">
-                  <div className="flex p-3">
-                    <span aria-hidden="true" className="i-ri-file-excel-fill h-6 w-6 text-util-colors-green-green-600" />
-                  </div>
-                  <div className="min-w-0 flex-1 py-1 pr-2">
-                    <div className="system-xs-medium truncate text-text-secondary">
-                      {currentFileName}
+                  <div className="flex h-20 items-center gap-3 rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg px-3">
+                    <div className="flex p-3">
+                      <span aria-hidden="true" className="i-ri-file-excel-fill h-6 w-6 text-util-colors-green-green-600" />
                     </div>
-                    <div className="system-2xs-medium mt-0.5 flex h-3 items-center gap-1 text-text-tertiary">
-                      {!!currentFileExtension && <span className="uppercase">{currentFileExtension}</span>}
-                      {!!currentFileExtension && !!currentFileSize && <span className="text-text-quaternary">·</span>}
-                      {!!currentFileSize && <span>{currentFileSize}</span>}
+                    <div className="min-w-0 flex-1 py-1 pr-2">
+                      <div className="truncate system-xs-medium text-text-secondary">
+                        {currentFileName}
+                      </div>
+                      <div className="mt-0.5 flex h-3 items-center gap-1 system-2xs-medium text-text-tertiary">
+                        {!!currentFileExtension && <span className="uppercase">{currentFileExtension}</span>}
+                        {!!currentFileExtension && !!currentFileSize && <span className="text-text-quaternary">·</span>}
+                        {!!currentFileSize && <span>{currentFileSize}</span>}
+                      </div>
                     </div>
-                  </div>
-                  <div className="flex items-center gap-1 pr-3">
-                    {isFileUploading && (
-                      <span aria-hidden="true" className="i-ri-loader-4-line h-4 w-4 animate-spin text-text-accent" />
-                    )}
-                    <button
-                      type="button"
-                      className="rounded-md p-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
-                      onClick={onClearUploadedFile}
-                      aria-label={t('batch.removeUploadedFile')}
-                    >
-                      <span aria-hidden="true" className="i-ri-close-line h-4 w-4" />
-                    </button>
-                  </div>
-                </div>
-              )
-              : (
-                <div
-                  className="flex h-20 w-full items-center justify-center gap-3 rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg p-3 text-left hover:border-components-button-secondary-border"
-                  onDragOver={event => event.preventDefault()}
-                  onDrop={handleDropFile}
-                >
-                  <button
-                    type="button"
-                    className="flex shrink-0 p-3"
-                    onClick={() => fileInputRef.current?.click()}
-                  >
-                    <span aria-hidden="true" className="i-ri-file-upload-line h-6 w-6 text-text-tertiary" />
-                    <span className="sr-only">{t('batch.uploadTitle')}</span>
-                  </button>
-                  <div className="min-w-0 flex-1 text-left">
-                    <div className="system-md-regular text-text-secondary">
-                      {t('batch.uploadDropzonePrefix')}
-                      {' '}
-                      <span className="system-md-semibold">{t('batch.uploadDropzoneEmphasis')}</span>
-                      {' '}
-                      {t('batch.uploadDropzoneSuffix')}
-                    </div>
-                    <div className="system-xs-regular mt-0.5 text-text-tertiary">
-                      {t('batch.uploadDropzoneDownloadPrefix')}
-                      {' '}
+                    <div className="flex items-center gap-1 pr-3">
+                      {isFileUploading && (
+                        <span aria-hidden="true" className="i-ri-loader-4-line h-4 w-4 animate-spin text-text-accent" />
+                      )}
                       <button
                         type="button"
-                        className="text-text-accent hover:underline"
-                        onClick={onDownloadTemplate}
+                        className="rounded-md p-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+                        onClick={onClearUploadedFile}
+                        aria-label={t('batch.removeUploadedFile')}
                       >
-                        {t('batch.uploadDropzoneDownloadLink')}
+                        <span aria-hidden="true" className="i-ri-close-line h-4 w-4" />
                       </button>
                     </div>
                   </div>
-                </div>
-              )}
+                )
+              : (
+                  <div
+                    className="flex h-20 w-full items-center justify-center gap-3 rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg p-3 text-left hover:border-components-button-secondary-border"
+                    onDragOver={event => event.preventDefault()}
+                    onDrop={handleDropFile}
+                  >
+                    <button
+                      type="button"
+                      className="flex shrink-0 p-3"
+                      onClick={() => fileInputRef.current?.click()}
+                    >
+                      <span aria-hidden="true" className="i-ri-file-upload-line h-6 w-6 text-text-tertiary" />
+                      <span className="sr-only">{t('batch.uploadTitle')}</span>
+                    </button>
+                    <div className="min-w-0 flex-1 text-left">
+                      <div className="system-md-regular text-text-secondary">
+                        {t('batch.uploadDropzonePrefix')}
+                        {' '}
+                        <span className="system-md-semibold">{t('batch.uploadDropzoneEmphasis')}</span>
+                        {' '}
+                        {t('batch.uploadDropzoneSuffix')}
+                      </div>
+                      <div className="mt-0.5 system-xs-regular text-text-tertiary">
+                        {t('batch.uploadDropzoneDownloadPrefix')}
+                        {' '}
+                        <button
+                          type="button"
+                          className="text-text-accent hover:underline"
+                          onClick={onDownloadTemplate}
+                        >
+                          {t('batch.uploadDropzoneDownloadLink')}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )}
 
             {!!previewFields.length && (
               <div className="space-y-1">
@@ -159,10 +159,10 @@ const UploadRunPopover = ({
                 <div className="flex overflow-hidden rounded-lg border border-divider-regular">
                   {previewFields.map((field, index) => (
                     <div key={field.name} className={cn('min-w-0 flex-1', index < previewFields.length - 1 && 'border-r border-divider-subtle')}>
-                      <div className="system-xs-medium-uppercase min-h-8 border-b border-divider-regular px-3 py-2 text-text-tertiary">
+                      <div className="min-h-8 border-b border-divider-regular px-3 py-2 system-xs-medium-uppercase text-text-tertiary">
                         {field.name}
                       </div>
-                      <div className="system-sm-regular min-h-8 px-3 py-2 text-text-secondary">
+                      <div className="min-h-8 px-3 py-2 system-sm-regular text-text-secondary">
                         {getExampleValue(field, booleanExampleValue)}
                       </div>
                     </div>
diff --git a/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx b/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
index a37a8d7bad..2a17fadf83 100644
--- a/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
+++ b/web/app/components/evaluation/components/conditions-section/add-condition-select.tsx
@@ -2,8 +2,6 @@
 
 import type { ConditionMetricOptionGroup, EvaluationResourceProps } from '../../types'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   Select,
   SelectContent,
@@ -11,7 +9,9 @@ import {
   SelectItem,
   SelectLabel,
   SelectTrigger,
-} from '@/app/components/base/ui/select'
+} from '@langgenius/dify-ui/select'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useEvaluationStore } from '../../store'
 import { getConditionMetricValueTypeTranslationKey } from '../../utils'
 
diff --git a/web/app/components/evaluation/components/conditions-section/condition-group.tsx b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
index 5896f43c60..15b9246834 100644
--- a/web/app/components/evaluation/components/conditions-section/condition-group.tsx
+++ b/web/app/components/evaluation/components/conditions-section/condition-group.tsx
@@ -6,11 +6,8 @@ import type {
   EvaluationResourceProps,
   JudgmentConditionItem,
 } from '../../types'
-import { cn } from '@langgenius/dify-ui/cn'
-import { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import Input from '@/app/components/base/input'
 import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   Select,
   SelectContent,
@@ -19,7 +16,10 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from '@/app/components/base/ui/select'
+} from '@langgenius/dify-ui/select'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
 import { getAllowedOperators, requiresConditionValue, useEvaluationResource, useEvaluationStore } from '../../store'
 import {
   buildConditionMetricOptions,
diff --git a/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx b/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
index c85c192aff..e2b93e7f22 100644
--- a/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
+++ b/web/app/components/evaluation/components/custom-metric-editor/workflow-selector.tsx
@@ -2,24 +2,24 @@
 
 import type { AvailableEvaluationWorkflow } from '@/types/evaluation'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useInfiniteScroll } from 'ahooks'
-import * as React from 'react'
-import { useDeferredValue, useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Input from '@/app/components/base/input'
-import Loading from '@/app/components/base/loading'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
+} from '@langgenius/dify-ui/popover'
 import {
   ScrollAreaContent,
   ScrollAreaRoot,
   ScrollAreaScrollbar,
   ScrollAreaThumb,
   ScrollAreaViewport,
-} from '@/app/components/base/ui/scroll-area'
+} from '@langgenius/dify-ui/scroll-area'
+import { useInfiniteScroll } from 'ahooks'
+import * as React from 'react'
+import { useDeferredValue, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import Loading from '@/app/components/base/loading'
 import { useAvailableEvaluationWorkflows } from '@/service/use-evaluation'
 
 type WorkflowSelectorProps = {
@@ -119,7 +119,7 @@ const WorkflowSelector = ({
               </div>
               <div className="min-w-0 flex-1 px-1 py-1 text-left">
                 <div className={cn(
-                  'system-sm-regular truncate',
+                  'truncate system-sm-regular',
                   currentWorkflowName ? 'text-text-secondary' : 'text-components-input-text-placeholder',
                 )}
                 >
@@ -158,7 +158,7 @@ const WorkflowSelector = ({
               )
             : !workflows.length
                 ? (
-                    <div className="system-sm-regular flex h-[120px] items-center justify-center text-text-tertiary">
+                    <div className="flex h-[120px] items-center justify-center system-sm-regular text-text-tertiary">
                       {t('noData', { ns: 'common' })}
                     </div>
                   )
@@ -184,7 +184,7 @@ const WorkflowSelector = ({
                                   <span aria-hidden="true" className="i-ri-equalizer-2-line h-3.5 w-3.5 text-text-tertiary" />
                                 </div>
                               </div>
-                              <div className="system-sm-medium min-w-0 flex-1 truncate px-1 py-1 text-text-secondary">
+                              <div className="min-w-0 flex-1 truncate px-1 py-1 system-sm-medium text-text-secondary">
                                 {getWorkflowName(workflow)}
                               </div>
                               {workflow.id === value && (
diff --git a/web/app/components/evaluation/components/metric-selector/index.tsx b/web/app/components/evaluation/components/metric-selector/index.tsx
index 2e1cc89ec8..24e200421e 100644
--- a/web/app/components/evaluation/components/metric-selector/index.tsx
+++ b/web/app/components/evaluation/components/metric-selector/index.tsx
@@ -2,16 +2,16 @@
 
 import type { ChangeEvent } from 'react'
 import type { MetricSelectorProps } from './types'
-import { cn } from '@langgenius/dify-ui/cn'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Input from '@/app/components/base/input'
 import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from '@/app/components/base/ui/popover'
+} from '@langgenius/dify-ui/popover'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
 import { useEvaluationResource, useEvaluationStore } from '../../store'
 import SelectorEmptyState from './selector-empty-state'
 import SelectorFooter from './selector-footer'
@@ -68,17 +68,17 @@ const MetricSelector = ({
         render={(
           triggerStyle === 'text'
             ? (
-              <button type="button" className={cn('system-sm-medium inline-flex items-center text-text-accent', triggerClassName)}>
-                <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
-                {t('metrics.add')}
-              </button>
-            )
+                <button type="button" className={cn('inline-flex items-center system-sm-medium text-text-accent', triggerClassName)}>
+                  <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
+                  {t('metrics.add')}
+                </button>
+              )
             : (
-              <Button variant="ghost-accent" className={triggerClassName}>
-                <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
-                {t('metrics.add')}
-              </Button>
-            )
+                <Button variant="ghost-accent" className={triggerClassName}>
+                  <span aria-hidden="true" className="mr-1 i-ri-add-line h-4 w-4" />
+                  {t('metrics.add')}
+                </Button>
+              )
         )}
       />
       <PopoverContent popupClassName="w-[360px] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border p-0 shadow-[0px_12px_16px_-4px_rgba(9,9,11,0.08),0px_4px_6px_-2px_rgba(9,9,11,0.03)]">
diff --git a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
index 1e9f9cc4c1..4496f71edb 100644
--- a/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
+++ b/web/app/components/evaluation/components/pipeline/pipeline-metric-item.tsx
@@ -2,10 +2,10 @@
 
 import type { MetricOption } from '../../types'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useTranslation } from 'react-i18next'
 import Checkbox from '@/app/components/base/checkbox'
 import Input from '@/app/components/base/input'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { getTranslatedMetricDescription } from '../../default-metric-descriptions'
 import { DEFAULT_PIPELINE_METRIC_THRESHOLD } from '../../store-utils'
 
@@ -37,7 +37,7 @@ const PipelineMetricItem = ({
         onClick={onToggle}
       >
         <Checkbox checked={selected} />
-        <span className="system-sm-medium truncate text-text-secondary">{metric.label}</span>
+        <span className="truncate system-sm-medium text-text-secondary">{metric.label}</span>
         <Tooltip>
           <TooltipTrigger
             render={(
diff --git a/web/app/components/evaluation/components/section-header.tsx b/web/app/components/evaluation/components/section-header.tsx
index 6ddc155201..3d7aa22316 100644
--- a/web/app/components/evaluation/components/section-header.tsx
+++ b/web/app/components/evaluation/components/section-header.tsx
@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 
 type SectionHeaderProps = {
   title: string
@@ -32,7 +32,7 @@ const SectionHeader = ({
     <div className={cn('flex flex-wrap items-start justify-between gap-3', className)}>
       <div>
         <div className={cn('system-xl-semibold text-text-primary', titleClassName)}>{title}</div>
-        {description && <div className={cn('system-sm-regular mt-1 text-text-tertiary', descriptionClassName)}>{description}</div>}
+        {description && <div className={cn('mt-1 system-sm-regular text-text-tertiary', descriptionClassName)}>{description}</div>}
       </div>
       {action}
     </div>