+
+
-
-
-
@@ -120,12 +162,28 @@ watch(
#app-content-wrapper {
height: 100%;
overflow: hidden;
- border-top: v-bind('themeVars.borderColor') 1px solid;
box-sizing: border-box;
#app-toolbar {
- height: 40px;
- border-bottom: v-bind('themeVars.borderColor') 1px solid;
+ background-color: v-bind('themeVars.tabColor');
+ border-bottom: 1px solid v-bind('themeVars.borderColor');
+
+ &-title {
+ padding-left: 10px;
+ padding-right: 10px;
+ box-sizing: border-box;
+ align-self: center;
+ align-items: baseline;
+ }
+ }
+
+ .app-toolbar-tab {
+ align-self: flex-end;
+ margin-bottom: -1px;
+ }
+
+ #app-content {
+ height: calc(100% - 60px);
}
#app-side {
@@ -157,4 +215,14 @@ watch(
.dragging {
cursor: col-resize !important;
}
+
+.fade-enter-from,
+.fade-leave-to {
+ opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.3s ease;
+}
diff --git a/frontend/src/assets/images/icon.png b/frontend/src/assets/images/icon.png
new file mode 100644
index 0000000..e9b7352
Binary files /dev/null and b/frontend/src/assets/images/icon.png differ
diff --git a/frontend/src/components/common/ToolbarControlWidget.vue b/frontend/src/components/common/ToolbarControlWidget.vue
new file mode 100644
index 0000000..bf89612
--- /dev/null
+++ b/frontend/src/components/common/ToolbarControlWidget.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/content/ContentLogPane.vue b/frontend/src/components/content/ContentLogPane.vue
index 15dcf93..717b782 100644
--- a/frontend/src/components/content/ContentLogPane.vue
+++ b/frontend/src/components/content/ContentLogPane.vue
@@ -90,7 +90,7 @@ defineExpose({
-
+
-
-
-
- {{ t.label }}
-
-
-
-
-import { ref } from 'vue'
-import { ConnectionType } from '@/consts/connection_type.js'
-import Close from '@/components/icons/Close.vue'
-import useConnectionStore from 'stores/connections.js'
+import ToggleServer from '@/components/icons/ToggleServer.vue'
+import useTabStore from 'stores/tab.js'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { get, map } from 'lodash'
import { useThemeVars } from 'naive-ui'
-
-const emit = defineEmits(['switchTab', 'closeTab', 'update:modelValue'])
+import useConnectionStore from 'stores/connections.js'
const themeVars = useThemeVars()
+const i18n = useI18n()
+const tabStore = useTabStore()
+const connectionStore = useConnectionStore()
+
const props = defineProps({
- selectedIndex: {
- type: Number,
- default: 0,
- },
- modelValue: {
- type: Object,
- default: [
- {
- // label: 'tab1',
- // key: 'key',
- // bgColor: 'white',
- },
- ],
- },
- tabs: {
- type: Array,
- default: [
- {
- // label: 'tab1',
- // key: 'key',
- // bgColor: 'white',
- },
- ],
- },
+ backgroundColor: String,
})
-const connectionStore = useConnectionStore()
-const onCurrentSelectChange = ({ type, group = '', server = '', db = 0, key = '' }) => {
- console.log(`group: ${group}\n server: ${server}\n db: ${db}\n key: ${key}`)
- if (type === ConnectionType.RedisValue) {
- // load and update content value
- }
-}
-// watch(() => databaseStore.currentSelect, throttle(onCurrentSelectChange, 1000))
-
-const items = ref(props.modelValue)
-const selIndex = ref(props.selectedIndex)
-
-const onClickTab = (idx, key) => {
- if (idx !== selIndex.value) {
- selIndex.value = idx
- emit('update:modelValue', idx, key)
- }
+const onCloseTab = (tabIndex) => {
+ $dialog.warning(i18n.t('close_confirm'), () => {
+ const tab = get(tabStore.tabs, tabIndex)
+ if (tab != null) {
+ connectionStore.closeConnection(tab.name)
+ }
+ })
}
-const onCloseTab = (idx, key) => {
- emit('closeTab', idx, key)
-}
+const activeTabStyle = computed(() => ({
+ backgroundColor: themeVars.value.baseColor,
+ borderTopWidth: '1px',
+ borderTopColor: themeVars.value.borderColor,
+ borderBottomColor: themeVars.value.baseColor,
+ borderTopLeftRadius: themeVars.value.borderRadius,
+ borderTopRightRadius: themeVars.value.borderRadius,
+}))
+const inactiveTabStyle = computed(() => ({
+ borderWidth: '0 0 1px',
+ borderBottomColor: themeVars.value.borderColor,
+ borderTopLeftRadius: themeVars.value.borderRadius,
+ borderTopRightRadius: themeVars.value.borderRadius,
+}))
+
+const tab = computed(() =>
+ map(tabStore.tabs, (item) => ({
+ key: item.name,
+ label: item.title,
+ })),
+)
-
-
-
-
-
- {{ item.label }}
-
-
-
+ tabStore.switchTab(tabIndex)"
+ :theme-overrides="{
+ tabFontWeightActive: 800,
+ tabBorderRadius: 0,
+ tabGapSmallCard: 0,
+ tabGapMediumCard: 0,
+ tabGapLargeCard: 0,
+ tabColor: '#0000',
+ tabBorderColor: themeVars.borderColor,
+ }">
+ {}">
+
+
+ {{ t.label }}
+
+
+
-
+
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index 5b227ef..6f2916f 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -265,13 +265,15 @@ const onUpdateFilter = (filters, sourceColumn) => {
{{ $t('add_row') }}
-
+
{
{{ $t('add_row') }}
-
+
{
{{ $t('add_row') }}
-
+
{
{{ $t('add_row') }}
-
+
{
.value-wrapper {
overflow: hidden;
border-top: v-bind('themeVars.borderColor') 1px solid;
+ padding: 5px;
}
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index 8de676d..7978d5d 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -296,13 +296,15 @@ const onUpdateFilter = (filters, sourceColumn) => {
{{ $t('add_row') }}
-
+
+const props = defineProps({
+ size: {
+ type: [Number, String],
+ default: 12,
+ },
+})
+
+
+
+
+
+
+
diff --git a/frontend/src/components/icons/WindowMax.vue b/frontend/src/components/icons/WindowMax.vue
new file mode 100644
index 0000000..2786085
--- /dev/null
+++ b/frontend/src/components/icons/WindowMax.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/icons/WindowMin.vue b/frontend/src/components/icons/WindowMin.vue
new file mode 100644
index 0000000..e154809
--- /dev/null
+++ b/frontend/src/components/icons/WindowMin.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 5d18d55..95f7a44 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -50,14 +50,15 @@ const selectedKeys = computed(() => {
const data = computed(() => {
const dbs = get(connectionStore.databases, props.server, [])
- return [
- {
- key: `${props.server}`,
- label: props.server,
- type: ConnectionType.Server,
- children: dbs,
- },
- ]
+ return dbs
+ // return [
+ // {
+ // key: `${props.server}`,
+ // label: props.server,
+ // type: ConnectionType.Server,
+ // children: dbs,
+ // },
+ // ]
})
const backgroundColor = computed(() => {
@@ -368,6 +369,8 @@ const renderPrefix = ({ option }) => {
// render tree item label
const renderLabel = ({ option }) => {
switch (option.type) {
+ case ConnectionType.Server:
+ return h('b', {}, { default: () => option.label })
case ConnectionType.RedisDB:
const { name: server, db } = option
let { match: matchPattern, type: typeFilter } = connectionStore.getKeyFilter(server, db)
diff --git a/frontend/src/components/sidebar/NavMenu.vue b/frontend/src/components/sidebar/NavMenu.vue
index 1098410..ae0fb0a 100644
--- a/frontend/src/components/sidebar/NavMenu.vue
+++ b/frontend/src/components/sidebar/NavMenu.vue
@@ -32,7 +32,7 @@ const emit = defineEmits(['update:value'])
const iconSize = computed(() => Math.floor(props.width * 0.4))
const renderIcon = (icon) => {
- return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 4 }) })
+ return () => h(NIcon, null, { default: () => h(icon, { strokeWidth: 3 }) })
}
const connectionStore = useConnectionStore()
@@ -122,7 +122,7 @@ const openGithub = () => {
:render-label="renderContextLabel"
trigger="click"
@select="onSelectPreferenceMenu">
-
+
@@ -131,7 +131,7 @@ const openGithub = () => {