TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2025-11-04 13:10:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化自定义页面组件界面

Browse Source
This commit is contained in:
GoEdgeLab
2023-11-10 14:59:53 +08:00
parent 7a4609a3a0
commit 9fdd61674b
2 changed files with 148 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
web/public/js/components/server/http-pages-and-shutdown-box.js
View File

@@ -48,25 +48,28 @@ Vue.component("http-pages-and-shutdown-box", {
addPage: function () { addPage: function () {
let that = this let that = this
teaweb.popup("/servers/server/settings/pages/createPopup", { teaweb.popup("/servers/server/settings/pages/createPopup", {
height: "26em", height: "30em",
callback: function (resp) { callback: function (resp) {
that.pages.push(resp.data.page) that.pages.push(resp.data.page)
that.notifyChange()
} }
}) })
}, },
updatePage: function (pageIndex, pageId) { updatePage: function (pageIndex, pageId) {
let that = this let that = this
teaweb.popup("/servers/server/settings/pages/updatePopup?pageId=" + pageId, { teaweb.popup("/servers/server/settings/pages/updatePopup?pageId=" + pageId, {
height: "26em", height: "30em",
callback: function (resp) { callback: function (resp) {
Vue.set(that.pages, pageIndex, resp.data.page) Vue.set(that.pages, pageIndex, resp.data.page)
that.notifyChange()
} }
}) })
}, },
removePage: function (pageIndex) { removePage: function (pageIndex) {
let that = this let that = this
teaweb.confirm("确定要移除此页面吗？", function () { teaweb.confirm("确定要删除此自定义页面吗？", function () {
that.pages.$remove(pageIndex) that.pages.$remove(pageIndex)
that.notifyChange()
}) })
}, },
addShutdownHTMLTemplate: function () { addShutdownHTMLTemplate: function () {
@@ -89,36 +92,66 @@ Vue.component("http-pages-and-shutdown-box", {
</body> </body>
</html>` </html>`
},
notifyChange: function () {
let parent = this.$el.parentNode
while (true) {
if (parent == null) {
break
}
if (parent.tagName == "FORM") {
break
}
parent = parent.parentNode
}
if (parent != null) {
setTimeout(function () {
Tea.runActionOn(parent)
}, 100)
}
} }
}, },
template: `<div> template: `<div>
<input type="hidden" name="pagesJSON" :value="JSON.stringify(pages)"/> <input type="hidden" name="pagesJSON" :value="JSON.stringify(pages)"/>
<input type="hidden" name="shutdownJSON" :value="JSON.stringify(shutdownConfig)"/> <input type="hidden" name="shutdownJSON" :value="JSON.stringify(shutdownConfig)"/>
<table class="ui table selectable definition"> <h4 style="margin-bottom: 0.5em">自定义页面</h4>
<p class="comment" style="padding-top: 0; margin-top: 0">根据响应状态码返回一些自定义页面，比如404，500等错误页面。</p>
<div v-if="pages.length > 0" style="max-width: 30em">
<table class="ui table selectable celled">
<thead>
<tr> <tr>
<td class="title">自定义页面</td> <th class="four wide">响应状态码</th>
<th>页面类型</th>
<th style="width: 6.5em">操作</th>
</tr>
</thead>
<tr v-for="(page,index) in pages">
<td> <td>
<div v-if="pages.length > 0"> <span v-if="page.status != null && page.status.length == 1">{{page.status[0]}}</span>
<div class="ui label small basic" v-for="(page,index) in pages"> <span v-else>{{page.status}}</span>
{{page.status}} -&gt; <span v-if="page.bodyType == 'url'">{{page.url}}</span><span v-if="page.bodyType == 'html'">[HTML内容]</span> <a href="" title="修改" @click.prevent="updatePage(index, page.id)"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="removePage(index)"><i class="icon remove"></i></a> </td>
</div> <td style="word-break: break-all"><span v-if="page.bodyType == 'url'">{{page.url}}</span><span v-if="page.bodyType == 'html'">[HTML内容]</span></td>
<div class="ui divider"></div> <td>
</div> <a href="" title="修改" @click.prevent="updatePage(index, page.id)">修改</a> &nbsp;
<div> <a href="" title="删除" @click.prevent="removePage(index)">删除</a>
<button class="ui button small" type="button" @click.prevent="addPage()">+</button>
</div>
<p class="comment">根据响应状态码返回一些自定义页面，比如404，500等错误页面。</p>
</td> </td>
</tr> </tr>
<tr> </table>
<td>临时关闭页面</td> </div>
<td> <div style="margin-top: 1em">
<button class="ui button small" type="button" @click.prevent="addPage()">+添加自定义页面</button>
</div>
<h4 style="margin-top: 2em;">临时关闭页面</h4>
<p class="comment" style="margin-top: 0; padding-top: 0">开启临时关闭页面时，所有请求都会直接显示此页面。可用于临时升级网站或者禁止用户访问某个网页。</p>
<div> <div>
<table class="ui table selectable definition"> <table class="ui table selectable definition">
<prior-checkbox :v-config="shutdownConfig" v-if="vIsLocation"></prior-checkbox> <prior-checkbox :v-config="shutdownConfig" v-if="vIsLocation"></prior-checkbox>
<tbody v-show="!vIsLocation || shutdownConfig.isPrior"> <tbody v-show="!vIsLocation || shutdownConfig.isPrior">
<tr> <tr>
<td class="title">临时关闭网站</td> <td class="title">启用临时关闭网站</td>
<td> <td>
<div class="ui checkbox"> <div class="ui checkbox">
<input type="checkbox" value="1" v-model="shutdownConfig.isOn" /> <input type="checkbox" value="1" v-model="shutdownConfig.isOn" />
@@ -158,11 +191,7 @@ Vue.component("http-pages-and-shutdown-box", {
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p class="comment">开启临时关闭页面时，所有请求都会直接显示此页面。可用于临时升级网站或者禁止用户访问某个网页。</p>
</div> </div>
</td>
</tr>
</table>
<div class="ui margin"></div> <div class="ui margin"></div>
</div>` </div>`
}) })

53
web/public/js/components/server/http-pages-box.js
View File

@@ -17,6 +17,7 @@ Vue.component("http-pages-box", {
height: "26em", height: "26em",
callback: function (resp) { callback: function (resp) {
that.pages.push(resp.data.page) that.pages.push(resp.data.page)
that.notifyChange()
} }
}) })
}, },
@@ -26,6 +27,7 @@ Vue.component("http-pages-box", {
height: "26em", height: "26em",
callback: function (resp) { callback: function (resp) {
Vue.set(that.pages, pageIndex, resp.data.page) Vue.set(that.pages, pageIndex, resp.data.page)
that.notifyChange()
} }
}) })
}, },
@@ -33,28 +35,55 @@ Vue.component("http-pages-box", {
let that = this let that = this
teaweb.confirm("确定要移除此页面吗？", function () { teaweb.confirm("确定要移除此页面吗？", function () {
that.pages.$remove(pageIndex) that.pages.$remove(pageIndex)
that.notifyChange()
}) })
},
notifyChange: function () {
let parent = this.$el.parentNode
while (true) {
if (parent == null) {
break
}
if (parent.tagName == "FORM") {
break
}
parent = parent.parentNode
}
if (parent != null) {
setTimeout(function () {
Tea.runActionOn(parent)
}, 100)
}
} }
}, },
template: `<div> template: `<div>
<input type="hidden" name="pagesJSON" :value="JSON.stringify(pages)"/> <input type="hidden" name="pagesJSON" :value="JSON.stringify(pages)"/>
<table class="ui table selectable definition">
<div v-if="pages.length > 0" style="max-width: 30em">
<table class="ui table selectable celled">
<thead>
<tr> <tr>
<td class="title">自定义页面</td> <th class="four wide">响应状态码</th>
<th>页面类型</th>
<th style="width: 6.5em">操作</th>
</tr>
</thead>
<tr v-for="(page,index) in pages">
<td> <td>
<div v-if="pages.length > 0"> <span v-if="page.status != null && page.status.length == 1">{{page.status[0]}}</span>
<div class="ui label small basic" v-for="(page,index) in pages"> <span v-else>{{page.status}}</span>
{{page.status}} -&gt; <span v-if="page.bodyType == 'url'">{{page.url}}</span><span v-if="page.bodyType == 'html'">[HTML内容]</span> <a href="" title="修改" @click.prevent="updatePage(index, page.id)"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="removePage(index)"><i class="icon remove"></i></a> </td>
</div> <td style="word-break: break-all"><span v-if="page.bodyType == 'url'">{{page.url}}</span><span v-if="page.bodyType == 'html'">[HTML内容]</span></td>
<div class="ui divider"></div> <td>
</div> <a href="" title="修改" @click.prevent="updatePage(index, page.id)">修改</a> &nbsp;
<div> <a href="" title="删除" @click.prevent="removePage(index)">删除</a>
<button class="ui button small" type="button" @click.prevent="addPage()">+</button>
</div>
<p class="comment">根据响应状态码返回一些自定义页面，比如404，500等错误页面。</p>
</td> </td>
</tr> </tr>
</table> </table>
</div>
<div style="margin-top: 1em">
<button class="ui button small" type="button" @click.prevent="addPage()">+添加自定义页面</button>
</div>
<div class="ui margin"></div> <div class="ui margin"></div>
</div>` </div>`
}) })