feat(template): add selection box; add scheme and host field for reve…

…rse_proxy #608

.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.

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

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<string, string>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value?: any
+  mask?: Record<string, Record<string, string>>
 }
 
 export interface Template extends NgxServer {
   name: string
-  description: { [key: string]: string }
+  description: Record<string, string>
   author: string
   filename: string
-  variables: {
-    [key: string]: Variable
-  }
+  variables: Record<string, Variable>
   custom: string
   locations?: NgxLocation[]
   directives?: NgxDirective[]

app/src/views/certificate/WildcardCertificate.vue

@@ -13,6 +13,7 @@ const step = ref(0)
 const visible = ref(false)
 const data = ref({}) as Ref<AutoCertOptions>
 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}`

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;
+}
 </style>

app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue

@@ -119,19 +119,21 @@ provide('ngx_directives', ngx_directives)
     >
       <p>{{ $gettext('Author') }}: {{ data.author }}</p>
       <p>{{ $gettext('Description') }}: {{ trans_description(data) }}</p>
-      <TemplateForm v-model:data="data.variables" />
-      <template v-if="data.custom">
-        <h2>{{ $gettext('Custom') }}</h2>
+      <TemplateForm v-model="data.variables" />
+      <div
+        v-if="data.custom"
+        class="mb-4"
+      >
+        <h3>{{ $gettext('Custom') }}</h3>
         <CodeEditor
           v-model:content="data.custom"
           default-height="150px"
         />
-      </template>
+      </div>
       <DirectiveEditor
         v-if="data.directives"
         readonly
       />
-      <br>
       <LocationEditor
         v-if="data.locations"
         :locations="data.locations"

app/src/views/domain/ngx_conf/config_template/TemplateForm.vue

@@ -2,25 +2,8 @@
 import TemplateFormItem from '@/views/domain/ngx_conf/config_template/TemplateFormItem.vue'
 import type { Variable } from '@/api/template'
 
-const props = defineProps<{
-  data: {
-    [key: string]: Variable
-  }
-}>()
-
-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<Record<string, Variable>>({
+  default: () => {},
 })
 </script>
 
@@ -29,7 +12,7 @@ const data = computed({
     <TemplateFormItem
       v-for="(_, k) in data"
       :key="k"
-      v-model:data="data[k]"
+      v-model="data[k]"
       :name="k.toString()"
     />
   </AForm>

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<Variable>({
+  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,
+    }
+  })
+})
 </script>
 
 <template>
@@ -41,6 +38,11 @@ watch(value, _.throttle(build_template, 500))
       v-if="data.type === 'string'"
       v-model:value="data.value"
     />
+    <ASelect
+      v-else-if="data.type === 'select'"
+      v-model:value="data.value"
+      :options="selectOptions"
+    />
     <ASwitch
       v-else-if="data.type === 'boolean'"
       v-model:checked="data.value"

docs/.vitepress/config/zh_TW.ts

@@ -31,6 +31,7 @@ export const zhTWConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
           items: [
             {text: '構建', link: '/zh_TW/guide/build'},
             {text: '專案結構', link: '/zh_TW/guide/project-structure'},
+            {text: '配置模板', link: '/zh_TW/guide/nginx-ui-template'},
             {text: '貢獻程式碼', link: '/zh_TW/guide/contributing'}
           ]
         },