feat: 运行环境支持选择镜像源 (#2441)

backend/app/service/runtime.go

@@ -278,6 +278,9 @@ func (r *RuntimeService) Get(id uint) (*response.RuntimeDTO, error) {
 				res.Params[k] = v
 			}
 		}
+		if v, ok := envs["CONTAINER_PACKAGE_URL"]; ok {
+			res.Source = v
+		}
 	}
 
 	return &res, nil

backend/app/service/runtime_utils.go

@@ -310,6 +310,7 @@ func handleParams(create request.RuntimeCreate, projectDir string) (composeConte
 		} else {
 			create.Params["RUN_INSTALL"] = "0"
 		}
+		create.Params["CONTAINER_PACKAGE_URL"] = create.Source
 	}
 
 	newMap := make(map[string]string)

frontend/src/lang/modules/en.ts

@@ -1774,6 +1774,9 @@ const message = {
             'The {0} operation will be performed on the selected operating environment. Do you want to continue? ',
         statusHelper:
             'Status description: Starting - the container has been started, but the application is starting; abnormal - the container has been started, but the application status is abnormal',
+        taobao: 'Taobao',
+        tencent: 'Tencent',
+        imageSource: 'Image source',
     },
     process: {
         pid: 'Process ID',

frontend/src/lang/modules/tw.ts

@@ -1676,6 +1676,9 @@ const message = {
         close: '關閉',
         operatorHelper: '將對選取的執行環境進行 {0} 操作，是否繼續？ ',
         statusHelper: '狀態說明：啟動中-容器已啟動，但應用正在啟動；異常-容器已啟動，但應用狀態異常',
+        taobao: 'Taobao',
+        tencent: 'Tencent',
+        imageSource: 'Image source',
     },
     process: {
         pid: '進程ID',

frontend/src/lang/modules/zh.ts

@@ -1675,6 +1675,9 @@ const message = {
         close: '关闭',
         operatorHelper: '将对选中的运行环境进行 {0} 操作，是否继续？',
         statusHelper: '状态说明：启动中-容器已启动，但应用正在启动；异常-容器已启动，但应用状态异常',
+        taobao: '淘宝',
+        tencent: '腾讯',
+        imageSource: '镜像源',
     },
     process: {
         pid: '进程ID',

frontend/src/views/website/runtime/node/operate/index.vue

@@ -82,20 +82,20 @@
                         <span class="input-help">{{ $t('runtime.runScriptHelper') }}</span>
                     </el-form-item>
                     <el-row :gutter="20">
-                        <el-col :span="10">
+                        <el-col :span="9">
                             <el-form-item :label="$t('runtime.appPort')" prop="params.NODE_APP_PORT">
                                 <el-input v-model.number="runtime.params['NODE_APP_PORT']" />
                                 <span class="input-help">{{ $t('runtime.appPortHelper') }}</span>
                             </el-form-item>
                         </el-col>
-                        <el-col :span="10">
+                        <el-col :span="9">
                             <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-col :span="6">
                             <el-form-item :label="$t('app.allowPort')" prop="params.HOST_IP">
                                 <el-select v-model="runtime.params['HOST_IP']">
                                     <el-option :label="$t('runtime.open')" value="0.0.0.0"></el-option>
@@ -110,6 +110,19 @@
                             <el-option label="yarn" value="yarn"></el-option>
                         </el-select>
                     </el-form-item>
+                    <el-form-item :label="$t('runtime.imageSource')" prop="source">
+                        <el-select v-model="runtime.source" filterable allow-create default-first-option>
+                            <el-option
+                                v-for="(source, index) in imageSources"
+                                :key="index"
+                                :label="source.label + ' [' + source.value + ']'"
+                                :value="source.value"
+                            ></el-option>
+                        </el-select>
+                        <span class="input-help">
+                            {{ $t('runtime.phpsourceHelper') }}
+                        </span>
+                    </el-form-item>
                     <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>
@@ -171,24 +184,41 @@ const initData = (type: string) => ({
     rebuild: false,
     codeDir: '/',
     port: 3000,
+    source: 'https://registry.npmjs.org/',
 });
 let runtime = reactive<Runtime.RuntimeCreate>(initData('node'));
 const rules = ref<any>({
-    name: [Rules.appName],
+    name: [Rules.requiredInput, Rules.appName],
     appID: [Rules.requiredSelect],
     codeDir: [Rules.requiredInput],
     port: [Rules.requiredInput, Rules.port],
+    source: [Rules.requiredSelect],
     params: {
         NODE_APP_PORT: [Rules.requiredInput, Rules.port],
         PACKAGE_MANAGER: [Rules.requiredSelect],
         HOST_IP: [Rules.requiredSelect],
         EXEC_SCRIPT: [Rules.requiredSelect],
-        CONTAINER_NAME: [Rules.requiredInput],
+        CONTAINER_NAME: [Rules.requiredInput, Rules.containerName],
     },
 });
 const scripts = ref<Runtime.NodeScripts[]>([]);
 const em = defineEmits(['close']);
 
+const imageSources = [
+    {
+        label: i18n.global.t('runtime.default'),
+        value: 'https://registry.npmjs.org/',
+    },
+    {
+        label: i18n.global.t('runtime.taobao'),
+        value: 'https://registry.npmmirror.com',
+    },
+    {
+        label: i18n.global.t('runtime.tencent'),
+        value: 'https://mirrors.cloud.tencent.com/npm/',
+    },
+];
+
 watch(
     () => runtime.params['NODE_APP_PORT'],
     (newVal) => {