From 91799e64c4d574b6dce6bde2868c1e36962aeca9 Mon Sep 17 00:00:00 2001 From: Jacky Date: Mon, 14 Oct 2024 17:53:02 +0800 Subject: [PATCH] feat(template): add selection box; add scheme and host field for reverse_proxy #608 --- .air.toml | 2 +- api/template/template.go | 1 - app/src/api/template.ts | 9 +- .../views/certificate/WildcardCertificate.vue | 3 +- .../views/domain/ngx_conf/LocationEditor.vue | 5 + .../config_template/ConfigTemplate.vue | 12 +- .../ngx_conf/config_template/TemplateForm.vue | 23 +-- .../config_template/TemplateFormItem.vue | 38 ++-- docs/.vitepress/config/zh_TW.ts | 1 + docs/guide/nginx-ui-template.md | 143 +++++++++---- .../en/config-ui-after-input.png | Bin 33517 -> 0 bytes .../assets/nginx-ui-template/en/config-ui.png | Bin 31074 -> 196328 bytes .../zh_CN/config-ui-after-input.png | Bin 32485 -> 0 bytes .../nginx-ui-template/zh_CN/config-ui.png | Bin 30037 -> 196786 bytes .../zh_TW/config-ui-after-input.png | Bin 32720 -> 0 bytes .../nginx-ui-template/zh_TW/config-ui.png | Bin 30980 -> 193618 bytes docs/zh_CN/guide/nginx-ui-template.md | 153 ++++++++++---- docs/zh_TW/guide/nginx-ui-template.md | 189 ++++++++++++++++++ internal/template/template.go | 17 +- template/block/reverse_proxy.conf | 14 +- 20 files changed, 474 insertions(+), 136 deletions(-) delete mode 100644 docs/public/assets/nginx-ui-template/en/config-ui-after-input.png delete mode 100644 docs/public/assets/nginx-ui-template/zh_CN/config-ui-after-input.png delete mode 100644 docs/public/assets/nginx-ui-template/zh_TW/config-ui-after-input.png create mode 100644 docs/zh_TW/guide/nginx-ui-template.md diff --git a/.air.toml b/.air.toml index 5b479d2b..ad1b87b5 100644 --- a/.air.toml +++ b/.air.toml @@ -13,7 +13,7 @@ bin = "tmp/main" # Customize binary. full_bin = "APP_ENV=dev APP_USER=air ./tmp/main" # Watch these filename extensions. -include_ext = ["go", "tpl", "tmpl", "html", "toml", "po"] +include_ext = ["go", "tpl", "tmpl", "html", "toml", "po", "conf"] # Ignore these filename extensions or directories. exclude_dir = ["assets", "tmp", "vendor", "app/node_modules", "upload", "docs", "resources", ".idea"] # Watch these directories if you specified. diff --git a/api/template/template.go b/api/template/template.go index bd635a41..d01f4dd3 100644 --- a/api/template/template.go +++ b/api/template/template.go @@ -66,7 +66,6 @@ func GetTemplateConfList(c *gin.Context) { func GetTemplateBlockList(c *gin.Context) { configList, err := template.GetTemplateList("block") - if err != nil { api.ErrHandler(c, err) return diff --git a/app/src/api/template.ts b/app/src/api/template.ts index c23caf23..807f53b5 100644 --- a/app/src/api/template.ts +++ b/app/src/api/template.ts @@ -4,19 +4,18 @@ import type { NgxDirective, NgxLocation, NgxServer } from '@/api/ngx' export interface Variable { type?: string - name?: { [key: string]: string } + name?: Record // eslint-disable-next-line @typescript-eslint/no-explicit-any value?: any + mask?: Record> } export interface Template extends NgxServer { name: string - description: { [key: string]: string } + description: Record author: string filename: string - variables: { - [key: string]: Variable - } + variables: Record custom: string locations?: NgxLocation[] directives?: NgxDirective[] diff --git a/app/src/views/certificate/WildcardCertificate.vue b/app/src/views/certificate/WildcardCertificate.vue index 91c09c57..2dd7f49d 100644 --- a/app/src/views/certificate/WildcardCertificate.vue +++ b/app/src/views/certificate/WildcardCertificate.vue @@ -13,6 +13,7 @@ const step = ref(0) const visible = ref(false) const data = ref({}) as Ref const issuing_cert = ref(false) +const domain = ref('') provide('issuing_cert', issuing_cert) function open() { @@ -22,6 +23,7 @@ function open() { challenge_method: 'dns01', key_type: '2048', } as AutoCertOptions + domain.value = '' } defineExpose({ @@ -32,7 +34,6 @@ const modalVisible = ref(false) const modalClosable = ref(true) const refObtainCertLive = ref() -const domain = ref('') const computedDomain = computed(() => { return `*.${domain.value}` diff --git a/app/src/views/domain/ngx_conf/LocationEditor.vue b/app/src/views/domain/ngx_conf/LocationEditor.vue index bde87c9a..7973986c 100644 --- a/app/src/views/domain/ngx_conf/LocationEditor.vue +++ b/app/src/views/domain/ngx_conf/LocationEditor.vue @@ -173,4 +173,9 @@ function duplicate(index: number) { .ant-collapse-header { align-items: center; } + +:deep(.ant-collapse-header-text) { + width: 100%; + overflow: hidden; +} diff --git a/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue b/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue index f36a617b..47d28362 100644 --- a/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue +++ b/app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue @@ -119,19 +119,21 @@ provide('ngx_directives', ngx_directives) >

{{ $gettext('Author') }}: {{ data.author }}

{{ $gettext('Description') }}: {{ trans_description(data) }}

- - + -
() - -const emit = defineEmits<{ - 'update:data': [data: { - [key: string]: Variable - }] -}>() - -const data = computed({ - get() { - return props.data - }, - set(v) { - emit('update:data', v) - }, +const data = defineModel>({ + default: () => {}, }) @@ -29,7 +12,7 @@ const data = computed({ diff --git a/app/src/views/domain/ngx_conf/config_template/TemplateFormItem.vue b/app/src/views/domain/ngx_conf/config_template/TemplateFormItem.vue index 1c162eda..16091fce 100644 --- a/app/src/views/domain/ngx_conf/config_template/TemplateFormItem.vue +++ b/app/src/views/domain/ngx_conf/config_template/TemplateFormItem.vue @@ -4,35 +4,32 @@ import _ from 'lodash' import { useSettingsStore } from '@/pinia' import type { Variable } from '@/api/template' -const props = defineProps<{ - data: Variable - name: string -}>() - -const emit = defineEmits<{ - 'update:data': [data: Variable] -}>() - -const data = computed({ - get() { - return props.data - }, - set(v) { - emit('update:data', v) - }, +const data = defineModel({ + default: () => {}, }) const { language } = storeToRefs(useSettingsStore()) const trans_name = computed(() => { - return props.data?.name?.[language.value] ?? props.data?.name?.en ?? '' + return data.value?.name?.[language.value] ?? data.value?.name?.en ?? '' }) const build_template = inject('build_template') as () => void -const value = computed(() => props.data.value) +const value = computed(() => data.value.value) watch(value, _.throttle(build_template, 500)) + +const selectOptions = computed(() => { + return Object.keys(data.value?.mask || {}).map(k => { + const label = data.value.mask?.[k]?.[language.value] ?? data.value.mask?.[k]?.en ?? '' + + return { + label, + value: k, + } + }) +})