From c8cbeebe655fc07131dad6e6e1a2008f3d746099 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Thu, 10 Oct 2024 18:18:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20Python=20=E8=BF=90?=
 =?UTF-8?q?=E8=A1=8C=E7=8E=AF=E5=A2=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/app/service/runtime.go                |  12 +-
 backend/app/service/runtime_utils.go          |  11 +-
 backend/app/service/website.go                |   2 +-
 backend/app/service/website_utils.go          |   2 +-
 backend/constant/runtime.go                   |   9 +-
 frontend/src/lang/modules/en.ts               |   2 +
 frontend/src/lang/modules/tw.ts               |   2 +
 frontend/src/lang/modules/zh.ts               |   2 +
 frontend/src/routers/modules/website.ts       |  10 +
 frontend/src/views/app-store/apps/index.vue   |   9 +-
 frontend/src/views/app-store/detail/index.vue |   9 +-
 frontend/src/views/website/runtime/index.vue  |   4 +
 .../views/website/runtime/python/index.vue    | 307 ++++++++++++++
 .../website/runtime/python/operate/index.vue  | 398 ++++++++++++++++++
 14 files changed, 752 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/views/website/runtime/python/index.vue
 create mode 100644 frontend/src/views/website/runtime/python/operate/index.vue

diff --git a/backend/app/service/runtime.go b/backend/app/service/runtime.go
index 342ab5dada23..ae69bdfafc0c 100644
--- a/backend/app/service/runtime.go
+++ b/backend/app/service/runtime.go
@@ -83,7 +83,7 @@ func (r *RuntimeService) Create(create request.RuntimeCreate) (*model.Runtime, e
 		if exist != nil {
 			return nil, buserr.New(constant.ErrImageExist)
 		}
-	case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo:
+	case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo, constant.RuntimePython:
 		if !fileOp.Stat(create.CodeDir) {
 			return nil, buserr.New(constant.ErrPathNotFound)
 		}
@@ -133,7 +133,7 @@ func (r *RuntimeService) Create(create request.RuntimeCreate) (*model.Runtime, e
 		if err = handlePHP(create, runtime, fileOp, appVersionDir); err != nil {
 			return nil, err
 		}
-	case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo:
+	case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo, constant.RuntimePython:
 		runtime.Port = create.Port
 		if err = handleNodeAndJava(create, runtime, fileOp, appVersionDir); err != nil {
 			return nil, err
@@ -217,7 +217,7 @@ func (r *RuntimeService) Delete(runtimeDelete request.RuntimeDelete) error {
 					global.LOG.Errorf("delete image id [%s] error %v", imageID, err)
 				}
 			}
-		case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo:
+		case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo, constant.RuntimePython:
 			if out, err := compose.Down(runtime.GetComposePath()); err != nil && !runtimeDelete.ForceDelete {
 				if out != "" {
 					return errors.New(out)
@@ -300,7 +300,7 @@ func (r *RuntimeService) Get(id uint) (*response.RuntimeDTO, error) {
 			}
 		}
 		res.AppParams = appParams
-	case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo:
+	case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo, constant.RuntimePython:
 		res.Params = make(map[string]interface{})
 		envs, err := gotenv.Unmarshal(runtime.Env)
 		if err != nil {
@@ -361,7 +361,7 @@ func (r *RuntimeService) Update(req request.RuntimeUpdate) error {
 		if exist != nil {
 			return buserr.New(constant.ErrImageExist)
 		}
-	case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo:
+	case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo, constant.RuntimePython:
 		if runtime.Port != req.Port {
 			if err = checkPortExist(req.Port); err != nil {
 				return err
@@ -441,7 +441,7 @@ func (r *RuntimeService) Update(req request.RuntimeUpdate) error {
 			return err
 		}
 		go buildRuntime(runtime, imageID, req.Rebuild)
-	case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo:
+	case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo, constant.RuntimePython:
 		runtime.Version = req.Version
 		runtime.CodeDir = req.CodeDir
 		runtime.Port = req.Port
diff --git a/backend/app/service/runtime_utils.go b/backend/app/service/runtime_utils.go
index acebcf24d560..afb1c856383e 100644
--- a/backend/app/service/runtime_utils.go
+++ b/backend/app/service/runtime_utils.go
@@ -338,6 +338,14 @@ func handleParams(create request.RuntimeCreate, projectDir string) (composeConte
 		if err != nil {
 			return
 		}
+	case constant.RuntimePython:
+		create.Params["CODE_DIR"] = create.CodeDir
+		create.Params["PYTHON_VERSION"] = create.Version
+		create.Params["PANEL_APP_PORT_HTTP"] = create.Port
+		composeContent, err = handleCompose(env, composeContent, create, projectDir)
+		if err != nil {
+			return
+		}
 	}
 
 	newMap := make(map[string]string)
@@ -384,7 +392,8 @@ func handleCompose(env gotenv.Env, composeContent []byte, create request.Runtime
 				ports = append(ports, "${HOST_IP}:${PANEL_APP_PORT_HTTP}:${JAVA_APP_PORT}")
 			case constant.RuntimeGo:
 				ports = append(ports, "${HOST_IP}:${PANEL_APP_PORT_HTTP}:${GO_APP_PORT}")
-
+			case constant.RuntimePython:
+				ports = append(ports, "${HOST_IP}:${PANEL_APP_PORT_HTTP}:${APP_PORT}")
 			}
 
 			for i, port := range create.ExposedPorts {
diff --git a/backend/app/service/website.go b/backend/app/service/website.go
index 8c1466055951..b55ee8a86251 100644
--- a/backend/app/service/website.go
+++ b/backend/app/service/website.go
@@ -352,7 +352,7 @@ func (w WebsiteService) CreateWebsite(create request.WebsiteCreate) (err error)
 				}
 				website.Proxy = proxy
 			}
-		case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo:
+		case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo, constant.RuntimePython:
 			website.Proxy = fmt.Sprintf("127.0.0.1:%d", runtime.Port)
 		}
 	}
diff --git a/backend/app/service/website_utils.go b/backend/app/service/website_utils.go
index bad21c998dc2..5bdf02413127 100644
--- a/backend/app/service/website_utils.go
+++ b/backend/app/service/website_utils.go
@@ -276,7 +276,7 @@ func configDefaultNginx(website *model.Website, domains []model.WebsiteDomain, a
 				server.UpdateRoot(rootIndex)
 				server.UpdatePHPProxy([]string{website.Proxy}, "")
 			}
-		case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo:
+		case constant.RuntimeNode, constant.RuntimeJava, constant.RuntimeGo, constant.RuntimePython:
 			proxy := fmt.Sprintf("http://127.0.0.1:%d", runtime.Port)
 			server.UpdateRootProxy([]string{proxy})
 		}
diff --git a/backend/constant/runtime.go b/backend/constant/runtime.go
index 55a5249834ef..55894870357e 100644
--- a/backend/constant/runtime.go
+++ b/backend/constant/runtime.go
@@ -14,10 +14,11 @@ const (
 	RuntimeUnhealthy  = "unhealthy"
 	RuntimeCreating   = "creating"
 
-	RuntimePHP  = "php"
-	RuntimeNode = "node"
-	RuntimeJava = "java"
-	RuntimeGo   = "go"
+	RuntimePHP    = "php"
+	RuntimeNode   = "node"
+	RuntimeJava   = "java"
+	RuntimeGo     = "go"
+	RuntimePython = "python"
 
 	RuntimeProxyUnix = "unix"
 	RuntimeProxyTcp  = "tcp"
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 61e04ad5dc28..96e94e5d2c6a 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -2388,6 +2388,8 @@ const message = {
         javaDirHelper: 'The directory must contain jar files, subdirectories are also acceptable',
         goHelper: 'Please provide a complete start command, for example: go run main.go or ./main',
         goDirHelper: 'The directory must contain go files or binary files, subdirectories are also acceptable',
+        pythonHelper:
+            'Please fill in the complete startup command, for example: pip install -r requirements.txt && python manage.py runserver 0.0.0.0:5000',
     },
     process: {
         pid: 'Process ID',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index 70d319d6878e..caef4ee4ddf1 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -2214,6 +2214,8 @@ const message = {
         javaDirHelper: '目錄中要包含 jar 包，子目錄中包含也可',
         goHelper: '請填寫完整啟動命令，例如：go run main.go 或 ./main',
         goDirHelper: '目錄中要包含 go 文件或者二進制文件，子目錄中包含也可',
+        pythonHelper:
+            '請填入完整啟動指令，例如：pip install -r requirements.txt && python manage.py runserver 0.0.0.0:5000',
     },
     process: {
         pid: '進程ID',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 0a8339239113..f66207f43e68 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -2217,6 +2217,8 @@ const message = {
         javaDirHelper: '目录中要包含 jar 包，子目录中包含也可',
         goHelper: '请填写完整启动命令，例如：go run main.go 或 ./main',
         goDirHelper: '目录中要包含 go 文件或者二进制文件，子目录中包含也可',
+        pythonHelper:
+            '请填写完整启动命令，例如：pip install -r requirements.txt && python manage.py runserver 0.0.0.0:5000',
     },
     process: {
         pid: '进程ID',
diff --git a/frontend/src/routers/modules/website.ts b/frontend/src/routers/modules/website.ts
index 39b24aa4a094..17625555b843 100644
--- a/frontend/src/routers/modules/website.ts
+++ b/frontend/src/routers/modules/website.ts
@@ -78,6 +78,16 @@ const webSiteRouter = {
                 requiresAuth: false,
             },
         },
+        {
+            path: '/websites/runtimes/python',
+            name: 'python',
+            hidden: true,
+            component: () => import('@/views/website/runtime/python/index.vue'),
+            meta: {
+                activeMenu: '/websites/runtimes/python',
+                requiresAuth: false,
+            },
+        },
     ],
 };
 
diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue
index 19adb5ad1188..c1bc85cb0438 100644
--- a/frontend/src/views/app-store/apps/index.vue
+++ b/frontend/src/views/app-store/apps/index.vue
@@ -224,16 +224,11 @@ const search = async (req: App.AppReq) => {
 const openInstall = (app: App.App) => {
     switch (app.type) {
         case 'php':
-            router.push({ path: '/websites/runtimes/php' });
-            break;
         case 'node':
-            router.push({ path: '/websites/runtimes/node' });
-            break;
         case 'java':
-            router.push({ path: '/websites/runtimes/java' });
-            break;
         case 'go':
-            router.push({ path: '/websites/runtimes/go' });
+        case 'python':
+            router.push({ path: '/websites/runtimes/' + app.type });
             break;
         default:
             const params = {
diff --git a/frontend/src/views/app-store/detail/index.vue b/frontend/src/views/app-store/detail/index.vue
index 2929dc083c28..71505691e546 100644
--- a/frontend/src/views/app-store/detail/index.vue
+++ b/frontend/src/views/app-store/detail/index.vue
@@ -142,16 +142,11 @@ const toLink = (link: string) => {
 const openInstall = () => {
     switch (app.value.type) {
         case 'php':
-            router.push({ path: '/websites/runtimes/php' });
-            break;
         case 'node':
-            router.push({ path: '/websites/runtimes/node' });
-            break;
         case 'java':
-            router.push({ path: '/websites/runtimes/java' });
-            break;
         case 'go':
-            router.push({ path: '/websites/runtimes/go' });
+        case 'python':
+            router.push({ path: '/websites/runtimes/' + app.value.type });
             break;
         default:
             const params = {
diff --git a/frontend/src/views/website/runtime/index.vue b/frontend/src/views/website/runtime/index.vue
index 7e403aa333b1..2fa8d18df06c 100644
--- a/frontend/src/views/website/runtime/index.vue
+++ b/frontend/src/views/website/runtime/index.vue
@@ -25,5 +25,9 @@ const buttons = [
         label: 'Go',
         path: '/websites/runtimes/go',
     },
+    {
+        label: 'Python',
+        path: '/websites/runtimes/python',
+    },
 ];
 </script>
diff --git a/frontend/src/views/website/runtime/python/index.vue b/frontend/src/views/website/runtime/python/index.vue
new file mode 100644
index 000000000000..11e9b4615893
--- /dev/null
+++ b/frontend/src/views/website/runtime/python/index.vue
@@ -0,0 +1,307 @@
+<template>
+    <div>
+        <RouterMenu />
+        <LayoutContent :title="'Python'" v-loading="loading">
+            <template #prompt>
+                <el-alert type="info" :closable="false">
+                    <template #title>
+                        <span class="input-help whitespace-break-spaces">
+                            {{ $t('runtime.statusHelper') }}
+                        </span>
+                    </template>
+                </el-alert>
+            </template>
+            <template #toolbar>
+                <div class="flex flex-wrap gap-3">
+                    <el-button type="primary" @click="openCreate">
+                        {{ $t('runtime.create') }}
+                    </el-button>
+
+                    <el-button type="primary" plain @click="onOpenBuildCache()">
+                        {{ $t('container.cleanBuildCache') }}
+                    </el-button>
+                </div>
+            </template>
+            <template #main>
+                <ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()">
+                    <el-table-column
+                        :label="$t('commons.table.name')"
+                        fix
+                        prop="name"
+                        min-width="120px"
+                        show-overflow-tooltip
+                    >
+                        <template #default="{ row }">
+                            <el-text type="primary" class="cursor-pointer" @click="openDetail(row)">
+                                {{ row.name }}
+                            </el-text>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('website.runDir')" prop="codeDir">
+                        <template #default="{ row }">
+                            <el-button type="primary" link @click="toFolder(row.codeDir)">
+                                <el-icon>
+                                    <FolderOpened />
+                                </el-icon>
+                            </el-button>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('runtime.version')" prop="version"></el-table-column>
+                    <el-table-column :label="$t('runtime.externalPort')" prop="port">
+                        <template #default="{ row }">
+                            {{ row.port }}
+                            <el-button link :icon="Promotion" @click="goDashboard(row.port, 'http')"></el-button>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('commons.table.status')" prop="status">
+                        <template #default="{ row }">
+                            <el-popover
+                                v-if="row.status === 'error'"
+                                placement="bottom"
+                                :width="400"
+                                trigger="hover"
+                                :content="row.message"
+                                popper-class="max-h-[300px] overflow-auto"
+                            >
+                                <template #reference>
+                                    <Status :key="row.status" :status="row.status"></Status>
+                                </template>
+                            </el-popover>
+                            <div v-else>
+                                <Status :key="row.status" :status="row.status"></Status>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column :label="$t('commons.button.log')" prop="path">
+                        <template #default="{ row }">
+                            <el-button @click="openLog(row)" link type="primary">{{ $t('website.check') }}</el-button>
+                        </template>
+                    </el-table-column>
+                    <el-table-column
+                        prop="createdAt"
+                        :label="$t('commons.table.date')"
+                        :formatter="dateFormat"
+                        show-overflow-tooltip
+                        min-width="120"
+                        fix
+                    />
+                    <fu-table-operations
+                        :ellipsis="mobile ? 0 : 10"
+                        :min-width="mobile ? 'auto' : 300"
+                        :buttons="buttons"
+                        :label="$t('commons.table.operate')"
+                        fixed="right"
+                        fix
+                    />
+                </ComplexTable>
+            </template>
+        </LayoutContent>
+        <Operate ref="operateRef" @close="search" />
+        <Delete ref="deleteRef" @close="search" />
+        <ComposeLogs ref="composeLogRef" />
+        <PortJumpDialog ref="dialogPortJumpRef" />
+        <AppResources ref="checkRef" @close="search" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, reactive, ref, computed } from 'vue';
+import { Runtime } from '@/api/interface/runtime';
+import { OperateRuntime, RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
+import { dateFormat } from '@/utils/util';
+import Operate from '@/views/website/runtime/python/operate/index.vue';
+import Status from '@/components/status/index.vue';
+import Delete from '@/views/website/runtime/delete/index.vue';
+import i18n from '@/lang';
+import RouterMenu from '../index.vue';
+import router from '@/routers/router';
+import ComposeLogs from '@/components/compose-log/index.vue';
+import { Promotion } from '@element-plus/icons-vue';
+import PortJumpDialog from '@/components/port-jump/index.vue';
+import AppResources from '@/views/website/runtime/php/check/index.vue';
+import { ElMessageBox } from 'element-plus';
+import { containerPrune } from '@/api/modules/container';
+import { MsgSuccess } from '@/utils/message';
+import { GlobalStore } from '@/store';
+
+let timer: NodeJS.Timer | null = null;
+const loading = ref(false);
+const items = ref<Runtime.RuntimeDTO[]>([]);
+const operateRef = ref();
+const deleteRef = ref();
+const dialogPortJumpRef = ref();
+const composeLogRef = ref();
+const checkRef = ref();
+
+const globalStore = GlobalStore();
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
+const paginationConfig = reactive({
+    cacheSizeKey: 'runtime-page-size',
+    currentPage: 1,
+    pageSize: 10,
+    total: 0,
+});
+const req = reactive<Runtime.RuntimeReq>({
+    name: '',
+    page: 1,
+    pageSize: 40,
+    type: 'python',
+});
+const buttons = [
+    {
+        label: i18n.global.t('container.stop'),
+        click: function (row: Runtime.Runtime) {
+            operateRuntime('down', row.id);
+        },
+        disabled: function (row: Runtime.Runtime) {
+            return row.status === 'recreating' || row.status === 'stopped';
+        },
+    },
+    {
+        label: i18n.global.t('container.start'),
+        click: function (row: Runtime.Runtime) {
+            operateRuntime('up', row.id);
+        },
+        disabled: function (row: Runtime.Runtime) {
+            return row.status === 'starting' || row.status === 'recreating' || row.status === 'running';
+        },
+    },
+    {
+        label: i18n.global.t('container.restart'),
+        click: function (row: Runtime.Runtime) {
+            operateRuntime('restart', row.id);
+        },
+        disabled: function (row: Runtime.Runtime) {
+            return row.status === 'recreating';
+        },
+    },
+    {
+        label: i18n.global.t('commons.button.edit'),
+        click: function (row: Runtime.Runtime) {
+            openDetail(row);
+        },
+        disabled: function (row: Runtime.Runtime) {
+            return row.status === 'recreating';
+        },
+    },
+    {
+        label: i18n.global.t('commons.button.delete'),
+        click: function (row: Runtime.Runtime) {
+            openDelete(row);
+        },
+    },
+];
+
+const search = async () => {
+    req.page = paginationConfig.currentPage;
+    req.pageSize = paginationConfig.pageSize;
+    loading.value = true;
+    try {
+        const res = await SearchRuntimes(req);
+        items.value = res.data.items;
+        paginationConfig.total = res.data.total;
+    } catch (error) {
+    } finally {
+        loading.value = false;
+    }
+};
+
+const sync = () => {
+    SyncRuntime();
+};
+
+const openCreate = () => {
+    operateRef.value.acceptParams({ type: 'python', mode: 'create' });
+};
+
+const openDetail = (row: Runtime.Runtime) => {
+    operateRef.value.acceptParams({ type: row.type, mode: 'edit', id: row.id });
+};
+
+const openDelete = async (row: Runtime.Runtime) => {
+    RuntimeDeleteCheck(row.id).then(async (res) => {
+        const items = res.data;
+        if (res.data && res.data.length > 0) {
+            checkRef.value.acceptParams({ items: items, key: 'website', installID: row.id });
+        } else {
+            deleteRef.value.acceptParams(row.id, row.name);
+        }
+    });
+};
+
+const onOpenBuildCache = () => {
+    ElMessageBox.confirm(i18n.global.t('container.delBuildCacheHelper'), i18n.global.t('container.cleanBuildCache'), {
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
+        type: 'info',
+    }).then(async () => {
+        loading.value = true;
+        let params = {
+            pruneType: 'buildcache',
+            withTagAll: false,
+        };
+        await containerPrune(params)
+            .then((res) => {
+                loading.value = false;
+                MsgSuccess(i18n.global.t('container.cleanSuccess', [res.data.deletedNumber]));
+                search();
+            })
+            .catch(() => {
+                loading.value = false;
+            });
+    });
+};
+
+const openLog = (row: any) => {
+    composeLogRef.value.acceptParams({ compose: row.path + '/docker-compose.yml', resource: row.name });
+};
+
+const goDashboard = async (port: any, protocol: string) => {
+    dialogPortJumpRef.value.acceptParams({ port: port, protocol: protocol });
+};
+
+const operateRuntime = async (operate: string, ID: number) => {
+    try {
+        const action = await ElMessageBox.confirm(
+            i18n.global.t('runtime.operatorHelper', [i18n.global.t('commons.operate.' + operate)]),
+            i18n.global.t('commons.operate.' + operate),
+            {
+                confirmButtonText: i18n.global.t('commons.button.confirm'),
+                cancelButtonText: i18n.global.t('commons.button.cancel'),
+                type: 'info',
+            },
+        );
+        if (action === 'confirm') {
+            loading.value = true;
+            await OperateRuntime({ operate: operate, ID: ID });
+            search();
+        }
+    } catch (error) {
+    } finally {
+        loading.value = false;
+    }
+};
+
+const toFolder = (folder: string) => {
+    router.push({ path: '/hosts/files', query: { path: folder } });
+};
+
+onMounted(() => {
+    sync();
+    search();
+    timer = setInterval(() => {
+        search();
+        sync();
+    }, 1000 * 10);
+});
+
+onUnmounted(() => {
+    clearInterval(Number(timer));
+    timer = null;
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/src/views/website/runtime/python/operate/index.vue b/frontend/src/views/website/runtime/python/operate/index.vue
new file mode 100644
index 000000000000..43d8e4bda655
--- /dev/null
+++ b/frontend/src/views/website/runtime/python/operate/index.vue
@@ -0,0 +1,398 @@
+<template>
+    <el-drawer
+        :destroy-on-close="true"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        v-model="open"
+        size="50%"
+    >
+        <template #header>
+            <DrawerHeader
+                :header="$t('runtime.' + mode)"
+                :hideResource="mode == 'create'"
+                :resource="runtime.name"
+                :back="handleClose"
+            />
+        </template>
+        <el-row v-loading="loading">
+            <el-col :span="22" :offset="1">
+                <el-form
+                    ref="runtimeForm"
+                    label-position="top"
+                    :model="runtime"
+                    label-width="125px"
+                    :rules="rules"
+                    :validate-on-rule-change="false"
+                >
+                    <el-form-item :label="$t('commons.table.name')" prop="name">
+                        <el-input :disabled="mode === 'edit'" v-model="runtime.name"></el-input>
+                    </el-form-item>
+                    <el-form-item :label="$t('runtime.app')" prop="appID">
+                        <el-row :gutter="20">
+                            <el-col :span="12">
+                                <el-select
+                                    v-model="runtime.appID"
+                                    :disabled="mode === 'edit'"
+                                    @change="changeApp(runtime.appID)"
+                                    class="p-w-200"
+                                >
+                                    <el-option
+                                        v-for="(app, index) in apps"
+                                        :key="index"
+                                        :label="app.name"
+                                        :value="app.id"
+                                    ></el-option>
+                                </el-select>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-select
+                                    v-model="runtime.version"
+                                    :disabled="mode === 'edit'"
+                                    @change="changeVersion()"
+                                    class="p-w-200"
+                                >
+                                    <el-option
+                                        v-for="(version, index) in appVersions"
+                                        :key="index"
+                                        :label="version"
+                                        :value="version"
+                                    ></el-option>
+                                </el-select>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                    <el-form-item :label="$t('tool.supervisor.dir')" prop="codeDir">
+                        <el-input v-model.trim="runtime.codeDir" :disabled="mode === 'edit'">
+                            <template #prepend>
+                                <FileList
+                                    :disabled="mode === 'edit'"
+                                    :path="runtime.codeDir"
+                                    @choose="getPath"
+                                    :dir="true"
+                                ></FileList>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+                    <el-row :gutter="20">
+                        <el-col :span="18">
+                            <el-form-item :label="$t('runtime.runScript')" prop="params.EXEC_SCRIPT">
+                                <el-input v-model="runtime.params['EXEC_SCRIPT']"></el-input>
+                                <span class="input-help">
+                                    {{ $t('runtime.pythonHelper') }}
+                                </span>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="7">
+                            <el-form-item :label="$t('runtime.appPort')" prop="params.APP_PORT">
+                                <el-input v-model.number="runtime.params['APP_PORT']" />
+                                <span class="input-help">{{ $t('runtime.appPortHelper') }}</span>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="7">
+                            <el-form-item :label="$t('runtime.externalPort')" prop="port">
+                                <el-input v-model.number="runtime.port" />
+                                <span class="input-help">{{ $t('runtime.externalPortHelper') }}</span>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-form-item :label="$t('commons.button.add') + $t('commons.table.port')">
+                                <el-button @click="addPort">
+                                    <el-icon><Plus /></el-icon>
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item :label="$t('app.allowPort')" prop="params.HOST_IP">
+                                <el-switch
+                                    v-model="runtime.params['HOST_IP']"
+                                    :active-value="'0.0.0.0'"
+                                    :inactive-value="'127.0.0.1'"
+                                />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20" v-for="(port, index) of runtime.exposedPorts" :key="index">
+                        <el-col :span="7">
+                            <el-form-item
+                                :prop="'exposedPorts.' + index + '.containerPort'"
+                                :rules="rules.params.APP_PORT"
+                            >
+                                <el-input v-model.number="port.containerPort" :placeholder="$t('runtime.appPort')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="7">
+                            <el-form-item :prop="'exposedPorts.' + index + '.hostPort'" :rules="rules.params.APP_PORT">
+                                <el-input v-model.number="port.hostPort" :placeholder="$t('runtime.externalPort')" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-form-item>
+                                <el-button type="primary" @click="removePort(index)" link>
+                                    {{ $t('commons.button.delete') }}
+                                </el-button>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-form-item :label="$t('app.containerName')" prop="params.CONTAINER_NAME">
+                        <el-input v-model.trim="runtime.params['CONTAINER_NAME']"></el-input>
+                    </el-form-item>
+                </el-form>
+            </el-col>
+        </el-row>
+        <template #footer>
+            <span>
+                <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" @click="submit(runtimeForm)" :disabled="loading">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
+            </span>
+        </template>
+    </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { App } from '@/api/interface/app';
+import { Runtime } from '@/api/interface/runtime';
+import { GetApp, GetAppDetail, SearchApp } from '@/api/modules/app';
+import { CreateRuntime, GetRuntime, UpdateRuntime } from '@/api/modules/runtime';
+import { Rules, checkNumberRange } from '@/global/form-rules';
+import i18n from '@/lang';
+import { MsgError, MsgSuccess } from '@/utils/message';
+import { FormInstance } from 'element-plus';
+import { reactive, ref, watch } from 'vue';
+import DrawerHeader from '@/components/drawer-header/index.vue';
+
+interface OperateRrops {
+    id?: number;
+    mode: string;
+    type: string;
+}
+
+const open = ref(false);
+const apps = ref<App.App[]>([]);
+const runtimeForm = ref<FormInstance>();
+const loading = ref(false);
+const mode = ref('create');
+const editParams = ref<App.InstallParams[]>();
+const appVersions = ref<string[]>([]);
+const appReq = reactive({
+    type: 'python',
+    page: 1,
+    pageSize: 20,
+    resource: 'remote',
+});
+const initData = (type: string) => ({
+    name: '',
+    appDetailID: undefined,
+    image: '',
+    params: {
+        HOST_IP: '0.0.0.0',
+    },
+    type: type,
+    resource: 'appstore',
+    rebuild: false,
+    codeDir: '/',
+    port: 8080,
+    exposedPorts: [],
+});
+let runtime = reactive<Runtime.RuntimeCreate>(initData('python'));
+const rules = ref<any>({
+    name: [Rules.requiredInput, Rules.appName],
+    appID: [Rules.requiredSelect],
+    codeDir: [Rules.requiredInput],
+    port: [Rules.requiredInput, Rules.paramPort, checkNumberRange(1, 65535)],
+    source: [Rules.requiredSelect],
+    params: {
+        APP_PORT: [Rules.requiredInput, Rules.paramPort, checkNumberRange(1, 65535)],
+        HOST_IP: [Rules.requiredSelect],
+        CONTAINER_NAME: [Rules.requiredInput, Rules.containerName],
+        EXEC_SCRIPT: [Rules.requiredInput],
+    },
+});
+const scripts = ref<Runtime.NodeScripts[]>([]);
+const em = defineEmits(['close']);
+
+watch(
+    () => runtime.params['APP_PORT'],
+    (newVal) => {
+        if (newVal && mode.value == 'create') {
+            runtime.port = newVal;
+        }
+    },
+    { deep: true },
+);
+
+watch(
+    () => runtime.name,
+    (newVal) => {
+        if (newVal && mode.value == 'create') {
+            runtime.params['CONTAINER_NAME'] = newVal;
+        }
+    },
+    { deep: true },
+);
+
+const handleClose = () => {
+    open.value = false;
+    em('close', false);
+    runtimeForm.value?.resetFields();
+};
+
+const getPath = (codeDir: string) => {
+    runtime.codeDir = codeDir;
+};
+
+const addPort = () => {
+    runtime.exposedPorts.push({
+        hostPort: undefined,
+        containerPort: undefined,
+    });
+};
+
+const removePort = (index: number) => {
+    runtime.exposedPorts.splice(index, 1);
+};
+
+const searchApp = (appID: number) => {
+    SearchApp(appReq).then((res) => {
+        apps.value = res.data.items || [];
+        if (res.data && res.data.items && res.data.items.length > 0) {
+            if (appID == null) {
+                runtime.appID = res.data.items[0].id;
+                getApp(res.data.items[0].key, mode.value);
+            } else {
+                res.data.items.forEach((item) => {
+                    if (item.id === appID) {
+                        getApp(item.key, mode.value);
+                    }
+                });
+            }
+        }
+    });
+};
+
+const changeApp = (appID: number) => {
+    for (const app of apps.value) {
+        if (app.id === appID) {
+            getApp(app.key, mode.value);
+            break;
+        }
+    }
+};
+
+const changeVersion = () => {
+    loading.value = true;
+    GetAppDetail(runtime.appID, runtime.version, 'runtime')
+        .then((res) => {
+            runtime.appDetailID = res.data.id;
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
+
+const getApp = (appkey: string, mode: string) => {
+    GetApp(appkey).then((res) => {
+        appVersions.value = res.data.versions || [];
+        if (res.data.versions.length > 0) {
+            if (mode === 'create') {
+                runtime.version = res.data.versions[0];
+                changeVersion();
+            }
+        }
+    });
+};
+
+const submit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    await formEl.validate((valid) => {
+        if (!valid) {
+            return;
+        }
+        if (runtime.exposedPorts && runtime.exposedPorts.length > 0) {
+            const containerPortMap = new Map();
+            const hostPortMap = new Map();
+            containerPortMap[runtime.params['APP_PORT']] = true;
+            hostPortMap[runtime.port] = true;
+            for (const port of runtime.exposedPorts) {
+                if (containerPortMap[port.containerPort]) {
+                    MsgError(i18n.global.t('runtime.portError'));
+                    return;
+                }
+                if (hostPortMap[port.hostPort]) {
+                    MsgError(i18n.global.t('runtime.portError'));
+                    return;
+                }
+                hostPortMap[port.hostPort] = true;
+                containerPortMap[port.containerPort] = true;
+            }
+        }
+
+        if (mode.value == 'create') {
+            loading.value = true;
+            CreateRuntime(runtime)
+                .then(() => {
+                    MsgSuccess(i18n.global.t('commons.msg.createSuccess'));
+                    handleClose();
+                })
+                .finally(() => {
+                    loading.value = false;
+                });
+        } else {
+            loading.value = true;
+            UpdateRuntime(runtime)
+                .then(() => {
+                    MsgSuccess(i18n.global.t('commons.msg.updateSuccess'));
+                    handleClose();
+                })
+                .finally(() => {
+                    loading.value = false;
+                });
+        }
+    });
+};
+
+const getRuntime = async (id: number) => {
+    try {
+        const res = await GetRuntime(id);
+        const data = res.data;
+        Object.assign(runtime, {
+            id: data.id,
+            name: data.name,
+            appDetailId: data.appDetailID,
+            image: data.image,
+            type: data.type,
+            resource: data.resource,
+            appID: data.appID,
+            version: data.version,
+            rebuild: true,
+            source: data.source,
+            params: data.params,
+            codeDir: data.codeDir,
+            port: data.port,
+        });
+        runtime.exposedPorts = data.exposedPorts || [];
+        editParams.value = data.appParams;
+        searchApp(data.appID);
+        open.value = true;
+    } catch (error) {}
+};
+
+const acceptParams = async (props: OperateRrops) => {
+    mode.value = props.mode;
+    scripts.value = [];
+    if (props.mode === 'create') {
+        Object.assign(runtime, initData(props.type));
+        searchApp(null);
+        open.value = true;
+    } else {
+        getRuntime(props.id);
+    }
+};
+
+defineExpose({
+    acceptParams,
+});
+</script>