From b852bb5b473520018b23d79100c025d3c8160f13 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Wed, 2 Aug 2023 19:40:57 +0800
Subject: [PATCH] refactor: format all vue file

---
 frontend/src/components/common/IconButton.vue |  8 +++----
 .../src/components/common/RedisTypeTag.vue    |  2 +-
 .../src/components/content/ContentLogPane.vue | 19 ++++++++--------
 .../src/components/content/ContentPane.vue    |  4 ++--
 .../content_value/ContentServerStatus.vue     | 22 +++++++++----------
 .../content_value/ContentToolbar.vue          |  8 +++----
 .../content_value/ContentValueString.vue      |  2 +-
 .../content_value/ContentValueZSet.vue        |  2 +-
 .../components/dialogs/ConnectionDialog.vue   |  6 ++---
 .../components/dialogs/DeleteKeyDialog.vue    |  6 ++---
 .../components/dialogs/KeyFilterDialog.vue    |  2 +-
 .../src/components/dialogs/NewKeyDialog.vue   |  2 +-
 .../components/dialogs/PreferencesDialog.vue  | 12 +++++-----
 frontend/src/components/icons/AddLink.vue     |  6 ++---
 frontend/src/components/icons/Clear.vue       | 16 +++++++-------
 frontend/src/components/icons/Close.vue       |  6 ++---
 frontend/src/components/icons/Config.vue      |  4 ++--
 frontend/src/components/icons/Filter.vue      |  2 +-
 frontend/src/components/icons/Help.vue        |  8 +++----
 .../src/components/icons/ToggleServer.vue     |  2 +-
 .../src/components/sidebar/BrowserPane.vue    |  8 +++----
 .../src/components/sidebar/BrowserTree.vue    | 12 +++++-----
 .../src/components/sidebar/ConnectionPane.vue |  2 +-
 .../src/components/sidebar/ConnectionTree.vue | 16 +++++++-------
 frontend/src/components/sidebar/NavMenu.vue   |  6 ++---
 25 files changed, 92 insertions(+), 91 deletions(-)

diff --git a/frontend/src/components/common/IconButton.vue b/frontend/src/components/common/IconButton.vue
index afc45fb..5867125 100644
--- a/frontend/src/components/common/IconButton.vue
+++ b/frontend/src/components/common/IconButton.vue
@@ -32,16 +32,16 @@ const hasTooltip = computed(() => {
 <template>
     <n-tooltip v-if="hasTooltip">
         <template #trigger>
-            <n-button :text="!border" :disabled="disabled" @click.prevent="emit('click')">
-                <n-icon :size="props.size" :color="props.color">
+            <n-button :disabled="disabled" :text="!border" @click.prevent="emit('click')">
+                <n-icon :color="props.color" :size="props.size">
                     <component :is="props.icon" :stroke-width="props.strokeWidth" />
                 </n-icon>
             </n-button>
         </template>
         {{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
     </n-tooltip>
-    <n-button v-else :text="!border" :disabled="disabled" @click.prevent="emit('click')">
-        <n-icon :size="props.size" :color="props.color">
+    <n-button v-else :disabled="disabled" :text="!border" @click.prevent="emit('click')">
+        <n-icon :color="props.color" :size="props.size">
             <component :is="props.icon" :stroke-width="props.strokeWidth" />
         </n-icon>
     </n-button>
diff --git a/frontend/src/components/common/RedisTypeTag.vue b/frontend/src/components/common/RedisTypeTag.vue
index 037362f..6a6077d 100644
--- a/frontend/src/components/common/RedisTypeTag.vue
+++ b/frontend/src/components/common/RedisTypeTag.vue
@@ -26,9 +26,9 @@ const backgroundColor = computed(() => {
 <template>
     <n-tag
         :bordered="props.bordered"
+        :class="[props.size === 'small' ? 'redis-type-tag-small' : 'redis-type-tag']"
         :color="{ color: backgroundColor, borderColor: fontColor, textColor: fontColor }"
         :size="props.size"
-        :class="[props.size === 'small' ? 'redis-type-tag-small' : 'redis-type-tag']"
         strong
     >
         {{ props.type }}
diff --git a/frontend/src/components/content/ContentLogPane.vue b/frontend/src/components/content/ContentLogPane.vue
index b9f7a63..1cb55b2 100644
--- a/frontend/src/components/content/ContentLogPane.vue
+++ b/frontend/src/components/content/ContentLogPane.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, nextTick, onActivated, reactive, ref } from 'vue'
+import { computed, nextTick, reactive, ref } from 'vue'
 import IconButton from '@/components/common/IconButton.vue'
 import Refresh from '@/components/icons/Refresh.vue'
 import useConnectionStore from 'stores/connections.js'
@@ -42,8 +42,9 @@ const loadHistory = () => {
             tableRef.value?.scrollTo({ top: 999999 })
         })
 }
-onActivated(() => {
-    nextTick().then(loadHistory)
+
+defineExpose({
+    refresh: () => nextTick().then(loadHistory),
 })
 </script>
 
@@ -53,17 +54,17 @@ onActivated(() => {
         class="content-container flex-box-v"
         content-style="display: flex;flex-direction: column; overflow: hidden;"
     >
-        <n-form inline :disabled="data.loading" class="flex-item">
+        <n-form :disabled="data.loading" class="flex-item" inline>
             <n-form-item :label="$t('filter_server')">
                 <n-select
-                    style="min-width: 100px"
                     v-model:value="data.server"
-                    :options="filterServerOption"
                     :consistent-menu-width="false"
+                    :options="filterServerOption"
+                    style="min-width: 100px"
                 />
             </n-form-item>
             <n-form-item :label="$t('filter_keyword')">
-                <n-input v-model:value="data.keyword" placeholder="" clearable />
+                <n-input v-model:value="data.keyword" clearable placeholder="" />
             </n-form-item>
             <n-form-item>
                 <icon-button :icon="Refresh" border t-tooltip="refresh" @click="loadHistory" />
@@ -72,7 +73,6 @@ onActivated(() => {
         <div class="fill-height flex-box-h" style="user-select: text">
             <n-data-table
                 ref="tableRef"
-                class="flex-item-expand"
                 :columns="[
                     {
                         title: $t('exec_time'),
@@ -125,13 +125,14 @@ onActivated(() => {
                     },
                 ]"
                 :data="data.history"
+                class="flex-item-expand"
                 flex-height
             />
         </div>
     </n-card>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 @import '@/styles/content';
 
 .content-container {
diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index 92161cc..a315552 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@@ -157,9 +157,9 @@ const onCloseTab = (tabIndex) => {
             <!-- select nothing or select server node, display server status -->
             <content-server-status
                 v-model:auto-refresh="autoRefresh"
-                :server="serverName"
                 :info="serverInfo"
                 :loading="loadingServerInfo"
+                :server="serverName"
                 @refresh="refreshInfo(true)"
             />
         </div>
@@ -171,8 +171,8 @@ const onCloseTab = (tabIndex) => {
             </n-empty>
         </div>
         <component
-            v-else
             :is="valueComponents[tabContent.type]"
+            v-else
             :db="tabContent.db"
             :key-path="tabContent.keyPath"
             :name="tabContent.name"
diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index 76ba201..daa9e77 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -80,36 +80,36 @@ const infoFilter = ref('')
         <n-space vertical>
             <n-card>
                 <template #header>
-                    <n-space align="center" :wrap-item="false" inline size="small">
+                    <n-space :wrap-item="false" align="center" inline size="small">
                         {{ props.server }}
                         <n-tooltip v-if="redisVersion">
                             Redis Version
                             <template #trigger>
-                                <n-tag type="primary" size="small">v{{ redisVersion }}</n-tag>
+                                <n-tag size="small" type="primary">v{{ redisVersion }}</n-tag>
                             </template>
                         </n-tooltip>
                         <n-tooltip v-if="redisMode">
                             Mode
                             <template #trigger>
-                                <n-tag type="primary" size="small">{{ redisMode }}</n-tag>
+                                <n-tag size="small" type="primary">{{ redisMode }}</n-tag>
                             </template>
                         </n-tooltip>
                         <n-tooltip v-if="redisMode">
                             Role
                             <template #trigger>
-                                <n-tag type="primary" size="small">{{ role }}</n-tag>
+                                <n-tag size="small" type="primary">{{ role }}</n-tag>
                             </template>
                         </n-tooltip>
                     </n-space>
                 </template>
                 <template #header-extra>
-                    <n-space inline align="center">
+                    <n-space align="center" inline>
                         {{ $t('auto_refresh') }}
                         <n-switch :value="props.autoRefresh" @update:value="(v) => emit('update:autoRefresh', v)" />
                         <n-tooltip>
                             {{ $t('refresh') }}
                             <template #trigger>
-                                <n-button tertiary circle size="small" @click="emit('refresh')">
+                                <n-button circle size="small" tertiary @click="emit('refresh')">
                                     <template #icon>
                                         <n-icon :component="Refresh" />
                                     </template>
@@ -119,7 +119,7 @@ const infoFilter = ref('')
                     </n-space>
                 </template>
                 <n-spin :show="props.loading">
-                    <n-grid x-gap="5" style="min-width: 500px">
+                    <n-grid style="min-width: 500px" x-gap="5">
                         <n-gi :span="6">
                             <n-statistic :label="$t('uptime')" :value="uptime[0]">
                                 <template #suffix> {{ $t(uptime[1]) }}</template>
@@ -149,15 +149,15 @@ const infoFilter = ref('')
             </n-card>
             <n-card :title="$t('all_info')">
                 <template #header-extra>
-                    <n-input v-model:value="infoFilter" placeholder="" clearable>
+                    <n-input v-model:value="infoFilter" clearable placeholder="">
                         <template #prefix>
                             <icon-button :icon="Filter" size="18" />
                         </template>
                     </n-input>
                 </template>
                 <n-spin :show="props.loading">
-                    <n-tabs type="line" placement="left" default-value="CPU">
-                        <n-tab-pane v-for="(v, k) in props.info" :key="k" :name="k" :disabled="isEmpty(v)">
+                    <n-tabs default-value="CPU" placement="left" type="line">
+                        <n-tab-pane v-for="(v, k) in props.info" :key="k" :disabled="isEmpty(v)" :name="k">
                             <n-data-table
                                 :columns="[
                                     {
@@ -183,4 +183,4 @@ const infoFilter = ref('')
     </n-scrollbar>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/frontend/src/components/content_value/ContentToolbar.vue b/frontend/src/components/content_value/ContentToolbar.vue
index 3a58f6e..6127431 100644
--- a/frontend/src/components/content_value/ContentToolbar.vue
+++ b/frontend/src/components/content_value/ContentToolbar.vue
@@ -70,10 +70,10 @@ const onDeleteKey = () => {
             <redis-type-tag :type="props.keyType" size="large" />
             <n-input v-model:value="props.keyPath">
                 <template #suffix>
-                    <icon-button :icon="Refresh" t-tooltip="reload" size="18" @click="onReloadKey" />
+                    <icon-button :icon="Refresh" size="18" t-tooltip="reload" @click="onReloadKey" />
                 </template>
             </n-input>
-            <icon-button :icon="Copy" t-tooltip="copy_key" size="18" border @click="onCopyKey" />
+            <icon-button :icon="Copy" border size="18" t-tooltip="copy_key" @click="onCopyKey" />
         </n-input-group>
         <n-button-group>
             <n-tooltip>
@@ -91,10 +91,10 @@ const onDeleteKey = () => {
                 TTL
             </n-tooltip>
             <icon-button
-                border
                 :icon="Edit"
-                t-tooltip="rename_key"
+                border
                 size="18"
+                t-tooltip="rename_key"
                 @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)"
             />
             <!--            <n-button @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)">-->
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 7fcfbc0..bccc4e5 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -204,7 +204,7 @@ const onSaveValue = async () => {
         </div>
         <div class="value-wrapper flex-item-expand flex-box-v">
             <n-scrollbar v-if="!inEdit" class="flex-item-expand">
-                <n-code :code="viewValue" :language="viewLanguage" show-line-numbers word-wrap style="cursor: text" />
+                <n-code :code="viewValue" :language="viewLanguage" show-line-numbers style="cursor: text" word-wrap />
             </n-scrollbar>
             <n-input
                 v-else
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index 4da189e..02e25fe 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -277,7 +277,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
                         style="width: 120px"
                         @update:value="onChangeFilterType"
                     />
-                    <n-tooltip :disabled="filterType !== 2" :delay="500">
+                    <n-tooltip :delay="500" :disabled="filterType !== 2">
                         <template #trigger>
                             <n-input
                                 v-model:value="filterValue"
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index 2c68214..5add45e 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -159,7 +159,7 @@ const onClose = () => {
         transform-origin="center"
     >
         <n-spin :show="closingConnection">
-            <n-tabs v-model:value="tab" type="line" animated>
+            <n-tabs v-model:value="tab" animated type="line">
                 <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
                     <n-form
                         ref="generalFormRef"
@@ -265,13 +265,13 @@ const onClose = () => {
 
         <template #action>
             <div class="flex-item-expand">
-                <n-button :loading="testing" :disabled="closingConnection" @click="onTestConnection">
+                <n-button :disabled="closingConnection" :loading="testing" @click="onTestConnection">
                     {{ $t('conn_test') }}
                 </n-button>
             </div>
             <div class="flex-item n-dialog__action">
                 <n-button :disabled="closingConnection" @click="onClose">{{ $t('cancel') }}</n-button>
-                <n-button type="primary" :disabled="closingConnection" @click="onSaveConnection">
+                <n-button :disabled="closingConnection" type="primary" @click="onSaveConnection">
                     {{ isEditMode ? $t('update') : $t('confirm') }}
                 </n-button>
             </div>
diff --git a/frontend/src/components/dialogs/DeleteKeyDialog.vue b/frontend/src/components/dialogs/DeleteKeyDialog.vue
index fab4094..26fa8f4 100644
--- a/frontend/src/components/dialogs/DeleteKeyDialog.vue
+++ b/frontend/src/components/dialogs/DeleteKeyDialog.vue
@@ -96,12 +96,12 @@ const onClose = () => {
                 <n-input v-model:value="deleteForm.key" placeholder="" @input="resetAffected" />
             </n-form-item>
             <n-card v-if="deleteForm.showAffected" :title="$t('affected_key')" size="small">
-                <n-skeleton v-if="deleteForm.loadingAffected" text :repeat="10" />
+                <n-skeleton v-if="deleteForm.loadingAffected" :repeat="10" text />
                 <n-log
                     v-else
-                    :rows="10"
                     :line-height="1.5"
                     :lines="deleteForm.affectedKeys"
+                    :rows="10"
                     style="user-select: text; cursor: text"
                 />
             </n-card>
@@ -113,7 +113,7 @@ const onClose = () => {
                 <n-button v-if="!deleteForm.showAffected" type="primary" @click="scanAffectedKey">
                     {{ $t('show_affected_key') }}
                 </n-button>
-                <n-button v-else type="error" :disabled="isEmpty(deleteForm.affectedKeys)" @click="onConfirmDelete">
+                <n-button v-else :disabled="isEmpty(deleteForm.affectedKeys)" type="error" @click="onConfirmDelete">
                     {{ $t('confirm_delete_key', { num: size(deleteForm.affectedKeys) }) }}
                 </n-button>
             </div>
diff --git a/frontend/src/components/dialogs/KeyFilterDialog.vue b/frontend/src/components/dialogs/KeyFilterDialog.vue
index 3e787e6..cc0eab4 100644
--- a/frontend/src/components/dialogs/KeyFilterDialog.vue
+++ b/frontend/src/components/dialogs/KeyFilterDialog.vue
@@ -92,7 +92,7 @@ const onClose = () => {
                 <n-input-group>
                     <n-tooltip trigger="focus">
                         <template #trigger>
-                            <n-input v-model:value="filterForm.pattern" placeholder="Filter Pattern" clearable />
+                            <n-input v-model:value="filterForm.pattern" clearable placeholder="Filter Pattern" />
                         </template>
                         <div class="text-block">{{ $t('filter_pattern_tip') }}</div>
                     </n-tooltip>
diff --git a/frontend/src/components/dialogs/NewKeyDialog.vue b/frontend/src/components/dialogs/NewKeyDialog.vue
index 47c39d5..f13cf85 100644
--- a/frontend/src/components/dialogs/NewKeyDialog.vue
+++ b/frontend/src/components/dialogs/NewKeyDialog.vue
@@ -188,7 +188,7 @@ const onClose = () => {
                         <n-button secondary type="primary" @click="newForm.ttl = -1">{{ $t('persist_key') }}</n-button>
                     </n-input-group>
                 </n-form-item>
-                <component ref="subFormRef" :is="addValueComponent[newForm.type]" v-model:value="newForm.value" />
+                <component :is="addValueComponent[newForm.type]" ref="subFormRef" v-model:value="newForm.value" />
                 <!--  TODO: Add import from txt file option -->
             </n-form>
         </n-scrollbar>
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index d8699d4..7cd7901 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -59,17 +59,17 @@ const onClose = () => {
 <template>
     <n-modal
         v-model:show="dialogStore.preferencesDialogVisible"
+        :auto-focus="false"
         :closable="false"
         :close-on-esc="false"
         :mask-closable="false"
         :show-icon="false"
-        :auto-focus="false"
         :title="$t('preferences')"
         preset="dialog"
         transform-origin="center"
     >
         <n-spin :show="loading">
-            <n-tabs v-model:value="tab" type="line" animated>
+            <n-tabs v-model:value="tab" animated type="line">
                 <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
                     <n-form
                         :label-width="formLabelWidth"
@@ -149,13 +149,13 @@ const onClose = () => {
 
         <template #action>
             <div class="flex-item-expand">
-                <n-button :disabled="loading" @click="prefStore.restorePreferences">{{
-                    $t('restore_defaults')
-                }}</n-button>
+                <n-button :disabled="loading" @click="prefStore.restorePreferences"
+                    >{{ $t('restore_defaults') }}
+                </n-button>
             </div>
             <div class="flex-item n-dialog__action">
                 <n-button :disabled="loading" @click="onClose">{{ $t('cancel') }}</n-button>
-                <n-button type="primary" :disabled="loading" @click="onSavePreferences">{{ $t('save') }}</n-button>
+                <n-button :disabled="loading" type="primary" @click="onSavePreferences">{{ $t('save') }}</n-button>
             </div>
         </template>
     </n-modal>
diff --git a/frontend/src/components/icons/AddLink.vue b/frontend/src/components/icons/AddLink.vue
index 97ae8ec..069abfb 100644
--- a/frontend/src/components/icons/AddLink.vue
+++ b/frontend/src/components/icons/AddLink.vue
@@ -8,18 +8,18 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :stroke-width="strokeWidth"
             d="M24.0605 10L24.0239 38"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
         <path
+            :stroke-width="strokeWidth"
             d="M10 24L38 24"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
diff --git a/frontend/src/components/icons/Clear.vue b/frontend/src/components/icons/Clear.vue
index cdf4c4f..83c5738 100644
--- a/frontend/src/components/icons/Clear.vue
+++ b/frontend/src/components/icons/Clear.vue
@@ -8,48 +8,48 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
-            fill-rule="evenodd"
+            :stroke-width="props.strokeWidth"
             clip-rule="evenodd"
             d="M20 5.91406H28V13.9141H43V21.9141H5V13.9141H20V5.91406Z"
+            fill-rule="evenodd"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
         <path
+            :stroke-width="props.strokeWidth"
             d="M8 40H40V22H8V40Z"
             fill="none"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linejoin="round"
         />
         <path
+            :stroke-width="props.strokeWidth"
             d="M16 39.8976V33.9141"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
         <path
+            :stroke-width="props.strokeWidth"
             d="M24 39.8977V33.8977"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
         <path
+            :stroke-width="props.strokeWidth"
             d="M32 39.8976V33.9141"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
         <path
+            :stroke-width="props.strokeWidth"
             d="M12 40H36"
             stroke="currentColor"
-            :stroke-width="props.strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
diff --git a/frontend/src/components/icons/Close.vue b/frontend/src/components/icons/Close.vue
index 35c03a8..8c65664 100644
--- a/frontend/src/components/icons/Close.vue
+++ b/frontend/src/components/icons/Close.vue
@@ -35,18 +35,18 @@ const props = defineProps({
             stroke-linejoin="round"
         />
     </svg>
-    <svg v-else width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg v-else fill="none" height="24" viewBox="0 0 48 48" width="24" xmlns="http://www.w3.org/2000/svg">
         <path
+            :stroke-width="strokeWidth"
             d="M8 8L40 40"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
         <path
+            :stroke-width="strokeWidth"
             d="M8 40L40 8"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
diff --git a/frontend/src/components/icons/Config.vue b/frontend/src/components/icons/Config.vue
index 654ede9..1212b66 100644
--- a/frontend/src/components/icons/Config.vue
+++ b/frontend/src/components/icons/Config.vue
@@ -11,16 +11,16 @@ const props = defineProps({
     <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
             :stroke-width="strokeWidth"
+            d="M18.2838 43.1713C14.9327 42.1736 11.9498 40.3213 9.58787 37.867C10.469 36.8227 11 35.4734 11 34.0001C11 30.6864 8.31371 28.0001 5 28.0001C4.79955 28.0001 4.60139 28.01 4.40599 28.0292C4.13979 26.7277 4 25.3803 4 24.0001C4 21.9095 4.32077 19.8938 4.91579 17.9995C4.94381 17.9999 4.97188 18.0001 5 18.0001C8.31371 18.0001 11 15.3138 11 12.0001C11 11.0488 10.7786 10.1493 10.3846 9.35011C12.6975 7.1995 15.5205 5.59002 18.6521 4.72314C19.6444 6.66819 21.6667 8.00013 24 8.00013C26.3333 8.00013 28.3556 6.66819 29.3479 4.72314C32.4795 5.59002 35.3025 7.1995 37.6154 9.35011C37.2214 10.1493 37 11.0488 37 12.0001C37 15.3138 39.6863 18.0001 43 18.0001C43.0281 18.0001 43.0562 17.9999 43.0842 17.9995C43.6792 19.8938 44 21.9095 44 24.0001C44 25.3803 43.8602 26.7277 43.594 28.0292C43.3986 28.01 43.2005 28.0001 43 28.0001C39.6863 28.0001 37 30.6864 37 34.0001C37 35.4734 37.531 36.8227 38.4121 37.867C36.0502 40.3213 33.0673 42.1736 29.7162 43.1713C28.9428 40.752 26.676 39.0001 24 39.0001C21.324 39.0001 19.0572 40.752 18.2838 43.1713Z"
             fill="none"
             stroke="currentColor"
-            d="M18.2838 43.1713C14.9327 42.1736 11.9498 40.3213 9.58787 37.867C10.469 36.8227 11 35.4734 11 34.0001C11 30.6864 8.31371 28.0001 5 28.0001C4.79955 28.0001 4.60139 28.01 4.40599 28.0292C4.13979 26.7277 4 25.3803 4 24.0001C4 21.9095 4.32077 19.8938 4.91579 17.9995C4.94381 17.9999 4.97188 18.0001 5 18.0001C8.31371 18.0001 11 15.3138 11 12.0001C11 11.0488 10.7786 10.1493 10.3846 9.35011C12.6975 7.1995 15.5205 5.59002 18.6521 4.72314C19.6444 6.66819 21.6667 8.00013 24 8.00013C26.3333 8.00013 28.3556 6.66819 29.3479 4.72314C32.4795 5.59002 35.3025 7.1995 37.6154 9.35011C37.2214 10.1493 37 11.0488 37 12.0001C37 15.3138 39.6863 18.0001 43 18.0001C43.0281 18.0001 43.0562 17.9999 43.0842 17.9995C43.6792 19.8938 44 21.9095 44 24.0001C44 25.3803 43.8602 26.7277 43.594 28.0292C43.3986 28.01 43.2005 28.0001 43 28.0001C39.6863 28.0001 37 30.6864 37 34.0001C37 35.4734 37.531 36.8227 38.4121 37.867C36.0502 40.3213 33.0673 42.1736 29.7162 43.1713C28.9428 40.752 26.676 39.0001 24 39.0001C21.324 39.0001 19.0572 40.752 18.2838 43.1713Z"
             stroke-linejoin="round"
         />
         <path
             :stroke-width="strokeWidth"
+            d="M24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z"
             fill="none"
             stroke="currentColor"
-            d="M24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z"
             stroke-linejoin="round"
         />
     </svg>
diff --git a/frontend/src/components/icons/Filter.vue b/frontend/src/components/icons/Filter.vue
index 5e786e8..93a7882 100644
--- a/frontend/src/components/icons/Filter.vue
+++ b/frontend/src/components/icons/Filter.vue
@@ -10,11 +10,11 @@ const props = defineProps({
 <template>
     <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :stroke-width="props.strokeWidth"
             d="M6 9L20.4 25.8178V38.4444L27.6 42V25.8178L42 9H6Z"
             fill="none"
             stroke="currentColor"
             stroke-linejoin="round"
-            :stroke-width="props.strokeWidth"
         />
     </svg>
 </template>
diff --git a/frontend/src/components/icons/Help.vue b/frontend/src/components/icons/Help.vue
index c43c4db..a33ee13 100644
--- a/frontend/src/components/icons/Help.vue
+++ b/frontend/src/components/icons/Help.vue
@@ -8,26 +8,26 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :stroke-width="strokeWidth"
             d="M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z"
             fill="none"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linejoin="round"
         />
         <path
+            :stroke-width="strokeWidth"
             d="M24 28.6248V24.6248C27.3137 24.6248 30 21.9385 30 18.6248C30 15.3111 27.3137 12.6248 24 12.6248C20.6863 12.6248 18 15.3111 18 18.6248"
             stroke="currentColor"
-            :stroke-width="strokeWidth"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
         <path
-            fill-rule="evenodd"
             clip-rule="evenodd"
             d="M24 37.6248C25.3807 37.6248 26.5 36.5055 26.5 35.1248C26.5 33.7441 25.3807 32.6248 24 32.6248C22.6193 32.6248 21.5 33.7441 21.5 35.1248C21.5 36.5055 22.6193 37.6248 24 37.6248Z"
             fill="currentColor"
+            fill-rule="evenodd"
         />
     </svg>
 </template>
diff --git a/frontend/src/components/icons/ToggleServer.vue b/frontend/src/components/icons/ToggleServer.vue
index 35e8d66..73ad00b 100644
--- a/frontend/src/components/icons/ToggleServer.vue
+++ b/frontend/src/components/icons/ToggleServer.vue
@@ -20,10 +20,10 @@ const props = defineProps({
 <template>
     <svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :fill="props.fillColor"
             :stroke="props.fillColor"
             :stroke-width="props.strokeWidth"
             d="M41 4H7C5.34315 4 4 5.34315 4 7V41C4 42.6569 5.34315 44 7 44H41C42.6569 44 44 42.6569 44 41V7C44 5.34315 42.6569 4 41 4Z"
-            :fill="props.fillColor"
             stroke-linecap="round"
             stroke-linejoin="round"
         />
diff --git a/frontend/src/components/sidebar/BrowserPane.vue b/frontend/src/components/sidebar/BrowserPane.vue
index 00675c7..872e3e1 100644
--- a/frontend/src/components/sidebar/BrowserPane.vue
+++ b/frontend/src/components/sidebar/BrowserPane.vue
@@ -77,15 +77,15 @@ const filterTypeOptions = computed(() => {
     <div class="nav-pane-container flex-box-v">
         <browser-tree :server="currentName" />
 
-        <div class="nav-pane-bottom flex-box-h" v-if="filterForm.showFilter">
+        <div v-if="filterForm.showFilter" class="nav-pane-bottom flex-box-h">
             <n-input-group>
                 <n-select
                     v-model:value="filterForm.type"
+                    :consistent-menu-width="false"
                     :options="filterTypeOptions"
                     style="width: 120px"
-                    :consistent-menu-width="false"
                 />
-                <n-input placeholder="" clearable />
+                <n-input clearable placeholder="" />
                 <n-button ghost>
                     <template #icon>
                         <n-icon :component="Search" />
@@ -117,7 +117,7 @@ const filterTypeOptions = computed(() => {
     </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .nav-pane-bottom {
     color: v-bind('themeVars.iconColor');
     border-top: v-bind('themeVars.borderColor') 1px solid;
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 2186b84..ad75d41 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -582,25 +582,25 @@ const handleOutsideContextMenu = () => {
 </script>
 
 <template>
-    <div class="browser-tree-wrapper" :style="{ backgroundColor }">
+    <div :style="{ backgroundColor }" class="browser-tree-wrapper">
         <n-tree
+            :animated="false"
             :block-line="true"
             :block-node="true"
-            :animated="false"
             :cancelable="false"
             :data="data"
             :expand-on-click="false"
             :expanded-keys="expandedKeys"
-            :selected-keys="selectedKeys"
-            @update:selected-keys="onUpdateSelectedKeys"
             :node-props="nodeProps"
-            @load="onLoadTree"
-            @update:expanded-keys="onUpdateExpanded"
             :render-label="renderLabel"
             :render-prefix="renderPrefix"
             :render-suffix="renderSuffix"
+            :selected-keys="selectedKeys"
             class="fill-height"
             virtual-scroll
+            @load="onLoadTree"
+            @update:selected-keys="onUpdateSelectedKeys"
+            @update:expanded-keys="onUpdateExpanded"
         />
         <n-dropdown
             :animated="false"
diff --git a/frontend/src/components/sidebar/ConnectionPane.vue b/frontend/src/components/sidebar/ConnectionPane.vue
index ee1c505..cca8bb7 100644
--- a/frontend/src/components/sidebar/ConnectionPane.vue
+++ b/frontend/src/components/sidebar/ConnectionPane.vue
@@ -57,7 +57,7 @@ const onDisconnectAll = () => {
     </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .nav-pane-bottom {
     color: v-bind('themeVars.iconColor');
     border-top: v-bind('themeVars.borderColor') 1px solid;
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index 3546809..5f9c274 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -330,27 +330,27 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
 </script>
 
 <template>
-    <n-empty v-if="isEmpty(connectionStore.connections)" class="empty-content" :description="$t('empty_server_list')" />
+    <n-empty v-if="isEmpty(connectionStore.connections)" :description="$t('empty_server_list')" class="empty-content" />
     <n-tree
         v-else
-        class="fill-height"
         :animated="false"
         :block-line="true"
         :block-node="true"
         :cancelable="false"
-        :draggable="true"
         :data="connectionStore.connections"
+        :draggable="true"
         :expanded-keys="expandedKeys"
-        @update:selected-keys="onUpdateSelectedKeys"
         :node-props="nodeProps"
-        @update:expanded-keys="onUpdateExpandedKeys"
-        :selected-keys="selectedKeys"
+        :pattern="props.filterPattern"
         :render-label="renderLabel"
         :render-prefix="renderPrefix"
         :render-suffix="renderSuffix"
-        @drop="handleDrop"
-        :pattern="props.filterPattern"
+        :selected-keys="selectedKeys"
+        class="fill-height"
         virtual-scroll
+        @drop="handleDrop"
+        @update:selected-keys="onUpdateSelectedKeys"
+        @update:expanded-keys="onUpdateExpandedKeys"
     />
 
     <!-- status display modal -->
diff --git a/frontend/src/components/sidebar/NavMenu.vue b/frontend/src/components/sidebar/NavMenu.vue
index d5dcfbe..8ec6ab8 100644
--- a/frontend/src/components/sidebar/NavMenu.vue
+++ b/frontend/src/components/sidebar/NavMenu.vue
@@ -104,12 +104,12 @@ const openGithub = () => {
         class="flex-box-v"
     >
         <n-menu
-            :collapsed-width="props.width"
-            :value="props.value"
             :collapsed="true"
             :collapsed-icon-size="iconSize"
-            @update:value="(val) => emit('update:value', val)"
+            :collapsed-width="props.width"
             :options="menuOptions"
+            :value="props.value"
+            @update:value="(val) => emit('update:value', val)"
         />
         <div class="flex-item-expand"></div>
         <div class="nav-menu-item flex-box-v">