From b3b2926a67394c00425fdd7872f3e97b55c000f0 Mon Sep 17 00:00:00 2001
From: lihu <2223133607@qq.com>
Date: Thu, 22 May 2025 23:46:30 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=AE=8C=E6=88=90=20PromptEditor=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E6=94=B9=E4=B8=BA=20hooks=20=E5=86=99=E6=B3=95?=
 =?UTF-8?q?=EF=BC=9B=E4=BC=98=E5=8C=96=20functional=5Fui=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 desktop/src/components/ModelManager/index.tsx |  2 +-
 frontend/functional_ui/src/App.css            | 23 ++++++++++
 .../src/ui/functional/FunctionalUI.tsx        |  2 +-
 .../src/components/Base/PromptEditor.tsx      | 30 -------------
 .../components/Base/PromptEditor/index.tsx    | 42 +++++++++++++++++++
 .../Base/PromptEditor/style.module.css        | 35 ++++++++++++++++
 .../src/components/ComponentRef.module.css    |  4 ++
 .../src/components/ComponentRef.tsx           | 14 +++----
 8 files changed, 113 insertions(+), 39 deletions(-)
 delete mode 100644 frontend/ssui_components/src/components/Base/PromptEditor.tsx
 create mode 100644 frontend/ssui_components/src/components/Base/PromptEditor/index.tsx
 create mode 100644 frontend/ssui_components/src/components/Base/PromptEditor/style.module.css
 create mode 100644 frontend/ssui_components/src/components/ComponentRef.module.css

diff --git a/desktop/src/components/ModelManager/index.tsx b/desktop/src/components/ModelManager/index.tsx
index ca1dbba..7f58d61 100644
--- a/desktop/src/components/ModelManager/index.tsx
+++ b/desktop/src/components/ModelManager/index.tsx
@@ -165,7 +165,7 @@ export const ModelManager = (props: ModelManagerProps) => {
                     <Button
                         icon="tag"
                         rightIcon="caret-down"
-                        text={selectedTags.length > 0 
+                        text={selectedTags.length > 0
                             ? t('model.tags.selected', { count: selectedTags.length })
                             : t('model.tags.filter')}
                     />
diff --git a/frontend/functional_ui/src/App.css b/frontend/functional_ui/src/App.css
index 94e2e90..46a21a2 100644
--- a/frontend/functional_ui/src/App.css
+++ b/frontend/functional_ui/src/App.css
@@ -93,6 +93,29 @@ button {
   margin-right: 5px;
 }
 
+:focus {
+  outline: none!important;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgba(234, 234, 234, 0.5);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgb(203, 203, 203);
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: rgba(239, 239, 239, 0.5);
+}
+
+
 @media (prefers-color-scheme: dark) {
   :root {
     color: #f6f6f6;
diff --git a/frontend/functional_ui/src/ui/functional/FunctionalUI.tsx b/frontend/functional_ui/src/ui/functional/FunctionalUI.tsx
index 4052986..8de0910 100644
--- a/frontend/functional_ui/src/ui/functional/FunctionalUI.tsx
+++ b/frontend/functional_ui/src/ui/functional/FunctionalUI.tsx
@@ -309,4 +309,4 @@ export class FunctionalUIProvider implements UIProvider {
     }
 }
 
-export default FunctionalUI;
\ No newline at end of file
+export default FunctionalUI;
diff --git a/frontend/ssui_components/src/components/Base/PromptEditor.tsx b/frontend/ssui_components/src/components/Base/PromptEditor.tsx
deleted file mode 100644
index 8e66e21..0000000
--- a/frontend/ssui_components/src/components/Base/PromptEditor.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {TextArea} from '@blueprintjs/core';
-import React from 'react';
-import { IComponent } from '../IComponent';
-
-class PromptEditor extends IComponent<{}, {textContent: string}> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {textContent: ''};
-        this.onInputChange = this.onInputChange.bind(this);
-    }
-
-    onInputChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-        this.setState({textContent: event.target.value});
-    }
-
-    onExecute(): any {
-        return { 'function': 'ssui.base.Prompt.create', 'params': { 'text': this.state.textContent } };
-    }
-
-    render() {
-        return <TextArea fill={true} value={this.state.textContent} onChange={this.onInputChange} />
-    }
-}
-
-
-// Register into the component manager
-import { registerComponent, ComponentRegister } from '../ComponentsManager';
-[
-    { 'name': 'PromptEditor', 'type': 'ssui.base.Prompt', 'port': 'input', 'component': PromptEditor } as ComponentRegister,
-].forEach(registerComponent);
\ No newline at end of file
diff --git a/frontend/ssui_components/src/components/Base/PromptEditor/index.tsx b/frontend/ssui_components/src/components/Base/PromptEditor/index.tsx
new file mode 100644
index 0000000..f8df7c7
--- /dev/null
+++ b/frontend/ssui_components/src/components/Base/PromptEditor/index.tsx
@@ -0,0 +1,42 @@
+import React, { useState, forwardRef, useImperativeHandle } from 'react';
+import {TextArea, Tag} from '@blueprintjs/core';
+import { registerComponent, ComponentRegister } from '../../ComponentsManager';
+import styles from './style.module.css'
+
+const PromptEditor = forwardRef((props, ref) => {
+    const [ textContent, setTextContent ] = useState<string>('')
+
+    useImperativeHandle(ref, () => {
+        return {
+            onExecute: () => {
+                return { 'function': 'ssui.base.Prompt.create', 'params': { 'text': textContent } };
+            }
+        }
+    }, [textContent])
+
+    const removeTag = (text: string) => {
+        setTextContent(textContent.replace(text + ',', ''))
+    }
+
+    return (
+        <div className={styles.promptEditor}>
+            <div className={styles.tagWp}>
+                <div className={styles.tagTitle}>预览（共{textContent.split(',').filter((a: string) => !!a).length}条）：</div>
+                {
+                    textContent.split(',').filter(a => !!a).map(text => (
+                        <Tag className={styles.tag} round intent="primary" minimal key={text} onRemove={() => removeTag(text)}>{text}</Tag>
+                    ))
+                }
+            </div>
+            <TextArea className={styles.textarea} value={textContent} onChange={e => setTextContent(e.target.value)} />
+            <div className={styles.tip}>* 请输入提示词，英文逗号隔开。</div>
+        </div>
+    )
+});
+
+
+[
+    { 'name': 'PromptEditor', 'type': 'ssui.base.Prompt', 'port': 'input', 'component': PromptEditor } as ComponentRegister,
+].forEach(registerComponent);
+
+
diff --git a/frontend/ssui_components/src/components/Base/PromptEditor/style.module.css b/frontend/ssui_components/src/components/Base/PromptEditor/style.module.css
new file mode 100644
index 0000000..a7f4c01
--- /dev/null
+++ b/frontend/ssui_components/src/components/Base/PromptEditor/style.module.css
@@ -0,0 +1,35 @@
+.promptEditor {
+
+    .tagWp {
+        background-color: rgba(88, 242, 248, 0.24);
+        padding: 10px 8px 4px 8px;
+        background-color: #f9f9f9;
+        border-radius: 4px;
+        margin-bottom: 8px;
+        box-sizing: border-box;
+        max-height: 300px;
+        overflow: auto;
+
+        .tagTitle {
+            font-size: 13px;
+            margin-bottom: 6px;
+            padding-left: 2px;
+        }
+
+        .tag {
+            margin: 0 6px 6px 0;
+        }
+    }
+
+    .textarea {
+        width: 100%;
+        height: 64px;
+    }
+
+    .tip {
+        font-size: 12px;
+        color: #a6a6a6;
+        margin-top: 4px;
+    }
+
+}
diff --git a/frontend/ssui_components/src/components/ComponentRef.module.css b/frontend/ssui_components/src/components/ComponentRef.module.css
new file mode 100644
index 0000000..8ecdaa1
--- /dev/null
+++ b/frontend/ssui_components/src/components/ComponentRef.module.css
@@ -0,0 +1,4 @@
+.refTitle {
+    font-size: 16px;
+    font-weight: bold;
+}
diff --git a/frontend/ssui_components/src/components/ComponentRef.tsx b/frontend/ssui_components/src/components/ComponentRef.tsx
index dcce4c2..cc64fcf 100644
--- a/frontend/ssui_components/src/components/ComponentRef.tsx
+++ b/frontend/ssui_components/src/components/ComponentRef.tsx
@@ -3,6 +3,7 @@ import { IComponent } from "./IComponent";
 import { getComponent, getComponentsByType, parsePythonTyping, PythonType } from "./ComponentsManager";
 import React from 'react';
 import { Tabs, Tab, TabsExpander, Label } from "@blueprintjs/core";
+import styles from './ComponentRef.module.css'
 
 export interface ComponentRefProps {
     name: string;
@@ -54,16 +55,15 @@ export class ComponentTabRef extends IComponent<ComponentRefProps> {
     render() {
         let components = getComponentsByType(this.parsed_type.type);
         return <Tabs ref={this.tabs_ref}>
-            <Label>
-                {this.props.name}
-            </Label>
+            <div className={styles.refTitle}>{this.props.name}</div>
             <TabsExpander />
             {components.filter(c => c.port == this.props.port)
                 .map(c =>
                     <Tab key={c.name} id={c.name} title={c.name}
-                        panel={<ComponentRef 
-                            name={c.name} type={c.type} ref={this.ref_array[c.name]} port={this.props.port}
-                            root_path={this.props.root_path} script_path={this.props.script_path} type_args={this.parsed_type.args} />} />)}
+                         panel={<ComponentRef
+                             name={c.name} type={c.type} ref={this.ref_array[c.name]} port={this.props.port}
+                             root_path={this.props.root_path} script_path={this.props.script_path} type_args={this.parsed_type.args} />} />)}
+
         </Tabs>
     }
 
@@ -78,4 +78,4 @@ export class ComponentTabRef extends IComponent<ComponentRefProps> {
         if (!selected) return;
         this.ref_array[selected]?.current?.onUpdate(data);
     }
-}
\ No newline at end of file
+}

From 7371ca38701a5d6f5b226b9b9566e4481da1f9ce Mon Sep 17 00:00:00 2001
From: lihu <lihu1@le.com>
Date: Mon, 9 Jun 2025 13:46:27 +0800
Subject: [PATCH 2/2] fix tag bugs

---
 .../src/components/Base/PromptEditor/index.tsx         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/ssui_components/src/components/Base/PromptEditor/index.tsx b/frontend/ssui_components/src/components/Base/PromptEditor/index.tsx
index f8df7c7..415815d 100644
--- a/frontend/ssui_components/src/components/Base/PromptEditor/index.tsx
+++ b/frontend/ssui_components/src/components/Base/PromptEditor/index.tsx
@@ -14,8 +14,10 @@ const PromptEditor = forwardRef((props, ref) => {
         }
     }, [textContent])
 
-    const removeTag = (text: string) => {
-        setTextContent(textContent.replace(text + ',', ''))
+    const removeTag = (index: number) => {
+        const arr = textContent.split(',')
+        arr.splice(index, 1)
+        setTextContent(arr.filter(a => !!a).join(','))
     }
 
     return (
@@ -23,8 +25,8 @@ const PromptEditor = forwardRef((props, ref) => {
             <div className={styles.tagWp}>
                 <div className={styles.tagTitle}>预览（共{textContent.split(',').filter((a: string) => !!a).length}条）：</div>
                 {
-                    textContent.split(',').filter(a => !!a).map(text => (
-                        <Tag className={styles.tag} round intent="primary" minimal key={text} onRemove={() => removeTag(text)}>{text}</Tag>
+                    textContent.split(',').filter(a => !!a).map((text, index) => (
+                        <Tag className={styles.tag} round intent="primary" minimal key={index} onRemove={() => removeTag(index)}>{text}</Tag>
                     ))
                 }
             </div>