add acl vue

README.md

@@ -1,2 +1,3 @@
 # kafka可视化管理平台
-目前支持部分acl功能管理操作
+目前支持部分acl功能管理操作  
+实现：spring boot + scala + vue + kafka  

ui/src/App.vue

@@ -1,12 +1,15 @@
 <template>
   <div id="app">
     <div id="nav">
-      <a-button>button</a-button>
-
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/" class="pad-l-r">主页</router-link>
+      |<router-link to="/acl" class="pad-l-r">Acl</router-link>
+      <!--      |<router-link-->
+      <!--        to="/topic"-->
+      <!--        class="pad-l-r"-->
+      <!--        >主题</router-link-->
+      <!--      >-->
     </div>
-    <router-view />
+    <router-view class="content" />
   </div>
 </template>
 
@@ -19,8 +22,17 @@
   color: #2c3e50;
 }
 
+#app {
+  width: 100%;
+  height: 100%;
+}
+
 #nav {
-  padding: 30px;
+  background-color: #9fe0e0;
+  font-size: large;
+  padding-top: 1%;
+  padding-bottom: 1%;
+  margin-bottom: 1%;
 }
 
 #nav a {
@@ -29,6 +41,18 @@
 }
 
 #nav a.router-link-exact-active {
-  color: #42b983;
+  color: #61c126;
+}
+
+.pad-l-r {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.content {
+  padding-left: 2%;
+  padding-right: 2%;
+  height: 90%;
+  width: 100%;
 }
 </style>

ui/src/components/HelloWorld.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-
   </div>
-
-
 </template>
 
 <script>

ui/src/main.js

@@ -3,11 +3,11 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 // eslint-disable-next-line no-unused-vars
-import {Button} from "ant-design-vue";
-import 'ant-design-vue/dist/antd.css';
+import Antd from "ant-design-vue";
+import "ant-design-vue/dist/antd.css";
 
 Vue.config.productionTip = false;
-Vue.use(Button)
+Vue.use(Antd);
 
 new Vue({
   router,

ui/src/router/index.js

@@ -11,13 +11,19 @@ const routes = [
     component: Home,
   },
   {
-    path: "/about",
-    name: "About",
+    path: "/acl",
+    name: "Acl",
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+      import(/* webpackChunkName: "acl" */ "../views/acl/Acl.vue"),
+  },
+  {
+    path: "/topic",
+    name: "Topic",
+    component: () =>
+      import(/* webpackChunkName: "topic" */ "../views/topic/Topic.vue"),
   },
 ];
 

ui/src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

ui/src/views/acl/Acl.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="content">
+    <div class="acl">
+      <a-table :columns="columns" :data-source="data" bordered>
+        <a slot="operation" slot-scope="{}">删除</a>
+        <!--        <a-table-->
+        <!--          slot="expandedRowRender"-->
+        <!--          slot-scope="{}"-->
+        <!--          :columns="innerColumns"-->
+        <!--          :data-source="innerData"-->
+        <!--          :pagination="false"-->
+        <!--        >-->
+        <!--          <span slot="status" slot-scope="{}"> <a-badge status="success" />Finished </span>-->
+        <!--          <span slot="operation" slot-scope="{}" class="table-operation">-->
+        <!--            <a>Pause</a>-->
+        <!--            <a>Stop</a>-->
+        <!--            <a-dropdown>-->
+        <!--              <a-menu slot="overlay">-->
+        <!--                <a-menu-item>-->
+        <!--                  Action 1-->
+        <!--                </a-menu-item>-->
+        <!--                <a-menu-item>-->
+        <!--                  Action 2-->
+        <!--                </a-menu-item>-->
+        <!--              </a-menu>-->
+        <!--              <a> More <a-icon type="down" /> </a>-->
+        <!--            </a-dropdown>-->
+        <!--          </span>-->
+        <!--        </a-table>-->
+      </a-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Acl",
+  data() {
+    return {
+      data,
+      columns,
+      innerColumns,
+      innerData,
+    };
+  },
+};
+
+const columns = [
+  { title: "用户名", dataIndex: "username", key: "username" },
+  { title: "topic列表", dataIndex: "topicList", key: "topicList" },
+  { title: "消费组列表", dataIndex: "groupList", key: "groupList" },
+  {
+    title: "操作",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+  },
+];
+
+const data = [];
+for (let i = 0; i < 30; ++i) {
+  data.push({
+    key: i,
+    username: "amdin",
+    topicList: ["test_topic1", "test_topic2", "test_topic3"].join(', '),
+    groupList: ["test_topic1_consumer", "test_topic2_consumer", "test_topic3_consumer"].join(', '),
+  });
+}
+
+const innerColumns = [
+  { title: "Date", dataIndex: "date", key: "date" },
+  { title: "Name", dataIndex: "name", key: "name" },
+  { title: "Status", key: "state", scopedSlots: { customRender: "status" } },
+  { title: "Upgrade Status", dataIndex: "upgradeNum", key: "upgradeNum" },
+  {
+    title: "Action",
+    dataIndex: "operation",
+    key: "operation",
+    scopedSlots: { customRender: "operation" },
+  },
+];
+
+const innerData = [];
+for (let i = 0; i < 3; ++i) {
+  innerData.push({
+    key: i,
+    date: "2014-12-24 23:12:00",
+    name: "This is production name",
+    upgradeNum: "Upgraded: 56",
+  });
+}
+</script>
+
+<style scoped>
+.acl {
+  width: 100%;
+  height: 100%;
+}
+</style>

ui/src/views/topic/Topic.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <HelloWorld msg="This is topic console."></HelloWorld>
+  </div>
+</template>
+
+<script>
+import HelloWorld from "@/components/HelloWorld.vue";
+
+export default {
+  name: "Topic",
+  components: {
+    HelloWorld,
+  },
+};
+</script>
+
+<style scoped></style>