feat: 应用创建增加 cpu 和内存最大值提示

Author: zhengkunwang223

backend/app/service/website_ssl.go

@@ -66,10 +66,7 @@ func (w WebsiteSSLService) Search(search request.WebsiteSSLSearch) ([]response.W
 		opts   []repo.DBOption
 		result []response.WebsiteSSLDTO
 	)
-	opts = append(opts, commonRepo.WithOrderBy("created_at desc"))
-	if search.AcmeAccountID >= 0 {
-		opts = append(opts, websiteSSLRepo.WithByAcmeAccountId(search.AcmeAccountID))
-	}
+	opts = append(opts, commonRepo.WithOrderBy("created_at desc"), websiteSSLRepo.WithByAcmeAccountId(search.AcmeAccountID))
 	sslList, err := websiteSSLRepo.List(opts...)
 	if err != nil {
 		return nil, err

frontend/src/lang/modules/en.ts

@@ -1175,8 +1175,7 @@ const message = {
         containerName: 'Container Name',
         containerNameHelper: 'can be empty, it will be automatically generated',
         allowPort: 'Port external access',
-        allowPortHelper:
-            'Allowing external port access will release the firewall port, please do not release the php operating environment',
+        allowPortHelper: 'Allowing external port access will release the firewall port',
         appInstallWarn:
             'The application does not release the external access port by default, you can choose to release it in the advanced settings',
         upgradeStart: 'Start upgrading! Please refresh the page later',

frontend/src/lang/modules/tw.ts

@@ -1116,7 +1116,7 @@ const message = {
         containerName: '容器名稱',
         containerNameHelper: '可以為空，為空自動生成',
         allowPort: '端口外部訪問',
-        allowPortHelper: '允許端口外部訪問會放開防火墻端口，php運行環境請勿放開',
+        allowPortHelper: '允許端口外部訪問會放開防火墻端口',
         appInstallWarn: '應用端口默認不允許外部訪問，可以在下方高級設置中選擇放開',
         upgradeStart: '開始升級！請稍後刷新頁面',
         toFolder: '進入安裝目錄',

frontend/src/lang/modules/zh.ts

@@ -1122,7 +1122,7 @@ const message = {
         containerName: '容器名称',
         containerNameHelper: '可以为空，为空自动生成',
         allowPort: '端口外部访问',
-        allowPortHelper: '允许端口外部访问会放开防火墙端口，php运行环境请勿放开',
+        allowPortHelper: '允许端口外部访问会放开防火墙端口',
         appInstallWarn: '应用端口默认不允许外部访问，可以在下方高级设置中选择放开',
         upgradeStart: '开始升级！请稍后刷新页面',
         toFolder: '进入安装目录',
@@ -1133,7 +1133,7 @@ const message = {
         allReadyInstalled: '已安装',
         installHelper: '配置镜像加速可以解决镜像拉取失败的问题',
         upgradeHelper: '异常应用需要先同步到正常状态',
-        installWarn: '未开启端口外部访问，无法通过外网IP:端口访问，是否继续？',
+        installWarn: '当前未开启端口外部访问，将无法通过外网IP:端口访问，是否继续？',
         restoreWarn: '恢复操作将删除该应用当前数据并重启。此操作不可回滚，是否继续?',
     },
     website: {

frontend/src/views/app-store/detail/install/index.vue

@@ -41,23 +41,39 @@
                                 :placeholder="$t('app.containerNameHelper')"
                             ></el-input>
                         </el-form-item>
-                        <el-form-item :label="$t('container.cpuQuota')" prop="cpuQuota">
+                        <el-form-item
+                            :label="$t('container.cpuQuota')"
+                            prop="cpuQuota"
+                            :rules="checkNumberRange(0, limits.cpu)"
+                        >
                             <el-input type="number" style="width: 40%" v-model.number="req.cpuQuota" maxlength="5">
                                 <template #append>{{ $t('app.cpuCore') }}</template>
                             </el-input>
-                            <span class="input-help">{{ $t('container.limitHelper') }}</span>
+                            <span class="input-help">
+                                {{ $t('container.limitHelper', [limits.cpu]) }}{{ $t('commons.units.core') }}
+                            </span>
                         </el-form-item>
-                        <el-form-item :label="$t('container.memoryLimit')" prop="memoryLimit">
+                        <el-form-item
+                            :label="$t('container.memoryLimit')"
+                            prop="memoryLimit"
+                            :rules="checkNumberRange(0, limits.memory)"
+                        >
                             <el-input style="width: 40%" v-model.number="req.memoryLimit" maxlength="10">
                                 <template #append>
-                                    <el-select v-model="req.memoryUnit" placeholder="Select" style="width: 85px">
-                                        <el-option label="KB" value="K" />
+                                    <el-select
+                                        v-model="req.memoryUnit"
+                                        placeholder="Select"
+                                        style="width: 85px"
+                                        @change="chnageUnit"
+                                    >
                                         <el-option label="MB" value="M" />
                                         <el-option label="GB" value="G" />
                                     </el-select>
                                 </template>
                             </el-input>
-                            <span class="input-help">{{ $t('container.limitHelper') }}</span>
+                            <span class="input-help">
+                                {{ $t('container.limitHelper', [limits.memory]) }}{{ req.memoryUnit }}B
+                            </span>
                         </el-form-item>
                         <el-form-item prop="allowPort" v-if="canEditPort(installData.app)">
                             <el-checkbox v-model="req.allowPort" :label="$t('app.allowPort')" size="large" />
@@ -104,7 +120,7 @@ import { InstallApp } from '@/api/modules/app';
 import { Rules, checkNumberRange } from '@/global/form-rules';
 import { canEditPort } from '@/global/business';
 import { FormInstance, FormRules } from 'element-plus';
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import Params from '../params/index.vue';
 import Header from '@/components/drawer-header/index.vue';
@@ -113,6 +129,8 @@ import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import i18n from '@/lang';
 import { MsgError } from '@/utils/message';
+import { Container } from '@/api/interface/container';
+import { loadResourceLimit } from '@/api/modules/container';
 
 const extensions = [javascript(), oneDark];
 const router = useRouter();
@@ -154,12 +172,25 @@ const initData = () => ({
     dockerCompose: '',
 });
 const req = reactive(initData());
+const limits = ref<Container.ResourceLimit>({
+    cpu: null as number,
+    memory: null as number,
+});
+const oldMemory = ref<number>(0);
 
 const handleClose = () => {
     open.value = false;
     resetForm();
 };
 
+const chnageUnit = () => {
+    if (req.memoryUnit == 'M') {
+        limits.value.memory = oldMemory.value;
+    } else {
+        limits.value.memory = oldMemory.value / 1024;
+    }
+};
+
 const resetForm = () => {
     if (paramForm.value) {
         paramForm.value.clearValidate();
@@ -193,24 +224,43 @@ const submit = async (formEl: FormInstance | undefined) => {
         if (req.memoryLimit < 0) {
             req.memoryLimit = 0;
         }
-        ElMessageBox.confirm(i18n.global.t('app.installWarn'), i18n.global.t('app.checkTitle'), {
-            confirmButtonText: i18n.global.t('commons.button.confirm'),
-            cancelButtonText: i18n.global.t('commons.button.cancel'),
-        }).then(async () => {
-            loading.value = true;
-            InstallApp(req)
-                .then(() => {
-                    handleClose();
-                    router.push({ path: '/apps/installed' });
-                })
-                .finally(() => {
-                    loading.value = false;
-                });
-        });
+        if (req.advanced && !req.allowPort) {
+            ElMessageBox.confirm(i18n.global.t('app.installWarn'), i18n.global.t('app.checkTitle'), {
+                confirmButtonText: i18n.global.t('commons.button.confirm'),
+                cancelButtonText: i18n.global.t('commons.button.cancel'),
+            }).then(async () => {
+                install();
+            });
+        } else {
+            install();
+        }
     });
 };
 
+const install = () => {
+    loading.value = true;
+    InstallApp(req)
+        .then(() => {
+            handleClose();
+            router.push({ path: '/apps/installed' });
+        })
+        .finally(() => {
+            loading.value = false;
+        });
+};
+
+const loadLimit = async () => {
+    const res = await loadResourceLimit();
+    limits.value = res.data;
+    limits.value.memory = Number((limits.value.memory / 1024 / 1024).toFixed(2));
+    oldMemory.value = limits.value.memory;
+};
+
 defineExpose({
     acceptParams,
 });
+
+onMounted(() => {
+    loadLimit();
+});
 </script>