From 0ffab24770ca57dd52a99dc96e9f5214024e038d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=99=93=E4=B8=9C?= <763795151@qq.com>
Date: Sat, 23 Oct 2021 20:36:19 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9B=86=E7=BE=A4=E5=90=8C=E6=AD=A5-=E3=80=8B?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E6=B6=88=E8=B4=B9=E4=BD=8D=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/op/Operation.vue | 37 ++++++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/ui/src/views/op/Operation.vue b/ui/src/views/op/Operation.vue
index ccf95c7..bfe843c 100644
--- a/ui/src/views/op/Operation.vue
+++ b/ui/src/views/op/Operation.vue
@@ -1,17 +1,40 @@
 <template>
-  <div>
-    <HelloWorld msg="This is operation console."></HelloWorld>
+  <div class="content">
+    <div class="content-module">
+      <a-card title="数据同步" style="width: 100%; text-align: left">
+        <p>
+          <a-button type="primary"> 同步消费位点 </a-button>
+          <label>说明：</label>
+          <span
+            >同步其它集群中指定消费组与订阅的topic的消费位点到当前集群上，该消费组在当前集群已存在，且双方订阅的topic分区信息一致</span
+          >
+        </p>
+      </a-card>
+    </div>
+    <div class="content-module">
+      <a-card title="副本管理" style="width: 100%; text-align: left">
+        <p>
+          <a-button type="primary"> 首选副本作为leader </a-button>
+          <label>说明：</label>
+          <span>将集群中所有分区leader副本设置为首选副本</span>
+        </p>
+      </a-card>
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from "@/components/HelloWorld.vue";
 export default {
   name: "Operation",
-  components: {
-    HelloWorld,
-  },
+  components: {},
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.content-module {
+  margin-bottom: 1%;
+}
+.content-module button {
+  margin-right: 1%;
+}
+</style>