mirror of
https://github.com/0xJacky/nginx-ui.git
synced 2025-05-11 02:15:48 +02:00
feat: support for include location in server {} block #48
This commit is contained in:
0xJacky
parent
1e304fa4a3
commit
6bcb575442
3 changed files with 129 additions and 80 deletions
|
|
@ -1,11 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import CodeEditor from '@/components/CodeEditor'
|
||||
import {If} from '@/views/domain/ngx_conf'
|
||||
import DirectiveAdd from '@/views/domain/ngx_conf/directive/DirectiveAdd'
|
||||
import {useGettext} from 'vue3-gettext'
|
||||
import {reactive, ref} from 'vue'
|
||||
import {DeleteOutlined, HolderOutlined} from '@ant-design/icons-vue'
|
||||
import draggable from 'vuedraggable'
|
||||
import DirectiveEditorItem from '@/views/domain/ngx_conf/directive/DirectiveEditorItem.vue'
|
||||
|
||||
const {$gettext} = useGettext()
|
||||
|
||||
|
|
@ -19,20 +17,6 @@ let directive = reactive({})
|
|||
|
||||
const current_idx = ref(-1)
|
||||
|
||||
function add() {
|
||||
adding.value = true
|
||||
directive = reactive({})
|
||||
}
|
||||
|
||||
function save() {
|
||||
adding.value = false
|
||||
props.ngx_directives.push(directive)
|
||||
}
|
||||
|
||||
function remove(index: number) {
|
||||
props.ngx_directives.splice(index, 1)
|
||||
}
|
||||
|
||||
function onSave(idx: number) {
|
||||
setTimeout(() => {
|
||||
current_idx.value = idx + 1
|
||||
|
|
@ -51,72 +35,16 @@ function onSave(idx: number) {
|
|||
handle=".ant-input-group-addon"
|
||||
>
|
||||
<template #item="{ element: directive, index }">
|
||||
<a-form-item @click="current_idx=index">
|
||||
|
||||
<div class="input-wrapper">
|
||||
<code-editor v-if="directive.directive === If" v-model:content="directive.params"
|
||||
defaultHeight="100px" style="width: 100%;"/>
|
||||
|
||||
<a-input v-else
|
||||
v-model:value="directive.params" @click="current_idx=index" @blur="current_idx=-1">
|
||||
<template #addonBefore>
|
||||
<HolderOutlined/>
|
||||
{{ directive.directive }}
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<a-popconfirm @confirm="remove(index)"
|
||||
:title="$gettext('Are you sure you want to remove this directive?')"
|
||||
:ok-text="$gettext('Yes')"
|
||||
:cancel-text="$gettext('No')">
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<DeleteOutlined style="font-size: 14px;"/>
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<transition name="slide">
|
||||
<div v-if="current_idx===index" class="directive-editor-extra">
|
||||
<div class="extra-content">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item :label="$gettext('Comments')">
|
||||
<a-textarea v-model:value="directive.comments"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</a-form-item>
|
||||
<directive-editor-item @click="current_idx=index"
|
||||
:directive="directive"
|
||||
:current_idx="current_idx" :index="index"
|
||||
:ngx_directives="ngx_directives"/>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<directive-add :ngx_directives="props.ngx_directives"/>
|
||||
<directive-add :ngx_directives="ngx_directives"/>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.directive-editor-extra {
|
||||
background-color: #fafafa;
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.slide-enter-active, .slide-leave-active {
|
||||
transition: max-height .2s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slide-enter-from, .slide-leave-to {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.slide-enter-to, .slide-leave-from {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
<script setup lang="ts">
|
||||
import CodeEditor from '@/components/CodeEditor'
|
||||
import {DeleteOutlined, HolderOutlined} from '@ant-design/icons-vue'
|
||||
import {If} from '@/views/domain/ngx_conf'
|
||||
|
||||
import {useGettext} from 'vue3-gettext'
|
||||
import {onMounted, ref, watch} from 'vue'
|
||||
import config from '@/api/config'
|
||||
import {message} from 'ant-design-vue'
|
||||
|
||||
const {$gettext, interpolate} = useGettext()
|
||||
|
||||
const props = defineProps(['directive', 'current_idx', 'index', 'ngx_directives'])
|
||||
|
||||
function remove(index: number) {
|
||||
props.ngx_directives.splice(index, 1)
|
||||
}
|
||||
|
||||
const content = ref('')
|
||||
|
||||
function init() {
|
||||
if (props.directive.directive === 'include')
|
||||
config.get(props.directive.params).then(r => {
|
||||
content.value = r.config
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(init)
|
||||
|
||||
watch(props, init)
|
||||
|
||||
function save() {
|
||||
config.save(props.directive.params, {content: content.value}).then(r => {
|
||||
content.value = r.config
|
||||
message.success($gettext('Saved successfully'))
|
||||
}).catch(r => {
|
||||
message.error(interpolate($gettext('Save error %{msg}'), {msg: r.message ?? ''}))
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="input-wrapper">
|
||||
<code-editor v-if="directive.directive === If" v-model:content="directive.params"
|
||||
defaultHeight="100px" style="width: 100%;"/>
|
||||
|
||||
<a-input v-else
|
||||
v-model:value="directive.params" @click="current_idx=index">
|
||||
<template #addonBefore>
|
||||
<HolderOutlined/>
|
||||
{{ directive.directive }}
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<a-popconfirm @confirm="remove(index)"
|
||||
:title="$gettext('Are you sure you want to remove this directive?')"
|
||||
:ok-text="$gettext('Yes')"
|
||||
:cancel-text="$gettext('No')">
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<DeleteOutlined style="font-size: 14px;"/>
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<transition name="slide">
|
||||
<div v-if="current_idx===index" class="directive-editor-extra">
|
||||
<div class="extra-content">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item :label="$gettext('Comments')">
|
||||
<a-textarea v-model:value="directive.comments"/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="$gettext('Include Content')" v-if="directive.directive==='include'">
|
||||
<code-editor v-model:content="content"
|
||||
defaultHeight="200px" style="width: 100%;"/>
|
||||
<div class="save-btn">
|
||||
<a-button @click="save">{{ $gettext('Save') }}</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.directive-editor-extra {
|
||||
background-color: #fafafa;
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.save-btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-enter-active, .slide-leave-active {
|
||||
transition: max-height .2s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slide-enter-from, .slide-leave-to {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.slide-enter-to, .slide-leave-from {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -74,9 +74,9 @@ func InitRouter() *gin.Engine {
|
|||
g.DELETE("domain/:name", api.DeleteDomain)
|
||||
|
||||
g.GET("configs", api.GetConfigs)
|
||||
g.GET("config/:name", api.GetConfig)
|
||||
g.GET("config/*name", api.GetConfig)
|
||||
g.POST("config", api.AddConfig)
|
||||
g.POST("config/:name", api.EditConfig)
|
||||
g.POST("config/*name", api.EditConfig)
|
||||
|
||||
//g.GET("backups", api.GetFileBackupList)
|
||||
//g.GET("backup/:id", api.GetFileBackup)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue