1

2024-12-27 20:51:36 +08:00 · 2024-12-27 20:51:36 +08:00 · 02e795fead
commit 02e795fead
parent cc1ce5f413
5 changed files with 118 additions and 37 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -26,11 +26,13 @@
        "@logicflow/extension": "^2.0.13",
        "@monaco-editor/react": "^4.6.0",
        "@radix-ui/react-avatar": "^1.1.2",
+        "@radix-ui/react-dialog": "^1.1.4",
        "@radix-ui/react-label": "^2.1.1",
        "@radix-ui/react-progress": "^1.1.1",
        "@radix-ui/react-select": "^2.1.4",
        "@radix-ui/react-separator": "^1.1.1",
        "@radix-ui/react-slot": "^1.1.1",
+        "@radix-ui/react-switch": "^1.1.2",
        "@radix-ui/react-tabs": "^1.1.2",
        "@reduxjs/toolkit": "^2.0.1",
        "@types/recharts": "^1.8.29",
@ -2058,6 +2060,41 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-dialog/-/react-dialog-1.1.4.tgz",
+      "integrity": "sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.3",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-slot": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "^2.6.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-direction": {
      "version": "1.1.0",
      "resolved": "https://registry.npmmirror.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@ -2423,6 +2460,34 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-switch/-/react-switch-1.1.2.tgz",
+      "integrity": "sha512-zGukiWHjEdBCRyXvKR6iXAQG6qXm2esuAD6kDOi9Cn+1X6ev3ASo4+CsYaD6Fov9r/AQFekqnD/7+V0Cs6/98g==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-tabs": {
      "version": "1.1.2",
      "resolved": "https://registry.npmmirror.com/@radix-ui/react-tabs/-/react-tabs-1.1.2.tgz",
--- a/frontend/src/pages/Dashboard/components/DeploymentFormModal.tsx
+++ b/frontend/src/pages/Dashboard/components/DeploymentFormModal.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
    Dialog,
    DialogContent,
@ -9,39 +9,49 @@ import {
 import { Button } from "@/components/ui/button";
 import { BetaSchemaForm } from '@ant-design/pro-form';
 import { convertJsonSchemaToColumns } from '@/utils/jsonSchemaUtils';
+import { message } from 'antd';
+import type { DeploymentConfig } from '@/pages/Deploy/Deployment/List/types';

 interface DeploymentFormModalProps {
    open: boolean;
    onClose: () => void;
    formSchema: any;
+    deployConfig: DeploymentConfig;
 }

 const DeploymentFormModal: React.FC<DeploymentFormModalProps> = ({
    open,
    onClose,
-    formSchema
+    formSchema,
+    deployConfig
 }) => {
    const handleSubmit = async (values: any) => {
+        try {
            console.log('Form values:', values);
-        // TODO: 处理表单提交
+            // TODO: 调用部署接口
+            message.success('部署任务已提交');
            onClose();
+        } catch (error) {
+            message.error('部署失败：' + (error instanceof Error ? error.message : '未知错误'));
+        }
    };

    const columns = convertJsonSchemaToColumns(formSchema);
-    console.log('Form schema:', formSchema);
-    console.log('Generated columns:', columns);

    return (
        <Dialog open={open} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-[600px]">
                <DialogHeader>
-                    <DialogTitle>部署前表单</DialogTitle>
+                    <DialogTitle>部署 {deployConfig.application.appName}</DialogTitle>
                </DialogHeader>
                <div className="py-4">
                    <BetaSchemaForm
                        layoutType="Form"
                        columns={columns}
                        onFinish={handleSubmit}
+                        submitter={{
+                            render: false
+                        }}
                    />
                </div>
                <DialogFooter>
--- a/frontend/src/pages/Dashboard/index.tsx
+++ b/frontend/src/pages/Dashboard/index.tsx
@ -236,9 +236,10 @@ const Dashboard: React.FC = () => {
    };

    const handleDeploy = (config: DeploymentConfig) => {
-        console.log('Deploy config:', config);
-        console.log('Workflow definition:', config.publishedWorkflowDefinition);
-        console.log('Form variables:', config.publishedWorkflowDefinition?.formVariables);
+        if (!config.publishedWorkflowDefinition?.formVariablesSchema) {
+            message.error('工作流配置有误，请检查工作流定义');
+            return;
+        }
        setSelectedConfig(config);
        setDeployModalOpen(true);
    };
@ -433,19 +434,15 @@ const Dashboard: React.FC = () => {
                </>
            )}
            {selectedConfig && selectedConfig.publishedWorkflowDefinition && (
-                <>
-                    {console.log('Selected config:', selectedConfig)}
-                    {console.log('Workflow definition:', selectedConfig.publishedWorkflowDefinition)}
-                    {console.log('Form variables:', selectedConfig.publishedWorkflowDefinition.formVariables)}
                <DeploymentFormModal
                    open={deployModalOpen}
                    onClose={() => {
                        setDeployModalOpen(false);
                        setSelectedConfig(null);
                    }}
-                        formSchema={selectedConfig.publishedWorkflowDefinition.formVariables}
+                    formSchema={selectedConfig.publishedWorkflowDefinition.formVariablesSchema}
+                    deployConfig={selectedConfig}
                />
-                </>
            )}
        </div>
    );
--- a/frontend/src/pages/Login/index.tsx
+++ b/frontend/src/pages/Login/index.tsx
@ -78,7 +78,7 @@ const Login: React.FC = () => {
            {/* 左侧区域 */}
            <div className={styles.leftSection}>
                <div>
-                    <h1 className="text-xl font-bold">Deploy Ease Platform</h1>
+                    <h1 className="text-xl font-bold">链宇DevOps门户管理系统</h1>
                </div>
                <div className="space-y-4">
                    <blockquote className="text-2xl font-medium">
@ -91,7 +91,7 @@ const Login: React.FC = () => {
            <div className={styles.rightSection}>
                <div className={styles.loginBox}>
                    <div className={styles.logo}>
-                        <h1>管理系统</h1>
+                        <h1>Deploy Ease Platform</h1>
                        <p className="text-gray-500 mt-2">输入您的账号密码登录系统</p>
                    </div>
                    <Form<LoginForm>
@ -152,17 +152,6 @@ const Login: React.FC = () => {
                            </Button>
                        </Form.Item>
                    </Form>
-
-                    <div className="text-center text-sm text-gray-500 mt-4">
-                        登录即表示您同意我们的
-                        <a href="#" className="text-[#2563eb] hover:text-[#1d4ed8] mx-1">
-                            服务条款
-                        </a>
-                        和
-                        <a href="#" className="text-[#2563eb] hover:text-[#1d4ed8] mx-1">
-                            隐私政策
-                        </a>
-                    </div>
                </div>
            </div>
        </div>
--- a/frontend/src/pages/Workflow/Definition/types.ts
+++ b/frontend/src/pages/Workflow/Definition/types.ts
@ -16,6 +16,26 @@ export interface WorkflowDefinition extends BaseResponse {
    formConfig: {
        formItems: any[];
    };
+    formVariablesSchema?: {
+        type: string;
+        required?: string[];
+        properties: {
+            [key: string]: {
+                type: string;
+                title: string;
+                description?: string;
+                dataSource?: {
+                    url: string;
+                    type: string;
+                    params?: Record<string, any>;
+                    dependsOn?: string[];
+                    labelField?: string;
+                    valueField?: string;
+                };
+            };
+        };
+    };
+    bpmnXml?: string;
 }

 export interface WorkflowDefinitionNode {