From 2ca848a37bcc3b05f7ea9879e7a0b6ca8fcedfc7 Mon Sep 17 00:00:00 2001
From: akrike <1625167628@qq.com>
Date: Tue, 16 Dec 2025 21:05:28 +0800
Subject: [PATCH] ui support env config

---
 .../src/components/process/ProcessConfig.vue  | 97 +++++++++++++++++++
 .../src/components/process/ProcessCreate.vue  | 82 ++++++++++++++++
 resources/src/types/process/process.ts        |  1 +
 3 files changed, 180 insertions(+)

diff --git a/resources/src/components/process/ProcessConfig.vue b/resources/src/components/process/ProcessConfig.vue
index 59eb0fe..6bd8071 100644
--- a/resources/src/components/process/ProcessConfig.vue
+++ b/resources/src/components/process/ProcessConfig.vue
@@ -11,6 +11,9 @@ const configForm = ref<Partial<ProcessConfig>>({});
 const pushItems = ref<{ value: any; label: string }[]>([]);
 const pushSelectedValues = ref([]);
 
+// 环境变量键值对列表
+const envVars = ref<{ key: string; value: string }[]>([]);
+
 watch(
   pushSelectedValues,
   (newValues) => {
@@ -39,6 +42,8 @@ const getConfig = () => {
       pushSelectedValues.value = JSON.parse(
         (e.data!.pushIds as string) == "" ? "[]" : (e.data!.pushIds as string)
       );
+      // 解析环境变量字符串为键值对数组
+      parseEnvString(e.data.env || "");
     }
   });
 };
@@ -47,7 +52,43 @@ const updateJsonString = () => {
   configForm.value.pushIds = JSON.stringify(pushSelectedValues);
 };
 
+// 解析环境变量字符串为键值对数组
+const parseEnvString = (envString: string) => {
+  if (!envString || envString.trim() === "") {
+    envVars.value = [];
+    return;
+  }
+  envVars.value = envString.split(";").map((item) => {
+    const [key, ...valueParts] = item.split("=");
+    return {
+      key: key || "",
+      value: valueParts.join("=") || "", // 处理值中可能包含 = 的情况
+    };
+  }).filter((env) => env.key.trim() !== "");
+};
+
+// 添加环境变量
+const addEnvVar = () => {
+  envVars.value.push({ key: "", value: "" });
+};
+
+// 删除环境变量
+const removeEnvVar = (index: number) => {
+  envVars.value.splice(index, 1);
+};
+
+// 将环境变量数组转换为分号分隔的字符串
+const getEnvString = () => {
+  return envVars.value
+    .filter((env) => env.key.trim() !== "")
+    .map((env) => `${env.key}=${env.value}`)
+    .join(";");
+};
+
 const editConfig = () => {
+  // 将环境变量转换为字符串格式
+  configForm.value.env = getEnvString();
+
   putProcessConfig(configForm.value).then((e) => {
     if (e.code === 0) {
       snackbarStore.showSuccessMessage("sucess");
@@ -117,6 +158,62 @@ const initPushItem = () => {
             </v-col>
           </v-row>
 
+          <v-divider class="my-4"></v-divider>
+
+          <!-- 环境变量配置 -->
+          <v-row>
+            <v-col cols="12">
+              <div class="d-flex align-center mb-2">
+                <span class="text-subtitle-2">环境变量</span>
+                <v-btn
+                  size="small"
+                  icon="mdi-plus"
+                  variant="text"
+                  color="primary"
+                  @click="addEnvVar"
+                  class="ml-2"
+                ></v-btn>
+              </div>
+            </v-col>
+          </v-row>
+
+          <v-row
+            v-for="(env, index) in envVars"
+            :key="index"
+            align="center"
+            class="mb-2"
+          >
+            <v-col cols="12" sm="5">
+              <v-text-field
+                label="变量名"
+                v-model="env.key"
+                variant="outlined"
+                density="compact"
+                placeholder="例如: PATH"
+                hide-details
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="6">
+              <v-text-field
+                label="变量值"
+                v-model="env.value"
+                variant="outlined"
+                density="compact"
+                placeholder="例如: /usr/bin"
+                hide-details
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="1">
+              <v-btn
+                size="small"
+                icon="mdi-delete"
+                variant="text"
+                color="error"
+                @click="removeEnvVar(index)"
+              ></v-btn>
+            </v-col>
+          </v-row>
+
           <v-divider class="my-4"></v-divider>
           <v-select
             v-model="pushSelectedValues"
diff --git a/resources/src/components/process/ProcessCreate.vue b/resources/src/components/process/ProcessCreate.vue
index af6a352..0eedcbe 100644
--- a/resources/src/components/process/ProcessCreate.vue
+++ b/resources/src/components/process/ProcessCreate.vue
@@ -11,6 +11,9 @@ const configForm = ref<Partial<ProcessConfig>>({});
 const pushItems = ref<{ value: any; label: string }[]>([]);
 const pushSelectedValues = ref([]);
 
+// 环境变量键值对列表
+const envVars = ref<{ key: string; value: string }[]>([]);
+
 watch(
   pushSelectedValues,
   (newValues) => {
@@ -41,11 +44,34 @@ const initPushItem = () => {
   });
 };
 
+// 添加环境变量
+const addEnvVar = () => {
+  envVars.value.push({ key: "", value: "" });
+};
+
+// 删除环境变量
+const removeEnvVar = (index: number) => {
+  envVars.value.splice(index, 1);
+};
+
+// 将环境变量数组转换为分号分隔的字符串
+const getEnvString = () => {
+  return envVars.value
+    .filter((env) => env.key.trim() !== "")
+    .map((env) => `${env.key}=${env.value}`)
+    .join(";");
+};
+
 const create = () => {
+  // 将环境变量转换为字符串格式
+  configForm.value.env = getEnvString();
+
   postProcessConfig(configForm.value).then((e) => {
     if (e.code === 0) {
       snackbarStore.showSuccessMessage("sucess");
       dialog.value = false;
+      // 清空表单
+      envVars.value = [];
     }
   });
 };
@@ -99,6 +125,62 @@ const create = () => {
             </v-col>
           </v-row>
 
+          <v-divider class="my-4"></v-divider>
+
+          <!-- 环境变量配置 -->
+          <v-row>
+            <v-col cols="12">
+              <div class="d-flex align-center mb-2">
+                <span class="text-subtitle-2">环境变量</span>
+                <v-btn
+                  size="small"
+                  icon="mdi-plus"
+                  variant="text"
+                  color="primary"
+                  @click="addEnvVar"
+                  class="ml-2"
+                ></v-btn>
+              </div>
+            </v-col>
+          </v-row>
+
+          <v-row
+            v-for="(env, index) in envVars"
+            :key="index"
+            align="center"
+            class="mb-2"
+          >
+            <v-col cols="12" sm="5">
+              <v-text-field
+                label="变量名"
+                v-model="env.key"
+                variant="outlined"
+                density="compact"
+                placeholder="例如: PATH"
+                hide-details
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="6">
+              <v-text-field
+                label="变量值"
+                v-model="env.value"
+                variant="outlined"
+                density="compact"
+                placeholder="例如: /usr/bin"
+                hide-details
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="1">
+              <v-btn
+                size="small"
+                icon="mdi-delete"
+                variant="text"
+                color="error"
+                @click="removeEnvVar(index)"
+              ></v-btn>
+            </v-col>
+          </v-row>
+
           <v-divider class="my-4"></v-divider>
           <v-select
             v-model="pushSelectedValues"
diff --git a/resources/src/types/process/process.ts b/resources/src/types/process/process.ts
index c0100c0..3daa64b 100644
--- a/resources/src/types/process/process.ts
+++ b/resources/src/types/process/process.ts
@@ -46,4 +46,5 @@ export interface ProcessConfig {
   cgroupEnable: boolean;
   memoryLimit: null;
   cpuLimit: null;
+  env: string;
 }