refactor: rename DatabasePane and DatabaseTree to BrowserPane and BrowserTree

refactor: tidy Components folder

frontend/src/AppContent.vue

@@ -1,12 +1,12 @@
 <script setup>
 import ContentPane from './components/content/ContentPane.vue'
-import DatabasePane from './components/sidebar/DatabasePane.vue'
+import BrowserPane from './components/sidebar/BrowserPane.vue'
 import { computed, nextTick, onMounted, provide, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { GetPreferences } from '../wailsjs/go/storage/PreferencesStorage.js'
 import { get } from 'lodash'
 import { useThemeVars } from 'naive-ui'
-import NavMenu from './components/NavMenu.vue'
+import NavMenu from './components/sidebar/NavMenu.vue'
 import ConnectionPane from './components/sidebar/ConnectionPane.vue'
 import ContentServerPane from './components/content/ContentServerPane.vue'
 import useTabStore from './stores/tab.js'
@@ -71,7 +71,7 @@ const dragging = computed(() => {
         <!-- structure page-->
         <div v-show="tabStore.nav === 'structure'" class="flex-box-h flex-item-expand">
             <div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
-                <database-pane
+                <browser-pane
                     v-for="t in tabStore.tabs"
                     v-show="get(tabStore.currentTab, 'name') === t.name"
                     :key="t.name"

frontend/src/components/content_value/ContentToolbar.vue

@@ -1,15 +1,15 @@
 <script setup>
-import { validType } from '../consts/support_redis_type'
+import { validType } from '../../consts/support_redis_type.js'
-import useDialog from '../stores/dialog'
+import useDialog from '../../stores/dialog.js'
-import Delete from './icons/Delete.vue'
+import Delete from '../icons/Delete.vue'
-import Edit from './icons/Edit.vue'
+import Edit from '../icons/Edit.vue'
-import Refresh from './icons/Refresh.vue'
+import Refresh from '../icons/Refresh.vue'
-import Timer from './icons/Timer.vue'
+import Timer from '../icons/Timer.vue'
-import RedisTypeTag from './common/RedisTypeTag.vue'
+import RedisTypeTag from '../common/RedisTypeTag.vue'
 import { useI18n } from 'vue-i18n'
 import { useMessage } from 'naive-ui'
-import IconButton from './common/IconButton.vue'
+import IconButton from '../common/IconButton.vue'
-import useConnectionStore from '../stores/connections.js'
+import useConnectionStore from '../../stores/connections.js'
 
 const props = defineProps({
     server: String,

frontend/src/components/content_value/ContentValueHash.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import ContentToolbar from '../ContentToolbar.vue'
+import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '../icons/AddLink.vue'
 import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
 import { types, types as redisTypes } from '../../consts/support_redis_type.js'

frontend/src/components/content_value/ContentValueList.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import ContentToolbar from '../ContentToolbar.vue'
+import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '../icons/AddLink.vue'
 import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
 import { size } from 'lodash'

frontend/src/components/content_value/ContentValueSet.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import ContentToolbar from '../ContentToolbar.vue'
+import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '../icons/AddLink.vue'
 import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
 import { size } from 'lodash'

frontend/src/components/content_value/ContentValueString.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import ContentToolbar from '../ContentToolbar.vue'
+import ContentToolbar from './ContentToolbar.vue'
 import Copy from '../icons/Copy.vue'
 import Save from '../icons/Save.vue'
 import { useMessage } from 'naive-ui'

frontend/src/components/content_value/ContentValueZSet.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import ContentToolbar from '../ContentToolbar.vue'
+import ContentToolbar from './ContentToolbar.vue'
 import AddLink from '../icons/AddLink.vue'
 import { NButton, NCode, NIcon, NInput, NInputNumber, useMessage } from 'naive-ui'
 import { types, types as redisTypes } from '../../consts/support_redis_type.js'

frontend/src/components/icons/Help.vue

@@ -0,0 +1,35 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            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
+            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"
+        />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/components/sidebar/BrowserPane.vue

@@ -1,8 +1,7 @@
 <script setup>
 import { NIcon } from 'naive-ui'
-import AddGroup from '../icons/AddGroup.vue'
 import AddLink from '../icons/AddLink.vue'
-import DatabaseTree from './DatabaseTree.vue'
+import BrowserTree from './BrowserTree.vue'
 import IconButton from '../common/IconButton.vue'
 import Filter from '../icons/Filter.vue'
 import useTabStore from '../../stores/tab.js'
@@ -10,14 +9,16 @@ import { computed } from 'vue'
 import { get } from 'lodash'
 import Delete from '../icons/Delete.vue'
 import Refresh from '../icons/Refresh.vue'
+import useDialogStore from '../../stores/dialog.js'
 
+const dialogStore = useDialogStore()
 const tabStore = useTabStore()
 const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
 </script>
 
 <template>
     <div class="nav-pane-container flex-box-v">
-        <database-tree :server="currentName" />
+        <browser-tree :server="currentName" />
 
         <!-- bottom function bar -->
         <div class="nav-pane-bottom flex-box-h">

frontend/src/components/sidebar/NavMenu.vue

@@ -1,16 +1,17 @@
 <script setup>
 import { computed, h } from 'vue'
 import { NIcon, useThemeVars } from 'naive-ui'
-import ToggleDb from './icons/ToggleDb.vue'
+import ToggleDb from '../icons/ToggleDb.vue'
 import { useI18n } from 'vue-i18n'
-import ToggleServer from './icons/ToggleServer.vue'
+import ToggleServer from '../icons/ToggleServer.vue'
-import IconButton from './common/IconButton.vue'
+import IconButton from '../common/IconButton.vue'
-import Config from './icons/Config.vue'
+import Config from '../icons/Config.vue'
-import useDialogStore from '../stores/dialog.js'
+import useDialogStore from '../../stores/dialog.js'
-import Github from './icons/Github.vue'
+import Github from '../icons/Github.vue'
-import { BrowserOpenURL } from '../../wailsjs/runtime/runtime.js'
+import { BrowserOpenURL } from '../../../wailsjs/runtime/runtime.js'
-import Log from './icons/Log.vue'
+import Log from '../icons/Log.vue'
-import useConnectionStore from '../stores/connections.js'
+import useConnectionStore from '../../stores/connections.js'
+import Help from '../icons/Help.vue'
 
 const themeVars = useThemeVars()
 
@@ -62,6 +63,11 @@ const preferencesOptions = computed(() => {
             key: 'preferences',
             icon: renderIcon(Config),
         },
+        {
+            label: i18n.t('help'),
+            key: 'help',
+            icon: renderIcon(Help),
+        },
         {
             label: i18n.t('about'),
             key: 'about',

frontend/src/langs/en.json

@@ -120,5 +120,6 @@
   "structure": "Structure",
   "log": "Log",
   "about": "About",
+  "help": "Help",
   "check_update": "Check for Updates..."
 }

frontend/src/langs/zh-cn.json

@@ -123,5 +123,6 @@
   "structure": "结构",
   "log": "日志",
   "about": "关于",
+  "help": "帮助",
   "check_update": "检查更新..."
 }