TRKJ/EdgeAdmin
2
0
Fork 0
mirror of https://github.com/TeaOSLab/EdgeAdmin.git synced 2025-11-07 23:30: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

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

@@ -48,29 +48,32 @@ 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 () {
this.shutdownConfig.body = `<!DOCTYPE html> this.shutdownConfig.body = `<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
\t<title>升级中</title> \t<title>升级中</title>
@@ -89,80 +92,106 @@ 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>
<tr>
<td class="title">自定义页面</td> <p class="comment" style="padding-top: 0; margin-top: 0">根据响应状态码返回一些自定义页面，比如404，500等错误页面。</p>
<td>
<div v-if="pages.length > 0"> <div v-if="pages.length > 0" style="max-width: 30em">
<div class="ui label small basic" v-for="(page,index) in pages"> <table class="ui table selectable celled">
{{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> <thead>
</div> <tr>
<div class="ui divider"></div> <th class="four wide">响应状态码</th>
</div> <th>页面类型</th>
<div> <th style="width: 6.5em">操作</th>
<button class="ui button small" type="button" @click.prevent="addPage()">+</button> </tr>
</div> </thead>
<p class="comment">根据响应状态码返回一些自定义页面，比如404，500等错误页面。</p> <tr v-for="(page,index) in pages">
</td> <td>
</tr> <span v-if="page.status != null && page.status.length == 1">{{page.status[0]}}</span>
<tr> <span v-else>{{page.status}}</span>
<td>临时关闭页面</td> </td>
<td> <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> <td>
<table class="ui table selectable definition"> <a href="" title="修改" @click.prevent="updatePage(index, page.id)">修改</a> &nbsp;
<prior-checkbox :v-config="shutdownConfig" v-if="vIsLocation"></prior-checkbox> <a href="" title="删除" @click.prevent="removePage(index)">删除</a>
<tbody v-show="!vIsLocation || shutdownConfig.isPrior"> </td>
<tr> </tr>
<td class="title">临时关闭网站</td> </table>
<td> </div>
<div class="ui checkbox"> <div style="margin-top: 1em">
<input type="checkbox" value="1" v-model="shutdownConfig.isOn" /> <button class="ui button small" type="button" @click.prevent="addPage()">+添加自定义页面</button>
<label></label> </div>
</div>
<p class="comment">选中后，表示临时关闭当前网站，并显示自定义内容。</p> <h4 style="margin-top: 2em;">临时关闭页面</h4>
</td> <p class="comment" style="margin-top: 0; padding-top: 0">开启临时关闭页面时，所有请求都会直接显示此页面。可用于临时升级网站或者禁止用户访问某个网页。</p>
</tr> <div>
</tbody> <table class="ui table selectable definition">
<tbody v-show="(!vIsLocation || shutdownConfig.isPrior) && shutdownConfig.isOn"> <prior-checkbox :v-config="shutdownConfig" v-if="vIsLocation"></prior-checkbox>
<tr> <tbody v-show="!vIsLocation || shutdownConfig.isPrior">
<td>显示内容类型 *</td> <tr>
<td> <td class="title">启用临时关闭网站</td>
<select class="ui dropdown auto-width" v-model="shutdownConfig.bodyType"> <td>
<option value="html">HTML</option> <div class="ui checkbox">
<option value="url">读取URL</option> <input type="checkbox" value="1" v-model="shutdownConfig.isOn" />
</select> <label></label>
</td> </div>
</tr> <p class="comment">选中后，表示临时关闭当前网站，并显示自定义内容。</p>
<tr v-show="shutdownConfig.bodyType == 'url'"> </td>
<td class="title">显示页面URL *</td> </tr>
<td> </tbody>
<input type="text" v-model="shutdownConfig.url" placeholder="类似于 https://example.com/page.html"/> <tbody v-show="(!vIsLocation || shutdownConfig.isPrior) && shutdownConfig.isOn">
<p class="comment">将从此URL中读取内容。</p> <tr>
</td> <td>显示内容类型 *</td>
</tr> <td>
<tr v-show="shutdownConfig.bodyType == 'html'"> <select class="ui dropdown auto-width" v-model="shutdownConfig.bodyType">
<td>显示页面HTML *</td> <option value="html">HTML</option>
<td> <option value="url">读取URL</option>
<textarea name="body" ref="shutdownHTMLBody" v-model="shutdownConfig.body"></textarea> </select>
<p class="comment"><a href="" @click.prevent="addShutdownHTMLTemplate">[使用模板]</a>。填写页面的HTML内容，支持请求变量。</p> </td>
</td> </tr>
</tr> <tr v-show="shutdownConfig.bodyType == 'url'">
<tr> <td class="title">显示页面URL *</td>
<td>状态码</td> <td>
<td><input type="text" size="3" maxlength="3" name="shutdownStatus" style="width:5.2em" placeholder="状态码" v-model="shutdownStatus"/></td> <input type="text" v-model="shutdownConfig.url" placeholder="类似于 https://example.com/page.html"/>
</tr> <p class="comment">将从此URL中读取内容。</p>
</tbody> </td>
</table> </tr>
<p class="comment">开启临时关闭页面时，所有请求都会直接显示此页面。可用于临时升级网站或者禁止用户访问某个网页。</p> <tr v-show="shutdownConfig.bodyType == 'html'">
</div> <td>显示页面HTML *</td>
</td> <td>
</tr> <textarea name="body" ref="shutdownHTMLBody" v-model="shutdownConfig.body"></textarea>
</table> <p class="comment"><a href="" @click.prevent="addShutdownHTMLTemplate">[使用模板]</a>。填写页面的HTML内容，支持请求变量。</p>
</td>
</tr>
<tr>
<td>状态码</td>
<td><input type="text" size="3" maxlength="3" name="shutdownStatus" style="width:5.2em" placeholder="状态码" v-model="shutdownStatus"/></td>
</tr>
</tbody>
</table>
</div>
<div class="ui margin"></div> <div class="ui margin"></div>
</div>` </div>`
}) })

63
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">
<tr> <div v-if="pages.length > 0" style="max-width: 30em">
<td class="title">自定义页面</td> <table class="ui table selectable celled">
<td> <thead>
<div v-if="pages.length > 0"> <tr>
<div class="ui label small basic" v-for="(page,index) in pages"> <th class="four wide">响应状态码</th>
{{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> <th>页面类型</th>
</div> <th style="width: 6.5em">操作</th>
<div class="ui divider"></div> </tr>
</div> </thead>
<div> <tr v-for="(page,index) in pages">
<button class="ui button small" type="button" @click.prevent="addPage()">+</button> <td>
</div> <span v-if="page.status != null && page.status.length == 1">{{page.status[0]}}</span>
<p class="comment">根据响应状态码返回一些自定义页面，比如404，500等错误页面。</p> <span v-else>{{page.status}}</span>
</td> </td>
</tr> <td style="word-break: break-all"><span v-if="page.bodyType == 'url'">{{page.url}}</span><span v-if="page.bodyType == 'html'">[HTML内容]</span></td>
</table> <td>
<a href="" title="修改" @click.prevent="updatePage(index, page.id)">修改</a> &nbsp;
<a href="" title="删除" @click.prevent="removePage(index)">删除</a>
</td>
</tr>
</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>`
}) })