From 769666abb237375bc03541ee0d785269f429aae4 Mon Sep 17 00:00:00 2001
From: Mminamiyama <minamiyama@qq.com>
Date: Wed, 9 Jul 2025 18:46:10 +0800
Subject: [PATCH] feat(question-classifier): add drag handle styling and props

- Add className and headerClassName props to ClassItem for better styling control
- Conditionally render drag handle based on readonly state and topic count
- Update drag handle styling to only show when hovered and draggable
---
 .../question-classifier/components/class-item.tsx |  6 ++++++
 .../question-classifier/components/class-list.tsx | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
index be4a6cb901..478ac925d6 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-item.tsx
@@ -11,6 +11,8 @@ import { uniqueId } from 'lodash-es'
 const i18nPrefix = 'workflow.nodes.questionClassifiers'
 
 type Props = {
+  className?: string
+  headerClassName?: string
   nodeId: string
   payload: Topic
   onChange: (payload: Topic) => void
@@ -21,6 +23,8 @@ type Props = {
 }
 
 const ClassItem: FC<Props> = ({
+  className,
+  headerClassName,
   nodeId,
   payload,
   onChange,
@@ -49,6 +53,8 @@ const ClassItem: FC<Props> = ({
 
   return (
     <Editor
+      className={className}
+      headerClassName={headerClassName}
       title={`${t(`${i18nPrefix}.class`)} ${index}`}
       placeholder={t(`${i18nPrefix}.topicPlaceholder`)!}
       value={payload.name}
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
index 5fe631f665..7732d314ba 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
@@ -76,18 +76,29 @@ const ClassList: FC<Props> = ({
     >
       {
         list.map((item, index) => {
+          const canDrag = (() => {
+            if (readonly)
+              return false
+
+            if (topicCount < 2)
+              return false
+
+            return true
+          })()
           return (
             <div key={item.id}
                 className={cn(
                   'group relative rounded-[10px] bg-components-panel-bg',
                   `-ml-${handleSideWidth} min-h-[40px] px-0 py-0`,
             )}>
-              <RiDraggable className={cn(
+              {canDrag && <RiDraggable className={cn(
                 'handle absolute left-0 top-3 hidden h-3 w-3 cursor-pointer text-text-quaternary',
                 topicCount > 1 && 'group-hover:block',
-              )} />
+              )} />}
               <div className={`ml-${handleSideWidth}`}>
                 <Item
+                  className={cn(canDrag && 'handle')}
+                  headerClassName={cn(canDrag && 'cursor-grab')}
                   nodeId={nodeId}
                   key={list[index].id}
                   payload={item}