feat: improve website create function and interface

agent/app/service/website_utils.go

@@ -1107,7 +1107,7 @@ func getWebsiteDomains(domains []request.WebsiteDomain, defaultHTTPPort, default
 		if domain.Domain == "" {
 			continue
 		}
-		if !common.IsValidDomain(domain.Domain) {
+		if !common.IsValidNginxServerName(domain.Domain) {
 			err = buserr.WithName("ErrDomainFormat", domain.Domain)
 			return
 		}

agent/utils/common/common.go

@@ -306,6 +306,10 @@ func IsValidDomain(domain string) bool {
 	return re.GetRegex(re.DomainPattern).MatchString(domain)
 }
 
+func IsValidNginxServerName(serverName string) bool {
+	return re.GetRegex(re.NginxServerNamePattern).MatchString(serverName)
+}
+
 func ContainsChinese(text string) bool {
 	for _, char := range text {
 		if unicode.Is(unicode.Han, char) {

agent/utils/re/re.go

@@ -14,6 +14,7 @@ const (
 	ValidatorNamePattern               = `^[a-zA-Z\p{Han}]{1}[a-zA-Z0-9_\p{Han}]{0,30}$`
 	ValidatorIPPattern                 = `^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$`
 	DomainPattern                      = `^([\w\p{Han}\-\*]{1,100}\.){1,10}([\w\p{Han}\-]{1,24}|[\w\p{Han}\-]{1,24}\.[\w\p{Han}\-]{1,24})(:\d{1,5})?$`
+	NginxServerNamePattern             = `^(?:\*|[\w\p{Han}-]{1,63})(?:\.(?:\*|[\w\p{Han}-]{1,63}))*$`
 	ProxyCacheZonePattern              = `keys_zone=proxy_cache_zone_of_[\w.]+:(\d+)([kmgt]?)`
 	ProxyCacheMaxSizePattern           = `max_size=([0-9.]+)([kmgt]?)`
 	ProxyCacheMaxSizeValidationPattern = `max_size=\d+(\.\d+)?[kmgt]?`
@@ -44,6 +45,7 @@ func Init() {
 		ValidatorNamePattern,
 		ValidatorIPPattern,
 		DomainPattern,
+		NginxServerNamePattern,
 		ProxyCacheZonePattern,
 		ProxyCacheMaxSizePattern,
 		ProxyCacheMaxSizeValidationPattern,

frontend/src/global/mimetype.ts

@@ -458,14 +458,14 @@ export const getWebsiteTypes = () => [
         label: i18n.global.t('runtime.runtime'),
         value: 'runtime',
     },
-    {
-        label: i18n.global.t('website.proxy'),
-        value: 'proxy',
-    },
     {
         label: i18n.global.t('website.static'),
         value: 'static',
     },
+    {
+        label: i18n.global.t('website.proxy'),
+        value: 'proxy',
+    },
     {
         label: i18n.global.t('website.subsite'),
         value: 'subsite',

frontend/src/lang/modules/en.ts

@@ -2639,6 +2639,10 @@ const message = {
         createDb: 'Create Database',
         enableSSLHelper: 'Failure to enable will not affect the creation of the website',
         batchAdd: 'Batch Add Domains',
+        batchInput: 'Batch Input',
+        domainNotFQDN: 'This domain may not be accessible on the public network',
+        domainInvalid: 'Invalid domain format',
+        domainBatchHelper: 'One domain per line, format: domain:port@ssl\nExample: example.com:443@ssl or example.com',
         generateDomain: 'Generate',
         global: 'Global',
         subsite: 'Subsite',

frontend/src/lang/modules/es-es.ts

@@ -2631,6 +2631,11 @@ const message = {
         createDb: 'Crear base de datos',
         enableSSLHelper: 'Si falla, no afectará la creación del sitio',
         batchAdd: 'Añadir múltiples dominios',
+        batchInput: 'Entrada por Lotes',
+        domainNotFQDN: 'Este dominio puede no ser accesible en la red pública',
+        domainInvalid: 'Formato de dominio inválido',
+        domainBatchHelper:
+            'Un dominio por línea, formato: dominio:puerto@ssl\nEjemplo: example.com:443@ssl o example.com',
         generateDomain: 'Generar',
         global: 'Global',
         subsite: 'Subsitio',

frontend/src/lang/modules/ja.ts

@@ -2560,6 +2560,10 @@ const message = {
         createDb: 'データベースを作成',
         enableSSLHelper: 'SSLの有効化に失敗しても、ウェブサイトの作成には影響しません。',
         batchAdd: 'ドメインを一括追加',
+        batchInput: 'バッチ入力',
+        domainNotFQDN: 'このドメインはパブリックネットワークからアクセスできない可能性があります',
+        domainInvalid: 'ドメイン形式が正しくありません',
+        domainBatchHelper: '1行に1ドメイン、形式: domain:port@ssl\n例: example.com:443@ssl または example.com',
         generateDomain: '生成',
         global: 'グローバル',
         subsite: 'サブサイト',

frontend/src/lang/modules/ko.ts

@@ -2515,6 +2515,10 @@ const message = {
         createDb: '데이터베이스 생성',
         enableSSLHelper: 'SSL 활성화 실패는 웹사이트 생성에 영향을 미치지 않습니다.',
         batchAdd: '도메인 일괄 추가',
+        batchInput: '일괄 입력',
+        domainNotFQDN: '이 도메인은 공용 네트워크에서 액세스할 수 없을 수 있습니다',
+        domainInvalid: '도메인 형식이 올바르지 않습니다',
+        domainBatchHelper: '한 줄에 하나의 도메인, 형식: domain:port@ssl\n예: example.com:443@ssl 또는 example.com',
         generateDomain: '생성',
         global: '글로벌',
         subsite: '하위 사이트',

frontend/src/lang/modules/ms.ts

@@ -2616,6 +2616,11 @@ const message = {
         createDb: 'Cipta Pangkalan Data',
         enableSSLHelper: 'Kegagalan mengaktifkan SSL tidak akan menjejaskan penciptaan laman web.',
         batchAdd: 'Tambah Domain Secara Batch',
+        batchInput: 'Input Kelompok',
+        domainNotFQDN: 'Domain ini mungkin tidak boleh diakses di rangkaian awam',
+        domainInvalid: 'Format domain tidak sah',
+        domainBatchHelper:
+            'Satu domain per baris, format: domain:port@ssl\nContoh: example.com:443@ssl atau example.com',
         generateDomain: 'Hasilkan',
         global: 'Global',
         subsite: 'Sublaman',

frontend/src/lang/modules/pt-br.ts

@@ -2621,6 +2621,11 @@ const message = {
         createDb: 'Criar Banco de Dados',
         enableSSLHelper: 'A falha ao ativar o SSL não afetará a criação do site.',
         batchAdd: 'Adicionar Domínios em Lote',
+        batchInput: 'Entrada em Lote',
+        domainNotFQDN: 'Este domínio pode não estar acessível na rede pública',
+        domainInvalid: 'Formato de domínio inválido',
+        domainBatchHelper:
+            'Um domínio por linha, formato: domínio:porta@ssl\nExemplo: example.com:443@ssl ou example.com',
         generateDomain: 'Gerar',
         global: 'Global',
         subsite: 'Subsite',

frontend/src/lang/modules/ru.ts

@@ -2616,6 +2616,10 @@ const message = {
         rcreateDb: 'Создать Базу Данных',
         enableSSLHelper: 'Неудача при включении SSL не повлияет на создание сайта.',
         batchAdd: 'Пакетное Добавление Доменов',
+        batchInput: 'Пакетный ввод',
+        domainNotFQDN: 'Этот домен может быть недоступен в публичной сети',
+        domainInvalid: 'Неверный формат домена',
+        domainBatchHelper: 'Один домен на строку, формат: domain:port@ssl\nПример: example.com:443@ssl или example.com',
         generateDomain: 'Сгенерировать',
         global: 'Глобальный',
         subsite: 'Подсайт',

frontend/src/lang/modules/tr.ts

@@ -2674,6 +2674,11 @@ const message = {
         createDb: 'Veritabanı Oluştur',
         enableSSLHelper: 'Etkinleştirme başarısızlığı web sitesinin oluşturulmasını etkilemez',
         batchAdd: 'Toplu Alan Adı Ekle',
+        batchInput: 'Toplu Giriş',
+        domainNotFQDN: 'Bu alan adı genel ağda erişilebilir olmayabilir',
+        domainInvalid: 'Geçersiz alan adı biçimi',
+        domainBatchHelper:
+            'Bir satırda bir alan adı, format: domain:port@ssl\nÖrnek: example.com:443@ssl veya example.com',
         generateDomain: 'Oluştur',
         global: 'Küresel',
         subsite: 'Alt site',

frontend/src/lang/modules/zh-Hant.ts

@@ -2453,6 +2453,10 @@ const message = {
         createDb: '建立資料庫',
         enableSSLHelper: '開啟失敗不會影響網站建立',
         batchAdd: '批次新增域名',
+        batchInput: '批次輸入',
+        domainNotFQDN: '此域名可能無法在公網訪問',
+        domainInvalid: '域名格式不正確',
+        domainBatchHelper: '一行一個域名，格式：域名:端口@ssl\n範例：example.com:443@ssl 或 example.com',
         generateDomain: '生成',
         global: '全域',
         subsite: '子網站',

frontend/src/lang/modules/zh.ts

@@ -2451,6 +2451,10 @@ const message = {
         createDb: '创建数据库',
         enableSSLHelper: '开启失败不会影响网站创建',
         batchAdd: '批量添加域名',
+        batchInput: '批量编辑',
+        domainNotFQDN: '该域名可能无法在公网访问',
+        domainInvalid: '域名格式不正确',
+        domainBatchHelper: '一行一个域名，格式：域名:端口\n示例：example.com',
         generateDomain: '生成',
         global: '全局',
         subsite: '子网站',

frontend/src/views/website/website/create/index.vue

@@ -1,21 +1,5 @@
 <template>
     <DrawerPro v-model="open" :header="$t('website.create')" size="60%" @close="handleClose">
-        <template #buttons>
-            <span class="drawer-header-button">
-                <template v-for="item in WebsiteTypes" :key="item.value">
-                    <el-button
-                        :class="website.type === item.value ? 'active-button' : ''"
-                        @click="changeType(item.value)"
-                        :type="website.type === item.value ? '' : 'info'"
-                        :plain="website.type === item.value"
-                        :text="website.type !== item.value"
-                        :bg="website.type !== item.value"
-                    >
-                        {{ item.label }}
-                    </el-button>
-                </template>
-            </span>
-        </template>
         <div v-loading="loading" :class="{ mask: !versionExist }">
             <SSLAlert :websiteType="website.type" />
             <br />
@@ -28,6 +12,13 @@
                 :validate-on-rule-change="false"
                 v-loading="loading"
             >
+                <el-form-item :label="$t('commons.table.type')">
+                    <el-radio-group v-model="website.type" @change="changeType">
+                        <el-radio-button v-for="item in WebsiteTypes" :key="item.value" :value="item.value">
+                            {{ item.label }}
+                        </el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
                 <GroupSelect
                     v-model="website.webSiteGroupId"
                     :prop="'webSiteGroupId'"
@@ -185,6 +176,10 @@
                         {{ $t('website.runtimePortWarn') }}
                     </el-text>
                 </div>
+
+                <el-divider content-position="left">
+                    <el-text type="info" size="small">{{ $t('website.domain') }}</el-text>
+                </el-divider>
                 <div v-if="website.type === 'stream'">
                     <el-form-item :label="$t('website.streamPorts')" prop="streamPorts">
                         <el-input
@@ -196,10 +191,10 @@
                 <div v-else>
                     <DomainCreate v-model:form="website" @gengerate="websiteForm.clearValidate()"></DomainCreate>
                 </div>
-                <el-form-item prop="IPV6">
-                    <el-checkbox v-model="website.IPV6" :label="$t('website.ipv6')" size="large" />
-                </el-form-item>
-                <el-form-item :label="$t('website.alias')" prop="alias">
+                <el-divider content-position="left">
+                    <el-text type="info" size="small">{{ $t('website.advancedSettings') }}</el-text>
+                </el-divider>
+                <el-form-item :label="$t('website.alias')" prop="alias" class="mt-2">
                     <el-input v-model.trim="website.alias" :placeholder="$t('website.aliasHelper')"></el-input>
                     <div>
                         <span class="input-help">
@@ -208,7 +203,58 @@
                         </span>
                     </div>
                 </el-form-item>
-
+                <el-form-item prop="IPV6">
+                    <el-checkbox v-model="website.IPV6" :label="$t('website.ipv6')" size="large" />
+                </el-form-item>
+                <div v-if="website.type == 'stream'">
+                    <LoadBalanceForm ref="lbFormRef" v-model="steamConfig" :disabled="true" />
+                </div>
+                <div v-else>
+                    <el-form-item prop="enableSSL">
+                        <el-checkbox v-model="website.enableSSL" :label="$t('website.enableHTTPS')" size="large" />
+                        <span class="input-help">{{ $t('website.enableSSLHelper') }}</span>
+                    </el-form-item>
+                    <div v-if="website.enableSSL">
+                        <el-form-item :label="$t('website.acmeAccountManage')" prop="acmeAccountID">
+                            <el-select
+                                v-model="website.acmeAccountID"
+                                :placeholder="$t('website.selectAcme')"
+                                @change="listSSLs"
+                            >
+                                <el-option :key="0" :label="$t('website.imported')" :value="0"></el-option>
+                                <el-option
+                                    v-for="(acme, index) in acmeAccounts"
+                                    :key="index"
+                                    :label="acme.email"
+                                    :value="acme.id"
+                                >
+                                    <span>
+                                        {{ acme.email }}
+                                        <el-tag class="ml-5">{{ getAccountName(acme.type) }}</el-tag>
+                                    </span>
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item :label="$t('website.ssl')" prop="websiteSSLID" :hide-required-asterisk="true">
+                            <el-select
+                                v-model="website.websiteSSLID"
+                                :placeholder="$t('website.selectSSL')"
+                                @change="handleSSLSelectChange"
+                            >
+                                <el-option
+                                    v-for="(ssl, index) in ssls"
+                                    :key="index"
+                                    :label="ssl.primaryDomain"
+                                    :value="ssl.id"
+                                    :disabled="ssl.pem == ''"
+                                ></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item :label="' '" v-if="websiteSSL && websiteSSL.id > 0">
+                            <WebsiteSSL :websiteSSL="websiteSSL" />
+                        </el-form-item>
+                    </div>
+                </div>
                 <el-form-item prop="enableFtp" v-if="website.type === 'static' || website.type === 'runtime'">
                     <el-checkbox
                         @change="random"
@@ -333,55 +379,10 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
-                <div v-if="website.type == 'stream'">
-                    <LoadBalanceForm ref="lbFormRef" v-model="steamConfig" :disabled="true" />
-                </div>
-                <div v-else>
-                    <el-form-item prop="enableSSL">
-                        <el-checkbox v-model="website.enableSSL" :label="$t('website.enableHTTPS')" size="large" />
-                        <span class="input-help">{{ $t('website.enableSSLHelper') }}</span>
-                    </el-form-item>
-                    <div v-if="website.enableSSL">
-                        <el-form-item :label="$t('website.acmeAccountManage')" prop="acmeAccountID">
-                            <el-select
-                                v-model="website.acmeAccountID"
-                                :placeholder="$t('website.selectAcme')"
-                                @change="listSSLs"
-                            >
-                                <el-option :key="0" :label="$t('website.imported')" :value="0"></el-option>
-                                <el-option
-                                    v-for="(acme, index) in acmeAccounts"
-                                    :key="index"
-                                    :label="acme.email"
-                                    :value="acme.id"
-                                >
-                                    <span>
-                                        {{ acme.email }}
-                                        <el-tag class="ml-5">{{ getAccountName(acme.type) }}</el-tag>
-                                    </span>
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item :label="$t('website.ssl')" prop="websiteSSLID" :hide-required-asterisk="true">
-                            <el-select
-                                v-model="website.websiteSSLID"
-                                :placeholder="$t('website.selectSSL')"
-                                @change="handleSSLSelectChange"
-                            >
-                                <el-option
-                                    v-for="(ssl, index) in ssls"
-                                    :key="index"
-                                    :label="ssl.primaryDomain"
-                                    :value="ssl.id"
-                                    :disabled="ssl.pem == ''"
-                                ></el-option>
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item :label="' '" v-if="websiteSSL && websiteSSL.id > 0">
-                            <WebsiteSSL :websiteSSL="websiteSSL" />
-                        </el-form-item>
-                    </div>
-                </div>
+
+                <el-divider content-position="left">
+                    <el-text type="info" size="small">{{ $t('commons.table.description') }}</el-text>
+                </el-divider>
                 <el-form-item :label="$t('website.remark')" prop="remark">
                     <el-input type="textarea" :rows="3" clearable v-model="website.remark" />
                 </el-form-item>