feat: add connection timeout setting

backend/services/connection_service.go

@@ -253,10 +253,12 @@ func (c *connectionService) getRedisClient(connName string, db int) (*redis.Clie
 		}
 
 		rdb = redis.NewClient(&redis.Options{
-			Addr:        fmt.Sprintf("%s:%d", selConn.Addr, selConn.Port),
+			Addr:         fmt.Sprintf("%s:%d", selConn.Addr, selConn.Port),
-			Username:    selConn.Username,
+			Username:     selConn.Username,
-			Password:    selConn.Password,
+			Password:     selConn.Password,
-			ReadTimeout: -1,
+			DialTimeout:  time.Duration(selConn.ConnTimeout) * time.Second,
+			ReadTimeout:  time.Duration(selConn.ExecTimeout) * time.Second,
+			WriteTimeout: time.Duration(selConn.ExecTimeout) * time.Second,
 		})
 		rdb.AddHook(redis2.NewHook(connName, func(cmd string) {
 			now := time.Now()

frontend/src/components/dialogs/ConnectionDialog.vue

@@ -65,7 +65,7 @@ const formLabelWidth = computed(() => {
     }
     return '80px'
 })
-const predefineColors = ref(['', '#FE5959', '#FEC230', '#FEF27F', '#6CEFAF', '#46C3FC', '#B388FC', '#B0BEC5'])
+const predefineColors = ref(['', '#F75B52', '#F7A234', '#F7CE33', '#4ECF60', '#348CF7', '#B270D3'])
 const generalFormRef = ref(null)
 const advanceFormRef = ref(null)
 
@@ -247,7 +247,7 @@ const onClose = () => {
                                 class="color-preset-item"
                                 @click="generalForm.markColor = color"
                             >
-                                <n-icon v-if="color === ''" :component="Close" size="24" />
+                                <n-icon v-if="isEmpty(color)" :component="Close" size="24" />
                             </div>
                         </n-form-item>
                     </n-form>
@@ -286,6 +286,7 @@ const onClose = () => {
     margin-right: 2px;
     border: white 3px solid;
     cursor: pointer;
+    border-radius: 50%;
 
     &_selected,
     &:hover {

frontend/src/components/sidebar/ConnectionTree.vue

@@ -1,12 +1,12 @@
 <script setup>
 import useDialogStore from '../../stores/dialog.js'
-import { h, nextTick, reactive, ref, watch } from 'vue'
+import { h, nextTick, reactive, ref } from 'vue'
 import useConnectionStore from '../../stores/connections.js'
 import { NIcon, useDialog, useMessage, useThemeVars } from 'naive-ui'
 import { ConnectionType } from '../../consts/connection_type.js'
 import ToggleFolder from '../icons/ToggleFolder.vue'
 import ToggleServer from '../icons/ToggleServer.vue'
-import { debounce, indexOf, size, split } from 'lodash'
+import { debounce, indexOf, isEmpty } from 'lodash'
 import Config from '../icons/Config.vue'
 import Delete from '../icons/Delete.vue'
 import Unlink from '../icons/Unlink.vue'
@@ -118,20 +118,6 @@ const menuOptions = {
 }
 
 const renderLabel = ({ option }) => {
-    if (option.type === ConnectionType.Server) {
-        const { markColor = '' } = connectionStore.serverProfile[option.name] || {}
-        return h(
-            'div',
-            {
-                style: {
-                    // color: markColor,
-                    borderRadius: '3px',
-                    backgroundColor: markColor,
-                },
-            },
-            { default: () => option.label }
-        )
-    }
     return option.label
 }
 
@@ -158,6 +144,25 @@ const renderPrefix = ({ option }) => {
     }
 }
 
+const renderSuffix = ({ option }) => {
+    if (option.type === ConnectionType.Server) {
+        const { markColor = '' } = connectionStore.serverProfile[option.name] || {}
+        if (isEmpty(markColor)) {
+            return ''
+        }
+        return h('div', {
+            style: {
+                borderRadius: '50%',
+                backgroundColor: markColor,
+                width: '13px',
+                height: '13px',
+                border: '2px solid white',
+            },
+        })
+    }
+    return null
+}
+
 const onUpdateExpandedKeys = (keys, option) => {
     expandedKeys.value = keys
 }
@@ -339,6 +344,7 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
         :selected-keys="selectedKeys"
         :render-label="renderLabel"
         :render-prefix="renderPrefix"
+        :render-suffix="renderSuffix"
         @drop="handleDrop"
         :pattern="props.filterPattern"
         class="fill-height"