emqx · ysfscream · Aug 24, 2022 · Aug 24, 2022
diff --git a/web/src/database/index.ts b/web/src/database/index.ts
@@ -37,6 +37,7 @@ class DB {
           autoCheck: true,
           currentLang: 'en',
           currentTheme: 'light',
+          autoScroll: true,
           multiTopics: true,
           maxReconnectTimes: 10,
         })

diff --git a/web/src/lang/settings.ts b/web/src/lang/settings.ts
@@ -49,6 +49,16 @@ export default {
     en: 'Advanced',
     ja: '詳細',
   },
+  autoScroll: {
+    zh: '自动滚动',
+    en: 'Auto scroll',
+    ja: '自動スクロール',
+  },
+  autoScrollDesc: {
+    zh: '是否自动滚动消息列表',
+    en: 'Whether to automatically scroll the list of messages',
+    ja: 'メッセージリストを自動的にスクロールするかどうか',
+  },
   multiTopics: {
     zh: '多主题订阅',
     en: 'Multi topics subscribe',

diff --git a/web/src/store/getter.ts b/web/src/store/getter.ts
@@ -2,6 +2,7 @@ const getters = {
   currentTheme: (state: State) => state.app.currentTheme,
   currentLang: (state: State) => state.app.currentLang,
   autoCheck: (state: State) => state.app.autoCheck,
+  autoScroll: (state: State) => state.app.autoScroll,
   maxReconnectTimes: (state: State) => state.app.maxReconnectTimes,
   showSubscriptions: (state: State) => state.app.showSubscriptions,
   activeConnection: (state: State) => state.app.activeConnection,

diff --git a/web/src/store/modules/app.ts b/web/src/store/modules/app.ts
@@ -4,6 +4,7 @@ import { loadSettings, setSettings } from '@/utils/api/setting'
 const TOGGLE_THEME = 'TOGGLE_THEME'
 const TOGGLE_LANG = 'TOGGLE_LANG'
 const TOGGLE_AUTO_CHECK = 'TOGGLE_AUTO_CHECK'
+const TOGGLE_AUTO_SCROLL = 'TOGGLE_AUTO_SCROLL'
 const SET_MAX_RECONNECT_TIMES = 'SET_MAX_RECONNECT_TIMES'
 const CHANGE_ACTIVE_CONNECTION = 'CHANGE_ACTIVE_CONNECTION'
 const REMOVE_ACTIVE_CONNECTION = 'REMOVE_ACTIVE_CONNECTION'
@@ -31,6 +32,7 @@ const app = {
     currentTheme: stateRecord.currentTheme || 'light',
     currentLang: stateRecord.currentLang || 'en',
     autoCheck: stateRecord.autoCheck,
+    autoScroll: stateRecord.autoScroll,
     multiTopics: stateRecord.multiTopics,
     maxReconnectTimes: stateRecord.maxReconnectTimes || 10,
     showSubscriptions: getShowSubscriptions(),
@@ -51,6 +53,9 @@ const app = {
     [TOGGLE_AUTO_CHECK](state: App, autoCheck: boolean) {
       state.autoCheck = autoCheck
     },
+    [TOGGLE_AUTO_SCROLL](state: App, autoScroll: boolean) {
+      state.autoScroll = autoScroll
+    },
     [TOGGLE_MULTI_TOPICS](state: App, multiTopics: boolean) {
       state.multiTopics = multiTopics
     },
@@ -123,6 +128,10 @@ const app = {
       setSettings('settings.autoCheck', payload.autoCheck)
       commit(TOGGLE_AUTO_CHECK, payload.autoCheck)
     },
+    TOGGLE_AUTO_SCROLL({ commit }: any, payload: App) {
+      setSettings('settings.autoScroll', payload.autoScroll)
+      commit(TOGGLE_AUTO_SCROLL, payload.autoScroll)
+    },
     TOGGLE_MULTI_TOPICS({ commit }: any, payload: App) {
       setSettings('settings.multiTopics', payload.multiTopics)
       commit(TOGGLE_MULTI_TOPICS, payload.multiTopics)

diff --git a/web/src/types/global.d.ts b/web/src/types/global.d.ts
@@ -114,6 +114,7 @@ declare global {
     currentTheme: Theme
     currentLang: Language
     autoCheck: boolean
+    autoScroll: boolean
     showSubscriptions: boolean
     multiTopics: boolean
     maxReconnectTimes: number

diff --git a/web/src/views/connections/ConnectionsDetail.vue b/web/src/views/connections/ConnectionsDetail.vue
@@ -252,6 +252,7 @@ export default class ConnectionsDetail extends Vue {
 
   @Getter('activeConnection') private activeConnection: $TSFixed
   @Getter('showSubscriptions') private showSubscriptions!: boolean
+  @Getter('autoScroll') private autoScroll!: boolean
   @Getter('maxReconnectTimes') private maxReconnectTimes!: number
   @Getter('currentTheme') private theme!: Theme
   @Getter('showClientInfo') private clientInfoVisibles!: {
@@ -859,6 +860,9 @@ export default class ConnectionsDetail extends Vue {
 
   // Scroll to page bottom
   private scrollToBottom() {
+    if (this.autoScroll === false) {
+      return
+    }
     const timer = setTimeout(() => {
       const messagesDisplay = this.$refs.messagesDisplay as MessageList
       const messagesDisplayDOM = messagesDisplay.$el

diff --git a/web/src/views/settings/index.vue b/web/src/views/settings/index.vue
@@ -25,6 +25,33 @@
 
       <el-divider></el-divider>
 
+      <el-row class="settings-item" type="flex" justify="space-between">
+        <el-col :span="20">
+          <label>{{ $t('settings.autoScroll') }}</label>
+          <el-tooltip
+            placement="top"
+            :effect="currentTheme !== 'light' ? 'light' : 'dark'"
+            :open-delay="500"
+            :content="$t('settings.autoScrollDesc')"
+          >
+            <a href="javascript:;" class="icon-oper">
+              <i class="el-icon-warning-outline"></i>
+            </a>
+          </el-tooltip>
+        </el-col>
+        <el-col :span="4">
+          <el-switch
+            :value="autoScroll"
+            active-color="#13ce66"
+            inactive-color="#A2A9B0"
+            @change="handleAutoScrollSwitchChange"
+          >
+          </el-switch>
+        </el-col>
+      </el-row>
+
+      <el-divider></el-divider>
+
       <el-row class="settings-item" type="flex" justify="space-between">
         <el-col :span="20">
           <label>{{ $t('settings.multiTopics') }}</label>
@@ -101,10 +128,12 @@ export default class Settings extends Vue {
   @Action('TOGGLE_THEME') private actionTheme!: (payload: { currentTheme: string }) => void
   @Action('TOGGLE_LANG') private actionLang!: (payload: { currentLang: string }) => void
   @Action('SET_MAX_RECONNECT_TIMES') private actionMaxReconnectTimes!: (payload: { maxReconnectTimes: number }) => void
+  @Action('TOGGLE_AUTO_SCROLL') private actionAutoScroll!: (payload: { autoScroll: boolean }) => void
   @Action('TOGGLE_MULTI_TOPICS') private actionToggleMultiTopics!: (payload: { multiTopics: boolean }) => void
   @Getter('currentTheme') private getterTheme!: 'light' | 'dark' | 'night'
   @Getter('currentLang') private getterLang!: Language
   @Getter('maxReconnectTimes') private getterMaxReconnectTimes!: number
+  @Getter('autoScroll') private autoScroll!: boolean
   @Getter('multiTopics') private multiTopics!: boolean
 
   private currentTheme: 'light' | 'dark' | 'night' = 'light'
@@ -132,6 +161,10 @@ export default class Settings extends Vue {
     }
   }
 
+  private handleAutoScrollSwitchChange(value: boolean) {
+    this.actionAutoScroll({ autoScroll: value })
+  }
+
   private handleMultiTopicsSwitchChange(value: boolean) {
     this.actionToggleMultiTopics({ multiTopics: value })
   }