feat(template): add selection box; add scheme and host field for reverse_proxy 0xJacky#608

Author: 0xJacky

.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'}
  ]
  },