前端页面

EdgeAdmin/web/views/@default/httpdns/apps/domains.html

@@ -1,35 +1,62 @@
-{$layout}
-{$template "menu"}
+{$layout}
 
-<div>
-    <div class="ui menu text blue">
-        <div class="item"><strong>{{app.name}}</strong> (<code>{{app.appId}}</code>)</div>
+<div class="margin"></div>
+
+<style>
+    .httpdns-domains-table .httpdns-domains-op {
+        white-space: nowrap;
+    }
+</style>
+<second-menu>
+    <a class="item" :href="'/httpdns/apps/domains?appId=' + app.id">{{app.name}}</a>
+    <span class="item disabled" style="padding-left: 0; padding-right: 0">&raquo;</span>
+    <div class="item"><strong>域名列表</strong></div>
+    <a href="" class="item" @click.prevent="bindDomain">创建域名</a>
+</second-menu>
+
+<form class="ui form small" @submit.prevent="doSearch">
+    <div class="ui fields inline">
+        <div class="ui field">
+            <input type="text" v-model.trim="keywordInput" placeholder="按域名筛选..." />
+        </div>
+        <div class="ui field">
+            <button type="submit" class="ui button small">搜索</button>
+            &nbsp;
+            <a href="" v-if="keyword.length > 0" @click.prevent="clearSearch">[清除条件]</a>
+        </div>
     </div>
-    <div class="ui divider"></div>
+</form>
 
-    <a href="" @click.prevent="bindDomain" class="ui button primary small"><i class="icon plus"></i>添加域名</a>
+<table class="ui table selectable celled httpdns-domains-table" v-if="filteredDomains().length > 0">
+    <colgroup>
+        <col style="width:60%;" />
+        <col style="width:20%;" />
+        <col style="width:20%;" />
+    </colgroup>
+    <thead>
+        <tr>
+            <th>服务域名</th>
+            <th class="width10">规则策略</th>
+            <th class="httpdns-domains-op">操作</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr v-for="domain in filteredDomains()">
+            <td>
+                <div><strong>{{domain.name}}</strong></div>
+            </td>
+            <td>
+                <a
+                    :href="'/httpdns/apps/customRecords?appId=' + app.id + '&domainId=' + domain.id">{{domain.customRecordCount}}</a>
+            </td>
+            <td class="httpdns-domains-op">
+                <a :href="'/httpdns/apps/customRecords?appId=' + app.id + '&domainId=' + domain.id">自定义解析</a>
+                &nbsp;|&nbsp;
+                <a href="" @click.prevent="deleteDomain(domain.id)">解绑</a>
+            </td>
+        </tr>
+    </tbody>
+</table>
 
-    <table class="ui table selectable celled" v-if="domains.length > 0" style="margin-top: 1em;">
-        <thead>
-            <tr>
-                <th>域名列表</th>
-                <th class="two wide">规则策略</th>
-                <th class="two op">操作</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="domain in domains">
-                <td><strong>{{domain.name}}</strong></td>
-                <td>
-                    <a :href="'/httpdns/apps/customRecords?appId=' + app.id + '&domainId=' + domain.id">{{domain.customRecordCount}}</a>
-                </td>
-                <td>
-                    <a :href="'/httpdns/apps/customRecords?appId=' + app.id + '&domainId=' + domain.id">自定义解析</a> &nbsp;|&nbsp;
-                    <a href="" @click.prevent="deleteDomain(domain.id)">解绑</a>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-
-    <p class="ui message" v-if="domains.length == 0">该应用尚未绑定域名。</p>
-</div>
+<not-found-box v-if="domains.length == 0">当前应用尚未绑定域名。</not-found-box>
+<not-found-box v-if="domains.length > 0 && filteredDomains().length == 0">没有匹配的域名。</not-found-box>