+
@@ -24,7 +24,6 @@ export default class Leftbar extends Vue {}
.leftbar {
position: fixed;
width: 280px;
- top: 0;
bottom: 0;
overflow-x: hidden;
z-index: 1000;
diff --git a/src/components/NativeTitlebar.vue b/src/components/NativeTitlebar.vue
new file mode 100644
index 000000000..b919ea20f
--- /dev/null
+++ b/src/components/NativeTitlebar.vue
@@ -0,0 +1,33 @@
+
+
+ MQTTX
+
+
+
+
+
+
+
+
diff --git a/src/components/SearchTopbar.vue b/src/components/SearchTopbar.vue
index 9b06a694f..712064292 100644
--- a/src/components/SearchTopbar.vue
+++ b/src/components/SearchTopbar.vue
@@ -1,5 +1,5 @@
-
+
state.app.activeConnection,
showClientInfo: (state: State) => state.app.showClientInfo,
unreadMessageCount: (state: State) => state.app.unreadMessageCount,
+ MacOSTop: (state: State) => state.app.MacOSTop,
}
export default getters
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 02975402a..a59c0cc11 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -31,12 +31,14 @@ const app = {
showClientInfo: {},
unreadMessageCount: {},
activeConnection: {},
+ // On MacOS system we have custom titlebar, should has TOP value to display it.
+ MacOSTop: process.platform === 'darwin' ? '24px' : '0px',
},
mutations: {
- [TOGGLE_THEME](state: App, currentTheme: string) {
+ [TOGGLE_THEME](state: App, currentTheme: 'light' | 'dark' | 'purple') {
state.currentTheme = currentTheme
},
- [TOGGLE_LANG](state: App, currentLang: string) {
+ [TOGGLE_LANG](state: App, currentLang: 'en' | 'zh') {
state.currentLang = currentLang
},
[TOGGLE_AUTO_CHECK](state: App, autoCheck: boolean) {
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index f7ed1be05..01e28ac06 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -51,8 +51,9 @@ declare global {
}
interface App {
- currentTheme: string,
- currentLang: string,
+ currentTheme: 'light' | 'dark' | 'purple',
+ currentLang: 'en' | 'zh',
+ MacOSTop: '24px' | '0px',
autoCheck: boolean,
showSubscriptions: boolean,
showClientInfo: {
diff --git a/src/utils/api/setting.ts b/src/utils/api/setting.ts
index af7fb1569..5197a96d4 100644
--- a/src/utils/api/setting.ts
+++ b/src/utils/api/setting.ts
@@ -1,10 +1,10 @@
import db from '@/datastore/index'
-export const loadSettings = (): any => {
- return db.get('settings')
+export const loadSettings = (): App => {
+ return db.get('settings')
}
-export const setSettings = (key: string, value: string | boolean): any => {
+export const setSettings = (key: string, value: string | boolean): string | boolean => {
return db.set(key, value)
}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ddb88f899..79375229b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -17,10 +17,10 @@ import Ipc from '@/components/Ipc.vue'
},
})
export default class Home extends Vue {
- @Getter('currentTheme') private getterTheme: any
- @Getter('currentLang') private getterLang: any
+ @Getter('currentTheme') private getterTheme!: 'light' | 'dark' | 'purple'
+ @Getter('currentLang') private getterLang!: 'en' | 'zh'
- private setTheme(currentTheme: string): void {
+ private setTheme(currentTheme: 'light' | 'dark' | 'purple'): void {
const bodyTag: HTMLBodyElement | null = document.querySelector('body')
if (!bodyTag) {
return
@@ -28,7 +28,7 @@ export default class Home extends Vue {
bodyTag.className = currentTheme
}
- private setLang(currentLang: string): void {
+ private setLang(currentLang: 'en' | 'zh'): void {
document.documentElement.lang = currentLang
this.$i18n.locale = currentLang
}
@@ -55,20 +55,20 @@ export default class Home extends Vue {
.left-topbar {
padding: 0 16px;
position: fixed;
- top: 0;
left: 0;
z-index: 1;
background: var(--color-bg-normal);
width: 280px;
border-right: 2px solid var(--color-border-default);
+ -webkit-app-region: drag;
}
.right-topbar {
position: fixed;
- top: 0;
left: 280px;
right: 0;
z-index: 3;
background: var(--color-bg-normal);
+ -webkit-app-region: drag;
}
.right-content {
margin-left: 280px;
diff --git a/src/views/brokers/BrokerContent.vue b/src/views/brokers/BrokerContent.vue
index ccf7ffc2d..14f130bda 100644
--- a/src/views/brokers/BrokerContent.vue
+++ b/src/views/brokers/BrokerContent.vue
@@ -1,6 +1,6 @@
-
+
{{ record.brokerName }}
diff --git a/src/views/brokers/BrokersList.vue b/src/views/brokers/BrokersList.vue
index 4b7b24067..ced19fdbf 100644
--- a/src/views/brokers/BrokersList.vue
+++ b/src/views/brokers/BrokersList.vue
@@ -10,7 +10,7 @@
{{ broker.brokerName }}
@@ -33,6 +33,7 @@
+
+## MQTTX
+
+[](https://github.com/emqx/mqttx/releases)  [](https://github.com/emqx/mqttx/releases)
+
+[English](./README.md) | 简体中文
+
+---
+
+MQTTX 是 EMQ 开源的一款跨平台 MQTT 桌面客户端，它支持 macOS, Linux, Windows。
+
+MQTTX 采用了聊天界面形式，简化了页面操作逻辑，方便用户快速测试 MQTT/MQTTS 连接，及 MQTT 消息的发布与订阅。
+
+## 预览
+
+
+
+## 安装
+
+请从 [GitHub Releases](https://github.com/emqx/MQTTX/releases) 下载符合您的版本并安装使用。
+
+## 使用
+
+1. 首先创建一个 Broker
+
+2. 同一个 Broker 下可以创建多个客户端
+
+3. 回到连接页面，选择刚才创建的 Broker 下的客户端进行连接测试
+
+## 开发
+
+``` shell
+# 克隆项目
+git clone git@github.com:emqx/MQTTX.git
+
+# 安装依赖
+cd MQTTX
+yarn install
+
+# 编译和热重载以进行开发
+yarn run electron:serve
+
+# 编译和压缩以构建生产版本
+yarn run electron:build
+```
+
+## 贡献
+
+1. Fork 这个项目
+
+2. 添加 upstream remote `git remote add upstream git@github.com:emqx/MQTTX.git`
+
+3. 本地修改代码，添加一个 commit 在您本地新的分支里
+
+4. 向 upstream 仓库的 develop 分支提交一个 Pull Request，我们将会审核它
+
+## 技术栈
+
+- [Vue](https://vuejs.org/) + [Element](https://element.eleme.io)
+- [Electron](https://electronjs.org/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Lowdb](https://github.com/typicode/lowdb)
+
+## License
+
+Apache License 2.0, see [LICENSE](https://github.com/emqx/MQTTX/blob/master/LICENSE).
diff --git a/README.md b/README.md
index 4893c53cb..f4178bc5b 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,66 @@
-# MQTTX
+