From e5affe346522ce0b129c316871b9c3bb0885520d Mon Sep 17 00:00:00 2001
From: hzhang <hzhang@hangman-lab.top>
Date: Sun, 11 May 2025 20:14:29 +0100
Subject: [PATCH] improve: update css

---
 .../MarkdownTemplate/LayoutEditor.js          |   1 +
 .../MarkdownTemplateEditor.js                 |  13 ++-
 .../MarkdownTemplate/ParametersManager.js     | 104 ++++++++++++------
 src/components/Markdowns/MarkdownEditor.js    |   2 +-
 src/components/Markdowns/TemplatedEditor.js   |  40 ++++---
 5 files changed, 103 insertions(+), 57 deletions(-)

diff --git a/src/components/MarkdownTemplate/LayoutEditor.js b/src/components/MarkdownTemplate/LayoutEditor.js
index d4f8016..b71ea99 100644
--- a/src/components/MarkdownTemplate/LayoutEditor.js
+++ b/src/components/MarkdownTemplate/LayoutEditor.js
@@ -5,6 +5,7 @@ const LayoutEditor = ({layout, onChange}) => {
     return (
         <textarea
             className="textarea"
+            style={{ height: "60vh" }}
             value={_layout}
             onChange={(e) => {
                 setLayout(e.target.value);
diff --git a/src/components/MarkdownTemplate/MarkdownTemplateEditor.js b/src/components/MarkdownTemplate/MarkdownTemplateEditor.js
index cd7f047..f577c96 100644
--- a/src/components/MarkdownTemplate/MarkdownTemplateEditor.js
+++ b/src/components/MarkdownTemplate/MarkdownTemplateEditor.js
@@ -65,6 +65,7 @@ const MarkdownTemplateEditor = () => {
                 <div className="columns is-variable is-8">
                     <div className="column">
                         <h3 className="title is-5">Layout</h3>
+
                         <div className="box">
                             <LayoutEditor
                                 layout={layout}
@@ -72,15 +73,15 @@ const MarkdownTemplateEditor = () => {
                                 onChange={(newLayout) => setLayout(newLayout)}
                             />
                         </div>
+
                     </div>
                     <div className="column">
                         <h3 className="title is-5">Parameters</h3>
-                        <div className="box">
-                            <ParametersManager
-                                parameters={parameters}
-                                onChange={(newParameters) => setParameters(newParameters)}
-                            />
-                        </div>
+                        <ParametersManager
+                            parameters={parameters}
+                            onChange={(newParameters) => setParameters(newParameters)}
+                        />
+
                     </div>
                 </div>
                 <div className="field is-grouped">
diff --git a/src/components/MarkdownTemplate/ParametersManager.js b/src/components/MarkdownTemplate/ParametersManager.js
index 692b969..a84ec78 100644
--- a/src/components/MarkdownTemplate/ParametersManager.js
+++ b/src/components/MarkdownTemplate/ParametersManager.js
@@ -3,18 +3,36 @@ import TypeEditor from "./TypeEditor";
 
 const ParametersManager = ({ parameters, onChange }) => {
     const [_parameters, setParameters] = useState(parameters || []);
+    const [expandedStates, setExpandedStates] = useState({});
 
     const handleAdd = () => {
         const updated = [
             ..._parameters,
             {
                 name: "",
-                type: { base_type: "string" }
+                type: { 
+                    base_type: "string",
+                    definition: {}
+                }
             }
         ];
         setParameters(updated);
         onChange(updated);
     };
+
+    const handleTypeChange = (index, newType) => {
+        const updated = [..._parameters];
+        if (newType.base_type === "list" && !newType.extend_type) {
+            newType.extend_type = {
+                base_type: "string",
+                definition: {}
+            };
+        }
+        updated[index].type = newType;
+        setParameters(updated);
+        onChange(updated);
+    };
+
     useEffect(() => {
         setParameters(parameters);
     }, [parameters]);
@@ -33,6 +51,13 @@ const ParametersManager = ({ parameters, onChange }) => {
         onChange(updated);
     };
 
+    const toggleExpand = (index) => {
+        setExpandedStates(prev => ({
+            ...prev,
+            [index]: !prev[index]
+        }));
+    };
+
     return (
         <div className="box">
             <div className="field">
@@ -42,44 +67,51 @@ const ParametersManager = ({ parameters, onChange }) => {
                     </button>
                 </div>
             </div>
-            {_parameters.map((param, index) => (
-                <div key={index} className="box" style={{ marginBottom: "1rem" }}>
-                    <div className="field is-grouped is-grouped-multiline">
-                        <div className="control is-expanded">
-                            <label className="label">Name:</label>
-                            <input
-                                type="text"
-                                className="input"
-                                value={param.name}
-                                onChange={(e) => handleNameChange(index, e.target.value)}
-                                placeholder="Parameter name"
-                            />
+            <div style={{ maxHeight: "50vh", overflowY: "auto" }}>
+                {_parameters.map((param, index) => (
+                    <div key={index} className="box" style={{ marginBottom: "0.5rem" }}>
+                        <div className="field is-grouped is-grouped-multiline">
+                            <div className="control is-expanded">
+                                <label className="label mb-1">Name:</label>
+                                <input
+                                    type="text"
+                                    className="input"
+                                    value={param.name}
+                                    onChange={(e) => handleNameChange(index, e.target.value)}
+                                    placeholder="Parameter name"
+                                />
+                            </div>
+                            <div className="control">
+                                <button
+                                    className="button is-danger"
+                                    onClick={() => handleDelete(index)}
+                                >
+                                    Delete
+                                </button>
+                            </div>
                         </div>
-                        <div className="control">
-                            <button
-                                className="button is-danger"
-                                onClick={() => handleDelete(index)}
-                            >
-                                Delete
-                            </button>
+                        <div className="field">
+                            <div className="is-flex is-justify-content-space-between is-align-items-center mb-1">
+                                <label className="label mb-0">Type:</label>
+                                <button 
+                                    className="button is-small"
+                                    onClick={() => toggleExpand(index)}
+                                >
+                                    {expandedStates[index] ? "-" : "+"}
+                                </button>
+                            </div>
+                            {expandedStates[index] && (
+                                <div className="control">
+                                    <TypeEditor
+                                        type={param.type}
+                                        onChange={(newType) => handleTypeChange(index, newType)}
+                                    />
+                                </div>
+                            )}
                         </div>
                     </div>
-                    <div className="field">
-                        <label className="label">Type:</label>
-                        <div className="control">
-                            <TypeEditor
-                                type={param.type}
-                                onChange={(newType) => {
-                                    const updated = [..._parameters];
-                                    updated[index].type = newType;
-                                    setParameters(updated);
-                                    onChange(updated);
-                                }}
-                            />
-                        </div>
-                    </div>
-                </div>
-            ))}
+                ))}
+            </div>
         </div>
     );
 };
diff --git a/src/components/Markdowns/MarkdownEditor.js b/src/components/Markdowns/MarkdownEditor.js
index 733dbf1..1869f9d 100644
--- a/src/components/Markdowns/MarkdownEditor.js
+++ b/src/components/Markdowns/MarkdownEditor.js
@@ -277,7 +277,7 @@ const MarkdownEditor = () => {
                                     </div>
                                 ) : (
                                     <TemplatedEditor
-                                        style={{height: "70vh"}}
+                                        style={{height: "40vh"}}
                                         content={content}
                                         template={!markdown?.id ? selectedTemplate : template}
                                         onContentChanged={(k, v) => setContent(
diff --git a/src/components/Markdowns/TemplatedEditor.js b/src/components/Markdowns/TemplatedEditor.js
index 7e77976..52f5fe2 100644
--- a/src/components/Markdowns/TemplatedEditor.js
+++ b/src/components/Markdowns/TemplatedEditor.js
@@ -28,9 +28,10 @@ const TemplatedEditorComponent = ({ variable, value, namespace, onContentChanged
                         <label className="label">{__namespace}</label>
                         <div className="control">
                             <textarea
-                              className="textarea"
-                              value={value}
-                              onChange={(e) => onContentChanged(variable.name, e.target.value)}
+                                style={{maxHeight: "10vh"}}
+                                className="textarea"
+                                value={value}
+                                onChange={(e) => onContentChanged(variable.name, e.target.value)}
                             />
                         </div>
                     </div>
@@ -152,7 +153,7 @@ const TemplatedEditorComponent = ({ variable, value, namespace, onContentChanged
     return <>{renderField()}</>;
 };
 
-const TemplatedEditor = ({ content, template, onContentChanged }) => {
+const TemplatedEditor = ({ content, template, onContentChanged, style }) => {
     const tpl = template || {
         parameters: [{ name: "markdown", type: { base_type: "markdown", definition: {} } }],
         layout: "<markdown/>",
@@ -160,16 +161,27 @@ const TemplatedEditor = ({ content, template, onContentChanged }) => {
     };
 
     return (
-        <div className="box">
-            {tpl.parameters.map((variable, idx) => (
-                <TemplatedEditorComponent
-                    key={idx}
-                    variable={variable}
-                    value={content[variable.name]}
-                    namespace={tpl.title}
-                    onContentChanged={onContentChanged}
-                />
-            ))}
+        <div className="box" style={{
+            ...style,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden"
+        }}>
+            <div style={{
+                flex: 1,
+                overflowY: "auto",
+                padding: "1rem"
+            }}>
+                {tpl.parameters.map((variable, idx) => (
+                    <TemplatedEditorComponent
+                        key={idx}
+                        variable={variable}
+                        value={content[variable.name]}
+                        namespace={tpl.title}
+                        onContentChanged={onContentChanged}
+                    />
+                ))}
+            </div>
         </div>
     );
 };