add select dataset files component (#94)

* feat: Refactor AddDataDialog and introduce DatasetFileTransfer component for improved file selection and management

* feat: Refactor SynthesisTask and InstructionTemplate components for improved UI and functionality; integrate DatasetFileTransfer for file management

* feat: Enhance CollectionTaskCreate form with additional fields for MYSQL configuration and prefix input

frontend/src/pages/SynthesisTask/CreateTemplate.tsx

@@ -12,12 +12,10 @@ import {
 import { Plus, ArrowLeft, Play, Save, RefreshCw, Code, X } from "lucide-react";
 import { useNavigate } from "react-router";
 import { mockTemplates } from "@/mock/annotation";
-import DevelopmentInProgress from "@/components/DevelopmentInProgress";
 
 const { TextArea } = Input;
 
 export default function InstructionTemplateCreate() {
-  return <DevelopmentInProgress showTime="2025.11.30" />;
   const navigate = useNavigate();
   const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(
     null
@@ -129,7 +127,7 @@ export default function InstructionTemplateCreate() {
   };
 
   return (
-    <div className="min-h-screen">
+    <div className="h-full flex flex-col gap-4">
       {/* Header */}
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center">
@@ -141,171 +139,170 @@ export default function InstructionTemplateCreate() {
           </h1>
         </div>
       </div>
-      <Card className="overflow-y-auto p-2">
-        <Form
-          form={form}
-          layout="vertical"
-          initialValues={initialValues}
-          autoComplete="off"
-        >
-          <h2 className="font-medium text-gray-900 text-lg mb-2">基本信息</h2>
-          <div className="grid grid-cols-2 gap-4">
-            <Form.Item
-              label="模板名称"
-              name="name"
-              rules={[{ required: true, message: "请输入模板名称" }]}
-            >
-              <Input placeholder="输入模板名称" />
-            </Form.Item>
-            <Form.Item
-              label="分类"
-              name="category"
-              rules={[{ required: true, message: "请选择分类" }]}
-            >
-              <Select
-                placeholder="选择分类"
-                options={[
-                  { label: "问答对生成", value: "问答对生成" },
-                  { label: "蒸馏数据集", value: "蒸馏数据集" },
-                  { label: "文本生成", value: "文本生成" },
-                  { label: "多模态生成", value: "多模态生成" },
-                ]}
-              />
-            </Form.Item>
-          </div>
-          <Form.Item label="模板描述" name="description">
-            <Input placeholder="简要描述模板的用途和特点" />
-          </Form.Item>
-          <h2 className="font-medium text-gray-900 text-lg mt-6 mb-2">
-            Prompt内容
-          </h2>
-          <Form.Item
-            label="Prompt内容"
-            name="prompt"
-            rules={[{ required: true, message: "请输入Prompt内容" }]}
+      <div className="flex-overflow-auto border-card p-4">
+        <div className="flex-1 overflow-auto">
+          <Form
+            form={form}
+            layout="vertical"
+            initialValues={initialValues}
+            autoComplete="off"
           >
-            <TextArea
-              placeholder="输入prompt内容，使用 {变量名} 格式定义变量"
-              rows={10}
-              className="font-mono text-xs resize-none"
-              onChange={handlePromptChange}
-            />
-          </Form.Item>
-          <p className="text-xs text-gray-500 mb-2">
-            提示：使用 {"{变量名}"} 格式定义变量，例如 {"{text}"} 或 {"{input}"}
-          </p>
-          <div className="mb-4">
-            <span className="text-sm font-semibold text-gray-700">
-              变量管理
-            </span>
-            <div className="flex flex-wrap gap-2 min-h-[50px] p-3 border rounded-xl bg-gray-50 mt-2">
-              {variables.map((variable, index) => (
-                <Badge
-                  key={index}
-                  count={
-                    <X
-                      className="w-3 h-3 cursor-pointer"
-                      onClick={() => handleRemoveVariable(index)}
-                    />
-                  }
-                  style={{ backgroundColor: "#fff" }}
-                >
-                  <span className="flex items-center gap-1 px-2 py-1 text-xs">
-                    <Code className="w-3 h-3" />
-                    {variable}
-                  </span>
-                </Badge>
-              ))}
-              {variables.length === 0 && (
-                <span className="text-xs text-gray-400">
-                  暂无变量，在Prompt中使用 {"{变量名}"} 格式定义
-                </span>
-              )}
-            </div>
-            <div className="flex gap-2 mt-2">
-              <Input
-                ref={variableInputRef}
-                placeholder="添加变量名（如：text, input, question）"
-                className="h-8 text-sm"
-                onPressEnter={handleAddVariable}
-              />
-              <Button
-                onClick={handleAddVariable}
-                type="default"
-                className="px-4 text-sm"
+            <h2 className="font-medium text-gray-900 text-lg mb-2">基本信息</h2>
+            <div className="grid grid-cols-2 gap-4">
+              <Form.Item
+                label="模板名称"
+                name="name"
+                rules={[{ required: true, message: "请输入模板名称" }]}
               >
-                <Plus className="w-3 h-3 mr-1" />
-                添加
-              </Button>
+                <Input placeholder="输入模板名称" />
+              </Form.Item>
+              <Form.Item
+                label="分类"
+                name="category"
+                rules={[{ required: true, message: "请选择分类" }]}
+              >
+                <Select
+                  placeholder="选择分类"
+                  options={[
+                    { label: "问答对生成", value: "问答对生成" },
+                    { label: "蒸馏数据集", value: "蒸馏数据集" },
+                    { label: "文本生成", value: "文本生成" },
+                    { label: "多模态生成", value: "多模态生成" },
+                  ]}
+                />
+              </Form.Item>
             </div>
-          </div>
-          <h2 className="font-medium text-gray-900 text-lg mb-2 pt-2">
-            模板测试
-          </h2>
-          <div className="grid grid-cols-2 gap-4">
-            <Form.Item label="测试输入" name="testInput">
-              <TextArea
-                placeholder="输入测试数据"
-                rows={5}
-                className="resize-none text-sm"
-              />
+            <Form.Item label="模板描述" name="description">
+              <Input placeholder="简要描述模板的用途和特点" />
             </Form.Item>
-            <Form.Item label="测试输出" name="testOutput">
-              <TextArea
-                readOnly
-                placeholder="点击测试按钮查看输出结果"
-                rows={5}
-                className="resize-none bg-gray-50 text-sm"
-              />
-            </Form.Item>
-          </div>
-          <Button
-            onClick={handleTestTemplate}
-            disabled={
-              !form.getFieldValue("prompt") ||
-              !form.getFieldValue("testInput") ||
-              isTestingTemplate
-            }
-            type="default"
-            className="px-4 py-2 text-sm"
-          >
-            {isTestingTemplate ? (
-              <>
-                <RefreshCw className="w-3 h-3 mr-1 animate-spin" />
-                测试中...
-              </>
-            ) : (
-              <>
-                <Play className="w-3 h-3 mr-1" />
-                测试模板
-              </>
-            )}
-          </Button>
-          <Divider />
-          <div className="flex gap-2 justify-end">
-            <Button
-              type="primary"
-              onClick={handleSaveTemplate}
-              disabled={
-                !form.getFieldValue("name") ||
-                !form.getFieldValue("prompt") ||
-                !form.getFieldValue("category")
-              }
-              className="px-6 py-2 text-sm font-semibold bg-purple-600 hover:bg-purple-700 shadow-lg"
+            <h2 className="font-medium text-gray-900 text-lg mt-6 mb-2">
+              Prompt内容
+            </h2>
+            <Form.Item
+              label="Prompt内容"
+              name="prompt"
+              rules={[{ required: true, message: "请输入Prompt内容" }]}
             >
-              <Save className="w-3 h-3 mr-1" />
-              保存模板
-            </Button>
+              <TextArea
+                placeholder="输入prompt内容，使用 {变量名} 格式定义变量"
+                rows={10}
+                className="font-mono text-xs resize-none"
+                onChange={handlePromptChange}
+              />
+            </Form.Item>
+            <p className="text-xs text-gray-500 mb-2">
+              提示：使用 {"{变量名}"} 格式定义变量，例如 {"{text}"} 或{" "}
+              {"{input}"}
+            </p>
+            <div className="mb-4">
+              <span className="text-sm font-semibold text-gray-700">
+                变量管理
+              </span>
+              <div className="flex flex-wrap gap-2 min-h-[50px] p-3 border rounded-xl bg-gray-50 mt-2">
+                {variables.map((variable, index) => (
+                  <Badge
+                    key={index}
+                    count={
+                      <X
+                        className="w-3 h-3 cursor-pointer"
+                        onClick={() => handleRemoveVariable(index)}
+                      />
+                    }
+                    style={{ backgroundColor: "#fff" }}
+                  >
+                    <span className="flex items-center gap-1 px-2 py-1 text-xs">
+                      <Code className="w-3 h-3" />
+                      {variable}
+                    </span>
+                  </Badge>
+                ))}
+                {variables.length === 0 && (
+                  <span className="text-xs text-gray-400">
+                    暂无变量，在Prompt中使用 {"{变量名}"} 格式定义
+                  </span>
+                )}
+              </div>
+              <div className="flex gap-2 mt-2">
+                <Input
+                  ref={variableInputRef}
+                  placeholder="添加变量名（如：text, input, question）"
+                  className="h-8 text-sm"
+                  onPressEnter={handleAddVariable}
+                />
+                <Button
+                  onClick={handleAddVariable}
+                  type="default"
+                  className="px-4 text-sm"
+                >
+                  <Plus className="w-3 h-3 mr-1" />
+                  添加
+                </Button>
+              </div>
+            </div>
+            <h2 className="font-medium text-gray-900 text-lg mb-2 pt-2">
+              模板测试
+            </h2>
+            <div className="grid grid-cols-2 gap-4">
+              <Form.Item label="测试输入" name="testInput">
+                <TextArea
+                  placeholder="输入测试数据"
+                  rows={5}
+                  className="resize-none text-sm"
+                />
+              </Form.Item>
+              <Form.Item label="测试输出" name="testOutput">
+                <TextArea
+                  readOnly
+                  placeholder="点击测试按钮查看输出结果"
+                  rows={5}
+                  className="resize-none bg-gray-50 text-sm"
+                />
+              </Form.Item>
+            </div>
             <Button
-              onClick={() => navigate("/data/synthesis/task")}
+              onClick={handleTestTemplate}
+              disabled={
+                !form.getFieldValue("prompt") ||
+                !form.getFieldValue("testInput") ||
+                isTestingTemplate
+              }
               type="default"
               className="px-4 py-2 text-sm"
             >
-              取消
+              {isTestingTemplate ? (
+                <>
+                  <RefreshCw className="w-3 h-3 mr-1 animate-spin" />
+                  测试中...
+                </>
+              ) : (
+                <>测试模板</>
+              )}
             </Button>
-          </div>
-        </Form>
-      </Card>
+          </Form>
+        </div>
+        <div className="flex gap-2 justify-end p-4 border-top">
+          <Button
+            type="primary"
+            onClick={handleSaveTemplate}
+            disabled={
+              !form.getFieldValue("name") ||
+              !form.getFieldValue("prompt") ||
+              !form.getFieldValue("category")
+            }
+            className="px-6 py-2 text-sm font-semibold bg-purple-600 hover:bg-purple-700 shadow-lg"
+          >
+            <Save className="w-3 h-3 mr-1" />
+            保存模板
+          </Button>
+          <Button
+            onClick={() => navigate("/data/synthesis/task")}
+            type="default"
+            className="px-4 py-2 text-sm"
+          >
+            取消
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }