改进界面

This commit is contained in:
刘祥超
2020-11-21 15:53:04 +08:00
parent 9ef9ea52f7
commit 9a1a8bd17f
31 changed files with 66 additions and 64 deletions

View File

@@ -1,9 +1,11 @@
Vue.component("copy-to-clipboard", {
props: ["v-target"],
created: function () {
let jsFile = document.createElement("script")
jsFile.setAttribute("src", "/js/clipboard.min.js")
document.head.appendChild(jsFile)
if (typeof ClipboardJS == "undefined") {
let jsFile = document.createElement("script")
jsFile.setAttribute("src", "/js/clipboard.min.js")
document.head.appendChild(jsFile)
}
},
methods: {
copy: function () {

View File

@@ -41,11 +41,11 @@ Vue.component("countries-selector", {
template: `<div>
<input type="hidden" name="countryIdsJSON" :value="JSON.stringify(countryIds)"/>
<div v-if="countries.length > 0" style="margin-bottom: 0.5em">
<div v-for="(country, index) in countries" class="ui label tiny">{{country.name}} <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a></div>
<div v-for="(country, index) in countries" class="ui label tiny basic">{{country.name}} <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a></div>
<div class="ui divider"></div>
</div>
<div>
<button class="ui button small" type="button" @click.prevent="add">+</button>
<button class="ui button tiny" type="button" @click.prevent="add">+</button>
</div>
</div>`
})

View File

@@ -1,7 +1,7 @@
Vue.component("network-addresses-view", {
props: ["v-addresses"],
template: `<div>
<div class="ui label tiny" v-if="vAddresses != null" v-for="addr in vAddresses">
<div class="ui label tiny basic" v-if="vAddresses != null" v-for="addr in vAddresses">
{{addr.protocol}}://{{addr.host}}:{{addr.portRange}}
</div>
</div>`

View File

@@ -41,11 +41,11 @@ Vue.component("provinces-selector", {
template: `<div>
<input type="hidden" name="provinceIdsJSON" :value="JSON.stringify(provinceIds)"/>
<div v-if="provinces.length > 0" style="margin-bottom: 0.5em">
<div v-for="(province, index) in provinces" class="ui label tiny">{{province.name}} <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a></div>
<div v-for="(province, index) in provinces" class="ui label tiny basic">{{province.name}} <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a></div>
<div class="ui divider"></div>
</div>
<div>
<button class="ui button small" type="button" @click.prevent="add">+</button>
<button class="ui button tiny" type="button" @click.prevent="add">+</button>
</div>
</div>`
})

View File

@@ -56,7 +56,7 @@ Vue.component("values-box", {
},
template: `<div>
<div style="margin-bottom: 1em" v-if="vValues.length > 0">
<div class="ui label tiny" v-for="(value, index) in vValues" style="margin-top:0.4em;margin-bottom:0.4em">{{value}}
<div class="ui label tiny basic" v-for="(value, index) in vValues" style="margin-top:0.4em;margin-bottom:0.4em">{{value}}
<input type="hidden" :name="name" :value="value"/>
&nbsp; <a href="" @click.prevent="update(index)" title="修改"><i class="icon pencil small" ></i></a>
<a href="" @click.prevent="remove(index)" title="删除"><i class="icon remove"></i></a>

View File

@@ -41,7 +41,7 @@ Vue.component("dns-domain-selector", {
template: `<div>
<input type="hidden" name="dnsDomainId" :value="domainId"/>
<div v-if="domainName.length > 0">
<span class="ui label small">
<span class="ui label small basic">
{{domainName}}
<a href="" @click.prevent="update"><i class="icon pencil small"></i></a>
<a href="" @click.prevent="remove()"><i class="icon remove"></i></a>

View File

@@ -53,9 +53,9 @@ Vue.component("dns-route-selector", {
template: `<div>
<input type="hidden" name="dnsRoutesJSON" :value="JSON.stringify(routeCodes)"/>
<div v-if="routes.length > 0">
<tiny-label v-for="route in routes" :key="route.code">
<tiny-basic-label v-for="route in routes" :key="route.code">
{{route.name}} <a href="" @click.prevent="remove(route)"><i class="icon remove"></i></a>
</tiny-label>
</tiny-basic-label>
<div class="ui divider"></div>
</div>
<button type="button" class="ui button small" @click.prevent="add" v-if="!isAdding">+</button>

View File

@@ -55,7 +55,7 @@ Vue.component("grant-selector", {
},
template: `<div>
<input type="hidden" name="grantId" :value="grantId"/>
<div class="ui label small" v-if="grant != null">{{grant.name}}<span class="small">{{grant.methodName}}</span> <a href="" title="修改" @click.prevent="update()"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="remove()"><i class="icon remove"></i></a> </div>
<div class="ui label small basic" v-if="grant != null">{{grant.name}}<span class="small">{{grant.methodName}}</span> <a href="" title="修改" @click.prevent="update()"><i class="icon pencil small"></i></a> <a href="" title="删除" @click.prevent="remove()"><i class="icon remove"></i></a> </div>
<div v-if="grant == null">
<a href="" @click.prevent="select()">[选择已有认证]</a> &nbsp; &nbsp; <a href="" @click.prevent="create()">[添加新认证]</a>
</div>

View File

@@ -39,7 +39,7 @@ Vue.component("node-ip-addresses-box", {
<input type="hidden" name="ipAddressesJSON" :value="JSON.stringify(ipAddresses)"/>
<div v-if="ipAddresses.length > 0">
<div>
<div v-for="(address, index) in ipAddresses" class="ui label small">
<div v-for="(address, index) in ipAddresses" class="ui label tiny basic">
{{address.ip}}
<span class="small" v-if="address.name.length > 0">{{address.name}}<span v-if="!address.canAccess">,不可访问</span></span>
<span class="small" v-if="address.name.length == 0 && !address.canAccess">(不可访问)</span>

View File

@@ -160,7 +160,7 @@ Vue.component("http-header-policy-box", {
<td class="title">需要删除的Header</td>
<td>
<div v-if="requestDeletingHeaders.length > 0">
<div class="ui label small" v-for="headerName in requestDeletingHeaders">{{headerName}} <a href=""><i class="icon remove" title="删除" @click.prevent="deleteDeletingHeader(vRequestHeaderPolicy.id, headerName)"></i></a> </div>
<div class="ui label small basic" v-for="headerName in requestDeletingHeaders">{{headerName}} <a href=""><i class="icon remove" title="删除" @click.prevent="deleteDeletingHeader(vRequestHeaderPolicy.id, headerName)"></i></a> </div>
<div class="ui divider" ></div>
</div>
<button class="ui button small" type="button" @click.prevent="addDeletingHeader(vRequestHeaderPolicy.id, 'request')">+</button>
@@ -202,7 +202,7 @@ Vue.component("http-header-policy-box", {
<td class="title">需要删除的Header</td>
<td>
<div v-if="responseDeletingHeaders.length > 0">
<div class="ui label small" v-for="headerName in responseDeletingHeaders">{{headerName}} <a href=""><i class="icon remove" title="删除" @click.prevent="deleteDeletingHeader(vResponseHeaderPolicy.id, headerName)"></i></a> </div>
<div class="ui label small basic" v-for="headerName in responseDeletingHeaders">{{headerName}} <a href=""><i class="icon remove" title="删除" @click.prevent="deleteDeletingHeader(vResponseHeaderPolicy.id, headerName)"></i></a> </div>
<div class="ui divider" ></div>
</div>
<button class="ui button small" type="button" @click.prevent="addDeletingHeader(vResponseHeaderPolicy.id, 'response')">+</button>

View File

@@ -70,7 +70,7 @@ Vue.component("http-pages-and-shutdown-box", {
<td class="title">特殊页面</td>
<td>
<div v-if="pages.length > 0">
<div class="ui label small" v-for="(page,index) in pages">
<div class="ui label small basic" v-for="(page,index) in pages">
{{page.status}} -&gt; {{page.url}} <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>
</div>
<div class="ui divider"></div>

View File

@@ -39,7 +39,7 @@ Vue.component("server-name-box", {
template: `<div>
<input type="hidden" name="serverNames" :value="JSON.stringify(serverNames)"/>
<div v-if="serverNames.length > 0">
<div v-for="(serverName, index) in serverNames" class="ui label small">
<div v-for="(serverName, index) in serverNames" class="ui label small basic">
<em v-if="serverName.type != 'full'">{{serverName.type}}</em>
<span v-if="serverName.subNames == null || serverName.subNames.length == 0">{{serverName.name}}</span>
<span v-else>{{serverName.subNames[0]}}等{{serverName.subNames.length}}个域名</span>

View File

@@ -364,7 +364,7 @@ Vue.component("ssl-config-box", {
<div class="ui divider"></div>
<div class="cipher-suites-box">
已添加套件({{policy.cipherSuites.length}})
<div v-for="cipherSuite in policy.cipherSuites" class="ui label tiny" style="margin-bottom: 0.5em">
<div v-for="cipherSuite in policy.cipherSuites" class="ui label tiny basic" style="margin-bottom: 0.5em">
<input type="hidden" name="cipherSuites" :value="cipherSuite"/>
<span v-html="formatCipherSuite(cipherSuite)"></span> &nbsp; <a href="" title="删除套件" @click.prevent="removeCipherSuite(cipherSuite)"><i class="icon remove"></i></a>
<a href="" title="拖动改变顺序"><i class="icon bars handle"></i></a>
@@ -431,7 +431,7 @@ Vue.component("ssl-config-box", {
<td class="color-border">HSTS生效的域名</td>
<td colspan="2">
<div class="names-box">
<span class="ui label tiny" v-for="(domain, arrayIndex) in hsts.domains" :class="{blue:hstsDomainEditingIndex == arrayIndex}">{{domain}}
<span class="ui label tiny basic" v-for="(domain, arrayIndex) in hsts.domains" :class="{blue:hstsDomainEditingIndex == arrayIndex}">{{domain}}
<input type="hidden" name="hstsDomains" :value="domain"/> &nbsp;
<a href="" @click.prevent="editHstsDomain(arrayIndex)" title="修改"><i class="icon pencil"></i></a>
<a href="" @click.prevent="removeHstsDomain(arrayIndex)" title="删除"><i class="icon remove"></i></a>