polish README

README.md

@@ -2,95 +2,70 @@
 一款轻量级的kafka可视化管理平台，安装配置快捷、简单易用。  
 为了开发的省事，没有国际化支持，只支持中文展示。  
 用过rocketmq-console吧，对，前端展示风格跟那个有点类似。
-## 说明
-当前主分支及日后版本不再提供消息同步、迁移的解决方案，如有需要，可以使用single-data-sync分支的代码或者发布v1.0.2： [kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.2/kafka-console-ui.zip) 的安装包  
 
-v1.0.2版本及其之前的版本只支持单集群配置，但是对于SASL_SCRAM认证授权管理功能相当完善  
+## 页面预览
+如果github能查看图片的话，可以点击[查看菜单页面]()，查看每个页面的样子
+## 集群迁移支持说明
+当前主分支及日后版本不再提供消息同步、集群迁移的解决方案，如有需要，查看：[集群迁移说明](./document/datasync/集群迁移.md)
 
-后续版本会支持多集群管理，并将v1.0.2之前的部分功能去掉或优化，目的是做为一个足够轻量的管理工具，不再涉及其它属性
-## 安装包下载
-以下两种方式2选一，直接下载安装包或下载源码，手动打包  
-* 点击下载(v1.0.2版本)：[kafka-console-ui.tar.gz](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.2/kafka-console-ui.tar.gz) 或 [kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.2/kafka-console-ui.zip)
-* 参考下面的打包部署，下载源码重新打包(提交的最新功能特性)  
 ## 功能支持
+* 多集群支持
 * 集群信息
 * Topic管理
 * 消费组管理
 * 消息管理
-* 基于SASL_SCRAM认证授权管理
+* ACL
 * 运维
-![功能特性](./document/功能特性.png)
+
-## 技术栈
+功能明细看这个脑图：
-* spring boot 
+![功能特性](./document/img/功能特性.png)
-* java、scala 
+
-* kafka
+## 安装包下载
-* h2  
+点击下载(v1.0.2版本)：[kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.2/kafka-console-ui.zip)
-* vue 
+
-## kafka版本
+## 快速使用
-* 当前使用的kafka 2.8.0
+### Windows
-## 监控
+1. 解压缩zip安装包  
-仅提供运维管理功能，监控、告警需要配合其它组件，使用请查看：https://blog.csdn.net/x763795151/article/details/119705372
+2. 进入bin目录（必须在bin目录下），双击执行`start.bat`启动
-# 打包、部署
+3. 停止：直接关闭启动的命令行窗口即可
-## 打包
+
-环境要求  
+### Linux或Mac OS
-* maven 3.6+
-* jdk 8
-* git  
 ```
-git clone https://github.com/xxd763795151/kafka-console-ui.git
+# 解压缩
-cd kafka-console-ui
+unzip kafka-console-ui.zip
-# linux或mac执行
-sh package.sh
-# windows执行
-package.bat
-```
-打包成功，输出文件(以下2种归档类型)：  
-* target/kafka-console-ui.tar.gz  
-* target/kafka-console-ui.zip  
-## 部署
-### Mac OS 或 Linux
-```
-# 解压缩(以tar.gz为例)
-tar -zxvf kafka-console-ui.tar.gz
 # 进入解压缩后的目录
 cd kafka-console-ui
-# 编辑配置
-vim config/application.yml
 # 启动
 sh bin/start.sh
 # 停止
 sh bin/shutdown.sh
 ```
-### Windows
-1.解压缩zip安装包  
-2.编辑配置文件 ：`config/application.yml`  
-3.进入bin目录（必须在bin目录下），执行`start.bat`启动  
 
+### 访问地址
 启动完成，访问：http://127.0.0.1:7766
 
-# 开发环境
+### 配置集群
-* jdk 8
+第一次启动，打开浏览器后，因为还没有配置kafka集群信息，所以页面右上角可能会有错误信息，比如：No Cluster Info或者是没有集群信息，请先切换集群之类的提示。  
-* idea
-* scala 2.13
-* maven >=3.6+
-* webstorm
-除了webstorm是开发前端的ide可以根据自己需要代替，jdk scala是必须有的。
-# 本地开发配置
-以我自己为例，开发环境里的工具准备好，然后代码clone到本地。
-## 后端配置
-1. 用idea打开项目
-2. 打开idea的Project Structure(Settings) ->  Modules -> 设置src/main/scala为Sources，因为约定src/main/java是源码目录，所以这里要再加一个
-3. 打开idea的Project Structure(Settings) -> Libraries 添加scala sdk，然后选择本地下载的scala 2.13的目录，确定添加进来
-## 前端
-前端代码在工程的ui目录下，找个前端开发的ide打开进行开发即可。
-## 注意
-前后分离，直接启动后端如果未编译前端代码是没有前端页面的，可以先打包进行编译`sh package.sh`，然后再用idea启动，或者前端部分单独启动  
-# 页面示例
-如果未启用ACL配置，不会显示ACL的菜单页面，所以导航栏上没有Acl这一项  
 
-![集群](./document/集群.png)  
+集群配置如下：
-![Topic](./document/Topic.png)  
+1. 点击页面上方导航栏的 [运维] 菜单
-![消费组](./document/消费组.png)  
+2. 点击集群管理下的 [集群切换] 按钮
-![运维](./document/运维.png)  
+3. 在弹框里点击 [新增集群]
-增加消息检索页面
+4. 然后输入kafka集群地址和一个名称（随便起个名字）
-![消息](./document/消息.png)  
+5. 点击提交便增加成功了
+6. 增加成功可以看到会话框已经有这个集群信息，然后点击右侧的 [切换] 按钮，便切换该集群为当前集群  
+
+后续如果再增加其它集群，就可以按上面这个流程，如果想切换到哪个集群，点击切换按钮，便会切换到对应的集群，页面的右上角会显示当前是使用的哪个集群，如果不确定，可以刷新下页面。
+
+在新增集群的时候，除了集群地址还可以输入集群的其它属性配置，比如请求超时，ACL配置等。如果开启了ACL，切换到该集群的时候，导航栏上便会出现ACL菜单，支持进行相关操作（目前是基于SASL_SCRAM认证授权管理支持的最完善，其它的我也没验证过，虽然是我开发的，但是我也没具体全部验证这一块功能，授权部分应该是通用的）
+
+## kafka版本
+* 当前使用的kafka 2.8.0
+## 监控
+仅提供运维管理功能，监控、告警需要配合其它组件，如有需要，建议请查看：https://blog.csdn.net/x763795151/article/details/119705372
+
+## 源码打包
+如果想通过源码打包，查看：[源码打包说明](./document/package/源码打包.md)
+
+## 本地开发
+如果需要本地开发，开发环境配置查看：[本地开发](./document/develop/开发配置.md)

document/datasync/集群迁移.md

@@ -0,0 +1,11 @@
+# 集群迁移
+可能是有的同学看了我以前发的解决云上、云下集群迁移的方案，好奇看到了这里。
+当时发的文章链接在这里：[kafka新老集群平滑迁移实践](https://blog.csdn.net/x763795151/article/details/121070563)
+
+不过考虑到这些功能涉及到业务属性，已经在新的版本中都去掉了。
+
+当前主分支及日后版本不再提供消息同步、集群迁移的解决方案，如有需要，可以使用single-data-sync分支的代码或者历史发布的v1.0.2(直接下载)： [kafka-console-ui.zip](https://github.com/xxd763795151/kafka-console-ui/releases/download/v1.0.2/kafka-console-ui.zip) 的安装包。
+
+v1.0.2版本及其之前的版本只支持单集群配置，但是对于SASL_SCRAM认证授权管理功能相当完善。
+
+后续版本会支持多集群管理，并将v1.0.2之前的部分功能去掉或优化，目的是做为一个足够轻量的管理工具，不再涉及其它属性。

document/develop/开发配置.md

@@ -0,0 +1,31 @@
+# 本地开发配置说明
+## 技术栈
+* spring boot
+* java、scala
+* kafka
+* h2
+* vue 
+
+## 开发环境
+* jdk 8
+* idea
+* scala 2.13
+* maven >=3.6+
+* webstorm
+  
+除了webstorm是开发前端的ide可以根据自己需要代替，jdk scala是必须有的。
+  
+scala 2.13下载地址，在这个页面最下面：https://www.scala-lang.org/download/scala2.html
+## 克隆代码
+以我自己为例，开发环境里的工具准备好，然后代码clone到本地。
+## 后端配置
+1. 用idea打开项目
+2. 打开idea的Project Structure(Settings) ->  Modules -> 设置src/main/scala为Sources，因为约定src/main/java是源码目录，所以这里要再加一个源码目录
+3. 打开idea的Project Structure(Settings) -> Libraries 添加scala sdk，然后选择本地下载的scala 2.13的目录，确定添加进来（如果使用的idea可以直接勾选，也可以不用先下载到本地）
+## 前端
+前端代码在工程的ui目录下，找个前端开发的ide如web storm打开进行开发即可。
+
+## 注意
+前后分离，直接启动后端工程的话，src/main/resources目录下可能是没有静态文件的，所以直接通过浏览器访问应该是没页面的。
+
+可以先打包编译一下前端文件，比如执行：`sh package.sh`，然后再用idea启动。或者是后端用idea启动完成后，找个前端的ide 比如web storm打开工程的ui目录下的前端项目，单独启动，进行开发。  

document/overview/概览.md

@@ -0,0 +1,32 @@
+# 菜单预览
+如果未启用ACL配置，不会显示ACL的菜单页面，所以导航栏上没有Acl这一项
+## 集群
+* 展示集群列表
+![集群](./img/集群.png)
+* 查看或修改集群配置
+![Broker配置](./img/Broker配置.png)
+  
+
+## Topic
+* Topic列表
+![Topic](./img/Topic.png)
+  
+
+## 消费组
+* 消费组列表
+![消费组](./img/消费组.png)
+  
+
+## 消息
+* 根据时间检索或过滤消息
+![消息时间查询](./img/消息时间查询.png)
+  
+* 消息详情
+![消息详情](./img/消息详情.png)
+  
+
+## 运维
+* 运维页面
+![运维](./img/运维.png)
+* 集群切换
+![集群切换](./img/集群切换.png)

document/package/源码打包.md

@@ -0,0 +1,32 @@
+# 源码打包说明
+可以直接下载最新代码，进行打包，最新代码相比已经发布的安装包可能会包含最新的特性
+
+## 环境要求
+* maven 3.6+
+* jdk 8
+* git（非必须）  
+
+maven是建议版本>=3.6版本，3.4+和3.5+我也没试过，3.3+的版本，在windows上我试了下打包有bug，可能把spring boot的application.yml打不到合适的目录。
+
+如果3.6+在mac上也不行（也是上面这个问题），建议用最新版本试试。
+
+## 源码下载
+```
+git clone https://github.com/xxd763795151/kafka-console-ui.git
+```
+或者直接在页面下载源码
+
+## 打包
+我已经写了个简单的打包脚本，直接执行即可。
+### Windows
+```
+cd kafka-console-ui
+# windows执行
+package.bat
+```
+### Linux或Mac OS
+```
+cd kafka-console-ui
+# linux或mac执行
+sh package.sh
+```

ui/package-lock.json

@@ -1820,63 +1820,6 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz",
@@ -1885,28 +1828,6 @@
           "requires": {
             "minipass": "^3.1.1"
           }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.5.0",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
-          "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -12176,6 +12097,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-ref": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz",