From 62bb830338adaf14f1acde10758f5f0027294f0d Mon Sep 17 00:00:00 2001
From: aether <144865106+aether-png@users.noreply.github.com>
Date: Tue, 14 Apr 2026 13:16:58 +0530
Subject: [PATCH 01/44] refactor: convert InvokeFrom if/elif to match/case
 (#35143)

---
 .../apps/workflow/generate_task_pipeline.py   | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/api/core/app/apps/workflow/generate_task_pipeline.py b/api/core/app/apps/workflow/generate_task_pipeline.py
index f1b8b08eaa..96387133b1 100644
--- a/api/core/app/apps/workflow/generate_task_pipeline.py
+++ b/api/core/app/apps/workflow/generate_task_pipeline.py
@@ -682,15 +682,16 @@ class WorkflowAppGenerateTaskPipeline(GraphRuntimeStateSupport):
 
     def _save_workflow_app_log(self, *, session: Session, workflow_run_id: str | None):
         invoke_from = self._application_generate_entity.invoke_from
-        if invoke_from == InvokeFrom.SERVICE_API:
-            created_from = WorkflowAppLogCreatedFrom.SERVICE_API
-        elif invoke_from == InvokeFrom.EXPLORE:
-            created_from = WorkflowAppLogCreatedFrom.INSTALLED_APP
-        elif invoke_from == InvokeFrom.WEB_APP:
-            created_from = WorkflowAppLogCreatedFrom.WEB_APP
-        else:
-            # not save log for debugging
-            return
+        match invoke_from:
+            case InvokeFrom.SERVICE_API:
+                created_from = WorkflowAppLogCreatedFrom.SERVICE_API
+            case InvokeFrom.EXPLORE:
+                created_from = WorkflowAppLogCreatedFrom.INSTALLED_APP
+            case InvokeFrom.WEB_APP:
+                created_from = WorkflowAppLogCreatedFrom.WEB_APP
+            case InvokeFrom.DEBUGGER | InvokeFrom.TRIGGER | InvokeFrom.PUBLISHED_PIPELINE | InvokeFrom.VALIDATION:
+                # not save log for debugging
+                return
 
         if not workflow_run_id:
             return

From 173e0d6f35f37eaad58e7d9beeb6ce571dfd1b4b Mon Sep 17 00:00:00 2001
From: bohdansolovie <153934212+bohdansolovie@users.noreply.github.com>
Date: Tue, 14 Apr 2026 03:56:07 -0400
Subject: [PATCH 02/44] test: migrate clean_dataset integration tests to
 SQLAlchemy 2.0 APIs (#35146)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../tasks/test_clean_dataset_task.py          | 147 ++++++++++++------
 1 file changed, 98 insertions(+), 49 deletions(-)

diff --git a/api/tests/test_containers_integration_tests/tasks/test_clean_dataset_task.py b/api/tests/test_containers_integration_tests/tasks/test_clean_dataset_task.py
index 1dd37fbc92..32bc2fc0bd 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_clean_dataset_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_clean_dataset_task.py
@@ -16,6 +16,7 @@ from unittest.mock import MagicMock, patch
 
 import pytest
 from faker import Faker
+from sqlalchemy import delete, select
 from sqlalchemy.orm import Session
 
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
@@ -52,18 +53,18 @@ class TestCleanDatasetTask:
         from extensions.ext_redis import redis_client
 
         # Clear all test data using the provided session fixture
-        db_session_with_containers.query(DatasetMetadataBinding).delete()
-        db_session_with_containers.query(DatasetMetadata).delete()
-        db_session_with_containers.query(AppDatasetJoin).delete()
-        db_session_with_containers.query(DatasetQuery).delete()
-        db_session_with_containers.query(DatasetProcessRule).delete()
-        db_session_with_containers.query(DocumentSegment).delete()
-        db_session_with_containers.query(Document).delete()
-        db_session_with_containers.query(Dataset).delete()
-        db_session_with_containers.query(UploadFile).delete()
-        db_session_with_containers.query(TenantAccountJoin).delete()
-        db_session_with_containers.query(Tenant).delete()
-        db_session_with_containers.query(Account).delete()
+        db_session_with_containers.execute(delete(DatasetMetadataBinding))
+        db_session_with_containers.execute(delete(DatasetMetadata))
+        db_session_with_containers.execute(delete(AppDatasetJoin))
+        db_session_with_containers.execute(delete(DatasetQuery))
+        db_session_with_containers.execute(delete(DatasetProcessRule))
+        db_session_with_containers.execute(delete(DocumentSegment))
+        db_session_with_containers.execute(delete(Document))
+        db_session_with_containers.execute(delete(Dataset))
+        db_session_with_containers.execute(delete(UploadFile))
+        db_session_with_containers.execute(delete(TenantAccountJoin))
+        db_session_with_containers.execute(delete(Tenant))
+        db_session_with_containers.execute(delete(Account))
         db_session_with_containers.commit()
 
         # Clear Redis cache
@@ -302,28 +303,40 @@ class TestCleanDatasetTask:
 
         # Verify results
         # Check that dataset-related data was cleaned up
-        documents = db_session_with_containers.query(Document).filter_by(dataset_id=dataset.id).all()
+        documents = db_session_with_containers.scalars(select(Document).where(Document.dataset_id == dataset.id)).all()
         assert len(documents) == 0
 
-        segments = db_session_with_containers.query(DocumentSegment).filter_by(dataset_id=dataset.id).all()
+        segments = db_session_with_containers.scalars(
+            select(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+        ).all()
         assert len(segments) == 0
 
         # Check that metadata and bindings were cleaned up
-        metadata = db_session_with_containers.query(DatasetMetadata).filter_by(dataset_id=dataset.id).all()
+        metadata = db_session_with_containers.scalars(
+            select(DatasetMetadata).where(DatasetMetadata.dataset_id == dataset.id)
+        ).all()
         assert len(metadata) == 0
 
-        bindings = db_session_with_containers.query(DatasetMetadataBinding).filter_by(dataset_id=dataset.id).all()
+        bindings = db_session_with_containers.scalars(
+            select(DatasetMetadataBinding).where(DatasetMetadataBinding.dataset_id == dataset.id)
+        ).all()
         assert len(bindings) == 0
 
         # Check that process rules and queries were cleaned up
-        process_rules = db_session_with_containers.query(DatasetProcessRule).filter_by(dataset_id=dataset.id).all()
+        process_rules = db_session_with_containers.scalars(
+            select(DatasetProcessRule).where(DatasetProcessRule.dataset_id == dataset.id)
+        ).all()
         assert len(process_rules) == 0
 
-        queries = db_session_with_containers.query(DatasetQuery).filter_by(dataset_id=dataset.id).all()
+        queries = db_session_with_containers.scalars(
+            select(DatasetQuery).where(DatasetQuery.dataset_id == dataset.id)
+        ).all()
         assert len(queries) == 0
 
         # Check that app dataset joins were cleaned up
-        app_joins = db_session_with_containers.query(AppDatasetJoin).filter_by(dataset_id=dataset.id).all()
+        app_joins = db_session_with_containers.scalars(
+            select(AppDatasetJoin).where(AppDatasetJoin.dataset_id == dataset.id)
+        ).all()
         assert len(app_joins) == 0
 
         # Verify index processor was called
@@ -414,24 +427,32 @@ class TestCleanDatasetTask:
 
         # Verify results
         # Check that all documents were deleted
-        remaining_documents = db_session_with_containers.query(Document).filter_by(dataset_id=dataset.id).all()
+        remaining_documents = db_session_with_containers.scalars(
+            select(Document).where(Document.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_documents) == 0
 
         # Check that all segments were deleted
-        remaining_segments = db_session_with_containers.query(DocumentSegment).filter_by(dataset_id=dataset.id).all()
+        remaining_segments = db_session_with_containers.scalars(
+            select(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_segments) == 0
 
         # Check that all upload files were deleted
-        remaining_files = db_session_with_containers.query(UploadFile).where(UploadFile.id.in_(upload_file_ids)).all()
+        remaining_files = db_session_with_containers.scalars(
+            select(UploadFile).where(UploadFile.id.in_(upload_file_ids))
+        ).all()
         assert len(remaining_files) == 0
 
         # Check that metadata and bindings were cleaned up
-        remaining_metadata = db_session_with_containers.query(DatasetMetadata).filter_by(dataset_id=dataset.id).all()
+        remaining_metadata = db_session_with_containers.scalars(
+            select(DatasetMetadata).where(DatasetMetadata.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_metadata) == 0
 
-        remaining_bindings = (
-            db_session_with_containers.query(DatasetMetadataBinding).filter_by(dataset_id=dataset.id).all()
-        )
+        remaining_bindings = db_session_with_containers.scalars(
+            select(DatasetMetadataBinding).where(DatasetMetadataBinding.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_bindings) == 0
 
         # Verify index processor was called
@@ -485,12 +506,14 @@ class TestCleanDatasetTask:
 
             # Check that all data was cleaned up
 
-            remaining_documents = db_session_with_containers.query(Document).filter_by(dataset_id=dataset.id).all()
+            remaining_documents = db_session_with_containers.scalars(
+                select(Document).where(Document.dataset_id == dataset.id)
+            ).all()
             assert len(remaining_documents) == 0
 
-            remaining_segments = (
-                db_session_with_containers.query(DocumentSegment).filter_by(dataset_id=dataset.id).all()
-            )
+            remaining_segments = db_session_with_containers.scalars(
+                select(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+            ).all()
             assert len(remaining_segments) == 0
 
             # Recreate data for next test case
@@ -538,11 +561,15 @@ class TestCleanDatasetTask:
         # Verify results - even with vector cleanup failure, documents and segments should be deleted
 
         # Check that documents were still deleted despite vector cleanup failure
-        remaining_documents = db_session_with_containers.query(Document).filter_by(dataset_id=dataset.id).all()
+        remaining_documents = db_session_with_containers.scalars(
+            select(Document).where(Document.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_documents) == 0
 
         # Check that segments were still deleted despite vector cleanup failure
-        remaining_segments = db_session_with_containers.query(DocumentSegment).filter_by(dataset_id=dataset.id).all()
+        remaining_segments = db_session_with_containers.scalars(
+            select(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_segments) == 0
 
         # Verify that index processor was called and failed
@@ -622,18 +649,22 @@ class TestCleanDatasetTask:
 
         # Verify results
         # Check that all documents were deleted
-        remaining_documents = db_session_with_containers.query(Document).filter_by(dataset_id=dataset.id).all()
+        remaining_documents = db_session_with_containers.scalars(
+            select(Document).where(Document.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_documents) == 0
 
         # Check that all segments were deleted
-        remaining_segments = db_session_with_containers.query(DocumentSegment).filter_by(dataset_id=dataset.id).all()
+        remaining_segments = db_session_with_containers.scalars(
+            select(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_segments) == 0
 
         # Check that all image files were deleted from database
         image_file_ids = [f.id for f in image_files]
-        remaining_image_files = (
-            db_session_with_containers.query(UploadFile).where(UploadFile.id.in_(image_file_ids)).all()
-        )
+        remaining_image_files = db_session_with_containers.scalars(
+            select(UploadFile).where(UploadFile.id.in_(image_file_ids))
+        ).all()
         assert len(remaining_image_files) == 0
 
         # Verify that storage.delete was called for each image file
@@ -738,24 +769,32 @@ class TestCleanDatasetTask:
 
         # Verify results
         # Check that all documents were deleted
-        remaining_documents = db_session_with_containers.query(Document).filter_by(dataset_id=dataset.id).all()
+        remaining_documents = db_session_with_containers.scalars(
+            select(Document).where(Document.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_documents) == 0
 
         # Check that all segments were deleted
-        remaining_segments = db_session_with_containers.query(DocumentSegment).filter_by(dataset_id=dataset.id).all()
+        remaining_segments = db_session_with_containers.scalars(
+            select(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_segments) == 0
 
         # Check that all upload files were deleted
-        remaining_files = db_session_with_containers.query(UploadFile).where(UploadFile.id.in_(upload_file_ids)).all()
+        remaining_files = db_session_with_containers.scalars(
+            select(UploadFile).where(UploadFile.id.in_(upload_file_ids))
+        ).all()
         assert len(remaining_files) == 0
 
         # Check that all metadata and bindings were deleted
-        remaining_metadata = db_session_with_containers.query(DatasetMetadata).filter_by(dataset_id=dataset.id).all()
+        remaining_metadata = db_session_with_containers.scalars(
+            select(DatasetMetadata).where(DatasetMetadata.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_metadata) == 0
 
-        remaining_bindings = (
-            db_session_with_containers.query(DatasetMetadataBinding).filter_by(dataset_id=dataset.id).all()
-        )
+        remaining_bindings = db_session_with_containers.scalars(
+            select(DatasetMetadataBinding).where(DatasetMetadataBinding.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_bindings) == 0
 
         # Verify performance expectations
@@ -826,7 +865,9 @@ class TestCleanDatasetTask:
         # Check that upload file was still deleted from database despite storage failure
         # Note: When storage operations fail, the upload file may not be deleted
         # This demonstrates that the cleanup process continues even with storage errors
-        remaining_files = db_session_with_containers.query(UploadFile).filter_by(id=upload_file.id).all()
+        remaining_files = db_session_with_containers.scalars(
+            select(UploadFile).where(UploadFile.id == upload_file.id)
+        ).all()
         # The upload file should still be deleted from the database even if storage cleanup fails
         # However, this depends on the specific implementation of clean_dataset_task
         if len(remaining_files) > 0:
@@ -976,19 +1017,27 @@ class TestCleanDatasetTask:
 
         # Verify results
         # Check that all documents were deleted
-        remaining_documents = db_session_with_containers.query(Document).filter_by(dataset_id=dataset.id).all()
+        remaining_documents = db_session_with_containers.scalars(
+            select(Document).where(Document.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_documents) == 0
 
         # Check that all segments were deleted
-        remaining_segments = db_session_with_containers.query(DocumentSegment).filter_by(dataset_id=dataset.id).all()
+        remaining_segments = db_session_with_containers.scalars(
+            select(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_segments) == 0
 
         # Check that all upload files were deleted
-        remaining_files = db_session_with_containers.query(UploadFile).filter_by(id=upload_file_id).all()
+        remaining_files = db_session_with_containers.scalars(
+            select(UploadFile).where(UploadFile.id == upload_file_id)
+        ).all()
         assert len(remaining_files) == 0
 
         # Check that all metadata was deleted
-        remaining_metadata = db_session_with_containers.query(DatasetMetadata).filter_by(dataset_id=dataset.id).all()
+        remaining_metadata = db_session_with_containers.scalars(
+            select(DatasetMetadata).where(DatasetMetadata.dataset_id == dataset.id)
+        ).all()
         assert len(remaining_metadata) == 0
 
         # Verify that storage.delete was called

From a951cc996b234660c2498d2c0a093a589ab0c1ff Mon Sep 17 00:00:00 2001
From: bohdansolovie <153934212+bohdansolovie@users.noreply.github.com>
Date: Tue, 14 Apr 2026 03:56:11 -0400
Subject: [PATCH 03/44] test: migrate document indexing task tests to
 SQLAlchemy 2.0 select API (#35145)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../tasks/test_disable_segments_from_index_task.py    |  7 ++++---
 .../tasks/test_document_indexing_update_task.py       | 11 ++++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py b/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py
index 3e9a0c8f7f..6e03bd9351 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_disable_segments_from_index_task.py
@@ -9,6 +9,7 @@ The task is responsible for removing document segments from the search index whe
 from unittest.mock import MagicMock, patch
 
 from faker import Faker
+from sqlalchemy import select
 from sqlalchemy.orm import Session
 
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
@@ -471,9 +472,9 @@ class TestDisableSegmentsFromIndexTask:
                 db_session_with_containers.refresh(segments[1])
 
                 # Check that segments are re-enabled after error
-                updated_segments = (
-                    db_session_with_containers.query(DocumentSegment).where(DocumentSegment.id.in_(segment_ids)).all()
-                )
+                updated_segments = db_session_with_containers.scalars(
+                    select(DocumentSegment).where(DocumentSegment.id.in_(segment_ids))
+                ).all()
 
                 for segment in updated_segments:
                     assert segment.enabled is True
diff --git a/api/tests/test_containers_integration_tests/tasks/test_document_indexing_update_task.py b/api/tests/test_containers_integration_tests/tasks/test_document_indexing_update_task.py
index d94abf2b40..a9a8c0f30c 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_document_indexing_update_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_document_indexing_update_task.py
@@ -2,6 +2,7 @@ from unittest.mock import MagicMock, patch
 
 import pytest
 from faker import Faker
+from sqlalchemy import func, select
 
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
 from models import Account, Tenant, TenantAccountJoin, TenantAccountRole
@@ -123,13 +124,13 @@ class TestDocumentIndexingUpdateTask:
         db_session_with_containers.expire_all()
 
         # Assert document status updated before reindex
-        updated = db_session_with_containers.query(Document).where(Document.id == document.id).first()
+        updated = db_session_with_containers.scalar(select(Document).where(Document.id == document.id).limit(1))
         assert updated.indexing_status == IndexingStatus.PARSING
         assert updated.processing_started_at is not None
 
         # Segments should be deleted
-        remaining = (
-            db_session_with_containers.query(DocumentSegment).where(DocumentSegment.document_id == document.id).count()
+        remaining = db_session_with_containers.scalar(
+            select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
         )
         assert remaining == 0
 
@@ -167,8 +168,8 @@ class TestDocumentIndexingUpdateTask:
         mock_external_dependencies["runner_instance"].run.assert_called_once()
 
         # Segments should remain (since clean failed before DB delete)
-        remaining = (
-            db_session_with_containers.query(DocumentSegment).where(DocumentSegment.document_id == document.id).count()
+        remaining = db_session_with_containers.scalar(
+            select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
         )
         assert remaining > 0
 

From d7ad2baf7958992199aa69648a46cc00cb863784 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 14 Apr 2026 16:15:07 +0800
Subject: [PATCH 04/44] chore: clarify tracing error copy to direct users to
 the Tracing tab (#35153)

---
 pnpm-lock.yaml                                | 12 ----
 .../base/ui/select/__tests__/index.spec.tsx   | 13 ++--
 .../panel/__tests__/workflow-preview.spec.tsx | 40 +++++++++++-
 .../workflow/panel/workflow-preview.tsx       |  5 ++
 .../workflow/run/__tests__/status.spec.tsx    | 65 ++++++++++++++++++-
 web/app/components/workflow/run/index.tsx     |  1 +
 .../components/workflow/run/result-panel.tsx  |  3 +
 web/app/components/workflow/run/status.tsx    | 32 ++++++++-
 web/i18n/ar-TN/workflow.json                  |  2 +-
 web/i18n/de-DE/workflow.json                  |  2 +-
 web/i18n/en-US/workflow.json                  |  2 +-
 web/i18n/es-ES/workflow.json                  |  2 +-
 web/i18n/fa-IR/workflow.json                  |  2 +-
 web/i18n/fr-FR/workflow.json                  |  2 +-
 web/i18n/hi-IN/workflow.json                  |  2 +-
 web/i18n/id-ID/workflow.json                  |  2 +-
 web/i18n/it-IT/workflow.json                  |  2 +-
 web/i18n/ja-JP/workflow.json                  |  2 +-
 web/i18n/ko-KR/workflow.json                  |  2 +-
 web/i18n/nl-NL/workflow.json                  |  2 +-
 web/i18n/pl-PL/workflow.json                  |  2 +-
 web/i18n/pt-BR/workflow.json                  |  2 +-
 web/i18n/ro-RO/workflow.json                  |  2 +-
 web/i18n/ru-RU/workflow.json                  |  2 +-
 web/i18n/sl-SI/workflow.json                  |  2 +-
 web/i18n/th-TH/workflow.json                  |  2 +-
 web/i18n/tr-TR/workflow.json                  |  2 +-
 web/i18n/uk-UA/workflow.json                  |  2 +-
 web/i18n/vi-VN/workflow.json                  |  2 +-
 web/i18n/zh-Hans/workflow.json                |  2 +-
 web/i18n/zh-Hant/workflow.json                |  2 +-
 web/package.json                              |  2 -
 32 files changed, 167 insertions(+), 52 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8901c7948f..4444981601 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,9 +24,6 @@ catalogs:
     '@cucumber/cucumber':
       specifier: 12.8.0
       version: 12.8.0
-    '@date-fns/tz':
-      specifier: 1.4.1
-      version: 1.4.1
     '@egoist/tailwindcss-icons':
       specifier: 1.9.2
       version: 1.9.2
@@ -270,9 +267,6 @@ catalogs:
     cron-parser:
       specifier: 5.5.0
       version: 5.5.0
-    date-fns:
-      specifier: 4.1.0
-      version: 4.1.0
     dayjs:
       specifier: 1.11.20
       version: 1.11.20
@@ -655,9 +649,6 @@ importers:
       '@base-ui/react':
         specifier: 'catalog:'
         version: 1.4.0(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
-      '@date-fns/tz':
-        specifier: 'catalog:'
-        version: 1.4.1
       '@emoji-mart/data':
         specifier: 'catalog:'
         version: 1.2.1
@@ -760,9 +751,6 @@ importers:
       cron-parser:
         specifier: 'catalog:'
         version: 5.5.0
-      date-fns:
-        specifier: 'catalog:'
-        version: 4.1.0
       dayjs:
         specifier: 'catalog:'
         version: 1.11.20
diff --git a/web/app/components/base/ui/select/__tests__/index.spec.tsx b/web/app/components/base/ui/select/__tests__/index.spec.tsx
index f33b1eb650..124eb4d60e 100644
--- a/web/app/components/base/ui/select/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/select/__tests__/index.spec.tsx
@@ -42,12 +42,10 @@ const renderOpenSelect = ({
 
 describe('Select wrappers', () => {
   describe('Select root integration', () => {
-    it('should associate the hidden input with an external form and preserve autocomplete hints', () => {
-      const formId = 'profile-form'
+    it('should submit the hidden input value and preserve autocomplete hints inside a form', () => {
       const { container } = render(
-        <>
-          <form id={formId} />
-          <Select defaultValue="seattle" name="city" form={formId} autoComplete="address-level2">
+        <form aria-label="profile form">
+          <Select defaultValue="seattle" name="city" autoComplete="address-level2">
             <SelectTrigger aria-label="city select">
               <SelectValue />
             </SelectTrigger>
@@ -56,13 +54,12 @@ describe('Select wrappers', () => {
               <SelectItem value="new-york">New York</SelectItem>
             </SelectContent>
           </Select>
-        </>,
+        </form>,
       )
 
       const hiddenInput = container.querySelector('input[name="city"]')
-      const form = container.querySelector(`#${formId}`) as HTMLFormElement
+      const form = screen.getByRole('form', { name: 'profile form' }) as HTMLFormElement
 
-      expect(hiddenInput).toHaveAttribute('form', formId)
       expect(hiddenInput).toHaveAttribute('autocomplete', 'address-level2')
       expect(new FormData(form).get('city')).toBe('seattle')
     })
diff --git a/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx b/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx
index 860322d729..e3c85bd2ad 100644
--- a/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx
+++ b/web/app/components/workflow/panel/__tests__/workflow-preview.spec.tsx
@@ -33,7 +33,18 @@ vi.mock('@/app/components/workflow/hooks', () => ({
 }))
 
 vi.mock('@/app/components/workflow/run/result-panel', () => ({
-  default: ({ status }: { status?: string }) => <div data-testid="result-panel">{status}</div>,
+  default: ({
+    status,
+    onOpenTracingTab,
+  }: {
+    status?: string
+    onOpenTracingTab?: () => void
+  }) => (
+    <div data-testid="result-panel">
+      <div>{status}</div>
+      <button type="button" onClick={onOpenTracingTab}>open-tracing</button>
+    </div>
+  ),
 }))
 
 vi.mock('@/app/components/workflow/run/result-text', () => ({
@@ -329,6 +340,33 @@ describe('WorkflowPreview', () => {
     expect(screen.getByTestId('result-panel')).toBeInTheDocument()
   })
 
+  it('should switch to the tracing tab when result panel requests it', async () => {
+    const user = userEvent.setup()
+
+    renderWorkflowComponent(
+      <WorkflowPreview />,
+      {
+        initialStoreState: {
+          workflowRunningData: {
+            ...createWorkflowRunningData({
+              result: createWorkflowResult({
+                status: 'partial-succeeded',
+                files: [],
+              }),
+              tracing: [createNodeTracing()],
+            }),
+            resultText: 'ready',
+          } as NonNullable<Shape['workflowRunningData']>,
+        },
+      },
+    )
+
+    await user.click(screen.getByText('runLog.detail'))
+    await user.click(screen.getByRole('button', { name: 'open-tracing' }))
+
+    expect(screen.getByTestId('tracing-panel')).toHaveTextContent('1')
+  })
+
   it('should resize the preview panel within the allowed workflow canvas bounds', async () => {
     const { container, store } = renderWorkflowComponent(
       <WorkflowPreview />,
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index d3950dcbca..e1e442c0cb 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -101,6 +101,10 @@ const WorkflowPreview = () => {
     await submitHumanInputForm(formToken, formData)
   }, [])
 
+  const handleOpenTracingTab = useCallback(() => {
+    switchTab('TRACING')
+  }, [])
+
   return (
     <div
       className="relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl"
@@ -236,6 +240,7 @@ const WorkflowPreview = () => {
               created_by={(workflowRunningData?.result?.created_by as any)?.name}
               steps={workflowRunningData?.result?.total_steps}
               exceptionCounts={workflowRunningData?.result?.exceptions_count}
+              onOpenTracingTab={handleOpenTracingTab}
             />
           )}
           {currentTab === 'DETAIL' && !workflowRunningData?.result && (
diff --git a/web/app/components/workflow/run/__tests__/status.spec.tsx b/web/app/components/workflow/run/__tests__/status.spec.tsx
index 01f32c4c47..24682aa47f 100644
--- a/web/app/components/workflow/run/__tests__/status.spec.tsx
+++ b/web/app/components/workflow/run/__tests__/status.spec.tsx
@@ -1,11 +1,60 @@
 import type { WorkflowPausedDetailsResponse } from '@/models/log'
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { cloneElement, isValidElement } from 'react'
 import { createDocLinkMock, resolveDocLink } from '../../__tests__/i18n'
 import Status from '../status'
 
 const mockDocLink = createDocLinkMock()
 const mockUseWorkflowPausedDetails = vi.fn()
 
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: Record<string, unknown>) => {
+      const fullKey = options?.ns ? `${options.ns}.${key}` : key
+      if (fullKey === 'workflow.nodes.common.errorHandle.partialSucceeded.tip')
+        return 'There are {{num}} nodes in the process running abnormally, please go to TRACING to check the logs.'
+
+      const params = { ...options }
+      delete params.ns
+      const suffix = Object.keys(params).length > 0 ? `:${JSON.stringify(params)}` : ''
+      return `${fullKey}${suffix}`
+    },
+  }),
+  Trans: ({
+    i18nKey,
+    values,
+    components,
+  }: {
+    i18nKey: string
+    values?: {
+      num?: string | number
+    }
+    components?: Record<string, React.ReactNode>
+  }) => {
+    if (i18nKey !== 'nodes.common.errorHandle.partialSucceeded.tip')
+      return <span>{i18nKey}</span>
+
+    const tracingLink = components?.tracingLink
+    const tracingNode = isValidElement(tracingLink)
+      ? cloneElement(tracingLink, undefined, 'TRACING')
+      : 'TRACING'
+
+    return (
+      <span>
+        There are
+        {' '}
+        {values?.num}
+        {' '}
+        nodes in the process running abnormally, please go to
+        {' '}
+        {tracingNode}
+        {' '}
+        to check the logs.
+      </span>
+    )
+  },
+}))
+
 vi.mock('@/context/i18n', () => ({
   useDocLink: () => mockDocLink,
 }))
@@ -64,14 +113,24 @@ describe('Status', () => {
 
     expect(screen.getByText('FAIL')).toBeInTheDocument()
     expect(screen.getByText('Something broke')).toBeInTheDocument()
-    expect(screen.getByText('workflow.nodes.common.errorHandle.partialSucceeded.tip:{"num":2}')).toBeInTheDocument()
+    expect(screen.getAllByText((_, element) => element?.textContent === 'There are 2 nodes in the process running abnormally, please go to TRACING to check the logs.')).toHaveLength(2)
   })
 
   it('renders the partial-succeeded warning summary', () => {
     render(<Status status="partial-succeeded" exceptionCounts={3} />)
 
     expect(screen.getByText('PARTIAL SUCCESS')).toBeInTheDocument()
-    expect(screen.getByText('workflow.nodes.common.errorHandle.partialSucceeded.tip:{"num":3}')).toBeInTheDocument()
+    expect(screen.getAllByText((_, element) => element?.textContent === 'There are 3 nodes in the process running abnormally, please go to TRACING to check the logs.')).toHaveLength(2)
+  })
+
+  it('opens the tracing tab when clicking the TRACING link', () => {
+    const onOpenTracingTab = vi.fn()
+
+    render(<Status status="partial-succeeded" exceptionCounts={3} onOpenTracingTab={onOpenTracingTab} />)
+
+    fireEvent.click(screen.getByRole('link', { name: 'TRACING' }))
+
+    expect(onOpenTracingTab).toHaveBeenCalledTimes(1)
   })
 
   it('renders the exception learn-more link', () => {
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index d39e6d43c3..417d38657e 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -174,6 +174,7 @@ const RunPanel: FC<RunProps> = ({
             exceptionCounts={runDetail.exceptions_count}
             isListening={isListening}
             workflowRunId={runDetail.id}
+            onOpenTracingTab={() => switchTab('TRACING')}
           />
         )}
         {!loading && currentTab === 'DETAIL' && !runDetail && isListening && (
diff --git a/web/app/components/workflow/run/result-panel.tsx b/web/app/components/workflow/run/result-panel.tsx
index 58f783e6c4..c7f4a45540 100644
--- a/web/app/components/workflow/run/result-panel.tsx
+++ b/web/app/components/workflow/run/result-panel.tsx
@@ -42,6 +42,7 @@ export type ResultPanelProps = {
   execution_metadata?: any
   isListening?: boolean
   workflowRunId?: string
+  onOpenTracingTab?: () => void
   handleShowIterationResultList?: (detail: NodeTracing[][], iterDurationMap: any) => void
   handleShowLoopResultList?: (detail: NodeTracing[][], loopDurationMap: any) => void
   onShowRetryDetail?: (detail: NodeTracing[]) => void
@@ -69,6 +70,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
   execution_metadata,
   isListening = false,
   workflowRunId,
+  onOpenTracingTab,
   handleShowIterationResultList,
   handleShowLoopResultList,
   onShowRetryDetail,
@@ -92,6 +94,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
           exceptionCounts={exceptionCounts}
           isListening={isListening}
           workflowRunId={workflowRunId}
+          onOpenTracingTab={onOpenTracingTab}
         />
       </div>
       <div className="px-4">
diff --git a/web/app/components/workflow/run/status.tsx b/web/app/components/workflow/run/status.tsx
index d4ecfcc0fd..233c6207a9 100644
--- a/web/app/components/workflow/run/status.tsx
+++ b/web/app/components/workflow/run/status.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import Indicator from '@/app/components/header/indicator'
 import StatusContainer from '@/app/components/workflow/run/status-container'
 import { useDocLink } from '@/context/i18n'
@@ -16,6 +16,7 @@ type ResultProps = {
   exceptionCounts?: number
   isListening?: boolean
   workflowRunId?: string
+  onOpenTracingTab?: () => void
 }
 
 const StatusPanel: FC<ResultProps> = ({
@@ -26,6 +27,7 @@ const StatusPanel: FC<ResultProps> = ({
   exceptionCounts,
   isListening = false,
   workflowRunId,
+  onOpenTracingTab,
 }) => {
   const { t } = useTranslation()
   const docLink = useDocLink()
@@ -65,6 +67,30 @@ const StatusPanel: FC<ResultProps> = ({
     return inputURLs
   }, [pausedDetails])
 
+  const partialSucceededTip = exceptionCounts
+    ? (
+        <Trans
+          i18nKey="nodes.common.errorHandle.partialSucceeded.tip"
+          ns="workflow"
+          values={{ num: exceptionCounts }}
+          components={{
+            tracingLink: onOpenTracingTab
+              ? (
+                  <a
+                    href="#tracing"
+                    className="cursor-pointer text-text-accent hover:underline"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      onOpenTracingTab()
+                    }}
+                  />
+                )
+              : <span />,
+          }}
+        />
+      )
+    : null
+
   return (
     <StatusContainer status={status}>
       <div className="flex">
@@ -160,7 +186,7 @@ const StatusPanel: FC<ResultProps> = ({
               <>
                 <div className="my-2 h-[0.5px] bg-divider-subtle" />
                 <div className="system-xs-regular text-text-destructive">
-                  {t('nodes.common.errorHandle.partialSucceeded.tip', { ns: 'workflow', num: exceptionCounts })}
+                  {partialSucceededTip}
                 </div>
               </>
             )
@@ -172,7 +198,7 @@ const StatusPanel: FC<ResultProps> = ({
           <>
             <div className="my-2 h-[0.5px] bg-divider-deep" />
             <div className="system-xs-medium text-text-warning">
-              {t('nodes.common.errorHandle.partialSucceeded.tip', { ns: 'workflow', num: exceptionCounts })}
+              {partialSucceededTip}
             </div>
           </>
         )
diff --git a/web/i18n/ar-TN/workflow.json b/web/i18n/ar-TN/workflow.json
index e0e498e8d4..56192350c3 100644
--- a/web/i18n/ar-TN/workflow.json
+++ b/web/i18n/ar-TN/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "فرع الفشل",
   "nodes.common.errorHandle.none.desc": "ستتوقف العقدة عن العمل في حالة حدوث استثناء ولم يتم التعامل معه",
   "nodes.common.errorHandle.none.title": "لا شيء",
-  "nodes.common.errorHandle.partialSucceeded.tip": "هناك {{num}} عقد في العملية تعمل بشكل غير طبيعي، يرجى الانتقال إلى التتبع للتحقق من السجلات.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "هناك {{num}} عقد في العملية تعمل بشكل غير طبيعي، يرجى الانتقال إلى <tracingLink>التتبع</tracingLink> للتحقق من السجلات.",
   "nodes.common.errorHandle.tip": "استراتيجية التعامل مع الاستثناءات، يتم تشغيلها عندما تواجه العقدة استثناءً.",
   "nodes.common.errorHandle.title": "معالجة الأخطاء",
   "nodes.common.inputVars": "متغيرات الإدخال",
diff --git a/web/i18n/de-DE/workflow.json b/web/i18n/de-DE/workflow.json
index 7a1ddeeb1c..75cb0d30ca 100644
--- a/web/i18n/de-DE/workflow.json
+++ b/web/i18n/de-DE/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Fehlgeschlagener Zweig",
   "nodes.common.errorHandle.none.desc": "Der Knoten wird nicht mehr ausgeführt, wenn eine Ausnahme auftritt und nicht behandelt wird",
   "nodes.common.errorHandle.none.title": "Nichts",
-  "nodes.common.errorHandle.partialSucceeded.tip": "Es gibt {{num}} Knoten im Prozess, die nicht normal laufen, bitte gehen Sie zur Ablaufverfolgung, um die Protokolle zu überprüfen.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "Es gibt {{num}} Knoten im Prozess, die nicht normal laufen, bitte gehen Sie zur <tracingLink>Ablaufverfolgung</tracingLink>, um die Protokolle zu überprüfen.",
   "nodes.common.errorHandle.tip": "Ausnahmebehandlungsstrategie, die ausgelöst wird, wenn ein Knoten auf eine Ausnahme stößt.",
   "nodes.common.errorHandle.title": "Fehlerbehandlung",
   "nodes.common.inputVars": "Eingabevariablen",
diff --git a/web/i18n/en-US/workflow.json b/web/i18n/en-US/workflow.json
index 6f6e5de2cc..42522950b8 100644
--- a/web/i18n/en-US/workflow.json
+++ b/web/i18n/en-US/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Fail Branch",
   "nodes.common.errorHandle.none.desc": "The node will stop running if an exception occurs and is not handled",
   "nodes.common.errorHandle.none.title": "None",
-  "nodes.common.errorHandle.partialSucceeded.tip": "There are {{num}} nodes in the process running abnormally, please go to tracing to check the logs.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "There are {{num}} nodes in the process running abnormally, please go to <tracingLink>TRACING</tracingLink> to check the logs.",
   "nodes.common.errorHandle.tip": "Exception handling strategy, triggered when a node encounters an exception.",
   "nodes.common.errorHandle.title": "Error Handling",
   "nodes.common.inputVars": "Input Variables",
diff --git a/web/i18n/es-ES/workflow.json b/web/i18n/es-ES/workflow.json
index 1955357c45..5545707b4f 100644
--- a/web/i18n/es-ES/workflow.json
+++ b/web/i18n/es-ES/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Rama de error",
   "nodes.common.errorHandle.none.desc": "El nodo dejará de ejecutarse si se produce una excepción y no se controla",
   "nodes.common.errorHandle.none.title": "Ninguno",
-  "nodes.common.errorHandle.partialSucceeded.tip": "Hay nodos {{num}} en el proceso que se ejecutan de manera anormal, vaya a rastreo para verificar los registros.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "Hay nodos {{num}} en el proceso que se ejecutan de manera anormal, vaya a <tracingLink>rastreo</tracingLink> para verificar los registros.",
   "nodes.common.errorHandle.tip": "Estrategia de control de excepciones, que se desencadena cuando un nodo encuentra una excepción.",
   "nodes.common.errorHandle.title": "Manejo de errores",
   "nodes.common.inputVars": "Variables de entrada",
diff --git a/web/i18n/fa-IR/workflow.json b/web/i18n/fa-IR/workflow.json
index e957d45267..fbe6685681 100644
--- a/web/i18n/fa-IR/workflow.json
+++ b/web/i18n/fa-IR/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "شاخه شکست",
   "nodes.common.errorHandle.none.desc": "اگر استثنایی رخ دهد و مدیریت نشود، گره از کار می‌افتد",
   "nodes.common.errorHandle.none.title": "هیچ‌کدام",
-  "nodes.common.errorHandle.partialSucceeded.tip": "{{num}} گره با خطا مواجه شدند؛ برای بررسی لاگ‌ها به ردیابی مراجعه کنید.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "{{num}} گره با خطا مواجه شدند؛ برای بررسی لاگ‌ها به <tracingLink>ردیابی</tracingLink> مراجعه کنید.",
   "nodes.common.errorHandle.tip": "استراتژی مدیریت استثنا؛ زمانی که گره با خطا مواجه شود فعال می‌شود.",
   "nodes.common.errorHandle.title": "مدیریت خطا",
   "nodes.common.inputVars": "متغیرهای ورودی",
diff --git a/web/i18n/fr-FR/workflow.json b/web/i18n/fr-FR/workflow.json
index ec23ac5c98..b7f7048ad2 100644
--- a/web/i18n/fr-FR/workflow.json
+++ b/web/i18n/fr-FR/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Branche d’échec",
   "nodes.common.errorHandle.none.desc": "Le nœud cessera de s’exécuter si une exception se produit et n’est pas gérée",
   "nodes.common.errorHandle.none.title": "Aucun",
-  "nodes.common.errorHandle.partialSucceeded.tip": "Il y a des nœuds {{num}} dans le processus qui fonctionnent anormalement, veuillez aller dans le traçage pour vérifier les journaux.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "Il y a des nœuds {{num}} dans le processus qui fonctionnent anormalement, veuillez aller dans le <tracingLink>traçage</tracingLink> pour vérifier les journaux.",
   "nodes.common.errorHandle.tip": "Stratégie de gestion des exceptions, déclenchée lorsqu’un nœud rencontre une exception.",
   "nodes.common.errorHandle.title": "Gestion des erreurs",
   "nodes.common.inputVars": "Variables d’entrée",
diff --git a/web/i18n/hi-IN/workflow.json b/web/i18n/hi-IN/workflow.json
index f18de6aa3c..9166eb43d8 100644
--- a/web/i18n/hi-IN/workflow.json
+++ b/web/i18n/hi-IN/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "असफल शाखा",
   "nodes.common.errorHandle.none.desc": "यदि कोई अपवाद होता है और हैंडल नहीं किया जाता है, तो नोड चलना बंद कर देगा",
   "nodes.common.errorHandle.none.title": "कोई नहीं",
-  "nodes.common.errorHandle.partialSucceeded.tip": "प्रक्रिया में {{num}} नोड्स असामान्य रूप से चल रहे हैं, कृपया लॉग की जांच करने के लिए ट्रेसिंग पर जाएं।",
+  "nodes.common.errorHandle.partialSucceeded.tip": "प्रक्रिया में {{num}} नोड्स असामान्य रूप से चल रहे हैं, कृपया लॉग की जांच करने के लिए <tracingLink>ट्रेसिंग</tracingLink> पर जाएं।",
   "nodes.common.errorHandle.tip": "अपवाद हैंडलिंग रणनीति, ट्रिगर जब एक नोड एक अपवाद का सामना करता है।",
   "nodes.common.errorHandle.title": "त्रुटि हैंडलिंग",
   "nodes.common.inputVars": "इनपुट चर",
diff --git a/web/i18n/id-ID/workflow.json b/web/i18n/id-ID/workflow.json
index 5030489cb1..7e72577e3b 100644
--- a/web/i18n/id-ID/workflow.json
+++ b/web/i18n/id-ID/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Cabang Gagal",
   "nodes.common.errorHandle.none.desc": "Node akan berhenti berjalan jika pengecualian terjadi dan tidak ditangani",
   "nodes.common.errorHandle.none.title": "Tidak",
-  "nodes.common.errorHandle.partialSucceeded.tip": "Ada {{num}} node dalam proses yang berjalan tidak normal, silakan pergi ke tracing untuk memeriksa log.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "Ada {{num}} node dalam proses yang berjalan tidak normal, silakan pergi ke <tracingLink>tracing</tracingLink> untuk memeriksa log.",
   "nodes.common.errorHandle.tip": "Strategi penanganan pengecualian, dipicu ketika simpul menemukan pengecualian.",
   "nodes.common.errorHandle.title": "Penanganan Kesalahan",
   "nodes.common.inputVars": "Variabel Masukan",
diff --git a/web/i18n/it-IT/workflow.json b/web/i18n/it-IT/workflow.json
index a39e00c5d8..2fde43f694 100644
--- a/web/i18n/it-IT/workflow.json
+++ b/web/i18n/it-IT/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Ramo fallito",
   "nodes.common.errorHandle.none.desc": "L'esecuzione del nodo verrà interrotta se si verifica un'eccezione e non viene gestita",
   "nodes.common.errorHandle.none.title": "Nessuno",
-  "nodes.common.errorHandle.partialSucceeded.tip": "Ci sono {{num}} nodi nel processo che funzionano in modo anomalo, si prega di andare su tracing per controllare i log.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "Ci sono {{num}} nodi nel processo che funzionano in modo anomalo, si prega di andare su <tracingLink>tracing</tracingLink> per controllare i log.",
   "nodes.common.errorHandle.tip": "Strategia di gestione delle eccezioni, attivata quando un nodo rileva un'eccezione.",
   "nodes.common.errorHandle.title": "Gestione degli errori",
   "nodes.common.inputVars": "Variabili di input",
diff --git a/web/i18n/ja-JP/workflow.json b/web/i18n/ja-JP/workflow.json
index 089468053a..11cf9caa34 100644
--- a/web/i18n/ja-JP/workflow.json
+++ b/web/i18n/ja-JP/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "例外分岐",
   "nodes.common.errorHandle.none.desc": "例外発生時に処理を停止",
   "nodes.common.errorHandle.none.title": "処理なし",
-  "nodes.common.errorHandle.partialSucceeded.tip": "{{num}}個のノードで異常発生。ログはトレース画面で確認可能",
+  "nodes.common.errorHandle.partialSucceeded.tip": "{{num}}個のノードで異常発生。ログは<tracingLink>トレース</tracingLink>画面で確認可能",
   "nodes.common.errorHandle.tip": "ノード例外発生時の処理ポリシーを設定",
   "nodes.common.errorHandle.title": "例外処理",
   "nodes.common.inputVars": "入力変数",
diff --git a/web/i18n/ko-KR/workflow.json b/web/i18n/ko-KR/workflow.json
index ab602c391c..c93f417361 100644
--- a/web/i18n/ko-KR/workflow.json
+++ b/web/i18n/ko-KR/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "실패 분기",
   "nodes.common.errorHandle.none.desc": "예외가 발생하고 처리되지 않으면 노드 실행이 중지됩니다",
   "nodes.common.errorHandle.none.title": "없음",
-  "nodes.common.errorHandle.partialSucceeded.tip": "프로세스에 {{num}} 노드가 비정상적으로 실행 중입니다. 추적으로 이동하여 로그를 확인하십시오.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "프로세스에 {{num}} 노드가 비정상적으로 실행 중입니다. <tracingLink>추적</tracingLink>으로 이동하여 로그를 확인하십시오.",
   "nodes.common.errorHandle.tip": "노드에 예외가 발생할 때 트리거되는 예외 처리 전략입니다.",
   "nodes.common.errorHandle.title": "오류 처리",
   "nodes.common.inputVars": "입력 변수",
diff --git a/web/i18n/nl-NL/workflow.json b/web/i18n/nl-NL/workflow.json
index b706c42962..4a6ccd8937 100644
--- a/web/i18n/nl-NL/workflow.json
+++ b/web/i18n/nl-NL/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Fail Branch",
   "nodes.common.errorHandle.none.desc": "The node will stop running if an exception occurs and is not handled",
   "nodes.common.errorHandle.none.title": "None",
-  "nodes.common.errorHandle.partialSucceeded.tip": "There are {{num}} nodes in the process running abnormally, please go to tracing to check the logs.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "There are {{num}} nodes in the process running abnormally, please go to <tracingLink>tracing</tracingLink> to check the logs.",
   "nodes.common.errorHandle.tip": "Exception handling strategy, triggered when a node encounters an exception.",
   "nodes.common.errorHandle.title": "Error Handling",
   "nodes.common.inputVars": "Input Variables",
diff --git a/web/i18n/pl-PL/workflow.json b/web/i18n/pl-PL/workflow.json
index 1f54fe6437..57aa50dd4e 100644
--- a/web/i18n/pl-PL/workflow.json
+++ b/web/i18n/pl-PL/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Gałąź Fail (Gałąź Niepowodzenia",
   "nodes.common.errorHandle.none.desc": "Węzeł przestanie działać, jeśli wystąpi wyjątek i nie zostanie obsłużony",
   "nodes.common.errorHandle.none.title": "Żaden",
-  "nodes.common.errorHandle.partialSucceeded.tip": "W procesie {{num}} węzły działają nieprawidłowo, przejdź do śledzenia, aby sprawdzić dzienniki.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "W procesie {{num}} węzły działają nieprawidłowo, przejdź do <tracingLink>śledzenia</tracingLink>, aby sprawdzić dzienniki.",
   "nodes.common.errorHandle.tip": "Strategia obsługi wyjątków, wyzwalana, gdy węzeł napotka wyjątek.",
   "nodes.common.errorHandle.title": "Obsługa błędów",
   "nodes.common.inputVars": "Zmienne wejściowe",
diff --git a/web/i18n/pt-BR/workflow.json b/web/i18n/pt-BR/workflow.json
index ab1fea2990..a0635ad814 100644
--- a/web/i18n/pt-BR/workflow.json
+++ b/web/i18n/pt-BR/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Ramificação com falha",
   "nodes.common.errorHandle.none.desc": "O nó deixará de ser executado se ocorrer uma exceção e não for tratada",
   "nodes.common.errorHandle.none.title": "Nenhum",
-  "nodes.common.errorHandle.partialSucceeded.tip": "Existem {{num}} nós no processo em execução anormal, vá para rastreamento para verificar os logs.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "Existem {{num}} nós no processo em execução anormal, vá para <tracingLink>rastreamento</tracingLink> para verificar os logs.",
   "nodes.common.errorHandle.tip": "Estratégia de tratamento de exceções, disparada quando um nó encontra uma exceção.",
   "nodes.common.errorHandle.title": "Tratamento de erros",
   "nodes.common.inputVars": "Variáveis de entrada",
diff --git a/web/i18n/ro-RO/workflow.json b/web/i18n/ro-RO/workflow.json
index dbe331e316..58a0786894 100644
--- a/web/i18n/ro-RO/workflow.json
+++ b/web/i18n/ro-RO/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Ramură Fail",
   "nodes.common.errorHandle.none.desc": "Nodul se va opri din rulare dacă apare o excepție și nu este gestionat",
   "nodes.common.errorHandle.none.title": "Niciunul",
-  "nodes.common.errorHandle.partialSucceeded.tip": "Există {{num}} noduri în proces care rulează anormal, vă rugăm să mergeți la urmărire pentru a verifica jurnalele.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "Există {{num}} noduri în proces care rulează anormal, vă rugăm să mergeți la <tracingLink>urmărire</tracingLink> pentru a verifica jurnalele.",
   "nodes.common.errorHandle.tip": "Strategie de gestionare a excepțiilor, declanșată atunci când un nod întâlnește o excepție.",
   "nodes.common.errorHandle.title": "Gestionarea erorilor",
   "nodes.common.inputVars": "Variabile de intrare",
diff --git a/web/i18n/ru-RU/workflow.json b/web/i18n/ru-RU/workflow.json
index 48a253b31b..585c9fae93 100644
--- a/web/i18n/ru-RU/workflow.json
+++ b/web/i18n/ru-RU/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Неудачная ветвь",
   "nodes.common.errorHandle.none.desc": "Узел перестанет работать, если произойдет исключение и оно не будет обработано",
   "nodes.common.errorHandle.none.title": "Никакой",
-  "nodes.common.errorHandle.partialSucceeded.tip": "В процессе есть {{num}} узлов, которые работают ненормально, пожалуйста, перейдите к трассировке, чтобы проверить логи.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "В процессе есть {{num}} узлов, которые работают ненормально, пожалуйста, перейдите к <tracingLink>трассировке</tracingLink>, чтобы проверить логи.",
   "nodes.common.errorHandle.tip": "Стратегия обработки исключений, запускаемая при обнаружении исключения на узле.",
   "nodes.common.errorHandle.title": "Обработка ошибок",
   "nodes.common.inputVars": "Входные переменные",
diff --git a/web/i18n/sl-SI/workflow.json b/web/i18n/sl-SI/workflow.json
index f2b032cfaa..f29c211ed8 100644
--- a/web/i18n/sl-SI/workflow.json
+++ b/web/i18n/sl-SI/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Napaka veja",
   "nodes.common.errorHandle.none.desc": "Vozlišče se bo prenehalo izvajati, če pride do izjeme, ki ni obravnavana.",
   "nodes.common.errorHandle.none.title": "Noben",
-  "nodes.common.errorHandle.partialSucceeded.tip": "V procesu je {{num}} vozlišč, ki delujejo nenormalno, prosim, pojdite na sledenje, da preverite dnevnike.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "V procesu je {{num}} vozlišč, ki delujejo nenormalno, prosim, pojdite na <tracingLink>sledenje</tracingLink>, da preverite dnevnike.",
   "nodes.common.errorHandle.tip": "Strategija ravnanja z izjemo, ki se sproži, ko vozlišče naleti na izjemo.",
   "nodes.common.errorHandle.title": "Obvladovanje napak",
   "nodes.common.inputVars": "Vhodne spremenljivke",
diff --git a/web/i18n/th-TH/workflow.json b/web/i18n/th-TH/workflow.json
index fb49264d71..130e2c0269 100644
--- a/web/i18n/th-TH/workflow.json
+++ b/web/i18n/th-TH/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "สาขาล้มเหลว",
   "nodes.common.errorHandle.none.desc": "โหนดจะหยุดทํางานหากเกิดข้อยกเว้นและไม่ได้รับการจัดการ",
   "nodes.common.errorHandle.none.title": "ไม่มีใคร",
-  "nodes.common.errorHandle.partialSucceeded.tip": "มีโหนด {{num}} ในกระบวนการที่ทํางานผิดปกติ โปรดไปที่การติดตามเพื่อตรวจสอบบันทึก",
+  "nodes.common.errorHandle.partialSucceeded.tip": "มีโหนด {{num}} ในกระบวนการที่ทํางานผิดปกติ โปรดไปที่<tracingLink>การติดตาม</tracingLink>เพื่อตรวจสอบบันทึก",
   "nodes.common.errorHandle.tip": "กลยุทธ์การจัดการข้อยกเว้น ทริกเกอร์เมื่อโหนดพบข้อยกเว้น",
   "nodes.common.errorHandle.title": "การจัดการข้อผิดพลาด",
   "nodes.common.inputVars": "ตัวแปรอินพุต",
diff --git a/web/i18n/tr-TR/workflow.json b/web/i18n/tr-TR/workflow.json
index 6b87b4e1e8..c6893cfb84 100644
--- a/web/i18n/tr-TR/workflow.json
+++ b/web/i18n/tr-TR/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Başarısız Dal",
   "nodes.common.errorHandle.none.desc": "Bir özel durum oluşursa ve işlenmezse düğüm çalışmayı durdurur",
   "nodes.common.errorHandle.none.title": "Hiç kimse",
-  "nodes.common.errorHandle.partialSucceeded.tip": "İşlemde anormal şekilde çalışan {{num}} düğümleri var, lütfen günlükleri kontrol etmek için izlemeye gidin.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "İşlemde anormal şekilde çalışan {{num}} düğümleri var, lütfen günlükleri kontrol etmek için <tracingLink>izlemeye</tracingLink> gidin.",
   "nodes.common.errorHandle.tip": "Bir düğüm bir özel durumla karşılaştığında tetiklenen özel durum işleme stratejisi.",
   "nodes.common.errorHandle.title": "Hata İşleme",
   "nodes.common.inputVars": "Giriş Değişkenleri",
diff --git a/web/i18n/uk-UA/workflow.json b/web/i18n/uk-UA/workflow.json
index 70d5378d22..90ee940ae7 100644
--- a/web/i18n/uk-UA/workflow.json
+++ b/web/i18n/uk-UA/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Гілка невдачі",
   "nodes.common.errorHandle.none.desc": "Вузол припинить роботу, якщо виникне виняток і не буде оброблений",
   "nodes.common.errorHandle.none.title": "Ніхто",
-  "nodes.common.errorHandle.partialSucceeded.tip": "У процесі є вузли {{num}}, які працюють ненормально, будь ласка, перейдіть до трасування, щоб перевірити логи.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "У процесі є вузли {{num}}, які працюють ненормально, будь ласка, перейдіть до <tracingLink>трасування</tracingLink>, щоб перевірити логи.",
   "nodes.common.errorHandle.tip": "Стратегія обробки винятків, що спрацьовує, коли вузол стикається з винятком.",
   "nodes.common.errorHandle.title": "Обробка помилок",
   "nodes.common.inputVars": "Вхідні змінні",
diff --git a/web/i18n/vi-VN/workflow.json b/web/i18n/vi-VN/workflow.json
index 9bf9b4d61c..6ba72b8b3d 100644
--- a/web/i18n/vi-VN/workflow.json
+++ b/web/i18n/vi-VN/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "Chi nhánh thất bại",
   "nodes.common.errorHandle.none.desc": "Nút sẽ ngừng chạy nếu xảy ra ngoại lệ và không được xử lý",
   "nodes.common.errorHandle.none.title": "Không ai",
-  "nodes.common.errorHandle.partialSucceeded.tip": "Có {{num}} node trong quá trình chạy bất thường, vui lòng truy tìm để kiểm tra nhật ký.",
+  "nodes.common.errorHandle.partialSucceeded.tip": "Có {{num}} node trong quá trình chạy bất thường, vui lòng vào <tracingLink>truy tìm</tracingLink> để kiểm tra nhật ký.",
   "nodes.common.errorHandle.tip": "Chiến lược xử lý ngoại lệ, được kích hoạt khi một nút gặp phải ngoại lệ.",
   "nodes.common.errorHandle.title": "Xử lý lỗi",
   "nodes.common.inputVars": "Biến đầu vào",
diff --git a/web/i18n/zh-Hans/workflow.json b/web/i18n/zh-Hans/workflow.json
index 6bb832f925..c02cad5145 100644
--- a/web/i18n/zh-Hans/workflow.json
+++ b/web/i18n/zh-Hans/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "异常分支",
   "nodes.common.errorHandle.none.desc": "当发生异常且未处理时，节点将停止运行",
   "nodes.common.errorHandle.none.title": "无",
-  "nodes.common.errorHandle.partialSucceeded.tip": "流程中有 {{num}} 个节点运行异常，请前往追踪查看日志。",
+  "nodes.common.errorHandle.partialSucceeded.tip": "流程中有 {{num}} 个节点运行异常，请前往<tracingLink>追踪</tracingLink>查看日志。",
   "nodes.common.errorHandle.tip": "配置异常处理策略，当节点发生异常时触发。",
   "nodes.common.errorHandle.title": "异常处理",
   "nodes.common.inputVars": "输入变量",
diff --git a/web/i18n/zh-Hant/workflow.json b/web/i18n/zh-Hant/workflow.json
index 865d8b66ae..5c7c9cfc95 100644
--- a/web/i18n/zh-Hant/workflow.json
+++ b/web/i18n/zh-Hant/workflow.json
@@ -433,7 +433,7 @@
   "nodes.common.errorHandle.failBranch.title": "失敗分支",
   "nodes.common.errorHandle.none.desc": "如果發生異常且未得到處理，節點將停止運行",
   "nodes.common.errorHandle.none.title": "沒有",
-  "nodes.common.errorHandle.partialSucceeded.tip": "進程中有 {{num}} 個節點運行異常，請前往 tracing 查看日誌。",
+  "nodes.common.errorHandle.partialSucceeded.tip": "進程中有 {{num}} 個節點運行異常，請前往<tracingLink>tracing</tracingLink>查看日誌。",
   "nodes.common.errorHandle.tip": "異常處理策略，當節點遇到異常時觸發。",
   "nodes.common.errorHandle.title": "錯誤處理",
   "nodes.common.inputVars": "輸入變數",
diff --git a/web/package.json b/web/package.json
index 3ce16d8fb0..8bc31dce31 100644
--- a/web/package.json
+++ b/web/package.json
@@ -56,7 +56,6 @@
     "@amplitude/analytics-browser": "catalog:",
     "@amplitude/plugin-session-replay-browser": "catalog:",
     "@base-ui/react": "catalog:",
-    "@date-fns/tz": "catalog:",
     "@emoji-mart/data": "catalog:",
     "@floating-ui/react": "catalog:",
     "@formatjs/intl-localematcher": "catalog:",
@@ -91,7 +90,6 @@
     "cmdk": "catalog:",
     "copy-to-clipboard": "catalog:",
     "cron-parser": "catalog:",
-    "date-fns": "catalog:",
     "dayjs": "catalog:",
     "decimal.js": "catalog:",
     "dompurify": "catalog:",

From 9a47bb2f80946a14838cc4906379860713c4836b Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 14 Apr 2026 16:16:19 +0800
Subject: [PATCH 05/44] fix: doc modal hidden by config modal (#35157)

---
 web/app/components/plugins/readme-panel/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/app/components/plugins/readme-panel/index.tsx b/web/app/components/plugins/readme-panel/index.tsx
index 516ef63415..182da360c4 100644
--- a/web/app/components/plugins/readme-panel/index.tsx
+++ b/web/app/components/plugins/readme-panel/index.tsx
@@ -87,7 +87,7 @@ const ReadmePanel: FC = () => {
 
   const portalContent = showType === ReadmeShowType.drawer
     ? (
-        <div className="fixed inset-0 z-999 flex justify-start" onClick={onClose}>
+        <div className="fixed inset-0 z-1002 flex justify-start" onClick={onClose}>
           <div
             className={cn(
               'pointer-events-auto mb-2 ml-2 mr-2 mt-16 w-[600px] max-w-[600px] justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0 shadow-xl',
@@ -101,7 +101,7 @@ const ReadmePanel: FC = () => {
         </div>
       )
     : (
-        <div className="fixed inset-0 z-999 flex items-center justify-center p-2" onClick={onClose}>
+        <div className="fixed inset-0 z-1002 flex items-center justify-center p-2" onClick={onClose}>
           <div
             className={cn(
               'pointer-events-auto relative h-[calc(100vh-16px)] w-full max-w-[800px] rounded-2xl bg-components-panel-bg p-0 shadow-xl',

From bd7a9b5fcfd6fe922ce8c381a39c39f3b63cee11 Mon Sep 17 00:00:00 2001
From: wdeveloper16 <wdeveloper16@protonmail.com>
Date: Tue, 14 Apr 2026 11:18:30 +0200
Subject: [PATCH 06/44] refactor: replace bare dict with dict[str, Any] in
 model provider service and core modules (#35122)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
---
 .../agent/output_parser/cot_output_parser.py  |  4 +--
 api/core/schemas/resolver.py                  |  2 +-
 api/services/model_provider_service.py        | 27 +++++++++++++------
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/api/core/agent/output_parser/cot_output_parser.py b/api/core/agent/output_parser/cot_output_parser.py
index 46c1f1230d..8cccd2be6d 100644
--- a/api/core/agent/output_parser/cot_output_parser.py
+++ b/api/core/agent/output_parser/cot_output_parser.py
@@ -1,7 +1,7 @@
 import json
 import re
 from collections.abc import Generator
-from typing import Union
+from typing import Any, Union
 
 from graphon.model_runtime.entities.llm_entities import LLMResultChunk
 
@@ -11,7 +11,7 @@ from core.agent.entities import AgentScratchpadUnit
 class CotAgentOutputParser:
     @classmethod
     def handle_react_stream_output(
-        cls, llm_response: Generator[LLMResultChunk, None, None], usage_dict: dict
+        cls, llm_response: Generator[LLMResultChunk, None, None], usage_dict: dict[str, Any]
     ) -> Generator[Union[str, AgentScratchpadUnit.Action], None, None]:
         def parse_action(action) -> Union[str, AgentScratchpadUnit.Action]:
             action_name = None
diff --git a/api/core/schemas/resolver.py b/api/core/schemas/resolver.py
index 6e26664ac2..e267c1abd9 100644
--- a/api/core/schemas/resolver.py
+++ b/api/core/schemas/resolver.py
@@ -254,7 +254,7 @@ def resolve_dify_schema_refs(
     return resolver.resolve(schema)
 
 
-def _remove_metadata_fields(schema: dict) -> dict:
+def _remove_metadata_fields(schema: dict[str, Any]) -> dict[str, Any]:
     """
     Remove metadata fields from schema that shouldn't be included in resolved output
 
diff --git a/api/services/model_provider_service.py b/api/services/model_provider_service.py
index 3f37c9b176..bf208c9bc7 100644
--- a/api/services/model_provider_service.py
+++ b/api/services/model_provider_service.py
@@ -1,4 +1,5 @@
 import logging
+from typing import Any
 
 from graphon.model_runtime.entities.model_entities import ModelType, ParameterRule
 
@@ -168,7 +169,9 @@ class ModelProviderService:
             model_name=model,
         )
 
-    def get_provider_credential(self, tenant_id: str, provider: str, credential_id: str | None = None) -> dict | None:
+    def get_provider_credential(
+        self, tenant_id: str, provider: str, credential_id: str | None = None
+    ) -> dict[str, Any] | None:
         """
         get provider credentials.
 
@@ -180,7 +183,7 @@ class ModelProviderService:
         provider_configuration = self._get_provider_configuration(tenant_id, provider)
         return provider_configuration.get_provider_credential(credential_id=credential_id)
 
-    def validate_provider_credentials(self, tenant_id: str, provider: str, credentials: dict):
+    def validate_provider_credentials(self, tenant_id: str, provider: str, credentials: dict[str, Any]):
         """
         validate provider credentials before saving.
 
@@ -192,7 +195,7 @@ class ModelProviderService:
         provider_configuration.validate_provider_credentials(credentials)
 
     def create_provider_credential(
-        self, tenant_id: str, provider: str, credentials: dict, credential_name: str | None
+        self, tenant_id: str, provider: str, credentials: dict[str, Any], credential_name: str | None
     ) -> None:
         """
         Create and save new provider credentials.
@@ -210,7 +213,7 @@ class ModelProviderService:
         self,
         tenant_id: str,
         provider: str,
-        credentials: dict,
+        credentials: dict[str, Any],
         credential_id: str,
         credential_name: str | None,
     ) -> None:
@@ -254,7 +257,7 @@ class ModelProviderService:
 
     def get_model_credential(
         self, tenant_id: str, provider: str, model_type: str, model: str, credential_id: str | None
-    ) -> dict | None:
+    ) -> dict[str, Any] | None:
         """
         Retrieve model-specific credentials.
 
@@ -270,7 +273,9 @@ class ModelProviderService:
             model_type=ModelType.value_of(model_type), model=model, credential_id=credential_id
         )
 
-    def validate_model_credentials(self, tenant_id: str, provider: str, model_type: str, model: str, credentials: dict):
+    def validate_model_credentials(
+        self, tenant_id: str, provider: str, model_type: str, model: str, credentials: dict[str, Any]
+    ):
         """
         validate model credentials.
 
@@ -287,7 +292,13 @@ class ModelProviderService:
         )
 
     def create_model_credential(
-        self, tenant_id: str, provider: str, model_type: str, model: str, credentials: dict, credential_name: str | None
+        self,
+        tenant_id: str,
+        provider: str,
+        model_type: str,
+        model: str,
+        credentials: dict[str, Any],
+        credential_name: str | None,
     ) -> None:
         """
         create and save model credentials.
@@ -314,7 +325,7 @@ class ModelProviderService:
         provider: str,
         model_type: str,
         model: str,
-        credentials: dict,
+        credentials: dict[str, Any],
         credential_id: str,
         credential_name: str | None,
     ) -> None:

From 736880e046581ca5b0b65441cee1c1e96cc5caac Mon Sep 17 00:00:00 2001
From: Blackoutta <37723456+Blackoutta@users.noreply.github.com>
Date: Tue, 14 Apr 2026 17:31:41 +0800
Subject: [PATCH 07/44] feat: support configurable redis key prefix (#35139)

---
 api/.env.example                              |   3 +
 api/configs/middleware/cache/redis_config.py  |   5 +
 api/extensions/ext_celery.py                  |  24 +-
 api/extensions/ext_redis.py                   | 217 ++++++++++++------
 api/extensions/redis_names.py                 |  32 +++
 api/libs/broadcast_channel/redis/channel.py   |   6 +-
 .../redis/sharded_channel.py                  |   6 +-
 .../redis/streams_channel.py                  |   3 +-
 api/libs/db_migration_lock.py                 |   5 +-
 api/tests/integration_tests/.env.example      |   1 +
 .../unit_tests/configs/test_dify_config.py    |  35 +++
 .../unit_tests/extensions/test_celery_ssl.py  |  87 +++++++
 .../extensions/test_pubsub_channel.py         |   2 +
 api/tests/unit_tests/extensions/test_redis.py | 101 +++++++-
 .../redis/test_channel_unit_tests.py          |  44 ++++
 .../redis/test_streams_channel_unit_tests.py  |  20 ++
 docker/.env.example                           |   3 +
 docker/README.md                              |   1 +
 docker/docker-compose.yaml                    |   1 +
 19 files changed, 522 insertions(+), 74 deletions(-)
 create mode 100644 api/extensions/redis_names.py

diff --git a/api/.env.example b/api/.env.example
index a04a18944a..beb820e797 100644
--- a/api/.env.example
+++ b/api/.env.example
@@ -57,6 +57,9 @@ REDIS_SSL_CERTFILE=
 REDIS_SSL_KEYFILE=
 # Path to client private key file for SSL authentication
 REDIS_DB=0
+# Optional global prefix for Redis keys, topics, streams, and Celery Redis transport artifacts.
+# Leave empty to preserve current unprefixed behavior.
+REDIS_KEY_PREFIX=
 
 # redis Sentinel configuration.
 REDIS_USE_SENTINEL=false
diff --git a/api/configs/middleware/cache/redis_config.py b/api/configs/middleware/cache/redis_config.py
index b49275758a..2def0a0d4e 100644
--- a/api/configs/middleware/cache/redis_config.py
+++ b/api/configs/middleware/cache/redis_config.py
@@ -32,6 +32,11 @@ class RedisConfig(BaseSettings):
         default=0,
     )
 
+    REDIS_KEY_PREFIX: str = Field(
+        description="Optional global prefix for Redis keys, topics, and transport artifacts",
+        default="",
+    )
+
     REDIS_USE_SSL: bool = Field(
         description="Enable SSL/TLS for the Redis connection",
         default=False,
diff --git a/api/extensions/ext_celery.py b/api/extensions/ext_celery.py
index 86b0550187..340f514fcc 100644
--- a/api/extensions/ext_celery.py
+++ b/api/extensions/ext_celery.py
@@ -9,6 +9,7 @@ from typing_extensions import TypedDict
 
 from configs import dify_config
 from dify_app import DifyApp
+from extensions.redis_names import normalize_redis_key_prefix
 
 
 class _CelerySentinelKwargsDict(TypedDict):
@@ -16,9 +17,10 @@ class _CelerySentinelKwargsDict(TypedDict):
     password: str | None
 
 
-class CelerySentinelTransportDict(TypedDict):
+class CelerySentinelTransportDict(TypedDict, total=False):
     master_name: str | None
     sentinel_kwargs: _CelerySentinelKwargsDict
+    global_keyprefix: str
 
 
 class CelerySSLOptionsDict(TypedDict):
@@ -61,15 +63,31 @@ def get_celery_ssl_options() -> CelerySSLOptionsDict | None:
 
 def get_celery_broker_transport_options() -> CelerySentinelTransportDict | dict[str, Any]:
     """Get broker transport options (e.g. Redis Sentinel) for Celery connections."""
+    transport_options: CelerySentinelTransportDict | dict[str, Any]
     if dify_config.CELERY_USE_SENTINEL:
-        return CelerySentinelTransportDict(
+        transport_options = CelerySentinelTransportDict(
             master_name=dify_config.CELERY_SENTINEL_MASTER_NAME,
             sentinel_kwargs=_CelerySentinelKwargsDict(
                 socket_timeout=dify_config.CELERY_SENTINEL_SOCKET_TIMEOUT,
                 password=dify_config.CELERY_SENTINEL_PASSWORD,
             ),
         )
-    return {}
+    else:
+        transport_options = {}
+
+    global_keyprefix = get_celery_redis_global_keyprefix()
+    if global_keyprefix:
+        transport_options["global_keyprefix"] = global_keyprefix
+
+    return transport_options
+
+
+def get_celery_redis_global_keyprefix() -> str | None:
+    """Return the Redis transport prefix for Celery when namespace isolation is enabled."""
+    normalized_prefix = normalize_redis_key_prefix(dify_config.REDIS_KEY_PREFIX)
+    if not normalized_prefix:
+        return None
+    return f"{normalized_prefix}:"
 
 
 def init_app(app: DifyApp) -> Celery:
diff --git a/api/extensions/ext_redis.py b/api/extensions/ext_redis.py
index 20f05b8b9e..9f7f73765e 100644
--- a/api/extensions/ext_redis.py
+++ b/api/extensions/ext_redis.py
@@ -3,7 +3,7 @@ import logging
 import ssl
 from collections.abc import Callable
 from datetime import timedelta
-from typing import TYPE_CHECKING, Any, Union
+from typing import Any, Union, cast
 
 import redis
 from redis import RedisError
@@ -18,17 +18,26 @@ from typing_extensions import TypedDict
 
 from configs import dify_config
 from dify_app import DifyApp
+from extensions.redis_names import (
+    normalize_redis_key_prefix,
+    serialize_redis_name,
+    serialize_redis_name_arg,
+    serialize_redis_name_args,
+)
 from libs.broadcast_channel.channel import BroadcastChannel as BroadcastChannelProtocol
 from libs.broadcast_channel.redis.channel import BroadcastChannel as RedisBroadcastChannel
 from libs.broadcast_channel.redis.sharded_channel import ShardedRedisBroadcastChannel
 from libs.broadcast_channel.redis.streams_channel import StreamsBroadcastChannel
 
-if TYPE_CHECKING:
-    from redis.lock import Lock
-
 logger = logging.getLogger(__name__)
 
 
+_normalize_redis_key_prefix = normalize_redis_key_prefix
+_serialize_redis_name = serialize_redis_name
+_serialize_redis_name_arg = serialize_redis_name_arg
+_serialize_redis_name_args = serialize_redis_name_args
+
+
 class RedisClientWrapper:
     """
     A wrapper class for the Redis client that addresses the issue where the global
@@ -59,68 +68,148 @@ class RedisClientWrapper:
         if self._client is None:
             self._client = client
 
-    if TYPE_CHECKING:
-        # Type hints for IDE support and static analysis
-        # These are not executed at runtime but provide type information
-        def get(self, name: str | bytes) -> Any: ...
-
-        def set(
-            self,
-            name: str | bytes,
-            value: Any,
-            ex: int | None = None,
-            px: int | None = None,
-            nx: bool = False,
-            xx: bool = False,
-            keepttl: bool = False,
-            get: bool = False,
-            exat: int | None = None,
-            pxat: int | None = None,
-        ) -> Any: ...
-
-        def setex(self, name: str | bytes, time: int | timedelta, value: Any) -> Any: ...
-        def setnx(self, name: str | bytes, value: Any) -> Any: ...
-        def delete(self, *names: str | bytes) -> Any: ...
-        def incr(self, name: str | bytes, amount: int = 1) -> Any: ...
-        def expire(
-            self,
-            name: str | bytes,
-            time: int | timedelta,
-            nx: bool = False,
-            xx: bool = False,
-            gt: bool = False,
-            lt: bool = False,
-        ) -> Any: ...
-        def lock(
-            self,
-            name: str,
-            timeout: float | None = None,
-            sleep: float = 0.1,
-            blocking: bool = True,
-            blocking_timeout: float | None = None,
-            thread_local: bool = True,
-        ) -> Lock: ...
-        def zadd(
-            self,
-            name: str | bytes,
-            mapping: dict[str | bytes | int | float, float | int | str | bytes],
-            nx: bool = False,
-            xx: bool = False,
-            ch: bool = False,
-            incr: bool = False,
-            gt: bool = False,
-            lt: bool = False,
-        ) -> Any: ...
-        def zremrangebyscore(self, name: str | bytes, min: float | str, max: float | str) -> Any: ...
-        def zcard(self, name: str | bytes) -> Any: ...
-        def getdel(self, name: str | bytes) -> Any: ...
-        def pubsub(self) -> PubSub: ...
-        def pipeline(self, transaction: bool = True, shard_hint: str | None = None) -> Any: ...
-
-    def __getattr__(self, item: str) -> Any:
+    def _require_client(self) -> redis.Redis | RedisCluster:
         if self._client is None:
             raise RuntimeError("Redis client is not initialized. Call init_app first.")
-        return getattr(self._client, item)
+        return self._client
+
+    def _get_prefix(self) -> str:
+        return dify_config.REDIS_KEY_PREFIX
+
+    def get(self, name: str | bytes) -> Any:
+        return self._require_client().get(_serialize_redis_name_arg(name, self._get_prefix()))
+
+    def set(
+        self,
+        name: str | bytes,
+        value: Any,
+        ex: int | None = None,
+        px: int | None = None,
+        nx: bool = False,
+        xx: bool = False,
+        keepttl: bool = False,
+        get: bool = False,
+        exat: int | None = None,
+        pxat: int | None = None,
+    ) -> Any:
+        return self._require_client().set(
+            _serialize_redis_name_arg(name, self._get_prefix()),
+            value,
+            ex=ex,
+            px=px,
+            nx=nx,
+            xx=xx,
+            keepttl=keepttl,
+            get=get,
+            exat=exat,
+            pxat=pxat,
+        )
+
+    def setex(self, name: str | bytes, time: int | timedelta, value: Any) -> Any:
+        return self._require_client().setex(_serialize_redis_name_arg(name, self._get_prefix()), time, value)
+
+    def setnx(self, name: str | bytes, value: Any) -> Any:
+        return self._require_client().setnx(_serialize_redis_name_arg(name, self._get_prefix()), value)
+
+    def delete(self, *names: str | bytes) -> Any:
+        return self._require_client().delete(*_serialize_redis_name_args(names, self._get_prefix()))
+
+    def incr(self, name: str | bytes, amount: int = 1) -> Any:
+        return self._require_client().incr(_serialize_redis_name_arg(name, self._get_prefix()), amount)
+
+    def expire(
+        self,
+        name: str | bytes,
+        time: int | timedelta,
+        nx: bool = False,
+        xx: bool = False,
+        gt: bool = False,
+        lt: bool = False,
+    ) -> Any:
+        return self._require_client().expire(
+            _serialize_redis_name_arg(name, self._get_prefix()),
+            time,
+            nx=nx,
+            xx=xx,
+            gt=gt,
+            lt=lt,
+        )
+
+    def exists(self, *names: str | bytes) -> Any:
+        return self._require_client().exists(*_serialize_redis_name_args(names, self._get_prefix()))
+
+    def ttl(self, name: str | bytes) -> Any:
+        return self._require_client().ttl(_serialize_redis_name_arg(name, self._get_prefix()))
+
+    def getdel(self, name: str | bytes) -> Any:
+        return self._require_client().getdel(_serialize_redis_name_arg(name, self._get_prefix()))
+
+    def lock(
+        self,
+        name: str,
+        timeout: float | None = None,
+        sleep: float = 0.1,
+        blocking: bool = True,
+        blocking_timeout: float | None = None,
+        thread_local: bool = True,
+    ) -> Any:
+        return self._require_client().lock(
+            _serialize_redis_name(name, self._get_prefix()),
+            timeout=timeout,
+            sleep=sleep,
+            blocking=blocking,
+            blocking_timeout=blocking_timeout,
+            thread_local=thread_local,
+        )
+
+    def hset(self, name: str | bytes, *args: Any, **kwargs: Any) -> Any:
+        return self._require_client().hset(_serialize_redis_name_arg(name, self._get_prefix()), *args, **kwargs)
+
+    def hgetall(self, name: str | bytes) -> Any:
+        return self._require_client().hgetall(_serialize_redis_name_arg(name, self._get_prefix()))
+
+    def hdel(self, name: str | bytes, *keys: str | bytes) -> Any:
+        return self._require_client().hdel(_serialize_redis_name_arg(name, self._get_prefix()), *keys)
+
+    def hlen(self, name: str | bytes) -> Any:
+        return self._require_client().hlen(_serialize_redis_name_arg(name, self._get_prefix()))
+
+    def zadd(
+        self,
+        name: str | bytes,
+        mapping: dict[str | bytes | int | float, float | int | str | bytes],
+        nx: bool = False,
+        xx: bool = False,
+        ch: bool = False,
+        incr: bool = False,
+        gt: bool = False,
+        lt: bool = False,
+    ) -> Any:
+        return self._require_client().zadd(
+            _serialize_redis_name_arg(name, self._get_prefix()),
+            cast(Any, mapping),
+            nx=nx,
+            xx=xx,
+            ch=ch,
+            incr=incr,
+            gt=gt,
+            lt=lt,
+        )
+
+    def zremrangebyscore(self, name: str | bytes, min: float | str, max: float | str) -> Any:
+        return self._require_client().zremrangebyscore(_serialize_redis_name_arg(name, self._get_prefix()), min, max)
+
+    def zcard(self, name: str | bytes) -> Any:
+        return self._require_client().zcard(_serialize_redis_name_arg(name, self._get_prefix()))
+
+    def pubsub(self) -> PubSub:
+        return self._require_client().pubsub()
+
+    def pipeline(self, transaction: bool = True, shard_hint: str | None = None) -> Any:
+        return self._require_client().pipeline(transaction=transaction, shard_hint=shard_hint)
+
+    def __getattr__(self, item: str) -> Any:
+        return getattr(self._require_client(), item)
 
 
 redis_client: RedisClientWrapper = RedisClientWrapper()
diff --git a/api/extensions/redis_names.py b/api/extensions/redis_names.py
new file mode 100644
index 0000000000..9e63416daf
--- /dev/null
+++ b/api/extensions/redis_names.py
@@ -0,0 +1,32 @@
+from configs import dify_config
+
+
+def normalize_redis_key_prefix(prefix: str | None) -> str:
+    """Normalize the configured Redis key prefix for consistent runtime use."""
+    if prefix is None:
+        return ""
+    return prefix.strip()
+
+
+def get_redis_key_prefix() -> str:
+    """Read and normalize the current Redis key prefix from config."""
+    return normalize_redis_key_prefix(dify_config.REDIS_KEY_PREFIX)
+
+
+def serialize_redis_name(name: str, prefix: str | None = None) -> str:
+    """Convert a logical Redis name into the physical name used in Redis."""
+    normalized_prefix = get_redis_key_prefix() if prefix is None else normalize_redis_key_prefix(prefix)
+    if not normalized_prefix:
+        return name
+    return f"{normalized_prefix}:{name}"
+
+
+def serialize_redis_name_arg(name: str | bytes, prefix: str | None = None) -> str | bytes:
+    """Prefix string Redis names while preserving bytes inputs unchanged."""
+    if isinstance(name, bytes):
+        return name
+    return serialize_redis_name(name, prefix)
+
+
+def serialize_redis_name_args(names: tuple[str | bytes, ...], prefix: str | None = None) -> tuple[str | bytes, ...]:
+    return tuple(serialize_redis_name_arg(name, prefix) for name in names)
diff --git a/api/libs/broadcast_channel/redis/channel.py b/api/libs/broadcast_channel/redis/channel.py
index 36aa1cd3e8..b76a23eb3c 100644
--- a/api/libs/broadcast_channel/redis/channel.py
+++ b/api/libs/broadcast_channel/redis/channel.py
@@ -2,6 +2,7 @@ from __future__ import annotations
 
 from typing import Any
 
+from extensions.redis_names import serialize_redis_name
 from libs.broadcast_channel.channel import Producer, Subscriber, Subscription
 from redis import Redis, RedisCluster
 
@@ -32,12 +33,13 @@ class Topic:
     def __init__(self, redis_client: Redis | RedisCluster, topic: str):
         self._client = redis_client
         self._topic = topic
+        self._redis_topic = serialize_redis_name(topic)
 
     def as_producer(self) -> Producer:
         return self
 
     def publish(self, payload: bytes) -> None:
-        self._client.publish(self._topic, payload)
+        self._client.publish(self._redis_topic, payload)
 
     def as_subscriber(self) -> Subscriber:
         return self
@@ -46,7 +48,7 @@ class Topic:
         return _RedisSubscription(
             client=self._client,
             pubsub=self._client.pubsub(),
-            topic=self._topic,
+            topic=self._redis_topic,
         )
 
 
diff --git a/api/libs/broadcast_channel/redis/sharded_channel.py b/api/libs/broadcast_channel/redis/sharded_channel.py
index dddc92d099..919d8d622e 100644
--- a/api/libs/broadcast_channel/redis/sharded_channel.py
+++ b/api/libs/broadcast_channel/redis/sharded_channel.py
@@ -2,6 +2,7 @@ from __future__ import annotations
 
 from typing import Any
 
+from extensions.redis_names import serialize_redis_name
 from libs.broadcast_channel.channel import Producer, Subscriber, Subscription
 from redis import Redis, RedisCluster
 
@@ -30,12 +31,13 @@ class ShardedTopic:
     def __init__(self, redis_client: Redis | RedisCluster, topic: str):
         self._client = redis_client
         self._topic = topic
+        self._redis_topic = serialize_redis_name(topic)
 
     def as_producer(self) -> Producer:
         return self
 
     def publish(self, payload: bytes) -> None:
-        self._client.spublish(self._topic, payload)  # type: ignore[attr-defined,union-attr]
+        self._client.spublish(self._redis_topic, payload)  # type: ignore[attr-defined,union-attr]
 
     def as_subscriber(self) -> Subscriber:
         return self
@@ -44,7 +46,7 @@ class ShardedTopic:
         return _RedisShardedSubscription(
             client=self._client,
             pubsub=self._client.pubsub(),
-            topic=self._topic,
+            topic=self._redis_topic,
         )
 
 
diff --git a/api/libs/broadcast_channel/redis/streams_channel.py b/api/libs/broadcast_channel/redis/streams_channel.py
index 983f785027..55ff6cd4f9 100644
--- a/api/libs/broadcast_channel/redis/streams_channel.py
+++ b/api/libs/broadcast_channel/redis/streams_channel.py
@@ -6,6 +6,7 @@ import threading
 from collections.abc import Iterator
 from typing import Self
 
+from extensions.redis_names import serialize_redis_name
 from libs.broadcast_channel.channel import Producer, Subscriber, Subscription
 from libs.broadcast_channel.exc import SubscriptionClosedError
 from redis import Redis, RedisCluster
@@ -35,7 +36,7 @@ class StreamsTopic:
     def __init__(self, redis_client: Redis | RedisCluster, topic: str, *, retention_seconds: int = 600):
         self._client = redis_client
         self._topic = topic
-        self._key = f"stream:{topic}"
+        self._key = serialize_redis_name(f"stream:{topic}")
         self._retention_seconds = retention_seconds
         self.max_length = 5000
 
diff --git a/api/libs/db_migration_lock.py b/api/libs/db_migration_lock.py
index ca8956e397..b5fe38342a 100644
--- a/api/libs/db_migration_lock.py
+++ b/api/libs/db_migration_lock.py
@@ -103,7 +103,10 @@ class DbMigrationAutoRenewLock:
                 timeout=self._ttl_seconds,
                 thread_local=False,
             )
-        acquired = bool(self._lock.acquire(*args, **kwargs))
+        lock = self._lock
+        if lock is None:
+            raise RuntimeError("Redis lock initialization failed.")
+        acquired = bool(lock.acquire(*args, **kwargs))
         self._acquired = acquired
         if acquired:
             self._start_heartbeat()
diff --git a/api/tests/integration_tests/.env.example b/api/tests/integration_tests/.env.example
index f84d39aeb5..c07ab6d6bf 100644
--- a/api/tests/integration_tests/.env.example
+++ b/api/tests/integration_tests/.env.example
@@ -33,6 +33,7 @@ REDIS_USERNAME=
 REDIS_PASSWORD=difyai123456
 REDIS_USE_SSL=false
 REDIS_DB=0
+REDIS_KEY_PREFIX=
 
 # PostgreSQL database configuration
 DB_USERNAME=postgres
diff --git a/api/tests/unit_tests/configs/test_dify_config.py b/api/tests/unit_tests/configs/test_dify_config.py
index 3089750c3e..bad246a4bb 100644
--- a/api/tests/unit_tests/configs/test_dify_config.py
+++ b/api/tests/unit_tests/configs/test_dify_config.py
@@ -236,6 +236,41 @@ def test_pubsub_redis_url_required_when_default_unavailable(monkeypatch: pytest.
         _ = DifyConfig().normalized_pubsub_redis_url
 
 
+def test_dify_config_exposes_redis_key_prefix_default(monkeypatch: pytest.MonkeyPatch):
+    os.environ.clear()
+
+    monkeypatch.setenv("CONSOLE_API_URL", "https://example.com")
+    monkeypatch.setenv("CONSOLE_WEB_URL", "https://example.com")
+    monkeypatch.setenv("DB_TYPE", "postgresql")
+    monkeypatch.setenv("DB_USERNAME", "postgres")
+    monkeypatch.setenv("DB_PASSWORD", "postgres")
+    monkeypatch.setenv("DB_HOST", "localhost")
+    monkeypatch.setenv("DB_PORT", "5432")
+    monkeypatch.setenv("DB_DATABASE", "dify")
+
+    config = DifyConfig(_env_file=None)
+
+    assert config.REDIS_KEY_PREFIX == ""
+
+
+def test_dify_config_reads_redis_key_prefix_from_env(monkeypatch: pytest.MonkeyPatch):
+    os.environ.clear()
+
+    monkeypatch.setenv("CONSOLE_API_URL", "https://example.com")
+    monkeypatch.setenv("CONSOLE_WEB_URL", "https://example.com")
+    monkeypatch.setenv("DB_TYPE", "postgresql")
+    monkeypatch.setenv("DB_USERNAME", "postgres")
+    monkeypatch.setenv("DB_PASSWORD", "postgres")
+    monkeypatch.setenv("DB_HOST", "localhost")
+    monkeypatch.setenv("DB_PORT", "5432")
+    monkeypatch.setenv("DB_DATABASE", "dify")
+    monkeypatch.setenv("REDIS_KEY_PREFIX", "enterprise-a")
+
+    config = DifyConfig(_env_file=None)
+
+    assert config.REDIS_KEY_PREFIX == "enterprise-a"
+
+
 @pytest.mark.parametrize(
     ("broker_url", "expected_host", "expected_port", "expected_username", "expected_password", "expected_db"),
     [
diff --git a/api/tests/unit_tests/extensions/test_celery_ssl.py b/api/tests/unit_tests/extensions/test_celery_ssl.py
index 81687ce5f8..366e45d86d 100644
--- a/api/tests/unit_tests/extensions/test_celery_ssl.py
+++ b/api/tests/unit_tests/extensions/test_celery_ssl.py
@@ -7,6 +7,47 @@ from unittest.mock import MagicMock, patch
 class TestCelerySSLConfiguration:
     """Test suite for Celery SSL configuration."""
 
+    def test_get_celery_broker_transport_options_includes_global_keyprefix_for_redis(self):
+        mock_config = MagicMock()
+        mock_config.CELERY_USE_SENTINEL = False
+        mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+
+        with patch("extensions.ext_celery.dify_config", mock_config):
+            from extensions.ext_celery import get_celery_broker_transport_options
+
+            result = get_celery_broker_transport_options()
+
+        assert result["global_keyprefix"] == "enterprise-a:"
+
+    def test_get_celery_broker_transport_options_omits_global_keyprefix_when_prefix_empty(self):
+        mock_config = MagicMock()
+        mock_config.CELERY_USE_SENTINEL = False
+        mock_config.REDIS_KEY_PREFIX = "   "
+
+        with patch("extensions.ext_celery.dify_config", mock_config):
+            from extensions.ext_celery import get_celery_broker_transport_options
+
+            result = get_celery_broker_transport_options()
+
+        assert "global_keyprefix" not in result
+
+    def test_get_celery_broker_transport_options_keeps_sentinel_and_adds_global_keyprefix(self):
+        mock_config = MagicMock()
+        mock_config.CELERY_USE_SENTINEL = True
+        mock_config.CELERY_SENTINEL_MASTER_NAME = "mymaster"
+        mock_config.CELERY_SENTINEL_SOCKET_TIMEOUT = 0.1
+        mock_config.CELERY_SENTINEL_PASSWORD = "secret"
+        mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+
+        with patch("extensions.ext_celery.dify_config", mock_config):
+            from extensions.ext_celery import get_celery_broker_transport_options
+
+            result = get_celery_broker_transport_options()
+
+        assert result["master_name"] == "mymaster"
+        assert result["sentinel_kwargs"]["password"] == "secret"
+        assert result["global_keyprefix"] == "enterprise-a:"
+
     def test_get_celery_ssl_options_when_ssl_disabled(self):
         """Test SSL options when BROKER_USE_SSL is False."""
         from configs import DifyConfig
@@ -151,3 +192,49 @@ class TestCelerySSLConfiguration:
             # Check that SSL is also applied to Redis backend
             assert "redis_backend_use_ssl" in celery_app.conf
             assert celery_app.conf["redis_backend_use_ssl"] is not None
+
+    def test_celery_init_applies_global_keyprefix_to_broker_and_backend_transport(self):
+        mock_config = MagicMock()
+        mock_config.BROKER_USE_SSL = False
+        mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+        mock_config.HUMAN_INPUT_TIMEOUT_TASK_INTERVAL = 1
+        mock_config.CELERY_BROKER_URL = "redis://localhost:6379/0"
+        mock_config.CELERY_BACKEND = "redis"
+        mock_config.CELERY_RESULT_BACKEND = "redis://localhost:6379/0"
+        mock_config.CELERY_USE_SENTINEL = False
+        mock_config.LOG_FORMAT = "%(message)s"
+        mock_config.LOG_TZ = "UTC"
+        mock_config.LOG_FILE = None
+        mock_config.CELERY_TASK_ANNOTATIONS = {}
+
+        mock_config.CELERY_BEAT_SCHEDULER_TIME = 1
+        mock_config.ENABLE_CLEAN_EMBEDDING_CACHE_TASK = False
+        mock_config.ENABLE_CLEAN_UNUSED_DATASETS_TASK = False
+        mock_config.ENABLE_CREATE_TIDB_SERVERLESS_TASK = False
+        mock_config.ENABLE_UPDATE_TIDB_SERVERLESS_STATUS_TASK = False
+        mock_config.ENABLE_CLEAN_MESSAGES = False
+        mock_config.ENABLE_MAIL_CLEAN_DOCUMENT_NOTIFY_TASK = False
+        mock_config.ENABLE_DATASETS_QUEUE_MONITOR = False
+        mock_config.ENABLE_HUMAN_INPUT_TIMEOUT_TASK = False
+        mock_config.ENABLE_CHECK_UPGRADABLE_PLUGIN_TASK = False
+        mock_config.MARKETPLACE_ENABLED = False
+        mock_config.WORKFLOW_LOG_CLEANUP_ENABLED = False
+        mock_config.ENABLE_WORKFLOW_RUN_CLEANUP_TASK = False
+        mock_config.ENABLE_WORKFLOW_SCHEDULE_POLLER_TASK = False
+        mock_config.WORKFLOW_SCHEDULE_POLLER_INTERVAL = 1
+        mock_config.ENABLE_TRIGGER_PROVIDER_REFRESH_TASK = False
+        mock_config.TRIGGER_PROVIDER_REFRESH_INTERVAL = 15
+        mock_config.ENABLE_API_TOKEN_LAST_USED_UPDATE_TASK = False
+        mock_config.API_TOKEN_LAST_USED_UPDATE_INTERVAL = 30
+        mock_config.ENTERPRISE_ENABLED = False
+        mock_config.ENTERPRISE_TELEMETRY_ENABLED = False
+
+        with patch("extensions.ext_celery.dify_config", mock_config):
+            from dify_app import DifyApp
+            from extensions.ext_celery import init_app
+
+            app = DifyApp(__name__)
+            celery_app = init_app(app)
+
+        assert celery_app.conf["broker_transport_options"]["global_keyprefix"] == "enterprise-a:"
+        assert celery_app.conf["result_backend_transport_options"]["global_keyprefix"] == "enterprise-a:"
diff --git a/api/tests/unit_tests/extensions/test_pubsub_channel.py b/api/tests/unit_tests/extensions/test_pubsub_channel.py
index a5b41a7266..926c406ad4 100644
--- a/api/tests/unit_tests/extensions/test_pubsub_channel.py
+++ b/api/tests/unit_tests/extensions/test_pubsub_channel.py
@@ -6,6 +6,7 @@ from libs.broadcast_channel.redis.sharded_channel import ShardedRedisBroadcastCh
 
 def test_get_pubsub_broadcast_channel_defaults_to_pubsub(monkeypatch):
     monkeypatch.setattr(dify_config, "PUBSUB_REDIS_CHANNEL_TYPE", "pubsub")
+    monkeypatch.setattr(ext_redis, "_pubsub_redis_client", object())
 
     channel = ext_redis.get_pubsub_broadcast_channel()
 
@@ -14,6 +15,7 @@ def test_get_pubsub_broadcast_channel_defaults_to_pubsub(monkeypatch):
 
 def test_get_pubsub_broadcast_channel_sharded(monkeypatch):
     monkeypatch.setattr(dify_config, "PUBSUB_REDIS_CHANNEL_TYPE", "sharded")
+    monkeypatch.setattr(ext_redis, "_pubsub_redis_client", object())
 
     channel = ext_redis.get_pubsub_broadcast_channel()
 
diff --git a/api/tests/unit_tests/extensions/test_redis.py b/api/tests/unit_tests/extensions/test_redis.py
index 5e9be4ab9b..21248439bf 100644
--- a/api/tests/unit_tests/extensions/test_redis.py
+++ b/api/tests/unit_tests/extensions/test_redis.py
@@ -1,12 +1,15 @@
-from unittest.mock import patch
+from unittest.mock import MagicMock, patch
 
 from redis import RedisError
 from redis.retry import Retry
 
 from extensions.ext_redis import (
+    RedisClientWrapper,
     _get_base_redis_params,
     _get_cluster_connection_health_params,
     _get_connection_health_params,
+    _normalize_redis_key_prefix,
+    _serialize_redis_name,
     redis_fallback,
 )
 
@@ -123,3 +126,99 @@ class TestRedisFallback:
 
         assert test_func.__name__ == "test_func"
         assert test_func.__doc__ == "Test function docstring"
+
+
+class TestRedisKeyPrefixHelpers:
+    def test_normalize_redis_key_prefix_trims_whitespace(self):
+        assert _normalize_redis_key_prefix("  enterprise-a  ") == "enterprise-a"
+
+    def test_normalize_redis_key_prefix_treats_whitespace_only_as_empty(self):
+        assert _normalize_redis_key_prefix("   ") == ""
+
+    def test_serialize_redis_name_returns_original_when_prefix_empty(self):
+        assert _serialize_redis_name("model_lb_index:test", "") == "model_lb_index:test"
+
+    def test_serialize_redis_name_adds_single_colon_separator(self):
+        assert _serialize_redis_name("model_lb_index:test", "enterprise-a") == "enterprise-a:model_lb_index:test"
+
+
+class TestRedisClientWrapperKeyPrefix:
+    def test_wrapper_get_prefixes_string_keys(self):
+        mock_client = MagicMock()
+        wrapper = RedisClientWrapper()
+        wrapper.initialize(mock_client)
+
+        with patch("extensions.ext_redis.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+
+            wrapper.get("oauth_state:abc")
+
+        mock_client.get.assert_called_once_with("enterprise-a:oauth_state:abc")
+
+    def test_wrapper_delete_prefixes_multiple_keys(self):
+        mock_client = MagicMock()
+        wrapper = RedisClientWrapper()
+        wrapper.initialize(mock_client)
+
+        with patch("extensions.ext_redis.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+
+            wrapper.delete("key:a", "key:b")
+
+        mock_client.delete.assert_called_once_with("enterprise-a:key:a", "enterprise-a:key:b")
+
+    def test_wrapper_lock_prefixes_lock_name(self):
+        mock_client = MagicMock()
+        wrapper = RedisClientWrapper()
+        wrapper.initialize(mock_client)
+
+        with patch("extensions.ext_redis.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+
+            wrapper.lock("resource-lock", timeout=10)
+
+        mock_client.lock.assert_called_once()
+        args, kwargs = mock_client.lock.call_args
+        assert args == ("enterprise-a:resource-lock",)
+        assert kwargs["timeout"] == 10
+
+    def test_wrapper_hash_operations_prefix_key_name(self):
+        mock_client = MagicMock()
+        wrapper = RedisClientWrapper()
+        wrapper.initialize(mock_client)
+
+        with patch("extensions.ext_redis.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+
+            wrapper.hset("hash:key", "field", "value")
+            wrapper.hgetall("hash:key")
+
+        mock_client.hset.assert_called_once_with("enterprise-a:hash:key", "field", "value")
+        mock_client.hgetall.assert_called_once_with("enterprise-a:hash:key")
+
+    def test_wrapper_zadd_prefixes_sorted_set_name(self):
+        mock_client = MagicMock()
+        wrapper = RedisClientWrapper()
+        wrapper.initialize(mock_client)
+
+        with patch("extensions.ext_redis.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+
+            wrapper.zadd("zset:key", {"member": 1})
+
+        mock_client.zadd.assert_called_once()
+        args, kwargs = mock_client.zadd.call_args
+        assert args == ("enterprise-a:zset:key", {"member": 1})
+        assert kwargs["nx"] is False
+
+    def test_wrapper_preserves_keys_when_prefix_is_empty(self):
+        mock_client = MagicMock()
+        wrapper = RedisClientWrapper()
+        wrapper.initialize(mock_client)
+
+        with patch("extensions.ext_redis.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "   "
+
+            wrapper.get("plain:key")
+
+        mock_client.get.assert_called_once_with("plain:key")
diff --git a/api/tests/unit_tests/libs/broadcast_channel/redis/test_channel_unit_tests.py b/api/tests/unit_tests/libs/broadcast_channel/redis/test_channel_unit_tests.py
index 460374b6f6..8bef01c1ed 100644
--- a/api/tests/unit_tests/libs/broadcast_channel/redis/test_channel_unit_tests.py
+++ b/api/tests/unit_tests/libs/broadcast_channel/redis/test_channel_unit_tests.py
@@ -139,6 +139,28 @@ class TestTopic:
 
         mock_redis_client.publish.assert_called_once_with("test-topic", payload)
 
+    def test_publish_prefixes_regular_topic(self, mock_redis_client: MagicMock):
+        with patch("extensions.redis_names.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+            topic = Topic(mock_redis_client, "test-topic")
+
+            topic.publish(b"test message")
+
+        mock_redis_client.publish.assert_called_once_with("enterprise-a:test-topic", b"test message")
+
+    def test_subscribe_prefixes_regular_topic(self, mock_redis_client: MagicMock):
+        with patch("extensions.redis_names.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+            topic = Topic(mock_redis_client, "test-topic")
+
+            subscription = topic.subscribe()
+            try:
+                subscription._start_if_needed()
+            finally:
+                subscription.close()
+
+        mock_redis_client.pubsub.return_value.subscribe.assert_called_once_with("enterprise-a:test-topic")
+
 
 class TestShardedTopic:
     """Test cases for the ShardedTopic class."""
@@ -176,6 +198,15 @@ class TestShardedTopic:
 
         mock_redis_client.spublish.assert_called_once_with("test-sharded-topic", payload)
 
+    def test_publish_prefixes_sharded_topic(self, mock_redis_client: MagicMock):
+        with patch("extensions.redis_names.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+            sharded_topic = ShardedTopic(mock_redis_client, "test-sharded-topic")
+
+            sharded_topic.publish(b"test sharded message")
+
+        mock_redis_client.spublish.assert_called_once_with("enterprise-a:test-sharded-topic", b"test sharded message")
+
     def test_subscribe_returns_sharded_subscription(self, sharded_topic: ShardedTopic, mock_redis_client: MagicMock):
         """Test that subscribe() returns a _RedisShardedSubscription instance."""
         subscription = sharded_topic.subscribe()
@@ -185,6 +216,19 @@ class TestShardedTopic:
         assert subscription._pubsub is mock_redis_client.pubsub.return_value
         assert subscription._topic == "test-sharded-topic"
 
+    def test_subscribe_prefixes_sharded_topic(self, mock_redis_client: MagicMock):
+        with patch("extensions.redis_names.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+            sharded_topic = ShardedTopic(mock_redis_client, "test-sharded-topic")
+
+            subscription = sharded_topic.subscribe()
+            try:
+                subscription._start_if_needed()
+            finally:
+                subscription.close()
+
+        mock_redis_client.pubsub.return_value.ssubscribe.assert_called_once_with("enterprise-a:test-sharded-topic")
+
 
 @dataclasses.dataclass(frozen=True)
 class SubscriptionTestCase:
diff --git a/api/tests/unit_tests/libs/broadcast_channel/redis/test_streams_channel_unit_tests.py b/api/tests/unit_tests/libs/broadcast_channel/redis/test_streams_channel_unit_tests.py
index 0886b70ee5..fd9e5ca5b3 100644
--- a/api/tests/unit_tests/libs/broadcast_channel/redis/test_streams_channel_unit_tests.py
+++ b/api/tests/unit_tests/libs/broadcast_channel/redis/test_streams_channel_unit_tests.py
@@ -2,6 +2,7 @@ import threading
 import time
 from dataclasses import dataclass
 from typing import cast
+from unittest.mock import patch
 
 import pytest
 
@@ -150,6 +151,25 @@ class TestStreamsBroadcastChannel:
         # Expire called after publish
         assert fake_redis._expire_calls.get("stream:beta", 0) >= 1
 
+    def test_topic_uses_prefixed_stream_key(self, fake_redis: FakeStreamsRedis):
+        with patch("extensions.redis_names.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+
+            topic = StreamsBroadcastChannel(fake_redis, retention_seconds=60).topic("alpha")
+
+        assert topic._topic == "alpha"
+        assert topic._key == "enterprise-a:stream:alpha"
+
+    def test_publish_uses_prefixed_stream_key(self, fake_redis: FakeStreamsRedis):
+        with patch("extensions.redis_names.dify_config") as mock_config:
+            mock_config.REDIS_KEY_PREFIX = "enterprise-a"
+            topic = StreamsBroadcastChannel(fake_redis, retention_seconds=60).topic("beta")
+
+            topic.publish(b"hello")
+
+        assert fake_redis._store["enterprise-a:stream:beta"][0][1] == {b"data": b"hello"}
+        assert fake_redis._expire_calls.get("enterprise-a:stream:beta", 0) >= 1
+
     def test_topic_exposes_self_as_producer_and_subscriber(self, streams_channel: StreamsBroadcastChannel):
         topic = streams_channel.topic("producer-subscriber")
 
diff --git a/docker/.env.example b/docker/.env.example
index 4426a882f1..856b04a3df 100644
--- a/docker/.env.example
+++ b/docker/.env.example
@@ -351,6 +351,9 @@ REDIS_SSL_CERTFILE=
 REDIS_SSL_KEYFILE=
 # Path to client private key file for SSL authentication
 REDIS_DB=0
+# Optional global prefix for Redis keys, topics, streams, and Celery Redis transport artifacts.
+# Leave empty to preserve current unprefixed behavior.
+REDIS_KEY_PREFIX=
 # Optional: limit total Redis connections used by API/Worker (unset for default)
 # Align with API's REDIS_MAX_CONNECTIONS in configs
 REDIS_MAX_CONNECTIONS=
diff --git a/docker/README.md b/docker/README.md
index 4c40317f37..3130fa9886 100644
--- a/docker/README.md
+++ b/docker/README.md
@@ -88,6 +88,7 @@ The `.env.example` file provided in the Docker setup is extensive and covers a w
 1. **Redis Configuration**:
 
    - `REDIS_HOST`, `REDIS_PORT`, `REDIS_PASSWORD`: Redis server connection settings.
+   - `REDIS_KEY_PREFIX`: Optional global namespace prefix for Redis keys, topics, streams, and Celery Redis transport artifacts.
 
 1. **Celery Configuration**:
 
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
index 1fc1cfdf9e..c1ddba4f80 100644
--- a/docker/docker-compose.yaml
+++ b/docker/docker-compose.yaml
@@ -90,6 +90,7 @@ x-shared-env: &shared-api-worker-env
   REDIS_SSL_CERTFILE: ${REDIS_SSL_CERTFILE:-}
   REDIS_SSL_KEYFILE: ${REDIS_SSL_KEYFILE:-}
   REDIS_DB: ${REDIS_DB:-0}
+  REDIS_KEY_PREFIX: ${REDIS_KEY_PREFIX:-}
   REDIS_MAX_CONNECTIONS: ${REDIS_MAX_CONNECTIONS:-}
   REDIS_USE_SENTINEL: ${REDIS_USE_SENTINEL:-false}
   REDIS_SENTINELS: ${REDIS_SENTINELS:-}

From d4783e8c1427975f8b90aa4dd9a01d6fd55e43d7 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 14 Apr 2026 17:55:55 +0800
Subject: [PATCH 08/44] chore: url in tool description support clicking jump
 directly (#35163)

---
 .../tool-form/__tests__/item.spec.tsx         | 26 +++++++++++
 .../nodes/tool/components/tool-form/item.tsx  | 45 ++++++++++++++++++-
 2 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/nodes/tool/components/tool-form/__tests__/item.spec.tsx b/web/app/components/workflow/nodes/tool/components/tool-form/__tests__/item.spec.tsx
index e5760310a9..896897a777 100644
--- a/web/app/components/workflow/nodes/tool/components/tool-form/__tests__/item.spec.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/__tests__/item.spec.tsx
@@ -78,6 +78,7 @@ describe('tool/tool-form/item', () => {
     mockUseLanguage.mockReturnValue('en_US')
   })
 
+  // Text input fields render their descriptions inline above the input.
   it('should render text input labels and forward props to form input item', () => {
     const handleChange = vi.fn()
     const handleManageInputField = vi.fn()
@@ -121,6 +122,31 @@ describe('tool/tool-form/item', () => {
     })
   })
 
+  // URL fragments inside descriptions should be rendered as external links.
+  it('should render URLs in descriptions as external links', () => {
+    render(
+      <ToolFormItem
+        readOnly={false}
+        nodeId="tool-node"
+        schema={createSchema({
+          tooltip: {
+            en_US: 'Visit https://docs.dify.ai/tools for docs',
+            zh_Hans: 'Visit https://docs.dify.ai/tools for docs',
+          },
+        })}
+        value={{}}
+        onChange={vi.fn()}
+      />,
+    )
+
+    const link = screen.getByRole('link', { name: 'https://docs.dify.ai/tools' })
+    expect(link).toHaveAttribute('href', 'https://docs.dify.ai/tools')
+    expect(link).toHaveAttribute('target', '_blank')
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    expect(link.parentElement).toHaveTextContent('Visit https://docs.dify.ai/tools for docs')
+  })
+
+  // Non-text fields keep their descriptions inside the tooltip and support JSON schema preview.
   it('should show tooltip for non-description fields and open the schema modal', () => {
     const objectSchema = createSchema({
       name: 'tool_config',
diff --git a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
index d83f445c2c..5011cf9486 100644
--- a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
@@ -1,5 +1,5 @@
 'use client'
-import type { FC } from 'react'
+import type { FC, ReactNode } from 'react'
 import type { ToolVarInputs } from '../../types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { Tool } from '@/app/components/tools/types'
@@ -15,6 +15,45 @@ import { useLanguage } from '@/app/components/header/account-setting/model-provi
 import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
 import FormInputItem from '@/app/components/workflow/nodes/_base/components/form-input-item'
 
+const URL_REGEX = /(https?:\/\/\S+)/g
+
+const renderDescriptionWithLinks = (description: string): ReactNode => {
+  const matches = [...description.matchAll(URL_REGEX)]
+
+  if (!matches.length)
+    return description
+
+  const parts: ReactNode[] = []
+  let currentIndex = 0
+
+  matches.forEach((match, index) => {
+    const [url] = match
+    const start = match.index ?? 0
+
+    if (start > currentIndex)
+      parts.push(description.slice(currentIndex, start))
+
+    parts.push(
+      <a
+        key={`${url}-${index}`}
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-text-accent hover:underline"
+      >
+        {url}
+      </a>,
+    )
+
+    currentIndex = start + url.length
+  })
+
+  if (currentIndex < description.length)
+    parts.push(description.slice(currentIndex))
+
+  return parts
+}
+
 type Props = {
   readOnly: boolean
   nodeId: string
@@ -87,7 +126,9 @@ const ToolFormItem: FC<Props> = ({
           )}
         </div>
         {showDescription && tooltip && (
-          <div className="body-xs-regular pb-0.5 text-text-tertiary">{tooltip[language] || tooltip.en_US}</div>
+          <div className="body-xs-regular break-words pb-0.5 text-text-tertiary">
+            {renderDescriptionWithLinks(tooltip[language] || tooltip.en_US)}
+          </div>
         )}
       </div>
       <FormInputItem

From e1bbe57f9c456f39e8301dcb46181b5f5c09c0dd Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Tue, 14 Apr 2026 21:22:23 +0800
Subject: [PATCH 09/44] refactor(web): re-design button api (#35166)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../tracing/provider-config-modal.tsx         |    4 +-
 .../(humanInputLayout)/form/[token]/form.tsx  |   22 +-
 .../webapp-reset-password/check-code/page.tsx |   10 +-
 .../webapp-reset-password/page.tsx            |   10 +-
 .../set-password/page.tsx                     |   10 +-
 .../webapp-signin/check-code/page.tsx         |   10 +-
 .../components/mail-and-code-auth.tsx         |    4 +-
 .../components/mail-and-password-auth.tsx     |    4 +-
 .../webapp-signin/components/sso-auth.tsx     |    2 +-
 .../account-page/AvatarWithEdit.tsx           |    6 +-
 .../account-page/email-change-modal.tsx       |   54 +-
 .../(commonLayout)/account-page/index.tsx     |   32 +-
 .../delete-account/components/check-email.tsx |    8 +-
 .../delete-account/components/feed-back.tsx   |    4 +-
 .../components/verify-email.tsx               |   10 +-
 web/app/account/(commonLayout)/header.tsx     |    6 +-
 web/app/account/oauth/authorize/page.tsx      |   12 +-
 web/app/activate/activateForm.tsx             |    2 +-
 .../__tests__/app-info-detail-panel.spec.tsx  |    4 +-
 .../__tests__/app-operations.spec.tsx         |    4 +-
 .../app-info/app-info-detail-panel.tsx        |   12 +-
 .../app-sidebar/app-info/app-operations.tsx   |   12 +-
 .../components/app-sidebar/toggle-button.tsx  |    4 +-
 .../annotation/add-annotation-modal/index.tsx |    6 +-
 .../csv-uploader.tsx                          |    4 +-
 .../batch-add-annotation-modal/index.tsx      |    8 +-
 .../edit-annotation-modal/edit-item/index.tsx |   12 +-
 .../app/annotation/header-opts/index.tsx      |   16 +-
 .../add-member-or-group-pop.tsx               |    8 +-
 .../app/app-access-control/index.tsx          |    6 +-
 .../components/app/app-publisher/index.tsx    |    4 +-
 .../publish-with-multiple-model.tsx           |    2 +-
 .../components/app/app-publisher/sections.tsx |    2 +-
 .../app/app-publisher/version-info-modal.tsx  |   10 +-
 .../warning-mask/cannot-query-dataset.tsx     |    2 +-
 .../base/warning-mask/formatting-changed.tsx  |    2 +-
 .../config-prompt/advanced-prompt-input.tsx   |   12 +-
 .../config-prompt/confirm-add-var/index.tsx   |    4 +-
 .../conversation-history/edit-modal.tsx       |    6 +-
 .../app/configuration/config-prompt/index.tsx |    2 +-
 .../configuration/config-var/modal-foot.tsx   |    2 +-
 .../config-vision/param-config.tsx            |    2 +-
 .../config/agent-setting-button.tsx           |    2 +-
 .../config/agent/agent-setting/index.tsx      |   16 +-
 .../config/agent/agent-tools/index.tsx        |   12 +-
 .../agent-tools/setting-built-in-tool.tsx     |   18 +-
 .../config/automatic/automatic-btn.tsx        |    2 +-
 .../config/automatic/get-automatic-res.tsx    |   10 +-
 .../configuration/config/automatic/result.tsx |    4 +-
 .../code-generator/get-code-generator-res.tsx |    6 +-
 .../app/configuration/configuration-view.tsx  |    2 +-
 .../configuration/ctrl-btn-group/index.tsx    |    4 +-
 .../dataset-config/params-config/index.tsx    |    2 +-
 .../dataset-config/select-dataset/index.tsx   |    4 +-
 .../dataset-config/settings-modal/index.tsx   |   16 +-
 .../app/configuration/debug/index.tsx         |   16 +-
 .../prompt-value-panel/index.tsx              |    8 +-
 .../tools/external-data-tool-modal.tsx        |    8 +-
 .../app/create-app-dialog/app-card/index.tsx  |    8 +-
 .../components/app/create-app-modal/index.tsx |   38 +-
 .../dsl-confirm-modal.tsx                     |    4 +-
 .../app/create-from-dsl-modal/index.tsx       |   12 +-
 .../components/app/duplicate-modal/index.tsx  |   10 +-
 .../components/app/in-site-message/index.tsx  |   12 +-
 .../app/overview/apikey-info-panel/index.tsx  |    8 +-
 .../app/overview/app-card-sections.tsx        |    2 +-
 .../app/overview/customize/index.tsx          |   20 +-
 .../app/overview/settings/index.tsx           |   46 +-
 .../components/app/switch-app-modal/index.tsx |   10 +-
 .../saved-items/no-data/index.tsx             |    6 +-
 .../components/base/app-icon-picker/index.tsx |    4 +-
 .../base/button/__tests__/add-button.spec.tsx |   49 -
 .../button/__tests__/sync-button.spec.tsx     |   52 -
 .../base/button/add-button.stories.tsx        |   52 -
 web/app/components/base/button/add-button.tsx |   21 -
 .../base/button/sync-button.stories.tsx       |   57 -
 .../components/base/button/sync-button.tsx    |   26 -
 .../chat-with-history/inputs-form/index.tsx   |    8 +-
 .../sidebar/__tests__/rename-modal.spec.tsx   |   10 +-
 .../chat/chat-with-history/sidebar/index.tsx  |    4 +-
 .../sidebar/rename-modal.tsx                  |    4 +-
 .../human-input-content/human-input-form.tsx  |    4 +-
 .../chat/chat/chat-input-area/operation.tsx   |    2 +-
 web/app/components/base/chat/chat/index.tsx   |    2 +-
 .../components/base/chat/chat/question.tsx    |    6 +-
 .../components/base/chat/chat/try-to-ask.tsx  |    6 +-
 .../embedded-chatbot/inputs-form/index.tsx    |    8 +-
 .../components/base/checkbox-list/index.tsx   |   14 +-
 .../components/base/confirm/index.stories.tsx |    2 +-
 web/app/components/base/confirm/index.tsx     |   12 +-
 .../date-picker/footer.tsx                    |    8 +-
 .../time-picker/footer.tsx                    |    2 +-
 .../year-and-month-picker/footer.tsx          |    2 +-
 web/app/components/base/drawer/index.tsx      |    4 +-
 .../components/base/emoji-picker/index.tsx    |    4 +-
 .../components/base/error-boundary/index.tsx  |    6 +-
 .../annotation-reply/config-param-modal.tsx   |    4 +-
 .../annotation-reply/index.tsx                |   12 +-
 .../conversation-opener/index.tsx             |    6 +-
 .../conversation-opener/modal.tsx             |   12 +-
 .../new-feature-panel/feature-bar.tsx         |    6 +-
 .../new-feature-panel/file-upload/index.tsx   |    8 +-
 .../file-upload/setting-content.tsx           |    4 +-
 .../new-feature-panel/image-upload/index.tsx  |    8 +-
 .../new-feature-panel/moderation/index.tsx    |   12 +-
 .../moderation/moderation-setting-modal.tsx   |   18 +-
 .../text-to-speech/index.tsx                  |   10 +-
 .../file-from-link-or-local/index.tsx         |    8 +-
 .../file-uploader-in-attachment/index.tsx     |    2 +-
 .../file-image-item.tsx                       |    8 +-
 .../file-uploader-in-chat-input/file-item.tsx |   10 +-
 .../base/form/components/form/actions.tsx     |    2 +-
 .../components/base/form/index.stories.tsx    |    2 +-
 .../base/image-uploader/image-link-input.tsx  |    4 +-
 .../base/inline-delete-confirm/index.tsx      |    4 +-
 .../base/markdown-blocks/button.tsx           |    4 +-
 .../components/base/markdown-blocks/form.tsx  |    6 +-
 .../components/base/modal-like-wrap/index.tsx |    6 +-
 .../components/base/modal/modal.stories.tsx   |    4 +-
 web/app/components/base/modal/modal.tsx       |   12 +-
 .../base/notion-connector/index.tsx           |    6 +-
 web/app/components/base/pagination/index.tsx  |   14 +-
 .../plugins/hitl-input-block/input-field.tsx  |   12 +-
 .../base/tag-management/tag-remove-modal.tsx  |    8 +-
 .../components/base/ui/alert-dialog/index.tsx |    6 +-
 .../{ => ui}/button/__tests__/index.spec.tsx  |    9 +-
 .../components/base/{ => ui}/button/index.css |  185 +--
 .../base/{ => ui}/button/index.stories.tsx    |   11 +-
 .../components/base/{ => ui}/button/index.tsx |   47 +-
 .../billing/apps-full-in-dialog/index.tsx     |    8 +-
 .../billing/plan-upgrade-modal/index.tsx      |    4 +-
 web/app/components/billing/plan/index.tsx     |    2 +-
 web/app/components/billing/pricing/header.tsx |    6 +-
 .../components/billing/upgrade-btn/index.tsx  |    2 +-
 .../components/chat-preview-card.tsx          |   12 +-
 .../components/workflow-preview-card.tsx      |   10 +-
 .../custom/custom-web-app-brand/index.tsx     |   16 +-
 .../datasets/common/image-previewer/index.tsx |   12 +-
 .../image-uploader-in-chunk/image-item.tsx    |    4 +-
 .../image-item.tsx                            |    4 +-
 .../dsl-confirm-modal.tsx                     |    4 +-
 .../create-from-dsl-modal/index.tsx           |    4 +-
 .../datasets/create-from-pipeline/header.tsx  |    6 +-
 .../list/template-card/actions.tsx            |    2 +-
 .../list/template-card/details/index.tsx      |   12 +-
 .../list/template-card/edit-pipeline-info.tsx |   10 +-
 .../create/embedding-process/index.tsx        |    4 +-
 .../empty-dataset-creation-modal/index.tsx    |    2 +-
 .../step-one/components/next-step-button.tsx  |    2 +-
 .../components/general-chunking-options.tsx   |   10 +-
 .../components/indexing-mode-section.tsx      |   20 +-
 .../components/parent-child-options.tsx       |    6 +-
 .../step-two/components/step-two-footer.tsx   |    2 +-
 .../create/stop-embedding-modal/index.tsx     |    2 +-
 .../website/base/__tests__/url-input.spec.tsx |    9 +-
 .../website/base/crawled-result-item.tsx      |    4 +-
 .../datasets/create/website/base/header.tsx   |    4 +-
 .../create/website/base/url-input.tsx         |    3 +-
 .../base/__tests__/url-input.spec.tsx         |    8 +-
 .../website/jina-reader/base/url-input.tsx    |    2 +-
 .../datasets/create/website/no-data.tsx       |    6 +-
 .../documents/components/documents-header.tsx |    2 +-
 .../documents/components/empty-element.tsx    |    4 +-
 .../documents/components/rename-modal.tsx     |    4 +-
 .../create-from-pipeline/actions/index.tsx    |    6 +-
 .../base/__tests__/header.spec.tsx            |    4 +-
 .../data-source/base/header.tsx               |    4 +-
 .../online-drive/connect/index.tsx            |    6 +-
 .../file-list/list/empty-search-result.tsx    |    2 +-
 .../data-source/online-drive/header.tsx       |    4 +-
 .../__tests__/crawled-result-item.spec.tsx    |    4 +-
 .../base/crawled-result-item.tsx              |    8 +-
 .../website-crawl/base/options/index.tsx      |    5 +-
 .../create-from-pipeline/left-header.tsx      |   12 +-
 .../preview/chunk-preview.tsx                 |    2 +-
 .../__tests__/header.spec.tsx                 |    4 +-
 .../process-documents/actions.tsx             |    2 +-
 .../process-documents/header.tsx              |    4 +-
 .../processing/embedding-process/index.tsx    |   12 +-
 .../detail/batch-modal/csv-uploader.tsx       |    4 +-
 .../documents/detail/batch-modal/index.tsx    |    6 +-
 .../completed/common/action-buttons.tsx       |    2 +-
 .../detail/completed/common/batch-action.tsx  |    6 +-
 .../completed/common/regeneration-modal.tsx   |    6 +-
 .../metadata/components/doc-type-selector.tsx |    2 +-
 .../documents/detail/metadata/index.tsx       |    2 +-
 .../pipeline-settings/left-header.tsx         |   12 +-
 .../process-documents/actions.tsx             |    2 +-
 .../external-api/external-api-modal/index.tsx |   18 +-
 .../external-api/external-api-panel/index.tsx |   10 +-
 .../create/ExternalApiSelection.tsx           |    2 +-
 .../external-knowledge-base/create/index.tsx  |   10 +-
 .../datasets/extra-info/service-api/card.tsx  |   10 +-
 .../modify-external-retrieval-modal.spec.tsx  |    4 +-
 .../__tests__/modify-retrieval-modal.spec.tsx |    4 +-
 .../query-input/__tests__/index.spec.tsx      |    6 +-
 .../components/query-input/index.tsx          |    8 +-
 .../modify-external-retrieval-modal.tsx       |    6 +-
 .../hit-testing/modify-retrieval-modal.tsx    |    8 +-
 web/app/components/datasets/list/index.tsx    |    6 +-
 .../datasets/metadata/add-metadata-button.tsx |    2 +-
 .../metadata/edit-metadata-batch/modal.tsx    |   12 +-
 .../dataset-metadata-drawer.tsx               |   12 +-
 .../metadata/metadata-document/index.tsx      |    2 +-
 .../metadata/metadata-document/no-data.tsx    |    6 +-
 .../datasets/rename-modal/index.tsx           |    8 +-
 .../datasets/settings/form/index.tsx          |    2 +-
 .../develop/secret-key/secret-key-button.tsx  |    4 +-
 .../secret-key/secret-key-generate.tsx        |    6 +-
 .../develop/secret-key/secret-key-modal.tsx   |    6 +-
 web/app/components/explore/app-card/index.tsx |   12 +-
 web/app/components/explore/app-list/index.tsx |    6 +-
 .../explore/create-app-modal/index.tsx        |   18 +-
 .../explore/try-app/app-info/index.tsx        |   14 +-
 web/app/components/explore/try-app/index.tsx  |    4 +-
 .../components/header/account-about/index.tsx |    4 +-
 .../__tests__/compliance.spec.tsx             |   32 +-
 .../header/account-dropdown/compliance.tsx    |   23 +-
 .../api-based-extension-page/index.tsx        |    2 +-
 .../api-based-extension-page/item.tsx         |    2 +-
 .../api-based-extension-page/modal.tsx        |    6 +-
 .../data-source-page-new/configure.tsx        |    4 +-
 .../data-source-page-new/item.tsx             |    8 +-
 .../header/account-setting/index.tsx          |   20 +-
 .../edit-workspace-modal/index.tsx            |    4 +-
 .../members-page/invite-button.tsx            |    2 +-
 .../members-page/invite-modal/index.tsx       |   10 +-
 .../members-page/invited-modal/index.tsx      |    4 +-
 .../transfer-ownership-modal/index.tsx        |   44 +-
 .../model-auth/add-custom-model.tsx           |   10 +-
 .../model-auth/authorized/index.tsx           |    6 +-
 .../model-auth/config-model.tsx               |    6 +-
 .../model-auth/config-provider.tsx            |    4 +-
 .../manage-custom-model-credentials.tsx       |    2 +-
 .../switch-credential-in-load-balancing.tsx   |    2 +-
 .../model-provider-page/model-modal/index.tsx |   23 +-
 .../configuration-button.tsx                  |    2 +-
 .../presets-parameter.tsx                     |    4 +-
 .../model-selector/popup.tsx                  |   28 +-
 .../model-auth-dropdown/api-key-section.tsx   |    8 +-
 .../model-auth-dropdown/index.tsx             |    4 +-
 .../model-load-balancing-modal.tsx            |    6 +-
 .../provider-added-card/priority-selector.tsx |    6 +-
 .../provider-card-actions.tsx                 |    4 +-
 .../system-model-selector/index.tsx           |   14 +-
 .../plugins/install-plugin/base/installed.tsx |    2 +-
 .../install-bundle/steps/install.tsx          |    4 +-
 .../install-bundle/steps/installed.tsx        |    2 +-
 .../install-from-github/steps/loaded.tsx      |    2 +-
 .../steps/selectPackage.tsx                   |    2 +-
 .../install-from-github/steps/setURL.tsx      |    8 +-
 .../steps/install.tsx                         |    6 +-
 .../steps/uploading.tsx                       |    2 +-
 .../steps/install.tsx                         |    6 +-
 .../plugins/marketplace/list/card-wrapper.tsx |    6 +-
 .../authorize/add-api-key-button.tsx          |    4 +-
 .../authorize/add-oauth-button.tsx            |   12 +-
 .../authorize/oauth-client-settings.tsx       |    2 +-
 .../authorized-in-data-source-node.tsx        |    2 +-
 .../plugin-auth/authorized-in-node.tsx        |    2 +-
 .../plugins/plugin-auth/authorized/index.tsx  |    6 +-
 .../plugins/plugin-auth/authorized/item.tsx   |    6 +-
 .../plugin-auth/plugin-auth-in-agent.tsx      |    2 +-
 .../plugin-auth-in-datasource-node.tsx        |    2 +-
 .../datasource-action-list.tsx                |    6 +-
 .../detail-header/__tests__/index.spec.tsx    |    4 +-
 .../detail-header/index.tsx                   |    6 +-
 .../plugin-detail-panel/endpoint-modal.tsx    |   10 +-
 .../subscription-list/create/index.tsx        |    6 +-
 .../subscription-list/create/oauth-client.tsx |    8 +-
 .../components/tool-credentials-form.tsx      |    2 +-
 .../tool-selector/components/tool-item.tsx    |    6 +-
 .../plugins/plugin-mutation-model/index.tsx   |    4 +-
 .../plugin-page/__tests__/debug-info.spec.tsx |    4 +-
 .../install-plugin-dropdown.spec.tsx          |    4 +-
 .../plugins/plugin-page/debug-info.tsx        |    4 +-
 .../plugins/plugin-page/empty/index.tsx       |   10 +-
 .../components/plugins/plugin-page/index.tsx  |    4 +-
 .../plugin-page/install-plugin-dropdown.tsx   |    6 +-
 .../components/error-plugin-item.tsx          |    2 +-
 .../components/plugin-task-list.tsx           |    4 +-
 .../plugins/plugin-page/plugins-panel.tsx     |    4 +-
 web/app/components/plugins/provider-card.tsx  |    6 +-
 .../__tests__/plugins-picker.spec.tsx         |    4 +-
 .../__tests__/strategy-picker.spec.tsx        |    4 +-
 .../auto-update-setting/plugins-picker.tsx    |    4 +-
 .../auto-update-setting/strategy-picker.tsx   |    4 +-
 .../plugins/reference-setting-modal/index.tsx |    6 +-
 .../__tests__/from-market-place.spec.tsx      |    4 +-
 .../update-plugin/downgrade-warning.tsx       |    6 +-
 .../update-plugin/from-market-place.tsx       |    6 +-
 .../components/__tests__/conversion.spec.tsx  |    4 +-
 ...blish-as-knowledge-pipeline-modal.spec.tsx |    4 +-
 .../__tests__/update-dsl-modal.spec.tsx       |    8 +-
 .../rag-pipeline/components/conversion.tsx    |    4 +-
 .../panel/input-field/editor/form/index.tsx   |    2 +-
 .../components/panel/input-field/index.tsx    |    6 +-
 .../test-run/preparation/actions/index.tsx    |    2 +-
 .../document-processing/actions.tsx           |    2 +-
 .../test-run/result/result-preview/index.tsx  |    4 +-
 .../publish-as-knowledge-pipeline-modal.tsx   |   10 +-
 .../input-field-button.tsx                    |    2 +-
 .../publisher/__tests__/popup.spec.tsx        |    4 +-
 .../rag-pipeline-header/publisher/index.tsx   |    2 +-
 .../rag-pipeline-header/publisher/popup.tsx   |   16 +-
 .../components/update-dsl-modal.tsx           |   11 +-
 .../components/version-mismatch-modal.tsx     |    4 +-
 .../share/text-generation/result/index.tsx    |    6 +-
 .../share/text-generation/run-batch/index.tsx |    4 +-
 .../run-batch/res-download/index.tsx          |    2 +-
 .../share/text-generation/run-once/index.tsx  |    8 +-
 .../config-credentials.tsx                    |   14 +-
 .../get-schema.tsx                            |   12 +-
 .../edit-custom-collection-modal/index.tsx    |   26 +-
 .../edit-custom-collection-modal/test-api.tsx |   16 +-
 .../components/tools/mcp/detail/content.tsx   |   20 +-
 .../components/tools/mcp/headers-input.tsx    |    6 +-
 .../components/tools/mcp/mcp-server-modal.tsx |   10 +-
 .../components/tools/mcp/mcp-service-card.tsx |   12 +-
 web/app/components/tools/mcp/modal.tsx        |    8 +-
 web/app/components/tools/provider/detail.tsx  |    8 +-
 .../setting/build-in/config-credentials.tsx   |    4 +-
 .../tools/workflow-tool/configure-button.tsx  |    8 +-
 .../confirm-modal/__tests__/index.spec.tsx    |    3 +-
 .../workflow-tool/confirm-modal/index.tsx     |    8 +-
 .../components/tools/workflow-tool/index.tsx  |    4 +-
 .../workflow-header/features-trigger.tsx      |    2 +-
 .../block-selector/all-start-blocks.tsx       |    6 +-
 .../workflow/block-selector/all-tools.tsx     |    4 +-
 .../market-place-plugin/action.tsx            |    6 +-
 .../workflow/dsl-export-confirm-modal.tsx     |   16 +-
 .../workflow/header/chat-variable-button.tsx  |    2 +-
 .../header/checklist/plugin-group.tsx         |    4 +-
 .../components/workflow/header/env-button.tsx |    2 +-
 .../header/global-variable-button.tsx         |    2 +-
 .../workflow/header/header-in-restoring.tsx   |    4 +-
 .../header/header-in-view-history.tsx         |    2 +-
 .../header/version-history-button.tsx         |    4 +-
 .../nodes/_base/components/add-button.tsx     |    2 +-
 .../_base/components/before-run-form/form.tsx |    7 +-
 .../components/before-run-form/index.tsx      |    2 +-
 .../error-handle-type-selector.tsx            |    4 +-
 .../components/install-plugin-button.tsx      |    2 +-
 .../nodes/_base/components/next-step/item.tsx |    4 +-
 .../_base/components/next-step/operator.tsx   |    4 +-
 .../variable/var-reference-picker.trigger.tsx |   23 +-
 .../workflow-panel/last-run/no-data.tsx       |    4 +-
 .../components/workflow/nodes/code/panel.tsx  |   28 +-
 .../nodes/data-source-empty/index.tsx         |    4 +-
 .../nodes/data-source/before-run-form.tsx     |    2 +-
 .../components/workflow/nodes/end/panel.tsx   |    9 +-
 .../http/components/authorization/index.tsx   |    4 +-
 .../nodes/http/components/curl-panel.tsx      |    2 +-
 .../__tests__/button-style-dropdown.spec.tsx  |    5 +-
 .../__tests__/form-content-preview.spec.tsx   |    5 +-
 .../components/__tests__/user-action.spec.tsx |    5 +-
 .../components/button-style-dropdown.tsx      |    2 +-
 .../delivery-method/email-configure-modal.tsx |   10 +-
 .../delivery-method/method-item.tsx           |    6 +-
 .../recipient/member-selector.tsx             |    2 +-
 .../delivery-method/test-email-sender.tsx     |   12 +-
 .../delivery-method/upgrade-modal.tsx         |    6 +-
 .../components/form-content-preview.tsx       |    6 +-
 .../components/single-run-form.tsx            |    8 +-
 .../human-input/components/user-action.tsx    |    2 +-
 .../workflow/nodes/human-input/panel.tsx      |    8 +-
 .../if-else/components/condition-add.tsx      |    2 +-
 .../condition-list/condition-operator.tsx     |    2 +-
 .../components/condition-number-input.tsx     |    6 +-
 .../if-else/components/condition-wrap.tsx     |   10 +-
 .../workflow/nodes/if-else/panel.tsx          |    4 +-
 .../components/chunk-structure/index.tsx      |    4 +-
 .../components/chunk-structure/selector.tsx   |    4 +-
 .../components/add-dataset.tsx                |    5 +-
 .../components/metadata/add-condition.tsx     |    6 +-
 .../condition-list/condition-operator.tsx     |    2 +-
 .../condition-list/condition-value-method.tsx |    2 +-
 .../metadata-filter-selector.tsx              |    2 +-
 .../components/metadata/metadata-trigger.tsx  |    4 +-
 .../components/retrieval-config.tsx           |    4 +-
 .../json-importer.tsx                         |   10 +-
 .../json-schema-config.tsx                    |   10 +-
 .../generated-result.tsx                      |   10 +-
 .../json-schema-generator/prompt-editor.tsx   |   14 +-
 .../visual-editor/add-field.tsx               |    2 +-
 .../edit-card/advanced-actions.tsx            |    2 +-
 .../nodes/llm/components/structure-output.tsx |    6 +-
 .../components/workflow/nodes/llm/panel.tsx   |   11 +-
 .../nodes/loop/components/condition-add.tsx   |    2 +-
 .../condition-list/condition-operator.tsx     |    2 +-
 .../components/condition-number-input.tsx     |    6 +-
 .../nodes/loop/components/condition-wrap.tsx  |    4 +-
 .../components/extract-parameter/update.tsx   |    9 +-
 .../components/workflow/nodes/start/panel.tsx |    9 +-
 .../nodes/template-transform/panel.tsx        |    9 +-
 .../nodes/tool/components/tool-form/item.tsx  |   10 +-
 .../components/trigger-form/item.tsx          |   10 +-
 .../plugins/link-editor-plugin/component.tsx  |    4 +-
 .../components/array-bool-list.tsx            |    2 +-
 .../components/array-value-list.tsx           |    2 +-
 .../components/variable-modal-trigger.tsx     |    2 +-
 .../components/variable-modal.sections.tsx    |   12 +-
 .../components/variable-modal.tsx             |    4 +-
 .../panel/env-panel/variable-modal.tsx        |   24 +-
 .../panel/env-panel/variable-trigger.tsx      |    2 +-
 .../workflow/panel/inputs-panel.tsx           |    4 +-
 .../context-menu/index.tsx                    |    2 +-
 .../delete-confirm-modal.tsx                  |    6 +-
 .../panel/version-history-panel/empty.tsx     |    4 +-
 .../restore-confirm-modal.tsx                 |    4 +-
 .../workflow/panel/workflow-preview.tsx       |   12 +-
 .../workflow/run/agent-log/agent-log-item.tsx |    8 +-
 .../run/agent-log/agent-log-nav-more.tsx      |    4 +-
 .../workflow/run/agent-log/agent-log-nav.tsx  |   12 +-
 .../iteration-log/iteration-log-trigger.tsx   |    4 +-
 .../run/loop-log/loop-log-trigger.tsx         |    4 +-
 .../run/retry-log/retry-log-trigger.tsx       |    2 +-
 .../components/workflow/update-dsl-modal.tsx  |   19 +-
 .../workflow/variable-inspect/group.tsx       |   10 +-
 .../workflow/variable-inspect/left.tsx        |    6 +-
 .../workflow/variable-inspect/listening.tsx   |    6 +-
 .../education-apply/education-apply-page.tsx  |   24 +-
 .../education-apply/expire-notice-modal.tsx   |   10 +-
 web/app/education-apply/user-info.tsx         |    8 +-
 .../education-apply/verify-state-modal.tsx    |   12 +-
 .../forgot-password/ChangePasswordForm.tsx    |    2 +-
 .../forgot-password/ForgotPasswordForm.tsx    |    2 +-
 web/app/init/InitPasswordPopup.tsx            |    4 +-
 web/app/install/installForm.tsx               |    2 +-
 web/app/reset-password/check-code/page.tsx    |   10 +-
 web/app/reset-password/page.tsx               |   10 +-
 web/app/reset-password/set-password/page.tsx  |   10 +-
 web/app/signin/check-code/page.tsx            |   10 +-
 .../signin/components/mail-and-code-auth.tsx  |    4 +-
 .../components/mail-and-password-auth.tsx     |    6 +-
 web/app/signin/components/social-auth.tsx     |    2 +-
 web/app/signin/components/sso-auth.tsx        |    2 +-
 web/app/signin/invite-settings/page.tsx       |   18 +-
 web/app/signin/one-more-step.tsx              |   10 +-
 web/app/signup/check-code/page.tsx            |   10 +-
 web/app/signup/components/input-mail.tsx      |   10 +-
 web/app/signup/set-password/page.tsx          |   10 +-
 web/app/styles/globals.css                    |    2 +-
 web/eslint-suppressions.json                  | 1239 -----------------
 444 files changed, 1636 insertions(+), 3169 deletions(-)
 delete mode 100644 web/app/components/base/button/__tests__/add-button.spec.tsx
 delete mode 100644 web/app/components/base/button/__tests__/sync-button.spec.tsx
 delete mode 100644 web/app/components/base/button/add-button.stories.tsx
 delete mode 100644 web/app/components/base/button/add-button.tsx
 delete mode 100644 web/app/components/base/button/sync-button.stories.tsx
 delete mode 100644 web/app/components/base/button/sync-button.tsx
 rename web/app/components/base/{ => ui}/button/__tests__/index.spec.tsx (93%)
 rename web/app/components/base/{ => ui}/button/index.css (66%)
 rename web/app/components/base/{ => ui}/button/index.stories.tsx (88%)
 rename web/app/components/base/{ => ui}/button/index.tsx (57%)

diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
index 72913b4934..caf6562a3e 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
@@ -5,7 +5,6 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
@@ -14,6 +13,7 @@ import {
   PortalToFollowElem,
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { addTracingConfig, removeTracingConfig, updateTracingConfig } from '@/service/apps'
 import { docURL } from './config'
@@ -621,7 +621,7 @@ const ProviderConfigModal: FC<Props> = ({
                       </div>
                       <div className="my-8 flex h-8 items-center justify-between">
                         <a
-                          className="flex items-center space-x-1 text-xs font-normal leading-[18px] text-[#155EEF]"
+                          className="flex items-center space-x-1 text-xs leading-[18px] font-normal text-[#155EEF]"
                           target="_blank"
                           href={docURL[type]}
                         >
diff --git a/web/app/(humanInputLayout)/form/[token]/form.tsx b/web/app/(humanInputLayout)/form/[token]/form.tsx
index 221420aade..898dab8f4a 100644
--- a/web/app/(humanInputLayout)/form/[token]/form.tsx
+++ b/web/app/(humanInputLayout)/form/[token]/form.tsx
@@ -1,5 +1,5 @@
 'use client'
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import type { FormInputItem, UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import type { SiteInfo } from '@/models/share'
 import type { HumanInputFormError } from '@/service/use-share'
@@ -13,12 +13,12 @@ import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import ContentItem from '@/app/components/base/chat/chat/answer/human-input-content/content-item'
 import ExpirationTime from '@/app/components/base/chat/chat/answer/human-input-content/expiration-time'
 import { getButtonStyle } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
 import Loading from '@/app/components/base/loading'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
+import { Button } from '@/app/components/base/ui/button'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useParams } from '@/next/navigation'
 import { useGetHumanInputForm, useSubmitHumanInputForm } from '@/service/use-share'
@@ -100,7 +100,7 @@ const FormContent = () => {
   if (success) {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
-        <div className="min-w-[480px] max-w-[640px]">
+        <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="h-[56px] w-[56px] shrink-0 rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiCheckboxCircleFill className="h-8 w-8 text-text-success" />
@@ -109,7 +109,7 @@ const FormContent = () => {
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.thanks', { ns: 'share' })}</div>
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.recorded', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 system-2xs-regular-uppercase text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
@@ -128,7 +128,7 @@ const FormContent = () => {
   if (expired) {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
-        <div className="min-w-[480px] max-w-[640px]">
+        <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiInformation2Fill className="h-8 w-8 text-text-accent" />
@@ -137,7 +137,7 @@ const FormContent = () => {
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.expired', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 system-2xs-regular-uppercase text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
@@ -156,7 +156,7 @@ const FormContent = () => {
   if (submitted) {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
-        <div className="min-w-[480px] max-w-[640px]">
+        <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiInformation2Fill className="h-8 w-8 text-text-accent" />
@@ -165,7 +165,7 @@ const FormContent = () => {
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.sorry', { ns: 'share' })}</div>
               <div className="title-4xl-semi-bold text-text-primary">{t('humanInput.completed', { ns: 'share' })}</div>
             </div>
-            <div className="system-2xs-regular-uppercase shrink-0 text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
+            <div className="shrink-0 system-2xs-regular-uppercase text-text-tertiary">{t('humanInput.submissionID', { id: token, ns: 'share' })}</div>
           </div>
           <div className="flex flex-row-reverse px-2 py-3">
             <div className={cn(
@@ -184,7 +184,7 @@ const FormContent = () => {
   if (rateLimitExceeded) {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
-        <div className="min-w-[480px] max-w-[640px]">
+        <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
@@ -210,7 +210,7 @@ const FormContent = () => {
   if (!formData) {
     return (
       <div className={cn('flex h-full w-full flex-col items-center justify-center')}>
-        <div className="min-w-[480px] max-w-[640px]">
+        <div className="max-w-[640px] min-w-[480px]">
           <div className="border-components-divider-subtle flex h-[320px] flex-col gap-4 radius-3xl border bg-chat-bubble-bg p-10 pb-9 shadow-lg backdrop-blur-xs">
             <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge p-3">
               <RiErrorWarningFill className="h-8 w-8 text-text-destructive" />
@@ -245,7 +245,7 @@ const FormContent = () => {
           background={site.icon_background}
           imageUrl={site.icon_url}
         />
-        <div className="system-xl-semibold grow text-text-primary">{site.title}</div>
+        <div className="grow system-xl-semibold text-text-primary">{site.title}</div>
       </div>
       <div className="h-0 w-full grow overflow-y-auto">
         <div className="border-components-divider-subtle radius-3xl border bg-chat-bubble-bg p-4 shadow-lg backdrop-blur-xs">
diff --git a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
index b71e6b4767..d19e5a7d2d 100644
--- a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
@@ -2,8 +2,8 @@
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
@@ -62,9 +62,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
         <RiMailSendFill className="h-6 w-6 text-2xl" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -76,7 +76,7 @@ export default function CheckCode() {
 
       <form action="">
         <input type="text" className="hidden" />
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 system-md-semibold text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className="mt-1" placeholder={t('checkCode.verificationCodePlaceholder', { ns: 'login' }) || ''} />
         <Button loading={loading} disabled={loading} className="my-3 w-full" variant="primary" onClick={verify}>{t('checkCode.verify', { ns: 'login' })}</Button>
         <Countdown onResend={resendCode} />
@@ -88,7 +88,7 @@ export default function CheckCode() {
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/(shareLayout)/webapp-reset-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/page.tsx
index a25b4bb4ef..cb6ece219c 100644
--- a/web/app/(shareLayout)/webapp-reset-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/page.tsx
@@ -3,8 +3,8 @@ import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
@@ -64,9 +64,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           {t('resetPasswordDesc', { ns: 'login' })}
         </p>
       </div>
@@ -74,7 +74,7 @@ export default function CheckCode() {
       <form onSubmit={noop}>
         <input type="text" className="hidden" />
         <div className="mb-2">
-          <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+          <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">{t('email', { ns: 'login' })}</label>
           <div className="mt-1">
             <Input id="email" type="email" disabled={loading} value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
           </div>
@@ -90,7 +90,7 @@ export default function CheckCode() {
         <div className="inline-block rounded-full bg-background-default-dimmed p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('backToLogin', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('backToLogin', { ns: 'login' })}</span>
       </Link>
     </div>
   )
diff --git a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
index bc8f651d17..5b89084ea1 100644
--- a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
@@ -3,8 +3,8 @@ import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
@@ -91,7 +91,7 @@ const ChangePasswordForm = () => {
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t('changePassword', { ns: 'login' })}
             </h2>
-            <p className="body-md-regular mt-2 text-text-secondary">
+            <p className="mt-2 body-md-regular text-text-secondary">
               {t('changePasswordTip', { ns: 'login' })}
             </p>
           </div>
@@ -100,7 +100,7 @@ const ChangePasswordForm = () => {
             <div className="bg-white">
               {/* Password */}
               <div className="mb-5">
-                <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="password" className="my-2 system-md-semibold text-text-secondary">
                   {t('account.newPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
@@ -122,11 +122,11 @@ const ChangePasswordForm = () => {
                     </Button>
                   </div>
                 </div>
-                <div className="body-xs-regular mt-1 text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
+                <div className="mt-1 body-xs-regular text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
               </div>
               {/* Confirm Password */}
               <div className="mb-5">
-                <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="confirmPassword" className="my-2 system-md-semibold text-text-secondary">
                   {t('account.confirmPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
diff --git a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
index e2296c5d20..b17fff4e52 100644
--- a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
@@ -3,8 +3,8 @@ import type { FormEvent } from 'react'
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
@@ -100,9 +100,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -113,7 +113,7 @@ export default function CheckCode() {
       </div>
 
       <form onSubmit={handleSubmit}>
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 system-md-semibold text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input
           ref={codeInputRef}
           id="code"
@@ -133,7 +133,7 @@ export default function CheckCode() {
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
index fbd6b216df..f600dba8b2 100644
--- a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
@@ -1,8 +1,8 @@
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
@@ -52,7 +52,7 @@ export default function MailAndCodeAuth() {
     <form onSubmit={noop}>
       <input type="text" className="hidden" />
       <div className="mb-2">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+        <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">{t('email', { ns: 'login' })}</label>
         <div className="mt-1">
           <Input id="email" type="email" value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
         </div>
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
index 1e9355e7ba..7fe5363927 100644
--- a/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
@@ -2,8 +2,8 @@
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
@@ -103,7 +103,7 @@ export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAut
   return (
     <form onSubmit={noop}>
       <div className="mb-3">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">
+        <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">
           {t('email', { ns: 'login' })}
         </label>
         <div className="mt-1">
diff --git a/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
index 3178c638cc..d8759cc1d6 100644
--- a/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
+++ b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { fetchMembersOAuth2SSOUrl, fetchMembersOIDCSSOUrl, fetchMembersSAMLSSOUrl } from '@/service/share'
diff --git a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
index d462ca6449..da1da8448b 100644
--- a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
+++ b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
@@ -10,10 +10,10 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ImageInput from '@/app/components/base/app-icon-picker/ImageInput'
 import getCroppedImg from '@/app/components/base/app-icon-picker/utils'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { useLocalFileUploader } from '@/app/components/base/image-uploader/hooks'
 import { Avatar } from '@/app/components/base/ui/avatar'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
@@ -151,7 +151,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
 
       <Dialog open={isShowDeleteConfirm} onOpenChange={open => !open && setIsShowDeleteConfirm(false)}>
         <DialogContent className="w-[362px]! p-6!">
-          <div className="mb-3 text-text-primary title-2xl-semi-bold">{t('avatar.deleteTitle', { ns: 'common' })}</div>
+          <div className="mb-3 title-2xl-semi-bold text-text-primary">{t('avatar.deleteTitle', { ns: 'common' })}</div>
           <p className="mb-8 text-text-secondary">{t('avatar.deleteDescription', { ns: 'common' })}</p>
 
           <div className="flex w-full items-center justify-center gap-2">
@@ -159,7 +159,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
 
-            <Button variant="warning" className="w-full" onClick={handleDeleteAvatar}>
+            <Button variant="primary" destructive className="w-full" onClick={handleDeleteAvatar}>
               {t('operation.delete', { ns: 'common' })}
             </Button>
           </div>
diff --git a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
index 9eab047732..1b91c801bd 100644
--- a/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
+++ b/web/app/account/(commonLayout)/account-page/email-change-modal.tsx
@@ -3,8 +3,8 @@ import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { useRouter } from '@/next/navigation'
@@ -183,19 +183,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
   return (
     <Dialog open={show} onOpenChange={open => !open && onClose()}>
       <DialogContent className="w-[420px]! p-6!">
-        <div className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
+        <div className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
           <RiCloseLine className="h-5 w-5 text-text-tertiary" />
         </div>
         {step === STEP.start && (
           <>
-            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.title', { ns: 'common' })}</div>
-            <div className="space-y-0.5 pb-2 pt-1">
-              <div className="text-text-warning body-md-medium">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
-              <div className="text-text-secondary body-md-regular">
+            <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('account.changeEmail.title', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pt-1 pb-2">
+              <div className="body-md-medium text-text-warning">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
+              <div className="body-md-regular text-text-secondary">
                 <Trans
                   i18nKey="account.changeEmail.content1"
                   ns="common"
-                  components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                  components={{ email: <span className="body-md-medium text-text-primary"></span> }}
                   values={{ email }}
                 />
               </div>
@@ -220,19 +220,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
         )}
         {step === STEP.verifyOrigin && (
           <>
-            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
-            <div className="space-y-0.5 pb-2 pt-1">
-              <div className="text-text-secondary body-md-regular">
+            <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pt-1 pb-2">
+              <div className="body-md-regular text-text-secondary">
                 <Trans
                   i18nKey="account.changeEmail.content2"
                   ns="common"
-                  components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                  components={{ email: <span className="body-md-medium text-text-primary"></span> }}
                   values={{ email }}
                 />
               </div>
             </div>
             <div className="pt-3">
-              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
               <Input
                 className="w-full!"
                 placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -257,25 +257,25 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
                 {t('operation.cancel', { ns: 'common' })}
               </Button>
             </div>
-            <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
+            <div className="mt-3 flex items-center gap-1 system-xs-regular text-text-tertiary">
               <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
               {time > 0 && (
                 <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
               )}
               {!time && (
-                <span onClick={sendCodeToOriginEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+                <span onClick={sendCodeToOriginEmail} className="cursor-pointer system-xs-medium text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
               )}
             </div>
           </>
         )}
         {step === STEP.newEmail && (
           <>
-            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
-            <div className="space-y-0.5 pb-2 pt-1">
-              <div className="text-text-secondary body-md-regular">{t('account.changeEmail.content3', { ns: 'common' })}</div>
+            <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pt-1 pb-2">
+              <div className="body-md-regular text-text-secondary">{t('account.changeEmail.content3', { ns: 'common' })}</div>
             </div>
             <div className="pt-3">
-              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
+              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
               <Input
                 className="w-full!"
                 placeholder={t('account.changeEmail.emailPlaceholder', { ns: 'common' })}
@@ -284,10 +284,10 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
                 destructive={newEmailExited || unAvailableEmail}
               />
               {newEmailExited && (
-                <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
+                <div className="mt-1 py-0.5 body-xs-regular text-text-destructive">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
               )}
               {unAvailableEmail && (
-                <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
+                <div className="mt-1 py-0.5 body-xs-regular text-text-destructive">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
               )}
             </div>
             <div className="mt-3 space-y-2">
@@ -310,19 +310,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
         )}
         {step === STEP.verifyNew && (
           <>
-            <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
-            <div className="space-y-0.5 pb-2 pt-1">
-              <div className="text-text-secondary body-md-regular">
+            <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
+            <div className="space-y-0.5 pt-1 pb-2">
+              <div className="body-md-regular text-text-secondary">
                 <Trans
                   i18nKey="account.changeEmail.content4"
                   ns="common"
-                  components={{ email: <span className="text-text-primary body-md-medium"></span> }}
+                  components={{ email: <span className="body-md-medium text-text-primary"></span> }}
                   values={{ email: mail }}
                 />
               </div>
             </div>
             <div className="pt-3">
-              <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
               <Input
                 className="w-full!"
                 placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -347,13 +347,13 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
                 {t('operation.cancel', { ns: 'common' })}
               </Button>
             </div>
-            <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
+            <div className="mt-3 flex items-center gap-1 system-xs-regular text-text-tertiary">
               <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
               {time > 0 && (
                 <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
               )}
               {!time && (
-                <span onClick={sendCodeToNewEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+                <span onClick={sendCodeToNewEmail} className="cursor-pointer system-xs-medium text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
               )}
             </div>
           </>
diff --git a/web/app/account/(commonLayout)/account-page/index.tsx b/web/app/account/(commonLayout)/account-page/index.tsx
index 536d457c0a..8ad1b45467 100644
--- a/web/app/account/(commonLayout)/account-page/index.tsx
+++ b/web/app/account/(commonLayout)/account-page/index.tsx
@@ -8,9 +8,9 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import PremiumBadge from '@/app/components/base/premium-badge'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import Collapse from '@/app/components/header/account-setting/collapse'
@@ -140,20 +140,20 @@ export default function AccountPage() {
             imageUrl={icon_url}
           />
         </div>
-        <div className="mt-[3px] text-text-secondary system-sm-medium">{item.name}</div>
+        <div className="mt-[3px] system-sm-medium text-text-secondary">{item.name}</div>
       </div>
     )
   }
 
   return (
     <>
-      <div className="pb-3 pt-2">
-        <h4 className="text-text-primary title-2xl-semi-bold">{t('account.myAccount', { ns: 'common' })}</h4>
+      <div className="pt-2 pb-3">
+        <h4 className="title-2xl-semi-bold text-text-primary">{t('account.myAccount', { ns: 'common' })}</h4>
       </div>
       <div className="mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
         <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size="3xl" />
         <div className="ml-4">
-          <p className="text-text-primary system-xl-semibold">
+          <p className="system-xl-semibold text-text-primary">
             {userProfile.name}
             {isEducationAccount && (
               <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
@@ -162,16 +162,16 @@ export default function AccountPage() {
               </PremiumBadge>
             )}
           </p>
-          <p className="text-text-tertiary system-xs-regular">{userProfile.email}</p>
+          <p className="system-xs-regular text-text-tertiary">{userProfile.email}</p>
         </div>
       </div>
       <div className="mb-8">
         <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
         <div className="mt-2 flex w-full items-center justify-between gap-2">
-          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled system-sm-regular">
+          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled">
             <span className="pl-1">{userProfile.name}</span>
           </div>
-          <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text system-sm-medium" onClick={handleEditName}>
+          <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 system-sm-medium text-components-button-tertiary-text" onClick={handleEditName}>
             {t('operation.edit', { ns: 'common' })}
           </div>
         </div>
@@ -179,11 +179,11 @@ export default function AccountPage() {
       <div className="mb-8">
         <div className={titleClassName}>{t('account.email', { ns: 'common' })}</div>
         <div className="mt-2 flex w-full items-center justify-between gap-2">
-          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled system-sm-regular">
+          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled">
             <span className="pl-1">{userProfile.email}</span>
           </div>
           {systemFeatures.enable_change_email && (
-            <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text system-sm-medium" onClick={() => setShowUpdateEmail(true)}>
+            <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 system-sm-medium text-components-button-tertiary-text" onClick={() => setShowUpdateEmail(true)}>
               {t('operation.change', { ns: 'common' })}
             </div>
           )}
@@ -193,8 +193,8 @@ export default function AccountPage() {
         systemFeatures.enable_email_password_login && (
           <div className="mb-8 flex justify-between gap-2">
             <div>
-              <div className="mb-1 text-text-secondary system-sm-semibold">{t('account.password', { ns: 'common' })}</div>
-              <div className="mb-2 text-text-tertiary body-xs-regular">{t('account.passwordTip', { ns: 'common' })}</div>
+              <div className="mb-1 system-sm-semibold text-text-secondary">{t('account.password', { ns: 'common' })}</div>
+              <div className="mb-2 body-xs-regular text-text-tertiary">{t('account.passwordTip', { ns: 'common' })}</div>
             </div>
             <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</Button>
           </div>
@@ -218,7 +218,7 @@ export default function AccountPage() {
         editNameModalVisible && (
           <Dialog open={editNameModalVisible} onOpenChange={open => !open && setEditNameModalVisible(false)}>
             <DialogContent className="w-[420px]! p-6!">
-              <div className="mb-6 text-text-primary title-2xl-semi-bold">{t('account.editName', { ns: 'common' })}</div>
+              <div className="mb-6 title-2xl-semi-bold text-text-primary">{t('account.editName', { ns: 'common' })}</div>
               <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
               <Input
                 className="mt-2"
@@ -243,7 +243,7 @@ export default function AccountPage() {
         editPasswordModalVisible && (
           <Dialog open={editPasswordModalVisible} onOpenChange={open => !open && (setEditPasswordModalVisible(false), resetPasswordForm())}>
             <DialogContent className="w-[420px]! p-6!">
-              <div className="mb-6 text-text-primary title-2xl-semi-bold">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
+              <div className="mb-6 title-2xl-semi-bold text-text-primary">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
               {userProfile.is_password_set && (
                 <>
                   <div className={titleClassName}>{t('account.currentPassword', { ns: 'common' })}</div>
@@ -266,7 +266,7 @@ export default function AccountPage() {
                   </div>
                 </>
               )}
-              <div className="mt-8 text-text-secondary system-sm-semibold">
+              <div className="mt-8 system-sm-semibold text-text-secondary">
                 {userProfile.is_password_set ? t('account.newPassword', { ns: 'common' }) : t('account.password', { ns: 'common' })}
               </div>
               <div className="relative mt-2">
@@ -285,7 +285,7 @@ export default function AccountPage() {
                   </Button>
                 </div>
               </div>
-              <div className="mt-8 text-text-secondary system-sm-semibold">{t('account.confirmPassword', { ns: 'common' })}</div>
+              <div className="mt-8 system-sm-semibold text-text-secondary">{t('account.confirmPassword', { ns: 'common' })}</div>
               <div className="relative mt-2">
                 <Input
                   type={showConfirmPassword ? 'text' : 'password'}
diff --git a/web/app/account/(commonLayout)/delete-account/components/check-email.tsx b/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
index e0f00189b2..3c7b7112f3 100644
--- a/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/check-email.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import Link from '@/next/link'
 import { useSendDeleteAccountEmail } from '../state'
@@ -30,14 +30,14 @@ export default function CheckEmail(props: DeleteAccountProps) {
 
   return (
     <>
-      <div className="body-md-medium py-1 text-text-destructive">
+      <div className="py-1 body-md-medium text-text-destructive">
         {t('account.deleteTip', { ns: 'common' })}
       </div>
-      <div className="body-md-regular pb-2 pt-1 text-text-secondary">
+      <div className="pt-1 pb-2 body-md-regular text-text-secondary">
         {t('account.deletePrivacyLinkTip', { ns: 'common' })}
         <Link href="https://dify.ai/privacy" className="text-text-accent">{t('account.deletePrivacyLink', { ns: 'common' })}</Link>
       </div>
-      <label className="system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary">{t('account.deleteLabel', { ns: 'common' })}</label>
+      <label className="mt-3 mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('account.deleteLabel', { ns: 'common' })}</label>
       <Input
         placeholder={t('account.deletePlaceholder', { ns: 'common' }) as string}
         onChange={(e) => {
diff --git a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
index 60bd7e5c0d..9690bf8ed1 100644
--- a/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import CustomDialog from '@/app/components/base/dialog'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { useRouter } from '@/next/navigation'
@@ -54,7 +54,7 @@ export default function FeedBack(props: DeleteAccountProps) {
       className="max-w-[480px]"
       footer={false}
     >
-      <label className="system-sm-semibold mb-1 mt-3 flex items-center text-text-secondary">{t('account.feedbackLabel', { ns: 'common' })}</label>
+      <label className="mt-3 mb-1 flex items-center system-sm-semibold text-text-secondary">{t('account.feedbackLabel', { ns: 'common' })}</label>
       <Textarea
         rows={6}
         value={userFeedback}
diff --git a/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx b/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
index 5d76f13f34..7e14d889d9 100644
--- a/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import Countdown from '@/app/components/signin/countdown'
 import Link from '@/next/link'
 import { useAccountDeleteStore, useConfirmDeleteAccount, useSendDeleteAccountEmail } from '../state'
@@ -36,14 +36,14 @@ export default function VerifyEmail(props: DeleteAccountProps) {
   }, [emailToken, verificationCode, confirmDeleteAccount, props])
   return (
     <>
-      <div className="body-md-medium pt-1 text-text-destructive">
+      <div className="pt-1 body-md-medium text-text-destructive">
         {t('account.deleteTip', { ns: 'common' })}
       </div>
-      <div className="body-md-regular pb-2 pt-1 text-text-secondary">
+      <div className="pt-1 pb-2 body-md-regular text-text-secondary">
         {t('account.deletePrivacyLinkTip', { ns: 'common' })}
         <Link href="https://dify.ai/privacy" className="text-text-accent">{t('account.deletePrivacyLink', { ns: 'common' })}</Link>
       </div>
-      <label className="system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary">{t('account.verificationLabel', { ns: 'common' })}</label>
+      <label className="mt-3 mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('account.verificationLabel', { ns: 'common' })}</label>
       <Input
         minLength={6}
         maxLength={6}
@@ -53,7 +53,7 @@ export default function VerifyEmail(props: DeleteAccountProps) {
         }}
       />
       <div className="mt-3 flex w-full flex-col gap-2">
-        <Button className="w-full" disabled={shouldButtonDisabled} loading={isDeleting} variant="warning" onClick={handleConfirm}>{t('account.permanentlyDeleteButton', { ns: 'common' })}</Button>
+        <Button className="w-full" disabled={shouldButtonDisabled} loading={isDeleting} variant="primary" destructive onClick={handleConfirm}>{t('account.permanentlyDeleteButton', { ns: 'common' })}</Button>
         <Button className="w-full" onClick={props.onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
         <Countdown onResend={sendEmail} />
       </div>
diff --git a/web/app/account/(commonLayout)/header.tsx b/web/app/account/(commonLayout)/header.tsx
index e29f1b267a..688a1d7729 100644
--- a/web/app/account/(commonLayout)/header.tsx
+++ b/web/app/account/(commonLayout)/header.tsx
@@ -2,8 +2,8 @@
 import { RiArrowRightUpLine, RiRobot2Line } from '@remixicon/react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
+import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useRouter } from '@/next/navigation'
 import Avatar from './avatar'
@@ -32,10 +32,10 @@ const Header = () => {
             : <DifyLogo />}
         </div>
         <div className="h-4 w-px origin-center rotate-[11.31deg] bg-divider-regular" />
-        <p className="title-3xl-semi-bold relative mt-[-2px] text-text-primary">{t('account.account', { ns: 'common' })}</p>
+        <p className="relative mt-[-2px] title-3xl-semi-bold text-text-primary">{t('account.account', { ns: 'common' })}</p>
       </div>
       <div className="flex shrink-0 items-center gap-3">
-        <Button className="system-sm-medium gap-2 px-3 py-2" onClick={goToStudio}>
+        <Button className="gap-2 px-3 py-2 system-sm-medium" onClick={goToStudio}>
           <RiRobot2Line className="h-4 w-4" />
           <p>{t('account.studio', { ns: 'common' })}</p>
           <RiArrowRightUpLine className="h-4 w-4" />
diff --git a/web/app/account/oauth/authorize/page.tsx b/web/app/account/oauth/authorize/page.tsx
index b0b7f557a4..fe24afe7ff 100644
--- a/web/app/account/oauth/authorize/page.tsx
+++ b/web/app/account/oauth/authorize/page.tsx
@@ -10,9 +10,9 @@ import {
 import * as React from 'react'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
 import { Avatar } from '@/app/components/base/ui/avatar'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { setPostLoginRedirect } from '@/app/signin/utils/post-login-redirect'
@@ -122,13 +122,13 @@ export default function OAuthAuthorize() {
         </div>
       )}
 
-      <div className={`mb-4 mt-5 flex flex-col gap-2 ${isLoggedIn ? 'pb-2' : ''}`}>
+      <div className={`mt-5 mb-4 flex flex-col gap-2 ${isLoggedIn ? 'pb-2' : ''}`}>
         <div className="title-4xl-semi-bold">
           {isLoggedIn && <div className="text-text-primary">{t('connect', { ns: 'oauth' })}</div>}
           <div className="text-(--color-saas-dify-blue-inverted)">{authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })}</div>
           {!isLoggedIn && <div className="text-text-primary">{t('tips.notLoggedIn', { ns: 'oauth' })}</div>}
         </div>
-        <div className="text-text-secondary body-md-regular">{isLoggedIn ? `${authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })} ${t('tips.loggedIn', { ns: 'oauth' })}` : t('tips.needLogin', { ns: 'oauth' })}</div>
+        <div className="body-md-regular text-text-secondary">{isLoggedIn ? `${authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('unknownApp', { ns: 'oauth' })} ${t('tips.loggedIn', { ns: 'oauth' })}` : t('tips.needLogin', { ns: 'oauth' })}</div>
       </div>
 
       {isLoggedIn && userProfile && (
@@ -137,7 +137,7 @@ export default function OAuthAuthorize() {
             <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size="lg" />
             <div>
               <div className="system-md-semi-bold text-text-secondary">{userProfile.name}</div>
-              <div className="text-text-tertiary system-xs-regular">{userProfile.email}</div>
+              <div className="system-xs-regular text-text-tertiary">{userProfile.email}</div>
             </div>
           </div>
           <Button variant="tertiary" size="small" onClick={onLoginSwitchClick}>{t('switchAccount', { ns: 'oauth' })}</Button>
@@ -149,7 +149,7 @@ export default function OAuthAuthorize() {
           {authAppInfo!.scope.split(/\s+/).filter(Boolean).map((scope: string) => {
             const Icon = SCOPE_INFO_MAP[scope]
             return (
-              <div key={scope} className="flex items-center gap-2 text-text-secondary body-sm-medium">
+              <div key={scope} className="flex items-center gap-2 body-sm-medium text-text-secondary">
                 {Icon ? <Icon.icon className="h-4 w-4" /> : <RiAccountCircleLine className="h-4 w-4" />}
                 {Icon.label}
               </div>
@@ -182,7 +182,7 @@ export default function OAuthAuthorize() {
           </defs>
         </svg>
       </div>
-      <div className="mt-3 text-text-tertiary system-xs-regular">{t('tips.common', { ns: 'oauth' })}</div>
+      <div className="mt-3 system-xs-regular text-text-tertiary">{t('tips.common', { ns: 'oauth' })}</div>
     </div>
   )
 }
diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index d5274d52f0..62dd7f885f 100644
--- a/web/app/activate/activateForm.tsx
+++ b/web/app/activate/activateForm.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import useDocumentTitle from '@/hooks/use-document-title'
 
 import { useRouter, useSearchParams } from '@/next/navigation'
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
index 3082eb3789..2171974253 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-info-detail-panel.spec.tsx
@@ -35,8 +35,8 @@ vi.mock('@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view',
   ),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, className, size, variant }: {
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, className, size, variant }: {
     children: React.ReactNode
     onClick?: () => void
     className?: string
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
index 1df23c2d20..2c5b133a74 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-operations.spec.tsx
@@ -4,8 +4,8 @@ import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import AppOperations from '../app-operations'
 
-vi.mock('../../../base/button', () => ({
-  default: ({ children, onClick, className, size, variant, id, tabIndex, ...rest }: {
+vi.mock('../../../base/ui/button', () => ({
+  Button: ({ children, onClick, className, size, variant, id, tabIndex, ...rest }: {
     'children': React.ReactNode
     'onClick'?: () => void
     'className'?: string
diff --git a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
index 4aacc0cdb1..624630b179 100644
--- a/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-detail-panel.tsx
@@ -13,8 +13,8 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'
-import Button from '@/app/components/base/button'
 import ContentDialog from '@/app/components/base/content-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import { AppModeEnum } from '@/types/app'
 import AppIcon from '../../base/app-icon'
 import { getAppModeLabel } from './app-mode-labels'
@@ -97,7 +97,7 @@ const AppInfoDetailPanel = ({
     <ContentDialog
       show={show}
       onClose={onClose}
-      className="absolute bottom-2 left-2 top-2 flex w-[420px] flex-col rounded-2xl p-0!"
+      className="absolute top-2 bottom-2 left-2 flex w-[420px] flex-col rounded-2xl p-0!"
     >
       <div className="flex shrink-0 flex-col items-start justify-center gap-3 self-stretch p-4">
         <div className="flex items-center gap-3 self-stretch">
@@ -109,14 +109,14 @@ const AppInfoDetailPanel = ({
             imageUrl={appDetail.icon_url}
           />
           <div className="flex flex-1 flex-col items-start justify-center overflow-hidden">
-            <div className="w-full truncate text-text-secondary system-md-semibold">{appDetail.name}</div>
-            <div className="text-text-tertiary system-2xs-medium-uppercase">
+            <div className="w-full truncate system-md-semibold text-text-secondary">{appDetail.name}</div>
+            <div className="system-2xs-medium-uppercase text-text-tertiary">
               {getAppModeLabel(appDetail.mode, t)}
             </div>
           </div>
         </div>
         {appDetail.description && (
-          <div className="overflow-wrap-anywhere max-h-[105px] w-full max-w-full overflow-y-auto whitespace-normal wrap-break-word text-text-tertiary system-xs-regular">
+          <div className="overflow-wrap-anywhere max-h-[105px] w-full max-w-full overflow-y-auto system-xs-regular wrap-break-word whitespace-normal text-text-tertiary">
             {appDetail.description}
           </div>
         )}
@@ -140,7 +140,7 @@ const AppInfoDetailPanel = ({
             onClick={switchOperation.onClick}
           >
             {switchOperation.icon}
-            <span className="text-text-tertiary system-sm-medium">{switchOperation.title}</span>
+            <span className="system-sm-medium text-text-tertiary">{switchOperation.title}</span>
           </Button>
         </div>
       )}
diff --git a/web/app/components/app-sidebar/app-info/app-operations.tsx b/web/app/components/app-sidebar/app-info/app-operations.tsx
index e3cf233fea..95ede2decf 100644
--- a/web/app/components/app-sidebar/app-info/app-operations.tsx
+++ b/web/app/components/app-sidebar/app-info/app-operations.tsx
@@ -2,7 +2,7 @@ import type { JSX } from 'react'
 import { RiMoreLine } from '@remixicon/react'
 import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
 
 export type Operation = {
@@ -134,7 +134,7 @@ const AppOperations = ({
             tabIndex={-1}
           >
             {cloneElement(operation.icon, { className: 'h-3.5 w-3.5 text-components-button-secondary-text' })}
-            <span className="text-components-button-secondary-text system-xs-medium">
+            <span className="system-xs-medium text-components-button-secondary-text">
               {operation.title}
             </span>
           </Button>
@@ -147,7 +147,7 @@ const AppOperations = ({
           tabIndex={-1}
         >
           <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
-          <span className="text-components-button-secondary-text system-xs-medium">
+          <span className="system-xs-medium text-components-button-secondary-text">
             {t('operation.more', { ns: 'common' })}
           </span>
         </Button>
@@ -163,7 +163,7 @@ const AppOperations = ({
             onClick={operation.onClick}
           >
             {cloneElement(operation.icon, { className: 'h-3.5 w-3.5 text-components-button-secondary-text' })}
-            <span className="text-components-button-secondary-text system-xs-medium">
+            <span className="system-xs-medium text-components-button-secondary-text">
               {operation.title}
             </span>
           </Button>
@@ -182,7 +182,7 @@ const AppOperations = ({
                 className="gap-px"
               >
                 <RiMoreLine className="h-3.5 w-3.5 text-components-button-secondary-text" />
-                <span className="text-components-button-secondary-text system-xs-medium">
+                <span className="system-xs-medium text-components-button-secondary-text">
                   {t('operation.more', { ns: 'common' })}
                 </span>
               </Button>
@@ -200,7 +200,7 @@ const AppOperations = ({
                         onClick={item.onClick}
                       >
                         {cloneElement(item.icon, { className: 'h-4 w-4 text-text-tertiary' })}
-                        <span className="text-text-secondary system-md-regular">{item.title}</span>
+                        <span className="system-md-regular text-text-secondary">{item.title}</span>
                       </div>
                     ))}
               </div>
diff --git a/web/app/components/app-sidebar/toggle-button.tsx b/web/app/components/app-sidebar/toggle-button.tsx
index 811e979b89..8c17f7ad88 100644
--- a/web/app/components/app-sidebar/toggle-button.tsx
+++ b/web/app/components/app-sidebar/toggle-button.tsx
@@ -1,8 +1,8 @@
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
-import Button from '../base/button'
 import Tooltip from '../base/tooltip'
 import ShortcutsName from '../workflow/shortcuts-name'
 
@@ -19,7 +19,7 @@ const TooltipContent = ({
 
   return (
     <div className="flex items-center gap-x-1">
-      <span className="px-0.5 text-text-secondary system-xs-medium">{expand ? t('sidebar.collapseSidebar', { ns: 'layout' }) : t('sidebar.expandSidebar', { ns: 'layout' })}</span>
+      <span className="px-0.5 system-xs-medium text-text-secondary">{expand ? t('sidebar.collapseSidebar', { ns: 'layout' }) : t('sidebar.expandSidebar', { ns: 'layout' })}</span>
       <ShortcutsName keys={TOGGLE_SHORTCUT} textColor="secondary" />
     </div>
   )
diff --git a/web/app/components/app/annotation/add-annotation-modal/index.tsx b/web/app/components/app/annotation/add-annotation-modal/index.tsx
index 7a5081a296..dbdf909c0a 100644
--- a/web/app/components/app/annotation/add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/index.tsx
@@ -4,9 +4,9 @@ import type { AnnotationItemBasic } from '../type'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Drawer from '@/app/components/base/drawer-plus'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
@@ -92,11 +92,11 @@ const AddAnnotationModal: FC<Props> = ({
           (
             <div>
               {isAnnotationFull && (
-                <div className="mb-4 mt-6 px-6">
+                <div className="mt-6 mb-4 px-6">
                   <AnnotationFull />
                 </div>
               )}
-              <div className="system-sm-medium flex h-16 items-center justify-between rounded-bl-xl rounded-br-xl border-t border-divider-subtle bg-background-section-burn px-4 text-text-tertiary">
+              <div className="flex h-16 items-center justify-between rounded-br-xl rounded-bl-xl border-t border-divider-subtle bg-background-section-burn px-4 system-sm-medium text-text-tertiary">
                 <div
                   className="flex items-center space-x-2"
                 >
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index 4c0be05fff..9978887820 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -4,8 +4,8 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { cn } from '@/utils/classnames'
 
@@ -100,7 +100,7 @@ const CSVUploader: FC<Props> = ({
                 <span className="cursor-pointer text-text-accent" onClick={selectHandle}>{t('batchModal.browse', { ns: 'appAnnotation' })}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className="absolute left-0 top-0 h-full w-full" />}
+            {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
           </div>
         )}
         {file && (
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
index 75e854debc..20a35714e8 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.tsx
@@ -5,8 +5,8 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
@@ -89,8 +89,8 @@ const BatchModal: FC<IBatchModalProps> = ({
 
   return (
     <Modal isShow={isShow} onClose={noop} className="max-w-[520px]! rounded-xl! px-8 py-6">
-      <div className="system-xl-medium relative pb-1 text-text-primary">{t('batchModal.title', { ns: 'appAnnotation' })}</div>
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onCancel}>
+      <div className="relative pb-1 system-xl-medium text-text-primary">{t('batchModal.title', { ns: 'appAnnotation' })}</div>
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onCancel}>
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
       <CSVUploader
@@ -106,7 +106,7 @@ const BatchModal: FC<IBatchModalProps> = ({
       )}
 
       <div className="mt-[28px] flex justify-end pt-6">
-        <Button className="system-sm-medium mr-2 text-text-tertiary" onClick={onCancel}>
+        <Button className="mr-2 system-sm-medium text-text-tertiary" onClick={onCancel}>
           {t('batchModal.cancel', { ns: 'appAnnotation' })}
         </Button>
         <Button
diff --git a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
index 514d2c07ba..152724e0e9 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
@@ -4,9 +4,9 @@ import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 export enum EditItemType {
@@ -21,7 +21,7 @@ type Props = {
 }
 
 export const EditTitle: FC<{ className?: string, title: string }> = ({ className, title }) => (
-  <div className={cn(className, 'system-xs-medium flex h-[18px] items-center text-text-tertiary')}>
+  <div className={cn(className, 'flex h-[18px] items-center system-xs-medium text-text-tertiary')}>
     <RiEditFill className="mr-1 h-3.5 w-3.5" />
     <div>{title}</div>
     <div
@@ -75,7 +75,7 @@ const EditItem: FC<Props> = ({
         {avatar}
       </div>
       <div className="grow">
-        <div className="system-xs-semibold mb-1 text-text-primary">{name}</div>
+        <div className="mb-1 system-xs-semibold text-text-primary">{name}</div>
         <div className="system-sm-regular text-text-primary">{content}</div>
         {!isEdit
           ? (
@@ -83,13 +83,13 @@ const EditItem: FC<Props> = ({
                 {showNewContent && (
                   <div className="mt-3">
                     <EditTitle title={editTitle} />
-                    <div className="system-sm-regular mt-1 text-text-primary">{newContent}</div>
+                    <div className="mt-1 system-sm-regular text-text-primary">{newContent}</div>
                   </div>
                 )}
                 <div className="mt-2 flex items-center">
                   {!readonly && (
                     <div
-                      className="system-xs-medium flex cursor-pointer items-center space-x-1 text-text-accent"
+                      className="flex cursor-pointer items-center space-x-1 system-xs-medium text-text-accent"
                       onClick={() => {
                         setIsEdit(true)
                       }}
@@ -100,7 +100,7 @@ const EditItem: FC<Props> = ({
                   )}
 
                   {showNewContent && (
-                    <div className="system-xs-medium ml-2 flex items-center text-text-tertiary">
+                    <div className="ml-2 flex items-center system-xs-medium text-text-tertiary">
                       <div className="mr-2">·</div>
                       <div
                         className="flex cursor-pointer items-center space-x-1"
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 5ff90f9431..9dfb3bad42 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -16,13 +16,13 @@ import {
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { FileDownload02, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
 import CustomPopover from '@/app/components/base/popover'
+import { Button } from '@/app/components/base/ui/button'
 import { useLocale } from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
-import { clearAllAnnotations, fetchExportAnnotationList } from '@/service/annotation'
 
+import { clearAllAnnotations, fetchExportAnnotationList } from '@/service/annotation'
 import { cn } from '@/utils/classnames'
 import { downloadBlob } from '@/utils/download'
-import Button from '../../../base/button'
 import AddAnnotationModal from '../add-annotation-modal'
 import BatchAddModal from '../batch-add-annotation-modal'
 import ClearAllAnnotationsConfirmModal from '../clear-all-annotations-confirm-modal'
@@ -103,12 +103,12 @@ const HeaderOptions: FC<Props> = ({
           }}
         >
           <FilePlus02 className="h-4 w-4 text-text-tertiary" />
-          <span className="system-sm-regular grow text-left text-text-secondary">{t('table.header.bulkImport', { ns: 'appAnnotation' })}</span>
+          <span className="grow text-left system-sm-regular text-text-secondary">{t('table.header.bulkImport', { ns: 'appAnnotation' })}</span>
         </button>
         <Menu as="div" className="relative h-full w-full">
           <MenuButton className="mx-1 flex h-9 w-[calc(100%-8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50">
             <FileDownload02 className="h-4 w-4 text-text-tertiary" />
-            <span className="system-sm-regular grow text-left text-text-secondary">{t('table.header.bulkExport', { ns: 'appAnnotation' })}</span>
+            <span className="grow text-left system-sm-regular text-text-secondary">{t('table.header.bulkExport', { ns: 'appAnnotation' })}</span>
             <ChevronRight className="h-[14px] w-[14px] shrink-0 text-text-tertiary" />
           </MenuButton>
           <Transition
@@ -122,7 +122,7 @@ const HeaderOptions: FC<Props> = ({
           >
             <MenuItems
               className={cn(
-                'absolute left-1 top-px z-10 min-w-[100px] origin-top-right -translate-x-full rounded-xl border-[0.5px] border-components-panel-on-panel-item-bg bg-components-panel-bg py-1 shadow-xs',
+                'absolute top-px left-1 z-10 min-w-[100px] origin-top-right -translate-x-full rounded-xl border-[0.5px] border-components-panel-on-panel-item-bg bg-components-panel-bg py-1 shadow-xs',
               )}
             >
               <CSVDownloader
@@ -135,11 +135,11 @@ const HeaderOptions: FC<Props> = ({
                 ]}
               >
                 <button type="button" disabled={annotationUnavailable} className="mx-1 flex h-9 w-[calc(100%-8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50">
-                  <span className="system-sm-regular grow text-left text-text-secondary">CSV</span>
+                  <span className="grow text-left system-sm-regular text-text-secondary">CSV</span>
                 </button>
               </CSVDownloader>
               <button type="button" disabled={annotationUnavailable} className={cn('mx-1 flex h-9 w-[calc(100%-8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 hover:bg-components-panel-on-panel-item-bg-hover disabled:opacity-50', 'border-0!')} onClick={JSONLOutput}>
-                <span className="system-sm-regular grow text-left text-text-secondary">JSONL</span>
+                <span className="grow text-left system-sm-regular text-text-secondary">JSONL</span>
               </button>
             </MenuItems>
           </Transition>
@@ -150,7 +150,7 @@ const HeaderOptions: FC<Props> = ({
           className="mx-1 flex h-9 w-[calc(100%-8px)] cursor-pointer items-center space-x-2 rounded-lg px-3 py-2 text-red-600 hover:bg-red-50 disabled:opacity-50"
         >
           <RiDeleteBinLine className="h-4 w-4" />
-          <span className="system-sm-regular grow text-left">
+          <span className="grow text-left system-sm-regular">
             {t('table.header.clearAll', { ns: 'appAnnotation' })}
           </span>
         </button>
diff --git a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
index b25fb94191..f4c960f1bf 100644
--- a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
+++ b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
@@ -6,12 +6,12 @@ import { useDebounce } from 'ahooks'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/app/components/base/ui/avatar'
+import { Button } from '@/app/components/base/ui/button'
 import { useSelector } from '@/context/app-context'
 import { SubjectType } from '@/models/access-control'
 import { useSearchForWhiteListCandidates } from '@/service/access-control'
 import { cn } from '@/utils/classnames'
 import useAccessControlStore from '../../../../context/access-control-store'
-import Button from '../../base/button'
 import Checkbox from '../../base/checkbox'
 import Input from '../../base/input'
 import Loading from '../../base/loading'
@@ -118,7 +118,7 @@ function SelectedGroupsBreadCrumb() {
       <span className={cn('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('accessControlDialog.operateGroupAndMember.allMembers', { ns: 'app' })}</span>
       {selectedGroupsForBreadcrumb.map((group, index) => {
         return (
-          <div key={index} className="system-xs-regular flex items-center gap-x-0.5 text-text-tertiary">
+          <div key={index} className="flex items-center gap-x-0.5 system-xs-regular text-text-tertiary">
             <span>/</span>
             <span className={index === selectedGroupsForBreadcrumb.length - 1 ? '' : 'cursor-pointer text-text-accent'} onClick={() => handleBreadCrumbClick(index)}>{group.name}</span>
           </div>
@@ -161,7 +161,7 @@ function GroupItem({ group }: GroupItemProps) {
             <RiOrganizationChart className="h-[14px] w-[14px] text-components-avatar-shape-fill-stop-0" />
           </div>
         </div>
-        <p className="system-sm-medium mr-1 text-text-secondary">{group.name}</p>
+        <p className="mr-1 system-sm-medium text-text-secondary">{group.name}</p>
         <p className="system-xs-regular text-text-tertiary">{group.groupSize}</p>
       </div>
       <Button
@@ -206,7 +206,7 @@ function MemberItem({ member }: MemberItemProps) {
             <Avatar size="xxs" avatar={null} name={member.name} />
           </div>
         </div>
-        <p className="system-sm-medium mr-1 text-text-secondary">{member.name}</p>
+        <p className="mr-1 system-sm-medium text-text-secondary">{member.name}</p>
         {currentUser.email === member.email && (
           <p className="system-xs-regular text-text-tertiary">
             (
diff --git a/web/app/components/app/app-access-control/index.tsx b/web/app/components/app/app-access-control/index.tsx
index 0c1c64eadc..aeaae3d46d 100644
--- a/web/app/components/app/app-access-control/index.tsx
+++ b/web/app/components/app/app-access-control/index.tsx
@@ -5,12 +5,12 @@ import { Description as DialogDescription, DialogTitle } from '@headlessui/react
 import { RiBuildingLine, RiGlobalLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AccessMode, SubjectType } from '@/models/access-control'
 import { useUpdateAccessMode } from '@/service/access-control'
 import useAccessControlStore from '../../../../context/access-control-store'
-import Button from '../../base/button'
 import AccessControlDialog from './access-control-dialog'
 import AccessControlItem from './access-control-item'
 import SpecificGroupsOrMembers, { WebAppSSONotEnabledTip } from './specific-groups-or-members'
@@ -67,9 +67,9 @@ export default function AccessControl(props: AccessControlProps) {
   return (
     <AccessControlDialog show onClose={onClose}>
       <div className="flex flex-col gap-y-3">
-        <div className="pb-3 pl-6 pr-14 pt-6">
+        <div className="pt-6 pr-14 pb-3 pl-6">
           <DialogTitle className="title-2xl-semi-bold text-text-primary">{t('accessControlDialog.title', { ns: 'app' })}</DialogTitle>
-          <DialogDescription className="system-xs-regular mt-1 text-text-tertiary">{t('accessControlDialog.description', { ns: 'app' })}</DialogDescription>
+          <DialogDescription className="mt-1 system-xs-regular text-text-tertiary">{t('accessControlDialog.description', { ns: 'app' })}</DialogDescription>
         </div>
         <div className="flex flex-col gap-y-1 px-6 pb-3">
           <div className="leading-6">
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 8792a1c507..9c50a98124 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -13,12 +13,12 @@ import { useTranslation } from 'react-i18next'
 import EmbeddedModal from '@/app/components/app/overview/embedded'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
@@ -224,7 +224,7 @@ const AppPublisher = ({
         <PortalToFollowElemTrigger onClick={handleTrigger}>
           <Button
             variant="primary"
-            className="py-2 pl-3 pr-2"
+            className="py-2 pr-2 pl-3"
             disabled={disabled}
           >
             {t('common.publish', { ns: 'workflow' })}
diff --git a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
index edc2bd32a8..b4ad0423b0 100644
--- a/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
+++ b/web/app/components/app/app-publisher/publish-with-multiple-model.tsx
@@ -4,12 +4,12 @@ import type { Model, ModelItem } from '@/app/components/header/account-setting/m
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useProviderContext } from '@/context/provider-context'
 import ModelIcon from '../../header/account-setting/model-provider-page/model-icon'
diff --git a/web/app/components/app/app-publisher/sections.tsx b/web/app/components/app/app-publisher/sections.tsx
index aa9af3bae0..d4864a3763 100644
--- a/web/app/components/app/app-publisher/sections.tsx
+++ b/web/app/components/app/app-publisher/sections.tsx
@@ -3,10 +3,10 @@ import type { ModelAndParameter } from '../configuration/debug/types'
 import type { AppPublisherProps } from './index'
 import type { PublishWorkflowParams } from '@/types/workflow'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { CodeBrowser } from '@/app/components/base/icons/src/vender/line/development'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Tooltip,
   TooltipContent,
diff --git a/web/app/components/app/app-publisher/version-info-modal.tsx b/web/app/components/app/app-publisher/version-info-modal.tsx
index a1d6edcf04..d5f4c9c189 100644
--- a/web/app/components/app/app-publisher/version-info-modal.tsx
+++ b/web/app/components/app/app-publisher/version-info-modal.tsx
@@ -5,8 +5,8 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
-import Button from '../../base/button'
 import Input from '../../base/input'
 import Textarea from '../../base/textarea'
 
@@ -67,17 +67,17 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
 
   return (
     <Modal className="p-0" isShow={isOpen} onClose={onClose}>
-      <div className="relative w-full p-6 pb-4 pr-14">
+      <div className="relative w-full p-6 pr-14 pb-4">
         <div className="title-2xl-semi-bold text-text-primary first-letter:capitalize">
           {versionInfo?.marked_name ? t('versionHistory.editVersionInfo', { ns: 'workflow' }) : t('versionHistory.nameThisVersion', { ns: 'workflow' })}
         </div>
-        <div className="absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={onClose}>
+        <div className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center p-1.5" onClick={onClose}>
           <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
         </div>
       </div>
       <div className="flex flex-col gap-y-4 px-6 py-3">
         <div className="flex flex-col gap-y-1">
-          <div className="system-sm-semibold flex h-6 items-center text-text-secondary">
+          <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
             {t('versionHistory.editField.title', { ns: 'workflow' })}
           </div>
           <Input
@@ -88,7 +88,7 @@ const VersionInfoModal: FC<VersionInfoModalProps> = ({
           />
         </div>
         <div className="flex flex-col gap-y-1">
-          <div className="system-sm-semibold flex h-6 items-center text-text-secondary">
+          <div className="flex h-6 items-center system-sm-semibold text-text-secondary">
             {t('versionHistory.editField.releaseNotes', { ns: 'workflow' })}
           </div>
           <Textarea
diff --git a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
index d5fbd9e78f..029743dfb6 100644
--- a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import WarningMask from '.'
 
 type IFormattingChangedProps = {
diff --git a/web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx b/web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx
index 56ccae5ade..4b25b023b2 100644
--- a/web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/formatting-changed.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import WarningMask from '.'
 
 type IFormattingChangedProps = {
diff --git a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
index f23567b909..2cd33759f8 100644
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
@@ -13,13 +13,13 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { ADD_EXTERNAL_DATA_TOOL } from '@/app/components/app/configuration/config-var'
-import Button from '@/app/components/base/button'
 import {
   Copy,
   CopyCheck,
 } from '@/app/components/base/icons/src/vender/line/files'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import {
   Tooltip,
@@ -148,14 +148,14 @@ const AdvancedPromptInput: FC<Props> = ({
   const [editorHeight, setEditorHeight] = React.useState(isChatMode ? 200 : 508)
   const contextMissing = (
     <div
-      className="flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl pb-1 pl-4 pr-3 pt-2"
+      className="flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl pt-2 pr-3 pb-1 pl-4"
       style={{
         background: 'linear-gradient(180deg, #FEF0C7 0%, rgba(254, 240, 199, 0) 100%)',
       }}
     >
       <div className="flex items-center pr-2">
         <RiErrorWarningFill className="mr-1 h-4 w-4 text-[#F79009]" />
-        <div className="text-[13px] font-medium leading-[18px] text-[#DC6803]">{t('promptMode.contextMissing', { ns: 'appDebug' })}</div>
+        <div className="text-[13px] leading-[18px] font-medium text-[#DC6803]">{t('promptMode.contextMissing', { ns: 'appDebug' })}</div>
       </div>
       <Button
         size="small"
@@ -172,7 +172,7 @@ const AdvancedPromptInput: FC<Props> = ({
         {isContextMissing
           ? contextMissing
           : (
-              <div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-background-default pb-1 pl-4 pr-3 pt-2 hover:shadow-xs')}>
+              <div className={cn(s.boxHeader, 'flex h-11 items-center justify-between rounded-tl-xl rounded-tr-xl bg-background-default pt-2 pr-3 pb-1 pl-4 hover:shadow-xs')}>
                 {isChatMode
                   ? (
                       <MessageTypeSelector value={type} onChange={onTypeChange} />
@@ -180,13 +180,13 @@ const AdvancedPromptInput: FC<Props> = ({
                   : (
                       <div className="flex items-center space-x-1">
 
-                        <div className="text-sm font-semibold uppercase text-indigo-800">
+                        <div className="text-sm font-semibold text-indigo-800 uppercase">
                           {t('pageTitle.line1', { ns: 'appDebug' })}
                         </div>
                         <Tooltip>
                           <TooltipTrigger
                             render={(
-                              <span className="i-ri-question-line ml-1 h-4 w-4 shrink-0 text-text-quaternary" />
+                              <span className="ml-1 i-ri-question-line h-4 w-4 shrink-0 text-text-quaternary" />
                             )}
                           />
                           <TooltipContent>
diff --git a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
index 47d9aaa4d2..03755df018 100644
--- a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import VarHighlight from '../../base/var-highlight'
 
 type IConfirmAddVarProps = {
@@ -35,7 +35,7 @@ const ConfirmAddVar: FC<IConfirmAddVarProps> = ({
   // }, mainContentRef)
   return (
     <div
-      className="absolute inset-0  flex items-center justify-center rounded-xl"
+      className="absolute inset-0 flex items-center justify-center rounded-xl"
       style={{
         backgroundColor: 'rgba(35, 56, 118, 0.2)',
       }}
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
index 3773234347..477e1db4a0 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
@@ -4,8 +4,8 @@ import type { ConversationHistoriesRole } from '@/models/debug'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   isShow: boolean
@@ -30,7 +30,7 @@ const EditModal: FC<Props> = ({
       isShow={isShow}
       onClose={onClose}
     >
-      <div className="mt-6 text-sm font-medium leading-[21px] text-text-primary">{t('feature.conversationHistory.editModal.userPrefix', { ns: 'appDebug' })}</div>
+      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.userPrefix', { ns: 'appDebug' })}</div>
       <input
         className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
         value={tempData.user_prefix}
@@ -40,7 +40,7 @@ const EditModal: FC<Props> = ({
         })}
       />
 
-      <div className="mt-6 text-sm font-medium leading-[21px] text-text-primary">{t('feature.conversationHistory.editModal.assistantPrefix', { ns: 'appDebug' })}</div>
+      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('feature.conversationHistory.editModal.assistantPrefix', { ns: 'appDebug' })}</div>
       <input
         className="mt-2 box-border h-10 w-full rounded-lg bg-components-input-bg-normal px-3 text-sm leading-10"
         value={tempData.assistant_prefix}
diff --git a/web/app/components/app/configuration/config-prompt/index.tsx b/web/app/components/app/configuration/config-prompt/index.tsx
index 3f6963d132..3a36358d5e 100644
--- a/web/app/components/app/configuration/config-prompt/index.tsx
+++ b/web/app/components/app/configuration/config-prompt/index.tsx
@@ -10,7 +10,7 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import AdvancedMessageInput from '@/app/components/app/configuration/config-prompt/advanced-prompt-input'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { MAX_PROMPT_MESSAGE_LENGTH } from '@/config'
 import ConfigContext from '@/context/debug-configuration'
 import { PromptRole } from '@/models/debug'
diff --git a/web/app/components/app/configuration/config-var/modal-foot.tsx b/web/app/components/app/configuration/config-var/modal-foot.tsx
index 1fcaebbc0d..3168d2a273 100644
--- a/web/app/components/app/configuration/config-var/modal-foot.tsx
+++ b/web/app/components/app/configuration/config-var/modal-foot.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type IModalFootProps = {
   onConfirm: () => void
diff --git a/web/app/components/app/configuration/config-vision/param-config.tsx b/web/app/components/app/configuration/config-vision/param-config.tsx
index 9199145ddb..887ebed2a0 100644
--- a/web/app/components/app/configuration/config-vision/param-config.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config.tsx
@@ -3,12 +3,12 @@ import type { FC } from 'react'
 import { RiSettings2Line } from '@remixicon/react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import ParamConfigContent from './param-config-content'
 
diff --git a/web/app/components/app/configuration/config/agent-setting-button.tsx b/web/app/components/app/configuration/config/agent-setting-button.tsx
index a83722e8a1..0f1021e7ce 100644
--- a/web/app/components/app/configuration/config/agent-setting-button.tsx
+++ b/web/app/components/app/configuration/config/agent-setting-button.tsx
@@ -5,7 +5,7 @@ import { RiSettings2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import AgentSetting from './agent/agent-setting'
 
 type Props = {
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
index b766e52089..31b76bc46d 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
@@ -6,9 +6,9 @@ import { useClickAway } from 'ahooks'
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
 import { Unblur } from '@/app/components/base/icons/src/vender/solid/education'
+import { Button } from '@/app/components/base/ui/button'
 import { Slider } from '@/app/components/base/ui/slider'
 import { DEFAULT_AGENT_PROMPT, MAX_ITERATIONS_NUM } from '@/config'
 import ItemPanel from './item-panel'
@@ -59,7 +59,7 @@ const AgentSetting: FC<Props> = ({
         ref={ref}
         className="flex h-full w-[640px] flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl"
       >
-        <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5">
+        <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pr-5 pl-6">
           <div className="flex flex-col text-base font-semibold text-text-primary">
             <div className="leading-6">{t('agent.setting.name', { ns: 'appDebug' })}</div>
           </div>
@@ -74,7 +74,7 @@ const AgentSetting: FC<Props> = ({
         </div>
         {/* Body */}
         <div
-          className="grow overflow-y-auto border-b p-6 pb-[68px] pt-5"
+          className="grow overflow-y-auto border-b p-6 pt-5 pb-[68px]"
           style={{
             borderBottom: 'rgba(0, 0, 0, 0.05)',
           }}
@@ -88,7 +88,7 @@ const AgentSetting: FC<Props> = ({
             name={t('agent.agentMode', { ns: 'appDebug' })}
             description={t('agent.agentModeDes', { ns: 'appDebug' })}
           >
-            <div className="text-[13px] font-medium leading-[18px] text-text-primary">{isFunctionCall ? t('agent.agentModeType.functionCall', { ns: 'appDebug' }) : t('agent.agentModeType.ReACT', { ns: 'appDebug' })}</div>
+            <div className="text-[13px] leading-[18px] font-medium text-text-primary">{isFunctionCall ? t('agent.agentModeType.functionCall', { ns: 'appDebug' }) : t('agent.agentModeType.ReACT', { ns: 'appDebug' })}</div>
           </ItemPanel>
 
           <ItemPanel
@@ -119,7 +119,7 @@ const AgentSetting: FC<Props> = ({
                 min={maxIterationsMin}
                 max={MAX_ITERATIONS_NUM}
                 step={1}
-                className="block h-7 w-11 rounded-lg border-0 bg-components-input-bg-normal px-1.5 pl-1 leading-7 text-text-primary placeholder:text-text-tertiary focus:ring-1 focus:ring-inset focus:ring-primary-600"
+                className="block h-7 w-11 rounded-lg border-0 bg-components-input-bg-normal px-1.5 pl-1 leading-7 text-text-primary placeholder:text-text-tertiary focus:ring-1 focus:ring-primary-600 focus:ring-inset"
                 value={tempPayload.max_iteration}
                 onChange={(e) => {
                   let value = Number.parseInt(e.target.value, 10)
@@ -139,12 +139,12 @@ const AgentSetting: FC<Props> = ({
 
           {!isFunctionCall && (
             <div className="rounded-xl bg-background-section-burn py-2 shadow-xs">
-              <div className="flex h-8 items-center px-4 text-sm font-semibold leading-6 text-text-secondary">{t('builtInPromptTitle', { ns: 'tools' })}</div>
-              <div className="h-[396px] overflow-y-auto whitespace-pre-line px-4 text-sm font-normal leading-5 text-text-secondary">
+              <div className="flex h-8 items-center px-4 text-sm leading-6 font-semibold text-text-secondary">{t('builtInPromptTitle', { ns: 'tools' })}</div>
+              <div className="h-[396px] overflow-y-auto px-4 text-sm leading-5 font-normal whitespace-pre-line text-text-secondary">
                 {isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion}
               </div>
               <div className="px-4">
-                <div className="inline-flex h-5 items-center rounded-md bg-components-input-bg-normal px-1 text-xs font-medium leading-[18px] text-text-tertiary">{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}</div>
+                <div className="inline-flex h-5 items-center rounded-md bg-components-input-bg-normal px-1 text-xs leading-[18px] font-medium text-text-tertiary">{(isChatModel ? DEFAULT_AGENT_PROMPT.chat : DEFAULT_AGENT_PROMPT.completion).length}</div>
               </div>
             </div>
           )}
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 752426cc2d..16212afa73 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -18,11 +18,11 @@ import { useContext } from 'use-context-selector'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { CollectionType } from '@/app/components/tools/types'
 import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
@@ -165,7 +165,7 @@ const AgentTools: FC = () => {
         )}
         headerRight={(
           <div className="flex items-center">
-            <div className="text-xs font-normal leading-[18px] text-text-tertiary">
+            <div className="text-xs leading-[18px] font-normal text-text-tertiary">
               {tools.filter(item => !!item.enabled).length}
               /
               {tools.length}
@@ -174,7 +174,7 @@ const AgentTools: FC = () => {
             </div>
             {tools.length < MAX_TOOLS_NUM && !readonly && (
               <>
-                <div className="ml-3 mr-1 h-3.5 w-px bg-divider-regular"></div>
+                <div className="mr-1 ml-3 h-3.5 w-px bg-divider-regular"></div>
                 <ToolPicker
                   trigger={<OperationBtn type="add" />}
                   isShow={isShowChooseTool}
@@ -209,11 +209,11 @@ const AgentTools: FC = () => {
                 )}
                 <div
                   className={cn(
-                    'system-xs-regular ml-1.5 flex w-0 grow items-center truncate',
+                    'ml-1.5 flex w-0 grow items-center truncate system-xs-regular',
                     (item.isDeleted || item.notAuthor || !item.enabled) ? 'opacity-50' : '',
                   )}
                 >
-                  <span className="system-xs-medium pr-1.5 text-text-secondary">{getProviderShowName(item)}</span>
+                  <span className="pr-1.5 system-xs-medium text-text-secondary">{getProviderShowName(item)}</span>
                   <span className="text-text-tertiary">{item.tool_label}</span>
                   {!item.isDeleted && !readonly && (
                     <Tooltip
@@ -268,7 +268,7 @@ const AgentTools: FC = () => {
                         needsDelay={false}
                       >
                         <div
-                          className="cursor-pointer rounded-md p-1  hover:bg-black/5"
+                          className="cursor-pointer rounded-md p-1 hover:bg-black/5"
                           onClick={() => {
                             setCurrentTool(item)
                             setIsShowSettingTool(true)
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
index d6c39af58f..757465b5ee 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
@@ -10,10 +10,10 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer'
 import Loading from '@/app/components/base/loading'
 import TabSlider from '@/app/components/base/tab-slider-plain'
+import { Button } from '@/app/components/base/ui/button'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import Description from '@/app/components/plugins/card/base/description'
@@ -140,7 +140,7 @@ const SettingBuiltInTool: FC<Props> = ({
                 )}
               </div>
               {item.human_description && (
-                <div className="system-xs-regular mt-0.5 text-text-tertiary">
+                <div className="mt-0.5 system-xs-regular text-text-tertiary">
                   {item.human_description?.[language]}
                 </div>
               )}
@@ -171,7 +171,7 @@ const SettingBuiltInTool: FC<Props> = ({
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassName={cn('mb-2 mr-2 mt-[64px] w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
     >
       <>
         {isLoading && <Loading type="app" />}
@@ -179,14 +179,14 @@ const SettingBuiltInTool: FC<Props> = ({
           <>
             {/* header */}
             <div className="relative border-b border-divider-subtle p-4 pb-3">
-              <div className="absolute right-3 top-3">
+              <div className="absolute top-3 right-3">
                 <ActionButton onClick={onHide}>
                   <RiCloseLine className="h-4 w-4" />
                 </ActionButton>
               </div>
               {showBackButton && (
                 <div
-                  className="system-xs-semibold-uppercase mb-2 flex cursor-pointer items-center gap-1 text-text-accent-secondary"
+                  className="mb-2 flex cursor-pointer items-center gap-1 system-xs-semibold-uppercase text-text-accent-secondary"
                   onClick={onHide}
                 >
                   <RiArrowLeftLine className="h-4 w-4" />
@@ -201,9 +201,9 @@ const SettingBuiltInTool: FC<Props> = ({
                   packageName={collection.name.split('/').pop() || ''}
                 />
               </div>
-              <div className="system-md-semibold mt-1 text-text-primary">{currTool?.label[language]}</div>
+              <div className="mt-1 system-md-semibold text-text-primary">{currTool?.label[language]}</div>
               {!!currTool?.description[language] && (
-                <Description className="mb-2 mt-3 h-auto" text={currTool.description[language]} descriptionLineRows={2}></Description>
+                <Description className="mt-3 mb-2 h-auto" text={currTool.description[language]} descriptionLineRows={2}></Description>
               )}
               {
                 collection.allow_delete && collection.type === CollectionType.builtIn && (
@@ -240,13 +240,13 @@ const SettingBuiltInTool: FC<Props> = ({
                       />
                     )
                   : (
-                      <div className="system-sm-semibold-uppercase p-4 pb-1 text-text-primary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
+                      <div className="p-4 pb-1 system-sm-semibold-uppercase text-text-primary">{t('setBuiltInTools.parameters', { ns: 'tools' })}</div>
                     )}
                 <div className="h-0 grow overflow-y-auto px-4">
                   {isInfoActive ? infoUI : settingUI}
                   {!readonly && !isInfoActive && (
                     <div className="flex shrink-0 justify-end space-x-2 rounded-b-[10px] bg-components-panel-bg py-2">
-                      <Button className="flex h-8 items-center px-3! text-[13px]! font-medium " onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
+                      <Button className="flex h-8 items-center px-3! text-[13px]! font-medium" onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
                       <Button className="flex h-8 items-center px-3! text-[13px]! font-medium" variant="primary" disabled={!isValid} onClick={() => onSave?.(tempSetting)}>{t('operation.save', { ns: 'common' })}</Button>
                     </div>
                   )}
diff --git a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
index 7999ba87af..af14fb037d 100644
--- a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
+++ b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx
@@ -5,7 +5,7 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type IAutomaticBtnProps = {
   onClick: () => void
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index d2522e875e..fcdee7db11 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -19,11 +19,11 @@ import { useBoolean, useSessionStorageState } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -62,7 +62,7 @@ const TryLabel: FC<{
 }> = ({ Icon, text, onClick }) => {
   return (
     <div
-      className="mr-1 mt-2 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2"
+      className="mt-2 mr-1 flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-components-button-secondary-bg px-2"
       onClick={onClick}
     >
       <Icon className="h-4 w-4 text-text-tertiary"></Icon>
@@ -283,7 +283,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
       <div className="flex h-[680px] flex-wrap">
         <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
           <div className="mb-5">
-            <div className={`text-lg font-bold leading-[28px] ${s.textGradient}`}>{t('generate.title', { ns: 'appDebug' })}</div>
+            <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('generate.title', { ns: 'appDebug' })}</div>
             <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('generate.description', { ns: 'appDebug' })}</div>
           </div>
           <div>
@@ -301,7 +301,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           {isBasicMode && (
             <div className="mt-4">
               <div className="flex items-center">
-                <div className="mr-3 shrink-0 text-xs font-semibold uppercase leading-[18px] text-text-tertiary">{t('generate.tryIt', { ns: 'appDebug' })}</div>
+                <div className="mr-3 shrink-0 text-xs leading-[18px] font-semibold text-text-tertiary uppercase">{t('generate.tryIt', { ns: 'appDebug' })}</div>
                 <div
                   className="h-px grow"
                   style={{
@@ -326,7 +326,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           {/* inputs */}
           <div className="mt-4">
             <div>
-              <div className="system-sm-semibold-uppercase mb-1.5 text-text-secondary">{t('generate.instruction', { ns: 'appDebug' })}</div>
+              <div className="mb-1.5 system-sm-semibold-uppercase text-text-secondary">{t('generate.instruction', { ns: 'appDebug' })}</div>
               {isBasicMode
                 ? (
                     <InstructionEditorInBasic
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index 776d774bd8..4beefe8386 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/web/app/components/app/configuration/config/automatic/result.tsx
@@ -5,7 +5,7 @@ import { RiClipboardLine } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import CodeEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor'
 import PromptRes from './prompt-res'
@@ -42,7 +42,7 @@ const Result: FC<Props> = ({
     <div className="flex h-full flex-col">
       <div className="mb-3 flex shrink-0 items-center justify-between">
         <div>
-          <div className="shrink-0 text-base font-semibold leading-[160%] text-text-secondary">{t('generate.resTitle', { ns: 'appDebug' })}</div>
+          <div className="shrink-0 text-base leading-[160%] font-semibold text-text-secondary">{t('generate.resTitle', { ns: 'appDebug' })}</div>
           <VersionSelector
             versionLen={versions.length}
             value={currentVersionIndex}
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index 2d6b3efb3d..666dab3425 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -10,11 +10,11 @@ import {
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -202,7 +202,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
       <div className="relative flex h-[680px] flex-wrap">
         <div className="h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-6">
           <div className="mb-5">
-            <div className={`text-lg font-bold leading-[28px] ${s.textGradient}`}>{t('codegen.title', { ns: 'appDebug' })}</div>
+            <div className={`text-lg leading-[28px] font-bold ${s.textGradient}`}>{t('codegen.title', { ns: 'appDebug' })}</div>
             <div className="mt-1 text-[13px] font-normal text-text-tertiary">{t('codegen.description', { ns: 'appDebug' })}</div>
           </div>
           <div className="mb-4">
@@ -219,7 +219,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
           <div>
             <div className="text-[0px]">
-              <div className="mb-1.5 text-text-secondary system-sm-semibold-uppercase">{t('codegen.instruction', { ns: 'appDebug' })}</div>
+              <div className="mb-1.5 system-sm-semibold-uppercase text-text-secondary">{t('codegen.instruction', { ns: 'appDebug' })}</div>
               <InstructionEditor
                 editorKey={editorKey}
                 value={instruction}
diff --git a/web/app/components/app/configuration/configuration-view.tsx b/web/app/components/app/configuration/configuration-view.tsx
index f2f9c06e92..aaee68cb71 100644
--- a/web/app/components/app/configuration/configuration-view.tsx
+++ b/web/app/components/app/configuration/configuration-view.tsx
@@ -10,7 +10,6 @@ import EditHistoryModal from '@/app/components/app/configuration/config-prompt/c
 import AgentSettingButton from '@/app/components/app/configuration/config/agent-setting-button'
 import SelectDataSet from '@/app/components/app/configuration/dataset-config/select-dataset'
 import Debug from '@/app/components/app/configuration/debug'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Drawer from '@/app/components/base/drawer'
 import { FeaturesProvider } from '@/app/components/base/features'
@@ -25,6 +24,7 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import PluginDependency from '@/app/components/workflow/plugin-dependency'
 import ConfigContext from '@/context/debug-configuration'
diff --git a/web/app/components/app/configuration/ctrl-btn-group/index.tsx b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
index 53a07a9b1d..fa8a8bdab3 100644
--- a/web/app/components/app/configuration/ctrl-btn-group/index.tsx
+++ b/web/app/components/app/configuration/ctrl-btn-group/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import s from './style.module.css'
 
 type IContrlBtnGroupProps = {
@@ -14,7 +14,7 @@ const ContrlBtnGroup: FC<IContrlBtnGroupProps> = ({ onSave, onReset }) => {
   const { t } = useTranslation()
   return (
     <div className="fixed bottom-0 left-[224px] h-[64px] w-[519px]">
-      <div className={`${s.ctrlBtn} flex h-full items-center gap-2  bg-white pl-4`}>
+      <div className={`${s.ctrlBtn} flex h-full items-center gap-2 bg-white pl-4`}>
         <Button variant="primary" onClick={onSave} data-testid="apply-btn">{t('operation.applyConfig', { ns: 'appDebug' })}</Button>
         <Button onClick={onReset} data-testid="reset-btn">{t('operation.resetConfig', { ns: 'appDebug' })}</Button>
       </div>
diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
index 89410203df..5c40afba9f 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -5,8 +5,8 @@ import { RiEqualizer2Line } from '@remixicon/react'
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useCurrentProviderAndModel, useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
diff --git a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
index 5fc594dc6b..21ed5134b0 100644
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -7,9 +7,9 @@ import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import FeatureIcon from '@/app/components/header/account-setting/model-provider-page/model-selector/feature-icon'
 import { useKnowledge } from '@/hooks/use-knowledge'
@@ -134,7 +134,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
                   </div>
                   <div className={cn('max-w-[200px] truncate text-[13px] font-medium text-text-secondary', !item.embedding_available && 'max-w-[120px]! opacity-30')}>{item.name}</div>
                   {!item.embedding_available && (
-                    <span className="ml-1 shrink-0 rounded-md border border-divider-deep px-1 text-xs font-normal leading-[18px] text-text-tertiary">{t('unavailable', { ns: 'dataset' })}</span>
+                    <span className="ml-1 shrink-0 rounded-md border border-divider-deep px-1 text-xs leading-[18px] font-normal text-text-tertiary">{t('unavailable', { ns: 'dataset' })}</span>
                   )}
                 </div>
                 {item.is_multimodal && (
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index c807a09ca8..dc8823cacb 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -6,9 +6,9 @@ import { RiCloseLine } from '@remixicon/react'
 import { isEqual } from 'es-toolkit/predicate'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
@@ -192,7 +192,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
       }}
       ref={ref}
     >
-      <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pl-6 pr-5">
+      <div className="flex h-14 shrink-0 items-center justify-between border-b border-divider-regular pr-5 pl-6">
         <div className="flex flex-col text-base font-semibold text-text-primary">
           <div className="leading-6">{t('title', { ns: 'datasetSettings' })}</div>
         </div>
@@ -206,10 +206,10 @@ const SettingsModal: FC<SettingsModalProps> = ({
         </div>
       </div>
       {/* Body */}
-      <div className="overflow-y-auto border-b border-divider-regular p-6 pb-[68px] pt-5">
+      <div className="overflow-y-auto border-b border-divider-regular p-6 pt-5 pb-[68px]">
         <div className={cn(rowClass, 'items-center')}>
           <div className={labelClass}>
-            <div className="text-text-secondary system-sm-semibold">{t('form.name', { ns: 'datasetSettings' })}</div>
+            <div className="system-sm-semibold text-text-secondary">{t('form.name', { ns: 'datasetSettings' })}</div>
           </div>
           <Input
             value={localeCurrentDataset.name}
@@ -220,7 +220,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         </div>
         <div className={cn(rowClass)}>
           <div className={labelClass}>
-            <div className="text-text-secondary system-sm-semibold">{t('form.desc', { ns: 'datasetSettings' })}</div>
+            <div className="system-sm-semibold text-text-secondary">{t('form.desc', { ns: 'datasetSettings' })}</div>
           </div>
           <div className="w-full">
             <Textarea
@@ -233,7 +233,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         </div>
         <div className={rowClass}>
           <div className={labelClass}>
-            <div className="text-text-secondary system-sm-semibold">{t('form.permissions', { ns: 'datasetSettings' })}</div>
+            <div className="system-sm-semibold text-text-secondary">{t('form.permissions', { ns: 'datasetSettings' })}</div>
           </div>
           <div className="w-full">
             <PermissionSelector
@@ -249,7 +249,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         {!!(currentDataset && currentDataset.indexing_technique) && (
           <div className={cn(rowClass)}>
             <div className={labelClass}>
-              <div className="text-text-secondary system-sm-semibold">{t('form.indexMethod', { ns: 'datasetSettings' })}</div>
+              <div className="system-sm-semibold text-text-secondary">{t('form.indexMethod', { ns: 'datasetSettings' })}</div>
             </div>
             <div className="grow">
               <IndexMethod
@@ -266,7 +266,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         {indexMethod === IndexingType.QUALIFIED && (
           <div className={cn(rowClass)}>
             <div className={labelClass}>
-              <div className="text-text-secondary system-sm-semibold">{t('form.embeddingModel', { ns: 'datasetSettings' })}</div>
+              <div className="system-sm-semibold text-text-secondary">{t('form.embeddingModel', { ns: 'datasetSettings' })}</div>
             </div>
             <div className="w-full">
               <div className="h-8 w-full rounded-lg bg-components-input-bg-normal opacity-60">
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index d194d1da38..8bd8acadb5 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -25,10 +25,10 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import TextGeneration from '@/app/components/app/text-generate/item'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import AgentLogModal from '@/app/components/base/agent-log-modal'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import {
   Tooltip,
@@ -394,8 +394,8 @@ const Debug: FC<IDebug> = ({
   return (
     <>
       <div className="shrink-0">
-        <div className="flex items-center justify-between px-4 pb-2 pt-3">
-          <div className="text-text-primary system-xl-semibold">{t('inputs.title', { ns: 'appDebug' })}</div>
+        <div className="flex items-center justify-between px-4 pt-3 pb-2">
+          <div className="system-xl-semibold text-text-primary">{t('inputs.title', { ns: 'appDebug' })}</div>
           <div className="flex items-center">
             {
               debugWithMultipleModel
@@ -432,14 +432,14 @@ const Debug: FC<IDebug> = ({
 
                 {
                   varList.length > 0 && (
-                    <div className="relative ml-1 mr-2">
+                    <div className="relative mr-2 ml-1">
                       <Tooltip>
                         <TooltipTrigger render={<ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => !readonly && setExpanded(!expanded)}><RiEqualizer2Line className="h-4 w-4" /></ActionButton>} />
                         <TooltipContent>
                           {t('panel.userInputField', { ns: 'workflow' })}
                         </TooltipContent>
                       </Tooltip>
-                      {expanded && <div className="absolute bottom-[-14px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />}
+                      {expanded && <div className="absolute right-[5px] bottom-[-14px] z-10 h-3 w-3 rotate-45 border-t-[0.5px] border-l-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg" />}
                     </div>
                   )
                 }
@@ -517,8 +517,8 @@ const Debug: FC<IDebug> = ({
                     </div>
                   </div>
                   <div className="flex flex-col gap-1">
-                    <div className="text-text-secondary system-md-semibold">{t('noModelSelected', { ns: 'appDebug' })}</div>
-                    <div className="text-text-tertiary system-xs-regular">{t('noModelSelectedTip', { ns: 'appDebug' })}</div>
+                    <div className="system-md-semibold text-text-secondary">{t('noModelSelected', { ns: 'appDebug' })}</div>
+                    <div className="system-xs-regular text-text-tertiary">{t('noModelSelectedTip', { ns: 'appDebug' })}</div>
                   </div>
                 </div>
               </div>
@@ -557,7 +557,7 @@ const Debug: FC<IDebug> = ({
                 {!completionRes && !isResponding && (
                   <div className="flex grow flex-col items-center justify-center gap-2">
                     <RiSparklingFill className="h-12 w-12 text-text-empty-state-icon" />
-                    <div className="text-text-quaternary system-sm-regular">{t('noResult', { ns: 'appDebug' })}</div>
+                    <div className="system-sm-regular text-text-quaternary">{t('noResult', { ns: 'appDebug' })}</div>
                   </div>
                 )}
               </>
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index 4c6d34a2f5..24397128c6 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -12,13 +12,13 @@ import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Button from '@/app/components/base/button'
 import FeatureBar from '@/app/components/base/features/new-feature-panel/feature-bar'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
 import Input from '@/app/components/base/input'
 import Select from '@/app/components/base/select'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 import ConfigContext from '@/context/debug-configuration'
 import { AppModeEnum, ModelModeType } from '@/types/app'
@@ -117,11 +117,11 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
             {!userInputFieldCollapse && <RiArrowDownSLine className="h-4 w-4 text-text-secondary" />}
           </div>
           {!userInputFieldCollapse && (
-            <div className="system-xs-regular mt-1 text-text-tertiary">{t('inputs.completionVarTip', { ns: 'appDebug' })}</div>
+            <div className="mt-1 system-xs-regular text-text-tertiary">{t('inputs.completionVarTip', { ns: 'appDebug' })}</div>
           )}
         </div>
         {!userInputFieldCollapse && promptVariables.length > 0 && (
-          <div className="px-4 pb-4 pt-3">
+          <div className="px-4 pt-3 pb-4">
             {promptVariables.map(({ key, name, type, options, max_length, required }, index) => (
               <div
                 key={key}
@@ -129,7 +129,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
               >
                 <div>
                   {type !== 'checkbox' && (
-                    <div className="system-sm-semibold mb-1 flex h-6 items-center gap-1 text-text-secondary">
+                    <div className="mb-1 flex h-6 items-center gap-1 system-sm-semibold text-text-secondary">
                       <div className="truncate">{name || key}</div>
                       {!required && <span className="system-xs-regular text-text-tertiary">{t('panel.optional', { ns: 'workflow' })}</span>}
                     </div>
diff --git a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
index 121eb3e3a7..93d3cf4d24 100644
--- a/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
+++ b/web/app/components/app/configuration/tools/external-data-tool-modal.tsx
@@ -6,10 +6,10 @@ import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import FormGeneration from '@/app/components/base/features/new-feature-panel/moderation/form-generation'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/app/components/base/ui/select'
 import { toast } from '@/app/components/base/ui/toast'
@@ -116,7 +116,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           {`${action} ${t('variableConfig.apiBasedVar', { ns: 'appDebug' })}`}
         </div>
         <div className="py-2">
-          <div className="text-sm font-medium leading-9 text-text-primary">
+          <div className="text-sm leading-9 font-medium text-text-primary">
             {t('apiBasedExtension.type', { ns: 'common' })}
           </div>
           <Select
@@ -136,7 +136,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           </Select>
         </div>
         <div className="py-2">
-          <div className="text-sm font-medium leading-9 text-text-primary">
+          <div className="text-sm leading-9 font-medium text-text-primary">
             {t('feature.tools.modal.name.title', { ns: 'appDebug' })}
           </div>
           <div className="flex items-center">
@@ -156,7 +156,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           </div>
         </div>
         <div className="py-2">
-          <div className="text-sm font-medium leading-9 text-text-primary">
+          <div className="text-sm leading-9 font-medium text-text-primary">
             {t('feature.tools.modal.variableName.title', { ns: 'appDebug' })}
           </div>
           <input
diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index f0633288fd..2674d3ab1e 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -6,7 +6,7 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContextSelector } from 'use-context-selector'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import AppListContext from '@/context/app-list-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { cn } from '@/utils/classnames'
@@ -34,7 +34,7 @@ const AppCard = ({
     }
   }, [setShowTryAppPanel, app.category])
   return (
-    <div className={cn('group relative flex h-[132px] cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4  shadow-xs hover:shadow-lg')}>
+    <div className={cn('group relative flex h-[132px] cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 shadow-xs hover:shadow-lg')}>
       <div className="flex shrink-0 grow-0 items-center gap-3 pb-2">
         <div className="relative shrink-0">
           <AppIcon
@@ -57,13 +57,13 @@ const AppCard = ({
           <AppTypeLabel className="system-2xs-medium-uppercase text-text-tertiary" type={app.app.mode} />
         </div>
       </div>
-      <div className="system-xs-regular py-1 text-text-tertiary">
+      <div className="py-1 system-xs-regular text-text-tertiary">
         <div className="line-clamp-3">
           {app.description}
         </div>
       </div>
       {(canCreate || isTrialApp) && (
-        <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-linear-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
+        <div className={cn('absolute right-0 bottom-0 left-0 hidden bg-linear-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
           <div className={cn('grid h-8 w-full grid-cols-1 items-center space-x-2', canCreate && 'grid-cols-2')}>
             {canCreate && (
               <Button variant="primary" onClick={() => onCreate()}>
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index f2ced9b6c0..c0c70660bc 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -8,12 +8,12 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import FullScreenModal from '@/app/components/base/fullscreen-modal'
 import { BubbleTextMod, ChatBot, ListSparkle, Logic } from '@/app/components/base/icons/src/vender/solid/communication'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@@ -106,15 +106,15 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
   })
   return (
     <>
-      <div className="flex h-full justify-center overflow-y-auto overflow-x-hidden">
+      <div className="flex h-full justify-center overflow-x-hidden overflow-y-auto">
         <div className="flex flex-1 shrink-0 justify-end">
           <div className="px-10">
             <div className="h-6 w-full 2xl:h-[139px]" />
-            <div className="pb-6 pt-1">
-              <span className="text-text-primary title-2xl-semi-bold">{t('newApp.startFromBlank', { ns: 'app' })}</span>
+            <div className="pt-1 pb-6">
+              <span className="title-2xl-semi-bold text-text-primary">{t('newApp.startFromBlank', { ns: 'app' })}</span>
             </div>
             <div className="mb-2 leading-6">
-              <span className="text-text-secondary system-sm-semibold">{t('newApp.chooseAppType', { ns: 'app' })}</span>
+              <span className="system-sm-semibold text-text-secondary">{t('newApp.chooseAppType', { ns: 'app' })}</span>
             </div>
             <div className="flex w-[660px] flex-col gap-4">
               <div>
@@ -154,7 +154,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                     className="flex cursor-pointer items-center border-0 bg-transparent p-0"
                     onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)}
                   >
-                    <span className="text-text-tertiary system-2xs-medium-uppercase">{t('newApp.forBeginners', { ns: 'app' })}</span>
+                    <span className="system-2xs-medium-uppercase text-text-tertiary">{t('newApp.forBeginners', { ns: 'app' })}</span>
                     <RiArrowRightSLine className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} />
                   </button>
                 </div>
@@ -206,7 +206,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               <div className="flex items-center space-x-3">
                 <div className="flex-1">
                   <div className="mb-1 flex h-6 items-center">
-                    <label className="text-text-secondary system-sm-semibold">{t('newApp.captionName', { ns: 'app' })}</label>
+                    <label className="system-sm-semibold text-text-secondary">{t('newApp.captionName', { ns: 'app' })}</label>
                   </div>
                   <Input
                     value={name}
@@ -237,8 +237,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               </div>
               <div>
                 <div className="mb-1 flex h-6 items-center">
-                  <label className="text-text-secondary system-sm-semibold">{t('newApp.captionDescription', { ns: 'app' })}</label>
-                  <span className="ml-1 text-text-tertiary system-xs-regular">
+                  <label className="system-sm-semibold text-text-secondary">{t('newApp.captionDescription', { ns: 'app' })}</label>
+                  <span className="ml-1 system-xs-regular text-text-tertiary">
                     (
                     {t('newApp.optional', { ns: 'app' })}
                     )
@@ -253,8 +253,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               </div>
             </div>
             {isAppsFull && <AppsFull className="mt-4" loc="app-create" />}
-            <div className="flex items-center justify-between pb-10 pt-5">
-              <div className="flex cursor-pointer items-center gap-1 text-text-tertiary system-xs-regular" onClick={onCreateFromTemplate}>
+            <div className="flex items-center justify-between pt-5 pb-10">
+              <div className="flex cursor-pointer items-center gap-1 system-xs-regular text-text-tertiary" onClick={onCreateFromTemplate}>
                 <span>{t('newApp.noIdeaTip', { ns: 'app' })}</span>
                 <div className="p-px">
                   <RiArrowRightLine className="h-3.5 w-3.5" />
@@ -271,11 +271,11 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
           </div>
         </div>
         <div className="relative flex h-full flex-1 shrink justify-start overflow-hidden">
-          <div className="absolute left-0 right-0 top-0 h-6 border-b border-b-divider-subtle 2xl:h-[139px]"></div>
+          <div className="absolute top-0 right-0 left-0 h-6 border-b border-b-divider-subtle 2xl:h-[139px]"></div>
           <div className="max-w-[760px] border-x border-x-divider-subtle">
             <div className="h-6 2xl:h-[139px]" />
             <AppPreview mode={appMode} />
-            <div className="absolute left-0 right-0 border-b border-b-divider-subtle"></div>
+            <div className="absolute right-0 left-0 border-b border-b-divider-subtle"></div>
             <div className="flex h-[448px] w-[664px] items-center justify-center" style={{ background: 'repeating-linear-gradient(135deg, transparent, transparent 2px, rgba(16,24,40,0.04) 4px,transparent 3px, transparent 6px)' }}>
               <AppScreenShot show={appMode === AppModeEnum.CHAT} mode={AppModeEnum.CHAT} />
               <AppScreenShot show={appMode === AppModeEnum.ADVANCED_CHAT} mode={AppModeEnum.ADVANCED_CHAT} />
@@ -283,7 +283,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               <AppScreenShot show={appMode === AppModeEnum.COMPLETION} mode={AppModeEnum.COMPLETION} />
               <AppScreenShot show={appMode === AppModeEnum.WORKFLOW} mode={AppModeEnum.WORKFLOW} />
             </div>
-            <div className="absolute left-0 right-0 border-b border-b-divider-subtle"></div>
+            <div className="absolute right-0 left-0 border-b border-b-divider-subtle"></div>
           </div>
         </div>
       </div>
@@ -322,14 +322,14 @@ function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardP
         cn(`relative box-content h-[84px] w-[191px] cursor-pointer rounded-xl
       border-[0.5px] border-components-option-card-option-border
       bg-components-panel-on-panel-item-bg p-3 shadow-xs hover:shadow-md`, active
-          ? 'shadow-md outline-solid outline-[1.5px] outline-components-option-card-option-selected-border'
+          ? 'shadow-md outline-[1.5px] outline-components-option-card-option-selected-border outline-solid'
           : '')
       }
       onClick={onClick}
     >
       {icon}
-      <div className="mb-0.5 mt-2 text-text-secondary system-sm-semibold">{title}</div>
-      <div className="line-clamp-2 text-text-tertiary system-xs-regular" title={description}>{description}</div>
+      <div className="mt-2 mb-0.5 system-sm-semibold text-text-secondary">{title}</div>
+      <div className="line-clamp-2 system-xs-regular text-text-tertiary" title={description}>{description}</div>
     </div>
   )
 }
@@ -361,8 +361,8 @@ function AppPreview({ mode }: { mode: AppModeEnum }) {
   const previewInfo = modeToPreviewInfoMap[mode]
   return (
     <div className="px-8 py-4">
-      <h4 className="text-text-secondary system-sm-semibold-uppercase">{previewInfo.title}</h4>
-      <div className="mt-1 min-h-8 max-w-96 text-text-tertiary system-xs-regular">
+      <h4 className="system-sm-semibold-uppercase text-text-secondary">{previewInfo.title}</h4>
+      <div className="mt-1 min-h-8 max-w-96 system-xs-regular text-text-tertiary">
         <span>{previewInfo.description}</span>
       </div>
     </div>
diff --git a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
index db675228c4..71a6757bf2 100644
--- a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type DSLConfirmModalProps = {
   versions?: {
@@ -27,7 +27,7 @@ const DSLConfirmModal = ({
     >
       <div className="flex flex-col items-start gap-2 self-stretch pb-4">
         <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-        <div className="system-md-regular flex grow flex-col text-text-secondary">
+        <div className="flex grow flex-col system-md-regular text-text-secondary">
           <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
           <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
           <br />
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index dd17655e3c..bd6c91f323 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -7,9 +7,9 @@ import { noop } from 'es-toolkit/function'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
@@ -228,7 +228,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         isShow={show}
         onClose={noop}
       >
-        <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary title-2xl-semi-bold">
+        <div className="flex items-center justify-between pt-6 pr-5 pb-3 pl-6 title-2xl-semi-bold text-text-primary">
           {t('importFromDSL', { ns: 'app' })}
           <div
             className="flex h-8 w-8 cursor-pointer items-center"
@@ -237,7 +237,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             <RiCloseLine className="h-5 w-5 text-text-tertiary" />
           </div>
         </div>
-        <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary system-md-semibold">
+        <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 system-md-semibold text-text-tertiary">
           {
             tabs.map(tab => (
               <div
@@ -271,7 +271,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           {
             currentTab === CreateFromDSLModalTab.FROM_URL && (
               <div>
-                <div className="mb-1 text-text-secondary system-md-semibold">DSL URL</div>
+                <div className="mb-1 system-md-semibold text-text-secondary">DSL URL</div>
                 <Input
                   placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
                   value={dslUrlValue}
@@ -305,8 +305,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         className="w-[480px]"
       >
         <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-          <div className="text-text-primary title-2xl-semi-bold">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-          <div className="flex grow flex-col text-text-secondary system-md-regular">
+          <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
+          <div className="flex grow flex-col system-md-regular text-text-secondary">
             <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
             <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
             <br />
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index 151c03e925..2fe1d2124d 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -6,9 +6,9 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { useProviderContext } from '@/context/provider-context'
@@ -76,12 +76,12 @@ const DuplicateAppModal = ({
         onClose={noop}
         className={cn('relative max-w-[480px]!', 'px-8')}
       >
-        <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onHide}>
+        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onHide}>
           <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
-        <div className="relative mb-9 mt-3 text-xl font-semibold leading-[30px] text-text-primary">{t('duplicateTitle', { ns: 'app' })}</div>
-        <div className="system-sm-regular mb-9 text-text-secondary">
-          <div className="system-md-medium mb-2">{t('appCustomize.subTitle', { ns: 'explore' })}</div>
+        <div className="relative mt-3 mb-9 text-xl leading-[30px] font-semibold text-text-primary">{t('duplicateTitle', { ns: 'app' })}</div>
+        <div className="mb-9 system-sm-regular text-text-secondary">
+          <div className="mb-2 system-md-medium">{t('appCustomize.subTitle', { ns: 'explore' })}</div>
           <div className="flex items-center justify-between space-x-2">
             <AppIcon
               size="large"
diff --git a/web/app/components/app/in-site-message/index.tsx b/web/app/components/app/in-site-message/index.tsx
index 0276257860..fd7ced191e 100644
--- a/web/app/components/app/in-site-message/index.tsx
+++ b/web/app/components/app/in-site-message/index.tsx
@@ -2,8 +2,8 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import { MarkdownWithDirective } from '@/app/components/base/markdown-with-directive'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type InSiteMessageAction = 'link' | 'close'
@@ -111,20 +111,20 @@ function InSiteMessage({
   return (
     <div
       className={cn(
-        'fixed bottom-3 right-3 z-50 w-[360px] overflow-hidden rounded-xl border border-components-panel-border-subtle bg-components-panel-bg shadow-2xl backdrop-blur-[5px]',
+        'fixed right-3 bottom-3 z-50 w-[360px] overflow-hidden rounded-xl border border-components-panel-border-subtle bg-components-panel-bg shadow-2xl backdrop-blur-[5px]',
         className,
       )}
     >
-      <div className="flex min-h-[128px] flex-col justify-end gap-0.5 bg-cover px-4 pb-3 pt-6 text-text-primary-on-surface" style={headerStyle}>
-        <div className="whitespace-pre-line title-3xl-bold">
+      <div className="flex min-h-[128px] flex-col justify-end gap-0.5 bg-cover px-4 pt-6 pb-3 text-text-primary-on-surface" style={headerStyle}>
+        <div className="title-3xl-bold whitespace-pre-line">
           {normalizedTitle}
         </div>
-        <div className="whitespace-pre-line body-md-regular">
+        <div className="body-md-regular whitespace-pre-line">
           {normalizedSubtitle}
         </div>
       </div>
 
-      <div className="px-4 pb-2 pt-4 text-text-secondary body-md-regular">
+      <div className="px-4 pt-4 pb-2 body-md-regular text-text-secondary">
         <MarkdownWithDirective markdown={main} />
       </div>
 
diff --git a/web/app/components/app/overview/apikey-info-panel/index.tsx b/web/app/components/app/overview/apikey-info-panel/index.tsx
index 078386d4a9..e8071ff7ae 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -4,8 +4,8 @@ import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
+import { Button } from '@/app/components/base/ui/button'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { IS_CE_EDITION } from '@/config'
 import { useModalContext } from '@/context/modal-context'
@@ -29,7 +29,7 @@ const APIKeyInfoPanel: FC = () => {
     return null
 
   return (
-    <div className={cn('border-components-panel-border bg-components-panel-bg', 'relative mb-6 rounded-2xl border p-8 shadow-md ')}>
+    <div className={cn('border-components-panel-border bg-components-panel-bg', 'relative mb-6 rounded-2xl border p-8 shadow-md')}>
       <div className={cn('text-[24px] font-semibold text-text-primary', isCloud ? 'flex h-8 items-center space-x-1' : 'mb-6 leading-8')}>
         {isCloud && <em-emoji id="😀" />}
         {isCloud
@@ -56,7 +56,7 @@ const APIKeyInfoPanel: FC = () => {
       </Button>
       {!isCloud && (
         <a
-          className="mt-2 flex h-[26px] items-center space-x-1  p-1 text-xs font-medium text-[#155EEF]"
+          className="mt-2 flex h-[26px] items-center space-x-1 p-1 text-xs font-medium text-[#155EEF]"
           href="https://cloud.dify.ai/apps"
           target="_blank"
           rel="noopener noreferrer"
@@ -67,7 +67,7 @@ const APIKeyInfoPanel: FC = () => {
       )}
       <div
         onClick={() => setIsShow(false)}
-        className="absolute right-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center "
+        className="absolute top-4 right-4 flex h-8 w-8 cursor-pointer items-center justify-center"
       >
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
diff --git a/web/app/components/app/overview/app-card-sections.tsx b/web/app/components/app/overview/app-card-sections.tsx
index 1cbc9c69c6..659335227c 100644
--- a/web/app/components/app/overview/app-card-sections.tsx
+++ b/web/app/components/app/overview/app-card-sections.tsx
@@ -6,7 +6,6 @@ import type { ConfigParams } from './settings'
 import type { AppDetailResponse } from '@/models/app'
 import type { AppSSO } from '@/types/app'
 import { RiArrowRightSLine, RiBookOpenLine, RiBuildingLine, RiEqualizer2Line, RiExternalLinkLine, RiGlobalLine, RiLockLine, RiPaintBrushLine, RiVerifiedBadgeLine, RiWindowLine } from '@remixicon/react'
-import Button from '@/app/components/base/button'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Divider from '@/app/components/base/divider'
 import ShareQRCode from '@/app/components/base/qrcode'
@@ -19,6 +18,7 @@ import {
   AlertDialogDescription,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Tooltip,
   TooltipContent,
diff --git a/web/app/components/app/overview/customize/index.tsx b/web/app/components/app/overview/customize/index.tsx
index 4ec23780e9..b1d7066779 100644
--- a/web/app/components/app/overview/customize/index.tsx
+++ b/web/app/components/app/overview/customize/index.tsx
@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import Tag from '@/app/components/base/tag'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { AppModeEnum } from '@/types/app'
 
@@ -54,17 +54,17 @@ const CustomizeModal: FC<IShareLinkProps> = ({
       closable={true}
     >
       <div className="mt-4 w-full rounded-lg border-[0.5px] border-components-panel-border px-6 py-5">
-        <Tag bordered={true} hideBg={true} className="border-text-accent-secondary uppercase text-text-accent-secondary">
+        <Tag bordered={true} hideBg={true} className="border-text-accent-secondary text-text-accent-secondary uppercase">
           {t(`${prefixCustomize}.way`, { ns: 'appOverview' })}
           {' '}
           1
         </Tag>
-        <p className="system-sm-medium my-2 text-text-secondary">{t(`${prefixCustomize}.way1.name`, { ns: 'appOverview' })}</p>
+        <p className="my-2 system-sm-medium text-text-secondary">{t(`${prefixCustomize}.way1.name`, { ns: 'appOverview' })}</p>
         <div className="flex py-4">
           <StepNum>1</StepNum>
           <div className="flex flex-col">
             <div className="text-text-primary">{t(`${prefixCustomize}.way1.step1`, { ns: 'appOverview' })}</div>
-            <div className="mb-2 mt-1 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step1Tip`, { ns: 'appOverview' })}</div>
+            <div className="mt-1 mb-2 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step1Tip`, { ns: 'appOverview' })}</div>
             <a href={`https://github.com/langgenius/${isChatApp ? 'webapp-conversation' : 'webapp-text-generator'}`} target="_blank" rel="noopener noreferrer">
               <Button>
                 <GithubIcon className="mr-2 text-text-secondary" />
@@ -77,10 +77,10 @@ const CustomizeModal: FC<IShareLinkProps> = ({
           <StepNum>2</StepNum>
           <div className="flex flex-col">
             <div className="text-text-primary">{t(`${prefixCustomize}.way1.step2`, { ns: 'appOverview' })}</div>
-            <div className="mb-2 mt-1 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step2Tip`, { ns: 'appOverview' })}</div>
+            <div className="mt-1 mb-2 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step2Tip`, { ns: 'appOverview' })}</div>
             <a href="https://vercel.com/docs/concepts/deployments/git/vercel-for-github" target="_blank" rel="noopener noreferrer">
               <Button>
-                <div className="mr-1.5 border-b-12 border-l-[7px] border-r-[7px] border-t-0 border-solid border-text-primary border-l-transparent border-r-transparent border-t-transparent"></div>
+                <div className="mr-1.5 border-t-0 border-r-[7px] border-b-12 border-l-[7px] border-solid border-text-primary border-t-transparent border-r-transparent border-l-transparent"></div>
                 <span>{t(`${prefixCustomize}.way1.step2Operation`, { ns: 'appOverview' })}</span>
               </Button>
             </a>
@@ -90,8 +90,8 @@ const CustomizeModal: FC<IShareLinkProps> = ({
           <StepNum>3</StepNum>
           <div className="flex w-full flex-col overflow-hidden">
             <div className="text-text-primary">{t(`${prefixCustomize}.way1.step3`, { ns: 'appOverview' })}</div>
-            <div className="mb-2 mt-1 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step3Tip`, { ns: 'appOverview' })}</div>
-            <pre className="box-border select-text overflow-x-scroll rounded-lg border-[0.5px] border-components-panel-border bg-background-section px-4 py-3 text-xs font-medium text-text-secondary">
+            <div className="mt-1 mb-2 text-xs text-text-tertiary">{t(`${prefixCustomize}.way1.step3Tip`, { ns: 'appOverview' })}</div>
+            <pre className="box-border overflow-x-scroll rounded-lg border-[0.5px] border-components-panel-border bg-background-section px-4 py-3 text-xs font-medium text-text-secondary select-text">
               NEXT_PUBLIC_APP_ID=
               {`'${appId}'`}
               {' '}
@@ -108,12 +108,12 @@ const CustomizeModal: FC<IShareLinkProps> = ({
 
       </div>
       <div className="mt-4 w-full rounded-lg border-[0.5px] border-components-panel-border px-6 py-5">
-        <Tag bordered={true} hideBg={true} className="border-text-accent-secondary uppercase text-text-accent-secondary">
+        <Tag bordered={true} hideBg={true} className="border-text-accent-secondary text-text-accent-secondary uppercase">
           {t(`${prefixCustomize}.way`, { ns: 'appOverview' })}
           {' '}
           2
         </Tag>
-        <p className="system-sm-medium my-2 text-text-secondary">{t(`${prefixCustomize}.way2.name`, { ns: 'appOverview' })}</p>
+        <p className="my-2 system-sm-medium text-text-secondary">{t(`${prefixCustomize}.way2.name`, { ns: 'appOverview' })}</p>
         <Button
           className="mt-2"
           onClick={() =>
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index cd50e7f8ee..131a0f9fd5 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -10,7 +10,6 @@ import { Trans, useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import Input from '@/app/components/base/input'
@@ -20,6 +19,7 @@ import { SimpleSelect } from '@/app/components/base/select'
 import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { useModalContext } from '@/context/modal-context'
@@ -241,14 +241,14 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         className="max-w-[520px] p-0"
       >
         {/* header */}
-        <div className="pb-3 pl-6 pr-5 pt-5">
+        <div className="pt-5 pr-5 pb-3 pl-6">
           <div className="flex items-center gap-1">
-            <div className="grow text-text-primary title-2xl-semi-bold">{t(`${prefixSettings}.title`, { ns: 'appOverview' })}</div>
+            <div className="grow title-2xl-semi-bold text-text-primary">{t(`${prefixSettings}.title`, { ns: 'appOverview' })}</div>
             <ActionButton className="shrink-0" onClick={onHide}>
               <RiCloseLine className="h-4 w-4" />
             </ActionButton>
           </div>
-          <div className="mt-0.5 text-text-tertiary system-xs-regular">
+          <div className="mt-0.5 system-xs-regular text-text-tertiary">
             <span>{t(`${prefixSettings}.modalTip`, { ns: 'appOverview' })}</span>
           </div>
         </div>
@@ -257,7 +257,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {/* name & icon */}
           <div className="flex gap-4">
             <div className="grow">
-              <div className={cn('mb-1 py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.webName`, { ns: 'appOverview' })}</div>
+              <div className={cn('mb-1 py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.webName`, { ns: 'appOverview' })}</div>
               <Input
                 className="w-full"
                 value={inputInfo.title}
@@ -277,32 +277,32 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           </div>
           {/* description */}
           <div className="relative">
-            <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.webDesc`, { ns: 'appOverview' })}</div>
+            <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.webDesc`, { ns: 'appOverview' })}</div>
             <Textarea
               className="mt-1"
               value={inputInfo.desc}
               onChange={e => onDesChange(e.target.value)}
               placeholder={t(`${prefixSettings}.webDescPlaceholder`, { ns: 'appOverview' }) as string}
             />
-            <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.webDescTip`, { ns: 'appOverview' })}</p>
+            <p className={cn('pb-0.5 body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.webDescTip`, { ns: 'appOverview' })}</p>
           </div>
           <Divider className="my-0 h-px" />
           {/* answer icon */}
           {isChat && (
             <div className="w-full">
               <div className="flex items-center justify-between">
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t('answerIcon.title', { ns: 'app' })}</div>
+                <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t('answerIcon.title', { ns: 'app' })}</div>
                 <Switch
                   value={inputInfo.use_icon_as_answer_icon}
                   onChange={v => setInputInfo({ ...inputInfo, use_icon_as_answer_icon: v })}
                 />
               </div>
-              <p className="pb-0.5 text-text-tertiary body-xs-regular">{t('answerIcon.description', { ns: 'app' })}</p>
+              <p className="pb-0.5 body-xs-regular text-text-tertiary">{t('answerIcon.description', { ns: 'app' })}</p>
             </div>
           )}
           {/* language */}
           <div className="flex items-center">
-            <div className={cn('grow py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.language`, { ns: 'appOverview' })}</div>
+            <div className={cn('grow py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.language`, { ns: 'appOverview' })}</div>
             <SimpleSelect
               wrapperClassName="w-[200px]"
               items={languages.filter(item => item.supported)}
@@ -315,8 +315,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {isChat && (
             <div className="flex items-center">
               <div className="grow">
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.chatColorTheme`, { ns: 'appOverview' })}</div>
-                <div className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.chatColorThemeDesc`, { ns: 'appOverview' })}</div>
+                <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.chatColorTheme`, { ns: 'appOverview' })}</div>
+                <div className="pb-0.5 body-xs-regular text-text-tertiary">{t(`${prefixSettings}.chatColorThemeDesc`, { ns: 'appOverview' })}</div>
               </div>
               <div className="shrink-0">
                 <Input
@@ -326,7 +326,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                   placeholder="E.g #A020F0"
                 />
                 <div className="flex items-center justify-between">
-                  <p className={cn('text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.chatColorThemeInverted`, { ns: 'appOverview' })}</p>
+                  <p className={cn('body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.chatColorThemeInverted`, { ns: 'appOverview' })}</p>
                   <Switch value={inputInfo.chatColorThemeInverted} onChange={v => setInputInfo({ ...inputInfo, chatColorThemeInverted: v })}></Switch>
                 </div>
               </div>
@@ -335,22 +335,22 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {/* workflow detail */}
           <div className="w-full">
             <div className="flex items-center justify-between">
-              <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.workflow.subTitle`, { ns: 'appOverview' })}</div>
+              <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.workflow.subTitle`, { ns: 'appOverview' })}</div>
               <Switch
                 disabled={!(appInfo.mode === AppModeEnum.WORKFLOW || appInfo.mode === AppModeEnum.ADVANCED_CHAT)}
                 value={inputInfo.show_workflow_steps}
                 onChange={v => setInputInfo({ ...inputInfo, show_workflow_steps: v })}
               />
             </div>
-            <p className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.workflow.showDesc`, { ns: 'appOverview' })}</p>
+            <p className="pb-0.5 body-xs-regular text-text-tertiary">{t(`${prefixSettings}.workflow.showDesc`, { ns: 'appOverview' })}</p>
           </div>
           {/* more settings switch */}
           <Divider className="my-0 h-px" />
           {!isShowMore && (
             <div className="flex cursor-pointer items-center" onClick={() => setIsShowMore(true)}>
               <div className="grow">
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.entry`, { ns: 'appOverview' })}</div>
-                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>
+                <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.more.entry`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 body-xs-regular text-text-tertiary')}>
                   {t(`${prefixSettings}.more.copyRightPlaceholder`, { ns: 'appOverview' })}
                   {' '}
                   &
@@ -368,7 +368,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               <div className="w-full">
                 <div className="flex items-center">
                   <div className="flex grow items-center">
-                    <div className={cn('mr-1 py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.copyright`, { ns: 'appOverview' })}</div>
+                    <div className={cn('mr-1 py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.more.copyright`, { ns: 'appOverview' })}</div>
                     {/* upgrade button */}
                     {enableBilling && isFreePlan && (
                       <div className="h-[18px] select-none">
@@ -397,7 +397,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                     />
                   </Tooltip>
                 </div>
-                <p className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.more.copyrightTip`, { ns: 'appOverview' })}</p>
+                <p className="pb-0.5 body-xs-regular text-text-tertiary">{t(`${prefixSettings}.more.copyrightTip`, { ns: 'appOverview' })}</p>
                 {inputInfo.copyrightSwitchValue && (
                   <Input
                     className="mt-2 h-10"
@@ -409,8 +409,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               </div>
               {/* privacy policy */}
               <div className="w-full">
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.privacyPolicy`, { ns: 'appOverview' })}</div>
-                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>
+                <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.more.privacyPolicy`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 body-xs-regular text-text-tertiary')}>
                   <Trans
                     i18nKey={`${prefixSettings}.more.privacyPolicyTip`}
                     ns="appOverview"
@@ -426,8 +426,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               </div>
               {/* custom disclaimer */}
               <div className="w-full">
-                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.customDisclaimer`, { ns: 'appOverview' })}</div>
-                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.more.customDisclaimerTip`, { ns: 'appOverview' })}</p>
+                <div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.more.customDisclaimer`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.more.customDisclaimerTip`, { ns: 'appOverview' })}</p>
                 <Textarea
                   className="mt-1"
                   value={inputInfo.customDisclaimer}
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index ffa5dc6ef4..7ccbfccf30 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -7,12 +7,12 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Confirm from '@/app/components/base/confirm'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@@ -98,20 +98,20 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
         isShow={show}
         onClose={noop}
       >
-        <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onClose}>
+        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose}>
           <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
         <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-default-burn p-3 shadow-xl">
           <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
         </div>
-        <div className="relative mt-3 text-xl font-semibold leading-[30px] text-text-primary">{t('switch', { ns: 'app' })}</div>
+        <div className="relative mt-3 text-xl leading-[30px] font-semibold text-text-primary">{t('switch', { ns: 'app' })}</div>
         <div className="my-1 text-sm leading-5 text-text-tertiary">
           <span>{t('switchTipStart', { ns: 'app' })}</span>
           <span className="font-medium text-text-secondary">{t('switchTip', { ns: 'app' })}</span>
           <span>{t('switchTipEnd', { ns: 'app' })}</span>
         </div>
         <div className="pb-4">
-          <div className="py-2 text-sm font-medium leading-[20px] text-text-primary">{t('switchLabel', { ns: 'app' })}</div>
+          <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('switchLabel', { ns: 'app' })}</div>
           <div className="flex items-center justify-between space-x-2">
             <AppIcon
               size="large"
@@ -152,7 +152,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
           </div>
           <div className="flex items-center">
             <Button className="mr-2" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-            <Button className="border-red-700" disabled={isAppsFull || !name} variant="warning" onClick={goStart}>{t('switchStart', { ns: 'app' })}</Button>
+            <Button className="border-red-700" disabled={isAppsFull || !name} variant="primary" destructive onClick={goStart}>{t('switchStart', { ns: 'app' })}</Button>
           </div>
         </div>
       </Modal>
diff --git a/web/app/components/app/text-generate/saved-items/no-data/index.tsx b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
index c6596c8ec3..cf7c9b6f89 100644
--- a/web/app/components/app/text-generate/saved-items/no-data/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/no-data/index.tsx
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type INoDataProps = {
   onStartCreateContent: () => void
@@ -18,14 +18,14 @@ const NoData: FC<INoDataProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className="rounded-xl bg-background-section-burn p-6 ">
+    <div className="rounded-xl bg-background-section-burn p-6">
       <div className="flex h-10 w-10 items-center justify-center radius-lg border-[0.5px] border-components-card-border bg-components-card-bg-alt shadow-lg backdrop-blur-xs">
         <RiBookmark3Line className="h-4 w-4 text-text-accent" />
       </div>
       <div className="mt-3">
         <span className="system-xl-semibold text-text-secondary">{t('generation.savedNoData.title', { ns: 'share' })}</span>
       </div>
-      <div className="system-sm-regular mt-1 text-text-tertiary">
+      <div className="mt-1 system-sm-regular text-text-tertiary">
         {t('generation.savedNoData.description', { ns: 'share' })}
       </div>
       <Button
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index 83649e0a4c..7df6699f40 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -6,9 +6,9 @@ import { RiImageCircleAiLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
 import { cn } from '@/utils/classnames'
-import Button from '../button'
 import Divider from '../divider'
 import EmojiPickerInner from '../emoji-picker/Inner'
 import { useLocalFileUploader } from '../image-uploader/hooks'
@@ -123,7 +123,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
                 type="button"
                 key={tab.key}
                 className={cn(
-                  'system-sm-medium flex h-8 flex-1 shrink-0 items-center justify-center rounded-lg p-2 text-text-tertiary',
+                  'flex h-8 flex-1 shrink-0 items-center justify-center rounded-lg p-2 system-sm-medium text-text-tertiary',
                   activeTab === tab.key && 'bg-components-main-nav-nav-button-bg-active text-text-accent shadow-md',
                 )}
                 onClick={() => setActiveTab(tab.key as AppIconType)}
diff --git a/web/app/components/base/button/__tests__/add-button.spec.tsx b/web/app/components/base/button/__tests__/add-button.spec.tsx
deleted file mode 100644
index 1ad999ec49..0000000000
--- a/web/app/components/base/button/__tests__/add-button.spec.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import AddButton from '../add-button'
-
-describe('AddButton', () => {
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const { container } = render(<AddButton onClick={vi.fn()} />)
-      expect(container.firstChild).toBeInTheDocument()
-    })
-
-    it('should render an add icon', () => {
-      render(<AddButton onClick={vi.fn()} />)
-      const iconSpan = screen.getByTestId('add-button').querySelector('span')
-      expect(iconSpan).toBeInTheDocument()
-    })
-  })
-
-  describe('Props', () => {
-    it('should apply custom className', () => {
-      const { container } = render(<AddButton onClick={vi.fn()} className="my-custom" />)
-      expect(container.firstChild).toHaveClass('my-custom')
-    })
-
-    it('should retain base classes when custom className is applied', () => {
-      const { container } = render(<AddButton onClick={vi.fn()} className="my-custom" />)
-      expect(container.firstChild).toHaveClass('cursor-pointer')
-      expect(container.firstChild).toHaveClass('rounded-md')
-      expect(container.firstChild).toHaveClass('select-none')
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onClick when clicked', () => {
-      const onClick = vi.fn()
-      const { container } = render(<AddButton onClick={onClick} />)
-      fireEvent.click(container.firstChild!)
-      expect(onClick).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call onClick multiple times on repeated clicks', () => {
-      const onClick = vi.fn()
-      const { container } = render(<AddButton onClick={onClick} />)
-      fireEvent.click(container.firstChild!)
-      fireEvent.click(container.firstChild!)
-      fireEvent.click(container.firstChild!)
-      expect(onClick).toHaveBeenCalledTimes(3)
-    })
-  })
-})
diff --git a/web/app/components/base/button/__tests__/sync-button.spec.tsx b/web/app/components/base/button/__tests__/sync-button.spec.tsx
deleted file mode 100644
index c86a3c4314..0000000000
--- a/web/app/components/base/button/__tests__/sync-button.spec.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import SyncButton from '../sync-button'
-
-describe('SyncButton', () => {
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const { container } = render(<SyncButton onClick={vi.fn()} />)
-      expect(container.firstChild).toBeInTheDocument()
-    })
-
-    it('should render a refresh icon', () => {
-      render(<SyncButton onClick={vi.fn()} />)
-      const iconSpan = screen.getByTestId('sync-button').querySelector('span')
-      expect(iconSpan).toBeInTheDocument()
-    })
-  })
-
-  describe('Props', () => {
-    it('should apply custom className', () => {
-      render(<SyncButton onClick={vi.fn()} className="my-custom" />)
-      const clickableDiv = screen.getByTestId('sync-button')
-      expect(clickableDiv).toHaveClass('my-custom')
-    })
-
-    it('should retain base classes when custom className is applied', () => {
-      render(<SyncButton onClick={vi.fn()} className="my-custom" />)
-      const clickableDiv = screen.getByTestId('sync-button')
-      expect(clickableDiv).toHaveClass('rounded-md')
-      expect(clickableDiv).toHaveClass('select-none')
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onClick when clicked', () => {
-      const onClick = vi.fn()
-      render(<SyncButton onClick={onClick} />)
-      const clickableDiv = screen.getByTestId('sync-button')
-      fireEvent.click(clickableDiv)
-      expect(onClick).toHaveBeenCalledTimes(1)
-    })
-
-    it('should call onClick multiple times on repeated clicks', () => {
-      const onClick = vi.fn()
-      render(<SyncButton onClick={onClick} />)
-      const clickableDiv = screen.getByTestId('sync-button')
-      fireEvent.click(clickableDiv)
-      fireEvent.click(clickableDiv)
-      fireEvent.click(clickableDiv)
-      expect(onClick).toHaveBeenCalledTimes(3)
-    })
-  })
-})
diff --git a/web/app/components/base/button/add-button.stories.tsx b/web/app/components/base/button/add-button.stories.tsx
deleted file mode 100644
index 9f710c29d6..0000000000
--- a/web/app/components/base/button/add-button.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import AddButton from './add-button'
-
-const meta = {
-  title: 'Base/General/AddButton',
-  component: AddButton,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Compact icon-only button used for inline “add” actions in lists, cards, and modals.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    className: {
-      control: 'text',
-      description: 'Extra classes appended to the clickable container.',
-    },
-    onClick: {
-      control: false,
-      description: 'Triggered when the add button is pressed.',
-    },
-  },
-  args: {
-    onClick: () => console.log('Add button clicked'),
-  },
-} satisfies Meta<typeof AddButton>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    className: 'bg-white/80 shadow-sm backdrop-blur-xs',
-  },
-}
-
-export const InToolbar: Story = {
-  render: args => (
-    <div className="flex items-center gap-2 rounded-lg border border-divider-subtle bg-components-panel-bg p-3">
-      <span className="text-xs text-text-tertiary">Attachments</span>
-      <div className="ml-auto flex items-center gap-2">
-        <AddButton {...args} />
-      </div>
-    </div>
-  ),
-  args: {
-    className: 'border border-dashed border-primary-200',
-  },
-}
diff --git a/web/app/components/base/button/add-button.tsx b/web/app/components/base/button/add-button.tsx
deleted file mode 100644
index 92f9ae6800..0000000000
--- a/web/app/components/base/button/add-button.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import * as React from 'react'
-import { cn } from '@/utils/classnames'
-
-type Props = {
-  className?: string
-  onClick: () => void
-}
-
-const AddButton: FC<Props> = ({
-  className,
-  onClick,
-}) => {
-  return (
-    <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick} data-testid="add-button">
-      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
-    </div>
-  )
-}
-export default React.memo(AddButton)
diff --git a/web/app/components/base/button/sync-button.stories.tsx b/web/app/components/base/button/sync-button.stories.tsx
deleted file mode 100644
index 015730c963..0000000000
--- a/web/app/components/base/button/sync-button.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import SyncButton from './sync-button'
-
-const meta = {
-  title: 'Base/General/SyncButton',
-  component: SyncButton,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Icon-only refresh button that surfaces a tooltip and is used for manual sync actions across the UI.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    className: {
-      control: 'text',
-      description: 'Additional classes appended to the clickable container.',
-    },
-    popupContent: {
-      control: 'text',
-      description: 'Tooltip text shown on hover.',
-    },
-    onClick: {
-      control: false,
-      description: 'Triggered when the sync button is pressed.',
-    },
-  },
-  args: {
-    popupContent: 'Sync now',
-    onClick: () => console.log('Sync button clicked'),
-  },
-} satisfies Meta<typeof SyncButton>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    className: 'bg-white/80 shadow-sm backdrop-blur-xs',
-  },
-}
-
-export const InHeader: Story = {
-  render: args => (
-    <div className="flex items-center gap-2 rounded-lg border border-divider-subtle bg-components-panel-bg p-3">
-      <span className="text-xs text-text-tertiary">Logs</span>
-      <div className="ml-auto flex items-center gap-2">
-        <SyncButton {...args} />
-      </div>
-    </div>
-  ),
-  args: {
-    popupContent: 'Refresh logs',
-  },
-}
diff --git a/web/app/components/base/button/sync-button.tsx b/web/app/components/base/button/sync-button.tsx
deleted file mode 100644
index 06c155fb1d..0000000000
--- a/web/app/components/base/button/sync-button.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import * as React from 'react'
-import TooltipPlus from '@/app/components/base/tooltip'
-import { cn } from '@/utils/classnames'
-
-type Props = {
-  className?: string
-  popupContent?: string
-  onClick: () => void
-}
-
-const SyncButton: FC<Props> = ({
-  className,
-  popupContent = '',
-  onClick,
-}) => {
-  return (
-    <TooltipPlus popupContent={popupContent}>
-      <div className={cn(className, 'cursor-pointer select-none rounded-md p-1 hover:bg-state-base-hover')} onClick={onClick} data-testid="sync-button">
-        <span className="i-ri-refresh-line h-4 w-4 text-text-tertiary" />
-      </div>
-    </TooltipPlus>
-  )
-}
-export default React.memo(SyncButton)
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
index f1a067b3ae..2da6b9f8e0 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import InputsFormContent from '@/app/components/base/chat/chat-with-history/inputs-form/content'
 import Divider from '@/app/components/base/divider'
 import { Message3Fill } from '@/app/components/base/icons/src/public/other'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { useChatWithHistoryContext } from '../context'
 
@@ -43,12 +43,12 @@ const InputsFormNode = ({
         )}
         >
           <Message3Fill className="h-6 w-6 shrink-0" />
-          <div className="system-xl-semibold grow text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
+          <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           {collapsed && (
-            <Button className="uppercase text-text-tertiary" size="small" variant="ghost" onClick={() => setCollapsed(false)}>{t('operation.edit', { ns: 'common' })}</Button>
+            <Button className="text-text-tertiary uppercase" size="small" variant="ghost" onClick={() => setCollapsed(false)}>{t('operation.edit', { ns: 'common' })}</Button>
           )}
           {!collapsed && currentConversationId && (
-            <Button className="uppercase text-text-tertiary" size="small" variant="ghost" onClick={() => setCollapsed(true)}>{t('operation.close', { ns: 'common' })}</Button>
+            <Button className="text-text-tertiary uppercase" size="small" variant="ghost" onClick={() => setCollapsed(true)}>{t('operation.close', { ns: 'common' })}</Button>
           )}
         </div>
         {!collapsed && (
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx
index 6ba2082c62..754d5c89b4 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/rename-modal.spec.tsx
@@ -83,12 +83,18 @@ describe('RenameModal', () => {
 
   it('shows loading state when saveLoading is true', () => {
     render(<RenameModal {...defaultProps} saveLoading />)
-    expect(screen.getByRole('status')).toBeInTheDocument()
+    const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+    expect(saveButton).toBeDisabled()
+    expect(saveButton).toHaveAttribute('aria-busy', 'true')
+    expect(saveButton.querySelector('.animate-spin')).toBeInTheDocument()
   })
 
   it('hides loading state when saveLoading is false', () => {
     render(<RenameModal {...defaultProps} saveLoading={false} />)
-    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+    const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+    expect(saveButton).not.toBeDisabled()
+    expect(saveButton).not.toHaveAttribute('aria-busy')
+    expect(saveButton.querySelector('.animate-spin')).not.toBeInTheDocument()
   })
 
   it('keeps edited name when parent rerenders with different name prop', async () => {
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index 4102d7d591..7759b98847 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -11,11 +11,11 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import List from '@/app/components/base/chat/chat-with-history/sidebar/list'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import Confirm from '@/app/components/base/confirm'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
+import { Button } from '@/app/components/base/ui/button'
 import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { cn } from '@/utils/classnames'
@@ -100,7 +100,7 @@ const Sidebar = ({ isPanel, panelVisible }: Props) => {
             imageUrl={appData?.site.icon_url}
           />
         </div>
-        <div className={cn('system-md-semibold grow truncate text-text-secondary')}>{appData?.site.title}</div>
+        <div className={cn('grow truncate system-md-semibold text-text-secondary')}>{appData?.site.title}</div>
         {!isMobile && isSidebarCollapsed && (
           <ActionButton size="l" onClick={() => handleSidebarCollapse(false)}>
             <RiExpandRightLine className="h-[18px] w-[18px]" />
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx b/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
index e66ca351f2..ab5252da64 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type IRenameModalProps = {
   isShow: boolean
@@ -32,7 +32,7 @@ const RenameModal: FC<IRenameModalProps> = ({
       isShow={isShow}
       onClose={onClose}
     >
-      <div className="mt-6 text-sm font-medium leading-[21px] text-text-primary">{t('chat.conversationName', { ns: 'common' })}</div>
+      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('chat.conversationName', { ns: 'common' })}</div>
       <Input
         className="mt-2 h-10 w-full"
         value={tempName}
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
index 2c22fabdb5..5da8a754fa 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/human-input-form.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { HumanInputFormProps } from './type'
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import type { UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ContentItem from './content-item'
 import { getButtonStyle, initializeInputs, splitByOutputVar } from './utils'
 
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
index 6800daedbe..2b60457c80 100644
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -11,8 +11,8 @@ import {
 import { noop } from 'es-toolkit/function'
 import { memo } from 'react'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type OperationProps = {
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index f04169327f..55b6193bd1 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -17,7 +17,7 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import Answer from './answer'
 import ChatInputArea from './chat-input-area'
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index ef2277d18b..67056f99dd 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -17,9 +17,9 @@ import Textarea from 'react-textarea-autosize'
 import { FileList } from '@/app/components/base/file-uploader'
 import { User } from '@/app/components/base/icons/src/public/avatar'
 import { Markdown } from '@/app/components/base/markdown'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import ActionButton from '../../action-button'
-import Button from '../../button'
 import { toast } from '../../ui/toast'
 import { CssTransform } from '../embedded-chatbot/theme/utils'
 import ContentSwitch from './content-switch'
@@ -207,10 +207,10 @@ const Question: FC<QuestionProps> = ({
             ? <Markdown content={content} />
             : (
                 <div className="flex flex-col gap-4">
-                  <div className="max-h-[158px] overflow-y-auto overflow-x-hidden pr-1">
+                  <div className="max-h-[158px] overflow-x-hidden overflow-y-auto pr-1">
                     <Textarea
                       className={cn(
-                        'w-full resize-none bg-transparent p-0 leading-7 text-text-primary outline-hidden body-lg-regular',
+                        'w-full resize-none bg-transparent p-0 body-lg-regular leading-7 text-text-primary outline-hidden',
                       )}
                       autoFocus
                       minRows={1}
diff --git a/web/app/components/base/chat/chat/try-to-ask.tsx b/web/app/components/base/chat/chat/try-to-ask.tsx
index d9c7b8abb0..ada816b8fa 100644
--- a/web/app/components/base/chat/chat/try-to-ask.tsx
+++ b/web/app/components/base/chat/chat/try-to-ask.tsx
@@ -2,8 +2,8 @@ import type { FC } from 'react'
 import type { OnSend } from '../types'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 
 type TryToAskProps = {
   suggestedQuestions: string[]
@@ -19,7 +19,7 @@ const TryToAsk: FC<TryToAskProps> = ({
     <div className="mb-2 py-2">
       <div className="mb-2.5 flex items-center justify-between gap-2">
         <Divider bgStyle="gradient" className="h-px w-auto! grow rotate-180" />
-        <div className="system-xs-medium-uppercase shrink-0 text-text-tertiary">{t('feature.suggestedQuestionsAfterAnswer.tryToAsk', { ns: 'appDebug' })}</div>
+        <div className="shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('feature.suggestedQuestionsAfterAnswer.tryToAsk', { ns: 'appDebug' })}</div>
         <Divider bgStyle="gradient" className="h-px w-auto! grow" />
       </div>
       <div className="flex flex-wrap justify-center">
@@ -29,7 +29,7 @@ const TryToAsk: FC<TryToAskProps> = ({
               size="small"
               key={index}
               variant="secondary-accent"
-              className="mb-1 mr-1 last:mr-0"
+              className="mr-1 mb-1 last:mr-0"
               onClick={() => onSend(suggestQuestion)}
             >
               {suggestQuestion}
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
index 5f53bdec2d..430e83478e 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { AppSourceType } from '@/service/share'
 import { cn } from '@/utils/classnames'
 import { useEmbeddedChatbotContext } from '../context'
@@ -49,10 +49,10 @@ const InputsFormNode = ({
         )}
         >
           <div className="i-custom-public-other-message-3-fill h-6 w-6 shrink-0" />
-          <div className="grow text-text-secondary system-xl-semibold">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
+          <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
           {collapsed && (
             <Button
-              className="uppercase text-text-tertiary"
+              className="text-text-tertiary uppercase"
               size="small"
               variant="ghost"
               onClick={() => setCollapsed(false)}
@@ -63,7 +63,7 @@ const InputsFormNode = ({
           )}
           {!collapsed && currentConversationId && (
             <Button
-              className="uppercase text-text-tertiary"
+              className="text-text-tertiary uppercase"
               size="small"
               variant="ghost"
               onClick={() => setCollapsed(true)}
diff --git a/web/app/components/base/checkbox-list/index.tsx b/web/app/components/base/checkbox-list/index.tsx
index 5fb5ca6028..61947ad769 100644
--- a/web/app/components/base/checkbox-list/index.tsx
+++ b/web/app/components/base/checkbox-list/index.tsx
@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import Checkbox from '@/app/components/base/checkbox'
 import SearchInput from '@/app/components/base/search-input'
+import { Button } from '@/app/components/base/ui/button'
 import SearchMenu from '@/assets/search-menu.svg'
 import { cn } from '@/utils/classnames'
-import Button from '../button'
 
 type CheckboxListOption = {
   label: string
@@ -100,12 +100,12 @@ const CheckboxList: FC<CheckboxListProps> = ({
   return (
     <div className={cn('flex w-full flex-col gap-1', containerClassName)}>
       {label && (
-        <div className="text-text-secondary system-sm-medium">
+        <div className="system-sm-medium text-text-secondary">
           {label}
         </div>
       )}
       {description && (
-        <div className="text-text-tertiary body-xs-regular">
+        <div className="body-xs-regular text-text-tertiary">
           {description}
         </div>
       )}
@@ -126,7 +126,7 @@ const CheckboxList: FC<CheckboxListProps> = ({
               ? (
                   <div className="flex min-w-0 flex-1 items-center gap-1">
                     {title && (
-                      <span className="truncate leading-5 text-text-secondary system-xs-semibold-uppercase">
+                      <span className="truncate system-xs-semibold-uppercase leading-5 text-text-secondary">
                         {title}
                       </span>
                     )}
@@ -138,7 +138,7 @@ const CheckboxList: FC<CheckboxListProps> = ({
                   </div>
                 )
               : (
-                  <div className="flex-1 leading-6 text-text-secondary system-sm-medium-uppercase">
+                  <div className="flex-1 system-sm-medium-uppercase leading-6 text-text-secondary">
                     {
                       filteredOptions.length > 0
                         ? t('operation.searchCount', { ns: 'common', count: filteredOptions.length, content: title })
@@ -169,7 +169,7 @@ const CheckboxList: FC<CheckboxListProps> = ({
                     ? (
                         <div className="flex flex-col items-center justify-center gap-2">
                           <img alt="search menu" src={SearchMenu.src} width={32} />
-                          <span className="text-text-secondary system-sm-regular">{t('operation.noSearchResults', { ns: 'common', content: title })}</span>
+                          <span className="system-sm-regular text-text-secondary">{t('operation.noSearchResults', { ns: 'common', content: title })}</span>
                           <Button variant="secondary-accent" size="small" onClick={() => setSearchQuery('')}>{t('operation.resetKeywords', { ns: 'common' })}</Button>
                         </div>
                       )
@@ -203,7 +203,7 @@ const CheckboxList: FC<CheckboxListProps> = ({
                         id={option.value}
                       />
                       <div
-                        className="flex-1 truncate text-text-secondary system-sm-medium"
+                        className="flex-1 truncate system-sm-medium text-text-secondary"
                         title={option.label}
                       >
                         {option.label}
diff --git a/web/app/components/base/confirm/index.stories.tsx b/web/app/components/base/confirm/index.stories.tsx
index 6d22bbe87b..9f2998eb55 100644
--- a/web/app/components/base/confirm/index.stories.tsx
+++ b/web/app/components/base/confirm/index.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useState } from 'react'
+import { Button } from '@/app/components/base/ui/button'
 import Confirm from '.'
-import Button from '../button'
 
 const meta = {
   title: 'Base/Feedback/Confirm',
diff --git a/web/app/components/base/confirm/index.tsx b/web/app/components/base/confirm/index.tsx
index 6f14a3497c..f958d32b99 100644
--- a/web/app/components/base/confirm/index.tsx
+++ b/web/app/components/base/confirm/index.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
-import Button from '../button'
+import { Button } from '@/app/components/base/ui/button'
 import Tooltip from '../tooltip'
 
 /** @deprecated Use `@/app/components/base/ui/alert-dialog` instead. */
@@ -122,7 +122,7 @@ function Confirm({
     >
       <div ref={dialogRef} className="relative w-full max-w-[480px] overflow-hidden">
         <div className="shadows-shadow-lg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid border-components-panel-border bg-components-panel-bg">
-          <div className="flex flex-col items-start gap-2 self-stretch pb-4 pl-6 pr-6 pt-6">
+          <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
             <Tooltip
               popupContent={title}
               disabled={!isTitleTruncated}
@@ -130,19 +130,19 @@ function Confirm({
               asChild={false}
               triggerClassName="w-full"
             >
-              <div ref={titleRef} className="title-2xl-semi-bold w-full truncate text-text-primary">
+              <div ref={titleRef} className="w-full truncate title-2xl-semi-bold text-text-primary">
                 {title}
               </div>
             </Tooltip>
-            <div className="w-full whitespace-pre-wrap wrap-break-word text-text-tertiary system-md-regular">{content}</div>
+            <div className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">{content}</div>
             {confirmInputLabel && (
               <div className="mt-2">
-                <label className="mb-1 block text-text-secondary system-sm-regular">
+                <label className="mb-1 block system-sm-regular text-text-secondary">
                   {confirmInputLabel}
                 </label>
                 <input
                   type="text"
-                  className="border-components-input-border bg-components-input-bg focus:border-components-input-border-focus focus:ring-components-input-border-focus h-9 w-full rounded-lg border px-3 text-sm text-text-primary placeholder:text-text-quaternary focus:outline-hidden focus:ring-1"
+                  className="border-components-input-border bg-components-input-bg focus:border-components-input-border-focus focus:ring-components-input-border-focus h-9 w-full rounded-lg border px-3 text-sm text-text-primary placeholder:text-text-quaternary focus:ring-1 focus:outline-hidden"
                   placeholder={confirmInputPlaceholder}
                   value={confirmInputValue}
                   onChange={e => onConfirmInputChange?.(e.target.value)}
diff --git a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
index 4203f16372..237282c348 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
@@ -3,8 +3,8 @@ import type { DatePickerFooterProps } from '../types'
 import { RiTimeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
-import Button from '../../button'
 import { ViewType } from '../types'
 
 const Footer: FC<DatePickerFooterProps> = ({
@@ -27,8 +27,8 @@ const Footer: FC<DatePickerFooterProps> = ({
       {needTimePicker && (
         <button
           type="button"
-          className="system-xs-medium flex items-center gap-x-px rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1.5
-                      py-1 text-components-button-secondary-accent-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]"
+          className="flex items-center gap-x-px rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1.5 py-1
+                      system-xs-medium text-components-button-secondary-accent-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]"
           onClick={handleClickTimePicker}
         >
           <RiTimeLine className="h-3.5 w-3.5" />
@@ -40,7 +40,7 @@ const Footer: FC<DatePickerFooterProps> = ({
         {/* Now */}
         <button
           type="button"
-          className="system-xs-medium flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text"
+          className="flex items-center justify-center px-1.5 py-1 system-xs-medium text-components-button-secondary-accent-text"
           onClick={handleSelectCurrentDate}
         >
           <span className="px-[3px]">{t('operation.now', { ns: 'time' })}</span>
diff --git a/web/app/components/base/date-and-time-picker/time-picker/footer.tsx b/web/app/components/base/date-and-time-picker/time-picker/footer.tsx
index 4cf311eed7..f3c0b7e9ed 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/footer.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { TimePickerFooterProps } from '../types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '../../button'
+import { Button } from '@/app/components/base/ui/button'
 
 const Footer: FC<TimePickerFooterProps> = ({
   handleSelectCurrentTime,
diff --git a/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx b/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx
index 54d9feba7f..0cbcc3b8fb 100644
--- a/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/year-and-month-picker/footer.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { YearAndMonthPickerFooterProps } from '../types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '../../button'
+import { Button } from '@/app/components/base/ui/button'
 
 const Footer: FC<YearAndMonthPickerFooterProps> = ({
   handleYearMonthCancel,
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index 0d040e6020..76025085aa 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
-import Button from '../button'
 
 export type IDrawerProps = {
   title?: string
@@ -73,7 +73,7 @@ export default function Drawer({
               {title && (
                 <DialogTitle
                   as="h3"
-                  className="text-lg font-medium leading-6 text-text-primary"
+                  className="text-lg leading-6 font-medium text-text-primary"
                 >
                   {title}
                 </DialogTitle>
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 9356efbfeb..6213b61226 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -4,9 +4,9 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import EmojiPickerInner from './Inner'
 
@@ -45,7 +45,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
             className="pt-3"
             onSelect={handleSelectEmoji}
           />
-          <Divider className="mb-0 mt-3" />
+          <Divider className="mt-3 mb-0" />
           <div className="flex w-full items-center justify-center gap-2 p-3">
             <Button
               className="w-full"
diff --git a/web/app/components/base/error-boundary/index.tsx b/web/app/components/base/error-boundary/index.tsx
index 3e7bc03ed6..639599c6f6 100644
--- a/web/app/components/base/error-boundary/index.tsx
+++ b/web/app/components/base/error-boundary/index.tsx
@@ -4,7 +4,7 @@ import { RiAlertLine, RiBugLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { IS_DEV } from '@/config'
 import { cn } from '@/utils/classnames'
 
@@ -151,14 +151,14 @@ class ErrorBoundaryInner extends React.Component<
               <div className="rounded-lg bg-gray-100 p-4">
                 <div className="mb-2">
                   <span className="font-mono text-xs font-semibold text-gray-600">{copy.error}</span>
-                  <pre className="mt-1 overflow-auto whitespace-pre-wrap font-mono text-xs text-gray-800">
+                  <pre className="mt-1 overflow-auto font-mono text-xs whitespace-pre-wrap text-gray-800">
                     {error.toString()}
                   </pre>
                 </div>
                 {errorInfo && (
                   <div>
                     <span className="font-mono text-xs font-semibold text-gray-600">{copy.componentStack}</span>
-                    <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap font-mono text-xs text-gray-700">
+                    <pre className="mt-1 max-h-40 overflow-auto font-mono text-xs whitespace-pre-wrap text-gray-700">
                       {errorInfo.componentStack}
                     </pre>
                   </div>
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
index 56e58b0319..a89a00c01a 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
@@ -4,8 +4,8 @@ import type { AnnotationReplyConfig } from '@/models/debug'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
@@ -59,7 +59,7 @@ const ConfigParamModal: FC<Props> = ({ isShow, onHide: doHide, onSave, isInit, a
   }
   return (
     <Modal isShow={isShow} onClose={onHide} className="!mt-14 !w-[640px] !max-w-none !p-6">
-      <div className="mb-2 text-text-primary title-2xl-semi-bold">
+      <div className="mb-2 title-2xl-semi-bold text-text-primary">
         {t(`initSetup.${isInit ? 'title' : 'configTitle'}`, { ns: 'appAnnotation' })}
       </div>
 
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
index 1ad4ef613e..e5ec955226 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
@@ -5,12 +5,12 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import ConfigParamModal from '@/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal'
 import useAnnotationConfig from '@/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { MessageFast } from '@/app/components/base/icons/src/vender/features'
+import { Button } from '@/app/components/base/ui/button'
 import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { ANNOTATION_DEFAULT } from '@/config'
 import { usePathname, useRouter } from '@/next/navigation'
@@ -92,20 +92,20 @@ const AnnotationReply = ({
       >
         <>
           {!annotationReply?.enabled && (
-            <div className="line-clamp-2 min-h-8 text-text-tertiary system-xs-regular">{t('feature.annotation.description', { ns: 'appDebug' })}</div>
+            <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.annotation.description', { ns: 'appDebug' })}</div>
           )}
           {!!annotationReply?.enabled && (
             <>
               {!isHovering && (
                 <div className="flex items-center gap-4 pt-0.5">
                   <div className="">
-                    <div className="mb-0.5 text-text-tertiary system-2xs-medium-uppercase">{t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })}</div>
-                    <div className="text-text-secondary system-xs-regular">{annotationReply.score_threshold || '-'}</div>
+                    <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.annotation.scoreThreshold.title', { ns: 'appDebug' })}</div>
+                    <div className="system-xs-regular text-text-secondary">{annotationReply.score_threshold || '-'}</div>
                   </div>
                   <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                   <div className="">
-                    <div className="mb-0.5 text-text-tertiary system-2xs-medium-uppercase">{t('modelProvider.embeddingModel.key', { ns: 'common' })}</div>
-                    <div className="text-text-secondary system-xs-regular">{annotationReply.embedding_model?.embedding_model_name}</div>
+                    <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('modelProvider.embeddingModel.key', { ns: 'common' })}</div>
+                    <div className="system-xs-regular text-text-secondary">{annotationReply.embedding_model?.embedding_model_name}</div>
                   </div>
                 </div>
               )}
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
index 36566beac8..c27f6348b2 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
@@ -6,11 +6,11 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { LoveMessage } from '@/app/components/base/icons/src/vender/features'
+import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 
 type Props = {
@@ -96,12 +96,12 @@ const ConversationOpener = ({
     >
       <>
         {!opening?.enabled && (
-          <div className="line-clamp-2 min-h-8 text-text-tertiary system-xs-regular">{t('feature.conversationOpener.description', { ns: 'appDebug' })}</div>
+          <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.conversationOpener.description', { ns: 'appDebug' })}</div>
         )}
         {!!opening?.enabled && (
           <>
             {!isHovering && (
-              <div className="line-clamp-2 min-h-8 text-text-tertiary system-xs-regular">
+              <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">
                 {opening.opening_statement || t('openingStatement.placeholder', { ns: 'appDebug' })}
               </div>
             )}
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
index 1bb2ed1502..6c12907196 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -10,10 +10,10 @@ import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
 import ConfirmAddVar from '@/app/components/app/configuration/config-prompt/confirm-add-var'
 import { getInputKeys } from '@/app/components/base/block-input'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
 import PromptEditor from '@/app/components/base/prompt-editor'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { checkKeys, getNewVar } from '@/utils/var'
 
@@ -104,7 +104,7 @@ const OpeningSettingModal = ({
     return (
       <div>
         <div className="flex items-center py-2">
-          <div className="flex shrink-0 space-x-0.5 text-xs font-medium leading-[18px] text-text-tertiary">
+          <div className="flex shrink-0 space-x-0.5 text-xs leading-[18px] font-medium text-text-tertiary">
             <div className="uppercase">{t('openingStatement.openingQuestion', { ns: 'appDebug' })}</div>
             <div>·</div>
             <div>
@@ -152,13 +152,13 @@ const OpeningSettingModal = ({
                       return item
                     }))
                   }}
-                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pl-1.5 pr-8 text-sm leading-9 text-text-secondary focus:outline-hidden"
+                  className="h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pr-8 pl-1.5 text-sm leading-9 text-text-secondary focus:outline-hidden"
                   onFocus={() => setFocusID(index)}
                   onBlur={() => setFocusID(null)}
                 />
 
                 <div
-                  className="absolute right-1.5 top-1/2 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+                  className="absolute top-1/2 right-1.5 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
                   onClick={() => {
                     setTempSuggestedQuestions(tempSuggestedQuestions.filter((_, i) => index !== i))
                   }}
@@ -177,7 +177,7 @@ const OpeningSettingModal = ({
             className="mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3 text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover"
           >
             <span className="i-ri-add-line h-4 w-4" />
-            <div className="text-[13px] system-sm-medium">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
+            <div className="system-sm-medium text-[13px]">{t('variableConfig.addOption', { ns: 'appDebug' })}</div>
           </div>
         )}
       </div>
@@ -191,7 +191,7 @@ const OpeningSettingModal = ({
       className="mt-14! w-[640px]! max-w-none! bg-components-panel-bg-blur! p-6!"
     >
       <div className="mb-6 flex items-center justify-between">
-        <div className="text-text-primary title-2xl-semi-bold">{t('feature.conversationOpener.title', { ns: 'appDebug' })}</div>
+        <div className="title-2xl-semi-bold text-text-primary">{t('feature.conversationOpener.title', { ns: 'appDebug' })}</div>
         <div
           className="cursor-pointer p-1"
           onClick={onCancel}
diff --git a/web/app/components/base/features/new-feature-panel/feature-bar.tsx b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
index 4a19fe4dc6..b537002133 100644
--- a/web/app/components/base/features/new-feature-panel/feature-bar.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
@@ -2,11 +2,11 @@ import { RiApps2AddLine, RiArrowRightLine, RiSparklingFill } from '@remixicon/re
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures } from '@/app/components/base/features/hooks'
 import VoiceSettings from '@/app/components/base/features/new-feature-panel/text-to-speech/voice-settings'
 import { Citations, ContentModeration, FolderUpload, LoveMessage, MessageFast, Microphone01, TextToAudio, VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type Props = {
@@ -39,7 +39,7 @@ const FeatureBar = ({
   }, [features, isChatMode, showFileUpload])
 
   return (
-    <div className="m-1 mt-0 -translate-y-2 rounded-b-[10px] border-b border-l border-r border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 px-2.5 py-2 pt-4">
+    <div className="m-1 mt-0 -translate-y-2 rounded-b-[10px] border-r border-b border-l border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 px-2.5 py-2 pt-4">
       {noFeatureEnabled && (
         <div className="flex cursor-pointer items-end gap-1" onClick={() => onFeatureBarClick?.(true)}>
           <RiApps2AddLine className="h-3.5 w-3.5 text-text-accent" />
@@ -134,7 +134,7 @@ const FeatureBar = ({
               </Tooltip>
             )}
           </div>
-          <div className="body-xs-regular grow text-text-tertiary">{t('feature.bar.enableText', { ns: 'appDebug' })}</div>
+          <div className="grow body-xs-regular text-text-tertiary">{t('feature.bar.enableText', { ns: 'appDebug' })}</div>
           {
             !hideEditEntrance && (
               <Button className="shrink-0" variant="ghost-accent" size="small" onClick={() => onFeatureBarClick?.(true)}>
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
index 64c03d1fe1..0b15b6ff19 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
@@ -4,12 +4,12 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import SettingModal from '@/app/components/base/features/new-feature-panel/file-upload/setting-modal'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { FolderUpload } from '@/app/components/base/icons/src/vender/features'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   disabled: boolean
@@ -64,19 +64,19 @@ const FileUpload = ({
     >
       <>
         {!file?.enabled && (
-          <div className="system-xs-regular line-clamp-2 min-h-8 text-text-tertiary">{t('feature.fileUpload.description', { ns: 'appDebug' })}</div>
+          <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.fileUpload.description', { ns: 'appDebug' })}</div>
         )}
         {file?.enabled && (
           <>
             {!isHovering && !modalOpen && (
               <div className="flex items-center gap-4 pt-0.5">
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('feature.fileUpload.supportedTypes', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.fileUpload.supportedTypes', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{supportedTypes}</div>
                 </div>
                 <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('feature.fileUpload.numberLimit', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.fileUpload.numberLimit', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{file?.number_limits}</div>
                 </div>
               </div>
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
index b6674abf07..23f2e2a25e 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx
@@ -4,9 +4,9 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+import { Button } from '@/app/components/base/ui/button'
 import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 
@@ -57,7 +57,7 @@ const SettingContent = ({
   return (
     <>
       <div className="mb-4 flex items-center justify-between">
-        <div className="text-text-primary system-xl-semibold">{!imageUpload ? t('feature.fileUpload.modalTitle', { ns: 'appDebug' }) : t('feature.imageUpload.modalTitle', { ns: 'appDebug' })}</div>
+        <div className="system-xl-semibold text-text-primary">{!imageUpload ? t('feature.fileUpload.modalTitle', { ns: 'appDebug' }) : t('feature.imageUpload.modalTitle', { ns: 'appDebug' })}</div>
         <div
           className="cursor-pointer p-1"
           onClick={onClose}
diff --git a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
index 3d99820925..4fc4cc070e 100644
--- a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
@@ -5,11 +5,11 @@ import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import SettingModal from '@/app/components/base/features/new-feature-panel/file-upload/setting-modal'
 import { FeatureEnum } from '@/app/components/base/features/types'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   disabled: boolean
@@ -72,19 +72,19 @@ const FileUpload = ({
     >
       <>
         {!file?.enabled && (
-          <div className="system-xs-regular line-clamp-2 min-h-8 text-text-tertiary">{t('feature.imageUpload.description', { ns: 'appDebug' })}</div>
+          <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.imageUpload.description', { ns: 'appDebug' })}</div>
         )}
         {file?.enabled && (
           <>
             {!isHovering && !modalOpen && (
               <div className="flex items-center gap-4 pt-0.5">
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('feature.imageUpload.supportedTypes', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.imageUpload.supportedTypes', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{supportedTypes}</div>
                 </div>
                 <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('feature.imageUpload.numberLimit', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.imageUpload.numberLimit', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{file?.number_limits}</div>
                 </div>
               </div>
diff --git a/web/app/components/base/features/new-feature-panel/moderation/index.tsx b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
index 5dbb1e7e2a..5e97f6d459 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
@@ -3,11 +3,11 @@ import { RiEqualizer2Line } from '@remixicon/react'
 import { produce } from 'immer'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { ContentModeration } from '@/app/components/base/icons/src/vender/features'
+import { Button } from '@/app/components/base/ui/button'
 import { useLocale } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
 import { useCodeBasedExtensions } from '@/service/use-common'
@@ -139,20 +139,20 @@ const Moderation = ({
     >
       <>
         {!moderation?.enabled && (
-          <div className="line-clamp-2 min-h-8 text-text-tertiary system-xs-regular">{t('feature.moderation.description', { ns: 'appDebug' })}</div>
+          <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.moderation.description', { ns: 'appDebug' })}</div>
         )}
         {!!moderation?.enabled && (
           <>
             {!isHovering && (
               <div className="flex items-center gap-4 pt-0.5">
                 <div className="">
-                  <div className="mb-0.5 text-text-tertiary system-2xs-medium-uppercase">{t('feature.moderation.modal.provider.title', { ns: 'appDebug' })}</div>
-                  <div className="text-text-secondary system-xs-regular">{providerContent}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.moderation.modal.provider.title', { ns: 'appDebug' })}</div>
+                  <div className="system-xs-regular text-text-secondary">{providerContent}</div>
                 </div>
                 <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
-                  <div className="mb-0.5 text-text-tertiary system-2xs-medium-uppercase">{t('feature.moderation.contentEnableLabel', { ns: 'appDebug' })}</div>
-                  <div className="text-text-secondary system-xs-regular">{enableContent}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('feature.moderation.contentEnableLabel', { ns: 'appDebug' })}</div>
+                  <div className="system-xs-regular text-text-secondary">{enableContent}</div>
                 </div>
               </div>
             )}
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index f128666528..8a6862eb82 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -4,9 +4,9 @@ import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
@@ -232,7 +232,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       className="mt-14! w-[600px]! max-w-none! p-6!"
     >
       <div className="flex items-center justify-between">
-        <div className="text-text-primary title-2xl-semi-bold">{t('feature.moderation.modal.title', { ns: 'appDebug' })}</div>
+        <div className="title-2xl-semi-bold text-text-primary">{t('feature.moderation.modal.title', { ns: 'appDebug' })}</div>
         <div
           role="button"
           tabIndex={0}
@@ -249,7 +249,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
         </div>
       </div>
       <div className="py-2">
-        <div className="text-sm font-medium leading-9 text-text-primary">
+        <div className="text-sm leading-9 font-medium text-text-primary">
           {t('feature.moderation.modal.provider.title', { ns: 'appDebug' })}
         </div>
         <div className="grid grid-cols-3 gap-2.5">
@@ -258,9 +258,9 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
               <div
                 key={provider.key}
                 className={cn(
-                  'flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary system-sm-regular',
+                  'flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 system-sm-regular text-text-secondary',
                   localeData.type !== provider.key && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-                  localeData.type === provider.key && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs system-sm-medium',
+                  localeData.type === provider.key && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium shadow-xs',
                   localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled',
                 )}
                 onClick={() => handleDataTypeChange(provider.key)}
@@ -279,7 +279,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
         {
           !isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
             <div className="mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2">
-              <span className="i-custom-vender-line-general-info-circle mr-1 h-4 w-4 text-[#F79009]" />
+              <span className="mr-1 i-custom-vender-line-general-info-circle h-4 w-4 text-[#F79009]" />
               <div className="flex items-center text-xs font-medium text-gray-700">
                 {t('feature.moderation.modal.openaiNotConfig.before', { ns: 'appDebug' })}
                 <span
@@ -308,7 +308,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                 className="block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-hidden"
                 placeholder={t('feature.moderation.modal.keywords.placeholder', { ns: 'appDebug' }) || ''}
               />
-              <div className="absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
+              <div className="absolute right-2 bottom-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
                 <span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>
                 /
                 <span className="text-text-tertiary">
@@ -331,7 +331,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
                 rel="noopener noreferrer"
                 className="group flex items-center text-xs text-text-tertiary hover:text-primary-600"
               >
-                <span className="i-custom-vender-line-education-book-open-01 mr-1 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
+                <span className="mr-1 i-custom-vender-line-education-book-open-01 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
                 {t('apiBasedExtension.link', { ns: 'common' })}
               </a>
             </div>
@@ -368,7 +368,7 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
         info={(localeData.type === 'api' && t('feature.moderation.modal.content.fromApi', { ns: 'appDebug' })) || ''}
         showPreset={localeData.type !== 'api'}
       />
-      <div className="mb-8 mt-1 text-xs font-medium text-text-tertiary">{t('feature.moderation.modal.content.condition', { ns: 'appDebug' })}</div>
+      <div className="mt-1 mb-8 text-xs font-medium text-text-tertiary">{t('feature.moderation.modal.content.condition', { ns: 'appDebug' })}</div>
       <div className="flex items-center justify-end">
         <Button
           onClick={onCancel}
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
index f72a5859f7..2268aa4d1e 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
@@ -4,12 +4,12 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import VoiceSettings from '@/app/components/base/features/new-feature-panel/text-to-speech/voice-settings'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { TextToAudio } from '@/app/components/base/icons/src/vender/features'
+import { Button } from '@/app/components/base/ui/button'
 import { languages } from '@/i18n-config/language'
 import { TtsAutoPlay } from '@/types/app'
 
@@ -63,24 +63,24 @@ const TextToSpeech = ({
     >
       <>
         {!features.text2speech?.enabled && (
-          <div className="system-xs-regular line-clamp-2 min-h-8 text-text-tertiary">{t('feature.textToSpeech.description', { ns: 'appDebug' })}</div>
+          <div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{t('feature.textToSpeech.description', { ns: 'appDebug' })}</div>
         )}
         {!!features.text2speech?.enabled && (
           <>
             {!isHovering && !modalOpen && (
               <div className="flex items-center gap-4 pt-0.5">
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('voice.voiceSettings.language', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('voice.voiceSettings.language', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{languageInfo?.name || '-'}</div>
                 </div>
                 <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('voice.voiceSettings.voice', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('voice.voiceSettings.voice', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{features.text2speech?.voice || t('voice.defaultDisplay', { ns: 'appDebug' })}</div>
                 </div>
                 <div className="h-[27px] w-px rotate-12 bg-divider-subtle"></div>
                 <div className="">
-                  <div className="system-2xs-medium-uppercase mb-0.5 text-text-tertiary">{t('voice.voiceSettings.autoPlay', { ns: 'appDebug' })}</div>
+                  <div className="mb-0.5 system-2xs-medium-uppercase text-text-tertiary">{t('voice.voiceSettings.autoPlay', { ns: 'appDebug' })}</div>
                   <div className="system-xs-regular text-text-secondary">{features.text2speech?.autoPlay === TtsAutoPlay.enabled ? t('voice.voiceSettings.autoPlayEnabled', { ns: 'appDebug' }) : t('voice.voiceSettings.autoPlayDisabled', { ns: 'appDebug' })}</div>
                 </div>
               </div>
diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
index a35ade64c4..f07119311b 100644
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -5,12 +5,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { FILE_URL_REGEX } from '../constants'
 import FileInput from '../file-input'
@@ -74,7 +74,7 @@ const FileFromLinkOrLocal = ({
                 )}
                 >
                   <input
-                    className="mr-0.5 block grow appearance-none bg-transparent px-1 outline-hidden system-sm-regular"
+                    className="mr-0.5 block grow appearance-none bg-transparent px-1 system-sm-regular outline-hidden"
                     placeholder={fileLinkPlaceholderText}
                     value={url}
                     onChange={(e) => {
@@ -95,7 +95,7 @@ const FileFromLinkOrLocal = ({
                 </div>
                 {
                   showError && (
-                    <div className="mt-0.5 text-text-destructive body-xs-regular">
+                    <div className="mt-0.5 body-xs-regular text-text-destructive">
                       {t('fileUploader.pasteFileLinkInvalid', { ns: 'common' })}
                     </div>
                   )
@@ -105,7 +105,7 @@ const FileFromLinkOrLocal = ({
           }
           {
             showFromLink && showFromLocal && (
-              <div className="flex h-7 items-center p-2 text-text-quaternary system-2xs-medium-uppercase">
+              <div className="flex h-7 items-center p-2 system-2xs-medium-uppercase text-text-quaternary">
                 <div className="mr-2 h-px w-[93px] bg-linear-to-l from-[rgba(16,24,40,0.08)]" />
                 OR
                 <div className="ml-2 h-px w-[93px] bg-linear-to-r from-[rgba(16,24,40,0.08)]" />
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
index 9af0fd77a8..bc41a94d86 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
@@ -8,7 +8,7 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import FileFromLinkOrLocal from '../file-from-link-or-local'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
index 9444280bb5..6249b47e6d 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
@@ -4,10 +4,10 @@ import {
   RiDownloadLine,
 } from '@remixicon/react'
 import { useState } from 'react'
-import Button from '@/app/components/base/button'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
+import { Button } from '@/app/components/base/ui/button'
 import { downloadUrl } from '@/utils/download'
 import FileImageRender from '../file-image-render'
 import {
@@ -43,7 +43,7 @@ const FileImageItem = ({
         {
           showDeleteAction && (
             <Button
-              className="absolute -right-1.5 -top-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
+              className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
               onClick={() => onRemove?.(id)}
             >
               <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" />
@@ -80,9 +80,9 @@ const FileImageItem = ({
         }
         {
           showDownloadAction && (
-            <div className="absolute inset-0.5 z-10 hidden bg-background-overlay-alt bg-opacity-[0.3] group-hover/file-image:block">
+            <div className="bg-opacity-[0.3] absolute inset-0.5 z-10 hidden bg-background-overlay-alt group-hover/file-image:block">
               <div
-                className="absolute bottom-0.5 right-0.5  flex h-6 w-6 items-center justify-center rounded-lg bg-components-actionbar-bg shadow-md"
+                className="absolute right-0.5 bottom-0.5 flex h-6 w-6 items-center justify-center rounded-lg bg-components-actionbar-bg shadow-md"
                 onClick={(e) => {
                   e.stopPropagation()
                   downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
index ba1d645ab4..5b326e35bc 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -1,11 +1,11 @@
 import type { FileEntity } from '../types'
 import { useState } from 'react'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import AudioPreview from '@/app/components/base/file-uploader/audio-preview'
 import PdfPreview from '@/app/components/base/file-uploader/dynamic-pdf-preview'
 import VideoPreview from '@/app/components/base/file-uploader/video-preview'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
 import { formatFileSize } from '@/utils/format'
@@ -55,7 +55,7 @@ const FileItem = ({
         {
           showDeleteAction && (
             <Button
-              className="absolute -right-1.5 -top-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-item:flex"
+              className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-item:flex"
               onClick={() => onRemove?.(id)}
               data-testid="delete-button"
             >
@@ -64,14 +64,14 @@ const FileItem = ({
           )
         }
         <div
-          className="mb-1 line-clamp-2 h-8 cursor-pointer break-all text-text-tertiary system-xs-medium"
+          className="mb-1 line-clamp-2 h-8 cursor-pointer system-xs-medium break-all text-text-tertiary"
           title={name}
           onClick={() => canPreview && setPreviewUrl(tmp_preview_url || '')}
         >
           {name}
         </div>
         <div className="relative flex items-center justify-between">
-          <div className="flex items-center text-text-tertiary system-2xs-medium-uppercase">
+          <div className="flex items-center system-2xs-medium-uppercase text-text-tertiary">
             <FileTypeIcon
               size="sm"
               type={getFileAppearanceType(name, type)}
@@ -93,7 +93,7 @@ const FileItem = ({
             showDownloadAction && download_url && (
               <ActionButton
                 size="m"
-                className="absolute -right-1 -top-1 hidden group-hover/file-item:flex"
+                className="absolute -top-1 -right-1 hidden group-hover/file-item:flex"
                 onClick={(e) => {
                   e.stopPropagation()
                   downloadUrl({ url: download_url || '', fileName: name, target: '_blank' })
diff --git a/web/app/components/base/form/components/form/actions.tsx b/web/app/components/base/form/components/form/actions.tsx
index 380c387972..23081fdc20 100644
--- a/web/app/components/base/form/components/form/actions.tsx
+++ b/web/app/components/base/form/components/form/actions.tsx
@@ -1,8 +1,8 @@
 import type { FormType } from '../..'
 import { useStore } from '@tanstack/react-form'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { useFormContext } from '../..'
-import Button from '../../../button'
 
 export type CustomActionsProps = {
   form: FormType
diff --git a/web/app/components/base/form/index.stories.tsx b/web/app/components/base/form/index.stories.tsx
index 3a6e052f0e..0cd28379de 100644
--- a/web/app/components/base/form/index.stories.tsx
+++ b/web/app/components/base/form/index.stories.tsx
@@ -4,9 +4,9 @@ import type { FormSchema } from './types'
 import { useStore } from '@tanstack/react-form'
 import { useMemo, useState } from 'react'
 import { PreviewMode } from '@/app/components/base/features/types'
+import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '@/types/app'
 import { FormStoryWrapper } from '../../../../.storybook/utils/form-story-wrapper'
-import Button from '../button'
 import BaseForm from './components/base/base-form'
 import ContactFields from './form-scenarios/demo/contact-fields'
 import { demoFormOpts } from './form-scenarios/demo/shared-options'
diff --git a/web/app/components/base/image-uploader/image-link-input.tsx b/web/app/components/base/image-uploader/image-link-input.tsx
index 3b0f83f600..ec041d9506 100644
--- a/web/app/components/base/image-uploader/image-link-input.tsx
+++ b/web/app/components/base/image-uploader/image-link-input.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { ImageFile } from '@/types/app'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '@/types/app'
 
 type ImageLinkInputProps = {
@@ -38,7 +38,7 @@ const ImageLinkInput: FC<ImageLinkInputProps> = ({
   }
 
   return (
-    <div className="flex h-8 items-center rounded-lg border border-components-panel-border bg-components-panel-bg pl-1.5 pr-1 shadow-xs">
+    <div className="flex h-8 items-center rounded-lg border border-components-panel-border bg-components-panel-bg pr-1 pl-1.5 shadow-xs">
       <input
         type="text"
         className="mr-0.5 h-[18px] grow appearance-none bg-transparent px-1 text-[13px] text-text-primary outline-hidden"
diff --git a/web/app/components/base/inline-delete-confirm/index.tsx b/web/app/components/base/inline-delete-confirm/index.tsx
index a0e3b8eb96..b119f4bb83 100644
--- a/web/app/components/base/inline-delete-confirm/index.tsx
+++ b/web/app/components/base/inline-delete-confirm/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type InlineDeleteConfirmProps = {
@@ -36,7 +36,7 @@ const InlineDeleteConfirm: FC<InlineDeleteConfirmProps> = ({
       className={cn(
         'flex w-[120px] flex-col justify-center gap-1.5',
         'radius-lg border-[0.5px] border-components-panel-border-subtle',
-        'bg-components-panel-bg-blur px-2 pb-2 pt-1.5',
+        'bg-components-panel-bg-blur px-2 pt-1.5 pb-2',
         'backdrop-blur-[10px]',
         'shadow-lg',
         className,
diff --git a/web/app/components/base/markdown-blocks/button.tsx b/web/app/components/base/markdown-blocks/button.tsx
index 789ecd2420..72f5dbc7f8 100644
--- a/web/app/components/base/markdown-blocks/button.tsx
+++ b/web/app/components/base/markdown-blocks/button.tsx
@@ -1,5 +1,5 @@
-import Button from '@/app/components/base/button'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { isValidUrl } from './utils'
 
@@ -14,7 +14,7 @@ const MarkdownButton = ({ node }: any) => {
     <Button
       variant={variant}
       size={size}
-      className={cn('h-auto! min-h-8 select-none whitespace-normal px-3!')}
+      className={cn('h-auto! min-h-8 px-3! whitespace-normal select-none')}
       onClick={() => {
         if (link && isValidUrl(link)) {
           window.open(link, '_blank')
diff --git a/web/app/components/base/markdown-blocks/form.tsx b/web/app/components/base/markdown-blocks/form.tsx
index 36597cd13c..7e8dcac0b2 100644
--- a/web/app/components/base/markdown-blocks/form.tsx
+++ b/web/app/components/base/markdown-blocks/form.tsx
@@ -1,8 +1,7 @@
 import type { Dayjs } from 'dayjs'
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
-import Button from '@/app/components/base/button'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 import Checkbox from '@/app/components/base/checkbox'
 import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
@@ -10,6 +9,7 @@ import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
 import { formatDateForOutput, toDayjs } from '@/app/components/base/date-and-time-picker/utils/dayjs'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/app/components/base/ui/select'
 
 enum DATA_FORMAT {
@@ -240,7 +240,7 @@ const MarkdownForm = ({ node }: { node: HastElement }) => {
             <label
               key={key}
               htmlFor={str(child.properties.htmlFor || child.properties.name)}
-              className="my-2 text-text-secondary system-md-semibold"
+              className="my-2 system-md-semibold text-text-secondary"
               data-testid="label-field"
             >
               {getTextContent(child)}
diff --git a/web/app/components/base/modal-like-wrap/index.tsx b/web/app/components/base/modal-like-wrap/index.tsx
index 0b51ae1829..f105ac4b67 100644
--- a/web/app/components/base/modal-like-wrap/index.tsx
+++ b/web/app/components/base/modal-like-wrap/index.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
-import Button from '../button'
 
 type Props = {
   title: string
@@ -27,10 +27,10 @@ const ModalLikeWrap: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={cn('w-[320px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-3 pb-4 pt-3.5 shadow-xl', className)}>
+    <div className={cn('w-[320px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-3 pt-3.5 pb-4 shadow-xl', className)}>
       {beforeHeader || null}
       <div className="mb-1 flex h-6 items-center justify-between">
-        <div className="text-text-primary system-xl-semibold">{title}</div>
+        <div className="system-xl-semibold text-text-primary">{title}</div>
         {!hideCloseBtn && (
           <div
             className="cursor-pointer p-1.5 text-text-tertiary"
diff --git a/web/app/components/base/modal/modal.stories.tsx b/web/app/components/base/modal/modal.stories.tsx
index 2ddf706866..7093e82f2d 100644
--- a/web/app/components/base/modal/modal.stories.tsx
+++ b/web/app/components/base/modal/modal.stories.tsx
@@ -46,7 +46,7 @@ const meta = {
     },
     extraButtonVariant: {
       control: 'select',
-      options: ['primary', 'warning', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
+      options: ['primary', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
       description: 'Visual style for the extra button.',
     },
     disabled: {
@@ -87,7 +87,7 @@ const meta = {
     cancelButtonText: 'Cancel',
     showExtraButton: false,
     extraButtonText: 'Disable temporarily',
-    extraButtonVariant: 'warning',
+    extraButtonVariant: 'primary',
     disabled: false,
     onClose: () => console.log('Modal closed'),
     onConfirm: () => console.log('Confirm pressed'),
diff --git a/web/app/components/base/modal/modal.tsx b/web/app/components/base/modal/modal.tsx
index 71569c9771..e649ebe41e 100644
--- a/web/app/components/base/modal/modal.tsx
+++ b/web/app/components/base/modal/modal.tsx
@@ -3,15 +3,15 @@
  * This component will be removed after migration is complete.
  * See: https://github.com/langgenius/dify/issues/32767
  */
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import { noop } from 'es-toolkit/function'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type ModalProps = {
@@ -46,7 +46,7 @@ const Modal = ({
   cancelButtonText,
   onCancel,
   showExtraButton,
-  extraButtonVariant = 'warning',
+  extraButtonVariant = 'primary',
   extraButtonText,
   onExtraButtonClick,
   footerSlot,
@@ -73,17 +73,17 @@ const Modal = ({
           )}
           onClick={e => e.stopPropagation()}
         >
-          <div className="relative shrink-0 p-6 pb-3 pr-14 text-text-primary title-2xl-semi-bold">
+          <div className="relative shrink-0 p-6 pr-14 pb-3 title-2xl-semi-bold text-text-primary">
             {title}
             {
               subTitle && (
-                <div className="mt-1 text-text-tertiary system-xs-regular">
+                <div className="mt-1 system-xs-regular text-text-tertiary">
                   {subTitle}
                 </div>
               )
             }
             <div
-              className="absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
+              className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
               onClick={onClose}
             >
               <span className="i-ri-close-line h-5 w-5 text-text-tertiary" data-testid="close-icon" />
diff --git a/web/app/components/base/notion-connector/index.tsx b/web/app/components/base/notion-connector/index.tsx
index e16db60dc5..c8df7d074e 100644
--- a/web/app/components/base/notion-connector/index.tsx
+++ b/web/app/components/base/notion-connector/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '../button'
+import { Button } from '@/app/components/base/ui/button'
 import { Notion } from '../icons/src/public/common'
 import { Icon3Dots } from '../icons/src/vender/line/others'
 
@@ -16,10 +16,10 @@ const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
       <div className="mb-2 h-12 w-12 radius-lg border-[0.5px] border-components-card-border p-3 shadow-lg shadow-shadow-shadow-5">
         <Notion className="size-6" />
       </div>
-      <div className="mb-1 flex flex-col gap-y-1 pb-3 pt-1">
+      <div className="mb-1 flex flex-col gap-y-1 pt-1 pb-3">
         <span className="system-md-semibold text-text-secondary">
           {t('stepOne.notionSyncTitle', { ns: 'datasetCreation' })}
-          <Icon3Dots className="relative -left-1.5 -top-2.5 inline h-4 w-4 text-text-secondary" />
+          <Icon3Dots className="relative -top-2.5 -left-1.5 inline h-4 w-4 text-text-secondary" />
         </span>
         <div className="system-sm-regular text-text-tertiary">{t('stepOne.notionSyncTip', { ns: 'datasetCreation' })}</div>
       </div>
diff --git a/web/app/components/base/pagination/index.tsx b/web/app/components/base/pagination/index.tsx
index fbcf9b6dcb..95485c4efb 100644
--- a/web/app/components/base/pagination/index.tsx
+++ b/web/app/components/base/pagination/index.tsx
@@ -3,8 +3,8 @@ import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
 import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { Pagination } from './pagination'
 
@@ -89,7 +89,7 @@ const CustomizedPagination: FC<Props> = ({
 
   return (
     <Pagination
-      className={cn('flex w-full select-none items-center px-6 py-3', className)}
+      className={cn('flex w-full items-center px-6 py-3 select-none', className)}
       currentPage={current}
       edgePageCount={2}
       middlePagesSiblingCount={1}
@@ -151,14 +151,14 @@ const CustomizedPagination: FC<Props> = ({
       </div>
       <div className={cn('flex grow list-none items-center justify-center gap-1')}>
         <Pagination.PageButton
-          className="system-sm-medium flex min-w-8 cursor-pointer items-center justify-center rounded-lg px-1 py-2 hover:bg-components-button-ghost-bg-hover"
+          className="flex min-w-8 cursor-pointer items-center justify-center rounded-lg px-1 py-2 system-sm-medium hover:bg-components-button-ghost-bg-hover"
           activeClassName="bg-components-button-tertiary-bg text-components-button-tertiary-text hover:bg-components-button-ghost-bg-hover"
           inactiveClassName="text-text-tertiary"
         />
       </div>
       {onLimitChange && (
         <div className="flex shrink-0 items-center gap-2">
-          <div className="system-2xs-regular-uppercase w-[51px] shrink-0 text-end text-text-tertiary">{showPerPageTip ? t('pagination.perPage', { ns: 'common' }) : ''}</div>
+          <div className="w-[51px] shrink-0 text-end system-2xs-regular-uppercase text-text-tertiary">{showPerPageTip ? t('pagination.perPage', { ns: 'common' }) : ''}</div>
           <div
             className="flex items-center gap-px radius-lg bg-components-segmented-control-bg-normal p-0.5"
             onMouseEnter={() => setShowPerPageTip(true)}
@@ -166,7 +166,7 @@ const CustomizedPagination: FC<Props> = ({
           >
             <div
               className={cn(
-                'system-sm-medium cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+                'cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
                 limit === 10 && 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg',
               )}
               onClick={() => onLimitChange?.(10)}
@@ -175,7 +175,7 @@ const CustomizedPagination: FC<Props> = ({
             </div>
             <div
               className={cn(
-                'system-sm-medium cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+                'cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
                 limit === 25 && 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg',
               )}
               onClick={() => onLimitChange?.(25)}
@@ -184,7 +184,7 @@ const CustomizedPagination: FC<Props> = ({
             </div>
             <div
               className={cn(
-                'system-sm-medium cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+                'cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
                 limit === 50 && 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg',
               )}
               onClick={() => onLimitChange?.(50)}
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
index b9b251fbf6..8a791dc7fc 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -5,9 +5,9 @@ import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { InputVarType } from '@/app/components/workflow/types'
 import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
-import Button from '../../../button'
 import PrePopulate from './pre-populate'
 
 const i18nPrefix = 'nodes.humanInput.insertInputField'
@@ -83,11 +83,11 @@ const InputField: React.FC<InputFieldProps> = ({
 
   return (
     <div className="w-[372px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg backdrop-blur-[5px]">
-      <div className="text-text-primary system-md-semibold">{t(`${i18nPrefix}.title`, { ns: 'workflow' })}</div>
+      <div className="system-md-semibold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'workflow' })}</div>
       <div className="mt-3">
-        <div className="text-text-secondary system-xs-medium">
+        <div className="system-xs-medium text-text-secondary">
           {t(`${i18nPrefix}.saveResponseAs`, { ns: 'workflow' })}
-          <span className="relative text-text-destructive-secondary system-xs-regular">*</span>
+          <span className="relative system-xs-regular text-text-destructive-secondary">*</span>
         </div>
         <Input
           className="mt-1.5"
@@ -99,13 +99,13 @@ const InputField: React.FC<InputFieldProps> = ({
           autoFocus
         />
         {tempPayload.output_variable_name && !nameValid && (
-          <div className="mt-1 px-1 text-text-destructive-secondary system-xs-regular">
+          <div className="mt-1 px-1 system-xs-regular text-text-destructive-secondary">
             {t(`${i18nPrefix}.variableNameInvalid`, { ns: 'workflow' })}
           </div>
         )}
       </div>
       <div className="mt-4">
-        <div className="mb-1.5 text-text-secondary system-xs-medium">
+        <div className="mb-1.5 system-xs-medium text-text-secondary">
           {t(`${i18nPrefix}.prePopulateField`, { ns: 'workflow' })}
         </div>
         <PrePopulate
diff --git a/web/app/components/base/tag-management/tag-remove-modal.tsx b/web/app/components/base/tag-management/tag-remove-modal.tsx
index 00e2d4b402..35ab6c319b 100644
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/web/app/components/base/tag-management/tag-remove-modal.tsx
@@ -3,9 +3,9 @@
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type TagRemoveModalProps = {
@@ -24,13 +24,13 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
       isShow={show}
       onClose={noop}
     >
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onClose} data-testid="tag-remove-modal-close-button">
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose} data-testid="tag-remove-modal-close-button">
         <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
       </div>
       <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-default-burn p-3 shadow-xl">
         <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
       </div>
-      <div className="mt-3 text-xl font-semibold leading-[30px] text-text-primary">
+      <div className="mt-3 text-xl leading-[30px] font-semibold text-text-primary">
         {`${t('tag.delete', { ns: 'common' })} `}
         <span>{`"${tag.name}"`}</span>
       </div>
@@ -39,7 +39,7 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
       </div>
       <div className="flex items-center justify-end pt-6">
         <Button className="mr-2" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-        <Button className="border-red-700" variant="warning" onClick={onConfirm}>{t('operation.delete', { ns: 'common' })}</Button>
+        <Button className="border-red-700" variant="primary" destructive onClick={onConfirm}>{t('operation.delete', { ns: 'common' })}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/base/ui/alert-dialog/index.tsx b/web/app/components/base/ui/alert-dialog/index.tsx
index df4cef8964..05d9ab3ad9 100644
--- a/web/app/components/base/ui/alert-dialog/index.tsx
+++ b/web/app/components/base/ui/alert-dialog/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'
 import * as React from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 export const AlertDialog = BaseAlertDialog.Root
@@ -32,7 +32,7 @@ export function AlertDialogContent({
       <BaseAlertDialog.Backdrop
         {...backdropProps}
         className={cn(
-          'inset-0 fixed z-1002 bg-background-overlay',
+          'fixed inset-0 z-1002 bg-background-overlay',
           'transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
           overlayClassName,
         )}
diff --git a/web/app/components/base/button/__tests__/index.spec.tsx b/web/app/components/base/ui/button/__tests__/index.spec.tsx
similarity index 93%
rename from web/app/components/base/button/__tests__/index.spec.tsx
rename to web/app/components/base/ui/button/__tests__/index.spec.tsx
index 4fe0ab3570..fa59281484 100644
--- a/web/app/components/base/button/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/button/__tests__/index.spec.tsx
@@ -1,5 +1,5 @@
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
-import Button from '../index'
+import { Button } from '../index'
 
 afterEach(cleanup)
 
@@ -41,7 +41,6 @@ describe('Button', () => {
 
     it.each([
       'primary',
-      'warning',
       'secondary',
       'secondary-accent',
       'ghost',
@@ -95,12 +94,6 @@ describe('Button', () => {
       render(<Button>Click me</Button>)
       expect(screen.getByRole('button')).not.toHaveAttribute('aria-busy')
     })
-
-    it('applies custom spinnerClassName', () => {
-      const animClassName = 'anim-breath'
-      render(<Button loading spinnerClassName={animClassName}>Click me</Button>)
-      expect(screen.getByRole('button').querySelector('.animate-spin')?.className).toContain(animClassName)
-    })
   })
 
   describe('disabled', () => {
diff --git a/web/app/components/base/button/index.css b/web/app/components/base/ui/button/index.css
similarity index 66%
rename from web/app/components/base/button/index.css
rename to web/app/components/base/ui/button/index.css
index 0f4063fdfa..30140c212d 100644
--- a/web/app/components/base/button/index.css
+++ b/web/app/components/base/ui/button/index.css
@@ -27,26 +27,74 @@
     hover:border-components-button-primary-border-hover
     text-components-button-primary-text;
 
-  &.btn-destructive {
-    @apply bg-components-button-destructive-primary-bg
-    border-components-button-destructive-primary-border
-    hover:bg-components-button-destructive-primary-bg-hover
-    hover:border-components-button-destructive-primary-border-hover
-    text-components-button-destructive-primary-text;
-  }
-
   &:is(:disabled, [data-disabled]) {
     @apply shadow-none
     bg-components-button-primary-bg-disabled
     border-components-button-primary-border-disabled
     text-components-button-primary-text-disabled;
   }
+}
 
-  &.btn-destructive:is(:disabled, [data-disabled]) {
-    @apply shadow-none
-    bg-components-button-destructive-primary-bg-disabled
-    border-components-button-destructive-primary-border-disabled
-    text-components-button-destructive-primary-text-disabled;
+@utility btn-secondary {
+  @apply border-[0.5px]
+    shadow-xs
+    backdrop-blur-[5px]
+    bg-components-button-secondary-bg
+    border-components-button-secondary-border
+    hover:bg-components-button-secondary-bg-hover
+    hover:border-components-button-secondary-border-hover
+    text-components-button-secondary-text;
+
+  &:is(:disabled, [data-disabled]) {
+    @apply backdrop-blur-xs
+    bg-components-button-secondary-bg-disabled
+    border-components-button-secondary-border-disabled
+    text-components-button-secondary-text-disabled;
+  }
+}
+
+@utility btn-secondary-accent {
+  @apply border-[0.5px]
+    shadow-xs
+    bg-components-button-secondary-bg
+    border-components-button-secondary-border
+    hover:bg-components-button-secondary-bg-hover
+    hover:border-components-button-secondary-border-hover
+    text-components-button-secondary-accent-text;
+
+  &:is(:disabled, [data-disabled]) {
+    @apply bg-components-button-secondary-bg-disabled
+    border-components-button-secondary-border-disabled
+    text-components-button-secondary-accent-text-disabled;
+  }
+}
+
+@utility btn-tertiary {
+  @apply bg-components-button-tertiary-bg
+    hover:bg-components-button-tertiary-bg-hover
+    text-components-button-tertiary-text;
+
+  &:is(:disabled, [data-disabled]) {
+    @apply bg-components-button-tertiary-bg-disabled
+    text-components-button-tertiary-text-disabled;
+  }
+}
+
+@utility btn-ghost {
+  @apply hover:bg-components-button-ghost-bg-hover
+    text-components-button-ghost-text;
+
+  &:is(:disabled, [data-disabled]) {
+    @apply text-components-button-ghost-text-disabled;
+  }
+}
+
+@utility btn-ghost-accent {
+  @apply hover:bg-state-accent-hover
+    text-components-button-secondary-accent-text;
+
+  &:is(:disabled, [data-disabled]) {
+    @apply text-components-button-secondary-accent-text-disabled;
   }
 }
 
@@ -100,114 +148,3 @@
     @apply text-components-button-destructive-ghost-text-disabled;
   }
 }
-
-@utility btn-secondary {
-  @apply border-[0.5px]
-    shadow-xs
-    backdrop-blur-[5px]
-    bg-components-button-secondary-bg
-    border-components-button-secondary-border
-    hover:bg-components-button-secondary-bg-hover
-    hover:border-components-button-secondary-border-hover
-    text-components-button-secondary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply backdrop-blur-xs
-    bg-components-button-secondary-bg-disabled
-    border-components-button-secondary-border-disabled
-    text-components-button-secondary-text-disabled;
-  }
-
-  &.btn-destructive {
-    @apply bg-components-button-destructive-secondary-bg
-    border-components-button-destructive-secondary-border
-    hover:bg-components-button-destructive-secondary-bg-hover
-    hover:border-components-button-destructive-secondary-border-hover
-    text-components-button-destructive-secondary-text;
-  }
-
-  &.btn-destructive:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-destructive-secondary-bg-disabled
-    border-components-button-destructive-secondary-border-disabled
-    text-components-button-destructive-secondary-text-disabled;
-  }
-}
-
-@utility btn-secondary-accent {
-  @apply border-[0.5px]
-    shadow-xs
-    bg-components-button-secondary-bg
-    border-components-button-secondary-border
-    hover:bg-components-button-secondary-bg-hover
-    hover:border-components-button-secondary-border-hover
-    text-components-button-secondary-accent-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-secondary-bg-disabled
-    border-components-button-secondary-border-disabled
-    text-components-button-secondary-accent-text-disabled;
-  }
-}
-
-@utility btn-warning {
-  @apply bg-components-button-destructive-primary-bg
-    border-components-button-destructive-primary-border
-    hover:bg-components-button-destructive-primary-bg-hover
-    hover:border-components-button-destructive-primary-border-hover
-    text-components-button-destructive-primary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-destructive-primary-bg-disabled
-    border-components-button-destructive-primary-border-disabled
-    text-components-button-destructive-primary-text-disabled;
-  }
-}
-
-@utility btn-tertiary {
-  @apply bg-components-button-tertiary-bg
-    hover:bg-components-button-tertiary-bg-hover
-    text-components-button-tertiary-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-tertiary-bg-disabled
-    text-components-button-tertiary-text-disabled;
-  }
-
-  &.btn-destructive {
-    @apply bg-components-button-destructive-tertiary-bg
-    hover:bg-components-button-destructive-tertiary-bg-hover
-    text-components-button-destructive-tertiary-text;
-  }
-
-  &.btn-destructive:is(:disabled, [data-disabled]) {
-    @apply bg-components-button-destructive-tertiary-bg-disabled
-    text-components-button-destructive-tertiary-text-disabled;
-  }
-}
-
-@utility btn-ghost {
-  @apply hover:bg-components-button-ghost-bg-hover
-    text-components-button-ghost-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply text-components-button-ghost-text-disabled;
-  }
-
-  &.btn-destructive {
-    @apply hover:bg-components-button-destructive-ghost-bg-hover
-    text-components-button-destructive-ghost-text;
-  }
-
-  &.btn-destructive:is(:disabled, [data-disabled]) {
-    @apply text-components-button-destructive-ghost-text-disabled;
-  }
-}
-
-@utility btn-ghost-accent {
-  @apply hover:bg-state-accent-hover
-    text-components-button-secondary-accent-text;
-
-  &:is(:disabled, [data-disabled]) {
-    @apply text-components-button-secondary-accent-text-disabled;
-  }
-}
diff --git a/web/app/components/base/button/index.stories.tsx b/web/app/components/base/ui/button/index.stories.tsx
similarity index 88%
rename from web/app/components/base/button/index.stories.tsx
rename to web/app/components/base/ui/button/index.stories.tsx
index 5a7ec55e8f..8921dc9b27 100644
--- a/web/app/components/base/button/index.stories.tsx
+++ b/web/app/components/base/ui/button/index.stories.tsx
@@ -15,7 +15,7 @@ const meta = {
     disabled: { control: 'boolean' },
     variant: {
       control: 'select',
-      options: ['primary', 'warning', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
+      options: ['primary', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
     },
     size: {
       control: 'select',
@@ -73,13 +73,6 @@ export const Tertiary: Story = {
   },
 }
 
-export const Warning: Story = {
-  args: {
-    variant: 'warning',
-    children: 'Warning Button',
-  },
-}
-
 export const Disabled: Story = {
   args: {
     variant: 'primary',
@@ -109,7 +102,7 @@ export const WithIcon: Story = {
     variant: 'primary',
     children: (
       <>
-        <span className="i-heroicons-rocket-launch-20-solid mr-1.5 h-4 w-4" />
+        <span className="mr-1.5 i-heroicons-rocket-launch-20-solid h-4 w-4" />
         Launch
       </>
     ),
diff --git a/web/app/components/base/button/index.tsx b/web/app/components/base/ui/button/index.tsx
similarity index 57%
rename from web/app/components/base/button/index.tsx
rename to web/app/components/base/ui/button/index.tsx
index 6fc5e982c2..22dc6ce3c8 100644
--- a/web/app/components/base/button/index.tsx
+++ b/web/app/components/base/ui/button/index.tsx
@@ -1,9 +1,8 @@
+import type { Button as BaseButtonNS } from '@base-ui/react/button'
 import type { VariantProps } from 'class-variance-authority'
 import { Button as BaseButton } from '@base-ui/react/button'
 import { cva } from 'class-variance-authority'
-import * as React from 'react'
 import { cn } from '@/utils/classnames'
-import Spinner from '../spinner'
 
 const buttonVariants = cva(
   'btn',
@@ -11,7 +10,6 @@ const buttonVariants = cva(
     variants: {
       variant: {
         'primary': 'btn-primary',
-        'warning': 'btn-warning',
         'secondary': 'btn-secondary',
         'secondary-accent': 'btn-secondary-accent',
         'ghost': 'btn-ghost',
@@ -34,48 +32,39 @@ const buttonVariants = cva(
   },
 )
 
-export type ButtonProps = {
-  loading?: boolean
-  spinnerClassName?: string
-  ref?: React.Ref<HTMLButtonElement>
-  render?: React.ReactElement
-  focusableWhenDisabled?: boolean
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
+export type ButtonProps
+  = Omit<BaseButtonNS.Props, 'className'>
+    & VariantProps<typeof buttonVariants> & {
+      loading?: boolean
+      className?: string
+    }
 
-const Button = ({
+export function Button({
   className,
   variant,
   size,
   destructive,
   loading,
-  children,
-  spinnerClassName,
-  ref,
-  render,
-  focusableWhenDisabled,
   disabled,
   type = 'button',
+  children,
   ...props
-}: ButtonProps) => {
-  const isDisabled = disabled || loading
-
+}: ButtonProps) {
   return (
     <BaseButton
       type={type}
       className={cn(buttonVariants({ variant, size, destructive, className }))}
-      ref={ref}
-      render={render}
-      {...props}
-      disabled={isDisabled}
-      focusableWhenDisabled={focusableWhenDisabled}
+      disabled={disabled || loading}
       aria-busy={loading || undefined}
+      {...props}
     >
       {children}
-      {loading && <Spinner loading={loading} className={cn('ml-1! h-3! w-3! border-2! text-white!', spinnerClassName)} />}
+      {loading && (
+        <i
+          className="ml-1 i-ri-loader-2-line size-3 animate-spin motion-reduce:animate-none"
+          aria-hidden="true"
+        />
+      )}
     </BaseButton>
   )
 }
-Button.displayName = 'Button'
-
-export default Button
-export { Button, buttonVariants }
diff --git a/web/app/components/billing/apps-full-in-dialog/index.tsx b/web/app/components/billing/apps-full-in-dialog/index.tsx
index d7e9aedeae..2c2d5b95fd 100644
--- a/web/app/components/billing/apps-full-in-dialog/index.tsx
+++ b/web/app/components/billing/apps-full-in-dialog/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ProgressBar from '@/app/components/billing/progress-bar'
 import { Plan } from '@/app/components/billing/type'
 import { mailToSupport } from '@/app/components/header/utils/util'
@@ -44,7 +44,7 @@ const AppsFull: FC<{ loc: string, className?: string }> = ({
       <div className="flex justify-between">
         {!isTeam && (
           <div>
-            <div className={cn('title-xl-semi-bold mb-1', s.textGradient)}>
+            <div className={cn('mb-1 title-xl-semi-bold', s.textGradient)}>
               {t('apps.fullTip1', { ns: 'billing' })}
             </div>
             <div className="system-xs-regular text-text-tertiary">{t('apps.fullTip1des', { ns: 'billing' })}</div>
@@ -52,7 +52,7 @@ const AppsFull: FC<{ loc: string, className?: string }> = ({
         )}
         {isTeam && (
           <div>
-            <div className={cn('title-xl-semi-bold mb-1', s.textGradient)}>
+            <div className={cn('mb-1 title-xl-semi-bold', s.textGradient)}>
               {t('apps.fullTip2', { ns: 'billing' })}
             </div>
             <div className="system-xs-regular text-text-tertiary">{t('apps.fullTip2des', { ns: 'billing' })}</div>
@@ -70,7 +70,7 @@ const AppsFull: FC<{ loc: string, className?: string }> = ({
         )}
       </div>
       <div className="flex flex-col gap-2">
-        <div className="system-xs-medium flex items-center justify-between text-text-secondary">
+        <div className="flex items-center justify-between system-xs-medium text-text-secondary">
           <div>{t('usagePage.buildApps', { ns: 'billing' })}</div>
           <div>
             {usage}
diff --git a/web/app/components/billing/plan-upgrade-modal/index.tsx b/web/app/components/billing/plan-upgrade-modal/index.tsx
index 1e8b1235b7..f4f35ec1a4 100644
--- a/web/app/components/billing/plan-upgrade-modal/index.tsx
+++ b/web/app/components/billing/plan-upgrade-modal/index.tsx
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { useModalContext } from '@/context/modal-context'
 import { SquareChecklist } from '../../base/icons/src/vender/other'
@@ -69,7 +69,7 @@ const PlanUpgradeModal: FC<Props> = ({
         </div>
       </div>
 
-      <div className="mb-8 mt-10 flex justify-end space-x-2 px-8">
+      <div className="mt-10 mb-8 flex justify-end space-x-2 px-8">
         <Button
           onClick={onClose}
         >
diff --git a/web/app/components/billing/plan/index.tsx b/web/app/components/billing/plan/index.tsx
index b420110a4d..ee21268078 100644
--- a/web/app/components/billing/plan/index.tsx
+++ b/web/app/components/billing/plan/index.tsx
@@ -10,8 +10,8 @@ import { useUnmountedRef } from 'ahooks'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { ApiAggregate, TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
+import { Button } from '@/app/components/base/ui/button'
 import UsageInfo from '@/app/components/billing/usage-info'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
 import VerifyStateModal from '@/app/education-apply/verify-state-modal'
diff --git a/web/app/components/billing/pricing/header.tsx b/web/app/components/billing/pricing/header.tsx
index 5ab1895667..46078ae95e 100644
--- a/web/app/components/billing/pricing/header.tsx
+++ b/web/app/components/billing/pricing/header.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { DialogDescription, DialogTitle } from '@/app/components/base/ui/dialog'
 import { cn } from '@/utils/classnames'
-import Button from '../../base/button'
 import DifyLogo from '../../base/logo/dify-logo'
 import styles from './header.module.css'
 
@@ -31,12 +31,12 @@ const Header = ({
             {t('plansCommon.title.plans', { ns: 'billing' })}
           </DialogTitle>
         </div>
-        <DialogDescription className="text-text-tertiary system-sm-regular">
+        <DialogDescription className="system-sm-regular text-text-tertiary">
           {t('plansCommon.title.description', { ns: 'billing' })}
         </DialogDescription>
         <Button
           variant="secondary"
-          className="absolute bottom-[40.5px] right-[-18px] z-10 size-9 rounded-full p-2"
+          className="absolute right-[-18px] bottom-[40.5px] z-10 size-9 rounded-full p-2"
           aria-label={t('operation.close', { ns: 'common' })}
           onClick={onClose}
         >
diff --git a/web/app/components/billing/upgrade-btn/index.tsx b/web/app/components/billing/upgrade-btn/index.tsx
index f031acf04d..510ab4c18f 100644
--- a/web/app/components/billing/upgrade-btn/index.tsx
+++ b/web/app/components/billing/upgrade-btn/index.tsx
@@ -3,8 +3,8 @@ import type { CSSProperties, FC } from 'react'
 import type { I18nKeysWithPrefix } from '@/types/i18n'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
+import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 import PremiumBadge from '../../base/premium-badge'
 
diff --git a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
index b54b800049..491e57563d 100644
--- a/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx
@@ -1,4 +1,4 @@
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import PoweredByBrand from './powered-by-brand'
 
@@ -22,14 +22,14 @@ const ChatPreviewCard = ({
           <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-blue-light-solid')}>
             <span className="i-custom-vender-solid-communication-bubble-text-mod h-4 w-4 text-components-avatar-shape-fill-stop-100" />
           </div>
-          <div className="grow text-text-secondary system-md-semibold">Chatflow App</div>
+          <div className="grow system-md-semibold text-text-secondary">Chatflow App</div>
           <div className="p-1.5">
             <span className="i-ri-layout-left-2-line h-4 w-4 text-text-tertiary" />
           </div>
         </div>
         <div className="shrink-0 px-4 py-3">
           <Button variant="secondary-accent" className="w-full justify-center">
-            <span className="i-ri-edit-box-line mr-1 h-4 w-4" />
+            <span className="mr-1 i-ri-edit-box-line h-4 w-4" />
             <div className="p-1 opacity-20">
               <div className="h-2 w-[94px] rounded-xs bg-text-accent-light-mode-only"></div>
             </div>
@@ -61,14 +61,14 @@ const ChatPreviewCard = ({
         </div>
       </div>
       <div className="flex w-[138px] grow flex-col justify-between p-2 pr-0">
-        <div className="flex grow flex-col justify-between rounded-l-2xl border-[0.5px] border-r-0 border-components-panel-border-subtle bg-chatbot-bg pb-4 pl-[22px] pt-16">
+        <div className="flex grow flex-col justify-between rounded-l-2xl border-[0.5px] border-r-0 border-components-panel-border-subtle bg-chatbot-bg pt-16 pb-4 pl-[22px]">
           <div className="w-[720px] rounded-2xl border border-divider-subtle bg-chat-bubble-bg px-4 py-3">
-            <div className="mb-1 text-text-primary body-md-regular">Hello! How can I assist you today?</div>
+            <div className="mb-1 body-md-regular text-text-primary">Hello! How can I assist you today?</div>
             <Button size="small">
               <div className="h-2 w-[144px] rounded-xs bg-text-quaternary opacity-20"></div>
             </Button>
           </div>
-          <div className="flex h-[52px] w-[578px] items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 text-text-placeholder shadow-md backdrop-blur-xs body-lg-regular">Talk to Dify</div>
+          <div className="flex h-[52px] w-[578px] items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 body-lg-regular text-text-placeholder shadow-md backdrop-blur-xs">Talk to Dify</div>
         </div>
       </div>
     </div>
diff --git a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
index 573c2e9c1c..3d2eccab60 100644
--- a/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
+++ b/web/app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx
@@ -1,4 +1,4 @@
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import PoweredByBrand from './powered-by-brand'
 
@@ -22,14 +22,14 @@ const WorkflowPreviewCard = ({
           <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-indigo-solid')}>
             <span className="i-ri-exchange-2-fill h-4 w-4 text-components-avatar-shape-fill-stop-100" />
           </div>
-          <div className="grow text-text-secondary system-md-semibold">Workflow App</div>
+          <div className="grow system-md-semibold text-text-secondary">Workflow App</div>
           <div className="p-1.5">
             <span className="i-ri-layout-left-2-line h-4 w-4 text-text-tertiary" />
           </div>
         </div>
         <div className="flex items-center gap-4">
-          <div className="flex h-10 shrink-0 items-center border-b-2 border-components-tab-active text-text-primary system-md-semibold-uppercase">RUN ONCE</div>
-          <div className="flex h-10 grow items-center border-b-2 border-transparent text-text-tertiary system-md-semibold-uppercase">RUN BATCH</div>
+          <div className="flex h-10 shrink-0 items-center border-b-2 border-components-tab-active system-md-semibold-uppercase text-text-primary">RUN ONCE</div>
+          <div className="flex h-10 grow items-center border-b-2 border-transparent system-md-semibold-uppercase text-text-tertiary">RUN BATCH</div>
         </div>
       </div>
       <div className="grow bg-components-panel-bg">
@@ -44,7 +44,7 @@ const WorkflowPreviewCard = ({
             <div className="h-2 w-10 rounded-xs bg-text-quaternary opacity-20"></div>
           </Button>
           <Button variant="primary" size="small" disabled>
-            <span className="i-ri-play-large-line mr-1 h-4 w-4" />
+            <span className="mr-1 i-ri-play-large-line h-4 w-4" />
             <span>Execute</span>
           </Button>
         </div>
diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx
index 0df5e043e9..0972066b00 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Switch from '@/app/components/base/switch'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import ChatPreviewCard from './components/chat-preview-card'
 import WorkflowPreviewCard from './components/workflow-preview-card'
@@ -31,7 +31,7 @@ const CustomWebAppBrand = () => {
 
   return (
     <div className="py-4">
-      <div className="mb-2 flex items-center justify-between rounded-xl bg-background-section-burn p-4 text-text-primary system-md-medium">
+      <div className="mb-2 flex items-center justify-between rounded-xl bg-background-section-burn p-4 system-md-medium text-text-primary">
         {t('webapp.removeBrand', { ns: 'custom' })}
         <Switch
           size="lg"
@@ -42,8 +42,8 @@ const CustomWebAppBrand = () => {
       </div>
       <div className={cn('flex h-14 items-center justify-between rounded-xl bg-background-section-burn px-4', webappBrandRemoved && 'opacity-30')}>
         <div>
-          <div className="text-text-primary system-md-medium">{t('webapp.changeLogo', { ns: 'custom' })}</div>
-          <div className="text-text-tertiary system-xs-regular">{t('webapp.changeLogoTip', { ns: 'custom' })}</div>
+          <div className="system-md-medium text-text-primary">{t('webapp.changeLogo', { ns: 'custom' })}</div>
+          <div className="system-xs-regular text-text-tertiary">{t('webapp.changeLogoTip', { ns: 'custom' })}</div>
         </div>
         <div className="flex items-center">
           {(!uploadDisabled && webappLogo && !webappBrandRemoved) && (
@@ -64,7 +64,7 @@ const CustomWebAppBrand = () => {
                 className="relative mr-2"
                 disabled={uploadDisabled}
               >
-                <span className="i-ri-image-add-line mr-1 h-4 w-4" />
+                <span className="mr-1 i-ri-image-add-line h-4 w-4" />
                 {
                   (webappLogo || fileId)
                     ? t('change', { ns: 'custom' })
@@ -87,7 +87,7 @@ const CustomWebAppBrand = () => {
                 className="relative mr-2"
                 disabled={true}
               >
-                <span className="i-ri-loader-2-line mr-1 h-4 w-4 animate-spin" />
+                <span className="mr-1 i-ri-loader-2-line h-4 w-4 animate-spin" />
                 {t('uploading', { ns: 'custom' })}
               </Button>
             )
@@ -118,8 +118,8 @@ const CustomWebAppBrand = () => {
       {uploadProgress === -1 && (
         <div className="mt-2 text-xs text-[#D92D20]">{t('uploadedFail', { ns: 'custom' })}</div>
       )}
-      <div className="mb-2 mt-5 flex items-center gap-2">
-        <div className="shrink-0 text-text-tertiary system-xs-medium-uppercase">{t('overview.appInfo.preview', { ns: 'appOverview' })}</div>
+      <div className="mt-5 mb-2 flex items-center gap-2">
+        <div className="shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('overview.appInfo.preview', { ns: 'appOverview' })}</div>
         <Divider bgStyle="gradient" className="grow" />
       </div>
       <div className="relative mb-2 flex items-center gap-3">
diff --git a/web/app/components/datasets/common/image-previewer/index.tsx b/web/app/components/datasets/common/image-previewer/index.tsx
index 1164b4023a..64af3f80df 100644
--- a/web/app/components/datasets/common/image-previewer/index.tsx
+++ b/web/app/components/datasets/common/image-previewer/index.tsx
@@ -2,8 +2,8 @@ import { RiArrowLeftLine, RiArrowRightLine, RiCloseLine, RiRefreshLine } from '@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useHotkeys } from 'react-hotkeys-hook'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { formatFileSize } from '@/utils/format'
 
 type CachedImage = {
@@ -155,7 +155,7 @@ const ImagePreviewer = ({
       onClick={e => e.stopPropagation()}
       tabIndex={-1}
     >
-      <div className="absolute right-6 top-6 z-10 flex cursor-pointer flex-col items-center gap-y-1">
+      <div className="absolute top-6 right-6 z-10 flex cursor-pointer flex-col items-center gap-y-1">
         <Button
           variant="tertiary"
           onClick={onClose}
@@ -172,7 +172,7 @@ const ImagePreviewer = ({
         <Loading type="app" />
       )}
       {cachedImages[currentImage.url].status === 'error' && (
-        <div className="system-sm-regular flex max-w-sm flex-col items-center gap-y-2 text-text-tertiary">
+        <div className="flex max-w-sm flex-col items-center gap-y-2 system-sm-regular text-text-tertiary">
           <span>{`Failed to load image: ${currentImage.url}. Please try again.`}</span>
           <Button
             variant="secondary"
@@ -191,7 +191,7 @@ const ImagePreviewer = ({
             src={cachedImages[currentImage.url].blobUrl}
             className="max-h-[calc(100%-2.5rem)] max-w-full object-contain shadow-lg ring-8 ring-effects-image-frame backdrop-blur-[5px]"
           />
-          <div className="system-sm-regular flex shrink-0 gap-x-2 pb-1 pt-3 text-text-tertiary">
+          <div className="flex shrink-0 gap-x-2 pt-3 pb-1 system-sm-regular text-text-tertiary">
             <span>{currentImage.name}</span>
             <span>·</span>
             <span>{`${cachedImages[currentImage.url].width} ×  ${cachedImages[currentImage.url].height}`}</span>
@@ -203,7 +203,7 @@ const ImagePreviewer = ({
       <Button
         variant="secondary"
         onClick={prevImage}
-        className="absolute left-8 top-1/2 z-10 size-9 -translate-y-1/2 rounded-full p-0"
+        className="absolute top-1/2 left-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
         disabled={currentIndex === 0}
         size="large"
       >
@@ -212,7 +212,7 @@ const ImagePreviewer = ({
       <Button
         variant="secondary"
         onClick={nextImage}
-        className="absolute right-8 top-1/2 z-10 size-9 -translate-y-1/2 rounded-full p-0"
+        className="absolute top-1/2 right-8 z-10 size-9 -translate-y-1/2 rounded-full p-0"
         disabled={currentIndex === images.length - 1}
         size="large"
       >
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
index aee19907be..e02c29399e 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx
@@ -6,10 +6,10 @@ import {
   memo,
   useCallback,
 } from 'react'
-import Button from '@/app/components/base/button'
 import FileImageRender from '@/app/components/base/file-uploader/file-image-render'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
+import { Button } from '@/app/components/base/ui/button'
 import { fileIsUploaded } from '../utils'
 
 type ImageItemProps = {
@@ -54,7 +54,7 @@ const ImageItem = ({
       {
         showDeleteAction && (
           <Button
-            className="absolute -right-1.5 -top-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
+            className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
             onClick={handleRemove}
           >
             <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" />
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
index 2d3965690f..9e5c044e77 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx
@@ -6,10 +6,10 @@ import {
   memo,
   useCallback,
 } from 'react'
-import Button from '@/app/components/base/button'
 import FileImageRender from '@/app/components/base/file-uploader/file-image-render'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
+import { Button } from '@/app/components/base/ui/button'
 import { fileIsUploaded } from '../utils'
 
 type ImageItemProps = {
@@ -54,7 +54,7 @@ const ImageItem = ({
       {
         showDeleteAction && (
           <Button
-            className="absolute -right-1.5 -top-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
+            className="absolute -top-1.5 -right-1.5 z-11 hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex"
             onClick={handleRemove}
           >
             <RiCloseLine className="h-4 w-4 text-components-button-secondary-text" />
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
index db675228c4..71a6757bf2 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type DSLConfirmModalProps = {
   versions?: {
@@ -27,7 +27,7 @@ const DSLConfirmModal = ({
     >
       <div className="flex flex-col items-start gap-2 self-stretch pb-4">
         <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-        <div className="system-md-regular flex grow flex-col text-text-secondary">
+        <div className="flex grow flex-col system-md-regular text-text-secondary">
           <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
           <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
           <br />
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
index 079ea90687..ab311bd699 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
@@ -2,9 +2,9 @@
 import { useKeyPress } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import DSLConfirmModal from './dsl-confirm-modal'
 import Header from './header'
 import { CreateFromDSLModalTab, useDSLImport } from './hooks/use-dsl-import'
@@ -78,7 +78,7 @@ const CreateFromDSLModal = ({
           )}
           {currentTab === CreateFromDSLModalTab.FROM_URL && (
             <div>
-              <div className="system-md-semibold leading6 mb-1 text-text-secondary">
+              <div className="leading6 mb-1 system-md-semibold text-text-secondary">
                 DSL URL
               </div>
               <Input
diff --git a/web/app/components/datasets/create-from-pipeline/header.tsx b/web/app/components/datasets/create-from-pipeline/header.tsx
index 204b372a1d..bc34c79d38 100644
--- a/web/app/components/datasets/create-from-pipeline/header.tsx
+++ b/web/app/components/datasets/create-from-pipeline/header.tsx
@@ -1,14 +1,14 @@
 import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import Link from '@/next/link'
-import Button from '../../base/button'
 
 const Header = () => {
   const { t } = useTranslation()
 
   return (
-    <div className="system-md-semibold relative flex px-16 pb-2 pt-5 text-text-primary">
+    <div className="relative flex px-16 pt-5 pb-2 system-md-semibold text-text-primary">
       <span>{t('creation.backToKnowledge', { ns: 'datasetPipeline' })}</span>
       <Link
         className="absolute bottom-0 left-5"
@@ -19,7 +19,7 @@ const Header = () => {
           variant="secondary-accent"
           className="size-9 rounded-full p-0"
         >
-          <RiArrowLeftLine className="size-5 " />
+          <RiArrowLeftLine className="size-5" />
         </Button>
       </Link>
     </div>
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx
index 718cb982b1..c2e9a6ba5a 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/actions.tsx
@@ -1,8 +1,8 @@
 import { RiAddLine, RiArrowRightUpLine, RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import CustomPopover from '@/app/components/base/popover'
+import { Button } from '@/app/components/base/ui/button'
 import Operations from './operations'
 
 type ActionsProps = {
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
index 2093de7af4..aa3b4b7b5b 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
@@ -4,9 +4,9 @@ import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import WorkflowPreview from '@/app/components/workflow/workflow-preview'
 import { usePipelineTemplateById } from '@/service/use-pipeline'
 import ChunkStructureCard from './chunk-structure-card'
@@ -59,12 +59,12 @@ const Details = ({
       <div className="relative flex w-[360px] shrink-0 flex-col">
         <button
           type="button"
-          className="absolute right-4 top-4 z-10 flex size-8 items-center justify-center"
+          className="absolute top-4 right-4 z-10 flex size-8 items-center justify-center"
           onClick={onClose}
         >
           <RiCloseLine className="size-4 text-text-tertiary" />
         </button>
-        <div className="flex items-start gap-x-3 pb-2 pl-4 pr-12 pt-6">
+        <div className="flex items-start gap-x-3 pt-6 pr-12 pb-2 pl-4">
           <AppIcon
             size="large"
             iconType={appIcon.type as AppIconType}
@@ -75,14 +75,14 @@ const Details = ({
           />
           <div className="flex grow flex-col gap-y-1 overflow-hidden py-px">
             <div
-              className="system-md-semibold truncate text-text-secondary"
+              className="truncate system-md-semibold text-text-secondary"
               title={pipelineTemplateInfo.name}
             >
               {pipelineTemplateInfo.name}
             </div>
             {pipelineTemplateInfo.created_by && (
               <div
-                className="system-2xs-medium-uppercase truncate text-text-tertiary"
+                className="truncate system-2xs-medium-uppercase text-text-tertiary"
                 title={pipelineTemplateInfo.created_by}
               >
                 {t('details.createdBy', {
@@ -93,7 +93,7 @@ const Details = ({
             )}
           </div>
         </div>
-        <p className="system-sm-regular px-4 pb-2 pt-1 text-text-secondary">
+        <p className="px-4 pt-1 pb-2 system-sm-regular text-text-secondary">
           {pipelineTemplateInfo.description}
         </p>
         <div className="p-3">
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
index ae34015559..73f7123146 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
@@ -6,9 +6,9 @@ import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useInvalidCustomizedTemplateList, useUpdateTemplateInfo } from '@/service/use-pipeline'
 
@@ -92,14 +92,14 @@ const EditPipelineInfo = ({
   return (
     <div className="relative flex flex-col">
       {/* Header */}
-      <div className="pb-3 pl-6 pr-14 pt-6">
+      <div className="pt-6 pr-14 pb-3 pl-6">
         <span className="title-2xl-semi-bold text-text-primary">
           {t('editPipelineInfo', { ns: 'datasetPipeline' })}
         </span>
       </div>
       <button
         type="button"
-        className="absolute right-5 top-5 flex size-8 items-center justify-center"
+        className="absolute top-5 right-5 flex size-8 items-center justify-center"
         onClick={onClose}
       >
         <RiCloseLine className="size-5 text-text-tertiary" />
@@ -108,7 +108,7 @@ const EditPipelineInfo = ({
       <div className="flex flex-col gap-y-5 px-6 py-3">
         <div className="flex items-end gap-x-3 self-stretch">
           <div className="flex grow flex-col gap-y-1 pb-1">
-            <label className="system-sm-medium flex h-6 items-center text-text-secondary">
+            <label className="flex h-6 items-center system-sm-medium text-text-secondary">
               {t('pipelineNameAndIcon', { ns: 'datasetPipeline' })}
             </label>
             <Input
@@ -129,7 +129,7 @@ const EditPipelineInfo = ({
           />
         </div>
         <div className="flex flex-col gap-y-1">
-          <label className="system-sm-medium flex h-6 items-center text-text-secondary">
+          <label className="flex h-6 items-center system-sm-medium text-text-secondary">
             {t('knowledgeDescription', { ns: 'datasetPipeline' })}
           </label>
           <Textarea
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index 812eb2e51c..93840efc9e 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -8,8 +8,8 @@ import {
 } from '@remixicon/react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { Plan } from '@/app/components/billing/type'
 import { useProviderContext } from '@/context/provider-context'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
@@ -39,7 +39,7 @@ const StatusHeader: FC<{ isEmbedding: boolean, isCompleted: boolean }> = ({
   const { t } = useTranslation()
 
   return (
-    <div className="system-md-semibold-uppercase flex items-center gap-x-1 text-text-secondary">
+    <div className="flex items-center gap-x-1 system-md-semibold-uppercase text-text-secondary">
       {isEmbedding && (
         <>
           <RiLoader2Fill className="size-4 animate-spin" />
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
index 09f1701b43..2f42b8acdf 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
@@ -3,9 +3,9 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useRouter } from '@/next/navigation'
 import { createEmptyDataset } from '@/service/datasets'
diff --git a/web/app/components/datasets/create/step-one/components/next-step-button.tsx b/web/app/components/datasets/create/step-one/components/next-step-button.tsx
index 71e4e87fcf..9a343ae745 100644
--- a/web/app/components/datasets/create/step-one/components/next-step-button.tsx
+++ b/web/app/components/datasets/create/step-one/components/next-step-button.tsx
@@ -2,7 +2,7 @@
 
 import { RiArrowRightLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type NextStepButtonProps = {
   disabled: boolean
diff --git a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
index 650fd3ebfb..c3e506fc02 100644
--- a/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
+++ b/web/app/components/datasets/create/step-two/components/general-chunking-options.tsx
@@ -7,10 +7,10 @@ import {
   RiSearchEyeLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import SummaryIndexSetting from '@/app/components/datasets/settings/summary-index-setting'
 import { IS_CE_EDITION } from '@/config'
 import { ChunkingMode } from '@/models/datasets'
@@ -25,7 +25,7 @@ type TextLabelProps = {
 }
 
 const TextLabel: FC<TextLabelProps> = ({ children }) => {
-  return <label className="text-text-secondary system-sm-semibold">{children}</label>
+  return <label className="system-sm-semibold text-text-secondary">{children}</label>
 }
 
 type GeneralChunkingOptionsProps = {
@@ -147,7 +147,7 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
                 onClick={() => onRuleToggle(rule.id)}
               >
                 <Checkbox checked={rule.enabled} />
-                <label className="ml-2 cursor-pointer text-text-secondary system-sm-regular">
+                <label className="ml-2 cursor-pointer system-sm-regular text-text-secondary">
                   {getRuleName(rule.id)}
                 </label>
               </div>
@@ -182,7 +182,7 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
                       checked={currentDocForm === ChunkingMode.qa}
                       disabled={hasCurrentDatasetDocForm}
                     />
-                    <label className="ml-2 cursor-pointer text-text-secondary system-sm-regular">
+                    <label className="ml-2 cursor-pointer system-sm-regular text-text-secondary">
                       {t('stepTwo.useQALanguage', { ns: 'datasetCreation' })}
                     </label>
                   </div>
@@ -201,7 +201,7 @@ export const GeneralChunkingOptions: FC<GeneralChunkingOptionsProps> = ({
                     className="mt-2 flex h-10 items-center gap-2 rounded-xl border border-components-panel-border px-3 text-xs shadow-xs backdrop-blur-[5px]"
                   >
                     <RiAlertFill className="size-4 text-text-warning-secondary" />
-                    <span className="text-text-primary system-xs-medium">
+                    <span className="system-xs-medium text-text-primary">
                       {t('stepTwo.QATip', { ns: 'datasetCreation' })}
                     </span>
                   </div>
diff --git a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
index 8b49a00500..7048b0d460 100644
--- a/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
+++ b/web/app/components/datasets/create/step-two/components/indexing-mode-section.tsx
@@ -5,11 +5,11 @@ import type { DefaultModel, Model } from '@/app/components/header/account-settin
 import type { RetrievalConfig } from '@/types/app'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import CustomDialog from '@/app/components/base/dialog'
 import Divider from '@/app/components/base/divider'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
@@ -69,7 +69,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
   return (
     <>
       {/* Index Mode */}
-      <div className="mb-1 text-text-secondary system-md-semibold">
+      <div className="mb-1 system-md-semibold text-text-secondary">
         {t('stepTwo.indexMode', { ns: 'datasetCreation' })}
       </div>
       <div className="flex items-center gap-2">
@@ -155,11 +155,11 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
       {/* High quality tip */}
       {!hasSetIndexType && indexType === IndexingType.QUALIFIED && (
         <div className="mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]">
-          <div className="absolute bottom-0 left-0 right-0 top-0 bg-dataset-warning-message-bg opacity-40"></div>
+          <div className="absolute top-0 right-0 bottom-0 left-0 bg-dataset-warning-message-bg opacity-40"></div>
           <div className="p-1">
             <AlertTriangle className="size-4 text-text-warning-secondary" />
           </div>
-          <span className="text-text-primary system-xs-medium">
+          <span className="system-xs-medium text-text-primary">
             {t('stepTwo.highQualityTip', { ns: 'datasetCreation' })}
           </span>
         </div>
@@ -167,7 +167,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
 
       {/* Economical index setting tip */}
       {hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
-        <div className="mt-2 text-text-tertiary system-xs-medium">
+        <div className="mt-2 system-xs-medium text-text-tertiary">
           {t('stepTwo.indexSettingTip', { ns: 'datasetCreation' })}
           <Link className="text-text-accent" href={`/datasets/${datasetId}/settings`}>
             {t('stepTwo.datasetSettingLink', { ns: 'datasetCreation' })}
@@ -178,7 +178,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
       {/* Embedding model */}
       {indexType === IndexingType.QUALIFIED && (
         <div className="mt-5">
-          <div className={cn('mb-1 text-text-secondary system-md-semibold', datasetId && 'flex items-center justify-between')}>
+          <div className={cn('mb-1 system-md-semibold text-text-secondary', datasetId && 'flex items-center justify-between')}>
             {t('form.embeddingModel', { ns: 'datasetSettings' })}
           </div>
           <ModelSelector
@@ -189,7 +189,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
             onSelect={onEmbeddingModelChange}
           />
           {isModelAndRetrievalConfigDisabled && (
-            <div className="mt-2 text-text-tertiary system-xs-medium">
+            <div className="mt-2 system-xs-medium text-text-tertiary">
               {t('stepTwo.indexSettingTip', { ns: 'datasetCreation' })}
               <Link className="text-text-accent" href={`/datasets/${datasetId}/settings`}>
                 {t('stepTwo.datasetSettingLink', { ns: 'datasetCreation' })}
@@ -206,10 +206,10 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
         {!isModelAndRetrievalConfigDisabled
           ? (
               <div className="mb-1">
-                <div className="mb-0.5 text-text-secondary system-md-semibold">
+                <div className="mb-0.5 system-md-semibold text-text-secondary">
                   {t('form.retrievalSetting.title', { ns: 'datasetSettings' })}
                 </div>
-                <div className="text-text-tertiary body-xs-regular">
+                <div className="body-xs-regular text-text-tertiary">
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
@@ -223,7 +223,7 @@ export const IndexingModeSection: FC<IndexingModeSectionProps> = ({
               </div>
             )
           : (
-              <div className={cn('mb-0.5 text-text-secondary system-md-semibold', 'flex items-center justify-between')}>
+              <div className={cn('mb-0.5 system-md-semibold text-text-secondary', 'flex items-center justify-between')}>
                 <div>{t('form.retrievalSetting.title', { ns: 'datasetSettings' })}</div>
               </div>
             )}
diff --git a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
index eb542fd3d5..e00a9b2880 100644
--- a/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
+++ b/web/app/components/datasets/create/step-two/components/parent-child-options.tsx
@@ -5,11 +5,11 @@ import type { ParentChildConfig } from '../hooks'
 import type { ParentMode, PreProcessingRule, SummaryIndexSetting as SummaryIndexSettingType } from '@/models/datasets'
 import { RiSearchEyeLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Divider from '@/app/components/base/divider'
 import { ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
 import RadioCard from '@/app/components/base/radio-card'
+import { Button } from '@/app/components/base/ui/button'
 import SummaryIndexSetting from '@/app/components/datasets/settings/summary-index-setting'
 import { IS_CE_EDITION } from '@/config'
 import { ChunkingMode } from '@/models/datasets'
@@ -25,7 +25,7 @@ type TextLabelProps = {
 }
 
 const TextLabel: FC<TextLabelProps> = ({ children }) => {
-  return <label className="text-text-secondary system-sm-semibold">{children}</label>
+  return <label className="system-sm-semibold text-text-secondary">{children}</label>
 }
 
 type ParentChildOptionsProps = {
@@ -185,7 +185,7 @@ export const ParentChildOptions: FC<ParentChildOptionsProps> = ({
                 onClick={() => onRuleToggle(rule.id)}
               >
                 <Checkbox checked={rule.enabled} />
-                <label className="ml-2 cursor-pointer text-text-secondary system-sm-regular">
+                <label className="ml-2 cursor-pointer system-sm-regular text-text-secondary">
                   {getRuleName(rule.id)}
                 </label>
               </div>
diff --git a/web/app/components/datasets/create/step-two/components/step-two-footer.tsx b/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
index a22be64a75..37f15ecd9f 100644
--- a/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
+++ b/web/app/components/datasets/create/step-two/components/step-two-footer.tsx
@@ -3,7 +3,7 @@
 import type { FC } from 'react'
 import { RiArrowLeftLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type StepTwoFooterProps = {
   isSetting?: boolean
diff --git a/web/app/components/datasets/create/stop-embedding-modal/index.tsx b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
index 1d53fbbc3b..6de5e5413f 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import s from './index.module.css'
 
diff --git a/web/app/components/datasets/create/website/base/__tests__/url-input.spec.tsx b/web/app/components/datasets/create/website/base/__tests__/url-input.spec.tsx
index 5301d55307..749d111045 100644
--- a/web/app/components/datasets/create/website/base/__tests__/url-input.spec.tsx
+++ b/web/app/components/datasets/create/website/base/__tests__/url-input.spec.tsx
@@ -50,15 +50,18 @@ describe('UrlInput', () => {
 
     it('should show loading state on button when running', () => {
       render(<UrlInput isRunning={true} onRun={mockOnRun} />)
-      // Button should show loading text when running
       const button = screen.getByRole('button')
-      expect(button).toHaveTextContent(/loading/i)
+      expect(button).toBeDisabled()
+      expect(button).toHaveAttribute('aria-busy', 'true')
+      expect(button.querySelector('.animate-spin')).toBeInTheDocument()
     })
 
     it('should not show loading state on button when not running', () => {
       render(<UrlInput isRunning={false} onRun={mockOnRun} />)
       const button = screen.getByRole('button')
-      expect(button).not.toHaveTextContent(/loading/i)
+      expect(button).not.toBeDisabled()
+      expect(button).not.toHaveAttribute('aria-busy')
+      expect(button.querySelector('.animate-spin')).not.toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/datasets/create/website/base/crawled-result-item.tsx b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
index ed83441b15..7c635de380 100644
--- a/web/app/components/datasets/create/website/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
@@ -4,8 +4,8 @@ import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type Props = {
@@ -52,7 +52,7 @@ const CrawledResultItem: FC<Props> = ({
         </div>
         <Button
           onClick={onPreview}
-          className="right-0 top-0 hidden h-6 px-1.5 text-xs font-medium uppercase group-hover:absolute group-hover:block"
+          className="top-0 right-0 hidden h-6 px-1.5 text-xs font-medium uppercase group-hover:absolute group-hover:block"
         >
           {t('stepOne.website.preview', { ns: 'datasetCreation' })}
         </Button>
diff --git a/web/app/components/datasets/create/website/base/header.tsx b/web/app/components/datasets/create/website/base/header.tsx
index cf4d537e3f..0d32b9dfdb 100644
--- a/web/app/components/datasets/create/website/base/header.tsx
+++ b/web/app/components/datasets/create/website/base/header.tsx
@@ -1,7 +1,7 @@
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type HeaderProps = {
@@ -47,7 +47,7 @@ const Header = ({
         </Button>
       </div>
       <a
-        className="system-xs-medium flex items-center gap-x-1 overflow-hidden text-text-accent"
+        className="flex items-center gap-x-1 overflow-hidden system-xs-medium text-text-accent"
         href={docLink}
         target="_blank"
         rel="noopener noreferrer"
diff --git a/web/app/components/datasets/create/website/base/url-input.tsx b/web/app/components/datasets/create/website/base/url-input.tsx
index 0f5212faeb..21f7d2ca67 100644
--- a/web/app/components/datasets/create/website/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/base/url-input.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import Input from './input'
 
@@ -41,7 +41,6 @@ const UrlInput: FC<Props> = ({
         variant="primary"
         onClick={handleOnRun}
         loading={isRunning}
-        spinnerClassName="ml-0!"
       >
         {!isRunning ? t(`${I18N_PREFIX}.run`, { ns: 'datasetCreation' }) : ''}
       </Button>
diff --git a/web/app/components/datasets/create/website/jina-reader/base/__tests__/url-input.spec.tsx b/web/app/components/datasets/create/website/jina-reader/base/__tests__/url-input.spec.tsx
index 296d5c091b..84fd00d267 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/__tests__/url-input.spec.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/__tests__/url-input.spec.tsx
@@ -49,13 +49,17 @@ describe('UrlInput (jina-reader)', () => {
     it('should show loading state on button when running', () => {
       render(<UrlInput isRunning={true} onRun={mockOnRun} />)
       const button = screen.getByRole('button')
-      expect(button).toHaveTextContent(/loading/i)
+      expect(button).toBeDisabled()
+      expect(button).toHaveAttribute('aria-busy', 'true')
+      expect(button.querySelector('.animate-spin')).toBeInTheDocument()
     })
 
     it('should not show loading state on button when not running', () => {
       render(<UrlInput isRunning={false} onRun={mockOnRun} />)
       const button = screen.getByRole('button')
-      expect(button).not.toHaveTextContent(/loading/i)
+      expect(button).not.toBeDisabled()
+      expect(button).not.toHaveAttribute('aria-busy')
+      expect(button.querySelector('.animate-spin')).not.toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
index 691a34ca6b..a5045d601f 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/url-input.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import Input from '../../base/input'
 
diff --git a/web/app/components/datasets/create/website/no-data.tsx b/web/app/components/datasets/create/website/no-data.tsx
index 88f7ef812c..612507d76f 100644
--- a/web/app/components/datasets/create/website/no-data.tsx
+++ b/web/app/components/datasets/create/website/no-data.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
+import { Button } from '@/app/components/base/ui/button'
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
 import { DataSourceProvider } from '@/models/common'
 import s from './index.module.css'
@@ -62,10 +62,10 @@ const NoData: FC<Props> = ({
         >
           {currentProvider.emoji}
         </div>
-        <div className="mb-1 mt-2 flex flex-col gap-y-1 pb-3 pt-1">
+        <div className="mt-2 mb-1 flex flex-col gap-y-1 pt-1 pb-3">
           <span className="system-md-semibold text-text-secondary">
             {currentProvider.title}
-            <Icon3Dots className="relative -left-1.5 -top-2.5 inline" />
+            <Icon3Dots className="relative -top-2.5 -left-1.5 inline" />
           </span>
           <div className="system-sm-regular text-text-tertiary">
             {currentProvider.description}
diff --git a/web/app/components/datasets/documents/components/documents-header.tsx b/web/app/components/datasets/documents/components/documents-header.tsx
index 7817feaf64..4e098f5eda 100644
--- a/web/app/components/datasets/documents/components/documents-header.tsx
+++ b/web/app/components/datasets/documents/components/documents-header.tsx
@@ -7,10 +7,10 @@ import { PlusIcon } from '@heroicons/react/24/solid'
 import { RiDraftLine, RiExternalLinkLine } from '@remixicon/react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Chip from '@/app/components/base/chip'
 import Input from '@/app/components/base/input'
 import Sort from '@/app/components/base/sort'
+import { Button } from '@/app/components/base/ui/button'
 import AutoDisabledDocument from '@/app/components/datasets/common/document-status-with-action/auto-disabled-document'
 import IndexFailed from '@/app/components/datasets/common/document-status-with-action/index-failed'
 import StatusWithAction from '@/app/components/datasets/common/document-status-with-action/status-with-action'
diff --git a/web/app/components/datasets/documents/components/empty-element.tsx b/web/app/components/datasets/documents/components/empty-element.tsx
index 40c4bbdb9e..6eacf89264 100644
--- a/web/app/components/datasets/documents/components/empty-element.tsx
+++ b/web/app/components/datasets/documents/components/empty-element.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import { PlusIcon } from '@heroicons/react/24/solid'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import s from '../style.module.css'
 import { FolderPlusIcon, NotionIcon, ThreeDotsIcon } from './icons'
 
@@ -22,7 +22,7 @@ const EmptyElement: FC<EmptyElementProps> = ({ canAdd = true, onClick, type = 'u
         </div>
         <span className={s.emptyTitle}>
           {t('list.empty.title', { ns: 'datasetDocuments' })}
-          <ThreeDotsIcon className="relative -left-1.5 -top-3 inline" />
+          <ThreeDotsIcon className="relative -top-3 -left-1.5 inline" />
         </span>
         <div className={s.emptyTip}>
           {t(`list.empty.${type}.tip`, { ns: 'datasetDocuments' })}
diff --git a/web/app/components/datasets/documents/components/rename-modal.tsx b/web/app/components/datasets/documents/components/rename-modal.tsx
index 364aaf48e6..c6f393f1ce 100644
--- a/web/app/components/datasets/documents/components/rename-modal.tsx
+++ b/web/app/components/datasets/documents/components/rename-modal.tsx
@@ -4,9 +4,9 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { renameDocumentName } from '@/service/datasets'
 
@@ -60,7 +60,7 @@ const RenameModal: FC<Props> = ({
       isShow
       onClose={onClose}
     >
-      <div className="mt-6 text-sm font-medium leading-[21px] text-text-primary">{t('list.table.name', { ns: 'datasetDocuments' })}</div>
+      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('list.table.name', { ns: 'datasetDocuments' })}</div>
       <Input
         className="mt-2 h-10"
         value={newName}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
index dab76da832..64c5faac33 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/actions/index.tsx
@@ -2,8 +2,8 @@ import { RiArrowRightLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
+import { Button } from '@/app/components/base/ui/button'
 import Link from '@/next/link'
 import { useParams } from '@/next/navigation'
 
@@ -49,7 +49,7 @@ const Actions = ({
     <div className="flex items-center gap-x-2 overflow-hidden">
       {showSelect && (
         <>
-          <div className="flex shrink-0 items-center gap-x-2 py-[3px] pl-4 pr-2">
+          <div className="flex shrink-0 items-center gap-x-2 py-[3px] pr-2 pl-4">
             <Checkbox
               onCheck={onSelectAll}
               indeterminate={indeterminate}
@@ -60,7 +60,7 @@ const Actions = ({
             </span>
           </div>
           {tip && (
-            <div title={tip} className="system-xs-regular max-w-full truncate text-text-tertiary">
+            <div title={tip} className="max-w-full truncate system-xs-regular text-text-tertiary">
               {tip}
             </div>
           )}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx
index 48a0615bcc..b736935cc8 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/__tests__/header.spec.tsx
@@ -2,8 +2,8 @@ import { render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 import Header from '../header'
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children }: { children: React.ReactNode }) => <button>{children}</button>,
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children }: { children: React.ReactNode }) => <button>{children}</button>,
 }))
 
 vi.mock('@/app/components/base/divider', () => ({
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
index c299a53c5d..034556d96f 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
@@ -2,9 +2,9 @@ import type { CredentialSelectorProps } from './credential-selector'
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import CredentialSelector from './credential-selector'
 
 type HeaderProps = {
@@ -47,7 +47,7 @@ const Header = ({
         </Tooltip>
       </div>
       <a
-        className="system-xs-medium flex shrink-0 items-center gap-x-1 text-text-accent"
+        className="flex shrink-0 items-center gap-x-1 system-xs-medium text-text-accent"
         href={docLink}
         target="_blank"
         rel="noopener noreferrer"
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
index 3da9a7bd54..19ec906688 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx
@@ -1,7 +1,7 @@
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
+import { Button } from '@/app/components/base/ui/button'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { useToolIcon } from '@/app/components/workflow/hooks'
 import { BlockEnum } from '@/app/components/workflow/types'
@@ -28,11 +28,11 @@ const Connect = ({
         />
       </div>
       <div className="flex flex-col gap-y-1">
-        <div className="flex flex-col gap-y-1 pb-3 pt-1">
+        <div className="flex flex-col gap-y-1 pt-1 pb-3">
           <div className="system-md-semibold text-text-secondary">
             <span className="relative">
               {t('onlineDrive.notConnected', { ns: 'datasetPipeline', name: nodeData.title })}
-              <Icon3Dots className="absolute -right-2.5 -top-1.5 size-4 text-text-secondary" />
+              <Icon3Dots className="absolute -top-1.5 -right-2.5 size-4 text-text-secondary" />
             </span>
           </div>
           <div className="system-sm-regular text-text-tertiary">
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
index 53cc7c0a86..2269e33679 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/knowledge'
+import { Button } from '@/app/components/base/ui/button'
 
 type EmptySearchResultProps = {
   onResetKeywords: () => void
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx
index 3a6f294e09..5c12aaa68c 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx
@@ -1,7 +1,7 @@
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 import * as React from 'react'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 
 type HeaderProps = {
   onClickConfiguration?: () => void
@@ -33,7 +33,7 @@ const Header = ({
         </Button>
       </div>
       <a
-        className="system-xs-medium flex items-center gap-x-1 overflow-hidden text-text-accent"
+        className="flex items-center gap-x-1 overflow-hidden system-xs-medium text-text-accent"
         href={docLink}
         target="_blank"
         rel="noopener noreferrer"
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx
index 80d1f4ee19..62dba84e30 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/__tests__/crawled-result-item.spec.tsx
@@ -3,8 +3,8 @@ import { render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import CrawledResultItem from '../crawled-result-item'
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
     <button data-testid="preview-button" onClick={onClick}>{children}</button>
   ),
 }))
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
index 88887d2f2e..3da0e50357 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
@@ -3,9 +3,9 @@ import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import Radio from '@/app/components/base/radio/ui'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type CrawledResultItemProps = {
@@ -58,13 +58,13 @@ const CrawledResultItem = ({
       }
       <div className="flex min-w-0 grow flex-col gap-y-0.5">
         <div
-          className="system-sm-medium truncate text-text-secondary"
+          className="truncate system-sm-medium text-text-secondary"
           title={payload.title}
         >
           {payload.title}
         </div>
         <div
-          className="system-xs-regular truncate text-text-tertiary"
+          className="truncate system-xs-regular text-text-tertiary"
           title={payload.source_url}
         >
           {payload.source_url}
@@ -74,7 +74,7 @@ const CrawledResultItem = ({
         <Button
           size="small"
           onClick={onPreview}
-          className="system-xs-medium-uppercase right-2 top-2 hidden px-1.5 group-hover:absolute group-hover:block"
+          className="top-2 right-2 hidden px-1.5 system-xs-medium-uppercase group-hover:absolute group-hover:block"
         >
           {t('stepOne.website.preview', { ns: 'datasetCreation' })}
         </Button>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
index 8877de93b8..48aae23492 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
@@ -3,11 +3,11 @@ import { RiPlayLargeLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { useAppForm } from '@/app/components/base/form'
 import BaseField from '@/app/components/base/form/form-scenarios/base/field'
 import { generateZodSchema } from '@/app/components/base/form/form-scenarios/base/utils'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useConfigurations, useInitialData } from '@/app/components/rag-pipeline/hooks/use-input-fields'
 import { CrawlStep } from '@/models/datasets'
@@ -82,7 +82,7 @@ const Options = ({
     >
       <div className="flex items-center gap-x-1 px-4 py-2">
         <div
-          className="flex grow cursor-pointer select-none items-center gap-x-0.5"
+          className="flex grow cursor-pointer items-center gap-x-0.5 select-none"
           onClick={foldToggle}
         >
           <span className="system-sm-semibold-uppercase text-text-secondary">
@@ -96,7 +96,6 @@ const Options = ({
           disabled={runDisabled || isRunning}
           loading={isRunning}
           className="shrink-0 gap-x-0.5"
-          spinnerClassName="ml-0!"
         >
           <RiPlayLargeLine className="size-4" />
           <span className="px-0.5">{!isRunning ? t(`${I18N_PREFIX}.run`, { ns: 'datasetCreation' }) : t(`${I18N_PREFIX}.running`, { ns: 'datasetCreation' })}</span>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
index d464041d13..925da57197 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/left-header.tsx
@@ -1,8 +1,8 @@
 import type { Step } from './step-indicator'
 import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
-import Button from '@/app/components/base/button'
 import Effect from '@/app/components/base/effect'
+import { Button } from '@/app/components/base/ui/button'
 import Link from '@/next/link'
 import { useParams } from '@/next/navigation'
 import StepIndicator from './step-indicator'
@@ -21,9 +21,9 @@ const LeftHeader = ({
   const { datasetId } = useParams()
 
   return (
-    <div className="relative flex flex-col gap-y-0.5 pb-2 pt-4">
+    <div className="relative flex flex-col gap-y-0.5 pt-4 pb-2">
       <div className="flex items-center gap-x-2">
-        <span className="system-2xs-semibold-uppercase bg-pipeline-add-documents-title-bg bg-clip-text text-transparent">
+        <span className="bg-pipeline-add-documents-title-bg bg-clip-text system-2xs-semibold-uppercase text-transparent">
           {title}
         </span>
         <span className="system-2xs-regular text-divider-regular">/</span>
@@ -39,13 +39,13 @@ const LeftHeader = ({
         >
           <Button
             variant="secondary-accent"
-            className="absolute -left-11 top-3.5 size-9 rounded-full p-0"
+            className="absolute top-3.5 -left-11 size-9 rounded-full p-0"
           >
-            <RiArrowLeftLine className="size-5 " />
+            <RiArrowLeftLine className="size-5" />
           </Button>
         </Link>
       )}
-      <Effect className="left-8 top-[-34px] opacity-20" />
+      <Effect className="top-[-34px] left-8 opacity-20" />
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
index d57f06ed00..a56e5bd6dc 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
@@ -6,8 +6,8 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
+import { Button } from '@/app/components/base/ui/button'
 import SummaryLabel from '@/app/components/datasets/documents/detail/completed/common/summary-label'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { ChunkingMode } from '@/models/datasets'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx
index 7ce3a6396e..7e9eabaeda 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/__tests__/header.spec.tsx
@@ -2,8 +2,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import Header from '../header'
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, disabled, variant }: { children: React.ReactNode, onClick: () => void, disabled?: boolean, variant: string }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, disabled, variant }: { children: React.ReactNode, onClick: () => void, disabled?: boolean, variant: string }) => (
     <button data-testid={`btn-${variant}`} onClick={onClick} disabled={disabled}>
       {children}
     </button>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx
index 7b378cb808..7526826cfc 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/actions.tsx
@@ -1,7 +1,7 @@
 import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type ActionsProps = {
   onBack: () => void
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx
index a0f8a63f8f..04d4304d21 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx
@@ -1,7 +1,7 @@
 import { RiSearchEyeLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type HeaderProps = {
   onReset: () => void
@@ -20,7 +20,7 @@ const Header = ({
 
   return (
     <div className="flex items-center gap-x-1 px-4 py-2">
-      <div className="system-sm-semibold-uppercase grow text-text-secondary">
+      <div className="grow system-sm-semibold-uppercase text-text-secondary">
         {t('addDocuments.stepTwo.chunkSettings', { ns: 'datasetPipeline' })}
       </div>
       <Button variant="ghost" disabled={resetDisabled} onClick={onReset}>
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
index b25146ff79..86de5ee45e 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
@@ -13,10 +13,10 @@ import {
 import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import NotionIcon from '@/app/components/base/notion-icon'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import PriorityLabel from '@/app/components/billing/priority-label'
 import { Plan } from '@/app/components/billing/type'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
@@ -134,7 +134,7 @@ const EmbeddingProcess = ({
   return (
     <>
       <div className="flex flex-col gap-y-3">
-        <div className="system-md-semibold-uppercase flex items-center gap-x-1 text-text-secondary">
+        <div className="flex items-center gap-x-1 system-md-semibold-uppercase text-text-secondary">
           {(isEmbeddingWaiting || isEmbedding) && (
             <>
               <RiLoader2Fill className="size-4 animate-spin" />
@@ -151,7 +151,7 @@ const EmbeddingProcess = ({
               <div className="flex shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 shadow-md shadow-shadow-shadow-5">
                 <RiAedFill className="size-4 text-text-primary-on-surface" />
               </div>
-              <div className="system-md-medium grow text-text-primary">
+              <div className="grow system-md-medium text-text-primary">
                 {t('plansCommon.documentProcessingPriorityUpgrade', { ns: 'billing' })}
               </div>
               <UpgradeBtn loc="knowledge-speed-up" />
@@ -169,11 +169,11 @@ const EmbeddingProcess = ({
             >
               {isSourceEmbedding(indexingStatusDetail) && (
                 <div
-                  className="absolute left-0 top-0 h-full min-w-0.5 border-r-2 border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress"
+                  className="absolute top-0 left-0 h-full min-w-0.5 border-r-2 border-r-components-progress-bar-progress-highlight bg-components-progress-bar-progress"
                   style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }}
                 />
               )}
-              <div className="z-1 flex h-full items-center gap-1 pl-[6px] pr-2">
+              <div className="z-1 flex h-full items-center gap-1 pr-2 pl-[6px]">
                 {getSourceType(indexingStatusDetail.id) === DatasourceType.localFile && (
                   <DocumentFileIcon
                     size="sm"
@@ -190,7 +190,7 @@ const EmbeddingProcess = ({
                   />
                 )}
                 <div className="flex w-0 grow items-center gap-1" title={getSourceName(indexingStatusDetail.id)}>
-                  <div className="system-xs-medium truncate text-text-secondary">
+                  <div className="truncate system-xs-medium text-text-secondary">
                     {getSourceName(indexingStatusDetail.id)}
                   </div>
                   {
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
index 7382d1abd1..c6e1a63bd3 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -5,10 +5,10 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { getFileUploadErrorMessage } from '@/app/components/base/file-uploader/utils'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import SimplePieChart from '@/app/components/base/simple-pie-chart'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import useTheme from '@/hooks/use-theme'
 import { upload } from '@/service/base'
@@ -178,7 +178,7 @@ const CSVUploader: FC<Props> = ({ file, updateFile }) => {
                 <span className="cursor-pointer text-text-accent" onClick={selectHandle}>{t('list.batchModal.browse', { ns: 'datasetDocuments' })}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className="absolute left-0 top-0 h-full w-full" />}
+            {dragging && <div ref={dragRef} className="absolute top-0 left-0 h-full w-full" />}
           </div>
         )}
         {file && (
diff --git a/web/app/components/datasets/documents/detail/batch-modal/index.tsx b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
index ff43f5f67d..fe3c399355 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/index.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/index.tsx
@@ -6,8 +6,8 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import CSVDownloader from './csv-downloader'
 import CSVUploader from './csv-uploader'
 
@@ -42,8 +42,8 @@ const BatchModal: FC<IBatchModalProps> = ({
 
   return (
     <Modal isShow={isShow} onClose={noop} className="max-w-[520px]! rounded-xl! px-8 py-6">
-      <div className="relative pb-1 text-xl font-medium leading-[30px] text-text-primary">{t('list.batchModal.title', { ns: 'datasetDocuments' })}</div>
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onCancel}>
+      <div className="relative pb-1 text-xl leading-[30px] font-medium text-text-primary">{t('list.batchModal.title', { ns: 'datasetDocuments' })}</div>
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onCancel}>
         <RiCloseLine className="h-4 w-4 text-text-secondary" />
       </div>
       <CSVUploader
diff --git a/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx b/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
index a0cbfea147..9bd2913cda 100644
--- a/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/action-buttons.tsx
@@ -3,7 +3,7 @@ import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 import { ChunkingMode } from '@/models/datasets'
diff --git a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index cf4966c234..9a2798698c 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -3,10 +3,10 @@ import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLin
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import { SearchLinesSparkle } from '@/app/components/base/icons/src/vender/knowledge'
+import { Button } from '@/app/components/base/ui/button'
 import { IS_CE_EDITION } from '@/config'
 import { cn } from '@/utils/classnames'
 
@@ -55,8 +55,8 @@ const BatchAction: FC<IBatchActionProps> = ({
   return (
     <div className={cn('pointer-events-none flex w-full justify-center gap-x-2', className)}>
       <div className="pointer-events-auto flex items-center gap-x-1 radius-lg border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5">
-        <div className="inline-flex items-center gap-x-2 py-1 pl-2 pr-3">
-          <span className="system-xs-medium flex h-5 w-5 items-center justify-center rounded-md bg-text-accent text-text-primary-on-surface">
+        <div className="inline-flex items-center gap-x-2 py-1 pr-3 pl-2">
+          <span className="flex h-5 w-5 items-center justify-center rounded-md bg-text-accent system-xs-medium text-text-primary-on-surface">
             {selectedIds.length}
           </span>
           <span className="system-sm-semibold text-text-accent">{t(`${i18nPrefix}.selected`, { ns: 'dataset' })}</span>
diff --git a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
index cbc99c48d5..8aea0245de 100644
--- a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
@@ -5,8 +5,8 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 
 type IDefaultContentProps = {
@@ -30,7 +30,7 @@ const DefaultContent: FC<IDefaultContentProps> = React.memo(({
         <Button onClick={onCancel}>
           {t('operation.cancel', { ns: 'common' })}
         </Button>
-        <Button variant="warning" destructive onClick={onConfirm}>
+        <Button variant="primary" destructive onClick={onConfirm}>
           {t('operation.regenerate', { ns: 'common' })}
         </Button>
       </div>
@@ -50,7 +50,7 @@ const RegeneratingContent: FC = React.memo(() => {
         <p className="system-md-regular text-text-secondary">{t('segment.regeneratingMessage', { ns: 'datasetDocuments' })}</p>
       </div>
       <div className="flex justify-end pt-6">
-        <Button variant="warning" destructive disabled className="inline-flex items-center gap-x-0.5">
+        <Button variant="primary" destructive disabled className="inline-flex items-center gap-x-0.5">
           <RiLoader2Line className="h-4 w-4 animate-spin text-components-button-destructive-primary-text-disabled" />
           <span>{t('operation.regenerate', { ns: 'common' })}</span>
         </Button>
diff --git a/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx b/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
index 033b7f631d..c65fbeb886 100644
--- a/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/components/doc-type-selector.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import type { DocType } from '@/models/datasets'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Radio from '@/app/components/base/radio'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { useMetadataMap } from '@/hooks/use-metadata'
 import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index 87110ddc1d..0d06b43118 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import type { FullDocumentDetail } from '@/models/datasets'
 import { PencilIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { useMetadataMap } from '@/hooks/use-metadata'
 import DocTypeSelector, { DocumentTypeDisplay } from './components/doc-type-selector'
 import MetadataFieldList from './components/metadata-field-list'
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
index 15b06a5f10..28e8d4bb30 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx
@@ -2,8 +2,8 @@ import { RiArrowLeftLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Effect from '@/app/components/base/effect'
+import { Button } from '@/app/components/base/ui/button'
 import { useRouter } from '@/next/navigation'
 
 type LeftHeaderProps = {
@@ -21,8 +21,8 @@ const LeftHeader = ({
   }, [back])
 
   return (
-    <div className="relative flex flex-col gap-y-0.5 pb-2 pt-4">
-      <div className="system-2xs-semibold-uppercase bg-pipeline-add-documents-title-bg bg-clip-text text-transparent">
+    <div className="relative flex flex-col gap-y-0.5 pt-4 pb-2">
+      <div className="bg-pipeline-add-documents-title-bg bg-clip-text system-2xs-semibold-uppercase text-transparent">
         {title}
       </div>
       <div className="system-md-semibold text-text-primary">
@@ -30,13 +30,13 @@ const LeftHeader = ({
       </div>
       <Button
         variant="secondary-accent"
-        className="absolute -left-11 top-3.5 size-9 rounded-full p-0"
+        className="absolute top-3.5 -left-11 size-9 rounded-full p-0"
         onClick={navigateBack}
         aria-label={t('operation.back', { ns: 'common' })}
       >
-        <RiArrowLeftLine className="size-5 " />
+        <RiArrowLeftLine className="size-5" />
       </Button>
-      <Effect className="left-8 top-[-34px] opacity-20" />
+      <Effect className="top-[-34px] left-8 opacity-20" />
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx
index 4a47f28152..a3ba424309 100644
--- a/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx
+++ b/web/app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/actions.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type ActionsProps = {
   runDisabled?: boolean
diff --git a/web/app/components/datasets/external-api/external-api-modal/index.tsx b/web/app/components/datasets/external-api/external-api-modal/index.tsx
index b84b9925c3..1d60e67634 100644
--- a/web/app/components/datasets/external-api/external-api-modal/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/index.tsx
@@ -4,10 +4,10 @@ import { RiBook2Line, RiCloseLine, RiInformation2Line, RiLock2Fill } from '@remi
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import { PortalToFollowElem, PortalToFollowElemContent } from '@/app/components/base/portal-to-follow-elem'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { createExternalAPI } from '@/service/datasets'
 import Form from './Form'
@@ -104,12 +104,12 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
       <PortalToFollowElemContent className="z-60 h-full w-full">
         <div className="fixed inset-0 flex items-center justify-center bg-black/25">
           <div className="shadows-shadow-xl relative flex w-[480px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg">
-            <div className="flex flex-col items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
-              <div className="grow self-stretch text-text-primary title-2xl-semi-bold">
+            <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+              <div className="grow self-stretch title-2xl-semi-bold text-text-primary">
                 {isEditMode ? t('editExternalAPIFormTitle', { ns: 'dataset' }) : t('createExternalAPI', { ns: 'dataset' })}
               </div>
               {isEditMode && (datasetBindings?.length ?? 0) > 0 && (
-                <div className="flex items-center text-text-tertiary system-xs-regular">
+                <div className="flex items-center system-xs-regular text-text-tertiary">
                   {t('editExternalAPIFormWarning.front', { ns: 'dataset' })}
                   <span className="flex cursor-pointer items-center text-text-accent">
                     &nbsp;
@@ -121,13 +121,13 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                       popupClassName="flex items-center self-stretch w-[320px]"
                       popupContent={(
                         <div className="p-1">
-                          <div className="flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1">
-                            <div className="text-text-tertiary system-xs-medium-uppercase">{`${datasetBindings?.length} ${t('editExternalAPITooltipTitle', { ns: 'dataset' })}`}</div>
+                          <div className="flex items-start self-stretch pt-1 pr-3 pb-0.5 pl-2">
+                            <div className="system-xs-medium-uppercase text-text-tertiary">{`${datasetBindings?.length} ${t('editExternalAPITooltipTitle', { ns: 'dataset' })}`}</div>
                           </div>
                           {datasetBindings?.map(binding => (
                             <div key={binding.id} className="flex items-center gap-1 self-stretch px-2 py-1">
                               <RiBook2Line className="h-4 w-4 text-text-secondary" />
-                              <div className="text-text-secondary system-sm-medium">{binding.name}</div>
+                              <div className="system-sm-medium text-text-secondary">{binding.name}</div>
                             </div>
                           ))}
                         </div>
@@ -141,7 +141,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                 </div>
               )}
             </div>
-            <ActionButton className="absolute right-5 top-5" onClick={onCancel}>
+            <ActionButton className="absolute top-5 right-5" onClick={onCancel}>
               <RiCloseLine className="h-[18px] w-[18px] shrink-0 text-text-tertiary" />
             </ActionButton>
             <Form value={formData} onChange={handleDataChange} formSchemas={formSchemas} className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3" />
@@ -166,7 +166,7 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
               </Button>
             </div>
             <div className="flex items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px] border-divider-subtle
-              bg-background-soft px-2 py-3 text-text-tertiary system-xs-regular"
+              bg-background-soft px-2 py-3 system-xs-regular text-text-tertiary"
             >
               <RiLock2Fill className="h-3 w-3 text-text-quaternary" />
               {t('externalAPIForm.encrypted.front', { ns: 'dataset' })}
diff --git a/web/app/components/datasets/external-api/external-api-panel/index.tsx b/web/app/components/datasets/external-api/external-api-panel/index.tsx
index 063b8683c6..7d240d0820 100644
--- a/web/app/components/datasets/external-api/external-api-panel/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-panel/index.tsx
@@ -6,8 +6,8 @@ import {
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import { useDocLink } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
@@ -41,7 +41,7 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
   return (
     <div
       tabIndex={-1}
-      className={cn('absolute bottom-2 right-0 top-14 z-10 flex outline-hidden')}
+      className={cn('absolute top-14 right-0 bottom-2 z-10 flex outline-hidden')}
     >
       <div
         className={cn(
@@ -50,15 +50,15 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
       >
         <div className="flex items-start self-stretch p-4 pb-0">
           <div className="flex grow flex-col items-start gap-1">
-            <div className="system-xl-semibold self-stretch text-text-primary">{t('externalAPIPanelTitle', { ns: 'dataset' })}</div>
-            <div className="body-xs-regular self-stretch text-text-tertiary">{t('externalAPIPanelDescription', { ns: 'dataset' })}</div>
+            <div className="self-stretch system-xl-semibold text-text-primary">{t('externalAPIPanelTitle', { ns: 'dataset' })}</div>
+            <div className="self-stretch body-xs-regular text-text-tertiary">{t('externalAPIPanelDescription', { ns: 'dataset' })}</div>
             <a
               className="flex cursor-pointer items-center justify-center gap-1 self-stretch"
               href={docLink('/use-dify/knowledge/external-knowledge-api')}
               target="_blank"
             >
               <RiBookOpenLine className="h-3 w-3 text-text-accent" />
-              <div className="body-xs-regular grow text-text-accent">{t('externalAPIPanelDocumentation', { ns: 'dataset' })}</div>
+              <div className="grow body-xs-regular text-text-accent">{t('externalAPIPanelDocumentation', { ns: 'dataset' })}</div>
             </a>
           </div>
           <div className="flex items-center">
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
index 4652a8a5f1..387bf9843c 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
@@ -4,8 +4,8 @@ import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import { useModalContext } from '@/context/modal-context'
 import { useRouter } from '@/next/navigation'
diff --git a/web/app/components/datasets/external-knowledge-base/create/index.tsx b/web/app/components/datasets/external-knowledge-base/create/index.tsx
index 0e855259ba..9024d8e162 100644
--- a/web/app/components/datasets/external-knowledge-base/create/index.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/index.tsx
@@ -4,8 +4,8 @@ import type { CreateKnowledgeBaseReq } from './declarations'
 import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { useRouter } from '@/next/navigation'
 import ExternalApiSelection from './ExternalApiSelection'
@@ -54,14 +54,14 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
     <div className="flex grow flex-col self-stretch rounded-t-2xl border-t border-effects-highlight bg-components-panel-bg">
       <div className="flex grow justify-center self-stretch">
         <div className="flex w-full max-w-[960px] flex-col items-center px-14 py-0">
-          <div className="flex w-full max-w-[640px] grow flex-col items-center gap-4 pb-8 pt-6">
+          <div className="flex w-full max-w-[640px] grow flex-col items-center gap-4 pt-6 pb-8">
             <div className="relative flex flex-col items-center gap-[2px] self-stretch py-2">
-              <div className="system-xl-semibold grow self-stretch text-text-primary">{t('connectDataset', { ns: 'dataset' })}</div>
+              <div className="grow self-stretch system-xl-semibold text-text-primary">{t('connectDataset', { ns: 'dataset' })}</div>
               <p className="system-sm-regular text-text-tertiary">
                 <span>{t('connectHelper.helper1', { ns: 'dataset' })}</span>
                 <span className="system-sm-medium text-text-secondary">{t('connectHelper.helper2', { ns: 'dataset' })}</span>
                 <span>{t('connectHelper.helper3', { ns: 'dataset' })}</span>
-                <a className="system-sm-regular self-stretch text-text-accent" href={docLink('/use-dify/knowledge/connect-external-knowledge-base')} target="_blank" rel="noopener noreferrer">
+                <a className="self-stretch system-sm-regular text-text-accent" href={docLink('/use-dify/knowledge/connect-external-knowledge-base')} target="_blank" rel="noopener noreferrer">
                   {t('connectHelper.helper4', { ns: 'dataset' })}
                 </a>
                 <span>
@@ -70,7 +70,7 @@ const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> =
                 </span>
               </p>
               <Button
-                className="absolute left-[-44px] top-1 flex h-8 w-8 items-center justify-center rounded-full p-2"
+                className="absolute top-1 left-[-44px] flex h-8 w-8 items-center justify-center rounded-full p-2"
                 variant="tertiary"
                 onClick={navBackHandle}
               >
diff --git a/web/app/components/datasets/extra-info/service-api/card.tsx b/web/app/components/datasets/extra-info/service-api/card.tsx
index bf84204ea4..36808a781b 100644
--- a/web/app/components/datasets/extra-info/service-api/card.tsx
+++ b/web/app/components/datasets/extra-info/service-api/card.tsx
@@ -2,9 +2,9 @@ import { RiBookOpenLine, RiKey2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
+import { Button } from '@/app/components/base/ui/button'
 import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
 import Indicator from '@/app/components/header/indicator'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
@@ -38,7 +38,7 @@ const Card = ({
             <div className="flex size-6 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 shadow-md shadow-shadow-shadow-5">
               <ApiAggregate className="size-4 text-text-primary-on-surface" />
             </div>
-            <div className="system-sm-semibold grow truncate text-text-secondary">
+            <div className="grow truncate system-sm-semibold text-text-secondary">
               {t('serviceApi.card.title', { ns: 'dataset' })}
             </div>
           </div>
@@ -62,7 +62,7 @@ const Card = ({
           </div>
           <div className="flex h-8 items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
             <div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
-              <div className="system-xs-medium truncate text-text-secondary">
+              <div className="truncate system-xs-medium text-text-secondary">
                 {apiBaseUrl}
               </div>
             </div>
@@ -81,7 +81,7 @@ const Card = ({
           onClick={handleOpenSecretKeyModal}
         >
           <RiKey2Line className="size-3.5 shrink-0" />
-          <span className="system-xs-medium px-[3px]">
+          <span className="px-[3px] system-xs-medium">
             {t('serviceApi.card.apiKey', { ns: 'dataset' })}
           </span>
         </Button>
@@ -96,7 +96,7 @@ const Card = ({
             className="gap-x-px text-text-tertiary"
           >
             <RiBookOpenLine className="size-3.5 shrink-0" />
-            <span className="system-xs-medium px-[3px]">
+            <span className="px-[3px] system-xs-medium">
               {t('serviceApi.card.apiReference', { ns: 'dataset' })}
             </span>
           </Button>
diff --git a/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx b/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx
index 6fe1f14983..77e02f8582 100644
--- a/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx
+++ b/web/app/components/datasets/hit-testing/__tests__/modify-external-retrieval-modal.spec.tsx
@@ -8,8 +8,8 @@ vi.mock('@/app/components/base/action-button', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
     <button data-testid={variant === 'primary' ? 'save-button' : 'cancel-button'} onClick={onClick}>
       {children}
     </button>
diff --git a/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx b/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
index 4640e42a7e..9e9adf74ad 100644
--- a/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
+++ b/web/app/components/datasets/hit-testing/__tests__/modify-retrieval-modal.spec.tsx
@@ -21,8 +21,8 @@ vi.mock('@/app/components/base/ui/toast', () => ({
   toast: mockToast,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, variant }: { children: React.ReactNode, onClick: () => void, variant?: string }) => (
     <button data-testid={variant === 'primary' ? 'save-button' : 'cancel-button'} onClick={onClick}>
       {children}
     </button>
diff --git a/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx b/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx
index 4ed09de462..25b7abe7ea 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/__tests__/index.spec.tsx
@@ -123,9 +123,9 @@ describe('QueryInput', () => {
   it('should show loading state on submit button when loading', () => {
     render(<QueryInput {...defaultProps} loading={true} />)
     const submitButton = screen.getByRole('button', { name: /input\.testing/ })
-    // The real Button component does not disable on loading; it shows a spinner
-    expect(submitButton).toBeInTheDocument()
-    expect(submitButton.querySelector('[role="status"]')).toBeInTheDocument()
+    expect(submitButton).toBeDisabled()
+    expect(submitButton).toHaveAttribute('aria-busy', 'true')
+    expect(submitButton.querySelector('.animate-spin')).toBeInTheDocument()
   })
 
   // Cover line 83: images useMemo with image_query data
diff --git a/web/app/components/datasets/hit-testing/components/query-input/index.tsx b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
index 305b507a71..b2b07c9f04 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/index.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
@@ -18,7 +18,7 @@ import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { v4 as uuid4 } from 'uuid'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ImageUploaderInRetrievalTesting from '@/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing'
 import { getIcon } from '@/app/components/datasets/common/retrieval-method-info'
 import ModifyExternalRetrievalModal from '@/app/components/datasets/hit-testing/modify-external-retrieval-modal'
@@ -205,7 +205,7 @@ const QueryInput = ({
     <div className={cn('relative flex h-80 shrink-0 flex-col overflow-hidden rounded-xl bg-linear-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-0.5 shadow-xs')}>
       <div className="flex h-full flex-col overflow-hidden radius-lg bg-background-section-burn">
         <div className="relative flex shrink-0 items-center justify-between p-1.5 pb-1 pl-3">
-          <span className="text-text-secondary system-sm-semibold-uppercase">
+          <span className="system-sm-semibold-uppercase text-text-secondary">
             {t('input.title', { ns: 'datasetHitTesting' })}
           </span>
           {isExternal
@@ -217,7 +217,7 @@ const QueryInput = ({
                 >
                   <RiEqualizer2Line className="h-3.5 w-3.5 text-components-button-secondary-text" />
                   <div className="flex items-center justify-center gap-1 px-[3px]">
-                    <span className="text-components-button-secondary-text system-xs-medium">{t('settingTitle', { ns: 'datasetHitTesting' })}</span>
+                    <span className="system-xs-medium text-components-button-secondary-text">{t('settingTitle', { ns: 'datasetHitTesting' })}</span>
                   </div>
                 </Button>
               )
@@ -227,7 +227,7 @@ const QueryInput = ({
                   className="flex h-7 cursor-pointer items-center space-x-0.5 rounded-lg border-[0.5px] border-components-button-secondary-bg bg-components-button-secondary-bg px-1.5 shadow-xs backdrop-blur-[5px] hover:bg-components-button-secondary-bg-hover"
                 >
                   {icon}
-                  <div className="text-xs font-medium uppercase text-text-secondary">{t(`retrieval.${retrievalMethod}.title`, { ns: 'dataset' })}</div>
+                  <div className="text-xs font-medium text-text-secondary uppercase">{t(`retrieval.${retrievalMethod}.title`, { ns: 'dataset' })}</div>
                   <RiEqualizer2Line className="size-4 text-components-menu-item-text"></RiEqualizer2Line>
                 </div>
               )}
diff --git a/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
index 21b2f6b56d..097155f68f 100644
--- a/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx
@@ -4,7 +4,7 @@ import {
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import RetrievalSettings from '../external-knowledge-base/create/RetrievalSettings'
 
 type ModifyExternalRetrievalModalProps = {
@@ -42,11 +42,11 @@ const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps>
   }
 
   return (
-    <div className="shadows-shadow-2xl absolute right-[14px] top-[36px] z-10 flex w-[320px] flex-col items-start rounded-2xl
+    <div className="shadows-shadow-2xl absolute top-[36px] right-[14px] z-10 flex w-[320px] flex-col items-start rounded-2xl
       border-[0.5px] border-components-panel-border bg-components-panel-bg"
     >
       <div className="flex items-center justify-between self-stretch p-4 pb-2">
-        <div className="system-xl-semibold grow text-text-primary">{t('settingTitle', { ns: 'datasetHitTesting' })}</div>
+        <div className="grow system-xl-semibold text-text-primary">{t('settingTitle', { ns: 'datasetHitTesting' })}</div>
         <ActionButton className="ml-auto" onClick={onClose}>
           <RiCloseLine className="h-4 w-4 shrink-0" />
         </ActionButton>
diff --git a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
index da0ee7761f..b85a040073 100644
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -6,7 +6,7 @@ import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
@@ -74,10 +74,10 @@ const ModifyRetrievalModal: FC<Props> = ({ indexMethod, value, isShow, onHide, o
       }}
       ref={ref}
     >
-      <div className="h-15 flex shrink-0 justify-between px-3 pb-1 pt-3.5">
+      <div className="flex h-15 shrink-0 justify-between px-3 pt-3.5 pb-1">
         <div className="text-base font-semibold text-text-primary">
           <div>{t('form.retrievalSetting.title', { ns: 'datasetSettings' })}</div>
-          <div className="text-xs font-normal leading-[18px] text-text-tertiary">
+          <div className="text-xs leading-[18px] font-normal text-text-tertiary">
             <a target="_blank" rel="noopener noreferrer" href={docLink('/use-dify/knowledge/create-knowledge/setting-indexing-methods')} className="text-text-accent">
               {t('form.retrievalSetting.learnMore', { ns: 'datasetSettings' })}
             </a>
@@ -92,7 +92,7 @@ const ModifyRetrievalModal: FC<Props> = ({ indexMethod, value, isShow, onHide, o
       </div>
 
       <div className="px-4 py-2">
-        <div className="mb-1 text-[13px] font-semibold leading-6 text-text-secondary">
+        <div className="mb-1 text-[13px] leading-6 font-semibold text-text-secondary">
           {t('form.retrievalSetting.method', { ns: 'datasetSettings' })}
         </div>
         {indexMethod === 'high_quality'
diff --git a/web/app/components/datasets/list/index.tsx b/web/app/components/datasets/list/index.tsx
index 071e5cc855..fae469dc9e 100644
--- a/web/app/components/datasets/list/index.tsx
+++ b/web/app/components/datasets/list/index.tsx
@@ -5,13 +5,13 @@ import { useBoolean, useDebounceFn } from 'ahooks'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import Button from '@/app/components/base/button'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import Input from '@/app/components/base/input'
 import TagManagementModal from '@/app/components/base/tag-management'
 import TagFilter from '@/app/components/base/tag-management/filter'
 // Hooks
 import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
+import { Button } from '@/app/components/base/ui/button'
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
 import { useAppContext, useSelector as useAppContextSelector } from '@/context/app-context'
 import { useExternalApiPanel } from '@/context/external-api-panel-context'
@@ -57,7 +57,7 @@ const List = () => {
 
   return (
     <div className="scroll-container relative flex grow flex-col overflow-y-auto bg-background-body">
-      <div className="sticky top-0 z-10 flex items-center justify-end gap-x-1 bg-background-body px-12 pb-2 pt-4">
+      <div className="sticky top-0 z-10 flex items-center justify-end gap-x-1 bg-background-body px-12 pt-4 pb-2">
         <div className="flex items-center justify-center gap-2">
           {isCurrentWorkspaceOwner && (
             <CheckboxWithLabel
@@ -89,7 +89,7 @@ const List = () => {
             onClick={() => setShowExternalApiPanel(true)}
           >
             <ApiConnectionMod className="h-4 w-4 text-components-button-secondary-text" />
-            <div className="flex items-center justify-center gap-1 px-0.5 text-components-button-secondary-text system-sm-medium">{t('externalAPIPanelTitle', { ns: 'dataset' })}</div>
+            <div className="flex items-center justify-center gap-1 px-0.5 system-sm-medium text-components-button-secondary-text">{t('externalAPIPanelTitle', { ns: 'dataset' })}</div>
           </Button>
         </div>
       </div>
diff --git a/web/app/components/datasets/metadata/add-metadata-button.tsx b/web/app/components/datasets/metadata/add-metadata-button.tsx
index 6c920f5b49..47f50cdecc 100644
--- a/web/app/components/datasets/metadata/add-metadata-button.tsx
+++ b/web/app/components/datasets/metadata/add-metadata-button.tsx
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
-import Button from '../../base/button'
 
 type Props = {
   className?: string
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
index e50a45e7c5..2dfff611ed 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -7,9 +7,9 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useCreateMetaData } from '@/service/knowledge/use-metadata'
-import Button from '../../../base/button'
 import Checkbox from '../../../base/checkbox'
 import Modal from '../../../base/modal'
 import Tooltip from '../../../base/tooltip'
@@ -92,14 +92,14 @@ const EditMetadataBatchModal: FC<Props> = ({ datasetId, documentNum, list, onSav
   }, [templeList, addedList, isApplyToAllSelectDocument, onSave])
   return (
     <Modal title={t(`${i18nPrefix}.editMetadata`, { ns: 'dataset' })} isShow closable onClose={onHide} className="!max-w-[640px]">
-      <div className="mt-1 text-text-accent system-xs-medium">{t(`${i18nPrefix}.editDocumentsNum`, { ns: 'dataset', num: documentNum })}</div>
-      <div className="max-h-[305px] overflow-y-auto overflow-x-hidden">
+      <div className="mt-1 system-xs-medium text-text-accent">{t(`${i18nPrefix}.editDocumentsNum`, { ns: 'dataset', num: documentNum })}</div>
+      <div className="max-h-[305px] overflow-x-hidden overflow-y-auto">
         <div className="mt-4 space-y-2">
           {templeList.map(item => (<EditMetadataBatchItem key={item.id} payload={item} onChange={handleTemplesChange} onRemove={handleTempleItemRemove} onReset={handleItemReset} />))}
         </div>
         <div className="mt-4 pl-[18px]">
           <div className="flex items-center">
-            <div className="mr-2 shrink-0 text-text-tertiary system-xs-medium-uppercase">{t('metadata.createMetadata.title', { ns: 'dataset' })}</div>
+            <div className="mr-2 shrink-0 system-xs-medium-uppercase text-text-tertiary">{t('metadata.createMetadata.title', { ns: 'dataset' })}</div>
             <Divider bgStyle="gradient" />
           </div>
           <div className="mt-2 space-y-2">
@@ -112,9 +112,9 @@ const EditMetadataBatchModal: FC<Props> = ({ datasetId, documentNum, list, onSav
       </div>
 
       <div className="mt-4 flex items-center justify-between">
-        <div className="flex select-none items-center">
+        <div className="flex items-center select-none">
           <Checkbox checked={isApplyToAllSelectDocument} onCheck={() => setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} id="apply-to-all" />
-          <div className="ml-2 mr-1 text-text-secondary system-xs-medium">{t(`${i18nPrefix}.applyToAllSelectDocument`, { ns: 'dataset' })}</div>
+          <div className="mr-1 ml-2 system-xs-medium text-text-secondary">{t(`${i18nPrefix}.applyToAllSelectDocument`, { ns: 'dataset' })}</div>
           <Tooltip popupContent={<div className="max-w-[240px]">{t(`${i18nPrefix}.applyToAllSelectDocumentTip`, { ns: 'dataset' })}</div>}>
             <div className="cursor-pointer p-px">
               <RiQuestionLine className="size-3.5 text-text-tertiary" />
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index 74ceae4be3..24b2fdc363 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -6,13 +6,13 @@ import { useBoolean, useHover } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Drawer from '@/app/components/base/drawer'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import CreateModal from '@/app/components/datasets/metadata/metadata-dataset/create-metadata-modal'
 import { cn } from '@/utils/classnames'
@@ -75,17 +75,17 @@ const Item: FC<ItemProps> = ({
     >
       <div
         className={cn(
-          'flex h-8 items-center justify-between  px-2',
+          'flex h-8 items-center justify-between px-2',
           disabled && 'opacity-30', // not include border and bg
         )}
       >
         <div className="flex h-full items-center space-x-1 text-text-tertiary">
           <Icon className="size-4 shrink-0" />
-          <div className="system-sm-medium max-w-[250px] truncate text-text-primary">{payload.name}</div>
-          <div className="system-xs-regular shrink-0">{payload.type}</div>
+          <div className="max-w-[250px] truncate system-sm-medium text-text-primary">{payload.name}</div>
+          <div className="shrink-0 system-xs-regular">{payload.type}</div>
         </div>
         {(!readonly || disabled) && (
-          <div className="system-xs-regular ml-2 shrink-0 text-text-tertiary group-hover/item:hidden">
+          <div className="ml-2 shrink-0 system-xs-regular text-text-tertiary group-hover/item:hidden">
             {disabled ? t(`${i18nPrefix}.disabled`, { ns: 'dataset' }) : t(`${i18nPrefix}.values`, { ns: 'dataset', num: payload.count || 0 })}
           </div>
         )}
@@ -198,7 +198,7 @@ const DatasetMetadataDrawer: FC<Props> = ({
             value={isBuiltInEnabled}
             onChange={onIsBuiltInEnabledChange}
           />
-          <div className="system-sm-semibold ml-2 mr-0.5 text-text-secondary">{t(`${i18nPrefix}.builtIn`, { ns: 'dataset' })}</div>
+          <div className="mr-0.5 ml-2 system-sm-semibold text-text-secondary">{t(`${i18nPrefix}.builtIn`, { ns: 'dataset' })}</div>
           <Tooltip popupContent={<div className="max-w-[100px]">{t(`${i18nPrefix}.builtInDescription`, { ns: 'dataset' })}</div>} />
         </div>
 
diff --git a/web/app/components/datasets/metadata/metadata-document/index.tsx b/web/app/components/datasets/metadata/metadata-document/index.tsx
index 68d9d7bf75..28c4f9a2ed 100644
--- a/web/app/components/datasets/metadata/metadata-document/index.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/index.tsx
@@ -4,8 +4,8 @@ import type { FullDocumentDetail } from '@/models/datasets'
 import { RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import useMetadataDocument from '../hooks/use-metadata-document'
 import InfoGroup from './info-group'
diff --git a/web/app/components/datasets/metadata/metadata-document/no-data.tsx b/web/app/components/datasets/metadata/metadata-document/no-data.tsx
index b64b5ca126..e444827f1d 100644
--- a/web/app/components/datasets/metadata/metadata-document/no-data.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/no-data.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import { RiArrowRightLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   onStart: () => void
@@ -15,8 +15,8 @@ const NoData: FC<Props> = ({
   const { t } = useTranslation()
   return (
     <div className="rounded-xl bg-linear-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4 pt-3">
-      <div className="text-xs font-semibold leading-5 text-text-secondary">{t('metadata.metadata', { ns: 'dataset' })}</div>
-      <div className="system-xs-regular mt-1 text-text-tertiary">{t('metadata.documentMetadata.metadataToolTip', { ns: 'dataset' })}</div>
+      <div className="text-xs leading-5 font-semibold text-text-secondary">{t('metadata.metadata', { ns: 'dataset' })}</div>
+      <div className="mt-1 system-xs-regular text-text-tertiary">{t('metadata.documentMetadata.metadataToolTip', { ns: 'dataset' })}</div>
       <Button variant="primary" className="mt-2" onClick={onStart}>
         <div>{t('metadata.documentMetadata.startLabeling', { ns: 'dataset' })}</div>
         <RiArrowRightLine className="ml-1 size-4" />
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index ca3d09b00b..422851be24 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -6,10 +6,10 @@ import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { updateDatasetSetting } from '@/service/datasets'
 import { cn } from '@/utils/classnames'
@@ -91,14 +91,14 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
   return (
     <Modal className="w-[520px] max-w-[520px] rounded-xl px-8 py-6" isShow={show} onClose={noop}>
       <div className="flex items-center justify-between pb-2">
-        <div className="text-xl font-medium leading-[30px] text-text-primary">{t('title', { ns: 'datasetSettings' })}</div>
+        <div className="text-xl leading-[30px] font-medium text-text-primary">{t('title', { ns: 'datasetSettings' })}</div>
         <div className="cursor-pointer p-2" onClick={onClose}>
           <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
       </div>
       <div>
         <div className={cn('flex flex-col py-4')}>
-          <div className="shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary">
+          <div className="shrink-0 py-2 text-sm leading-[20px] font-medium text-text-primary">
             {t('form.name', { ns: 'datasetSettings' })}
           </div>
           <div className="flex items-center gap-x-2">
@@ -107,7 +107,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
           </div>
         </div>
         <div className={cn('flex flex-col py-4')}>
-          <div className="shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary">
+          <div className="shrink-0 py-2 text-sm leading-[20px] font-medium text-text-primary">
             {t('form.desc', { ns: 'datasetSettings' })}
           </div>
           <div className="w-full">
diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx
index f060701f1c..99ebf84307 100644
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import BasicInfoSection from './components/basic-info-section'
 import ExternalKnowledgeSection from './components/external-knowledge-section'
 import IndexingSection from './components/indexing-section'
diff --git a/web/app/components/develop/secret-key/secret-key-button.tsx b/web/app/components/develop/secret-key/secret-key-button.tsx
index 16bdc15ce2..575ad93e88 100644
--- a/web/app/components/develop/secret-key/secret-key-button.tsx
+++ b/web/app/components/develop/secret-key/secret-key-button.tsx
@@ -2,7 +2,7 @@
 import { RiKey2Line } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
 
 type ISecretKeyButtonProps = {
@@ -25,7 +25,7 @@ const SecretKeyButton = ({ className, appId, textCls }: ISecretKeyButtonProps) =
         <div className="flex h-3.5 w-3.5 items-center justify-center">
           <RiKey2Line className="h-3.5 w-3.5 text-text-tertiary" />
         </div>
-        <div className={`system-xs-medium px-[3px] text-text-tertiary ${textCls}`}>{t('apiKey', { ns: 'appApi' })}</div>
+        <div className={`px-[3px] system-xs-medium text-text-tertiary ${textCls}`}>{t('apiKey', { ns: 'appApi' })}</div>
       </Button>
       <SecretKeyModal isShow={isVisible} onClose={() => setVisible(false)} appId={appId} />
     </>
diff --git a/web/app/components/develop/secret-key/secret-key-generate.tsx b/web/app/components/develop/secret-key/secret-key-generate.tsx
index 6280a3220c..85bcd0db1c 100644
--- a/web/app/components/develop/secret-key/secret-key-generate.tsx
+++ b/web/app/components/develop/secret-key/secret-key-generate.tsx
@@ -2,8 +2,8 @@
 import type { CreateApiKeyResponse } from '@/models/app'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import InputCopy from './input-copy'
 import s from './style.module.css'
 
@@ -23,10 +23,10 @@ const SecretKeyGenerateModal = ({
   const { t } = useTranslation()
   return (
     <Modal isShow={isShow} onClose={onClose} title={`${t('apiKeyModal.apiSecretKey', { ns: 'appApi' })}`} className={`px-8 ${className}`}>
-      <div className="-mr-2 -mt-6 mb-4 flex justify-end">
+      <div className="-mt-6 -mr-2 mb-4 flex justify-end">
         <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={onClose} />
       </div>
-      <p className="mt-1 text-[13px] font-normal leading-5 text-text-tertiary">{t('apiKeyModal.generateTips', { ns: 'appApi' })}</p>
+      <p className="mt-1 text-[13px] leading-5 font-normal text-text-tertiary">{t('apiKeyModal.generateTips', { ns: 'appApi' })}</p>
       <div className="my-4">
         <InputCopy className="w-full" value={newKey?.token} />
       </div>
diff --git a/web/app/components/develop/secret-key/secret-key-modal.tsx b/web/app/components/develop/secret-key/secret-key-modal.tsx
index 238d949500..ec83251ec6 100644
--- a/web/app/components/develop/secret-key/secret-key-modal.tsx
+++ b/web/app/components/develop/secret-key/secret-key-modal.tsx
@@ -7,11 +7,11 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import useTimestamp from '@/hooks/use-timestamp'
 import {
@@ -89,10 +89,10 @@ const SecretKeyModal = ({
 
   return (
     <Modal isShow={isShow} onClose={onClose} title={`${t('apiKeyModal.apiSecretKey', { ns: 'appApi' })}`} className={`${s.customModal} flex flex-col px-8`}>
-      <div className="-mr-2 -mt-6 mb-4 flex justify-end">
+      <div className="-mt-6 -mr-2 mb-4 flex justify-end">
         <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={onClose} />
       </div>
-      <p className="mt-1 shrink-0 text-[13px] font-normal leading-5 text-text-tertiary">{t('apiKeyModal.apiSecretKeyTips', { ns: 'appApi' })}</p>
+      <p className="mt-1 shrink-0 text-[13px] leading-5 font-normal text-text-tertiary">{t('apiKeyModal.apiSecretKeyTips', { ns: 'appApi' })}</p>
       {isApiKeysLoading && <div className="mt-4"><Loading /></div>}
       {
         !!apiKeysList?.data?.length && (
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 56bbc4f450..ac2397f6ab 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -5,11 +5,11 @@ import { PlusIcon } from '@heroicons/react/20/solid'
 import { RiInformation2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
+import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AppModeEnum } from '@/types/app'
 import { cn } from '@/utils/classnames'
 import { AppTypeIcon } from '../../app/type-selector'
-import Button from '../../base/button'
 
 export type AppCardProps = {
   app: App
@@ -36,7 +36,7 @@ const AppCard = ({
 
   return (
     <div className={cn('group relative col-span-1 flex cursor-pointer flex-col overflow-hidden rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-2 shadow-sm transition-all duration-200 ease-in-out hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-lg')}>
-      <div className="flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pb-3 pt-[14px]">
+      <div className="flex h-[66px] shrink-0 grow-0 items-center gap-3 px-[14px] pt-[14px] pb-3">
         <div className="relative shrink-0">
           <AppIcon
             size="large"
@@ -52,10 +52,10 @@ const AppCard = ({
           />
         </div>
         <div className="w-0 grow py-px">
-          <div className="flex items-center text-sm font-semibold leading-5 text-text-secondary">
+          <div className="flex items-center text-sm leading-5 font-semibold text-text-secondary">
             <div className="truncate" title={appBasicInfo.name}>{appBasicInfo.name}</div>
           </div>
-          <div className="flex items-center text-[10px] font-medium leading-[18px] text-text-tertiary">
+          <div className="flex items-center text-[10px] leading-[18px] font-medium text-text-tertiary">
             {appBasicInfo.mode === AppModeEnum.ADVANCED_CHAT && <div className="truncate">{t('types.advanced', { ns: 'app' }).toUpperCase()}</div>}
             {appBasicInfo.mode === AppModeEnum.CHAT && <div className="truncate">{t('types.chatbot', { ns: 'app' }).toUpperCase()}</div>}
             {appBasicInfo.mode === AppModeEnum.AGENT_CHAT && <div className="truncate">{t('types.agent', { ns: 'app' }).toUpperCase()}</div>}
@@ -64,13 +64,13 @@ const AppCard = ({
           </div>
         </div>
       </div>
-      <div className="description-wrapper h-[90px] px-[14px] text-text-tertiary system-xs-regular">
+      <div className="description-wrapper h-[90px] px-[14px] system-xs-regular text-text-tertiary">
         <div className="line-clamp-4 group-hover:line-clamp-2">
           {app.description}
         </div>
       </div>
       {isExplore && (canCreate || isTrialApp) && (
-        <div className={cn('absolute bottom-0 left-0 right-0 hidden bg-linear-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
+        <div className={cn('absolute right-0 bottom-0 left-0 hidden bg-linear-to-t from-components-panel-gradient-2 from-[60.27%] to-transparent p-4 pt-8 group-hover:flex')}>
           <div className={cn('grid h-8 w-full grid-cols-1 space-x-2', canCreate && 'grid-cols-2')}>
             {
               canCreate && (
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index d508f141b4..1261c0949c 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -9,9 +9,9 @@ import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import DSLConfirmModal from '@/app/components/app/create-from-dsl-modal/dsl-confirm-modal'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import AppCard from '@/app/components/explore/app-card'
 import Banner from '@/app/components/explore/banner/banner'
 import Category from '@/app/components/explore/category'
@@ -181,7 +181,7 @@ const Apps = ({
           )}
           >
             <div className="flex items-center">
-              <div className="grow truncate text-text-primary system-xl-semibold">{!hasFilterCondition ? t('apps.title', { ns: 'explore' }) : t('apps.resultNum', { num: searchFilteredList.length, ns: 'explore' })}</div>
+              <div className="grow truncate system-xl-semibold text-text-primary">{!hasFilterCondition ? t('apps.title', { ns: 'explore' }) : t('apps.resultNum', { num: searchFilteredList.length, ns: 'explore' })}</div>
               {hasFilterCondition && (
                 <>
                   <div className="mx-3 h-4 w-px bg-divider-regular"></div>
@@ -199,7 +199,7 @@ const Apps = ({
             />
           </div>
 
-          <div className="px-12 pb-4 pt-2">
+          <div className="px-12 pt-2 pb-4">
             <Category
               list={categories}
               value={currCategory}
diff --git a/web/app/components/explore/create-app-modal/index.tsx b/web/app/components/explore/create-app-modal/index.tsx
index 931d41ff86..8f12409442 100644
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@@ -7,11 +7,11 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { useProviderContext } from '@/context/provider-context'
@@ -119,19 +119,19 @@ const CreateAppModal = ({
         onClose={noop}
         className="relative max-w-[480px]! px-8"
       >
-        <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onHide}>
+        <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onHide}>
           <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
         {isEditModal && (
-          <div className="mb-9 text-xl font-semibold leading-[30px] text-text-primary">{t('editAppTitle', { ns: 'app' })}</div>
+          <div className="mb-9 text-xl leading-[30px] font-semibold text-text-primary">{t('editAppTitle', { ns: 'app' })}</div>
         )}
         {!isEditModal && (
-          <div className="mb-9 text-xl font-semibold leading-[30px] text-text-primary">{t('appCustomize.title', { ns: 'explore', name: appName })}</div>
+          <div className="mb-9 text-xl leading-[30px] font-semibold text-text-primary">{t('appCustomize.title', { ns: 'explore', name: appName })}</div>
         )}
         <div className="mb-9">
           {/* icon & name */}
           <div className="pt-2">
-            <div className="py-2 text-sm font-medium leading-[20px] text-text-primary">{t('newApp.captionName', { ns: 'app' })}</div>
+            <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('newApp.captionName', { ns: 'app' })}</div>
             <div className="flex items-center justify-between space-x-2">
               <AppIcon
                 size="large"
@@ -152,7 +152,7 @@ const CreateAppModal = ({
           </div>
           {/* description */}
           <div className="pt-2">
-            <div className="py-2 text-sm font-medium leading-[20px] text-text-primary">{t('newApp.captionDescription', { ns: 'app' })}</div>
+            <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('newApp.captionDescription', { ns: 'app' })}</div>
             <Textarea
               className="resize-none"
               placeholder={t('newApp.appDescriptionPlaceholder', { ns: 'app' }) || ''}
@@ -164,7 +164,7 @@ const CreateAppModal = ({
           {isEditModal && (appMode === AppModeEnum.CHAT || appMode === AppModeEnum.ADVANCED_CHAT || appMode === AppModeEnum.AGENT_CHAT) && (
             <div className="pt-2">
               <div className="flex items-center justify-between">
-                <div className="py-2 text-sm font-medium leading-[20px] text-text-primary">{t('answerIcon.title', { ns: 'app' })}</div>
+                <div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('answerIcon.title', { ns: 'app' })}</div>
                 <Switch
                   value={useIconAsAnswerIcon}
                   onChange={v => setUseIconAsAnswerIcon(v)}
@@ -175,7 +175,7 @@ const CreateAppModal = ({
           )}
           {isEditModal && (
             <div className="pt-2">
-              <div className="mb-2 mt-2 text-sm font-medium leading-[20px] text-text-primary">{t('maxActiveRequests', { ns: 'app' })}</div>
+              <div className="mt-2 mb-2 text-sm leading-[20px] font-medium text-text-primary">{t('maxActiveRequests', { ns: 'app' })}</div>
               <Input
                 type="number"
                 min={1}
@@ -186,7 +186,7 @@ const CreateAppModal = ({
                 }}
                 className="h-10 w-full"
               />
-              <p className="body-xs-regular mb-0 mt-2 text-text-tertiary">{t('maxActiveRequestsTip', { ns: 'app' })}</p>
+              <p className="mt-2 mb-0 body-xs-regular text-text-tertiary">{t('maxActiveRequestsTip', { ns: 'app' })}</p>
             </div>
           )}
           {!isEditModal && isAppsFull && <AppsFull className="mt-4" loc="app-explore-create" />}
diff --git a/web/app/components/explore/try-app/app-info/index.tsx b/web/app/components/explore/try-app/app-info/index.tsx
index c6e9f9547b..de8e317a6b 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import useGetRequirements from './use-get-requirements'
 
@@ -78,10 +78,10 @@ const AppInfo: FC<Props> = ({
           />
         </div>
         <div className="w-0 grow py-px">
-          <div className="flex items-center text-sm font-semibold leading-5 text-text-secondary">
+          <div className="flex items-center text-sm leading-5 font-semibold text-text-secondary">
             <div className="truncate" title={appDetail.name}>{appDetail.name}</div>
           </div>
-          <div className="flex items-center text-[10px] font-medium leading-[18px] text-text-tertiary">
+          <div className="flex items-center text-[10px] leading-[18px] font-medium text-text-tertiary">
             {mode === 'advanced-chat' && <div className="truncate">{t('types.advanced', { ns: 'app' }).toUpperCase()}</div>}
             {mode === 'chat' && <div className="truncate">{t('types.chatbot', { ns: 'app' }).toUpperCase()}</div>}
             {mode === 'agent-chat' && <div className="truncate">{t('types.agent', { ns: 'app' }).toUpperCase()}</div>}
@@ -91,17 +91,17 @@ const AppInfo: FC<Props> = ({
         </div>
       </div>
       {appDetail.description && (
-        <div className="mt-[14px] shrink-0 text-text-secondary system-sm-regular">{appDetail.description}</div>
+        <div className="mt-[14px] shrink-0 system-sm-regular text-text-secondary">{appDetail.description}</div>
       )}
       <Button variant="primary" className="mt-3 flex w-full max-w-full" onClick={onCreate}>
-        <span className="i-ri-add-line mr-1 size-4 shrink-0" />
+        <span className="mr-1 i-ri-add-line size-4 shrink-0" />
         <span className="truncate">{t('tryApp.createFromSampleApp', { ns: 'explore' })}</span>
       </Button>
 
       {category && (
         <div className="mt-6 shrink-0">
           <div className={headerClassName}>{t('tryApp.category', { ns: 'explore' })}</div>
-          <div className="text-text-secondary system-md-regular">{category}</div>
+          <div className="system-md-regular text-text-secondary">{category}</div>
         </div>
       )}
       {requirements.length > 0 && (
@@ -111,7 +111,7 @@ const AppInfo: FC<Props> = ({
             {requirements.map(item => (
               <div className="flex items-center space-x-2 py-1" key={item.name}>
                 <RequirementIcon iconUrl={item.iconUrl} />
-                <div className="w-0 grow truncate text-text-secondary system-md-regular">{item.name}</div>
+                <div className="w-0 grow truncate system-md-regular text-text-secondary">{item.name}</div>
               </div>
             ))}
           </div>
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index 9165695e33..19fccc72ab 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -7,10 +7,10 @@ import { useState } from 'react'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal/index'
+import { Button } from '@/app/components/base/ui/button'
 import { IS_CLOUD_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useGetTryAppInfo } from '@/service/use-try-app'
-import Button from '../../base/button'
 import App from './app'
 import AppInfo from './app-info'
 import Preview from './preview'
@@ -42,7 +42,7 @@ const TryApp: FC<Props> = ({
     <Modal
       isShow
       onClose={onClose}
-      className="h-[calc(100vh-32px)] min-w-[1280px] max-w-[calc(100vw-32px)] overflow-x-auto p-2"
+      className="h-[calc(100vh-32px)] max-w-[calc(100vw-32px)] min-w-[1280px] overflow-x-auto p-2"
     >
       {isLoading ? (
         <div className="flex h-full items-center justify-center">
diff --git a/web/app/components/header/account-about/index.tsx b/web/app/components/header/account-about/index.tsx
index 4cf7d745b6..cdab2815dc 100644
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -3,9 +3,9 @@ import type { LangGeniusVersionResponse } from '@/models/common'
 import { RiCloseLine } from '@remixicon/react'
 import dayjs from 'dayjs'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { IS_CE_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
@@ -31,7 +31,7 @@ export default function AccountAbout({
       className="w-[480px]! max-w-[480px]! px-6! py-4!"
     >
       <div className="relative">
-        <div className="absolute right-0 top-0 flex h-8 w-8 cursor-pointer items-center justify-center" onClick={onCancel}>
+        <div className="absolute top-0 right-0 flex h-8 w-8 cursor-pointer items-center justify-center" onClick={onCancel}>
           <RiCloseLine className="h-4 w-4 text-text-tertiary" />
         </div>
         <div className="flex flex-col items-center gap-4 py-8">
diff --git a/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx b/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
index 01f3460e7d..8165434b3a 100644
--- a/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
+++ b/web/app/components/header/account-dropdown/__tests__/compliance.spec.tsx
@@ -89,6 +89,10 @@ describe('Compliance', () => {
     fireEvent.click(screen.getByText('common.userProfile.compliance'))
   }
 
+  const getComplianceMenuItem = (label: string) => {
+    return screen.getByText(label).closest('[role="menuitem"]')
+  }
+
   describe('Rendering', () => {
     it('should render compliance menu trigger', () => {
       // Act
@@ -239,15 +243,16 @@ describe('Compliance', () => {
 
       // Act
       openMenuAndRender()
-      const downloadButtons = screen.getAllByText('common.operation.download')
-      fireEvent.click(downloadButtons[0])
+      const menuItem = getComplianceMenuItem('common.compliance.soc2Type1')
+      expect(menuItem).not.toBeNull()
+      fireEvent.click(menuItem!)
 
-      // Assert - btn-disabled class and spinner should appear while mutation is pending
+      // Assert - button should become busy while mutation is pending
       await waitFor(() => {
-        const menuItem = screen.getByText('common.compliance.soc2Type1').closest('[role="menuitem"]')
-        expect(menuItem).not.toBeNull()
-        const disabledBtn = menuItem!.querySelector('.cursor-not-allowed')
-        expect(disabledBtn).not.toBeNull()
+        const busyButton = menuItem!.querySelector('button[aria-busy="true"]')
+        expect(busyButton).not.toBeNull()
+        expect(busyButton).toBeDisabled()
+        expect(busyButton!.querySelector('.animate-spin')).not.toBeNull()
       }, { timeout: 10000 })
 
       // Cleanup: resolve the pending promise
@@ -271,21 +276,22 @@ describe('Compliance', () => {
       })
 
       openMenuAndRender()
-      const downloadButtons = screen.getAllByText('common.operation.download')
+      const menuItem = getComplianceMenuItem('common.compliance.soc2Type1')
+      expect(menuItem).not.toBeNull()
 
       // First click starts download
-      fireEvent.click(downloadButtons[0])
+      fireEvent.click(menuItem!)
 
       // Wait for mutation to start and React to re-render (isPending=true)
       await waitFor(() => {
-        const menuItem = screen.getByText('common.compliance.soc2Type1').closest('[role="menuitem"]')
-        const el = menuItem!.querySelector('.cursor-not-allowed')
-        expect(el).not.toBeNull()
+        const busyButton = menuItem!.querySelector('button[aria-busy="true"]')
+        expect(busyButton).not.toBeNull()
+        expect(busyButton).toBeDisabled()
         expect(getDocDownloadUrl).toHaveBeenCalledTimes(1)
       }, { timeout: 10000 })
 
       // Second click while pending - should be guarded by isPending check
-      fireEvent.click(downloadButtons[0])
+      fireEvent.click(menuItem!)
 
       resolveDownload!({ url: 'http://example.com/doc.pdf' })
       await waitFor(() => {
diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index 41c1e81910..2f79c631fb 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -2,6 +2,7 @@ import type { ReactNode } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from '@/app/components/base/ui/dropdown-menu'
 import { toast } from '@/app/components/base/ui/toast'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
@@ -10,14 +11,12 @@ import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/con
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { getDocDownloadUrl } from '@/service/common'
-import { cn } from '@/utils/classnames'
 import { downloadUrl } from '@/utils/download'
 import Gdpr from '../../base/icons/src/public/common/Gdpr'
 import Iso from '../../base/icons/src/public/common/Iso'
 import Soc2 from '../../base/icons/src/public/common/Soc2'
 import SparklesSoft from '../../base/icons/src/public/common/SparklesSoft'
 import PremiumBadge from '../../base/premium-badge'
-import Spinner from '../../base/spinner'
 import { MenuItemContent } from './menu-item-content'
 
 enum DocName {
@@ -44,18 +43,16 @@ function ComplianceDocActionVisual({
 }: ComplianceDocActionVisualProps) {
   if (isCurrentPlanCanDownload) {
     return (
-      <div
+      <Button
+        size="small"
+        disabled={isPending}
+        loading={isPending}
         aria-hidden
-        data-disabled={isPending || undefined}
-        className={cn(
-          'btn btn-small btn-secondary pointer-events-none flex items-center gap-px',
-          isPending && 'cursor-not-allowed',
-        )}
+        className="pointer-events-none flex items-center gap-px"
       >
         <span className="i-ri-arrow-down-circle-line size-[14px] text-components-button-secondary-text-disabled" />
-        <span className="px-[3px] text-components-button-secondary-text system-xs-medium">{downloadText}</span>
-        {isPending && <Spinner loading={true} className="ml-1! h-3! w-3! border-2! text-text-tertiary!" />}
-      </div>
+        <span className="px-[3px] system-xs-medium text-components-button-secondary-text">{downloadText}</span>
+      </Button>
     )
   }
 
@@ -146,12 +143,12 @@ function ComplianceDocRowItem({
 
   return (
     <DropdownMenuItem
-      className="h-10 justify-between py-1 pl-1 pr-2"
+      className="h-10 justify-between py-1 pr-2 pl-1"
       closeOnClick={!isCurrentPlanCanDownload}
       onClick={handleSelect}
     >
       {icon}
-      <div className="grow truncate px-1 text-text-secondary system-md-regular">{label}</div>
+      <div className="grow truncate px-1 system-md-regular text-text-secondary">{label}</div>
       <ComplianceDocActionVisual
         isCurrentPlanCanDownload={isCurrentPlanCanDownload}
         isPending={isPending}
diff --git a/web/app/components/header/account-setting/api-based-extension-page/index.tsx b/web/app/components/header/account-setting/api-based-extension-page/index.tsx
index dce2a61de6..b5d07dcfe1 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/index.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/index.tsx
@@ -2,7 +2,7 @@ import {
   RiAddLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 import { useApiBasedExtensions } from '@/service/use-common'
 import Empty from './empty'
diff --git a/web/app/components/header/account-setting/api-based-extension-page/item.tsx b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
index d1e3e8f368..0624224a45 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/item.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
@@ -6,8 +6,8 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
+import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 import { deleteApiBasedExtension } from '@/service/common'
 
diff --git a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
index 9e41d4603d..bffd6da230 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/modal.tsx
@@ -3,9 +3,9 @@ import type { ApiBasedExtension } from '@/models/common'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useDocLink } from '@/context/i18n'
 import { addApiBasedExtension, updateApiBasedExtension } from '@/service/common'
@@ -68,7 +68,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({ data, onCance
           : t('apiBasedExtension.modal.title', { ns: 'common' })}
       </div>
       <div className="py-2">
-        <div className="text-sm font-medium leading-9 text-text-primary">
+        <div className="text-sm leading-9 font-medium text-text-primary">
           {t('apiBasedExtension.modal.name.title', { ns: 'common' })}
         </div>
         <input value={localeData.name || ''} onChange={e => handleDataChange('name', e.target.value)} className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-hidden" placeholder={t('apiBasedExtension.modal.name.placeholder', { ns: 'common' }) || ''} />
@@ -84,7 +84,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({ data, onCance
         <input value={localeData.api_endpoint || ''} onChange={e => handleDataChange('api_endpoint', e.target.value)} className="block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-hidden" placeholder={t('apiBasedExtension.modal.apiEndpoint.placeholder', { ns: 'common' }) || ''} />
       </div>
       <div className="py-2">
-        <div className="text-sm font-medium leading-9 text-text-primary">
+        <div className="text-sm leading-9 font-medium text-text-primary">
           {t('apiBasedExtension.modal.apiKey.title', { ns: 'common' })}
         </div>
         <div className="flex items-center">
diff --git a/web/app/components/header/account-setting/data-source-page-new/configure.tsx b/web/app/components/header/account-setting/data-source-page-new/configure.tsx
index bb9a5bb3e8..1cf2c9d382 100644
--- a/web/app/components/header/account-setting/data-source-page-new/configure.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/configure.tsx
@@ -14,12 +14,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import {
   AddApiKeyButton,
   AddOAuthButton,
@@ -104,7 +104,7 @@ const Configure = ({
             }
             {
               !!canApiKey && !!canOAuth && (
-                <div className="flex h-4 items-center p-2 text-text-quaternary system-2xs-medium-uppercase">
+                <div className="flex h-4 items-center p-2 system-2xs-medium-uppercase text-text-quaternary">
                   <div className="mr-2 h-px grow bg-linear-to-l from-[rgba(16,24,40,0.08)]" />
                   OR
                   <div className="ml-2 h-px grow bg-linear-to-r from-[rgba(16,24,40,0.08)]" />
diff --git a/web/app/components/header/account-setting/data-source-page-new/item.tsx b/web/app/components/header/account-setting/data-source-page-new/item.tsx
index 0cf724277d..9983a22b2c 100644
--- a/web/app/components/header/account-setting/data-source-page-new/item.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/item.tsx
@@ -6,8 +6,8 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import Operator from './operator'
 
@@ -24,7 +24,7 @@ const Item = ({
   const [renameValue, setRenameValue] = useState(credentialItem.name)
 
   return (
-    <div className="flex h-10 items-center rounded-lg bg-components-panel-on-panel-item-bg pl-3 pr-1">
+    <div className="flex h-10 items-center rounded-lg bg-components-panel-on-panel-item-bg pr-1 pl-3">
       {/* <div className='mr-2 h-5 w-5 shrink-0'></div> */}
       {
         renaming && (
@@ -69,7 +69,7 @@ const Item = ({
       }
       {
         !renaming && (
-          <div className="system-sm-medium grow text-text-secondary">
+          <div className="grow system-sm-medium text-text-secondary">
             {credentialItem.name}
           </div>
         )
@@ -82,7 +82,7 @@ const Item = ({
           connected
         </div>
       </div>
-      <div className="ml-3 mr-2 h-3 w-px bg-divider-regular"></div>
+      <div className="mr-2 ml-3 h-3 w-px bg-divider-regular"></div>
       <Operator
         credentialItem={credentialItem}
         onAction={onAction}
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 7ae1da8de3..d061efb9c6 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -3,6 +3,7 @@ import type { AccountSettingTab } from '@/app/components/header/account-setting/
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import SearchInput from '@/app/components/base/search-input'
+import { Button } from '@/app/components/base/ui/button'
 import { ScrollArea } from '@/app/components/base/ui/scroll-area'
 import BillingPage from '@/app/components/billing/billing-page'
 import CustomPage from '@/app/components/custom/custom-page'
@@ -15,7 +16,6 @@ import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { cn } from '@/utils/classnames'
-import Button from '../../base/button'
 import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page-new'
 import LanguagePage from './language-page'
@@ -152,14 +152,14 @@ export default function AccountSetting({
       onClose={handleClose}
     >
       <div className="mx-auto flex h-screen max-w-[1048px]">
-        <div className="flex w-[44px] flex-col border-r border-divider-burn pl-4 pr-6 sm:w-[224px]">
-          <div className="mb-8 mt-6 px-3 py-2 text-text-primary title-2xl-semi-bold">{t('userProfile.settings', { ns: 'common' })}</div>
+        <div className="flex w-[44px] flex-col border-r border-divider-burn pr-6 pl-4 sm:w-[224px]">
+          <div className="mt-6 mb-8 px-3 py-2 title-2xl-semi-bold text-text-primary">{t('userProfile.settings', { ns: 'common' })}</div>
           <div className="w-full">
             {
               menuItems.map(menuItem => (
                 <div key={menuItem.key} className="mb-2">
                   {!isCurrentWorkspaceDatasetOperator && (
-                    <div className="mb-0.5 py-2 pb-1 pl-3 text-text-tertiary system-xs-medium-uppercase">{menuItem.name}</div>
+                    <div className="mb-0.5 py-2 pb-1 pl-3 system-xs-medium-uppercase text-text-tertiary">{menuItem.name}</div>
                   )}
                   <div>
                     {
@@ -169,7 +169,7 @@ export default function AccountSetting({
                           key={item.key}
                           className={cn(
                             'mb-0.5 flex h-[37px] w-full items-center rounded-lg p-1 pl-3 text-left text-sm',
-                            activeMenu === item.key ? 'bg-state-base-active text-components-menu-item-text-active system-sm-semibold' : 'text-components-menu-item-text system-sm-medium',
+                            activeMenu === item.key ? 'bg-state-base-active system-sm-semibold text-components-menu-item-text-active' : 'system-sm-medium text-components-menu-item-text',
                           )}
                           aria-label={item.name}
                           title={item.name}
@@ -189,7 +189,7 @@ export default function AccountSetting({
           </div>
         </div>
         <div className="relative flex min-h-0 w-[824px]">
-          <div className="fixed right-6 top-6 z-9999 flex flex-col items-center">
+          <div className="fixed top-6 right-6 z-9999 flex flex-col items-center">
             <Button
               variant="tertiary"
               size="large"
@@ -199,7 +199,7 @@ export default function AccountSetting({
             >
               <span className="i-ri-close-line h-5 w-5" />
             </Button>
-            <div className="mt-1 text-text-tertiary system-2xs-medium-uppercase">ESC</div>
+            <div className="mt-1 system-2xs-medium-uppercase text-text-tertiary">ESC</div>
           </div>
           <ScrollArea
             className="h-full min-h-0 flex-1 bg-components-panel-bg"
@@ -208,11 +208,11 @@ export default function AccountSetting({
               content: 'min-h-full pb-4',
             }}
           >
-            <div className="sticky top-0 z-20 mx-8 mb-[18px] flex items-center bg-components-panel-bg pb-2 pt-[27px]">
-              <div className="shrink-0 text-text-primary title-2xl-semi-bold">
+            <div className="sticky top-0 z-20 mx-8 mb-[18px] flex items-center bg-components-panel-bg pt-[27px] pb-2">
+              <div className="shrink-0 title-2xl-semi-bold text-text-primary">
                 {activeItem?.name}
                 {activeItem?.description && (
-                  <div className="mt-1 text-text-tertiary system-sm-regular">{activeItem?.description}</div>
+                  <div className="mt-1 system-sm-regular text-text-tertiary">{activeItem?.description}</div>
                 )}
               </div>
               {activeItem?.key === ACCOUNT_SETTING_TAB.PROVIDER && (
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
index 348a1ac3d6..93acf76d00 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
@@ -94,7 +94,7 @@ const EditWorkspaceModal = ({ onCancel }: IEditWorkspaceModalProps) => {
             />
             <div className="min-h-6">
               {hasError && (
-                <p id={errorId} data-testid="edit-workspace-error" className="text-text-destructive system-xs-regular" role="alert">
+                <p id={errorId} data-testid="edit-workspace-error" className="system-xs-regular text-text-destructive" role="alert">
                   {nameErrorMessage}
                 </p>
               )}
diff --git a/web/app/components/header/account-setting/members-page/invite-button.tsx b/web/app/components/header/account-setting/members-page/invite-button.tsx
index fb5b5cdc5e..c4e73b8feb 100644
--- a/web/app/components/header/account-setting/members-page/invite-button.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-button.tsx
@@ -1,7 +1,7 @@
 import { RiUserAddLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWorkspacePermissions } from '@/service/use-workspace'
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
index 6af07b107e..4d22c97259 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -5,7 +5,7 @@ import { useBoolean } from 'ahooks'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactMultiEmail } from 'react-multi-email'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
@@ -87,7 +87,7 @@ const InviteModal = ({
         backdropProps={{ forceRender: true }}
         className="w-[400px] overflow-visible px-8 py-6"
       >
-        <DialogCloseButton data-testid="invite-modal-close" className="right-8 top-6" />
+        <DialogCloseButton data-testid="invite-modal-close" className="top-6 right-8" />
         <div className="mb-2 pr-8">
           <DialogTitle className="text-xl font-semibold text-text-primary">
             {t('members.inviteTeamMember', { ns: 'common' })}
@@ -97,12 +97,12 @@ const InviteModal = ({
         {!isEmailSetup && (
           <div className="grow basis-0 overflow-y-auto pb-4">
             <div className="relative mb-1 rounded-xl border border-components-panel-border p-2 shadow-xs">
-              <div className="absolute left-0 top-0 h-full w-full rounded-xl opacity-40" style={{ background: 'linear-gradient(92deg, rgba(255, 171, 0, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
+              <div className="absolute top-0 left-0 h-full w-full rounded-xl opacity-40" style={{ background: 'linear-gradient(92deg, rgba(255, 171, 0, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
               <div className="relative flex h-full w-full items-start">
                 <div className="mr-0.5 shrink-0 p-0.5">
                   <div className="i-ri-error-warning-fill h-5 w-5 text-text-warning" />
                 </div>
-                <div className="text-text-primary system-xs-medium">
+                <div className="system-xs-medium text-text-primary">
                   <span>{t('members.emailNotSetup', { ns: 'common' })}</span>
                 </div>
               </div>
@@ -134,7 +134,7 @@ const InviteModal = ({
               placeholder={t('members.emailPlaceholder', { ns: 'common' }) || ''}
             />
             <div className={
-              cn('flex items-center justify-end text-text-tertiary system-xs-regular', (isLimited && usedSize > licenseLimit.workspace_members.limit) ? 'text-text-destructive' : '')
+              cn('flex items-center justify-end system-xs-regular text-text-tertiary', (isLimited && usedSize > licenseLimit.workspace_members.limit) ? 'text-text-destructive' : '')
             }
             >
               <span>{usedSize}</span>
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
index 5a62346d40..d7d48759c0 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/index.tsx
@@ -1,7 +1,7 @@
 import type { InvitationResult } from '@/models/common'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { IS_CE_EDITION } from '@/config'
@@ -35,7 +35,7 @@ const InvitedModal = ({
         backdropProps={{ forceRender: true }}
         className="w-[480px] p-8"
       >
-        <DialogCloseButton className="right-8 top-8" />
+        <DialogCloseButton className="top-8 right-8" />
         <div className="mb-3 flex justify-between">
           <div className="
             flex h-12 w-12 items-center justify-center rounded-xl
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
index 5a82144212..4500509d00 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
@@ -2,9 +2,9 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useAppContext } from '@/context/app-context'
 import { ownershipTransfer, sendOwnerEmail, verifyOwnerEmail } from '@/service/common'
@@ -105,17 +105,17 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
   }
   return (
     <Modal isShow={show} onClose={noop} wrapperClassName="z-1002" className="w-[420px]! p-6!">
-      <div data-testid="transfer-modal-close" className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
+      <div data-testid="transfer-modal-close" className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
         <div className="i-ri-close-line h-5 w-5 text-text-tertiary" />
       </div>
       {step === STEP.start && (
         <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('members.transferModal.title', { ns: 'common' })}</div>
-          <div className="space-y-1 pb-2 pt-1">
-            <div className="text-text-destructive body-md-medium">{t('members.transferModal.warning', { ns: 'common', workspace: currentWorkspace.name.replace(/'/g, '’') })}</div>
-            <div className="text-text-secondary body-md-regular">{t('members.transferModal.warningTip', { ns: 'common' })}</div>
-            <div className="text-text-secondary body-md-regular">
-              <Trans i18nKey="members.transferModal.sendTip" ns="common" components={{ email: <span className="text-text-primary body-md-medium"></span> }} values={{ email: userProfile.email }} />
+          <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('members.transferModal.title', { ns: 'common' })}</div>
+          <div className="space-y-1 pt-1 pb-2">
+            <div className="body-md-medium text-text-destructive">{t('members.transferModal.warning', { ns: 'common', workspace: currentWorkspace.name.replace(/'/g, '’') })}</div>
+            <div className="body-md-regular text-text-secondary">{t('members.transferModal.warningTip', { ns: 'common' })}</div>
+            <div className="body-md-regular text-text-secondary">
+              <Trans i18nKey="members.transferModal.sendTip" ns="common" components={{ email: <span className="body-md-medium text-text-primary"></span> }} values={{ email: userProfile.email }} />
             </div>
           </div>
           <div className="pt-3"></div>
@@ -131,15 +131,15 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
       )}
       {step === STEP.verify && (
         <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('members.transferModal.verifyEmail', { ns: 'common' })}</div>
-          <div className="pb-2 pt-1">
-            <div className="text-text-secondary body-md-regular">
-              <Trans i18nKey="members.transferModal.verifyContent" ns="common" components={{ email: <span className="text-text-primary body-md-medium"></span> }} values={{ email: userProfile.email }} />
+          <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('members.transferModal.verifyEmail', { ns: 'common' })}</div>
+          <div className="pt-1 pb-2">
+            <div className="body-md-regular text-text-secondary">
+              <Trans i18nKey="members.transferModal.verifyContent" ns="common" components={{ email: <span className="body-md-medium text-text-primary"></span> }} values={{ email: userProfile.email }} />
             </div>
-            <div className="text-text-secondary body-md-regular">{t('members.transferModal.verifyContent2', { ns: 'common' })}</div>
+            <div className="body-md-regular text-text-secondary">{t('members.transferModal.verifyContent2', { ns: 'common' })}</div>
           </div>
           <div className="pt-3">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('members.transferModal.codeLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">{t('members.transferModal.codeLabel', { ns: 'common' })}</div>
             <Input data-testid="transfer-modal-code-input" className="w-full!" placeholder={t('members.transferModal.codePlaceholder', { ns: 'common' })} value={code} onChange={e => setCode(e.target.value)} maxLength={6} />
           </div>
           <div className="mt-3 space-y-2">
@@ -150,11 +150,11 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
-          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
+          <div className="mt-3 flex items-center gap-1 system-xs-regular text-text-tertiary">
             <span>{t('members.transferModal.resendTip', { ns: 'common' })}</span>
             {time > 0 && (<span>{t('members.transferModal.resendCount', { ns: 'common', count: time })}</span>)}
             {!time && (
-              <span data-testid="transfer-modal-resend" onClick={sendCodeToOriginEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">
+              <span data-testid="transfer-modal-resend" onClick={sendCodeToOriginEmail} className="cursor-pointer system-xs-medium text-text-accent-secondary">
                 {t('members.transferModal.resend', { ns: 'common' })}
               </span>
             )}
@@ -163,17 +163,17 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
       )}
       {step === STEP.transfer && (
         <>
-          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('members.transferModal.title', { ns: 'common' })}</div>
-          <div className="space-y-1 pb-2 pt-1">
-            <div className="text-text-destructive body-md-medium">{t('members.transferModal.warning', { ns: 'common', workspace: currentWorkspace.name.replace(/'/g, '’') })}</div>
-            <div className="text-text-secondary body-md-regular">{t('members.transferModal.warningTip', { ns: 'common' })}</div>
+          <div className="pb-3 title-2xl-semi-bold text-text-primary">{t('members.transferModal.title', { ns: 'common' })}</div>
+          <div className="space-y-1 pt-1 pb-2">
+            <div className="body-md-medium text-text-destructive">{t('members.transferModal.warning', { ns: 'common', workspace: currentWorkspace.name.replace(/'/g, '’') })}</div>
+            <div className="body-md-regular text-text-secondary">{t('members.transferModal.warningTip', { ns: 'common' })}</div>
           </div>
           <div className="pt-3">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('members.transferModal.transferLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">{t('members.transferModal.transferLabel', { ns: 'common' })}</div>
             <MemberSelector exclude={[userProfile.id]} value={newOwner} onSelect={setNewOwner} />
           </div>
           <div className="mt-4 space-y-2">
-            <Button data-testid="transfer-modal-submit" disabled={!newOwner || isTransfer} className="w-full!" variant="warning" onClick={handleTransfer}>
+            <Button data-testid="transfer-modal-submit" disabled={!newOwner || isTransfer} className="w-full!" variant="primary" destructive onClick={handleTransfer}>
               {t('members.transferModal.transfer', { ns: 'common' })}
             </Button>
             <Button data-testid="transfer-modal-cancel" className="w-full!" onClick={onClose}>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
index a6e2fb5dc3..08ca3acee9 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
@@ -13,15 +13,15 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  Button,
-} from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  Button,
+} from '@/app/components/base/ui/button'
 import { ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { cn } from '@/utils/classnames'
 import ModelIcon from '../model-icon'
@@ -136,7 +136,7 @@ const AddCustomModel = ({
                     modelName={model.model}
                   />
                   <div
-                    className="grow truncate text-text-primary system-md-regular"
+                    className="grow truncate system-md-regular text-text-primary"
                     title={model.model}
                   >
                     {model.model}
@@ -148,7 +148,7 @@ const AddCustomModel = ({
           {
             !notAllowCustomCredential && (
               <div
-                className="flex cursor-pointer items-center border-t border-t-divider-subtle p-3 text-text-accent-light-mode-only system-xs-medium"
+                className="flex cursor-pointer items-center border-t border-t-divider-subtle p-3 system-xs-medium text-text-accent-light-mode-only"
                 onClick={() => {
                   handleOpenModalForAddNewCustomModel()
                   setOpen(false)
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
index 8008f09e6d..09e64c654f 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
@@ -19,13 +19,13 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { useAuth } from '../hooks'
 import AuthorizedItem from './authorized-item'
@@ -172,7 +172,7 @@ const Authorized = ({
           >
             {
               popupTitle && (
-                <div className="px-3 pb-0.5 pt-[10px] text-text-tertiary system-xs-medium">
+                <div className="px-3 pt-[10px] pb-0.5 system-xs-medium text-text-tertiary">
                   {popupTitle}
                 </div>
               )
@@ -218,7 +218,7 @@ const Authorized = ({
                         }
                       : undefined,
                   )}
-                  className="flex h-[40px] cursor-pointer items-center px-3 text-text-accent-light-mode-only system-xs-medium"
+                  className="flex h-[40px] cursor-pointer items-center px-3 system-xs-medium text-text-accent-light-mode-only"
                 >
                   <RiAddLine className="mr-1 h-4 w-4" />
                   {t('modelProvider.auth.addModelCredential', { ns: 'common' })}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
index d6a07b4598..e4e7fae3f5 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
@@ -4,7 +4,7 @@ import {
 } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 
@@ -25,12 +25,12 @@ const ConfigModel = ({
   if (loadBalancingInvalid) {
     return (
       <div
-        className="system-2xs-medium-uppercase relative flex h-[18px] cursor-pointer items-center rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1.5 text-text-warning"
+        className="relative flex h-[18px] cursor-pointer items-center rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1.5 system-2xs-medium-uppercase text-text-warning"
         onClick={onClick}
       >
         <RiScales3Line className="mr-0.5 h-3 w-3" />
         {t('modelProvider.auth.authorizationError', { ns: 'common' })}
-        <Indicator color="orange" className="absolute -right-px -top-px h-1.5 w-1.5" />
+        <Indicator color="orange" className="absolute -top-px -right-px h-1.5 w-1.5" />
       </div>
     )
   }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
index de9ad0a396..e64c5aedc0 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
@@ -10,10 +10,10 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import Tooltip from '@/app/components/base/tooltip'
 import {
   Button,
-} from '@/app/components/base/button'
-import Tooltip from '@/app/components/base/tooltip'
+} from '@/app/components/base/ui/button'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Authorized from './authorized'
 import { useCredentialStatus } from './hooks'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
index e996974fd2..cb238f87be 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
@@ -9,7 +9,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import {
   Button,
-} from '@/app/components/base/button'
+} from '@/app/components/base/ui/button'
 import {
   ConfigurationMethodEnum,
   ModelModalModeEnum,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
index b32deacab4..e6ce8f80bb 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
@@ -11,8 +11,8 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { ConfigurationMethodEnum, ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
index b39d051992..6a251ee302 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -18,7 +18,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
@@ -31,6 +30,7 @@ import {
   AlertDialogContent,
   AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Dialog,
   DialogCloseButton,
@@ -203,7 +203,7 @@ const ModelModal: FC<ModelModalProps> = ({
     }
 
     return (
-      <div className="text-text-primary title-2xl-semi-bold">
+      <div className="title-2xl-semi-bold text-text-primary">
         {label}
       </div>
     )
@@ -212,7 +212,7 @@ const ModelModal: FC<ModelModalProps> = ({
   const modalDesc = useMemo(() => {
     if (providerFormSchemaPredefined) {
       return (
-        <div className="mt-1 text-text-tertiary system-xs-regular">
+        <div className="mt-1 system-xs-regular text-text-tertiary">
           {t('modelProvider.auth.apiKeyModal.desc', { ns: 'common' })}
         </div>
       )
@@ -229,7 +229,7 @@ const ModelModal: FC<ModelModalProps> = ({
             className="mr-2 h-4 w-4 shrink-0"
             provider={provider}
           />
-          <div className="mr-1 text-text-secondary system-md-regular">{renderI18nObject(provider.label)}</div>
+          <div className="mr-1 system-md-regular text-text-secondary">{renderI18nObject(provider.label)}</div>
         </div>
       )
     }
@@ -241,7 +241,7 @@ const ModelModal: FC<ModelModalProps> = ({
             provider={provider}
             modelName={model.model}
           />
-          <div className="mr-1 text-text-secondary system-md-regular">{model.model}</div>
+          <div className="mr-1 system-md-regular text-text-secondary">{model.model}</div>
           <Badge>{model.model_type}</Badge>
         </div>
       )
@@ -297,7 +297,7 @@ const ModelModal: FC<ModelModalProps> = ({
         backdropProps={{ forceRender: true }}
         className="w-[640px] max-w-[640px] overflow-hidden p-0"
       >
-        <DialogCloseButton className="right-5 top-5 h-8 w-8" />
+        <DialogCloseButton className="top-5 right-5 h-8 w-8" />
         <div className="p-6 pb-3">
           {modalTitle}
           {modalDesc}
@@ -333,7 +333,7 @@ const ModelModal: FC<ModelModalProps> = ({
           }
           {
             showCredentialLabel && (
-              <div className="mb-3 mt-6 flex items-center text-text-tertiary system-xs-medium-uppercase">
+              <div className="mt-6 mb-3 flex items-center system-xs-medium-uppercase text-text-tertiary">
                 {t('modelProvider.auth.modelCredential', { ns: 'common' })}
                 <div className="ml-2 h-px grow bg-linear-to-r from-divider-regular to-background-gradient-mask-transparent" />
               </div>
@@ -373,11 +373,11 @@ const ModelModal: FC<ModelModalProps> = ({
                     href={provider.help?.url[language] || provider.help?.url.en_US}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="mt-2 inline-block align-middle text-text-accent system-xs-regular"
+                    className="mt-2 inline-block align-middle system-xs-regular text-text-accent"
                     onClick={e => !provider.help.url && e.preventDefault()}
                   >
                     {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
-                    <LinkExternal02 className="ml-1 mt-[-2px] inline-block h-3 w-3" />
+                    <LinkExternal02 className="mt-[-2px] ml-1 inline-block h-3 w-3" />
                   </a>
                 )
               : <div />
@@ -386,7 +386,8 @@ const ModelModal: FC<ModelModalProps> = ({
             {
               isEditMode && (
                 <Button
-                  variant="warning"
+                  variant="primary"
+                  destructive
                   onClick={() => openConfirmDelete(credential, model)}
                 >
                   {t('operation.remove', { ns: 'common' })}
@@ -430,7 +431,7 @@ const ModelModal: FC<ModelModalProps> = ({
       <AlertDialog open={!!deleteCredentialId} onOpenChange={handleConfirmOpenChange}>
         <AlertDialogContent backdropProps={{ forceRender: true }}>
           <div className="flex flex-col gap-2 p-6 pb-4">
-            <AlertDialogTitle className="text-text-primary title-2xl-semi-bold">
+            <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
               {t('modelProvider.confirmDelete', { ns: 'common' })}
             </AlertDialogTitle>
           </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
index ab379400b5..7545cf6a22 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { ConfigurationMethodEnum } from '../declarations'
 
 type ConfigurationButtonProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
index f96e7d02a5..c2138c1c6f 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
 import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
 import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
+import { Button } from '@/app/components/base/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -44,7 +44,7 @@ function PresetsParameter({ onSelect }: PresetsParameterProps) {
         )}
       >
         {t('modelProvider.loadPresets', { ns: 'common' })}
-        <span className="i-ri-arrow-down-s-line ml-0.5 h-3.5 w-3.5" />
+        <span className="ml-0.5 i-ri-arrow-down-s-line h-3.5 w-3.5" />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         {TONE_LIST.slice(0, 3).map(tone => (
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
index 36d977f5c3..6aaa71059e 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -8,7 +8,7 @@ import type { ModelProviderQuotaGetPaid } from '@/types/model-provider'
 import { useTheme } from 'next-themes'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
@@ -181,16 +181,16 @@ const Popup: FC<PopupProps> = ({
   }, [modelProviders])
 
   return (
-    <div className="max-h-[480px] overflow-y-auto no-scrollbar">
-      <div className="sticky top-0 z-10 bg-components-panel-bg pb-1 pl-3 pr-2 pt-3">
+    <div className="no-scrollbar max-h-[480px] overflow-y-auto">
+      <div className="sticky top-0 z-10 bg-components-panel-bg pt-3 pr-2 pb-1 pl-3">
         <div className={`
-          flex h-8 items-center rounded-lg border pl-[9px] pr-[10px]
+          flex h-8 items-center rounded-lg border pr-[10px] pl-[9px]
           ${searchText ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-transparent bg-components-input-bg-normal'}
         `}
         >
           <span
             className={`
-              i-ri-search-line mr-[7px] h-[14px] w-[14px] shrink-0
+              mr-[7px] i-ri-search-line h-[14px] w-[14px] shrink-0
               ${searchText ? 'text-text-tertiary' : 'text-text-quaternary'}
             `}
           />
@@ -203,7 +203,7 @@ const Popup: FC<PopupProps> = ({
           {
             searchText && (
               <span
-                className="i-custom-vender-solid-general-x-circle ml-1.5 h-[14px] w-[14px] shrink-0 cursor-pointer text-text-quaternary"
+                className="ml-1.5 i-custom-vender-solid-general-x-circle h-[14px] w-[14px] shrink-0 cursor-pointer text-text-quaternary"
                 onClick={() => setSearchText('')}
               />
             )
@@ -215,7 +215,7 @@ const Popup: FC<PopupProps> = ({
             className="mt-2 flex items-center gap-1 rounded-lg bg-background-section-burn px-2.5 py-2"
           >
             <span className="i-ri-information-2-fill h-4 w-4 shrink-0 text-text-accent" />
-            <p className="text-text-secondary system-xs-medium">
+            <p className="system-xs-medium text-text-secondary">
               {t('modelProvider.selector.onlyCompatibleModelsShown', { ns: 'common' })}
             </p>
           </div>
@@ -242,10 +242,10 @@ const Popup: FC<PopupProps> = ({
               <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
             </div>
             <div className="flex flex-col gap-1">
-              <p className="text-text-secondary system-sm-medium">
+              <p className="system-sm-medium text-text-secondary">
                 {t('modelProvider.selector.noProviderConfigured', { ns: 'common' })}
               </p>
-              <p className="text-text-tertiary system-xs-regular">
+              <p className="system-xs-regular text-text-tertiary">
                 {t('modelProvider.selector.noProviderConfiguredDesc', { ns: 'common' })}
               </p>
             </div>
@@ -263,7 +263,7 @@ const Popup: FC<PopupProps> = ({
           </div>
         )}
         {!filteredModelList.length && installedModelList.length > 0 && (
-          <div className="break-all px-3 py-1.5 text-center text-xs leading-[18px] text-text-tertiary">
+          <div className="px-3 py-1.5 text-center text-xs leading-[18px] break-all text-text-tertiary">
             {`No model found for \u201C${searchText}\u201D`}
           </div>
         )}
@@ -273,7 +273,7 @@ const Popup: FC<PopupProps> = ({
             <div className="mb-1">
               <div className="flex h-[22px] items-center px-3">
                 <div
-                  className="flex flex-1 cursor-pointer items-center text-text-primary system-sm-medium"
+                  className="flex flex-1 cursor-pointer items-center system-sm-medium text-text-primary"
                   onClick={() => setMarketplaceCollapsed(prev => !prev)}
                 >
                   {t('modelProvider.selector.fromMarketplace', { ns: 'common' })}
@@ -288,11 +288,11 @@ const Popup: FC<PopupProps> = ({
                     return (
                       <div
                         key={key}
-                        className="group flex cursor-pointer items-center gap-1 rounded-lg py-0.5 pl-3 pr-0.5 hover:bg-state-base-hover"
+                        className="group flex cursor-pointer items-center gap-1 rounded-lg py-0.5 pr-0.5 pl-3 hover:bg-state-base-hover"
                       >
                         <div className="flex flex-1 items-center gap-2 py-0.5">
                           <Icon className="h-5 w-5 shrink-0 rounded-md" />
-                          <span className="text-text-secondary system-sm-regular">{modelNameMap[key]}</span>
+                          <span className="system-sm-regular text-text-secondary">{modelNameMap[key]}</span>
                         </div>
                         <Button
                           variant="secondary"
@@ -318,7 +318,7 @@ const Popup: FC<PopupProps> = ({
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    <span className="flex-1 text-text-accent system-xs-regular">
+                    <span className="flex-1 system-xs-regular text-text-accent">
                       {t('modelProvider.selector.discoverMoreInMarketplace', { ns: 'common' })}
                     </span>
                     <span className="i-ri-arrow-right-up-line h-3! w-3! text-text-accent" />
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
index e5de8344f9..9dde65fd44 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx
@@ -1,7 +1,7 @@
 import type { Credential, CustomModel, ModelProvider } from '../../declarations'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import CredentialItem from '../../model-auth/authorized/credential-item'
 
 type ApiKeySectionProps = {
@@ -33,10 +33,10 @@ function ApiKeySection({
       <div className="flex flex-col gap-2 p-2">
         <div className="radius-lg bg-linear-to-r from-state-base-hover to-transparent p-4">
           <div className="flex flex-col gap-1">
-            <div className="text-text-secondary system-sm-medium">
+            <div className="system-sm-medium text-text-secondary">
               {t('modelProvider.card.noApiKeysTitle', { ns: 'common' })}
             </div>
-            <div className="text-text-tertiary system-xs-regular">
+            <div className="system-xs-regular text-text-tertiary">
               {t('modelProvider.card.noApiKeysDescription', { ns: 'common' })}
             </div>
           </div>
@@ -56,7 +56,7 @@ function ApiKeySection({
   return (
     <div className="border-t border-t-divider-subtle">
       <div className="px-1">
-        <div className="pb-1 pl-7 pr-2 pt-3 text-text-tertiary system-xs-medium-uppercase">
+        <div className="pt-3 pr-2 pb-1 pl-7 system-xs-medium-uppercase text-text-tertiary">
           {t('modelProvider.auth.apiKeys', { ns: 'common' })}
         </div>
         <div className="max-h-[200px] overflow-y-auto">
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
index da7394a407..fc710ef73f 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx
@@ -2,7 +2,7 @@ import type { ModelProvider, PreferredProviderTypeEnum } from '../../declaration
 import type { CardVariant, CredentialPanelState } from '../use-credential-panel-state'
 import { memo, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Popover,
   PopoverContent,
@@ -62,7 +62,7 @@ function ModelAuthDropdown({
             variant={buttonConfig.variant}
             title={buttonConfig.text}
           >
-            <span className="i-ri-equalizer-2-line mr-1 h-3.5 w-3.5 shrink-0" />
+            <span className="mr-1 i-ri-equalizer-2-line h-3.5 w-3.5 shrink-0" />
             <span className="w-0 grow truncate text-left">
               {buttonConfig.text}
             </span>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index e7215eecf5..cb4ffd0392 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -1,10 +1,10 @@
 import type { Credential, CustomConfigurationModelFixedFields, ModelItem, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { SwitchCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
 import { useGetModelCredential, useUpdateModelLoadBalancingConfig } from '@/service/use-models'
@@ -188,7 +188,7 @@ const ModelLoadBalancingModal = ({ provider, configurateMethod, currentCustomCon
             {Boolean(model) && (
               <div className="flex h-5 items-center">
                 <ModelIcon className="mr-2 shrink-0" provider={provider} modelName={model!.model} />
-                <ModelName className="grow text-text-secondary system-md-regular" modelItem={model!} showModelType showMode showContextSize />
+                <ModelName className="grow system-md-regular text-text-secondary" modelItem={model!} showModelType showMode showContextSize />
               </div>
             )}
           </div>
@@ -200,7 +200,7 @@ const ModelLoadBalancingModal = ({ provider, configurateMethod, currentCustomCon
               <>
                 <div className="py-2">
                   <div className={cn('min-h-16 rounded-xl border bg-components-panel-bg transition-colors', draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600')} onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}>
-                    <div className="flex select-none items-center gap-2 px-[15px] py-3">
+                    <div className="flex items-center gap-2 px-[15px] py-3 select-none">
                       <div className="flex h-8 w-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-components-card-border bg-components-card-bg">
                         {Boolean(model) && (<ModelIcon className="shrink-0" provider={provider} modelName={model!.model} />)}
                       </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
index a751553fb0..052fc5c3d3 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { PreferredProviderTypeEnum } from '../declarations'
 
@@ -51,9 +51,9 @@ const Selector: FC<SelectorProps> = ({
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
       >
-        <PopoverPanel className="absolute right-0 top-7 z-10 w-[144px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg">
+        <PopoverPanel className="absolute top-7 right-0 z-10 w-[144px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg">
           <div className="p-1">
-            <div className="px-3 pb-1 pt-2 text-sm font-medium text-text-secondary">{t('modelProvider.card.priorityUse', { ns: 'common' })}</div>
+            <div className="px-3 pt-2 pb-1 text-sm font-medium text-text-secondary">{t('modelProvider.card.priorityUse', { ns: 'common' })}</div>
             {
               options.map(option => (
                 <PopoverButton as={Fragment} key={option.key}>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
index 8155a451a6..2d9e2a52aa 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
@@ -3,7 +3,7 @@ import type { PluginDetail } from '@/app/components/plugins/types'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { HeaderModals } from '@/app/components/plugins/plugin-detail-panel/detail-header/components'
 import { useDetailHeaderState, usePluginOperations } from '@/app/components/plugins/plugin-detail-panel/detail-header/hooks'
@@ -94,7 +94,7 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
               text={(
                 <>
                   <span>{version}</span>
-                  {isFromMarketplace && <span className="i-ri-arrow-left-right-line ml-1 h-3 w-3" />}
+                  {isFromMarketplace && <span className="ml-1 i-ri-arrow-left-right-line h-3 w-3" />}
                 </>
               )}
               hasRedCornerMark={hasNewVersion}
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index 117bc6c9b3..8b86923391 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -5,7 +5,7 @@ import type {
 } from '../declarations'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Dialog,
   DialogCloseButton,
@@ -168,8 +168,8 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
         onClick={() => setOpen(true)}
       >
         {isLoading
-          ? <span className="i-ri-loader-2-line mr-1 h-3.5 w-3.5 animate-spin" />
-          : <span className="i-ri-equalizer-2-line mr-1 h-3.5 w-3.5" />}
+          ? <span className="mr-1 i-ri-loader-2-line h-3.5 w-3.5 animate-spin" />
+          : <span className="mr-1 i-ri-equalizer-2-line h-3.5 w-3.5" />}
         {t('modelProvider.systemModelSettings', { ns: 'common' })}
       </Button>
       <Dialog open={open} onOpenChange={setOpen}>
@@ -177,9 +177,9 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
           backdropProps={{ forceRender: true }}
           className="w-[480px] max-w-[480px] overflow-hidden p-0"
         >
-          <DialogCloseButton className="right-5 top-5" />
-          <div className="px-6 pb-3 pr-14 pt-6">
-            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+          <DialogCloseButton className="top-5 right-5" />
+          <div className="px-6 pt-6 pr-14 pb-3">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t('modelProvider.systemModelSettings', { ns: 'common' })}
             </DialogTitle>
           </div>
@@ -235,7 +235,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
               </div>
             </div>
           </div>
-          <div className="flex items-center justify-end gap-2 px-6 pb-6 pt-5">
+          <div className="flex items-center justify-end gap-2 px-6 pt-5 pb-6">
             <Button
               className="min-w-[72px]"
               onClick={() => setOpen(false)}
diff --git a/web/app/components/plugins/install-plugin/base/installed.tsx b/web/app/components/plugins/install-plugin/base/installed.tsx
index 890294b9cc..088d587378 100644
--- a/web/app/components/plugins/install-plugin/base/installed.tsx
+++ b/web/app/components/plugins/install-plugin/base/installed.tsx
@@ -4,7 +4,7 @@ import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../ty
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Card from '../../card'
 import { pluginManifestInMarketToPluginProps, pluginManifestToCardPluginProps } from '../utils'
 
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
index 4394c5f92e..9eb4db7a27 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -6,8 +6,8 @@ import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
+import { Button } from '@/app/components/base/ui/button'
 import { useCanInstallPluginFromMarketplace } from '@/app/components/plugins/plugin-page/use-reference-setting'
 import { useMittContextSelector } from '@/context/mitt-context'
 import { useInstallOrUpdate, usePluginTaskList } from '@/service/use-plugins'
@@ -195,7 +195,7 @@ const Install: FC<Props> = ({
             {canInstall && (
               <div className="flex items-center gap-x-2" onClick={handleClickSelectAll}>
                 <Checkbox checked={isSelectAll} indeterminate={isIndeterminate} />
-                <p className="system-sm-medium cursor-pointer text-text-secondary">{isSelectAll ? t('operation.deSelectAll', { ns: 'common' }) : t('operation.selectAll', { ns: 'common' })}</p>
+                <p className="cursor-pointer system-sm-medium text-text-secondary">{isSelectAll ? t('operation.deSelectAll', { ns: 'common' }) : t('operation.selectAll', { ns: 'common' })}</p>
               </div>
             )}
           </div>
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
index b3683d3e1d..a7808736e9 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
@@ -4,7 +4,7 @@ import type { InstallStatus, Plugin } from '../../../types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Card from '@/app/components/plugins/card'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import useGetIcon from '../../base/use-get-icon'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
index fe2f868256..c044445f19 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
@@ -5,7 +5,7 @@ import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import { updateFromGitHub } from '@/service/plugins'
 import { useInstallPackageFromGitHub, usePluginTaskList } from '@/service/use-plugins'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
index 635bb4e091..a8236b4b93 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
@@ -4,8 +4,8 @@ import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../../types'
 import type { Item } from '@/app/components/base/select'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { PortalSelect } from '@/app/components/base/select'
+import { Button } from '@/app/components/base/ui/button'
 import { handleUpload } from '../../hooks'
 
 const i18nPrefix = 'installFromGitHub'
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
index 75e546baff..2a7012d40c 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type SetURLProps = {
   repoUrl: string
@@ -27,9 +27,9 @@ const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel })
         name="repoUrl"
         value={repoUrl}
         onChange={e => onChange(e.target.value)}
-        className="shadows-shadow-xs system-sm-regular flex grow items-center gap-[2px]
-          self-stretch overflow-hidden text-ellipsis rounded-lg border border-components-input-border-active
-          bg-components-input-bg-active p-2 text-components-input-text-filled"
+        className="shadows-shadow-xs flex grow items-center gap-[2px] self-stretch
+          overflow-hidden rounded-lg border border-components-input-border-active bg-components-input-bg-active p-2
+          system-sm-regular text-ellipsis text-components-input-text-filled"
         placeholder="Please enter GitHub repo URL"
       />
       <div className="mt-4 flex items-center justify-end gap-2 self-stretch">
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
index d37151a253..9ef52d7a5d 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@@ -5,7 +5,7 @@ import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import { useAppContext } from '@/context/app-context'
 import { uninstallPlugin } from '@/service/plugins'
@@ -117,7 +117,7 @@ const Installed: FC<Props> = ({
   return (
     <>
       <div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
-        <div className="text-text-secondary system-md-regular">
+        <div className="system-md-regular text-text-secondary">
           <p>{t(`${i18nPrefix}.readyToInstall`, { ns: 'plugin' })}</p>
           <p>
             <Trans
@@ -127,7 +127,7 @@ const Installed: FC<Props> = ({
             />
           </p>
           {!isDifyVersionCompatible && (
-            <p className="flex items-center gap-1 text-text-warning system-md-regular">
+            <p className="flex items-center gap-1 system-md-regular text-text-warning">
               {t('difyVersionNotCompatible', { ns: 'plugin', minimalDifyVersion: payload.meta.minimum_dify_version })}
             </p>
           )}
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
index 21dbcea887..f9f9969817 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
@@ -4,7 +4,7 @@ import type { Dependency, PluginDeclaration } from '../../../types'
 import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { uploadFile } from '@/service/plugins'
 import Card from '../../../card'
 
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
index 8a4e0bd82a..ac8b458406 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
@@ -5,7 +5,7 @@ import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import { useAppContext } from '@/context/app-context'
 import { useInstallPackageFromMarketPlace, usePluginDeclarationFromMarketPlace, usePluginTaskList, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
@@ -133,10 +133,10 @@ const Installed: FC<Props> = ({
   return (
     <>
       <div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
-        <div className="text-text-secondary system-md-regular">
+        <div className="system-md-regular text-text-secondary">
           <p>{t(`${i18nPrefix}.readyToInstall`, { ns: 'plugin' })}</p>
           {!isDifyVersionCompatible && (
-            <p className="text-text-warning system-md-regular">
+            <p className="system-md-regular text-text-warning">
               {t('difyVersionNotCompatible', { ns: 'plugin', minimalDifyVersion: pluginDeclaration?.manifest.meta.minimum_dify_version })}
             </p>
           )}
diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
index 63f9a419d9..6cab636392 100644
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
@@ -6,7 +6,7 @@ import { useBoolean } from 'ahooks'
 import { useTheme } from 'next-themes'
 import * as React from 'react'
 import { useMemo } from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import { useTags } from '@/app/components/plugins/hooks'
@@ -43,7 +43,7 @@ const CardWrapperComponent = ({
   if (showInstallButton) {
     return (
       <div
-        className="group relative cursor-pointer rounded-xl  hover:bg-components-panel-on-panel-item-bg-hover"
+        className="group relative cursor-pointer rounded-xl hover:bg-components-panel-on-panel-item-bg-hover"
       >
         <Card
           key={plugin.name}
@@ -55,7 +55,7 @@ const CardWrapperComponent = ({
             />
           )}
         />
-        <div className="absolute bottom-0 hidden w-full items-center space-x-2 rounded-b-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent px-4 pb-4 pt-4 group-hover:flex">
+        <div className="absolute bottom-0 hidden w-full items-center space-x-2 rounded-b-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent px-4 pt-4 pb-4 group-hover:flex">
           <Button
             variant="primary"
             className="w-[calc(50%-4px)]"
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
index 0f9ac84bf9..2db1751bdc 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
@@ -1,11 +1,11 @@
 import type { PluginPayload } from '../types'
-import type { ButtonProps } from '@/app/components/base/button'
 import type { FormSchema } from '@/app/components/base/form/types'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import {
   memo,
   useState,
 } from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ApiKeyModal from './api-key-modal'
 
 export type AddApiKeyButtonProps = {
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
index 08a19a1b17..fa094e467d 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
@@ -1,6 +1,6 @@
 import type { PluginPayload } from '../types'
-import type { ButtonProps } from '@/app/components/base/button'
 import type { FormSchema } from '@/app/components/base/form/types'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import {
   RiClipboardLine,
   RiEqualizer2Line,
@@ -15,8 +15,8 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import { FormTypeEnum } from '@/app/components/base/form/types'
+import { Button } from '@/app/components/base/ui/button'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import { cn } from '@/utils/classnames'
@@ -94,12 +94,12 @@ const AddOAuthButton = ({
             <RiInformation2Fill className="h-5 w-5 text-text-accent" />
           </div>
           <div className="w-0 grow">
-            <div className="system-sm-regular mb-1.5">
+            <div className="mb-1.5 system-sm-regular">
               {t('auth.clientInfo', { ns: 'plugin' })}
             </div>
             {
               redirect_uri && (
-                <div className="system-sm-medium flex w-full py-0.5">
+                <div className="flex w-full py-0.5 system-sm-medium">
                   <div className="w-0 grow wrap-break-word break-all">{redirect_uri}</div>
                   <ActionButton
                     className="shrink-0"
@@ -114,7 +114,7 @@ const AddOAuthButton = ({
             }
           </div>
         </div>
-        <div className="system-sm-medium flex h-6 items-center text-text-secondary">
+        <div className="flex h-6 items-center system-sm-medium text-text-secondary">
           {renderI18nObject(item.label as Record<string, string>)}
           {
             item.required && (
@@ -209,7 +209,7 @@ const AddOAuthButton = ({
                 is_oauth_custom_client_enabled && (
                   <Badge
                     className={cn(
-                      'ml-1 mr-0.5',
+                      'mr-0.5 ml-1',
                       buttonVariant === 'primary' && 'border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface',
                     )}
                   >
diff --git a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
index 8ae5eb965b..625fcaa980 100644
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
@@ -14,9 +14,9 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import Modal from '@/app/components/base/modal/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ReadmeEntrance } from '../../readme-panel/entrance'
 import { ReadmeShowType } from '../../readme-panel/store'
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
index 57e7b8b43e..0e111d6237 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
@@ -3,7 +3,7 @@ import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
index 4ed2bcd6d7..d7c52322e0 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import {
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index 3888be2d8a..cb2e8aaca1 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -12,13 +12,13 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
@@ -239,7 +239,7 @@ const Authorized = ({
                 !!oAuthCredentials.length && (
                   <div className="p-1">
                     <div className={cn(
-                      'px-3 pb-0.5 pt-1 text-text-tertiary system-xs-medium',
+                      'px-3 pt-1 pb-0.5 system-xs-medium text-text-tertiary',
                       showItemSelectedIcon && 'pl-7',
                     )}
                     >
@@ -269,7 +269,7 @@ const Authorized = ({
                 !!apiKeyCredentials.length && (
                   <div className="p-1">
                     <div className={cn(
-                      'px-3 pb-0.5 pt-1 text-text-tertiary system-xs-medium',
+                      'px-3 pt-1 pb-0.5 system-xs-medium text-text-tertiary',
                       showItemSelectedIcon && 'pl-7',
                     )}
                     >
diff --git a/web/app/components/plugins/plugin-auth/authorized/item.tsx b/web/app/components/plugins/plugin-auth/authorized/item.tsx
index 652d606de8..3efad1ae48 100644
--- a/web/app/components/plugins/plugin-auth/authorized/item.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/item.tsx
@@ -13,9 +13,9 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import { CredentialTypeEnum } from '../types'
@@ -127,11 +127,11 @@ const Item = ({
               )
             }
             <Indicator
-              className="ml-2 mr-1.5 shrink-0"
+              className="mr-1.5 ml-2 shrink-0"
               color={credential.not_allowed_to_use ? 'gray' : 'green'}
             />
             <div
-              className="system-md-regular truncate text-text-secondary"
+              className="truncate system-md-regular text-text-secondary"
               title={credential.name}
             >
               {credential.name}
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
index f2ed8bf57e..fb7b81195e 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import Authorize from './authorize'
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
index e67027aafa..e3df399a1c 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-datasource-node.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import { RiAddLine } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type PluginAuthInDataSourceNodeProps = {
   children?: ReactNode
diff --git a/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx b/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
index f5b11d6ecb..cafdb7b4b9 100644
--- a/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx
@@ -1,5 +1,5 @@
 // import { useAppContext } from '@/context/app-context'
-// import Button from '@/app/components/base/button'
+// import { Button } from '@/app/components/base/ui/button'
 // import Indicator from '@/app/components/header/indicator'
 // import ToolItem from '@/app/components/tools/provider/tool-item'
 // import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
@@ -49,9 +49,9 @@ const ActionList = ({
     return null
 
   return (
-    <div className="px-4 pb-4 pt-2">
+    <div className="px-4 pt-2 pb-4">
       <div className="mb-1 py-1">
-        <div className="system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary">
+        <div className="mb-1 flex h-6 items-center justify-between system-sm-semibold-uppercase text-text-secondary">
           {t('detailPanel.actionNum', { ns: 'plugin', num: data.length, action: data.length > 1 ? 'actions' : 'action' })}
           {/* {provider.is_team_authorization && provider.allow_delete && (
             <Button
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx
index 27ef4e7eb3..84a61cd643 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/__tests__/index.spec.tsx
@@ -45,8 +45,8 @@ vi.mock('@/app/components/base/action-button', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
     <button onClick={onClick}>{children}</button>
   ),
 }))
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
index e3e80ef566..63716a4dc2 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx
@@ -5,7 +5,7 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { AuthCategory, PluginAuth } from '@/app/components/plugins/plugin-auth'
 import OperationDropdown from '@/app/components/plugins/plugin-detail-panel/operation-dropdown'
@@ -176,7 +176,7 @@ const DetailHeader = ({
                     text={(
                       <>
                         <div>{isFromGitHub ? (meta?.version ?? version ?? '') : version}</div>
-                        {isFromMarketplace && !isReadmeView && <span aria-hidden className="i-ri-arrow-left-right-line ml-1 h-3 w-3 text-text-tertiary" />}
+                        {isFromMarketplace && !isReadmeView && <span aria-hidden className="ml-1 i-ri-arrow-left-right-line h-3 w-3 text-text-tertiary" />}
                       </>
                     )}
                     hasRedCornerMark={hasNewVersion}
@@ -269,7 +269,7 @@ const DetailHeader = ({
       )}
 
       {/* Description */}
-      {!isReadmeView && <Description className="mb-2 mt-3 h-auto" text={description[locale]} descriptionLineRows={2} />}
+      {!isReadmeView && <Description className="mt-3 mb-2 h-auto" text={description[locale]} descriptionLineRows={2} />}
 
       {/* Plugin Auth for Tools */}
       {category === PluginCategoryEnum.tool && !isReadmeView && (
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index 28d32f32cb..467ff43f57 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -6,8 +6,8 @@ import { RiArrowRightUpLine, RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
@@ -81,17 +81,17 @@ const EndpointModal: FC<Props> = ({
       footer={null}
       mask
       positionCenter={false}
-      panelClassName={cn('mb-2 mr-2 mt-[64px] w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
     >
       <>
         <div className="p-4 pb-2">
           <div className="flex items-center justify-between">
-            <div className="text-text-primary system-xl-semibold">{t('detailPanel.endpointModalTitle', { ns: 'plugin' })}</div>
+            <div className="system-xl-semibold text-text-primary">{t('detailPanel.endpointModalTitle', { ns: 'plugin' })}</div>
             <ActionButton onClick={onCancel}>
               <RiCloseLine className="h-4 w-4" />
             </ActionButton>
           </div>
-          <div className="mt-0.5 text-text-tertiary system-xs-regular">{t('detailPanel.endpointModalDesc', { ns: 'plugin' })}</div>
+          <div className="mt-0.5 system-xs-regular text-text-tertiary">{t('detailPanel.endpointModalDesc', { ns: 'plugin' })}</div>
           <ReadmeEntrance pluginDetail={pluginDetail} className="px-0 pt-3" />
         </div>
         <div className="grow overflow-y-auto">
@@ -112,7 +112,7 @@ const EndpointModal: FC<Props> = ({
                       href={item.url}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="inline-flex items-center text-text-accent-secondary body-xs-regular"
+                      className="inline-flex items-center body-xs-regular text-text-accent-secondary"
                     >
                       {t('howToGet', { ns: 'tools' })}
                       <RiArrowRightUpLine className="ml-1 h-3 w-3" />
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
index da9ca3e7da..db4ce41d40 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
@@ -6,9 +6,9 @@ import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ActionButton, ActionButtonState } from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import { Button } from '@/app/components/base/button'
 import CustomSelect from '@/app/components/base/select/custom'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import { useInitiateTriggerOAuth, useTriggerOAuthConfig, useTriggerProviderInfo } from '@/service/use-triggers'
@@ -73,7 +73,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
         tag: !showCustomBadge
           ? null
           : (
-              <Badge className="ml-1 mr-0.5">
+              <Badge className="mr-0.5 ml-1">
                 {t('auth.custom', { ns: 'plugin' })}
               </Badge>
             ),
@@ -175,7 +175,7 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
                     {buttonTextMap[methodType]}
                     {methodType === SupportedCreationMethods.OAUTH && oauthConfig?.custom_enabled && oauthConfig?.custom_configured && (
                       <Badge
-                        className="ml-1 mr-0.5 border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface"
+                        className="mr-0.5 ml-1 border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface"
                       >
                         {t('auth.custom', { ns: 'plugin' })}
                       </Badge>
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
index d4bc92169c..c4ae63ab66 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
@@ -5,9 +5,9 @@ import {
   RiInformation2Fill,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { BaseForm } from '@/app/components/base/form/components/base'
 import Modal from '@/app/components/base/modal/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { usePluginStore } from '../../store'
@@ -76,7 +76,7 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
         </div>
       )}
     >
-      <div className="system-sm-medium mb-2 text-text-secondary">
+      <div className="mb-2 system-sm-medium text-text-secondary">
         {t('subscription.addType.options.oauth.clientTitle', { ns: 'pluginTrigger' })}
       </div>
 
@@ -100,10 +100,10 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
             <RiInformation2Fill className="h-5 w-5 shrink-0 text-text-accent" />
           </div>
           <div className="flex-1 text-text-secondary">
-            <div className="system-sm-regular whitespace-pre-wrap leading-4">
+            <div className="system-sm-regular leading-4 whitespace-pre-wrap">
               {t('modal.oauthRedirectInfo', { ns: 'pluginTrigger' })}
             </div>
-            <div className="system-sm-medium my-1.5 break-all leading-4">
+            <div className="my-1.5 system-sm-medium leading-4 break-all">
               {oauthConfig?.redirect_uri}
             </div>
             <Button
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
index f4d39c9ec1..997d2ac131 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-credentials-form.tsx
@@ -8,8 +8,8 @@ import {
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
index b35770f23d..440a27bc21 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
@@ -9,11 +9,11 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { ToolTipContent } from '@/app/components/base/tooltip/content'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
@@ -95,8 +95,8 @@ const ToolItem = ({
         </div>
       )}
       <div className={cn('grow truncate pl-0.5', isTransparent && 'opacity-50', isShowCanNotChooseMCPTip && 'opacity-30')}>
-        <div className="text-text-tertiary system-2xs-medium-uppercase">{providerNameText}</div>
-        <div className="text-text-secondary system-xs-medium">{toolLabel}</div>
+        <div className="system-2xs-medium-uppercase text-text-tertiary">{providerNameText}</div>
+        <div className="system-xs-medium text-text-secondary">{toolLabel}</div>
       </div>
       <div className="hidden items-center gap-1 group-hover:flex">
         {!noAuth && !isError && !uninstalled && !versionMismatch && !isShowCanNotChooseMCPTip && (
diff --git a/web/app/components/plugins/plugin-mutation-model/index.tsx b/web/app/components/plugins/plugin-mutation-model/index.tsx
index 2ac5368346..4e8478f8ad 100644
--- a/web/app/components/plugins/plugin-mutation-model/index.tsx
+++ b/web/app/components/plugins/plugin-mutation-model/index.tsx
@@ -3,8 +3,8 @@ import type { FC, ReactNode } from 'react'
 import type { Plugin } from '../types'
 import * as React from 'react'
 import { memo } from 'react'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import Card from '@/app/components/plugins/card'
 
 type Props = {
@@ -40,7 +40,7 @@ const PluginMutationModal: FC<Props> = ({
       closable
       title={modelTitle}
     >
-      <div className="system-md-regular mb-2 mt-3 text-text-secondary">
+      <div className="mt-3 mb-2 system-md-regular text-text-secondary">
         {description}
       </div>
       <div className="flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2">
diff --git a/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
index ceec84a286..2af44ecf97 100644
--- a/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/debug-info.spec.tsx
@@ -15,8 +15,8 @@ vi.mock('@/service/use-plugins', () => ({
   useDebugKey: () => mockDebugKey,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children }: { children: React.ReactNode }) => <button data-testid="debug-button">{children}</button>,
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children }: { children: React.ReactNode }) => <button data-testid="debug-button">{children}</button>,
 }))
 
 vi.mock('@/app/components/base/tooltip', () => ({
diff --git a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
index d3b72ebe5b..28aec206f1 100644
--- a/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
+++ b/web/app/components/plugins/plugin-page/__tests__/install-plugin-dropdown.spec.tsx
@@ -35,8 +35,8 @@ vi.mock('@/app/components/base/icons/src/vender/solid/mediaAndDevices', () => ({
   MagicBox: () => <span data-testid="magic-box-icon">magic</span>,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children }: { children: React.ReactNode }) => <span data-testid="button-content">{children}</span>,
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children }: { children: React.ReactNode }) => <span data-testid="button-content">{children}</span>,
 }))
 
 vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
diff --git a/web/app/components/plugins/plugin-page/debug-info.tsx b/web/app/components/plugins/plugin-page/debug-info.tsx
index f3eed424f4..4b3590f15c 100644
--- a/web/app/components/plugins/plugin-page/debug-info.tsx
+++ b/web/app/components/plugins/plugin-page/debug-info.tsx
@@ -6,8 +6,8 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { useDebugKey } from '@/service/use-plugins'
 import KeyValueItem from '../base/key-value-item'
@@ -32,7 +32,7 @@ const DebugInfo: FC = () => {
       popupContent={(
         <>
           <div className="flex items-center gap-1 self-stretch">
-            <span className="system-sm-semibold flex shrink-0 grow basis-0 flex-col items-start justify-center text-text-secondary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</span>
+            <span className="flex shrink-0 grow basis-0 flex-col items-start justify-center system-sm-semibold text-text-secondary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</span>
             <a href={docLink('/develop-plugin/features-and-specs/plugin-types/remote-debug-a-plugin')} target="_blank" className="flex cursor-pointer items-center gap-0.5 text-text-accent-light-mode-only">
               <span className="system-xs-medium">{t(`${i18nPrefix}.viewDocs`, { ns: 'plugin' })}</span>
               <RiArrowRightUpLine className="h-3 w-3" />
diff --git a/web/app/components/plugins/plugin-page/empty/index.tsx b/web/app/components/plugins/plugin-page/empty/index.tsx
index 4141f00a46..5141519e35 100644
--- a/web/app/components/plugins/plugin-page/empty/index.tsx
+++ b/web/app/components/plugins/plugin-page/empty/index.tsx
@@ -3,11 +3,11 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
 import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
+import { Button } from '@/app/components/base/ui/button'
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
@@ -79,10 +79,10 @@ const Empty = () => {
           border border-dashed border-divider-deep bg-components-card-bg shadow-xl shadow-shadow-shadow-5"
           >
             <Group className="h-5 w-5 text-text-tertiary" />
-            <Line className="absolute -right-px top-1/2 -translate-y-1/2" />
-            <Line className="absolute -left-px top-1/2 -translate-y-1/2" />
-            <Line className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90" />
-            <Line className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90" />
+            <Line className="absolute top-1/2 -right-px -translate-y-1/2" />
+            <Line className="absolute top-1/2 -left-px -translate-y-1/2" />
+            <Line className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
+            <Line className="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90" />
           </div>
           <div className="system-md-regular text-text-tertiary">
             {text}
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 0bc953f4a3..2de6b9228a 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -11,9 +11,9 @@ import { useBoolean } from 'ahooks'
 import { noop } from 'es-toolkit/function'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import TabSlider from '@/app/components/base/tab-slider'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import ReferenceSettingModal from '@/app/components/plugins/reference-setting-modal'
 import { MARKETPLACE_API_PREFIX, SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -155,7 +155,7 @@ const PluginPage = ({
     >
       <div
         className={cn(
-          'sticky top-0 z-10 flex min-h-[60px] items-center gap-1 self-stretch bg-components-panel-bg px-12 pb-2 pt-4',
+          'sticky top-0 z-10 flex min-h-[60px] items-center gap-1 self-stretch bg-components-panel-bg px-12 pt-4 pb-2',
           isExploringMarketplace && 'bg-background-body',
         )}
       >
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index 57a5cb25d9..6ba782783c 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -4,7 +4,6 @@ import { RiAddLine, RiArrowDownSLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
 import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
@@ -13,6 +12,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
@@ -96,7 +96,7 @@ const InstallPluginDropdown = ({
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className="z-1002">
           <div className="shadows-shadow-lg flex w-[200px] flex-col items-start rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1 pb-2">
-            <span className="system-xs-medium-uppercase flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1 text-text-tertiary">
+            <span className="flex items-start self-stretch pt-1 pr-3 pb-0.5 pl-2 system-xs-medium-uppercase text-text-tertiary">
               {t('installFrom', { ns: 'plugin' })}
             </span>
             <input
@@ -126,7 +126,7 @@ const InstallPluginDropdown = ({
                   }}
                 >
                   <Icon className="h-4 w-4 text-text-tertiary" />
-                  <span className="system-md-regular px-1 text-text-secondary">{text}</span>
+                  <span className="px-1 system-md-regular text-text-secondary">{text}</span>
                 </div>
               ))}
             </div>
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
index a4f59be20c..81f559c9aa 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/error-plugin-item.tsx
@@ -3,7 +3,7 @@ import type { Plugin, PluginStatus } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n-config'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import { PluginSource } from '@/app/components/plugins/types'
 import { fetchPluginInfoFromMarketPlace } from '@/service/plugins'
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
index 728d3aceab..fa21a3222c 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import type { PluginStatus } from '@/app/components/plugins/types'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useGetLanguage } from '@/context/i18n'
 import ErrorPluginItem from './error-plugin-item'
 import PluginSection from './plugin-section'
@@ -75,7 +75,7 @@ const PluginTaskList: FC<PluginTaskListProps> = ({
       {/* Error Plugins Section */}
       {errorPlugins.length > 0 && (
         <>
-          <div className="sticky top-0 flex h-7 items-center justify-between px-2 pt-1 text-text-secondary system-sm-semibold-uppercase">
+          <div className="sticky top-0 flex h-7 items-center justify-between px-2 pt-1 system-sm-semibold-uppercase text-text-secondary">
             {t('task.installedError', { ns: 'plugin', errorLength: errorPlugins.length })}
             <Button
               className="shrink-0"
diff --git a/web/app/components/plugins/plugin-page/plugins-panel.tsx b/web/app/components/plugins/plugin-page/plugins-panel.tsx
index efa469f59d..142c9329cc 100644
--- a/web/app/components/plugins/plugin-page/plugins-panel.tsx
+++ b/web/app/components/plugins/plugin-page/plugins-panel.tsx
@@ -4,8 +4,8 @@ import type { FilterState } from './filter-management'
 import { useDebounceFn } from 'ahooks'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import { useGetLanguage } from '@/context/i18n'
 import { renderI18nObject } from '@/i18n-config'
@@ -77,7 +77,7 @@ const PluginsPanel = () => {
 
   return (
     <>
-      <div className="flex flex-col items-start justify-center gap-3 self-stretch px-12 pb-3 pt-1">
+      <div className="flex flex-col items-start justify-center gap-3 self-stretch px-12 pt-1 pb-3">
         <div className="h-px self-stretch bg-divider-subtle"></div>
         <FilterManagement
           onFilterChange={handleFilterChange}
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index 2748b34928..f87a742e1d 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -7,7 +7,7 @@ import { useTheme } from 'next-themes'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import { getPluginLinkInMarketplace } from '@/app/components/plugins/marketplace/utils'
 import { useLocale } from '@/context/i18n'
@@ -54,7 +54,7 @@ const ProviderCardComponent: FC<Props> = ({
           <div className="mb-1 flex h-4 items-center justify-between">
             <div className="flex items-center">
               <div className="system-xs-regular text-text-tertiary">{org}</div>
-              <div className="system-xs-regular mx-2 text-text-quaternary">·</div>
+              <div className="mx-2 system-xs-regular text-text-quaternary">·</div>
               <DownloadCount downloadCount={payload.install_count || 0} />
             </div>
           </div>
@@ -67,7 +67,7 @@ const ProviderCardComponent: FC<Props> = ({
         ))}
       </div>
       <div
-        className="absolute bottom-0 left-0 right-0 hidden items-center gap-2 rounded-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent p-4 pt-4 group-hover:flex"
+        className="absolute right-0 bottom-0 left-0 hidden items-center gap-2 rounded-xl bg-linear-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent p-4 pt-4 group-hover:flex"
       >
         <Button
           className="grow"
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
index 4330f35bb4..299eecce54 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/plugins-picker.spec.tsx
@@ -5,8 +5,8 @@ import { AUTO_UPDATE_MODE } from '../types'
 
 const mockToolPicker = vi.fn()
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({
     children,
   }: {
     children: React.ReactNode
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
index aec57a2739..e1e72fbde2 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/strategy-picker.spec.tsx
@@ -5,8 +5,8 @@ import { AUTO_UPDATE_STRATEGY } from '../types'
 
 let portalOpen = false
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({
     children,
   }: {
     children: React.ReactNode
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
index e05b5d17ac..f02e0c4d1d 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx
@@ -4,7 +4,7 @@ import { RiAddLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import NoPluginSelected from './no-plugin-selected'
 import PluginsSelected from './plugins-selected'
 import ToolPicker from './tool-picker'
@@ -39,7 +39,7 @@ const PluginsPicker: FC<Props> = ({
         ? (
             <div className="flex justify-between text-text-tertiary">
               <div className="system-xs-medium">{t(`${i18nPrefix}.${isExcludeMode ? 'excludeUpdate' : 'partialUPdate'}`, { ns: 'plugin', num: value.length })}</div>
-              <div className="system-xs-medium cursor-pointer" onClick={handleClear}>{t(`${i18nPrefix}.operation.clearAll`, { ns: 'plugin' })}</div>
+              <div className="cursor-pointer system-xs-medium" onClick={handleClear}>{t(`${i18nPrefix}.operation.clearAll`, { ns: 'plugin' })}</div>
             </div>
           )
         : (
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
index 7d58bfe004..0f85b95e3c 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx
@@ -4,12 +4,12 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { AUTO_UPDATE_STRATEGY } from './types'
 
 const i18nPrefix = 'autoUpdate.strategy'
@@ -85,7 +85,7 @@ const StrategyPicker = ({
                   }
                 </div>
                 <div className="grow">
-                  <div className="system-sm-semibold mb-0.5 text-text-secondary">{option.label}</div>
+                  <div className="mb-0.5 system-sm-semibold text-text-secondary">{option.label}</div>
                   <div className="system-xs-regular text-text-tertiary">{option.description}</div>
                 </div>
               </div>
diff --git a/web/app/components/plugins/reference-setting-modal/index.tsx b/web/app/components/plugins/reference-setting-modal/index.tsx
index f6955555fa..bbf19d8c0a 100644
--- a/web/app/components/plugins/reference-setting-modal/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/index.tsx
@@ -5,8 +5,8 @@ import type { Permissions, ReferenceSetting } from '@/app/components/plugins/typ
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { PermissionType } from '@/app/components/plugins/types'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -56,8 +56,8 @@ const PluginSettingModal: FC<Props> = ({
       className="w-[620px] max-w-[620px] p-0!"
     >
       <div className="shadows-shadow-xl flex w-full flex-col items-start rounded-2xl border border-components-panel-border bg-components-panel-bg">
-        <div className="flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
-          <span className="title-2xl-semi-bold self-stretch text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</span>
+        <div className="flex items-start gap-2 self-stretch pt-6 pr-14 pb-3 pl-6">
+          <span className="self-stretch title-2xl-semi-bold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</span>
         </div>
         <div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
           {[
diff --git a/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx b/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx
index b66ab20a45..9d9ad77106 100644
--- a/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx
+++ b/web/app/components/plugins/update-plugin/__tests__/from-market-place.spec.tsx
@@ -37,8 +37,8 @@ vi.mock('@/app/components/base/badge/index', () => ({
   default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({
     children,
     onClick,
     disabled,
diff --git a/web/app/components/plugins/update-plugin/downgrade-warning.tsx b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
index 42348c929a..1f17dcd85f 100644
--- a/web/app/components/plugins/update-plugin/downgrade-warning.tsx
+++ b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 const i18nPrefix = 'autoUpdate.pluginDowngradeWarning'
 
@@ -18,8 +18,8 @@ const DowngradeWarningModal = ({
   return (
     <>
       <div className="flex flex-col items-start gap-2 self-stretch">
-        <div className="text-text-primary title-2xl-semi-bold">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</div>
-        <div className="text-text-secondary system-md-regular">
+        <div className="title-2xl-semi-bold text-text-primary">{t(`${i18nPrefix}.title`, { ns: 'plugin' })}</div>
+        <div className="system-md-regular text-text-secondary">
           {t(`${i18nPrefix}.description`, { ns: 'plugin' })}
         </div>
       </div>
diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx
index bbf56f7cfe..3d674cf9d4 100644
--- a/web/app/components/plugins/update-plugin/from-market-place.tsx
+++ b/web/app/components/plugins/update-plugin/from-market-place.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import {
   Dialog,
   DialogCloseButton,
@@ -166,10 +166,10 @@ const UpdatePluginModal: FC<Props> = ({
         )}
         {!doShowDowngradeWarningModal && (
           <>
-            <DialogTitle className="text-text-primary title-2xl-semi-bold">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary">
               {t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`, { ns: 'plugin' })}
             </DialogTitle>
-            <div className="mb-2 mt-3 text-text-secondary system-md-regular">
+            <div className="mt-3 mb-2 system-md-regular text-text-secondary">
               {t(`${i18nPrefix}.description`, { ns: 'plugin' })}
             </div>
             <div className="flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2">
diff --git a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
index dd6264daf5..71bade3235 100644
--- a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
@@ -41,8 +41,8 @@ vi.mock('@/app/components/base/ui/toast', () => ({
   toast: mockToast,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, ...props }: Record<string, unknown>) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, ...props }: Record<string, unknown>) => (
     <button onClick={onClick as () => void} {...props}>{children as string}</button>
   ),
 }))
diff --git a/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
index 0d6687cbed..f9eb858b30 100644
--- a/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/publish-as-knowledge-pipeline-modal.spec.tsx
@@ -22,8 +22,8 @@ vi.mock('@/app/components/base/modal', () => ({
     isShow ? <div data-testid="modal">{children}</div> : null,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, disabled, ...props }: Record<string, unknown>) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, disabled, ...props }: Record<string, unknown>) => (
     <button onClick={onClick as () => void} disabled={disabled as boolean} {...props}>
       {children as string}
     </button>
diff --git a/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
index 245a39cd0f..0fe856b8d9 100644
--- a/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/update-dsl-modal.spec.tsx
@@ -100,8 +100,8 @@ vi.mock('@/app/components/app/create-from-dsl-modal/uploader', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, disabled, className, variant, loading }: {
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, disabled, className, variant, loading }: {
     children: React.ReactNode
     onClick?: () => void
     disabled?: boolean
@@ -324,11 +324,11 @@ describe('UpdateDSLModal', () => {
       expect(screen.getByTestId('modal')).toBeInTheDocument()
     })
 
-    it('should render import button with warning variant', () => {
+    it('should render import button with primary destructive variant', () => {
       render(<UpdateDSLModal {...defaultProps} />)
 
       const importButton = screen.getByText('workflow.common.overwriteAndImport')
-      expect(importButton).toHaveAttribute('data-variant', 'warning')
+      expect(importButton).toHaveAttribute('data-variant', 'primary')
     })
 
     it('should render backup button with secondary variant', () => {
diff --git a/web/app/components/rag-pipeline/components/conversion.tsx b/web/app/components/rag-pipeline/components/conversion.tsx
index 2af9824120..a8f36d713d 100644
--- a/web/app/components/rag-pipeline/components/conversion.tsx
+++ b/web/app/components/rag-pipeline/components/conversion.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useParams } from '@/next/navigation'
 import { datasetDetailQueryKeyPrefix } from '@/service/knowledge/use-dataset'
@@ -61,7 +61,7 @@ const Conversion = () => {
             </span>
           </div>
         </div>
-        <div className="pb-8 pl-[25px] pr-0 pt-6">
+        <div className="pt-6 pr-0 pb-8 pl-[25px]">
           <div className="rounded-l-xl border border-effects-highlight bg-background-default p-1 shadow-md shadow-shadow-shadow-5 backdrop-blur-[5px]">
             <div className="overflow-hidden rounded-l-lg">
               <PipelineScreenShot />
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
index cf918117df..de003e78ba 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/index.tsx
@@ -2,10 +2,10 @@ import type { FormData, InputFieldFormProps } from './types'
 import type { MoreInfo } from '@/app/components/workflow/types'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { useFileSizeLimit } from '@/app/components/base/file-uploader/hooks'
 import { useAppForm } from '@/app/components/base/form'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ChangeType } from '@/app/components/workflow/types'
 import { useFileUploadConfig } from '@/service/use-common'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
index 88d7789ef8..3ac7dbc342 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
@@ -10,9 +10,9 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNodes } from 'reactflow'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks'
 import { useStore } from '@/app/components/workflow/store'
@@ -102,7 +102,7 @@ const InputFieldPanel = () => {
   return (
     <div className="mr-1 flex h-full w-[400px] flex-col rounded-2xl border-y-[0.5px] border-l-[0.5px] border-components-panel-border bg-components-panel-bg-alt shadow-xl shadow-shadow-shadow-5">
       <div className="flex shrink-0 items-center p-4 pb-0">
-        <div className="system-xl-semibold grow text-text-primary">
+        <div className="grow system-xl-semibold text-text-primary">
           {t('inputFieldPanel.title', { ns: 'datasetPipeline' })}
         </div>
         <Button
@@ -127,7 +127,7 @@ const InputFieldPanel = () => {
           <RiCloseLine className="size-4 text-text-tertiary" />
         </button>
       </div>
-      <div className="system-sm-regular shrink-0 px-4 pb-2 pt-1 text-text-tertiary">
+      <div className="shrink-0 px-4 pt-1 pb-2 system-sm-regular text-text-tertiary">
         {t('inputFieldPanel.description', { ns: 'datasetPipeline' })}
       </div>
       <div className="flex grow flex-col overflow-y-auto">
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx
index d985aca795..17218f732b 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/actions/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type ActionsProps = {
   disabled?: boolean
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx
index cff7b6fdfe..40cdb7aa5c 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/document-processing/actions.tsx
@@ -1,7 +1,7 @@
 import type { CustomActionsProps } from '@/app/components/base/form/components/form/actions'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx
index 5f23e2660d..b5688befbb 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx
@@ -2,7 +2,7 @@ import { RiLoader2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { RAG_PIPELINE_PREVIEW_CHUNK_NUM } from '@/config'
 import { ChunkCardList } from '../../../../chunk-card-list'
 import { formatPreviewChunks } from './utils'
@@ -45,7 +45,7 @@ const ResultPreview = ({
       {outputs && previewChunks && (
         <div className="flex grow flex-col bg-background-body p-1">
           <ChunkCardList chunkType={outputs.chunk_structure} chunkInfo={previewChunks} />
-          <div className="system-xs-regular mt-1 flex items-center gap-x-2 text-text-tertiary">
+          <div className="mt-1 flex items-center gap-x-2 system-xs-regular text-text-tertiary">
             <div className="h-px flex-1 bg-linear-to-r from-background-gradient-mask-transparent to-divider-regular" />
             <span className="shrink-0truncate" title={t('result.resultPreview.footerTip', { ns: 'pipeline', count: RAG_PIPELINE_PREVIEW_CHUNK_NUM })}>
               {t('result.resultPreview.footerTip', { ns: 'pipeline', count: RAG_PIPELINE_PREVIEW_CHUNK_NUM })}
diff --git a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
index d077b6db95..67f6223a21 100644
--- a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
+++ b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
@@ -7,10 +7,10 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 
 type PublishAsKnowledgePipelineModalProps = {
@@ -82,11 +82,11 @@ const PublishAsKnowledgePipelineModal = ({
         onClose={noop}
         className="relative w-[520px]! p-0!"
       >
-        <div className="title-2xl-semi-bold relative flex items-center p-6 pb-3 pr-14 text-text-primary">
+        <div className="relative flex items-center p-6 pr-14 pb-3 title-2xl-semi-bold text-text-primary">
           {t('common.publishAs', { ns: 'pipeline' })}
           <div
             data-testid="publish-modal-close-btn"
-            className="absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center"
+            className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center"
             onClick={onCancel}
           >
             <RiCloseLine className="h-4 w-4 text-text-tertiary" />
@@ -95,7 +95,7 @@ const PublishAsKnowledgePipelineModal = ({
         <div className="px-6 py-3">
           <div className="mb-5 flex">
             <div className="mr-3 grow">
-              <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">
+              <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
                 {t('common.publishAsPipeline.name', { ns: 'pipeline' })}
               </div>
               <Input
@@ -115,7 +115,7 @@ const PublishAsKnowledgePipelineModal = ({
             />
           </div>
           <div>
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary ">
+            <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
               {t('common.publishAsPipeline.description', { ns: 'pipeline' })}
             </div>
             <Textarea
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
index 2c479d3268..55674b0242 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { InputField } from '@/app/components/base/icons/src/vender/pipeline'
+import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 
 const InputFieldButton = () => {
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
index 043d16d89c..6834552201 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
@@ -74,8 +74,8 @@ vi.mock('@/app/components/workflow/store', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  default: ({ children, onClick, disabled, variant, className }: Record<string, unknown>) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, onClick, disabled, variant, className }: Record<string, unknown>) => (
     <button
       onClick={onClick as () => void}
       disabled={disabled as boolean}
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
index a2d927458a..8f7e3c98e5 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/index.tsx
@@ -5,12 +5,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks'
 import Popup from './popup'
 
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index e05fc2e542..68e59bafe8 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -5,11 +5,11 @@ import { useBoolean, useKeyPress } from 'ahooks'
 import { memo, useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import PremiumBadge from '@/app/components/base/premium-badge'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useChecklistBeforePublish } from '@/app/components/workflow/hooks'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
@@ -76,13 +76,13 @@ const Popup = () => {
         if (res) {
           toast.success(t('publishPipeline.success.message', { ns: 'datasetPipeline' }), {
             description: (
-              <div className="text-text-secondary system-xs-regular">
+              <div className="system-xs-regular text-text-secondary">
                 <Trans
                   i18nKey="publishPipeline.success.tip"
                   ns="datasetPipeline"
                   components={{
                     CustomLink: (
-                      <Link className="text-text-accent system-xs-medium" href={`/datasets/${datasetId}/documents`}>
+                      <Link className="system-xs-medium text-text-accent" href={`/datasets/${datasetId}/documents`}>
                       </Link>
                     ),
                   }}
@@ -129,10 +129,10 @@ const Popup = () => {
       toast.success(t('publishTemplate.success.message', { ns: 'datasetPipeline' }), {
         description: (
           <div className="flex flex-col gap-y-1">
-            <span className="text-text-secondary system-xs-regular">
+            <span className="system-xs-regular text-text-secondary">
               {t('publishTemplate.success.tip', { ns: 'datasetPipeline' })}
             </span>
-            <Link href={docLink()} target="_blank" className="inline-block text-text-accent system-xs-medium-uppercase">
+            <Link href={docLink()} target="_blank" className="inline-block system-xs-medium-uppercase text-text-accent">
               {t('publishTemplate.success.learnMore', { ns: 'datasetPipeline' })}
             </Link>
           </div>
@@ -157,13 +157,13 @@ const Popup = () => {
   return (
     <div className={cn('rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5', isAllowPublishAsCustomKnowledgePipelineTemplate ? 'w-[360px]' : 'w-[400px]')}>
       <div className="p-4 pt-3">
-        <div className="flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
+        <div className="flex h-6 items-center system-xs-medium-uppercase text-text-tertiary">
           {publishedAt ? t('common.latestPublished', { ns: 'workflow' }) : t('common.currentDraftUnpublished', { ns: 'workflow' })}
         </div>
         {publishedAt
           ? (
               <div className="flex items-center justify-between">
-                <div className="flex items-center text-text-secondary system-sm-medium">
+                <div className="flex items-center system-sm-medium text-text-secondary">
                   {t('common.publishedAt', { ns: 'workflow' })}
                   {' '}
                   {formatTimeFromNow(publishedAt)}
@@ -171,7 +171,7 @@ const Popup = () => {
               </div>
             )
           : (
-              <div className="flex items-center text-text-secondary system-sm-medium">
+              <div className="flex items-center system-sm-medium text-text-secondary">
                 {t('common.autoSaved', { ns: 'workflow' })}
                 {' '}
                 ·
diff --git a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
index fd92977703..a420f02b9e 100644
--- a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
+++ b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
@@ -8,8 +8,8 @@ import {
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { useUpdateDSLModal } from '../hooks/use-update-dsl-modal'
 import VersionMismatchModal from './version-mismatch-modal'
 
@@ -51,13 +51,13 @@ const UpdateDSLModal = ({
           </div>
         </div>
         <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
-          <div className="absolute left-0 top-0 h-full w-full bg-toast-warning-bg opacity-40" />
+          <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
           <div className="flex items-start justify-center p-1">
             <RiAlertFill className="h-4 w-4 shrink-0 text-text-warning-secondary" />
           </div>
           <div className="flex grow flex-col items-start gap-0.5 py-1">
             <div className="system-xs-medium whitespace-pre-line text-text-primary">{t('common.importDSLTip', { ns: 'workflow' })}</div>
-            <div className="flex items-start gap-1 self-stretch pb-0.5 pt-1">
+            <div className="flex items-start gap-1 self-stretch pt-1 pb-0.5">
               <Button
                 size="small"
                 variant="secondary"
@@ -73,7 +73,7 @@ const UpdateDSLModal = ({
           </div>
         </div>
         <div>
-          <div className="system-md-semibold pt-2 text-text-primary">
+          <div className="pt-2 system-md-semibold text-text-primary">
             {t('common.chooseDSL', { ns: 'workflow' })}
           </div>
           <div className="flex w-full flex-col items-start justify-center gap-4 self-stretch py-4">
@@ -90,7 +90,8 @@ const UpdateDSLModal = ({
           <Button onClick={onCancel}>{t('newApp.Cancel', { ns: 'app' })}</Button>
           <Button
             disabled={!currentFile || loading}
-            variant="warning"
+            variant="primary"
+            destructive
             onClick={handleImport}
             loading={loading}
           >
diff --git a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
index ffe2bc6e53..bf69e11435 100644
--- a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
+++ b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
@@ -1,7 +1,7 @@
 import type { MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type VersionMismatchModalProps = {
   isShow: boolean
@@ -29,7 +29,7 @@ const VersionMismatchModal = ({
     >
       <div className="flex flex-col items-start gap-2 self-stretch pb-4">
         <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-        <div className="system-md-regular flex grow flex-col text-text-secondary">
+        <div className="flex grow flex-col system-md-regular text-text-secondary">
           <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
           <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
           <br />
diff --git a/web/app/components/share/text-generation/result/index.tsx b/web/app/components/share/text-generation/result/index.tsx
index 09c87c61bb..cb2d783451 100644
--- a/web/app/components/share/text-generation/result/index.tsx
+++ b/web/app/components/share/text-generation/result/index.tsx
@@ -8,8 +8,8 @@ import { t } from 'i18next'
 import { useCallback } from 'react'
 import * as React from 'react'
 import TextGenerationRes from '@/app/components/app/text-generate/item'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import NoData from '@/app/components/share/text-generation/no-data'
 import { useResultRunState } from './hooks/use-result-run-state'
@@ -83,8 +83,8 @@ const Result: FC<IResultProps> = ({ isWorkflow, isCallBatchAPI, isPC, isMobile,
         <div className={`mb-3 flex ${isPC ? 'justify-end' : 'justify-center'}`}>
           <Button variant="secondary" disabled={runState.isStopping} onClick={runState.handleStop}>
             {runState.isStopping
-              ? <span aria-hidden className="i-ri-loader-2-line mr-[5px] h-3.5 w-3.5 animate-spin" />
-              : <span aria-hidden className="i-ri-stop-circle-fill mr-[5px] h-3.5 w-3.5" />}
+              ? <span aria-hidden className="mr-[5px] i-ri-loader-2-line h-3.5 w-3.5 animate-spin" />
+              : <span aria-hidden className="mr-[5px] i-ri-stop-circle-fill h-3.5 w-3.5" />}
             <span className="text-xs font-normal">{t('operation.stopResponding', { ns: 'appDebug' })}</span>
           </Button>
         </div>
diff --git a/web/app/components/share/text-generation/run-batch/index.tsx b/web/app/components/share/text-generation/run-batch/index.tsx
index bdb8b78ecf..d6e4ed8a86 100644
--- a/web/app/components/share/text-generation/run-batch/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/index.tsx
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { cn } from '@/utils/classnames'
 import CSVDownload from './csv-download'
@@ -46,7 +46,7 @@ const RunBatch: FC<IRunBatchProps> = ({
       <div className="flex justify-end">
         <Button
           variant="primary"
-          className={cn('mt-4 pl-3 pr-4', !isPC && 'grow')}
+          className={cn('mt-4 pr-4 pl-3', !isPC && 'grow')}
           onClick={handleSend}
           disabled={!isParsed || !isAllFinished}
         >
diff --git a/web/app/components/share/text-generation/run-batch/res-download/index.tsx b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
index 012693003b..d6f521029e 100644
--- a/web/app/components/share/text-generation/run-batch/res-download/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
@@ -7,7 +7,7 @@ import {
   useCSVDownloader,
 } from 'react-papaparse'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type IResDownloadProps = {
diff --git a/web/app/components/share/text-generation/run-once/index.tsx b/web/app/components/share/text-generation/run-once/index.tsx
index 484291088c..53f11c5910 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -11,13 +11,13 @@ import {
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
 import Input from '@/app/components/base/input'
 import Select from '@/app/components/base/select'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
@@ -120,7 +120,7 @@ const RunOnce: FC<IRunOnceProps> = ({
             : promptConfig.prompt_variables.filter(item => item.hide !== true).map(item => (
                 <div className="mt-4 w-full" key={item.key}>
                   {item.type !== 'checkbox' && (
-                    <div className="system-md-semibold flex h-6 items-center gap-1 text-text-secondary">
+                    <div className="flex h-6 items-center gap-1 system-md-semibold text-text-secondary">
                       <div className="truncate">{item.name}</div>
                       {!item.required && <span className="system-xs-regular text-text-tertiary">{t('panel.optional', { ns: 'workflow' })}</span>}
                     </div>
@@ -209,7 +209,7 @@ const RunOnce: FC<IRunOnceProps> = ({
           {
             visionConfig?.enabled && (
               <div className="mt-4 w-full">
-                <div className="system-md-semibold flex h-6 items-center text-text-secondary">{t('imageUploader.imageUpload', { ns: 'common' })}</div>
+                <div className="flex h-6 items-center system-md-semibold text-text-secondary">{t('imageUploader.imageUpload', { ns: 'common' })}</div>
                 <div className="mt-1">
                   <TextGenerationImageUploader
                     settings={visionConfig}
@@ -224,7 +224,7 @@ const RunOnce: FC<IRunOnceProps> = ({
               </div>
             )
           }
-          <div className="mb-3 mt-6 w-full">
+          <div className="mt-6 mb-3 w-full">
             <div className="flex items-center justify-between gap-2">
               <Button
                 onClick={onClear}
diff --git a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
index 39f347c1b7..f1a52e5447 100644
--- a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -3,11 +3,11 @@ import type { FC } from 'react'
 import type { Credential } from '@/app/components/tools/types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import Input from '@/app/components/base/input'
 import Radio from '@/app/components/base/radio/ui'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { AuthHeaderPrefix, AuthType } from '@/app/components/tools/types'
 import { cn } from '@/utils/classnames'
 
@@ -62,7 +62,7 @@ const ConfigCredential: FC<Props> = ({
         <div className="px-6 pt-2">
           <div className="space-y-4">
             <div>
-              <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.type', { ns: 'tools' })}</div>
+              <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.type', { ns: 'tools' })}</div>
               <div className="flex space-x-3">
                 <SelectItem
                   text={t('createTool.authMethod.types.none', { ns: 'tools' })}
@@ -98,7 +98,7 @@ const ConfigCredential: FC<Props> = ({
             {tempCredential.auth_type === AuthType.apiKeyHeader && (
               <>
                 <div>
-                  <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authHeaderPrefix.title', { ns: 'tools' })}</div>
+                  <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authHeaderPrefix.title', { ns: 'tools' })}</div>
                   <div className="flex space-x-3">
                     <SelectItem
                       text={t('createTool.authHeaderPrefix.types.basic', { ns: 'tools' })}
@@ -121,7 +121,7 @@ const ConfigCredential: FC<Props> = ({
                   </div>
                 </div>
                 <div>
-                  <div className="system-sm-medium flex items-center py-2 text-text-primary">
+                  <div className="flex items-center py-2 system-sm-medium text-text-primary">
                     {t('createTool.authMethod.key', { ns: 'tools' })}
                     <Tooltip
                       popupContent={(
@@ -139,7 +139,7 @@ const ConfigCredential: FC<Props> = ({
                   />
                 </div>
                 <div>
-                  <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
+                  <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
                   <Input
                     value={tempCredential.api_key_value}
                     onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
@@ -151,7 +151,7 @@ const ConfigCredential: FC<Props> = ({
             {tempCredential.auth_type === AuthType.apiKeyQuery && (
               <>
                 <div>
-                  <div className="system-sm-medium flex items-center py-2 text-text-primary">
+                  <div className="flex items-center py-2 system-sm-medium text-text-primary">
                     {t('createTool.authMethod.queryParam', { ns: 'tools' })}
                     <Tooltip
                       popupContent={(
@@ -169,7 +169,7 @@ const ConfigCredential: FC<Props> = ({
                   />
                 </div>
                 <div>
-                  <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
+                  <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.value', { ns: 'tools' })}</div>
                   <Input
                     value={tempCredential.api_key_value}
                     onChange={e => setTempCredential({ ...tempCredential, api_key_value: e.target.value })}
diff --git a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
index 1f191b4334..3711a5d095 100644
--- a/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/get-schema.tsx
@@ -8,8 +8,8 @@ import { useClickAway } from 'ahooks'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { importSchemaFromURL } from '@/service/tools'
 import examples from './examples'
@@ -58,14 +58,14 @@ const GetSchema: FC<Props> = ({
       <div ref={importURLRef}>
         <Button
           size="small"
-          className="space-x-1 "
+          className="space-x-1"
           onClick={() => { setShowImportFromUrl(!showImportFromUrl) }}
         >
           <RiAddLine className="h-3 w-3" />
           <div className="system-xs-medium text-text-secondary">{t('createTool.importFromUrl', { ns: 'tools' })}</div>
         </Button>
         {showImportFromUrl && (
-          <div className=" absolute left-[-35px] top-[26px] rounded-lg border border-components-panel-border bg-components-panel-bg p-2 shadow-lg">
+          <div className="absolute top-[26px] left-[-35px] rounded-lg border border-components-panel-border bg-components-panel-bg p-2 shadow-lg">
             <div className="relative">
               <Input
                 type="text"
@@ -75,7 +75,7 @@ const GetSchema: FC<Props> = ({
                 onChange={e => setImportUrl(e.target.value)}
               />
               <Button
-                className="absolute right-1 top-1"
+                className="absolute top-1 right-1"
                 size="small"
                 variant="primary"
                 disabled={!importUrl}
@@ -98,7 +98,7 @@ const GetSchema: FC<Props> = ({
           <RiArrowDownSLine className="h-3 w-3" />
         </Button>
         {showExamples && (
-          <div className="absolute right-0 top-7 rounded-lg bg-components-panel-bg p-1 shadow-sm">
+          <div className="absolute top-7 right-0 rounded-lg bg-components-panel-bg p-1 shadow-sm">
             {examples.map(item => (
               <div
                 key={item.key}
@@ -106,7 +106,7 @@ const GetSchema: FC<Props> = ({
                   onChange(item.content)
                   setShowExamples(false)
                 }}
-                className="system-sm-regular cursor-pointer whitespace-nowrap rounded-lg px-3 py-1.5 leading-5 text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover"
+                className="cursor-pointer rounded-lg px-3 py-1.5 system-sm-regular leading-5 whitespace-nowrap text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover"
               >
                 {t(`createTool.exampleOptions.${item.key}`, { ns: 'tools' })}
               </div>
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index 2938033073..506eab1c8f 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -8,11 +8,11 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import LabelSelector from '@/app/components/tools/labels/selector'
 import { parseParamsSchema } from '@/service/tools'
@@ -204,7 +204,7 @@ const EditCustomCollectionModal: FC<Props> = ({
           <div className="flex h-full flex-col">
             <div className="h-0 grow space-y-4 overflow-y-auto px-6 py-3">
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">
+                <div className="py-2 system-sm-medium text-text-primary">
                   {t('createTool.name', { ns: 'tools' })}
                   {' '}
                   <span className="ml-1 text-red-500">*</span>
@@ -229,7 +229,7 @@ const EditCustomCollectionModal: FC<Props> = ({
               <div className="select-none">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center">
-                    <div className="system-sm-medium py-2 text-text-primary">
+                    <div className="py-2 system-sm-medium text-text-primary">
                       {t('createTool.schema', { ns: 'tools' })}
                       <span className="ml-1 text-red-500">*</span>
                     </div>
@@ -238,7 +238,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                       href="https://swagger.io/specification/"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="flex h-[18px] items-center space-x-1  text-text-accent"
+                      className="flex h-[18px] items-center space-x-1 text-text-accent"
                     >
                       <div className="text-xs font-normal">{t('createTool.viewSchemaSpec', { ns: 'tools' })}</div>
                       <LinkExternal02 className="h-3 w-3" />
@@ -257,10 +257,10 @@ const EditCustomCollectionModal: FC<Props> = ({
 
               {/* Available Tools  */}
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.availableTools.title', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.availableTools.title', { ns: 'tools' })}</div>
                 <div className="w-full overflow-x-auto rounded-lg border border-divider-regular">
-                  <table className="system-xs-regular w-full text-text-secondary">
-                    <thead className="uppercase text-text-tertiary">
+                  <table className="w-full system-xs-regular text-text-secondary">
+                    <thead className="text-text-tertiary uppercase">
                       <tr className={cn(paramsSchemas.length > 0 && 'border-b', 'border-divider-regular')}>
                         <th className="p-2 pl-3 font-medium">{t('createTool.availableTools.name', { ns: 'tools' })}</th>
                         <th className="w-[236px] p-2 pl-3 font-medium">{t('createTool.availableTools.description', { ns: 'tools' })}</th>
@@ -296,7 +296,7 @@ const EditCustomCollectionModal: FC<Props> = ({
 
               {/* Authorization method */}
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
                 <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
                   <div className="system-xs-regular text-text-primary">{t(`createTool.authMethod.types.${credential.auth_type}`, { ns: 'tools' })}</div>
                   <RiSettings2Line className="h-4 w-4 text-text-secondary" />
@@ -305,13 +305,13 @@ const EditCustomCollectionModal: FC<Props> = ({
 
               {/* Labels */}
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.toolInput.label', { ns: 'tools' })}</div>
                 <LabelSelector value={labels} onChange={handleLabelSelect} />
               </div>
 
               {/* Privacy Policy */}
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.privacyPolicy', { ns: 'tools' })}</div>
                 <Input
                   value={customCollection.privacy_policy}
                   onChange={(e) => {
@@ -326,7 +326,7 @@ const EditCustomCollectionModal: FC<Props> = ({
               </div>
 
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.customDisclaimer', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.customDisclaimer', { ns: 'tools' })}</div>
                 <Input
                   value={customCollection.custom_disclaimer}
                   onChange={(e) => {
@@ -344,10 +344,10 @@ const EditCustomCollectionModal: FC<Props> = ({
             <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')}>
               {
                 isEdit && (
-                  <Button variant="warning" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
+                  <Button variant="primary" destructive onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
                 )
               }
-              <div className="flex space-x-2 ">
+              <div className="flex space-x-2">
                 <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
                 <Button variant="primary" onClick={handleSave}>{t('operation.save', { ns: 'common' })}</Button>
               </div>
diff --git a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
index 0754c5a688..177cd2a8ee 100644
--- a/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/test-api.tsx
@@ -5,9 +5,9 @@ import { RiSettings2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { AuthType } from '@/app/components/tools/types'
 import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
@@ -75,7 +75,7 @@ const TestApi: FC<Props> = ({
           <div className="overflow-y-auto px-6 pt-2">
             <div className="space-y-4">
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('createTool.authMethod.title', { ns: 'tools' })}</div>
                 <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2.5" onClick={() => setCredentialsModalShow(true)}>
                   <div className="system-xs-regular text-text-primary">{t(`createTool.authMethod.types.${tempCredential.auth_type}`, { ns: 'tools' })}</div>
                   <RiSettings2Line className="h-4 w-4 text-text-secondary" />
@@ -83,10 +83,10 @@ const TestApi: FC<Props> = ({
               </div>
 
               <div>
-                <div className="system-sm-medium py-2 text-text-primary">{t('test.parametersValue', { ns: 'tools' })}</div>
+                <div className="py-2 system-sm-medium text-text-primary">{t('test.parametersValue', { ns: 'tools' })}</div>
                 <div className="rounded-lg border border-divider-regular">
-                  <table className="system-xs-regular w-full font-normal text-text-secondary">
-                    <thead className="uppercase text-text-tertiary">
+                  <table className="w-full system-xs-regular font-normal text-text-secondary">
+                    <thead className="text-text-tertiary uppercase">
                       <tr className="border-b border-divider-regular">
                         <th className="p-2 pl-3 font-medium">{t('test.parameters', { ns: 'tools' })}</th>
                         <th className="p-2 pl-3 font-medium">{t('test.value', { ns: 'tools' })}</th>
@@ -95,7 +95,7 @@ const TestApi: FC<Props> = ({
                     <tbody>
                       {parameters.map((item, index) => (
                         <tr key={index} className="border-b border-divider-regular last:border-0">
-                          <td className="py-2 pl-3 pr-2.5">
+                          <td className="py-2 pr-2.5 pl-3">
                             {item.label[language]}
                           </td>
                           <td className="">
@@ -114,13 +114,13 @@ const TestApi: FC<Props> = ({
               </div>
 
             </div>
-            <Button variant="primary" className=" mt-4 h-10 w-full" loading={testing} disabled={testing} onClick={handleTest}>{t('test.title', { ns: 'tools' })}</Button>
+            <Button variant="primary" className="mt-4 h-10 w-full" loading={testing} disabled={testing} onClick={handleTest}>{t('test.title', { ns: 'tools' })}</Button>
             <div className="mt-6">
               <div className="flex items-center space-x-3">
                 <div className="system-xs-semibold text-text-tertiary">{t('test.testResult', { ns: 'tools' })}</div>
                 <div className="bg-[rgb(243, 244, 246)] h-px w-0 grow"></div>
               </div>
-              <div className="system-xs-regular mt-2 h-[200px] overflow-y-auto overflow-x-hidden rounded-lg bg-components-input-bg-normal px-3 py-2 text-text-secondary">
+              <div className="mt-2 h-[200px] overflow-x-hidden overflow-y-auto rounded-lg bg-components-input-bg-normal px-3 py-2 system-xs-regular text-text-secondary">
                 {result || <span className="text-text-quaternary">{t('test.testResultPlaceholder', { ns: 'tools' })}</span>}
               </div>
             </div>
diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index 23d408706d..4c95bd88f0 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -12,9 +12,9 @@ import * as React from 'react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import { useAppContext } from '@/context/app-context'
@@ -163,15 +163,15 @@ const MCPDetailContent: FC<Props> = ({
           </div>
           <div className="ml-3 w-0 grow">
             <div className="flex h-5 items-center">
-              <div className="system-md-semibold truncate text-text-primary" title={detail.name}>{detail.name}</div>
+              <div className="truncate system-md-semibold text-text-primary" title={detail.name}>{detail.name}</div>
             </div>
             <div className="mt-0.5 flex items-center gap-1">
               <Tooltip popupContent={t('mcp.identifier', { ns: 'tools' })}>
-                <div className="system-xs-regular shrink-0 cursor-pointer text-text-secondary" onClick={() => copy(detail.server_identifier || '')}>{detail.server_identifier}</div>
+                <div className="shrink-0 cursor-pointer system-xs-regular text-text-secondary" onClick={() => copy(detail.server_identifier || '')}>{detail.server_identifier}</div>
               </Tooltip>
-              <div className="system-xs-regular shrink-0 text-text-quaternary">·</div>
+              <div className="shrink-0 system-xs-regular text-text-quaternary">·</div>
               <Tooltip popupContent={t('mcp.modal.serverUrl', { ns: 'tools' })}>
-                <div className="system-xs-regular truncate text-text-secondary">{detail.server_url}</div>
+                <div className="truncate system-xs-regular text-text-secondary">{detail.server_url}</div>
               </Tooltip>
             </div>
           </div>
@@ -222,7 +222,7 @@ const MCPDetailContent: FC<Props> = ({
       <div className="flex grow flex-col">
         {((detail.is_team_authorization && isGettingTools) || isUpdating) && (
           <>
-            <div className="flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2">
+            <div className="flex shrink-0 justify-between gap-2 px-4 pt-2 pb-1">
               <div className="flex h-6 items-center">
                 {!isUpdating && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.gettingTools', { ns: 'tools' })}</div>}
                 {isUpdating && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.updateTools', { ns: 'tools' })}</div>}
@@ -236,7 +236,7 @@ const MCPDetailContent: FC<Props> = ({
         )}
         {!isUpdating && detail.is_team_authorization && !isGettingTools && !toolList.length && (
           <div className="flex h-full w-full flex-col items-center justify-center">
-            <div className="system-sm-regular mb-3 text-text-tertiary">{t('mcp.toolsEmpty', { ns: 'tools' })}</div>
+            <div className="mb-3 system-sm-regular text-text-tertiary">{t('mcp.toolsEmpty', { ns: 'tools' })}</div>
             <Button
               variant="primary"
               onClick={handleUpdateTools}
@@ -247,7 +247,7 @@ const MCPDetailContent: FC<Props> = ({
         )}
         {!isUpdating && !isGettingTools && toolList.length > 0 && (
           <>
-            <div className="flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2">
+            <div className="flex shrink-0 justify-between gap-2 px-4 pt-2 pb-1">
               <div className="flex h-6 items-center">
                 {toolList.length > 1 && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.toolsNum', { ns: 'tools', count: toolList.length })}</div>}
                 {toolList.length === 1 && <div className="system-sm-semibold-uppercase text-text-secondary">{t('mcp.onlyTool', { ns: 'tools' })}</div>}
@@ -272,8 +272,8 @@ const MCPDetailContent: FC<Props> = ({
 
         {!isUpdating && !detail.is_team_authorization && (
           <div className="flex h-full w-full flex-col items-center justify-center">
-            {!isAuthorizing && <div className="system-md-medium mb-1 text-text-secondary">{t('mcp.authorizingRequired', { ns: 'tools' })}</div>}
-            {isAuthorizing && <div className="system-md-medium mb-1 text-text-secondary">{t('mcp.authorizing', { ns: 'tools' })}</div>}
+            {!isAuthorizing && <div className="mb-1 system-md-medium text-text-secondary">{t('mcp.authorizingRequired', { ns: 'tools' })}</div>}
+            {isAuthorizing && <div className="mb-1 system-md-medium text-text-secondary">{t('mcp.authorizing', { ns: 'tools' })}</div>}
             <div className="system-sm-regular text-text-tertiary">{t('mcp.authorizeTip', { ns: 'tools' })}</div>
           </div>
         )}
diff --git a/web/app/components/tools/mcp/headers-input.tsx b/web/app/components/tools/mcp/headers-input.tsx
index be75ff16d2..382115efe4 100644
--- a/web/app/components/tools/mcp/headers-input.tsx
+++ b/web/app/components/tools/mcp/headers-input.tsx
@@ -4,8 +4,8 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { v4 as uuid } from 'uuid'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 export type HeaderItem = {
@@ -77,9 +77,9 @@ const HeadersInput = ({
         </div>
       )}
       <div className="overflow-hidden rounded-lg border border-divider-regular">
-        <div className="system-xs-medium-uppercase bg-background-secondary flex h-7 items-center leading-7 text-text-tertiary">
+        <div className="bg-background-secondary flex h-7 items-center system-xs-medium-uppercase leading-7 text-text-tertiary">
           <div className="h-full w-1/2 border-r border-divider-regular pl-3">{t('mcp.modal.headerKey', { ns: 'tools' })}</div>
-          <div className="h-full w-1/2 pl-3 pr-1">{t('mcp.modal.headerValue', { ns: 'tools' })}</div>
+          <div className="h-full w-1/2 pr-1 pl-3">{t('mcp.modal.headerValue', { ns: 'tools' })}</div>
         </div>
         {headersItems.map((item, index) => (
           <div
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index 7d85df7b55..4c8b45d1c9 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -5,10 +5,10 @@ import type {
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import MCPServerParamItem from '@/app/components/tools/mcp/mcp-server-param-item'
 import {
   useCreateMCPServer,
@@ -93,10 +93,10 @@ const MCPServerModal = ({
       onClose={onHide}
       className={cn('relative max-w-[520px]! p-0!')}
     >
-      <div className="absolute right-5 top-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
+      <div className="absolute top-5 right-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
         <RiCloseLine className="h-5 w-5 text-text-tertiary" />
       </div>
-      <div className="title-2xl-semi-bold relative p-6 pb-3 text-xl text-text-primary">
+      <div className="relative p-6 pb-3 title-2xl-semi-bold text-xl text-text-primary">
         {!data ? t('mcp.server.modal.addTitle', { ns: 'tools' }) : t('mcp.server.modal.editTitle', { ns: 'tools' })}
       </div>
       <div className="space-y-5 px-6 py-3">
@@ -116,10 +116,10 @@ const MCPServerModal = ({
         {latestParams.length > 0 && (
           <div>
             <div className="mb-1 flex items-center gap-2">
-              <div className="system-xs-medium-uppercase shrink-0 text-text-primary">{t('mcp.server.modal.parameters', { ns: 'tools' })}</div>
+              <div className="shrink-0 system-xs-medium-uppercase text-text-primary">{t('mcp.server.modal.parameters', { ns: 'tools' })}</div>
               <Divider type="horizontal" className="m-0! h-px! grow bg-divider-subtle" />
             </div>
-            <div className="body-xs-regular mb-2 text-text-tertiary">{t('mcp.server.modal.parametersTip', { ns: 'tools' })}</div>
+            <div className="mb-2 body-xs-regular text-text-tertiary">{t('mcp.server.modal.parametersTip', { ns: 'tools' })}</div>
             <div className="space-y-3">
               {latestParams.map(paramItem => (
                 <MCPServerParamItem
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 5845ba0e34..9ff2c7b7b3 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -6,13 +6,13 @@ import type { AppSSO } from '@/types/app'
 import { RiEditLine, RiLoopLeftLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Divider from '@/app/components/base/divider'
 import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import MCPServerModal from '@/app/components/tools/mcp/mcp-server-modal'
 import { useDocLink } from '@/context/i18n'
@@ -56,12 +56,12 @@ const ServerURLSection: FC<ServerURLSectionProps> = ({
   const { t } = useTranslation()
   return (
     <div className="flex flex-col items-start justify-center self-stretch">
-      <div className="system-xs-medium pb-1 text-text-tertiary">
+      <div className="pb-1 system-xs-medium text-text-tertiary">
         {t('mcp.server.url', { ns: 'tools' })}
       </div>
       <div className="inline-flex h-9 w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
         <div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium text-text-secondary">
+          <div className="overflow-hidden text-xs font-medium text-ellipsis whitespace-nowrap text-text-secondary">
             {serverURL}
           </div>
         </div>
@@ -225,7 +225,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
 
   return (
     <>
-      <div className={cn('w-full max-w-full rounded-xl border-l-[0.5px] border-t border-effects-highlight', isMinimalState && 'h-12')}>
+      <div className={cn('w-full max-w-full rounded-xl border-t border-l-[0.5px] border-effects-highlight', isMinimalState && 'h-12')}>
         <div className={cn('relative rounded-xl bg-background-default', triggerModeDisabled && 'opacity-60')}>
           {triggerModeDisabled && (
             <TriggerModeOverlay triggerModeMessage={triggerModeMessage} />
@@ -237,7 +237,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
                   <Mcp className="h-4 w-4 text-text-primary-on-surface" />
                 </div>
                 <div className="group w-full">
-                  <div className="system-md-semibold min-w-0 overflow-hidden text-ellipsis break-normal text-text-secondary group-hover:text-text-primary">
+                  <div className="min-w-0 overflow-hidden system-md-semibold break-normal text-ellipsis text-text-secondary group-hover:text-text-primary">
                     {t('mcp.server.title', { ns: 'tools' })}
                   </div>
                 </div>
@@ -274,7 +274,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
               >
                 <div className="flex items-center justify-center gap-px">
                   <RiEditLine className="h-3.5 w-3.5" />
-                  <div className="system-xs-medium px-[3px] text-text-tertiary">
+                  <div className="px-[3px] system-xs-medium text-text-tertiary">
                     {serverPublished ? t('mcp.server.edit', { ns: 'tools' }) : t('mcp.server.addDescription', { ns: 'tools' })}
                   </div>
                 </div>
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 2de71ba924..64298178bc 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -9,11 +9,11 @@ import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import Button from '@/app/components/base/button'
 import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import TabSlider from '@/app/components/base/tab-slider'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { MCPAuthMethod } from '@/app/components/tools/types'
 import { cn } from '@/utils/classnames'
@@ -131,10 +131,10 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
 
   return (
     <>
-      <div className="absolute right-5 top-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
+      <div className="absolute top-5 right-5 z-10 cursor-pointer p-1.5" onClick={onHide}>
         <RiCloseLine className="h-5 w-5 text-text-tertiary" />
       </div>
-      <div className="title-2xl-semi-bold relative pb-3 text-xl text-text-primary">
+      <div className="relative pb-3 title-2xl-semi-bold text-xl text-text-primary">
         {!isCreate ? t('mcp.modal.editTitle', { ns: 'tools' }) : t('mcp.modal.title', { ns: 'tools' })}
       </div>
 
@@ -197,7 +197,7 @@ const MCPModalContent: FC<MCPModalContentProps> = ({
           <div className="flex h-6 items-center">
             <span className="system-sm-medium text-text-secondary">{t('mcp.modal.serverIdentifier', { ns: 'tools' })}</span>
           </div>
-          <div className="body-xs-regular mb-1 text-text-tertiary">{t('mcp.modal.serverIdentifierTip', { ns: 'tools' })}</div>
+          <div className="mb-1 body-xs-regular text-text-tertiary">{t('mcp.modal.serverIdentifierTip', { ns: 'tools' })}</div>
           <Input
             value={state.serverIdentifier}
             onChange={e => actions.setServerIdentifier(e.target.value)}
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index d639d07044..516e2bb946 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -8,11 +8,11 @@ import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
 import Drawer from '@/app/components/base/drawer'
 import { LinkExternal02, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import Indicator from '@/app/components/header/indicator'
@@ -228,7 +228,7 @@ const ProviderDetail = ({
       footer={null}
       mask={false}
       positionCenter={false}
-      panelClassName={cn('mb-2 mr-2 mt-[64px] w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
+      panelClassName={cn('mt-[64px] mr-2 mb-2 w-[420px]! max-w-[420px]! justify-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg! p-0! shadow-xl')}
     >
       <div className="flex h-full flex-col p-4">
         <div className="shrink-0">
@@ -238,7 +238,7 @@ const ProviderDetail = ({
               <div className="flex h-5 items-center">
                 <Title title={collection.label[language]} />
               </div>
-              <div className="mb-1 mt-0.5 flex h-4 items-center justify-between">
+              <div className="mt-0.5 mb-1 flex h-4 items-center justify-between">
                 <OrgInfo
                   packageNameClassName="w-auto"
                   orgName={collection.author}
@@ -293,7 +293,7 @@ const ProviderDetail = ({
             <>
               <div className="shrink-0">
                 {(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && isAuthed && (
-                  <div className="system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary">
+                  <div className="mb-1 flex h-6 items-center justify-between system-sm-semibold-uppercase text-text-secondary">
                     {t('detailPanel.actionNum', { ns: 'plugin', num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })}
                     {needAuth && (
                       <Button
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
index 4986897ccf..0969153383 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -5,10 +5,10 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
@@ -108,7 +108,7 @@ const ConfigCredential: FC<Props> = ({
                         )
                       : null}
                   />
-                  <div className={cn((collection.is_team_authorization && !isHideRemoveBtn) ? 'justify-between' : 'justify-end', 'mt-2 flex ')}>
+                  <div className={cn((collection.is_team_authorization && !isHideRemoveBtn) ? 'justify-between' : 'justify-end', 'mt-2 flex')}>
                     {
                       (collection.is_team_authorization && !isHideRemoveBtn) && (
                         <Button onClick={onRemove}>{t('operation.remove', { ns: 'common' })}</Button>
diff --git a/web/app/components/tools/workflow-tool/configure-button.tsx b/web/app/components/tools/workflow-tool/configure-button.tsx
index 84fc3fd96d..557f442d79 100644
--- a/web/app/components/tools/workflow-tool/configure-button.tsx
+++ b/web/app/components/tools/workflow-tool/configure-button.tsx
@@ -4,8 +4,8 @@ import type { InputVar, Variable } from '@/app/components/workflow/types'
 import type { PublishWorkflowParams } from '@/types/workflow'
 import { RiArrowRightUpLine, RiHammerLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import WorkflowToolModal from '@/app/components/tools/workflow-tool'
 import { cn } from '@/utils/classnames'
@@ -85,12 +85,12 @@ const WorkflowToolConfigureButton = ({
                   <RiHammerLine className={cn('relative h-4 w-4 text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')} />
                   <div
                     title={t('common.workflowAsTool', { ns: 'workflow' }) || ''}
-                    className={cn('shrink grow basis-0 truncate text-text-secondary system-sm-medium', !disabled && !published && 'group-hover:text-text-accent')}
+                    className={cn('shrink grow basis-0 truncate system-sm-medium text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')}
                   >
                     {t('common.workflowAsTool', { ns: 'workflow' })}
                   </div>
                   {!published && (
-                    <span className="shrink-0 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 text-text-tertiary system-2xs-medium-uppercase">
+                    <span className="shrink-0 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 system-2xs-medium-uppercase text-text-tertiary">
                       {t('common.configureRequired', { ns: 'workflow' })}
                     </span>
                   )}
@@ -103,7 +103,7 @@ const WorkflowToolConfigureButton = ({
                   <RiHammerLine className="h-4 w-4 text-text-tertiary" />
                   <div
                     title={t('common.workflowAsTool', { ns: 'workflow' }) || ''}
-                    className="shrink grow basis-0 truncate text-text-tertiary system-sm-medium"
+                    className="shrink grow basis-0 truncate system-sm-medium text-text-tertiary"
                   >
                     {t('common.workflowAsTool', { ns: 'workflow' })}
                   </div>
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx b/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
index d28064ef0c..e076ae67e2 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
@@ -164,7 +164,8 @@ describe('ConfirmModal', () => {
 
       // Assert
       const confirmButton = screen.getByText('common.operation.confirm')
-      expect(confirmButton).toHaveClass('btn-warning')
+      expect(confirmButton).toHaveClass('btn-primary')
+      expect(confirmButton).toHaveClass('btn-destructive')
     })
   })
 
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
index 0c7e083a56..1533b22f8e 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -3,9 +3,9 @@
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type ConfirmModalProps = {
@@ -23,20 +23,20 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
       isShow={show}
       onClose={noop}
     >
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onClose}>
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose}>
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
       <div className="h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-section p-3 shadow-xl">
         <AlertTriangle className="h-6 w-6 text-[rgb(247,144,9)]" />
       </div>
-      <div className="relative mt-3 text-xl font-semibold leading-[30px] text-text-primary">{t('createTool.confirmTitle', { ns: 'tools' })}</div>
+      <div className="relative mt-3 text-xl leading-[30px] font-semibold text-text-primary">{t('createTool.confirmTitle', { ns: 'tools' })}</div>
       <div className="my-1 text-sm leading-5 text-text-tertiary">
         {t('createTool.confirmTip', { ns: 'tools' })}
       </div>
       <div className="flex items-center justify-end pt-6">
         <div className="flex items-center">
           <Button className="mr-2" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-          <Button variant="warning" onClick={onConfirm}>{t('operation.confirm', { ns: 'common' })}</Button>
+          <Button variant="primary" destructive onClick={onConfirm}>{t('operation.confirm', { ns: 'common' })}</Button>
         </div>
       </div>
     </Modal>
diff --git a/web/app/components/tools/workflow-tool/index.tsx b/web/app/components/tools/workflow-tool/index.tsx
index 219a0d8f53..d93a378ec2 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -7,12 +7,12 @@ import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
-import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import LabelSelector from '@/app/components/tools/labels/selector'
 import ConfirmModal from '@/app/components/tools/workflow-tool/confirm-modal'
@@ -318,7 +318,7 @@ const WorkflowToolAsModal: FC<Props> = ({
             </div>
             <div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')}>
               {!isAdd && onRemove && (
-                <Button variant="warning" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
+                <Button variant="primary" destructive onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
               )}
               <div className="flex space-x-2">
                 <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
diff --git a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
index 0acc03f9a2..7842e01ef2 100644
--- a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
@@ -15,8 +15,8 @@ import { useTranslation } from 'react-i18next'
 import { useEdges } from 'reactflow'
 import AppPublisher from '@/app/components/app/app-publisher'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Button from '@/app/components/base/button'
 import { useFeatures } from '@/app/components/base/features/hooks'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { Plan } from '@/app/components/billing/type'
 import {
diff --git a/web/app/components/workflow/block-selector/all-start-blocks.tsx b/web/app/components/workflow/block-selector/all-start-blocks.tsx
index f59edfbcbf..c9848fc7c5 100644
--- a/web/app/components/workflow/block-selector/all-start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/all-start-blocks.tsx
@@ -14,9 +14,9 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
+import { Button } from '@/app/components/base/ui/button'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import Link from '@/next/link'
 import { useFeaturedTriggersRecommendations } from '@/service/use-plugins'
@@ -127,7 +127,7 @@ const AllStartBlocks = ({
   }, [enableTriggerPlugin, enable_marketplace, hasFilter, fetchPlugins, searchText, tags])
 
   return (
-    <div className={cn('min-w-[400px] max-w-[500px]', className)}>
+    <div className={cn('max-w-[500px] min-w-[400px]', className)}>
       <div className="flex max-h-[640px] flex-col">
         <div
           ref={wrapElemRef}
@@ -152,7 +152,7 @@ const AllStartBlocks = ({
               </>
             )}
             {shouldShowTriggerListTitle && (
-              <div className="px-3 pb-1 pt-2">
+              <div className="px-3 pt-2 pb-1">
                 <span className="system-xs-medium text-text-primary">{t('tabs.allTriggers', { ns: 'workflow' })}</span>
               </div>
             )}
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 9927eeedce..7c06e7d968 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -14,9 +14,9 @@ import type { OnSelectBlock } from '@/app/components/workflow/types'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
+import { Button } from '@/app/components/base/ui/button'
 import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useGetLanguage } from '@/context/i18n'
@@ -259,7 +259,7 @@ const AllTools = ({
             )}
             {hasToolsListContent && (
               <>
-                <div className="px-3 pb-1 pt-2">
+                <div className="px-3 pt-2 pb-1">
                   <span className="system-xs-medium text-text-primary">{t('allTools', { ns: 'tools' })}</span>
                 </div>
                 <Tools
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index d61b84656f..e9639e30b6 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-// import Button from '@/app/components/base/button'
+// import { Button } from '@/app/components/base/ui/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -91,8 +91,8 @@ const OperationDropdown: FC<Props> = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-9999">
         <div className="min-w-[176px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
-          <div onClick={handleDownload} className="system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover">{t('operation.download', { ns: 'common' })}</div>
-          <a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target="_blank" className="system-md-regular block cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover">{t('operation.viewDetails', { ns: 'common' })}</a>
+          <div onClick={handleDownload} className="cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover">{t('operation.download', { ns: 'common' })}</div>
+          <a href={getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })} target="_blank" className="block cursor-pointer rounded-lg px-3 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover">{t('operation.viewDetails', { ns: 'common' })}</a>
         </div>
       </PortalToFollowElemContent>
     </PortalToFollowElem>
diff --git a/web/app/components/workflow/dsl-export-confirm-modal.tsx b/web/app/components/workflow/dsl-export-confirm-modal.tsx
index a92698c8b7..2fb856ea93 100644
--- a/web/app/components/workflow/dsl-export-confirm-modal.tsx
+++ b/web/app/components/workflow/dsl-export-confirm-modal.tsx
@@ -5,10 +5,10 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 export type DSLExportConfirmModalProps = {
@@ -37,22 +37,22 @@ const DSLExportConfirmModal = ({
       onClose={noop}
       className={cn('w-[480px] max-w-[480px]')}
     >
-      <div className="title-2xl-semi-bold relative pb-6 text-text-primary">{t('env.export.title', { ns: 'workflow' })}</div>
-      <div className="absolute right-4 top-4 cursor-pointer p-2" onClick={onClose}>
+      <div className="relative pb-6 title-2xl-semi-bold text-text-primary">{t('env.export.title', { ns: 'workflow' })}</div>
+      <div className="absolute top-4 right-4 cursor-pointer p-2" onClick={onClose}>
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
       <div className="relative">
-        <table className="radius-md w-full border-separate border-spacing-0 border border-divider-regular shadow-xs">
+        <table className="w-full border-separate border-spacing-0 radius-md border border-divider-regular shadow-xs">
           <thead className="system-xs-medium-uppercase text-text-tertiary">
             <tr>
-              <td width={220} className="h-7 border-b border-r border-divider-regular pl-3">{t('env.export.name', { ns: 'workflow' })}</td>
+              <td width={220} className="h-7 border-r border-b border-divider-regular pl-3">{t('env.export.name', { ns: 'workflow' })}</td>
               <td className="h-7 border-b border-divider-regular pl-3">{t('env.export.value', { ns: 'workflow' })}</td>
             </tr>
           </thead>
           <tbody>
             {envList.map((env, index) => (
               <tr key={env.name}>
-                <td className={cn('system-xs-medium h-7 border-r pl-3', index + 1 !== envList.length && 'border-b')}>
+                <td className={cn('h-7 border-r pl-3 system-xs-medium', index + 1 !== envList.length && 'border-b')}>
                   <div className="flex w-[200px] items-center gap-1">
                     <Env className="h-4 w-4 shrink-0 text-util-colors-violet-violet-600" />
                     <div className="truncate text-text-primary">{env.name}</div>
@@ -61,7 +61,7 @@ const DSLExportConfirmModal = ({
                   </div>
                 </td>
                 <td className={cn('h-7 pl-3', index + 1 !== envList.length && 'border-b')}>
-                  <div className="system-xs-regular truncate text-text-secondary">{env.value}</div>
+                  <div className="truncate system-xs-regular text-text-secondary">{env.value}</div>
                 </td>
               </tr>
             ))}
@@ -74,7 +74,7 @@ const DSLExportConfirmModal = ({
           checked={exportSecrets}
           onCheck={() => setExportSecrets(!exportSecrets)}
         />
-        <div className="system-sm-medium cursor-pointer text-text-primary" onClick={() => setExportSecrets(!exportSecrets)}>{t('env.export.checkbox', { ns: 'workflow' })}</div>
+        <div className="cursor-pointer system-sm-medium text-text-primary" onClick={() => setExportSecrets(!exportSecrets)}>{t('env.export.checkbox', { ns: 'workflow' })}</div>
       </div>
       <div className="flex flex-row-reverse pt-6">
         <Button className="ml-2" variant="primary" onClick={submit}>{exportSecrets ? t('env.export.export', { ns: 'workflow' }) : t('env.export.ignore', { ns: 'workflow' })}</Button>
diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index 2926c55b44..82837274b4 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
-import Button from '@/app/components/base/button'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
+import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
 import { cn } from '@/utils/classnames'
diff --git a/web/app/components/workflow/header/checklist/plugin-group.tsx b/web/app/components/workflow/header/checklist/plugin-group.tsx
index 198f35e68a..75c36bf78e 100644
--- a/web/app/components/workflow/header/checklist/plugin-group.tsx
+++ b/web/app/components/workflow/header/checklist/plugin-group.tsx
@@ -3,7 +3,7 @@ import type { BlockEnum } from '../../types'
 import type { Dependency } from '@/app/components/plugins/types'
 import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { PopoverClose } from '@/app/components/base/ui/popover'
 import BlockIcon from '../../block-icon'
 import { useStore as usePluginDependencyStore } from '../../plugin-dependency/store'
@@ -59,7 +59,7 @@ export const ChecklistPluginGroup = memo(({
         <div className="flex size-5 shrink-0 items-center justify-center rounded-md border-[0.5px] border-divider-regular bg-components-icon-bg-midnight-solid shadow-xs">
           <span className="i-ri-download-line size-3.5 text-white" />
         </div>
-        <span className="min-w-0 grow truncate text-sm font-medium leading-5 text-text-primary">
+        <span className="min-w-0 grow truncate text-sm leading-5 font-medium text-text-primary">
           {t('nodes.common.pluginsNotInstalled', { ns: 'workflow', count: items.length })}
         </span>
         <PopoverClose
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index c13dbf683d..2de3743178 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
-import Button from '@/app/components/base/button'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
+import { Button } from '@/app/components/base/ui/button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
diff --git a/web/app/components/workflow/header/global-variable-button.tsx b/web/app/components/workflow/header/global-variable-button.tsx
index 1d9b9c806f..5d9dcaa590 100644
--- a/web/app/components/workflow/header/global-variable-button.tsx
+++ b/web/app/components/workflow/header/global-variable-button.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
-import Button from '@/app/components/base/button'
 import { GlobalVariable } from '@/app/components/base/icons/src/vender/line/others'
+import { Button } from '@/app/components/base/ui/button'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx
index a1aaf0f778..cc0934ca30 100644
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@@ -3,7 +3,7 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import useTheme from '@/hooks/use-theme'
 import { useInvalidAllLastRun, useRestoreWorkflow } from '@/service/use-workflow'
@@ -82,7 +82,7 @@ const HeaderInRestoring = ({
       <div>
         <RestoringTitle />
       </div>
-      <div className=" flex items-center justify-end gap-x-2">
+      <div className="flex items-center justify-end gap-x-2">
         <Button
           onClick={handleRestore}
           disabled={!canRestore}
diff --git a/web/app/components/workflow/header/header-in-view-history.tsx b/web/app/components/workflow/header/header-in-view-history.tsx
index 60a30a4fff..cd39ce605a 100644
--- a/web/app/components/workflow/header/header-in-view-history.tsx
+++ b/web/app/components/workflow/header/header-in-view-history.tsx
@@ -3,8 +3,8 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
+import { Button } from '@/app/components/base/ui/button'
 import Divider from '../../base/divider'
 import {
   useWorkflowRun,
diff --git a/web/app/components/workflow/header/version-history-button.tsx b/web/app/components/workflow/header/version-history-button.tsx
index 47a311f22f..5f162e36da 100644
--- a/web/app/components/workflow/header/version-history-button.tsx
+++ b/web/app/components/workflow/header/version-history-button.tsx
@@ -4,9 +4,9 @@ import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Button } from '@/app/components/base/ui/button'
 import useTheme from '@/hooks/use-theme'
 import { cn } from '@/utils/classnames'
-import Button from '../../base/button'
 import Tooltip from '../../base/tooltip'
 import ShortcutsName from '../shortcuts-name'
 import { getKeyboardKeyCodeBySystem } from '../utils'
@@ -21,7 +21,7 @@ const PopupContent = React.memo(() => {
   const { t } = useTranslation()
   return (
     <div className="flex items-center gap-x-1">
-      <div className="system-xs-medium px-0.5 text-text-secondary">
+      <div className="px-0.5 system-xs-medium text-text-secondary">
         {t('common.versionHistory', { ns: 'workflow' })}
       </div>
       <ShortcutsName keys={VERSION_HISTORY_SHORTCUT} bgColor="gray" textColor="secondary" />
diff --git a/web/app/components/workflow/nodes/_base/components/add-button.tsx b/web/app/components/workflow/nodes/_base/components/add-button.tsx
index 95a0a963fe..ff18957abf 100644
--- a/web/app/components/workflow/nodes/_base/components/add-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-button.tsx
@@ -4,7 +4,7 @@ import {
   RiAddLine,
 } from '@remixicon/react'
 import * as React from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
index 0f695bb884..6baa4098fb 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
@@ -4,7 +4,6 @@ import type { InputVar } from '../../../../types'
 import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
-import AddButton from '@/app/components/base/button/add-button'
 import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
 import { InputVarType } from '@/app/components/workflow/types'
 import { cn } from '@/utils/classnames'
@@ -79,9 +78,11 @@ const Form: FC<Props> = ({
     <div className={cn(className, 'space-y-2')}>
       {label && (
         <div className="mb-1 flex items-center justify-between">
-          <div className="system-xs-medium-uppercase flex h-6 items-center text-text-tertiary">{label}</div>
+          <div className="flex h-6 items-center system-xs-medium-uppercase text-text-tertiary">{label}</div>
           {isArrayLikeType && !isIteratorItemFile && (
-            <AddButton onClick={handleAddContext} />
+            <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddContext} data-testid="add-button">
+              <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+            </div>
           )}
         </div>
       )}
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
index be29fbbc22..08836cbd50 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
@@ -8,7 +8,7 @@ import type { HumanInputFormData } from '@/types/workflow'
 import * as React from 'react'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import SingleRunForm from '@/app/components/workflow/nodes/human-input/components/single-run-form'
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
index 232b3e6957..92ca3ed335 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
@@ -4,12 +4,12 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { ErrorHandleTypeEnum } from './types'
 
 type ErrorHandleTypeSelectorProps = {
@@ -83,7 +83,7 @@ const ErrorHandleTypeSelector = ({
                   }
                 </div>
                 <div className="grow">
-                  <div className="system-sm-semibold mb-0.5 text-text-secondary">{option.label}</div>
+                  <div className="mb-0.5 system-sm-semibold text-text-secondary">{option.label}</div>
                   <div className="system-xs-regular text-text-tertiary">{option.description}</div>
                 </div>
               </div>
diff --git a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
index e2e8448df8..21d4ade6ae 100644
--- a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps, MouseEventHandler } from 'react'
 import { RiInstallLine, RiLoader2Line } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import { TaskStatus } from '@/app/components/plugins/types'
 import { useCheckInstalled, useInstallPackageFromMarketPlace } from '@/service/use-plugins'
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
index 1019b995b6..023f210108 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
@@ -7,7 +7,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import {
   useNodesInteractions,
@@ -47,7 +47,7 @@ const Item = ({
         className="mr-1.5 shrink-0"
       />
       <div
-        className="system-xs-medium grow truncate text-text-secondary"
+        className="grow truncate system-xs-medium text-text-secondary"
         title={data.title}
       >
         {data.title}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
index 603e01d5ac..bc979eed60 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/operator.tsx
@@ -8,12 +8,12 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import {
   useAvailableBlocks,
@@ -98,7 +98,7 @@ const Operator = ({
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-10">
-        <div className="system-md-regular min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-text-secondary shadow-lg">
+        <div className="min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur system-md-regular text-text-secondary shadow-lg">
           <div className="p-1">
             <ChangeItem
               data={data}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
index 60d9c6f015..32ff6a4627 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
@@ -8,7 +8,6 @@ import type { TriggerWithProvider } from '@/app/components/workflow/block-select
 import type { Node, ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
 import { RiArrowDownSLine, RiCloseLine, RiErrorWarningFill, RiLoader4Line, RiMoreLine } from '@remixicon/react'
 import Badge from '@/app/components/base/badge'
-import AddButton from '@/app/components/base/button/add-button'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
@@ -130,7 +129,9 @@ const VarReferencePickerTrigger: FC<Props> = ({
         {isAddBtnTrigger
           ? (
               <div>
-                <AddButton onClick={() => {}}></AddButton>
+                <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={() => {}} data-testid="add-button">
+                  <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                </div>
               </div>
             )
           : (
@@ -148,8 +149,8 @@ const VarReferencePickerTrigger: FC<Props> = ({
                         <TypeSelector
                           noLeft
                           trigger={(
-                            <div className="flex h-8 items-center bg-components-input-bg-normal px-2 radius-md">
-                              <div className="mr-1 text-components-input-text-filled system-sm-regular">{varKindTypes.find(item => item.value === varKindType)?.label}</div>
+                            <div className="flex h-8 items-center radius-md bg-components-input-bg-normal px-2">
+                              <div className="mr-1 system-sm-regular text-components-input-text-filled">{varKindTypes.find(item => item.value === varKindType)?.label}</div>
                               <RiArrowDownSLine className="h-4 w-4 text-text-quaternary" />
                             </div>
                           )}
@@ -163,7 +164,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                       </div>
                     )
                   : (!hasValue && (
-                      <div className="ml-1.5 mr-1">
+                      <div className="mr-1 ml-1.5">
                         <Variable02 className={`h-4 w-4 ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'}`} />
                       </div>
                     ))}
@@ -246,7 +247,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                                             </div>
                                           </div>
                                           <div
-                                            className="ml-0.5 truncate text-center capitalize text-text-tertiary system-xs-regular"
+                                            className="ml-0.5 truncate text-center system-xs-regular text-text-tertiary capitalize"
                                             title={type}
                                             style={{ maxWidth: maxTypeWidth }}
                                           >
@@ -256,7 +257,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                                         </>
                                       )
                                     : (
-                                        <div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} text-ellipsis system-sm-regular`}>
+                                        <div className={`overflow-hidden ${readonly ? 'text-components-input-text-disabled' : 'text-components-input-text-placeholder'} system-sm-regular text-ellipsis`}>
                                           {isLoading
                                             ? (
                                                 <div className="flex items-center">
@@ -282,7 +283,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                     )}
                 {(hasValue && !readonly && !isInTable && !isJustShowValue) && (
                   <div
-                    className="group invisible absolute right-1 top-[50%] h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 hover:bg-state-base-hover group-hover/wrap:visible"
+                    className="group invisible absolute top-[50%] right-1 h-5 translate-y-[-50%] cursor-pointer rounded-md p-1 group-hover/wrap:visible hover:bg-state-base-hover"
                     onClick={handleClearVar}
                     data-testid="var-reference-picker-clear"
                   >
@@ -291,7 +292,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
                 )}
                 {!hasValue && valueTypePlaceHolder && (
                   <Badge
-                    className="absolute right-1 top-[50%] translate-y-[-50%] capitalize"
+                    className="absolute top-[50%] right-1 translate-y-[-50%] capitalize"
                     text={valueTypePlaceHolder}
                     uppercase={false}
                   />
@@ -300,14 +301,14 @@ const VarReferencePickerTrigger: FC<Props> = ({
             )}
         {!readonly && isInTable && (
           <RemoveButton
-            className="absolute right-1 top-0.5 hidden group-hover/picker-trigger-wrap:block"
+            className="absolute top-0.5 right-1 hidden group-hover/picker-trigger-wrap:block"
             onClick={() => onRemove?.()}
           />
         )}
 
         {!hasValue && typePlaceHolder && (
           <Badge
-            className="absolute right-2 top-1.5"
+            className="absolute top-1.5 right-2"
             text={typePlaceHolder}
             uppercase={false}
           />
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
index d2724bdb5f..6237cb6f0f 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import { RiPlayLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   canSingleRun: boolean
@@ -19,7 +19,7 @@ const NoData: FC<Props> = ({
   return (
     <div className="flex h-0 grow flex-col items-center justify-center">
       <ClockPlay className="h-8 w-8 text-text-quaternary" />
-      <div className="system-xs-regular my-2 text-text-tertiary">{t('debug.noData.description', { ns: 'workflow' })}</div>
+      <div className="my-2 system-xs-regular text-text-tertiary">{t('debug.noData.description', { ns: 'workflow' })}</div>
       {canSingleRun && (
         <Button
           className="flex"
diff --git a/web/app/components/workflow/nodes/code/panel.tsx b/web/app/components/workflow/nodes/code/panel.tsx
index 018baa38a8..9358507173 100644
--- a/web/app/components/workflow/nodes/code/panel.tsx
+++ b/web/app/components/workflow/nodes/code/panel.tsx
@@ -3,8 +3,7 @@ import type { CodeNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import AddButton from '@/app/components/base/button/add-button'
-import SyncButton from '@/app/components/base/button/sync-button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
@@ -74,8 +73,19 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
             !readOnly
               ? (
                   <div className="flex gap-2">
-                    <SyncButton popupContent={t(`${i18nPrefix}.syncFunctionSignature`, { ns: 'workflow' })} onClick={handleSyncFunctionSignature} />
-                    <AddButton onClick={handleAddVariable} />
+                    <Tooltip>
+                      <TooltipTrigger
+                        className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover"
+                        onClick={handleSyncFunctionSignature}
+                        data-testid="sync-button"
+                      >
+                        <span className="i-ri-refresh-line h-4 w-4 text-text-tertiary" />
+                      </TooltipTrigger>
+                      <TooltipContent>{t(`${i18nPrefix}.syncFunctionSignature`, { ns: 'workflow' })}</TooltipContent>
+                    </Tooltip>
+                    <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddVariable} data-testid="add-button">
+                      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                    </div>
                   </div>
                 )
               : undefined
@@ -110,12 +120,14 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
         />
       </div>
       <Split />
-      <div className="px-4 pb-2 pt-4">
+      <div className="px-4 pt-4 pb-2">
         <Field
           title={t(`${i18nPrefix}.outputVars`, { ns: 'workflow' })}
-          operations={
-            <AddButton onClick={handleAddOutputVariable} />
-          }
+          operations={(
+            <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddOutputVariable} data-testid="add-button">
+              <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+            </div>
+          )}
           required
         >
           <OutputVarList
diff --git a/web/app/components/workflow/nodes/data-source-empty/index.tsx b/web/app/components/workflow/nodes/data-source-empty/index.tsx
index a638a32bbc..ba896316b3 100644
--- a/web/app/components/workflow/nodes/data-source-empty/index.tsx
+++ b/web/app/components/workflow/nodes/data-source-empty/index.tsx
@@ -5,7 +5,7 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import { cn } from '@/utils/classnames'
 import { useReplaceDataSourceNode } from './hooks'
@@ -38,7 +38,7 @@ const DataSourceEmptyNode = ({ id, data }: NodeProps) => {
       }}
     >
       <div className="absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]">
-        <div className="system-2xs-semibold-uppercase flex h-5 items-center px-2.5 text-text-tertiary">
+        <div className="flex h-5 items-center px-2.5 system-2xs-semibold-uppercase text-text-tertiary">
           {t('blocks.datasource', { ns: 'workflow' })}
         </div>
       </div>
diff --git a/web/app/components/workflow/nodes/data-source/before-run-form.tsx b/web/app/components/workflow/nodes/data-source/before-run-form.tsx
index f8776e683e..677418048f 100644
--- a/web/app/components/workflow/nodes/data-source/before-run-form.tsx
+++ b/web/app/components/workflow/nodes/data-source/before-run-form.tsx
@@ -4,7 +4,7 @@ import type { CustomRunFormProps } from './types'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import LocalFile from '@/app/components/datasets/documents/create-from-pipeline/data-source/local-file'
 import OnlineDocuments from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-documents'
 import OnlineDrive from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-drive'
diff --git a/web/app/components/workflow/nodes/end/panel.tsx b/web/app/components/workflow/nodes/end/panel.tsx
index 2298135b07..a88777c82d 100644
--- a/web/app/components/workflow/nodes/end/panel.tsx
+++ b/web/app/components/workflow/nodes/end/panel.tsx
@@ -3,7 +3,6 @@ import type { EndNodeType } from './types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import AddButton from '@/app/components/base/button/add-button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import useConfig from './use-config'
@@ -32,7 +31,13 @@ const Panel: FC<NodePanelProps<EndNodeType>> = ({
           title={t(`${i18nPrefix}.output.variable`, { ns: 'workflow' })}
           required
           operations={
-            !readOnly ? <AddButton onClick={handleAddVariable} /> : undefined
+            !readOnly
+              ? (
+                  <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddVariable} data-testid="add-button">
+                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                  </div>
+                )
+              : undefined
           }
         >
           <VarList
diff --git a/web/app/components/workflow/nodes/http/components/authorization/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index 8af77804e1..439d62c922 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -6,9 +6,9 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import BaseInput from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { VarType } from '@/app/components/workflow/types'
@@ -29,7 +29,7 @@ type Props = {
 const Field = ({ title, isRequired, children }: { title: string, isRequired?: boolean, children: React.JSX.Element }) => {
   return (
     <div>
-      <div className="text-[13px] font-medium leading-8 text-text-secondary">
+      <div className="text-[13px] leading-8 font-medium text-text-secondary">
         {title}
         {isRequired && <span className="ml-0.5 text-text-destructive">*</span>}
       </div>
diff --git a/web/app/components/workflow/nodes/http/components/curl-panel.tsx b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
index 68d11a7ce5..ef1b28095c 100644
--- a/web/app/components/workflow/nodes/http/components/curl-panel.tsx
+++ b/web/app/components/workflow/nodes/http/components/curl-panel.tsx
@@ -4,9 +4,9 @@ import type { HttpNodeType } from '../types'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useNodesInteractions } from '@/app/components/workflow/hooks'
 import { parseCurl } from './curl-parser'
diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
index b7b0229424..1662e88b79 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/button-style-dropdown.spec.tsx
@@ -10,9 +10,8 @@ vi.mock('react-i18next', () => ({
   useTranslation: () => mockUseTranslation(),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  __esModule: true,
-  default: (props: {
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: (props: {
     variant?: string
     children?: React.ReactNode
     className?: string
diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
index e98a74e6b4..7dab3e75e9 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/form-content-preview.spec.tsx
@@ -35,9 +35,8 @@ vi.mock('@/app/components/base/badge', () => ({
   default: ({ children }: { children?: ReactNode }) => <div data-testid="badge">{children}</div>,
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  __esModule: true,
-  default: ({ children, variant }: { children?: ReactNode, variant?: string }) => (
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: ({ children, variant }: { children?: ReactNode, variant?: string }) => (
     <button type="button" data-testid={`action-${variant}`}>{children}</button>
   ),
 }))
diff --git a/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx b/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
index af488af817..08b3a30a1f 100644
--- a/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/__tests__/user-action.spec.tsx
@@ -27,9 +27,8 @@ vi.mock('@/app/components/base/input', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/button', () => ({
-  __esModule: true,
-  default: (props: {
+vi.mock('@/app/components/base/ui/button', () => ({
+  Button: (props: {
     children?: ReactNode
     onClick?: () => void
   }) => (
diff --git a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
index 457cf4c287..ae739e2baa 100644
--- a/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx
@@ -5,12 +5,12 @@ import {
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { UserActionButtonType } from '../types'
 
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
index 21a72b10b5..a5956db6c6 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
@@ -7,11 +7,11 @@ import { RiBugLine, RiCloseLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/compat'
 import { memo, useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import MailBodyInput from './mail-body-input'
@@ -83,7 +83,7 @@ const EmailConfigureModal = ({
       onClose={noop}
       className="relative max-w-[720px]! p-0!"
     >
-      <div className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
+      <div className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
         <RiCloseLine className="h-5 w-5 text-text-tertiary" />
       </div>
       <div className="space-y-1 p-6 pb-3">
@@ -92,7 +92,7 @@ const EmailConfigureModal = ({
       </div>
       <div className="space-y-5 px-6 py-3">
         <div>
-          <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">
+          <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
             {t(`${i18nPrefix}.deliveryMethod.emailConfigure.subject`, { ns: 'workflow' })}
           </div>
           <Input
@@ -103,7 +103,7 @@ const EmailConfigureModal = ({
           />
         </div>
         <div>
-          <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">
+          <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
             {t(`${i18nPrefix}.deliveryMethod.emailConfigure.body`, { ns: 'workflow' })}
           </div>
           <MailBodyInput
@@ -114,7 +114,7 @@ const EmailConfigureModal = ({
           />
         </div>
         <div>
-          <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">
+          <div className="mb-1 flex h-6 items-center system-sm-medium text-text-secondary">
             {t(`${i18nPrefix}.deliveryMethod.emailConfigure.recipient`, { ns: 'workflow' })}
           </div>
           <Recipient
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
index e38487e3c7..3afe390d1d 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
@@ -15,9 +15,9 @@ import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge/index'
-import Button from '@/app/components/base/button'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { cn } from '@/utils/classnames'
@@ -89,7 +89,7 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
     <>
       <div
         className={cn(
-          'group flex h-8 items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-1.5 pr-2 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
+          'group flex h-8 items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pr-2 pl-1.5 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
           isHovering && 'border-state-destructive-border bg-state-destructive-hover hover:bg-state-destructive-hover',
         )}
       >
@@ -104,7 +104,7 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
               <RiMailSendFill className="h-3.5 w-3.5 text-text-primary-on-surface" />
             </div>
           )}
-          <div className="system-xs-medium capitalize text-text-secondary">{method.type}</div>
+          <div className="system-xs-medium text-text-secondary capitalize">{method.type}</div>
           {method.type === DeliveryMethodType.Email
             && (method.config as EmailConfig)?.debug_mode
             && <Badge size="s" className="px-1! py-0.5!">DEBUG</Badge>}
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
index ac475daf58..27cf28c962 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx
@@ -7,8 +7,8 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import MemberList from './member-list'
 
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
index 2ea1786490..9045a4d2a6 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/test-email-sender.tsx
@@ -9,10 +9,10 @@ import { noop, unionBy } from 'es-toolkit/compat'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Modal from '@/app/components/base/modal'
 import { getInputVars as doGetInputVars } from '@/app/components/base/prompt-editor/constants'
+import { Button } from '@/app/components/base/ui/button'
 import FormItem from '@/app/components/workflow/nodes/_base/components/before-run-form/form-item'
 import {
   getNodeInfoById,
@@ -251,7 +251,7 @@ const EmailSenderModal = ({
       onClose={noop}
       className="relative max-w-[480px]! p-0!"
     >
-      <div className="absolute right-5 top-5 cursor-pointer p-1.5" onClick={onClose}>
+      <div className="absolute top-5 right-5 cursor-pointer p-1.5" onClick={onClose}>
         <RiCloseLine className="h-5 w-5 text-text-tertiary" />
       </div>
       <div className="space-y-1 p-6 pb-3">
@@ -306,12 +306,12 @@ const EmailSenderModal = ({
               onAdd={noop}
             />
           </div>
-          <div className="system-xs-regular px-6 pt-1 text-text-tertiary">
+          <div className="px-6 pt-1 system-xs-regular text-text-tertiary">
             <Trans
               i18nKey={`${i18nPrefix}.deliveryMethod.emailSender.tip`}
               ns="workflow"
               components={{
-                strong: <span onClick={jumpToEmailConfigModal} className="system-xs-regular cursor-pointer text-text-accent"></span>,
+                strong: <span onClick={jumpToEmailConfigModal} className="cursor-pointer system-xs-regular text-text-accent"></span>,
               }}
             />
           </div>
@@ -321,11 +321,11 @@ const EmailSenderModal = ({
       {generatedInputs.length > 0 && (
         <>
           <div className="px-6">
-            <Divider className="mb-2! mt-4! h-px! w-12! bg-divider-regular" />
+            <Divider className="mt-4! mb-2! h-px! w-12! bg-divider-regular" />
           </div>
           <div className="px-6 py-2">
             <div className="group flex h-6 cursor-pointer items-center" onClick={() => setCollapsed(!collapsed)}>
-              <div className="system-sm-semibold-uppercase mr-1 text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailSender.vars`, { ns: 'workflow' })}</div>
+              <div className="mr-1 system-sm-semibold-uppercase text-text-secondary">{t(`${i18nPrefix}.deliveryMethod.emailSender.vars`, { ns: 'workflow' })}</div>
               <RiArrowRightSFill className={cn('h-4 w-4 text-text-quaternary group-hover:text-text-primary', !collapsed && 'rotate-90')} />
             </div>
             <div className="system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.deliveryMethod.emailSender.varsTip`, { ns: 'workflow' })}</div>
diff --git a/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
index 670b1cfbc0..6d78bec6ae 100644
--- a/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx
@@ -3,10 +3,10 @@ import {
 } from '@remixicon/react'
 import { noop } from 'es-toolkit/compat'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import Modal from '@/app/components/base/modal'
 import PremiumBadge from '@/app/components/base/premium-badge'
+import { Button } from '@/app/components/base/ui/button'
 import { useModalContextSelector } from '@/context/modal-context'
 import { cn } from '@/utils/classnames'
 
@@ -37,11 +37,11 @@ const UpgradeModal: React.FC<UpgradeModalProps> = ({
           <RiMailSendFill className="h-6 w-6 text-text-primary-on-surface" />
         </div>
         <p
-          className="title-3xl-semi-bold bg-[linear-gradient(271deg,var(--components-input-border-active-prompt-1,#155AEF)_-12.85%,var(--components-input-border-active-prompt-2,#0BA5EC)_95.4%)] bg-clip-text text-transparent"
+          className="bg-[linear-gradient(271deg,var(--components-input-border-active-prompt-1,#155AEF)_-12.85%,var(--components-input-border-active-prompt-2,#0BA5EC)_95.4%)] bg-clip-text title-3xl-semi-bold text-transparent"
         >
           {t('nodes.humanInput.deliveryMethod.upgradeTip', { ns: 'workflow' })}
         </p>
-        <p className="system-md-regular mt-2 text-text-tertiary">
+        <p className="mt-2 system-md-regular text-text-tertiary">
           {t('nodes.humanInput.deliveryMethod.upgradeTipContent', { ns: 'workflow' })}
         </p>
       </div>
diff --git a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
index 2420e00d7b..1364941edf 100644
--- a/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/form-content-preview.tsx
@@ -1,14 +1,14 @@
 'use client'
 import type { FC } from 'react'
 import type { FormInputItem, UserAction } from '../types'
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import Button from '@/app/components/base/button'
 import { getButtonStyle } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
 import { Markdown } from '@/app/components/base/markdown'
+import { Button } from '@/app/components/base/ui/button'
 import { useStore } from '@/app/components/workflow/store'
 import useNodes from '@/app/components/workflow/store/workflow/use-nodes'
 import { Note, rehypeNotes, rehypeVariable, Variable } from './variable-in-markdown'
@@ -92,7 +92,7 @@ const FormContentPreview: FC<FormContentPreviewProps> = ({
             </Button>
           ))}
         </div>
-        <div className="mt-1 text-text-tertiary system-xs-regular">{t('nodes.humanInput.editor.previewTip', { ns: 'workflow' })}</div>
+        <div className="mt-1 system-xs-regular text-text-tertiary">{t('nodes.humanInput.editor.previewTip', { ns: 'workflow' })}</div>
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
index 7fd0c74000..dc735830c6 100644
--- a/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/single-run-form.tsx
@@ -1,5 +1,5 @@
 'use client'
-import type { ButtonProps } from '@/app/components/base/button'
+import type { ButtonProps } from '@/app/components/base/ui/button'
 import type { UserAction } from '@/app/components/workflow/nodes/human-input/types'
 import type { HumanInputFormData } from '@/types/workflow'
 import { RiArrowLeftLine } from '@remixicon/react'
@@ -7,9 +7,9 @@ import * as React from 'react'
 
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import ContentItem from '@/app/components/base/chat/chat/answer/human-input-content/content-item'
 import { getButtonStyle, initializeInputs, splitByOutputVar } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
+import { Button } from '@/app/components/base/ui/button'
 
 type Props = {
   nodeName: string
@@ -49,11 +49,11 @@ const FormContent = ({
     <>
       {showBackButton && (
         <div className="flex items-center p-4 pb-1">
-          <div className="system-sm-semibold-uppercase flex cursor-pointer items-center text-text-accent" onClick={handleBack}>
+          <div className="flex cursor-pointer items-center system-sm-semibold-uppercase text-text-accent" onClick={handleBack}>
             <RiArrowLeftLine className="mr-1 h-4 w-4" />
             {t('nodes.humanInput.singleRun.back', { ns: 'workflow' })}
           </div>
-          <div className="system-xs-regular mx-1 text-divider-deep">/</div>
+          <div className="mx-1 system-xs-regular text-divider-deep">/</div>
           <div className="system-sm-semibold-uppercase text-text-secondary">{nodeName}</div>
         </div>
       )}
diff --git a/web/app/components/workflow/nodes/human-input/components/user-action.tsx b/web/app/components/workflow/nodes/human-input/components/user-action.tsx
index ca0398eb7f..6ef5609a64 100644
--- a/web/app/components/workflow/nodes/human-input/components/user-action.tsx
+++ b/web/app/components/workflow/nodes/human-input/components/user-action.tsx
@@ -5,8 +5,8 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import ButtonStyleDropdown from './button-style-dropdown'
 
diff --git a/web/app/components/workflow/nodes/human-input/panel.tsx b/web/app/components/workflow/nodes/human-input/panel.tsx
index 2d09d2848e..24e2d6c8dc 100644
--- a/web/app/components/workflow/nodes/human-input/panel.tsx
+++ b/web/app/components/workflow/nodes/human-input/panel.tsx
@@ -14,9 +14,9 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
@@ -100,7 +100,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
       </div>
       {/* form content */}
       <div
-        className={cn('px-4 py-2', isExpandFormContent && 'fixed bottom-[8px] right-[4px] top-[244px] z-10 flex flex-col rounded-b-2xl bg-components-panel-bg')}
+        className={cn('px-4 py-2', isExpandFormContent && 'fixed top-[244px] right-[4px] bottom-[8px] z-10 flex flex-col rounded-b-2xl bg-components-panel-bg')}
         style={{
           width: isExpandFormContent ? nodePanelWidth : '100%',
         }}
@@ -113,7 +113,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
             />
           </div>
           {!readOnly && (
-            <div className="flex items-center ">
+            <div className="flex items-center">
               <Button
                 variant="ghost"
                 size="small"
@@ -179,7 +179,7 @@ const Panel: FC<NodePanelProps<HumanInputNodeType>> = ({
           )}
         </div>
         {!inputs.user_actions.length && (
-          <div className="system-xs-regular flex items-center justify-center radius-lg bg-background-section p-3 text-text-tertiary">{t(`${i18nPrefix}.userActions.emptyTip`, { ns: 'workflow' })}</div>
+          <div className="flex items-center justify-center radius-lg bg-background-section p-3 system-xs-regular text-text-tertiary">{t(`${i18nPrefix}.userActions.emptyTip`, { ns: 'workflow' })}</div>
         )}
         {inputs.user_actions.length > 0 && (
           <div className="space-y-2">
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-add.tsx b/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
index 6aa25ddc58..3b6d729078 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-add.tsx
@@ -10,12 +10,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 
 type ConditionAddProps = {
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
index e9d3092e6c..43fc5c391a 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
@@ -6,12 +6,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
 
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
index 1ac411d4e1..be4df1501d 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
@@ -11,13 +11,13 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import { VarType } from '@/app/components/workflow/types'
 import { variableTransformer } from '@/app/components/workflow/utils'
@@ -147,7 +147,7 @@ const ConditionNumberInput = ({
         }
         {
           numberVarType === NumberVarType.constant && (
-            <div className=" relative">
+            <div className="relative">
               <input
                 className={cn('block w-full appearance-none bg-transparent px-2 text-[13px] text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder', unit && 'pr-6')}
                 type="number"
@@ -157,7 +157,7 @@ const ConditionNumberInput = ({
                 onFocus={setFocus}
                 onBlur={setBlur}
               />
-              {!isFocus && unit && <div className="system-sm-regular absolute right-2 top-[50%] translate-y-[-50%] text-text-tertiary">{unit}</div>}
+              {!isFocus && unit && <div className="absolute top-[50%] right-2 translate-y-[-50%] system-sm-regular text-text-tertiary">{unit}</div>}
             </div>
           )
         }
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index b9abd80f42..e03e43ea70 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -12,8 +12,8 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
-import Button from '@/app/components/base/button'
 import { PortalSelect as Select } from '@/app/components/base/select'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { VarType } from '../../../types'
 import { SUB_VARIABLES } from '../../constants'
@@ -99,19 +99,19 @@ const ConditionWrap: FC<Props> = ({
                 className={cn(
                   'group relative radius-lg bg-components-panel-bg',
                   willDeleteCaseId === item.case_id && 'bg-state-destructive-hover',
-                  !isSubVariable && 'min-h-[40px] px-3 py-1 ',
+                  !isSubVariable && 'min-h-[40px] px-3 py-1',
                   isSubVariable && 'px-1 py-2',
                 )}
               >
                 {!isSubVariable && (
                   <>
                     <RiDraggable className={cn(
-                      'handle absolute left-1 top-2 hidden h-3 w-3 cursor-pointer text-text-quaternary',
+                      'handle absolute top-2 left-1 hidden h-3 w-3 cursor-pointer text-text-quaternary',
                       casesLength > 1 && 'group-hover:block',
                     )}
                     />
                     <div className={cn(
-                      'absolute left-4 text-[13px] font-semibold leading-4 text-text-secondary',
+                      'absolute left-4 text-[13px] leading-4 font-semibold text-text-secondary',
                       casesLength === 1 ? 'top-2.5' : 'top-1',
                     )}
                     >
@@ -161,7 +161,7 @@ const ConditionWrap: FC<Props> = ({
                   'flex items-center justify-between pr-[30px]',
                   !item.conditions.length && !isSubVariable && 'mt-1',
                   !item.conditions.length && isSubVariable && 'mt-2',
-                  !isSubVariable && ' pl-[60px]',
+                  !isSubVariable && 'pl-[60px]',
                 )}
                 >
                   {isSubVariable
diff --git a/web/app/components/workflow/nodes/if-else/panel.tsx b/web/app/components/workflow/nodes/if-else/panel.tsx
index e20b1ea956..e8dae6fad9 100644
--- a/web/app/components/workflow/nodes/if-else/panel.tsx
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -8,7 +8,7 @@ import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import ConditionWrap from './components/condition-wrap'
 import useConfig from './use-config'
@@ -78,7 +78,7 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
         title={t(`${i18nPrefix}.else`, { ns: 'workflow' })}
         className="px-4 py-2"
       >
-        <div className="text-xs font-normal leading-[18px] text-text-tertiary">{t(`${i18nPrefix}.elseDescription`, { ns: 'workflow' })}</div>
+        <div className="text-xs leading-[18px] font-normal text-text-tertiary">{t(`${i18nPrefix}.elseDescription`, { ns: 'workflow' })}</div>
       </Field>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
index 88b71286b3..a7bba6879e 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx
@@ -1,7 +1,7 @@
 import type { ChunkStructureEnum } from '../../types'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
 import OptionCard from '../option-card'
 import { useChunkStructure } from './hooks'
@@ -64,7 +64,7 @@ const ChunkStructure = ({
                   className="w-full"
                   variant="secondary-accent"
                 >
-                  <span className="i-ri-add-line mr-1 h-4 w-4" />
+                  <span className="mr-1 i-ri-add-line h-4 w-4" />
                   {t('nodes.knowledgeBase.chooseChunkStructure', { ns: 'workflow' })}
                 </Button>
               )}
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
index eb377d7fd4..5018bbc784 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
@@ -3,12 +3,12 @@ import type { ChunkStructureEnum } from '../../types'
 import type { Option } from './type'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import OptionCard from '../option-card'
 
 type SelectorProps = {
@@ -64,7 +64,7 @@ const Selector = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className="z-10">
         <div className="w-[404px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]">
-          <div className="system-sm-semibold px-3 pt-3.5 text-text-primary">
+          <div className="px-3 pt-3.5 system-sm-semibold text-text-primary">
             {t('nodes.knowledgeBase.changeChunkStructure', { ns: 'workflow' })}
           </div>
           <div className="space-y-1 p-3 pt-2">
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
index a513280dec..fe6d83d244 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx
@@ -5,7 +5,6 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
 import SelectDataset from '@/app/components/app/configuration/dataset-config/select-dataset'
-import AddButton from '@/app/components/base/button/add-button'
 
 type Props = {
   selectedIds: string[]
@@ -27,7 +26,9 @@ const AddDataset: FC<Props> = ({
   }, [onChange, hideModal])
   return (
     <div>
-      <AddButton onClick={showModal} />
+      <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={showModal} data-testid="add-button">
+        <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+      </div>
       {isShowModal && (
         <SelectDataset
           isShow={isShowModal}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
index fec8e96541..e94caf7b30 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx
@@ -9,13 +9,13 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import MetadataIcon from './metadata-icon'
 
 const AddCondition = ({
@@ -69,7 +69,7 @@ const AddCondition = ({
               filteredMetadataList?.map(metadata => (
                 <div
                   key={metadata.name}
-                  className="system-sm-medium flex h-6 cursor-pointer items-center rounded-md px-3 text-text-secondary hover:bg-state-base-hover"
+                  className="flex h-6 cursor-pointer items-center rounded-md px-3 system-sm-medium text-text-secondary hover:bg-state-base-hover"
                 >
                   <div className="mr-1 p-px">
                     <MetadataIcon type={metadata.type} />
@@ -81,7 +81,7 @@ const AddCondition = ({
                   >
                     {metadata.name}
                   </div>
-                  <div className="system-xs-regular shrink-0 text-text-tertiary">{metadata.type}</div>
+                  <div className="shrink-0 system-xs-regular text-text-tertiary">{metadata.type}</div>
                 </div>
               ))
             }
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
index 4af1bc00f8..550142db96 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
@@ -8,12 +8,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import {
   getOperators,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
index ab0c027e68..b24a41589a 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
@@ -1,12 +1,12 @@
 import { RiArrowDownSLine } from '@remixicon/react'
 import { capitalize } from 'es-toolkit/string'
 import { useState } from 'react'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 
 export type ConditionValueMethodProps = {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
index d855c8ebea..67939a6448 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
@@ -4,12 +4,12 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { MetadataFilteringModeEnum } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 
 type MetadataFilterSelectorProps = {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
index bb43f762d0..1553da1e1f 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx
@@ -5,12 +5,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import MetadataPanel from './metadata-panel'
 
 const MetadataTrigger = ({
@@ -53,7 +53,7 @@ const MetadataTrigger = ({
         >
           <RiFilter3Line className="mr-1 h-3.5 w-3.5" />
           {t('nodes.knowledgeRetrieval.metadata.panel.conditions', { ns: 'workflow' })}
-          <div className="system-2xs-medium-uppercase ml-1 flex items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary">
+          <div className="ml-1 flex items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary">
             {metadataFilteringConditions?.conditions.length || 0}
           </div>
         </Button>
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
index c3eef42a39..ec5399974b 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
@@ -10,12 +10,12 @@ import * as React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ConfigRetrievalContent from '@/app/components/app/configuration/dataset-config/params-config/config-content'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { DATASET_DEFAULT } from '@/config'
 import { RETRIEVE_TYPE } from '@/types/app'
 import { cn } from '@/utils/classnames'
@@ -140,7 +140,7 @@ const RetrievalConfig: FC<Props> = ({
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div className="w-[404px] rounded-2xl border border-components-panel-border bg-components-panel-bg  px-4 pb-4 pt-3  shadow-xl">
+        <div className="w-[404px] rounded-2xl border border-components-panel-border bg-components-panel-bg px-4 pt-3 pb-4 shadow-xl">
           <ConfigRetrievalContent
             datasetConfigs={datasetConfigs}
             onChange={handleChange}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
index 8ba827fb96..840e293cd7 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
@@ -3,8 +3,8 @@ import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
 import { cn } from '@/utils/classnames'
 import { checkJsonDepth } from '../../utils'
@@ -90,7 +90,7 @@ const JsonImporter: FC<JsonImporterProps> = ({
         <button
           type="button"
           className={cn(
-            'system-xs-medium flex shrink-0 rounded-md px-1.5 py-1 text-text-tertiary hover:bg-components-button-ghost-bg-hover',
+            'flex shrink-0 rounded-md px-1.5 py-1 system-xs-medium text-text-tertiary hover:bg-components-button-ghost-bg-hover',
             open && 'bg-components-button-ghost-bg-hover',
           )}
         >
@@ -100,11 +100,11 @@ const JsonImporter: FC<JsonImporterProps> = ({
       <PortalToFollowElemContent className="z-100">
         <div className="flex w-[400px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
           {/* Title */}
-          <div className="relative px-3 pb-1 pt-3.5">
-            <div className="absolute bottom-0 right-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
+          <div className="relative px-3 pt-3.5 pb-1">
+            <div className="absolute right-2.5 bottom-0 flex h-8 w-8 items-center justify-center" onClick={onClose}>
               <RiCloseLine className="h-4 w-4 text-text-tertiary" />
             </div>
-            <div className="system-xl-semibold flex pl-1 pr-8 text-text-primary">
+            <div className="flex pr-8 pl-1 system-xl-semibold text-text-primary">
               {t('nodes.llm.jsonSchema.import', { ns: 'workflow' })}
             </div>
           </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
index 164e7c3c29..b84e87269f 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx
@@ -2,8 +2,8 @@ import type { FC } from 'react'
 import type { SchemaRoot } from '../../types'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
 import { cn } from '@/utils/classnames'
@@ -207,11 +207,11 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
   return (
     <div className="flex h-full flex-col">
       {/* Header */}
-      <div className="relative flex p-6 pb-3 pr-14">
-        <div className="grow truncate text-text-primary title-2xl-semi-bold">
+      <div className="relative flex p-6 pr-14 pb-3">
+        <div className="grow truncate title-2xl-semi-bold text-text-primary">
           {t('nodes.llm.jsonSchema.title', { ns: 'workflow' })}
         </div>
-        <div className="absolute right-5 top-5 flex h-8 w-8 items-center justify-center p-1.5" onClick={onClose}>
+        <div className="absolute top-5 right-5 flex h-8 w-8 items-center justify-center p-1.5" onClick={onClose}>
           <span className="i-ri-close-line h-[18px] w-[18px] text-text-tertiary" />
         </div>
       </div>
@@ -260,7 +260,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
             <Button variant="secondary" onClick={handleResetDefaults}>
               {t('nodes.llm.jsonSchema.resetDefaults', { ns: 'workflow' })}
             </Button>
-            <Divider type="vertical" className="ml-1 mr-0 h-4" />
+            <Divider type="vertical" className="mr-0 ml-1 h-4" />
           </div>
           <div className="flex items-center gap-x-2">
             <Button variant="secondary" onClick={handleCancel}>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
index 377e7e3b6a..4f7b2ceb0c 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx
@@ -4,8 +4,8 @@ import { RiArrowLeftLine, RiCloseLine, RiSparklingLine } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { getValidationErrorMessage, validateSchemaAgainstDraft7 } from '../../../utils'
 import CodeEditor from '../code-editor'
 import ErrorMessage from '../error-message'
@@ -68,15 +68,15 @@ const GeneratedResult: FC<GeneratedResultProps> = ({
           </div>
         ) : (
           <>
-            <div className="absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
+            <div className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
               <RiCloseLine className="h-4 w-4 text-text-tertiary" />
             </div>
             {/* Title */}
-            <div className="flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5">
-              <div className="system-xl-semibold flex pl-1 pr-8 text-text-primary">
+            <div className="flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1">
+              <div className="flex pr-8 pl-1 system-xl-semibold text-text-primary">
                 {t('nodes.llm.jsonSchema.generatedResult', { ns: 'workflow' })}
               </div>
-              <div className="system-xs-regular flex px-1 text-text-tertiary">
+              <div className="flex px-1 system-xs-regular text-text-tertiary">
                 {t('nodes.llm.jsonSchema.resultTip', { ns: 'workflow' })}
               </div>
             </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
index 8c7eb854dd..1a7bce0361 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx
@@ -5,9 +5,9 @@ import { RiCloseLine, RiSparklingFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 
 type ModelInfo = {
@@ -44,21 +44,21 @@ const PromptEditor: FC<PromptEditorProps> = ({
 
   return (
     <div className="relative flex w-[480px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl shadow-shadow-shadow-9">
-      <div className="absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
+      <div className="absolute top-2.5 right-2.5 flex h-8 w-8 items-center justify-center" onClick={onClose}>
         <RiCloseLine className="h-4 w-4 text-text-tertiary" />
       </div>
       {/* Title */}
-      <div className="flex flex-col gap-y-[0.5px] px-3 pb-1 pt-3.5">
-        <div className="system-xl-semibold flex pl-1 pr-8 text-text-primary">
+      <div className="flex flex-col gap-y-[0.5px] px-3 pt-3.5 pb-1">
+        <div className="flex pr-8 pl-1 system-xl-semibold text-text-primary">
           {t('nodes.llm.jsonSchema.generateJsonSchema', { ns: 'workflow' })}
         </div>
-        <div className="system-xs-regular flex px-1 text-text-tertiary">
+        <div className="flex px-1 system-xs-regular text-text-tertiary">
           {t('nodes.llm.jsonSchema.generationTip', { ns: 'workflow' })}
         </div>
       </div>
       {/* Content */}
       <div className="flex flex-col gap-y-1 px-4 py-2">
-        <div className="system-sm-semibold-uppercase flex h-6 items-center text-text-secondary">
+        <div className="flex h-6 items-center system-sm-semibold-uppercase text-text-secondary">
           {t('modelProvider.model', { ns: 'common' })}
         </div>
         <ModelParameterModal
@@ -73,7 +73,7 @@ const PromptEditor: FC<PromptEditorProps> = ({
         />
       </div>
       <div className="flex flex-col gap-y-1 px-4 py-2">
-        <div className="system-sm-semibold-uppercase flex h-6 items-center text-text-secondary">
+        <div className="flex h-6 items-center system-sm-semibold-uppercase text-text-secondary">
           <span>{t('nodes.llm.jsonSchema.instruction', { ns: 'workflow' })}</span>
           <Tooltip popupContent={t('nodes.llm.jsonSchema.promptTooltip', { ns: 'workflow' })} />
         </div>
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
index 7e88b70e15..d25ee83f80 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/add-field.tsx
@@ -2,7 +2,7 @@ import { RiAddCircleFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useMittContext } from './context'
 import { useVisualEditorStore } from './store'
 
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
index 8aad824008..3601895942 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/advanced-actions.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { getKeyboardKeyCodeBySystem } from '@/app/components/workflow/utils'
 
diff --git a/web/app/components/workflow/nodes/llm/components/structure-output.tsx b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
index a3320e9983..d60af7bf55 100644
--- a/web/app/components/workflow/nodes/llm/components/structure-output.tsx
+++ b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
@@ -6,7 +6,7 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import ShowPanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
 import { cn } from '@/utils/classnames'
 import { Type } from '../types'
@@ -39,7 +39,7 @@ const StructureOutput: FC<Props> = ({
       <div className="flex justify-between">
         <div className="flex items-center leading-[18px]">
           <div className="code-sm-semibold text-text-secondary">structured_output</div>
-          <div className="system-xs-regular ml-2 text-text-tertiary">object</div>
+          <div className="ml-2 system-xs-regular text-text-tertiary">object</div>
         </div>
         <Button
           size="small"
@@ -58,7 +58,7 @@ const StructureOutput: FC<Props> = ({
             />
           )
         : (
-            <div className="system-xs-regular mt-1.5 flex h-10 cursor-pointer items-center justify-center radius-lg bg-background-section text-text-tertiary" onClick={showConfigModal}>{t('structOutput.notConfiguredTip', { ns: 'app' })}</div>
+            <div className="mt-1.5 flex h-10 cursor-pointer items-center justify-center radius-lg bg-background-section system-xs-regular text-text-tertiary" onClick={showConfigModal}>{t('structOutput.notConfiguredTip', { ns: 'app' })}</div>
           )}
 
       {showConfig && (
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 7789b3989f..f465366ee9 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -4,7 +4,6 @@ import type { NodePanelProps } from '@/app/components/workflow/types'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import AddButton2 from '@/app/components/base/button/add-button'
 import { toast } from '@/app/components/base/ui/toast'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
@@ -146,7 +145,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
               filterVar={filterVar}
             />
             {shouldShowContextTip && (
-              <div className="text-xs font-normal leading-[18px] text-[#DC6803]">{t(`${i18nPrefix}.notSetContextInPromptTip`, { ns: 'workflow' })}</div>
+              <div className="text-xs leading-[18px] font-normal text-[#DC6803]">{t(`${i18nPrefix}.notSetContextInPromptTip`, { ns: 'workflow' })}</div>
             )}
           </>
         </Field>
@@ -173,7 +172,13 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
           <Field
             title={t('nodes.templateTransform.inputVars', { ns: 'workflow' })}
             operations={
-              !readOnly ? <AddButton2 onClick={handleAddEmptyVariable} /> : undefined
+              !readOnly
+                ? (
+                    <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddEmptyVariable} data-testid="add-button">
+                      <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                    </div>
+                  )
+                : undefined
             }
           >
             <VarList
diff --git a/web/app/components/workflow/nodes/loop/components/condition-add.tsx b/web/app/components/workflow/nodes/loop/components/condition-add.tsx
index 35e0747319..1d9be045d2 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-add.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-add.tsx
@@ -10,12 +10,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 
 type ConditionAddProps = {
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
index ecbdcb7355..8ec128a2e6 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
@@ -6,12 +6,12 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
 
diff --git a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
index 1ac411d4e1..be4df1501d 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
@@ -11,13 +11,13 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import { VarType } from '@/app/components/workflow/types'
 import { variableTransformer } from '@/app/components/workflow/utils'
@@ -147,7 +147,7 @@ const ConditionNumberInput = ({
         }
         {
           numberVarType === NumberVarType.constant && (
-            <div className=" relative">
+            <div className="relative">
               <input
                 className={cn('block w-full appearance-none bg-transparent px-2 text-[13px] text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder', unit && 'pr-6')}
                 type="number"
@@ -157,7 +157,7 @@ const ConditionNumberInput = ({
                 onFocus={setFocus}
                 onBlur={setBlur}
               />
-              {!isFocus && unit && <div className="system-sm-regular absolute right-2 top-[50%] translate-y-[-50%] text-text-tertiary">{unit}</div>}
+              {!isFocus && unit && <div className="absolute top-[50%] right-2 translate-y-[-50%] system-sm-regular text-text-tertiary">{unit}</div>}
             </div>
           )
         }
diff --git a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
index d29eb5c432..aa52956470 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
@@ -8,8 +8,8 @@ import {
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { PortalSelect as Select } from '@/app/components/base/select'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { VarType } from '../../../types'
 import { useGetAvailableVars } from '../../variable-assigner/hooks'
@@ -76,7 +76,7 @@ const ConditionWrap: FC<Props> = ({
         <div
           className={cn(
             'group relative radius-lg bg-components-panel-bg',
-            !isSubVariable && 'min-h-[40px] px-3 py-1 ',
+            !isSubVariable && 'min-h-[40px] px-3 py-1',
             isSubVariable && 'px-1 py-2',
           )}
         >
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index e0a11edc11..6de836be22 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -8,13 +8,12 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Field from '@/app/components/app/configuration/config-var/config-modal/field'
 import ConfigSelect from '@/app/components/app/configuration/config-var/config-select'
-import Button from '@/app/components/base/button'
-import AddButton from '@/app/components/base/button/add-button'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Select from '@/app/components/base/select'
 import Switch from '@/app/components/base/switch'
 import Textarea from '@/app/components/base/textarea'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ChangeType } from '@/app/components/workflow/types'
 import { checkKeys } from '@/utils/var'
@@ -120,7 +119,9 @@ const AddExtractParameter: FC<Props> = ({
   return (
     <div>
       {isAdd && (
-        <AddButton className="mx-1" onClick={showAddModal} />
+        <div className="mx-1 cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={showAddModal} data-testid="add-button">
+          <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+        </div>
       )}
       {isShowModal && (
         <Modal
@@ -167,7 +168,7 @@ const AddExtractParameter: FC<Props> = ({
               </Field>
               <Field title={t(`${i18nPrefix}.addExtractParameterContent.required`, { ns: 'workflow' })}>
                 <>
-                  <div className="mb-1.5 text-xs font-normal leading-[18px] text-text-tertiary">{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`, { ns: 'workflow' })}</div>
+                  <div className="mb-1.5 text-xs leading-[18px] font-normal text-text-tertiary">{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`, { ns: 'workflow' })}</div>
                   <Switch size="lg" value={param.required ?? false} onChange={handleParamChange('required')} />
                 </>
               </Field>
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx
index 13abd3b19d..5fc8f224fe 100644
--- a/web/app/components/workflow/nodes/start/panel.tsx
+++ b/web/app/components/workflow/nodes/start/panel.tsx
@@ -4,7 +4,6 @@ import type { InputVar, NodePanelProps } from '@/app/components/workflow/types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
-import AddButton from '@/app/components/base/button/add-button'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm'
@@ -46,7 +45,13 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
         <Field
           title={t(`${i18nPrefix}.inputField`, { ns: 'workflow' })}
           operations={
-            !readOnly ? <AddButton onClick={showAddVarModal} /> : undefined
+            !readOnly
+              ? (
+                  <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={showAddVarModal} data-testid="add-button">
+                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                  </div>
+                )
+              : undefined
           }
         >
           <>
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
index 9c47b59cb0..08f96d8999 100644
--- a/web/app/components/workflow/nodes/template-transform/panel.tsx
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -6,7 +6,6 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import AddButton from '@/app/components/base/button/add-button'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
@@ -42,7 +41,13 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
         <Field
           title={t(`${i18nPrefix}.inputVars`, { ns: 'workflow' })}
           operations={
-            !readOnly ? <AddButton onClick={handleAddEmptyVariable} /> : undefined
+            !readOnly
+              ? (
+                  <div className="cursor-pointer rounded-md p-1 select-none hover:bg-state-base-hover" onClick={handleAddEmptyVariable} data-testid="add-button">
+                    <span className="i-ri-add-line h-4 w-4 text-text-tertiary" />
+                  </div>
+                )
+              : undefined
           }
         >
           <VarList
diff --git a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
index 5011cf9486..7ccf137899 100644
--- a/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
+++ b/web/app/components/workflow/nodes/tool/components/tool-form/item.tsx
@@ -8,8 +8,8 @@ import {
   RiBracesLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
@@ -97,7 +97,7 @@ const ToolFormItem: FC<Props> = ({
         <div className="flex h-6 items-center">
           <div className="system-sm-medium text-text-secondary">{label[language] || label.en_US}</div>
           {required && (
-            <div className="system-xs-regular ml-1 text-text-destructive-secondary">*</div>
+            <div className="ml-1 system-xs-regular text-text-destructive-secondary">*</div>
           )}
           {!showDescription && tooltip && (
             <Tooltip
@@ -112,12 +112,12 @@ const ToolFormItem: FC<Props> = ({
           )}
           {showSchemaButton && (
             <>
-              <div className="system-xs-regular ml-1 mr-0.5 text-text-quaternary">·</div>
+              <div className="mr-0.5 ml-1 system-xs-regular text-text-quaternary">·</div>
               <Button
                 variant="ghost"
                 size="small"
                 onClick={showSchema}
-                className="system-xs-regular px-1 text-text-tertiary"
+                className="px-1 system-xs-regular text-text-tertiary"
               >
                 <RiBracesLine className="mr-1 size-3.5" />
                 <span>JSON Schema</span>
@@ -126,7 +126,7 @@ const ToolFormItem: FC<Props> = ({
           )}
         </div>
         {showDescription && tooltip && (
-          <div className="body-xs-regular break-words pb-0.5 text-text-tertiary">
+          <div className="pb-0.5 body-xs-regular break-words text-text-tertiary">
             {renderDescriptionWithLinks(tooltip[language] || tooltip.en_US)}
           </div>
         )}
diff --git a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
index a862fdc1f4..68810fb068 100644
--- a/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
+++ b/web/app/components/workflow/nodes/trigger-plugin/components/trigger-form/item.tsx
@@ -8,8 +8,8 @@ import {
   RiBracesLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { SchemaModal } from '@/app/components/plugins/plugin-detail-panel/tool-selector/components'
@@ -54,7 +54,7 @@ const TriggerFormItem: FC<Props> = ({
         <div className="flex h-6 items-center">
           <div className="system-sm-medium text-text-secondary">{label[language] || label.en_US}</div>
           {required && (
-            <div className="system-xs-regular ml-1 text-text-destructive-secondary">*</div>
+            <div className="ml-1 system-xs-regular text-text-destructive-secondary">*</div>
           )}
           {!showDescription && tooltip && (
             <Tooltip
@@ -69,12 +69,12 @@ const TriggerFormItem: FC<Props> = ({
           )}
           {showSchemaButton && (
             <>
-              <div className="system-xs-regular ml-1 mr-0.5 text-text-quaternary">·</div>
+              <div className="mr-0.5 ml-1 system-xs-regular text-text-quaternary">·</div>
               <Button
                 variant="ghost"
                 size="small"
                 onClick={showSchema}
-                className="system-xs-regular px-1 text-text-tertiary"
+                className="px-1 system-xs-regular text-text-tertiary"
               >
                 <RiBracesLine className="mr-1 size-3.5" />
                 <span>JSON Schema</span>
@@ -83,7 +83,7 @@ const TriggerFormItem: FC<Props> = ({
           )}
         </div>
         {showDescription && tooltip && (
-          <div className="body-xs-regular pb-0.5 text-text-tertiary">{tooltip[language] || tooltip.en_US}</div>
+          <div className="pb-0.5 body-xs-regular text-text-tertiary">{tooltip[language] || tooltip.en_US}</div>
         )}
       </div>
       <FormInputItem
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
index dde5b5a382..38ef5fb901 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
@@ -18,7 +18,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { useStore } from '../../store'
 import { useLink } from './hooks'
@@ -71,7 +71,7 @@ const LinkEditorComponent = ({
               className={cn(
                 'nodrag nopan z-10 inline-flex w-max items-center rounded-md border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg',
                 !linkOperatorShow && 'p-1 shadow-md',
-                linkOperatorShow && 'system-xs-medium p-0.5 text-text-tertiary shadow-sm',
+                linkOperatorShow && 'p-0.5 system-xs-medium text-text-tertiary shadow-sm',
               )}
               style={floatingStyles}
               ref={refs.setFloating}
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
index b056533d2d..a44bd014f8 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
@@ -5,7 +5,7 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import { cn } from '@/utils/classnames'
 import BoolValue from './bool-value'
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
index 6188013694..8dc21edd09 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-value-list.tsx
@@ -5,8 +5,8 @@ import { produce } from 'immer'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 
 type Props = {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
index b82eaa66ac..0e1449e5a8 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal-trigger.tsx
@@ -3,12 +3,12 @@ import type { ConversationVariable } from '@/app/components/workflow/types'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VariableModal from '@/app/components/workflow/panel/chat-variable-panel/components/variable-modal'
 
 type Props = {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
index 41a90ce8ce..2a5c71d4b9 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
 import type { ObjectValueItem } from './variable-modal.helpers'
 import { RiDraftLine, RiInputField } from '@remixicon/react'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { ChatVarType } from '../type'
@@ -17,7 +17,7 @@ type SectionTitleProps = {
 }
 
 const SectionTitle = ({ children }: SectionTitleProps) => (
-  <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{children}</div>
+  <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{children}</div>
 )
 
 type NameSectionProps = {
@@ -111,7 +111,7 @@ export const ValueSection = ({
   value,
 }: ValueSectionProps) => (
   <div className="mb-4">
-    <div className="mb-1 flex h-6 items-center justify-between text-text-secondary system-sm-semibold">
+    <div className="mb-1 flex h-6 items-center justify-between system-sm-semibold text-text-secondary">
       <div>{t('chatVariable.modal.value', { ns: 'workflow' })}</div>
       {toggleLabelKey && (
         <Button
@@ -128,7 +128,7 @@ export const ValueSection = ({
     <div className="flex">
       {type === ChatVarType.String && (
         <textarea
-          className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-hidden system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
+          className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:system-sm-regular placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
           value={(value as string) || ''}
           placeholder={t('chatVariable.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
           onChange={e => onArrayChange([e.target.value])}
@@ -178,7 +178,7 @@ export const ValueSection = ({
         />
       )}
       {editInJSON && (
-        <div className="w-full radius-lg bg-components-input-bg-normal py-2 pl-3 pr-1" style={{ height: editorMinHeight }}>
+        <div className="w-full radius-lg bg-components-input-bg-normal py-2 pr-1 pl-3" style={{ height: editorMinHeight }}>
           <CodeEditor
             isExpand
             noWrapper
@@ -210,7 +210,7 @@ export const DescriptionSection = ({
     <SectionTitle>{title}</SectionTitle>
     <div className="flex">
       <textarea
-        className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-hidden system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
+        className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:system-sm-regular placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
         value={description}
         placeholder={placeholder}
         onChange={e => onChange(e.target.value)}
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
index 4fe1a707cb..4742eb0f36 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -3,7 +3,7 @@ import type { ConversationVariable } from '@/app/components/workflow/types'
 import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
 import { useWorkflowStore } from '@/app/components/workflow/store'
@@ -76,7 +76,7 @@ const ChatVariableModal = ({
     <div
       className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl', type === ChatVarType.Object && 'w-[480px]')}
     >
-      <div className="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold">
+      <div className="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
         {!chatVar ? t('chatVariable.modal.title', { ns: 'workflow' }) : t('chatVariable.modal.editTitle', { ns: 'workflow' })}
         <div className="flex items-center">
           <div
diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
index 523ea5a870..cd8b3b5103 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -4,9 +4,9 @@ import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { v4 as uuid4 } from 'uuid'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import { cn } from '@/utils/classnames'
@@ -83,7 +83,7 @@ const VariableModal = ({
     <div
       className={cn('flex h-full w-[360px] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-2xl')}
     >
-      <div className="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold">
+      <div className="mb-3 flex shrink-0 items-center justify-between p-4 pb-0 system-xl-semibold text-text-primary">
         {!env ? t('env.modal.title', { ns: 'workflow' }) : t('env.modal.editTitle', { ns: 'workflow' })}
         <div className="flex items-center">
           <div
@@ -97,12 +97,12 @@ const VariableModal = ({
       <div className="px-4 py-2">
         {/* type */}
         <div className="mb-4">
-          <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('env.modal.type', { ns: 'workflow' })}</div>
+          <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('env.modal.type', { ns: 'workflow' })}</div>
           <div className="flex gap-2">
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary system-sm-regular radius-md hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-                type === 'string' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs system-sm-medium hover:border-components-option-card-option-selected-border',
+                'flex w-[106px] cursor-pointer items-center justify-center radius-md border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                type === 'string' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg system-sm-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
               onClick={() => setType('string')}
             >
@@ -110,7 +110,7 @@ const VariableModal = ({
             </div>
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary system-sm-regular radius-md hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                'flex w-[106px] cursor-pointer items-center justify-center radius-md border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
                 type === 'number' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
               onClick={() => {
@@ -123,7 +123,7 @@ const VariableModal = ({
             </div>
             <div
               className={cn(
-                'flex w-[106px] cursor-pointer items-center justify-center border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary system-sm-regular radius-md hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                'flex w-[106px] cursor-pointer items-center justify-center radius-md border border-components-option-card-option-border bg-components-option-card-option-bg p-2 system-sm-regular text-text-secondary hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
                 type === 'secret' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg font-medium text-text-primary shadow-xs hover:border-components-option-card-option-selected-border',
               )}
               onClick={() => setType('secret')}
@@ -142,7 +142,7 @@ const VariableModal = ({
         </div>
         {/* name */}
         <div className="mb-4">
-          <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('env.modal.name', { ns: 'workflow' })}</div>
+          <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('env.modal.name', { ns: 'workflow' })}</div>
           <div className="flex">
             <Input
               placeholder={t('env.modal.namePlaceholder', { ns: 'workflow' }) || ''}
@@ -155,13 +155,13 @@ const VariableModal = ({
         </div>
         {/* value */}
         <div className="mb-4">
-          <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('env.modal.value', { ns: 'workflow' })}</div>
+          <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('env.modal.value', { ns: 'workflow' })}</div>
           <div className="flex">
             {
               type !== 'number'
                 ? (
                     <textarea
-                      className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-hidden system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
+                      className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:system-sm-regular placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
                       value={value}
                       placeholder={t('env.modal.valuePlaceholder', { ns: 'workflow' }) || ''}
                       onChange={e => setValue(e.target.value)}
@@ -180,10 +180,10 @@ const VariableModal = ({
         </div>
         {/* description */}
         <div className="">
-          <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-semibold">{t('env.modal.description', { ns: 'workflow' })}</div>
+          <div className="mb-1 flex h-6 items-center system-sm-semibold text-text-secondary">{t('env.modal.description', { ns: 'workflow' })}</div>
           <div className="flex">
             <textarea
-              className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-hidden system-sm-regular placeholder:text-components-input-text-placeholder placeholder:system-sm-regular hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
+              className="block h-20 w-full resize-none appearance-none rounded-lg border border-transparent bg-components-input-bg-normal p-2 system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:system-sm-regular placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs"
               value={description}
               placeholder={t('env.modal.descriptionPlaceholder', { ns: 'workflow' }) || ''}
               onChange={e => setDescription(e.target.value)}
diff --git a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
index 2e0f291591..657d5bf043 100644
--- a/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-trigger.tsx
@@ -3,12 +3,12 @@ import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { RiAddLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import VariableModal from '@/app/components/workflow/panel/env-panel/variable-modal'
 
 type Props = {
diff --git a/web/app/components/workflow/panel/inputs-panel.tsx b/web/app/components/workflow/panel/inputs-panel.tsx
index 6f7ab13471..2eb597b5df 100644
--- a/web/app/components/workflow/panel/inputs-panel.tsx
+++ b/web/app/components/workflow/panel/inputs-panel.tsx
@@ -6,11 +6,11 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNodes } from 'reactflow'
-import Button from '@/app/components/base/button'
 import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
 import {
   getProcessedInputs,
 } from '@/app/components/base/chat/chat/utils'
+import { Button } from '@/app/components/base/ui/button'
 import { TransferMethod } from '../../base/text-generation/types'
 import { useWorkflowRun } from '../hooks'
 import { useHooksStore } from '../hooks-store'
@@ -105,7 +105,7 @@ const InputsPanel = ({ onRun }: Props) => {
 
   return (
     <>
-      <div className="px-4 pb-2 pt-3">
+      <div className="px-4 pt-3 pb-2">
         {
           variables.map((variable, index) => (
             <div
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
index 225f4b08f8..a635e80bab 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/index.tsx
@@ -2,13 +2,13 @@ import type { FC } from 'react'
 import { RiMoreFill } from '@remixicon/react'
 import * as React from 'react'
 import { useCallback } from 'react'
-import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 import { VersionHistoryContextMenuOptions } from '../../../types'
 import MenuItem from './menu-item'
 import useContextMenu from './use-context-menu'
diff --git a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
index ad30db9e1c..daf485c5a5 100644
--- a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
@@ -2,8 +2,8 @@ import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type DeleteConfirmModalProps = {
   isOpen: boolean
@@ -22,7 +22,7 @@ const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
 
   return (
     <Modal className="p-0" isShow={isOpen} onClose={onClose}>
-      <div className="flex flex-col gap-y-2 p-6 pb-4 ">
+      <div className="flex flex-col gap-y-2 p-6 pb-4">
         <div className="title-2xl-semi-bold text-text-primary">
           {`${t('operation.delete', { ns: 'common' })} ${versionInfo.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}`}
         </div>
@@ -34,7 +34,7 @@ const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
         <Button onClick={onClose}>
           {t('operation.cancel', { ns: 'common' })}
         </Button>
-        <Button variant="warning" onClick={onDelete.bind(null, versionInfo.id)}>
+        <Button variant="primary" destructive onClick={onDelete.bind(null, versionInfo.id)}>
           {t('operation.delete', { ns: 'common' })}
         </Button>
       </div>
diff --git a/web/app/components/workflow/panel/version-history-panel/empty.tsx b/web/app/components/workflow/panel/version-history-panel/empty.tsx
index 698d2b3dac..2c8f6655e1 100644
--- a/web/app/components/workflow/panel/version-history-panel/empty.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/empty.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { RiHistoryLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type EmptyProps = {
   onResetFilter: () => void
@@ -18,7 +18,7 @@ const Empty: FC<EmptyProps> = ({
       <div className="flex justify-center">
         <RiHistoryLine className="h-10 w-10 text-text-empty-state-icon" />
       </div>
-      <div className="system-xs-regular flex justify-center text-text-tertiary">
+      <div className="flex justify-center system-xs-regular text-text-tertiary">
         {t('versionHistory.filter.empty', { ns: 'workflow' })}
       </div>
       <div className="flex justify-center">
diff --git a/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx b/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
index 0a2d5ec560..695e6fe35c 100644
--- a/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx
@@ -2,8 +2,8 @@ import type { FC } from 'react'
 import type { VersionHistory } from '@/types/workflow'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 
 type RestoreConfirmModalProps = {
   isOpen: boolean
@@ -22,7 +22,7 @@ const RestoreConfirmModal: FC<RestoreConfirmModalProps> = ({
 
   return (
     <Modal className="p-0" isShow={isOpen} onClose={onClose}>
-      <div className="flex flex-col gap-y-2 p-6 pb-4 ">
+      <div className="flex flex-col gap-y-2 p-6 pb-4">
         <div className="title-2xl-semi-bold text-text-primary">
           {`${t('common.restore', { ns: 'workflow' })} ${versionInfo.marked_name || t('versionHistory.defaultName', { ns: 'workflow' })}`}
         </div>
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index e1e442c0cb..e144e04b3e 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -6,8 +6,8 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { submitHumanInputForm } from '@/service/workflow'
 import { cn } from '@/utils/classnames'
@@ -111,7 +111,7 @@ const WorkflowPreview = () => {
       style={{ width: `${panelWidth}px` }}
     >
       <div
-        className="absolute bottom-0 left-[3px] top-1/2 z-50 h-6 w-[3px] cursor-col-resize rounded-sm bg-gray-300"
+        className="absolute top-1/2 bottom-0 left-[3px] z-50 h-6 w-[3px] cursor-col-resize rounded-sm bg-gray-300"
         onMouseDown={startResizing}
       />
       <div className="flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary">
@@ -125,7 +125,7 @@ const WorkflowPreview = () => {
           {showInputsPanel && (
             <div
               className={cn(
-                'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+                'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
                 currentTab === 'INPUT' && 'border-[rgb(21,94,239)]! text-text-secondary',
               )}
               onClick={() => switchTab('INPUT')}
@@ -135,7 +135,7 @@ const WorkflowPreview = () => {
           )}
           <div
             className={cn(
-              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
               currentTab === 'RESULT' && 'border-[rgb(21,94,239)]! text-text-secondary',
               !workflowRunningData && 'cursor-not-allowed! opacity-30',
             )}
@@ -149,7 +149,7 @@ const WorkflowPreview = () => {
           </div>
           <div
             className={cn(
-              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
               currentTab === 'DETAIL' && 'border-[rgb(21,94,239)]! text-text-secondary',
               !workflowRunningData && 'cursor-not-allowed! opacity-30',
             )}
@@ -163,7 +163,7 @@ const WorkflowPreview = () => {
           </div>
           <div
             className={cn(
-              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] font-semibold leading-[18px] text-text-tertiary',
+              'mr-6 cursor-pointer border-b-2 border-transparent py-3 text-[13px] leading-[18px] font-semibold text-text-tertiary',
               currentTab === 'TRACING' && 'border-[rgb(21,94,239)]! text-text-secondary',
               !workflowRunningData && 'cursor-not-allowed! opacity-30',
             )}
diff --git a/web/app/components/workflow/run/agent-log/agent-log-item.tsx b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
index 27e1e00fbb..7c572c59aa 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-item.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
@@ -7,7 +7,7 @@ import {
   useMemo,
   useState,
 } from 'react'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
@@ -57,7 +57,7 @@ const AgentLogItem = ({
     <div className="radius-lg border-[0.5px] border-components-panel-border bg-background-default">
       <div
         className={cn(
-          'flex cursor-pointer items-center pb-2 pl-1.5 pr-3 pt-2',
+          'flex cursor-pointer items-center pt-2 pr-3 pb-2 pl-1.5',
           expanded && 'pb-1',
         )}
         onClick={() => setExpanded(!expanded)}
@@ -73,14 +73,14 @@ const AgentLogItem = ({
           toolIcon={toolIcon}
         />
         <div
-          className="system-sm-semibold-uppercase grow truncate text-text-secondary"
+          className="grow truncate system-sm-semibold-uppercase text-text-secondary"
           title={label}
         >
           {label}
         </div>
         {
           !!metadata?.elapsed_time && (
-            <div className="system-xs-regular mr-2 shrink-0 text-text-tertiary">
+            <div className="mr-2 shrink-0 system-xs-regular text-text-tertiary">
               {metadata?.elapsed_time?.toFixed(3)}
               s
             </div>
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
index bf2fb32c2b..8bdb6ad227 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx
@@ -1,12 +1,12 @@
 import type { AgentLogItemWithChildren } from '@/types/workflow'
 import { RiMoreLine } from '@remixicon/react'
 import { useState } from 'react'
-import Button from '@/app/components/base/button'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import { Button } from '@/app/components/base/ui/button'
 
 type AgentLogNavMoreProps = {
   options: AgentLogItemWithChildren[]
@@ -42,7 +42,7 @@ const AgentLogNavMore = ({
             options.map(option => (
               <div
                 key={option.message_id}
-                className="system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 text-text-secondary hover:bg-state-base-hover"
+                className="flex h-8 cursor-pointer items-center rounded-lg px-2 system-md-regular text-text-secondary hover:bg-state-base-hover"
                 onClick={() => {
                   onShowAgentOrToolLog(option)
                   setOpen(false)
diff --git a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
index 11061bf625..2548256cb1 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-nav.tsx
@@ -1,7 +1,7 @@
 import type { AgentLogItemWithChildren } from '@/types/workflow'
 import { RiArrowLeftLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import AgentLogNavMore from './agent-log-nav-more'
 
 type AgentLogNavProps = {
@@ -31,7 +31,7 @@ const AgentLogNav = ({
         <RiArrowLeftLine className="mr-1 h-3.5 w-3.5" />
         AGENT
       </Button>
-      <div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
+      <div className="mx-0.5 shrink-0 system-xs-regular text-divider-deep">/</div>
       {
         agentOrToolLogItemStackLength > 1
           ? (
@@ -45,7 +45,7 @@ const AgentLogNav = ({
               </Button>
             )
           : (
-              <div className="system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary">
+              <div className="flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary">
                 {t('nodes.agent.strategy.label', { ns: 'workflow' })}
               </div>
             )
@@ -53,7 +53,7 @@ const AgentLogNav = ({
       {
         !!mid.length && (
           <>
-            <div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
+            <div className="mx-0.5 shrink-0 system-xs-regular text-divider-deep">/</div>
             <AgentLogNavMore
               options={mid}
               onShowAgentOrToolLog={onShowAgentOrToolLog}
@@ -64,8 +64,8 @@ const AgentLogNav = ({
       {
         !!end && agentOrToolLogItemStackLength > 1 && (
           <>
-            <div className="system-xs-regular mx-0.5 shrink-0 text-divider-deep">/</div>
-            <div className="system-xs-medium-uppercase flex items-center px-[5px] text-text-tertiary">
+            <div className="mx-0.5 shrink-0 system-xs-regular text-divider-deep">/</div>
+            <div className="flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary">
               {end.label}
             </div>
           </>
diff --git a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
index 52ebb29ff5..77b9425501 100644
--- a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx
@@ -4,8 +4,8 @@ import type {
 } from '@/types/workflow'
 import { RiArrowRightSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
+import { Button } from '@/app/components/base/ui/button'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 
 type IterationLogTriggerProps = {
@@ -145,7 +145,7 @@ const IterationLogTrigger = ({
     >
       {/* eslint-disable-next-line hyoban/prefer-tailwind-icons */}
       <Iteration className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
-      <div className="system-sm-medium flex-1 text-left text-components-button-tertiary-text">
+      <div className="flex-1 text-left system-sm-medium text-components-button-tertiary-text">
         {t('nodes.iteration.iteration', { ns: 'workflow', count: displayIterationCount })}
         {errorCount > 0 && (
           <>
diff --git a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
index aeb4b7e211..42593e564f 100644
--- a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
+++ b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx
@@ -5,8 +5,8 @@ import type {
 } from '@/types/workflow'
 import { RiArrowRightSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Loop } from '@/app/components/base/icons/src/vender/workflow'
+import { Button } from '@/app/components/base/ui/button'
 
 type LoopLogTriggerProps = {
   nodeInfo: NodeTracing
@@ -95,7 +95,7 @@ const LoopLogTrigger = ({
       onClick={handleOnShowLoopDetail}
     >
       <Loop className="h-4 w-4 shrink-0 text-components-button-tertiary-text" />
-      <div className="system-sm-medium flex-1 text-left text-components-button-tertiary-text">
+      <div className="flex-1 text-left system-sm-medium text-components-button-tertiary-text">
         {t('nodes.loop.loop', { ns: 'workflow', count: displayLoopCount })}
         {errorCount > 0 && (
           <>
diff --git a/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
index 6e9e0865e8..592b7775f1 100644
--- a/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
+++ b/web/app/components/workflow/run/retry-log/retry-log-trigger.tsx
@@ -4,7 +4,7 @@ import {
   RiRestartFill,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 
 type RetryLogTriggerProps = {
   nodeInfo: NodeTracing
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index 2240b87ee5..38607b97d5 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -15,8 +15,8 @@ import {
 import { useTranslation } from 'react-i18next'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
@@ -203,19 +203,19 @@ const UpdateDSLModal = ({
         onClose={onCancel}
       >
         <div className="mb-3 flex items-center justify-between">
-          <div className="text-text-primary title-2xl-semi-bold">{t('common.importDSL', { ns: 'workflow' })}</div>
+          <div className="title-2xl-semi-bold text-text-primary">{t('common.importDSL', { ns: 'workflow' })}</div>
           <div className="flex h-[22px] w-[22px] cursor-pointer items-center justify-center" onClick={onCancel}>
             <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
           </div>
         </div>
         <div className="relative mb-2 flex grow gap-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs">
-          <div className="absolute left-0 top-0 h-full w-full bg-toast-warning-bg opacity-40" />
+          <div className="absolute top-0 left-0 h-full w-full bg-toast-warning-bg opacity-40" />
           <div className="flex items-start justify-center p-1">
             <RiAlertFill className="h-4 w-4 shrink-0 text-text-warning-secondary" />
           </div>
           <div className="flex grow flex-col items-start gap-0.5 py-1">
-            <div className="whitespace-pre-line text-text-primary system-xs-medium">{t('common.importDSLTip', { ns: 'workflow' })}</div>
-            <div className="flex items-start gap-1 self-stretch pb-0.5 pt-1">
+            <div className="system-xs-medium whitespace-pre-line text-text-primary">{t('common.importDSLTip', { ns: 'workflow' })}</div>
+            <div className="flex items-start gap-1 self-stretch pt-1 pb-0.5">
               <Button
                 size="small"
                 variant="secondary"
@@ -231,7 +231,7 @@ const UpdateDSLModal = ({
           </div>
         </div>
         <div>
-          <div className="pt-2 text-text-primary system-md-semibold">
+          <div className="pt-2 system-md-semibold text-text-primary">
             {t('common.chooseDSL', { ns: 'workflow' })}
           </div>
           <div className="flex w-full flex-col items-start justify-center gap-4 self-stretch py-4">
@@ -246,7 +246,8 @@ const UpdateDSLModal = ({
           <Button onClick={onCancel}>{t('newApp.Cancel', { ns: 'app' })}</Button>
           <Button
             disabled={!currentFile || loading}
-            variant="warning"
+            variant="primary"
+            destructive
             onClick={handleImport}
             loading={loading}
           >
@@ -260,8 +261,8 @@ const UpdateDSLModal = ({
         className="w-[480px]"
       >
         <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-          <div className="text-text-primary title-2xl-semi-bold">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-          <div className="flex grow flex-col text-text-secondary system-md-regular">
+          <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
+          <div className="flex grow flex-col system-md-regular text-text-secondary">
             <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
             <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
             <br />
diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index 66c64790be..5941ddae59 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -9,7 +9,7 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-// import Button from '@/app/components/base/button'
+// import { Button } from '@/app/components/base/ui/button'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import BlockIcon from '@/app/components/workflow/block-icon'
@@ -117,11 +117,11 @@ const Group = ({
                 toolIcon={toolIcon || ''}
                 size="xs"
               />
-              <div className="system-xs-medium-uppercase truncate text-text-tertiary">{nodeData.title}</div>
+              <div className="truncate system-xs-medium-uppercase text-text-tertiary">{nodeData.title}</div>
             </>
           )}
           {!nodeData && (
-            <div className="system-xs-medium-uppercase truncate text-text-tertiary">
+            <div className="truncate system-xs-medium-uppercase text-text-tertiary">
               {isEnv && t('debug.variableInspect.envNode', { ns: 'workflow' })}
               {isChatVar && t('debug.variableInspect.chatNode', { ns: 'workflow' })}
               {isSystem && t('debug.variableInspect.systemNode', { ns: 'workflow' })}
@@ -160,8 +160,8 @@ const Group = ({
                 isExceptionVariable={['error_type', 'error_message'].includes(varItem.name)}
                 className="size-4"
               />
-              <div className="system-sm-medium grow truncate text-text-secondary">{varItem.name}</div>
-              <div className="system-xs-regular shrink-0 text-text-tertiary">{varItem.value_type}</div>
+              <div className="grow truncate system-sm-medium text-text-secondary">{varItem.name}</div>
+              <div className="shrink-0 system-xs-regular text-text-tertiary">{varItem.value_type}</div>
             </div>
           ))}
         </div>
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx
index e6638cb0f9..b59096f338 100644
--- a/web/app/components/workflow/variable-inspect/left.tsx
+++ b/web/app/components/workflow/variable-inspect/left.tsx
@@ -3,7 +3,7 @@ import type { currentVarType } from './panel'
 import type { VarInInspect } from '@/types/workflow'
 // import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { VarInInspectType } from '@/types/workflow'
 import { cn } from '@/utils/classnames'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
@@ -51,8 +51,8 @@ const Left = ({
   return (
     <div className={cn('flex h-full flex-col')}>
       {/* header */}
-      <div className="flex shrink-0 items-center justify-between gap-1 pl-4 pr-1 pt-2">
-        <div className="system-sm-semibold-uppercase truncate text-text-primary">{t('debug.variableInspect.title', { ns: 'workflow' })}</div>
+      <div className="flex shrink-0 items-center justify-between gap-1 pt-2 pr-1 pl-4">
+        <div className="truncate system-sm-semibold-uppercase text-text-primary">{t('debug.variableInspect.title', { ns: 'workflow' })}</div>
         <Button variant="ghost" size="small" className="shrink-0" onClick={handleClearAll}>{t('debug.variableInspect.clearAll', { ns: 'workflow' })}</Button>
       </div>
       {/* content */}
diff --git a/web/app/components/workflow/variable-inspect/listening.tsx b/web/app/components/workflow/variable-inspect/listening.tsx
index b183976ea4..4cdc0f348d 100644
--- a/web/app/components/workflow/variable-inspect/listening.tsx
+++ b/web/app/components/workflow/variable-inspect/listening.tsx
@@ -7,9 +7,9 @@ import copy from 'copy-to-clipboard'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStoreApi } from 'reactflow'
-import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { useGetToolIcon } from '@/app/components/workflow/hooks/use-tool-icon'
 import { getNextExecutionTime } from '@/app/components/workflow/nodes/trigger-schedule/utils/execution-time-calculator'
@@ -176,7 +176,7 @@ const Listening: FC<ListeningProps> = ({
       </div>
       {webhookDebugUrl && (
         <div className="flex items-center gap-2">
-          <div className="system-xs-regular shrink-0 whitespace-pre-line text-text-tertiary">
+          <div className="shrink-0 system-xs-regular whitespace-pre-line text-text-tertiary">
             {t('nodes.triggerWebhook.debugUrlTitle', { ns: 'workflow' })}
           </div>
           <Tooltip
@@ -191,7 +191,7 @@ const Listening: FC<ListeningProps> = ({
             <button
               type="button"
               aria-label={t('nodes.triggerWebhook.debugUrlCopy', { ns: 'workflow' }) || ''}
-              className={`inline-flex items-center radius-sm border border-divider-regular bg-components-badge-white-to-dark px-1.5 py-[2px] font-mono text-[13px] leading-[18px] text-text-secondary transition-colors hover:bg-components-panel-on-panel-item-bg-hover focus:outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-components-panel-border ${debugUrlCopied ? 'bg-components-panel-on-panel-item-bg-hover text-text-primary' : ''}`}
+              className={`inline-flex items-center radius-sm border border-divider-regular bg-components-badge-white-to-dark px-1.5 py-[2px] font-mono text-[13px] leading-[18px] text-text-secondary transition-colors hover:bg-components-panel-on-panel-item-bg-hover focus:outline-hidden focus-visible:outline-2 focus-visible:outline-components-panel-border focus-visible:outline-solid ${debugUrlCopied ? 'bg-components-panel-on-panel-item-bg-hover text-text-primary' : ''}`}
               onClick={() => {
                 copy(webhookDebugUrl)
                 setDebugUrlCopied(true)
diff --git a/web/app/education-apply/education-apply-page.tsx b/web/app/education-apply/education-apply-page.tsx
index 48688a1725..7fda139aa9 100644
--- a/web/app/education-apply/education-apply-page.tsx
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -6,8 +6,8 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Checkbox from '@/app/components/base/checkbox'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
 import { useDocLink } from '@/context/i18n'
@@ -85,12 +85,12 @@ const EducationApplyAge = () => {
           <DifyLogo size="large" style="monochromeWhite" />
         </div>
         <div className="mx-auto max-w-[720px] px-8 pb-[180px]">
-          <div className="mb-2 flex h-[192px] flex-col justify-end pb-4 pt-3 text-text-primary-on-surface">
-            <div className="mb-2 shadow-xs title-5xl-bold">{t('toVerified', { ns: 'education' })}</div>
-            <div className="shadow-xs system-md-medium">
+          <div className="mb-2 flex h-[192px] flex-col justify-end pt-3 pb-4 text-text-primary-on-surface">
+            <div className="mb-2 title-5xl-bold shadow-xs">{t('toVerified', { ns: 'education' })}</div>
+            <div className="system-md-medium shadow-xs">
               {t('toVerifiedTip.front', { ns: 'education' })}
 &nbsp;
-              <span className="underline system-md-semibold">{t('toVerifiedTip.coupon', { ns: 'education' })}</span>
+              <span className="system-md-semibold underline">{t('toVerifiedTip.coupon', { ns: 'education' })}</span>
 &nbsp;
               {t('toVerifiedTip.end', { ns: 'education' })}
             </div>
@@ -99,7 +99,7 @@ const EducationApplyAge = () => {
             <UserInfo />
           </div>
           <div className="mb-7">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-md-semibold">
+            <div className="mb-1 flex h-6 items-center system-md-semibold text-text-secondary">
               {t('form.schoolName.title', { ns: 'education' })}
             </div>
             <SearchInput
@@ -108,7 +108,7 @@ const EducationApplyAge = () => {
             />
           </div>
           <div className="mb-7">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-md-semibold">
+            <div className="mb-1 flex h-6 items-center system-md-semibold text-text-secondary">
               {t('form.schoolRole.title', { ns: 'education' })}
             </div>
             <RoleSelector
@@ -117,10 +117,10 @@ const EducationApplyAge = () => {
             />
           </div>
           <div className="mb-7">
-            <div className="mb-1 flex h-6 items-center text-text-secondary system-md-semibold">
+            <div className="mb-1 flex h-6 items-center system-md-semibold text-text-secondary">
               {t('form.terms.title', { ns: 'education' })}
             </div>
-            <div className="mb-1 text-text-tertiary system-md-regular">
+            <div className="mb-1 system-md-regular text-text-tertiary">
               {t('form.terms.desc.front', { ns: 'education' })}
 &nbsp;
               <a href="https://dify.ai/terms" target="_blank" className="text-text-secondary hover:underline">{t('form.terms.desc.termsOfService', { ns: 'education' })}</a>
@@ -130,7 +130,7 @@ const EducationApplyAge = () => {
               <a href="https://dify.ai/privacy" target="_blank" className="text-text-secondary hover:underline">{t('form.terms.desc.privacyPolicy', { ns: 'education' })}</a>
               {t('form.terms.desc.end', { ns: 'education' })}
             </div>
-            <div className="py-2 text-text-primary system-md-regular">
+            <div className="py-2 system-md-regular text-text-primary">
               <div className="mb-2 flex">
                 <Checkbox
                   className="mr-2 shrink-0"
@@ -156,9 +156,9 @@ const EducationApplyAge = () => {
           >
             {t('submit', { ns: 'education' })}
           </Button>
-          <div className="mb-4 mt-5 h-px bg-linear-to-r from-[rgba(16,24,40,0.08)]"></div>
+          <div className="mt-5 mb-4 h-px bg-linear-to-r from-[rgba(16,24,40,0.08)]"></div>
           <a
-            className="flex items-center text-text-accent system-xs-regular"
+            className="flex items-center system-xs-regular text-text-accent"
             href={docLink('/use-dify/workspace/subscription-management#dify-for-education')}
             target="_blank"
           >
diff --git a/web/app/education-apply/expire-notice-modal.tsx b/web/app/education-apply/expire-notice-modal.tsx
index fc939ffc3c..ec88bba1b5 100644
--- a/web/app/education-apply/expire-notice-modal.tsx
+++ b/web/app/education-apply/expire-notice-modal.tsx
@@ -2,8 +2,8 @@
 import { RiExternalLinkLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 import { useModalContextSelector } from '@/context/modal-context'
 import useTimestamp from '@/hooks/use-timestamp'
@@ -48,7 +48,7 @@ const ExpireNoticeModal: React.FC<Props> = ({ expireAt, expired, onClose }) => {
       closable
       className="max-w-[600px]"
     >
-      <div className="body-md-regular mt-5 space-y-5 text-text-secondary">
+      <div className="mt-5 space-y-5 body-md-regular text-text-secondary">
         <div>
           {expired
             ? (
@@ -60,16 +60,16 @@ const ExpireNoticeModal: React.FC<Props> = ({ expireAt, expired, onClose }) => {
             : t(`${i18nPrefix}.isAboutToExpire.summary`, { ns: 'education' })}
         </div>
         <div>
-          <strong className="title-md-semi-bold block">{t(`${i18nPrefix}.stillInEducation.title`, { ns: 'education' })}</strong>
+          <strong className="block title-md-semi-bold">{t(`${i18nPrefix}.stillInEducation.title`, { ns: 'education' })}</strong>
           {t(`${i18nPrefix}.stillInEducation.${expired ? 'expired' : 'isAboutToExpire'}`, { ns: 'education' })}
         </div>
         <div>
-          <strong className="title-md-semi-bold block">{t(`${i18nPrefix}.alreadyGraduated.title`, { ns: 'education' })}</strong>
+          <strong className="block title-md-semi-bold">{t(`${i18nPrefix}.alreadyGraduated.title`, { ns: 'education' })}</strong>
           {t(`${i18nPrefix}.alreadyGraduated.${expired ? 'expired' : 'isAboutToExpire'}`, { ns: 'education' })}
         </div>
       </div>
       <div className="mt-7 flex items-center justify-between space-x-2">
-        <Link className="system-xs-regular flex items-center space-x-1 text-text-accent" href={eduDocLink} target="_blank" rel="noopener noreferrer">
+        <Link className="flex items-center space-x-1 system-xs-regular text-text-accent" href={eduDocLink} target="_blank" rel="noopener noreferrer">
           <div>{t('learn', { ns: 'education' })}</div>
           <RiExternalLinkLine className="size-3" />
         </Link>
diff --git a/web/app/education-apply/user-info.tsx b/web/app/education-apply/user-info.tsx
index 6e51d1adb8..32d56b2780 100644
--- a/web/app/education-apply/user-info.tsx
+++ b/web/app/education-apply/user-info.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Triangle } from '@/app/components/base/icons/src/public/education'
 import { Avatar } from '@/app/components/base/ui/avatar'
+import { Button } from '@/app/components/base/ui/button'
 import { useAppContext } from '@/context/app-context'
 import { useRouter } from '@/next/navigation'
 import { useLogout } from '@/service/use-common'
@@ -22,9 +22,9 @@ const UserInfo = () => {
   }
 
   return (
-    <div className="relative flex items-center justify-between rounded-xl border-4 border-components-panel-on-panel-item-bg bg-linear-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 pb-6 pl-6 pr-8 pt-9 shadow-shadow-shadow-5">
-      <div className="absolute left-0 top-0 flex items-center">
-        <div className="system-2xs-semibold-uppercase flex h-[22px] items-center bg-components-panel-on-panel-item-bg pl-2 pt-1 text-text-accent-light-mode-only">
+    <div className="relative flex items-center justify-between rounded-xl border-4 border-components-panel-on-panel-item-bg bg-linear-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 pt-9 pr-8 pb-6 pl-6 shadow-shadow-shadow-5">
+      <div className="absolute top-0 left-0 flex items-center">
+        <div className="flex h-[22px] items-center bg-components-panel-on-panel-item-bg pt-1 pl-2 system-2xs-semibold-uppercase text-text-accent-light-mode-only">
           {t('currentSigned', { ns: 'education' })}
         </div>
         <Triangle className="h-[22px] w-4 text-components-panel-on-panel-item-bg" />
diff --git a/web/app/education-apply/verify-state-modal.tsx b/web/app/education-apply/verify-state-modal.tsx
index 6f1f529e76..c4d836f178 100644
--- a/web/app/education-apply/verify-state-modal.tsx
+++ b/web/app/education-apply/verify-state-modal.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { useDocLink } from '@/context/i18n'
 
 type IConfirm = {
@@ -87,21 +87,21 @@ function Confirm({
     >
       <div ref={dialogRef} className="relative w-full max-w-[481px] overflow-hidden">
         <div className="shadows-shadow-lg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid border-components-panel-border bg-components-panel-bg">
-          <div className="flex flex-col items-start gap-2 self-stretch pb-4 pl-6 pr-6 pt-6">
+          <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
             <div className="title-2xl-semi-bold text-text-primary">{title}</div>
-            <div className="system-md-regular w-full text-text-tertiary">{content}</div>
+            <div className="w-full system-md-regular text-text-tertiary">{content}</div>
           </div>
           {email && (
             <div className="w-full space-y-1 px-6 py-3">
-              <div className="system-sm-semibold py-1 text-text-secondary">{t('emailLabel', { ns: 'education' })}</div>
-              <div className="system-sm-regular rounded-lg bg-components-input-bg-disabled px-3 py-2 text-components-input-text-filled-disabled">{email}</div>
+              <div className="py-1 system-sm-semibold text-text-secondary">{t('emailLabel', { ns: 'education' })}</div>
+              <div className="rounded-lg bg-components-input-bg-disabled px-3 py-2 system-sm-regular text-components-input-text-filled-disabled">{email}</div>
             </div>
           )}
           <div className="flex items-center justify-between gap-2 self-stretch p-6">
             <div className="flex items-center gap-1">
               {showLink && (
                 <>
-                  <a onClick={handleClick} href={eduDocLink} target="_blank" className="system-xs-regular cursor-pointer text-text-accent">{t('learn', { ns: 'education' })}</a>
+                  <a onClick={handleClick} href={eduDocLink} target="_blank" className="cursor-pointer system-xs-regular text-text-accent">{t('learn', { ns: 'education' })}</a>
                   <RiExternalLinkLine className="h-3 w-3 text-text-accent" />
                 </>
               )}
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index e303aee2ea..4d859eddaf 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -2,8 +2,8 @@
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useSearchParams } from '@/next/navigation'
diff --git a/web/app/forgot-password/ForgotPasswordForm.tsx b/web/app/forgot-password/ForgotPasswordForm.tsx
index fdc35c20da..7ce5e7d8dd 100644
--- a/web/app/forgot-password/ForgotPasswordForm.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.tsx
@@ -7,9 +7,9 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as z from 'zod'
-import Button from '@/app/components/base/button'
 import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
+import { Button } from '@/app/components/base/ui/button'
 import { useRouter } from '@/next/navigation'
 import {
   fetchInitValidateStatus,
diff --git a/web/app/init/InitPasswordPopup.tsx b/web/app/init/InitPasswordPopup.tsx
index e192f2856a..b0c74978fa 100644
--- a/web/app/init/InitPasswordPopup.tsx
+++ b/web/app/init/InitPasswordPopup.tsx
@@ -2,7 +2,7 @@
 import type { InitValidateStatusResponse } from '@/models/common'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useRouter } from '@/next/navigation'
@@ -64,7 +64,7 @@ const InitPasswordPopup = () => {
                       type="password"
                       value={password}
                       onChange={e => setPassword(e.target.value)}
-                      className="block w-full appearance-none rounded-md border border-divider-regular px-3 py-2 shadow-sm placeholder:text-text-quaternary focus:border-indigo-500 focus:outline-hidden focus:ring-indigo-500 sm:text-sm"
+                      className="block w-full appearance-none rounded-md border border-divider-regular px-3 py-2 shadow-sm placeholder:text-text-quaternary focus:border-indigo-500 focus:ring-indigo-500 focus:outline-hidden sm:text-sm"
                     />
                   </div>
                 </div>
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index d5cc401fbe..268471a12b 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -6,10 +6,10 @@ import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as z from 'zod'
-import Button from '@/app/components/base/button'
 import { formContext, useAppForm } from '@/app/components/base/form'
 import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { validPassword } from '@/config'
 import { LICENSE_LINK } from '@/constants/link'
 import useDocumentTitle from '@/hooks/use-document-title'
diff --git a/web/app/reset-password/check-code/page.tsx b/web/app/reset-password/check-code/page.tsx
index 5927d52a0c..98ea828aae 100644
--- a/web/app/reset-password/check-code/page.tsx
+++ b/web/app/reset-password/check-code/page.tsx
@@ -2,8 +2,8 @@
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
@@ -61,9 +61,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge text-text-accent-light-mode-only shadow-lg">
         <RiMailSendFill className="h-6 w-6 text-2xl" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -75,7 +75,7 @@ export default function CheckCode() {
 
       <form action="">
         <input type="text" className="hidden" />
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 system-md-semibold text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className="mt-1" placeholder={t('checkCode.verificationCodePlaceholder', { ns: 'login' }) as string} />
         <Button loading={loading} disabled={loading} className="my-3 w-full" variant="primary" onClick={verify}>{t('checkCode.verify', { ns: 'login' })}</Button>
         <Countdown onResend={resendCode} />
@@ -87,7 +87,7 @@ export default function CheckCode() {
         <div className="inline-block rounded-full bg-background-default-dimmed p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/reset-password/page.tsx b/web/app/reset-password/page.tsx
index 618ac7ad30..d58fd7e9ff 100644
--- a/web/app/reset-password/page.tsx
+++ b/web/app/reset-password/page.tsx
@@ -3,8 +3,8 @@ import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
@@ -60,9 +60,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiLockPasswordLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('resetPassword', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           {t('resetPasswordDesc', { ns: 'login' })}
         </p>
       </div>
@@ -70,7 +70,7 @@ export default function CheckCode() {
       <form onSubmit={noop}>
         <input type="text" className="hidden" />
         <div className="mb-2">
-          <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+          <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">{t('email', { ns: 'login' })}</label>
           <div className="mt-1">
             <Input id="email" type="email" disabled={loading} value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
           </div>
@@ -86,7 +86,7 @@ export default function CheckCode() {
         <div className="inline-block rounded-full bg-background-default-dimmed p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('backToLogin', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('backToLogin', { ns: 'login' })}</span>
       </Link>
     </div>
   )
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index 877c156b71..e40e1e5e6c 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -3,8 +3,8 @@ import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
@@ -96,7 +96,7 @@ const ChangePasswordForm = () => {
             <h2 className="title-4xl-semi-bold text-text-primary">
               {t('changePassword', { ns: 'login' })}
             </h2>
-            <p className="body-md-regular mt-2 text-text-secondary">
+            <p className="mt-2 body-md-regular text-text-secondary">
               {t('changePasswordTip', { ns: 'login' })}
             </p>
           </div>
@@ -105,7 +105,7 @@ const ChangePasswordForm = () => {
             <div>
               {/* Password */}
               <div className="mb-5">
-                <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="password" className="my-2 system-md-semibold text-text-secondary">
                   {t('account.newPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
@@ -127,11 +127,11 @@ const ChangePasswordForm = () => {
                     </Button>
                   </div>
                 </div>
-                <div className="body-xs-regular mt-1 text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
+                <div className="mt-1 body-xs-regular text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
               </div>
               {/* Confirm Password */}
               <div className="mb-5">
-                <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+                <label htmlFor="confirmPassword" className="my-2 system-md-semibold text-text-secondary">
                   {t('account.confirmPassword', { ns: 'common' })}
                 </label>
                 <div className="relative mt-1">
diff --git a/web/app/signin/check-code/page.tsx b/web/app/signin/check-code/page.tsx
index 60d0732bc7..b86c984f31 100644
--- a/web/app/signin/check-code/page.tsx
+++ b/web/app/signin/check-code/page.tsx
@@ -4,8 +4,8 @@ import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
@@ -88,9 +88,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
-        <h2 className="text-text-primary title-4xl-semi-bold">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="mt-2 text-text-secondary body-md-regular">
+      <div className="pt-2 pb-4">
+        <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
+        <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -101,7 +101,7 @@ export default function CheckCode() {
       </div>
 
       <form onSubmit={handleSubmit}>
-        <label htmlFor="code" className="mb-1 text-text-secondary system-md-semibold">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 system-md-semibold text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input
           ref={codeInputRef}
           id="code"
diff --git a/web/app/signin/components/mail-and-code-auth.tsx b/web/app/signin/components/mail-and-code-auth.tsx
index 0e6735183f..5c5431c42a 100644
--- a/web/app/signin/components/mail-and-code-auth.tsx
+++ b/web/app/signin/components/mail-and-code-auth.tsx
@@ -1,8 +1,8 @@
 import type { FormEvent } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
 import { emailRegex } from '@/config'
@@ -61,7 +61,7 @@ export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) {
     <form onSubmit={handleSubmit}>
       <input type="text" className="hidden" />
       <div className="mb-2">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">{t('email', { ns: 'login' })}</label>
+        <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">{t('email', { ns: 'login' })}</label>
         <div className="mt-1">
           <Input id="email" type="email" disabled={isInvite} value={email} placeholder={t('emailPlaceholder', { ns: 'login' }) as string} onChange={e => setEmail(e.target.value)} />
         </div>
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index 061757a1bd..ca93b9b391 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -3,8 +3,8 @@ import { noop } from 'es-toolkit/function'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { emailRegex } from '@/config'
 import { useLocale } from '@/context/i18n'
@@ -96,7 +96,7 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis
   return (
     <form onSubmit={noop}>
       <div className="mb-3">
-        <label htmlFor="email" className="my-2 text-text-secondary system-md-semibold">
+        <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">
           {t('email', { ns: 'login' })}
         </label>
         <div className="mt-1">
@@ -115,7 +115,7 @@ export default function MailAndPasswordAuth({ isInvite, isEmailSetup, allowRegis
 
       <div className="mb-3">
         <label htmlFor="password" className="my-2 flex items-center justify-between">
-          <span className="text-text-secondary system-md-semibold">{t('password', { ns: 'login' })}</span>
+          <span className="system-md-semibold text-text-secondary">{t('password', { ns: 'login' })}</span>
           <Link
             href={`/reset-password?${searchParams.toString()}`}
             className={`system-xs-regular ${isEmailSetup ? 'text-components-button-secondary-accent-text' : 'pointer-events-none text-components-button-secondary-accent-text-disabled'}`}
diff --git a/web/app/signin/components/social-auth.tsx b/web/app/signin/components/social-auth.tsx
index 35517a0505..0e3883ea73 100644
--- a/web/app/signin/components/social-auth.tsx
+++ b/web/app/signin/components/social-auth.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
+import { Button } from '@/app/components/base/ui/button'
 import { API_PREFIX } from '@/config'
 import { useSearchParams } from '@/next/navigation'
 import { getPurifyHref } from '@/utils'
diff --git a/web/app/signin/components/sso-auth.tsx b/web/app/signin/components/sso-auth.tsx
index a94f101b74..5ead876741 100644
--- a/web/app/signin/components/sso-auth.tsx
+++ b/web/app/signin/components/sso-auth.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { getUserOAuth2SSOUrl, getUserOIDCSSOUrl, getUserSAMLSSOUrl } from '@/service/sso'
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index ffee528b0d..fc9bdf6b0a 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -4,10 +4,10 @@ import { RiAccountCircleLine } from '@remixicon/react'
 import { noop } from 'es-toolkit/function'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
 import { SimpleSelect } from '@/app/components/base/select'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { LICENSE_LINK } from '@/constants/link'
 import { useGlobalPublicStore } from '@/context/global-public-context'
@@ -72,7 +72,7 @@ export default function InviteSettingsPage() {
       <div className="flex flex-col md:w-[400px]">
         <div className="mx-auto w-full">
           <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle text-2xl font-bold shadow-lg">🤷‍♂️</div>
-          <h2 className="text-text-primary title-4xl-semi-bold">{t('invalid', { ns: 'login' })}</h2>
+          <h2 className="title-4xl-semi-bold text-text-primary">{t('invalid', { ns: 'login' })}</h2>
         </div>
         <div className="mx-auto mt-6 w-full">
           <Button variant="primary" className="w-full text-sm!">
@@ -88,12 +88,12 @@ export default function InviteSettingsPage() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiAccountCircleLine className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
-        <h2 className="text-text-primary title-4xl-semi-bold">{t('setYourAccount', { ns: 'login' })}</h2>
+      <div className="pt-2 pb-4">
+        <h2 className="title-4xl-semi-bold text-text-primary">{t('setYourAccount', { ns: 'login' })}</h2>
       </div>
       <form onSubmit={noop}>
         <div className="mb-5">
-          <label htmlFor="name" className="my-2 text-text-secondary system-md-semibold">
+          <label htmlFor="name" className="my-2 system-md-semibold text-text-secondary">
             {t('name', { ns: 'login' })}
           </label>
           <div className="mt-1">
@@ -114,7 +114,7 @@ export default function InviteSettingsPage() {
           </div>
         </div>
         <div className="mb-5">
-          <label htmlFor="name" className="my-2 text-text-secondary system-md-semibold">
+          <label htmlFor="name" className="my-2 system-md-semibold text-text-secondary">
             {t('interfaceLanguage', { ns: 'login' })}
           </label>
           <div className="mt-1">
@@ -129,7 +129,7 @@ export default function InviteSettingsPage() {
         </div>
         {/* timezone */}
         <div className="mb-5">
-          <label htmlFor="timezone" className="text-text-secondary system-md-semibold">
+          <label htmlFor="timezone" className="system-md-semibold text-text-secondary">
             {t('timezone', { ns: 'login' })}
           </label>
           <div className="mt-1">
@@ -153,11 +153,11 @@ export default function InviteSettingsPage() {
         </div>
       </form>
       {!systemFeatures.branding.enabled && (
-        <div className="mt-2 block w-full text-text-tertiary system-xs-regular">
+        <div className="mt-2 block w-full system-xs-regular text-text-tertiary">
           {t('license.tip', { ns: 'login' })}
       &nbsp;
           <Link
-            className="text-text-accent-secondary system-xs-medium"
+            className="system-xs-medium text-text-accent-secondary"
             target="_blank"
             rel="noopener noreferrer"
             href={LICENSE_LINK}
diff --git a/web/app/signin/one-more-step.tsx b/web/app/signin/one-more-step.tsx
index 9814ef4c1b..6368533e2a 100644
--- a/web/app/signin/one-more-step.tsx
+++ b/web/app/signin/one-more-step.tsx
@@ -2,9 +2,9 @@
 import type { Reducer } from 'react'
 import { useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { LICENSE_LINK } from '@/constants/link'
 import { languages, LanguagesSupported } from '@/i18n-config/language'
@@ -79,13 +79,13 @@ const OneMoreStep = () => {
     <>
       <div className="mx-auto w-full">
         <h2 className="title-4xl-semi-bold text-text-secondary">{t('oneMoreStep', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-1 text-text-tertiary">{t('createSample', { ns: 'login' })}</p>
+        <p className="mt-1 body-md-regular text-text-tertiary">{t('createSample', { ns: 'login' })}</p>
       </div>
 
       <div className="mx-auto mt-6 w-full">
         <div className="relative">
           <div className="mb-5">
-            <label className="system-md-semibold my-2 flex items-center justify-between text-text-secondary">
+            <label className="my-2 flex items-center justify-between system-md-semibold text-text-secondary">
               {t('invitationCode', { ns: 'login' })}
               <Tooltip
                 popupContent={(
@@ -113,7 +113,7 @@ const OneMoreStep = () => {
             </div>
           </div>
           <div className="mb-5">
-            <label htmlFor="name" className="system-md-semibold my-2 text-text-secondary">
+            <label htmlFor="name" className="my-2 system-md-semibold text-text-secondary">
               {t('interfaceLanguage', { ns: 'login' })}
             </label>
             <div className="mt-1">
@@ -150,7 +150,7 @@ const OneMoreStep = () => {
               {t('go', { ns: 'login' })}
             </Button>
           </div>
-          <div className="system-xs-regular mt-2 block w-full text-text-tertiary">
+          <div className="mt-2 block w-full system-xs-regular text-text-tertiary">
             {t('license.tip', { ns: 'login' })}
             &nbsp;
             <Link
diff --git a/web/app/signup/check-code/page.tsx b/web/app/signup/check-code/page.tsx
index 603038e6c1..a71d5289fe 100644
--- a/web/app/signup/check-code/page.tsx
+++ b/web/app/signup/check-code/page.tsx
@@ -3,8 +3,8 @@ import type { MailSendResponse, MailValidityResponse } from '@/service/use-commo
 import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Countdown from '@/app/components/signin/countdown'
 import { useLocale } from '@/context/i18n'
@@ -69,9 +69,9 @@ export default function CheckCode() {
       <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle bg-background-default-dodge shadow-lg">
         <RiMailSendFill className="h-6 w-6 text-2xl text-text-accent-light-mode-only" />
       </div>
-      <div className="pb-4 pt-2">
+      <div className="pt-2 pb-4">
         <h2 className="title-4xl-semi-bold text-text-primary">{t('checkCode.checkYourEmail', { ns: 'login' })}</h2>
-        <p className="body-md-regular mt-2 text-text-secondary">
+        <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t('checkCode.tipsPrefix', { ns: 'login' })}
             <strong>{email}</strong>
@@ -82,7 +82,7 @@ export default function CheckCode() {
       </div>
 
       <form action="">
-        <label htmlFor="code" className="system-md-semibold mb-1 text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
+        <label htmlFor="code" className="mb-1 system-md-semibold text-text-secondary">{t('checkCode.verificationCode', { ns: 'login' })}</label>
         <Input value={code} onChange={e => setVerifyCode(e.target.value)} maxLength={6} className="mt-1" placeholder={t('checkCode.verificationCodePlaceholder', { ns: 'login' }) as string} />
         <Button loading={loading} disabled={loading} className="my-3 w-full" variant="primary" onClick={verify}>{t('checkCode.verify', { ns: 'login' })}</Button>
         <Countdown onResend={resendCode} />
@@ -94,7 +94,7 @@ export default function CheckCode() {
         <div className="bg-background-default-dimm inline-block rounded-full p-1">
           <RiArrowLeftLine size={12} />
         </div>
-        <span className="system-xs-regular ml-2">{t('back', { ns: 'login' })}</span>
+        <span className="ml-2 system-xs-regular">{t('back', { ns: 'login' })}</span>
       </div>
     </div>
   )
diff --git a/web/app/signup/components/input-mail.tsx b/web/app/signup/components/input-mail.tsx
index d14665f8e1..ae7fbb986d 100644
--- a/web/app/signup/components/input-mail.tsx
+++ b/web/app/signup/components/input-mail.tsx
@@ -2,8 +2,8 @@
 import type { MailSendResponse } from '@/service/use-common'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Split from '@/app/signin/split'
 import { emailRegex } from '@/config'
@@ -49,7 +49,7 @@ export default function Form({
     }}
     >
       <div className="mb-3">
-        <label htmlFor="email" className="system-md-semibold my-2 text-text-secondary">
+        <label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">
           {t('email', { ns: 'login' })}
         </label>
         <div className="mt-1">
@@ -75,9 +75,9 @@ export default function Form({
           {t('signup.verifyMail', { ns: 'login' })}
         </Button>
       </div>
-      <Split className="mb-5 mt-4" />
+      <Split className="mt-4 mb-5" />
 
-      <div className="text-[13px] font-medium leading-4 text-text-secondary">
+      <div className="text-[13px] leading-4 font-medium text-text-secondary">
         <span>{t('signup.haveAccount', { ns: 'login' })}</span>
         <Link
           className="text-text-accent"
@@ -89,7 +89,7 @@ export default function Form({
 
       {!systemFeatures.branding.enabled && (
         <>
-          <div className="system-xs-regular mt-3 block w-full text-text-tertiary">
+          <div className="mt-3 block w-full system-xs-regular text-text-tertiary">
             {t('tosDesc', { ns: 'login' })}
             &nbsp;
             <Link
diff --git a/web/app/signup/set-password/page.tsx b/web/app/signup/set-password/page.tsx
index 39c15e6161..72a25d6ac2 100644
--- a/web/app/signup/set-password/page.tsx
+++ b/web/app/signup/set-password/page.tsx
@@ -4,8 +4,8 @@ import Cookies from 'js-cookie'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
+import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { validPassword } from '@/config'
 import { useRouter, useSearchParams } from '@/next/navigation'
@@ -102,7 +102,7 @@ const ChangePasswordForm = () => {
           <h2 className="title-4xl-semi-bold text-text-primary">
             {t('changePassword', { ns: 'login' })}
           </h2>
-          <p className="body-md-regular mt-2 text-text-secondary">
+          <p className="mt-2 body-md-regular text-text-secondary">
             {t('changePasswordTip', { ns: 'login' })}
           </p>
         </div>
@@ -111,7 +111,7 @@ const ChangePasswordForm = () => {
           <div>
             {/* Password */}
             <div className="mb-5">
-              <label htmlFor="password" className="system-md-semibold my-2 text-text-secondary">
+              <label htmlFor="password" className="my-2 system-md-semibold text-text-secondary">
                 {t('account.newPassword', { ns: 'common' })}
               </label>
               <div className="relative mt-1">
@@ -124,11 +124,11 @@ const ChangePasswordForm = () => {
                 />
 
               </div>
-              <div className="body-xs-regular mt-1 text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
+              <div className="mt-1 body-xs-regular text-text-secondary">{t('error.passwordInvalid', { ns: 'login' })}</div>
             </div>
             {/* Confirm Password */}
             <div className="mb-5">
-              <label htmlFor="confirmPassword" className="system-md-semibold my-2 text-text-secondary">
+              <label htmlFor="confirmPassword" className="my-2 system-md-semibold text-text-secondary">
                 {t('account.confirmPassword', { ns: 'common' })}
               </label>
               <div className="relative mt-1">
diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index a1a0130b87..ac6475a565 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -8,7 +8,7 @@
 
 @import '../components/base/action-button/index.css';
 @import '../components/base/badge/index.css';
-@import '../components/base/button/index.css';
+@import '../components/base/ui/button/index.css';
 @import '../components/base/modal/index.css' layer(base);
 @import '../components/base/premium-badge/index.css';
 @import '../components/base/segmented-control/index.css';
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 65f06aeb22..4efdaf36eb 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -133,9 +133,6 @@
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx": {
@@ -164,9 +161,6 @@
   "app/(humanInputLayout)/form/[token]/form.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
     }
   },
   "app/(shareLayout)/components/authenticated-layout.tsx": {
@@ -182,11 +176,6 @@
       "count": 1
     }
   },
-  "app/(shareLayout)/webapp-reset-password/check-code/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/(shareLayout)/webapp-reset-password/layout.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -195,30 +184,7 @@
       "count": 1
     }
   },
-  "app/(shareLayout)/webapp-reset-password/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/(shareLayout)/webapp-reset-password/set-password/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/(shareLayout)/webapp-signin/check-code/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -238,26 +204,15 @@
       "count": 1
     }
   },
-  "app/account/(commonLayout)/account-page/AvatarWithEdit.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/account/(commonLayout)/account-page/email-change-modal.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 26
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
   },
   "app/account/(commonLayout)/account-page/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 15
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -267,25 +222,14 @@
       "count": 1
     }
   },
-  "app/account/(commonLayout)/delete-account/components/check-email.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/account/(commonLayout)/delete-account/components/feed-back.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/account/(commonLayout)/delete-account/components/verify-email.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/account/(commonLayout)/delete-account/index.tsx": {
@@ -293,11 +237,6 @@
       "count": 1
     }
   },
-  "app/account/(commonLayout)/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/account/oauth/authorize/layout.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -307,18 +246,10 @@
     }
   },
   "app/account/oauth/authorize/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/app-sidebar/app-info/app-info-detail-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
   "app/components/app-sidebar/app-info/app-info-trigger.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -330,9 +261,6 @@
     },
     "react/set-state-in-effect": {
       "count": 4
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/app-sidebar/app-sidebar-dropdown.tsx": {
@@ -393,9 +321,6 @@
   "app/components/app-sidebar/toggle-button.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/app/annotation/add-annotation-modal/edit-item/index.tsx": {
@@ -409,11 +334,6 @@
       "count": 1
     }
   },
-  "app/components/app/annotation/add-annotation-modal/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/app/annotation/batch-action.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -427,11 +347,6 @@
       "count": 7
     }
   },
-  "app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/app/annotation/batch-add-annotation-modal/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -445,9 +360,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -466,9 +378,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/app/annotation/edit-annotation-modal/index.tsx": {
@@ -494,9 +403,6 @@
     "react/no-nested-component-definitions": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -552,14 +458,6 @@
   "app/components/app/app-access-control/add-member-or-group-pop.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/app/app-access-control/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/app/app-access-control/specific-groups-or-members.tsx": {
@@ -582,9 +480,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
@@ -602,9 +497,6 @@
   "app/components/app/app-publisher/version-info-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/app/configuration/base/feature-panel/index.tsx": {
@@ -638,25 +530,14 @@
     }
   },
   "app/components/app/configuration/config-prompt/advanced-prompt-input.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/app/configuration/config-prompt/confirm-add-var/index.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -771,9 +652,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -790,12 +668,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 9
     }
@@ -807,12 +679,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -838,9 +704,6 @@
     "react/set-state-in-effect": {
       "count": 4
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -881,11 +744,6 @@
       "count": 1
     }
   },
-  "app/components/app/configuration/config/automatic/result.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/config/automatic/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -909,9 +767,6 @@
     "react/set-state-in-effect": {
       "count": 4
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -932,11 +787,6 @@
       "count": 3
     }
   },
-  "app/components/app/configuration/ctrl-btn-group/index.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/configuration/dataset-config/card-item/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -993,18 +843,12 @@
   "app/components/app/configuration/dataset-config/select-dataset/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/app/configuration/dataset-config/settings-modal/index.tsx": {
     "react/set-state-in-effect": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -1070,9 +914,6 @@
     "react/set-state-in-effect": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
     "ts/no-explicit-any": {
       "count": 11
     }
@@ -1085,9 +926,6 @@
   "app/components/app/configuration/prompt-value-panel/index.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/app/configuration/prompt-value-panel/utils.ts": {
@@ -1095,19 +933,6 @@
       "count": 1
     }
   },
-  "app/components/app/configuration/tools/external-data-tool-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/app/create-app-dialog/app-card/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/create-app-dialog/app-list/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -1128,9 +953,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 18
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -1138,9 +960,6 @@
   "app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/app/create-from-dsl-modal/index.tsx": {
@@ -1155,9 +974,6 @@
     },
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/app/create-from-dsl-modal/uploader.tsx": {
@@ -1168,14 +984,6 @@
   "app/components/app/duplicate-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/components/app/in-site-message/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/app/log/empty-element.tsx": {
@@ -1229,14 +1037,6 @@
       "count": 5
     }
   },
-  "app/components/app/overview/apikey-info-panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 3
-    }
-  },
   "app/components/app/overview/app-card.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -1248,9 +1048,6 @@
   "app/components/app/overview/customize/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
     }
   },
   "app/components/app/overview/embedded/index.tsx": {
@@ -1276,9 +1073,6 @@
     },
     "regexp/no-unused-capturing-group": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 22
     }
   },
   "app/components/app/overview/trigger-card.tsx": {
@@ -1295,9 +1089,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/app/text-generate/item/index.tsx": {
@@ -1324,14 +1115,6 @@
       "count": 2
     }
   },
-  "app/components/app/text-generate/saved-items/no-data/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/app/type-selector/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 3
@@ -1486,11 +1269,6 @@
       "count": 1
     }
   },
-  "app/components/base/app-icon-picker/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/app-icon/index.stories.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -1584,39 +1362,6 @@
       "count": 1
     }
   },
-  "app/components/base/button/add-button.stories.tsx": {
-    "no-console": {
-      "count": 1
-    }
-  },
-  "app/components/base/button/add-button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/button/index.stories.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/button/index.tsx": {
-    "react-refresh/only-export-components": {
-      "count": 1
-    }
-  },
-  "app/components/base/button/sync-button.stories.tsx": {
-    "no-console": {
-      "count": 1
-    }
-  },
-  "app/components/base/button/sync-button.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/carousel/index.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
@@ -1697,11 +1442,6 @@
       "count": 3
     }
   },
-  "app/components/base/chat/chat-with-history/inputs-form/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -1710,9 +1450,6 @@
   "app/components/base/chat/chat-with-history/sidebar/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/chat/chat-with-history/sidebar/item.tsx": {
@@ -1736,9 +1473,6 @@
   "app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/chat/chat/answer/agent-content.tsx": {
@@ -1868,16 +1602,6 @@
       "count": 3
     }
   },
-  "app/components/base/chat/chat/question.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/base/chat/chat/try-to-ask.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/chat/chat/type.ts": {
     "ts/no-explicit-any": {
       "count": 5
@@ -1928,11 +1652,6 @@
       "count": 3
     }
   },
-  "app/components/base/chat/embedded-chatbot/inputs-form/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -1948,11 +1667,6 @@
       "count": 10
     }
   },
-  "app/components/base/checkbox-list/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
   "app/components/base/checkbox/index.stories.tsx": {
     "no-console": {
       "count": 1
@@ -1980,9 +1694,6 @@
   "app/components/base/confirm/index.tsx": {
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/base/content-dialog/index.stories.tsx": {
@@ -2025,11 +1736,6 @@
       "count": 1
     }
   },
-  "app/components/base/date-and-time-picker/date-picker/footer.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/date-and-time-picker/date-picker/header.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -2096,11 +1802,6 @@
       "count": 3
     }
   },
-  "app/components/base/drawer/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/effect/index.stories.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -2117,9 +1818,6 @@
   "app/components/base/emoji-picker/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/encrypted-bottom/index.tsx": {
@@ -2134,9 +1832,6 @@
     "react/component-hook-factories": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -2159,9 +1854,6 @@
   "app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx": {
@@ -2173,9 +1865,6 @@
     }
   },
   "app/components/base/features/new-feature-panel/annotation-reply/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -2195,20 +1884,12 @@
       "count": 2
     }
   },
-  "app/components/base/features/new-feature-panel/conversation-opener/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/features/new-feature-panel/conversation-opener/modal.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/base/features/new-feature-panel/dialog-wrapper.tsx": {
@@ -2219,9 +1900,6 @@
   "app/components/base/features/new-feature-panel/feature-bar.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/base/features/new-feature-panel/feature-card.tsx": {
@@ -2235,26 +1913,11 @@
       "count": 5
     }
   },
-  "app/components/base/features/new-feature-panel/file-upload/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/base/features/new-feature-panel/file-upload/setting-content.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx": {
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/components/base/features/new-feature-panel/image-upload/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/features/new-feature-panel/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -2266,9 +1929,6 @@
     }
   },
   "app/components/base/features/new-feature-panel/moderation/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2282,18 +1942,10 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/base/features/new-feature-panel/text-to-speech/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -2335,11 +1987,6 @@
       "count": 1
     }
   },
-  "app/components/base/file-uploader/file-from-link-or-local/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/file-uploader/file-list-in-log.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2359,19 +2006,6 @@
       "count": 3
     }
   },
-  "app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/base/file-uploader/hooks.ts": {
     "react/no-unnecessary-use-prefix": {
       "count": 1
@@ -2832,9 +2466,6 @@
   "app/components/base/image-uploader/image-link-input.tsx": {
     "regexp/no-unused-capturing-group": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/image-uploader/image-list.stories.tsx": {
@@ -2876,11 +2507,6 @@
       "count": 2
     }
   },
-  "app/components/base/inline-delete-confirm/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/input-with-copy/index.tsx": {
     "react/unsupported-syntax": {
       "count": 1
@@ -2939,9 +2565,6 @@
     }
   },
   "app/components/base/markdown-blocks/button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -2962,9 +2585,6 @@
   "app/components/base/markdown-blocks/form.tsx": {
     "erasable-syntax-only/enums": {
       "count": 3
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/base/markdown-blocks/index.ts": {
@@ -3087,11 +2707,6 @@
       "count": 2
     }
   },
-  "app/components/base/modal-like-wrap/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/modal/index.stories.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -3105,11 +2720,6 @@
       "count": 1
     }
   },
-  "app/components/base/modal/modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/base/new-audio-button/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3131,11 +2741,6 @@
       "count": 1
     }
   },
-  "app/components/base/notion-connector/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/notion-page-selector/credential-selector/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -3162,9 +2767,6 @@
     }
   },
   "app/components/base/pagination/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    },
     "unicorn/prefer-number-properties": {
       "count": 1
     }
@@ -3346,11 +2948,6 @@
       "count": 2
     }
   },
-  "app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
   "app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -3708,9 +3305,6 @@
   "app/components/base/tag-management/tag-remove-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/base/tag-management/trigger.tsx": {
@@ -3761,11 +3355,6 @@
       "count": 1
     }
   },
-  "app/components/base/ui/alert-dialog/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/base/ui/avatar/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -3831,17 +3420,9 @@
       "count": 1
     }
   },
-  "app/components/billing/apps-full-in-dialog/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/billing/plan-upgrade-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/billing/plan/assets/index.tsx": {
@@ -3859,11 +3440,6 @@
       "count": 12
     }
   },
-  "app/components/billing/pricing/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/billing/pricing/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -3956,26 +3532,11 @@
       "count": 1
     }
   },
-  "app/components/custom/custom-web-app-brand/components/chat-preview-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
   "app/components/custom/custom-web-app-brand/components/powered-by-brand.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
-  "app/components/custom/custom-web-app-brand/components/workflow-preview-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/components/custom/custom-web-app-brand/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    }
-  },
   "app/components/datasets/chunk.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -4015,9 +3576,6 @@
   "app/components/datasets/common/image-previewer/index.tsx": {
     "no-irregular-whitespace": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/datasets/common/image-uploader/__tests__/store.spec.tsx": {
@@ -4035,21 +3593,11 @@
       "count": 1
     }
   },
-  "app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-input.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/image-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/common/image-uploader/store.tsx": {
     "react-refresh/only-export-components": {
       "count": 3
@@ -4074,9 +3622,6 @@
   "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/header.tsx": {
@@ -4095,9 +3640,6 @@
     },
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/index.tsx": {
@@ -4120,14 +3662,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/create-from-pipeline/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create-from-pipeline/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -4166,9 +3700,6 @@
   "app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/datasets/create-from-pipeline/list/template-card/details/types.ts": {
@@ -4176,11 +3707,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/datasets/create-from-pipeline/list/template-card/index.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -4191,11 +3717,6 @@
       "count": 3
     }
   },
-  "app/components/datasets/create/embedding-process/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create/embedding-process/indexing-progress-item.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4255,9 +3776,6 @@
   "app/components/datasets/create/step-two/components/general-chunking-options.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/datasets/create/step-two/components/index.ts": {
@@ -4268,9 +3786,6 @@
   "app/components/datasets/create/step-two/components/indexing-mode-section.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
     }
   },
   "app/components/datasets/create/step-two/components/inputs.tsx": {
@@ -4283,11 +3798,6 @@
       "count": 3
     }
   },
-  "app/components/datasets/create/step-two/components/parent-child-options.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/create/step-two/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 6
@@ -4351,11 +3861,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/website/base/crawled-result-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create/website/base/error-message.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -4366,11 +3871,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/website/base/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/create/website/base/input.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -4427,11 +3927,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/create/website/no-data.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/create/website/preview.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -4484,11 +3979,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/components/empty-element.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/components/list.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -4505,14 +3995,6 @@
   "app/components/datasets/documents/components/rename-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/datasets/documents/create-from-pipeline/actions/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx": {
@@ -4543,9 +4025,6 @@
   "app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/datasets/documents/create-from-pipeline/data-source/local-file/components/upload-dropzone.tsx": {
@@ -4563,11 +4042,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -4604,11 +4078,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx": {
     "react/set-state-in-effect": {
       "count": 5
@@ -4634,20 +4103,12 @@
       "count": 1
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
   "app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -4662,14 +4123,6 @@
       "count": 5
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/left-header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/preview/file-preview.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 5
@@ -4693,11 +4146,6 @@
       "count": 3
     }
   },
-  "app/components/datasets/documents/create-from-pipeline/process-documents/header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/create-from-pipeline/process-documents/index.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -4706,9 +4154,6 @@
   "app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/datasets/documents/create-from-pipeline/processing/index.tsx": {
@@ -4736,20 +4181,12 @@
       "count": 9
     }
   },
-  "app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/batch-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/datasets/documents/detail/completed/child-segment-detail.tsx": {
@@ -4765,9 +4202,6 @@
   "app/components/datasets/documents/detail/completed/common/batch-action.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/datasets/documents/detail/completed/common/chunk-content.tsx": {
@@ -4975,14 +4409,6 @@
       "count": 6
     }
   },
-  "app/components/datasets/documents/detail/settings/pipeline-settings/left-header.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/datasets/documents/detail/settings/pipeline-settings/process-documents/index.tsx": {
     "ts/no-explicit-any": {
       "count": 3
@@ -5004,14 +4430,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    }
-  },
-  "app/components/datasets/external-api/external-api-panel/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/datasets/external-api/external-knowledge-api-card/index.tsx": {
@@ -5040,11 +4458,6 @@
       "count": 4
     }
   },
-  "app/components/datasets/external-knowledge-base/create/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/datasets/extra-info/api-access/card.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -5058,11 +4471,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/extra-info/service-api/card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/datasets/extra-info/service-api/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5110,11 +4518,6 @@
       "count": 1
     }
   },
-  "app/components/datasets/hit-testing/components/query-input/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/datasets/hit-testing/components/query-input/textarea.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5165,16 +4568,6 @@
       "count": 3
     }
   },
-  "app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/datasets/hit-testing/modify-retrieval-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/datasets/list/dataset-card/components/corner-labels.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -5231,11 +4624,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/list/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/list/new-dataset-card/option.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -5280,9 +4668,6 @@
   "app/components/datasets/metadata/edit-metadata-batch/modal.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/datasets/metadata/hooks/use-edit-dataset-metadata.ts": {
@@ -5311,12 +4696,6 @@
   "app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx": {
     "no-restricted-imports": {
       "count": 3
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/datasets/metadata/metadata-dataset/field.tsx": {
@@ -5356,11 +4735,6 @@
       "count": 2
     }
   },
-  "app/components/datasets/metadata/metadata-document/no-data.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/datasets/metadata/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
@@ -5379,9 +4753,6 @@
   "app/components/datasets/rename-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/datasets/settings/chunk-structure/types.ts": {
@@ -5486,25 +4857,14 @@
       "count": 1
     }
   },
-  "app/components/develop/secret-key/secret-key-button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/develop/secret-key/secret-key-generate.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/develop/secret-key/secret-key-modal.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/develop/tag.tsx": {
@@ -5517,16 +4877,6 @@
       "count": 4
     }
   },
-  "app/components/explore/app-card/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
-  "app/components/explore/app-list/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/explore/banner/banner-item.tsx": {
     "react-hooks-extra/no-direct-set-state-in-use-effect": {
       "count": 1
@@ -5561,9 +4911,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
-    },
     "ts/no-explicit-any": {
       "count": 1
     },
@@ -5599,11 +4946,6 @@
       "count": 2
     }
   },
-  "app/components/explore/try-app/app-info/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
   "app/components/explore/try-app/app/chat.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5623,9 +4965,6 @@
   "app/components/explore/try-app/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/explore/try-app/preview/basic-app-preview.tsx": {
@@ -5728,17 +5067,11 @@
   "app/components/header/account-about/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/header/account-dropdown/compliance.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/header/account-dropdown/index.tsx": {
@@ -5769,9 +5102,6 @@
   "app/components/header/account-setting/api-based-extension-page/modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/header/account-setting/api-based-extension-page/selector.tsx": {
@@ -5801,9 +5131,6 @@
   "app/components/header/account-setting/data-source-page-new/configure.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/header/account-setting/data-source-page-new/hooks/index.ts": {
@@ -5825,9 +5152,6 @@
     }
   },
   "app/components/header/account-setting/data-source-page-new/item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -5845,11 +5169,6 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 10
-    }
-  },
   "app/components/header/account-setting/key-validator/KeyInput.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -5868,11 +5187,6 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/members-page/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 14
@@ -5881,9 +5195,6 @@
   "app/components/header/account-setting/members-page/invite-modal/index.tsx": {
     "react/set-state-in-effect": {
       "count": 3
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/header/account-setting/members-page/invite-modal/role-selector.tsx": {
@@ -5891,11 +5202,6 @@
       "count": 4
     }
   },
-  "app/components/header/account-setting/members-page/invited-modal/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -5921,9 +5227,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 20
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -5981,9 +5284,6 @@
   "app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/header/account-setting/model-provider-page/model-auth/authorized/authorized-item.tsx": {
@@ -6000,18 +5300,10 @@
     "no-restricted-imports": {
       "count": 3
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6083,9 +5375,6 @@
     }
   },
   "app/components/header/account-setting/model-provider-page/model-modal/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
@@ -6123,11 +5412,6 @@
       "count": 6
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6159,11 +5443,6 @@
       "count": 4
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-selector/popup.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 13
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6177,11 +5456,6 @@
       "count": 8
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 6
@@ -6197,11 +5471,6 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 4
@@ -6238,18 +5507,10 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6258,11 +5519,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 4
@@ -6273,11 +5529,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    }
-  },
   "app/components/header/account-setting/model-provider-page/utils.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -6430,11 +5681,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/install-plugin/install-bundle/steps/install.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/install-plugin/install-from-github/index.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -6454,11 +5700,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/install-plugin/install-from-local-package/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -6467,11 +5708,6 @@
       "count": 2
     }
   },
-  "app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -6485,11 +5721,6 @@
       "count": 2
     }
   },
-  "app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/marketplace/description/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 9
@@ -6505,14 +5736,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/marketplace/list/card-wrapper.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/plugins/marketplace/list/list-with-collection.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -6563,9 +5786,6 @@
     }
   },
   "app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -6603,9 +5823,6 @@
     "no-restricted-imports": {
       "count": 3
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -6614,9 +5831,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -6706,9 +5920,6 @@
     }
   },
   "app/components/plugins/plugin-detail-panel/datasource-action-list.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -6741,11 +5952,6 @@
       "count": 3
     }
   },
-  "app/components/plugins/plugin-detail-panel/detail-header/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/plugin-detail-panel/endpoint-card.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -6769,9 +5975,6 @@
     }
   },
   "app/components/plugins/plugin-detail-panel/endpoint-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 7
     }
@@ -6860,17 +6063,11 @@
     },
     "no-restricted-imports": {
       "count": 3
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/plugins/plugin-detail-panel/subscription-list/create/types.ts": {
@@ -6980,9 +6177,6 @@
   "app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx": {
@@ -7035,9 +6229,6 @@
   "app/components/plugins/plugin-mutation-model/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/plugin-page/context.ts": {
@@ -7048,17 +6239,11 @@
   "app/components/plugins/plugin-page/debug-info.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/plugin-page/empty/index.tsx": {
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/plugins/plugin-page/filter-management/category-filter.tsx": {
@@ -7080,9 +6265,6 @@
   "app/components/plugins/plugin-page/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/plugin-page/install-plugin-dropdown.tsx": {
@@ -7091,9 +6273,6 @@
     },
     "react/set-state-in-effect": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/plugin-page/plugin-info.tsx": {
@@ -7111,11 +6290,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/plugin-page/plugin-tasks/components/task-status-indicator.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -7129,16 +6303,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/plugin-page/plugins-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/plugins/provider-card.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/readme-panel/entrance.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -7172,17 +6336,9 @@
       "count": 1
     }
   },
-  "app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/plugins/reference-setting-modal/auto-update-setting/tool-item.tsx": {
@@ -7206,9 +6362,6 @@
   "app/components/plugins/reference-setting-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/reference-setting-modal/label.tsx": {
@@ -7224,17 +6377,9 @@
       "count": 25
     }
   },
-  "app/components/plugins/update-plugin/downgrade-warning.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/plugins/update-plugin/from-market-place.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/plugins/update-plugin/plugin-version-picker.tsx": {
@@ -7250,9 +6395,6 @@
   "app/components/rag-pipeline/components/conversion.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/rag-pipeline/components/panel/input-field/editor/form/hidden-fields.tsx": {
@@ -7310,9 +6452,6 @@
   "app/components/rag-pipeline/components/panel/input-field/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/rag-pipeline/components/panel/input-field/label-right-content/global-inputs.tsx": {
@@ -7369,9 +6508,6 @@
     }
   },
   "app/components/rag-pipeline/components/panel/test-run/result/result-preview/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7389,12 +6525,6 @@
   "app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/rag-pipeline/components/publish-toast.tsx": {
@@ -7415,9 +6545,6 @@
   "app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
     }
   },
   "app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx": {
@@ -7436,17 +6563,11 @@
   "app/components/rag-pipeline/components/update-dsl-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/rag-pipeline/components/version-mismatch-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/rag-pipeline/hooks/index.ts": {
@@ -7532,9 +6653,6 @@
     }
   },
   "app/components/share/text-generation/result/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7552,11 +6670,6 @@
       "count": 2
     }
   },
-  "app/components/share/text-generation/run-batch/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/share/text-generation/run-once/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -7564,9 +6677,6 @@
     "react/set-state-in-effect": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -7599,18 +6709,9 @@
   "app/components/tools/edit-custom-collection-modal/config-credentials.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
     }
   },
   "app/components/tools/edit-custom-collection-modal/get-schema.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7619,23 +6720,11 @@
     "react/set-state-in-effect": {
       "count": 4
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
   "app/components/tools/edit-custom-collection-modal/test-api.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -7673,9 +6762,6 @@
     "no-restricted-imports": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -7701,11 +6787,6 @@
       "count": 5
     }
   },
-  "app/components/tools/mcp/headers-input.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/tools/mcp/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -7715,9 +6796,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 5
     }
@@ -7730,17 +6808,11 @@
   "app/components/tools/mcp/mcp-service-card.tsx": {
     "no-restricted-imports": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/tools/mcp/modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/tools/mcp/provider-card.tsx": {
@@ -7783,9 +6855,6 @@
   "app/components/tools/provider/detail.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
     }
   },
   "app/components/tools/provider/empty.tsx": {
@@ -7802,9 +6871,6 @@
     }
   },
   "app/components/tools/setting/build-in/config-credentials.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -7817,17 +6883,9 @@
       "count": 4
     }
   },
-  "app/components/tools/workflow-tool/configure-button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/tools/workflow-tool/confirm-modal/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/tools/workflow-tool/index.tsx": {
@@ -7914,14 +6972,6 @@
   "app/components/workflow/block-selector/all-start-blocks.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/workflow/block-selector/all-tools.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/block-selector/blocks.tsx": {
@@ -7995,9 +7045,6 @@
     },
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/block-selector/market-place-plugin/item.tsx": {
@@ -8137,9 +7184,6 @@
   "app/components/workflow/dsl-export-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
     }
   },
   "app/components/workflow/header/checklist/index.tsx": {
@@ -8152,21 +7196,11 @@
       "count": 2
     }
   },
-  "app/components/workflow/header/checklist/plugin-group.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/header/editing-title.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
-  "app/components/workflow/header/header-in-restoring.tsx": {
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
   "app/components/workflow/header/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -8222,9 +7256,6 @@
   "app/components/workflow/header/version-history-button.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/header/view-history.tsx": {
@@ -8388,9 +7419,6 @@
     }
   },
   "app/components/workflow/nodes/_base/components/before-run-form/form.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -8492,9 +7520,6 @@
   "app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx": {
@@ -8636,17 +7661,9 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/next-step/item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/next-step/operator.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/_base/components/node-control.tsx": {
@@ -8816,11 +7833,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 9
-    }
-  },
   "app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -8901,11 +7913,6 @@
       "count": 5
     }
   },
-  "app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts": {
     "react/no-unnecessary-use-prefix": {
       "count": 2
@@ -9096,11 +8103,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/code/panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/code/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -9132,11 +8134,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/data-source-empty/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/data-source/default.ts": {
     "ts/no-explicit-any": {
       "count": 5
@@ -9219,9 +8216,6 @@
   "app/components/workflow/nodes/http/components/authorization/index.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/http/components/authorization/radio-group.tsx": {
@@ -9309,9 +8303,6 @@
   "app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/workflow/nodes/human-input/components/delivery-method/index.tsx": {
@@ -9325,9 +8316,6 @@
   "app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/human-input/components/delivery-method/method-selector.tsx": {
@@ -9370,9 +8358,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -9380,17 +8365,11 @@
   "app/components/workflow/nodes/human-input/components/delivery-method/upgrade-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/human-input/components/form-content-preview.tsx": {
     "react/unsupported-syntax": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/human-input/components/form-content.tsx": {
@@ -9413,11 +8392,6 @@
       "count": 3
     }
   },
-  "app/components/workflow/nodes/human-input/components/single-run-form.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/workflow/nodes/human-input/components/timeout.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -9436,12 +8410,6 @@
   "app/components/workflow/nodes/human-input/panel.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/human-input/types.ts": {
@@ -9493,23 +8461,11 @@
   "app/components/workflow/nodes/if-else/components/condition-number-input.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/if-else/components/condition-wrap.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/if-else/default.ts": {
@@ -9522,11 +8478,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/if-else/panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/if-else/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
@@ -9578,11 +8529,6 @@
       "count": 6
     }
   },
-  "app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -9591,9 +8537,6 @@
   "app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/knowledge-base/components/index-method.tsx": {
@@ -9679,9 +8622,6 @@
   "app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-common-variable-selector.tsx": {
@@ -9759,20 +8699,11 @@
   "app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 2
     }
   },
   "app/components/workflow/nodes/knowledge-retrieval/default.ts": {
@@ -9890,9 +8821,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -9900,9 +8828,6 @@
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/assets/index.tsx": {
@@ -9913,9 +8838,6 @@
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/generated-result.tsx": {
     "style/multiline-ternary": {
       "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx": {
@@ -9932,9 +8854,6 @@
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/prompt-editor.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 6
     }
   },
   "app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx": {
@@ -9994,9 +8913,6 @@
     }
   },
   "app/components/workflow/nodes/llm/components/structure-output.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -10006,11 +8922,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/llm/panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/llm/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
@@ -10094,20 +9005,11 @@
   "app/components/workflow/nodes/loop/components/condition-number-input.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/loop/components/condition-wrap.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/nodes/loop/components/loop-variables/empty.tsx": {
@@ -10175,9 +9077,6 @@
     "no-restricted-imports": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -10338,9 +9237,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -10392,9 +9288,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -10563,9 +9456,6 @@
   "app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx": {
@@ -10696,16 +9586,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/panel/chat-variable-panel/components/variable-modal.sections.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
-  "app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -10783,9 +9663,6 @@
     "react/set-state-in-effect": {
       "count": 4
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 11
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -10816,9 +9693,6 @@
     }
   },
   "app/components/workflow/panel/inputs-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -10844,14 +9718,6 @@
   "app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/panel/version-history-panel/empty.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
     }
   },
   "app/components/workflow/panel/version-history-panel/filter/filter-item.tsx": {
@@ -10893,9 +9759,6 @@
   "app/components/workflow/panel/version-history-panel/restore-confirm-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
     }
   },
   "app/components/workflow/panel/version-history-panel/version-history-item.tsx": {
@@ -10907,29 +9770,13 @@
     }
   },
   "app/components/workflow/panel/workflow-preview.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
-  "app/components/workflow/run/agent-log/agent-log-item.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/workflow/run/agent-log/agent-log-nav-more.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/workflow/run/agent-log/agent-log-nav.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/components/workflow/run/agent-log/agent-log-trigger.tsx": {
@@ -10961,9 +9808,6 @@
     }
   },
   "app/components/workflow/run/iteration-log/iteration-log-trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "unicorn/prefer-number-properties": {
       "count": 1
     }
@@ -10979,9 +9823,6 @@
     }
   },
   "app/components/workflow/run/loop-log/loop-log-trigger.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "unicorn/prefer-number-properties": {
       "count": 1
     }
@@ -11145,9 +9986,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -11209,9 +10047,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -11222,9 +10057,6 @@
     }
   },
   "app/components/workflow/variable-inspect/left.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -11233,9 +10065,6 @@
     "no-restricted-imports": {
       "count": 1
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -11351,17 +10180,9 @@
       "count": 2
     }
   },
-  "app/education-apply/education-apply-page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 11
-    }
-  },
   "app/education-apply/expire-notice-modal.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
     }
   },
   "app/education-apply/hooks.ts": {
@@ -11388,17 +10209,9 @@
       "count": 1
     }
   },
-  "app/education-apply/user-info.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/education-apply/verify-state-modal.tsx": {
     "react/set-state-in-effect": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
     }
   },
   "app/forgot-password/ForgotPasswordForm.spec.tsx": {
@@ -11407,9 +10220,6 @@
     }
   },
   "app/init/InitPasswordPopup.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -11419,11 +10229,6 @@
       "count": 7
     }
   },
-  "app/reset-password/check-code/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/reset-password/layout.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -11432,35 +10237,12 @@
       "count": 1
     }
   },
-  "app/reset-password/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/reset-password/set-password/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/signin/_header.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "app/signin/check-code/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/signin/components/mail-and-code-auth.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/signin/components/mail-and-password-auth.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -11468,9 +10250,6 @@
   "app/signin/invite-settings/page.tsx": {
     "no-restricted-imports": {
       "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 8
     }
   },
   "app/signin/layout.tsx": {
@@ -11485,23 +10264,10 @@
     "no-restricted-imports": {
       "count": 2
     },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
   },
-  "app/signup/check-code/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/signup/components/input-mail.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/signup/layout.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -11515,11 +10281,6 @@
       "count": 1
     }
   },
-  "app/signup/set-password/page.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "context/app-context-provider.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1

From e5fd3133f490c5c26fa0822489d15ba7d93330b0 Mon Sep 17 00:00:00 2001
From: bohdansolovie <153934212+bohdansolovie@users.noreply.github.com>
Date: Tue, 14 Apr 2026 09:27:39 -0400
Subject: [PATCH 10/44] test: migrate task integration tests to SQLAlchemy 2.0
 query APIs (#35170)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../tasks/test_add_document_to_index_task.py  | 17 ++---
 .../tasks/test_batch_clean_document_task.py   | 76 ++++++++++++++-----
 ...test_batch_create_segment_to_index_task.py | 51 ++++++-------
 .../tasks/test_dataset_indexing_task.py       |  3 +-
 .../tasks/test_document_indexing_sync_task.py | 53 ++++++-------
 5 files changed, 117 insertions(+), 83 deletions(-)

diff --git a/api/tests/test_containers_integration_tests/tasks/test_add_document_to_index_task.py b/api/tests/test_containers_integration_tests/tasks/test_add_document_to_index_task.py
index 4b04c1accb..fcc15aad42 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_add_document_to_index_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_add_document_to_index_task.py
@@ -2,6 +2,7 @@ from unittest.mock import MagicMock, patch
 
 import pytest
 from faker import Faker
+from sqlalchemy import select
 from sqlalchemy.orm import Session
 
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
@@ -530,22 +531,18 @@ class TestAddDocumentToIndexTask:
         redis_client.set(indexing_cache_key, "processing", ex=300)
 
         # Verify logs exist before processing
-        existing_logs = (
-            db_session_with_containers.query(DatasetAutoDisableLog)
-            .where(DatasetAutoDisableLog.document_id == document.id)
-            .all()
-        )
+        existing_logs = db_session_with_containers.scalars(
+            select(DatasetAutoDisableLog).where(DatasetAutoDisableLog.document_id == document.id)
+        ).all()
         assert len(existing_logs) == 2
 
         # Act: Execute the task
         add_document_to_index_task(document.id)
 
         # Assert: Verify auto disable logs were deleted
-        remaining_logs = (
-            db_session_with_containers.query(DatasetAutoDisableLog)
-            .where(DatasetAutoDisableLog.document_id == document.id)
-            .all()
-        )
+        remaining_logs = db_session_with_containers.scalars(
+            select(DatasetAutoDisableLog).where(DatasetAutoDisableLog.document_id == document.id)
+        ).all()
         assert len(remaining_logs) == 0
 
         # Verify index processing occurred normally
diff --git a/api/tests/test_containers_integration_tests/tasks/test_batch_clean_document_task.py b/api/tests/test_containers_integration_tests/tasks/test_batch_clean_document_task.py
index 6cbbe43137..e29ca7ebab 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_batch_clean_document_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_batch_clean_document_task.py
@@ -11,6 +11,7 @@ from unittest.mock import Mock, patch
 
 import pytest
 from faker import Faker
+from sqlalchemy import func, select
 from sqlalchemy.orm import Session
 
 from core.rag.index_processor.constant.index_type import IndexStructureType
@@ -267,11 +268,13 @@ class TestBatchCleanDocumentTask:
         db_session_with_containers.commit()  # Ensure all changes are committed
 
         # Check that segment is deleted
-        deleted_segment = db_session_with_containers.query(DocumentSegment).filter_by(id=segment_id).first()
+        deleted_segment = db_session_with_containers.scalar(
+            select(DocumentSegment).where(DocumentSegment.id == segment_id).limit(1)
+        )
         assert deleted_segment is None
 
         # Check that upload file is deleted
-        deleted_file = db_session_with_containers.query(UploadFile).filter_by(id=file_id).first()
+        deleted_file = db_session_with_containers.scalar(select(UploadFile).where(UploadFile.id == file_id).limit(1))
         assert deleted_file is None
 
     def test_batch_clean_document_task_with_image_files(
@@ -319,7 +322,9 @@ class TestBatchCleanDocumentTask:
         db_session_with_containers.commit()
 
         # Check that segment is deleted
-        deleted_segment = db_session_with_containers.query(DocumentSegment).filter_by(id=segment_id).first()
+        deleted_segment = db_session_with_containers.scalar(
+            select(DocumentSegment).where(DocumentSegment.id == segment_id).limit(1)
+        )
         assert deleted_segment is None
 
         # Verify that the task completed successfully by checking the log output
@@ -360,14 +365,14 @@ class TestBatchCleanDocumentTask:
         db_session_with_containers.commit()
 
         # Check that upload file is deleted
-        deleted_file = db_session_with_containers.query(UploadFile).filter_by(id=file_id).first()
+        deleted_file = db_session_with_containers.scalar(select(UploadFile).where(UploadFile.id == file_id).limit(1))
         assert deleted_file is None
 
         # Verify database cleanup
         db_session_with_containers.commit()
 
         # Check that upload file is deleted
-        deleted_file = db_session_with_containers.query(UploadFile).filter_by(id=file_id).first()
+        deleted_file = db_session_with_containers.scalar(select(UploadFile).where(UploadFile.id == file_id).limit(1))
         assert deleted_file is None
 
     def test_batch_clean_document_task_dataset_not_found(
@@ -410,7 +415,9 @@ class TestBatchCleanDocumentTask:
         db_session_with_containers.commit()
 
         # Document should still exist since cleanup failed
-        existing_document = db_session_with_containers.query(Document).filter_by(id=document_id).first()
+        existing_document = db_session_with_containers.scalar(
+            select(Document).where(Document.id == document_id).limit(1)
+        )
         assert existing_document is not None
 
     def test_batch_clean_document_task_storage_cleanup_failure(
@@ -453,11 +460,13 @@ class TestBatchCleanDocumentTask:
         db_session_with_containers.commit()
 
         # Check that segment is deleted from database
-        deleted_segment = db_session_with_containers.query(DocumentSegment).filter_by(id=segment_id).first()
+        deleted_segment = db_session_with_containers.scalar(
+            select(DocumentSegment).where(DocumentSegment.id == segment_id).limit(1)
+        )
         assert deleted_segment is None
 
         # Check that upload file is deleted from database
-        deleted_file = db_session_with_containers.query(UploadFile).filter_by(id=file_id).first()
+        deleted_file = db_session_with_containers.scalar(select(UploadFile).where(UploadFile.id == file_id).limit(1))
         assert deleted_file is None
 
     def test_batch_clean_document_task_multiple_documents(
@@ -510,12 +519,16 @@ class TestBatchCleanDocumentTask:
 
         # Check that all segments are deleted
         for segment_id in segment_ids:
-            deleted_segment = db_session_with_containers.query(DocumentSegment).filter_by(id=segment_id).first()
+            deleted_segment = db_session_with_containers.scalar(
+                select(DocumentSegment).where(DocumentSegment.id == segment_id).limit(1)
+            )
             assert deleted_segment is None
 
         # Check that all upload files are deleted
         for file_id in file_ids:
-            deleted_file = db_session_with_containers.query(UploadFile).filter_by(id=file_id).first()
+            deleted_file = db_session_with_containers.scalar(
+                select(UploadFile).where(UploadFile.id == file_id).limit(1)
+            )
             assert deleted_file is None
 
     def test_batch_clean_document_task_different_doc_forms(
@@ -564,7 +577,9 @@ class TestBatchCleanDocumentTask:
                 db_session_with_containers.commit()
 
                 # Check that segment is deleted
-                deleted_segment = db_session_with_containers.query(DocumentSegment).filter_by(id=segment_id).first()
+                deleted_segment = db_session_with_containers.scalar(
+                    select(DocumentSegment).where(DocumentSegment.id == segment_id).limit(1)
+                )
                 assert deleted_segment is None
 
             except Exception as e:
@@ -574,7 +589,9 @@ class TestBatchCleanDocumentTask:
                 db_session_with_containers.commit()
 
                 # Check if the segment still exists (task may have failed before deletion)
-                existing_segment = db_session_with_containers.query(DocumentSegment).filter_by(id=segment_id).first()
+                existing_segment = db_session_with_containers.scalar(
+                    select(DocumentSegment).where(DocumentSegment.id == segment_id).limit(1)
+                )
                 if existing_segment is not None:
                     # If segment still exists, the task failed before deletion
                     # This is acceptable in test environments with external service issues
@@ -645,12 +662,16 @@ class TestBatchCleanDocumentTask:
 
         # Check that all segments are deleted
         for segment_id in segment_ids:
-            deleted_segment = db_session_with_containers.query(DocumentSegment).filter_by(id=segment_id).first()
+            deleted_segment = db_session_with_containers.scalar(
+                select(DocumentSegment).where(DocumentSegment.id == segment_id).limit(1)
+            )
             assert deleted_segment is None
 
         # Check that all upload files are deleted
         for file_id in file_ids:
-            deleted_file = db_session_with_containers.query(UploadFile).filter_by(id=file_id).first()
+            deleted_file = db_session_with_containers.scalar(
+                select(UploadFile).where(UploadFile.id == file_id).limit(1)
+            )
             assert deleted_file is None
 
     def test_batch_clean_document_task_integration_with_real_database(
@@ -699,8 +720,16 @@ class TestBatchCleanDocumentTask:
         db_session_with_containers.commit()
 
         # Verify initial state
-        assert db_session_with_containers.query(DocumentSegment).filter_by(document_id=document.id).count() == 3
-        assert db_session_with_containers.query(UploadFile).filter_by(id=upload_file.id).first() is not None
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            )
+            == 3
+        )
+        assert (
+            db_session_with_containers.scalar(select(UploadFile).where(UploadFile.id == upload_file.id).limit(1))
+            is not None
+        )
 
         # Store original IDs for verification
         document_id = document.id
@@ -720,13 +749,20 @@ class TestBatchCleanDocumentTask:
 
         # Check that all segments are deleted
         for segment_id in segment_ids:
-            deleted_segment = db_session_with_containers.query(DocumentSegment).filter_by(id=segment_id).first()
+            deleted_segment = db_session_with_containers.scalar(
+                select(DocumentSegment).where(DocumentSegment.id == segment_id).limit(1)
+            )
             assert deleted_segment is None
 
         # Check that upload file is deleted
-        deleted_file = db_session_with_containers.query(UploadFile).filter_by(id=file_id).first()
+        deleted_file = db_session_with_containers.scalar(select(UploadFile).where(UploadFile.id == file_id).limit(1))
         assert deleted_file is None
 
         # Verify final database state
-        assert db_session_with_containers.query(DocumentSegment).filter_by(document_id=document_id).count() == 0
-        assert db_session_with_containers.query(UploadFile).filter_by(id=file_id).first() is None
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document_id)
+            )
+            == 0
+        )
+        assert db_session_with_containers.scalar(select(UploadFile).where(UploadFile.id == file_id).limit(1)) is None
diff --git a/api/tests/test_containers_integration_tests/tasks/test_batch_create_segment_to_index_task.py b/api/tests/test_containers_integration_tests/tasks/test_batch_create_segment_to_index_task.py
index f9ae33b32f..05827112d4 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_batch_create_segment_to_index_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_batch_create_segment_to_index_task.py
@@ -17,6 +17,7 @@ from unittest.mock import MagicMock, patch
 
 import pytest
 from faker import Faker
+from sqlalchemy import delete, select
 from sqlalchemy.orm import Session
 
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
@@ -37,13 +38,13 @@ class TestBatchCreateSegmentToIndexTask:
         from extensions.ext_redis import redis_client
 
         # Clear all test data
-        db_session_with_containers.query(DocumentSegment).delete()
-        db_session_with_containers.query(Document).delete()
-        db_session_with_containers.query(Dataset).delete()
-        db_session_with_containers.query(UploadFile).delete()
-        db_session_with_containers.query(TenantAccountJoin).delete()
-        db_session_with_containers.query(Tenant).delete()
-        db_session_with_containers.query(Account).delete()
+        db_session_with_containers.execute(delete(DocumentSegment))
+        db_session_with_containers.execute(delete(Document))
+        db_session_with_containers.execute(delete(Dataset))
+        db_session_with_containers.execute(delete(UploadFile))
+        db_session_with_containers.execute(delete(TenantAccountJoin))
+        db_session_with_containers.execute(delete(Tenant))
+        db_session_with_containers.execute(delete(Account))
         db_session_with_containers.commit()
 
         # Clear Redis cache
@@ -292,12 +293,9 @@ class TestBatchCreateSegmentToIndexTask:
         # Verify results
 
         # Check that segments were created
-        segments = (
-            db_session_with_containers.query(DocumentSegment)
-            .filter_by(document_id=document.id)
-            .order_by(DocumentSegment.position)
-            .all()
-        )
+        segments = db_session_with_containers.scalars(
+            select(DocumentSegment).where(DocumentSegment.document_id == document.id).order_by(DocumentSegment.position)
+        ).all()
         assert len(segments) == 3
 
         # Verify segment content and metadata
@@ -367,11 +365,11 @@ class TestBatchCreateSegmentToIndexTask:
 
         # Verify no segments were created (since dataset doesn't exist)
 
-        segments = db_session_with_containers.query(DocumentSegment).all()
+        segments = db_session_with_containers.scalars(select(DocumentSegment)).all()
         assert len(segments) == 0
 
         # Verify no documents were modified
-        documents = db_session_with_containers.query(Document).all()
+        documents = db_session_with_containers.scalars(select(Document)).all()
         assert len(documents) == 0
 
     def test_batch_create_segment_to_index_task_document_not_found(
@@ -415,12 +413,14 @@ class TestBatchCreateSegmentToIndexTask:
 
         # Verify no segments were created
 
-        segments = db_session_with_containers.query(DocumentSegment).all()
+        segments = db_session_with_containers.scalars(select(DocumentSegment)).all()
         assert len(segments) == 0
 
         # Verify dataset remains unchanged (no segments were added to the dataset)
         db_session_with_containers.refresh(dataset)
-        segments_for_dataset = db_session_with_containers.query(DocumentSegment).filter_by(dataset_id=dataset.id).all()
+        segments_for_dataset = db_session_with_containers.scalars(
+            select(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+        ).all()
         assert len(segments_for_dataset) == 0
 
     def test_batch_create_segment_to_index_task_document_not_available(
@@ -516,7 +516,9 @@ class TestBatchCreateSegmentToIndexTask:
             assert cache_value == b"error"
 
             # Verify no segments were created
-            segments = db_session_with_containers.query(DocumentSegment).filter_by(document_id=document.id).all()
+            segments = db_session_with_containers.scalars(
+                select(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            ).all()
             assert len(segments) == 0
 
     def test_batch_create_segment_to_index_task_upload_file_not_found(
@@ -560,7 +562,7 @@ class TestBatchCreateSegmentToIndexTask:
 
         # Verify no segments were created
 
-        segments = db_session_with_containers.query(DocumentSegment).all()
+        segments = db_session_with_containers.scalars(select(DocumentSegment)).all()
         assert len(segments) == 0
 
         # Verify document remains unchanged
@@ -611,7 +613,7 @@ class TestBatchCreateSegmentToIndexTask:
         # Verify error handling
         # Since exception was raised, no segments should be created
 
-        segments = db_session_with_containers.query(DocumentSegment).all()
+        segments = db_session_with_containers.scalars(select(DocumentSegment)).all()
         assert len(segments) == 0
 
         # Verify document remains unchanged
@@ -682,12 +684,9 @@ class TestBatchCreateSegmentToIndexTask:
 
         # Verify results
         # Check that new segments were created with correct positions
-        all_segments = (
-            db_session_with_containers.query(DocumentSegment)
-            .filter_by(document_id=document.id)
-            .order_by(DocumentSegment.position)
-            .all()
-        )
+        all_segments = db_session_with_containers.scalars(
+            select(DocumentSegment).where(DocumentSegment.document_id == document.id).order_by(DocumentSegment.position)
+        ).all()
         assert len(all_segments) == 6  # 3 existing + 3 new
 
         # Verify position ordering
diff --git a/api/tests/test_containers_integration_tests/tasks/test_dataset_indexing_task.py b/api/tests/test_containers_integration_tests/tasks/test_dataset_indexing_task.py
index 13ea94348a..684097851b 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_dataset_indexing_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_dataset_indexing_task.py
@@ -6,6 +6,7 @@ from unittest.mock import MagicMock, patch
 
 import pytest
 from faker import Faker
+from sqlalchemy import select
 
 from core.indexing_runner import DocumentIsPausedError
 from core.rag.index_processor.constant.index_type import IndexTechniqueType
@@ -175,7 +176,7 @@ class TestDatasetIndexingTaskIntegration:
 
     def _query_document(self, db_session_with_containers, document_id: str) -> Document | None:
         """Return the latest persisted document state."""
-        return db_session_with_containers.query(Document).where(Document.id == document_id).first()
+        return db_session_with_containers.scalar(select(Document).where(Document.id == document_id).limit(1))
 
     def _assert_documents_parsing(self, db_session_with_containers, document_ids: Sequence[str]) -> None:
         """Assert all target documents are persisted in parsing status."""
diff --git a/api/tests/test_containers_integration_tests/tasks/test_document_indexing_sync_task.py b/api/tests/test_containers_integration_tests/tasks/test_document_indexing_sync_task.py
index d4021143ef..d94c1fdf24 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_document_indexing_sync_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_document_indexing_sync_task.py
@@ -12,6 +12,7 @@ from unittest.mock import Mock, patch
 from uuid import uuid4
 
 import pytest
+from sqlalchemy import delete, func, select, update
 
 from core.indexing_runner import DocumentIsPausedError, IndexingRunner
 from core.rag.index_processor.constant.index_type import IndexStructureType, IndexTechniqueType
@@ -254,8 +255,8 @@ class TestDocumentIndexingSyncTask:
         """Test that task raises error when data_source_info is empty."""
         # Arrange
         context = self._create_notion_sync_context(db_session_with_containers, data_source_info=None)
-        db_session_with_containers.query(Document).where(Document.id == context["document"].id).update(
-            {"data_source_info": None}
+        db_session_with_containers.execute(
+            update(Document).where(Document.id == context["document"].id).values(data_source_info=None)
         )
         db_session_with_containers.commit()
 
@@ -274,8 +275,8 @@ class TestDocumentIndexingSyncTask:
 
         # Assert
         db_session_with_containers.expire_all()
-        updated_document = (
-            db_session_with_containers.query(Document).where(Document.id == context["document"].id).first()
+        updated_document = db_session_with_containers.scalar(
+            select(Document).where(Document.id == context["document"].id).limit(1)
         )
         assert updated_document is not None
         assert updated_document.indexing_status == IndexingStatus.ERROR
@@ -294,13 +295,13 @@ class TestDocumentIndexingSyncTask:
 
         # Assert
         db_session_with_containers.expire_all()
-        updated_document = (
-            db_session_with_containers.query(Document).where(Document.id == context["document"].id).first()
+        updated_document = db_session_with_containers.scalar(
+            select(Document).where(Document.id == context["document"].id).limit(1)
         )
-        remaining_segments = (
-            db_session_with_containers.query(DocumentSegment)
+        remaining_segments = db_session_with_containers.scalar(
+            select(func.count())
+            .select_from(DocumentSegment)
             .where(DocumentSegment.document_id == context["document"].id)
-            .count()
         )
         assert updated_document is not None
         assert updated_document.indexing_status == IndexingStatus.COMPLETED
@@ -319,13 +320,13 @@ class TestDocumentIndexingSyncTask:
 
         # Assert
         db_session_with_containers.expire_all()
-        updated_document = (
-            db_session_with_containers.query(Document).where(Document.id == context["document"].id).first()
+        updated_document = db_session_with_containers.scalar(
+            select(Document).where(Document.id == context["document"].id).limit(1)
         )
-        remaining_segments = (
-            db_session_with_containers.query(DocumentSegment)
+        remaining_segments = db_session_with_containers.scalar(
+            select(func.count())
+            .select_from(DocumentSegment)
             .where(DocumentSegment.document_id == context["document"].id)
-            .count()
         )
 
         assert updated_document is not None
@@ -354,7 +355,7 @@ class TestDocumentIndexingSyncTask:
         context = self._create_notion_sync_context(db_session_with_containers)
 
         def _delete_dataset_before_clean() -> str:
-            db_session_with_containers.query(Dataset).where(Dataset.id == context["dataset"].id).delete()
+            db_session_with_containers.execute(delete(Dataset).where(Dataset.id == context["dataset"].id))
             db_session_with_containers.commit()
             return "2024-01-02T00:00:00Z"
 
@@ -367,8 +368,8 @@ class TestDocumentIndexingSyncTask:
 
         # Assert
         db_session_with_containers.expire_all()
-        updated_document = (
-            db_session_with_containers.query(Document).where(Document.id == context["document"].id).first()
+        updated_document = db_session_with_containers.scalar(
+            select(Document).where(Document.id == context["document"].id).limit(1)
         )
         assert updated_document is not None
         assert updated_document.indexing_status == IndexingStatus.PARSING
@@ -386,13 +387,13 @@ class TestDocumentIndexingSyncTask:
 
         # Assert
         db_session_with_containers.expire_all()
-        updated_document = (
-            db_session_with_containers.query(Document).where(Document.id == context["document"].id).first()
+        updated_document = db_session_with_containers.scalar(
+            select(Document).where(Document.id == context["document"].id).limit(1)
         )
-        remaining_segments = (
-            db_session_with_containers.query(DocumentSegment)
+        remaining_segments = db_session_with_containers.scalar(
+            select(func.count())
+            .select_from(DocumentSegment)
             .where(DocumentSegment.document_id == context["document"].id)
-            .count()
         )
         assert updated_document is not None
         assert updated_document.indexing_status == IndexingStatus.PARSING
@@ -410,8 +411,8 @@ class TestDocumentIndexingSyncTask:
 
         # Assert
         db_session_with_containers.expire_all()
-        updated_document = (
-            db_session_with_containers.query(Document).where(Document.id == context["document"].id).first()
+        updated_document = db_session_with_containers.scalar(
+            select(Document).where(Document.id == context["document"].id).limit(1)
         )
         assert updated_document is not None
         assert updated_document.indexing_status == IndexingStatus.PARSING
@@ -428,8 +429,8 @@ class TestDocumentIndexingSyncTask:
 
         # Assert
         db_session_with_containers.expire_all()
-        updated_document = (
-            db_session_with_containers.query(Document).where(Document.id == context["document"].id).first()
+        updated_document = db_session_with_containers.scalar(
+            select(Document).where(Document.id == context["document"].id).limit(1)
         )
         assert updated_document is not None
         assert updated_document.indexing_status == IndexingStatus.ERROR

From a3042e6332b0b4d0ab13189adcb10b0e8cc511d5 Mon Sep 17 00:00:00 2001
From: bohdansolovie <153934212+bohdansolovie@users.noreply.github.com>
Date: Tue, 14 Apr 2026 09:31:42 -0400
Subject: [PATCH 11/44] =?UTF-8?q?test:=20migrate=20clean=5Fnotion=5Fdocume?=
 =?UTF-8?q?nt=20integration=20tests=20to=20SQLAlchemy=202=E2=80=A6=20(#351?=
 =?UTF-8?q?47)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../tasks/test_clean_notion_document_task.py  | 136 ++++++++++++------
 1 file changed, 94 insertions(+), 42 deletions(-)

diff --git a/api/tests/test_containers_integration_tests/tasks/test_clean_notion_document_task.py b/api/tests/test_containers_integration_tests/tasks/test_clean_notion_document_task.py
index 926c839c8b..2fb62e0fc0 100644
--- a/api/tests/test_containers_integration_tests/tasks/test_clean_notion_document_task.py
+++ b/api/tests/test_containers_integration_tests/tasks/test_clean_notion_document_task.py
@@ -11,6 +11,7 @@ from unittest.mock import Mock, patch
 
 import pytest
 from faker import Faker
+from sqlalchemy import func, select
 
 from core.rag.index_processor.constant.index_type import IndexStructureType
 from models.dataset import Dataset, Document, DocumentSegment
@@ -145,11 +146,16 @@ class TestCleanNotionDocumentTask:
         db_session_with_containers.commit()
 
         # Verify data exists before cleanup
-        assert db_session_with_containers.query(Document).filter(Document.id.in_(document_ids)).count() == 3
         assert (
-            db_session_with_containers.query(DocumentSegment)
-            .filter(DocumentSegment.document_id.in_(document_ids))
-            .count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.id.in_(document_ids))
+            )
+            == 3
+        )
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id.in_(document_ids))
+            )
             == 6
         )
 
@@ -158,9 +164,9 @@ class TestCleanNotionDocumentTask:
 
         # Verify segments are deleted
         assert (
-            db_session_with_containers.query(DocumentSegment)
-            .filter(DocumentSegment.document_id.in_(document_ids))
-            .count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id.in_(document_ids))
+            )
             == 0
         )
 
@@ -323,9 +329,9 @@ class TestCleanNotionDocumentTask:
 
             # Verify segments are deleted
             assert (
-                db_session_with_containers.query(DocumentSegment)
-                .filter(DocumentSegment.document_id == document.id)
-                .count()
+                db_session_with_containers.scalar(
+                    select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+                )
                 == 0
             )
 
@@ -411,7 +417,9 @@ class TestCleanNotionDocumentTask:
 
         # Verify segments are deleted
         assert (
-            db_session_with_containers.query(DocumentSegment).filter(DocumentSegment.document_id == document.id).count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            )
             == 0
         )
 
@@ -499,9 +507,16 @@ class TestCleanNotionDocumentTask:
         db_session_with_containers.commit()
 
         # Verify all data exists before cleanup
-        assert db_session_with_containers.query(Document).filter(Document.dataset_id == dataset.id).count() == 5
         assert (
-            db_session_with_containers.query(DocumentSegment).filter(DocumentSegment.dataset_id == dataset.id).count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.dataset_id == dataset.id)
+            )
+            == 5
+        )
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+            )
             == 10
         )
 
@@ -514,19 +529,26 @@ class TestCleanNotionDocumentTask:
 
         # Verify only specified documents' segments are deleted
         assert (
-            db_session_with_containers.query(DocumentSegment)
-            .filter(DocumentSegment.document_id.in_(documents_to_clean))
-            .count()
+            db_session_with_containers.scalar(
+                select(func.count())
+                .select_from(DocumentSegment)
+                .where(DocumentSegment.document_id.in_(documents_to_clean))
+            )
             == 0
         )
 
         # Verify remaining documents and segments are intact
         remaining_docs = [doc.id for doc in documents[3:]]
-        assert db_session_with_containers.query(Document).filter(Document.id.in_(remaining_docs)).count() == 2
         assert (
-            db_session_with_containers.query(DocumentSegment)
-            .filter(DocumentSegment.document_id.in_(remaining_docs))
-            .count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.id.in_(remaining_docs))
+            )
+            == 2
+        )
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id.in_(remaining_docs))
+            )
             == 4
         )
 
@@ -613,7 +635,9 @@ class TestCleanNotionDocumentTask:
 
         # Verify all segments exist before cleanup
         assert (
-            db_session_with_containers.query(DocumentSegment).filter(DocumentSegment.document_id == document.id).count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            )
             == 4
         )
 
@@ -622,7 +646,9 @@ class TestCleanNotionDocumentTask:
 
         # Verify all segments are deleted regardless of status
         assert (
-            db_session_with_containers.query(DocumentSegment).filter(DocumentSegment.document_id == document.id).count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            )
             == 0
         )
 
@@ -795,11 +821,15 @@ class TestCleanNotionDocumentTask:
 
         # Verify all data exists before cleanup
         assert (
-            db_session_with_containers.query(Document).filter(Document.dataset_id == dataset.id).count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.dataset_id == dataset.id)
+            )
             == num_documents
         )
         assert (
-            db_session_with_containers.query(DocumentSegment).filter(DocumentSegment.dataset_id == dataset.id).count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+            )
             == num_documents * num_segments_per_doc
         )
 
@@ -809,7 +839,9 @@ class TestCleanNotionDocumentTask:
 
         # Verify all segments are deleted
         assert (
-            db_session_with_containers.query(DocumentSegment).filter(DocumentSegment.dataset_id == dataset.id).count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+            )
             == 0
         )
 
@@ -906,8 +938,8 @@ class TestCleanNotionDocumentTask:
 
         # Verify all data exists before cleanup
         # Note: There may be documents from previous tests, so we check for at least 3
-        assert db_session_with_containers.query(Document).count() >= 3
-        assert db_session_with_containers.query(DocumentSegment).count() >= 9
+        assert db_session_with_containers.scalar(select(func.count()).select_from(Document)) >= 3
+        assert db_session_with_containers.scalar(select(func.count()).select_from(DocumentSegment)) >= 9
 
         # Clean up documents from only the first dataset
         target_dataset = datasets[0]
@@ -919,19 +951,26 @@ class TestCleanNotionDocumentTask:
 
         # Verify only documents' segments from target dataset are deleted
         assert (
-            db_session_with_containers.query(DocumentSegment)
-            .filter(DocumentSegment.document_id == target_document.id)
-            .count()
+            db_session_with_containers.scalar(
+                select(func.count())
+                .select_from(DocumentSegment)
+                .where(DocumentSegment.document_id == target_document.id)
+            )
             == 0
         )
 
         # Verify documents from other datasets remain intact
         remaining_docs = [doc.id for doc in all_documents[1:]]
-        assert db_session_with_containers.query(Document).filter(Document.id.in_(remaining_docs)).count() == 2
         assert (
-            db_session_with_containers.query(DocumentSegment)
-            .filter(DocumentSegment.document_id.in_(remaining_docs))
-            .count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.id.in_(remaining_docs))
+            )
+            == 2
+        )
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id.in_(remaining_docs))
+            )
             == 6
         )
 
@@ -1028,11 +1067,13 @@ class TestCleanNotionDocumentTask:
         db_session_with_containers.commit()
 
         # Verify all data exists before cleanup
-        assert db_session_with_containers.query(Document).filter(Document.dataset_id == dataset.id).count() == len(
-            document_statuses
-        )
+        assert db_session_with_containers.scalar(
+            select(func.count()).select_from(Document).where(Document.dataset_id == dataset.id)
+        ) == len(document_statuses)
         assert (
-            db_session_with_containers.query(DocumentSegment).filter(DocumentSegment.dataset_id == dataset.id).count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+            )
             == len(document_statuses) * 2
         )
 
@@ -1042,7 +1083,9 @@ class TestCleanNotionDocumentTask:
 
         # Verify all segments are deleted regardless of status
         assert (
-            db_session_with_containers.query(DocumentSegment).filter(DocumentSegment.dataset_id == dataset.id).count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.dataset_id == dataset.id)
+            )
             == 0
         )
 
@@ -1142,9 +1185,16 @@ class TestCleanNotionDocumentTask:
         db_session_with_containers.commit()
 
         # Verify data exists before cleanup
-        assert db_session_with_containers.query(Document).filter(Document.id == document.id).count() == 1
         assert (
-            db_session_with_containers.query(DocumentSegment).filter(DocumentSegment.document_id == document.id).count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(Document).where(Document.id == document.id)
+            )
+            == 1
+        )
+        assert (
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            )
             == 3
         )
 
@@ -1153,7 +1203,9 @@ class TestCleanNotionDocumentTask:
 
         # Verify segments are deleted
         assert (
-            db_session_with_containers.query(DocumentSegment).filter(DocumentSegment.document_id == document.id).count()
+            db_session_with_containers.scalar(
+                select(func.count()).select_from(DocumentSegment).where(DocumentSegment.document_id == document.id)
+            )
             == 0
         )
 

From 648dde5e960fa79e09c5a1c35da9e7ed69fd4c2d Mon Sep 17 00:00:00 2001
From: Asuka Minato <i@asukaminato.eu.org>
Date: Tue, 14 Apr 2026 22:49:03 +0900
Subject: [PATCH 12/44] ci: Fix path in coverage markdown rendering step
 (#35136)

---
 .github/workflows/pyrefly-type-coverage-comment.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pyrefly-type-coverage-comment.yml b/.github/workflows/pyrefly-type-coverage-comment.yml
index 51f3ca54b6..974da99aad 100644
--- a/.github/workflows/pyrefly-type-coverage-comment.yml
+++ b/.github/workflows/pyrefly-type-coverage-comment.yml
@@ -62,7 +62,7 @@ jobs:
       - name: Render coverage markdown from structured data
         id: render
         run: |
-          comment_body="$(uv run --directory api python api/libs/pyrefly_type_coverage.py \
+          comment_body="$(uv run --directory api python libs/pyrefly_type_coverage.py \
             --base base_report.json \
             < pr_report.json)"
 

From ebf741114dcac38e16a712e79aae736d97763ae6 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Tue, 14 Apr 2026 22:16:39 +0800
Subject: [PATCH 13/44] refactor(web): replace Button destructive boolean with
 tone semantic axis (#35176)

---
 .../account-page/AvatarWithEdit.tsx           |  2 +-
 .../components/verify-email.tsx               |  2 +-
 .../app/configuration/configuration-view.tsx  |  4 +--
 .../dsl-confirm-modal.tsx                     |  2 +-
 .../app/create-from-dsl-modal/index.tsx       |  2 +-
 .../components/app/switch-app-modal/index.tsx |  2 +-
 web/app/components/base/confirm/index.tsx     |  2 +-
 .../__tests__/index.spec.tsx                  |  6 ++--
 .../base/inline-delete-confirm/index.tsx      |  2 +-
 .../base/tag-management/tag-remove-modal.tsx  |  2 +-
 .../ui/alert-dialog/__tests__/index.spec.tsx  |  2 +-
 .../components/base/ui/alert-dialog/index.tsx |  4 +--
 .../base/ui/button/__tests__/index.spec.tsx   | 11 +++++--
 web/app/components/base/ui/button/index.css   | 32 +++++++++----------
 .../base/ui/button/index.stories.tsx          |  7 ++--
 web/app/components/base/ui/button/index.tsx   | 16 +++++++---
 .../dsl-confirm-modal.tsx                     |  2 +-
 .../detail/completed/common/batch-action.tsx  |  2 +-
 .../completed/common/regeneration-modal.tsx   |  4 +--
 .../transfer-ownership-modal/index.tsx        |  2 +-
 .../model-provider-page/model-modal/index.tsx |  2 +-
 .../update-plugin/downgrade-warning.tsx       |  2 +-
 .../__tests__/version-mismatch-modal.spec.tsx |  2 +-
 .../components/update-dsl-modal.tsx           |  2 +-
 .../components/version-mismatch-modal.tsx     |  2 +-
 .../edit-custom-collection-modal/index.tsx    |  2 +-
 .../confirm-modal/__tests__/index.spec.tsx    |  2 +-
 .../workflow-tool/confirm-modal/index.tsx     |  2 +-
 .../components/tools/workflow-tool/index.tsx  |  2 +-
 .../delete-confirm-modal.tsx                  |  2 +-
 .../components/workflow/update-dsl-modal.tsx  |  4 +--
 31 files changed, 73 insertions(+), 59 deletions(-)

diff --git a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
index da1da8448b..05048008b4 100644
--- a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
+++ b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
@@ -159,7 +159,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
 
-            <Button variant="primary" destructive className="w-full" onClick={handleDeleteAvatar}>
+            <Button variant="primary" tone="destructive" className="w-full" onClick={handleDeleteAvatar}>
               {t('operation.delete', { ns: 'common' })}
             </Button>
           </div>
diff --git a/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx b/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
index 7e14d889d9..01e19e51b1 100644
--- a/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
+++ b/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx
@@ -53,7 +53,7 @@ export default function VerifyEmail(props: DeleteAccountProps) {
         }}
       />
       <div className="mt-3 flex w-full flex-col gap-2">
-        <Button className="w-full" disabled={shouldButtonDisabled} loading={isDeleting} variant="primary" destructive onClick={handleConfirm}>{t('account.permanentlyDeleteButton', { ns: 'common' })}</Button>
+        <Button className="w-full" disabled={shouldButtonDisabled} loading={isDeleting} variant="primary" tone="destructive" onClick={handleConfirm}>{t('account.permanentlyDeleteButton', { ns: 'common' })}</Button>
         <Button className="w-full" onClick={props.onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
         <Countdown onResend={sendEmail} />
       </div>
diff --git a/web/app/components/app/configuration/configuration-view.tsx b/web/app/components/app/configuration/configuration-view.tsx
index aaee68cb71..049ccf4171 100644
--- a/web/app/components/app/configuration/configuration-view.tsx
+++ b/web/app/components/app/configuration/configuration-view.tsx
@@ -165,10 +165,10 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
                   </AlertDialogDescription>
                 </div>
                 <AlertDialogActions>
-                  <AlertDialogCancelButton destructive={false}>
+                  <AlertDialogCancelButton tone="default">
                     {t('operation.cancel', { ns: 'common' })}
                   </AlertDialogCancelButton>
-                  <AlertDialogConfirmButton variant="primary" destructive={false} onClick={onConfirmUseGPT4}>
+                  <AlertDialogConfirmButton variant="primary" tone="default" onClick={onConfirmUseGPT4}>
                     {t('operation.confirm', { ns: 'common' })}
                   </AlertDialogConfirmButton>
                 </AlertDialogActions>
diff --git a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
index 71a6757bf2..59ba840a07 100644
--- a/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/app/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -43,7 +43,7 @@ const DSLConfirmModal = ({
       </div>
       <div className="flex items-start justify-end gap-2 self-stretch pt-6">
         <Button variant="secondary" onClick={() => onCancel()}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-        <Button variant="primary" destructive onClick={onConfirm} disabled={confirmDisabled}>{t('newApp.Confirm', { ns: 'app' })}</Button>
+        <Button variant="primary" tone="destructive" onClick={onConfirm} disabled={confirmDisabled}>{t('newApp.Confirm', { ns: 'app' })}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index bd6c91f323..1fd985c7f8 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -322,7 +322,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         </div>
         <div className="flex items-start justify-end gap-2 self-stretch pt-6">
           <Button variant="secondary" onClick={() => setShowErrorModal(false)}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-          <Button variant="primary" destructive onClick={onDSLConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
+          <Button variant="primary" tone="destructive" onClick={onDSLConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
         </div>
       </Modal>
     </>
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index 7ccbfccf30..16016b8096 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -152,7 +152,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
           </div>
           <div className="flex items-center">
             <Button className="mr-2" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-            <Button className="border-red-700" disabled={isAppsFull || !name} variant="primary" destructive onClick={goStart}>{t('switchStart', { ns: 'app' })}</Button>
+            <Button className="border-red-700" disabled={isAppsFull || !name} variant="primary" tone="destructive" onClick={goStart}>{t('switchStart', { ns: 'app' })}</Button>
           </div>
         </div>
       </Modal>
diff --git a/web/app/components/base/confirm/index.tsx b/web/app/components/base/confirm/index.tsx
index f958d32b99..f23df5cc42 100644
--- a/web/app/components/base/confirm/index.tsx
+++ b/web/app/components/base/confirm/index.tsx
@@ -152,7 +152,7 @@ function Confirm({
           </div>
           <div className="flex items-start justify-end gap-2 self-stretch p-6">
             {showCancel && <Button onClick={onCancel}>{cancelTxt}</Button>}
-            {showConfirm && <Button variant="primary" destructive={type !== 'info'} loading={isLoading} disabled={isConfirmDisabled} onClick={onConfirm}>{confirmTxt}</Button>}
+            {showConfirm && <Button variant="primary" tone={type !== 'info' ? 'destructive' : 'default'} loading={isLoading} disabled={isConfirmDisabled} onClick={onConfirm}>{confirmTxt}</Button>}
           </div>
         </div>
       </div>
diff --git a/web/app/components/base/inline-delete-confirm/__tests__/index.spec.tsx b/web/app/components/base/inline-delete-confirm/__tests__/index.spec.tsx
index 6d615554dc..521988d3e6 100644
--- a/web/app/components/base/inline-delete-confirm/__tests__/index.spec.tsx
+++ b/web/app/components/base/inline-delete-confirm/__tests__/index.spec.tsx
@@ -93,7 +93,7 @@ describe('InlineDeleteConfirm', () => {
       )
 
       const confirmButton = getByText('Yes').closest('button')
-      expect(confirmButton?.className).toContain('btn-destructive')
+      expect(confirmButton?.className).toContain('btn-destructive-primary')
     })
 
     it('should render without destructive class for warning variant', () => {
@@ -108,7 +108,7 @@ describe('InlineDeleteConfirm', () => {
       )
 
       const confirmButton = getByText('Yes').closest('button')
-      expect(confirmButton?.className).not.toContain('btn-destructive')
+      expect(confirmButton?.className).not.toContain('btn-destructive-primary')
     })
 
     it('should render without destructive class for info variant', () => {
@@ -123,7 +123,7 @@ describe('InlineDeleteConfirm', () => {
       )
 
       const confirmButton = getByText('Yes').closest('button')
-      expect(confirmButton?.className).not.toContain('btn-destructive')
+      expect(confirmButton?.className).not.toContain('btn-destructive-primary')
     })
   })
 
diff --git a/web/app/components/base/inline-delete-confirm/index.tsx b/web/app/components/base/inline-delete-confirm/index.tsx
index b119f4bb83..b2f1242da8 100644
--- a/web/app/components/base/inline-delete-confirm/index.tsx
+++ b/web/app/components/base/inline-delete-confirm/index.tsx
@@ -62,7 +62,7 @@ const InlineDeleteConfirm: FC<InlineDeleteConfirmProps> = ({
         <Button
           size="small"
           variant="primary"
-          destructive={variant === 'delete'}
+          tone={variant === 'delete' ? 'destructive' : 'default'}
           onClick={onConfirm}
           aria-label={confirmTxt}
           className="flex-1"
diff --git a/web/app/components/base/tag-management/tag-remove-modal.tsx b/web/app/components/base/tag-management/tag-remove-modal.tsx
index 35ab6c319b..31b6174d66 100644
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/web/app/components/base/tag-management/tag-remove-modal.tsx
@@ -39,7 +39,7 @@ const TagRemoveModal = ({ show, tag, onConfirm, onClose }: TagRemoveModalProps)
       </div>
       <div className="flex items-center justify-end pt-6">
         <Button className="mr-2" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-        <Button className="border-red-700" variant="primary" destructive onClick={onConfirm}>{t('operation.delete', { ns: 'common' })}</Button>
+        <Button className="border-red-700" variant="primary" tone="destructive" onClick={onConfirm}>{t('operation.delete', { ns: 'common' })}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/base/ui/alert-dialog/__tests__/index.spec.tsx b/web/app/components/base/ui/alert-dialog/__tests__/index.spec.tsx
index adbcb621c9..3eec5f9f05 100644
--- a/web/app/components/base/ui/alert-dialog/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/alert-dialog/__tests__/index.spec.tsx
@@ -110,7 +110,7 @@ describe('AlertDialog wrapper', () => {
       expect(screen.getByTestId('actions')).toHaveClass('flex', 'items-start', 'justify-end', 'gap-2', 'self-stretch', 'p-6', 'custom-actions')
       const confirmButton = screen.getByRole('button', { name: 'Confirm' })
       expect(confirmButton).toHaveClass('btn-primary')
-      expect(confirmButton).toHaveClass('btn-destructive')
+      expect(confirmButton).toHaveClass('btn-destructive-primary')
     })
 
     it('should keep dialog open after confirm click and close via cancel helper', async () => {
diff --git a/web/app/components/base/ui/alert-dialog/index.tsx b/web/app/components/base/ui/alert-dialog/index.tsx
index 05d9ab3ad9..c8e68260c0 100644
--- a/web/app/components/base/ui/alert-dialog/index.tsx
+++ b/web/app/components/base/ui/alert-dialog/index.tsx
@@ -86,13 +86,13 @@ type AlertDialogConfirmButtonProps = ButtonProps
 
 export function AlertDialogConfirmButton({
   variant = 'primary',
-  destructive = true,
+  tone = 'destructive',
   ...props
 }: AlertDialogConfirmButtonProps) {
   return (
     <Button
       variant={variant}
-      destructive={destructive}
+      tone={tone}
       {...props}
     />
   )
diff --git a/web/app/components/base/ui/button/__tests__/index.spec.tsx b/web/app/components/base/ui/button/__tests__/index.spec.tsx
index fa59281484..656c344b1a 100644
--- a/web/app/components/base/ui/button/__tests__/index.spec.tsx
+++ b/web/app/components/base/ui/button/__tests__/index.spec.tsx
@@ -51,9 +51,14 @@ describe('Button', () => {
       expect(screen.getByRole('button').className).toContain(`btn-${variant}`)
     })
 
-    it('applies destructive modifier', () => {
-      render(<Button destructive>Click me</Button>)
-      expect(screen.getByRole('button').className).toContain('btn-destructive')
+    it('applies destructive tone with default variant', () => {
+      render(<Button tone="destructive">Click me</Button>)
+      expect(screen.getByRole('button').className).toContain('btn-destructive-secondary')
+    })
+
+    it('applies destructive tone with primary variant', () => {
+      render(<Button variant="primary" tone="destructive">Click me</Button>)
+      expect(screen.getByRole('button').className).toContain('btn-destructive-primary')
     })
   })
 
diff --git a/web/app/components/base/ui/button/index.css b/web/app/components/base/ui/button/index.css
index 30140c212d..eee8b7944b 100644
--- a/web/app/components/base/ui/button/index.css
+++ b/web/app/components/base/ui/button/index.css
@@ -98,53 +98,51 @@
   }
 }
 
-@utility btn-destructive {
-  &.btn-primary {
-    @apply bg-components-button-destructive-primary-bg
+@utility btn-destructive-primary {
+  @apply bg-components-button-destructive-primary-bg
     border-components-button-destructive-primary-border
     hover:bg-components-button-destructive-primary-bg-hover
     hover:border-components-button-destructive-primary-border-hover
     text-components-button-destructive-primary-text;
-  }
 
-  &.btn-primary:is(:disabled, [data-disabled]) {
+  &:is(:disabled, [data-disabled]) {
     @apply shadow-none
     bg-components-button-destructive-primary-bg-disabled
     border-components-button-destructive-primary-border-disabled
     text-components-button-destructive-primary-text-disabled;
   }
+}
 
-  &.btn-secondary {
-    @apply bg-components-button-destructive-secondary-bg
+@utility btn-destructive-secondary {
+  @apply bg-components-button-destructive-secondary-bg
     border-components-button-destructive-secondary-border
     hover:bg-components-button-destructive-secondary-bg-hover
     hover:border-components-button-destructive-secondary-border-hover
     text-components-button-destructive-secondary-text;
-  }
 
-  &.btn-secondary:is(:disabled, [data-disabled]) {
+  &:is(:disabled, [data-disabled]) {
     @apply bg-components-button-destructive-secondary-bg-disabled
     border-components-button-destructive-secondary-border-disabled
     text-components-button-destructive-secondary-text-disabled;
   }
+}
 
-  &.btn-tertiary {
-    @apply bg-components-button-destructive-tertiary-bg
+@utility btn-destructive-tertiary {
+  @apply bg-components-button-destructive-tertiary-bg
     hover:bg-components-button-destructive-tertiary-bg-hover
     text-components-button-destructive-tertiary-text;
-  }
 
-  &.btn-tertiary:is(:disabled, [data-disabled]) {
+  &:is(:disabled, [data-disabled]) {
     @apply bg-components-button-destructive-tertiary-bg-disabled
     text-components-button-destructive-tertiary-text-disabled;
   }
+}
 
-  &.btn-ghost {
-    @apply hover:bg-components-button-destructive-ghost-bg-hover
+@utility btn-destructive-ghost {
+  @apply hover:bg-components-button-destructive-ghost-bg-hover
     text-components-button-destructive-ghost-text;
-  }
 
-  &.btn-ghost:is(:disabled, [data-disabled]) {
+  &:is(:disabled, [data-disabled]) {
     @apply text-components-button-destructive-ghost-text-disabled;
   }
 }
diff --git a/web/app/components/base/ui/button/index.stories.tsx b/web/app/components/base/ui/button/index.stories.tsx
index 8921dc9b27..9552452a22 100644
--- a/web/app/components/base/ui/button/index.stories.tsx
+++ b/web/app/components/base/ui/button/index.stories.tsx
@@ -11,7 +11,10 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     loading: { control: 'boolean' },
-    destructive: { control: 'boolean' },
+    tone: {
+      control: 'select',
+      options: ['default', 'destructive'],
+    },
     disabled: { control: 'boolean' },
     variant: {
       control: 'select',
@@ -92,7 +95,7 @@ export const Loading: Story = {
 export const Destructive: Story = {
   args: {
     variant: 'primary',
-    destructive: true,
+    tone: 'destructive',
     children: 'Delete',
   },
 }
diff --git a/web/app/components/base/ui/button/index.tsx b/web/app/components/base/ui/button/index.tsx
index 22dc6ce3c8..00bbe3c8b7 100644
--- a/web/app/components/base/ui/button/index.tsx
+++ b/web/app/components/base/ui/button/index.tsx
@@ -21,13 +21,21 @@ const buttonVariants = cva(
         medium: 'btn-medium',
         large: 'btn-large',
       },
-      destructive: {
-        true: 'btn-destructive',
+      tone: {
+        default: '',
+        destructive: '',
       },
     },
+    compoundVariants: [
+      { variant: 'primary', tone: 'destructive', class: 'btn-destructive-primary' },
+      { variant: 'secondary', tone: 'destructive', class: 'btn-destructive-secondary' },
+      { variant: 'tertiary', tone: 'destructive', class: 'btn-destructive-tertiary' },
+      { variant: 'ghost', tone: 'destructive', class: 'btn-destructive-ghost' },
+    ],
     defaultVariants: {
       variant: 'secondary',
       size: 'medium',
+      tone: 'default',
     },
   },
 )
@@ -43,7 +51,7 @@ export function Button({
   className,
   variant,
   size,
-  destructive,
+  tone,
   loading,
   disabled,
   type = 'button',
@@ -53,7 +61,7 @@ export function Button({
   return (
     <BaseButton
       type={type}
-      className={cn(buttonVariants({ variant, size, destructive, className }))}
+      className={cn(buttonVariants({ variant, size, tone, className }))}
       disabled={disabled || loading}
       aria-busy={loading || undefined}
       {...props}
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
index 71a6757bf2..59ba840a07 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/dsl-confirm-modal.tsx
@@ -43,7 +43,7 @@ const DSLConfirmModal = ({
       </div>
       <div className="flex items-start justify-end gap-2 self-stretch pt-6">
         <Button variant="secondary" onClick={() => onCancel()}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-        <Button variant="primary" destructive onClick={onConfirm} disabled={confirmDisabled}>{t('newApp.Confirm', { ns: 'app' })}</Button>
+        <Button variant="primary" tone="destructive" onClick={onConfirm} disabled={confirmDisabled}>{t('newApp.Confirm', { ns: 'app' })}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index 9a2798698c..3e5f395dfe 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -130,7 +130,7 @@ const BatchAction: FC<IBatchActionProps> = ({
         )}
         <Button
           variant="ghost"
-          destructive
+          tone="destructive"
           className="gap-x-0.5 px-3"
           onClick={showDeleteConfirm}
         >
diff --git a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
index 8aea0245de..33d9f550a8 100644
--- a/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/regeneration-modal.tsx
@@ -30,7 +30,7 @@ const DefaultContent: FC<IDefaultContentProps> = React.memo(({
         <Button onClick={onCancel}>
           {t('operation.cancel', { ns: 'common' })}
         </Button>
-        <Button variant="primary" destructive onClick={onConfirm}>
+        <Button variant="primary" tone="destructive" onClick={onConfirm}>
           {t('operation.regenerate', { ns: 'common' })}
         </Button>
       </div>
@@ -50,7 +50,7 @@ const RegeneratingContent: FC = React.memo(() => {
         <p className="system-md-regular text-text-secondary">{t('segment.regeneratingMessage', { ns: 'datasetDocuments' })}</p>
       </div>
       <div className="flex justify-end pt-6">
-        <Button variant="primary" destructive disabled className="inline-flex items-center gap-x-0.5">
+        <Button variant="primary" tone="destructive" disabled className="inline-flex items-center gap-x-0.5">
           <RiLoader2Line className="h-4 w-4 animate-spin text-components-button-destructive-primary-text-disabled" />
           <span>{t('operation.regenerate', { ns: 'common' })}</span>
         </Button>
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
index 4500509d00..8554db341f 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/index.tsx
@@ -173,7 +173,7 @@ const TransferOwnershipModal = ({ onClose, show }: Props) => {
             <MemberSelector exclude={[userProfile.id]} value={newOwner} onSelect={setNewOwner} />
           </div>
           <div className="mt-4 space-y-2">
-            <Button data-testid="transfer-modal-submit" disabled={!newOwner || isTransfer} className="w-full!" variant="primary" destructive onClick={handleTransfer}>
+            <Button data-testid="transfer-modal-submit" disabled={!newOwner || isTransfer} className="w-full!" variant="primary" tone="destructive" onClick={handleTransfer}>
               {t('members.transferModal.transfer', { ns: 'common' })}
             </Button>
             <Button data-testid="transfer-modal-cancel" className="w-full!" onClick={onClose}>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
index 6a251ee302..995da8bb98 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -387,7 +387,7 @@ const ModelModal: FC<ModelModalProps> = ({
               isEditMode && (
                 <Button
                   variant="primary"
-                  destructive
+                  tone="destructive"
                   onClick={() => openConfirmDelete(credential, model)}
                 >
                   {t('operation.remove', { ns: 'common' })}
diff --git a/web/app/components/plugins/update-plugin/downgrade-warning.tsx b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
index 1f17dcd85f..da53ebfb12 100644
--- a/web/app/components/plugins/update-plugin/downgrade-warning.tsx
+++ b/web/app/components/plugins/update-plugin/downgrade-warning.tsx
@@ -25,7 +25,7 @@ const DowngradeWarningModal = ({
       </div>
       <div className="mt-9 flex items-start justify-end space-x-2 self-stretch">
         <Button variant="secondary" onClick={() => onCancel()}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-        <Button variant="secondary" destructive onClick={onJustDowngrade}>{t(`${i18nPrefix}.downgrade`, { ns: 'plugin' })}</Button>
+        <Button variant="secondary" tone="destructive" onClick={onJustDowngrade}>{t(`${i18nPrefix}.downgrade`, { ns: 'plugin' })}</Button>
         <Button variant="primary" onClick={onExcludeAndDowngrade}>{t(`${i18nPrefix}.exclude`, { ns: 'plugin' })}</Button>
       </div>
     </>
diff --git a/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx
index 9ff1de49ad..038362c7ce 100644
--- a/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/version-mismatch-modal.spec.tsx
@@ -101,7 +101,7 @@ describe('VersionMismatchModal', () => {
 
       const confirmBtn = screen.getByRole('button', { name: /app\.newApp\.Confirm/ })
       expect(confirmBtn).toHaveClass('btn-primary')
-      expect(confirmBtn).toHaveClass('btn-destructive')
+      expect(confirmBtn).toHaveClass('btn-destructive-primary')
     })
   })
 
diff --git a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
index a420f02b9e..cc5d8cd7dd 100644
--- a/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
+++ b/web/app/components/rag-pipeline/components/update-dsl-modal.tsx
@@ -91,7 +91,7 @@ const UpdateDSLModal = ({
           <Button
             disabled={!currentFile || loading}
             variant="primary"
-            destructive
+            tone="destructive"
             onClick={handleImport}
             loading={loading}
           >
diff --git a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
index bf69e11435..5277a11ca7 100644
--- a/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
+++ b/web/app/components/rag-pipeline/components/version-mismatch-modal.tsx
@@ -45,7 +45,7 @@ const VersionMismatchModal = ({
       </div>
       <div className="flex items-start justify-end gap-2 self-stretch pt-6">
         <Button variant="secondary" onClick={onClose}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-        <Button variant="primary" destructive onClick={onConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
+        <Button variant="primary" tone="destructive" onClick={onConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
       </div>
     </Modal>
   )
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index 506eab1c8f..6a15010189 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -344,7 +344,7 @@ const EditCustomCollectionModal: FC<Props> = ({
             <div className={cn(isEdit ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')}>
               {
                 isEdit && (
-                  <Button variant="primary" destructive onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
+                  <Button variant="primary" tone="destructive" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
                 )
               }
               <div className="flex space-x-2">
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx b/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
index e076ae67e2..2cbe98c7ab 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/__tests__/index.spec.tsx
@@ -165,7 +165,7 @@ describe('ConfirmModal', () => {
       // Assert
       const confirmButton = screen.getByText('common.operation.confirm')
       expect(confirmButton).toHaveClass('btn-primary')
-      expect(confirmButton).toHaveClass('btn-destructive')
+      expect(confirmButton).toHaveClass('btn-destructive-primary')
     })
   })
 
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
index 1533b22f8e..ff78cc017d 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -36,7 +36,7 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
       <div className="flex items-center justify-end pt-6">
         <div className="flex items-center">
           <Button className="mr-2" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-          <Button variant="primary" destructive onClick={onConfirm}>{t('operation.confirm', { ns: 'common' })}</Button>
+          <Button variant="primary" tone="destructive" onClick={onConfirm}>{t('operation.confirm', { ns: 'common' })}</Button>
         </div>
       </div>
     </Modal>
diff --git a/web/app/components/tools/workflow-tool/index.tsx b/web/app/components/tools/workflow-tool/index.tsx
index d93a378ec2..aa99d2aa27 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -318,7 +318,7 @@ const WorkflowToolAsModal: FC<Props> = ({
             </div>
             <div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')}>
               {!isAdd && onRemove && (
-                <Button variant="primary" destructive onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
+                <Button variant="primary" tone="destructive" onClick={onRemove}>{t('operation.delete', { ns: 'common' })}</Button>
               )}
               <div className="flex space-x-2">
                 <Button onClick={onHide}>{t('operation.cancel', { ns: 'common' })}</Button>
diff --git a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
index daf485c5a5..4779be8984 100644
--- a/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/delete-confirm-modal.tsx
@@ -34,7 +34,7 @@ const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
         <Button onClick={onClose}>
           {t('operation.cancel', { ns: 'common' })}
         </Button>
-        <Button variant="primary" destructive onClick={onDelete.bind(null, versionInfo.id)}>
+        <Button variant="primary" tone="destructive" onClick={onDelete.bind(null, versionInfo.id)}>
           {t('operation.delete', { ns: 'common' })}
         </Button>
       </div>
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index 38607b97d5..98176033c9 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -247,7 +247,7 @@ const UpdateDSLModal = ({
           <Button
             disabled={!currentFile || loading}
             variant="primary"
-            destructive
+            tone="destructive"
             onClick={handleImport}
             loading={loading}
           >
@@ -278,7 +278,7 @@ const UpdateDSLModal = ({
         </div>
         <div className="flex items-start justify-end gap-2 self-stretch pt-6">
           <Button variant="secondary" onClick={() => setShowErrorModal(false)}>{t('newApp.Cancel', { ns: 'app' })}</Button>
-          <Button variant="primary" destructive onClick={onUpdateDSLConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
+          <Button variant="primary" tone="destructive" onClick={onUpdateDSLConfirm}>{t('newApp.Confirm', { ns: 'app' })}</Button>
         </div>
       </Modal>
     </>

From 381c518b23e0992e41e43b2bfbf9f2381820847a Mon Sep 17 00:00:00 2001
From: bohdansolovie <153934212+bohdansolovie@users.noreply.github.com>
Date: Tue, 14 Apr 2026 10:19:19 -0400
Subject: [PATCH 14/44] test: migrate conversation read timestamp SQL test to
 Testcontainers (#32454) (#35177)

---
 .../app/test_conversation_read_timestamp.py   | 73 +++++++++++++++++++
 .../app/test_conversation_read_timestamp.py   | 42 -----------
 2 files changed, 73 insertions(+), 42 deletions(-)
 create mode 100644 api/tests/test_containers_integration_tests/controllers/console/app/test_conversation_read_timestamp.py
 delete mode 100644 api/tests/unit_tests/controllers/console/app/test_conversation_read_timestamp.py

diff --git a/api/tests/test_containers_integration_tests/controllers/console/app/test_conversation_read_timestamp.py b/api/tests/test_containers_integration_tests/controllers/console/app/test_conversation_read_timestamp.py
new file mode 100644
index 0000000000..fad0b8b10e
--- /dev/null
+++ b/api/tests/test_containers_integration_tests/controllers/console/app/test_conversation_read_timestamp.py
@@ -0,0 +1,73 @@
+from datetime import datetime
+from unittest.mock import patch
+
+import pytest
+from sqlalchemy.orm import Session
+from werkzeug.exceptions import NotFound
+
+from controllers.console.app.conversation import _get_conversation
+from models.enums import ConversationFromSource
+from models.model import AppMode, Conversation
+from tests.test_containers_integration_tests.controllers.console.helpers import (
+    create_console_account_and_tenant,
+    create_console_app,
+)
+
+
+def test_get_conversation_mark_read_keeps_updated_at_unchanged(
+    db_session_with_containers: Session,
+):
+    account, tenant = create_console_account_and_tenant(db_session_with_containers)
+    app = create_console_app(db_session_with_containers, tenant.id, account.id, AppMode.CHAT)
+
+    original_updated_at = datetime(2026, 2, 8, 0, 0, 0)
+    conversation = Conversation(
+        app_id=app.id,
+        name="read timestamp test",
+        inputs={},
+        status="normal",
+        mode=AppMode.CHAT,
+        from_source=ConversationFromSource.CONSOLE,
+        from_account_id=account.id,
+        updated_at=original_updated_at,
+    )
+    db_session_with_containers.add(conversation)
+    db_session_with_containers.commit()
+
+    read_at = datetime(2026, 2, 9, 0, 0, 0)
+
+    with (
+        patch(
+            "controllers.console.app.conversation.current_account_with_tenant",
+            return_value=(account, tenant.id),
+            autospec=True,
+        ),
+        patch(
+            "controllers.console.app.conversation.naive_utc_now",
+            return_value=read_at,
+            autospec=True,
+        ),
+    ):
+        loaded = _get_conversation(app, conversation.id)
+
+    db_session_with_containers.refresh(conversation)
+
+    assert loaded.id == conversation.id
+    assert conversation.read_at == read_at
+    assert conversation.read_account_id == account.id
+    assert conversation.updated_at == original_updated_at
+
+
+def test_get_conversation_raises_not_found_for_missing_conversation(
+    db_session_with_containers: Session,
+):
+    account, tenant = create_console_account_and_tenant(db_session_with_containers)
+    app = create_console_app(db_session_with_containers, tenant.id, account.id, AppMode.CHAT)
+
+    with patch(
+        "controllers.console.app.conversation.current_account_with_tenant",
+        return_value=(account, tenant.id),
+        autospec=True,
+    ):
+        with pytest.raises(NotFound):
+            _get_conversation(app, "00000000-0000-0000-0000-000000000000")
diff --git a/api/tests/unit_tests/controllers/console/app/test_conversation_read_timestamp.py b/api/tests/unit_tests/controllers/console/app/test_conversation_read_timestamp.py
deleted file mode 100644
index f588ab261d..0000000000
--- a/api/tests/unit_tests/controllers/console/app/test_conversation_read_timestamp.py
+++ /dev/null
@@ -1,42 +0,0 @@
-from datetime import datetime
-from types import SimpleNamespace
-from unittest.mock import MagicMock, patch
-
-from controllers.console.app.conversation import _get_conversation
-
-
-def test_get_conversation_mark_read_keeps_updated_at_unchanged():
-    app_model = SimpleNamespace(id="app-id")
-    account = SimpleNamespace(id="account-id")
-    conversation = MagicMock()
-    conversation.id = "conversation-id"
-
-    with (
-        patch(
-            "controllers.console.app.conversation.current_account_with_tenant",
-            return_value=(account, None),
-            autospec=True,
-        ),
-        patch(
-            "controllers.console.app.conversation.naive_utc_now",
-            return_value=datetime(2026, 2, 9, 0, 0, 0),
-            autospec=True,
-        ),
-        patch("controllers.console.app.conversation.db.session", autospec=True) as mock_session,
-    ):
-        mock_session.scalar.return_value = conversation
-
-        _get_conversation(app_model, "conversation-id")
-
-        statement = mock_session.execute.call_args[0][0]
-        compiled = statement.compile()
-        sql_text = str(compiled).lower()
-        compact_sql_text = sql_text.replace(" ", "")
-        params = compiled.params
-
-        assert "updated_at=current_timestamp" not in compact_sql_text
-        assert "updated_at=conversations.updated_at" in compact_sql_text
-        assert "read_at=:read_at" in compact_sql_text
-        assert "read_account_id=:read_account_id" in compact_sql_text
-        assert params["read_at"] == datetime(2026, 2, 9, 0, 0, 0)
-        assert params["read_account_id"] == "account-id"

From 2c58b424a19cbdc2aaea9b345cb2601c6fb486f2 Mon Sep 17 00:00:00 2001
From: Coding On Star <447357187@qq.com>
Date: Tue, 14 Apr 2026 22:46:26 +0800
Subject: [PATCH 15/44] refactor(web): migrate confirm dialogs to
 base/ui/alert-dialog (#35127)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
---
 .../apps/app-card-operations-flow.test.tsx    |  30 +--
 .../tools/tool-provider-detail-flow.test.tsx  |  29 +--
 .../tracing/provider-config-modal.tsx         |  36 ++-
 .../__tests__/app-info-modals.spec.tsx        |  74 +++---
 .../app-sidebar/app-info/app-info-modals.tsx  | 105 ++++++---
 .../__tests__/dropdown-callbacks.spec.tsx     |  35 +--
 .../app-sidebar/dataset-info/dropdown.tsx     |  39 +++-
 .../__tests__/batch-action.spec.tsx           |  24 +-
 .../app/annotation/batch-action.tsx           |  47 ++--
 .../index.tsx                                 |  34 ++-
 .../__tests__/index.spec.tsx                  |  18 ++
 .../edit-annotation-modal/index.tsx           |  46 +++-
 .../remove-annotation-confirm-modal/index.tsx |  33 ++-
 .../__tests__/index.spec.tsx                  |  13 ++
 .../view-annotation-modal/index.tsx           |  46 +++-
 .../__tests__/features-wrapper.spec.tsx       |  21 +-
 .../app/app-publisher/features-wrapper.tsx    |  37 ++-
 .../app/configuration/config-var/index.tsx    |  47 ++--
 .../__tests__/get-automatic-res.spec.tsx      |  38 ++-
 .../config/automatic/get-automatic-res.tsx    |  46 ++--
 .../__tests__/get-code-generator-res.spec.tsx |  39 +++-
 .../code-generator/get-code-generator-res.tsx |  45 ++--
 .../app/configuration/configuration-view.tsx  |  42 ++--
 .../__tests__/app-card-sections.spec.tsx      |  31 ++-
 .../app/overview/app-card-sections.tsx        |  42 ++--
 .../switch-app-modal/__tests__/index.spec.tsx |   1 +
 .../components/app/switch-app-modal/index.tsx |  53 +++--
 .../chat-with-history/header-in-mobile.tsx    |  41 +++-
 .../chat/chat-with-history/header/index.tsx   |  39 +++-
 .../sidebar/__tests__/index.spec.tsx          |  35 +--
 .../chat/chat-with-history/sidebar/index.tsx  |  37 ++-
 .../base/confirm/__tests__/index.spec.tsx     | 117 ----------
 .../components/base/confirm/index.stories.tsx | 216 ------------------
 web/app/components/base/confirm/index.tsx     | 164 -------------
 .../base/tag-management/tag-item-editor.tsx   |  48 +++-
 .../template-card/__tests__/index.spec.tsx    |  58 ++---
 .../list/template-card/index.tsx              |  37 ++-
 .../documents/components/operations.tsx       |  32 ++-
 .../common/__tests__/batch-action.spec.tsx    |  17 +-
 .../detail/completed/common/batch-action.tsx  |  42 ++--
 .../detail/completed/segment-card/index.tsx   |  40 ++--
 .../external-api/external-api-modal/index.tsx |  32 ++-
 .../external-knowledge-api-card/index.tsx     |  46 ++--
 .../__tests__/dataset-card-modals.spec.tsx    |  22 --
 .../components/dataset-card-modals.tsx        |  39 +++-
 .../dataset-metadata-drawer.tsx               |  38 ++-
 .../__tests__/secret-key-modal.spec.tsx       |  28 ++-
 .../develop/secret-key/secret-key-modal.tsx   |  53 +++--
 .../__tests__/item.spec.tsx                   |  18 +-
 .../api-based-extension-page/item.tsx         |  36 +--
 .../data-source-page-new/card.tsx             |  41 ++--
 .../authorized/__tests__/index.spec.tsx       |  37 ++-
 .../model-auth/authorized/index.tsx           |  35 ++-
 .../model-load-balancing-modal.tsx            |  25 +-
 .../plugins/plugin-auth/authorized/index.tsx  |  35 ++-
 .../__tests__/endpoint-card.spec.tsx          |  21 +-
 .../plugin-detail-panel/endpoint-card.tsx     |  89 +++++---
 .../subscription-list/delete-confirm.tsx      |   8 +-
 .../plugin-item/__tests__/action.spec.tsx     |  71 ++----
 .../components/plugins/plugin-item/action.tsx |  46 ++--
 .../components/__tests__/conversion.spec.tsx  |  44 +---
 .../components/__tests__/index.spec.tsx       |  10 +-
 .../rag-pipeline/components/conversion.tsx    |  33 ++-
 .../publisher/__tests__/index.spec.tsx        |  18 +-
 .../publisher/__tests__/popup.spec.tsx        |  18 --
 .../rag-pipeline-header/publisher/popup.tsx   |  34 ++-
 .../mcp/__tests__/provider-card.spec.tsx      |  47 +---
 .../mcp/detail/__tests__/content.spec.tsx     |  50 ++--
 .../components/tools/mcp/detail/content.tsx   |  66 ++++--
 .../components/tools/mcp/mcp-service-card.tsx |  38 ++-
 .../components/tools/mcp/provider-card.tsx    |  52 +++--
 .../tools/provider/__tests__/detail.spec.tsx  |  32 +--
 web/app/components/tools/provider/detail.tsx  |  37 ++-
 .../workflow-onboarding-modal/index.tsx       |   6 +-
 .../__tests__/workflow-edge-events.spec.tsx   |  42 ++++
 web/app/components/workflow/index.tsx         |  49 ++--
 .../remove-effect-var-confirm.spec.tsx        |  52 +++++
 .../components/remove-effect-var-confirm.tsx  |  39 +++-
 web/docs/overlay-migration.md                 |   1 -
 web/eslint-suppressions.json                  | 184 +++------------
 web/eslint.constants.mjs                      |   7 -
 web/hooks/use-pay.tsx                         |  51 +++--
 82 files changed, 1958 insertions(+), 1646 deletions(-)
 delete mode 100644 web/app/components/base/confirm/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/confirm/index.stories.tsx
 delete mode 100644 web/app/components/base/confirm/index.tsx
 create mode 100644 web/app/components/workflow/nodes/_base/components/__tests__/remove-effect-var-confirm.spec.tsx

diff --git a/web/__tests__/apps/app-card-operations-flow.test.tsx b/web/__tests__/apps/app-card-operations-flow.test.tsx
index 765c7045e5..8e45367db4 100644
--- a/web/__tests__/apps/app-card-operations-flow.test.tsx
+++ b/web/__tests__/apps/app-card-operations-flow.test.tsx
@@ -207,20 +207,6 @@ vi.mock('@/app/components/app/switch-app-modal', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({ isShow, onConfirm, onCancel, title }: Record<string, unknown>) => {
-    if (!isShow)
-      return null
-    return (
-      <div data-testid="confirm-delete-modal">
-        <span>{title as string}</span>
-        <button data-testid="confirm-delete" onClick={onConfirm as () => void}>Delete</button>
-        <button data-testid="cancel-delete" onClick={onCancel as () => void}>Cancel</button>
-      </div>
-    )
-  },
-}))
-
 vi.mock('@/app/components/workflow/dsl-export-confirm-modal', () => ({
   default: ({ onConfirm, onClose }: Record<string, unknown>) => (
     <div data-testid="dsl-export-confirm-modal">
@@ -342,14 +328,16 @@ describe('App Card Operations Flow', () => {
             fireEvent.click(deleteBtn)
         })
 
-        const confirmBtn = screen.queryByTestId('confirm-delete')
-        if (confirmBtn) {
-          fireEvent.click(confirmBtn)
+        await waitFor(() => {
+          expect(screen.getByText('app.deleteAppConfirmTitle')).toBeInTheDocument()
+        })
 
-          await waitFor(() => {
-            expect(mockDeleteAppMutation).toHaveBeenCalledWith('app-to-delete')
-          })
-        }
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Deletable App' } })
+        fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
+
+        await waitFor(() => {
+          expect(mockDeleteAppMutation).toHaveBeenCalledWith('app-to-delete')
+        })
       }
     })
   })
diff --git a/web/__tests__/tools/tool-provider-detail-flow.test.tsx b/web/__tests__/tools/tool-provider-detail-flow.test.tsx
index 3d66467695..ce5ffe531e 100644
--- a/web/__tests__/tools/tool-provider-detail-flow.test.tsx
+++ b/web/__tests__/tools/tool-provider-detail-flow.test.tsx
@@ -133,26 +133,6 @@ vi.mock('@/app/components/base/drawer', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({ title, isShow, onConfirm, onCancel }: {
-    title: string
-    content: string
-    isShow: boolean
-    onConfirm: () => void
-    onCancel: () => void
-  }) => (
-    isShow
-      ? (
-          <div data-testid="confirm-dialog">
-            <span>{title}</span>
-            <button data-testid="confirm-ok" onClick={onConfirm}>Confirm</button>
-            <button data-testid="confirm-cancel" onClick={onCancel}>Cancel</button>
-          </div>
-        )
-      : null
-  ),
-}))
-
 vi.mock('@/app/components/base/ui/toast', () => ({
   default: { notify: vi.fn() },
   toast: {
@@ -242,6 +222,8 @@ vi.mock('@/app/components/tools/provider/tool-item', () => ({
 
 const { default: ProviderDetail } = await import('@/app/components/tools/provider/detail')
 
+const getDeleteConfirmButton = () => screen.getByRole('button', { name: /operation\.confirm$/ })
+
 const makeCollection = (overrides: Partial<Collection> = {}): Collection => ({
   id: 'test-collection',
   name: 'test_collection',
@@ -465,11 +447,10 @@ describe('Tool Provider Detail Flow Integration', () => {
 
       fireEvent.click(screen.getByTestId('custom-modal-remove'))
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
         expect(screen.getByText('Delete Tool')).toBeInTheDocument()
       })
 
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
       await waitFor(() => {
         expect(mockRemoveCustomCollection).toHaveBeenCalledWith('test_collection')
         expect(mockOnRefreshData).toHaveBeenCalled()
@@ -527,10 +508,10 @@ describe('Tool Provider Detail Flow Integration', () => {
 
       fireEvent.click(screen.getByTestId('wf-modal-remove'))
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('Delete Tool')).toBeInTheDocument()
       })
 
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
       await waitFor(() => {
         expect(mockDeleteWorkflowTool).toHaveBeenCalledWith('test-collection')
         expect(mockOnRefreshData).toHaveBeenCalled()
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
index caf6562a3e..c63d482c8f 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx
@@ -5,7 +5,6 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
@@ -14,6 +13,15 @@ import {
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { addTracingConfig, removeTracingConfig, updateTracingConfig } from '@/service/apps'
 import { docURL } from './config'
@@ -679,14 +687,24 @@ const ProviderConfigModal: FC<Props> = ({
             </PortalToFollowElem>
           )
         : (
-            <Confirm
-              isShow
-              type="warning"
-              title={t(`${I18N_PREFIX}.removeConfirmTitle`, { ns: 'app', key: t(`tracing.${type}.title`, { ns: 'app' }) })!}
-              content={t(`${I18N_PREFIX}.removeConfirmContent`, { ns: 'app' })}
-              onConfirm={handleRemove}
-              onCancel={hideRemoveConfirm}
-            />
+            <AlertDialog open onOpenChange={open => !open && hideRemoveConfirm()}>
+              <AlertDialogContent>
+                <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+                  <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                    {t(`${I18N_PREFIX}.removeConfirmTitle`, { ns: 'app', key: t(`tracing.${type}.title`, { ns: 'app' }) })!}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                    {t(`${I18N_PREFIX}.removeConfirmContent`, { ns: 'app' })}
+                  </AlertDialogDescription>
+                </div>
+                <AlertDialogActions>
+                  <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+                  <AlertDialogConfirmButton onClick={handleRemove}>
+                    {t('operation.confirm', { ns: 'common' })}
+                  </AlertDialogConfirmButton>
+                </AlertDialogActions>
+              </AlertDialogContent>
+            </AlertDialog>
           )}
     </>
   )
diff --git a/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx b/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx
index 2f98089e40..707b0da267 100644
--- a/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx
+++ b/web/app/components/app-sidebar/app-info/__tests__/app-info-modals.spec.tsx
@@ -1,5 +1,5 @@
 import type { App, AppSSO } from '@/types/app'
-import { act, render, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
 import { AppModeEnum } from '@/types/app'
@@ -36,24 +36,6 @@ vi.mock('@/app/components/app/duplicate-modal', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({ isShow, title, onConfirm, onCancel }: {
-    isShow: boolean
-    title: string
-    onConfirm: () => void
-    onCancel: () => void
-  }) => (
-    isShow
-      ? (
-          <div data-testid="confirm-modal" data-title={title}>
-            <button type="button" onClick={onConfirm}>Confirm</button>
-            <button type="button" onClick={onCancel}>Cancel</button>
-          </div>
-        )
-      : null
-  ),
-}))
-
 vi.mock('@/app/components/workflow/update-dsl-modal', () => ({
   default: ({ onCancel, onBackup }: { onCancel: () => void, onBackup: () => void }) => (
     <div data-testid="import-dsl-modal">
@@ -113,7 +95,7 @@ describe('AppInfoModals', () => {
       render(<AppInfoModals {...defaultProps} activeModal={null} />)
     })
     expect(screen.queryByTestId('switch-modal')).not.toBeInTheDocument()
-    expect(screen.queryByTestId('confirm-modal')).not.toBeInTheDocument()
+    expect(screen.queryByText('app.deleteAppConfirmTitle')).not.toBeInTheDocument()
   })
 
   it('should render SwitchAppModal when activeModal is switch', async () => {
@@ -143,14 +125,13 @@ describe('AppInfoModals', () => {
     })
   })
 
-  it('should render Confirm for delete when activeModal is delete', async () => {
+  it('should render delete alert dialog when activeModal is delete', async () => {
     await act(async () => {
       render(<AppInfoModals {...defaultProps} activeModal="delete" />)
     })
     await waitFor(() => {
-      const confirm = screen.getByTestId('confirm-modal')
-      expect(confirm).toBeInTheDocument()
-      expect(confirm).toHaveAttribute('data-title', 'app.deleteAppConfirmTitle')
+      expect(screen.getByText('app.deleteAppConfirmTitle')).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
   })
 
@@ -163,14 +144,12 @@ describe('AppInfoModals', () => {
     })
   })
 
-  it('should render export warning Confirm when activeModal is exportWarning', async () => {
+  it('should render export warning alert dialog when activeModal is exportWarning', async () => {
     await act(async () => {
       render(<AppInfoModals {...defaultProps} activeModal="exportWarning" />)
     })
     await waitFor(() => {
-      const confirm = screen.getByTestId('confirm-modal')
-      expect(confirm).toBeInTheDocument()
-      expect(confirm).toHaveAttribute('data-title', 'workflow.sidebar.exportWarning')
+      expect(screen.getByText('workflow.sidebar.exportWarning')).toBeInTheDocument()
     })
   })
 
@@ -202,20 +181,47 @@ describe('AppInfoModals', () => {
       render(<AppInfoModals {...defaultProps} activeModal="delete" />)
     })
 
-    await waitFor(() => expect(screen.getByText('Cancel')).toBeInTheDocument())
-    await user.click(screen.getByText('Cancel'))
+    await waitFor(() => expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument())
+    await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
 
     expect(defaultProps.closeModal).toHaveBeenCalledTimes(1)
   })
 
+  it('should clear the delete confirmation input when delete modal is cancelled', async () => {
+    const user = userEvent.setup()
+    await act(async () => {
+      render(<AppInfoModals {...defaultProps} activeModal="delete" />)
+    })
+
+    const input = await screen.findByRole('textbox')
+    await user.type(input, 'wrong-name')
+    await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+    expect(defaultProps.closeModal).toHaveBeenCalledTimes(1)
+    expect(input).toHaveValue('')
+  })
+
+  it('should not confirm delete when the form is submitted with unmatched input', async () => {
+    await act(async () => {
+      render(<AppInfoModals {...defaultProps} activeModal="delete" />)
+    })
+
+    const form = document.querySelector('form')
+    expect(form).toBeTruthy()
+
+    fireEvent.submit(form!)
+
+    expect(defaultProps.onConfirmDelete).not.toHaveBeenCalled()
+  })
+
   it('should call onConfirmDelete when confirm on delete modal', async () => {
     const user = userEvent.setup()
     await act(async () => {
       render(<AppInfoModals {...defaultProps} activeModal="delete" />)
     })
 
-    await waitFor(() => expect(screen.getByText('Confirm')).toBeInTheDocument())
-    await user.click(screen.getByText('Confirm'))
+    await user.type(screen.getByRole('textbox'), 'Test App')
+    await user.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
 
     expect(defaultProps.onConfirmDelete).toHaveBeenCalledTimes(1)
   })
@@ -226,8 +232,8 @@ describe('AppInfoModals', () => {
       render(<AppInfoModals {...defaultProps} activeModal="exportWarning" />)
     })
 
-    await waitFor(() => expect(screen.getByText('Confirm')).toBeInTheDocument())
-    await user.click(screen.getByText('Confirm'))
+    await waitFor(() => expect(screen.getByRole('button', { name: 'common.operation.confirm' })).toBeInTheDocument())
+    await user.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
 
     expect(defaultProps.handleConfirmExport).toHaveBeenCalledTimes(1)
   })
diff --git a/web/app/components/app-sidebar/app-info/app-info-modals.tsx b/web/app/components/app-sidebar/app-info/app-info-modals.tsx
index 6b76be87bb..fa84ecc0b6 100644
--- a/web/app/components/app-sidebar/app-info/app-info-modals.tsx
+++ b/web/app/components/app-sidebar/app-info/app-info-modals.tsx
@@ -6,12 +6,21 @@ import type { App, AppSSO } from '@/types/app'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import dynamic from '@/next/dynamic'
 
 const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), { ssr: false })
 const CreateAppModal = dynamic(() => import('@/app/components/explore/create-app-modal'), { ssr: false })
 const DuplicateAppModal = dynamic(() => import('@/app/components/app/duplicate-modal'), { ssr: false })
-const Confirm = dynamic(() => import('@/app/components/base/confirm'), { ssr: false })
 const UpdateDSLModal = dynamic(() => import('@/app/components/workflow/update-dsl-modal'), { ssr: false })
 const DSLExportConfirmModal = dynamic(() => import('@/app/components/workflow/dsl-export-confirm-modal'), { ssr: false })
 
@@ -44,6 +53,12 @@ const AppInfoModals = ({
 }: AppInfoModalsProps) => {
   const { t } = useTranslation()
   const [confirmDeleteInput, setConfirmDeleteInput] = useState('')
+  const isDeleteConfirmDisabled = confirmDeleteInput !== appDetail.name
+
+  const handleDeleteDialogClose = () => {
+    setConfirmDeleteInput('')
+    closeModal()
+  }
 
   return (
     <>
@@ -85,39 +100,73 @@ const AppInfoModals = ({
           onHide={closeModal}
         />
       )}
-      {activeModal === 'delete' && (
-        <Confirm
-          title={t('deleteAppConfirmTitle', { ns: 'app' })}
-          content={t('deleteAppConfirmContent', { ns: 'app' })}
-          isShow
-          confirmInputLabel={t('deleteAppConfirmInputLabel', { ns: 'app', appName: appDetail.name })}
-          confirmInputPlaceholder={t('deleteAppConfirmInputPlaceholder', { ns: 'app' })}
-          confirmInputValue={confirmDeleteInput}
-          onConfirmInputChange={setConfirmDeleteInput}
-          confirmInputMatchValue={appDetail.name}
-          onConfirm={onConfirmDelete}
-          onCancel={() => {
-            setConfirmDeleteInput('')
-            closeModal()
-          }}
-        />
-      )}
+      <AlertDialog open={activeModal === 'delete'} onOpenChange={open => !open && handleDeleteDialogClose()}>
+        <AlertDialogContent>
+          <form
+            className="flex flex-col"
+            onSubmit={(e) => {
+              e.preventDefault()
+              if (isDeleteConfirmDisabled)
+                return
+              onConfirmDelete()
+            }}
+          >
+            <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+              <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                {t('deleteAppConfirmTitle', { ns: 'app' })}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                {t('deleteAppConfirmContent', { ns: 'app' })}
+              </AlertDialogDescription>
+              <div className="mt-2">
+                <label className="mb-1 block system-sm-regular text-text-secondary">
+                  {t('deleteAppConfirmInputLabel', { ns: 'app', appName: appDetail.name })}
+                </label>
+                <Input
+                  type="text"
+                  autoComplete="off"
+                  spellCheck={false}
+                  placeholder={t('deleteAppConfirmInputPlaceholder', { ns: 'app' })}
+                  value={confirmDeleteInput}
+                  onChange={e => setConfirmDeleteInput(e.target.value)}
+                />
+              </div>
+            </div>
+            <AlertDialogActions>
+              <AlertDialogCancelButton type="button">
+                {t('operation.cancel', { ns: 'common' })}
+              </AlertDialogCancelButton>
+              <AlertDialogConfirmButton type="submit" disabled={isDeleteConfirmDisabled}>
+                {t('operation.confirm', { ns: 'common' })}
+              </AlertDialogConfirmButton>
+            </AlertDialogActions>
+          </form>
+        </AlertDialogContent>
+      </AlertDialog>
       {activeModal === 'importDSL' && (
         <UpdateDSLModal
           onCancel={closeModal}
           onBackup={exportCheck}
         />
       )}
-      {activeModal === 'exportWarning' && (
-        <Confirm
-          type="info"
-          isShow
-          title={t('sidebar.exportWarning', { ns: 'workflow' })}
-          content={t('sidebar.exportWarningDesc', { ns: 'workflow' })}
-          onConfirm={handleConfirmExport}
-          onCancel={closeModal}
-        />
-      )}
+      <AlertDialog open={activeModal === 'exportWarning'} onOpenChange={open => !open && closeModal()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('sidebar.exportWarning', { ns: 'workflow' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('sidebar.exportWarningDesc', { ns: 'workflow' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton tone="default" onClick={handleConfirmExport}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
       {secretEnvList.length > 0 && (
         <DSLExportConfirmModal
           envList={secretEnvList}
diff --git a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
index dcc9f9c98e..6ed10609e9 100644
--- a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
+++ b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
@@ -137,33 +137,6 @@ vi.mock('@/app/components/datasets/rename-modal', () => ({
   },
 }))
 
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({
-    isShow,
-    onConfirm,
-    onCancel,
-    title,
-    content,
-  }: {
-    isShow: boolean
-    onConfirm: () => void
-    onCancel: () => void
-    title: string
-    content: string
-  }) => {
-    if (!isShow)
-      return null
-    return (
-      <div data-testid="confirm-dialog">
-        <span>{title}</span>
-        <span>{content}</span>
-        <button type="button" onClick={onConfirm}>confirm</button>
-        <button type="button" onClick={onCancel}>cancel</button>
-      </div>
-    )
-  },
-}))
-
 vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
   PortalToFollowElem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
@@ -221,13 +194,13 @@ describe('Dropdown callback coverage', () => {
     await user.click(screen.getByText('common.operation.delete'))
 
     await waitFor(() => {
-      expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      expect(screen.getByText('dataset.deleteDatasetConfirmTitle')).toBeInTheDocument()
     })
 
-    await user.click(screen.getByText('cancel'))
+    await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
 
     await waitFor(() => {
-      expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
+      expect(screen.queryByText('dataset.deleteDatasetConfirmTitle')).not.toBeInTheDocument()
     })
   })
 
@@ -273,6 +246,6 @@ describe('Dropdown callback coverage', () => {
     await waitFor(() => {
       expect(mockToast).toHaveBeenCalledWith('check failed', { type: 'error' })
     })
-    expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
+    expect(screen.queryByText('dataset.deleteDatasetConfirmTitle')).not.toBeInTheDocument()
   })
 })
diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index 6c70f96b34..33092865f8 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -14,8 +14,16 @@ import { useExportPipelineDSL } from '@/service/use-pipeline'
 import { cn } from '@/utils/classnames'
 import { downloadBlob } from '@/utils/download'
 import ActionButton from '../../base/action-button'
-import Confirm from '../../base/confirm'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '../../base/ui/alert-dialog'
 import RenameDatasetModal from '../../datasets/rename-modal'
 import Menu from './menu'
 
@@ -135,15 +143,26 @@ const DropDown = ({
           onSuccess={refreshDataset}
         />
       )}
-      {showConfirmDelete && (
-        <Confirm
-          title={t('deleteDatasetConfirmTitle', { ns: 'dataset' })}
-          content={confirmMessage}
-          isShow={showConfirmDelete}
-          onConfirm={onConfirmDelete}
-          onCancel={() => setShowConfirmDelete(false)}
-        />
-      )}
+      <AlertDialog open={showConfirmDelete} onOpenChange={open => !open && setShowConfirmDelete(false)}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('deleteDatasetConfirmTitle', { ns: 'dataset' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {confirmMessage}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={onConfirmDelete}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </PortalToFollowElem>
   )
 }
diff --git a/web/app/components/app/annotation/__tests__/batch-action.spec.tsx b/web/app/components/app/annotation/__tests__/batch-action.spec.tsx
index 95dddd4b23..102465e116 100644
--- a/web/app/components/app/annotation/__tests__/batch-action.spec.tsx
+++ b/web/app/components/app/annotation/__tests__/batch-action.spec.tsx
@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import * as React from 'react'
 import BatchAction from '../batch-action'
 
@@ -29,14 +29,28 @@ describe('BatchAction', () => {
     render(<BatchAction {...baseProps} onBatchDelete={onBatchDelete} />)
 
     fireEvent.click(screen.getByRole('button', { name: 'common.operation.delete' }))
-    await screen.findByText('appAnnotation.list.delete.title')
+    const dialog = await screen.findByRole('alertdialog')
+    expect(within(dialog).getByText('appAnnotation.list.delete.title')).toBeInTheDocument()
 
-    await act(async () => {
-      fireEvent.click(screen.getAllByRole('button', { name: 'common.operation.delete' })[1])
-    })
+    fireEvent.click(within(dialog).getByRole('button', { name: 'common.operation.delete' }))
 
     await waitFor(() => {
       expect(onBatchDelete).toHaveBeenCalledTimes(1)
     })
   })
+
+  it('should hide delete confirmation when cancel is clicked', async () => {
+    const onBatchDelete = vi.fn()
+    render(<BatchAction {...baseProps} onBatchDelete={onBatchDelete} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.delete' }))
+    const dialog = await screen.findByRole('alertdialog')
+
+    fireEvent.click(within(dialog).getByRole('button', { name: 'common.operation.cancel' }))
+
+    await waitFor(() => {
+      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+    })
+    expect(onBatchDelete).not.toHaveBeenCalled()
+  })
 })
diff --git a/web/app/components/app/annotation/batch-action.tsx b/web/app/components/app/annotation/batch-action.tsx
index 76aab79079..e59e57b392 100644
--- a/web/app/components/app/annotation/batch-action.tsx
+++ b/web/app/components/app/annotation/batch-action.tsx
@@ -3,8 +3,15 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'batchAction'
@@ -41,38 +48,42 @@ const BatchAction: FC<IBatchActionProps> = ({
   return (
     <div className={cn('pointer-events-none flex w-full justify-center', className)}>
       <div className="pointer-events-auto flex items-center gap-x-1 radius-lg border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]">
-        <div className="inline-flex items-center gap-x-2 py-1 pl-2 pr-3">
+        <div className="inline-flex items-center gap-x-2 py-1 pr-3 pl-2">
           <span className="flex h-5 w-5 items-center justify-center rounded-md bg-text-accent px-1 py-0.5 text-xs font-medium text-text-primary-on-surface">
             {selectedIds.length}
           </span>
-          <span className="text-[13px] font-semibold leading-[16px] text-text-accent">{t(`${i18nPrefix}.selected`, { ns: 'appAnnotation' })}</span>
+          <span className="text-[13px] leading-[16px] font-semibold text-text-accent">{t(`${i18nPrefix}.selected`, { ns: 'appAnnotation' })}</span>
         </div>
         <Divider type="vertical" className="mx-0.5 h-3.5 bg-divider-regular" />
         <div className="flex cursor-pointer items-center gap-x-0.5 px-3 py-2" onClick={showDeleteConfirm}>
           <RiDeleteBinLine className="h-4 w-4 text-components-button-destructive-ghost-text" />
-          <button type="button" className="px-0.5 text-[13px] font-medium leading-[16px] text-components-button-destructive-ghost-text">
+          <button type="button" className="px-0.5 text-[13px] leading-[16px] font-medium text-components-button-destructive-ghost-text">
             {t('operation.delete', { ns: 'common' })}
           </button>
         </div>
 
         <Divider type="vertical" className="mx-0.5 h-3.5 bg-divider-regular" />
-        <button type="button" className="px-3.5 py-2 text-[13px] font-medium leading-[16px] text-components-button-ghost-text" onClick={onCancel}>
+        <button type="button" className="px-3.5 py-2 text-[13px] leading-[16px] font-medium text-components-button-ghost-text" onClick={onCancel}>
           {t('operation.cancel', { ns: 'common' })}
         </button>
       </div>
-      {
-        isShowDeleteConfirm && (
-          <Confirm
-            isShow
-            title={t('list.delete.title', { ns: 'appAnnotation' })}
-            confirmText={t('operation.delete', { ns: 'common' })}
-            onConfirm={handleBatchDelete}
-            onCancel={hideDeleteConfirm}
-            isLoading={isDeleting}
-            isDisabled={isDeleting}
-          />
-        )
-      }
+      <AlertDialog open={isShowDeleteConfirm} onOpenChange={open => !open && hideDeleteConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('list.delete.title', { ns: 'appAnnotation' })}
+            </AlertDialogTitle>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton loading={isDeleting} disabled={isDeleting} onClick={handleBatchDelete}>
+              {t('operation.delete', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
diff --git a/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx
index 3d5fd566d2..b960e1d59c 100644
--- a/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx
+++ b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx
@@ -3,7 +3,14 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 
 type Props = {
   isShow: boolean
@@ -17,15 +24,26 @@ const ClearAllAnnotationsConfirmModal: FC<Props> = ({
   onConfirm,
 }) => {
   const { t } = useTranslation()
+  const title = t('table.header.clearAllConfirm', { ns: 'appAnnotation' })
 
   return (
-    <Confirm
-      isShow={isShow}
-      onCancel={onHide}
-      onConfirm={onConfirm}
-      type="danger"
-      title={t('table.header.clearAllConfirm', { ns: 'appAnnotation' })}
-    />
+    <AlertDialog open={isShow} onOpenChange={open => !open && onHide()}>
+      <AlertDialogContent>
+        <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+          <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+            {title}
+          </AlertDialogTitle>
+        </div>
+        <AlertDialogActions>
+          <AlertDialogCancelButton>
+            {t('operation.cancel', { ns: 'common' })}
+          </AlertDialogCancelButton>
+          <AlertDialogConfirmButton onClick={onConfirm}>
+            {t('operation.confirm', { ns: 'common' })}
+          </AlertDialogConfirmButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
diff --git a/web/app/components/app/annotation/edit-annotation-modal/__tests__/index.spec.tsx b/web/app/components/app/annotation/edit-annotation-modal/__tests__/index.spec.tsx
index 271331e49f..53a6f7356a 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/__tests__/index.spec.tsx
@@ -332,6 +332,24 @@ describe('EditAnnotationModal', () => {
       // Assert
       expect(mockOnRemove).toHaveBeenCalled()
     })
+
+    it('should hide confirm modal when removal is cancelled', async () => {
+      const props = {
+        ...defaultProps,
+        annotationId: 'test-annotation-id',
+      }
+      const user = userEvent.setup()
+
+      render(<EditAnnotationModal {...props} />)
+      await user.click(screen.getByText('appAnnotation.editModal.removeThisCache'))
+      expect(screen.getByText('appDebug.feature.annotation.removeConfirm')).toBeInTheDocument()
+
+      await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+      await waitFor(() => {
+        expect(screen.queryByText('appDebug.feature.annotation.removeConfirm')).not.toBeInTheDocument()
+      })
+    })
   })
 
   // Edge Cases (REQUIRED)
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
index 2fd232f26c..53bf813388 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
@@ -3,9 +3,16 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import Drawer from '@/app/components/base/drawer-plus'
 import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
@@ -106,16 +113,33 @@ const EditAnnotationModal: FC<Props> = ({
                 readonly={isAdd && isAnnotationFull}
                 onSave={editedContent => handleSave(EditItemType.Answer, editedContent)}
               />
-              <Confirm
-                isShow={showModal}
-                onCancel={() => setShowModal(false)}
-                onConfirm={() => {
-                  onRemove()
-                  setShowModal(false)
-                  onHide()
-                }}
-                title={t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
-              />
+              <AlertDialog open={showModal} onOpenChange={open => !open && setShowModal(false)}>
+                <AlertDialogContent>
+                  <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+                    <AlertDialogTitle
+                      title={t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
+                      className="w-full truncate title-2xl-semi-bold text-text-primary"
+                    >
+                      {t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
+                    </AlertDialogTitle>
+                  </div>
+                  <AlertDialogActions>
+                    <AlertDialogCancelButton>
+                      {t('operation.cancel', { ns: 'common' })}
+                    </AlertDialogCancelButton>
+                    <AlertDialogConfirmButton
+                      tone="destructive"
+                      onClick={() => {
+                        onRemove()
+                        setShowModal(false)
+                        onHide()
+                      }}
+                    >
+                      {t('operation.confirm', { ns: 'common' })}
+                    </AlertDialogConfirmButton>
+                  </AlertDialogActions>
+                </AlertDialogContent>
+              </AlertDialog>
             </div>
           </div>
         )}
diff --git a/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx b/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx
index f52e6c74c5..70e28b048c 100644
--- a/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx
+++ b/web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx
@@ -2,7 +2,14 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 
 type Props = {
   isShow: boolean
@@ -16,14 +23,26 @@ const RemoveAnnotationConfirmModal: FC<Props> = ({
   onRemove,
 }) => {
   const { t } = useTranslation()
+  const title = t('feature.annotation.removeConfirm', { ns: 'appDebug' })
 
   return (
-    <Confirm
-      isShow={isShow}
-      onCancel={onHide}
-      onConfirm={onRemove}
-      title={t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
-    />
+    <AlertDialog open={isShow} onOpenChange={open => !open && onHide()}>
+      <AlertDialogContent>
+        <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+          <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+            {title}
+          </AlertDialogTitle>
+        </div>
+        <AlertDialogActions>
+          <AlertDialogCancelButton>
+            {t('operation.cancel', { ns: 'common' })}
+          </AlertDialogCancelButton>
+          <AlertDialogConfirmButton tone="destructive" onClick={onRemove}>
+            {t('operation.confirm', { ns: 'common' })}
+          </AlertDialogConfirmButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 export default React.memo(RemoveAnnotationConfirmModal)
diff --git a/web/app/components/app/annotation/view-annotation-modal/__tests__/index.spec.tsx b/web/app/components/app/annotation/view-annotation-modal/__tests__/index.spec.tsx
index 4490772716..d05fa27ccd 100644
--- a/web/app/components/app/annotation/view-annotation-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/__tests__/index.spec.tsx
@@ -157,4 +157,17 @@ describe('ViewAnnotationModal', () => {
       expect(props.onHide).toHaveBeenCalledTimes(1)
     })
   })
+
+  it('should close the remove confirmation when cancelled', async () => {
+    renderComponent()
+
+    fireEvent.click(screen.getByText('appAnnotation.editModal.removeThisCache'))
+    expect(await screen.findByText('appDebug.feature.annotation.removeConfirm')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+    await waitFor(() => {
+      expect(screen.queryByText('appDebug.feature.annotation.removeConfirm')).not.toBeInTheDocument()
+    })
+  })
 })
diff --git a/web/app/components/app/annotation/view-annotation-modal/index.tsx b/web/app/components/app/annotation/view-annotation-modal/index.tsx
index 644ff808fd..d9ebe093f5 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -5,11 +5,18 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Confirm from '@/app/components/base/confirm'
 import Drawer from '@/app/components/base/drawer-plus'
 import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
 import Pagination from '@/app/components/base/pagination'
 import TabSlider from '@/app/components/base/tab-slider-plain'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { APP_PAGE_LIMIT } from '@/config'
 import useTimestamp from '@/hooks/use-timestamp'
 import { fetchHitHistoryList } from '@/service/annotation'
@@ -212,16 +219,33 @@ const ViewAnnotationModal: FC<Props> = ({
             <div className="space-y-6 p-6 pb-4">
               {activeTab === TabType.annotation ? annotationTab : hitHistoryTab}
             </div>
-            <Confirm
-              isShow={showModal}
-              onCancel={() => setShowModal(false)}
-              onConfirm={async () => {
-                await onRemove()
-                setShowModal(false)
-                onHide()
-              }}
-              title={t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
-            />
+            <AlertDialog open={showModal} onOpenChange={open => !open && setShowModal(false)}>
+              <AlertDialogContent>
+                <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+                  <AlertDialogTitle
+                    title={t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
+                    className="w-full truncate title-2xl-semi-bold text-text-primary"
+                  >
+                    {t('feature.annotation.removeConfirm', { ns: 'appDebug' })}
+                  </AlertDialogTitle>
+                </div>
+                <AlertDialogActions>
+                  <AlertDialogCancelButton>
+                    {t('operation.cancel', { ns: 'common' })}
+                  </AlertDialogCancelButton>
+                  <AlertDialogConfirmButton
+                    tone="destructive"
+                    onClick={async () => {
+                      await onRemove()
+                      setShowModal(false)
+                      onHide()
+                    }}
+                  >
+                    {t('operation.confirm', { ns: 'common' })}
+                  </AlertDialogConfirmButton>
+                </AlertDialogActions>
+              </AlertDialogContent>
+            </AlertDialog>
           </div>
         )}
         foot={id
diff --git a/web/app/components/app/app-publisher/__tests__/features-wrapper.spec.tsx b/web/app/components/app/app-publisher/__tests__/features-wrapper.spec.tsx
index 739b0002ee..e9e54d1106 100644
--- a/web/app/components/app/app-publisher/__tests__/features-wrapper.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/features-wrapper.spec.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable ts/no-explicit-any */
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import FeaturesWrappedAppPublisher from '../features-wrapper'
 
 const mockSetFeatures = vi.fn()
@@ -137,4 +137,23 @@ describe('FeaturesWrappedAppPublisher', () => {
       }))
     })
   })
+
+  it('should close restore confirmation without restoring when cancelled', async () => {
+    render(
+      <FeaturesWrappedAppPublisher
+        publishedConfig={publishedConfig as any}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('restore-through-wrapper'))
+    const dialog = screen.getByRole('alertdialog')
+
+    fireEvent.click(within(dialog).getByRole('button', { name: 'operation.cancel' }))
+
+    await waitFor(() => {
+      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+    })
+    expect(publishedConfig.modelConfig.resetAppConfig).not.toHaveBeenCalled()
+    expect(mockSetFeatures).not.toHaveBeenCalled()
+  })
 })
diff --git a/web/app/components/app/app-publisher/features-wrapper.tsx b/web/app/components/app/app-publisher/features-wrapper.tsx
index 381e9a553e..6a5c9582a7 100644
--- a/web/app/components/app/app-publisher/features-wrapper.tsx
+++ b/web/app/components/app/app-publisher/features-wrapper.tsx
@@ -6,9 +6,17 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppPublisher from '@/app/components/app/app-publisher'
-import Confirm from '@/app/components/base/confirm'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import { Resolution } from '@/types/app'
 
@@ -74,15 +82,24 @@ const FeaturesWrappedAppPublisher = (props: Props) => {
         onRestore: () => setRestoreConfirmOpen(true),
       }}
       />
-      {restoreConfirmOpen && (
-        <Confirm
-          title={t('resetConfig.title', { ns: 'appDebug' })}
-          content={t('resetConfig.message', { ns: 'appDebug' })}
-          isShow={restoreConfirmOpen}
-          onConfirm={handleConfirm}
-          onCancel={() => setRestoreConfirmOpen(false)}
-        />
-      )}
+      <AlertDialog open={restoreConfirmOpen} onOpenChange={open => !open && setRestoreConfirmOpen(false)}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('resetConfig.title', { ns: 'appDebug' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('resetConfig.message', { ns: 'appDebug' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={handleConfirm}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   )
 }
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index 17f5e2efe5..1c25d06f10 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -11,8 +11,16 @@ import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
 import { useContext } from 'use-context-selector'
-import Confirm from '@/app/components/base/confirm'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { InputVarType } from '@/app/components/workflow/types'
 import ConfigContext from '@/context/debug-configuration'
@@ -264,7 +272,7 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
     >
       {!hasVar && (
         <div className="mt-1 px-3 pb-3">
-          <div className="pb-1 pt-2 text-xs text-text-tertiary">{t('notSetVar', { ns: 'appDebug' })}</div>
+          <div className="pt-2 pb-1 text-xs text-text-tertiary">{t('notSetVar', { ns: 'appDebug' })}</div>
         </div>
       )}
       {hasVar && (
@@ -313,18 +321,29 @@ const ConfigVar: FC<IConfigVarProps> = ({ promptVariables, readonly, onPromptVar
         />
       )}
 
-      {isShowDeleteContextVarModal && (
-        <Confirm
-          isShow={isShowDeleteContextVarModal}
-          title={t('feature.dataSet.queryVariable.deleteContextVarTitle', { ns: 'appDebug', varName: promptVariables[removeIndex as number]?.name })}
-          content={t('feature.dataSet.queryVariable.deleteContextVarTip', { ns: 'appDebug' })}
-          onConfirm={() => {
-            didRemoveVar(removeIndex as number)
-            hideDeleteContextVarModal()
-          }}
-          onCancel={hideDeleteContextVarModal}
-        />
-      )}
+      <AlertDialog open={isShowDeleteContextVarModal} onOpenChange={open => !open && hideDeleteContextVarModal()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('feature.dataSet.queryVariable.deleteContextVarTitle', { ns: 'appDebug', varName: promptVariables[removeIndex as number]?.name })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('feature.dataSet.queryVariable.deleteContextVarTip', { ns: 'appDebug' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton
+              onClick={() => {
+                didRemoveVar(removeIndex as number)
+                hideDeleteContextVarModal()
+              }}
+            >
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
 
     </Panel>
   )
diff --git a/web/app/components/app/configuration/config/automatic/__tests__/get-automatic-res.spec.tsx b/web/app/components/app/configuration/config/automatic/__tests__/get-automatic-res.spec.tsx
index ab5ff97e58..154a7a5a14 100644
--- a/web/app/components/app/configuration/config/automatic/__tests__/get-automatic-res.spec.tsx
+++ b/web/app/components/app/configuration/config/automatic/__tests__/get-automatic-res.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { AppModeEnum } from '@/types/app'
 import GetAutomaticRes from '../get-automatic-res'
 
@@ -237,6 +237,42 @@ describe('GetAutomaticRes', () => {
     }))
   })
 
+  it('should close overwrite confirmation without applying the generated result when cancelled', async () => {
+    mockGenerateBasicAppFirstTimeRule.mockResolvedValue({
+      prompt: 'generated prompt',
+      variables: ['city'],
+      opening_statement: 'hello there',
+    })
+
+    render(
+      <GetAutomaticRes
+        mode={AppModeEnum.CHAT}
+        isShow
+        onClose={mockOnClose}
+        onFinished={mockOnFinished}
+        flowId="flow-1"
+        isBasicMode
+      />,
+    )
+
+    fireEvent.click(screen.getByText('set-basic-instruction'))
+    fireEvent.click(screen.getByText('generate.generate'))
+
+    await waitFor(() => {
+      expect(screen.getByTestId('result-panel')).toHaveTextContent('generated prompt')
+    })
+
+    fireEvent.click(screen.getByText('apply-result'))
+    const dialog = await screen.findByRole('alertdialog')
+
+    fireEvent.click(within(dialog).getByRole('button', { name: 'operation.cancel' }))
+
+    await waitFor(() => {
+      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+    })
+    expect(mockOnFinished).not.toHaveBeenCalled()
+  })
+
   it('should request workflow generation and surface service errors', async () => {
     mockGenerateRule.mockResolvedValue({
       error: 'generation failed',
diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index fcdee7db11..d9200af773 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -19,12 +19,19 @@ import { useBoolean, useSessionStorageState } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
-
 import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 
@@ -387,18 +394,29 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
         )}
         {isLoading && renderLoading}
         {isShowAutoPromptResPlaceholder() && <ResPlaceholder />}
-        {isShowConfirmOverwrite && (
-          <Confirm
-            title={t('generate.overwriteTitle', { ns: 'appDebug' })}
-            content={t('generate.overwriteMessage', { ns: 'appDebug' })}
-            isShow
-            onConfirm={() => {
-              hideShowConfirmOverwrite()
-              onFinished(current!)
-            }}
-            onCancel={hideShowConfirmOverwrite}
-          />
-        )}
+        <AlertDialog open={isShowConfirmOverwrite} onOpenChange={open => !open && hideShowConfirmOverwrite()}>
+          <AlertDialogContent>
+            <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+              <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                {t('generate.overwriteTitle', { ns: 'appDebug' })}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                {t('generate.overwriteMessage', { ns: 'appDebug' })}
+              </AlertDialogDescription>
+            </div>
+            <AlertDialogActions>
+              <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+              <AlertDialogConfirmButton
+                onClick={() => {
+                  hideShowConfirmOverwrite()
+                  onFinished(current!)
+                }}
+              >
+                {t('operation.confirm', { ns: 'common' })}
+              </AlertDialogConfirmButton>
+            </AlertDialogActions>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
     </Modal>
   )
diff --git a/web/app/components/app/configuration/config/code-generator/__tests__/get-code-generator-res.spec.tsx b/web/app/components/app/configuration/config/code-generator/__tests__/get-code-generator-res.spec.tsx
index 098f84b06e..25039bae96 100644
--- a/web/app/components/app/configuration/config/code-generator/__tests__/get-code-generator-res.spec.tsx
+++ b/web/app/components/app/configuration/config/code-generator/__tests__/get-code-generator-res.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { AppModeEnum } from '@/types/app'
 import GetCodeGeneratorResModal from '../get-code-generator-res'
@@ -223,6 +223,43 @@ describe('GetCodeGeneratorResModal', () => {
     }))
   })
 
+  it('should close overwrite confirmation without applying the generated code when cancelled', async () => {
+    mockGenerateRule.mockResolvedValue({
+      code: 'print("hello")',
+    })
+
+    render(
+      <GetCodeGeneratorResModal
+        flowId="flow-1"
+        nodeId="node-1"
+        currentCode="print(1)"
+        mode={AppModeEnum.CHAT}
+        isShow
+        codeLanguages={CodeLanguage.python3}
+        onClose={mockOnClose}
+        onFinished={mockOnFinished}
+      />,
+    )
+
+    fireEvent.click(screen.getByText('set-code-instruction'))
+    fireEvent.click(screen.getByText('set-code-output'))
+    fireEvent.click(screen.getByText('codegen.generate'))
+
+    await waitFor(() => {
+      expect(screen.getByTestId('code-result-panel')).toHaveTextContent('print("hello")')
+    })
+
+    fireEvent.click(screen.getByText('apply-code-result'))
+    const dialog = await screen.findByRole('alertdialog')
+
+    fireEvent.click(within(dialog).getByRole('button', { name: 'operation.cancel' }))
+
+    await waitFor(() => {
+      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+    })
+    expect(mockOnFinished).not.toHaveBeenCalled()
+  })
+
   it('should surface service errors without creating a result version', async () => {
     mockGenerateRule.mockResolvedValue({
       error: 'generation failed',
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index 666dab3425..eb1ee7e10c 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -10,10 +10,18 @@ import {
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -263,18 +271,29 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
         )}
       </div>
-      {isShowConfirmOverwrite && (
-        <Confirm
-          title={t('codegen.overwriteConfirmTitle', { ns: 'appDebug' })}
-          content={t('codegen.overwriteConfirmMessage', { ns: 'appDebug' })}
-          isShow
-          onConfirm={() => {
-            hideShowConfirmOverwrite()
-            onFinished(current!)
-          }}
-          onCancel={hideShowConfirmOverwrite}
-        />
-      )}
+      <AlertDialog open={isShowConfirmOverwrite} onOpenChange={open => !open && hideShowConfirmOverwrite()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('codegen.overwriteConfirmTitle', { ns: 'appDebug' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('codegen.overwriteConfirmMessage', { ns: 'appDebug' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton
+              onClick={() => {
+                hideShowConfirmOverwrite()
+                onFinished(current!)
+              }}
+            >
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </Modal>
   )
 }
diff --git a/web/app/components/app/configuration/configuration-view.tsx b/web/app/components/app/configuration/configuration-view.tsx
index 049ccf4171..35ab462ad1 100644
--- a/web/app/components/app/configuration/configuration-view.tsx
+++ b/web/app/components/app/configuration/configuration-view.tsx
@@ -153,28 +153,26 @@ const ConfigurationView: FC<ConfigurationViewModel> = ({
             </div>
           </div>
 
-          {showUseGPT4Confirm && (
-            <AlertDialog open={showUseGPT4Confirm} onOpenChange={open => !open && setShowUseGPT4Confirm(false)}>
-              <AlertDialogContent>
-                <div className="flex flex-col items-start gap-2 self-stretch px-6 pt-6 pb-4">
-                  <AlertDialogTitle className="w-full title-2xl-semi-bold text-text-primary">
-                    {t('trailUseGPT4Info.title', { ns: 'appDebug' })}
-                  </AlertDialogTitle>
-                  <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
-                    {t('trailUseGPT4Info.description', { ns: 'appDebug' })}
-                  </AlertDialogDescription>
-                </div>
-                <AlertDialogActions>
-                  <AlertDialogCancelButton tone="default">
-                    {t('operation.cancel', { ns: 'common' })}
-                  </AlertDialogCancelButton>
-                  <AlertDialogConfirmButton variant="primary" tone="default" onClick={onConfirmUseGPT4}>
-                    {t('operation.confirm', { ns: 'common' })}
-                  </AlertDialogConfirmButton>
-                </AlertDialogActions>
-              </AlertDialogContent>
-            </AlertDialog>
-          )}
+          <AlertDialog open={showUseGPT4Confirm} onOpenChange={open => !open && setShowUseGPT4Confirm(false)}>
+            <AlertDialogContent>
+              <div className="flex flex-col items-start gap-2 self-stretch px-6 pt-6 pb-4">
+                <AlertDialogTitle className="w-full title-2xl-semi-bold text-text-primary">
+                  {t('trailUseGPT4Info.title', { ns: 'appDebug' })}
+                </AlertDialogTitle>
+                <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                  {t('trailUseGPT4Info.description', { ns: 'appDebug' })}
+                </AlertDialogDescription>
+              </div>
+              <AlertDialogActions>
+                <AlertDialogCancelButton tone="default">
+                  {t('operation.cancel', { ns: 'common' })}
+                </AlertDialogCancelButton>
+                <AlertDialogConfirmButton variant="primary" tone="default" onClick={onConfirmUseGPT4}>
+                  {t('operation.confirm', { ns: 'common' })}
+                </AlertDialogConfirmButton>
+              </AlertDialogActions>
+            </AlertDialogContent>
+          </AlertDialog>
 
           {isShowSelectDataSet && (
             <SelectDataSet
diff --git a/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx b/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx
index 9a818e0fd7..9820e15ad8 100644
--- a/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx
+++ b/web/app/components/app/overview/__tests__/app-card-sections.spec.tsx
@@ -1,8 +1,8 @@
 import type { AppDetailResponse } from '@/models/app'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
 import { AccessMode } from '@/models/access-control'
 import { AppModeEnum } from '@/types/app'
-import { AppCardAccessControlSection, AppCardOperations, createAppCardOperations } from '../app-card-sections'
+import { AppCardAccessControlSection, AppCardOperations, AppCardUrlSection, createAppCardOperations } from '../app-card-sections'
 
 describe('app-card-sections', () => {
   const t = (key: string) => key
@@ -100,4 +100,31 @@ describe('app-card-sections', () => {
     expect(screen.getByText('overview.appInfo.customize.entry')).toBeInTheDocument()
     expect(AppModeEnum.CHAT).toBe('chat')
   })
+
+  it('should invoke regenerate dialog callbacks from the url section', () => {
+    const onRegenerate = vi.fn()
+    const onHideRegenerateConfirm = vi.fn()
+
+    render(
+      <AppCardUrlSection
+        t={t as never}
+        isApp
+        accessibleUrl="https://example.com/apps/demo"
+        showConfirmDelete
+        isCurrentWorkspaceManager
+        genLoading={false}
+        onRegenerate={onRegenerate}
+        onShowRegenerateConfirm={vi.fn()}
+        onHideRegenerateConfirm={onHideRegenerateConfirm}
+      />,
+    )
+
+    const dialog = screen.getByRole('alertdialog')
+
+    fireEvent.click(within(dialog).getByRole('button', { name: /operation\.cancel/i }))
+    expect(onHideRegenerateConfirm).toHaveBeenCalled()
+
+    fireEvent.click(within(dialog).getByRole('button', { name: /operation\.confirm/i }))
+    expect(onRegenerate).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/web/app/components/app/overview/app-card-sections.tsx b/web/app/components/app/overview/app-card-sections.tsx
index 659335227c..93067d02b7 100644
--- a/web/app/components/app/overview/app-card-sections.tsx
+++ b/web/app/components/app/overview/app-card-sections.tsx
@@ -180,28 +180,26 @@ export const AppCardUrlSection = ({
       <CopyFeedback content={accessibleUrl} className="size-6!" />
       {isApp && <ShareQRCode content={accessibleUrl} />}
       {isApp && <Divider type="vertical" className="mx-0.5! h-3.5! shrink-0" />}
-      {showConfirmDelete && (
-        <AlertDialog open={showConfirmDelete} onOpenChange={open => !open && onHideRegenerateConfirm()}>
-          <AlertDialogContent>
-            <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
-              <AlertDialogTitle className="w-full title-2xl-semi-bold text-text-primary">
-                {t('overview.appInfo.regenerate', { ns: 'appOverview' })}
-              </AlertDialogTitle>
-              <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
-                {t('overview.appInfo.regenerateNotice', { ns: 'appOverview' })}
-              </AlertDialogDescription>
-            </div>
-            <AlertDialogActions>
-              <AlertDialogCancelButton onClick={onHideRegenerateConfirm}>
-                {t('operation.cancel', { ns: 'common' })}
-              </AlertDialogCancelButton>
-              <AlertDialogConfirmButton onClick={onRegenerate}>
-                {t('operation.confirm', { ns: 'common' })}
-              </AlertDialogConfirmButton>
-            </AlertDialogActions>
-          </AlertDialogContent>
-        </AlertDialog>
-      )}
+      <AlertDialog open={showConfirmDelete} onOpenChange={open => !open && onHideRegenerateConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
+            <AlertDialogTitle className="w-full title-2xl-semi-bold text-text-primary">
+              {t('overview.appInfo.regenerate', { ns: 'appOverview' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('overview.appInfo.regenerateNotice', { ns: 'appOverview' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton onClick={onHideRegenerateConfirm}>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={onRegenerate}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
       {isApp && isCurrentWorkspaceManager && (
         <MaybeTooltip content={t('overview.appInfo.regenerate', { ns: 'appOverview' }) || ''}>
           <div
diff --git a/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx b/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx
index ccc21686ae..1db8f00a9b 100644
--- a/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx
+++ b/web/app/components/app/switch-app-modal/__tests__/index.spec.tsx
@@ -335,6 +335,7 @@ describe('SwitchAppModal', () => {
       await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
 
       expect(screen.queryByRole('button', { name: 'common.operation.confirm' })).not.toBeInTheDocument()
+      expect(screen.getByRole('checkbox')).not.toBeChecked()
     })
 
     it('should toggle remove-original from the checkbox control itself', async () => {
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index 16016b8096..aa7f1974ec 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -8,11 +8,19 @@ import { useTranslation } from 'react-i18next'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import AppIcon from '@/app/components/base/app-icon'
 import Checkbox from '@/app/components/base/checkbox'
-import Confirm from '@/app/components/base/confirm'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@@ -91,6 +99,14 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
       setShowConfirmDelete(true)
   }, [removeOriginal])
 
+  const handleConfirmDeleteOpenChange = (open: boolean) => {
+    if (open)
+      return
+
+    setShowConfirmDelete(false)
+    setRemoveOriginal(false)
+  }
+
   return (
     <>
       <Modal
@@ -156,18 +172,29 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
           </div>
         </div>
       </Modal>
-      {showConfirmDelete && (
-        <Confirm
-          title={t('deleteAppConfirmTitle', { ns: 'app' })}
-          content={t('deleteAppConfirmContent', { ns: 'app' })}
-          isShow={showConfirmDelete}
-          onConfirm={() => setShowConfirmDelete(false)}
-          onCancel={() => {
-            setShowConfirmDelete(false)
-            setRemoveOriginal(false)
-          }}
-        />
-      )}
+      <AlertDialog
+        open={showConfirmDelete}
+        onOpenChange={handleConfirmDeleteOpenChange}
+      >
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('deleteAppConfirmTitle', { ns: 'app' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('deleteAppConfirmContent', { ns: 'app' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={() => setShowConfirmDelete(false)}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   )
 }
diff --git a/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx b/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
index 4f6792fa1b..d101a41449 100644
--- a/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
+++ b/web/app/components/base/chat/chat-with-history/header-in-mobile.tsx
@@ -5,7 +5,15 @@ import ActionButton from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
 import InputsFormContent from '@/app/components/base/chat/chat-with-history/inputs-form/content'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
-import Confirm from '@/app/components/base/confirm'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { useChatWithHistoryContext } from './context'
 import MobileOperationDropdown from './header/mobile-operation-dropdown'
 import Operation from './header/operation'
@@ -78,7 +86,7 @@ const HeaderInMobile = () => {
                 imageUrl={appData?.site.icon_url}
                 background={appData?.site.icon_background}
               />
-              <div className="truncate text-text-secondary system-md-semibold">
+              <div className="truncate system-md-semibold text-text-secondary">
                 {appData?.site.title}
               </div>
             </>
@@ -121,7 +129,7 @@ const HeaderInMobile = () => {
           <div className="flex h-full w-[calc(100vw-40px)] flex-col rounded-xl bg-components-panel-bg shadow-lg backdrop-blur-xs" onClick={e => e.stopPropagation()}>
             <div className="flex items-center gap-3 rounded-t-2xl border-b border-divider-subtle px-4 py-3">
               <div className="i-custom-public-other-message-3-fill h-6 w-6 shrink-0" />
-              <div className="grow text-text-secondary system-xl-semibold">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
+              <div className="grow system-xl-semibold text-text-secondary">{t('chat.chatSettingsTitle', { ns: 'share' })}</div>
             </div>
             <div className="p-4">
               <InputsFormContent />
@@ -129,15 +137,24 @@ const HeaderInMobile = () => {
           </div>
         </div>
       )}
-      {!!showConfirm && (
-        <Confirm
-          title={t('chat.deleteConversation.title', { ns: 'share' })}
-          content={t('chat.deleteConversation.content', { ns: 'share' }) || ''}
-          isShow
-          onCancel={handleCancelConfirm}
-          onConfirm={handleDelete}
-        />
-      )}
+      <AlertDialog open={!!showConfirm} onOpenChange={open => !open && handleCancelConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('chat.deleteConversation.title', { ns: 'share' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('chat.deleteConversation.content', { ns: 'share' }) || ''}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={handleDelete}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
       {showRename && (
         <RenameModal
           isShow
diff --git a/web/app/components/base/chat/chat-with-history/header/index.tsx b/web/app/components/base/chat/chat-with-history/header/index.tsx
index e0df134251..3b8ef471c8 100644
--- a/web/app/components/base/chat/chat-with-history/header/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/index.tsx
@@ -10,8 +10,16 @@ import ActionButton, { ActionButtonState } from '@/app/components/base/action-bu
 import AppIcon from '@/app/components/base/app-icon'
 import ViewFormDropdown from '@/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
-import Confirm from '@/app/components/base/confirm'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { cn } from '@/utils/classnames'
 import {
   useChatWithHistoryContext,
@@ -89,7 +97,7 @@ const Header = () => {
             />
           </div>
           {!currentConversationId && (
-            <div className={cn('grow truncate text-text-secondary system-md-semibold')}>{appData?.site.title}</div>
+            <div className={cn('grow truncate system-md-semibold text-text-secondary')}>{appData?.site.title}</div>
           )}
           {currentConversationId && currentConversationItem && isSidebarCollapsed && (
             <>
@@ -141,15 +149,24 @@ const Header = () => {
           )}
         </div>
       </div>
-      {!!showConfirm && (
-        <Confirm
-          title={t('chat.deleteConversation.title', { ns: 'share' })}
-          content={t('chat.deleteConversation.content', { ns: 'share' }) || ''}
-          isShow
-          onCancel={handleCancelConfirm}
-          onConfirm={handleDelete}
-        />
-      )}
+      <AlertDialog open={!!showConfirm} onOpenChange={open => !open && handleCancelConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('chat.deleteConversation.title', { ns: 'share' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('chat.deleteConversation.content', { ns: 'share' }) || ''}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={handleDelete}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
       {showRename && (
         <RenameModal
           isShow
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
index bb62869f21..948700c2ce 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
@@ -106,22 +106,6 @@ vi.mock('@/app/components/base/modal', () => ({
   },
 }))
 
-// Mock Confirm
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({ onCancel, onConfirm, title, content, isShow }: { onCancel: () => void, onConfirm: () => void, title: string, content?: React.ReactNode, isShow: boolean }) => {
-    if (!isShow)
-      return null
-    return (
-      <div data-testid="confirm-dialog">
-        <div data-testid="confirm-title">{title}</div>
-        <button data-testid="confirm-cancel" onClick={onCancel}>Cancel</button>
-        <div data-testid="confirm-content">{content}</div>
-        <button data-testid="confirm-confirm" onClick={onConfirm}>Confirm</button>
-      </div>
-    )
-  },
-}))
-
 describe('Sidebar Index', () => {
   const mockContextValue = {
     isInstalledApp: false,
@@ -475,8 +459,7 @@ describe('Sidebar Index', () => {
       render(<Sidebar />)
 
       await user.click(screen.getByTestId('delete-1'))
-      expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
-      expect(screen.getByTestId('confirm-title')).toBeInTheDocument()
+      expect(screen.getByText('share.chat.deleteConversation.title')).toBeInTheDocument()
     })
 
     it('should call handleDeleteConversation when confirm is clicked', async () => {
@@ -490,7 +473,7 @@ describe('Sidebar Index', () => {
       render(<Sidebar />)
 
       await user.click(screen.getByTestId('delete-1'))
-      await user.click(screen.getByTestId('confirm-confirm'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
 
       expect(handleDeleteConversation).toHaveBeenCalledWith('1', expect.objectContaining({
         onSuccess: expect.any(Function),
@@ -502,11 +485,11 @@ describe('Sidebar Index', () => {
       render(<Sidebar />)
 
       await user.click(screen.getByTestId('delete-1'))
-      expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      expect(screen.getByText('share.chat.deleteConversation.title')).toBeInTheDocument()
 
-      await user.click(screen.getByTestId('confirm-cancel'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
       await waitFor(() => {
-        expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
+        expect(screen.queryByText('share.chat.deleteConversation.title')).not.toBeInTheDocument()
       })
     })
 
@@ -525,7 +508,7 @@ describe('Sidebar Index', () => {
       render(<Sidebar />)
 
       await user.click(screen.getByTestId('delete-1'))
-      await user.click(screen.getByTestId('confirm-confirm'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
 
       expect(handleDeleteConversation).toHaveBeenCalledWith('1', expect.any(Object))
     })
@@ -837,7 +820,7 @@ describe('Sidebar Index', () => {
 
       // Delete it
       await user.click(screen.getByTestId('delete-1'))
-      await user.click(screen.getByTestId('confirm-confirm'))
+      await user.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
       expect(handleDeleteConversation).toHaveBeenCalled()
     })
 
@@ -901,8 +884,8 @@ describe('Sidebar Index', () => {
       try {
         render(<Sidebar />)
         await user.click(screen.getByTestId('delete-1'))
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
-        expect(screen.getByTestId('confirm-content')).toBeEmptyDOMElement()
+        expect(screen.getByText('share.chat.deleteConversation.title')).toBeInTheDocument()
+        expect(screen.queryByText('share.chat.deleteConversation.content')).not.toBeInTheDocument()
       }
       finally {
         useTranslationSpy.mockRestore()
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index 7759b98847..919ddba551 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -13,9 +13,17 @@ import ActionButton from '@/app/components/base/action-button'
 import AppIcon from '@/app/components/base/app-icon'
 import List from '@/app/components/base/chat/chat-with-history/sidebar/list'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
-import Confirm from '@/app/components/base/confirm'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { cn } from '@/utils/classnames'
@@ -167,15 +175,24 @@ const Sidebar = ({ isPanel, panelVisible }: Props) => {
             </div>
           )}
         </div>
-        {!!showConfirm && (
-          <Confirm
-            title={t('chat.deleteConversation.title', { ns: 'share' })}
-            content={deleteConversationContent}
-            isShow
-            onCancel={handleCancelConfirm}
-            onConfirm={handleDelete}
-          />
-        )}
+        <AlertDialog open={!!showConfirm} onOpenChange={open => !open && handleCancelConfirm()}>
+          <AlertDialogContent>
+            <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+              <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                {t('chat.deleteConversation.title', { ns: 'share' })}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                {deleteConversationContent}
+              </AlertDialogDescription>
+            </div>
+            <AlertDialogActions>
+              <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+              <AlertDialogConfirmButton onClick={handleDelete}>
+                {t('operation.confirm', { ns: 'common' })}
+              </AlertDialogConfirmButton>
+            </AlertDialogActions>
+          </AlertDialogContent>
+        </AlertDialog>
         {showRename && (
           <RenameModal
             isShow
diff --git a/web/app/components/base/confirm/__tests__/index.spec.tsx b/web/app/components/base/confirm/__tests__/index.spec.tsx
deleted file mode 100644
index 29be2d617e..0000000000
--- a/web/app/components/base/confirm/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react'
-import Confirm from '..'
-
-vi.mock('react-dom', async () => {
-  const actual = await vi.importActual<typeof import('react-dom')>('react-dom')
-
-  return {
-    ...actual,
-    createPortal: (children: React.ReactNode) => children,
-  }
-})
-
-const onCancel = vi.fn()
-const onConfirm = vi.fn()
-
-describe('Confirm Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('renders confirm correctly', () => {
-      render(<Confirm isShow={true} title="test title" onCancel={onCancel} onConfirm={onConfirm} />)
-      expect(screen.getByText('test title')).toBeInTheDocument()
-    })
-
-    it('does not render on isShow false', () => {
-      const { container } = render(<Confirm isShow={false} title="test title" onCancel={onCancel} onConfirm={onConfirm} />)
-      expect(container.firstChild).toBeNull()
-    })
-
-    it('hides after delay when isShow changes to false', () => {
-      vi.useFakeTimers()
-      const { rerender } = render(<Confirm isShow={true} title="test title" onCancel={onCancel} onConfirm={onConfirm} />)
-      expect(screen.getByText('test title')).toBeInTheDocument()
-
-      rerender(<Confirm isShow={false} title="test title" onCancel={onCancel} onConfirm={onConfirm} />)
-      act(() => {
-        vi.advanceTimersByTime(200)
-      })
-      expect(screen.queryByText('test title')).not.toBeInTheDocument()
-      vi.useRealTimers()
-    })
-
-    it('renders content when provided', () => {
-      render(<Confirm isShow={true} title="title" content="some description" onCancel={onCancel} onConfirm={onConfirm} />)
-      expect(screen.getByText('some description')).toBeInTheDocument()
-    })
-  })
-
-  describe('Props', () => {
-    it('showCancel prop works', () => {
-      render(<Confirm isShow={true} title="test title" onCancel={onCancel} onConfirm={onConfirm} showCancel={false} />)
-      expect(screen.getByRole('button', { name: 'common.operation.confirm' })).toBeInTheDocument()
-      expect(screen.queryByRole('button', { name: 'common.operation.cancel' })).not.toBeInTheDocument()
-    })
-
-    it('showConfirm prop works', () => {
-      render(<Confirm isShow={true} title="test title" onCancel={onCancel} onConfirm={onConfirm} showConfirm={false} />)
-      expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
-      expect(screen.queryByRole('button', { name: 'common.operation.confirm' })).not.toBeInTheDocument()
-    })
-
-    it('renders custom confirm and cancel text', () => {
-      render(<Confirm isShow={true} title="title" confirmText="Yes" cancelText="No" onCancel={onCancel} onConfirm={onConfirm} />)
-      expect(screen.getByRole('button', { name: 'Yes' })).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'No' })).toBeInTheDocument()
-    })
-
-    it('disables confirm button when isDisabled is true', () => {
-      render(<Confirm isShow={true} title="title" isDisabled={true} onCancel={onCancel} onConfirm={onConfirm} />)
-      expect(screen.getByRole('button', { name: 'common.operation.confirm' })).toBeDisabled()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('clickAway is handled properly', () => {
-      render(<Confirm isShow={true} title="test title" onCancel={onCancel} onConfirm={onConfirm} />)
-      const overlay = screen.getByTestId('confirm-overlay') as HTMLElement
-      expect(overlay).toBeTruthy()
-      fireEvent.mouseDown(overlay)
-      expect(onCancel).toHaveBeenCalledTimes(1)
-    })
-
-    it('overlay click stops propagation', () => {
-      render(<Confirm isShow={true} title="test title" onCancel={onCancel} onConfirm={onConfirm} />)
-      const overlay = screen.getByTestId('confirm-overlay') as HTMLElement
-      const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true })
-      const preventDefaultSpy = vi.spyOn(clickEvent, 'preventDefault')
-      const stopPropagationSpy = vi.spyOn(clickEvent, 'stopPropagation')
-      overlay.dispatchEvent(clickEvent)
-      expect(preventDefaultSpy).toHaveBeenCalled()
-      expect(stopPropagationSpy).toHaveBeenCalled()
-    })
-
-    it('does not close on click away when maskClosable is false', () => {
-      render(<Confirm isShow={true} title="test title" maskClosable={false} onCancel={onCancel} onConfirm={onConfirm} />)
-      const overlay = screen.getByTestId('confirm-overlay') as HTMLElement
-      fireEvent.mouseDown(overlay)
-      expect(onCancel).not.toHaveBeenCalled()
-    })
-
-    it('escape keyboard event works', () => {
-      render(<Confirm isShow={true} title="test title" onCancel={onCancel} onConfirm={onConfirm} />)
-      fireEvent.keyDown(document, { key: 'Escape' })
-      expect(onCancel).toHaveBeenCalledTimes(1)
-      expect(onConfirm).not.toHaveBeenCalled()
-    })
-
-    it('Enter keyboard event works', () => {
-      render(<Confirm isShow={true} title="test title" onCancel={onCancel} onConfirm={onConfirm} />)
-      fireEvent.keyDown(document, { key: 'Enter' })
-      expect(onConfirm).toHaveBeenCalledTimes(1)
-      expect(onCancel).not.toHaveBeenCalled()
-    })
-  })
-})
diff --git a/web/app/components/base/confirm/index.stories.tsx b/web/app/components/base/confirm/index.stories.tsx
deleted file mode 100644
index 9f2998eb55..0000000000
--- a/web/app/components/base/confirm/index.stories.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useState } from 'react'
-import { Button } from '@/app/components/base/ui/button'
-import Confirm from '.'
-
-const meta = {
-  title: 'Base/Feedback/Confirm',
-  component: Confirm,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Confirmation dialog component that supports warning and info types, with customizable button text and behavior.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['info', 'warning'],
-      description: 'Dialog type',
-    },
-    isShow: {
-      control: 'boolean',
-      description: 'Whether to show the dialog',
-    },
-    title: {
-      control: 'text',
-      description: 'Dialog title',
-    },
-    content: {
-      control: 'text',
-      description: 'Dialog content',
-    },
-    confirmText: {
-      control: 'text',
-      description: 'Confirm button text',
-    },
-    cancelText: {
-      control: 'text',
-      description: 'Cancel button text',
-    },
-    isLoading: {
-      control: 'boolean',
-      description: 'Confirm button loading state',
-    },
-    isDisabled: {
-      control: 'boolean',
-      description: 'Confirm button disabled state',
-    },
-    showConfirm: {
-      control: 'boolean',
-      description: 'Whether to show confirm button',
-    },
-    showCancel: {
-      control: 'boolean',
-      description: 'Whether to show cancel button',
-    },
-    maskClosable: {
-      control: 'boolean',
-      description: 'Whether clicking mask closes dialog',
-    },
-  },
-  args: {
-    onConfirm: () => {
-      console.log('✅ User clicked confirm')
-    },
-    onCancel: () => {
-      console.log('❌ User clicked cancel')
-    },
-  },
-} satisfies Meta<typeof Confirm>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-// Interactive demo wrapper
-const ConfirmDemo = (args: any) => {
-  const [isShow, setIsShow] = useState(false)
-
-  return (
-    <div>
-      <Button variant="primary" onClick={() => setIsShow(true)}>
-        Open Dialog
-      </Button>
-      <Confirm
-        {...args}
-        isShow={isShow}
-        onConfirm={() => {
-          console.log('✅ User clicked confirm')
-          setIsShow(false)
-        }}
-        onCancel={() => {
-          console.log('❌ User clicked cancel')
-          setIsShow(false)
-        }}
-      />
-    </div>
-  )
-}
-
-// Basic warning dialog - Delete action
-export const WarningDialog: Story = {
-  render: args => <ConfirmDemo {...args} />,
-  args: {
-    type: 'warning',
-    title: 'Delete Confirmation',
-    content: 'Are you sure you want to delete this project? This action cannot be undone.',
-    isShow: false,
-  },
-}
-
-// Info dialog
-export const InfoDialog: Story = {
-  render: args => <ConfirmDemo {...args} />,
-  args: {
-    type: 'info',
-    title: 'Notice',
-    content: 'Your changes have been saved. Do you want to proceed to the next step?',
-    isShow: false,
-  },
-}
-
-// Custom button text
-export const CustomButtonText: Story = {
-  render: args => <ConfirmDemo {...args} />,
-  args: {
-    type: 'warning',
-    title: 'Exit Editor',
-    content: 'You have unsaved changes. Are you sure you want to exit?',
-    confirmText: 'Discard Changes',
-    cancelText: 'Continue Editing',
-    isShow: false,
-  },
-}
-
-// Loading state
-export const LoadingState: Story = {
-  render: args => <ConfirmDemo {...args} />,
-  args: {
-    type: 'warning',
-    title: 'Deleting...',
-    content: 'Please wait while we delete the file...',
-    isLoading: true,
-    isShow: false,
-  },
-}
-
-// Disabled state
-export const DisabledState: Story = {
-  render: args => <ConfirmDemo {...args} />,
-  args: {
-    type: 'info',
-    title: 'Verification Required',
-    content: 'Please complete email verification before proceeding.',
-    isDisabled: true,
-    isShow: false,
-  },
-}
-
-// Alert style - Confirm button only
-export const AlertStyle: Story = {
-  render: args => <ConfirmDemo {...args} />,
-  args: {
-    type: 'info',
-    title: 'Success',
-    content: 'Your settings have been updated!',
-    showCancel: false,
-    confirmText: 'Got it',
-    isShow: false,
-  },
-}
-
-// Dangerous action - Long content
-export const DangerousAction: Story = {
-  render: args => <ConfirmDemo {...args} />,
-  args: {
-    type: 'warning',
-    title: 'Permanently Delete Account',
-    content: 'This action will permanently delete your account and all associated data, including: all projects and files, collaboration history, and personal settings. This action cannot be reversed!',
-    confirmText: 'Delete My Account',
-    cancelText: 'Keep My Account',
-    isShow: false,
-  },
-}
-
-// Non-closable mask
-export const NotMaskClosable: Story = {
-  render: args => <ConfirmDemo {...args} />,
-  args: {
-    type: 'warning',
-    title: 'Important Action',
-    content: 'This action requires your explicit choice. Clicking outside will not close this dialog.',
-    maskClosable: false,
-    isShow: false,
-  },
-}
-
-// Full feature demo - Playground
-export const Playground: Story = {
-  render: args => <ConfirmDemo {...args} />,
-  args: {
-    type: 'warning',
-    title: 'This is a title',
-    content: 'This is the dialog content text...',
-    confirmText: undefined,
-    cancelText: undefined,
-    isLoading: false,
-    isDisabled: false,
-    showConfirm: true,
-    showCancel: true,
-    maskClosable: true,
-    isShow: false,
-  },
-}
diff --git a/web/app/components/base/confirm/index.tsx b/web/app/components/base/confirm/index.tsx
deleted file mode 100644
index f23df5cc42..0000000000
--- a/web/app/components/base/confirm/index.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * @deprecated Use `@/app/components/base/ui/alert-dialog` instead.
- * See issue #32767 for migration details.
- */
-
-import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/app/components/base/ui/button'
-import Tooltip from '../tooltip'
-
-/** @deprecated Use `@/app/components/base/ui/alert-dialog` instead. */
-export type IConfirm = {
-  className?: string
-  isShow: boolean
-  type?: 'info' | 'warning' | 'danger'
-  title: string
-  content?: React.ReactNode
-  confirmText?: string | null
-  onConfirm: () => void
-  cancelText?: string
-  onCancel: () => void
-  isLoading?: boolean
-  isDisabled?: boolean
-  showConfirm?: boolean
-  showCancel?: boolean
-  maskClosable?: boolean
-  confirmInputLabel?: string
-  confirmInputPlaceholder?: string
-  confirmInputValue?: string
-  onConfirmInputChange?: (value: string) => void
-  confirmInputMatchValue?: string
-}
-
-function Confirm({
-  isShow,
-  type = 'warning',
-  title,
-  content,
-  confirmText,
-  cancelText,
-  onConfirm,
-  onCancel,
-  showConfirm = true,
-  showCancel = true,
-  isLoading = false,
-  isDisabled = false,
-  maskClosable = true,
-  confirmInputLabel,
-  confirmInputPlaceholder,
-  confirmInputValue = '',
-  onConfirmInputChange,
-  confirmInputMatchValue,
-}: IConfirm) {
-  const { t } = useTranslation()
-  const dialogRef = useRef<HTMLDivElement>(null)
-  const titleRef = useRef<HTMLDivElement>(null)
-  const [isVisible, setIsVisible] = useState(isShow)
-  const [isTitleTruncated, setIsTitleTruncated] = useState(false)
-
-  const confirmTxt = confirmText || `${t('operation.confirm', { ns: 'common' })}`
-  const cancelTxt = cancelText || `${t('operation.cancel', { ns: 'common' })}`
-  const isConfirmDisabled = isDisabled || (confirmInputMatchValue ? confirmInputValue !== confirmInputMatchValue : false)
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape')
-        onCancel()
-      if (event.key === 'Enter' && isShow && !isConfirmDisabled) {
-        event.preventDefault()
-        onConfirm()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [onCancel, onConfirm, isShow, isConfirmDisabled])
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (maskClosable && dialogRef.current && !dialogRef.current.contains(event.target as Node))
-      onCancel()
-  }
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [maskClosable])
-
-  useEffect(() => {
-    if (isShow) {
-      setIsVisible(true)
-    }
-    else {
-      const timer = setTimeout(() => setIsVisible(false), 200)
-      return () => clearTimeout(timer)
-    }
-  }, [isShow])
-
-  useEffect(() => {
-    if (titleRef.current) {
-      const isOverflowing = titleRef.current.scrollWidth > titleRef.current.clientWidth
-      setIsTitleTruncated(isOverflowing)
-    }
-  }, [title, isVisible])
-
-  if (!isVisible)
-    return null
-
-  return createPortal(
-    <div
-      className="fixed inset-0 z-10000000 flex items-center justify-center bg-background-overlay"
-      onClick={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-      }}
-      data-testid="confirm-overlay"
-    >
-      <div ref={dialogRef} className="relative w-full max-w-[480px] overflow-hidden">
-        <div className="shadows-shadow-lg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid border-components-panel-border bg-components-panel-bg">
-          <div className="flex flex-col items-start gap-2 self-stretch pt-6 pr-6 pb-4 pl-6">
-            <Tooltip
-              popupContent={title}
-              disabled={!isTitleTruncated}
-              portalContentClassName="z-10000001!"
-              asChild={false}
-              triggerClassName="w-full"
-            >
-              <div ref={titleRef} className="w-full truncate title-2xl-semi-bold text-text-primary">
-                {title}
-              </div>
-            </Tooltip>
-            <div className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">{content}</div>
-            {confirmInputLabel && (
-              <div className="mt-2">
-                <label className="mb-1 block system-sm-regular text-text-secondary">
-                  {confirmInputLabel}
-                </label>
-                <input
-                  type="text"
-                  className="border-components-input-border bg-components-input-bg focus:border-components-input-border-focus focus:ring-components-input-border-focus h-9 w-full rounded-lg border px-3 text-sm text-text-primary placeholder:text-text-quaternary focus:ring-1 focus:outline-hidden"
-                  placeholder={confirmInputPlaceholder}
-                  value={confirmInputValue}
-                  onChange={e => onConfirmInputChange?.(e.target.value)}
-                />
-              </div>
-            )}
-          </div>
-          <div className="flex items-start justify-end gap-2 self-stretch p-6">
-            {showCancel && <Button onClick={onCancel}>{cancelTxt}</Button>}
-            {showConfirm && <Button variant="primary" tone={type !== 'info' ? 'destructive' : 'default'} loading={isLoading} disabled={isConfirmDisabled} onClick={onConfirm}>{confirmTxt}</Button>}
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body,
-  )
-}
-
-export default React.memo(Confirm)
diff --git a/web/app/components/base/tag-management/tag-item-editor.tsx b/web/app/components/base/tag-management/tag-item-editor.tsx
index 2de769e375..c7baedf6c9 100644
--- a/web/app/components/base/tag-management/tag-item-editor.tsx
+++ b/web/app/components/base/tag-management/tag-item-editor.tsx
@@ -3,8 +3,16 @@ import type { Tag } from '@/app/components/base/tag-management/constant'
 import { useDebounceFn } from 'ahooks'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { deleteTag, updateTag } from '@/service/tag'
 import { cn } from '@/utils/classnames'
@@ -118,16 +126,34 @@ const TagItemEditor: FC<TagItemEditorProps> = ({ tag }) => {
         )}
         {isEditing && (<input className="shrink-0 appearance-none caret-primary-600 outline-none placeholder:text-text-quaternary" autoFocus value={name} onChange={e => setName(e.target.value)} onKeyDown={e => e.key === 'Enter' && editTag(tag.id, name)} onBlur={() => editTag(tag.id, name)} />)}
       </div>
-      <Confirm
-        title={`${t('tag.delete', { ns: 'common' })} "${tag.name}"`}
-        isShow={showRemoveModal}
-        content={t('tag.deleteTip', { ns: 'common' })}
-        onConfirm={() => {
-          handleRemove()
-          setShowRemoveModal(false)
-        }}
-        onCancel={() => setShowRemoveModal(false)}
-      />
+      <AlertDialog open={showRemoveModal} onOpenChange={open => !open && setShowRemoveModal(false)}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle
+              title={`${t('tag.delete', { ns: 'common' })} "${tag.name}"`}
+              className="w-full truncate title-2xl-semi-bold text-text-primary"
+            >
+              {`${t('tag.delete', { ns: 'common' })} "${tag.name}"`}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('tag.deleteTip', { ns: 'common' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton
+              onClick={() => {
+                handleRemove()
+                setShowRemoveModal(false)
+              }}
+            >
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   )
 }
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
index 4ce4ecdb87..43c2023437 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/__tests__/index.spec.tsx
@@ -37,33 +37,6 @@ vi.mock('@/utils/download', () => ({
   downloadUrl: vi.fn(),
 }))
 
-// Capture Confirm callbacks
-let _capturedOnConfirm: (() => void) | undefined
-let _capturedOnCancel: (() => void) | undefined
-
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({ isShow, onConfirm, onCancel, title, content }: {
-    isShow: boolean
-    onConfirm: () => void
-    onCancel: () => void
-    title: string
-    content: string
-  }) => {
-    _capturedOnConfirm = onConfirm
-    _capturedOnCancel = onCancel
-    return isShow
-      ? (
-          <div data-testid="confirm-dialog">
-            <div data-testid="confirm-title">{title}</div>
-            <div data-testid="confirm-content">{content}</div>
-            <button data-testid="confirm-cancel" onClick={onCancel}>Cancel</button>
-            <button data-testid="confirm-submit" onClick={onConfirm}>Confirm</button>
-          </div>
-        )
-      : null
-  },
-}))
-
 // Capture Actions callbacks
 let _capturedHandleDelete: (() => void) | undefined
 let _capturedHandleExportDSL: (() => void) | undefined
@@ -182,13 +155,14 @@ describe('TemplateCard', () => {
     type: 'customized' as const,
   }
 
+  const getDeleteConfirmButton = () => screen.getByRole('button', { name: 'common.operation.confirm' })
+  const getDeleteCancelButton = () => screen.getByRole('button', { name: 'common.operation.cancel' })
+
   beforeEach(() => {
     vi.clearAllMocks()
     mockToastSuccess.mockReset()
     mockToastError.mockReset()
     mockIsExporting = false
-    _capturedOnConfirm = undefined
-    _capturedOnCancel = undefined
     _capturedHandleDelete = undefined
     _capturedHandleExportDSL = undefined
     _capturedOpenEditModal = undefined
@@ -507,7 +481,7 @@ describe('TemplateCard', () => {
       fireEvent.click(deleteButton)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('datasetPipeline.deletePipeline.title')).toBeInTheDocument()
       })
     })
 
@@ -517,14 +491,13 @@ describe('TemplateCard', () => {
       fireEvent.click(deleteButton)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('datasetPipeline.deletePipeline.title')).toBeInTheDocument()
       })
 
-      const cancelButton = screen.getByTestId('confirm-cancel')
-      fireEvent.click(cancelButton)
+      fireEvent.click(getDeleteCancelButton())
 
       await waitFor(() => {
-        expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
+        expect(screen.queryByText('datasetPipeline.deletePipeline.title')).not.toBeInTheDocument()
       })
     })
 
@@ -539,11 +512,10 @@ describe('TemplateCard', () => {
       fireEvent.click(deleteButton)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('datasetPipeline.deletePipeline.title')).toBeInTheDocument()
       })
 
-      const confirmButton = screen.getByTestId('confirm-submit')
-      fireEvent.click(confirmButton)
+      fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
         expect(mockDeletePipeline).toHaveBeenCalledWith('pipeline-1', expect.any(Object))
@@ -561,11 +533,10 @@ describe('TemplateCard', () => {
       fireEvent.click(deleteButton)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('datasetPipeline.deletePipeline.title')).toBeInTheDocument()
       })
 
-      const confirmButton = screen.getByTestId('confirm-submit')
-      fireEvent.click(confirmButton)
+      fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
         expect(mockInvalidCustomizedTemplateList).toHaveBeenCalled()
@@ -583,14 +554,13 @@ describe('TemplateCard', () => {
       fireEvent.click(deleteButton)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('datasetPipeline.deletePipeline.title')).toBeInTheDocument()
       })
 
-      const confirmButton = screen.getByTestId('confirm-submit')
-      fireEvent.click(confirmButton)
+      fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
-        expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
+        expect(screen.queryByText('datasetPipeline.deletePipeline.title')).not.toBeInTheDocument()
       })
     })
   })
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
index d7881708d6..5fa3511e7c 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
@@ -3,8 +3,16 @@ import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Confirm from '@/app/components/base/confirm'
 import Modal from '@/app/components/base/modal'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { useRouter } from '@/next/navigation'
@@ -156,15 +164,24 @@ const TemplateCard = ({
           />
         </Modal>
       )}
-      {showDeleteConfirm && (
-        <Confirm
-          title={t('deletePipeline.title', { ns: 'datasetPipeline' })}
-          content={t('deletePipeline.content', { ns: 'datasetPipeline' })}
-          isShow={showDeleteConfirm}
-          onConfirm={onConfirmDelete}
-          onCancel={onCancelDelete}
-        />
-      )}
+      <AlertDialog open={showDeleteConfirm} onOpenChange={open => !open && onCancelDelete()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('deletePipeline.title', { ns: 'datasetPipeline' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('deletePipeline.content', { ns: 'datasetPipeline' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={onConfirmDelete}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
       {showDetailModal && (
         <Modal
           isShow={showDetailModal}
diff --git a/web/app/components/datasets/documents/components/operations.tsx b/web/app/components/datasets/documents/components/operations.tsx
index dee847fbf1..b4b8cbfdb4 100644
--- a/web/app/components/datasets/documents/components/operations.tsx
+++ b/web/app/components/datasets/documents/components/operations.tsx
@@ -7,12 +7,20 @@ import { noop } from 'es-toolkit/function'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import { SearchLinesSparkle } from '@/app/components/base/icons/src/vender/knowledge'
 import CustomPopover from '@/app/components/base/popover'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { IS_CE_EDITION } from '@/config'
 import { DataSourceType, DocumentActionType } from '@/models/datasets'
@@ -158,7 +166,7 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
                 </Tooltip>
               )
             : <Switch value={enabled} onChange={v => handleSwitch(v ? 'enable' : 'disable')} size="md" />}
-          <Divider className="!ml-4 !mr-2 !h-3" type="vertical" />
+          <Divider className="!mr-2 !ml-4 !h-3" type="vertical" />
         </>
       )}
       {embeddingAvailable && (
@@ -280,8 +288,24 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
           />
         </>
       )}
-      {showModal
-        && (<Confirm isShow={showModal} isLoading={deleting} isDisabled={deleting} title={t('list.delete.title', { ns: 'datasetDocuments' })} content={t('list.delete.content', { ns: 'datasetDocuments' })} confirmText={t('operation.sure', { ns: 'common' })} onConfirm={() => onOperate('delete')} onCancel={() => setShowModal(false)} />)}
+      <AlertDialog open={showModal} onOpenChange={open => !open && setShowModal(false)}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('list.delete.title', { ns: 'datasetDocuments' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('list.delete.content', { ns: 'datasetDocuments' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton loading={deleting} disabled={deleting} onClick={() => onOperate('delete')}>
+              {t('operation.sure', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
 
       {isShowRenameModal && currDocument && (<RenameModal datasetId={datasetId} documentId={currDocument.id} name={currDocument.name} onClose={setShowRenameModalFalse} onSaved={handleRenamed} />)}
     </div>
diff --git a/web/app/components/datasets/documents/detail/completed/common/__tests__/batch-action.spec.tsx b/web/app/components/datasets/documents/detail/completed/common/__tests__/batch-action.spec.tsx
index eda7d3845c..f310ae4007 100644
--- a/web/app/components/datasets/documents/detail/completed/common/__tests__/batch-action.spec.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/__tests__/batch-action.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import BatchAction from '../batch-action'
 
@@ -105,6 +105,21 @@ describe('BatchAction', () => {
         expect(mockOnBatchDelete).toHaveBeenCalledTimes(1)
       })
     })
+
+    it('should close delete confirmation when cancel is clicked', async () => {
+      const mockOnBatchDelete = vi.fn()
+      render(<BatchAction {...defaultProps} onBatchDelete={mockOnBatchDelete} />)
+
+      fireEvent.click(screen.getByText(/batchAction\.delete/i))
+      const dialog = await screen.findByRole('alertdialog')
+
+      fireEvent.click(within(dialog).getByRole('button', { name: 'common.operation.cancel' }))
+
+      await waitFor(() => {
+        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+      })
+      expect(mockOnBatchDelete).not.toHaveBeenCalled()
+    })
   })
 
   // Optional props tests
diff --git a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index 3e5f395dfe..5ecf95b59c 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -3,10 +3,18 @@ import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLin
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import { SearchLinesSparkle } from '@/app/components/base/icons/src/vender/knowledge'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { IS_CE_EDITION } from '@/config'
 import { cn } from '@/utils/classnames'
 
@@ -147,20 +155,24 @@ const BatchAction: FC<IBatchActionProps> = ({
           <span className="px-0.5">{t(`${i18nPrefix}.cancel`, { ns: 'dataset' })}</span>
         </Button>
       </div>
-      {
-        isShowDeleteConfirm && (
-          <Confirm
-            isShow
-            title={t('list.delete.title', { ns: 'datasetDocuments' })}
-            content={t('list.delete.content', { ns: 'datasetDocuments' })}
-            confirmText={t('operation.sure', { ns: 'common' })}
-            onConfirm={handleBatchDelete}
-            onCancel={hideDeleteConfirm}
-            isLoading={isDeleting}
-            isDisabled={isDeleting}
-          />
-        )
-      }
+      <AlertDialog open={isShowDeleteConfirm} onOpenChange={open => !open && hideDeleteConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('list.delete.title', { ns: 'datasetDocuments' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('list.delete.content', { ns: 'datasetDocuments' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton loading={isDeleting} disabled={isDeleting} onClick={handleBatchDelete}>
+              {t('operation.sure', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
index d43b45a6b5..df35b9b5f3 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
@@ -5,10 +5,17 @@ import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import ImageList from '@/app/components/datasets/common/image-list'
 import { ChunkingMode } from '@/models/datasets'
 import { cn } from '@/utils/classnames'
@@ -137,7 +144,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
       data-testid="segment-card"
       className={cn(
         'chunk-card group/card w-full rounded-xl px-3',
-        isFullDocMode ? '' : 'pb-2 pt-2.5 hover:bg-dataset-chunk-detail-card-hover-bg',
+        isFullDocMode ? '' : 'pt-2.5 pb-2 hover:bg-dataset-chunk-detail-card-hover-bg',
         focused.segmentContent ? 'bg-dataset-chunk-detail-card-hover-bg' : '',
         className,
       )}
@@ -170,7 +177,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                 <div className="flex items-center">
                   <StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-text-tertiary system-xs-regular" />
                   {embeddingAvailable && (
-                    <div className="absolute -right-2.5 -top-2 z-20 hidden items-center gap-x-0.5 radius-lg border-[0.5px]
+                    <div className="absolute -top-2 -right-2.5 z-20 hidden items-center gap-x-0.5 radius-lg border-[0.5px]
                       border-components-actionbar-border bg-components-actionbar-bg p-1 shadow-md backdrop-blur-[5px] group-hover/card:flex"
                     >
                       {!archived && (
@@ -254,7 +261,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
           ? (
               <button
                 type="button"
-                className="system-xs-semibold-uppercase mb-2 mt-0.5 text-text-accent"
+                className="mt-0.5 mb-2 system-xs-semibold-uppercase text-text-accent"
                 onClick={() => onClick?.()}
               >
                 {t('operation.viewMore', { ns: 'common' })}
@@ -276,16 +283,21 @@ const SegmentCard: FC<ISegmentCardProps> = ({
           />
         )
       }
-      {showModal
-        && (
-          <Confirm
-            isShow={showModal}
-            title={t('segment.delete', { ns: 'datasetDocuments' })}
-            confirmText={t('operation.sure', { ns: 'common' })}
-            onConfirm={async () => { await onDelete?.(id) }}
-            onCancel={() => setShowModal(false)}
-          />
-        )}
+      <AlertDialog open={showModal} onOpenChange={open => !open && setShowModal(false)}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('segment.delete', { ns: 'datasetDocuments' })}
+            </AlertDialogTitle>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={async () => { await onDelete?.(id) }}>
+              {t('operation.sure', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
diff --git a/web/app/components/datasets/external-api/external-api-modal/index.tsx b/web/app/components/datasets/external-api/external-api-modal/index.tsx
index 1d60e67634..0cd6593232 100644
--- a/web/app/components/datasets/external-api/external-api-modal/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/index.tsx
@@ -4,9 +4,17 @@ import { RiBook2Line, RiCloseLine, RiInformation2Line, RiLock2Fill } from '@remi
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Confirm from '@/app/components/base/confirm'
 import { PortalToFollowElem, PortalToFollowElemContent } from '@/app/components/base/portal-to-follow-elem'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { createExternalAPI } from '@/service/datasets'
@@ -176,7 +184,27 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
               {t('externalAPIForm.encrypted.end', { ns: 'dataset' })}
             </div>
           </div>
-          {showConfirm && (datasetBindings?.length ?? 0) > 0 && (<Confirm isShow={showConfirm} type="warning" title="Warning" content={`${t('editExternalAPIConfirmWarningContent.front', { ns: 'dataset' })} ${datasetBindings?.length} ${t('editExternalAPIConfirmWarningContent.end', { ns: 'dataset' })}`} onCancel={() => setShowConfirm(false)} onConfirm={handleSave} />)}
+          <AlertDialog
+            open={showConfirm && (datasetBindings?.length ?? 0) > 0}
+            onOpenChange={open => !open && setShowConfirm(false)}
+          >
+            <AlertDialogContent>
+              <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+                <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                  Warning
+                </AlertDialogTitle>
+                <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                  {`${t('editExternalAPIConfirmWarningContent.front', { ns: 'dataset' })} ${datasetBindings?.length} ${t('editExternalAPIConfirmWarningContent.end', { ns: 'dataset' })}`}
+                </AlertDialogDescription>
+              </div>
+              <AlertDialogActions>
+                <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+                <AlertDialogConfirmButton onClick={handleSave}>
+                  {t('operation.confirm', { ns: 'common' })}
+                </AlertDialogConfirmButton>
+              </AlertDialogActions>
+            </AlertDialogContent>
+          </AlertDialog>
         </div>
       </PortalToFollowElemContent>
     </PortalToFollowElem>
diff --git a/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx b/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
index 224b090b6e..23993db7dd 100644
--- a/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
+++ b/web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
@@ -8,8 +8,16 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Confirm from '@/app/components/base/confirm'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import { useModalContext } from '@/context/modal-context'
 import { checkUsageExternalAPI, deleteExternalAPI, fetchExternalAPI, updateExternalAPI } from '@/service/datasets'
@@ -115,7 +123,7 @@ const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api
             <ApiConnectionMod className="h-4 w-4" />
             <div className="system-sm-medium">{api.name}</div>
           </div>
-          <div className="system-xs-regular self-stretch text-text-tertiary">{api.settings.endpoint}</div>
+          <div className="self-stretch system-xs-regular text-text-tertiary">{api.settings.endpoint}</div>
         </div>
         <div className="flex items-start gap-1">
           <ActionButton onClick={handleEditClick}>
@@ -131,20 +139,26 @@ const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api
           </ActionButton>
         </div>
       </div>
-      {showConfirm && (
-        <Confirm
-          isShow={showConfirm}
-          title={`${t('deleteExternalAPIConfirmWarningContent.title.front', { ns: 'dataset' })} ${api.name}${t('deleteExternalAPIConfirmWarningContent.title.end', { ns: 'dataset' })}`}
-          content={
-            usageCount > 0
-              ? `${t('deleteExternalAPIConfirmWarningContent.content.front', { ns: 'dataset' })} ${usageCount} ${t('deleteExternalAPIConfirmWarningContent.content.end', { ns: 'dataset' })}`
-              : t('deleteExternalAPIConfirmWarningContent.noConnectionContent', { ns: 'dataset' })
-          }
-          type="warning"
-          onConfirm={handleConfirmDelete}
-          onCancel={() => setShowConfirm(false)}
-        />
-      )}
+      <AlertDialog open={showConfirm} onOpenChange={open => !open && setShowConfirm(false)}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {`${t('deleteExternalAPIConfirmWarningContent.title.front', { ns: 'dataset' })} ${api.name}${t('deleteExternalAPIConfirmWarningContent.title.end', { ns: 'dataset' })}`}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {usageCount > 0
+                ? `${t('deleteExternalAPIConfirmWarningContent.content.front', { ns: 'dataset' })} ${usageCount} ${t('deleteExternalAPIConfirmWarningContent.content.end', { ns: 'dataset' })}`
+                : t('deleteExternalAPIConfirmWarningContent.noConnectionContent', { ns: 'dataset' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={handleConfirmDelete}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   )
 }
diff --git a/web/app/components/datasets/list/dataset-card/components/__tests__/dataset-card-modals.spec.tsx b/web/app/components/datasets/list/dataset-card/components/__tests__/dataset-card-modals.spec.tsx
index e3e4a70936..8cc10ae5ae 100644
--- a/web/app/components/datasets/list/dataset-card/components/__tests__/dataset-card-modals.spec.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/__tests__/dataset-card-modals.spec.tsx
@@ -19,28 +19,6 @@ vi.mock('../../../../rename-modal', () => ({
   ),
 }))
 
-// Mock Confirm component since it uses createPortal which can cause issues in tests
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({ isShow, title, content, onConfirm, onCancel }: {
-    isShow: boolean
-    title: string
-    content?: React.ReactNode
-    onConfirm: () => void
-    onCancel: () => void
-  }) => (
-    isShow
-      ? (
-          <div data-testid="confirm-modal">
-            <div data-testid="confirm-title">{title}</div>
-            <div data-testid="confirm-content">{content}</div>
-            <button onClick={onCancel} role="button" aria-label="cancel">Cancel</button>
-            <button onClick={onConfirm} role="button" aria-label="confirm">Confirm</button>
-          </div>
-        )
-      : null
-  ),
-}))
-
 describe('DatasetCardModals', () => {
   const mockDataset: DataSet = {
     id: 'dataset-1',
diff --git a/web/app/components/datasets/list/dataset-card/components/dataset-card-modals.tsx b/web/app/components/datasets/list/dataset-card/components/dataset-card-modals.tsx
index 8162bc94c4..79b0d73799 100644
--- a/web/app/components/datasets/list/dataset-card/components/dataset-card-modals.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/dataset-card-modals.tsx
@@ -1,7 +1,15 @@
 import type { DataSet } from '@/models/datasets'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import RenameDatasetModal from '../../../rename-modal'
 
 type ModalState = {
@@ -39,15 +47,26 @@ const DatasetCardModals = ({
           onSuccess={onSuccess}
         />
       )}
-      {modalState.showConfirmDelete && (
-        <Confirm
-          title={t('deleteDatasetConfirmTitle', { ns: 'dataset' })}
-          content={modalState.confirmMessage}
-          isShow={modalState.showConfirmDelete}
-          onConfirm={onConfirmDelete}
-          onCancel={onCloseConfirm}
-        />
-      )}
+      <AlertDialog open={modalState.showConfirmDelete} onOpenChange={open => !open && onCloseConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('deleteDatasetConfirmTitle', { ns: 'dataset' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {modalState.confirmMessage}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={onConfirmDelete}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   )
 }
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index 24b2fdc363..f2abf609a2 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -6,13 +6,21 @@ import { useBoolean, useHover } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import Drawer from '@/app/components/base/drawer'
 import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import CreateModal from '@/app/components/datasets/metadata/metadata-dataset/create-metadata-modal'
 import { cn } from '@/utils/classnames'
@@ -95,16 +103,24 @@ const Item: FC<ItemProps> = ({
             <RiDeleteBinLine className="size-4 cursor-pointer" onClick={showDeleteConfirm} />
           </div>
         </div>
-        {isShowDeleteConfirm && (
-          <Confirm
-            isShow
-            type="warning"
-            title={t('metadata.datasetMetadata.deleteTitle', { ns: 'dataset' })}
-            content={t('metadata.datasetMetadata.deleteContent', { ns: 'dataset', name: payload.name })}
-            onConfirm={handleDelete}
-            onCancel={hideDeleteConfirm}
-          />
-        )}
+        <AlertDialog open={isShowDeleteConfirm} onOpenChange={open => !open && hideDeleteConfirm()}>
+          <AlertDialogContent>
+            <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+              <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                {t('metadata.datasetMetadata.deleteTitle', { ns: 'dataset' })}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                {t('metadata.datasetMetadata.deleteContent', { ns: 'dataset', name: payload.name })}
+              </AlertDialogDescription>
+            </div>
+            <AlertDialogActions>
+              <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+              <AlertDialogConfirmButton onClick={handleDelete}>
+                {t('operation.confirm', { ns: 'common' })}
+              </AlertDialogConfirmButton>
+            </AlertDialogActions>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
     </div>
   )
diff --git a/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx b/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx
index 9b15e75b9d..333ef45162 100644
--- a/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx
+++ b/web/app/components/develop/secret-key/__tests__/secret-key-modal.spec.tsx
@@ -1,4 +1,4 @@
-import { act, render, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { afterEach } from 'vitest'
 import SecretKeyModal from '../secret-key-modal'
@@ -477,6 +477,32 @@ describe('SecretKeyModal', () => {
 
       expect(mockDelAppApikey).not.toHaveBeenCalled()
     })
+
+    it('should close confirm dialog when Escape is pressed', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+      await renderModal(<SecretKeyModal {...defaultProps} appId="app-123" />)
+
+      const actionButtons = document.body.querySelectorAll('button.action-btn')
+      const deleteButton = actionButtons[1]
+      await act(async () => {
+        await user.click(deleteButton!)
+        vi.runAllTimers()
+      })
+
+      await waitFor(() => {
+        expect(screen.getByText('appApi.actionMsg.deleteConfirmTitle')).toBeInTheDocument()
+      })
+      await flushTransitions()
+
+      await act(async () => {
+        fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+        vi.runAllTimers()
+      })
+
+      await waitFor(() => {
+        expect(screen.queryByText('appApi.actionMsg.deleteConfirmTitle')).not.toBeInTheDocument()
+      })
+    })
   })
 
   describe('delete key for dataset', () => {
diff --git a/web/app/components/develop/secret-key/secret-key-modal.tsx b/web/app/components/develop/secret-key/secret-key-modal.tsx
index ec83251ec6..dbd27606be 100644
--- a/web/app/components/develop/secret-key/secret-key-modal.tsx
+++ b/web/app/components/develop/secret-key/secret-key-modal.tsx
@@ -7,11 +7,19 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Confirm from '@/app/components/base/confirm'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
 import { Button } from '@/app/components/base/ui/button'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { useAppContext } from '@/context/app-context'
 import useTimestamp from '@/hooks/use-timestamp'
 import {
@@ -87,6 +95,14 @@ const SecretKeyModal = ({
     return `${token.slice(0, 3)}...${token.slice(-20)}`
   }
 
+  const handleDeleteConfirmOpenChange = (open: boolean) => {
+    if (open)
+      return
+
+    setDelKeyId('')
+    setShowConfirmDelete(false)
+  }
+
   return (
     <Modal isShow={isShow} onClose={onClose} title={`${t('apiKeyModal.apiSecretKey', { ns: 'appApi' })}`} className={`${s.customModal} flex flex-col px-8`}>
       <div className="-mt-6 -mr-2 mb-4 flex justify-end">
@@ -135,18 +151,29 @@ const SecretKeyModal = ({
         </Button>
       </div>
       <SecretKeyGenerateModal className="shrink-0" isShow={isVisible} onClose={() => setVisible(false)} newKey={newKey} />
-      {showConfirmDelete && (
-        <Confirm
-          title={`${t('actionMsg.deleteConfirmTitle', { ns: 'appApi' })}`}
-          content={`${t('actionMsg.deleteConfirmTips', { ns: 'appApi' })}`}
-          isShow={showConfirmDelete}
-          onConfirm={onDel}
-          onCancel={() => {
-            setDelKeyId('')
-            setShowConfirmDelete(false)
-          }}
-        />
-      )}
+      <AlertDialog
+        open={showConfirmDelete}
+        onOpenChange={handleDeleteConfirmOpenChange}
+      >
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('actionMsg.deleteConfirmTitle', { ns: 'appApi' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('actionMsg.deleteConfirmTips', { ns: 'appApi' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={onDel}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </Modal>
   )
 }
diff --git a/web/app/components/header/account-setting/api-based-extension-page/__tests__/item.spec.tsx b/web/app/components/header/account-setting/api-based-extension-page/__tests__/item.spec.tsx
index 265c262cbf..cf5c46a509 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/__tests__/item.spec.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/__tests__/item.spec.tsx
@@ -105,8 +105,10 @@ describe('Item Component', () => {
 
       // Act
       fireEvent.click(screen.getByText('common.operation.delete'))
-      const dialog = screen.getByTestId('confirm-overlay')
-      const confirmButton = within(dialog).getByText('common.operation.delete')
+      const dialog = screen.getByRole('alertdialog', {
+        name: /common\.operation\.delete.*Test Extension.*\?/i,
+      })
+      const confirmButton = within(dialog).getByRole('button', { name: 'common.operation.delete' })
       fireEvent.click(confirmButton)
 
       // Assert
@@ -123,8 +125,10 @@ describe('Item Component', () => {
 
       // Act
       fireEvent.click(screen.getByText('common.operation.delete'))
-      const dialog = screen.getByTestId('confirm-overlay')
-      const confirmButton = within(dialog).getByText('common.operation.delete')
+      const dialog = screen.getByRole('alertdialog', {
+        name: /common\.operation\.delete.*Test Extension.*\?/i,
+      })
+      const confirmButton = within(dialog).getByRole('button', { name: 'common.operation.delete' })
       fireEvent.click(confirmButton)
 
       // Assert
@@ -133,14 +137,16 @@ describe('Item Component', () => {
       })
     })
 
-    it('should close delete confirmation when clicking cancel button', () => {
+    it('should close delete confirmation when clicking cancel button', async () => {
       // Act
       render(<Item data={mockData} onUpdate={mockOnUpdate} />)
       fireEvent.click(screen.getByText('common.operation.delete'))
       fireEvent.click(screen.getByText('common.operation.cancel'))
 
       // Assert
-      expect(screen.queryByText(/common\.operation\.delete.*Test Extension.*\?/i)).not.toBeInTheDocument()
+      await waitFor(() => {
+        expect(screen.queryByText(/common\.operation\.delete.*Test Extension.*\?/i)).not.toBeInTheDocument()
+      })
     })
 
     it('should not call delete API when canceling deletion', () => {
diff --git a/web/app/components/header/account-setting/api-based-extension-page/item.tsx b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
index 0624224a45..5ef349f5e0 100644
--- a/web/app/components/header/account-setting/api-based-extension-page/item.tsx
+++ b/web/app/components/header/account-setting/api-based-extension-page/item.tsx
@@ -6,7 +6,14 @@ import {
 } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
 import { useModalContext } from '@/context/modal-context'
 import { deleteApiBasedExtension } from '@/service/common'
@@ -57,18 +64,21 @@ const Item: FC<ItemProps> = ({
           {t('operation.delete', { ns: 'common' })}
         </Button>
       </div>
-      {
-        showDeleteConfirm
-        && (
-          <Confirm
-            isShow={showDeleteConfirm}
-            onCancel={() => setShowDeleteConfirm(false)}
-            title={`${t('operation.delete', { ns: 'common' })} “${data.name}”?`}
-            onConfirm={handleDeleteApiBasedExtension}
-            confirmText={t('operation.delete', { ns: 'common' }) || ''}
-          />
-        )
-      }
+      <AlertDialog open={showDeleteConfirm} onOpenChange={open => !open && setShowDeleteConfirm(false)}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {`${t('operation.delete', { ns: 'common' })} \u201C${data.name}\u201D?`}
+            </AlertDialogTitle>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={handleDeleteApiBasedExtension}>
+              {t('operation.delete', { ns: 'common' }) || ''}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
diff --git a/web/app/components/header/account-setting/data-source-page-new/card.tsx b/web/app/components/header/account-setting/data-source-page-new/card.tsx
index a68c7d99cc..0f7a11f61f 100644
--- a/web/app/components/header/account-setting/data-source-page-new/card.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/card.tsx
@@ -8,7 +8,14 @@ import {
   useRef,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import {
   ApiKeyModal,
   usePluginAuthAction,
@@ -123,7 +130,7 @@ const Card = ({
           <div className="system-md-semibold text-text-primary">
             {renderI18nObject(label)}
           </div>
-          <div className="system-xs-regular flex h-4 items-center text-text-tertiary">
+          <div className="flex h-4 items-center system-xs-regular text-text-tertiary">
             {author}
             <div className="mx-0.5 text-text-quaternary">/</div>
             {name}
@@ -135,7 +142,7 @@ const Card = ({
           onUpdate={handleAuthUpdate}
         />
       </div>
-      <div className="system-xs-medium flex h-4 items-center pl-3 text-text-tertiary">
+      <div className="flex h-4 items-center pl-3 system-xs-medium text-text-tertiary">
         {t('auth.connectedWorkspace', { ns: 'plugin' })}
         <div className="ml-3 h-px grow bg-divider-subtle"></div>
       </div>
@@ -157,23 +164,27 @@ const Card = ({
       {
         !credentials_list.length && (
           <div className="p-3 pt-1">
-            <div className="system-xs-regular flex h-10 items-center justify-center radius-lg bg-background-section text-text-tertiary">
+            <div className="flex h-10 items-center justify-center radius-lg bg-background-section system-xs-regular text-text-tertiary">
               {t('auth.emptyAuth', { ns: 'plugin' })}
             </div>
           </div>
         )
       }
-      {
-        deleteCredentialId && (
-          <Confirm
-            isShow
-            title={t('list.delete.title', { ns: 'datasetDocuments' })}
-            isDisabled={doingAction}
-            onCancel={closeConfirm}
-            onConfirm={handleConfirm}
-          />
-        )
-      }
+      <AlertDialog open={!!deleteCredentialId} onOpenChange={open => !open && closeConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('list.delete.title', { ns: 'datasetDocuments' })}
+            </AlertDialogTitle>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton disabled={doingAction} onClick={handleConfirm}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
       {
         !!editValues && (
           <ApiKeyModal
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/index.spec.tsx
index 17597fa343..e1d9a611f9 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/__tests__/index.spec.tsx
@@ -1,5 +1,5 @@
 import type { Credential, CustomModel, ModelProvider } from '../../../declarations'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
 import { ConfigurationMethodEnum, ModelTypeEnum } from '../../../declarations'
 import Authorized from '../index'
 
@@ -198,4 +198,39 @@ describe('Authorized', () => {
     fireEvent.click(screen.getByRole('button', { name: /common.operation.confirm/i }))
     expect(mockHandleConfirmDelete).toHaveBeenCalled()
   })
+
+  it('should close confirm dialog when deletion is cancelled', () => {
+    mockDeleteCredentialId = 'cred-1'
+
+    render(
+      <Authorized
+        provider={mockProvider}
+        configurationMethod={ConfigurationMethodEnum.predefinedModel}
+        items={mockItems}
+        renderTrigger={mockRenderTrigger}
+      />,
+    )
+
+    const dialog = screen.getByRole('alertdialog')
+    fireEvent.click(within(dialog).getByRole('button', { name: /operation.cancel/i }))
+
+    expect(mockCloseConfirmDelete).toHaveBeenCalledTimes(1)
+  })
+
+  it('should disable the confirm button while deletion is in progress', () => {
+    mockDeleteCredentialId = 'cred-1'
+    mockDoingAction = true
+
+    render(
+      <Authorized
+        provider={mockProvider}
+        configurationMethod={ConfigurationMethodEnum.predefinedModel}
+        items={mockItems}
+        renderTrigger={mockRenderTrigger}
+      />,
+    )
+
+    const dialog = screen.getByRole('alertdialog')
+    expect(within(dialog).getByRole('button', { name: /common.operation.confirm/i })).toBeDisabled()
+  })
 })
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
index 09e64c654f..d1a2bc1f89 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
@@ -19,12 +19,19 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
 import { cn } from '@/utils/classnames'
 import { useAuth } from '../hooks'
@@ -240,17 +247,21 @@ const Authorized = ({
           </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>
-      {
-        deleteCredentialId && (
-          <Confirm
-            isShow
-            title={t('modelProvider.confirmDelete', { ns: 'common' })}
-            isDisabled={doingAction}
-            onCancel={closeConfirmDelete}
-            onConfirm={handleConfirmDelete}
-          />
-        )
-      }
+      <AlertDialog open={!!deleteCredentialId} onOpenChange={open => !open && closeConfirmDelete()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('modelProvider.confirmDelete', { ns: 'common' })}
+            </AlertDialogTitle>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton disabled={doingAction} onClick={handleConfirmDelete}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   )
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index cb4ffd0392..4c8c718ac2 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -1,9 +1,16 @@
 import type { Credential, CustomConfigurationModelFixedFields, ModelItem, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { SwitchCredentialInLoadBalancing } from '@/app/components/header/account-setting/model-provider-page/model-auth'
@@ -266,7 +273,21 @@ const ModelLoadBalancingModal = ({ provider, configurateMethod, currentCustomCon
               </>
             )}
       </Modal>
-      {deleteModel && (<Confirm isShow title={t('modelProvider.confirmDelete', { ns: 'common' })} onCancel={closeConfirmDelete} onConfirm={handleDeleteModel} isDisabled={doingAction} />)}
+      <AlertDialog open={!!deleteModel} onOpenChange={open => !open && closeConfirmDelete()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('modelProvider.confirmDelete', { ns: 'common' })}
+            </AlertDialogTitle>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton disabled={doingAction} onClick={handleDeleteModel}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   )
 }
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index cb2e8aaca1..dc905d9f8c 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -12,12 +12,19 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
@@ -318,17 +325,21 @@ const Authorized = ({
           </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>
-      {
-        deleteCredentialId && (
-          <Confirm
-            isShow
-            title={t('list.delete.title', { ns: 'datasetDocuments' })}
-            isDisabled={doingAction}
-            onCancel={closeConfirm}
-            onConfirm={handleConfirm}
-          />
-        )
-      }
+      <AlertDialog open={!!deleteCredentialId} onOpenChange={open => !open && closeConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('list.delete.title', { ns: 'datasetDocuments' })}
+            </AlertDialogTitle>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton disabled={doingAction} onClick={handleConfirm}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
       {
         !!editValues && (
           <ApiKeyModal
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-card.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-card.spec.tsx
index 2af14c5864..3b87fdccb6 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-card.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-card.spec.tsx
@@ -1,5 +1,5 @@
 import type { EndpointListItem, PluginDetail } from '../../types'
-import { act, fireEvent, render, screen } from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import EndpointCard from '../endpoint-card'
 
@@ -136,7 +136,6 @@ const mockPluginDetail: PluginDetail = {
 describe('EndpointCard', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    vi.useFakeTimers()
     // Reset failure flags
     failureFlags.enable = false
     failureFlags.disable = false
@@ -152,6 +151,12 @@ describe('EndpointCard', () => {
     vi.useRealTimers()
   })
 
+  const waitForAlertDialogToClose = async () => {
+    await waitFor(() => {
+      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+    })
+  }
+
   describe('Rendering', () => {
     it('should render endpoint name', () => {
       render(<EndpointCard pluginDetail={mockPluginDetail} data={mockEndpointData} handleChange={mockHandleChange} />)
@@ -243,6 +248,7 @@ describe('EndpointCard', () => {
 
   describe('Copy Functionality', () => {
     it('should reset copy state after timeout', async () => {
+      vi.useFakeTimers()
       render(<EndpointCard pluginDetail={mockPluginDetail} data={mockEndpointData} handleChange={mockHandleChange} />)
 
       const allButtons = screen.getAllByRole('button')
@@ -276,19 +282,19 @@ describe('EndpointCard', () => {
       expect(mockHandleChange).toHaveBeenCalled()
     })
 
-    it('should hide disable confirm and revert state when cancel clicked', () => {
+    it('should hide disable confirm and revert state when cancel clicked', async () => {
       render(<EndpointCard pluginDetail={mockPluginDetail} data={mockEndpointData} handleChange={mockHandleChange} />)
 
       fireEvent.click(screen.getByRole('switch'))
       expect(screen.getByText('plugin.detailPanel.endpointDisableTip')).toBeInTheDocument()
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+      await waitForAlertDialogToClose()
 
-      // Confirm should be hidden
-      expect(screen.queryByText('plugin.detailPanel.endpointDisableTip')).not.toBeInTheDocument()
+      expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true')
     })
 
-    it('should hide delete confirm when cancel clicked', () => {
+    it('should hide delete confirm when cancel clicked', async () => {
       render(<EndpointCard pluginDetail={mockPluginDetail} data={mockEndpointData} handleChange={mockHandleChange} />)
 
       const allButtons = screen.getAllByRole('button')
@@ -296,8 +302,7 @@ describe('EndpointCard', () => {
       expect(screen.getByText('plugin.detailPanel.endpointDeleteTip')).toBeInTheDocument()
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
-
-      expect(screen.queryByText('plugin.detailPanel.endpointDeleteTip')).not.toBeInTheDocument()
+      await waitForAlertDialogToClose()
     })
 
     it('should hide edit modal when cancel clicked', () => {
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
index af7412d60e..679801a56a 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
@@ -6,10 +6,17 @@ import * as React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Confirm from '@/app/components/base/confirm'
 import { CopyCheck } from '@/app/components/base/icons/src/vender/line/files'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import Indicator from '@/app/components/header/indicator'
 import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
@@ -122,6 +129,14 @@ const EndpointCard = ({
     setIsCopied(true)
   }
 
+  const handleDisableConfirmOpenChange = (open: boolean) => {
+    if (open)
+      return
+
+    hideDisableConfirm()
+    setActive(true)
+  }
+
   useEffect(() => {
     if (isCopied) {
       const timer = setTimeout(() => {
@@ -139,7 +154,7 @@ const EndpointCard = ({
     <div className="rounded-xl bg-background-section-burn p-0.5">
       <div className="group radius-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-2.5 pl-3">
         <div className="flex items-center">
-          <div className="mb-1 flex h-6 grow items-center gap-1 text-text-secondary system-md-semibold">
+          <div className="mb-1 flex h-6 grow items-center gap-1 system-md-semibold text-text-secondary">
             <RiLoginCircleLine className="h-4 w-4" />
             <div>{data.name}</div>
           </div>
@@ -154,8 +169,8 @@ const EndpointCard = ({
         </div>
         {data.declaration.endpoints.filter(endpoint => !endpoint.hidden).map((endpoint, index) => (
           <div key={index} className="flex h-6 items-center">
-            <div className="w-12 shrink-0 text-text-tertiary system-xs-regular">{endpoint.method}</div>
-            <div className="group/item flex grow items-center truncate text-text-secondary system-xs-regular">
+            <div className="w-12 shrink-0 system-xs-regular text-text-tertiary">{endpoint.method}</div>
+            <div className="group/item flex grow items-center truncate system-xs-regular text-text-secondary">
               <div title={`${data.url}${endpoint.path}`} className="truncate">{`${data.url}${endpoint.path}`}</div>
               <Tooltip popupContent={t(`operation.${isCopied ? 'copied' : 'copy'}`, { ns: 'common' })} position="top">
                 <ActionButton className="ml-2 hidden shrink-0 group-hover/item:flex" onClick={() => handleCopy(`${data.url}${endpoint.path}`)}>
@@ -168,13 +183,13 @@ const EndpointCard = ({
       </div>
       <div className="flex items-center justify-between p-2 pl-3">
         {active && (
-          <div className="flex items-center gap-1 text-util-colors-green-green-600 system-xs-semibold-uppercase">
+          <div className="flex items-center gap-1 system-xs-semibold-uppercase text-util-colors-green-green-600">
             <Indicator color="green" />
             {t('detailPanel.serviceOk', { ns: 'plugin' })}
           </div>
         )}
         {!active && (
-          <div className="flex items-center gap-1 text-text-tertiary system-xs-semibold-uppercase">
+          <div className="flex items-center gap-1 system-xs-semibold-uppercase text-text-tertiary">
             <Indicator color="gray" />
             {t('detailPanel.disabled', { ns: 'plugin' })}
           </div>
@@ -186,27 +201,47 @@ const EndpointCard = ({
           size="sm"
         />
       </div>
-      {isShowDisableConfirm && (
-        <Confirm
-          isShow
-          title={t('detailPanel.endpointDisableTip', { ns: 'plugin' })}
-          content={<div>{t('detailPanel.endpointDisableContent', { ns: 'plugin', name: data.name })}</div>}
-          onCancel={() => {
-            hideDisableConfirm()
-            setActive(true)
-          }}
-          onConfirm={() => disableEndpoint(endpointID)}
-        />
-      )}
-      {isShowDeleteConfirm && (
-        <Confirm
-          isShow
-          title={t('detailPanel.endpointDeleteTip', { ns: 'plugin' })}
-          content={<div>{t('detailPanel.endpointDeleteContent', { ns: 'plugin', name: data.name })}</div>}
-          onCancel={hideDeleteConfirm}
-          onConfirm={() => deleteEndpoint(endpointID)}
-        />
-      )}
+      <AlertDialog
+        open={isShowDisableConfirm}
+        onOpenChange={handleDisableConfirmOpenChange}
+      >
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('detailPanel.endpointDisableTip', { ns: 'plugin' })}
+            </AlertDialogTitle>
+            <div className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('detailPanel.endpointDisableContent', { ns: 'plugin', name: data.name })}
+            </div>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={() => disableEndpoint(endpointID)}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
+      <AlertDialog open={isShowDeleteConfirm} onOpenChange={open => !open && hideDeleteConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('detailPanel.endpointDeleteTip', { ns: 'plugin' })}
+            </AlertDialogTitle>
+            <div className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('detailPanel.endpointDeleteContent', { ns: 'plugin', name: data.name })}
+            </div>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={() => deleteEndpoint(endpointID)}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
       {isShowEndpointModal && (
         <EndpointModal
           formSchemas={formSchemas as any}
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx
index 77deb9cffb..a360a477e3 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx
@@ -59,18 +59,18 @@ export const DeleteConfirm = (props: Props) => {
   return (
     <AlertDialog open={isShow} onOpenChange={handleOpenChange}>
       <AlertDialogContent backdropProps={{ forceRender: true }}>
-        <div className="flex flex-col gap-2 px-6 pb-4 pt-6">
-          <AlertDialogTitle title={t(`${tPrefix}.title`, { ns: 'pluginTrigger', name: currentName })} className="w-full truncate text-text-primary title-2xl-semi-bold">
+        <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+          <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
             {t(`${tPrefix}.title`, { ns: 'pluginTrigger', name: currentName })}
           </AlertDialogTitle>
-          <AlertDialogDescription className="w-full whitespace-pre-wrap wrap-break-word text-text-tertiary system-md-regular">
+          <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
             {workflowsInUse > 0
               ? t(`${tPrefix}.contentWithApps`, { ns: 'pluginTrigger', count: workflowsInUse })
               : t(`${tPrefix}.content`, { ns: 'pluginTrigger' })}
           </AlertDialogDescription>
           {workflowsInUse > 0 && (
             <div className="mt-6">
-              <div className="mb-2 text-text-secondary system-sm-medium">
+              <div className="mb-2 system-sm-medium text-text-secondary">
                 {t(`${tPrefix}.confirmInputTip`, { ns: 'pluginTrigger', name: currentName })}
               </div>
               <Input
diff --git a/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx b/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx
index 45f5deba22..82c4d69d1b 100644
--- a/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx
+++ b/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx
@@ -92,30 +92,6 @@ vi.mock('../../../base/tooltip', () => ({
   ),
 }))
 
-// Mock Confirm - uses createPortal which has issues in test environment
-vi.mock('../../../base/confirm', () => ({
-  default: ({ isShow, title, content, onCancel, onConfirm, isLoading, isDisabled }: {
-    isShow: boolean
-    title: string
-    content: React.ReactNode
-    onCancel: () => void
-    onConfirm: () => void
-    isLoading: boolean
-    isDisabled: boolean
-  }) => {
-    if (!isShow)
-      return null
-    return (
-      <div data-testid="confirm-modal" data-loading={isLoading} data-disabled={isDisabled}>
-        <div data-testid="confirm-title">{title}</div>
-        <div data-testid="confirm-content">{content}</div>
-        <button data-testid="confirm-cancel" onClick={onCancel}>Cancel</button>
-        <button data-testid="confirm-ok" onClick={onConfirm} disabled={isDisabled}>Confirm</button>
-      </div>
-    )
-  },
-}))
-
 // ==================== Test Utilities ====================
 
 type ActionProps = {
@@ -151,6 +127,9 @@ const createActionProps = (overrides: Partial<ActionProps> = {}): ActionProps =>
   ...overrides,
 })
 
+const getDeleteConfirmButton = () => screen.getByRole('button', { name: /common\.operation\.confirm/ })
+const getDeleteCancelButton = () => screen.getByRole('button', { name: 'common.operation.cancel' })
+
 // ==================== Tests ====================
 
 // Helper to find action buttons (real ActionButton component uses type="button")
@@ -277,8 +256,7 @@ describe('Action Component', () => {
       fireEvent.click(getActionButtons()[0])
 
       // Assert
-      expect(screen.getByTestId('confirm-modal')).toBeInTheDocument()
-      expect(screen.getByTestId('confirm-title')).toHaveTextContent('plugin.action.delete')
+      expect(screen.getByText('plugin.action.delete')).toBeInTheDocument()
     })
 
     it('should display plugin name in delete confirm content', () => {
@@ -309,12 +287,14 @@ describe('Action Component', () => {
       // Act
       render(<Action {...props} />)
       fireEvent.click(getActionButtons()[0])
-      expect(screen.getByTestId('confirm-modal')).toBeInTheDocument()
+      expect(screen.getByText('plugin.action.delete')).toBeInTheDocument()
 
-      fireEvent.click(screen.getByTestId('confirm-cancel'))
+      fireEvent.click(getDeleteCancelButton())
 
       // Assert
-      expect(screen.queryByTestId('confirm-modal')).not.toBeInTheDocument()
+      return waitFor(() => {
+        expect(screen.queryByText('plugin.action.delete')).not.toBeInTheDocument()
+      })
     })
 
     it('should call uninstallPlugin when confirm is clicked', async () => {
@@ -329,7 +309,7 @@ describe('Action Component', () => {
       // Act
       render(<Action {...props} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       // Assert
       await waitFor(() => {
@@ -351,7 +331,7 @@ describe('Action Component', () => {
       // Act
       render(<Action {...props} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       // Assert
       await waitFor(() => {
@@ -373,7 +353,7 @@ describe('Action Component', () => {
       // Act
       render(<Action {...props} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       // Assert
       await waitFor(() => {
@@ -395,7 +375,7 @@ describe('Action Component', () => {
       // Act
       render(<Action {...props} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       // Assert
       await waitFor(() => {
@@ -422,17 +402,17 @@ describe('Action Component', () => {
       // Act
       render(<Action {...props} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       // Assert - Loading state
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-modal')).toHaveAttribute('data-loading', 'true')
+        expect(getDeleteConfirmButton()).toBeDisabled()
       })
 
       // Resolve and check modal closes
       resolveUninstall!({ success: true })
       await waitFor(() => {
-        expect(screen.queryByTestId('confirm-modal')).not.toBeInTheDocument()
+        expect(screen.queryByText('plugin.action.delete')).not.toBeInTheDocument()
       })
     })
   })
@@ -699,7 +679,7 @@ describe('Action Component', () => {
       // Act - First render and delete
       const { rerender } = render(<Action {...props} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
         expect(mockUninstallPlugin).toHaveBeenCalledWith('stable-install-id')
@@ -709,7 +689,7 @@ describe('Action Component', () => {
       mockUninstallPlugin.mockClear()
       rerender(<Action {...props} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
         expect(mockUninstallPlugin).toHaveBeenCalledWith('stable-install-id')
@@ -735,7 +715,7 @@ describe('Action Component', () => {
       // Act
       const { rerender } = render(<Action {...props1} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
         expect(mockUninstallPlugin).toHaveBeenCalledWith('install-1')
@@ -744,7 +724,7 @@ describe('Action Component', () => {
       mockUninstallPlugin.mockClear()
       rerender(<Action {...props2} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
         expect(mockUninstallPlugin).toHaveBeenCalledWith('install-2')
@@ -772,7 +752,7 @@ describe('Action Component', () => {
       // Act
       const { rerender } = render(<Action {...props1} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
         expect(onDelete1).toHaveBeenCalled()
@@ -781,7 +761,7 @@ describe('Action Component', () => {
 
       rerender(<Action {...props2} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
         expect(onDelete2).toHaveBeenCalled()
@@ -847,17 +827,16 @@ describe('Action Component', () => {
       // Act
       render(<Action {...props} />)
       fireEvent.click(getActionButtons()[0])
-      fireEvent.click(screen.getByTestId('confirm-ok'))
+      fireEvent.click(getDeleteConfirmButton())
 
       // The confirm button should be disabled during deletion
-      expect(screen.getByTestId('confirm-modal')).toHaveAttribute('data-loading', 'true')
-      expect(screen.getByTestId('confirm-modal')).toHaveAttribute('data-disabled', 'true')
+      expect(getDeleteConfirmButton()).toBeDisabled()
 
       // Resolve the deletion
       resolveFirst!({ success: true })
 
       await waitFor(() => {
-        expect(screen.queryByTestId('confirm-modal')).not.toBeInTheDocument()
+        expect(screen.queryByText('plugin.action.delete')).not.toBeInTheDocument()
       })
     })
 
diff --git a/web/app/components/plugins/plugin-item/action.tsx b/web/app/components/plugins/plugin-item/action.tsx
index c01be54442..ed401b534f 100644
--- a/web/app/components/plugins/plugin-item/action.tsx
+++ b/web/app/components/plugins/plugin-item/action.tsx
@@ -7,12 +7,19 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { toast } from '@/app/components/base/ui/toast'
 import { useModalContext } from '@/context/modal-context'
 import { uninstallPlugin } from '@/service/plugins'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import ActionButton from '../../base/action-button'
-import Confirm from '../../base/confirm'
 import Tooltip from '../../base/tooltip'
 import { checkForUpdates, fetchReleases } from '../install-plugin/hooks'
 import PluginInfo from '../plugin-page/plugin-info'
@@ -151,24 +158,27 @@ const Action: FC<Props> = ({
           onHide={hidePluginInfo}
         />
       )}
-      <Confirm
-        isShow={isShowDeleteConfirm}
-        title={t(`${i18nPrefix}.delete`, { ns: 'plugin' })}
-        content={(
-          <div>
-            {t(`${i18nPrefix}.deleteContentLeft`, { ns: 'plugin' })}
-            <span className="system-md-semibold">{pluginName}</span>
-            {t(`${i18nPrefix}.deleteContentRight`, { ns: 'plugin' })}
-            <br />
-            {/* // todo: add usedInApps */}
-            {/* {usedInApps > 0 && t(`${i18nPrefix}.usedInApps`, { num: usedInApps })} */}
+      <AlertDialog open={isShowDeleteConfirm} onOpenChange={open => !open && hideDeleteConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t(`${i18nPrefix}.delete`, { ns: 'plugin' })}
+            </AlertDialogTitle>
+            <div className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t(`${i18nPrefix}.deleteContentLeft`, { ns: 'plugin' })}
+              <span className="system-md-semibold">{pluginName}</span>
+              {t(`${i18nPrefix}.deleteContentRight`, { ns: 'plugin' })}
+              <br />
+            </div>
           </div>
-        )}
-        onCancel={hideDeleteConfirm}
-        onConfirm={handleDelete}
-        isLoading={deleting}
-        isDisabled={deleting}
-      />
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton loading={deleting} disabled={deleting} onClick={handleDelete}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
diff --git a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
index 71bade3235..967e697813 100644
--- a/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/conversion.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import Conversion from '../conversion'
@@ -47,29 +47,6 @@ vi.mock('@/app/components/base/ui/button', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({
-    isShow,
-    onConfirm,
-    onCancel,
-    title,
-  }: {
-    isShow: boolean
-    onConfirm: () => void
-    onCancel: () => void
-    title: string
-  }) =>
-    isShow
-      ? (
-          <div data-testid="confirm-modal">
-            <span>{title}</span>
-            <button data-testid="confirm-btn" onClick={onConfirm}>Confirm</button>
-            <button data-testid="cancel-btn" onClick={onCancel}>Cancel</button>
-          </div>
-        )
-      : null,
-}))
-
 vi.mock('../screenshot', () => ({
   default: () => <div data-testid="screenshot" />,
 }))
@@ -112,11 +89,10 @@ describe('Conversion', () => {
   it('should show confirm modal when convert button clicked', () => {
     render(<Conversion />)
 
-    expect(screen.queryByTestId('confirm-modal')).not.toBeInTheDocument()
+    expect(screen.queryByText('datasetPipeline.conversion.confirm.title')).not.toBeInTheDocument()
 
     fireEvent.click(screen.getByText('datasetPipeline.operations.convert'))
 
-    expect(screen.getByTestId('confirm-modal')).toBeInTheDocument()
     expect(screen.getByText('datasetPipeline.conversion.confirm.title')).toBeInTheDocument()
   })
 
@@ -124,17 +100,19 @@ describe('Conversion', () => {
     render(<Conversion />)
 
     fireEvent.click(screen.getByText('datasetPipeline.operations.convert'))
-    expect(screen.getByTestId('confirm-modal')).toBeInTheDocument()
+    expect(screen.getByText('datasetPipeline.conversion.confirm.title')).toBeInTheDocument()
 
-    fireEvent.click(screen.getByTestId('cancel-btn'))
-    expect(screen.queryByTestId('confirm-modal')).not.toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+    return waitFor(() => {
+      expect(screen.queryByText('datasetPipeline.conversion.confirm.title')).not.toBeInTheDocument()
+    })
   })
 
   it('should call convert when confirm is clicked', () => {
     render(<Conversion />)
 
     fireEvent.click(screen.getByText('datasetPipeline.operations.convert'))
-    fireEvent.click(screen.getByTestId('confirm-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
 
     expect(mockConvert).toHaveBeenCalledWith('ds-123', expect.objectContaining({
       onSuccess: expect.any(Function),
@@ -150,7 +128,7 @@ describe('Conversion', () => {
     render(<Conversion />)
 
     fireEvent.click(screen.getByText('datasetPipeline.operations.convert'))
-    fireEvent.click(screen.getByTestId('confirm-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
 
     expect(mockToast.success).toHaveBeenCalledWith('datasetPipeline.conversion.successMessage')
     expect(mockInvalidDatasetDetail).toHaveBeenCalled()
@@ -164,7 +142,7 @@ describe('Conversion', () => {
     render(<Conversion />)
 
     fireEvent.click(screen.getByText('datasetPipeline.operations.convert'))
-    fireEvent.click(screen.getByTestId('confirm-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
 
     expect(mockToast.error).toHaveBeenCalledWith('datasetPipeline.conversion.errorMessage')
   })
@@ -177,7 +155,7 @@ describe('Conversion', () => {
     render(<Conversion />)
 
     fireEvent.click(screen.getByText('datasetPipeline.operations.convert'))
-    fireEvent.click(screen.getByTestId('confirm-btn'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
 
     expect(mockToast.error).toHaveBeenCalledWith('datasetPipeline.conversion.errorMessage')
   })
diff --git a/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
index c3341ecd83..0eec89b8b8 100644
--- a/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
@@ -472,21 +472,23 @@ describe('Conversion', () => {
       const convertButton = screen.getByRole('button', { name: /datasetPipeline\.operations\.convert/i })
       fireEvent.click(convertButton)
 
-      // Real Confirm renders title and content via portal
+      // AlertDialog renders title and content via portal.
       expect(screen.getByText('datasetPipeline.conversion.confirm.title')).toBeInTheDocument()
       expect(screen.getByText('datasetPipeline.conversion.confirm.content')).toBeInTheDocument()
     })
 
-    it('should hide confirm modal when cancel is clicked', () => {
+    it('should hide confirm modal when cancel is clicked', async () => {
       render(<Conversion />)
 
       const convertButton = screen.getByRole('button', { name: /datasetPipeline\.operations\.convert/i })
       fireEvent.click(convertButton)
       expect(screen.getByText('datasetPipeline.conversion.confirm.title')).toBeInTheDocument()
 
-      // Real Confirm renders cancel button with i18n text
+      // AlertDialog close is async because it unmounts after state updates.
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
-      expect(screen.queryByText('datasetPipeline.conversion.confirm.title')).not.toBeInTheDocument()
+      await waitFor(() => {
+        expect(screen.queryByText('datasetPipeline.conversion.confirm.title')).not.toBeInTheDocument()
+      })
     })
   })
 
diff --git a/web/app/components/rag-pipeline/components/conversion.tsx b/web/app/components/rag-pipeline/components/conversion.tsx
index a8f36d713d..27f25f6e2f 100644
--- a/web/app/components/rag-pipeline/components/conversion.tsx
+++ b/web/app/components/rag-pipeline/components/conversion.tsx
@@ -1,7 +1,15 @@
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useParams } from '@/next/navigation'
@@ -39,6 +47,8 @@ const Conversion = () => {
   const handleCancelConversion = useCallback(() => {
     setShowConfirmModal(false)
   }, [])
+  const confirmTitle = t('conversion.confirm.title', { ns: 'datasetPipeline' })
+  const confirmContent = t('conversion.confirm.content', { ns: 'datasetPipeline' })
   return (
     <div className="flex h-full w-full items-center justify-center bg-background-body p-6 pb-16">
       <div className="flex rounded-2xl border-[0.5px] border-components-card-border bg-components-card-bg shadow-sm shadow-shadow-shadow-4">
@@ -69,7 +79,26 @@ const Conversion = () => {
           </div>
         </div>
       </div>
-      {showConfirmModal && (<Confirm title={t('conversion.confirm.title', { ns: 'datasetPipeline' })} content={t('conversion.confirm.content', { ns: 'datasetPipeline' })} isShow={showConfirmModal} onConfirm={handleConvert} onCancel={handleCancelConversion} isLoading={isPending} isDisabled={isPending} />)}
+      <AlertDialog open={showConfirmModal} onOpenChange={open => !open && handleCancelConversion()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {confirmTitle}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {confirmContent}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton loading={isPending} disabled={isPending} onClick={handleConvert}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
index de2214d219..64a12edfec 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/index.spec.tsx
@@ -688,15 +688,11 @@ describe('publisher', () => {
           expect(screen.getByText('pipeline.common.confirmPublish')).toBeInTheDocument()
         })
 
-        const cancelButtons = screen.getAllByRole('button')
-        const cancelButton = cancelButtons.find(btn =>
-          btn.className.includes('cancel') || btn.textContent?.includes('Cancel'),
-        )
-        if (cancelButton)
-          fireEvent.click(cancelButton)
+        fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
 
-        // Note: This test verifies the confirm modal can be displayed
-        expect(screen.getByText('pipeline.common.confirmPublishContent')).toBeInTheDocument()
+        await waitFor(() => {
+          expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+        })
       })
 
       it('should publish when confirm is clicked in confirm modal', async () => {
@@ -711,7 +707,11 @@ describe('publisher', () => {
           expect(screen.getByText('pipeline.common.confirmPublish')).toBeInTheDocument()
         })
 
-        expect(screen.getByText('pipeline.common.confirmPublishContent')).toBeInTheDocument()
+        fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
+
+        await waitFor(() => {
+          expect(mockPublishWorkflow).toHaveBeenCalled()
+        })
       })
     })
 
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
index 6834552201..a0076996a3 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/__tests__/popup.spec.tsx
@@ -87,24 +87,6 @@ vi.mock('@/app/components/base/ui/button', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({ isShow, onConfirm, onCancel, title }: {
-    isShow: boolean
-    onConfirm: () => void
-    onCancel: () => void
-    title: string
-  }) =>
-    isShow
-      ? (
-          <div data-testid="confirm-modal">
-            <span>{title}</span>
-            <button data-testid="publish-confirm" onClick={onConfirm}>OK</button>
-            <button data-testid="publish-cancel" onClick={onCancel}>Cancel</button>
-          </div>
-        )
-      : null,
-}))
-
 vi.mock('@/app/components/base/divider', () => ({
   default: () => <hr />,
 }))
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index 68e59bafe8..70961c5ff9 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -5,10 +5,18 @@ import { useBoolean, useKeyPress } from 'ahooks'
 import { memo, useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { trackEvent } from '@/app/components/base/amplitude'
-import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import PremiumBadge from '@/app/components/base/premium-badge'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { useChecklistBeforePublish } from '@/app/components/workflow/hooks'
@@ -224,7 +232,29 @@ const Popup = () => {
           </div>
         </Button>
       </div>
-      {confirmVisible && (<Confirm isShow={confirmVisible} title={t('common.confirmPublish', { ns: 'pipeline' })} content={t('common.confirmPublishContent', { ns: 'pipeline' })} onCancel={hideConfirm} onConfirm={handlePublish} isDisabled={publishing} />)}
+      <AlertDialog open={confirmVisible} onOpenChange={open => !open && hideConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle
+              title={t('common.confirmPublish', { ns: 'pipeline' })}
+              className="w-full truncate title-2xl-semi-bold text-text-primary"
+            >
+              {t('common.confirmPublish', { ns: 'pipeline' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('common.confirmPublishContent', { ns: 'pipeline' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>
+              {t('operation.cancel', { ns: 'common' })}
+            </AlertDialogCancelButton>
+            <AlertDialogConfirmButton disabled={publishing} onClick={() => void handlePublish()}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
       {showPublishAsKnowledgePipelineModal && (<PublishAsKnowledgePipelineModal confirmDisabled={isPublishingAsCustomizedPipeline} onConfirm={handlePublishAsKnowledgePipeline} onCancel={hidePublishAsKnowledgePipelineModal} />)}
     </div>
   )
diff --git a/web/app/components/tools/mcp/__tests__/provider-card.spec.tsx b/web/app/components/tools/mcp/__tests__/provider-card.spec.tsx
index d8f644112e..fc4c07275a 100644
--- a/web/app/components/tools/mcp/__tests__/provider-card.spec.tsx
+++ b/web/app/components/tools/mcp/__tests__/provider-card.spec.tsx
@@ -49,31 +49,6 @@ vi.mock('../modal', () => ({
   },
 }))
 
-// Mock the Confirm dialog
-type ConfirmDialogProps = {
-  isShow: boolean
-  onConfirm: () => void
-  onCancel: () => void
-  isLoading: boolean
-}
-
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({ isShow, onConfirm, onCancel, isLoading }: ConfirmDialogProps) => {
-    if (!isShow)
-      return null
-    return (
-      <div data-testid="confirm-dialog">
-        <button data-testid="confirm-delete-btn" onClick={onConfirm} disabled={isLoading}>
-          {isLoading ? 'Deleting...' : 'Confirm Delete'}
-        </button>
-        <button data-testid="cancel-delete-btn" onClick={onCancel}>
-          Cancel
-        </button>
-      </div>
-    )
-  },
-}))
-
 // Mock the OperationDropdown
 type OperationDropdownProps = {
   onEdit: () => void
@@ -172,6 +147,9 @@ describe('MCPCard', () => {
     onDeleted: vi.fn(),
   }
 
+  const getDeleteConfirmButton = () => screen.getByRole('button', { name: 'common.operation.confirm' })
+  const getDeleteCancelButton = () => screen.getByRole('button', { name: 'common.operation.cancel' })
+
   beforeEach(() => {
     mockUpdateMCP.mockClear()
     mockDeleteMCP.mockClear()
@@ -450,7 +428,7 @@ describe('MCPCard', () => {
 
       // Confirm dialog should be shown
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
     })
 
@@ -462,15 +440,14 @@ describe('MCPCard', () => {
       fireEvent.click(removeBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
 
       // Cancel
-      const cancelBtn = screen.getByTestId('cancel-delete-btn')
-      fireEvent.click(cancelBtn)
+      fireEvent.click(getDeleteCancelButton())
 
       await waitFor(() => {
-        expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
+        expect(screen.queryByText('tools.mcp.delete')).not.toBeInTheDocument()
       })
     })
 
@@ -483,12 +460,11 @@ describe('MCPCard', () => {
       fireEvent.click(removeBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
 
       // Confirm delete
-      const confirmBtn = screen.getByTestId('confirm-delete-btn')
-      fireEvent.click(confirmBtn)
+      fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
         expect(mockDeleteMCP).toHaveBeenCalledWith('mcp-1')
@@ -506,12 +482,11 @@ describe('MCPCard', () => {
       fireEvent.click(removeBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
 
       // Confirm delete
-      const confirmBtn = screen.getByTestId('confirm-delete-btn')
-      fireEvent.click(confirmBtn)
+      fireEvent.click(getDeleteConfirmButton())
 
       await waitFor(() => {
         expect(mockDeleteMCP).toHaveBeenCalled()
diff --git a/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx b/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx
index 20a590459b..584c9d211a 100644
--- a/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx
+++ b/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx
@@ -84,20 +84,6 @@ vi.mock('../../modal', () => ({
   },
 }))
 
-// Mock Confirm dialog
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({ isShow, onConfirm, onCancel, title }: { isShow: boolean, onConfirm: () => void, onCancel: () => void, title: string }) => {
-    if (!isShow)
-      return null
-    return (
-      <div data-testid="confirm-dialog" data-title={title}>
-        <button data-testid="confirm-btn" onClick={onConfirm}>Confirm</button>
-        <button data-testid="cancel-btn" onClick={onCancel}>Cancel</button>
-      </div>
-    )
-  },
-}))
-
 // Mock OperationDropdown
 vi.mock('../operation-dropdown', () => ({
   default: ({ onEdit, onRemove }: { onEdit: () => void, onRemove: () => void }) => (
@@ -165,6 +151,9 @@ describe('MCPDetailContent', () => {
       React.createElement(QueryClientProvider, { client: queryClient }, children)
   }
 
+  const getConfirmButton = () => screen.getByRole('button', { name: 'common.operation.confirm' })
+  const getCancelButton = () => screen.getByRole('button', { name: 'common.operation.cancel' })
+
   const createMockDetail = (overrides = {}): ToolWithProvider => ({
     id: 'mcp-1',
     name: 'Test MCP Server',
@@ -494,7 +483,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(updateBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.toolUpdateConfirmTitle')).toBeInTheDocument()
       })
     })
 
@@ -514,12 +503,11 @@ describe('MCPDetailContent', () => {
       fireEvent.click(updateBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.toolUpdateConfirmTitle')).toBeInTheDocument()
       })
 
       // Confirm the update
-      const confirmBtn = screen.getByTestId('confirm-btn')
-      fireEvent.click(confirmBtn)
+      fireEvent.click(getConfirmButton())
 
       await waitFor(() => {
         expect(mockUpdateTools).toHaveBeenCalledWith('mcp-1')
@@ -636,7 +624,7 @@ describe('MCPDetailContent', () => {
       fireEvent.click(removeBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
     })
 
@@ -648,15 +636,14 @@ describe('MCPDetailContent', () => {
       fireEvent.click(removeBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
 
       // Cancel
-      const cancelBtn = screen.getByTestId('cancel-btn')
-      fireEvent.click(cancelBtn)
+      fireEvent.click(getCancelButton())
 
       await waitFor(() => {
-        expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
+        expect(screen.queryByText('tools.mcp.delete')).not.toBeInTheDocument()
       })
     })
 
@@ -669,12 +656,11 @@ describe('MCPDetailContent', () => {
       fireEvent.click(removeBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
 
       // Confirm delete
-      const confirmBtn = screen.getByTestId('confirm-btn')
-      fireEvent.click(confirmBtn)
+      fireEvent.click(getConfirmButton())
 
       await waitFor(() => {
         expect(mockDeleteMCP).toHaveBeenCalledWith('mcp-1')
@@ -692,12 +678,11 @@ describe('MCPDetailContent', () => {
       fireEvent.click(removeBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.delete')).toBeInTheDocument()
       })
 
       // Confirm delete
-      const confirmBtn = screen.getByTestId('confirm-btn')
-      fireEvent.click(confirmBtn)
+      fireEvent.click(getConfirmButton())
 
       await waitFor(() => {
         expect(mockDeleteMCP).toHaveBeenCalled()
@@ -840,15 +825,14 @@ describe('MCPDetailContent', () => {
       fireEvent.click(updateBtn)
 
       await waitFor(() => {
-        expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+        expect(screen.getByText('tools.mcp.toolUpdateConfirmTitle')).toBeInTheDocument()
       })
 
       // Cancel the update
-      const cancelBtn = screen.getByTestId('cancel-btn')
-      fireEvent.click(cancelBtn)
+      fireEvent.click(getCancelButton())
 
       await waitFor(() => {
-        expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
+        expect(screen.queryByText('tools.mcp.toolUpdateConfirmTitle')).not.toBeInTheDocument()
       })
     })
   })
diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index 4c95bd88f0..5c26bdcb7d 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -12,8 +12,16 @@ import * as React from 'react'
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Confirm from '@/app/components/base/confirm'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import Icon from '@/app/components/plugins/card/base/card-icon'
@@ -286,30 +294,42 @@ const MCPDetailContent: FC<Props> = ({
           onHide={hideUpdateModal}
         />
       )}
-      {isShowDeleteConfirm && (
-        <Confirm
-          isShow
-          title={t('mcp.delete', { ns: 'tools' })}
-          content={(
-            <div>
+      <AlertDialog open={isShowDeleteConfirm} onOpenChange={open => !open && hideDeleteConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('mcp.delete', { ns: 'tools' })}
+            </AlertDialogTitle>
+            <div className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
               {t('mcp.deleteConfirmTitle', { ns: 'tools', mcp: detail.name })}
             </div>
-          )}
-          onCancel={hideDeleteConfirm}
-          onConfirm={handleDelete}
-          isLoading={deleting}
-          isDisabled={deleting}
-        />
-      )}
-      {isShowUpdateConfirm && (
-        <Confirm
-          isShow
-          title={t('mcp.toolUpdateConfirmTitle', { ns: 'tools' })}
-          content={t('mcp.toolUpdateConfirmContent', { ns: 'tools' })}
-          onCancel={hideUpdateConfirm}
-          onConfirm={handleUpdateTools}
-        />
-      )}
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton loading={deleting} disabled={deleting} onClick={handleDelete}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
+      <AlertDialog open={isShowUpdateConfirm} onOpenChange={open => !open && hideUpdateConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('mcp.toolUpdateConfirmTitle', { ns: 'tools' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('mcp.toolUpdateConfirmContent', { ns: 'tools' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={handleUpdateTools}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   )
 }
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 9ff2c7b7b3..3de157e4ac 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -6,12 +6,20 @@ import type { AppSSO } from '@/types/app'
 import { RiEditLine, RiLoopLeftLine } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Divider from '@/app/components/base/divider'
 import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
 import Indicator from '@/app/components/header/indicator'
 import MCPServerModal from '@/app/components/tools/mcp/mcp-server-modal'
@@ -295,16 +303,24 @@ const MCPServiceCard: FC<IAppCardProps> = ({
         />
       )}
 
-      {showConfirmDelete && (
-        <Confirm
-          type="warning"
-          title={t('overview.appInfo.regenerate', { ns: 'appOverview' })}
-          content={t('mcp.server.reGen', { ns: 'tools' })}
-          isShow={showConfirmDelete}
-          onConfirm={onConfirmRegenerate}
-          onCancel={closeConfirmDelete}
-        />
-      )}
+      <AlertDialog open={showConfirmDelete} onOpenChange={open => !open && closeConfirmDelete()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('overview.appInfo.regenerate', { ns: 'appOverview' })}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {t('mcp.server.reGen', { ns: 'tools' })}
+            </AlertDialogDescription>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={onConfirmRegenerate}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   )
 }
diff --git a/web/app/components/tools/mcp/provider-card.tsx b/web/app/components/tools/mcp/provider-card.tsx
index d8a8e71a82..35b7e9f849 100644
--- a/web/app/components/tools/mcp/provider-card.tsx
+++ b/web/app/components/tools/mcp/provider-card.tsx
@@ -4,7 +4,14 @@ import { RiHammerFill } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import Indicator from '@/app/components/header/indicator'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 import { useAppContext } from '@/context/app-context'
@@ -87,34 +94,34 @@ const MCPCard = ({
           <Icon src={data.icon} />
         </div>
         <div className="grow">
-          <div className="system-md-semibold mb-1 truncate text-text-secondary" title={data.name}>{data.name}</div>
+          <div className="mb-1 truncate system-md-semibold text-text-secondary" title={data.name}>{data.name}</div>
           <div className="system-xs-regular text-text-tertiary">{data.server_identifier}</div>
         </div>
       </div>
-      <div className="flex items-center gap-1 rounded-b-xl pb-2.5 pl-4 pr-2.5 pt-1.5">
+      <div className="flex items-center gap-1 rounded-b-xl pt-1.5 pr-2.5 pb-2.5 pl-4">
         <div className="flex w-0 grow items-center gap-2">
           <div className="flex items-center gap-1">
             <RiHammerFill className="h-3 w-3 shrink-0 text-text-quaternary" />
             {data.tools.length > 0 && (
-              <div className="system-xs-regular shrink-0 text-text-tertiary">{t('mcp.toolsCount', { ns: 'tools', count: data.tools.length })}</div>
+              <div className="shrink-0 system-xs-regular text-text-tertiary">{t('mcp.toolsCount', { ns: 'tools', count: data.tools.length })}</div>
             )}
             {!data.tools.length && (
-              <div className="system-xs-regular shrink-0 text-text-tertiary">{t('mcp.noTools', { ns: 'tools' })}</div>
+              <div className="shrink-0 system-xs-regular text-text-tertiary">{t('mcp.noTools', { ns: 'tools' })}</div>
             )}
           </div>
           <div className={cn('system-xs-regular text-divider-deep', (!data.is_team_authorization || !data.tools.length) && 'sm:hidden')}>/</div>
-          <div className={cn('system-xs-regular truncate text-text-tertiary', (!data.is_team_authorization || !data.tools.length) && ' sm:hidden')} title={`${t('mcp.updateTime', { ns: 'tools' })} ${formatTimeFromNow(data.updated_at! * 1000)}`}>{`${t('mcp.updateTime', { ns: 'tools' })} ${formatTimeFromNow(data.updated_at! * 1000)}`}</div>
+          <div className={cn('truncate system-xs-regular text-text-tertiary', (!data.is_team_authorization || !data.tools.length) && 'sm:hidden')} title={`${t('mcp.updateTime', { ns: 'tools' })} ${formatTimeFromNow(data.updated_at! * 1000)}`}>{`${t('mcp.updateTime', { ns: 'tools' })} ${formatTimeFromNow(data.updated_at! * 1000)}`}</div>
         </div>
         {data.is_team_authorization && data.tools.length > 0 && <Indicator color="green" className="shrink-0" />}
         {(!data.is_team_authorization || !data.tools.length) && (
-          <div className="system-xs-medium flex shrink-0 items-center gap-1 rounded-md border border-util-colors-red-red-500 bg-components-badge-bg-red-soft px-1.5 py-0.5 text-util-colors-red-red-500">
+          <div className="flex shrink-0 items-center gap-1 rounded-md border border-util-colors-red-red-500 bg-components-badge-bg-red-soft px-1.5 py-0.5 system-xs-medium text-util-colors-red-red-500">
             {t('mcp.noConfigured', { ns: 'tools' })}
             <Indicator color="red" />
           </div>
         )}
       </div>
       {isCurrentWorkspaceManager && (
-        <div className={cn('absolute right-2.5 top-2.5 hidden group-hover:block', isOperationShow && 'block')} onClick={e => e.stopPropagation()}>
+        <div className={cn('absolute top-2.5 right-2.5 hidden group-hover:block', isOperationShow && 'block')} onClick={e => e.stopPropagation()}>
           <OperationDropdown
             inCard
             onOpenChange={setIsOperationShow}
@@ -131,21 +138,24 @@ const MCPCard = ({
           onHide={hideUpdateModal}
         />
       )}
-      {isShowDeleteConfirm && (
-        <Confirm
-          isShow
-          title={t('mcp.delete', { ns: 'tools' })}
-          content={(
-            <div>
+      <AlertDialog open={isShowDeleteConfirm} onOpenChange={open => !open && hideDeleteConfirm()}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {t('mcp.delete', { ns: 'tools' })}
+            </AlertDialogTitle>
+            <div className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
               {t('mcp.deleteConfirmTitle', { ns: 'tools', mcp: data.name })}
             </div>
-          )}
-          onCancel={hideDeleteConfirm}
-          onConfirm={handleDelete}
-          isLoading={deleting}
-          isDisabled={deleting}
-        />
-      )}
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton loading={deleting} disabled={deleting} onClick={handleDelete}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
diff --git a/web/app/components/tools/provider/__tests__/detail.spec.tsx b/web/app/components/tools/provider/__tests__/detail.spec.tsx
index db6bc033ca..1e3327232c 100644
--- a/web/app/components/tools/provider/__tests__/detail.spec.tsx
+++ b/web/app/components/tools/provider/__tests__/detail.spec.tsx
@@ -79,19 +79,6 @@ vi.mock('@/app/components/base/drawer', () => ({
     isOpen ? <div data-testid="drawer">{children}</div> : null,
 }))
 
-vi.mock('@/app/components/base/confirm', () => ({
-  default: ({ isShow, onConfirm, onCancel, title }: { isShow: boolean, onConfirm: () => void, onCancel: () => void, title: string }) =>
-    isShow
-      ? (
-          <div data-testid="confirm-dialog">
-            <span>{title}</span>
-            <button data-testid="confirm-btn" onClick={onConfirm}>Confirm</button>
-            <button data-testid="cancel-btn" onClick={onCancel}>Cancel</button>
-          </div>
-        )
-      : null,
-}))
-
 const mockToastSuccess = vi.hoisted(() => vi.fn())
 const mockToastError = vi.hoisted(() => vi.fn())
 vi.mock('@/app/components/base/ui/toast', () => ({
@@ -170,6 +157,9 @@ const createMockCollection = (overrides?: Partial<Collection>): Collection => ({
   ...overrides,
 })
 
+const getDeleteConfirmButton = () => screen.getByRole('button', { name: 'common.operation.confirm' })
+const getDeleteCancelButton = () => screen.getByRole('button', { name: 'common.operation.cancel' })
+
 describe('ProviderDetail', () => {
   const mockOnHide = vi.fn()
   const mockOnRefreshData = vi.fn()
@@ -552,9 +542,9 @@ describe('ProviderDetail', () => {
       })
       fireEvent.click(screen.getByText('tools.createTool.editAction'))
       fireEvent.click(screen.getByTestId('edit-remove'))
-      expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.deleteToolConfirmTitle')).toBeInTheDocument()
       await act(async () => {
-        fireEvent.click(screen.getByTestId('confirm-btn'))
+        fireEvent.click(getDeleteConfirmButton())
       })
       await waitFor(() => {
         expect(mockRemoveCustomCollection).toHaveBeenCalledWith('test-collection')
@@ -626,9 +616,9 @@ describe('ProviderDetail', () => {
       })
       fireEvent.click(screen.getByText('tools.createTool.editAction'))
       fireEvent.click(screen.getByTestId('wf-remove'))
-      expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.deleteToolConfirmTitle')).toBeInTheDocument()
       await act(async () => {
-        fireEvent.click(screen.getByTestId('confirm-btn'))
+        fireEvent.click(getDeleteConfirmButton())
       })
       await waitFor(() => {
         expect(mockDeleteWorkflowTool).toHaveBeenCalledWith('test-id')
@@ -710,9 +700,11 @@ describe('ProviderDetail', () => {
       })
       fireEvent.click(screen.getByText('tools.createTool.editAction'))
       fireEvent.click(screen.getByTestId('edit-remove'))
-      expect(screen.getByTestId('confirm-dialog')).toBeInTheDocument()
-      fireEvent.click(screen.getByTestId('cancel-btn'))
-      expect(screen.queryByTestId('confirm-dialog')).not.toBeInTheDocument()
+      expect(screen.getByText('tools.createTool.deleteToolConfirmTitle')).toBeInTheDocument()
+      fireEvent.click(getDeleteCancelButton())
+      await waitFor(() => {
+        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+      })
     })
   })
 })
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index 516e2bb946..5d191468c5 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -8,10 +8,18 @@ import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import Confirm from '@/app/components/base/confirm'
 import Drawer from '@/app/components/base/drawer'
 import { LinkExternal02, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import Loading from '@/app/components/base/loading'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { Button } from '@/app/components/base/ui/button'
 import { toast } from '@/app/components/base/ui/toast'
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -401,15 +409,24 @@ const ProviderDetail = ({
             onSave={updateWorkflowToolProvider}
           />
         )}
-        {showConfirmDelete && (
-          <Confirm
-            title={t('createTool.deleteToolConfirmTitle', { ns: 'tools' })}
-            content={t('createTool.deleteToolConfirmContent', { ns: 'tools' })}
-            isShow={showConfirmDelete}
-            onConfirm={handleConfirmDelete}
-            onCancel={() => setShowConfirmDelete(false)}
-          />
-        )}
+        <AlertDialog open={showConfirmDelete} onOpenChange={open => !open && setShowConfirmDelete(false)}>
+          <AlertDialogContent>
+            <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+              <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+                {t('createTool.deleteToolConfirmTitle', { ns: 'tools' })}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                {t('createTool.deleteToolConfirmContent', { ns: 'tools' })}
+              </AlertDialogDescription>
+            </div>
+            <AlertDialogActions>
+              <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+              <AlertDialogConfirmButton onClick={handleConfirmDelete}>
+                {t('operation.confirm', { ns: 'common' })}
+              </AlertDialogConfirmButton>
+            </AlertDialogActions>
+          </AlertDialogContent>
+        </AlertDialog>
       </div>
     </Drawer>
   )
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx
index 65607abf28..d124705cf1 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx
@@ -30,10 +30,10 @@ const WorkflowOnboardingModal: FC<WorkflowOnboardingModalProps> = ({
 
         <div className="pb-4">
           <div className="mb-6">
-            <DialogTitle className="mb-2 text-text-primary title-2xl-semi-bold">
+            <DialogTitle className="mb-2 title-2xl-semi-bold text-text-primary">
               {t('onboarding.title', { ns: 'workflow' })}
             </DialogTitle>
-            <DialogDescription className="leading-4 text-text-tertiary body-xs-regular">
+            <DialogDescription className="body-xs-regular leading-4 text-text-tertiary">
               {t('onboarding.description', { ns: 'workflow' })}
             </DialogDescription>
           </div>
@@ -47,7 +47,7 @@ const WorkflowOnboardingModal: FC<WorkflowOnboardingModalProps> = ({
 
       {/* TODO: reduce z-1002 to match base/ui primitives after legacy overlay migration completes */}
       <DialogPortal>
-        <div className="pointer-events-none fixed left-1/2 top-1/2 z-1002 flex -translate-x-1/2 translate-y-[165px] items-center gap-1 text-text-quaternary body-xs-regular">
+        <div className="pointer-events-none fixed top-1/2 left-1/2 z-1002 flex -translate-x-1/2 translate-y-[165px] items-center gap-1 body-xs-regular text-text-quaternary">
           <span>{t('onboarding.escTip.press', { ns: 'workflow' })}</span>
           <ShortcutsName keys={[t('onboarding.escTip.key', { ns: 'workflow' })]} textColor="secondary" />
           <span>{t('onboarding.escTip.toDismiss', { ns: 'workflow' })}</span>
diff --git a/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx b/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
index b926646433..7ad6d0c13d 100644
--- a/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
+++ b/web/app/components/workflow/__tests__/workflow-edge-events.spec.tsx
@@ -408,4 +408,46 @@ describe('Workflow edge event wiring', () => {
 
     expect(store.getState().edgeMenu).toBeUndefined()
   })
+
+  it('should render confirm description and clear showConfirm when cancelled', async () => {
+    const onConfirm = vi.fn()
+    const { store } = renderSubject({
+      initialStoreState: {
+        showConfirm: {
+          title: 'Confirm title',
+          desc: 'Confirm description',
+          onConfirm,
+        },
+      },
+    })
+
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument()
+    expect(screen.getByText('Confirm title')).toBeInTheDocument()
+    expect(screen.getByText('Confirm description')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+    await waitFor(() => {
+      expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+    })
+    expect(store.getState().showConfirm).toBeUndefined()
+    expect(onConfirm).not.toHaveBeenCalled()
+  })
+
+  it('should call showConfirm.onConfirm when confirm is clicked', () => {
+    const onConfirm = vi.fn()
+
+    renderSubject({
+      initialStoreState: {
+        showConfirm: {
+          title: 'Confirm title',
+          onConfirm,
+        },
+      },
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
+
+    expect(onConfirm).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 014193bc5c..f467a51160 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -23,6 +23,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import ReactFlow, {
   Background,
   ReactFlowProvider,
@@ -34,9 +35,17 @@ import ReactFlow, {
   useReactFlow,
   useStoreApi,
 } from 'reactflow'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { IS_DEV } from '@/config'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import dynamic from '@/next/dynamic'
 import {
   useAllBuiltInTools,
   useAllCustomTools,
@@ -103,10 +112,6 @@ import { WorkflowHistoryProvider } from './workflow-history-store'
 import 'reactflow/dist/style.css'
 import './style.css'
 
-const Confirm = dynamic(() => import('@/app/components/base/confirm'), {
-  ssr: false,
-})
-
 const nodeTypes = {
   [CUSTOM_NODE]: CustomNode,
   [CUSTOM_NOTE_NODE]: CustomNoteNode,
@@ -133,6 +138,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
   children,
   onWorkflowDataUpdate,
 }) => {
+  const { t } = useTranslation()
   const workflowContainerRef = useRef<HTMLDivElement>(null)
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
@@ -396,7 +402,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
       <SyncingDataModal />
       <CandidateNode />
       <div
-        className="pointer-events-none absolute left-0 top-0 z-10 flex w-12 items-center justify-center p-1 pl-2"
+        className="pointer-events-none absolute top-0 left-0 z-10 flex w-12 items-center justify-center p-1 pl-2"
         style={{ height: controlHeight }}
       >
         <Control />
@@ -407,17 +413,26 @@ export const Workflow: FC<WorkflowProps> = memo(({
       <EdgeContextmenu />
       <SelectionContextmenu />
       <HelpLine />
-      {
-        !!showConfirm && (
-          <Confirm
-            isShow
-            onCancel={() => setShowConfirm(undefined)}
-            onConfirm={showConfirm.onConfirm}
-            title={showConfirm.title}
-            content={showConfirm.desc}
-          />
-        )
-      }
+      <AlertDialog open={!!showConfirm} onOpenChange={open => !open && setShowConfirm(undefined)}>
+        <AlertDialogContent>
+          <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+            <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+              {showConfirm?.title}
+            </AlertDialogTitle>
+            {showConfirm?.desc && (
+              <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+                {showConfirm.desc}
+              </AlertDialogDescription>
+            )}
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton onClick={showConfirm?.onConfirm}>
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
       {children}
       <ReactFlow
         nodeTypes={nodeTypes}
diff --git a/web/app/components/workflow/nodes/_base/components/__tests__/remove-effect-var-confirm.spec.tsx b/web/app/components/workflow/nodes/_base/components/__tests__/remove-effect-var-confirm.spec.tsx
new file mode 100644
index 0000000000..652140c48f
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/__tests__/remove-effect-var-confirm.spec.tsx
@@ -0,0 +1,52 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import RemoveEffectVarConfirm from '../remove-effect-var-confirm'
+
+describe('RemoveEffectVarConfirm', () => {
+  it('should render title and content when open', () => {
+    render(
+      <RemoveEffectVarConfirm
+        isShow
+        onConfirm={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument()
+    expect(screen.getByText('workflow.common.effectVarConfirm.title')).toBeInTheDocument()
+    expect(screen.getByText('workflow.common.effectVarConfirm.content')).toBeInTheDocument()
+  })
+
+  it('should call onConfirm when confirm is clicked', () => {
+    const onConfirm = vi.fn()
+
+    render(
+      <RemoveEffectVarConfirm
+        isShow
+        onConfirm={onConfirm}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.confirm' }))
+
+    expect(onConfirm).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call onCancel when cancel is clicked', async () => {
+    const onCancel = vi.fn()
+
+    render(
+      <RemoveEffectVarConfirm
+        isShow
+        onConfirm={vi.fn()}
+        onCancel={onCancel}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+    await waitFor(() => {
+      expect(onCancel).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx b/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx
index 903801880d..a3c4e5b0ad 100644
--- a/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx
+++ b/web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx
@@ -2,7 +2,15 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 
 type Props = {
   isShow: boolean
@@ -17,15 +25,30 @@ const RemoveVarConfirm: FC<Props> = ({
   onCancel,
 }) => {
   const { t } = useTranslation()
+  const title = t(`${i18nPrefix}.title`, { ns: 'workflow' })
+  const content = t(`${i18nPrefix}.content`, { ns: 'workflow' })
 
   return (
-    <Confirm
-      isShow={isShow}
-      title={t(`${i18nPrefix}.title`, { ns: 'workflow' })}
-      content={t(`${i18nPrefix}.content`, { ns: 'workflow' })}
-      onConfirm={onConfirm}
-      onCancel={onCancel}
-    />
+    <AlertDialog open={isShow} onOpenChange={open => !open && onCancel()}>
+      <AlertDialogContent>
+        <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+          <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+            {title}
+          </AlertDialogTitle>
+          <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+            {content}
+          </AlertDialogDescription>
+        </div>
+        <AlertDialogActions>
+          <AlertDialogCancelButton>
+            {t('operation.cancel', { ns: 'common' })}
+          </AlertDialogCancelButton>
+          <AlertDialogConfirmButton onClick={onConfirm}>
+            {t('operation.confirm', { ns: 'common' })}
+          </AlertDialogConfirmButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 export default React.memo(RemoveVarConfirm)
diff --git a/web/docs/overlay-migration.md b/web/docs/overlay-migration.md
index 8d35e60982..d72e86404c 100644
--- a/web/docs/overlay-migration.md
+++ b/web/docs/overlay-migration.md
@@ -8,7 +8,6 @@ This document tracks the migration away from legacy overlay APIs.
   - `@/app/components/base/portal-to-follow-elem`
   - `@/app/components/base/tooltip`
   - `@/app/components/base/modal`
-  - `@/app/components/base/confirm`
   - `@/app/components/base/select` (including `custom` / `pure`)
   - `@/app/components/base/popover`
   - `@/app/components/base/dropdown`
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index 4efdaf36eb..6968859c1e 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -132,7 +132,10 @@
   },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
+    },
+    "perfectionist/sort-imports": {
+      "count": 1
     }
   },
   "app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx": {
@@ -281,7 +284,7 @@
   },
   "app/components/app-sidebar/dataset-info/dropdown.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "ts/no-explicit-any": {
       "count": 1
@@ -334,14 +337,6 @@
       "count": 1
     }
   },
-  "app/components/app/annotation/batch-action.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 7
@@ -364,11 +359,6 @@
       "count": 2
     }
   },
-  "app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -381,9 +371,6 @@
     }
   },
   "app/components/app/annotation/edit-annotation-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
     }
@@ -423,11 +410,6 @@
       "count": 8
     }
   },
-  "app/components/app/annotation/remove-annotation-confirm-modal/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/app/annotation/type.ts": {
     "erasable-syntax-only/enums": {
       "count": 2
@@ -437,9 +419,6 @@
     "erasable-syntax-only/enums": {
       "count": 1
     },
-    "no-restricted-imports": {
-      "count": 1
-    },
     "react/set-state-in-effect": {
       "count": 5
     },
@@ -469,9 +448,6 @@
     }
   },
   "app/components/app/app-publisher/features-wrapper.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 4
     }
@@ -586,9 +562,6 @@
   },
   "app/components/app/configuration/config-var/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     }
   },
@@ -699,7 +672,7 @@
   },
   "app/components/app/configuration/config/automatic/get-automatic-res.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "react/set-state-in-effect": {
       "count": 4
@@ -762,7 +735,7 @@
   },
   "app/components/app/configuration/config/code-generator/get-code-generator-res.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "react/set-state-in-effect": {
       "count": 4
@@ -1085,7 +1058,10 @@
   },
   "app/components/app/switch-app-modal/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
+    },
+    "perfectionist/sort-imports": {
+      "count": 1
     },
     "react/set-state-in-effect": {
       "count": 1
@@ -1387,21 +1363,12 @@
     }
   },
   "app/components/base/chat/chat-with-history/header-in-mobile.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
   },
   "app/components/base/chat/chat-with-history/header/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
       "count": 1
     },
     "ts/no-explicit-any": {
@@ -1448,7 +1415,7 @@
     }
   },
   "app/components/base/chat/chat-with-history/sidebar/index.tsx": {
-    "no-restricted-imports": {
+    "perfectionist/sort-imports": {
       "count": 1
     }
   },
@@ -1683,19 +1650,6 @@
       "count": 3
     }
   },
-  "app/components/base/confirm/index.stories.tsx": {
-    "no-console": {
-      "count": 4
-    },
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "app/components/base/confirm/index.tsx": {
-    "react/set-state-in-effect": {
-      "count": 2
-    }
-  },
   "app/components/base/content-dialog/index.stories.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -3296,7 +3250,7 @@
   },
   "app/components/base/tag-management/tag-item-editor.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -3709,7 +3663,7 @@
   },
   "app/components/datasets/create-from-pipeline/list/template-card/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/datasets/create-from-pipeline/list/template-card/operations.tsx": {
@@ -3986,10 +3940,7 @@
   },
   "app/components/datasets/documents/components/operations.tsx": {
     "no-restricted-imports": {
-      "count": 3
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
+      "count": 2
     }
   },
   "app/components/datasets/documents/components/rename-modal.tsx": {
@@ -4200,7 +4151,7 @@
     }
   },
   "app/components/datasets/documents/detail/completed/common/batch-action.tsx": {
-    "no-restricted-imports": {
+    "perfectionist/sort-imports": {
       "count": 1
     }
   },
@@ -4293,10 +4244,7 @@
   },
   "app/components/datasets/documents/detail/completed/segment-card/index.tsx": {
     "no-restricted-imports": {
-      "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
+      "count": 1
     }
   },
   "app/components/datasets/documents/detail/completed/segment-detail.tsx": {
@@ -4426,20 +4374,12 @@
   },
   "app/components/datasets/external-api/external-api-modal/index.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     },
     "react/set-state-in-effect": {
       "count": 1
     }
   },
-  "app/components/datasets/external-api/external-knowledge-api-card/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -4586,11 +4526,6 @@
       "count": 9
     }
   },
-  "app/components/datasets/list/dataset-card/components/dataset-card-modals.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/datasets/list/dataset-card/components/description.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -4695,7 +4630,10 @@
   },
   "app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
+    },
+    "perfectionist/sort-imports": {
+      "count": 1
     }
   },
   "app/components/datasets/metadata/metadata-dataset/field.tsx": {
@@ -4864,7 +4802,10 @@
   },
   "app/components/develop/secret-key/secret-key-modal.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
+    },
+    "perfectionist/sort-imports": {
+      "count": 1
     }
   },
   "app/components/develop/tag.tsx": {
@@ -5094,11 +5035,6 @@
       "count": 2
     }
   },
-  "app/components/header/account-setting/api-based-extension-page/item.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/api-based-extension-page/modal.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -5118,12 +5054,6 @@
     }
   },
   "app/components/header/account-setting/data-source-page-new/card.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -5298,7 +5228,7 @@
   },
   "app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     },
     "ts/no-explicit-any": {
       "count": 2
@@ -5502,7 +5432,7 @@
   },
   "app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "react/set-state-in-effect": {
       "count": 1
@@ -5821,7 +5751,7 @@
   },
   "app/components/plugins/plugin-auth/authorized/index.tsx": {
     "no-restricted-imports": {
-      "count": 3
+      "count": 2
     },
     "ts/no-explicit-any": {
       "count": 2
@@ -5954,10 +5884,7 @@
   },
   "app/components/plugins/plugin-detail-panel/endpoint-card.tsx": {
     "no-restricted-imports": {
-      "count": 2
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
+      "count": 1
     },
     "ts/no-explicit-any": {
       "count": 2
@@ -6075,11 +6002,6 @@
       "count": 1
     }
   },
-  "app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
   "app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -6212,7 +6134,7 @@
   },
   "app/components/plugins/plugin-item/action.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/plugins/plugin-item/index.tsx": {
@@ -6392,11 +6314,6 @@
       "count": 2
     }
   },
-  "app/components/rag-pipeline/components/conversion.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/rag-pipeline/components/panel/input-field/editor/form/hidden-fields.tsx": {
     "react/component-hook-factories": {
       "count": 1
@@ -6542,11 +6459,6 @@
       "count": 1
     }
   },
-  "app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -6760,7 +6672,7 @@
   },
   "app/components/tools/mcp/detail/content.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "ts/no-explicit-any": {
       "count": 3
@@ -6807,7 +6719,7 @@
   },
   "app/components/tools/mcp/mcp-service-card.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     }
   },
   "app/components/tools/mcp/modal.tsx": {
@@ -6816,15 +6728,6 @@
     }
   },
   "app/components/tools/mcp/provider-card.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 7
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 3
     }
@@ -6852,11 +6755,6 @@
       "count": 1
     }
   },
-  "app/components/tools/provider/detail.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/tools/provider/empty.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -6914,11 +6812,6 @@
       "count": 2
     }
   },
-  "app/components/workflow-app/components/workflow-onboarding-modal/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
   "app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 2
@@ -7371,9 +7264,6 @@
     }
   },
   "app/components/workflow/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -7724,11 +7614,6 @@
       "count": 1
     }
   },
-  "app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1
@@ -10363,9 +10248,6 @@
     }
   },
   "hooks/use-pay.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    },
     "react/set-state-in-effect": {
       "count": 4
     }
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index d449042542..d6b6f834a1 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -52,13 +52,6 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
     ],
     message: 'Deprecated: use @/app/components/base/ui/select instead. See issue #32767.',
   },
-  {
-    group: [
-      '**/base/confirm',
-      '**/base/confirm/index',
-    ],
-    message: 'Deprecated: use @/app/components/base/ui/alert-dialog instead. See issue #32767.',
-  },
   {
     group: [
       '**/base/popover',
diff --git a/web/hooks/use-pay.tsx b/web/hooks/use-pay.tsx
index 3a90a79805..237913b433 100644
--- a/web/hooks/use-pay.tsx
+++ b/web/hooks/use-pay.tsx
@@ -1,13 +1,22 @@
 'use client'
 
-import type { IConfirm } from '@/app/components/base/confirm'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Confirm from '@/app/components/base/confirm'
+import {
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
 import { useRouter, useSearchParams } from '@/next/navigation'
 import { useNotionBinding } from '@/service/use-common'
 
-type ConfirmType = Pick<IConfirm, 'type' | 'title' | 'content'>
+type ConfirmType = {
+  type: 'info' | 'warning'
+  title: string
+}
 
 const useAnthropicCheckPay = () => {
   const { t } = useTranslation()
@@ -96,16 +105,32 @@ export const CheckModal = () => {
   if (!confirmInfo || !showPayStatusModal)
     return null
 
+  const description = (confirmInfo as { desc?: string }).desc || ''
+
   return (
-    <Confirm
-      isShow
-      onCancel={handleCancelShowPayStatusModal}
-      onConfirm={handleCancelShowPayStatusModal}
-      showCancel={false}
-      type={confirmInfo.type === 'info' ? 'info' : 'warning'}
-      title={confirmInfo.title}
-      content={(confirmInfo as unknown as { desc: string }).desc || ''}
-      confirmText={(confirmInfo.type === 'info' && t('operation.ok', { ns: 'common' })) || ''}
-    />
+    <AlertDialog open={showPayStatusModal} onOpenChange={open => !open && handleCancelShowPayStatusModal()}>
+      <AlertDialogContent>
+        <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
+          <AlertDialogTitle className="w-full truncate title-2xl-semi-bold text-text-primary">
+            {confirmInfo.title}
+          </AlertDialogTitle>
+          {description && (
+            <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
+              {description}
+            </AlertDialogDescription>
+          )}
+        </div>
+        <AlertDialogActions>
+          <AlertDialogConfirmButton
+            tone={confirmInfo.type !== 'info' ? 'destructive' : 'default'}
+            onClick={handleCancelShowPayStatusModal}
+          >
+            {confirmInfo.type === 'info'
+              ? t('operation.ok', { ns: 'common' })
+              : t('operation.confirm', { ns: 'common' })}
+          </AlertDialogConfirmButton>
+        </AlertDialogActions>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }

From 62f42b3f241d8748ae3b530a133107190741f116 Mon Sep 17 00:00:00 2001
From: wdeveloper16 <wdeveloper16@protonmail.com>
Date: Tue, 14 Apr 2026 19:50:43 +0200
Subject: [PATCH 16/44] refactor: replace bare dict with dict[str, Any] in RAG
 and service unit tests (#35184)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../core/rag/datasource/keyword/jieba/test_jieba.py      | 3 ++-
 .../core/rag/datasource/test_datasource_retrieval.py     | 3 ++-
 .../indexing/processor/test_paragraph_index_processor.py | 9 +++++++--
 .../rag/indexing/processor/test_qa_index_processor.py    | 5 +++--
 .../core/rag/retrieval/test_dataset_retrieval.py         | 7 ++++---
 .../core/rag/retrieval/test_dataset_retrieval_methods.py | 3 ++-
 .../rag_pipeline/test_rag_pipeline_dsl_service.py        | 6 +++---
 api/tests/unit_tests/services/test_audio_service.py      | 7 ++++---
 api/tests/unit_tests/services/test_workflow_service.py   | 8 ++++----
 9 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/api/tests/unit_tests/core/rag/datasource/keyword/jieba/test_jieba.py b/api/tests/unit_tests/core/rag/datasource/keyword/jieba/test_jieba.py
index bbdd476914..136ac0c72a 100644
--- a/api/tests/unit_tests/core/rag/datasource/keyword/jieba/test_jieba.py
+++ b/api/tests/unit_tests/core/rag/datasource/keyword/jieba/test_jieba.py
@@ -1,5 +1,6 @@
 import json
 from types import SimpleNamespace
+from typing import Any
 from unittest.mock import MagicMock
 
 import pytest
@@ -57,7 +58,7 @@ class _FakeSelect:
         return self
 
 
-def _dataset_keyword_table(data_source_type: str = "database", keyword_table_dict: dict | None = None):
+def _dataset_keyword_table(data_source_type: str = "database", keyword_table_dict: dict[str, Any] | None = None):
     return SimpleNamespace(
         data_source_type=data_source_type,
         keyword_table_dict=keyword_table_dict,
diff --git a/api/tests/unit_tests/core/rag/datasource/test_datasource_retrieval.py b/api/tests/unit_tests/core/rag/datasource/test_datasource_retrieval.py
index 8b104597a8..0baf85c314 100644
--- a/api/tests/unit_tests/core/rag/datasource/test_datasource_retrieval.py
+++ b/api/tests/unit_tests/core/rag/datasource/test_datasource_retrieval.py
@@ -1,4 +1,5 @@
 from types import SimpleNamespace
+from typing import Any
 from unittest.mock import MagicMock, Mock, call, patch
 from uuid import uuid4
 
@@ -20,7 +21,7 @@ def create_mock_document(
     doc_id: str,
     score: float = 0.8,
     provider: str = "dify",
-    additional_metadata: dict | None = None,
+    additional_metadata: dict[str, Any] | None = None,
 ) -> Document:
     """
     Create a mock Document object for testing.
diff --git a/api/tests/unit_tests/core/rag/indexing/processor/test_paragraph_index_processor.py b/api/tests/unit_tests/core/rag/indexing/processor/test_paragraph_index_processor.py
index d4b987c832..7ae0da03ff 100644
--- a/api/tests/unit_tests/core/rag/indexing/processor/test_paragraph_index_processor.py
+++ b/api/tests/unit_tests/core/rag/indexing/processor/test_paragraph_index_processor.py
@@ -1,4 +1,5 @@
 from types import SimpleNamespace
+from typing import Any
 from unittest.mock import Mock, patch
 
 import pytest
@@ -71,7 +72,9 @@ class TestParagraphIndexProcessor:
         with pytest.raises(ValueError, match="No rules found in process rule"):
             processor.transform([Document(page_content="text", metadata={})], process_rule={"mode": "custom"})
 
-    def test_transform_validates_segmentation(self, processor: ParagraphIndexProcessor, process_rule: dict) -> None:
+    def test_transform_validates_segmentation(
+        self, processor: ParagraphIndexProcessor, process_rule: dict[str, Any]
+    ) -> None:
         rules_without_segmentation = SimpleNamespace(segmentation=None)
 
         with patch(
@@ -84,7 +87,9 @@ class TestParagraphIndexProcessor:
                     process_rule={"mode": "custom", "rules": {"enabled": True}},
                 )
 
-    def test_transform_builds_split_documents(self, processor: ParagraphIndexProcessor, process_rule: dict) -> None:
+    def test_transform_builds_split_documents(
+        self, processor: ParagraphIndexProcessor, process_rule: dict[str, Any]
+    ) -> None:
         source_document = Document(page_content="source", metadata={"dataset_id": "dataset-1", "document_id": "doc-1"})
         splitter = Mock()
         splitter.split_documents.return_value = [
diff --git a/api/tests/unit_tests/core/rag/indexing/processor/test_qa_index_processor.py b/api/tests/unit_tests/core/rag/indexing/processor/test_qa_index_processor.py
index b1b1835a52..bfae9001b7 100644
--- a/api/tests/unit_tests/core/rag/indexing/processor/test_qa_index_processor.py
+++ b/api/tests/unit_tests/core/rag/indexing/processor/test_qa_index_processor.py
@@ -1,4 +1,5 @@
 from types import SimpleNamespace
+from typing import Any
 from unittest.mock import MagicMock, Mock, patch
 
 import pandas as pd
@@ -77,7 +78,7 @@ class TestQAIndexProcessor:
             processor.transform([Document(page_content="text", metadata={})], process_rule={"mode": "custom"})
 
     def test_transform_preview_calls_formatter_once(
-        self, processor: QAIndexProcessor, process_rule: dict, fake_flask_app
+        self, processor: QAIndexProcessor, process_rule: dict[str, Any], fake_flask_app
     ) -> None:
         document = Document(page_content="raw text", metadata={"dataset_id": "dataset-1", "document_id": "doc-1"})
         split_node = Document(page_content=".question", metadata={})
@@ -119,7 +120,7 @@ class TestQAIndexProcessor:
         mock_format.assert_called_once()
 
     def test_transform_non_preview_uses_thread_batches(
-        self, processor: QAIndexProcessor, process_rule: dict, fake_flask_app
+        self, processor: QAIndexProcessor, process_rule: dict[str, Any], fake_flask_app
     ) -> None:
         documents = [
             Document(page_content="doc-1", metadata={"document_id": "doc-1", "dataset_id": "dataset-1"}),
diff --git a/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval.py b/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval.py
index 1b17cbc368..508fe80e2b 100644
--- a/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval.py
+++ b/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval.py
@@ -1,6 +1,7 @@
 import threading
 from contextlib import contextmanager, nullcontext
 from types import SimpleNamespace
+from typing import Any
 from unittest.mock import MagicMock, Mock, patch
 from uuid import uuid4
 
@@ -45,7 +46,7 @@ def create_mock_document(
     doc_id: str,
     score: float = 0.8,
     provider: str = "dify",
-    additional_metadata: dict | None = None,
+    additional_metadata: dict[str, Any] | None = None,
 ) -> Document:
     """
     Create a mock Document object for testing.
@@ -2021,7 +2022,7 @@ def create_mock_document_methods(
     doc_id: str,
     score: float = 0.8,
     provider: str = "dify",
-    additional_metadata: dict | None = None,
+    additional_metadata: dict[str, Any] | None = None,
 ) -> Document:
     """
     Create a mock Document object for testing.
@@ -4091,7 +4092,7 @@ def _doc(
     dataset_id: str = "dataset-1",
     document_id: str = "document-1",
     doc_id: str = "node-1",
-    extra: dict | None = None,
+    extra: dict[str, Any] | None = None,
 ) -> Document:
     metadata = {
         "score": score,
diff --git a/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval_methods.py b/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval_methods.py
index 48782515d0..90feb4cf01 100644
--- a/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval_methods.py
+++ b/api/tests/unit_tests/core/rag/retrieval/test_dataset_retrieval_methods.py
@@ -1,3 +1,4 @@
+from typing import Any
 from unittest.mock import MagicMock, Mock, patch
 from uuid import uuid4
 
@@ -55,7 +56,7 @@ def create_mock_document(
     doc_id: str,
     score: float = 0.8,
     provider: str = "dify",
-    additional_metadata: dict | None = None,
+    additional_metadata: dict[str, Any] | None = None,
 ) -> Document:
     """
     Create a mock Document object for testing.
diff --git a/api/tests/unit_tests/services/rag_pipeline/test_rag_pipeline_dsl_service.py b/api/tests/unit_tests/services/rag_pipeline/test_rag_pipeline_dsl_service.py
index 6813a1bf2a..434a99b5ae 100644
--- a/api/tests/unit_tests/services/rag_pipeline/test_rag_pipeline_dsl_service.py
+++ b/api/tests/unit_tests/services/rag_pipeline/test_rag_pipeline_dsl_service.py
@@ -1,5 +1,5 @@
 from types import SimpleNamespace
-from typing import cast
+from typing import Any, cast
 from unittest.mock import MagicMock, Mock
 
 import pytest
@@ -558,7 +558,7 @@ def test_append_workflow_export_data_filters_credentials(mocker) -> None:
         "services.rag_pipeline.rag_pipeline_dsl_service.DependenciesAnalysisService.generate_dependencies",
         return_value=[],
     )
-    export_data: dict = {}
+    export_data: dict[str, Any] = {}
     pipeline = Mock(id="p1", tenant_id="t1")
 
     service._append_workflow_export_data(export_data=export_data, pipeline=pipeline, include_secret=False)
@@ -641,7 +641,7 @@ def test_append_workflow_export_data_encrypts_knowledge_retrieval_dataset_ids(mo
         "services.rag_pipeline.rag_pipeline_dsl_service.DependenciesAnalysisService.generate_dependencies",
         return_value=[],
     )
-    export_data: dict = {}
+    export_data: dict[str, Any] = {}
     pipeline = Mock(id="p1", tenant_id="t1")
 
     service._append_workflow_export_data(export_data=export_data, pipeline=pipeline, include_secret=False)
diff --git a/api/tests/unit_tests/services/test_audio_service.py b/api/tests/unit_tests/services/test_audio_service.py
index af8fc1e84f..83258fd1b7 100644
--- a/api/tests/unit_tests/services/test_audio_service.py
+++ b/api/tests/unit_tests/services/test_audio_service.py
@@ -53,6 +53,7 @@ Tests available voice retrieval:
 - text_to_speech: Enables TTS functionality
 """
 
+from typing import Any
 from unittest.mock import MagicMock, Mock, create_autospec, patch
 
 import pytest
@@ -109,7 +110,7 @@ class AudioServiceTestDataFactory:
         return app
 
     @staticmethod
-    def create_workflow_mock(features_dict: dict | None = None, **kwargs) -> Mock:
+    def create_workflow_mock(features_dict: dict[str, Any] | None = None, **kwargs) -> Mock:
         """
         Create a mock Workflow object.
 
@@ -128,8 +129,8 @@ class AudioServiceTestDataFactory:
 
     @staticmethod
     def create_app_model_config_mock(
-        speech_to_text_dict: dict | None = None,
-        text_to_speech_dict: dict | None = None,
+        speech_to_text_dict: dict[str, Any] | None = None,
+        text_to_speech_dict: dict[str, Any] | None = None,
         **kwargs,
     ) -> Mock:
         """
diff --git a/api/tests/unit_tests/services/test_workflow_service.py b/api/tests/unit_tests/services/test_workflow_service.py
index 406b4fb9d0..7906daacfc 100644
--- a/api/tests/unit_tests/services/test_workflow_service.py
+++ b/api/tests/unit_tests/services/test_workflow_service.py
@@ -94,8 +94,8 @@ class TestWorkflowAssociatedDataFactory:
         app_id: str = "app-123",
         version: str = Workflow.VERSION_DRAFT,
         workflow_type: str = WorkflowType.WORKFLOW.value,
-        graph: dict | None = None,
-        features: dict | None = None,
+        graph: dict[str, Any] | None = None,
+        features: dict[str, Any] | None = None,
         unique_hash: str | None = None,
         **kwargs,
     ) -> MagicMock:
@@ -1686,7 +1686,7 @@ class TestWorkflowServiceCredentialValidation:
         """Missing provider or model in node_data should be a no-op."""
         # Arrange
         workflow = self._make_workflow([])
-        node_data: dict = {}  # no model key
+        node_data: dict[str, Any] = {}  # no model key
 
         # Act + Assert (no error expected)
         service._validate_load_balancing_credentials(workflow, node_data, "node-1")
@@ -2269,7 +2269,7 @@ class TestRebuildFileForUserInputsInStartNode:
         # Arrange
         file_var = self._make_variable("attachment", VariableEntityType.FILE)
         start_data = self._make_start_node_data([file_var])
-        user_inputs: dict = {}  # attachment not provided
+        user_inputs: dict[str, Any] = {}  # attachment not provided
 
         # Act
         result = _rebuild_file_for_user_inputs_in_start_node(

From 2fd5b76ac1c9e3034dcb16242a54e890c4724b1d Mon Sep 17 00:00:00 2001
From: wdeveloper16 <wdeveloper16@protonmail.com>
Date: Tue, 14 Apr 2026 19:51:02 +0200
Subject: [PATCH 17/44] refactor: replace bare dict with dict[str, Any] in
 enterprise telemetry, external data tool, and moderation tests (#35185)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../core/external_data_tool/test_base.py      | 18 +++++++++-------
 .../moderation/test_content_moderation.py     | 13 ++++++------
 .../telemetry/test_enterprise_trace.py        | 21 ++++++++++---------
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/api/tests/unit_tests/core/external_data_tool/test_base.py b/api/tests/unit_tests/core/external_data_tool/test_base.py
index 216cda83c5..63e887f904 100644
--- a/api/tests/unit_tests/core/external_data_tool/test_base.py
+++ b/api/tests/unit_tests/core/external_data_tool/test_base.py
@@ -1,3 +1,5 @@
+from typing import Any
+
 import pytest
 
 from core.extension.extensible import ExtensionModule
@@ -12,10 +14,10 @@ class TestExternalDataTool:
         # Create a concrete subclass to test init
         class ConcreteTool(ExternalDataTool):
             @classmethod
-            def validate_config(cls, tenant_id: str, config: dict):
+            def validate_config(cls, tenant_id: str, config: dict[str, Any]):
                 return super().validate_config(tenant_id, config)
 
-            def query(self, inputs: dict, query: str | None = None) -> str:
+            def query(self, inputs: dict[str, Any], query: str | None = None) -> str:
                 return super().query(inputs, query)
 
         tool = ConcreteTool(tenant_id="tenant_1", app_id="app_1", variable="var_1", config={"key": "value"})
@@ -28,10 +30,10 @@ class TestExternalDataTool:
         # Create a concrete subclass to test init
         class ConcreteTool(ExternalDataTool):
             @classmethod
-            def validate_config(cls, tenant_id: str, config: dict):
+            def validate_config(cls, tenant_id: str, config: dict[str, Any]):
                 pass
 
-            def query(self, inputs: dict, query: str | None = None) -> str:
+            def query(self, inputs: dict[str, Any], query: str | None = None) -> str:
                 return ""
 
         tool = ConcreteTool(tenant_id="tenant_1", app_id="app_1", variable="var_1")
@@ -43,10 +45,10 @@ class TestExternalDataTool:
     def test_validate_config_raises_not_implemented(self):
         class ConcreteTool(ExternalDataTool):
             @classmethod
-            def validate_config(cls, tenant_id: str, config: dict):
+            def validate_config(cls, tenant_id: str, config: dict[str, Any]):
                 return super().validate_config(tenant_id, config)
 
-            def query(self, inputs: dict, query: str | None = None) -> str:
+            def query(self, inputs: dict[str, Any], query: str | None = None) -> str:
                 return ""
 
         with pytest.raises(NotImplementedError):
@@ -55,10 +57,10 @@ class TestExternalDataTool:
     def test_query_raises_not_implemented(self):
         class ConcreteTool(ExternalDataTool):
             @classmethod
-            def validate_config(cls, tenant_id: str, config: dict):
+            def validate_config(cls, tenant_id: str, config: dict[str, Any]):
                 pass
 
-            def query(self, inputs: dict, query: str | None = None) -> str:
+            def query(self, inputs: dict[str, Any], query: str | None = None) -> str:
                 return super().query(inputs, query)
 
         tool = ConcreteTool(tenant_id="tenant_1", app_id="app_1", variable="var_1")
diff --git a/api/tests/unit_tests/core/moderation/test_content_moderation.py b/api/tests/unit_tests/core/moderation/test_content_moderation.py
index 3a97ad5c5d..4c668ee96b 100644
--- a/api/tests/unit_tests/core/moderation/test_content_moderation.py
+++ b/api/tests/unit_tests/core/moderation/test_content_moderation.py
@@ -10,6 +10,7 @@ This module tests all aspects of the content moderation system including:
 - Configuration validation
 """
 
+from typing import Any
 from unittest.mock import MagicMock, Mock, patch
 
 import pytest
@@ -28,7 +29,7 @@ class TestKeywordsModeration:
     """Test suite for custom keyword-based content moderation."""
 
     @pytest.fixture
-    def keywords_config(self) -> dict:
+    def keywords_config(self) -> dict[str, Any]:
         """
         Fixture providing a standard keywords moderation configuration.
 
@@ -48,7 +49,7 @@ class TestKeywordsModeration:
         }
 
     @pytest.fixture
-    def keywords_moderation(self, keywords_config: dict) -> KeywordsModeration:
+    def keywords_moderation(self, keywords_config: dict[str, Any]) -> KeywordsModeration:
         """
         Fixture providing a KeywordsModeration instance.
 
@@ -64,7 +65,7 @@ class TestKeywordsModeration:
             config=keywords_config,
         )
 
-    def test_validate_config_success(self, keywords_config: dict):
+    def test_validate_config_success(self, keywords_config: dict[str, Any]):
         """Test successful validation of keywords moderation configuration."""
         # Should not raise any exception
         KeywordsModeration.validate_config("test-tenant", keywords_config)
@@ -274,7 +275,7 @@ class TestOpenAIModeration:
     """Test suite for OpenAI-based content moderation."""
 
     @pytest.fixture
-    def openai_config(self) -> dict:
+    def openai_config(self) -> dict[str, Any]:
         """
         Fixture providing OpenAI moderation configuration.
 
@@ -293,7 +294,7 @@ class TestOpenAIModeration:
         }
 
     @pytest.fixture
-    def openai_moderation(self, openai_config: dict) -> OpenAIModeration:
+    def openai_moderation(self, openai_config: dict[str, Any]) -> OpenAIModeration:
         """
         Fixture providing an OpenAIModeration instance.
 
@@ -309,7 +310,7 @@ class TestOpenAIModeration:
             config=openai_config,
         )
 
-    def test_validate_config_success(self, openai_config: dict):
+    def test_validate_config_success(self, openai_config: dict[str, Any]):
         """Test successful validation of OpenAI moderation configuration."""
         # Should not raise any exception
         OpenAIModeration.validate_config("test-tenant", openai_config)
diff --git a/api/tests/unit_tests/enterprise/telemetry/test_enterprise_trace.py b/api/tests/unit_tests/enterprise/telemetry/test_enterprise_trace.py
index bb1f78b80c..1ce9581aa1 100644
--- a/api/tests/unit_tests/enterprise/telemetry/test_enterprise_trace.py
+++ b/api/tests/unit_tests/enterprise/telemetry/test_enterprise_trace.py
@@ -4,6 +4,7 @@ from __future__ import annotations
 
 import json
 from datetime import UTC, datetime
+from typing import Any
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -57,7 +58,7 @@ _T1 = datetime(2024, 1, 10, 12, 0, 5, tzinfo=UTC)
 
 
 def make_workflow_info(**overrides) -> WorkflowTraceInfo:
-    defaults: dict = {
+    defaults: dict[str, Any] = {
         "workflow_id": "wf-001",
         "tenant_id": "tenant-abc",
         "workflow_run_id": "run-001",
@@ -86,7 +87,7 @@ def make_workflow_info(**overrides) -> WorkflowTraceInfo:
 
 
 def make_node_info(**overrides) -> WorkflowNodeTraceInfo:
-    defaults: dict = {
+    defaults: dict[str, Any] = {
         "workflow_id": "wf-001",
         "workflow_run_id": "run-001",
         "tenant_id": "tenant-abc",
@@ -115,7 +116,7 @@ def make_node_info(**overrides) -> WorkflowNodeTraceInfo:
 
 
 def make_draft_node_info(**overrides) -> DraftNodeExecutionTrace:
-    defaults: dict = {
+    defaults: dict[str, Any] = {
         "workflow_id": "wf-001",
         "workflow_run_id": "run-draft-001",
         "tenant_id": "tenant-abc",
@@ -136,7 +137,7 @@ def make_draft_node_info(**overrides) -> DraftNodeExecutionTrace:
 
 
 def make_message_info(**overrides) -> MessageTraceInfo:
-    defaults: dict = {
+    defaults: dict[str, Any] = {
         "message_id": "msg-001",
         "conversation_model": "gpt-4",
         "message_tokens": 40,
@@ -161,7 +162,7 @@ def make_message_info(**overrides) -> MessageTraceInfo:
 
 
 def make_tool_info(**overrides) -> ToolTraceInfo:
-    defaults: dict = {
+    defaults: dict[str, Any] = {
         "message_id": "msg-001",
         "tool_name": "web_search",
         "tool_inputs": {"query": "test"},
@@ -176,7 +177,7 @@ def make_tool_info(**overrides) -> ToolTraceInfo:
 
 
 def make_moderation_info(**overrides) -> ModerationTraceInfo:
-    defaults: dict = {
+    defaults: dict[str, Any] = {
         "message_id": "msg-001",
         "flagged": False,
         "action": "pass",
@@ -189,7 +190,7 @@ def make_moderation_info(**overrides) -> ModerationTraceInfo:
 
 
 def make_suggested_question_info(**overrides) -> SuggestedQuestionTraceInfo:
-    defaults: dict = {
+    defaults: dict[str, Any] = {
         "message_id": "msg-001",
         "total_tokens": 30,
         "suggested_question": ["Question A?", "Question B?"],
@@ -206,7 +207,7 @@ def make_suggested_question_info(**overrides) -> SuggestedQuestionTraceInfo:
 
 
 def make_dataset_retrieval_info(**overrides) -> DatasetRetrievalTraceInfo:
-    defaults: dict = {
+    defaults: dict[str, Any] = {
         "message_id": "msg-001",
         "documents": [
             {
@@ -236,7 +237,7 @@ def make_dataset_retrieval_info(**overrides) -> DatasetRetrievalTraceInfo:
 
 
 def make_generate_name_info(**overrides) -> GenerateNameTraceInfo:
-    defaults: dict = {
+    defaults: dict[str, Any] = {
         "message_id": "msg-001",
         "tenant_id": "tenant-abc",
         "conversation_id": "conv-001",
@@ -251,7 +252,7 @@ def make_generate_name_info(**overrides) -> GenerateNameTraceInfo:
 
 
 def make_prompt_generation_info(**overrides) -> PromptGenerationTraceInfo:
-    defaults: dict = {
+    defaults: dict[str, Any] = {
         "tenant_id": "tenant-abc",
         "user_id": "user-001",
         "app_id": "app-001",

From 1bcc7f78c72f030469b473532dfa7ab165643794 Mon Sep 17 00:00:00 2001
From: wdeveloper16 <wdeveloper16@protonmail.com>
Date: Tue, 14 Apr 2026 19:51:25 +0200
Subject: [PATCH 18/44] refactor: replace bare dict with dict[str, Any] in
 models, providers, extensions, libs, and test utilities (#35186)

---
 api/extensions/storage/opendal_storage.py                  | 3 ++-
 api/models/dataset.py                                      | 6 +++---
 api/models/model.py                                        | 4 ++--
 api/models/oauth.py                                        | 7 ++++---
 api/models/source.py                                       | 2 +-
 .../src/dify_vdb_elasticsearch/elasticsearch_ja_vector.py  | 2 +-
 .../vdb-pgvecto-rs/src/dify_vdb_pgvecto_rs/collection.py   | 3 ++-
 .../vdb-pgvecto-rs/src/dify_vdb_pgvecto_rs/pgvecto_rs.py   | 2 +-
 .../entities/knowledge_entities/knowledge_entities.py      | 2 +-
 api/tests/unit_tests/core/tools/test_custom_tool.py        | 3 ++-
 .../core/tools/utils/test_message_transformer.py           | 4 +++-
 .../core/tools/utils/test_model_invocation_utils.py        | 3 ++-
 api/tests/unit_tests/libs/test_pyrefly_type_coverage.py    | 5 +++--
 api/tests/unit_tests/libs/test_sendgrid_client.py          | 3 ++-
 api/tests/unit_tests/libs/test_smtp_client.py              | 3 ++-
 api/tests/unit_tests/tools/test_mcp_tool.py                | 3 ++-
 16 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/api/extensions/storage/opendal_storage.py b/api/extensions/storage/opendal_storage.py
index 96f5915ff0..cd7f7db295 100644
--- a/api/extensions/storage/opendal_storage.py
+++ b/api/extensions/storage/opendal_storage.py
@@ -2,6 +2,7 @@ import logging
 import os
 from collections.abc import Generator
 from pathlib import Path
+from typing import Any
 
 import opendal
 from dotenv import dotenv_values
@@ -19,7 +20,7 @@ def _get_opendal_kwargs(*, scheme: str, env_file_path: str = ".env", prefix: str
         if key.startswith(config_prefix):
             kwargs[key[len(config_prefix) :].lower()] = value
 
-    file_env_vars: dict = dotenv_values(env_file_path) or {}
+    file_env_vars: dict[str, Any] = dotenv_values(env_file_path) or {}
     for key, value in file_env_vars.items():
         if key.startswith(config_prefix) and key[len(config_prefix) :].lower() not in kwargs and value:
             kwargs[key[len(config_prefix) :].lower()] = value
diff --git a/api/models/dataset.py b/api/models/dataset.py
index a48afa7ea7..4540c29206 100644
--- a/api/models/dataset.py
+++ b/api/models/dataset.py
@@ -1551,7 +1551,7 @@ class PipelineBuiltInTemplate(TypeBase):
     name: Mapped[str] = mapped_column(sa.String(255), nullable=False)
     description: Mapped[str] = mapped_column(LongText, nullable=False)
     chunk_structure: Mapped[str] = mapped_column(sa.String(255), nullable=False)
-    icon: Mapped[dict] = mapped_column(sa.JSON, nullable=False)
+    icon: Mapped[dict[str, Any]] = mapped_column(sa.JSON, nullable=False)
     yaml_content: Mapped[str] = mapped_column(LongText, nullable=False)
     copyright: Mapped[str] = mapped_column(sa.String(255), nullable=False)
     privacy_policy: Mapped[str] = mapped_column(sa.String(255), nullable=False)
@@ -1584,7 +1584,7 @@ class PipelineCustomizedTemplate(TypeBase):
     name: Mapped[str] = mapped_column(sa.String(255), nullable=False)
     description: Mapped[str] = mapped_column(LongText, nullable=False)
     chunk_structure: Mapped[str] = mapped_column(sa.String(255), nullable=False)
-    icon: Mapped[dict] = mapped_column(sa.JSON, nullable=False)
+    icon: Mapped[dict[str, Any]] = mapped_column(sa.JSON, nullable=False)
     position: Mapped[int] = mapped_column(sa.Integer, nullable=False)
     yaml_content: Mapped[str] = mapped_column(LongText, nullable=False)
     install_count: Mapped[int] = mapped_column(sa.Integer, nullable=False)
@@ -1657,7 +1657,7 @@ class DocumentPipelineExecutionLog(TypeBase):
     datasource_type: Mapped[str] = mapped_column(sa.String(255), nullable=False)
     datasource_info: Mapped[str] = mapped_column(LongText, nullable=False)
     datasource_node_id: Mapped[str] = mapped_column(sa.String(255), nullable=False)
-    input_data: Mapped[dict] = mapped_column(sa.JSON, nullable=False)
+    input_data: Mapped[dict[str, Any]] = mapped_column(sa.JSON, nullable=False)
     created_by: Mapped[str | None] = mapped_column(StringUUID, nullable=True)
     created_at: Mapped[datetime] = mapped_column(
         sa.DateTime, nullable=False, server_default=func.current_timestamp(), init=False
diff --git a/api/models/model.py b/api/models/model.py
index 47b096d0bf..8eabf45363 100644
--- a/api/models/model.py
+++ b/api/models/model.py
@@ -1007,7 +1007,7 @@ class OAuthProviderApp(TypeBase):
     app_icon: Mapped[str] = mapped_column(String(255), nullable=False)
     client_id: Mapped[str] = mapped_column(String(255), nullable=False)
     client_secret: Mapped[str] = mapped_column(String(255), nullable=False)
-    app_label: Mapped[dict] = mapped_column(sa.JSON, nullable=False, default_factory=dict)
+    app_label: Mapped[dict[str, Any]] = mapped_column(sa.JSON, nullable=False, default_factory=dict)
     redirect_uris: Mapped[list] = mapped_column(sa.JSON, nullable=False, default_factory=list)
     scope: Mapped[str] = mapped_column(
         String(255),
@@ -2495,7 +2495,7 @@ class TraceAppConfig(TypeBase):
     )
     app_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     tracing_provider: Mapped[str | None] = mapped_column(String(255), nullable=True)
-    tracing_config: Mapped[dict | None] = mapped_column(sa.JSON, nullable=True)
+    tracing_config: Mapped[dict[str, Any] | None] = mapped_column(sa.JSON, nullable=True)
     created_at: Mapped[datetime] = mapped_column(
         sa.DateTime, nullable=False, server_default=func.current_timestamp(), init=False
     )
diff --git a/api/models/oauth.py b/api/models/oauth.py
index 1db2552469..bd04d890d3 100644
--- a/api/models/oauth.py
+++ b/api/models/oauth.py
@@ -1,4 +1,5 @@
 from datetime import datetime
+from typing import Any
 
 import sqlalchemy as sa
 from sqlalchemy import func
@@ -22,7 +23,7 @@ class DatasourceOauthParamConfig(TypeBase):
     )
     plugin_id: Mapped[str] = mapped_column(sa.String(255), nullable=False)
     provider: Mapped[str] = mapped_column(sa.String(255), nullable=False)
-    system_credentials: Mapped[dict] = mapped_column(AdjustedJSON, nullable=False)
+    system_credentials: Mapped[dict[str, Any]] = mapped_column(AdjustedJSON, nullable=False)
 
 
 class DatasourceProvider(TypeBase):
@@ -40,7 +41,7 @@ class DatasourceProvider(TypeBase):
     provider: Mapped[str] = mapped_column(sa.String(128), nullable=False)
     plugin_id: Mapped[str] = mapped_column(sa.String(255), nullable=False)
     auth_type: Mapped[str] = mapped_column(sa.String(255), nullable=False)
-    encrypted_credentials: Mapped[dict] = mapped_column(AdjustedJSON, nullable=False)
+    encrypted_credentials: Mapped[dict[str, Any]] = mapped_column(AdjustedJSON, nullable=False)
     avatar_url: Mapped[str] = mapped_column(LongText, nullable=True, default="default")
     is_default: Mapped[bool] = mapped_column(sa.Boolean, nullable=False, server_default=sa.text("false"), default=False)
     expires_at: Mapped[int] = mapped_column(sa.Integer, nullable=False, server_default="-1", default=-1)
@@ -70,7 +71,7 @@ class DatasourceOauthTenantParamConfig(TypeBase):
     tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     provider: Mapped[str] = mapped_column(sa.String(255), nullable=False)
     plugin_id: Mapped[str] = mapped_column(sa.String(255), nullable=False)
-    client_params: Mapped[dict] = mapped_column(AdjustedJSON, nullable=False, default_factory=dict)
+    client_params: Mapped[dict[str, Any]] = mapped_column(AdjustedJSON, nullable=False, default_factory=dict)
     enabled: Mapped[bool] = mapped_column(sa.Boolean, nullable=False, default=False)
 
     created_at: Mapped[datetime] = mapped_column(
diff --git a/api/models/source.py b/api/models/source.py
index 8078b32f8c..8fce7df205 100644
--- a/api/models/source.py
+++ b/api/models/source.py
@@ -25,7 +25,7 @@ class DataSourceOauthBinding(TypeBase):
     tenant_id: Mapped[str] = mapped_column(StringUUID, nullable=False)
     access_token: Mapped[str] = mapped_column(String(255), nullable=False)
     provider: Mapped[str] = mapped_column(String(255), nullable=False)
-    source_info: Mapped[dict] = mapped_column(AdjustedJSON, nullable=False)
+    source_info: Mapped[dict[str, Any]] = mapped_column(AdjustedJSON, nullable=False)
     created_at: Mapped[datetime] = mapped_column(
         DateTime, nullable=False, server_default=func.current_timestamp(), init=False
     )
diff --git a/api/providers/vdb/vdb-elasticsearch/src/dify_vdb_elasticsearch/elasticsearch_ja_vector.py b/api/providers/vdb/vdb-elasticsearch/src/dify_vdb_elasticsearch/elasticsearch_ja_vector.py
index 87b9d813ec..e2f390402a 100644
--- a/api/providers/vdb/vdb-elasticsearch/src/dify_vdb_elasticsearch/elasticsearch_ja_vector.py
+++ b/api/providers/vdb/vdb-elasticsearch/src/dify_vdb_elasticsearch/elasticsearch_ja_vector.py
@@ -23,7 +23,7 @@ class ElasticSearchJaVector(ElasticSearchVector):
         self,
         embeddings: list[list[float]],
         metadatas: list[dict[Any, Any]] | None = None,
-        index_params: dict | None = None,
+        index_params: dict[str, Any] | None = None,
     ):
         lock_name = f"vector_indexing_lock_{self._collection_name}"
         with redis_client.lock(lock_name, timeout=20):
diff --git a/api/providers/vdb/vdb-pgvecto-rs/src/dify_vdb_pgvecto_rs/collection.py b/api/providers/vdb/vdb-pgvecto-rs/src/dify_vdb_pgvecto_rs/collection.py
index c335bc610d..e087ec30a5 100644
--- a/api/providers/vdb/vdb-pgvecto-rs/src/dify_vdb_pgvecto_rs/collection.py
+++ b/api/providers/vdb/vdb-pgvecto-rs/src/dify_vdb_pgvecto_rs/collection.py
@@ -1,3 +1,4 @@
+from typing import Any
 from uuid import UUID
 
 from numpy import ndarray
@@ -8,5 +9,5 @@ class CollectionORM(DeclarativeBase):
     __tablename__: str
     id: Mapped[UUID]
     text: Mapped[str]
-    meta: Mapped[dict]
+    meta: Mapped[dict[str, Any]]
     vector: Mapped[ndarray]
diff --git a/api/providers/vdb/vdb-pgvecto-rs/src/dify_vdb_pgvecto_rs/pgvecto_rs.py b/api/providers/vdb/vdb-pgvecto-rs/src/dify_vdb_pgvecto_rs/pgvecto_rs.py
index 84b5eba0ac..9c721c8bde 100644
--- a/api/providers/vdb/vdb-pgvecto-rs/src/dify_vdb_pgvecto_rs/pgvecto_rs.py
+++ b/api/providers/vdb/vdb-pgvecto-rs/src/dify_vdb_pgvecto_rs/pgvecto_rs.py
@@ -67,7 +67,7 @@ class PGVectoRS(BaseVector):
                 primary_key=True,
             )
             text: Mapped[str]
-            meta: Mapped[dict] = mapped_column(postgresql.JSONB)
+            meta: Mapped[dict[str, Any]] = mapped_column(postgresql.JSONB)
             vector: Mapped[ndarray] = mapped_column(VECTOR(dim))
 
         self._table = _Table
diff --git a/api/services/entities/knowledge_entities/knowledge_entities.py b/api/services/entities/knowledge_entities/knowledge_entities.py
index f6a670415b..b1fe352861 100644
--- a/api/services/entities/knowledge_entities/knowledge_entities.py
+++ b/api/services/entities/knowledge_entities/knowledge_entities.py
@@ -87,7 +87,7 @@ class RetrievalModel(BaseModel):
 
 class MetaDataConfig(BaseModel):
     doc_type: str
-    doc_metadata: dict
+    doc_metadata: dict[str, Any]
 
 
 class KnowledgeConfig(BaseModel):
diff --git a/api/tests/unit_tests/core/tools/test_custom_tool.py b/api/tests/unit_tests/core/tools/test_custom_tool.py
index 79b8eaaa87..f35546b025 100644
--- a/api/tests/unit_tests/core/tools/test_custom_tool.py
+++ b/api/tests/unit_tests/core/tools/test_custom_tool.py
@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 from types import SimpleNamespace
+from typing import Any
 
 import httpx
 import pytest
@@ -14,7 +15,7 @@ from core.tools.entities.tool_entities import ToolEntity, ToolIdentity, ToolInvo
 from core.tools.errors import ToolInvokeError, ToolParameterValidationError, ToolProviderCredentialValidationError
 
 
-def _build_tool(*, openapi: dict | None = None) -> ApiTool:
+def _build_tool(*, openapi: dict[str, Any] | None = None) -> ApiTool:
     entity = ToolEntity(
         identity=ToolIdentity(
             author="author",
diff --git a/api/tests/unit_tests/core/tools/utils/test_message_transformer.py b/api/tests/unit_tests/core/tools/utils/test_message_transformer.py
index 6454a5bcd1..5f34135af4 100644
--- a/api/tests/unit_tests/core/tools/utils/test_message_transformer.py
+++ b/api/tests/unit_tests/core/tools/utils/test_message_transformer.py
@@ -1,3 +1,5 @@
+from typing import Any
+
 import pytest
 
 import core.tools.utils.message_transformer as mt
@@ -13,7 +15,7 @@ class _FakeToolFile:
 class _FakeToolFileManager:
     """Fake ToolFileManager to capture the mimetype passed in."""
 
-    last_call: dict | None = None
+    last_call: dict[str, Any] | None = None
 
     def __init__(self, *args, **kwargs):
         pass
diff --git a/api/tests/unit_tests/core/tools/utils/test_model_invocation_utils.py b/api/tests/unit_tests/core/tools/utils/test_model_invocation_utils.py
index 52f262e1cf..84b3f71d5e 100644
--- a/api/tests/unit_tests/core/tools/utils/test_model_invocation_utils.py
+++ b/api/tests/unit_tests/core/tools/utils/test_model_invocation_utils.py
@@ -10,6 +10,7 @@ from __future__ import annotations
 
 from decimal import Decimal
 from types import SimpleNamespace
+from typing import Any
 from unittest.mock import Mock, patch
 
 import pytest
@@ -25,7 +26,7 @@ from graphon.model_runtime.errors.invoke import (
 from core.tools.utils.model_invocation_utils import InvokeModelError, ModelInvocationUtils
 
 
-def _mock_model_instance(*, schema: dict | None = None) -> SimpleNamespace:
+def _mock_model_instance(*, schema: dict[str, Any] | None = None) -> SimpleNamespace:
     model_type_instance = Mock()
     model_type_instance.get_model_schema.return_value = (
         SimpleNamespace(model_properties=schema or {}) if schema is not None else None
diff --git a/api/tests/unit_tests/libs/test_pyrefly_type_coverage.py b/api/tests/unit_tests/libs/test_pyrefly_type_coverage.py
index 7087490845..cad9d47bba 100644
--- a/api/tests/unit_tests/libs/test_pyrefly_type_coverage.py
+++ b/api/tests/unit_tests/libs/test_pyrefly_type_coverage.py
@@ -1,4 +1,5 @@
 import json
+from typing import Any
 
 from libs.pyrefly_type_coverage import (
     CoverageSummary,
@@ -8,11 +9,11 @@ from libs.pyrefly_type_coverage import (
 )
 
 
-def _make_report(summary: dict) -> str:
+def _make_report(summary: dict[str, Any]) -> str:
     return json.dumps({"module_reports": [], "summary": summary})
 
 
-_SAMPLE_SUMMARY: dict = {
+_SAMPLE_SUMMARY: dict[str, Any] = {
     "n_modules": 100,
     "n_typable": 1000,
     "n_typed": 400,
diff --git a/api/tests/unit_tests/libs/test_sendgrid_client.py b/api/tests/unit_tests/libs/test_sendgrid_client.py
index 85744003c7..a65a9b1882 100644
--- a/api/tests/unit_tests/libs/test_sendgrid_client.py
+++ b/api/tests/unit_tests/libs/test_sendgrid_client.py
@@ -1,3 +1,4 @@
+from typing import Any
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -6,7 +7,7 @@ from python_http_client.exceptions import UnauthorizedError
 from libs.sendgrid import SendGridClient
 
 
-def _mail(to: str = "user@example.com") -> dict:
+def _mail(to: str = "user@example.com") -> dict[str, Any]:
     return {"to": to, "subject": "Hi", "html": "<b>Hi</b>"}
 
 
diff --git a/api/tests/unit_tests/libs/test_smtp_client.py b/api/tests/unit_tests/libs/test_smtp_client.py
index 1edf4899ac..96d62de2d6 100644
--- a/api/tests/unit_tests/libs/test_smtp_client.py
+++ b/api/tests/unit_tests/libs/test_smtp_client.py
@@ -1,3 +1,4 @@
+from typing import Any
 from unittest.mock import ANY, MagicMock, patch
 
 import pytest
@@ -5,7 +6,7 @@ import pytest
 from libs.smtp import SMTPClient
 
 
-def _mail() -> dict:
+def _mail() -> dict[str, Any]:
     return {"to": "user@example.com", "subject": "Hi", "html": "<b>Hi</b>"}
 
 
diff --git a/api/tests/unit_tests/tools/test_mcp_tool.py b/api/tests/unit_tests/tools/test_mcp_tool.py
index 68359ba078..544e89fcee 100644
--- a/api/tests/unit_tests/tools/test_mcp_tool.py
+++ b/api/tests/unit_tests/tools/test_mcp_tool.py
@@ -1,5 +1,6 @@
 import base64
 from decimal import Decimal
+from typing import Any
 from unittest.mock import Mock, patch
 
 import pytest
@@ -20,7 +21,7 @@ from core.tools.entities.tool_entities import ToolEntity, ToolIdentity, ToolInvo
 from core.tools.mcp_tool.tool import MCPTool
 
 
-def _make_mcp_tool(output_schema: dict | None = None) -> MCPTool:
+def _make_mcp_tool(output_schema: dict[str, Any] | None = None) -> MCPTool:
     identity = ToolIdentity(
         author="test",
         name="test_mcp_tool",

From 50a6892c3a160a8d92cad83ac5ae1fee22235814 Mon Sep 17 00:00:00 2001
From: wdeveloper16 <wdeveloper16@protonmail.com>
Date: Tue, 14 Apr 2026 19:51:49 +0200
Subject: [PATCH 19/44] refactor: replace bare dict with dict[str, Any] in
 controller and core unit tests (#35181)

---
 .../controllers/inner_api/plugin/test_plugin_wraps.py  |  7 ++++---
 api/tests/unit_tests/core/tools/utils/test_parser.py   |  7 ++++---
 .../core/trigger/debug/test_debug_event_selectors.py   |  3 ++-
 .../nodes/webhook/test_webhook_file_conversion.py      |  5 +++--
 .../core/workflow/nodes/webhook/test_webhook_node.py   |  3 ++-
 .../redis/test_streams_channel_unit_tests.py           | 10 +++++-----
 .../test_app_generate_service_streaming_integration.py |  5 +++--
 .../unit_tests/services/test_messages_clean_service.py |  3 ++-
 8 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/api/tests/unit_tests/controllers/inner_api/plugin/test_plugin_wraps.py b/api/tests/unit_tests/controllers/inner_api/plugin/test_plugin_wraps.py
index 957d7fbd9b..0895fac3a4 100644
--- a/api/tests/unit_tests/controllers/inner_api/plugin/test_plugin_wraps.py
+++ b/api/tests/unit_tests/controllers/inner_api/plugin/test_plugin_wraps.py
@@ -2,6 +2,7 @@
 Unit tests for inner_api plugin decorators
 """
 
+from typing import Any
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -232,11 +233,11 @@ class TestGetUserTenant:
 class PluginTestPayload:
     """Simple test payload class"""
 
-    def __init__(self, data: dict):
+    def __init__(self, data: dict[str, Any]):
         self.value = data.get("value")
 
     @classmethod
-    def model_validate(cls, data: dict):
+    def model_validate(cls, data: dict[str, Any]):
         return cls(data)
 
 
@@ -277,7 +278,7 @@ class TestPluginData:
         # Arrange
         class InvalidPayload:
             @classmethod
-            def model_validate(cls, data: dict):
+            def model_validate(cls, data: dict[str, Any]):
                 raise Exception("Validation failed")
 
         @plugin_data(payload_type=InvalidPayload)
diff --git a/api/tests/unit_tests/core/tools/utils/test_parser.py b/api/tests/unit_tests/core/tools/utils/test_parser.py
index 40f91b12a0..032b1377a4 100644
--- a/api/tests/unit_tests/core/tools/utils/test_parser.py
+++ b/api/tests/unit_tests/core/tools/utils/test_parser.py
@@ -1,4 +1,5 @@
 from json.decoder import JSONDecodeError
+from typing import Any
 from unittest.mock import Mock, patch
 
 import pytest
@@ -259,8 +260,8 @@ def test_parse_openapi_to_tool_bundle_server_env_and_refs(app):
         },
     }
 
-    extra_info: dict = {}
-    warning: dict = {}
+    extra_info: dict[str, Any] = {}
+    warning: dict[str, Any] = {}
     with app.test_request_context(headers={"X-Request-Env": "prod"}):
         bundles = ApiBasedToolSchemaParser.parse_openapi_to_tool_bundle(openapi, extra_info=extra_info, warning=warning)
 
@@ -298,7 +299,7 @@ def test_parse_swagger_to_openapi_branches():
             }
         )
 
-    warning: dict = {"seed": True}
+    warning: dict[str, Any] = {"seed": True}
     converted = ApiBasedToolSchemaParser.parse_swagger_to_openapi(
         {
             "servers": [{"url": "https://x"}],
diff --git a/api/tests/unit_tests/core/trigger/debug/test_debug_event_selectors.py b/api/tests/unit_tests/core/trigger/debug/test_debug_event_selectors.py
index 78622b78b6..0c67effe90 100644
--- a/api/tests/unit_tests/core/trigger/debug/test_debug_event_selectors.py
+++ b/api/tests/unit_tests/core/trigger/debug/test_debug_event_selectors.py
@@ -8,6 +8,7 @@ and select_trigger_debug_events orchestrator.
 from __future__ import annotations
 
 from datetime import datetime
+from typing import Any
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -30,7 +31,7 @@ from core.trigger.debug.events import PluginTriggerDebugEvent, WebhookDebugEvent
 from tests.unit_tests.core.trigger.conftest import VALID_PROVIDER_ID
 
 
-def _make_poller_args(node_config: dict | None = None) -> dict:
+def _make_poller_args(node_config: dict[str, Any] | None = None) -> dict[str, Any]:
     return {
         "tenant_id": "t1",
         "user_id": "u1",
diff --git a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py
index cccd3fb676..8056217479 100644
--- a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py
+++ b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_file_conversion.py
@@ -6,6 +6,7 @@ to FileVariable objects, fixing the "Invalid variable type: ObjectVariable" erro
 when passing files to downstream LLM nodes.
 """
 
+from typing import Any
 from unittest.mock import Mock, patch
 
 from graphon.entities import GraphInitParams
@@ -97,7 +98,7 @@ def create_test_file_dict(
     }
 
 
-def build_webhook_variable_pool(inputs: dict) -> VariablePool:
+def build_webhook_variable_pool(inputs: dict[str, Any]) -> VariablePool:
     return build_test_variable_pool(
         variables=default_system_variables(),
         node_id="webhook-node-1",
@@ -105,7 +106,7 @@ def build_webhook_variable_pool(inputs: dict) -> VariablePool:
     )
 
 
-def expected_factory_mapping(file_dict: dict) -> dict:
+def expected_factory_mapping(file_dict: dict[str, Any]) -> dict[str, Any]:
     return {**file_dict, "upload_file_id": file_dict["related_id"]}
 
 
diff --git a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
index 34c66a4f9f..c19e28bbd5 100644
--- a/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
+++ b/api/tests/unit_tests/core/workflow/nodes/webhook/test_webhook_node.py
@@ -1,3 +1,4 @@
+from typing import Any
 from unittest.mock import patch
 
 import pytest
@@ -62,7 +63,7 @@ def create_webhook_node(webhook_data: WebhookData, variable_pool: VariablePool)
     return node
 
 
-def build_webhook_variable_pool(inputs: dict) -> VariablePool:
+def build_webhook_variable_pool(inputs: dict[str, Any]) -> VariablePool:
     return build_test_variable_pool(
         variables=default_system_variables(),
         node_id="1",
diff --git a/api/tests/unit_tests/libs/broadcast_channel/redis/test_streams_channel_unit_tests.py b/api/tests/unit_tests/libs/broadcast_channel/redis/test_streams_channel_unit_tests.py
index fd9e5ca5b3..c6f57c7e59 100644
--- a/api/tests/unit_tests/libs/broadcast_channel/redis/test_streams_channel_unit_tests.py
+++ b/api/tests/unit_tests/libs/broadcast_channel/redis/test_streams_channel_unit_tests.py
@@ -1,7 +1,7 @@
 import threading
 import time
 from dataclasses import dataclass
-from typing import cast
+from typing import Any, cast
 from unittest.mock import patch
 
 import pytest
@@ -30,7 +30,7 @@ class FakeStreamsRedis:
         self._dollar_snapshots: dict[str, int] = {}
 
     # Publisher API
-    def xadd(self, key: str, fields: dict, *, maxlen: int | None = None) -> str:
+    def xadd(self, key: str, fields: dict[str, Any], *, maxlen: int | None = None) -> str:
         """Append entry to stream; accept optional maxlen for API compatibility.
 
         The test double ignores maxlen trimming semantics; only records the entry.
@@ -45,7 +45,7 @@ class FakeStreamsRedis:
         self._expire_calls[key] = self._expire_calls.get(key, 0) + 1
 
     # Consumer API
-    def xread(self, streams: dict, block: int | None = None, count: int | None = None):
+    def xread(self, streams: dict[str, Any], block: int | None = None, count: int | None = None):
         # Expect a single key
         assert len(streams) == 1
         key, last_id = next(iter(streams.items()))
@@ -80,7 +80,7 @@ class BlockingRedis:
     def __init__(self) -> None:
         self._release = threading.Event()
 
-    def xread(self, streams: dict, block: int | None = None, count: int | None = None):
+    def xread(self, streams: dict[str, Any], block: int | None = None, count: int | None = None):
         self._release.wait(timeout=block / 1000.0 if block else None)
         return []
 
@@ -245,7 +245,7 @@ class TestStreamsSubscription:
                 self._fields = fields
                 self._calls = 0
 
-            def xread(self, streams: dict, block: int | None = None, count: int | None = None):
+            def xread(self, streams: dict[str, Any], block: int | None = None, count: int | None = None):
                 self._calls += 1
                 if self._calls == 1:
                     key = next(iter(streams))
diff --git a/api/tests/unit_tests/services/test_app_generate_service_streaming_integration.py b/api/tests/unit_tests/services/test_app_generate_service_streaming_integration.py
index e66d52f66b..30aa359b45 100644
--- a/api/tests/unit_tests/services/test_app_generate_service_streaming_integration.py
+++ b/api/tests/unit_tests/services/test_app_generate_service_streaming_integration.py
@@ -1,6 +1,7 @@
 import json
 import uuid
 from collections import defaultdict, deque
+from typing import Any
 
 import pytest
 
@@ -60,7 +61,7 @@ class _FakeStreams:
         self._data: dict[str, list[tuple[str, dict]]] = defaultdict(list)
         self._seq: dict[str, int] = defaultdict(int)
 
-    def xadd(self, key: str, fields: dict, *, maxlen: int | None = None) -> str:
+    def xadd(self, key: str, fields: dict[str, Any], *, maxlen: int | None = None) -> str:
         # maxlen is accepted for API compatibility with redis-py; ignored in this test double
         self._seq[key] += 1
         eid = f"{self._seq[key]}-0"
@@ -71,7 +72,7 @@ class _FakeStreams:
         # no-op for tests
         return None
 
-    def xread(self, streams: dict, block: int | None = None, count: int | None = None):
+    def xread(self, streams: dict[str, Any], block: int | None = None, count: int | None = None):
         assert len(streams) == 1
         key, last_id = next(iter(streams.items()))
         entries = self._data.get(key, [])
diff --git a/api/tests/unit_tests/services/test_messages_clean_service.py b/api/tests/unit_tests/services/test_messages_clean_service.py
index f3efc4463e..5fcad615c8 100644
--- a/api/tests/unit_tests/services/test_messages_clean_service.py
+++ b/api/tests/unit_tests/services/test_messages_clean_service.py
@@ -1,4 +1,5 @@
 import datetime
+from typing import Any
 from unittest.mock import MagicMock, patch
 
 import pytest
@@ -18,7 +19,7 @@ def make_simple_message(msg_id: str, app_id: str) -> SimpleMessage:
     return SimpleMessage(id=msg_id, app_id=app_id, created_at=datetime.datetime(2024, 1, 1))
 
 
-def make_plan_provider(tenant_plans: dict) -> MagicMock:
+def make_plan_provider(tenant_plans: dict[str, Any]) -> MagicMock:
     """Helper to create a mock plan_provider that returns the given tenant_plans."""
     provider = MagicMock()
     provider.return_value = tenant_plans

From 6876cd787b5db65bbf132b9996fbdb060079388a Mon Sep 17 00:00:00 2001
From: bohdansolovie <153934212+bohdansolovie@users.noreply.github.com>
Date: Tue, 14 Apr 2026 13:52:13 -0400
Subject: [PATCH 20/44] test: migrate web site controller tests to
 Testcontainers (#32454) (#35180)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../controllers/web/test_site.py              | 103 ++++++++++--------
 1 file changed, 55 insertions(+), 48 deletions(-)
 rename api/tests/{unit_tests => test_containers_integration_tests}/controllers/web/test_site.py (51%)

diff --git a/api/tests/unit_tests/controllers/web/test_site.py b/api/tests/test_containers_integration_tests/controllers/web/test_site.py
similarity index 51%
rename from api/tests/unit_tests/controllers/web/test_site.py
rename to api/tests/test_containers_integration_tests/controllers/web/test_site.py
index 6e9d754c43..9adb26ff3d 100644
--- a/api/tests/unit_tests/controllers/web/test_site.py
+++ b/api/tests/test_containers_integration_tests/controllers/web/test_site.py
@@ -1,28 +1,48 @@
-"""Unit tests for controllers.web.site endpoints."""
+"""Testcontainers integration tests for controllers.web.site endpoints."""
 
 from __future__ import annotations
 
 from types import SimpleNamespace
-from unittest.mock import MagicMock, patch
+from unittest.mock import patch
 
 import pytest
 from flask import Flask
+from sqlalchemy.orm import Session
 from werkzeug.exceptions import Forbidden
 
 from controllers.web.site import AppSiteApi, AppSiteInfo
+from models import Tenant, TenantStatus
+from models.model import App, AppMode, CustomizeTokenStrategy, Site
 
 
-def _tenant(*, status: str = "normal") -> SimpleNamespace:
-    return SimpleNamespace(
-        id="tenant-1",
-        status=status,
-        plan="basic",
-        custom_config_dict={"remove_webapp_brand": False, "replace_webapp_logo": False},
+@pytest.fixture
+def app(flask_app_with_containers) -> Flask:
+    return flask_app_with_containers
+
+
+def _create_tenant(db_session: Session, *, status: TenantStatus = TenantStatus.NORMAL) -> Tenant:
+    tenant = Tenant(name="test-tenant", status=status)
+    db_session.add(tenant)
+    db_session.commit()
+    return tenant
+
+
+def _create_app(db_session: Session, tenant_id: str, *, enable_site: bool = True) -> App:
+    app_model = App(
+        tenant_id=tenant_id,
+        mode=AppMode.CHAT,
+        name="test-app",
+        enable_site=enable_site,
+        enable_api=True,
     )
+    db_session.add(app_model)
+    db_session.commit()
+    return app_model
 
 
-def _site() -> SimpleNamespace:
-    return SimpleNamespace(
+def _create_site(db_session: Session, app_id: str) -> Site:
+    site = Site(
+        app_id=app_id,
         title="Site",
         icon_type="emoji",
         icon="robot",
@@ -31,77 +51,64 @@ def _site() -> SimpleNamespace:
         default_language="en",
         chat_color_theme="light",
         chat_color_theme_inverted=False,
-        copyright=None,
-        privacy_policy=None,
-        custom_disclaimer=None,
+        customize_token_strategy=CustomizeTokenStrategy.NOT_ALLOW,
+        code=f"code-{app_id[-6:]}",
         prompt_public=False,
         show_workflow_steps=True,
         use_icon_as_answer_icon=False,
     )
+    db_session.add(site)
+    db_session.commit()
+    return site
 
 
-# ---------------------------------------------------------------------------
-# AppSiteApi
-# ---------------------------------------------------------------------------
 class TestAppSiteApi:
     @patch("controllers.web.site.FeatureService.get_features")
-    @patch("controllers.web.site.db")
-    def test_happy_path(self, mock_db: MagicMock, mock_features: MagicMock, app: Flask) -> None:
+    def test_happy_path(self, mock_features, app: Flask, db_session_with_containers: Session) -> None:
         app.config["RESTX_MASK_HEADER"] = "X-Fields"
-        mock_features.return_value = SimpleNamespace(can_replace_logo=False)
-        site_obj = _site()
-        mock_db.session.scalar.return_value = site_obj
-        tenant = _tenant()
-        app_model = SimpleNamespace(id="app-1", tenant_id="tenant-1", tenant=tenant, enable_site=True)
+        tenant = _create_tenant(db_session_with_containers)
+        app_model = _create_app(db_session_with_containers, tenant.id)
+        _create_site(db_session_with_containers, app_model.id)
         end_user = SimpleNamespace(id="eu-1")
+        mock_features.return_value = SimpleNamespace(can_replace_logo=False)
 
         with app.test_request_context("/site"):
             result = AppSiteApi().get(app_model, end_user)
 
-        # marshal_with serializes AppSiteInfo to a dict
-        assert result["app_id"] == "app-1"
+        assert result["app_id"] == app_model.id
         assert result["plan"] == "basic"
         assert result["enable_site"] is True
 
-    @patch("controllers.web.site.db")
-    def test_missing_site_raises_forbidden(self, mock_db: MagicMock, app: Flask) -> None:
+    def test_missing_site_raises_forbidden(self, app: Flask, db_session_with_containers: Session) -> None:
         app.config["RESTX_MASK_HEADER"] = "X-Fields"
-        mock_db.session.scalar.return_value = None
-        tenant = _tenant()
-        app_model = SimpleNamespace(id="app-1", tenant_id="tenant-1", tenant=tenant, enable_site=True)
+        tenant = _create_tenant(db_session_with_containers)
+        app_model = _create_app(db_session_with_containers, tenant.id)
         end_user = SimpleNamespace(id="eu-1")
 
         with app.test_request_context("/site"):
             with pytest.raises(Forbidden):
                 AppSiteApi().get(app_model, end_user)
 
-    @patch("controllers.web.site.db")
-    def test_archived_tenant_raises_forbidden(self, mock_db: MagicMock, app: Flask) -> None:
+    @patch("controllers.web.site.FeatureService.get_features")
+    def test_archived_tenant_raises_forbidden(
+        self, mock_features, app: Flask, db_session_with_containers: Session
+    ) -> None:
         app.config["RESTX_MASK_HEADER"] = "X-Fields"
-        from models.account import TenantStatus
-
-        mock_db.session.scalar.return_value = _site()
-        tenant = SimpleNamespace(
-            id="tenant-1",
-            status=TenantStatus.ARCHIVE,
-            plan="basic",
-            custom_config_dict={},
-        )
-        app_model = SimpleNamespace(id="app-1", tenant_id="tenant-1", tenant=tenant)
+        tenant = _create_tenant(db_session_with_containers, status=TenantStatus.ARCHIVE)
+        app_model = _create_app(db_session_with_containers, tenant.id)
+        _create_site(db_session_with_containers, app_model.id)
         end_user = SimpleNamespace(id="eu-1")
+        mock_features.return_value = SimpleNamespace(can_replace_logo=False)
 
         with app.test_request_context("/site"):
             with pytest.raises(Forbidden):
                 AppSiteApi().get(app_model, end_user)
 
 
-# ---------------------------------------------------------------------------
-# AppSiteInfo
-# ---------------------------------------------------------------------------
 class TestAppSiteInfo:
     def test_basic_fields(self) -> None:
-        tenant = _tenant()
-        site_obj = _site()
+        tenant = SimpleNamespace(id="tenant-1", plan="basic", custom_config_dict={})
+        site_obj = SimpleNamespace()
         info = AppSiteInfo(tenant, SimpleNamespace(id="app-1", enable_site=True), site_obj, "eu-1", False)
 
         assert info.app_id == "app-1"
@@ -118,7 +125,7 @@ class TestAppSiteInfo:
             plan="pro",
             custom_config_dict={"remove_webapp_brand": True, "replace_webapp_logo": True},
         )
-        site_obj = _site()
+        site_obj = SimpleNamespace()
         info = AppSiteInfo(tenant, SimpleNamespace(id="app-1", enable_site=True), site_obj, "eu-1", True)
 
         assert info.can_replace_logo is True

From a2ea7ca039971fbd71e55972fd4723b11e398e80 Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 10:57:34 -0700
Subject: [PATCH 21/44] refactor(api): migrate workspace account marshal_with
 responses to BaseModel (#35190)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 api/controllers/console/workspace/account.py | 106 ++++++++++++-------
 1 file changed, 68 insertions(+), 38 deletions(-)

diff --git a/api/controllers/console/workspace/account.py b/api/controllers/console/workspace/account.py
index c35006a7ee..582c38052e 100644
--- a/api/controllers/console/workspace/account.py
+++ b/api/controllers/console/workspace/account.py
@@ -5,7 +5,7 @@ from typing import Any, Literal
 
 import pytz
 from flask import request
-from flask_restx import Resource, fields, marshal_with
+from flask_restx import Resource
 from pydantic import BaseModel, Field, field_validator, model_validator
 from sqlalchemy import select
 
@@ -37,9 +37,10 @@ from controllers.console.wraps import (
     setup_required,
 )
 from extensions.ext_database import db
+from fields.base import ResponseModel
 from fields.member_fields import Account as AccountResponse
 from libs.datetime_utils import naive_utc_now
-from libs.helper import EmailStr, TimestampField, extract_remote_ip, timezone
+from libs.helper import EmailStr, extract_remote_ip, timezone
 from libs.login import current_account_with_tenant, login_required
 from models import AccountIntegrate, InvitationCode
 from models.account import AccountStatus, InvitationCodeStatus
@@ -178,17 +179,57 @@ def _serialize_account(account) -> dict[str, Any]:
     return AccountResponse.model_validate(account, from_attributes=True).model_dump(mode="json")
 
 
-integrate_fields = {
-    "provider": fields.String,
-    "created_at": TimestampField,
-    "is_bound": fields.Boolean,
-    "link": fields.String,
-}
+def _to_timestamp(value: datetime | int | None) -> int | None:
+    if isinstance(value, datetime):
+        return int(value.timestamp())
+    return value
 
-integrate_model = console_ns.model("AccountIntegrate", integrate_fields)
-integrate_list_model = console_ns.model(
-    "AccountIntegrateList",
-    {"data": fields.List(fields.Nested(integrate_model))},
+
+class AccountIntegrateResponse(ResponseModel):
+    provider: str
+    created_at: int | None = None
+    is_bound: bool
+    link: str | None = None
+
+    @field_validator("created_at", mode="before")
+    @classmethod
+    def _normalize_created_at(cls, value: datetime | int | None) -> int | None:
+        return _to_timestamp(value)
+
+
+class AccountIntegrateListResponse(ResponseModel):
+    data: list[AccountIntegrateResponse]
+
+
+class EducationVerifyResponse(ResponseModel):
+    token: str | None = None
+
+
+class EducationStatusResponse(ResponseModel):
+    result: bool | None = None
+    is_student: bool | None = None
+    expire_at: int | None = None
+    allow_refresh: bool | None = None
+
+    @field_validator("expire_at", mode="before")
+    @classmethod
+    def _normalize_expire_at(cls, value: datetime | int | None) -> int | None:
+        return _to_timestamp(value)
+
+
+class EducationAutocompleteResponse(ResponseModel):
+    data: list[str] = Field(default_factory=list)
+    curr_page: int | None = None
+    has_next: bool | None = None
+
+
+register_schema_models(
+    console_ns,
+    AccountIntegrateResponse,
+    AccountIntegrateListResponse,
+    EducationVerifyResponse,
+    EducationStatusResponse,
+    EducationAutocompleteResponse,
 )
 
 
@@ -359,7 +400,7 @@ class AccountIntegrateApi(Resource):
     @setup_required
     @login_required
     @account_initialization_required
-    @marshal_with(integrate_list_model)
+    @console_ns.response(200, "Success", console_ns.models[AccountIntegrateListResponse.__name__])
     def get(self):
         account, _ = current_account_with_tenant()
 
@@ -395,7 +436,9 @@ class AccountIntegrateApi(Resource):
                     }
                 )
 
-        return {"data": integrate_data}
+        return AccountIntegrateListResponse(
+            data=[AccountIntegrateResponse.model_validate(item) for item in integrate_data]
+        ).model_dump(mode="json")
 
 
 @console_ns.route("/account/delete/verify")
@@ -447,31 +490,22 @@ class AccountDeleteUpdateFeedbackApi(Resource):
 
 @console_ns.route("/account/education/verify")
 class EducationVerifyApi(Resource):
-    verify_fields = {
-        "token": fields.String,
-    }
-
     @setup_required
     @login_required
     @account_initialization_required
     @only_edition_cloud
     @cloud_edition_billing_enabled
-    @marshal_with(verify_fields)
+    @console_ns.response(200, "Success", console_ns.models[EducationVerifyResponse.__name__])
     def get(self):
         account, _ = current_account_with_tenant()
 
-        return BillingService.EducationIdentity.verify(account.id, account.email)
+        return EducationVerifyResponse.model_validate(
+            BillingService.EducationIdentity.verify(account.id, account.email) or {}
+        ).model_dump(mode="json")
 
 
 @console_ns.route("/account/education")
 class EducationApi(Resource):
-    status_fields = {
-        "result": fields.Boolean,
-        "is_student": fields.Boolean,
-        "expire_at": TimestampField,
-        "allow_refresh": fields.Boolean,
-    }
-
     @console_ns.expect(console_ns.models[EducationActivatePayload.__name__])
     @setup_required
     @login_required
@@ -491,37 +525,33 @@ class EducationApi(Resource):
     @account_initialization_required
     @only_edition_cloud
     @cloud_edition_billing_enabled
-    @marshal_with(status_fields)
+    @console_ns.response(200, "Success", console_ns.models[EducationStatusResponse.__name__])
     def get(self):
         account, _ = current_account_with_tenant()
 
-        res = BillingService.EducationIdentity.status(account.id)
+        res = BillingService.EducationIdentity.status(account.id) or {}
         # convert expire_at to UTC timestamp from isoformat
         if res and "expire_at" in res:
             res["expire_at"] = datetime.fromisoformat(res["expire_at"]).astimezone(pytz.utc)
-        return res
+        return EducationStatusResponse.model_validate(res).model_dump(mode="json")
 
 
 @console_ns.route("/account/education/autocomplete")
 class EducationAutoCompleteApi(Resource):
-    data_fields = {
-        "data": fields.List(fields.String),
-        "curr_page": fields.Integer,
-        "has_next": fields.Boolean,
-    }
-
     @console_ns.expect(console_ns.models[EducationAutocompleteQuery.__name__])
     @setup_required
     @login_required
     @account_initialization_required
     @only_edition_cloud
     @cloud_edition_billing_enabled
-    @marshal_with(data_fields)
+    @console_ns.response(200, "Success", console_ns.models[EducationAutocompleteResponse.__name__])
     def get(self):
         payload = request.args.to_dict(flat=True)
         args = EducationAutocompleteQuery.model_validate(payload)
 
-        return BillingService.EducationIdentity.autocomplete(args.keywords, args.page, args.limit)
+        return EducationAutocompleteResponse.model_validate(
+            BillingService.EducationIdentity.autocomplete(args.keywords, args.page, args.limit) or {}
+        ).model_dump(mode="json")
 
 
 @console_ns.route("/account/change-email")

From ef062fb39703d282d1cc3cc2f701650206f57d73 Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 10:58:33 -0700
Subject: [PATCH 22/44] refactor(api): migrate console extension endpoint from
 api.model to BaseModel (#35189)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 api/controllers/console/extension.py | 92 ++++++++++++++++++++--------
 1 file changed, 68 insertions(+), 24 deletions(-)

diff --git a/api/controllers/console/extension.py b/api/controllers/console/extension.py
index efa46c9779..7a6356d052 100644
--- a/api/controllers/console/extension.py
+++ b/api/controllers/console/extension.py
@@ -1,15 +1,18 @@
+from datetime import datetime
+from typing import Any
+
 from flask import request
-from flask_restx import Resource, fields, marshal_with
-from pydantic import BaseModel, Field
+from flask_restx import Resource
+from pydantic import BaseModel, Field, TypeAdapter, field_validator
 
 from constants import HIDDEN_VALUE
-from fields.api_based_extension_fields import api_based_extension_fields
+from fields.base import ResponseModel
 from libs.login import current_account_with_tenant, login_required
 from models.api_based_extension import APIBasedExtension
 from services.api_based_extension_service import APIBasedExtensionService
 from services.code_based_extension_service import CodeBasedExtensionService
 
-from ..common.schema import register_schema_models
+from ..common.schema import DEFAULT_REF_TEMPLATE_SWAGGER_2_0, register_schema_models
 from . import console_ns
 from .wraps import account_initialization_required, setup_required
 
@@ -24,12 +27,52 @@ class APIBasedExtensionPayload(BaseModel):
     api_key: str = Field(description="API key for authentication")
 
 
-register_schema_models(console_ns, APIBasedExtensionPayload)
+class CodeBasedExtensionResponse(ResponseModel):
+    module: str = Field(description="Module name")
+    data: Any = Field(description="Extension data")
 
 
-api_based_extension_model = console_ns.model("ApiBasedExtensionModel", api_based_extension_fields)
+def _mask_api_key(api_key: str) -> str:
+    if not api_key:
+        return api_key
+    if len(api_key) <= 8:
+        return api_key[0] + "******" + api_key[-1]
+    return api_key[:3] + "******" + api_key[-3:]
 
-api_based_extension_list_model = fields.List(fields.Nested(api_based_extension_model))
+
+def _to_timestamp(value: datetime | int | None) -> int | None:
+    if isinstance(value, datetime):
+        return int(value.timestamp())
+    return value
+
+
+class APIBasedExtensionResponse(ResponseModel):
+    id: str
+    name: str
+    api_endpoint: str
+    api_key: str
+    created_at: int | None = None
+
+    @field_validator("api_key", mode="before")
+    @classmethod
+    def _normalize_api_key(cls, value: str) -> str:
+        return _mask_api_key(value)
+
+    @field_validator("created_at", mode="before")
+    @classmethod
+    def _normalize_created_at(cls, value: datetime | int | None) -> int | None:
+        return _to_timestamp(value)
+
+
+register_schema_models(console_ns, APIBasedExtensionPayload, CodeBasedExtensionResponse, APIBasedExtensionResponse)
+console_ns.schema_model(
+    "APIBasedExtensionListResponse",
+    TypeAdapter(list[APIBasedExtensionResponse]).json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
+)
+
+
+def _serialize_api_based_extension(extension: APIBasedExtension) -> dict[str, Any]:
+    return APIBasedExtensionResponse.model_validate(extension, from_attributes=True).model_dump(mode="json")
 
 
 @console_ns.route("/code-based-extension")
@@ -40,10 +83,7 @@ class CodeBasedExtensionAPI(Resource):
     @console_ns.response(
         200,
         "Success",
-        console_ns.model(
-            "CodeBasedExtensionResponse",
-            {"module": fields.String(description="Module name"), "data": fields.Raw(description="Extension data")},
-        ),
+        console_ns.models[CodeBasedExtensionResponse.__name__],
     )
     @setup_required
     @login_required
@@ -51,30 +91,34 @@ class CodeBasedExtensionAPI(Resource):
     def get(self):
         query = CodeBasedExtensionQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
 
-        return {"module": query.module, "data": CodeBasedExtensionService.get_code_based_extension(query.module)}
+        return CodeBasedExtensionResponse(
+            module=query.module,
+            data=CodeBasedExtensionService.get_code_based_extension(query.module),
+        ).model_dump(mode="json")
 
 
 @console_ns.route("/api-based-extension")
 class APIBasedExtensionAPI(Resource):
     @console_ns.doc("get_api_based_extensions")
     @console_ns.doc(description="Get all API-based extensions for current tenant")
-    @console_ns.response(200, "Success", api_based_extension_list_model)
+    @console_ns.response(200, "Success", console_ns.models["APIBasedExtensionListResponse"])
     @setup_required
     @login_required
     @account_initialization_required
-    @marshal_with(api_based_extension_model)
     def get(self):
         _, tenant_id = current_account_with_tenant()
-        return APIBasedExtensionService.get_all_by_tenant_id(tenant_id)
+        return [
+            _serialize_api_based_extension(extension)
+            for extension in APIBasedExtensionService.get_all_by_tenant_id(tenant_id)
+        ]
 
     @console_ns.doc("create_api_based_extension")
     @console_ns.doc(description="Create a new API-based extension")
     @console_ns.expect(console_ns.models[APIBasedExtensionPayload.__name__])
-    @console_ns.response(201, "Extension created successfully", api_based_extension_model)
+    @console_ns.response(201, "Extension created successfully", console_ns.models[APIBasedExtensionResponse.__name__])
     @setup_required
     @login_required
     @account_initialization_required
-    @marshal_with(api_based_extension_model)
     def post(self):
         payload = APIBasedExtensionPayload.model_validate(console_ns.payload or {})
         _, current_tenant_id = current_account_with_tenant()
@@ -86,7 +130,7 @@ class APIBasedExtensionAPI(Resource):
             api_key=payload.api_key,
         )
 
-        return APIBasedExtensionService.save(extension_data)
+        return _serialize_api_based_extension(APIBasedExtensionService.save(extension_data))
 
 
 @console_ns.route("/api-based-extension/<uuid:id>")
@@ -94,26 +138,26 @@ class APIBasedExtensionDetailAPI(Resource):
     @console_ns.doc("get_api_based_extension")
     @console_ns.doc(description="Get API-based extension by ID")
     @console_ns.doc(params={"id": "Extension ID"})
-    @console_ns.response(200, "Success", api_based_extension_model)
+    @console_ns.response(200, "Success", console_ns.models[APIBasedExtensionResponse.__name__])
     @setup_required
     @login_required
     @account_initialization_required
-    @marshal_with(api_based_extension_model)
     def get(self, id):
         api_based_extension_id = str(id)
         _, tenant_id = current_account_with_tenant()
 
-        return APIBasedExtensionService.get_with_tenant_id(tenant_id, api_based_extension_id)
+        return _serialize_api_based_extension(
+            APIBasedExtensionService.get_with_tenant_id(tenant_id, api_based_extension_id)
+        )
 
     @console_ns.doc("update_api_based_extension")
     @console_ns.doc(description="Update API-based extension")
     @console_ns.doc(params={"id": "Extension ID"})
     @console_ns.expect(console_ns.models[APIBasedExtensionPayload.__name__])
-    @console_ns.response(200, "Extension updated successfully", api_based_extension_model)
+    @console_ns.response(200, "Extension updated successfully", console_ns.models[APIBasedExtensionResponse.__name__])
     @setup_required
     @login_required
     @account_initialization_required
-    @marshal_with(api_based_extension_model)
     def post(self, id):
         api_based_extension_id = str(id)
         _, current_tenant_id = current_account_with_tenant()
@@ -128,7 +172,7 @@ class APIBasedExtensionDetailAPI(Resource):
         if payload.api_key != HIDDEN_VALUE:
             extension_data_from_db.api_key = payload.api_key
 
-        return APIBasedExtensionService.save(extension_data_from_db)
+        return _serialize_api_based_extension(APIBasedExtensionService.save(extension_data_from_db))
 
     @console_ns.doc("delete_api_based_extension")
     @console_ns.doc(description="Delete API-based extension")

From f63d7c4121c1fb652a9255c6f123b2348cd8483b Mon Sep 17 00:00:00 2001
From: James <63717587+jamesrayammons@users.noreply.github.com>
Date: Tue, 14 Apr 2026 20:07:00 +0200
Subject: [PATCH 23/44] test: remove document service status mock tests
 superseded by testcontainers (#35197)

---
 .../services/document_service_status.py       | 70 -------------------
 1 file changed, 70 deletions(-)
 delete mode 100644 api/tests/unit_tests/services/document_service_status.py

diff --git a/api/tests/unit_tests/services/document_service_status.py b/api/tests/unit_tests/services/document_service_status.py
deleted file mode 100644
index 1b682d5762..0000000000
--- a/api/tests/unit_tests/services/document_service_status.py
+++ /dev/null
@@ -1,70 +0,0 @@
-"""Unit tests for non-SQL validation in DocumentService status management methods."""
-
-from unittest.mock import Mock, create_autospec
-
-import pytest
-
-from models import Account
-from models.dataset import Dataset
-from services.dataset_service import DocumentService
-
-
-class DocumentStatusTestDataFactory:
-    """Factory class for creating test data and mock objects for document status tests."""
-
-    @staticmethod
-    def create_dataset_mock(
-        dataset_id: str = "dataset-123",
-        tenant_id: str = "tenant-123",
-        name: str = "Test Dataset",
-        built_in_field_enabled: bool = False,
-        **kwargs,
-    ) -> Mock:
-        """Create a mock Dataset with specified attributes."""
-        dataset = Mock(spec=Dataset)
-        dataset.id = dataset_id
-        dataset.tenant_id = tenant_id
-        dataset.name = name
-        dataset.built_in_field_enabled = built_in_field_enabled
-        for key, value in kwargs.items():
-            setattr(dataset, key, value)
-        return dataset
-
-    @staticmethod
-    def create_user_mock(
-        user_id: str = "user-123",
-        tenant_id: str = "tenant-123",
-        **kwargs,
-    ) -> Mock:
-        """Create a mock user (Account) with specified attributes."""
-        user = create_autospec(Account, instance=True)
-        user.id = user_id
-        user.current_tenant_id = tenant_id
-        for key, value in kwargs.items():
-            setattr(user, key, value)
-        return user
-
-
-class TestDocumentServiceBatchUpdateDocumentStatus:
-    """Unit tests for non-SQL path in DocumentService.batch_update_document_status."""
-
-    def test_batch_update_document_status_invalid_action_error(self):
-        """
-        Test error handling for invalid action.
-
-        Verifies that when an invalid action is provided, a ValueError
-        is raised.
-
-        This test ensures:
-        - Invalid actions are rejected
-        - Error message is clear
-        - Error type is correct
-        """
-        # Arrange
-        dataset = DocumentStatusTestDataFactory.create_dataset_mock()
-        user = DocumentStatusTestDataFactory.create_user_mock()
-        document_ids = ["document-123"]
-
-        # Act & Assert
-        with pytest.raises(ValueError, match="Invalid action"):
-            DocumentService.batch_update_document_status(dataset, document_ids, "invalid_action", user)

From e78558bc06ce63c6ddf7de038bdddfd1a6a8374d Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 11:12:40 -0700
Subject: [PATCH 24/44] refactor(api): migrate dataset hit-testing response
 model to BaseModel (#35192)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 .../console/datasets/hit_testing.py           | 129 +++++++++++++-----
 .../console/datasets/test_hit_testing.py      |  51 +++++++
 2 files changed, 144 insertions(+), 36 deletions(-)

diff --git a/api/controllers/console/datasets/hit_testing.py b/api/controllers/console/datasets/hit_testing.py
index e62be13c2f..36a7a4bb0e 100644
--- a/api/controllers/console/datasets/hit_testing.py
+++ b/api/controllers/console/datasets/hit_testing.py
@@ -1,13 +1,13 @@
-from flask_restx import Resource, fields
+from __future__ import annotations
 
-from controllers.common.schema import register_schema_model
-from fields.hit_testing_fields import (
-    child_chunk_fields,
-    document_fields,
-    files_fields,
-    hit_testing_record_fields,
-    segment_fields,
-)
+from datetime import datetime
+from typing import Any
+
+from flask_restx import Resource
+from pydantic import Field, field_validator
+
+from controllers.common.schema import register_schema_models
+from fields.base import ResponseModel
 from libs.login import login_required
 
 from .. import console_ns
@@ -18,39 +18,92 @@ from ..wraps import (
     setup_required,
 )
 
-register_schema_model(console_ns, HitTestingPayload)
+
+def _to_timestamp(value: datetime | int | None) -> int | None:
+    if isinstance(value, datetime):
+        return int(value.timestamp())
+    return value
 
 
-def _get_or_create_model(model_name: str, field_def):
-    """Get or create a flask_restx model to avoid dict type issues in Swagger."""
-    existing = console_ns.models.get(model_name)
-    if existing is None:
-        existing = console_ns.model(model_name, field_def)
-    return existing
+class HitTestingDocument(ResponseModel):
+    id: str | None = None
+    data_source_type: str | None = None
+    name: str | None = None
+    doc_type: str | None = None
+    doc_metadata: Any | None = None
 
 
-# Register models for flask_restx to avoid dict type issues in Swagger
-document_model = _get_or_create_model("HitTestingDocument", document_fields)
+class HitTestingSegment(ResponseModel):
+    id: str | None = None
+    position: int | None = None
+    document_id: str | None = None
+    content: str | None = None
+    sign_content: str | None = None
+    answer: str | None = None
+    word_count: int | None = None
+    tokens: int | None = None
+    keywords: list[str] = Field(default_factory=list)
+    index_node_id: str | None = None
+    index_node_hash: str | None = None
+    hit_count: int | None = None
+    enabled: bool | None = None
+    disabled_at: int | None = None
+    disabled_by: str | None = None
+    status: str | None = None
+    created_by: str | None = None
+    created_at: int | None = None
+    indexing_at: int | None = None
+    completed_at: int | None = None
+    error: str | None = None
+    stopped_at: int | None = None
+    document: HitTestingDocument | None = None
 
-segment_fields_copy = segment_fields.copy()
-segment_fields_copy["document"] = fields.Nested(document_model)
-segment_model = _get_or_create_model("HitTestingSegment", segment_fields_copy)
+    @field_validator("disabled_at", "created_at", "indexing_at", "completed_at", "stopped_at", mode="before")
+    @classmethod
+    def _normalize_timestamp(cls, value: datetime | int | None) -> int | None:
+        return _to_timestamp(value)
 
-child_chunk_model = _get_or_create_model("HitTestingChildChunk", child_chunk_fields)
-files_model = _get_or_create_model("HitTestingFile", files_fields)
 
-hit_testing_record_fields_copy = hit_testing_record_fields.copy()
-hit_testing_record_fields_copy["segment"] = fields.Nested(segment_model)
-hit_testing_record_fields_copy["child_chunks"] = fields.List(fields.Nested(child_chunk_model))
-hit_testing_record_fields_copy["files"] = fields.List(fields.Nested(files_model))
-hit_testing_record_model = _get_or_create_model("HitTestingRecord", hit_testing_record_fields_copy)
+class HitTestingChildChunk(ResponseModel):
+    id: str | None = None
+    content: str | None = None
+    position: int | None = None
+    score: float | None = None
 
-# Response model for hit testing API
-hit_testing_response_fields = {
-    "query": fields.String,
-    "records": fields.List(fields.Nested(hit_testing_record_model)),
-}
-hit_testing_response_model = _get_or_create_model("HitTestingResponse", hit_testing_response_fields)
+
+class HitTestingFile(ResponseModel):
+    id: str | None = None
+    name: str | None = None
+    size: int | None = None
+    extension: str | None = None
+    mime_type: str | None = None
+    source_url: str | None = None
+
+
+class HitTestingRecord(ResponseModel):
+    segment: HitTestingSegment | None = None
+    child_chunks: list[HitTestingChildChunk] = Field(default_factory=list)
+    score: float | None = None
+    tsne_position: Any | None = None
+    files: list[HitTestingFile] = Field(default_factory=list)
+    summary: str | None = None
+
+
+class HitTestingResponse(ResponseModel):
+    query: str
+    records: list[HitTestingRecord] = Field(default_factory=list)
+
+
+register_schema_models(
+    console_ns,
+    HitTestingPayload,
+    HitTestingDocument,
+    HitTestingSegment,
+    HitTestingChildChunk,
+    HitTestingFile,
+    HitTestingRecord,
+    HitTestingResponse,
+)
 
 
 @console_ns.route("/datasets/<uuid:dataset_id>/hit-testing")
@@ -59,7 +112,11 @@ class HitTestingApi(Resource, DatasetsHitTestingBase):
     @console_ns.doc(description="Test dataset knowledge retrieval")
     @console_ns.doc(params={"dataset_id": "Dataset ID"})
     @console_ns.expect(console_ns.models[HitTestingPayload.__name__])
-    @console_ns.response(200, "Hit testing completed successfully", model=hit_testing_response_model)
+    @console_ns.response(
+        200,
+        "Hit testing completed successfully",
+        model=console_ns.models[HitTestingResponse.__name__],
+    )
     @console_ns.response(404, "Dataset not found")
     @console_ns.response(400, "Invalid parameters")
     @setup_required
@@ -74,4 +131,4 @@ class HitTestingApi(Resource, DatasetsHitTestingBase):
         args = payload.model_dump(exclude_none=True)
         self.hit_testing_args_check(args)
 
-        return self.perform_hit_testing(dataset, args)
+        return HitTestingResponse.model_validate(self.perform_hit_testing(dataset, args)).model_dump(mode="json")
diff --git a/api/tests/unit_tests/controllers/console/datasets/test_hit_testing.py b/api/tests/unit_tests/controllers/console/datasets/test_hit_testing.py
index 726c0a5cf3..09ed2aaf69 100644
--- a/api/tests/unit_tests/controllers/console/datasets/test_hit_testing.py
+++ b/api/tests/unit_tests/controllers/console/datasets/test_hit_testing.py
@@ -99,6 +99,57 @@ class TestHitTestingApi:
         assert "records" in result
         assert result["records"] == []
 
+    def test_hit_testing_success_with_optional_record_fields(self, app, dataset, dataset_id):
+        api = HitTestingApi()
+        method = unwrap(api.post)
+
+        payload = {
+            "query": "what is vector search",
+        }
+        records = [
+            {
+                "segment": None,
+                "child_chunks": [],
+                "score": None,
+                "tsne_position": None,
+                "files": [],
+                "summary": None,
+            }
+        ]
+
+        with (
+            app.test_request_context("/"),
+            patch.object(
+                type(console_ns),
+                "payload",
+                new_callable=PropertyMock,
+                return_value=payload,
+            ),
+            patch.object(
+                HitTestingPayload,
+                "model_validate",
+                return_value=MagicMock(model_dump=lambda **_: payload),
+            ),
+            patch.object(
+                HitTestingApi,
+                "get_and_validate_dataset",
+                return_value=dataset,
+            ),
+            patch.object(
+                HitTestingApi,
+                "hit_testing_args_check",
+            ),
+            patch.object(
+                HitTestingApi,
+                "perform_hit_testing",
+                return_value={"query": payload["query"], "records": records},
+            ),
+        ):
+            result = method(api, dataset_id)
+
+        assert result["query"] == payload["query"]
+        assert result["records"] == records
+
     def test_hit_testing_dataset_not_found(self, app, dataset_id):
         api = HitTestingApi()
         method = unwrap(api.post)

From ef28a63ad33a24a9730c88379d7805f8ce24bbab Mon Sep 17 00:00:00 2001
From: tmimmanuel <14046872+tmimmanuel@users.noreply.github.com>
Date: Tue, 14 Apr 2026 20:23:20 +0200
Subject: [PATCH 25/44] refactor(api): add null safety to extractor_processor
 and firecrawl (#35209)

Co-authored-by: tmimmanuel <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>
---
 api/core/rag/extractor/extract_processor.py       | 8 ++++++--
 api/core/rag/extractor/firecrawl/firecrawl_app.py | 4 ++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/api/core/rag/extractor/extract_processor.py b/api/core/rag/extractor/extract_processor.py
index 449be6a448..fbd2a6db93 100644
--- a/api/core/rag/extractor/extract_processor.py
+++ b/api/core/rag/extractor/extract_processor.py
@@ -95,9 +95,9 @@ class ExtractProcessor:
     ) -> list[Document]:
         if extract_setting.datasource_type == DatasourceType.FILE:
             with tempfile.TemporaryDirectory() as temp_dir:
+                upload_file = extract_setting.upload_file
                 if not file_path:
-                    assert extract_setting.upload_file is not None, "upload_file is required"
-                    upload_file: UploadFile = extract_setting.upload_file
+                    assert upload_file is not None, "upload_file is required"
                     suffix = Path(upload_file.key).suffix
                     # FIXME mypy: Cannot determine type of 'tempfile._get_candidate_names' better not use it here
                     file_path = f"{temp_dir}/{next(tempfile._get_candidate_names())}{suffix}"  # type: ignore
@@ -113,6 +113,7 @@ class ExtractProcessor:
                     if file_extension in {".xlsx", ".xls"}:
                         extractor = ExcelExtractor(file_path)
                     elif file_extension == ".pdf":
+                        assert upload_file is not None
                         extractor = PdfExtractor(file_path, upload_file.tenant_id, upload_file.created_by)
                     elif file_extension in {".md", ".markdown", ".mdx"}:
                         extractor = (
@@ -123,6 +124,7 @@ class ExtractProcessor:
                     elif file_extension in {".htm", ".html"}:
                         extractor = HtmlExtractor(file_path)
                     elif file_extension == ".docx":
+                        assert upload_file is not None
                         extractor = WordExtractor(file_path, upload_file.tenant_id, upload_file.created_by)
                     elif file_extension == ".doc":
                         extractor = UnstructuredWordExtractor(file_path, unstructured_api_url, unstructured_api_key)
@@ -149,12 +151,14 @@ class ExtractProcessor:
                     if file_extension in {".xlsx", ".xls"}:
                         extractor = ExcelExtractor(file_path)
                     elif file_extension == ".pdf":
+                        assert upload_file is not None
                         extractor = PdfExtractor(file_path, upload_file.tenant_id, upload_file.created_by)
                     elif file_extension in {".md", ".markdown", ".mdx"}:
                         extractor = MarkdownExtractor(file_path, autodetect_encoding=True)
                     elif file_extension in {".htm", ".html"}:
                         extractor = HtmlExtractor(file_path)
                     elif file_extension == ".docx":
+                        assert upload_file is not None
                         extractor = WordExtractor(file_path, upload_file.tenant_id, upload_file.created_by)
                     elif file_extension == ".csv":
                         extractor = CSVExtractor(file_path, autodetect_encoding=True)
diff --git a/api/core/rag/extractor/firecrawl/firecrawl_app.py b/api/core/rag/extractor/firecrawl/firecrawl_app.py
index 89bdd56a6c..556158cf00 100644
--- a/api/core/rag/extractor/firecrawl/firecrawl_app.py
+++ b/api/core/rag/extractor/firecrawl/firecrawl_app.py
@@ -174,21 +174,25 @@ class FirecrawlApp:
         return f"{self.base_url.rstrip('/')}/{path.lstrip('/')}"
 
     def _post_request(self, url, data, headers, retries=3, backoff_factor=0.5) -> httpx.Response:
+        response: httpx.Response | None = None
         for attempt in range(retries):
             response = httpx.post(url, headers=headers, json=data)
             if response.status_code == 502:
                 time.sleep(backoff_factor * (2**attempt))
             else:
                 return response
+        assert response is not None, "retries must be at least 1"
         return response
 
     def _get_request(self, url, headers, retries=3, backoff_factor=0.5) -> httpx.Response:
+        response: httpx.Response | None = None
         for attempt in range(retries):
             response = httpx.get(url, headers=headers)
             if response.status_code == 502:
                 time.sleep(backoff_factor * (2**attempt))
             else:
                 return response
+        assert response is not None, "retries must be at least 1"
         return response
 
     def _handle_error(self, response, action):

From 149b9d4c0fe745e50ac2e7445a68e43733d2135e Mon Sep 17 00:00:00 2001
From: wdeveloper16 <wdeveloper16@protonmail.com>
Date: Tue, 14 Apr 2026 20:37:59 +0200
Subject: [PATCH 26/44] refactor: replace bare dict with dict[str, Any] in
 services unit test helpers (#35182)

---
 .../services/auth/test_jina_auth_standalone_module.py      | 7 ++++---
 .../unit_tests/services/dataset_service_test_helpers.py    | 7 ++++---
 api/tests/unit_tests/services/external_dataset_service.py  | 4 ++--
 api/tests/unit_tests/services/hit_service.py               | 5 +++--
 .../unit_tests/services/test_external_dataset_service.py   | 7 ++++---
 api/tests/unit_tests/services/test_operation_service.py    | 3 ++-
 .../unit_tests/services/test_trigger_provider_service.py   | 7 ++++---
 api/tests/unit_tests/services/test_website_service.py      | 2 +-
 api/tests/unit_tests/services/vector_service.py            | 3 ++-
 9 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/api/tests/unit_tests/services/auth/test_jina_auth_standalone_module.py b/api/tests/unit_tests/services/auth/test_jina_auth_standalone_module.py
index 4b5a97bf3f..b31af996ae 100644
--- a/api/tests/unit_tests/services/auth/test_jina_auth_standalone_module.py
+++ b/api/tests/unit_tests/services/auth/test_jina_auth_standalone_module.py
@@ -4,6 +4,7 @@ import importlib.util
 import sys
 from pathlib import Path
 from types import ModuleType
+from typing import Any
 from unittest.mock import MagicMock
 
 import httpx
@@ -30,8 +31,8 @@ def jina_module() -> ModuleType:
     return module
 
 
-def _credentials(api_key: str | None = "test_api_key_123", auth_type: str = "bearer") -> dict:
-    config: dict = {} if api_key is None else {"api_key": api_key}
+def _credentials(api_key: str | None = "test_api_key_123", auth_type: str = "bearer") -> dict[str, Any]:
+    config: dict[str, Any] = {} if api_key is None else {"api_key": api_key}
     return {"auth_type": auth_type, "config": config}
 
 
@@ -47,7 +48,7 @@ def test_init_rejects_invalid_auth_type(jina_module: ModuleType) -> None:
 
 
 @pytest.mark.parametrize("credentials", [{"auth_type": "bearer", "config": {}}, {"auth_type": "bearer"}])
-def test_init_requires_api_key(jina_module: ModuleType, credentials: dict) -> None:
+def test_init_requires_api_key(jina_module: ModuleType, credentials: dict[str, Any]) -> None:
     with pytest.raises(ValueError, match="No API key provided"):
         jina_module.JinaAuth(credentials)
 
diff --git a/api/tests/unit_tests/services/dataset_service_test_helpers.py b/api/tests/unit_tests/services/dataset_service_test_helpers.py
index da557de8a4..c6972b5ef4 100644
--- a/api/tests/unit_tests/services/dataset_service_test_helpers.py
+++ b/api/tests/unit_tests/services/dataset_service_test_helpers.py
@@ -7,6 +7,7 @@ document, and segment service test modules that exercise
 
 import json
 from types import SimpleNamespace
+from typing import Any
 from unittest.mock import MagicMock, Mock, create_autospec, patch
 
 import pytest
@@ -166,7 +167,7 @@ class DatasetServiceUnitDataFactory:
         built_in_field_enabled: bool = False,
         doc_form: str | None = "text_model",
         enable_api: bool = False,
-        summary_index_setting: dict | None = None,
+        summary_index_setting: dict[str, Any] | None = None,
         **kwargs,
     ) -> Mock:
         dataset = Mock(spec=Dataset)
@@ -214,12 +215,12 @@ class DatasetServiceUnitDataFactory:
         archived: bool = False,
         enabled: bool = True,
         data_source_type: str = "upload_file",
-        data_source_info_dict: dict | None = None,
+        data_source_info_dict: dict[str, Any] | None = None,
         data_source_info: str | None = None,
         doc_form: str = "text_model",
         need_summary: bool = True,
         position: int = 0,
-        doc_metadata: dict | None = None,
+        doc_metadata: dict[str, Any] | None = None,
         name: str = "Document",
         **kwargs,
     ) -> Mock:
diff --git a/api/tests/unit_tests/services/external_dataset_service.py b/api/tests/unit_tests/services/external_dataset_service.py
index dd41c0c97e..83bae370eb 100644
--- a/api/tests/unit_tests/services/external_dataset_service.py
+++ b/api/tests/unit_tests/services/external_dataset_service.py
@@ -51,7 +51,7 @@ class ExternalDatasetTestDataFactory:
         tenant_id: str = "tenant-1",
         name: str = "Test API",
         description: str = "Description",
-        settings: dict | None = None,
+        settings: dict[str, Any] | None = None,
     ) -> ExternalKnowledgeApis:
         """
         Create a concrete ``ExternalKnowledgeApis`` instance with minimal fields.
@@ -220,7 +220,7 @@ class TestExternalDatasetServiceValidateApiList:
             ({"endpoint": "https://example.com"}, "api_key is required"),
         ],
     )
-    def test_validate_api_list_failures(self, config: dict, expected_message: str):
+    def test_validate_api_list_failures(self, config: dict[str, Any], expected_message: str):
         """
         Invalid configs should raise ``ValueError`` with a clear message.
         """
diff --git a/api/tests/unit_tests/services/hit_service.py b/api/tests/unit_tests/services/hit_service.py
index 22ab8503df..ddbc7dc041 100644
--- a/api/tests/unit_tests/services/hit_service.py
+++ b/api/tests/unit_tests/services/hit_service.py
@@ -6,6 +6,7 @@ which handles retrieval testing operations for datasets, including internal
 dataset retrieval and external knowledge base retrieval.
 """
 
+from typing import Any
 from unittest.mock import MagicMock, Mock, patch
 
 import pytest
@@ -30,7 +31,7 @@ class HitTestingTestDataFactory:
         dataset_id: str = "dataset-123",
         tenant_id: str = "tenant-123",
         provider: str = "vendor",
-        retrieval_model: dict | None = None,
+        retrieval_model: dict[str, Any] | None = None,
         **kwargs,
     ) -> Mock:
         """
@@ -83,7 +84,7 @@ class HitTestingTestDataFactory:
     @staticmethod
     def create_document_mock(
         content: str = "Test document content",
-        metadata: dict | None = None,
+        metadata: dict[str, Any] | None = None,
         **kwargs,
     ) -> Mock:
         """
diff --git a/api/tests/unit_tests/services/test_external_dataset_service.py b/api/tests/unit_tests/services/test_external_dataset_service.py
index 9c1a92b4d9..fdea0ba869 100644
--- a/api/tests/unit_tests/services/test_external_dataset_service.py
+++ b/api/tests/unit_tests/services/test_external_dataset_service.py
@@ -8,6 +8,7 @@ Target: 1500+ lines of comprehensive test coverage.
 import json
 import re
 from datetime import datetime
+from typing import Any
 from unittest.mock import MagicMock, Mock, patch
 
 import pytest
@@ -31,7 +32,7 @@ class ExternalDatasetServiceTestDataFactory:
         api_id: str = "api-123",
         tenant_id: str = "tenant-123",
         name: str = "Test API",
-        settings: dict | None = None,
+        settings: dict[str, Any] | None = None,
         **kwargs,
     ) -> Mock:
         """Create a mock ExternalKnowledgeApis object."""
@@ -120,8 +121,8 @@ class ExternalDatasetServiceTestDataFactory:
     def create_api_setting_mock(
         url: str = "https://api.example.com/retrieval",
         request_method: str = "post",
-        headers: dict | None = None,
-        params: dict | None = None,
+        headers: dict[str, Any] | None = None,
+        params: dict[str, Any] | None = None,
     ) -> ExternalKnowledgeApiSetting:
         """Create an ExternalKnowledgeApiSetting object."""
         if headers is None:
diff --git a/api/tests/unit_tests/services/test_operation_service.py b/api/tests/unit_tests/services/test_operation_service.py
index a4c69b23ac..e43a7fa649 100644
--- a/api/tests/unit_tests/services/test_operation_service.py
+++ b/api/tests/unit_tests/services/test_operation_service.py
@@ -1,3 +1,4 @@
+from typing import Any
 from unittest.mock import MagicMock, patch
 
 import httpx
@@ -105,7 +106,7 @@ class TestOperationService:
     )
     @patch.object(OperationService, "_send_request")
     def test_should_map_parameters_correctly_when_record_utm_called(
-        self, mock_send: MagicMock, utm_info: dict, expected_params: dict
+        self, mock_send: MagicMock, utm_info: dict[str, Any], expected_params: dict[str, Any]
     ):
         """Test that record_utm correctly maps utm_info to parameters and calls _send_request"""
         # Arrange
diff --git a/api/tests/unit_tests/services/test_trigger_provider_service.py b/api/tests/unit_tests/services/test_trigger_provider_service.py
index bd2e936b62..ebf1b36610 100644
--- a/api/tests/unit_tests/services/test_trigger_provider_service.py
+++ b/api/tests/unit_tests/services/test_trigger_provider_service.py
@@ -3,6 +3,7 @@ from __future__ import annotations
 import contextlib
 import json
 from types import SimpleNamespace
+from typing import Any
 from unittest.mock import MagicMock
 
 import pytest
@@ -28,9 +29,9 @@ def _mock_get_trigger_provider(mocker: MockerFixture, provider: object | None) -
 
 def _encrypter_mock(
     *,
-    decrypted: dict | None = None,
-    encrypted: dict | None = None,
-    masked: dict | None = None,
+    decrypted: dict[str, Any] | None = None,
+    encrypted: dict[str, Any] | None = None,
+    masked: dict[str, Any] | None = None,
 ) -> MagicMock:
     enc = MagicMock()
     enc.decrypt.return_value = decrypted or {}
diff --git a/api/tests/unit_tests/services/test_website_service.py b/api/tests/unit_tests/services/test_website_service.py
index b0ddc7388a..2024aec13a 100644
--- a/api/tests/unit_tests/services/test_website_service.py
+++ b/api/tests/unit_tests/services/test_website_service.py
@@ -89,7 +89,7 @@ def test_website_crawl_api_request_from_args_valid_and_to_crawl_request() -> Non
         ({"provider": "firecrawl", "url": "https://example.com"}, "Options are required"),
     ],
 )
-def test_website_crawl_api_request_from_args_requires_fields(args: dict, missing_msg: str) -> None:
+def test_website_crawl_api_request_from_args_requires_fields(args: dict[str, Any], missing_msg: str) -> None:
     with pytest.raises(ValueError, match=missing_msg):
         WebsiteCrawlApiRequest.from_args(args)
 
diff --git a/api/tests/unit_tests/services/vector_service.py b/api/tests/unit_tests/services/vector_service.py
index ee9ba1c6d6..ad80beb4e3 100644
--- a/api/tests/unit_tests/services/vector_service.py
+++ b/api/tests/unit_tests/services/vector_service.py
@@ -114,6 +114,7 @@ This test suite follows a comprehensive testing strategy that covers:
 ================================================================================
 """
 
+from typing import Any
 from unittest.mock import Mock, patch
 
 import pytest
@@ -156,7 +157,7 @@ class VectorServiceTestDataFactory:
         indexing_technique: str = IndexTechniqueType.HIGH_QUALITY,
         embedding_model_provider: str = "openai",
         embedding_model: str = "text-embedding-ada-002",
-        index_struct_dict: dict | None = None,
+        index_struct_dict: dict[str, Any] | None = None,
         **kwargs,
     ) -> Mock:
         """

From e527b7c5f1aac61a596ccfbd7520b1f7ec1475ee Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 11:40:40 -0700
Subject: [PATCH 27/44] refactor(api): migrate console installed-app list
 response to BaseModel (#35202)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 .../console/explore/installed_app.py          | 106 +++++++++++++++---
 1 file changed, 93 insertions(+), 13 deletions(-)

diff --git a/api/controllers/console/explore/installed_app.py b/api/controllers/console/explore/installed_app.py
index 0740dd0e24..7dbb7220f4 100644
--- a/api/controllers/console/explore/installed_app.py
+++ b/api/controllers/console/explore/installed_app.py
@@ -1,21 +1,24 @@
 import logging
+from datetime import datetime
 from typing import Any
 
 from flask import request
-from flask_restx import Resource, fields, marshal_with
-from pydantic import BaseModel, Field
+from flask_restx import Resource
+from graphon.file import helpers as file_helpers
+from pydantic import BaseModel, Field, computed_field, field_validator
 from sqlalchemy import and_, select
 from werkzeug.exceptions import BadRequest, Forbidden, NotFound
 
-from controllers.common.schema import get_or_create_model
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.explore.wraps import InstalledAppResource
 from controllers.console.wraps import account_initialization_required, cloud_edition_billing_resource_check
 from extensions.ext_database import db
-from fields.installed_app_fields import app_fields, installed_app_fields, installed_app_list_fields
+from fields.base import ResponseModel
 from libs.datetime_utils import naive_utc_now
 from libs.login import current_account_with_tenant, login_required
 from models import App, InstalledApp, RecommendedApp
+from models.model import IconType
 from services.account_service import TenantService
 from services.enterprise.enterprise_service import EnterpriseService
 from services.feature_service import FeatureService
@@ -36,22 +39,97 @@ class InstalledAppsListQuery(BaseModel):
 logger = logging.getLogger(__name__)
 
 
-app_model = get_or_create_model("InstalledAppInfo", app_fields)
+def _build_icon_url(icon_type: str | IconType | None, icon: str | None) -> str | None:
+    if icon is None or icon_type is None:
+        return None
+    icon_type_value = icon_type.value if isinstance(icon_type, IconType) else str(icon_type)
+    if icon_type_value.lower() != IconType.IMAGE:
+        return None
+    return file_helpers.get_signed_file_url(icon)
 
-installed_app_fields_copy = installed_app_fields.copy()
-installed_app_fields_copy["app"] = fields.Nested(app_model)
-installed_app_model = get_or_create_model("InstalledApp", installed_app_fields_copy)
 
-installed_app_list_fields_copy = installed_app_list_fields.copy()
-installed_app_list_fields_copy["installed_apps"] = fields.List(fields.Nested(installed_app_model))
-installed_app_list_model = get_or_create_model("InstalledAppList", installed_app_list_fields_copy)
+def _safe_primitive(value: Any) -> Any:
+    if value is None or isinstance(value, (str, int, float, bool, datetime)):
+        return value
+    return None
+
+
+class InstalledAppInfoResponse(ResponseModel):
+    id: str
+    name: str | None = None
+    mode: str | None = None
+    icon_type: str | None = None
+    icon: str | None = None
+    icon_background: str | None = None
+    use_icon_as_answer_icon: bool | None = None
+
+    @field_validator("mode", "icon_type", mode="before")
+    @classmethod
+    def _normalize_enum_like(cls, value: Any) -> str | None:
+        if value is None:
+            return None
+        if isinstance(value, str):
+            return value
+        return str(getattr(value, "value", value))
+
+    @computed_field(return_type=str | None)  # type: ignore[prop-decorator]
+    @property
+    def icon_url(self) -> str | None:
+        return _build_icon_url(self.icon_type, self.icon)
+
+
+class InstalledAppResponse(ResponseModel):
+    id: str
+    app: InstalledAppInfoResponse
+    app_owner_tenant_id: str
+    is_pinned: bool
+    last_used_at: int | None = None
+    editable: bool
+    uninstallable: bool
+
+    @field_validator("app", mode="before")
+    @classmethod
+    def _normalize_app(cls, value: Any) -> Any:
+        if isinstance(value, dict):
+            return value
+        return {
+            "id": _safe_primitive(getattr(value, "id", "")) or "",
+            "name": _safe_primitive(getattr(value, "name", None)),
+            "mode": _safe_primitive(getattr(value, "mode", None)),
+            "icon_type": _safe_primitive(getattr(value, "icon_type", None)),
+            "icon": _safe_primitive(getattr(value, "icon", None)),
+            "icon_background": _safe_primitive(getattr(value, "icon_background", None)),
+            "use_icon_as_answer_icon": _safe_primitive(getattr(value, "use_icon_as_answer_icon", None)),
+        }
+
+    @field_validator("last_used_at", mode="before")
+    @classmethod
+    def _normalize_timestamp(cls, value: datetime | int | None) -> int | None:
+        if isinstance(value, datetime):
+            return int(value.timestamp())
+        return value
+
+
+class InstalledAppListResponse(ResponseModel):
+    installed_apps: list[InstalledAppResponse]
+
+
+register_schema_models(
+    console_ns,
+    InstalledAppCreatePayload,
+    InstalledAppUpdatePayload,
+    InstalledAppsListQuery,
+    InstalledAppInfoResponse,
+    InstalledAppResponse,
+    InstalledAppListResponse,
+)
 
 
 @console_ns.route("/installed-apps")
 class InstalledAppsListApi(Resource):
     @login_required
     @account_initialization_required
-    @marshal_with(installed_app_list_model)
+    @console_ns.response(200, "Success", console_ns.models[InstalledAppListResponse.__name__])
     def get(self):
         query = InstalledAppsListQuery.model_validate(request.args.to_dict())
         current_user, current_tenant_id = current_account_with_tenant()
@@ -125,7 +203,9 @@ class InstalledAppsListApi(Resource):
             )
         )
 
-        return {"installed_apps": installed_app_list}
+        return InstalledAppListResponse.model_validate(
+            {"installed_apps": installed_app_list}, from_attributes=True
+        ).model_dump(mode="json")
 
     @login_required
     @account_initialization_required

From b1df52b8ffaeccf03b3ce0a3a24713da13723707 Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 11:43:09 -0700
Subject: [PATCH 28/44] refactor(api): migrate console workflow app-log
 responses to BaseModel (#35201)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 .../console/app/workflow_app_log.py           | 147 +++++++++++++++---
 .../controllers/console/app/test_app_apis.py  |   4 +-
 .../console/app/test_workflow_app_log_api.py  |  85 ++++++++++
 3 files changed, 215 insertions(+), 21 deletions(-)
 create mode 100644 api/tests/unit_tests/controllers/console/app/test_workflow_app_log_api.py

diff --git a/api/controllers/console/app/workflow_app_log.py b/api/controllers/console/app/workflow_app_log.py
index 8ae6a78a62..6b402898e8 100644
--- a/api/controllers/console/app/workflow_app_log.py
+++ b/api/controllers/console/app/workflow_app_log.py
@@ -1,27 +1,26 @@
 from datetime import datetime
+from typing import Any
 
 from dateutil.parser import isoparse
 from flask import request
-from flask_restx import Resource, marshal_with
+from flask_restx import Resource
 from graphon.enums import WorkflowExecutionStatus
 from pydantic import BaseModel, Field, field_validator
 from sqlalchemy.orm import sessionmaker
 
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.wraps import get_app_model
 from controllers.console.wraps import account_initialization_required, setup_required
 from extensions.ext_database import db
-from fields.workflow_app_log_fields import (
-    build_workflow_app_log_pagination_model,
-    build_workflow_archived_log_pagination_model,
-)
+from fields.base import ResponseModel
+from fields.end_user_fields import SimpleEndUser
+from fields.member_fields import SimpleAccount
 from libs.login import login_required
 from models import App
 from models.model import AppMode
 from services.workflow_app_service import WorkflowAppService
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class WorkflowAppLogQuery(BaseModel):
     keyword: str | None = Field(default=None, description="Search keyword for filtering logs")
@@ -58,13 +57,113 @@ class WorkflowAppLogQuery(BaseModel):
         raise ValueError("Invalid boolean value for detail")
 
 
-console_ns.schema_model(
-    WorkflowAppLogQuery.__name__, WorkflowAppLogQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
-)
+class WorkflowRunForLogResponse(ResponseModel):
+    id: str
+    version: str | None = None
+    status: str | None = None
+    triggered_from: str | None = None
+    error: str | None = None
+    elapsed_time: float | None = None
+    total_tokens: int | None = None
+    total_steps: int | None = None
+    created_at: int | None = None
+    finished_at: int | None = None
+    exceptions_count: int | None = None
 
-# Register model for flask_restx to avoid dict type issues in Swagger
-workflow_app_log_pagination_model = build_workflow_app_log_pagination_model(console_ns)
-workflow_archived_log_pagination_model = build_workflow_archived_log_pagination_model(console_ns)
+    @field_validator("status", mode="before")
+    @classmethod
+    def _normalize_status(cls, value: Any) -> str | None:
+        if value is None:
+            return None
+        if isinstance(value, str):
+            return value
+        return str(getattr(value, "value", value))
+
+    @field_validator("created_at", "finished_at", mode="before")
+    @classmethod
+    def _normalize_timestamp(cls, value: datetime | int | None) -> int | None:
+        if isinstance(value, datetime):
+            return int(value.timestamp())
+        return value
+
+
+class WorkflowRunForArchivedLogResponse(ResponseModel):
+    id: str
+    status: str | None = None
+    triggered_from: str | None = None
+    elapsed_time: float | None = None
+    total_tokens: int | None = None
+
+    @field_validator("status", mode="before")
+    @classmethod
+    def _normalize_status(cls, value: Any) -> str | None:
+        if value is None:
+            return None
+        if isinstance(value, str):
+            return value
+        return str(getattr(value, "value", value))
+
+
+class WorkflowAppLogPartialResponse(ResponseModel):
+    id: str
+    workflow_run: WorkflowRunForLogResponse | None = None
+    details: Any = None
+    created_from: str | None = None
+    created_by_role: str | None = None
+    created_by_account: SimpleAccount | None = None
+    created_by_end_user: SimpleEndUser | None = None
+    created_at: int | None = None
+
+    @field_validator("created_at", mode="before")
+    @classmethod
+    def _normalize_timestamp(cls, value: datetime | int | None) -> int | None:
+        if isinstance(value, datetime):
+            return int(value.timestamp())
+        return value
+
+
+class WorkflowArchivedLogPartialResponse(ResponseModel):
+    id: str
+    workflow_run: WorkflowRunForArchivedLogResponse | None = None
+    trigger_metadata: Any = None
+    created_by_account: SimpleAccount | None = None
+    created_by_end_user: SimpleEndUser | None = None
+    created_at: int | None = None
+
+    @field_validator("created_at", mode="before")
+    @classmethod
+    def _normalize_timestamp(cls, value: datetime | int | None) -> int | None:
+        if isinstance(value, datetime):
+            return int(value.timestamp())
+        return value
+
+
+class WorkflowAppLogPaginationResponse(ResponseModel):
+    page: int
+    limit: int
+    total: int
+    has_more: bool
+    data: list[WorkflowAppLogPartialResponse]
+
+
+class WorkflowArchivedLogPaginationResponse(ResponseModel):
+    page: int
+    limit: int
+    total: int
+    has_more: bool
+    data: list[WorkflowArchivedLogPartialResponse]
+
+
+register_schema_models(
+    console_ns,
+    WorkflowAppLogQuery,
+    WorkflowRunForLogResponse,
+    WorkflowRunForArchivedLogResponse,
+    WorkflowAppLogPartialResponse,
+    WorkflowArchivedLogPartialResponse,
+    WorkflowAppLogPaginationResponse,
+    WorkflowArchivedLogPaginationResponse,
+)
 
 
 @console_ns.route("/apps/<uuid:app_id>/workflow-app-logs")
@@ -73,12 +172,15 @@ class WorkflowAppLogApi(Resource):
     @console_ns.doc(description="Get workflow application execution logs")
     @console_ns.doc(params={"app_id": "Application ID"})
     @console_ns.expect(console_ns.models[WorkflowAppLogQuery.__name__])
-    @console_ns.response(200, "Workflow app logs retrieved successfully", workflow_app_log_pagination_model)
+    @console_ns.response(
+        200,
+        "Workflow app logs retrieved successfully",
+        console_ns.models[WorkflowAppLogPaginationResponse.__name__],
+    )
     @setup_required
     @login_required
     @account_initialization_required
     @get_app_model(mode=[AppMode.WORKFLOW])
-    @marshal_with(workflow_app_log_pagination_model)
     def get(self, app_model: App):
         """
         Get workflow app logs
@@ -102,7 +204,9 @@ class WorkflowAppLogApi(Resource):
                 created_by_account=args.created_by_account,
             )
 
-            return workflow_app_log_pagination
+            return WorkflowAppLogPaginationResponse.model_validate(
+                workflow_app_log_pagination, from_attributes=True
+            ).model_dump(mode="json")
 
 
 @console_ns.route("/apps/<uuid:app_id>/workflow-archived-logs")
@@ -111,12 +215,15 @@ class WorkflowArchivedLogApi(Resource):
     @console_ns.doc(description="Get workflow archived execution logs")
     @console_ns.doc(params={"app_id": "Application ID"})
     @console_ns.expect(console_ns.models[WorkflowAppLogQuery.__name__])
-    @console_ns.response(200, "Workflow archived logs retrieved successfully", workflow_archived_log_pagination_model)
+    @console_ns.response(
+        200,
+        "Workflow archived logs retrieved successfully",
+        console_ns.models[WorkflowArchivedLogPaginationResponse.__name__],
+    )
     @setup_required
     @login_required
     @account_initialization_required
     @get_app_model(mode=[AppMode.WORKFLOW])
-    @marshal_with(workflow_archived_log_pagination_model)
     def get(self, app_model: App):
         """
         Get workflow archived logs
@@ -132,4 +239,6 @@ class WorkflowArchivedLogApi(Resource):
                 limit=args.limit,
             )
 
-            return workflow_app_log_pagination
+            return WorkflowArchivedLogPaginationResponse.model_validate(
+                workflow_app_log_pagination, from_attributes=True
+            ).model_dump(mode="json")
diff --git a/api/tests/test_containers_integration_tests/controllers/console/app/test_app_apis.py b/api/tests/test_containers_integration_tests/controllers/console/app/test_app_apis.py
index 54e0496dbd..4e25a7780f 100644
--- a/api/tests/test_containers_integration_tests/controllers/console/app/test_app_apis.py
+++ b/api/tests/test_containers_integration_tests/controllers/console/app/test_app_apis.py
@@ -432,7 +432,7 @@ class TestWorkflowAppLogEndpoints:
         monkeypatch.setattr(workflow_app_log_module, "sessionmaker", DummySessionMaker)
 
         def fake_get_paginate(self, **_kwargs):
-            return {"items": [], "total": 0}
+            return {"page": 1, "limit": 20, "total": 0, "has_more": False, "data": []}
 
         monkeypatch.setattr(
             workflow_app_log_module.WorkflowAppService,
@@ -443,7 +443,7 @@ class TestWorkflowAppLogEndpoints:
         with app.test_request_context("/?page=1&limit=20"):
             result = method(app_model=SimpleNamespace(id="app-1"))
 
-        assert result == {"items": [], "total": 0}
+        assert result == {"page": 1, "limit": 20, "total": 0, "has_more": False, "data": []}
 
 
 class TestWorkflowDraftVariableEndpoints:
diff --git a/api/tests/unit_tests/controllers/console/app/test_workflow_app_log_api.py b/api/tests/unit_tests/controllers/console/app/test_workflow_app_log_api.py
new file mode 100644
index 0000000000..2adb69c704
--- /dev/null
+++ b/api/tests/unit_tests/controllers/console/app/test_workflow_app_log_api.py
@@ -0,0 +1,85 @@
+from __future__ import annotations
+
+from datetime import UTC, datetime
+
+from graphon.enums import WorkflowExecutionStatus
+
+from controllers.console.app import workflow_app_log as workflow_app_log_module
+
+
+def test_workflow_app_log_query_parses_bool_and_datetime():
+    query = workflow_app_log_module.WorkflowAppLogQuery.model_validate(
+        {
+            "detail": "true",
+            "created_at__before": "2026-01-02T03:04:05Z",
+            "page": "2",
+            "limit": "10",
+        }
+    )
+
+    assert query.detail is True
+    assert query.created_at__before == datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+    assert query.page == 2
+    assert query.limit == 10
+
+
+def test_workflow_app_log_pagination_response_normalizes_nested_fields():
+    created_at = datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+    response = workflow_app_log_module.WorkflowAppLogPaginationResponse.model_validate(
+        {
+            "page": 1,
+            "limit": 20,
+            "total": 1,
+            "has_more": False,
+            "data": [
+                {
+                    "id": "log-1",
+                    "workflow_run": {
+                        "id": "run-1",
+                        "status": WorkflowExecutionStatus.SUCCEEDED,
+                        "created_at": created_at,
+                        "finished_at": created_at,
+                    },
+                    "details": {"trigger_metadata": {}},
+                    "created_by_account": {"id": "acc-1", "name": "acc", "email": "acc@example.com"},
+                    "created_at": created_at,
+                }
+            ],
+        }
+    ).model_dump(mode="json")
+
+    assert response["data"][0]["workflow_run"]["status"] == "succeeded"
+    assert response["data"][0]["workflow_run"]["created_at"] == int(created_at.timestamp())
+    assert response["data"][0]["created_at"] == int(created_at.timestamp())
+
+
+def test_workflow_archived_log_pagination_response_normalizes_nested_fields():
+    created_at = datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+    response = workflow_app_log_module.WorkflowArchivedLogPaginationResponse.model_validate(
+        {
+            "page": 1,
+            "limit": 20,
+            "total": 1,
+            "has_more": False,
+            "data": [
+                {
+                    "id": "archived-1",
+                    "workflow_run": {
+                        "id": "run-1",
+                        "status": WorkflowExecutionStatus.FAILED,
+                    },
+                    "trigger_metadata": {"type": "trigger-plugin"},
+                    "created_by_end_user": {
+                        "id": "eu-1",
+                        "type": "anonymous",
+                        "is_anonymous": True,
+                        "session_id": "session-1",
+                    },
+                    "created_at": created_at,
+                }
+            ],
+        }
+    ).model_dump(mode="json")
+
+    assert response["data"][0]["workflow_run"]["status"] == "failed"
+    assert response["data"][0]["created_at"] == int(created_at.timestamp())

From 9c90c1c455cd80110006d0e7b34544b636f90939 Mon Sep 17 00:00:00 2001
From: wdeveloper16 <wdeveloper16@protonmail.com>
Date: Tue, 14 Apr 2026 21:44:40 +0200
Subject: [PATCH 29/44] =?UTF-8?q?refactor:=20replace=20bare=20dict=20with?=
 =?UTF-8?q?=20dict[str,=20Any]=20in=20services=20and=20hosti=E2=80=A6=20(#?=
 =?UTF-8?q?35211)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 api/core/hosting_configuration.py         |  4 ++-
 api/services/rag_pipeline/rag_pipeline.py | 32 +++++++++++++----------
 api/services/workflow_service.py          | 16 ++++++------
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/api/core/hosting_configuration.py b/api/core/hosting_configuration.py
index 60f5434bc1..f8f56e12d2 100644
--- a/api/core/hosting_configuration.py
+++ b/api/core/hosting_configuration.py
@@ -1,3 +1,5 @@
+from typing import Any
+
 from flask import Flask
 from graphon.model_runtime.entities.model_entities import ModelType
 from pydantic import BaseModel
@@ -28,7 +30,7 @@ class FreeHostingQuota(HostingQuota):
 
 class HostingProvider(BaseModel):
     enabled: bool = False
-    credentials: dict | None = None
+    credentials: dict[str, Any] | None = None
     quota_unit: QuotaUnit | None = None
     quotas: list[HostingQuota] = []
 
diff --git a/api/services/rag_pipeline/rag_pipeline.py b/api/services/rag_pipeline/rag_pipeline.py
index 5fc5b412b3..605689226a 100644
--- a/api/services/rag_pipeline/rag_pipeline.py
+++ b/api/services/rag_pipeline/rag_pipeline.py
@@ -104,7 +104,7 @@ class RagPipelineService:
         self._workflow_run_repo = DifyAPIRepositoryFactory.create_api_workflow_run_repository(session_maker)
 
     @classmethod
-    def get_pipeline_templates(cls, type: str = "built-in", language: str = "en-US") -> dict:
+    def get_pipeline_templates(cls, type: str = "built-in", language: str = "en-US") -> dict[str, Any]:
         if type == "built-in":
             mode = dify_config.HOSTED_FETCH_PIPELINE_TEMPLATES_MODE
             retrieval_instance = PipelineTemplateRetrievalFactory.get_pipeline_template_factory(mode)()
@@ -120,7 +120,7 @@ class RagPipelineService:
             return result
 
     @classmethod
-    def get_pipeline_template_detail(cls, template_id: str, type: str = "built-in") -> dict | None:
+    def get_pipeline_template_detail(cls, template_id: str, type: str = "built-in") -> dict[str, Any] | None:
         """
         Get pipeline template detail.
 
@@ -131,7 +131,7 @@ class RagPipelineService:
         if type == "built-in":
             mode = dify_config.HOSTED_FETCH_PIPELINE_TEMPLATES_MODE
             retrieval_instance = PipelineTemplateRetrievalFactory.get_pipeline_template_factory(mode)()
-            built_in_result: dict | None = retrieval_instance.get_pipeline_template_detail(template_id)
+            built_in_result: dict[str, Any] | None = retrieval_instance.get_pipeline_template_detail(template_id)
             if built_in_result is None:
                 logger.warning(
                     "pipeline template retrieval returned empty result, template_id: %s, mode: %s",
@@ -142,7 +142,7 @@ class RagPipelineService:
         else:
             mode = "customized"
             retrieval_instance = PipelineTemplateRetrievalFactory.get_pipeline_template_factory(mode)()
-            customized_result: dict | None = retrieval_instance.get_pipeline_template_detail(template_id)
+            customized_result: dict[str, Any] | None = retrieval_instance.get_pipeline_template_detail(template_id)
             return customized_result
 
     @classmethod
@@ -297,7 +297,7 @@ class RagPipelineService:
         self,
         *,
         pipeline: Pipeline,
-        graph: dict,
+        graph: dict[str, Any],
         unique_hash: str | None,
         account: Account,
         environment_variables: Sequence[VariableBase],
@@ -467,7 +467,9 @@ class RagPipelineService:
 
         return default_block_configs
 
-    def get_default_block_config(self, node_type: str, filters: dict | None = None) -> Mapping[str, object] | None:
+    def get_default_block_config(
+        self, node_type: str, filters: dict[str, Any] | None = None
+    ) -> Mapping[str, object] | None:
         """
         Get default config of node.
         :param node_type: node type
@@ -500,7 +502,7 @@ class RagPipelineService:
         return default_config
 
     def run_draft_workflow_node(
-        self, pipeline: Pipeline, node_id: str, user_inputs: dict, account: Account
+        self, pipeline: Pipeline, node_id: str, user_inputs: dict[str, Any], account: Account
     ) -> WorkflowNodeExecutionModel | None:
         """
         Run draft workflow node
@@ -582,7 +584,7 @@ class RagPipelineService:
         self,
         pipeline: Pipeline,
         node_id: str,
-        user_inputs: dict,
+        user_inputs: dict[str, Any],
         account: Account,
         datasource_type: str,
         is_published: bool,
@@ -749,7 +751,7 @@ class RagPipelineService:
         self,
         pipeline: Pipeline,
         node_id: str,
-        user_inputs: dict,
+        user_inputs: dict[str, Any],
         account: Account,
         datasource_type: str,
         is_published: bool,
@@ -979,7 +981,7 @@ class RagPipelineService:
         return workflow_node_execution
 
     def update_workflow(
-        self, *, session: Session, workflow_id: str, tenant_id: str, account_id: str, data: dict
+        self, *, session: Session, workflow_id: str, tenant_id: str, account_id: str, data: dict[str, Any]
     ) -> Workflow | None:
         """
         Update workflow attributes
@@ -1099,7 +1101,9 @@ class RagPipelineService:
         ]
         return datasource_provider_variables
 
-    def get_rag_pipeline_paginate_workflow_runs(self, pipeline: Pipeline, args: dict) -> InfiniteScrollPagination:
+    def get_rag_pipeline_paginate_workflow_runs(
+        self, pipeline: Pipeline, args: dict[str, Any]
+    ) -> InfiniteScrollPagination:
         """
         Get debug workflow run list
         Only return triggered_from == debugging
@@ -1169,7 +1173,7 @@ class RagPipelineService:
         return list(node_executions)
 
     @classmethod
-    def publish_customized_pipeline_template(cls, pipeline_id: str, args: dict):
+    def publish_customized_pipeline_template(cls, pipeline_id: str, args: dict[str, Any]):
         """
         Publish customized pipeline template
         """
@@ -1259,7 +1263,7 @@ class RagPipelineService:
         )
         return node_exec
 
-    def set_datasource_variables(self, pipeline: Pipeline, args: dict, current_user: Account):
+    def set_datasource_variables(self, pipeline: Pipeline, args: dict[str, Any], current_user: Account):
         """
         Set datasource variables
         """
@@ -1346,7 +1350,7 @@ class RagPipelineService:
         )
         return workflow_node_execution_db_model
 
-    def get_recommended_plugins(self, type: str) -> dict:
+    def get_recommended_plugins(self, type: str) -> dict[str, Any]:
         # Query active recommended plugins
         stmt = select(PipelineRecommendedPlugin).where(PipelineRecommendedPlugin.active == True)
         if type and type != "all":
diff --git a/api/services/workflow_service.py b/api/services/workflow_service.py
index 839b9e3319..0e1864ce9a 100644
--- a/api/services/workflow_service.py
+++ b/api/services/workflow_service.py
@@ -241,8 +241,8 @@ class WorkflowService:
         self,
         *,
         app_model: App,
-        graph: dict,
-        features: dict,
+        graph: dict[str, Any],
+        features: dict[str, Any],
         unique_hash: str | None,
         account: Account,
         environment_variables: Sequence[VariableBase],
@@ -576,7 +576,7 @@ class WorkflowService:
         except Exception as e:
             raise ValueError(f"Failed to validate default credential for tool provider {provider}: {str(e)}")
 
-    def _validate_load_balancing_credentials(self, workflow: Workflow, node_data: dict, node_id: str) -> None:
+    def _validate_load_balancing_credentials(self, workflow: Workflow, node_data: dict[str, Any], node_id: str) -> None:
         """
         Validate load balancing credentials for a workflow node.
 
@@ -1214,7 +1214,7 @@ class WorkflowService:
         return variable_pool
 
     def run_free_workflow_node(
-        self, node_data: dict, tenant_id: str, user_id: str, node_id: str, user_inputs: dict[str, Any]
+        self, node_data: dict[str, Any], tenant_id: str, user_id: str, node_id: str, user_inputs: dict[str, Any]
     ) -> WorkflowNodeExecution:
         """
         Run free workflow node
@@ -1361,7 +1361,7 @@ class WorkflowService:
             node_execution.status = WorkflowNodeExecutionStatus.FAILED
             node_execution.error = error
 
-    def convert_to_workflow(self, app_model: App, account: Account, args: dict) -> App:
+    def convert_to_workflow(self, app_model: App, account: Account, args: dict[str, Any]) -> App:
         """
         Basic mode of chatbot app(expert mode) to workflow
         Completion App to Workflow App
@@ -1421,7 +1421,7 @@ class WorkflowService:
             if node_type == BuiltinNodeTypes.HUMAN_INPUT:
                 self._validate_human_input_node_data(node_data)
 
-    def validate_features_structure(self, app_model: App, features: dict):
+    def validate_features_structure(self, app_model: App, features: dict[str, Any]):
         match app_model.mode:
             case AppMode.ADVANCED_CHAT:
                 return AdvancedChatAppConfigManager.config_validate(
@@ -1434,7 +1434,7 @@ class WorkflowService:
             case _:
                 raise ValueError(f"Invalid app mode: {app_model.mode}")
 
-    def _validate_human_input_node_data(self, node_data: dict) -> None:
+    def _validate_human_input_node_data(self, node_data: dict[str, Any]) -> None:
         """
         Validate HumanInput node data format.
 
@@ -1452,7 +1452,7 @@ class WorkflowService:
             raise ValueError(f"Invalid HumanInput node data: {str(e)}")
 
     def update_workflow(
-        self, *, session: Session, workflow_id: str, tenant_id: str, account_id: str, data: dict
+        self, *, session: Session, workflow_id: str, tenant_id: str, account_id: str, data: dict[str, Any]
     ) -> Workflow | None:
         """
         Update workflow attributes

From 7e7b27fdec782a3d7b4e8a7738032c226ad9bd7b Mon Sep 17 00:00:00 2001
From: wdeveloper16 <wdeveloper16@protonmail.com>
Date: Tue, 14 Apr 2026 21:45:04 +0200
Subject: [PATCH 30/44] =?UTF-8?q?refactor:=20replace=20bare=20dict=20with?=
 =?UTF-8?q?=20dict[str,=20Any]=20in=20response=20converter=E2=80=A6=20(#35?=
 =?UTF-8?q?212)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 api/controllers/console/auth/activate.py                  | 4 +++-
 api/controllers/console/datasets/datasets_document.py     | 2 +-
 api/controllers/console/workspace/models.py               | 2 +-
 .../app/apps/advanced_chat/generate_response_converter.py | 4 ++--
 .../app/apps/agent_chat/generate_response_converter.py    | 6 +++---
 api/core/app/apps/base_app_generate_response_converter.py | 8 ++++----
 api/core/app/apps/chat/generate_response_converter.py     | 6 +++---
 .../app/apps/completion/generate_response_converter.py    | 6 +++---
 api/core/app/apps/pipeline/generate_response_converter.py | 4 ++--
 api/core/app/apps/workflow/generate_response_converter.py | 6 +++---
 api/core/plugin/backwards_invocation/model.py             | 3 ++-
 api/enterprise/telemetry/metric_handler.py                | 2 +-
 12 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/api/controllers/console/auth/activate.py b/api/controllers/console/auth/activate.py
index e6316bfd62..f7061f820f 100644
--- a/api/controllers/console/auth/activate.py
+++ b/api/controllers/console/auth/activate.py
@@ -1,3 +1,5 @@
+from typing import Any
+
 from flask import request
 from flask_restx import Resource
 from pydantic import BaseModel, Field, field_validator
@@ -40,7 +42,7 @@ class ActivatePayload(BaseModel):
 
 class ActivationCheckResponse(BaseModel):
     is_valid: bool = Field(description="Whether token is valid")
-    data: dict | None = Field(default=None, description="Activation data if valid")
+    data: dict[str, Any] | None = Field(default=None, description="Activation data if valid")
 
 
 class ActivationResponse(BaseModel):
diff --git a/api/controllers/console/datasets/datasets_document.py b/api/controllers/console/datasets/datasets_document.py
index de8fe1c0e2..98d4ad9412 100644
--- a/api/controllers/console/datasets/datasets_document.py
+++ b/api/controllers/console/datasets/datasets_document.py
@@ -1026,7 +1026,7 @@ class DocumentMetadataApi(DocumentResource):
 
         if not isinstance(doc_metadata, dict):
             raise ValueError("doc_metadata must be a dictionary.")
-        metadata_schema: dict = cast(dict, DocumentService.DOCUMENT_METADATA_SCHEMA[doc_type])
+        metadata_schema: dict[str, Any] = cast(dict[str, Any], DocumentService.DOCUMENT_METADATA_SCHEMA[doc_type])
 
         document.doc_metadata = {}
         if doc_type == "others":
diff --git a/api/controllers/console/workspace/models.py b/api/controllers/console/workspace/models.py
index 9182dbb510..f8f95304f0 100644
--- a/api/controllers/console/workspace/models.py
+++ b/api/controllers/console/workspace/models.py
@@ -465,7 +465,7 @@ class ModelProviderModelDisableApi(Resource):
 class ParserValidate(BaseModel):
     model: str
     model_type: ModelType
-    credentials: dict
+    credentials: dict[str, Any]
 
 
 console_ns.schema_model(
diff --git a/api/core/app/apps/advanced_chat/generate_response_converter.py b/api/core/app/apps/advanced_chat/generate_response_converter.py
index 5c9bc43992..fe2702ed69 100644
--- a/api/core/app/apps/advanced_chat/generate_response_converter.py
+++ b/api/core/app/apps/advanced_chat/generate_response_converter.py
@@ -57,7 +57,7 @@ class AdvancedChatAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_full_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, Any, None]:
+    ) -> Generator[dict[str, Any] | str, Any, None]:
         """
         Convert stream full response.
         :param stream_response: stream response
@@ -88,7 +88,7 @@ class AdvancedChatAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_simple_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, Any, None]:
+    ) -> Generator[dict[str, Any] | str, Any, None]:
         """
         Convert stream simple response.
         :param stream_response: stream response
diff --git a/api/core/app/apps/agent_chat/generate_response_converter.py b/api/core/app/apps/agent_chat/generate_response_converter.py
index 0c146c388f..731c6ee12e 100644
--- a/api/core/app/apps/agent_chat/generate_response_converter.py
+++ b/api/core/app/apps/agent_chat/generate_response_converter.py
@@ -1,5 +1,5 @@
 from collections.abc import Generator
-from typing import cast
+from typing import Any, cast
 
 from core.app.apps.base_app_generate_response_converter import AppGenerateResponseConverter
 from core.app.entities.task_entities import (
@@ -56,7 +56,7 @@ class AgentChatAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_full_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         """
         Convert stream full response.
         :param stream_response: stream response
@@ -87,7 +87,7 @@ class AgentChatAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_simple_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         """
         Convert stream simple response.
         :param stream_response: stream response
diff --git a/api/core/app/apps/base_app_generate_response_converter.py b/api/core/app/apps/base_app_generate_response_converter.py
index 6e5a86505c..406d07927e 100644
--- a/api/core/app/apps/base_app_generate_response_converter.py
+++ b/api/core/app/apps/base_app_generate_response_converter.py
@@ -24,7 +24,7 @@ class AppGenerateResponseConverter(ABC):
                 return cls.convert_blocking_full_response(response)
             else:
 
-                def _generate_full_response() -> Generator[dict | str, Any, None]:
+                def _generate_full_response() -> Generator[dict[str, Any] | str, Any, None]:
                     yield from cls.convert_stream_full_response(response)
 
                 return _generate_full_response()
@@ -33,7 +33,7 @@ class AppGenerateResponseConverter(ABC):
                 return cls.convert_blocking_simple_response(response)
             else:
 
-                def _generate_simple_response() -> Generator[dict | str, Any, None]:
+                def _generate_simple_response() -> Generator[dict[str, Any] | str, Any, None]:
                     yield from cls.convert_stream_simple_response(response)
 
                 return _generate_simple_response()
@@ -52,14 +52,14 @@ class AppGenerateResponseConverter(ABC):
     @abstractmethod
     def convert_stream_full_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         raise NotImplementedError
 
     @classmethod
     @abstractmethod
     def convert_stream_simple_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         raise NotImplementedError
 
     @classmethod
diff --git a/api/core/app/apps/chat/generate_response_converter.py b/api/core/app/apps/chat/generate_response_converter.py
index f23ee7f89f..3d0375151d 100644
--- a/api/core/app/apps/chat/generate_response_converter.py
+++ b/api/core/app/apps/chat/generate_response_converter.py
@@ -1,5 +1,5 @@
 from collections.abc import Generator
-from typing import cast
+from typing import Any, cast
 
 from core.app.apps.base_app_generate_response_converter import AppGenerateResponseConverter
 from core.app.entities.task_entities import (
@@ -56,7 +56,7 @@ class ChatAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_full_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         """
         Convert stream full response.
         :param stream_response: stream response
@@ -87,7 +87,7 @@ class ChatAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_simple_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         """
         Convert stream simple response.
         :param stream_response: stream response
diff --git a/api/core/app/apps/completion/generate_response_converter.py b/api/core/app/apps/completion/generate_response_converter.py
index a4f574642d..71886b39ba 100644
--- a/api/core/app/apps/completion/generate_response_converter.py
+++ b/api/core/app/apps/completion/generate_response_converter.py
@@ -1,5 +1,5 @@
 from collections.abc import Generator
-from typing import cast
+from typing import Any, cast
 
 from core.app.apps.base_app_generate_response_converter import AppGenerateResponseConverter
 from core.app.entities.task_entities import (
@@ -55,7 +55,7 @@ class CompletionAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_full_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         """
         Convert stream full response.
         :param stream_response: stream response
@@ -85,7 +85,7 @@ class CompletionAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_simple_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         """
         Convert stream simple response.
         :param stream_response: stream response
diff --git a/api/core/app/apps/pipeline/generate_response_converter.py b/api/core/app/apps/pipeline/generate_response_converter.py
index a77a978946..02b3160b7c 100644
--- a/api/core/app/apps/pipeline/generate_response_converter.py
+++ b/api/core/app/apps/pipeline/generate_response_converter.py
@@ -37,7 +37,7 @@ class WorkflowAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_full_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         """
         Convert stream full response.
         :param stream_response: stream response
@@ -66,7 +66,7 @@ class WorkflowAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_simple_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         """
         Convert stream simple response.
         :param stream_response: stream response
diff --git a/api/core/app/apps/workflow/generate_response_converter.py b/api/core/app/apps/workflow/generate_response_converter.py
index c64f44a603..c69826cbef 100644
--- a/api/core/app/apps/workflow/generate_response_converter.py
+++ b/api/core/app/apps/workflow/generate_response_converter.py
@@ -1,5 +1,5 @@
 from collections.abc import Generator
-from typing import cast
+from typing import Any, cast
 
 from core.app.apps.base_app_generate_response_converter import AppGenerateResponseConverter
 from core.app.entities.task_entities import (
@@ -37,7 +37,7 @@ class WorkflowAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_full_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         """
         Convert stream full response.
         :param stream_response: stream response
@@ -66,7 +66,7 @@ class WorkflowAppGenerateResponseConverter(AppGenerateResponseConverter):
     @classmethod
     def convert_stream_simple_response(
         cls, stream_response: Generator[AppStreamResponse, None, None]
-    ) -> Generator[dict | str, None, None]:
+    ) -> Generator[dict[str, Any] | str, None, None]:
         """
         Convert stream simple response.
         :param stream_response: stream response
diff --git a/api/core/plugin/backwards_invocation/model.py b/api/core/plugin/backwards_invocation/model.py
index c715b9171c..a4b24ff849 100644
--- a/api/core/plugin/backwards_invocation/model.py
+++ b/api/core/plugin/backwards_invocation/model.py
@@ -1,6 +1,7 @@
 import tempfile
 from binascii import hexlify, unhexlify
 from collections.abc import Generator
+from typing import Any
 
 from graphon.model_runtime.entities.llm_entities import (
     LLMResult,
@@ -226,7 +227,7 @@ class PluginModelBackwardsInvocation(BaseBackwardsInvocation):
         # invoke model
         response = model_instance.invoke_tts(content_text=payload.content_text, voice=payload.voice)
 
-        def handle() -> Generator[dict, None, None]:
+        def handle() -> Generator[dict[str, Any], None, None]:
             for chunk in response:
                 yield {"result": hexlify(chunk).decode("utf-8")}
 
diff --git a/api/enterprise/telemetry/metric_handler.py b/api/enterprise/telemetry/metric_handler.py
index 9cda0bf90a..c564ace584 100644
--- a/api/enterprise/telemetry/metric_handler.py
+++ b/api/enterprise/telemetry/metric_handler.py
@@ -329,7 +329,7 @@ class EnterpriseMetricHandler:
             return
 
         include_content = exporter.include_content
-        attrs: dict = {
+        attrs: dict[str, Any] = {
             "dify.message.id": payload.get("message_id"),
             "dify.tenant_id": envelope.tenant_id,
             "dify.event.id": envelope.event_id,

From ef396ac84eca9ed16c9a2c3be928fda965f25817 Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 12:48:09 -0700
Subject: [PATCH 31/44] refactor(api): migrate workspace current response from
 marshal_with to BaseModel (#35207)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 .../console/workspace/workspace.py            | 48 +++++++++++++++++--
 .../console/workspace/test_workspace.py       | 18 +++++++
 2 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/api/controllers/console/workspace/workspace.py b/api/controllers/console/workspace/workspace.py
index 42874e6033..565099db61 100644
--- a/api/controllers/console/workspace/workspace.py
+++ b/api/controllers/console/workspace/workspace.py
@@ -1,8 +1,9 @@
 import logging
+from datetime import datetime
 
 from flask import request
-from flask_restx import Resource, fields, marshal, marshal_with
-from pydantic import BaseModel, Field
+from flask_restx import Resource, fields, marshal
+from pydantic import BaseModel, Field, field_validator
 from sqlalchemy import select
 from werkzeug.exceptions import Unauthorized
 
@@ -26,6 +27,7 @@ from controllers.console.wraps import (
 )
 from enums.cloud_plan import CloudPlan
 from extensions.ext_database import db
+from fields.base import ResponseModel
 from libs.helper import TimestampField
 from libs.login import current_account_with_tenant, login_required
 from models.account import Tenant, TenantCustomConfigDict, TenantStatus
@@ -58,6 +60,37 @@ class WorkspaceInfoPayload(BaseModel):
     name: str
 
 
+class TenantInfoResponse(ResponseModel):
+    id: str
+    name: str | None = None
+    plan: str | None = None
+    status: str | None = None
+    created_at: int | None = None
+    role: str | None = None
+    in_trial: bool | None = None
+    trial_end_reason: str | None = None
+    custom_config: dict | None = None
+    trial_credits: int | None = None
+    trial_credits_used: int | None = None
+    next_credit_reset_date: int | None = None
+
+    @field_validator("plan", "status", "trial_end_reason", mode="before")
+    @classmethod
+    def _normalize_enum_like(cls, value):
+        if value is None:
+            return None
+        if isinstance(value, str):
+            return value
+        return str(getattr(value, "value", value))
+
+    @field_validator("created_at", mode="before")
+    @classmethod
+    def _normalize_created_at(cls, value: datetime | int | None):
+        if isinstance(value, datetime):
+            return int(value.timestamp())
+        return value
+
+
 def reg(cls: type[BaseModel]):
     console_ns.schema_model(cls.__name__, cls.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
 
@@ -66,6 +99,7 @@ reg(WorkspaceListQuery)
 reg(SwitchWorkspacePayload)
 reg(WorkspaceCustomConfigPayload)
 reg(WorkspaceInfoPayload)
+reg(TenantInfoResponse)
 
 provider_fields = {
     "provider_name": fields.String,
@@ -180,7 +214,7 @@ class TenantApi(Resource):
     @setup_required
     @login_required
     @account_initialization_required
-    @marshal_with(tenant_fields)
+    @console_ns.response(200, "Success", console_ns.models[TenantInfoResponse.__name__])
     def post(self):
         if request.path == "/info":
             logger.warning("Deprecated URL /info was used.")
@@ -200,7 +234,13 @@ class TenantApi(Resource):
             else:
                 raise Unauthorized("workspace is archived")
 
-        return WorkspaceService.get_tenant_info(tenant), 200
+        return (
+            TenantInfoResponse.model_validate(
+                WorkspaceService.get_tenant_info(tenant),
+                from_attributes=True,
+            ).model_dump(mode="json"),
+            200,
+        )
 
 
 @console_ns.route("/workspaces/switch")
diff --git a/api/tests/unit_tests/controllers/console/workspace/test_workspace.py b/api/tests/unit_tests/controllers/console/workspace/test_workspace.py
index b2d13dbbdf..e82a29f045 100644
--- a/api/tests/unit_tests/controllers/console/workspace/test_workspace.py
+++ b/api/tests/unit_tests/controllers/console/workspace/test_workspace.py
@@ -18,6 +18,7 @@ from controllers.console.workspace.workspace import (
     CustomConfigWorkspaceApi,
     SwitchWorkspaceApi,
     TenantApi,
+    TenantInfoResponse,
     TenantListApi,
     WebappLogoWorkspaceApi,
     WorkspaceInfoApi,
@@ -435,6 +436,23 @@ class TestTenantApi:
         assert status == 200
 
 
+class TestTenantInfoResponse:
+    def test_tenant_info_response_normalizes_enum_and_datetime(self):
+        created_at = naive_utc_now()
+        payload = TenantInfoResponse.model_validate(
+            {
+                "id": "t1",
+                "status": TenantStatus.NORMAL,
+                "plan": CloudPlan.TEAM,
+                "created_at": created_at,
+            }
+        ).model_dump(mode="json")
+
+        assert payload["status"] == "normal"
+        assert payload["plan"] == "team"
+        assert payload["created_at"] == int(created_at.timestamp())
+
+
 class TestSwitchWorkspaceApi:
     def test_switch_success(self, app):
         api = SwitchWorkspaceApi()

From f66a3c49c4d613d30c9df336f05c778d0bca3297 Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 12:48:43 -0700
Subject: [PATCH 32/44] refactor(api): migrate console recommended-app response
 to BaseModel (#35206)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
---
 api/controllers/console/app/app.py            |  17 +--
 .../console/explore/recommended_app.py        | 106 +++++++++++-------
 api/libs/helper.py                            |  14 ++-
 .../console/app/test_app_response_models.py   |   9 +-
 .../console/explore/test_recommended_app.py   |  46 ++++++++
 5 files changed, 132 insertions(+), 60 deletions(-)

diff --git a/api/controllers/console/app/app.py b/api/controllers/console/app/app.py
index 2018f60215..75569eb596 100644
--- a/api/controllers/console/app/app.py
+++ b/api/controllers/console/app/app.py
@@ -6,7 +6,6 @@ from typing import Any, Literal
 from flask import request
 from flask_restx import Resource
 from graphon.enums import WorkflowExecutionStatus
-from graphon.file import helpers as file_helpers
 from pydantic import AliasChoices, BaseModel, Field, computed_field, field_validator
 from sqlalchemy import select
 from sqlalchemy.orm import sessionmaker
@@ -31,6 +30,7 @@ from core.rag.retrieval.retrieval_methods import RetrievalMethod
 from core.trigger.constants import TRIGGER_NODE_TYPES
 from extensions.ext_database import db
 from fields.base import ResponseModel
+from libs.helper import build_icon_url
 from libs.login import current_account_with_tenant, login_required
 from models import App, DatasetPermissionEnum, Workflow
 from models.model import IconType
@@ -161,15 +161,6 @@ def _to_timestamp(value: datetime | int | None) -> int | None:
     return value
 
 
-def _build_icon_url(icon_type: str | IconType | None, icon: str | None) -> str | None:
-    if icon is None or icon_type is None:
-        return None
-    icon_type_value = icon_type.value if isinstance(icon_type, IconType) else str(icon_type)
-    if icon_type_value.lower() != IconType.IMAGE:
-        return None
-    return file_helpers.get_signed_file_url(icon)
-
-
 class Tag(ResponseModel):
     id: str
     name: str
@@ -292,7 +283,7 @@ class Site(ResponseModel):
     @computed_field(return_type=str | None)  # type: ignore
     @property
     def icon_url(self) -> str | None:
-        return _build_icon_url(self.icon_type, self.icon)
+        return build_icon_url(self.icon_type, self.icon)
 
     @field_validator("icon_type", mode="before")
     @classmethod
@@ -342,7 +333,7 @@ class AppPartial(ResponseModel):
     @computed_field(return_type=str | None)  # type: ignore
     @property
     def icon_url(self) -> str | None:
-        return _build_icon_url(self.icon_type, self.icon)
+        return build_icon_url(self.icon_type, self.icon)
 
     @field_validator("created_at", "updated_at", mode="before")
     @classmethod
@@ -390,7 +381,7 @@ class AppDetailWithSite(AppDetail):
     @computed_field(return_type=str | None)  # type: ignore
     @property
     def icon_url(self) -> str | None:
-        return _build_icon_url(self.icon_type, self.icon)
+        return build_icon_url(self.icon_type, self.icon)
 
 
 class AppPagination(ResponseModel):
diff --git a/api/controllers/console/explore/recommended_app.py b/api/controllers/console/explore/recommended_app.py
index c9920c97cf..55bd679b48 100644
--- a/api/controllers/console/explore/recommended_app.py
+++ b/api/controllers/console/explore/recommended_app.py
@@ -1,66 +1,83 @@
+from typing import Any
+
 from flask import request
-from flask_restx import Resource, fields, marshal_with
-from pydantic import BaseModel, Field
+from flask_restx import Resource
+from pydantic import BaseModel, Field, computed_field, field_validator
 
 from constants.languages import languages
-from controllers.common.schema import get_or_create_model
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.wraps import account_initialization_required
-from libs.helper import AppIconUrlField
+from fields.base import ResponseModel
+from libs.helper import build_icon_url
 from libs.login import current_user, login_required
 from services.recommended_app_service import RecommendedAppService
 
-app_fields = {
-    "id": fields.String,
-    "name": fields.String,
-    "mode": fields.String,
-    "icon": fields.String,
-    "icon_type": fields.String,
-    "icon_url": AppIconUrlField,
-    "icon_background": fields.String,
-}
-
-app_model = get_or_create_model("RecommendedAppInfo", app_fields)
-
-recommended_app_fields = {
-    "app": fields.Nested(app_model, attribute="app"),
-    "app_id": fields.String,
-    "description": fields.String(attribute="description"),
-    "copyright": fields.String,
-    "privacy_policy": fields.String,
-    "custom_disclaimer": fields.String,
-    "category": fields.String,
-    "position": fields.Integer,
-    "is_listed": fields.Boolean,
-    "can_trial": fields.Boolean,
-}
-
-recommended_app_model = get_or_create_model("RecommendedApp", recommended_app_fields)
-
-recommended_app_list_fields = {
-    "recommended_apps": fields.List(fields.Nested(recommended_app_model)),
-    "categories": fields.List(fields.String),
-}
-
-recommended_app_list_model = get_or_create_model("RecommendedAppList", recommended_app_list_fields)
-
 
 class RecommendedAppsQuery(BaseModel):
     language: str | None = Field(default=None)
 
 
-console_ns.schema_model(
-    RecommendedAppsQuery.__name__,
-    RecommendedAppsQuery.model_json_schema(ref_template="#/definitions/{model}"),
+class RecommendedAppInfoResponse(ResponseModel):
+    id: str
+    name: str | None = None
+    mode: str | None = None
+    icon: str | None = None
+    icon_type: str | None = None
+    icon_background: str | None = None
+
+    @staticmethod
+    def _normalize_enum_like(value: Any) -> str | None:
+        if value is None:
+            return None
+        if isinstance(value, str):
+            return value
+        return str(getattr(value, "value", value))
+
+    @field_validator("mode", "icon_type", mode="before")
+    @classmethod
+    def _normalize_enum_fields(cls, value: Any) -> str | None:
+        return cls._normalize_enum_like(value)
+
+    @computed_field(return_type=str | None)  # type: ignore[prop-decorator]
+    @property
+    def icon_url(self) -> str | None:
+        return build_icon_url(self.icon_type, self.icon)
+
+
+class RecommendedAppResponse(ResponseModel):
+    app: RecommendedAppInfoResponse | None = None
+    app_id: str
+    description: str | None = None
+    copyright: str | None = None
+    privacy_policy: str | None = None
+    custom_disclaimer: str | None = None
+    category: str | None = None
+    position: int | None = None
+    is_listed: bool | None = None
+    can_trial: bool | None = None
+
+
+class RecommendedAppListResponse(ResponseModel):
+    recommended_apps: list[RecommendedAppResponse]
+    categories: list[str]
+
+
+register_schema_models(
+    console_ns,
+    RecommendedAppsQuery,
+    RecommendedAppInfoResponse,
+    RecommendedAppResponse,
+    RecommendedAppListResponse,
 )
 
 
 @console_ns.route("/explore/apps")
 class RecommendedAppListApi(Resource):
     @console_ns.expect(console_ns.models[RecommendedAppsQuery.__name__])
+    @console_ns.response(200, "Success", console_ns.models[RecommendedAppListResponse.__name__])
     @login_required
     @account_initialization_required
-    @marshal_with(recommended_app_list_model)
     def get(self):
         # language args
         args = RecommendedAppsQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
@@ -72,7 +89,10 @@ class RecommendedAppListApi(Resource):
         else:
             language_prefix = languages[0]
 
-        return RecommendedAppService.get_recommended_apps_and_categories(language_prefix)
+        return RecommendedAppListResponse.model_validate(
+            RecommendedAppService.get_recommended_apps_and_categories(language_prefix),
+            from_attributes=True,
+        ).model_dump(mode="json")
 
 
 @console_ns.route("/explore/apps/<uuid:app_id>")
diff --git a/api/libs/helper.py b/api/libs/helper.py
index f28de92927..69bd483515 100644
--- a/api/libs/helper.py
+++ b/api/libs/helper.py
@@ -120,10 +120,22 @@ class AppIconUrlField(fields.Raw):
             obj = obj["app"]
 
         if isinstance(obj, App | Site) and obj.icon_type == IconType.IMAGE:
-            return file_helpers.get_signed_file_url(obj.icon)
+            return build_icon_url(obj.icon_type, obj.icon)
         return None
 
 
+def build_icon_url(icon_type: Any, icon: str | None) -> str | None:
+    if icon is None or icon_type is None:
+        return None
+
+    from models.model import IconType
+
+    icon_type_value = icon_type.value if isinstance(icon_type, IconType) else str(icon_type)
+    if icon_type_value.lower() != IconType.IMAGE:
+        return None
+    return file_helpers.get_signed_file_url(icon)
+
+
 class AvatarUrlField(fields.Raw):
     def output(self, key, obj, **kwargs):
         if obj is None:
diff --git a/api/tests/unit_tests/controllers/console/app/test_app_response_models.py b/api/tests/unit_tests/controllers/console/app/test_app_response_models.py
index 2ac3dc037d..35d07a987d 100644
--- a/api/tests/unit_tests/controllers/console/app/test_app_response_models.py
+++ b/api/tests/unit_tests/controllers/console/app/test_app_response_models.py
@@ -138,12 +138,15 @@ def app_models(app_module):
 def patch_signed_url(monkeypatch, app_module):
     """Ensure icon URL generation uses a deterministic helper for tests."""
 
-    def _fake_signed_url(key: str | None) -> str | None:
-        if not key:
+    def _fake_build_icon_url(_icon_type, key: str | None) -> str | None:
+        if key is None:
+            return None
+        icon_type = str(_icon_type).lower()
+        if icon_type != "image":
             return None
         return f"signed:{key}"
 
-    monkeypatch.setattr(app_module.file_helpers, "get_signed_file_url", _fake_signed_url)
+    monkeypatch.setattr(app_module, "build_icon_url", _fake_build_icon_url)
 
 
 def _ts(hour: int = 12) -> datetime:
diff --git a/api/tests/unit_tests/controllers/console/explore/test_recommended_app.py b/api/tests/unit_tests/controllers/console/explore/test_recommended_app.py
index 02c7507ea7..76c863577a 100644
--- a/api/tests/unit_tests/controllers/console/explore/test_recommended_app.py
+++ b/api/tests/unit_tests/controllers/console/explore/test_recommended_app.py
@@ -1,6 +1,7 @@
 from unittest.mock import MagicMock, patch
 
 import controllers.console.explore.recommended_app as module
+from models.model import AppMode, IconType
 
 
 def unwrap(func):
@@ -90,3 +91,48 @@ class TestRecommendedAppApi:
 
         service_mock.assert_called_once_with("11111111-1111-1111-1111-111111111111")
         assert result == result_data
+
+
+class TestRecommendedAppResponseModels:
+    def test_recommended_app_info_response_computes_icon_url(self):
+        with patch.object(module, "build_icon_url", return_value="https://signed/icon.png"):
+            payload = module.RecommendedAppInfoResponse.model_validate(
+                {
+                    "id": "app-1",
+                    "name": "App",
+                    "mode": AppMode.CHAT,
+                    "icon": "icon.png",
+                    "icon_type": IconType.IMAGE,
+                    "icon_background": "#fff",
+                }
+            ).model_dump(mode="json")
+
+        assert payload["icon_url"] == "https://signed/icon.png"
+
+    def test_recommended_app_list_response_serialization(self):
+        response = module.RecommendedAppListResponse.model_validate(
+            {
+                "recommended_apps": [
+                    {
+                        "app": {
+                            "id": "app-1",
+                            "name": "App",
+                            "mode": "chat",
+                            "icon": "icon.png",
+                            "icon_type": "emoji",
+                            "icon_background": "#fff",
+                        },
+                        "app_id": "app-1",
+                        "description": "desc",
+                        "category": "cat",
+                        "position": 1,
+                        "is_listed": True,
+                        "can_trial": False,
+                    }
+                ],
+                "categories": ["cat"],
+            }
+        ).model_dump(mode="json")
+
+        assert response["recommended_apps"][0]["app_id"] == "app-1"
+        assert response["categories"] == ["cat"]

From 800954f8cee7dae590cc8af21673a42c4b1acf15 Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 12:49:21 -0700
Subject: [PATCH 33/44] refactor(api): migrate service conversation-variable
 responses to BaseModel (#35205)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 .../service_api/app/conversation.py           |  86 +++++++++++--
 .../service_api/app/test_conversation.py      | 120 ++++++++++++++++++
 2 files changed, 198 insertions(+), 8 deletions(-)

diff --git a/api/controllers/service_api/app/conversation.py b/api/controllers/service_api/app/conversation.py
index 1ec289e2a2..50851aea08 100644
--- a/api/controllers/service_api/app/conversation.py
+++ b/api/controllers/service_api/app/conversation.py
@@ -1,7 +1,9 @@
+from datetime import datetime
 from typing import Any, Literal
 
 from flask import request
 from flask_restx import Resource
+from graphon.variables.types import SegmentType
 from pydantic import BaseModel, Field, TypeAdapter, field_validator
 from sqlalchemy.orm import sessionmaker
 from werkzeug.exceptions import BadRequest, NotFound
@@ -14,14 +16,12 @@ from controllers.service_api.app.error import NotChatAppError
 from controllers.service_api.wraps import FetchUserArg, WhereisUserArg, validate_app_token
 from core.app.entities.app_invoke_entities import InvokeFrom
 from extensions.ext_database import db
+from fields._value_type_serializer import serialize_value_type
+from fields.base import ResponseModel
 from fields.conversation_fields import (
     ConversationInfiniteScrollPagination,
     SimpleConversation,
 )
-from fields.conversation_variable_fields import (
-    build_conversation_variable_infinite_scroll_pagination_model,
-    build_conversation_variable_model,
-)
 from libs.helper import UUIDStrOrEmpty
 from models.model import App, AppMode, EndUser
 from services.conversation_service import ConversationService
@@ -70,12 +70,70 @@ class ConversationVariableUpdatePayload(BaseModel):
     value: Any
 
 
+class ConversationVariableResponse(ResponseModel):
+    id: str
+    name: str
+    value_type: str
+    value: str | None = None
+    description: str | None = None
+    created_at: int | None = None
+    updated_at: int | None = None
+
+    @field_validator("value_type", mode="before")
+    @classmethod
+    def normalize_value_type(cls, value: Any) -> str:
+        exposed_type = getattr(value, "exposed_type", None)
+        if callable(exposed_type):
+            return str(exposed_type().value)
+        if isinstance(value, str):
+            try:
+                return str(SegmentType(value).exposed_type().value)
+            except ValueError:
+                return value
+        try:
+            return serialize_value_type(value)
+        except (AttributeError, TypeError, ValueError):
+            pass
+
+        try:
+            return serialize_value_type({"value_type": value})
+        except (AttributeError, TypeError, ValueError):
+            value_attr = getattr(value, "value", None)
+            if value_attr is not None:
+                return str(value_attr)
+            return str(value)
+
+    @field_validator("value", mode="before")
+    @classmethod
+    def normalize_value(cls, value: Any | None) -> str | None:
+        if value is None:
+            return None
+        if isinstance(value, str):
+            return value
+        return str(value)
+
+    @field_validator("created_at", "updated_at", mode="before")
+    @classmethod
+    def normalize_timestamp(cls, value: datetime | int | None) -> int | None:
+        if isinstance(value, datetime):
+            return int(value.timestamp())
+        return value
+
+
+class ConversationVariableInfiniteScrollPaginationResponse(ResponseModel):
+    limit: int
+    has_more: bool
+    data: list[ConversationVariableResponse]
+
+
 register_schema_models(
     service_api_ns,
     ConversationListQuery,
     ConversationRenamePayload,
     ConversationVariablesQuery,
     ConversationVariableUpdatePayload,
+    ConversationVariableResponse,
+    ConversationVariableInfiniteScrollPaginationResponse,
 )
 
 
@@ -204,8 +262,12 @@ class ConversationVariablesApi(Resource):
             404: "Conversation not found",
         }
     )
+    @service_api_ns.response(
+        200,
+        "Variables retrieved successfully",
+        service_api_ns.models[ConversationVariableInfiniteScrollPaginationResponse.__name__],
+    )
     @validate_app_token(fetch_user_arg=FetchUserArg(fetch_from=WhereisUserArg.QUERY))
-    @service_api_ns.marshal_with(build_conversation_variable_infinite_scroll_pagination_model(service_api_ns))
     def get(self, app_model: App, end_user: EndUser, c_id):
         """List all variables for a conversation.
 
@@ -222,9 +284,12 @@ class ConversationVariablesApi(Resource):
         last_id = str(query_args.last_id) if query_args.last_id else None
 
         try:
-            return ConversationService.get_conversational_variable(
+            pagination = ConversationService.get_conversational_variable(
                 app_model, conversation_id, end_user, query_args.limit, last_id, query_args.variable_name
             )
+            return ConversationVariableInfiniteScrollPaginationResponse.model_validate(
+                pagination, from_attributes=True
+            ).model_dump(mode="json")
         except services.errors.conversation.ConversationNotExistsError:
             raise NotFound("Conversation Not Exists.")
 
@@ -243,8 +308,12 @@ class ConversationVariableDetailApi(Resource):
             404: "Conversation or variable not found",
         }
     )
+    @service_api_ns.response(
+        200,
+        "Variable updated successfully",
+        service_api_ns.models[ConversationVariableResponse.__name__],
+    )
     @validate_app_token(fetch_user_arg=FetchUserArg(fetch_from=WhereisUserArg.JSON))
-    @service_api_ns.marshal_with(build_conversation_variable_model(service_api_ns))
     def put(self, app_model: App, end_user: EndUser, c_id, variable_id):
         """Update a conversation variable's value.
 
@@ -261,9 +330,10 @@ class ConversationVariableDetailApi(Resource):
         payload = ConversationVariableUpdatePayload.model_validate(service_api_ns.payload or {})
 
         try:
-            return ConversationService.update_conversation_variable(
+            variable = ConversationService.update_conversation_variable(
                 app_model, conversation_id, variable_id, end_user, payload.value
             )
+            return ConversationVariableResponse.model_validate(variable, from_attributes=True).model_dump(mode="json")
         except services.errors.conversation.ConversationNotExistsError:
             raise NotFound("Conversation Not Exists.")
         except services.errors.conversation.ConversationVariableNotExistsError:
diff --git a/api/tests/unit_tests/controllers/service_api/app/test_conversation.py b/api/tests/unit_tests/controllers/service_api/app/test_conversation.py
index dbd06677d8..97fdf1a011 100644
--- a/api/tests/unit_tests/controllers/service_api/app/test_conversation.py
+++ b/api/tests/unit_tests/controllers/service_api/app/test_conversation.py
@@ -15,10 +15,12 @@ Focus on:
 
 import sys
 import uuid
+from datetime import UTC, datetime
 from types import SimpleNamespace
 from unittest.mock import Mock, patch
 
 import pytest
+from graphon.variables.types import SegmentType
 from werkzeug.exceptions import BadRequest, NotFound
 
 import services
@@ -29,6 +31,8 @@ from controllers.service_api.app.conversation import (
     ConversationRenameApi,
     ConversationRenamePayload,
     ConversationVariableDetailApi,
+    ConversationVariableInfiniteScrollPaginationResponse,
+    ConversationVariableResponse,
     ConversationVariablesApi,
     ConversationVariablesQuery,
     ConversationVariableUpdatePayload,
@@ -261,6 +265,46 @@ class TestConversationVariableUpdatePayload:
         assert payload.value == nested
 
 
+class TestConversationVariableResponseModels:
+    def test_variable_response_normalizes_value_type_and_timestamps(self):
+        created_at = datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+        response = ConversationVariableResponse.model_validate(
+            {
+                "id": "550e8400-e29b-41d4-a716-446655440000",
+                "name": "foo",
+                "value_type": SegmentType.INTEGER,
+                "value": 1,
+                "description": "desc",
+                "created_at": created_at,
+                "updated_at": created_at,
+            }
+        )
+        assert response.value_type == "number"
+        assert response.value == "1"
+        assert response.created_at == int(created_at.timestamp())
+        assert response.updated_at == int(created_at.timestamp())
+
+    def test_variable_pagination_response(self):
+        response = ConversationVariableInfiniteScrollPaginationResponse.model_validate(
+            {
+                "limit": 1,
+                "has_more": False,
+                "data": [
+                    {
+                        "id": "550e8400-e29b-41d4-a716-446655440000",
+                        "name": "foo",
+                        "value_type": "string",
+                        "value": "bar",
+                    }
+                ],
+            }
+        )
+        assert response.limit == 1
+        assert response.has_more is False
+        assert len(response.data) == 1
+        assert response.data[0].name == "foo"
+
+
 class TestConversationAppModeValidation:
     """Test app mode validation for conversation endpoints."""
 
@@ -549,6 +593,44 @@ class TestConversationVariablesApiController:
             with pytest.raises(NotFound):
                 handler(api, app_model=app_model, end_user=end_user, c_id="00000000-0000-0000-0000-000000000001")
 
+    def test_success_serializes_response(self, app, monkeypatch: pytest.MonkeyPatch) -> None:
+        created_at = datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+        monkeypatch.setattr(
+            ConversationService,
+            "get_conversational_variable",
+            lambda *_args, **_kwargs: SimpleNamespace(
+                limit=1,
+                has_more=False,
+                data=[
+                    {
+                        "id": "550e8400-e29b-41d4-a716-446655440000",
+                        "name": "foo",
+                        "value_type": SegmentType.INTEGER,
+                        "value": 1,
+                        "created_at": created_at,
+                        "updated_at": created_at,
+                    }
+                ],
+            ),
+        )
+
+        api = ConversationVariablesApi()
+        handler = _unwrap(api.get)
+        app_model = SimpleNamespace(mode=AppMode.CHAT.value)
+        end_user = SimpleNamespace()
+
+        with app.test_request_context(
+            "/conversations/1/variables?limit=20",
+            method="GET",
+        ):
+            result = handler(api, app_model=app_model, end_user=end_user, c_id="00000000-0000-0000-0000-000000000001")
+
+        assert result["limit"] == 1
+        assert result["has_more"] is False
+        assert result["data"][0]["value_type"] == "number"
+        assert result["data"][0]["value"] == "1"
+        assert result["data"][0]["created_at"] == int(created_at.timestamp())
+
 
 class TestConversationVariableDetailApiController:
     def test_update_type_mismatch(self, app, monkeypatch: pytest.MonkeyPatch) -> None:
@@ -602,3 +684,41 @@ class TestConversationVariableDetailApiController:
                     c_id="00000000-0000-0000-0000-000000000001",
                     variable_id="00000000-0000-0000-0000-000000000002",
                 )
+
+    def test_update_success_serializes_response(self, app, monkeypatch: pytest.MonkeyPatch) -> None:
+        created_at = datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+        monkeypatch.setattr(
+            ConversationService,
+            "update_conversation_variable",
+            lambda *_args, **_kwargs: {
+                "id": "550e8400-e29b-41d4-a716-446655440000",
+                "name": "foo",
+                "value_type": SegmentType.INTEGER,
+                "value": 1,
+                "created_at": created_at,
+                "updated_at": created_at,
+            },
+        )
+
+        api = ConversationVariableDetailApi()
+        handler = _unwrap(api.put)
+        app_model = SimpleNamespace(mode=AppMode.CHAT.value)
+        end_user = SimpleNamespace()
+
+        with app.test_request_context(
+            "/conversations/1/variables/2",
+            method="PUT",
+            json={"value": 1},
+        ):
+            result = handler(
+                api,
+                app_model=app_model,
+                end_user=end_user,
+                c_id="00000000-0000-0000-0000-000000000001",
+                variable_id="00000000-0000-0000-0000-000000000002",
+            )
+
+        assert result["id"] == "550e8400-e29b-41d4-a716-446655440000"
+        assert result["value_type"] == "number"
+        assert result["value"] == "1"
+        assert result["created_at"] == int(created_at.timestamp())

From 1c3cba281ae9a05c22f13a1d80460534ae90c8f8 Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 12:49:33 -0700
Subject: [PATCH 34/44] refactor(api): migrate console message responses from
 marshal_with to BaseModel (#35204)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 api/controllers/console/app/message.py        | 196 ++++++------------
 .../console/app/test_message_api.py           |  23 ++
 2 files changed, 92 insertions(+), 127 deletions(-)

diff --git a/api/controllers/console/app/message.py b/api/controllers/console/app/message.py
index 5a19544eab..daeed4627c 100644
--- a/api/controllers/console/app/message.py
+++ b/api/controllers/console/app/message.py
@@ -1,8 +1,9 @@
 import logging
+from datetime import datetime
 from typing import Literal
 
 from flask import request
-from flask_restx import Resource, fields, marshal_with
+from flask_restx import Resource
 from graphon.model_runtime.errors.invoke import InvokeError
 from pydantic import BaseModel, Field, field_validator
 from sqlalchemy import exists, func, select
@@ -25,10 +26,21 @@ from controllers.console.wraps import (
     setup_required,
 )
 from core.app.entities.app_invoke_entities import InvokeFrom
+from core.entities.execution_extra_content import ExecutionExtraContentDomainModel
 from core.errors.error import ModelCurrentlyNotSupportError, ProviderTokenNotInitError, QuotaExceededError
 from extensions.ext_database import db
-from fields.raws import FilesContainedField
-from libs.helper import TimestampField, uuid_value
+from fields.base import ResponseModel
+from fields.conversation_fields import (
+    AgentThought,
+    ConversationAnnotation,
+    ConversationAnnotationHitHistory,
+    Feedback,
+    JSONValue,
+    MessageFile,
+    format_files_contained,
+    to_timestamp,
+)
+from libs.helper import uuid_value
 from libs.infinite_scroll_pagination import InfiniteScrollPagination
 from libs.login import current_account_with_tenant, login_required
 from models.enums import FeedbackFromSource, FeedbackRating
@@ -98,6 +110,51 @@ class SuggestedQuestionsResponse(BaseModel):
     data: list[str] = Field(description="Suggested question")
 
 
+class MessageDetailResponse(ResponseModel):
+    id: str
+    conversation_id: str
+    inputs: dict[str, JSONValue]
+    query: str
+    message: JSONValue | None = None
+    message_tokens: int | None = None
+    answer: str = Field(validation_alias="re_sign_file_url_answer")
+    answer_tokens: int | None = None
+    provider_response_latency: float | None = None
+    from_source: str
+    from_end_user_id: str | None = None
+    from_account_id: str | None = None
+    feedbacks: list[Feedback] = Field(default_factory=list)
+    workflow_run_id: str | None = None
+    annotation: ConversationAnnotation | None = None
+    annotation_hit_history: ConversationAnnotationHitHistory | None = None
+    created_at: int | None = None
+    agent_thoughts: list[AgentThought] = Field(default_factory=list)
+    message_files: list[MessageFile] = Field(default_factory=list)
+    extra_contents: list[ExecutionExtraContentDomainModel] = Field(default_factory=list)
+    metadata: JSONValue | None = Field(default=None, validation_alias="message_metadata_dict")
+    status: str
+    error: str | None = None
+    parent_message_id: str | None = None
+
+    @field_validator("inputs", mode="before")
+    @classmethod
+    def _normalize_inputs(cls, value: JSONValue) -> JSONValue:
+        return format_files_contained(value)
+
+    @field_validator("created_at", mode="before")
+    @classmethod
+    def _normalize_created_at(cls, value: datetime | int | None) -> int | None:
+        if isinstance(value, datetime):
+            return to_timestamp(value)
+        return value
+
+
+class MessageInfiniteScrollPaginationResponse(ResponseModel):
+    limit: int
+    has_more: bool
+    data: list[MessageDetailResponse]
+
+
 register_schema_models(
     console_ns,
     ChatMessagesQuery,
@@ -105,124 +162,8 @@ register_schema_models(
     FeedbackExportQuery,
     AnnotationCountResponse,
     SuggestedQuestionsResponse,
-)
-
-# Register models for flask_restx to avoid dict type issues in Swagger
-# Register in dependency order: base models first, then dependent models
-
-# Base models
-simple_account_model = console_ns.model(
-    "SimpleAccount",
-    {
-        "id": fields.String,
-        "name": fields.String,
-        "email": fields.String,
-    },
-)
-
-message_file_model = console_ns.model(
-    "MessageFile",
-    {
-        "id": fields.String,
-        "filename": fields.String,
-        "type": fields.String,
-        "url": fields.String,
-        "mime_type": fields.String,
-        "size": fields.Integer,
-        "transfer_method": fields.String,
-        "belongs_to": fields.String(default="user"),
-        "upload_file_id": fields.String(default=None),
-    },
-)
-
-agent_thought_model = console_ns.model(
-    "AgentThought",
-    {
-        "id": fields.String,
-        "chain_id": fields.String,
-        "message_id": fields.String,
-        "position": fields.Integer,
-        "thought": fields.String,
-        "tool": fields.String,
-        "tool_labels": fields.Raw,
-        "tool_input": fields.String,
-        "created_at": TimestampField,
-        "observation": fields.String,
-        "files": fields.List(fields.String),
-    },
-)
-
-# Models that depend on simple_account_model
-feedback_model = console_ns.model(
-    "Feedback",
-    {
-        "rating": fields.String,
-        "content": fields.String,
-        "from_source": fields.String,
-        "from_end_user_id": fields.String,
-        "from_account": fields.Nested(simple_account_model, allow_null=True),
-    },
-)
-
-annotation_model = console_ns.model(
-    "Annotation",
-    {
-        "id": fields.String,
-        "question": fields.String,
-        "content": fields.String,
-        "account": fields.Nested(simple_account_model, allow_null=True),
-        "created_at": TimestampField,
-    },
-)
-
-annotation_hit_history_model = console_ns.model(
-    "AnnotationHitHistory",
-    {
-        "annotation_id": fields.String(attribute="id"),
-        "annotation_create_account": fields.Nested(simple_account_model, allow_null=True),
-        "created_at": TimestampField,
-    },
-)
-
-# Message detail model that depends on multiple models
-message_detail_model = console_ns.model(
-    "MessageDetail",
-    {
-        "id": fields.String,
-        "conversation_id": fields.String,
-        "inputs": FilesContainedField,
-        "query": fields.String,
-        "message": fields.Raw,
-        "message_tokens": fields.Integer,
-        "answer": fields.String(attribute="re_sign_file_url_answer"),
-        "answer_tokens": fields.Integer,
-        "provider_response_latency": fields.Float,
-        "from_source": fields.String,
-        "from_end_user_id": fields.String,
-        "from_account_id": fields.String,
-        "feedbacks": fields.List(fields.Nested(feedback_model)),
-        "workflow_run_id": fields.String,
-        "annotation": fields.Nested(annotation_model, allow_null=True),
-        "annotation_hit_history": fields.Nested(annotation_hit_history_model, allow_null=True),
-        "created_at": TimestampField,
-        "agent_thoughts": fields.List(fields.Nested(agent_thought_model)),
-        "message_files": fields.List(fields.Nested(message_file_model)),
-        "extra_contents": fields.List(fields.Raw),
-        "metadata": fields.Raw(attribute="message_metadata_dict"),
-        "status": fields.String,
-        "error": fields.String,
-        "parent_message_id": fields.String,
-    },
-)
-
-# Message infinite scroll pagination model
-message_infinite_scroll_pagination_model = console_ns.model(
-    "MessageInfiniteScrollPagination",
-    {
-        "limit": fields.Integer,
-        "has_more": fields.Boolean,
-        "data": fields.List(fields.Nested(message_detail_model)),
-    },
+    MessageDetailResponse,
+    MessageInfiniteScrollPaginationResponse,
 )
 
 
@@ -232,13 +173,12 @@ class ChatMessageListApi(Resource):
     @console_ns.doc(description="Get chat messages for a conversation with pagination")
     @console_ns.doc(params={"app_id": "Application ID"})
     @console_ns.expect(console_ns.models[ChatMessagesQuery.__name__])
-    @console_ns.response(200, "Success", message_infinite_scroll_pagination_model)
+    @console_ns.response(200, "Success", console_ns.models[MessageInfiniteScrollPaginationResponse.__name__])
     @console_ns.response(404, "Conversation not found")
     @login_required
     @account_initialization_required
     @setup_required
     @get_app_model(mode=[AppMode.CHAT, AppMode.AGENT_CHAT, AppMode.ADVANCED_CHAT])
-    @marshal_with(message_infinite_scroll_pagination_model)
     @edit_permission_required
     def get(self, app_model):
         args = ChatMessagesQuery.model_validate(request.args.to_dict())
@@ -298,7 +238,10 @@ class ChatMessageListApi(Resource):
         history_messages = list(reversed(history_messages))
         attach_message_extra_contents(history_messages)
 
-        return InfiniteScrollPagination(data=history_messages, limit=args.limit, has_more=has_more)
+        return MessageInfiniteScrollPaginationResponse.model_validate(
+            InfiniteScrollPagination(data=history_messages, limit=args.limit, has_more=has_more),
+            from_attributes=True,
+        ).model_dump(mode="json")
 
 
 @console_ns.route("/apps/<uuid:app_id>/feedbacks")
@@ -468,13 +411,12 @@ class MessageApi(Resource):
     @console_ns.doc("get_message")
     @console_ns.doc(description="Get message details by ID")
     @console_ns.doc(params={"app_id": "Application ID", "message_id": "Message ID"})
-    @console_ns.response(200, "Message retrieved successfully", message_detail_model)
+    @console_ns.response(200, "Message retrieved successfully", console_ns.models[MessageDetailResponse.__name__])
     @console_ns.response(404, "Message not found")
     @get_app_model
     @setup_required
     @login_required
     @account_initialization_required
-    @marshal_with(message_detail_model)
     def get(self, app_model, message_id: str):
         message_id = str(message_id)
 
@@ -486,4 +428,4 @@ class MessageApi(Resource):
             raise NotFound("Message Not Exists.")
 
         attach_message_extra_contents([message])
-        return message
+        return MessageDetailResponse.model_validate(message, from_attributes=True).model_dump(mode="json")
diff --git a/api/tests/unit_tests/controllers/console/app/test_message_api.py b/api/tests/unit_tests/controllers/console/app/test_message_api.py
index a76e958829..c984dbef5d 100644
--- a/api/tests/unit_tests/controllers/console/app/test_message_api.py
+++ b/api/tests/unit_tests/controllers/console/app/test_message_api.py
@@ -1,5 +1,7 @@
 from __future__ import annotations
 
+from datetime import UTC, datetime
+
 import pytest
 
 from controllers.console.app import message as message_module
@@ -120,3 +122,24 @@ def test_suggested_questions_response(app, monkeypatch: pytest.MonkeyPatch) -> N
     response = message_module.SuggestedQuestionsResponse(data=["What is AI?", "How does ML work?"])
     assert len(response.data) == 2
     assert response.data[0] == "What is AI?"
+
+
+def test_message_detail_response_normalizes_aliases_and_timestamp(app, monkeypatch: pytest.MonkeyPatch) -> None:
+    """Test MessageDetailResponse normalizes alias fields and datetime timestamps."""
+    created_at = datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+    response = message_module.MessageDetailResponse.model_validate(
+        {
+            "id": "550e8400-e29b-41d4-a716-446655440000",
+            "conversation_id": "550e8400-e29b-41d4-a716-446655440001",
+            "inputs": {"foo": "bar"},
+            "query": "hello",
+            "re_sign_file_url_answer": "world",
+            "from_source": "user",
+            "status": "normal",
+            "created_at": created_at,
+            "message_metadata_dict": {"token_usage": 3},
+        }
+    )
+    assert response.answer == "world"
+    assert response.metadata == {"token_usage": 3}
+    assert response.created_at == int(created_at.timestamp())

From b65a5fcd97f3fc56e3b706280cc55fa4880165d3 Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 12:50:59 -0700
Subject: [PATCH 35/44] refactor(api): migrate service api workflow responses
 from marshal_with to BaseModel (#35195)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 api/controllers/service_api/app/workflow.py   | 167 +++++++++++++++---
 .../service_api/app/test_workflow.py          |  49 +++--
 2 files changed, 176 insertions(+), 40 deletions(-)

diff --git a/api/controllers/service_api/app/workflow.py b/api/controllers/service_api/app/workflow.py
index e0a64ffe26..d5544ff473 100644
--- a/api/controllers/service_api/app/workflow.py
+++ b/api/controllers/service_api/app/workflow.py
@@ -1,13 +1,15 @@
 import logging
+from collections.abc import Mapping
+from datetime import datetime
 from typing import Literal
 
 from dateutil.parser import isoparse
 from flask import request
-from flask_restx import Namespace, Resource, fields
+from flask_restx import Resource, fields
 from graphon.enums import WorkflowExecutionStatus
 from graphon.graph_engine.manager import GraphEngineManager
 from graphon.model_runtime.errors.invoke import InvokeError
-from pydantic import BaseModel, Field
+from pydantic import BaseModel, Field, field_validator
 from sqlalchemy.orm import sessionmaker
 from werkzeug.exceptions import BadRequest, InternalServerError, NotFound
 
@@ -33,9 +35,10 @@ from core.errors.error import (
 from core.helper.trace_id_helper import get_external_trace_id
 from extensions.ext_database import db
 from extensions.ext_redis import redis_client
-from fields.workflow_app_log_fields import build_workflow_app_log_pagination_model
+from fields.base import ResponseModel
+from fields.end_user_fields import SimpleEndUser
+from fields.member_fields import SimpleAccount
 from libs import helper
-from libs.helper import OptionalTimestampField, TimestampField
 from models.model import App, AppMode, EndUser
 from models.workflow import WorkflowRun
 from repositories.factory import DifyAPIRepositoryFactory
@@ -65,38 +68,142 @@ class WorkflowLogQuery(BaseModel):
 register_schema_models(service_api_ns, WorkflowRunPayload, WorkflowLogQuery)
 
 
+def _to_timestamp(value: datetime | int | None) -> int | None:
+    if isinstance(value, datetime):
+        return int(value.timestamp())
+    return value
+
+
+def _enum_value(value):
+    return getattr(value, "value", value)
+
+
 class WorkflowRunStatusField(fields.Raw):
     def output(self, key, obj: WorkflowRun, **kwargs):
-        return obj.status.value
+        return _enum_value(obj.status)
 
 
 class WorkflowRunOutputsField(fields.Raw):
     def output(self, key, obj: WorkflowRun, **kwargs):
-        if obj.status == WorkflowExecutionStatus.PAUSED:
+        status = _enum_value(obj.status)
+        if status == WorkflowExecutionStatus.PAUSED.value:
             return {}
 
         outputs = obj.outputs_dict
         return outputs or {}
 
 
-workflow_run_fields = {
-    "id": fields.String,
-    "workflow_id": fields.String,
-    "status": WorkflowRunStatusField,
-    "inputs": fields.Raw,
-    "outputs": WorkflowRunOutputsField,
-    "error": fields.String,
-    "total_steps": fields.Integer,
-    "total_tokens": fields.Integer,
-    "created_at": TimestampField,
-    "finished_at": OptionalTimestampField,
-    "elapsed_time": fields.Float,
-}
+class WorkflowRunResponse(ResponseModel):
+    id: str
+    workflow_id: str
+    status: str
+    inputs: dict | list | str | int | float | bool | None = None
+    outputs: dict = Field(default_factory=dict)
+    error: str | None = None
+    total_steps: int | None = None
+    total_tokens: int | None = None
+    created_at: int | None = None
+    finished_at: int | None = None
+    elapsed_time: float | int | None = None
+
+    @field_validator("created_at", "finished_at", mode="before")
+    @classmethod
+    def _normalize_timestamp(cls, value: datetime | int | None) -> int | None:
+        return _to_timestamp(value)
 
 
-def build_workflow_run_model(api_or_ns: Namespace):
-    """Build the workflow run model for the API or Namespace."""
-    return api_or_ns.model("WorkflowRun", workflow_run_fields)
+class WorkflowRunForLogResponse(ResponseModel):
+    id: str
+    version: str | None = None
+    status: str | None = None
+    triggered_from: str | None = None
+    error: str | None = None
+    elapsed_time: float | int | None = None
+    total_tokens: int | None = None
+    total_steps: int | None = None
+    created_at: int | None = None
+    finished_at: int | None = None
+    exceptions_count: int | None = None
+
+    @field_validator("status", "triggered_from", mode="before")
+    @classmethod
+    def _normalize_enum(cls, value):
+        return _enum_value(value)
+
+    @field_validator("created_at", "finished_at", mode="before")
+    @classmethod
+    def _normalize_timestamp(cls, value: datetime | int | None) -> int | None:
+        return _to_timestamp(value)
+
+
+class WorkflowAppLogPartialResponse(ResponseModel):
+    id: str
+    workflow_run: WorkflowRunForLogResponse | None = None
+    details: dict | list | str | int | float | bool | None = None
+    created_from: str | None = None
+    created_by_role: str | None = None
+    created_by_account: SimpleAccount | None = None
+    created_by_end_user: SimpleEndUser | None = None
+    created_at: int | None = None
+
+    @field_validator("created_from", "created_by_role", mode="before")
+    @classmethod
+    def _normalize_enum(cls, value):
+        return _enum_value(value)
+
+    @field_validator("created_at", mode="before")
+    @classmethod
+    def _normalize_timestamp(cls, value: datetime | int | None) -> int | None:
+        return _to_timestamp(value)
+
+
+class WorkflowAppLogPaginationResponse(ResponseModel):
+    page: int
+    limit: int
+    total: int
+    has_more: bool
+    data: list[WorkflowAppLogPartialResponse]
+
+
+register_schema_models(
+    service_api_ns,
+    WorkflowRunResponse,
+    WorkflowRunForLogResponse,
+    WorkflowAppLogPartialResponse,
+    WorkflowAppLogPaginationResponse,
+)
+
+
+def _serialize_workflow_run(workflow_run: WorkflowRun) -> dict:
+    status = _enum_value(workflow_run.status)
+    raw_outputs = workflow_run.outputs_dict
+    if status == WorkflowExecutionStatus.PAUSED.value or raw_outputs is None:
+        outputs: dict = {}
+    elif isinstance(raw_outputs, dict):
+        outputs = raw_outputs
+    elif isinstance(raw_outputs, Mapping):
+        outputs = dict(raw_outputs)
+    else:
+        outputs = {}
+    return WorkflowRunResponse.model_validate(
+        {
+            "id": workflow_run.id,
+            "workflow_id": workflow_run.workflow_id,
+            "status": status,
+            "inputs": workflow_run.inputs,
+            "outputs": outputs,
+            "error": workflow_run.error,
+            "total_steps": workflow_run.total_steps,
+            "total_tokens": workflow_run.total_tokens,
+            "created_at": workflow_run.created_at,
+            "finished_at": workflow_run.finished_at,
+            "elapsed_time": workflow_run.elapsed_time,
+        }
+    ).model_dump(mode="json")
+
+
+def _serialize_workflow_log_pagination(pagination) -> dict:
+    return WorkflowAppLogPaginationResponse.model_validate(pagination, from_attributes=True).model_dump(mode="json")
 
 
 @service_api_ns.route("/workflows/run/<string:workflow_run_id>")
@@ -112,7 +219,11 @@ class WorkflowRunDetailApi(Resource):
         }
     )
     @validate_app_token
-    @service_api_ns.marshal_with(build_workflow_run_model(service_api_ns))
+    @service_api_ns.response(
+        200,
+        "Workflow run details retrieved successfully",
+        service_api_ns.models[WorkflowRunResponse.__name__],
+    )
     def get(self, app_model: App, workflow_run_id: str):
         """Get a workflow task running detail.
 
@@ -133,7 +244,7 @@ class WorkflowRunDetailApi(Resource):
         )
         if not workflow_run:
             raise NotFound("Workflow run not found.")
-        return workflow_run
+        return _serialize_workflow_run(workflow_run)
 
 
 @service_api_ns.route("/workflows/run")
@@ -299,7 +410,11 @@ class WorkflowAppLogApi(Resource):
         }
     )
     @validate_app_token
-    @service_api_ns.marshal_with(build_workflow_app_log_pagination_model(service_api_ns))
+    @service_api_ns.response(
+        200,
+        "Logs retrieved successfully",
+        service_api_ns.models[WorkflowAppLogPaginationResponse.__name__],
+    )
     def get(self, app_model: App):
         """Get workflow app logs.
 
@@ -327,4 +442,4 @@ class WorkflowAppLogApi(Resource):
                 created_by_account=args.created_by_account,
             )
 
-            return workflow_app_log_pagination
+            return _serialize_workflow_log_pagination(workflow_app_log_pagination)
diff --git a/api/tests/unit_tests/controllers/service_api/app/test_workflow.py b/api/tests/unit_tests/controllers/service_api/app/test_workflow.py
index cfa21bf2dd..74a3c75839 100644
--- a/api/tests/unit_tests/controllers/service_api/app/test_workflow.py
+++ b/api/tests/unit_tests/controllers/service_api/app/test_workflow.py
@@ -15,6 +15,7 @@ Focus on:
 
 import sys
 import uuid
+from datetime import UTC, datetime
 from types import SimpleNamespace
 from unittest.mock import Mock, patch
 
@@ -43,6 +44,22 @@ from services.errors.llm import InvokeRateLimitError
 from services.workflow_app_service import WorkflowAppService
 
 
+def _make_mock_workflow_run(run_id: str = "run-1"):
+    run = Mock()
+    run.id = run_id
+    run.workflow_id = "wf-1"
+    run.status = WorkflowExecutionStatus.SUCCEEDED
+    run.inputs = {"input": "value"}
+    run.outputs_dict = {"output": "value"}
+    run.error = None
+    run.total_steps = 1
+    run.total_tokens = 10
+    run.created_at = datetime(2026, 1, 1, tzinfo=UTC)
+    run.finished_at = datetime(2026, 1, 1, tzinfo=UTC)
+    run.elapsed_time = 0.1
+    return run
+
+
 class TestWorkflowRunPayload:
     """Test suite for WorkflowRunPayload Pydantic model."""
 
@@ -359,7 +376,7 @@ class TestWorkflowRunDetailApi:
                 handler(api, app_model=app_model, workflow_run_id="run")
 
     def test_success(self, monkeypatch: pytest.MonkeyPatch) -> None:
-        run = SimpleNamespace(id="run")
+        run = _make_mock_workflow_run(run_id="run")
         repo = SimpleNamespace(get_workflow_run_by_id=lambda **_kwargs: run)
         workflow_module = sys.modules["controllers.service_api.app.workflow"]
         monkeypatch.setattr(workflow_module, "db", SimpleNamespace(engine=object()))
@@ -373,7 +390,10 @@ class TestWorkflowRunDetailApi:
         handler = _unwrap(api.get)
         app_model = SimpleNamespace(mode=AppMode.WORKFLOW.value, tenant_id="t1", id="a1")
 
-        assert handler(api, app_model=app_model, workflow_run_id="run") == run
+        result = handler(api, app_model=app_model, workflow_run_id="run")
+        assert result["id"] == "run"
+        assert result["workflow_id"] == "wf-1"
+        assert result["status"] == "succeeded"
 
 
 class TestWorkflowRunApi:
@@ -490,7 +510,7 @@ class TestWorkflowAppLogApi:
         monkeypatch.setattr(
             WorkflowAppService,
             "get_paginate_workflow_app_logs",
-            lambda *_args, **_kwargs: {"items": [], "total": 0},
+            lambda *_args, **_kwargs: {"page": 1, "limit": 20, "total": 0, "has_more": False, "data": []},
         )
 
         api = WorkflowAppLogApi()
@@ -500,7 +520,7 @@ class TestWorkflowAppLogApi:
         with app.test_request_context("/workflows/logs", method="GET"):
             response = handler(api, app_model=app_model)
 
-        assert response == {"items": [], "total": 0}
+        assert response == {"page": 1, "limit": 20, "total": 0, "has_more": False, "data": []}
 
 
 # =============================================================================
@@ -527,9 +547,8 @@ def mock_workflow_app():
 class TestWorkflowRunDetailApiGet:
     """Test suite for WorkflowRunDetailApi.get() endpoint.
 
-    ``get`` is wrapped by ``@validate_app_token`` (preserves ``__wrapped__``)
-    and ``@service_api_ns.marshal_with``.  We call the unwrapped method
-    directly; ``marshal_with`` is a no-op when calling directly.
+    ``get`` is wrapped by ``@validate_app_token`` (preserves ``__wrapped__``),
+    and we call the unwrapped method directly in tests.
     """
 
     @patch("controllers.service_api.app.workflow.DifyAPIRepositoryFactory")
@@ -542,9 +561,7 @@ class TestWorkflowRunDetailApiGet:
         mock_workflow_app,
     ):
         """Test successful workflow run detail retrieval."""
-        mock_run = Mock()
-        mock_run.id = "run-1"
-        mock_run.status = "succeeded"
+        mock_run = _make_mock_workflow_run(run_id="run-1")
         mock_repo = Mock()
         mock_repo.get_workflow_run_by_id.return_value = mock_run
         mock_repo_factory.create_api_workflow_run_repository.return_value = mock_repo
@@ -558,7 +575,8 @@ class TestWorkflowRunDetailApiGet:
             api = WorkflowRunDetailApi()
             result = _unwrap(api.get)(api, app_model=mock_workflow_app, workflow_run_id=mock_run.id)
 
-        assert result == mock_run
+        assert result["id"] == mock_run.id
+        assert result["status"] == "succeeded"
 
     @patch("controllers.service_api.app.workflow.db")
     def test_get_workflow_run_wrong_app_mode(self, mock_db, app):
@@ -622,8 +640,7 @@ class TestWorkflowTaskStopApiPost:
 class TestWorkflowAppLogApiGet:
     """Test suite for WorkflowAppLogApi.get() endpoint.
 
-    ``get`` is wrapped by ``@validate_app_token`` and
-    ``@service_api_ns.marshal_with``.
+    ``get`` is wrapped by ``@validate_app_token``.
     """
 
     @patch("controllers.service_api.app.workflow.WorkflowAppService")
@@ -637,6 +654,10 @@ class TestWorkflowAppLogApiGet:
     ):
         """Test successful workflow log retrieval."""
         mock_pagination = Mock()
+        mock_pagination.page = 1
+        mock_pagination.limit = 20
+        mock_pagination.total = 0
+        mock_pagination.has_more = False
         mock_pagination.data = []
         mock_svc_instance = Mock()
         mock_svc_instance.get_paginate_workflow_app_logs.return_value = mock_pagination
@@ -661,4 +682,4 @@ class TestWorkflowAppLogApiGet:
                 api = WorkflowAppLogApi()
                 result = _unwrap(api.get)(api, app_model=mock_workflow_app)
 
-        assert result == mock_pagination
+        assert result == {"page": 1, "limit": 20, "total": 0, "has_more": False, "data": []}

From b1722c8af9f8b75e5fb9ed1e2c7e218b49ad0725 Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 12:51:33 -0700
Subject: [PATCH 36/44] refactor(api): migrate console conversation variables
 response model to BaseModel (#35193)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 .../console/app/conversation_variables.py     | 126 ++++++++++++------
 .../app/test_conversation_variables_api.py    | 108 +++++++++++++++
 2 files changed, 196 insertions(+), 38 deletions(-)
 create mode 100644 api/tests/unit_tests/controllers/console/app/test_conversation_variables_api.py

diff --git a/api/controllers/console/app/conversation_variables.py b/api/controllers/console/app/conversation_variables.py
index 369c26a80c..cead33d14f 100644
--- a/api/controllers/console/app/conversation_variables.py
+++ b/api/controllers/console/app/conversation_variables.py
@@ -1,44 +1,86 @@
+from __future__ import annotations
+
+from datetime import datetime
+from typing import Any
+
 from flask import request
-from flask_restx import Resource, fields, marshal_with
-from pydantic import BaseModel, Field
+from flask_restx import Resource
+from pydantic import BaseModel, Field, field_validator
 from sqlalchemy import select
 from sqlalchemy.orm import sessionmaker
 
+from controllers.common.schema import register_schema_models
 from controllers.console import console_ns
 from controllers.console.app.wraps import get_app_model
 from controllers.console.wraps import account_initialization_required, setup_required
 from extensions.ext_database import db
-from fields.conversation_variable_fields import (
-    conversation_variable_fields,
-    paginated_conversation_variable_fields,
-)
+from fields._value_type_serializer import serialize_value_type
+from fields.base import ResponseModel
 from libs.login import login_required
 from models import ConversationVariable
 from models.model import AppMode
 
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
 
 class ConversationVariablesQuery(BaseModel):
     conversation_id: str = Field(..., description="Conversation ID to filter variables")
 
 
-console_ns.schema_model(
-    ConversationVariablesQuery.__name__,
-    ConversationVariablesQuery.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0),
-)
+def _to_timestamp(value: datetime | int | None) -> int | None:
+    if isinstance(value, datetime):
+        return int(value.timestamp())
+    return value
 
-# Register models for flask_restx to avoid dict type issues in Swagger
-# Register base model first
-conversation_variable_model = console_ns.model("ConversationVariable", conversation_variable_fields)
 
-# For nested models, need to replace nested dict with registered model
-paginated_conversation_variable_fields_copy = paginated_conversation_variable_fields.copy()
-paginated_conversation_variable_fields_copy["data"] = fields.List(
-    fields.Nested(conversation_variable_model), attribute="data"
-)
-paginated_conversation_variable_model = console_ns.model(
-    "PaginatedConversationVariable", paginated_conversation_variable_fields_copy
+class ConversationVariableResponse(ResponseModel):
+    id: str
+    name: str
+    value_type: str
+    value: str | None = None
+    description: str | None = None
+    created_at: int | None = None
+    updated_at: int | None = None
+
+    @field_validator("value_type", mode="before")
+    @classmethod
+    def _normalize_value_type(cls, value: Any) -> str:
+        exposed_type = getattr(value, "exposed_type", None)
+        if callable(exposed_type):
+            return str(exposed_type().value)
+        if isinstance(value, str):
+            return value
+        try:
+            return serialize_value_type(value)
+        except Exception:
+            return serialize_value_type({"value_type": value})
+
+    @field_validator("value", mode="before")
+    @classmethod
+    def _normalize_value(cls, value: Any | None) -> str | None:
+        if value is None:
+            return None
+        if isinstance(value, str):
+            return value
+        return str(value)
+
+    @field_validator("created_at", "updated_at", mode="before")
+    @classmethod
+    def _normalize_timestamp(cls, value: datetime | int | None) -> int | None:
+        return _to_timestamp(value)
+
+
+class PaginatedConversationVariableResponse(ResponseModel):
+    page: int
+    limit: int
+    total: int
+    has_more: bool
+    data: list[ConversationVariableResponse]
+
+
+register_schema_models(
+    console_ns,
+    ConversationVariablesQuery,
+    ConversationVariableResponse,
+    PaginatedConversationVariableResponse,
 )
 
 
@@ -48,12 +90,15 @@ class ConversationVariablesApi(Resource):
     @console_ns.doc(description="Get conversation variables for an application")
     @console_ns.doc(params={"app_id": "Application ID"})
     @console_ns.expect(console_ns.models[ConversationVariablesQuery.__name__])
-    @console_ns.response(200, "Conversation variables retrieved successfully", paginated_conversation_variable_model)
+    @console_ns.response(
+        200,
+        "Conversation variables retrieved successfully",
+        console_ns.models[PaginatedConversationVariableResponse.__name__],
+    )
     @setup_required
     @login_required
     @account_initialization_required
     @get_app_model(mode=AppMode.ADVANCED_CHAT)
-    @marshal_with(paginated_conversation_variable_model)
     def get(self, app_model):
         args = ConversationVariablesQuery.model_validate(request.args.to_dict(flat=True))  # type: ignore
 
@@ -72,17 +117,22 @@ class ConversationVariablesApi(Resource):
         with sessionmaker(db.engine, expire_on_commit=False).begin() as session:
             rows = session.scalars(stmt).all()
 
-        return {
-            "page": page,
-            "limit": page_size,
-            "total": len(rows),
-            "has_more": False,
-            "data": [
-                {
-                    "created_at": row.created_at,
-                    "updated_at": row.updated_at,
-                    **row.to_variable().model_dump(),
-                }
-                for row in rows
-            ],
-        }
+        response = PaginatedConversationVariableResponse.model_validate(
+            {
+                "page": page,
+                "limit": page_size,
+                "total": len(rows),
+                "has_more": False,
+                "data": [
+                    ConversationVariableResponse.model_validate(
+                        {
+                            "created_at": row.created_at,
+                            "updated_at": row.updated_at,
+                            **row.to_variable().model_dump(),
+                        }
+                    )
+                    for row in rows
+                ],
+            }
+        )
+        return response.model_dump(mode="json")
diff --git a/api/tests/unit_tests/controllers/console/app/test_conversation_variables_api.py b/api/tests/unit_tests/controllers/console/app/test_conversation_variables_api.py
new file mode 100644
index 0000000000..42b3420c31
--- /dev/null
+++ b/api/tests/unit_tests/controllers/console/app/test_conversation_variables_api.py
@@ -0,0 +1,108 @@
+from __future__ import annotations
+
+from contextlib import nullcontext
+from datetime import UTC, datetime
+from types import SimpleNamespace
+
+import pytest
+from graphon.variables.types import SegmentType
+from pydantic import ValidationError
+
+from controllers.console.app import conversation_variables as conversation_variables_module
+
+
+def _unwrap(func):
+    bound_self = getattr(func, "__self__", None)
+    while hasattr(func, "__wrapped__"):
+        func = func.__wrapped__
+    if bound_self is not None:
+        return func.__get__(bound_self, bound_self.__class__)
+    return func
+
+
+def test_get_conversation_variables_returns_paginated_response(app, monkeypatch: pytest.MonkeyPatch) -> None:
+    api = conversation_variables_module.ConversationVariablesApi()
+    method = _unwrap(api.get)
+
+    created_at = datetime(2026, 1, 1, tzinfo=UTC)
+    updated_at = datetime(2026, 1, 2, tzinfo=UTC)
+    row = SimpleNamespace(
+        created_at=created_at,
+        updated_at=updated_at,
+        to_variable=lambda: SimpleNamespace(
+            model_dump=lambda: {
+                "id": "var-1",
+                "name": "my_var",
+                "value_type": "string",
+                "value": "value",
+                "description": "desc",
+            }
+        ),
+    )
+    session = SimpleNamespace(scalars=lambda _stmt: SimpleNamespace(all=lambda: [row]))
+    monkeypatch.setattr(conversation_variables_module, "db", SimpleNamespace(engine=object()))
+    monkeypatch.setattr(
+        conversation_variables_module,
+        "sessionmaker",
+        lambda *_args, **_kwargs: SimpleNamespace(begin=lambda: nullcontext(session)),
+    )
+
+    with app.test_request_context(
+        "/console/api/apps/app-1/conversation-variables",
+        method="GET",
+        query_string={"conversation_id": "conv-1"},
+    ):
+        response = method(app_model=SimpleNamespace(id="app-1"))
+
+    assert response["page"] == 1
+    assert response["limit"] == 100
+    assert response["total"] == 1
+    assert response["has_more"] is False
+    assert response["data"][0]["id"] == "var-1"
+    assert response["data"][0]["created_at"] == int(created_at.timestamp())
+    assert response["data"][0]["updated_at"] == int(updated_at.timestamp())
+
+
+def test_get_conversation_variables_normalizes_value_type_and_value(app, monkeypatch: pytest.MonkeyPatch) -> None:
+    api = conversation_variables_module.ConversationVariablesApi()
+    method = _unwrap(api.get)
+
+    row = SimpleNamespace(
+        created_at=None,
+        updated_at=None,
+        to_variable=lambda: SimpleNamespace(
+            model_dump=lambda: {
+                "id": "var-2",
+                "name": "my_var_2",
+                "value_type": SegmentType.INTEGER,
+                "value": 42,
+                "description": None,
+            }
+        ),
+    )
+    session = SimpleNamespace(scalars=lambda _stmt: SimpleNamespace(all=lambda: [row]))
+    monkeypatch.setattr(conversation_variables_module, "db", SimpleNamespace(engine=object()))
+    monkeypatch.setattr(
+        conversation_variables_module,
+        "sessionmaker",
+        lambda *_args, **_kwargs: SimpleNamespace(begin=lambda: nullcontext(session)),
+    )
+
+    with app.test_request_context(
+        "/console/api/apps/app-1/conversation-variables",
+        method="GET",
+        query_string={"conversation_id": "conv-1"},
+    ):
+        response = method(app_model=SimpleNamespace(id="app-1"))
+
+    assert response["data"][0]["value_type"] == "number"
+    assert response["data"][0]["value"] == "42"
+
+
+def test_get_conversation_variables_requires_conversation_id(app) -> None:
+    api = conversation_variables_module.ConversationVariablesApi()
+    method = _unwrap(api.get)
+
+    with app.test_request_context("/console/api/apps/app-1/conversation-variables", method="GET"):
+        with pytest.raises(ValidationError):
+            method(app_model=SimpleNamespace(id="app-1"))

From 25c388d0db5f9911b37d89b7df5df6446610665e Mon Sep 17 00:00:00 2001
From: NVIDIAN <speedy.hpc@hotmail.com>
Date: Tue, 14 Apr 2026 12:52:17 -0700
Subject: [PATCH 37/44] refactor(api): migrate console workflow-trigger
 responses to BaseModel (#35200)

Co-authored-by: ai-hpc <ai-hpc@users.noreply.github.com>
---
 .../console/app/workflow_trigger.py           | 80 ++++++++++++++-----
 .../controllers/console/app/test_app_apis.py  |  3 +-
 .../console/app/test_workflow_trigger_api.py  | 54 +++++++++++++
 3 files changed, 114 insertions(+), 23 deletions(-)
 create mode 100644 api/tests/unit_tests/controllers/console/app/test_workflow_trigger_api.py

diff --git a/api/controllers/console/app/workflow_trigger.py b/api/controllers/console/app/workflow_trigger.py
index c457684c15..a6715fa200 100644
--- a/api/controllers/console/app/workflow_trigger.py
+++ b/api/controllers/console/app/workflow_trigger.py
@@ -1,16 +1,17 @@
 import logging
+from datetime import datetime
 
 from flask import request
-from flask_restx import Resource, fields, marshal_with
-from pydantic import BaseModel
+from flask_restx import Resource
+from pydantic import BaseModel, field_validator
 from sqlalchemy import select
 from sqlalchemy.orm import sessionmaker
 from werkzeug.exceptions import NotFound
 
 from configs import dify_config
-from controllers.common.schema import get_or_create_model
+from controllers.common.schema import register_schema_models
 from extensions.ext_database import db
-from fields.workflow_trigger_fields import trigger_fields, triggers_list_fields, webhook_trigger_fields
+from fields.base import ResponseModel
 from libs.login import current_user, login_required
 from models.enums import AppTriggerStatus
 from models.model import Account, App, AppMode
@@ -21,15 +22,6 @@ from ..app.wraps import get_app_model
 from ..wraps import account_initialization_required, edit_permission_required, setup_required
 
 logger = logging.getLogger(__name__)
-DEFAULT_REF_TEMPLATE_SWAGGER_2_0 = "#/definitions/{model}"
-
-trigger_model = get_or_create_model("WorkflowTrigger", trigger_fields)
-
-triggers_list_fields_copy = triggers_list_fields.copy()
-triggers_list_fields_copy["data"] = fields.List(fields.Nested(trigger_model))
-triggers_list_model = get_or_create_model("WorkflowTriggerList", triggers_list_fields_copy)
-
-webhook_trigger_model = get_or_create_model("WebhookTrigger", webhook_trigger_fields)
 
 
 class Parser(BaseModel):
@@ -41,10 +33,52 @@ class ParserEnable(BaseModel):
     enable_trigger: bool
 
 
-console_ns.schema_model(Parser.__name__, Parser.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0))
+class WorkflowTriggerResponse(ResponseModel):
+    id: str
+    trigger_type: str
+    title: str
+    node_id: str
+    provider_name: str
+    icon: str
+    status: str
+    created_at: datetime | None = None
+    updated_at: datetime | None = None
 
-console_ns.schema_model(
-    ParserEnable.__name__, ParserEnable.model_json_schema(ref_template=DEFAULT_REF_TEMPLATE_SWAGGER_2_0)
+    @field_validator("id", "trigger_type", "title", "node_id", "provider_name", "icon", "status", mode="before")
+    @classmethod
+    def _normalize_string_fields(cls, value: object) -> str:
+        if isinstance(value, str):
+            return value
+        return str(value)
+
+
+class WorkflowTriggerListResponse(ResponseModel):
+    data: list[WorkflowTriggerResponse]
+
+
+class WebhookTriggerResponse(ResponseModel):
+    id: str
+    webhook_id: str
+    webhook_url: str
+    webhook_debug_url: str
+    node_id: str
+    created_at: datetime | None = None
+
+    @field_validator("id", "webhook_id", "webhook_url", "webhook_debug_url", "node_id", mode="before")
+    @classmethod
+    def _normalize_string_fields(cls, value: object) -> str:
+        if isinstance(value, str):
+            return value
+        return str(value)
+
+
+register_schema_models(
+    console_ns,
+    Parser,
+    ParserEnable,
+    WorkflowTriggerResponse,
+    WorkflowTriggerListResponse,
+    WebhookTriggerResponse,
 )
 
 
@@ -57,7 +91,7 @@ class WebhookTriggerApi(Resource):
     @login_required
     @account_initialization_required
     @get_app_model(mode=AppMode.WORKFLOW)
-    @marshal_with(webhook_trigger_model)
+    @console_ns.response(200, "Success", console_ns.models[WebhookTriggerResponse.__name__])
     def get(self, app_model: App):
         """Get webhook trigger for a node"""
         args = Parser.model_validate(request.args.to_dict(flat=True))  # type: ignore
@@ -78,7 +112,7 @@ class WebhookTriggerApi(Resource):
             if not webhook_trigger:
                 raise NotFound("Webhook trigger not found for this node")
 
-            return webhook_trigger
+            return WebhookTriggerResponse.model_validate(webhook_trigger, from_attributes=True).model_dump(mode="json")
 
 
 @console_ns.route("/apps/<uuid:app_id>/triggers")
@@ -89,7 +123,7 @@ class AppTriggersApi(Resource):
     @login_required
     @account_initialization_required
     @get_app_model(mode=AppMode.WORKFLOW)
-    @marshal_with(triggers_list_model)
+    @console_ns.response(200, "Success", console_ns.models[WorkflowTriggerListResponse.__name__])
     def get(self, app_model: App):
         """Get app triggers list"""
         assert isinstance(current_user, Account)
@@ -118,7 +152,9 @@ class AppTriggersApi(Resource):
             else:
                 trigger.icon = ""  # type: ignore
 
-        return {"data": triggers}
+        return WorkflowTriggerListResponse.model_validate({"data": triggers}, from_attributes=True).model_dump(
+            mode="json"
+        )
 
 
 @console_ns.route("/apps/<uuid:app_id>/trigger-enable")
@@ -129,7 +165,7 @@ class AppTriggerEnableApi(Resource):
     @account_initialization_required
     @edit_permission_required
     @get_app_model(mode=AppMode.WORKFLOW)
-    @marshal_with(trigger_model)
+    @console_ns.response(200, "Success", console_ns.models[WorkflowTriggerResponse.__name__])
     def post(self, app_model: App):
         """Update app trigger (enable/disable)"""
         args = ParserEnable.model_validate(console_ns.payload)
@@ -160,4 +196,4 @@ class AppTriggerEnableApi(Resource):
         else:
             trigger.icon = ""  # type: ignore
 
-        return trigger
+        return WorkflowTriggerResponse.model_validate(trigger, from_attributes=True).model_dump(mode="json")
diff --git a/api/tests/test_containers_integration_tests/controllers/console/app/test_app_apis.py b/api/tests/test_containers_integration_tests/controllers/console/app/test_app_apis.py
index 4e25a7780f..15dec06311 100644
--- a/api/tests/test_containers_integration_tests/controllers/console/app/test_app_apis.py
+++ b/api/tests/test_containers_integration_tests/controllers/console/app/test_app_apis.py
@@ -608,7 +608,8 @@ class TestWorkflowTriggerEndpoints:
         with app.test_request_context("/?node_id=node-1"):
             result = method(app_model=SimpleNamespace(id="app-1"))
 
-        assert result is trigger
+        assert isinstance(result, dict)
+        assert {"id", "webhook_id", "webhook_url", "webhook_debug_url", "node_id", "created_at"} <= set(result.keys())
 
 
 class TestWrapsEndpoints:
diff --git a/api/tests/unit_tests/controllers/console/app/test_workflow_trigger_api.py b/api/tests/unit_tests/controllers/console/app/test_workflow_trigger_api.py
new file mode 100644
index 0000000000..5363aa154f
--- /dev/null
+++ b/api/tests/unit_tests/controllers/console/app/test_workflow_trigger_api.py
@@ -0,0 +1,54 @@
+from __future__ import annotations
+
+from datetime import UTC, datetime
+from types import SimpleNamespace
+
+from controllers.console.app import workflow_trigger as workflow_trigger_module
+
+
+def test_parser_models_validate():
+    parser = workflow_trigger_module.Parser(node_id="node-1")
+    enable_parser = workflow_trigger_module.ParserEnable(
+        trigger_id="550e8400-e29b-41d4-a716-446655440000", enable_trigger=True
+    )
+
+    assert parser.node_id == "node-1"
+    assert enable_parser.enable_trigger is True
+
+
+def test_workflow_trigger_response_serializes_datetime():
+    created_at = datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+    trigger = SimpleNamespace(
+        id="trigger-1",
+        trigger_type="trigger-plugin",
+        title="Trigger",
+        node_id="node-1",
+        provider_name="provider",
+        icon="https://example.com/icon",
+        status="enabled",
+        created_at=created_at,
+        updated_at=created_at,
+    )
+
+    payload = workflow_trigger_module.WorkflowTriggerResponse.model_validate(trigger, from_attributes=True).model_dump(
+        mode="json"
+    )
+    assert payload["id"] == "trigger-1"
+    assert payload["created_at"] == "2026-01-02T03:04:05Z"
+    assert payload["updated_at"] == "2026-01-02T03:04:05Z"
+
+
+def test_webhook_trigger_response_serializes_datetime():
+    created_at = datetime(2026, 1, 2, 3, 4, 5, tzinfo=UTC)
+    webhook = {
+        "id": "webhook-1",
+        "webhook_id": "whk-1",
+        "webhook_url": "https://example.com/hook",
+        "webhook_debug_url": "https://example.com/hook/debug",
+        "node_id": "node-1",
+        "created_at": created_at,
+    }
+
+    payload = workflow_trigger_module.WebhookTriggerResponse.model_validate(webhook).model_dump(mode="json")
+    assert payload["webhook_id"] == "whk-1"
+    assert payload["created_at"] == "2026-01-02T03:04:05Z"

From 693080aa12e4c53d90931442dff192f605a6ead3 Mon Sep 17 00:00:00 2001
From: James <63717587+jamesrayammons@users.noreply.github.com>
Date: Tue, 14 Apr 2026 21:52:31 +0200
Subject: [PATCH 38/44] test: migrate dataset service dataset mock tests to
 testcontainers (#35194)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../test_dataset_service_permissions.py       | 613 ++++++++++++++++++
 .../services/test_dataset_service_dataset.py  | 499 --------------
 2 files changed, 613 insertions(+), 499 deletions(-)
 create mode 100644 api/tests/test_containers_integration_tests/services/test_dataset_service_permissions.py

diff --git a/api/tests/test_containers_integration_tests/services/test_dataset_service_permissions.py b/api/tests/test_containers_integration_tests/services/test_dataset_service_permissions.py
new file mode 100644
index 0000000000..1b4179c9c7
--- /dev/null
+++ b/api/tests/test_containers_integration_tests/services/test_dataset_service_permissions.py
@@ -0,0 +1,613 @@
+"""Testcontainers integration tests for DatasetService permission and lifecycle SQL paths."""
+
+from datetime import datetime
+from types import SimpleNamespace
+from unittest.mock import patch
+from uuid import uuid4
+
+import pytest
+from sqlalchemy.orm import Session
+from werkzeug.exceptions import NotFound
+
+from core.rag.index_processor.constant.index_type import IndexTechniqueType
+from models.account import Account, Tenant, TenantAccountJoin, TenantAccountRole
+from models.dataset import (
+    AppDatasetJoin,
+    Dataset,
+    DatasetAutoDisableLog,
+    DatasetCollectionBinding,
+    DatasetPermission,
+    DatasetPermissionEnum,
+)
+from models.enums import DataSourceType
+from services.dataset_service import DatasetCollectionBindingService, DatasetPermissionService, DatasetService
+from services.errors.account import NoPermissionError
+
+
+class DatasetPermissionIntegrationFactory:
+    @staticmethod
+    def create_account_with_tenant(
+        db_session_with_containers: Session,
+        role: TenantAccountRole = TenantAccountRole.OWNER,
+    ) -> tuple[Account, Tenant]:
+        account = Account(
+            email=f"{uuid4()}@example.com",
+            name=f"user-{uuid4()}",
+            interface_language="en-US",
+            status="active",
+        )
+        tenant = Tenant(name=f"tenant-{uuid4()}", status="normal")
+        db_session_with_containers.add_all([account, tenant])
+        db_session_with_containers.flush()
+
+        join = TenantAccountJoin(
+            tenant_id=tenant.id,
+            account_id=account.id,
+            role=role,
+            current=True,
+        )
+        db_session_with_containers.add(join)
+        db_session_with_containers.commit()
+
+        account.role = role
+        account._current_tenant = tenant
+        return account, tenant
+
+    @staticmethod
+    def create_account_in_tenant(
+        db_session_with_containers: Session,
+        tenant: Tenant,
+        role: TenantAccountRole = TenantAccountRole.EDITOR,
+    ) -> Account:
+        account = Account(
+            email=f"{uuid4()}@example.com",
+            name=f"user-{uuid4()}",
+            interface_language="en-US",
+            status="active",
+        )
+        db_session_with_containers.add(account)
+        db_session_with_containers.flush()
+
+        join = TenantAccountJoin(
+            tenant_id=tenant.id,
+            account_id=account.id,
+            role=role,
+            current=True,
+        )
+        db_session_with_containers.add(join)
+        db_session_with_containers.commit()
+
+        account.role = role
+        account._current_tenant = tenant
+        return account
+
+    @staticmethod
+    def create_dataset(
+        db_session_with_containers: Session,
+        *,
+        tenant_id: str,
+        created_by: str,
+        name: str | None = None,
+        permission: DatasetPermissionEnum = DatasetPermissionEnum.ONLY_ME,
+        indexing_technique: str | None = IndexTechniqueType.HIGH_QUALITY,
+        enable_api: bool = True,
+    ) -> Dataset:
+        dataset = Dataset(
+            tenant_id=tenant_id,
+            name=name or f"dataset-{uuid4()}",
+            description="desc",
+            data_source_type=DataSourceType.UPLOAD_FILE,
+            indexing_technique=indexing_technique,
+            created_by=created_by,
+            provider="vendor",
+            permission=permission,
+            retrieval_model={"top_k": 2},
+        )
+        dataset.enable_api = enable_api
+        db_session_with_containers.add(dataset)
+        db_session_with_containers.commit()
+        return dataset
+
+    @staticmethod
+    def create_dataset_permission(
+        db_session_with_containers: Session,
+        *,
+        dataset_id: str,
+        tenant_id: str,
+        account_id: str,
+    ) -> DatasetPermission:
+        permission = DatasetPermission(
+            dataset_id=dataset_id,
+            tenant_id=tenant_id,
+            account_id=account_id,
+            has_permission=True,
+        )
+        db_session_with_containers.add(permission)
+        db_session_with_containers.commit()
+        return permission
+
+    @staticmethod
+    def create_app_dataset_join(
+        db_session_with_containers: Session,
+        *,
+        dataset_id: str,
+    ) -> AppDatasetJoin:
+        join = AppDatasetJoin(
+            app_id=str(uuid4()),
+            dataset_id=dataset_id,
+        )
+        db_session_with_containers.add(join)
+        db_session_with_containers.commit()
+        return join
+
+    @staticmethod
+    def create_collection_binding(
+        db_session_with_containers: Session,
+        *,
+        provider_name: str,
+        model_name: str,
+        collection_type: str = "dataset",
+    ) -> DatasetCollectionBinding:
+        binding = DatasetCollectionBinding(
+            provider_name=provider_name,
+            model_name=model_name,
+            collection_name=f"collection_{uuid4().hex}",
+            type=collection_type,
+        )
+        db_session_with_containers.add(binding)
+        db_session_with_containers.commit()
+        return binding
+
+    @staticmethod
+    def create_auto_disable_log(
+        db_session_with_containers: Session,
+        *,
+        tenant_id: str,
+        dataset_id: str,
+        document_id: str,
+    ) -> DatasetAutoDisableLog:
+        log = DatasetAutoDisableLog(
+            tenant_id=tenant_id,
+            dataset_id=dataset_id,
+            document_id=document_id,
+        )
+        db_session_with_containers.add(log)
+        db_session_with_containers.commit()
+        return log
+
+
+class TestDatasetServicePermissionsAndLifecycle:
+    def test_delete_dataset_returns_false_when_dataset_is_missing(self, db_session_with_containers: Session):
+        owner, _tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+
+        result = DatasetService.delete_dataset(str(uuid4()), user=owner)
+
+        assert result is False
+
+    def test_delete_dataset_checks_permission_and_deletes_dataset(self, db_session_with_containers: Session):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+        )
+
+        with patch("services.dataset_service.dataset_was_deleted.send") as send_deleted_signal:
+            result = DatasetService.delete_dataset(dataset.id, user=owner)
+
+        assert result is True
+        assert db_session_with_containers.get(Dataset, dataset.id) is None
+        send_deleted_signal.assert_called_once_with(dataset)
+
+    def test_dataset_use_check_returns_true_when_join_exists(self, db_session_with_containers: Session):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+        )
+        DatasetPermissionIntegrationFactory.create_app_dataset_join(
+            db_session_with_containers,
+            dataset_id=dataset.id,
+        )
+
+        assert DatasetService.dataset_use_check(dataset.id) is True
+
+    def test_dataset_use_check_returns_false_when_join_missing(self, db_session_with_containers: Session):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+        )
+
+        assert DatasetService.dataset_use_check(dataset.id) is False
+
+    def test_check_dataset_permission_rejects_cross_tenant_access(self, db_session_with_containers: Session):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        outsider, _other_tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(
+            db_session_with_containers
+        )
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+        )
+
+        with pytest.raises(NoPermissionError, match="do not have permission"):
+            DatasetService.check_dataset_permission(dataset, outsider)
+
+    def test_check_dataset_permission_rejects_only_me_dataset_for_non_creator(
+        self, db_session_with_containers: Session
+    ):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        member = DatasetPermissionIntegrationFactory.create_account_in_tenant(db_session_with_containers, tenant)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+            permission=DatasetPermissionEnum.ONLY_ME,
+        )
+
+        with pytest.raises(NoPermissionError, match="do not have permission"):
+            DatasetService.check_dataset_permission(dataset, member)
+
+    def test_check_dataset_permission_rejects_partial_team_user_without_binding(
+        self, db_session_with_containers: Session
+    ):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        member = DatasetPermissionIntegrationFactory.create_account_in_tenant(db_session_with_containers, tenant)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+            permission=DatasetPermissionEnum.PARTIAL_TEAM,
+        )
+
+        with pytest.raises(NoPermissionError, match="do not have permission"):
+            DatasetService.check_dataset_permission(dataset, member)
+
+    def test_check_dataset_permission_allows_partial_team_creator(self, db_session_with_containers: Session):
+        creator, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(
+            db_session_with_containers,
+            role=TenantAccountRole.EDITOR,
+        )
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=creator.id,
+            permission=DatasetPermissionEnum.PARTIAL_TEAM,
+        )
+
+        DatasetService.check_dataset_permission(dataset, creator)
+
+    def test_check_dataset_permission_allows_partial_team_member_with_binding(
+        self, db_session_with_containers: Session
+    ):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        member = DatasetPermissionIntegrationFactory.create_account_in_tenant(db_session_with_containers, tenant)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+            permission=DatasetPermissionEnum.PARTIAL_TEAM,
+        )
+        DatasetPermissionIntegrationFactory.create_dataset_permission(
+            db_session_with_containers,
+            dataset_id=dataset.id,
+            tenant_id=tenant.id,
+            account_id=member.id,
+        )
+
+        DatasetService.check_dataset_permission(dataset, member)
+
+    def test_check_dataset_operator_permission_rejects_only_me_for_non_creator(
+        self, db_session_with_containers: Session
+    ):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        operator = DatasetPermissionIntegrationFactory.create_account_in_tenant(
+            db_session_with_containers,
+            tenant,
+            role=TenantAccountRole.EDITOR,
+        )
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+            permission=DatasetPermissionEnum.ONLY_ME,
+        )
+
+        with pytest.raises(NoPermissionError, match="do not have permission"):
+            DatasetService.check_dataset_operator_permission(user=operator, dataset=dataset)
+
+    def test_check_dataset_operator_permission_rejects_partial_team_without_binding(
+        self, db_session_with_containers: Session
+    ):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        operator = DatasetPermissionIntegrationFactory.create_account_in_tenant(
+            db_session_with_containers,
+            tenant,
+            role=TenantAccountRole.EDITOR,
+        )
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+            permission=DatasetPermissionEnum.PARTIAL_TEAM,
+        )
+
+        with pytest.raises(NoPermissionError, match="do not have permission"):
+            DatasetService.check_dataset_operator_permission(user=operator, dataset=dataset)
+
+    def test_check_dataset_operator_permission_allows_partial_team_with_binding(
+        self, db_session_with_containers: Session
+    ):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        operator = DatasetPermissionIntegrationFactory.create_account_in_tenant(
+            db_session_with_containers,
+            tenant,
+            role=TenantAccountRole.EDITOR,
+        )
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+            permission=DatasetPermissionEnum.PARTIAL_TEAM,
+        )
+        DatasetPermissionIntegrationFactory.create_dataset_permission(
+            db_session_with_containers,
+            dataset_id=dataset.id,
+            tenant_id=tenant.id,
+            account_id=operator.id,
+        )
+
+        DatasetService.check_dataset_operator_permission(user=operator, dataset=dataset)
+
+    def test_update_dataset_api_status_raises_not_found_for_missing_dataset(self, flask_app_with_containers):
+        with flask_app_with_containers.app_context():
+            with pytest.raises(NotFound, match="Dataset not found"):
+                DatasetService.update_dataset_api_status(str(uuid4()), True)
+
+    def test_update_dataset_api_status_requires_current_user_id(self, db_session_with_containers: Session):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+            enable_api=False,
+        )
+
+        with patch("services.dataset_service.current_user", SimpleNamespace(id=None)):
+            with pytest.raises(ValueError, match="Current user or current user id not found"):
+                DatasetService.update_dataset_api_status(dataset.id, True)
+
+    def test_update_dataset_api_status_updates_fields_and_commits(self, db_session_with_containers: Session):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+            enable_api=False,
+        )
+        now = datetime(2026, 4, 14, 18, 0, 0)
+
+        with (
+            patch("services.dataset_service.current_user", owner),
+            patch("services.dataset_service.naive_utc_now", return_value=now),
+        ):
+            DatasetService.update_dataset_api_status(dataset.id, True)
+
+        db_session_with_containers.refresh(dataset)
+        assert dataset.enable_api is True
+        assert dataset.updated_by == owner.id
+        assert dataset.updated_at == now
+
+    def test_get_dataset_auto_disable_logs_returns_empty_when_billing_is_disabled(
+        self, db_session_with_containers: Session
+    ):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        features = SimpleNamespace(
+            billing=SimpleNamespace(enabled=False, subscription=SimpleNamespace(plan="professional"))
+        )
+
+        with (
+            patch("services.dataset_service.current_user", owner),
+            patch("services.dataset_service.FeatureService.get_features", return_value=features),
+        ):
+            result = DatasetService.get_dataset_auto_disable_logs(str(uuid4()))
+
+        assert result == {"document_ids": [], "count": 0}
+
+    def test_get_dataset_auto_disable_logs_returns_recent_document_ids(self, db_session_with_containers: Session):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+        )
+        DatasetPermissionIntegrationFactory.create_auto_disable_log(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            dataset_id=dataset.id,
+            document_id=str(uuid4()),
+        )
+        DatasetPermissionIntegrationFactory.create_auto_disable_log(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            dataset_id=dataset.id,
+            document_id=str(uuid4()),
+        )
+        features = SimpleNamespace(
+            billing=SimpleNamespace(enabled=True, subscription=SimpleNamespace(plan="professional"))
+        )
+
+        with (
+            patch("services.dataset_service.current_user", owner),
+            patch("services.dataset_service.FeatureService.get_features", return_value=features),
+        ):
+            result = DatasetService.get_dataset_auto_disable_logs(dataset.id)
+
+        assert result["count"] == 2
+        assert len(result["document_ids"]) == 2
+
+
+class TestDatasetCollectionBindingServiceIntegration:
+    def test_get_dataset_collection_binding_returns_existing_binding(self, db_session_with_containers: Session):
+        binding = DatasetPermissionIntegrationFactory.create_collection_binding(
+            db_session_with_containers,
+            provider_name="provider",
+            model_name="model",
+        )
+
+        result = DatasetCollectionBindingService.get_dataset_collection_binding("provider", "model")
+
+        assert result.id == binding.id
+
+    def test_get_dataset_collection_binding_creates_binding_when_missing(self, db_session_with_containers: Session):
+        result = DatasetCollectionBindingService.get_dataset_collection_binding("provider", "missing-model")
+
+        persisted = db_session_with_containers.get(DatasetCollectionBinding, result.id)
+        assert persisted is not None
+        assert persisted.provider_name == "provider"
+        assert persisted.model_name == "missing-model"
+        assert persisted.type == "dataset"
+        assert persisted.collection_name
+
+    def test_get_dataset_collection_binding_by_id_and_type_raises_when_missing(self, flask_app_with_containers):
+        with flask_app_with_containers.app_context():
+            with pytest.raises(ValueError, match="Dataset collection binding not found"):
+                DatasetCollectionBindingService.get_dataset_collection_binding_by_id_and_type(str(uuid4()))
+
+    def test_get_dataset_collection_binding_by_id_and_type_returns_binding(self, db_session_with_containers: Session):
+        binding = DatasetPermissionIntegrationFactory.create_collection_binding(
+            db_session_with_containers,
+            provider_name="provider",
+            model_name="model",
+        )
+
+        result = DatasetCollectionBindingService.get_dataset_collection_binding_by_id_and_type(binding.id)
+
+        assert result.id == binding.id
+
+
+class TestDatasetPermissionServiceIntegration:
+    def test_get_dataset_partial_member_list_returns_scalar_results(self, db_session_with_containers: Session):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        member_a = DatasetPermissionIntegrationFactory.create_account_in_tenant(db_session_with_containers, tenant)
+        member_b = DatasetPermissionIntegrationFactory.create_account_in_tenant(db_session_with_containers, tenant)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+            permission=DatasetPermissionEnum.PARTIAL_TEAM,
+        )
+        DatasetPermissionIntegrationFactory.create_dataset_permission(
+            db_session_with_containers,
+            dataset_id=dataset.id,
+            tenant_id=tenant.id,
+            account_id=member_a.id,
+        )
+        DatasetPermissionIntegrationFactory.create_dataset_permission(
+            db_session_with_containers,
+            dataset_id=dataset.id,
+            tenant_id=tenant.id,
+            account_id=member_b.id,
+        )
+
+        result = DatasetPermissionService.get_dataset_partial_member_list(dataset.id)
+
+        assert set(result) == {member_a.id, member_b.id}
+
+    def test_update_partial_member_list_replaces_permissions_and_commits(self, db_session_with_containers: Session):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        member_a = DatasetPermissionIntegrationFactory.create_account_in_tenant(db_session_with_containers, tenant)
+        member_b = DatasetPermissionIntegrationFactory.create_account_in_tenant(db_session_with_containers, tenant)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+            permission=DatasetPermissionEnum.PARTIAL_TEAM,
+        )
+        stale_member = DatasetPermissionIntegrationFactory.create_account_in_tenant(db_session_with_containers, tenant)
+        DatasetPermissionIntegrationFactory.create_dataset_permission(
+            db_session_with_containers,
+            dataset_id=dataset.id,
+            tenant_id=tenant.id,
+            account_id=stale_member.id,
+        )
+
+        DatasetPermissionService.update_partial_member_list(
+            tenant.id,
+            dataset.id,
+            [{"user_id": member_a.id}, {"user_id": member_b.id}],
+        )
+
+        permissions = db_session_with_containers.query(DatasetPermission).filter_by(dataset_id=dataset.id).all()
+        assert {permission.account_id for permission in permissions} == {member_a.id, member_b.id}
+
+    def test_check_permission_requires_dataset_editor(self):
+        user = SimpleNamespace(is_dataset_editor=False, is_dataset_operator=False)
+        dataset = SimpleNamespace(id="dataset-1", permission=DatasetPermissionEnum.ALL_TEAM)
+
+        with pytest.raises(NoPermissionError, match="does not have permission"):
+            DatasetPermissionService.check_permission(user, dataset, DatasetPermissionEnum.ALL_TEAM, [])
+
+    def test_check_permission_prevents_dataset_operator_from_changing_permission_mode(self):
+        user = SimpleNamespace(is_dataset_editor=True, is_dataset_operator=True)
+        dataset = SimpleNamespace(id="dataset-1", permission=DatasetPermissionEnum.ALL_TEAM)
+
+        with pytest.raises(NoPermissionError, match="cannot change the dataset permissions"):
+            DatasetPermissionService.check_permission(user, dataset, DatasetPermissionEnum.ONLY_ME, [])
+
+    def test_check_permission_requires_partial_member_list_for_partial_members_mode(self):
+        user = SimpleNamespace(is_dataset_editor=True, is_dataset_operator=True)
+        dataset = SimpleNamespace(id="dataset-1", permission=DatasetPermissionEnum.PARTIAL_TEAM)
+
+        with pytest.raises(ValueError, match="Partial member list is required"):
+            DatasetPermissionService.check_permission(user, dataset, DatasetPermissionEnum.PARTIAL_TEAM, [])
+
+    def test_check_permission_rejects_dataset_operator_member_list_changes(self):
+        user = SimpleNamespace(is_dataset_editor=True, is_dataset_operator=True)
+        dataset = SimpleNamespace(id="dataset-1", permission=DatasetPermissionEnum.PARTIAL_TEAM)
+
+        with patch.object(DatasetPermissionService, "get_dataset_partial_member_list", return_value=["user-1"]):
+            with pytest.raises(ValueError, match="cannot change the dataset permissions"):
+                DatasetPermissionService.check_permission(
+                    user,
+                    dataset,
+                    DatasetPermissionEnum.PARTIAL_TEAM,
+                    [{"user_id": "user-2"}],
+                )
+
+    def test_check_permission_allows_dataset_operator_when_member_list_is_unchanged(self):
+        user = SimpleNamespace(is_dataset_editor=True, is_dataset_operator=True)
+        dataset = SimpleNamespace(id="dataset-1", permission=DatasetPermissionEnum.PARTIAL_TEAM)
+
+        with patch.object(DatasetPermissionService, "get_dataset_partial_member_list", return_value=["user-1"]):
+            DatasetPermissionService.check_permission(
+                user,
+                dataset,
+                DatasetPermissionEnum.PARTIAL_TEAM,
+                [{"user_id": "user-1"}],
+            )
+
+    def test_clear_partial_member_list_deletes_permissions_and_commits(self, db_session_with_containers: Session):
+        owner, tenant = DatasetPermissionIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        member = DatasetPermissionIntegrationFactory.create_account_in_tenant(db_session_with_containers, tenant)
+        dataset = DatasetPermissionIntegrationFactory.create_dataset(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            created_by=owner.id,
+            permission=DatasetPermissionEnum.PARTIAL_TEAM,
+        )
+        DatasetPermissionIntegrationFactory.create_dataset_permission(
+            db_session_with_containers,
+            dataset_id=dataset.id,
+            tenant_id=tenant.id,
+            account_id=member.id,
+        )
+
+        DatasetPermissionService.clear_partial_member_list(dataset.id)
+
+        remaining = db_session_with_containers.query(DatasetPermission).filter_by(dataset_id=dataset.id).all()
+        assert remaining == []
diff --git a/api/tests/unit_tests/services/test_dataset_service_dataset.py b/api/tests/unit_tests/services/test_dataset_service_dataset.py
index 2913ae20fe..3d08b6fd09 100644
--- a/api/tests/unit_tests/services/test_dataset_service_dataset.py
+++ b/api/tests/unit_tests/services/test_dataset_service_dataset.py
@@ -1,29 +1,20 @@
 """Unit tests for DatasetService and dataset-related collaborators."""
 
 from .dataset_service_test_helpers import (
-    CloudPlan,
-    Dataset,
-    DatasetCollectionBindingService,
     DatasetNameDuplicateError,
     DatasetPermissionEnum,
     DatasetPermissionService,
-    DatasetProcessRule,
     DatasetService,
     DatasetServiceUnitDataFactory,
-    DocumentIndexingError,
-    DocumentService,
     LLMBadRequestError,
     MagicMock,
-    Mock,
     ModelFeature,
     ModelType,
     NoPermissionError,
-    NotFound,
     PipelineIconInfo,
     ProviderTokenNotInitError,
     RagPipelineDatasetCreateEntity,
     SimpleNamespace,
-    TenantAccountRole,
     _make_knowledge_configuration,
     _make_retrieval_model,
     _make_session_context,
@@ -33,127 +24,6 @@ from .dataset_service_test_helpers import (
 )
 
 
-class TestDatasetServiceQueries:
-    """Unit tests for DatasetService query composition and fallback branches."""
-
-    @pytest.fixture
-    def mock_dataset_query_dependencies(self):
-        with (
-            patch("services.dataset_service.db") as mock_db,
-            patch("services.dataset_service.helper.escape_like_pattern", return_value="escaped-search") as escape_like,
-            patch("services.dataset_service.TagService.get_target_ids_by_tag_ids") as get_target_ids,
-        ):
-            mock_db.paginate.return_value = SimpleNamespace(items=["dataset"], total=1)
-            yield {
-                "db": mock_db,
-                "escape_like_pattern": escape_like,
-                "get_target_ids": get_target_ids,
-            }
-
-    def test_get_datasets_returns_paginated_results_for_public_view(self, mock_dataset_query_dependencies):
-        items, total = DatasetService.get_datasets(page=1, per_page=20, tenant_id="tenant-1")
-
-        assert items == ["dataset"]
-        assert total == 1
-        mock_dataset_query_dependencies["db"].paginate.assert_called_once()
-        mock_dataset_query_dependencies["escape_like_pattern"].assert_not_called()
-
-    def test_get_datasets_short_circuits_for_dataset_operator_without_permissions(
-        self, mock_dataset_query_dependencies
-    ):
-        user = DatasetServiceUnitDataFactory.create_user_mock(role=TenantAccountRole.DATASET_OPERATOR)
-        mock_dataset_query_dependencies["db"].session.scalars.return_value.all.return_value = []
-
-        items, total = DatasetService.get_datasets(page=1, per_page=20, tenant_id="tenant-1", user=user)
-
-        assert items == []
-        assert total == 0
-        mock_dataset_query_dependencies["db"].paginate.assert_not_called()
-
-    def test_get_datasets_short_circuits_when_tag_lookup_returns_no_target_ids(self, mock_dataset_query_dependencies):
-        mock_dataset_query_dependencies["get_target_ids"].return_value = []
-
-        items, total = DatasetService.get_datasets(
-            page=1,
-            per_page=20,
-            tenant_id="tenant-1",
-            tag_ids=["tag-1"],
-        )
-
-        assert items == []
-        assert total == 0
-        mock_dataset_query_dependencies["get_target_ids"].assert_called_once_with("knowledge", "tenant-1", ["tag-1"])
-        mock_dataset_query_dependencies["db"].paginate.assert_not_called()
-
-    def test_get_datasets_search_and_tag_filters_call_collaborators(self, mock_dataset_query_dependencies):
-        mock_dataset_query_dependencies["get_target_ids"].return_value = ["dataset-1"]
-
-        items, total = DatasetService.get_datasets(
-            page=2,
-            per_page=10,
-            tenant_id="tenant-1",
-            search="report",
-            tag_ids=["tag-1"],
-        )
-
-        assert items == ["dataset"]
-        assert total == 1
-        mock_dataset_query_dependencies["escape_like_pattern"].assert_called_once_with("report")
-        mock_dataset_query_dependencies["get_target_ids"].assert_called_once_with("knowledge", "tenant-1", ["tag-1"])
-        mock_dataset_query_dependencies["db"].paginate.assert_called_once()
-
-    def test_get_process_rules_returns_latest_rule_when_present(self):
-        dataset_process_rule = Mock(spec=DatasetProcessRule)
-        dataset_process_rule.mode = "automatic"
-        dataset_process_rule.rules_dict = {"delimiter": "\n"}
-
-        with patch("services.dataset_service.db") as mock_db:
-            (mock_db.session.execute.return_value.scalar_one_or_none.return_value) = dataset_process_rule
-
-            result = DatasetService.get_process_rules("dataset-1")
-
-        assert result == {"mode": "automatic", "rules": {"delimiter": "\n"}}
-
-    def test_get_process_rules_falls_back_to_default_rules_when_missing(self):
-        with patch("services.dataset_service.db") as mock_db:
-            (mock_db.session.execute.return_value.scalar_one_or_none.return_value) = None
-
-            result = DatasetService.get_process_rules("dataset-1")
-
-        assert result == {
-            "mode": DocumentService.DEFAULT_RULES["mode"],
-            "rules": DocumentService.DEFAULT_RULES["rules"],
-        }
-
-    def test_get_datasets_by_ids_returns_empty_for_missing_ids(self):
-        with patch("services.dataset_service.db") as mock_db:
-            items, total = DatasetService.get_datasets_by_ids([], "tenant-1")
-
-        assert items == []
-        assert total == 0
-        mock_db.paginate.assert_not_called()
-
-    def test_get_datasets_by_ids_uses_paginate_for_non_empty_input(self):
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.paginate.return_value = SimpleNamespace(items=["dataset-1"], total=1)
-
-            items, total = DatasetService.get_datasets_by_ids(["dataset-1"], "tenant-1")
-
-        assert items == ["dataset-1"]
-        assert total == 1
-        mock_db.paginate.assert_called_once()
-
-    def test_get_dataset_returns_first_match(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock()
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.get.return_value = dataset
-
-            result = DatasetService.get_dataset(dataset.id)
-
-        assert result is dataset
-
-
 class TestDatasetServiceValidation:
     """Unit tests for DatasetService validation helpers."""
 
@@ -1337,103 +1207,6 @@ class TestDatasetServiceRagPipelineSettings:
 class TestDatasetServicePermissionsAndLifecycle:
     """Unit tests for dataset permissions, deletion, and metadata helpers."""
 
-    def test_delete_dataset_returns_false_when_dataset_is_missing(self):
-        with patch.object(DatasetService, "get_dataset", return_value=None):
-            result = DatasetService.delete_dataset("dataset-1", user=SimpleNamespace(id="user-1"))
-
-        assert result is False
-
-    def test_delete_dataset_checks_permission_and_deletes_dataset(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock()
-
-        with (
-            patch.object(DatasetService, "get_dataset", return_value=dataset),
-            patch.object(DatasetService, "check_dataset_permission") as check_permission,
-            patch("services.dataset_service.dataset_was_deleted.send") as send_deleted_signal,
-            patch("services.dataset_service.db") as mock_db,
-        ):
-            result = DatasetService.delete_dataset(dataset.id, user=SimpleNamespace(id="user-1"))
-
-        assert result is True
-        check_permission.assert_called_once_with(dataset, SimpleNamespace(id="user-1"))
-        send_deleted_signal.assert_called_once_with(dataset)
-        mock_db.session.delete.assert_called_once_with(dataset)
-        mock_db.session.commit.assert_called_once()
-
-    def test_dataset_use_check_returns_scalar_result(self):
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.execute.return_value.scalar_one.return_value = True
-
-            result = DatasetService.dataset_use_check("dataset-1")
-
-        assert result is True
-
-    def test_check_dataset_permission_rejects_cross_tenant_access(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(tenant_id="tenant-a")
-        user = DatasetServiceUnitDataFactory.create_user_mock(tenant_id="tenant-b")
-
-        with pytest.raises(NoPermissionError, match="do not have permission"):
-            DatasetService.check_dataset_permission(dataset, user)
-
-    def test_check_dataset_permission_rejects_only_me_dataset_for_non_creator(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(
-            permission=DatasetPermissionEnum.ONLY_ME,
-            created_by="owner-1",
-        )
-        user = DatasetServiceUnitDataFactory.create_user_mock(
-            user_id="member-1",
-            role=TenantAccountRole.EDITOR,
-        )
-
-        with pytest.raises(NoPermissionError, match="do not have permission"):
-            DatasetService.check_dataset_permission(dataset, user)
-
-    def test_check_dataset_permission_rejects_partial_team_user_without_binding(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(
-            permission=DatasetPermissionEnum.PARTIAL_TEAM,
-            created_by="owner-1",
-        )
-        user = DatasetServiceUnitDataFactory.create_user_mock(
-            user_id="member-1",
-            role=TenantAccountRole.EDITOR,
-        )
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalar.return_value = None
-
-            with pytest.raises(NoPermissionError, match="do not have permission"):
-                DatasetService.check_dataset_permission(dataset, user)
-
-    def test_check_dataset_permission_allows_partial_team_creator_without_lookup(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(
-            permission=DatasetPermissionEnum.PARTIAL_TEAM,
-            created_by="creator-1",
-        )
-        user = DatasetServiceUnitDataFactory.create_user_mock(
-            user_id="creator-1",
-            role=TenantAccountRole.EDITOR,
-        )
-
-        with patch("services.dataset_service.db") as mock_db:
-            DatasetService.check_dataset_permission(dataset, user)
-
-        mock_db.session.scalar.assert_not_called()
-
-    def test_check_dataset_permission_allows_partial_team_member_with_binding(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(
-            permission=DatasetPermissionEnum.PARTIAL_TEAM,
-            created_by="owner-1",
-        )
-        user = DatasetServiceUnitDataFactory.create_user_mock(
-            user_id="member-1",
-            role=TenantAccountRole.EDITOR,
-        )
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalar.return_value = object()
-
-            DatasetService.check_dataset_permission(dataset, user)
-
     def test_check_dataset_operator_permission_validates_required_arguments(self):
         with pytest.raises(ValueError, match="Dataset not found"):
             DatasetService.check_dataset_operator_permission(user=SimpleNamespace(id="user-1"), dataset=None)
@@ -1441,279 +1214,14 @@ class TestDatasetServicePermissionsAndLifecycle:
         with pytest.raises(ValueError, match="User not found"):
             DatasetService.check_dataset_operator_permission(user=None, dataset=SimpleNamespace(id="dataset-1"))
 
-    def test_check_dataset_operator_permission_rejects_only_me_for_non_creator(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(
-            permission=DatasetPermissionEnum.ONLY_ME,
-            created_by="owner-1",
-        )
-        user = DatasetServiceUnitDataFactory.create_user_mock(
-            user_id="member-1",
-            role=TenantAccountRole.EDITOR,
-        )
-
-        with pytest.raises(NoPermissionError, match="do not have permission"):
-            DatasetService.check_dataset_operator_permission(user=user, dataset=dataset)
-
-    def test_check_dataset_operator_permission_rejects_partial_team_without_binding(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(permission=DatasetPermissionEnum.PARTIAL_TEAM)
-        user = DatasetServiceUnitDataFactory.create_user_mock(
-            user_id="member-1",
-            role=TenantAccountRole.EDITOR,
-        )
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalars.return_value.all.return_value = []
-
-            with pytest.raises(NoPermissionError, match="do not have permission"):
-                DatasetService.check_dataset_operator_permission(user=user, dataset=dataset)
-
-    def test_get_dataset_queries_delegates_to_paginate(self):
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.desc.side_effect = lambda column: column
-            mock_db.paginate.return_value = SimpleNamespace(items=["query"], total=1)
-
-            items, total = DatasetService.get_dataset_queries("dataset-1", page=1, per_page=20)
-
-        assert items == ["query"]
-        assert total == 1
-        mock_db.paginate.assert_called_once()
-
-    def test_get_related_apps_returns_ordered_query_results(self):
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.desc.side_effect = lambda column: column
-            mock_db.session.scalars.return_value.all.return_value = ["relation-1"]
-
-            result = DatasetService.get_related_apps("dataset-1")
-
-        assert result == ["relation-1"]
-
-    def test_update_dataset_api_status_raises_not_found_for_missing_dataset(self):
-        with patch.object(DatasetService, "get_dataset", return_value=None):
-            with pytest.raises(NotFound, match="Dataset not found"):
-                DatasetService.update_dataset_api_status("dataset-1", True)
-
-    def test_update_dataset_api_status_requires_current_user_id(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(enable_api=False)
-
-        with (
-            patch.object(DatasetService, "get_dataset", return_value=dataset),
-            patch("services.dataset_service.current_user", SimpleNamespace(id=None)),
-        ):
-            with pytest.raises(ValueError, match="Current user or current user id not found"):
-                DatasetService.update_dataset_api_status(dataset.id, True)
-
-    def test_update_dataset_api_status_updates_fields_and_commits(self):
-        dataset = DatasetServiceUnitDataFactory.create_dataset_mock(enable_api=False)
-        now = object()
-
-        with (
-            patch.object(DatasetService, "get_dataset", return_value=dataset),
-            patch("services.dataset_service.current_user", SimpleNamespace(id="user-1")),
-            patch("services.dataset_service.naive_utc_now", return_value=now),
-            patch("services.dataset_service.db") as mock_db,
-        ):
-            DatasetService.update_dataset_api_status(dataset.id, True)
-
-        assert dataset.enable_api is True
-        assert dataset.updated_by == "user-1"
-        assert dataset.updated_at is now
-        mock_db.session.commit.assert_called_once()
-
-    def test_get_dataset_auto_disable_logs_returns_empty_when_billing_is_disabled(self):
-        class FakeAccount:
-            pass
-
-        current_user = FakeAccount()
-        current_user.current_tenant_id = "tenant-1"
-
-        features = SimpleNamespace(
-            billing=SimpleNamespace(enabled=False, subscription=SimpleNamespace(plan=CloudPlan.PROFESSIONAL))
-        )
-
-        with (
-            patch("services.dataset_service.Account", FakeAccount),
-            patch("services.dataset_service.current_user", current_user),
-            patch("services.dataset_service.FeatureService.get_features", return_value=features),
-            patch("services.dataset_service.db") as mock_db,
-        ):
-            result = DatasetService.get_dataset_auto_disable_logs("dataset-1")
-
-        assert result == {"document_ids": [], "count": 0}
-        mock_db.session.scalars.assert_not_called()
-
-    def test_get_dataset_auto_disable_logs_returns_recent_document_ids(self):
-        class FakeAccount:
-            pass
-
-        current_user = FakeAccount()
-        current_user.current_tenant_id = "tenant-1"
-        logs = [SimpleNamespace(document_id="doc-1"), SimpleNamespace(document_id="doc-2")]
-        features = SimpleNamespace(
-            billing=SimpleNamespace(enabled=True, subscription=SimpleNamespace(plan=CloudPlan.PROFESSIONAL))
-        )
-
-        with (
-            patch("services.dataset_service.Account", FakeAccount),
-            patch("services.dataset_service.current_user", current_user),
-            patch("services.dataset_service.FeatureService.get_features", return_value=features),
-            patch("services.dataset_service.db") as mock_db,
-        ):
-            mock_db.session.scalars.return_value.all.return_value = logs
-
-            result = DatasetService.get_dataset_auto_disable_logs("dataset-1")
-
-        assert result == {"document_ids": ["doc-1", "doc-2"], "count": 2}
-
-
-class TestDatasetServiceDocumentIndexing:
-    """Unit tests for pause/recover/retry orchestration without SQL assertions."""
-
-    @pytest.fixture
-    def mock_document_service_dependencies(self):
-        with (
-            patch("services.dataset_service.redis_client") as mock_redis,
-            patch("services.dataset_service.db.session") as mock_db_session,
-            patch("services.dataset_service.current_user") as mock_current_user,
-        ):
-            mock_current_user.id = "user-123"
-            yield {
-                "redis_client": mock_redis,
-                "db_session": mock_db_session,
-                "current_user": mock_current_user,
-            }
-
-    def test_pause_document_success(self, mock_document_service_dependencies):
-        document = DatasetServiceUnitDataFactory.create_document_mock(indexing_status="indexing")
-
-        DocumentService.pause_document(document)
-
-        assert document.is_paused is True
-        assert document.paused_by == "user-123"
-        mock_document_service_dependencies["db_session"].add.assert_called_once_with(document)
-        mock_document_service_dependencies["db_session"].commit.assert_called_once()
-        mock_document_service_dependencies["redis_client"].setnx.assert_called_once_with(
-            f"document_{document.id}_is_paused",
-            "True",
-        )
-
-    def test_pause_document_invalid_status_error(self, mock_document_service_dependencies):
-        document = DatasetServiceUnitDataFactory.create_document_mock(indexing_status="completed")
-
-        with pytest.raises(DocumentIndexingError):
-            DocumentService.pause_document(document)
-
-    def test_recover_document_success(self, mock_document_service_dependencies):
-        document = DatasetServiceUnitDataFactory.create_document_mock(indexing_status="indexing", is_paused=True)
-
-        with patch("services.dataset_service.recover_document_indexing_task") as recover_task:
-            DocumentService.recover_document(document)
-
-        assert document.is_paused is False
-        assert document.paused_by is None
-        assert document.paused_at is None
-        mock_document_service_dependencies["db_session"].add.assert_called_once_with(document)
-        mock_document_service_dependencies["db_session"].commit.assert_called_once()
-        mock_document_service_dependencies["redis_client"].delete.assert_called_once_with(
-            f"document_{document.id}_is_paused"
-        )
-        recover_task.delay.assert_called_once_with(document.dataset_id, document.id)
-
-    def test_retry_document_indexing_success(self, mock_document_service_dependencies):
-        dataset_id = "dataset-123"
-        documents = [
-            DatasetServiceUnitDataFactory.create_document_mock(document_id="doc-1", indexing_status="error"),
-            DatasetServiceUnitDataFactory.create_document_mock(document_id="doc-2", indexing_status="error"),
-        ]
-        mock_document_service_dependencies["redis_client"].get.return_value = None
-
-        with patch("services.dataset_service.retry_document_indexing_task") as retry_task:
-            DocumentService.retry_document(dataset_id, documents)
-
-        assert all(document.indexing_status == "waiting" for document in documents)
-        assert mock_document_service_dependencies["db_session"].add.call_count == 2
-        assert mock_document_service_dependencies["db_session"].commit.call_count == 2
-        assert mock_document_service_dependencies["redis_client"].setex.call_count == 2
-        retry_task.delay.assert_called_once_with(dataset_id, ["doc-1", "doc-2"], "user-123")
-
 
 class TestDatasetCollectionBindingService:
     """Unit tests for dataset collection binding lookups and creation."""
 
-    def test_get_dataset_collection_binding_returns_existing_binding(self):
-        binding = SimpleNamespace(id="binding-1")
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalar.return_value = binding
-
-            result = DatasetCollectionBindingService.get_dataset_collection_binding("provider", "model")
-
-        assert result is binding
-        mock_db.session.add.assert_not_called()
-
-    def test_get_dataset_collection_binding_creates_binding_when_missing(self):
-        created_binding = SimpleNamespace(id="binding-2")
-
-        with (
-            patch("services.dataset_service.db") as mock_db,
-            patch("services.dataset_service.select"),
-            patch("services.dataset_service.DatasetCollectionBinding", return_value=created_binding) as binding_cls,
-            patch.object(Dataset, "gen_collection_name_by_id", return_value="generated-collection"),
-        ):
-            mock_db.session.scalar.return_value = None
-
-            result = DatasetCollectionBindingService.get_dataset_collection_binding("provider", "model", "dataset")
-
-        assert result is created_binding
-        binding_cls.assert_called_once_with(
-            provider_name="provider",
-            model_name="model",
-            collection_name="generated-collection",
-            type="dataset",
-        )
-        mock_db.session.add.assert_called_once_with(created_binding)
-        mock_db.session.commit.assert_called_once()
-
-    def test_get_dataset_collection_binding_by_id_and_type_raises_when_missing(self):
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalar.return_value = None
-
-            with pytest.raises(ValueError, match="Dataset collection binding not found"):
-                DatasetCollectionBindingService.get_dataset_collection_binding_by_id_and_type("binding-1")
-
-    def test_get_dataset_collection_binding_by_id_and_type_returns_binding(self):
-        binding = SimpleNamespace(id="binding-1")
-
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalar.return_value = binding
-
-            result = DatasetCollectionBindingService.get_dataset_collection_binding_by_id_and_type("binding-1")
-
-        assert result is binding
-
 
 class TestDatasetPermissionService:
     """Unit tests for dataset partial-member management helpers."""
 
-    def test_get_dataset_partial_member_list_returns_scalar_results(self):
-        with patch("services.dataset_service.db") as mock_db:
-            mock_db.session.scalars.return_value.all.return_value = ["user-1", "user-2"]
-
-            result = DatasetPermissionService.get_dataset_partial_member_list("dataset-1")
-
-        assert result == ["user-1", "user-2"]
-
-    def test_update_partial_member_list_replaces_permissions_and_commits(self):
-        with patch("services.dataset_service.db") as mock_db:
-            DatasetPermissionService.update_partial_member_list(
-                "tenant-1",
-                "dataset-1",
-                [{"user_id": "user-1"}, {"user_id": "user-2"}],
-            )
-
-        mock_db.session.execute.assert_called()
-        mock_db.session.add_all.assert_called_once()
-        mock_db.session.commit.assert_called_once()
-
     def test_update_partial_member_list_rolls_back_on_exception(self):
         with patch("services.dataset_service.db") as mock_db:
             mock_db.session.add_all.side_effect = RuntimeError("boom")
@@ -1777,13 +1285,6 @@ class TestDatasetPermissionService:
                 [{"user_id": "user-1"}],
             )
 
-    def test_clear_partial_member_list_deletes_permissions_and_commits(self):
-        with patch("services.dataset_service.db") as mock_db:
-            DatasetPermissionService.clear_partial_member_list("dataset-1")
-
-        mock_db.session.execute.assert_called()
-        mock_db.session.commit.assert_called_once()
-
     def test_clear_partial_member_list_rolls_back_on_exception(self):
         with patch("services.dataset_service.db") as mock_db:
             mock_db.session.execute.side_effect = RuntimeError("boom")

From 7de92c598f99452e76134e81590ffacac88a32e0 Mon Sep 17 00:00:00 2001
From: James <63717587+jamesrayammons@users.noreply.github.com>
Date: Tue, 14 Apr 2026 22:34:53 +0200
Subject: [PATCH 39/44] test: migrate schedule service mock tests to
 testcontainers (#35196)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../services/test_schedule_service.py         | 387 ++++++++++++++++++
 .../services/test_schedule_service.py         | 345 +---------------
 2 files changed, 390 insertions(+), 342 deletions(-)
 create mode 100644 api/tests/test_containers_integration_tests/services/test_schedule_service.py

diff --git a/api/tests/test_containers_integration_tests/services/test_schedule_service.py b/api/tests/test_containers_integration_tests/services/test_schedule_service.py
new file mode 100644
index 0000000000..87f3306258
--- /dev/null
+++ b/api/tests/test_containers_integration_tests/services/test_schedule_service.py
@@ -0,0 +1,387 @@
+"""Testcontainers integration tests for schedule service SQL-backed behavior."""
+
+from datetime import datetime
+from types import SimpleNamespace
+from uuid import uuid4
+
+import pytest
+from sqlalchemy import delete, select
+from sqlalchemy.orm import Session
+
+from core.workflow.nodes.trigger_schedule.entities import ScheduleConfig, SchedulePlanUpdate
+from core.workflow.nodes.trigger_schedule.exc import ScheduleNotFoundError
+from events.event_handlers.sync_workflow_schedule_when_app_published import sync_schedule_from_workflow
+from models.account import Account, Tenant, TenantAccountJoin, TenantAccountRole
+from models.trigger import WorkflowSchedulePlan
+from services.errors.account import AccountNotFoundError
+from services.trigger.schedule_service import ScheduleService
+
+
+class ScheduleServiceIntegrationFactory:
+    @staticmethod
+    def create_account_with_tenant(
+        db_session_with_containers: Session,
+        role: TenantAccountRole = TenantAccountRole.OWNER,
+    ) -> tuple[Account, Tenant]:
+        account = Account(
+            email=f"{uuid4()}@example.com",
+            name=f"user-{uuid4()}",
+            interface_language="en-US",
+            status="active",
+        )
+        tenant = Tenant(name=f"tenant-{uuid4()}", status="normal")
+        db_session_with_containers.add_all([account, tenant])
+        db_session_with_containers.flush()
+
+        join = TenantAccountJoin(
+            tenant_id=tenant.id,
+            account_id=account.id,
+            role=role,
+            current=True,
+        )
+        db_session_with_containers.add(join)
+        db_session_with_containers.commit()
+
+        account.current_tenant = tenant
+        return account, tenant
+
+    @staticmethod
+    def create_schedule_plan(
+        db_session_with_containers: Session,
+        *,
+        tenant_id: str,
+        app_id: str | None = None,
+        node_id: str = "start",
+        cron_expression: str = "30 10 * * *",
+        timezone: str = "UTC",
+        next_run_at: datetime | None = None,
+    ) -> WorkflowSchedulePlan:
+        schedule = WorkflowSchedulePlan(
+            tenant_id=tenant_id,
+            app_id=app_id or str(uuid4()),
+            node_id=node_id,
+            cron_expression=cron_expression,
+            timezone=timezone,
+            next_run_at=next_run_at,
+        )
+        db_session_with_containers.add(schedule)
+        db_session_with_containers.commit()
+        return schedule
+
+
+def _cron_workflow(
+    *,
+    node_id: str = "start",
+    cron_expression: str = "30 10 * * *",
+    timezone: str = "UTC",
+):
+    return SimpleNamespace(
+        graph_dict={
+            "nodes": [
+                {
+                    "id": node_id,
+                    "data": {
+                        "type": "trigger-schedule",
+                        "mode": "cron",
+                        "cron_expression": cron_expression,
+                        "timezone": timezone,
+                    },
+                }
+            ]
+        }
+    )
+
+
+def _no_schedule_workflow():
+    return SimpleNamespace(
+        graph_dict={
+            "nodes": [
+                {
+                    "id": "node-1",
+                    "data": {"type": "llm"},
+                }
+            ]
+        }
+    )
+
+
+class TestScheduleServiceIntegration:
+    def test_create_schedule_persists_schedule(self, db_session_with_containers: Session):
+        account, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        expected_next_run = datetime(2026, 1, 1, 10, 30, 0)
+        config = ScheduleConfig(
+            node_id="start",
+            cron_expression="30 10 * * *",
+            timezone="UTC",
+        )
+
+        with pytest.MonkeyPatch.context() as monkeypatch:
+            monkeypatch.setattr(
+                "services.trigger.schedule_service.calculate_next_run_at",
+                lambda *_args, **_kwargs: expected_next_run,
+            )
+            schedule = ScheduleService.create_schedule(
+                session=db_session_with_containers,
+                tenant_id=tenant.id,
+                app_id=str(uuid4()),
+                config=config,
+            )
+
+        persisted = db_session_with_containers.get(WorkflowSchedulePlan, schedule.id)
+        assert persisted is not None
+        assert persisted.tenant_id == tenant.id
+        assert persisted.node_id == "start"
+        assert persisted.cron_expression == "30 10 * * *"
+        assert persisted.timezone == "UTC"
+        assert persisted.next_run_at == expected_next_run
+
+    def test_update_schedule_updates_fields_and_recomputes_next_run(self, db_session_with_containers: Session):
+        _account, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        schedule = ScheduleServiceIntegrationFactory.create_schedule_plan(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            cron_expression="30 10 * * *",
+            timezone="UTC",
+        )
+        expected_next_run = datetime(2026, 1, 2, 12, 0, 0)
+
+        with pytest.MonkeyPatch.context() as monkeypatch:
+            monkeypatch.setattr(
+                "services.trigger.schedule_service.calculate_next_run_at",
+                lambda *_args, **_kwargs: expected_next_run,
+            )
+            updated = ScheduleService.update_schedule(
+                session=db_session_with_containers,
+                schedule_id=schedule.id,
+                updates=SchedulePlanUpdate(
+                    cron_expression="0 12 * * *",
+                    timezone="America/New_York",
+                ),
+            )
+
+        db_session_with_containers.refresh(updated)
+        assert updated.cron_expression == "0 12 * * *"
+        assert updated.timezone == "America/New_York"
+        assert updated.next_run_at == expected_next_run
+
+    def test_update_schedule_updates_only_node_id_without_recomputing_time(self, db_session_with_containers: Session):
+        _account, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        initial_next_run = datetime(2026, 1, 1, 10, 0, 0)
+        schedule = ScheduleServiceIntegrationFactory.create_schedule_plan(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            next_run_at=initial_next_run,
+        )
+
+        with pytest.MonkeyPatch.context() as monkeypatch:
+            calls: list[tuple] = []
+
+            def _track(*args, **kwargs):
+                calls.append((args, kwargs))
+                return datetime(2026, 1, 9, 10, 0, 0)
+
+            monkeypatch.setattr("services.trigger.schedule_service.calculate_next_run_at", _track)
+            updated = ScheduleService.update_schedule(
+                session=db_session_with_containers,
+                schedule_id=schedule.id,
+                updates=SchedulePlanUpdate(node_id="node-new"),
+            )
+
+        db_session_with_containers.refresh(updated)
+        assert updated.node_id == "node-new"
+        assert updated.next_run_at == initial_next_run
+        assert calls == []
+
+    def test_update_schedule_not_found_raises(self, db_session_with_containers: Session):
+        with pytest.raises(ScheduleNotFoundError, match="Schedule not found"):
+            ScheduleService.update_schedule(
+                session=db_session_with_containers,
+                schedule_id=str(uuid4()),
+                updates=SchedulePlanUpdate(node_id="node-new"),
+            )
+
+    def test_delete_schedule_removes_row(self, db_session_with_containers: Session):
+        _account, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        schedule = ScheduleServiceIntegrationFactory.create_schedule_plan(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+        )
+
+        ScheduleService.delete_schedule(
+            session=db_session_with_containers,
+            schedule_id=schedule.id,
+        )
+        db_session_with_containers.commit()
+
+        assert db_session_with_containers.get(WorkflowSchedulePlan, schedule.id) is None
+
+    def test_delete_schedule_not_found_raises(self, db_session_with_containers: Session):
+        with pytest.raises(ScheduleNotFoundError, match="Schedule not found"):
+            ScheduleService.delete_schedule(
+                session=db_session_with_containers,
+                schedule_id=str(uuid4()),
+            )
+
+    def test_get_tenant_owner_returns_owner_account(self, db_session_with_containers: Session):
+        owner, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(
+            db_session_with_containers,
+            role=TenantAccountRole.OWNER,
+        )
+
+        result = ScheduleService.get_tenant_owner(
+            session=db_session_with_containers,
+            tenant_id=tenant.id,
+        )
+
+        assert result.id == owner.id
+
+    def test_get_tenant_owner_falls_back_to_admin(self, db_session_with_containers: Session):
+        admin, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(
+            db_session_with_containers,
+            role=TenantAccountRole.ADMIN,
+        )
+
+        result = ScheduleService.get_tenant_owner(
+            session=db_session_with_containers,
+            tenant_id=tenant.id,
+        )
+
+        assert result.id == admin.id
+
+    def test_get_tenant_owner_raises_when_account_record_missing(self, db_session_with_containers: Session):
+        _account, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        db_session_with_containers.execute(delete(TenantAccountJoin))
+        missing_account_id = str(uuid4())
+        join = TenantAccountJoin(
+            tenant_id=tenant.id,
+            account_id=missing_account_id,
+            role=TenantAccountRole.OWNER,
+            current=True,
+        )
+        db_session_with_containers.add(join)
+        db_session_with_containers.commit()
+
+        with pytest.raises(AccountNotFoundError, match=missing_account_id):
+            ScheduleService.get_tenant_owner(session=db_session_with_containers, tenant_id=tenant.id)
+
+    def test_get_tenant_owner_raises_when_no_owner_or_admin_found(self, db_session_with_containers: Session):
+        _account, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        db_session_with_containers.execute(delete(TenantAccountJoin))
+        db_session_with_containers.commit()
+
+        with pytest.raises(AccountNotFoundError, match=tenant.id):
+            ScheduleService.get_tenant_owner(session=db_session_with_containers, tenant_id=tenant.id)
+
+    def test_update_next_run_at_updates_persisted_value(self, db_session_with_containers: Session):
+        _account, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        schedule = ScheduleServiceIntegrationFactory.create_schedule_plan(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+        )
+        expected_next_run = datetime(2026, 1, 3, 10, 30, 0)
+
+        with pytest.MonkeyPatch.context() as monkeypatch:
+            monkeypatch.setattr(
+                "services.trigger.schedule_service.calculate_next_run_at",
+                lambda *_args, **_kwargs: expected_next_run,
+            )
+            result = ScheduleService.update_next_run_at(
+                session=db_session_with_containers,
+                schedule_id=schedule.id,
+            )
+
+        db_session_with_containers.refresh(schedule)
+        assert result == expected_next_run
+        assert schedule.next_run_at == expected_next_run
+
+    def test_update_next_run_at_raises_when_schedule_not_found(self, db_session_with_containers: Session):
+        with pytest.raises(ScheduleNotFoundError, match="Schedule not found"):
+            ScheduleService.update_next_run_at(
+                session=db_session_with_containers,
+                schedule_id=str(uuid4()),
+            )
+
+
+class TestSyncScheduleFromWorkflowIntegration:
+    def test_sync_schedule_create_new(self, db_session_with_containers: Session):
+        _account, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        app_id = str(uuid4())
+        expected_next_run = datetime(2026, 1, 4, 10, 30, 0)
+
+        with pytest.MonkeyPatch.context() as monkeypatch:
+            monkeypatch.setattr(
+                "services.trigger.schedule_service.calculate_next_run_at",
+                lambda *_args, **_kwargs: expected_next_run,
+            )
+            result = sync_schedule_from_workflow(
+                tenant_id=tenant.id,
+                app_id=app_id,
+                workflow=_cron_workflow(),
+            )
+
+        assert result is not None
+        persisted = db_session_with_containers.execute(
+            select(WorkflowSchedulePlan).where(WorkflowSchedulePlan.app_id == app_id)
+        ).scalar_one()
+        assert persisted.node_id == "start"
+        assert persisted.cron_expression == "30 10 * * *"
+        assert persisted.timezone == "UTC"
+        assert persisted.next_run_at == expected_next_run
+
+    def test_sync_schedule_update_existing(self, db_session_with_containers: Session):
+        _account, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        app_id = str(uuid4())
+        existing = ScheduleServiceIntegrationFactory.create_schedule_plan(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            app_id=app_id,
+            node_id="old-start",
+            cron_expression="30 10 * * *",
+            timezone="UTC",
+        )
+        existing_id = existing.id
+        expected_next_run = datetime(2026, 1, 5, 12, 0, 0)
+
+        with pytest.MonkeyPatch.context() as monkeypatch:
+            monkeypatch.setattr(
+                "services.trigger.schedule_service.calculate_next_run_at",
+                lambda *_args, **_kwargs: expected_next_run,
+            )
+            result = sync_schedule_from_workflow(
+                tenant_id=tenant.id,
+                app_id=app_id,
+                workflow=_cron_workflow(
+                    node_id="start",
+                    cron_expression="0 12 * * *",
+                    timezone="America/New_York",
+                ),
+            )
+
+        assert result is not None
+        db_session_with_containers.expire_all()
+        persisted = db_session_with_containers.get(WorkflowSchedulePlan, existing_id)
+        assert persisted is not None
+        assert persisted.node_id == "start"
+        assert persisted.cron_expression == "0 12 * * *"
+        assert persisted.timezone == "America/New_York"
+        assert persisted.next_run_at == expected_next_run
+
+    def test_sync_schedule_remove_when_no_config(self, db_session_with_containers: Session):
+        _account, tenant = ScheduleServiceIntegrationFactory.create_account_with_tenant(db_session_with_containers)
+        app_id = str(uuid4())
+        existing = ScheduleServiceIntegrationFactory.create_schedule_plan(
+            db_session_with_containers,
+            tenant_id=tenant.id,
+            app_id=app_id,
+        )
+        existing_id = existing.id
+
+        result = sync_schedule_from_workflow(
+            tenant_id=tenant.id,
+            app_id=app_id,
+            workflow=_no_schedule_workflow(),
+        )
+
+        assert result is None
+        db_session_with_containers.expire_all()
+        assert db_session_with_containers.get(WorkflowSchedulePlan, existing_id) is None
diff --git a/api/tests/unit_tests/services/test_schedule_service.py b/api/tests/unit_tests/services/test_schedule_service.py
index 334062242b..0f8f7ffab5 100644
--- a/api/tests/unit_tests/services/test_schedule_service.py
+++ b/api/tests/unit_tests/services/test_schedule_service.py
@@ -2,23 +2,16 @@ import unittest
 from datetime import UTC, datetime
 from types import SimpleNamespace
 from typing import Any, cast
-from unittest.mock import MagicMock, Mock, patch
+from unittest.mock import MagicMock, Mock
 
 import pytest
 from sqlalchemy.orm import Session
 
 from core.trigger.constants import TRIGGER_SCHEDULE_NODE_TYPE
-from core.workflow.nodes.trigger_schedule.entities import ScheduleConfig, SchedulePlanUpdate, VisualConfig
-from core.workflow.nodes.trigger_schedule.exc import ScheduleConfigError, ScheduleNotFoundError
-from events.event_handlers.sync_workflow_schedule_when_app_published import (
-    sync_schedule_from_workflow,
-)
+from core.workflow.nodes.trigger_schedule.entities import VisualConfig
+from core.workflow.nodes.trigger_schedule.exc import ScheduleConfigError
 from libs.schedule_utils import calculate_next_run_at, convert_12h_to_24h
-from models.account import Account, TenantAccountJoin
-from models.trigger import WorkflowSchedulePlan
 from models.workflow import Workflow
-from services.errors.account import AccountNotFoundError
-from services.trigger import schedule_service as service_module
 from services.trigger.schedule_service import ScheduleService
 
 
@@ -83,180 +76,6 @@ class TestScheduleService(unittest.TestCase):
         with pytest.raises(UnknownTimeZoneError):
             calculate_next_run_at(cron_expr, timezone)
 
-    @patch("libs.schedule_utils.calculate_next_run_at")
-    def test_create_schedule(self, mock_calculate_next_run):
-        """Test creating a new schedule."""
-        mock_session = MagicMock(spec=Session)
-        mock_calculate_next_run.return_value = datetime(2025, 8, 30, 10, 30, 0, tzinfo=UTC)
-
-        config = ScheduleConfig(
-            node_id="start",
-            cron_expression="30 10 * * *",
-            timezone="UTC",
-        )
-
-        schedule = ScheduleService.create_schedule(
-            session=mock_session,
-            tenant_id="test-tenant",
-            app_id="test-app",
-            config=config,
-        )
-
-        assert schedule is not None
-        assert schedule.tenant_id == "test-tenant"
-        assert schedule.app_id == "test-app"
-        assert schedule.node_id == "start"
-        assert schedule.cron_expression == "30 10 * * *"
-        assert schedule.timezone == "UTC"
-        assert schedule.next_run_at is not None
-        mock_session.add.assert_called_once()
-        mock_session.flush.assert_called_once()
-
-    @patch("services.trigger.schedule_service.calculate_next_run_at")
-    def test_update_schedule(self, mock_calculate_next_run):
-        """Test updating an existing schedule."""
-        mock_session = MagicMock(spec=Session)
-        mock_schedule = Mock(spec=WorkflowSchedulePlan)
-        mock_schedule.cron_expression = "0 12 * * *"
-        mock_schedule.timezone = "America/New_York"
-        mock_session.get.return_value = mock_schedule
-        mock_calculate_next_run.return_value = datetime(2025, 8, 30, 12, 0, 0, tzinfo=UTC)
-
-        updates = SchedulePlanUpdate(
-            cron_expression="0 12 * * *",
-            timezone="America/New_York",
-        )
-
-        result = ScheduleService.update_schedule(
-            session=mock_session,
-            schedule_id="test-schedule-id",
-            updates=updates,
-        )
-
-        assert result is not None
-        assert result.cron_expression == "0 12 * * *"
-        assert result.timezone == "America/New_York"
-        mock_calculate_next_run.assert_called_once()
-        mock_session.flush.assert_called_once()
-
-    def test_update_schedule_not_found(self):
-        """Test updating a non-existent schedule raises exception."""
-        from core.workflow.nodes.trigger_schedule.exc import ScheduleNotFoundError
-
-        mock_session = MagicMock(spec=Session)
-        mock_session.get.return_value = None
-
-        updates = SchedulePlanUpdate(
-            cron_expression="0 12 * * *",
-        )
-
-        with pytest.raises(ScheduleNotFoundError) as context:
-            ScheduleService.update_schedule(
-                session=mock_session,
-                schedule_id="non-existent-id",
-                updates=updates,
-            )
-
-        assert "Schedule not found: non-existent-id" in str(context.value)
-        mock_session.flush.assert_not_called()
-
-    def test_delete_schedule(self):
-        """Test deleting a schedule."""
-        mock_session = MagicMock(spec=Session)
-        mock_schedule = Mock(spec=WorkflowSchedulePlan)
-        mock_session.get.return_value = mock_schedule
-
-        # Should not raise exception and complete successfully
-        ScheduleService.delete_schedule(
-            session=mock_session,
-            schedule_id="test-schedule-id",
-        )
-
-        mock_session.delete.assert_called_once_with(mock_schedule)
-        mock_session.flush.assert_called_once()
-
-    def test_delete_schedule_not_found(self):
-        """Test deleting a non-existent schedule raises exception."""
-        from core.workflow.nodes.trigger_schedule.exc import ScheduleNotFoundError
-
-        mock_session = MagicMock(spec=Session)
-        mock_session.get.return_value = None
-
-        # Should raise ScheduleNotFoundError
-        with pytest.raises(ScheduleNotFoundError) as context:
-            ScheduleService.delete_schedule(
-                session=mock_session,
-                schedule_id="non-existent-id",
-            )
-
-        assert "Schedule not found: non-existent-id" in str(context.value)
-        mock_session.delete.assert_not_called()
-
-    @patch("services.trigger.schedule_service.select")
-    def test_get_tenant_owner(self, mock_select):
-        """Test getting tenant owner account."""
-        mock_session = MagicMock(spec=Session)
-        mock_account = Mock(spec=Account)
-        mock_account.id = "owner-account-id"
-
-        # Mock owner query
-        mock_owner_result = Mock(spec=TenantAccountJoin)
-        mock_owner_result.account_id = "owner-account-id"
-
-        mock_session.execute.return_value.scalar_one_or_none.return_value = mock_owner_result
-        mock_session.get.return_value = mock_account
-
-        result = ScheduleService.get_tenant_owner(
-            session=mock_session,
-            tenant_id="test-tenant",
-        )
-
-        assert result is not None
-        assert result.id == "owner-account-id"
-
-    @patch("services.trigger.schedule_service.select")
-    def test_get_tenant_owner_fallback_to_admin(self, mock_select):
-        """Test getting tenant owner falls back to admin if no owner."""
-        mock_session = MagicMock(spec=Session)
-        mock_account = Mock(spec=Account)
-        mock_account.id = "admin-account-id"
-
-        # Mock admin query (owner returns None)
-        mock_admin_result = Mock(spec=TenantAccountJoin)
-        mock_admin_result.account_id = "admin-account-id"
-
-        mock_session.execute.return_value.scalar_one_or_none.side_effect = [None, mock_admin_result]
-        mock_session.get.return_value = mock_account
-
-        result = ScheduleService.get_tenant_owner(
-            session=mock_session,
-            tenant_id="test-tenant",
-        )
-
-        assert result is not None
-        assert result.id == "admin-account-id"
-
-    @patch("services.trigger.schedule_service.calculate_next_run_at")
-    def test_update_next_run_at(self, mock_calculate_next_run):
-        """Test updating next run time after schedule triggered."""
-        mock_session = MagicMock(spec=Session)
-        mock_schedule = Mock(spec=WorkflowSchedulePlan)
-        mock_schedule.cron_expression = "30 10 * * *"
-        mock_schedule.timezone = "UTC"
-        mock_session.get.return_value = mock_schedule
-
-        next_time = datetime(2025, 8, 31, 10, 30, 0, tzinfo=UTC)
-        mock_calculate_next_run.return_value = next_time
-
-        result = ScheduleService.update_next_run_at(
-            session=mock_session,
-            schedule_id="test-schedule-id",
-        )
-
-        assert result == next_time
-        assert mock_schedule.next_run_at == next_time
-        mock_session.flush.assert_called_once()
-
 
 class TestVisualToCron(unittest.TestCase):
     """Test cases for visual configuration to cron conversion."""
@@ -678,108 +497,6 @@ class TestScheduleWithTimezone(unittest.TestCase):
         assert summer_next.hour == 14
 
 
-class TestSyncScheduleFromWorkflow(unittest.TestCase):
-    """Test cases for syncing schedule from workflow."""
-
-    @patch("events.event_handlers.sync_workflow_schedule_when_app_published.db")
-    @patch("events.event_handlers.sync_workflow_schedule_when_app_published.ScheduleService")
-    @patch("events.event_handlers.sync_workflow_schedule_when_app_published.select")
-    def test_sync_schedule_create_new(self, mock_select, mock_service, mock_db):
-        """Test creating new schedule when none exists."""
-        mock_session = MagicMock()
-        mock_db.engine = MagicMock()
-        mock_session.__enter__ = MagicMock(return_value=mock_session)
-        mock_session.__exit__ = MagicMock(return_value=None)
-        sessionmaker = MagicMock(return_value=MagicMock(begin=MagicMock(return_value=mock_session)))
-        with patch("events.event_handlers.sync_workflow_schedule_when_app_published.sessionmaker", sessionmaker):
-            mock_session.scalar.return_value = None  # No existing plan
-
-            # Mock extract_schedule_config to return a ScheduleConfig object
-            mock_config = Mock(spec=ScheduleConfig)
-            mock_config.node_id = "start"
-            mock_config.cron_expression = "30 10 * * *"
-            mock_config.timezone = "UTC"
-            mock_service.extract_schedule_config.return_value = mock_config
-
-            mock_new_plan = Mock(spec=WorkflowSchedulePlan)
-            mock_service.create_schedule.return_value = mock_new_plan
-
-            workflow = Mock(spec=Workflow)
-            result = sync_schedule_from_workflow("tenant-id", "app-id", workflow)
-
-            assert result == mock_new_plan
-            mock_service.create_schedule.assert_called_once()
-            mock_session.commit.assert_not_called()
-
-    @patch("events.event_handlers.sync_workflow_schedule_when_app_published.db")
-    @patch("events.event_handlers.sync_workflow_schedule_when_app_published.ScheduleService")
-    @patch("events.event_handlers.sync_workflow_schedule_when_app_published.select")
-    def test_sync_schedule_update_existing(self, mock_select, mock_service, mock_db):
-        """Test updating existing schedule."""
-        mock_session = MagicMock()
-        mock_db.engine = MagicMock()
-        mock_session.__enter__ = MagicMock(return_value=mock_session)
-        mock_session.__exit__ = MagicMock(return_value=None)
-        sessionmaker = MagicMock(return_value=MagicMock(begin=MagicMock(return_value=mock_session)))
-
-        with patch("events.event_handlers.sync_workflow_schedule_when_app_published.sessionmaker", sessionmaker):
-            mock_existing_plan = Mock(spec=WorkflowSchedulePlan)
-            mock_existing_plan.id = "existing-plan-id"
-            mock_session.scalar.return_value = mock_existing_plan
-
-            # Mock extract_schedule_config to return a ScheduleConfig object
-            mock_config = Mock(spec=ScheduleConfig)
-            mock_config.node_id = "start"
-            mock_config.cron_expression = "0 12 * * *"
-            mock_config.timezone = "America/New_York"
-            mock_service.extract_schedule_config.return_value = mock_config
-
-            mock_updated_plan = Mock(spec=WorkflowSchedulePlan)
-            mock_service.update_schedule.return_value = mock_updated_plan
-
-            workflow = Mock(spec=Workflow)
-            result = sync_schedule_from_workflow("tenant-id", "app-id", workflow)
-
-            assert result == mock_updated_plan
-            mock_service.update_schedule.assert_called_once()
-            # Verify the arguments passed to update_schedule
-            call_args = mock_service.update_schedule.call_args
-            assert call_args.kwargs["session"] == mock_session
-            assert call_args.kwargs["schedule_id"] == "existing-plan-id"
-            updates_obj = call_args.kwargs["updates"]
-            assert isinstance(updates_obj, SchedulePlanUpdate)
-            assert updates_obj.node_id == "start"
-            assert updates_obj.cron_expression == "0 12 * * *"
-            assert updates_obj.timezone == "America/New_York"
-            mock_session.commit.assert_not_called()
-
-    @patch("events.event_handlers.sync_workflow_schedule_when_app_published.db")
-    @patch("events.event_handlers.sync_workflow_schedule_when_app_published.ScheduleService")
-    @patch("events.event_handlers.sync_workflow_schedule_when_app_published.select")
-    def test_sync_schedule_remove_when_no_config(self, mock_select, mock_service, mock_db):
-        """Test removing schedule when no schedule config in workflow."""
-        mock_session = MagicMock()
-        mock_db.engine = MagicMock()
-        mock_session.__enter__ = MagicMock(return_value=mock_session)
-        mock_session.__exit__ = MagicMock(return_value=None)
-        sessionmaker = MagicMock(return_value=MagicMock(begin=MagicMock(return_value=mock_session)))
-
-        with patch("events.event_handlers.sync_workflow_schedule_when_app_published.sessionmaker", sessionmaker):
-            mock_existing_plan = Mock(spec=WorkflowSchedulePlan)
-            mock_existing_plan.id = "existing-plan-id"
-            mock_session.scalar.return_value = mock_existing_plan
-
-            mock_service.extract_schedule_config.return_value = None  # No schedule config
-
-            workflow = Mock(spec=Workflow)
-            result = sync_schedule_from_workflow("tenant-id", "app-id", workflow)
-
-            assert result is None
-            # Now using ScheduleService.delete_schedule instead of session.delete
-            mock_service.delete_schedule.assert_called_once_with(session=mock_session, schedule_id="existing-plan-id")
-            mock_session.commit.assert_not_called()
-
-
 @pytest.fixture
 def session_mock() -> MagicMock:
     return MagicMock(spec=Session)
@@ -789,62 +506,6 @@ def _workflow(**kwargs: Any) -> Workflow:
     return cast(Workflow, SimpleNamespace(**kwargs))
 
 
-def test_update_schedule_should_update_only_node_id_without_recomputing_time(
-    session_mock: MagicMock,
-    monkeypatch: pytest.MonkeyPatch,
-) -> None:
-    # Arrange
-    schedule = MagicMock(spec=WorkflowSchedulePlan)
-    schedule.cron_expression = "0 10 * * *"
-    schedule.timezone = "UTC"
-    session_mock.get.return_value = schedule
-
-    next_run_mock = MagicMock(return_value=datetime(2026, 1, 1, 10, 0, tzinfo=UTC))
-    monkeypatch.setattr(service_module, "calculate_next_run_at", next_run_mock)
-
-    # Act
-    result = ScheduleService.update_schedule(
-        session=session_mock,
-        schedule_id="schedule-1",
-        updates=SchedulePlanUpdate(node_id="node-new"),
-    )
-
-    # Assert
-    assert result is schedule
-    assert schedule.node_id == "node-new"
-    next_run_mock.assert_not_called()
-    session_mock.flush.assert_called_once()
-
-
-def test_get_tenant_owner_should_raise_when_account_record_missing(session_mock: MagicMock) -> None:
-    # Arrange
-    join = SimpleNamespace(account_id="account-404")
-    session_mock.execute.return_value.scalar_one_or_none.return_value = join
-    session_mock.get.return_value = None
-
-    # Act / Assert
-    with pytest.raises(AccountNotFoundError, match="Account not found: account-404"):
-        ScheduleService.get_tenant_owner(session=session_mock, tenant_id="tenant-1")
-
-
-def test_get_tenant_owner_should_raise_when_no_owner_or_admin_found(session_mock: MagicMock) -> None:
-    # Arrange
-    session_mock.execute.return_value.scalar_one_or_none.side_effect = [None, None]
-
-    # Act / Assert
-    with pytest.raises(AccountNotFoundError, match="Account not found for tenant: tenant-1"):
-        ScheduleService.get_tenant_owner(session=session_mock, tenant_id="tenant-1")
-
-
-def test_update_next_run_at_should_raise_when_schedule_not_found(session_mock: MagicMock) -> None:
-    # Arrange
-    session_mock.get.return_value = None
-
-    # Act / Assert
-    with pytest.raises(ScheduleNotFoundError, match="Schedule not found: schedule-1"):
-        ScheduleService.update_next_run_at(session=session_mock, schedule_id="schedule-1")
-
-
 def test_to_schedule_config_should_build_from_cron_mode() -> None:
     # Arrange
     node_config: dict[str, Any] = {

From b77801ece9e24987f7df0958dc7c07329935a478 Mon Sep 17 00:00:00 2001
From: James <63717587+jamesrayammons@users.noreply.github.com>
Date: Wed, 15 Apr 2026 04:19:42 +0200
Subject: [PATCH 40/44] test: remove legacy code executor integration test
 (#35224)

---
 .../nodes/code_executor/test_code_executor.py         | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 api/tests/integration_tests/workflow/nodes/code_executor/test_code_executor.py

diff --git a/api/tests/integration_tests/workflow/nodes/code_executor/test_code_executor.py b/api/tests/integration_tests/workflow/nodes/code_executor/test_code_executor.py
deleted file mode 100644
index 487178ff58..0000000000
--- a/api/tests/integration_tests/workflow/nodes/code_executor/test_code_executor.py
+++ /dev/null
@@ -1,11 +0,0 @@
-import pytest
-
-from core.helper.code_executor.code_executor import CodeExecutionError, CodeExecutor
-
-CODE_LANGUAGE = "unsupported_language"
-
-
-def test_unsupported_with_code_template():
-    with pytest.raises(CodeExecutionError) as e:
-        CodeExecutor.execute_workflow_code_template(language=CODE_LANGUAGE, code="", inputs={})
-    assert str(e.value) == f"Unsupported language {CODE_LANGUAGE}"

From 5bc0f9513b0271c6c8fb50cbf9f4ae29bdfb5beb Mon Sep 17 00:00:00 2001
From: James <63717587+jamesrayammons@users.noreply.github.com>
Date: Wed, 15 Apr 2026 04:20:06 +0200
Subject: [PATCH 41/44] test: remove legacy python3 code executor integration
 test (#35223)

---
 .../nodes/code_executor/test_code_python3.py  | 36 -------------------
 1 file changed, 36 deletions(-)
 delete mode 100644 api/tests/integration_tests/workflow/nodes/code_executor/test_code_python3.py

diff --git a/api/tests/integration_tests/workflow/nodes/code_executor/test_code_python3.py b/api/tests/integration_tests/workflow/nodes/code_executor/test_code_python3.py
deleted file mode 100644
index 25af312afa..0000000000
--- a/api/tests/integration_tests/workflow/nodes/code_executor/test_code_python3.py
+++ /dev/null
@@ -1,36 +0,0 @@
-from textwrap import dedent
-
-from core.helper.code_executor.code_executor import CodeExecutor, CodeLanguage
-from core.helper.code_executor.python3.python3_code_provider import Python3CodeProvider
-from core.helper.code_executor.python3.python3_transformer import Python3TemplateTransformer
-
-CODE_LANGUAGE = CodeLanguage.PYTHON3
-
-
-def test_python3_plain():
-    code = 'print("Hello World")'
-    result = CodeExecutor.execute_code(language=CODE_LANGUAGE, preload="", code=code)
-    assert result == "Hello World\n"
-
-
-def test_python3_json():
-    code = dedent("""
-    import json
-    print(json.dumps({'Hello': 'World'}))
-    """)
-    result = CodeExecutor.execute_code(language=CODE_LANGUAGE, preload="", code=code)
-    assert result == '{"Hello": "World"}\n'
-
-
-def test_python3_with_code_template():
-    result = CodeExecutor.execute_workflow_code_template(
-        language=CODE_LANGUAGE, code=Python3CodeProvider.get_default_code(), inputs={"arg1": "Hello", "arg2": "World"}
-    )
-    assert result == {"result": "HelloWorld"}
-
-
-def test_python3_get_runner_script():
-    runner_script = Python3TemplateTransformer.get_runner_script()
-    assert runner_script.count(Python3TemplateTransformer._code_placeholder) == 1
-    assert runner_script.count(Python3TemplateTransformer._inputs_placeholder) == 1
-    assert runner_script.count(Python3TemplateTransformer._result_tag) == 2

From 7a880ae60c7c1251a0116d733a74a60cdd0ed902 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Wed, 15 Apr 2026 12:43:22 +0800
Subject: [PATCH 42/44] fix: import DSL and copy app not work (#35239)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 api/controllers/console/app/app.py            |  13 +-
 api/controllers/console/app/app_import.py     |  20 ++-
 api/controllers/inner_api/app/dsl.py          |   8 +-
 .../console/app/test_app_import_api.py        |  50 +++++++
 .../console/app/test_app_import_api.py        | 139 ++++++++++++++++++
 .../controllers/inner_api/app/test_dsl.py     |  18 ++-
 6 files changed, 231 insertions(+), 17 deletions(-)
 create mode 100644 api/tests/unit_tests/controllers/console/app/test_app_import_api.py

diff --git a/api/controllers/console/app/app.py b/api/controllers/console/app/app.py
index 75569eb596..ac0682486b 100644
--- a/api/controllers/console/app/app.py
+++ b/api/controllers/console/app/app.py
@@ -8,7 +8,7 @@ from flask_restx import Resource
 from graphon.enums import WorkflowExecutionStatus
 from pydantic import AliasChoices, BaseModel, Field, computed_field, field_validator
 from sqlalchemy import select
-from sqlalchemy.orm import sessionmaker
+from sqlalchemy.orm import Session
 from werkzeug.exceptions import BadRequest
 
 from controllers.common.helpers import FileInfo
@@ -37,7 +37,7 @@ from models.model import IconType
 from services.app_dsl_service import AppDslService
 from services.app_service import AppService
 from services.enterprise.enterprise_service import EnterpriseService
-from services.entities.dsl_entities import ImportMode
+from services.entities.dsl_entities import ImportMode, ImportStatus
 from services.entities.knowledge_entities.knowledge_entities import (
     DataSource,
     InfoList,
@@ -623,7 +623,7 @@ class AppCopyApi(Resource):
 
         args = CopyAppPayload.model_validate(console_ns.payload or {})
 
-        with sessionmaker(db.engine, expire_on_commit=False).begin() as session:
+        with Session(db.engine, expire_on_commit=False) as session:
             import_service = AppDslService(session)
             yaml_content = import_service.export_dsl(app_model=app_model, include_secret=True)
             result = import_service.import_app(
@@ -636,6 +636,13 @@ class AppCopyApi(Resource):
                 icon=args.icon,
                 icon_background=args.icon_background,
             )
+            if result.status == ImportStatus.FAILED:
+                session.rollback()
+                return result.model_dump(mode="json"), 400
+            if result.status == ImportStatus.PENDING:
+                session.rollback()
+                return result.model_dump(mode="json"), 202
+            session.commit()
 
             # Inherit web app permission from original app
             if result.app_id and FeatureService.get_system_features().webapp_auth.enabled:
diff --git a/api/controllers/console/app/app_import.py b/api/controllers/console/app/app_import.py
index 80bd7d1d8d..e91dc9cfe5 100644
--- a/api/controllers/console/app/app_import.py
+++ b/api/controllers/console/app/app_import.py
@@ -1,6 +1,6 @@
 from flask_restx import Resource
 from pydantic import BaseModel, Field
-from sqlalchemy.orm import sessionmaker
+from sqlalchemy.orm import Session
 
 from controllers.common.schema import register_schema_models
 from controllers.console.app.wraps import get_app_model
@@ -52,8 +52,9 @@ class AppImportApi(Resource):
         current_user, _ = current_account_with_tenant()
         args = AppImportPayload.model_validate(console_ns.payload)
 
-        # Create service with session
-        with sessionmaker(db.engine).begin() as session:
+        # AppDslService performs internal commits for some creation paths, so use a plain
+        # Session here instead of nesting it inside sessionmaker(...).begin().
+        with Session(db.engine, expire_on_commit=False) as session:
             import_service = AppDslService(session)
             # Import app
             account = current_user
@@ -69,6 +70,10 @@ class AppImportApi(Resource):
                 icon_background=args.icon_background,
                 app_id=args.app_id,
             )
+            if result.status == ImportStatus.FAILED:
+                session.rollback()
+            else:
+                session.commit()
         if result.app_id and FeatureService.get_system_features().webapp_auth.enabled:
             # update web app setting as private
             EnterpriseService.WebAppAuth.update_app_access_mode(result.app_id, "private")
@@ -95,12 +100,15 @@ class AppImportConfirmApi(Resource):
         # Check user role first
         current_user, _ = current_account_with_tenant()
 
-        # Create service with session
-        with sessionmaker(db.engine).begin() as session:
+        with Session(db.engine, expire_on_commit=False) as session:
             import_service = AppDslService(session)
             # Confirm import
             account = current_user
             result = import_service.confirm_import(import_id=import_id, account=account)
+            if result.status == ImportStatus.FAILED:
+                session.rollback()
+            else:
+                session.commit()
 
         # Return appropriate status code based on result
         if result.status == ImportStatus.FAILED:
@@ -117,7 +125,7 @@ class AppImportCheckDependenciesApi(Resource):
     @account_initialization_required
     @edit_permission_required
     def get(self, app_model: App):
-        with sessionmaker(db.engine).begin() as session:
+        with Session(db.engine, expire_on_commit=False) as session:
             import_service = AppDslService(session)
             result = import_service.check_dependencies(app_model=app_model)
 
diff --git a/api/controllers/inner_api/app/dsl.py b/api/controllers/inner_api/app/dsl.py
index 6c15f9aa8b..915a11dcdd 100644
--- a/api/controllers/inner_api/app/dsl.py
+++ b/api/controllers/inner_api/app/dsl.py
@@ -9,7 +9,7 @@ from flask import request
 from flask_restx import Resource
 from pydantic import BaseModel, Field
 from sqlalchemy import select
-from sqlalchemy.orm import sessionmaker
+from sqlalchemy.orm import Session
 
 from controllers.common.schema import register_schema_model
 from controllers.console.wraps import setup_required
@@ -56,7 +56,7 @@ class EnterpriseAppDSLImport(Resource):
 
         account.set_tenant_id(workspace_id)
 
-        with sessionmaker(db.engine).begin() as session:
+        with Session(db.engine, expire_on_commit=False) as session:
             dsl_service = AppDslService(session)
             result = dsl_service.import_app(
                 account=account,
@@ -65,6 +65,10 @@ class EnterpriseAppDSLImport(Resource):
                 name=args.name,
                 description=args.description,
             )
+            if result.status == ImportStatus.FAILED:
+                session.rollback()
+            else:
+                session.commit()
 
         if result.status == ImportStatus.FAILED:
             return result.model_dump(mode="json"), 400
diff --git a/api/tests/test_containers_integration_tests/controllers/console/app/test_app_import_api.py b/api/tests/test_containers_integration_tests/controllers/console/app/test_app_import_api.py
index d8c6821f8d..25d19cf35a 100644
--- a/api/tests/test_containers_integration_tests/controllers/console/app/test_app_import_api.py
+++ b/api/tests/test_containers_integration_tests/controllers/console/app/test_app_import_api.py
@@ -96,6 +96,56 @@ class TestAppImportApi:
         assert status == 200
         assert response["status"] == ImportStatus.COMPLETED
 
+    def test_import_post_commits_session_on_success(self, app, monkeypatch: pytest.MonkeyPatch) -> None:
+        api = app_import_module.AppImportApi()
+        method = _unwrap(api.post)
+
+        _install_features(monkeypatch, enabled=False)
+        monkeypatch.setattr(
+            app_import_module.AppDslService,
+            "import_app",
+            lambda *_args, **_kwargs: _Result(ImportStatus.COMPLETED, app_id="app-123"),
+        )
+        monkeypatch.setattr(app_import_module, "current_account_with_tenant", lambda: (SimpleNamespace(id="u1"), "t1"))
+
+        fake_session = MagicMock()
+        fake_session.__enter__.return_value = fake_session
+        fake_session.__exit__.return_value = None
+        monkeypatch.setattr(app_import_module, "Session", lambda *_args, **_kwargs: fake_session)
+
+        with app.test_request_context("/console/api/apps/imports", method="POST", json={"mode": "yaml-content"}):
+            response, status = method()
+
+        fake_session.commit.assert_called_once_with()
+        fake_session.rollback.assert_not_called()
+        assert status == 200
+        assert response["status"] == ImportStatus.COMPLETED
+
+    def test_import_post_rolls_back_session_on_failure(self, app, monkeypatch: pytest.MonkeyPatch) -> None:
+        api = app_import_module.AppImportApi()
+        method = _unwrap(api.post)
+
+        _install_features(monkeypatch, enabled=False)
+        monkeypatch.setattr(
+            app_import_module.AppDslService,
+            "import_app",
+            lambda *_args, **_kwargs: _Result(ImportStatus.FAILED, app_id=None),
+        )
+        monkeypatch.setattr(app_import_module, "current_account_with_tenant", lambda: (SimpleNamespace(id="u1"), "t1"))
+
+        fake_session = MagicMock()
+        fake_session.__enter__.return_value = fake_session
+        fake_session.__exit__.return_value = None
+        monkeypatch.setattr(app_import_module, "Session", lambda *_args, **_kwargs: fake_session)
+
+        with app.test_request_context("/console/api/apps/imports", method="POST", json={"mode": "yaml-content"}):
+            response, status = method()
+
+        fake_session.rollback.assert_called_once_with()
+        fake_session.commit.assert_not_called()
+        assert status == 400
+        assert response["status"] == ImportStatus.FAILED
+
 
 class TestAppImportConfirmApi:
     @pytest.fixture
diff --git a/api/tests/unit_tests/controllers/console/app/test_app_import_api.py b/api/tests/unit_tests/controllers/console/app/test_app_import_api.py
new file mode 100644
index 0000000000..9c4678aed3
--- /dev/null
+++ b/api/tests/unit_tests/controllers/console/app/test_app_import_api.py
@@ -0,0 +1,139 @@
+"""Unit tests for console app import endpoints."""
+
+from __future__ import annotations
+
+from types import SimpleNamespace
+from unittest.mock import MagicMock
+
+import pytest
+
+from controllers.console.app import app_import as app_import_module
+from services.app_dsl_service import ImportStatus
+
+
+def _unwrap(func):
+    bound_self = getattr(func, "__self__", None)
+    while hasattr(func, "__wrapped__"):
+        func = func.__wrapped__
+    if bound_self is not None:
+        return func.__get__(bound_self, bound_self.__class__)
+    return func
+
+
+class _Result:
+    def __init__(self, status: ImportStatus, app_id: str | None = "app-1"):
+        self.status = status
+        self.app_id = app_id
+
+    def model_dump(self, mode: str = "json"):
+        return {"status": self.status, "app_id": self.app_id}
+
+
+def _install_features(monkeypatch: pytest.MonkeyPatch, enabled: bool) -> None:
+    features = SimpleNamespace(webapp_auth=SimpleNamespace(enabled=enabled))
+    monkeypatch.setattr(app_import_module.FeatureService, "get_system_features", lambda: features)
+
+
+def _mock_session(monkeypatch: pytest.MonkeyPatch) -> MagicMock:
+    fake_session = MagicMock()
+    fake_session.__enter__.return_value = fake_session
+    fake_session.__exit__.return_value = None
+    monkeypatch.setattr(app_import_module, "db", SimpleNamespace(engine=object()))
+    monkeypatch.setattr(app_import_module, "Session", lambda *_args, **_kwargs: fake_session)
+    return fake_session
+
+
+class TestAppImportApi:
+    @pytest.fixture
+    def api(self):
+        return app_import_module.AppImportApi()
+
+    def test_import_post_returns_failed_status_and_rolls_back(self, api, app, monkeypatch: pytest.MonkeyPatch) -> None:
+        method = _unwrap(api.post)
+
+        _install_features(monkeypatch, enabled=False)
+        session = _mock_session(monkeypatch)
+        monkeypatch.setattr(
+            app_import_module.AppDslService,
+            "import_app",
+            lambda *_args, **_kwargs: _Result(ImportStatus.FAILED, app_id=None),
+        )
+        monkeypatch.setattr(app_import_module, "current_account_with_tenant", lambda: (SimpleNamespace(id="u1"), "t1"))
+
+        with app.test_request_context("/console/api/apps/imports", method="POST", json={"mode": "yaml-content"}):
+            response, status = method()
+
+        session.rollback.assert_called_once_with()
+        session.commit.assert_not_called()
+        assert status == 400
+        assert response["status"] == ImportStatus.FAILED
+
+    def test_import_post_returns_pending_status_and_commits(self, api, app, monkeypatch: pytest.MonkeyPatch) -> None:
+        method = _unwrap(api.post)
+
+        _install_features(monkeypatch, enabled=False)
+        session = _mock_session(monkeypatch)
+        monkeypatch.setattr(
+            app_import_module.AppDslService,
+            "import_app",
+            lambda *_args, **_kwargs: _Result(ImportStatus.PENDING),
+        )
+        monkeypatch.setattr(app_import_module, "current_account_with_tenant", lambda: (SimpleNamespace(id="u1"), "t1"))
+
+        with app.test_request_context("/console/api/apps/imports", method="POST", json={"mode": "yaml-content"}):
+            response, status = method()
+
+        session.commit.assert_called_once_with()
+        session.rollback.assert_not_called()
+        assert status == 202
+        assert response["status"] == ImportStatus.PENDING
+
+    def test_import_post_updates_webapp_auth_when_enabled(self, api, app, monkeypatch: pytest.MonkeyPatch) -> None:
+        method = _unwrap(api.post)
+
+        _install_features(monkeypatch, enabled=True)
+        session = _mock_session(monkeypatch)
+        monkeypatch.setattr(
+            app_import_module.AppDslService,
+            "import_app",
+            lambda *_args, **_kwargs: _Result(ImportStatus.COMPLETED, app_id="app-123"),
+        )
+        update_access = MagicMock()
+        monkeypatch.setattr(app_import_module.EnterpriseService.WebAppAuth, "update_app_access_mode", update_access)
+        monkeypatch.setattr(app_import_module, "current_account_with_tenant", lambda: (SimpleNamespace(id="u1"), "t1"))
+
+        with app.test_request_context("/console/api/apps/imports", method="POST", json={"mode": "yaml-content"}):
+            response, status = method()
+
+        session.commit.assert_called_once_with()
+        session.rollback.assert_not_called()
+        update_access.assert_called_once_with("app-123", "private")
+        assert status == 200
+        assert response["status"] == ImportStatus.COMPLETED
+
+
+class TestAppImportConfirmApi:
+    @pytest.fixture
+    def api(self):
+        return app_import_module.AppImportConfirmApi()
+
+    def test_import_confirm_returns_failed_status_and_rolls_back(
+        self, api, app, monkeypatch: pytest.MonkeyPatch
+    ) -> None:
+        method = _unwrap(api.post)
+
+        session = _mock_session(monkeypatch)
+        monkeypatch.setattr(
+            app_import_module.AppDslService,
+            "confirm_import",
+            lambda *_args, **_kwargs: _Result(ImportStatus.FAILED),
+        )
+        monkeypatch.setattr(app_import_module, "current_account_with_tenant", lambda: (SimpleNamespace(id="u1"), "t1"))
+
+        with app.test_request_context("/console/api/apps/imports/import-1/confirm", method="POST"):
+            response, status = method(import_id="import-1")
+
+        session.rollback.assert_called_once_with()
+        session.commit.assert_not_called()
+        assert status == 400
+        assert response["status"] == ImportStatus.FAILED
diff --git a/api/tests/unit_tests/controllers/inner_api/app/test_dsl.py b/api/tests/unit_tests/controllers/inner_api/app/test_dsl.py
index 974d8f7bc6..b7419009f0 100644
--- a/api/tests/unit_tests/controllers/inner_api/app/test_dsl.py
+++ b/api/tests/unit_tests/controllers/inner_api/app/test_dsl.py
@@ -102,16 +102,16 @@ class TestEnterpriseAppDSLImport:
 
     @pytest.fixture
     def _mock_import_deps(self):
-        """Patch db, sessionmaker, and AppDslService for import handler tests."""
-        mock_session_ctx = MagicMock()
-        mock_session_ctx.__enter__ = MagicMock(return_value=MagicMock())
-        mock_session_ctx.__exit__ = MagicMock(return_value=False)
-        mock_sessionmaker = MagicMock(return_value=MagicMock(begin=MagicMock(return_value=mock_session_ctx)))
+        """Patch db, Session, and AppDslService for import handler tests."""
+        mock_session = MagicMock()
+        mock_session.__enter__ = MagicMock(return_value=mock_session)
+        mock_session.__exit__ = MagicMock(return_value=False)
         with (
             patch("controllers.inner_api.app.dsl.db"),
-            patch("controllers.inner_api.app.dsl.sessionmaker", mock_sessionmaker),
+            patch("controllers.inner_api.app.dsl.Session", return_value=mock_session),
             patch("controllers.inner_api.app.dsl.AppDslService") as mock_dsl_cls,
         ):
+            self._mock_session = mock_session
             self._mock_dsl = MagicMock()
             mock_dsl_cls.return_value = self._mock_dsl
             yield
@@ -147,6 +147,8 @@ class TestEnterpriseAppDSLImport:
         assert status_code == 200
         assert body["status"] == "completed"
         mock_account.set_tenant_id.assert_called_once_with("ws-123")
+        self._mock_session.commit.assert_called_once_with()
+        self._mock_session.rollback.assert_not_called()
 
     @pytest.mark.usefixtures("_mock_import_deps")
     @patch("controllers.inner_api.app.dsl._get_active_account")
@@ -162,6 +164,8 @@ class TestEnterpriseAppDSLImport:
 
         assert status_code == 202
         assert body["status"] == "pending"
+        self._mock_session.commit.assert_called_once_with()
+        self._mock_session.rollback.assert_not_called()
 
     @pytest.mark.usefixtures("_mock_import_deps")
     @patch("controllers.inner_api.app.dsl._get_active_account")
@@ -177,6 +181,8 @@ class TestEnterpriseAppDSLImport:
 
         assert status_code == 400
         assert body["status"] == "failed"
+        self._mock_session.rollback.assert_called_once_with()
+        self._mock_session.commit.assert_not_called()
 
     @patch("controllers.inner_api.app.dsl._get_active_account")
     def test_import_account_not_found_returns_404(self, mock_get_account, api_instance, app: Flask):

From 76af80e3328405200b6fbd499cb8f3fc49f41bb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=9E=E6=B3=95=E6=93=8D=E4=BD=9C?= <hjlarry@163.com>
Date: Wed, 15 Apr 2026 12:43:38 +0800
Subject: [PATCH 43/44] fix: open restore version panel raise 500 (#35240)

---
 api/controllers/console/app/workflow.py       |  6 +-
 .../controllers/console/app/test_workflow.py  | 57 +++++++++++++++++++
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/api/controllers/console/app/workflow.py b/api/controllers/console/app/workflow.py
index da8d25c2eb..5e6ff87d62 100644
--- a/api/controllers/console/app/workflow.py
+++ b/api/controllers/console/app/workflow.py
@@ -4,7 +4,7 @@ from collections.abc import Sequence
 from typing import Any
 
 from flask import abort, request
-from flask_restx import Resource, fields, marshal_with
+from flask_restx import Resource, fields, marshal, marshal_with
 from graphon.enums import NodeType
 from graphon.file import File
 from graphon.graph_engine.manager import GraphEngineManager
@@ -942,7 +942,6 @@ class PublishedAllWorkflowApi(Resource):
     @login_required
     @account_initialization_required
     @get_app_model(mode=[AppMode.ADVANCED_CHAT, AppMode.WORKFLOW])
-    @marshal_with(workflow_pagination_model)
     @edit_permission_required
     def get(self, app_model: App):
         """
@@ -970,9 +969,10 @@ class PublishedAllWorkflowApi(Resource):
                 user_id=user_id,
                 named_only=named_only,
             )
+            serialized_workflows = marshal(workflows, workflow_fields_copy)
 
             return {
-                "items": workflows,
+                "items": serialized_workflows,
                 "page": page,
                 "limit": limit,
                 "has_more": has_more,
diff --git a/api/tests/unit_tests/controllers/console/app/test_workflow.py b/api/tests/unit_tests/controllers/console/app/test_workflow.py
index 3607636880..f32d0ef0ec 100644
--- a/api/tests/unit_tests/controllers/console/app/test_workflow.py
+++ b/api/tests/unit_tests/controllers/console/app/test_workflow.py
@@ -258,6 +258,63 @@ def test_restore_published_workflow_to_draft_returns_400_for_invalid_structure(
     assert exc.value.description == "invalid workflow graph"
 
 
+def test_get_published_workflows_marshals_items_before_session_closes(app, monkeypatch: pytest.MonkeyPatch) -> None:
+    api = workflow_module.PublishedAllWorkflowApi()
+    handler = _unwrap(api.get)
+
+    session_state = {"open": False}
+
+    class _SessionContext:
+        def __enter__(self):
+            session_state["open"] = True
+            return object()
+
+        def __exit__(self, exc_type, exc, tb):
+            session_state["open"] = False
+            return False
+
+    class _SessionMaker:
+        def begin(self):
+            return _SessionContext()
+
+    class _Workflow:
+        @property
+        def id(self):
+            assert session_state["open"] is True
+            return "w1"
+
+    monkeypatch.setattr(workflow_module, "db", SimpleNamespace(engine=object()))
+    monkeypatch.setattr(workflow_module, "sessionmaker", lambda *_args, **_kwargs: _SessionMaker())
+    monkeypatch.setattr(workflow_module, "current_account_with_tenant", lambda: (SimpleNamespace(id="u1"), "t1"))
+    monkeypatch.setattr(
+        workflow_module,
+        "WorkflowService",
+        lambda: SimpleNamespace(
+            get_all_published_workflow=lambda **_kwargs: ([_Workflow()], False),
+        ),
+    )
+
+    def _fake_marshal(items, fields):
+        assert session_state["open"] is True
+        return [{"id": item.id} for item in items]
+
+    monkeypatch.setattr(workflow_module, "marshal", _fake_marshal)
+
+    with app.test_request_context(
+        "/apps/app/workflows",
+        method="GET",
+        query_string={"page": 1, "limit": 10, "user_id": "", "named_only": "false"},
+    ):
+        response = handler(api, app_model=SimpleNamespace(id="app", workflow_id="wf-1"))
+
+    assert response == {
+        "items": [{"id": "w1"}],
+        "page": 1,
+        "limit": 10,
+        "has_more": False,
+    }
+
+
 def test_draft_workflow_get_not_found(monkeypatch: pytest.MonkeyPatch) -> None:
     monkeypatch.setattr(
         workflow_module, "WorkflowService", lambda: SimpleNamespace(get_draft_workflow=lambda **_k: None)

From 3bccdd6c9ad1cdaa9715a7c44b81b5b28b6e995c Mon Sep 17 00:00:00 2001
From: PandaMan <richangel18518@gmail.com>
Date: Wed, 15 Apr 2026 13:51:34 +0800
Subject: [PATCH 44/44] test: migrate Service API site controller tests to
 Testcontainers (#32454) (#35183)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../controllers/service_api/test_site.py      | 110 +++++++
 .../controllers/service_api/test_site.py      | 270 ------------------
 2 files changed, 110 insertions(+), 270 deletions(-)
 create mode 100644 api/tests/test_containers_integration_tests/controllers/service_api/test_site.py
 delete mode 100644 api/tests/unit_tests/controllers/service_api/test_site.py

diff --git a/api/tests/test_containers_integration_tests/controllers/service_api/test_site.py b/api/tests/test_containers_integration_tests/controllers/service_api/test_site.py
new file mode 100644
index 0000000000..4e884626a7
--- /dev/null
+++ b/api/tests/test_containers_integration_tests/controllers/service_api/test_site.py
@@ -0,0 +1,110 @@
+"""
+Testcontainers integration tests for Service API Site controller.
+"""
+
+from __future__ import annotations
+
+import pytest
+from flask import Flask
+from sqlalchemy.orm import Session
+from werkzeug.exceptions import Forbidden
+
+from controllers.service_api.app.site import AppSiteApi
+from models.account import Tenant, TenantStatus
+from models.model import App, AppMode, Site
+
+
+@pytest.fixture
+def app(flask_app_with_containers) -> Flask:
+    return flask_app_with_containers
+
+
+def _unwrap(method):
+    fn = method
+    while hasattr(fn, "__wrapped__"):
+        fn = fn.__wrapped__
+    return fn
+
+
+def _create_tenant(db_session: Session, *, status: TenantStatus = TenantStatus.NORMAL) -> Tenant:
+    tenant = Tenant(name="service-api-site-tenant", status=status)
+    db_session.add(tenant)
+    db_session.commit()
+    return tenant
+
+
+def _create_app(db_session: Session, tenant_id: str) -> App:
+    app_model = App(
+        tenant_id=tenant_id,
+        mode=AppMode.CHAT,
+        name="service-api-site-app",
+        enable_site=True,
+        enable_api=True,
+        status="normal",
+    )
+    db_session.add(app_model)
+    db_session.commit()
+    return app_model
+
+
+def _create_site(db_session: Session, app_id: str) -> Site:
+    site = Site(
+        app_id=app_id,
+        title="Service API Site",
+        icon_type="emoji",
+        icon="robot",
+        icon_background="#ffffff",
+        description="Service API test site",
+        default_language="en-US",
+        prompt_public=True,
+        show_workflow_steps=True,
+        customize_token_strategy="not_allow",
+        use_icon_as_answer_icon=False,
+        chat_color_theme="light",
+        chat_color_theme_inverted=False,
+    )
+    db_session.add(site)
+    db_session.commit()
+    return site
+
+
+class TestAppSiteApi:
+    def test_get_site_success(self, app: Flask, db_session_with_containers: Session) -> None:
+        tenant = _create_tenant(db_session_with_containers)
+        app_model = _create_app(db_session_with_containers, tenant.id)
+        _create_site(db_session_with_containers, app_model.id)
+
+        with app.test_request_context("/site", method="GET", headers={"Authorization": "Bearer test-token"}):
+            api = AppSiteApi()
+            response = _unwrap(api.get)(api, app_model=app_model)
+
+        assert response["title"] == "Service API Site"
+        assert response["icon"] == "robot"
+        assert response["description"] == "Service API test site"
+
+    def test_get_site_not_found(self, app: Flask, db_session_with_containers: Session) -> None:
+        tenant = _create_tenant(db_session_with_containers)
+        app_model = _create_app(db_session_with_containers, tenant.id)
+
+        with app.test_request_context("/site", method="GET", headers={"Authorization": "Bearer test-token"}):
+            api = AppSiteApi()
+            with pytest.raises(Forbidden):
+                _unwrap(api.get)(api, app_model=app_model)
+
+    def test_get_site_tenant_archived(self, app: Flask, db_session_with_containers: Session) -> None:
+        tenant = _create_tenant(db_session_with_containers)
+        app_model = _create_app(db_session_with_containers, tenant.id)
+        _create_site(db_session_with_containers, app_model.id)
+
+        archived_tenant = db_session_with_containers.get(Tenant, tenant.id)
+        assert archived_tenant is not None
+        archived_tenant.status = TenantStatus.ARCHIVE
+        db_session_with_containers.commit()
+
+        app_model = db_session_with_containers.get(App, app_model.id)
+        assert app_model is not None
+
+        with app.test_request_context("/site", method="GET", headers={"Authorization": "Bearer test-token"}):
+            api = AppSiteApi()
+            with pytest.raises(Forbidden):
+                _unwrap(api.get)(api, app_model=app_model)
diff --git a/api/tests/unit_tests/controllers/service_api/test_site.py b/api/tests/unit_tests/controllers/service_api/test_site.py
deleted file mode 100644
index c0b40d070a..0000000000
--- a/api/tests/unit_tests/controllers/service_api/test_site.py
+++ /dev/null
@@ -1,270 +0,0 @@
-"""
-Unit tests for Service API Site controller
-"""
-
-import uuid
-from unittest.mock import Mock, patch
-
-import pytest
-from werkzeug.exceptions import Forbidden
-
-from controllers.service_api.app.site import AppSiteApi
-from models.account import TenantStatus
-from models.model import App, Site
-from tests.unit_tests.conftest import setup_mock_tenant_account_query
-
-
-class TestAppSiteApi:
-    """Test suite for AppSiteApi"""
-
-    @pytest.fixture
-    def mock_app_model(self):
-        """Create a mock App model with tenant."""
-        app = Mock(spec=App)
-        app.id = str(uuid.uuid4())
-        app.tenant_id = str(uuid.uuid4())
-        app.status = "normal"
-        app.enable_api = True
-
-        mock_tenant = Mock()
-        mock_tenant.id = app.tenant_id
-        mock_tenant.status = TenantStatus.NORMAL
-        app.tenant = mock_tenant
-
-        return app
-
-    @pytest.fixture
-    def mock_site(self):
-        """Create a mock Site model."""
-        site = Mock(spec=Site)
-        site.id = str(uuid.uuid4())
-        site.app_id = str(uuid.uuid4())
-        site.title = "Test Site"
-        site.icon = "icon-url"
-        site.icon_background = "#ffffff"
-        site.description = "Site description"
-        site.copyright = "Copyright 2024"
-        site.privacy_policy = "Privacy policy text"
-        site.custom_disclaimer = "Custom disclaimer"
-        site.default_language = "en-US"
-        site.prompt_public = True
-        site.show_workflow_steps = True
-        site.use_icon_as_answer_icon = False
-        site.chat_color_theme = "light"
-        site.chat_color_theme_inverted = False
-        site.icon_type = "image"
-        site.created_at = "2024-01-01T00:00:00"
-        site.updated_at = "2024-01-01T00:00:00"
-        return site
-
-    @patch("controllers.service_api.wraps.user_logged_in")
-    @patch("controllers.service_api.app.site.db")
-    @patch("controllers.service_api.wraps.current_app")
-    @patch("controllers.service_api.wraps.validate_and_get_api_token")
-    @patch("controllers.service_api.wraps.db")
-    def test_get_site_success(
-        self,
-        mock_wraps_db,
-        mock_validate_token,
-        mock_current_app,
-        mock_db,
-        mock_user_logged_in,
-        app,
-        mock_app_model,
-        mock_site,
-    ):
-        """Test successful retrieval of site configuration."""
-        # Arrange
-        mock_current_app.login_manager = Mock()
-
-        # Mock authentication
-        mock_api_token = Mock()
-        mock_api_token.app_id = mock_app_model.id
-        mock_api_token.tenant_id = mock_app_model.tenant_id
-        mock_validate_token.return_value = mock_api_token
-
-        mock_tenant = Mock()
-        mock_tenant.status = TenantStatus.NORMAL
-        mock_app_model.tenant = mock_tenant
-
-        # Mock wraps.db for authentication
-        mock_wraps_db.session.get.side_effect = [
-            mock_app_model,
-            mock_tenant,
-        ]
-
-        mock_account = Mock()
-        mock_account.current_tenant = mock_tenant
-        setup_mock_tenant_account_query(mock_wraps_db, mock_tenant, mock_account)
-
-        # Mock site.db for site query
-        mock_db.session.scalar.return_value = mock_site
-
-        # Act
-        with app.test_request_context("/site", method="GET", headers={"Authorization": "Bearer test_token"}):
-            api = AppSiteApi()
-            response = api.get()
-
-        # Assert
-        assert response["title"] == "Test Site"
-        assert response["icon"] == "icon-url"
-        assert response["description"] == "Site description"
-        mock_db.session.scalar.assert_called_once()
-
-    @patch("controllers.service_api.wraps.user_logged_in")
-    @patch("controllers.service_api.app.site.db")
-    @patch("controllers.service_api.wraps.current_app")
-    @patch("controllers.service_api.wraps.validate_and_get_api_token")
-    @patch("controllers.service_api.wraps.db")
-    def test_get_site_not_found(
-        self,
-        mock_wraps_db,
-        mock_validate_token,
-        mock_current_app,
-        mock_db,
-        mock_user_logged_in,
-        app,
-        mock_app_model,
-    ):
-        """Test that Forbidden is raised when site is not found."""
-        # Arrange
-        mock_current_app.login_manager = Mock()
-
-        # Mock authentication
-        mock_api_token = Mock()
-        mock_api_token.app_id = mock_app_model.id
-        mock_api_token.tenant_id = mock_app_model.tenant_id
-        mock_validate_token.return_value = mock_api_token
-
-        mock_tenant = Mock()
-        mock_tenant.status = TenantStatus.NORMAL
-        mock_app_model.tenant = mock_tenant
-
-        mock_wraps_db.session.get.side_effect = [
-            mock_app_model,
-            mock_tenant,
-        ]
-
-        mock_account = Mock()
-        mock_account.current_tenant = mock_tenant
-        setup_mock_tenant_account_query(mock_wraps_db, mock_tenant, mock_account)
-
-        # Mock site query to return None
-        mock_db.session.scalar.return_value = None
-
-        # Act & Assert
-        with app.test_request_context("/site", method="GET", headers={"Authorization": "Bearer test_token"}):
-            api = AppSiteApi()
-            with pytest.raises(Forbidden):
-                api.get()
-
-    @patch("controllers.service_api.wraps.user_logged_in")
-    @patch("controllers.service_api.app.site.db")
-    @patch("controllers.service_api.wraps.current_app")
-    @patch("controllers.service_api.wraps.validate_and_get_api_token")
-    @patch("controllers.service_api.wraps.db")
-    def test_get_site_tenant_archived(
-        self,
-        mock_wraps_db,
-        mock_validate_token,
-        mock_current_app,
-        mock_db,
-        mock_user_logged_in,
-        app,
-        mock_app_model,
-        mock_site,
-    ):
-        """Test that Forbidden is raised when tenant is archived."""
-        # Arrange
-        mock_current_app.login_manager = Mock()
-
-        # Mock authentication
-        mock_api_token = Mock()
-        mock_api_token.app_id = mock_app_model.id
-        mock_api_token.tenant_id = mock_app_model.tenant_id
-        mock_validate_token.return_value = mock_api_token
-
-        mock_tenant = Mock()
-        mock_tenant.status = TenantStatus.NORMAL
-
-        mock_wraps_db.session.get.side_effect = [
-            mock_app_model,
-            mock_tenant,
-        ]
-
-        mock_account = Mock()
-        mock_account.current_tenant = mock_tenant
-        setup_mock_tenant_account_query(mock_wraps_db, mock_tenant, mock_account)
-
-        # Mock site query
-        mock_db.session.scalar.return_value = mock_site
-
-        # Set tenant status to archived AFTER authentication
-        mock_app_model.tenant.status = TenantStatus.ARCHIVE
-
-        # Act & Assert
-        with app.test_request_context("/site", method="GET", headers={"Authorization": "Bearer test_token"}):
-            api = AppSiteApi()
-            with pytest.raises(Forbidden):
-                api.get()
-
-    @patch("controllers.service_api.wraps.user_logged_in")
-    @patch("controllers.service_api.app.site.db")
-    @patch("controllers.service_api.wraps.current_app")
-    @patch("controllers.service_api.wraps.validate_and_get_api_token")
-    @patch("controllers.service_api.wraps.db")
-    def test_get_site_queries_by_app_id(
-        self, mock_wraps_db, mock_validate_token, mock_current_app, mock_db, mock_user_logged_in, app, mock_app_model
-    ):
-        """Test that site is queried using the app model's id."""
-        # Arrange
-        mock_current_app.login_manager = Mock()
-
-        # Mock authentication
-        mock_api_token = Mock()
-        mock_api_token.app_id = mock_app_model.id
-        mock_api_token.tenant_id = mock_app_model.tenant_id
-        mock_validate_token.return_value = mock_api_token
-
-        mock_tenant = Mock()
-        mock_tenant.status = TenantStatus.NORMAL
-        mock_app_model.tenant = mock_tenant
-
-        mock_wraps_db.session.get.side_effect = [
-            mock_app_model,
-            mock_tenant,
-        ]
-
-        mock_account = Mock()
-        mock_account.current_tenant = mock_tenant
-        setup_mock_tenant_account_query(mock_wraps_db, mock_tenant, mock_account)
-
-        mock_site = Mock(spec=Site)
-        mock_site.id = str(uuid.uuid4())
-        mock_site.app_id = mock_app_model.id
-        mock_site.title = "Test Site"
-        mock_site.icon = "icon-url"
-        mock_site.icon_background = "#ffffff"
-        mock_site.description = "Site description"
-        mock_site.copyright = "Copyright 2024"
-        mock_site.privacy_policy = "Privacy policy text"
-        mock_site.custom_disclaimer = "Custom disclaimer"
-        mock_site.default_language = "en-US"
-        mock_site.prompt_public = True
-        mock_site.show_workflow_steps = True
-        mock_site.use_icon_as_answer_icon = False
-        mock_site.chat_color_theme = "light"
-        mock_site.chat_color_theme_inverted = False
-        mock_site.icon_type = "image"
-        mock_site.created_at = "2024-01-01T00:00:00"
-        mock_site.updated_at = "2024-01-01T00:00:00"
-        mock_db.session.scalar.return_value = mock_site
-
-        # Act
-        with app.test_request_context("/site", method="GET", headers={"Authorization": "Bearer test_token"}):
-            api = AppSiteApi()
-            api.get()
-
-        # Assert
-        # The query was executed successfully (site returned), which validates the correct query was made
-        mock_db.session.scalar.assert_called_once()