feat(desktop): connection list hide support

src/assets/scss/connections.scss

@@ -10,6 +10,7 @@
   z-index: 1000;
   border-right: 1px solid var(--color-border-default);
   background-color: var(--color-bg-normal);
+  transition: all 0.3s ease-in-out;
 
   .no-data {
     text-align: center;
@@ -20,9 +21,15 @@
   }
 }
 
+.connections {
+  height: 100%;
+  .connections-view {
+    height: 100%;
+  }
+}
+
 .connection-skeleton-page {
   margin-top: 30px;
-  margin-left: 370px;
   margin-right: 30px;
   overflow-x: hidden;
 }

src/components/EmptyPage.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="empty-page right-content">
+  <div
+    class="empty-page right-content"
+    :style="{
+      marginLeft: showConnectionList ? '341px' : '81px',
+    }"
+  >
     <div class="empty-page__block">
       <div>
         <img :src="imageSrc" alt="new connection" />
@@ -33,6 +38,7 @@ export default class EmptyPage extends Vue {
   @Prop() public clickMethod!: <T>() => T | void
 
   @Getter('currentLang') private getterLang!: Language
+  @Getter('showConnectionList') private showConnectionList!: boolean
 
   get imageSrc(): string {
     return require(`../assets/images/${this.name}`)
@@ -50,6 +56,11 @@ export default class EmptyPage extends Vue {
 
 <style lang="scss" scoped>
 .empty-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+
   .empty-page__block {
     .primary-btn {
       background: linear-gradient(134deg, #37dc85 0%, #35ca8d 100%);
@@ -60,7 +71,6 @@ export default class EmptyPage extends Vue {
       margin-bottom: 20px;
     }
     text-align: center;
-    padding-top: 30%;
     p {
       margin: 24px auto;
       max-width: 650px;

src/components/MsgPublish.vue

@@ -240,7 +240,6 @@ import { emptyToNull } from '@/utils/handleString'
 })
 export default class MsgPublish extends Vue {
   @Prop({ required: true }) public editorHeight!: number
-  @Prop({ required: true }) public subsVisible!: boolean
   @Prop({ default: false }) public disabled!: boolean
   @Prop({ default: false }) public mqtt5PropsEnable!: boolean
   @Prop({ default: false }) public clientConnected!: boolean
@@ -309,12 +308,6 @@ export default class MsgPublish extends Vue {
   private handleHeightChanged() {
     this.handleLayout()
   }
-  @Watch('subsVisible')
-  private handleSubsChanged(val: boolean) {
-    setTimeout(() => {
-      this.handleLayout()
-    }, 500)
-  }
   @Watch('payloadType')
   private handleTypeChange(val: PayloadType, oldVal: PayloadType) {
     const { payload } = this.msgRecord

src/components/SubscriptionsList.vue

@@ -1,65 +1,60 @@
 <template>
   <div>
-    <left-panel>
-      <el-card
-        v-show="subsVisible"
-        shadow="never"
-        class="subscriptions-list-view"
+    <el-card
+      shadow="never"
+      class="subscriptions-list-view"
+      :style="{
+        top,
+        left: showConnectionList ? '341px' : '81px',
+      }"
+    >
+      <div slot="header" class="clearfix">
+        <el-button class="btn new-subs-btn" icon="el-icon-plus" plain type="outline" size="mini" @click="openDialog">
+          {{ $t('connections.newSubscription') }}
+        </el-button>
+      </div>
+      <div
+        v-for="(sub, index) in subsList"
+        :key="index"
+        :class="['topics-item', { active: index === topicActiveIndex, disabled: sub.disabled }]"
         :style="{
-          top,
+          background: `${sub.color}10`,
         }"
+        @click="handleClickTopic(sub, index)"
+        @contextmenu.prevent="handleContextMenu(sub, $event)"
       >
-        <div slot="header" class="clearfix">
-          <el-button class="btn new-subs-btn" icon="el-icon-plus" plain type="outline" size="mini" @click="openDialog">
-            {{ $t('connections.newSubscription') }}
-          </el-button>
-          <!-- <a class="hide-btn" href="javascript:;" @click="hideSubsList">
-            <i class="iconfont icon-collapse"></i>
-          </a> -->
-        </div>
         <div
-          v-for="(sub, index) in subsList"
-          :key="index"
-          :class="['topics-item', { active: index === topicActiveIndex, disabled: sub.disabled }]"
           :style="{
-            background: `${sub.color}10`,
+            background: `${sub.color}`,
           }"
-          @click="handleClickTopic(sub, index)"
-          @contextmenu.prevent="handleContextMenu(sub, $event)"
+          class="topics-color-line"
+        ></div>
+        <el-popover
+          placement="top"
+          trigger="hover"
+          popper-class="topic-tooltip"
+          :content="getPopoverContent(copySuccess, sub)"
         >
-          <div
+          <a
+            slot="reference"
+            v-clipboard:copy="sub.topic"
+            v-clipboard:success="onCopySuccess"
+            href="javascript:;"
+            class="topic"
             :style="{
-              background: `${sub.color}`,
+              color: sub.color,
             }"
-            class="topics-color-line"
-          ></div>
-          <el-popover
-            placement="top"
-            trigger="hover"
-            popper-class="topic-tooltip"
-            :content="getPopoverContent(copySuccess, sub)"
+            @click.stop="stopClick"
           >
-            <a
-              slot="reference"
-              v-clipboard:copy="sub.topic"
-              v-clipboard:success="onCopySuccess"
-              href="javascript:;"
-              class="topic"
-              :style="{
-                color: sub.color,
-              }"
-              @click.stop="stopClick"
-            >
-              {{ sub.alias || sub.topic }}
-            </a>
-          </el-popover>
-          <span class="qos">QoS {{ sub.qos }}</span>
-          <a href="javascript:;" class="close" @click.stop="unsubscribe(sub)">
-            <i :class="unsubLoading ? 'el-icon-loading' : 'el-icon-close'"></i>
+            {{ sub.alias || sub.topic }}
           </a>
-        </div>
-      </el-card>
-    </left-panel>
+        </el-popover>
+        <span class="qos">QoS {{ sub.qos }}</span>
+        <a href="javascript:;" class="close" @click.stop="unsubscribe(sub)">
+          <i :class="unsubLoading ? 'el-icon-loading' : 'el-icon-close'"></i>
+        </a>
+      </div>
+    </el-card>
     <contextmenu :visible.sync="showContextmenu" v-bind="contextmenuConfig">
       <a href="javascript:;" class="context-menu__item" @click="handleTopicEdit">
         <i class="iconfont icon-edit"></i>{{ $t('common.edit') }}
@@ -223,7 +218,6 @@ enum SubscribeErrorReason {
   },
 })
 export default class SubscriptionsList extends Vue {
-  @Prop({ required: true }) public subsVisible!: boolean
   @Prop({ required: true }) public connectionId!: string
   @Prop({ required: true }) public record!: ConnectionModel
   @Prop({ type: String, default: '60px' }) public top!: string
@@ -233,6 +227,7 @@ export default class SubscriptionsList extends Vue {
   @Getter('currentTheme') private theme!: Theme
   @Getter('multiTopics') private multiTopics!: boolean
   @Getter('activeConnection') private activeConnection!: ActiveConnection
+  @Getter('showConnectionList') private showConnectionList!: boolean
 
   private topicColor = ''
   private client: Partial<MqttClient> = {
@@ -704,6 +699,15 @@ export default class SubscriptionsList extends Vue {
 @import '~@/assets/scss/mixins.scss';
 
 .subscriptions-list-view {
+  position: fixed;
+  z-index: 1;
+  width: 230px;
+  background: var(--color-bg-normal);
+  border-radius: 0;
+  top: 0;
+  bottom: 0;
+  padding-bottom: 42px;
+  border-bottom: 0px;
   &.el-card {
     border-top: 0px;
     border-left: 0px;

src/store/getter.ts

@@ -5,7 +5,6 @@ const getters = {
   autoResub: (state: State) => state.app.autoResub,
   syncOsTheme: (state: State) => state.app.syncOsTheme,
   maxReconnectTimes: (state: State) => state.app.maxReconnectTimes,
-  showSubscriptions: (state: State) => state.app.showSubscriptions,
   connectionTreeState: (state: State) => state.app.connectionTreeState,
   activeConnection: (state: State) => state.app.activeConnection,
   showClientInfo: (state: State) => state.app.showClientInfo,
@@ -21,6 +20,7 @@ const getters = {
   model: (state: State) => state.app.model,
   isPrismButtonAdded: (state: State) => state.app.isPrismButtonAdded,
   logLevel: (state: State) => state.app.logLevel,
+  showConnectionList: (state: State) => state.app.showConnectionList,
 }
 
 export default getters

src/store/modules/app.ts

@@ -11,7 +11,6 @@ const CHANGE_ACTIVE_CONNECTION = 'CHANGE_ACTIVE_CONNECTION'
 const REMOVE_ACTIVE_CONNECTION = 'REMOVE_ACTIVE_CONNECTION'
 const CHANGE_SUBSCRIPTIONS = 'CHANGE_SUBSCRIPTIONS'
 const SHOW_CLIENT_INFO = 'SHOW_CLIENT_INFO'
-const SHOW_SUBSCRIPTIONS = 'SHOW_SUBSCRIPTIONS'
 const UNREAD_MESSAGE_COUNT_INCREMENT = 'UNREAD_MESSAGE_COUNT_INCREMENT'
 const SET_CONNECTIONS_TREE = 'SET_CONNECTIONS_TREE'
 const TOGGLE_WILL_MESSAGE_VISIBLE = 'TOGGLE_WILL_MESSAGE_VISIBLE'
@@ -26,13 +25,14 @@ const SET_MODEL = 'SET_MODEL'
 const SET_INSERT_BUTTON_ADDED = 'SET_INSERT_BUTTON_ADDED'
 const TOGGLE_ENABLE_COPILOT = 'TOGGLE_ENABLE_COPILOT'
 const SET_LOG_LEVEL = 'SET_LOG_LEVEL'
+const TOGGLE_SHOW_CONNECTION_LIST = 'TOGGLE_SHOW_CONNECTION_LIST'
 
-const getShowSubscriptions = (): boolean => {
-  const $showSubscriptions: string | null = localStorage.getItem('showSubscriptions')
-  if (!$showSubscriptions) {
+const getShowConnectionList = (): boolean => {
+  const _showConnectionList: string | null = localStorage.getItem('showConnectionList')
+  if (!_showConnectionList) {
     return true
   }
-  return JSON.parse($showSubscriptions)
+  return JSON.parse(_showConnectionList)
 }
 
 const settingData = remote.getGlobal('sharedData')
@@ -47,7 +47,6 @@ const app = {
     multiTopics: settingData.multiTopics,
     jsonHighlight: settingData.jsonHighlight,
     maxReconnectTimes: settingData.maxReconnectTimes || 10,
-    showSubscriptions: getShowSubscriptions(),
     showClientInfo: {},
     unreadMessageCount: {},
     connectionTreeState: {},
@@ -61,6 +60,7 @@ const app = {
     model: settingData.model || 'gpt-3.5-turbo',
     isPrismButtonAdded: false,
     logLevel: settingData.logLevel || 'info',
+    showConnectionList: getShowConnectionList(),
   },
   mutations: {
     [TOGGLE_THEME](state: App, currentTheme: Theme) {
@@ -110,10 +110,6 @@ const app = {
     [SHOW_CLIENT_INFO](state: App, payload: ClientInfo) {
       state.showClientInfo[payload.id] = payload.showClientInfo
     },
-    [SHOW_SUBSCRIPTIONS](state: App, payload: SubscriptionsVisible) {
-      state.showSubscriptions = payload.showSubscriptions
-      localStorage.setItem('showSubscriptions', JSON.stringify(state.showSubscriptions))
-    },
     [SET_CONNECTIONS_TREE](state: App, payload: ConnectionTreeState) {
       const { id } = payload
       state.connectionTreeState[id] = { expanded: payload.expanded }
@@ -159,6 +155,10 @@ const app = {
     [SET_LOG_LEVEL](state: App, logLevel: LogLevel) {
       state.logLevel = logLevel
     },
+    [TOGGLE_SHOW_CONNECTION_LIST](state: App, showConnectionList: boolean) {
+      state.showConnectionList = showConnectionList
+      localStorage.setItem('showConnectionList', JSON.stringify(state.showConnectionList))
+    },
   },
   actions: {
     async TOGGLE_THEME({ commit }: any, payload: App) {
@@ -224,9 +224,6 @@ const app = {
     async SET_CONNECTIONS_TREE({ commit }: any, payload: App) {
       commit(SET_CONNECTIONS_TREE, payload)
     },
-    async SHOW_SUBSCRIPTIONS({ commit }: any, payload: App) {
-      commit(SHOW_SUBSCRIPTIONS, payload)
-    },
     async UNREAD_MESSAGE_COUNT_INCREMENT({ commit }: any, payload: App) {
       commit(UNREAD_MESSAGE_COUNT_INCREMENT, payload)
     },
@@ -269,6 +266,9 @@ const app = {
       settingData.logLevel = payload.logLevel
       await settingService.update(payload)
     },
+    TOGGLE_SHOW_CONNECTION_LIST({ commit }: any, payload: App) {
+      commit(TOGGLE_SHOW_CONNECTION_LIST, payload.showConnectionList)
+    },
   },
 }
 

src/types/global.d.ts

@@ -87,7 +87,6 @@ declare global {
     currentLang: Language
     autoCheck: boolean
     autoResub: boolean
-    showSubscriptions: boolean
     syncOsTheme: boolean
     multiTopics: boolean
     maxReconnectTimes: number
@@ -110,6 +109,7 @@ declare global {
     model: AIModel
     isPrismButtonAdded: boolean
     logLevel: LogLevel
+    showConnectionList: boolean
   }
 
   interface State {
@@ -152,10 +152,6 @@ declare global {
     increasedCount?: number
   }
 
-  interface SubscriptionsVisible {
-    showSubscriptions: boolean
-  }
-
   interface SubscriptionModel {
     id?: string
     topic: string

src/views/Home.vue

@@ -73,10 +73,10 @@ export default class Home extends Vue {
   }
   .right-topbar {
     position: fixed;
-    left: 341px;
     right: 0;
     z-index: 2;
     background: var(--color-bg-normal);
+    transition: all 0.4s;
   }
   .rightbar {
     margin-left: 81px;
@@ -85,7 +85,6 @@ export default class Home extends Vue {
     border-left: 1px solid var(--color-border-rightbar);
   }
   .right-content {
-    margin-left: 341px;
     height: 100%;
     background-color: var(--color-bg-primary);
   }