优化界面

This commit is contained in:
刘祥超
2020-11-16 15:26:27 +08:00
parent b466868da1
commit 7bd0b0e6b1
8 changed files with 43 additions and 27 deletions

View File

@@ -13,3 +13,8 @@ Vue.component("code-label", {
Vue.component("tiny-label", {
template: `<span class="ui label tiny" style="margin-bottom: 0.5em"><slot></slot></span>`
})
Vue.component("tiny-basic-label", {
template: `<span class="ui label tiny basic" style="margin-bottom: 0.5em"><slot></slot></span>`
})

View File

@@ -22,4 +22,10 @@ table th.center,
table td.center {
text-align: center !important;
}
table th.width10 {
width: 10em;
}
table th.width5 {
width: 5em;
}
/*# sourceMappingURL=@layout_override.css.map */

View File

@@ -1 +1 @@
{"version":3,"sources":["@layout_override.less"],"names":[],"mappings":"AACA,GAAG,OAAO,SAAU,MAAK,MAAM,QAAS,OAAM;AAAS,GAAG,OAAO,SAAU,MAAK,MAAM,QAAS,QAAO;EACrG,oCAAA;;AAGD,GAAG,OAAO,SAAU,MAAK,QAAS,OAAM;AAAS,GAAG,OAAO,SAAU,MAAK,QAAS,QAAO;EACzF,oCAAA;;AAGD,GAAG,MAAM;EACR,kCAAA;;AAID,IACC;EACC,2BAAA;;AAKF,KAAK;EACJ,sBAAA;;AAGD,KAAK,KAAK;EACT,yBAAA;;AAID,KACC,GAAE;AADH,KACY,GAAE;EACZ,6BAAA","file":"@layout_override.css"}
{"version":3,"sources":["@layout_override.less"],"names":[],"mappings":"AACA,GAAG,OAAO,SAAU,MAAK,MAAM,QAAS,OAAM;AAAS,GAAG,OAAO,SAAU,MAAK,MAAM,QAAS,QAAO;EACrG,oCAAA;;AAGD,GAAG,OAAO,SAAU,MAAK,QAAS,OAAM;AAAS,GAAG,OAAO,SAAU,MAAK,QAAS,QAAO;EACzF,oCAAA;;AAGD,GAAG,MAAM;EACR,kCAAA;;AAID,IACC;EACC,2BAAA;;AAKF,KAAK;EACJ,sBAAA;;AAGD,KAAK,KAAK;EACT,yBAAA;;AAID,KACC,GAAE;AADH,KACY,GAAE;EACZ,6BAAA;;AAFF,KAKC,GAAE;EACD,WAAA;;AANF,KASC,GAAE;EACD,UAAA","file":"@layout_override.css"}

View File

@@ -32,4 +32,12 @@ table {
th.center, td.center {
text-align: center !important;
}
th.width10 {
width: 10em;
}
th.width5 {
width: 5em;
}
}

View File

@@ -50,11 +50,11 @@
<tr>
<th class="one wide center">ID</th>
<th>节点名称</th>
<th class="two wide">所属分组</th>
<th style="width:10em">IP</th>
<th>DNS线路</th>
<th style="width:5em" class="center">CPU</th>
<th style="width:5em" class="center">内存</th>
<th class="width10">所属分组</th>
<th class="width10">IP</th>
<th class="width10">DNS线路</th>
<th class="width5 center">CPU</th>
<th class="width5 center">内存</th>
<!--<th>流量</th>
<th>连接数</th>-->
<th class="two wide center">状态</th>
@@ -65,14 +65,14 @@
<td nowrap="" class="center">{{node.id}}</td>
<td>{{node.name}}</td>
<td>
<span v-if="node.group != null" class="ui label tiny">{{node.group.name}}</span>
<tiny-basic-label v-if="node.group != null">{{node.group.name}}</tiny-basic-label>
<span v-else class="disabled">-</span>
</td>
<td>
<span v-if="node.ipAddresses.length == 0" class="disabled">-</span>
<div v-else class="address-box">
<div v-for="addr in node.ipAddresses" style="margin-bottom:0.3em">
<div class="ui label tiny">{{addr.ip}}
<div class="ui label tiny basic">{{addr.ip}}
<span class="small" v-if="addr.name.length > 0">{{addr.name}}<span v-if="!addr.canAccess">,不可访问</span></span>
<span class="small" v-if="addr.name.length == 0 && !addr.canAccess">(不可访问)</span>
</div>
@@ -81,7 +81,9 @@
</td>
<td>
<div v-if="node.dnsRouteNames.length > 0">
<div v-for="routeName in node.dnsRouteNames" style="margin-bottom: 0.4em">{{routeName}}</div>
<div v-for="routeName in node.dnsRouteNames">
<tiny-basic-label>{{routeName}}</tiny-basic-label>
</div>
</div>
<span v-else class="disabled">-</span>
</td>

View File

@@ -10,9 +10,8 @@
<thead>
<tr>
<th>账号说明</th>
<th>服务商</th>
<th class="center">域名</th>
<th>数据更新时间</th>
<th class="width10">服务商</th>
<th class="width5 center">域名</th>
<th class="two op">操作</th>
</tr>
</thead>
@@ -23,10 +22,6 @@
<span v-if="provider.countDomains == 0" class="disabled">0</span>
<span v-else>{{provider.countDomains}}</span>
</td>
<td>
<span v-if="provider.dataUpdatedTime.length > 0">{{provider.dataUpdatedTime}}</span>
<span v-else class="disabled">-</span>
</td>
<td>
<a :href="'/dns/providers/provider?providerId=' + provider.id">详情</a> &nbsp; &nbsp; <a href="" @click.prevent="deleteProvider(provider.id)">删除</a>
</td>

View File

@@ -52,9 +52,9 @@
<thead>
<tr>
<th>域名</th>
<th>线路</th>
<th>节点域名</th>
<th>服务域名</th>
<th class="width10 center">线路</th>
<th class="width10 center">节点域名</th>
<th class="width10 center">服务域名</th>
<th>数据更新时间</th>
<th>状态</th>
<th class="three op">操作</th>
@@ -62,15 +62,15 @@
</thead>
<tr v-for="(domain, index) in domains">
<td>{{domain.name}}</td>
<td>
<td class="center">
<a href="" v-if="domain.countRoutes > 0" @click.prevent="showRoutes(domain.id)">{{domain.countRoutes}}个</a>
<span v-else class="disabled">0个</span>
</td>
<td>
<td class="center">
<span v-if="domain.countNodeRecords > 0">{{domain.countNodeRecords}}个</span>
<span v-else class="disabled">0个</span>
</td>
<td>
<td class="center">
<span v-if="domain.countServerRecords > 0">{{domain.countServerRecords}}个</span>
<span v-else class="disabled">0个</span>
</td>

View File

@@ -38,14 +38,14 @@
</thead>
<tr v-for="server in servers">
<td>{{server.name}}
<div style="margin-top:0.2em">
<tiny-label>{{server.serverTypeName}}</tiny-label>
<div style="margin-top:0.4em">
<tiny-basic-label>{{server.serverTypeName}}</tiny-basic-label>
</div>
</td>
<td>
<div v-if="server.groups.length > 0">
<div v-for="group in server.groups">
<tiny-label>{{group.name}}</tiny-label>
<tiny-basic-label>{{group.name}}</tiny-basic-label>
</div>
</div>
<span class="disabled" v-else>-</span>
@@ -62,7 +62,7 @@
<td>
<span v-if="server.ports.length == 0">-</span>
<div v-for="port in server.ports">
<tiny-label>{{port.portRange}}<span class="small">{{port.protocol}}</span></tiny-label>
<tiny-basic-label>{{port.portRange}}<span class="small">{{port.protocol}}</span></tiny-basic-label>
</div>
</td>
<td class="center">