diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 7ebeb41..4930fbb 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -63,7 +63,7 @@ watch( class="fill-height"> - +
diff --git a/frontend/src/AppContent.vue b/frontend/src/AppContent.vue index bef1dae..b119d7d 100644 --- a/frontend/src/AppContent.vue +++ b/frontend/src/AppContent.vue @@ -11,6 +11,11 @@ import useTabStore from './stores/tab.js' import usePreferencesStore from './stores/preferences.js' import useConnectionStore from './stores/connections.js' import ContentLogPane from './components/content/ContentLogPane.vue' +import ContentValueTab from '@/components/content/ContentValueTab.vue' +import ToolbarControlWidget from '@/components/common/ToolbarControlWidget.vue' +import { WindowToggleMaximise } from 'wailsjs/runtime/runtime.js' +import { isMacOS } from '@/utils/platform.js' +import iconUrl from '@/assets/images/icon.png' const themeVars = useThemeVars() @@ -19,6 +24,7 @@ const data = reactive({ navMenuWidth: 60, hoverResize: false, resizing: false, + toolbarHeight: 45, }) const tabStore = useTabStore() @@ -69,49 +75,85 @@ watch( @@ -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, + })), +) - + 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 = () => {