1

frontend/package.json

@@ -28,11 +28,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",

frontend/pnpm-lock.yaml

@@ -62,6 +62,9 @@ importers:
       '@radix-ui/react-avatar':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.4
+        version: 1.1.4(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-label':
         specifier: ^2.1.1
         version: 2.1.1(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -77,6 +80,9 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.1.1
         version: 1.1.1(@types/react@18.3.16)(react@18.3.1)
+      '@radix-ui/react-switch':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tabs':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -877,6 +883,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.1.4':
+    resolution: {integrity: sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA==}
+    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
+
   '@radix-ui/react-direction@1.1.0':
     resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
     peerDependencies:
@@ -1056,6 +1075,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-switch@1.1.2':
+    resolution: {integrity: sha512-zGukiWHjEdBCRyXvKR6iXAQG6qXm2esuAD6kDOi9Cn+1X6ev3ASo4+CsYaD6Fov9r/AQFekqnD/7+V0Cs6/98g==}
+    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
+
   '@radix-ui/react-tabs@1.1.2':
     resolution: {integrity: sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==}
     peerDependencies:
@@ -4288,6 +4320,28 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.16
 
+  '@radix-ui/react-dialog@1.1.4(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.16)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.16)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.3.16)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.3.16)(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.1(@types/react@18.3.16)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.16)(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.6.2(@types/react@18.3.16)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.16
+      '@types/react-dom': 18.3.5(@types/react@18.3.16)
+
   '@radix-ui/react-direction@1.1.0(@types/react@18.3.16)(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -4459,6 +4513,21 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.16
 
+  '@radix-ui/react-switch@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.16)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.16)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.16)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.16)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.16)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.16
+      '@types/react-dom': 18.3.5(@types/react@18.3.16)
+
   '@radix-ui/react-tabs@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1

frontend/src/pages/Dashboard/index.tsx

@@ -17,6 +17,7 @@ import {
     Clock,
     Search,
     Edit,
+    Package,
     ChevronRight,
     CheckCircle,
     AlertTriangle,
@@ -30,8 +31,10 @@ import { getDevelopmentLanguages } from '@/pages/Deploy/Application/List/service
 import {getDeploymentConfigPage} from '@/pages/Deploy/Deployment/List/service';
 import type {Environment} from '@/pages/Deploy/Environment/List/types';
 import type {DevelopmentLanguageType} from '@/pages/Deploy/Application/List/types';
-import type { DeploymentConfig, DeploymentConfigQueryParams } from '@/pages/Deploy/Deployment/List/types';
+import type {DeploymentConfig} from '@/pages/Deploy/Deployment/List/types';
 import type {Page} from '@/types/base';
+import type { JsonNode } from '@/types/common';
+import DeploymentFormModal from './components/DeploymentFormModal';
 
 type EnvironmentStatus = 'success' | 'warning' | 'error';
 
@@ -69,7 +72,7 @@ const LoadingState = () => (
 );
 
 const Dashboard: React.FC = () => {
-    const [projectType, setProjectType] = useState("");
+    const [projectType, setProjectType] = useState("ALL");
     const [status, setStatus] = useState("");
     const [environments, setEnvironments] = useState<EnhancedEnvironment[]>([]);
     const [loading, setLoading] = useState(true);
@@ -77,6 +80,8 @@ const Dashboard: React.FC = () => {
     const [deployConfigs, setDeployConfigs] = useState<DeploymentConfig[]>([]);
     const [searchText, setSearchText] = useState("");
     const [currentEnvId, setCurrentEnvId] = useState<number>();
+    const [deployModalOpen, setDeployModalOpen] = useState(false);
+    const [selectedConfig, setSelectedConfig] = useState<DeploymentConfig | null>(null);
 
     // 获取环境和语言数据
     useEffect(() => {
@@ -126,14 +131,13 @@ const Dashboard: React.FC = () => {
             if (!currentEnvId) return;
 
             try {
-                const queryParams: DeploymentConfigQueryParams = {
+                const response = await getDeploymentConfigPage({
                     pageSize: 100,
                     pageNum: 1,
                     environmentId: currentEnvId,
-                    workflowDefinitionId: 0
+                    workflowDefinitionId: 0,
-                };
+                    enabled: undefined
-
+                });
-                const response = await getDeploymentConfigPage(queryParams);
 
                 if (response) {
                     setDeployConfigs(response.content);
@@ -158,25 +162,22 @@ const Dashboard: React.FC = () => {
         if (!currentEnvId) return;
 
         try {
-            const queryParams: DeploymentConfigQueryParams = {
+            const params: any = {
                 pageSize: 100,
                 pageNum: 1,
                 environmentId: currentEnvId,
-                workflowDefinitionId: 0,
                 enabled: status === 'active' ? true : status === 'paused' ? false : undefined
             };
 
-            const response = await getDeploymentConfigPage(queryParams);
+            // 如果选择了具体语言（不是"所有"），添加到查询参数
+            if (projectType !== 'ALL') {
+                params.languageType = projectType;
+            }
+
+            const response = await getDeploymentConfigPage(params);
 
             if (response) {
-                // 在前端过滤开发语言
+                setDeployConfigs(response.content);
-                const filteredConfigs = response.content.filter(config => {
-                    if (projectType && config.languageType !== projectType) {
-                        return false;
-                    }
-                    return true;
-                });
-                setDeployConfigs(filteredConfigs);
             }
         } catch (error) {
             console.error('Failed to search deployment configs:', error);
@@ -185,17 +186,16 @@ const Dashboard: React.FC = () => {
 
     const handleReset = () => {
         setSearchText("");
-        setProjectType("");
+        setProjectType("ALL");
         setStatus("");
         if (currentEnvId) {
-            const queryParams: DeploymentConfigQueryParams = {
+            getDeploymentConfigPage({
                 pageSize: 100,
                 pageNum: 1,
                 environmentId: currentEnvId,
-                workflowDefinitionId: 0
+                workflowDefinitionId: 0,
-            };
+                enabled: undefined
-            
+            }).then(response => {
-            getDeploymentConfigPage(queryParams).then(response => {
                 if (response) {
                     setDeployConfigs(response.content);
                 }
@@ -235,6 +235,14 @@ 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);
+        setSelectedConfig(config);
+        setDeployModalOpen(true);
+    };
+
     if (loading) {
         return <LoadingState/>;
     }
@@ -334,6 +342,7 @@ const Dashboard: React.FC = () => {
                                                     <SelectValue placeholder="开发语言"/>
                                                 </SelectTrigger>
                                                 <SelectContent>
+                                                    <SelectItem value="ALL">所有</SelectItem>
                                                     {languages.map(lang => (
                                                         <SelectItem key={lang.code} value={lang.code}>
                                                             {lang.name}
@@ -403,9 +412,9 @@ const Dashboard: React.FC = () => {
                                                             </div>
                                                         </div>
                                                         <div className="flex justify-end space-x-2">
-                                                            <Button variant="outline" size="sm">
+                                                            <Button variant="outline" size="sm" onClick={() => handleDeploy(config)}>
-                                                                <Edit className="h-4 w-4 mr-1" />
+                                                                <Package className="h-4 w-4 mr-1"/>
-                                                                编辑
+                                                                部署
                                                             </Button>
                                                             <Button variant="outline" size="sm">
                                                                 <ChevronRight className="h-4 w-4"/>
@@ -423,6 +432,21 @@ const Dashboard: React.FC = () => {
                     </div>
                 </>
             )}
+            {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}
+                    />
+                </>
+            )}
         </div>
     );
 };