From 0ccef0a30bdc22b35edf28c9e0faf52ead41fefb Mon Sep 17 00:00:00 2001
From: GoEdgeLab <goedgecloud@gmail.com>
Date: Mon, 7 Jun 2021 08:43:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=93=E5=AD=98=E7=AD=96=E7=95=A5=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=94=AF=E6=8C=81=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../default/servers/components/cache/index.go | 15 +++-
 web/public/js/components/common/keyword.js    |  2 +-
 .../servers/components/cache/index.html       | 77 +++++++++++--------
 3 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/internal/web/actions/default/servers/components/cache/index.go b/internal/web/actions/default/servers/components/cache/index.go
index d0480839..7086ee06 100644
--- a/internal/web/actions/default/servers/components/cache/index.go
+++ b/internal/web/actions/default/servers/components/cache/index.go
@@ -16,8 +16,14 @@ func (this *IndexAction) Init() {
 	this.FirstMenu("index")
 }
 
-func (this *IndexAction) RunGet(params struct{}) {
-	countResp, err := this.RPC().HTTPCachePolicyRPC().CountAllEnabledHTTPCachePolicies(this.AdminContext(), &pb.CountAllEnabledHTTPCachePoliciesRequest{})
+func (this *IndexAction) RunGet(params struct {
+	Keyword string
+}) {
+	this.Data["keyword"] = params.Keyword
+
+	countResp, err := this.RPC().HTTPCachePolicyRPC().CountAllEnabledHTTPCachePolicies(this.AdminContext(), &pb.CountAllEnabledHTTPCachePoliciesRequest{
+		Keyword: params.Keyword,
+	})
 	if err != nil {
 		this.ErrorPage(err)
 		return
@@ -27,8 +33,9 @@ func (this *IndexAction) RunGet(params struct{}) {
 	this.Data["page"] = page.AsHTML()
 
 	listResp, err := this.RPC().HTTPCachePolicyRPC().ListEnabledHTTPCachePolicies(this.AdminContext(), &pb.ListEnabledHTTPCachePoliciesRequest{
-		Offset: page.Offset,
-		Size:   page.Size,
+		Keyword: params.Keyword,
+		Offset:  page.Offset,
+		Size:    page.Size,
 	})
 	if err != nil {
 		this.ErrorPage(err)
diff --git a/web/public/js/components/common/keyword.js b/web/public/js/components/common/keyword.js
index 34a2d3b8..84fd3b81 100644
--- a/web/public/js/components/common/keyword.js
+++ b/web/public/js/components/common/keyword.js
@@ -9,7 +9,7 @@ Vue.component("keyword", {
 		let slot = this.$slots["default"][0]
 		let text = slot.text
 		if (word.length > 0) {
-			text = text.replace(new RegExp(word, "g"), "<span style=\"border: 1px #ccc dashed\">" + word + "</span>")
+			text = text.replace(new RegExp(word, "g"), "<span style=\"border: 1px #ccc dashed; color: #ef4d58\">" + word + "</span>")
 		}
 
 		return {
diff --git a/web/views/@default/servers/components/cache/index.html b/web/views/@default/servers/components/cache/index.html
index 2e80202f..9c0c06fd 100644
--- a/web/views/@default/servers/components/cache/index.html
+++ b/web/views/@default/servers/components/cache/index.html
@@ -1,36 +1,49 @@
 {$layout}
 
-	<second-menu>
-		<menu-item href="/servers/components/cache" code="index">列表</menu-item>
-		<span class="item">|</span>
-		<a href="" class="item" @click.prevent="createPolicy()">[创建]</a>
-	</second-menu>
+<first-menu>
+    <menu-item href="/servers/components/cache" code="index">列表</menu-item>
+    <span class="item">|</span>
+    <a href="" class="item" @click.prevent="createPolicy()">[创建]</a>
+</first-menu>
 
-	<p class="comment" v-if="cachePolicies == null || cachePolicies.length == 0">暂时还没有缓存策略。</p>
-	<table class="ui table selectable celled" v-if="cachePolicies != null && cachePolicies.length > 0">
-		<thead>
-			<tr>
-				<th>策略名称</th>
-				<th>策略类型</th>
-				<th>容量</th>
-				<th class="center">集群数</th>
-				<th class="center">状态</th>
-				<th class="two op">操作</th>
-			</tr>
-		</thead>
-		<tr v-for="(policy, index) in cachePolicies">
-			<td>{{policy.name}}</td>
-			<td>{{infos[index].typeName}} <span class="small">（{{policy.type}}）</span></td>
-			<td>
-				<span v-if="policy.capacity != null && policy.capacity.count > 0">{{policy.capacity.count}}{{policy.capacity.unit.toUpperCase()}}</span>
-				<span v-else class="disabled">不限</span>
-			</td>
-			<td class="center">{{infos[index].countClusters}}</td>
-			<td class="center"><label-on :v-is-on="policy.isOn"></label-on></td>
-			<td>
-				<a :href="'/servers/components/cache/policy?cachePolicyId=' + policy.id">详情</a> &nbsp; <a href="" @click.prevent="deletePolicy(policy.id)">删除</a>
-			</td>
-		</tr>
-	</table>
+<div class="margin"></div>
+<form class="ui form" method="get" action="/servers/components/cache">
+    <div class="ui fields inline">
+        <div class="ui field">
+            <input type="text" name="keyword" v-model="keyword" placeholder="策略名称..."/>
+        </div>
+        <div class="ui field">
+            <button type="submit" class="ui button">搜索</button>
+        </div>
+    </div>
+</form>
 
-	<div class="page" v-html="page"></div>
\ No newline at end of file
+
+<p class="comment" v-if="cachePolicies == null || cachePolicies.length == 0">暂时还没有缓存策略。</p>
+<table class="ui table selectable celled" v-if="cachePolicies != null && cachePolicies.length > 0">
+    <thead>
+        <tr>
+            <th>策略名称</th>
+            <th>策略类型</th>
+            <th>容量</th>
+            <th class="center">集群数</th>
+            <th class="center">状态</th>
+            <th class="two op">操作</th>
+        </tr>
+    </thead>
+    <tr v-for="(policy, index) in cachePolicies">
+        <td><keyword :v-word="keyword">{{policy.name}}</keyword></td>
+        <td>{{infos[index].typeName}} <span class="small">（{{policy.type}}）</span></td>
+        <td>
+            <span v-if="policy.capacity != null && policy.capacity.count > 0">{{policy.capacity.count}}{{policy.capacity.unit.toUpperCase()}}</span>
+            <span v-else class="disabled">不限</span>
+        </td>
+        <td class="center">{{infos[index].countClusters}}</td>
+        <td class="center"><label-on :v-is-on="policy.isOn"></label-on></td>
+        <td>
+            <a :href="'/servers/components/cache/policy?cachePolicyId=' + policy.id">详情</a> &nbsp; <a href="" @click.prevent="deletePolicy(policy.id)">删除</a>
+        </td>
+    </tr>
+</table>
+
+<div class="page" v-html="page"></div>
\ No newline at end of file