lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: use discrete api for message

This commit is contained in:
tiny-craft 2023-08-20 14:42:36 +08:00
parent ae1d4f5215
commit 5a9fb00474
19 changed files with 151 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/App.vue
View File

@ -88,25 +88,23 @@ const theme = computed(() => {
class="fill-height"
>
<n-global-style />
<n-message-provider>
<n-dialog-provider>
<n-spin v-show="initializing" :theme-overrides="{ opacitySpinning: 0 }">
<div id="launch-container" />
</n-spin>
<app-content v-if="!initializing" class="flex-item-expand" />
<n-dialog-provider>
<n-spin v-show="initializing" :theme-overrides="{ opacitySpinning: 0 }">
<div id="launch-container" />
</n-spin>
<app-content v-if="!initializing" class="flex-item-expand" />
<!-- top modal dialogs -->
<connection-dialog />
<group-dialog />
<new-key-dialog />
<key-filter-dialog />
<add-fields-dialog />
<rename-key-dialog />
<delete-key-dialog />
<set-ttl-dialog />
<preferences-dialog />
</n-dialog-provider>
</n-message-provider>
<!-- top modal dialogs -->
<connection-dialog />
<group-dialog />
<new-key-dialog />
<key-filter-dialog />
<add-fields-dialog />
<rename-key-dialog />
<delete-key-dialog />
<set-ttl-dialog />
<preferences-dialog />
</n-dialog-provider>
</n-config-provider>
</template>

2
frontend/src/components/content_value/ContentToolbar.vue
View File

@ -7,12 +7,12 @@ import Refresh from '@/components/icons/Refresh.vue'
import Timer from '@/components/icons/Timer.vue'
import RedisTypeTag from '@/components/common/RedisTypeTag.vue'
import { useI18n } from 'vue-i18n'
import { useMessage } from 'naive-ui'
import IconButton from '@/components/common/IconButton.vue'
import useConnectionStore from 'stores/connections.js'
import { useConfirmDialog } from '@/utils/confirm_dialog.js'
import Copy from '@/components/icons/Copy.vue'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
import { useMessage } from '@/utils/message.js'
const props = defineProps({
server: String,

6
frontend/src/components/content_value/ContentValueHash.vue
View File

@ -3,14 +3,15 @@ import { computed, h, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import ContentToolbar from './ContentToolbar.vue'
import AddLink from '@/components/icons/AddLink.vue'
import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
import { NButton, NCode, NIcon, NInput } from 'naive-ui'
import { types, types as redisTypes } from '@/consts/support_redis_type.js'
import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
import useDialogStore from 'stores/dialog.js'
import useConnectionStore from 'stores/connections.js'
import { useMessage } from '@/utils/message.js'
const i18n = useI18n()
const message = useMessage()
const props = defineProps({
name: String,
db: Number,
@ -197,7 +198,6 @@ const tableData = computed(() => {
}
return data
})
const message = useMessage()
const onAddRow = () => {
dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, types.HASH)
}

7
frontend/src/components/content_value/ContentValueList.vue
View File

@ -3,15 +3,16 @@ import { computed, h, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import ContentToolbar from './ContentToolbar.vue'
import AddLink from '@/components/icons/AddLink.vue'
import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
import { NButton, NCode, NIcon, NInput } from 'naive-ui'
import { size } from 'lodash'
import { types, types as redisTypes } from '@/consts/support_redis_type.js'
import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
import useDialogStore from 'stores/dialog.js'
import useConnectionStore from 'stores/connections.js'
import { useMessage } from '@/utils/message.js'
const i18n = useI18n()
const message = useMessage()
const props = defineProps({
name: String,
db: Number,
@ -151,7 +152,7 @@ const tableData = computed(() => {
}
return data
})
const message = useMessage()
const onAddValue = (value) => {
dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, types.LIST)
}

5
frontend/src/components/content_value/ContentValueSet.vue
View File

@ -3,14 +3,16 @@ import { computed, h, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import ContentToolbar from './ContentToolbar.vue'
import AddLink from '@/components/icons/AddLink.vue'
import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
import { NButton, NCode, NIcon, NInput } from 'naive-ui'
import { size } from 'lodash'
import useDialogStore from 'stores/dialog.js'
import { types, types as redisTypes } from '@/consts/support_redis_type.js'
import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
import useConnectionStore from 'stores/connections.js'
import { useMessage } from '@/utils/message.js'
const i18n = useI18n()
const message = useMessage()
const props = defineProps({
name: String,
db: Number,
@ -147,7 +149,6 @@ const tableData = computed(() => {
return data
})
const message = useMessage()
const onAddValue = (value) => {
dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, types.SET)
}

7
frontend/src/components/content_value/ContentValueStream.vue
View File

@ -3,15 +3,16 @@ import { computed, h, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import ContentToolbar from './ContentToolbar.vue'
import AddLink from '@/components/icons/AddLink.vue'
import { NButton, NCode, NIcon, NInput, useMessage } from 'naive-ui'
import { NButton, NCode, NIcon, NInput } from 'naive-ui'
import { types, types as redisTypes } from '@/consts/support_redis_type.js'
import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
import useDialogStore from 'stores/dialog.js'
import useConnectionStore from 'stores/connections.js'
import { includes, keys, some, values } from 'lodash'
import { useMessage } from '@/utils/message.js'
const i18n = useI18n()
const message = useMessage()
const props = defineProps({
name: String,
db: Number,
@ -120,7 +121,7 @@ const tableData = computed(() => {
}
return data
})
const message = useMessage()
const onAddRow = () => {
dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, types.STREAM)
}

7
frontend/src/components/content_value/ContentValueString.vue
View File

@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
import ContentToolbar from './ContentToolbar.vue'
import Copy from '@/components/icons/Copy.vue'
import Save from '@/components/icons/Save.vue'
import { useMessage, useThemeVars } from 'naive-ui'
import { useThemeVars } from 'naive-ui'
import { types } from '@/consts/value_view_type.js'
import Close from '@/components/icons/Close.vue'
import Edit from '@/components/icons/Edit.vue'
@ -13,7 +13,10 @@ import { types as redisTypes } from '@/consts/support_redis_type.js'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
import { toLower } from 'lodash'
import useConnectionStore from 'stores/connections.js'
import { useMessage } from '@/utils/message.js'
const i18n = useI18n()
const message = useMessage()
const themeVars = useThemeVars()
const props = defineProps({
@ -106,8 +109,6 @@ const viewLanguage = computed(() => {
return 'plaintext'
}
})
const i18n = useI18n()
const message = useMessage()
/**
* Copy value

7
frontend/src/components/content_value/ContentValueZSet.vue
View File

@ -3,15 +3,16 @@ import { computed, h, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import ContentToolbar from './ContentToolbar.vue'
import AddLink from '@/components/icons/AddLink.vue'
import { NButton, NCode, NIcon, NInput, NInputNumber, useMessage } from 'naive-ui'
import { NButton, NCode, NIcon, NInput, NInputNumber } from 'naive-ui'
import { types, types as redisTypes } from '@/consts/support_redis_type.js'
import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
import { isEmpty } from 'lodash'
import useDialogStore from 'stores/dialog.js'
import useConnectionStore from 'stores/connections.js'
import { useMessage } from '@/utils/message.js'
const i18n = useI18n()
const message = useMessage()
const props = defineProps({
name: String,
db: Number,
@ -220,7 +221,7 @@ const tableData = computed(() => {
}
return data
})
const message = useMessage()
const onAddRow = () => {
dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, types.ZSET)
}

2
frontend/src/components/dialogs/AddFieldsDialog.vue
View File

@ -5,7 +5,7 @@ import useDialog from 'stores/dialog'
import NewStringValue from '@/components/new_value/NewStringValue.vue'
import NewSetValue from '@/components/new_value/NewSetValue.vue'
import { useI18n } from 'vue-i18n'
import { useMessage } from 'naive-ui'
import { useMessage } from '@/utils/message.js'
import AddListValue from '@/components/new_value/AddListValue.vue'
import AddHashValue from '@/components/new_value/AddHashValue.vue'
import AddZSetValue from '@/components/new_value/AddZSetValue.vue'

2
frontend/src/components/dialogs/ConnectionDialog.vue
View File

@ -4,7 +4,7 @@ import { computed, nextTick, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { TestConnection } from 'wailsjs/go/services/connectionService.js'
import useDialog from 'stores/dialog'
import { useMessage } from 'naive-ui'
import { useMessage } from '@/utils/message.js'
import Close from '@/components/icons/Close.vue'
import useConnectionStore from 'stores/connections.js'

2
frontend/src/components/dialogs/DeleteKeyDialog.vue
View File

@ -1,7 +1,7 @@
<script setup>
import { reactive, watch } from 'vue'
import useDialog from 'stores/dialog'
import { useMessage } from 'naive-ui'
import { useMessage } from '@/utils/message.js'
import { useI18n } from 'vue-i18n'
import useConnectionStore from 'stores/connections.js'
import { isEmpty, size } from 'lodash'

2
frontend/src/components/dialogs/GroupDialog.vue
View File

@ -1,7 +1,7 @@
<script setup>
import { computed, reactive, ref, watch } from 'vue'
import useDialog from 'stores/dialog'
import { useMessage } from 'naive-ui'
import { useMessage } from '@/utils/message.js'
import { useI18n } from 'vue-i18n'
import useConnectionStore from 'stores/connections.js'
import { isEmpty } from 'lodash'

3
frontend/src/components/dialogs/NewKeyDialog.vue
View File

@ -10,9 +10,10 @@ import NewZSetValue from '@/components/new_value/NewZSetValue.vue'
import NewSetValue from '@/components/new_value/NewSetValue.vue'
import { useI18n } from 'vue-i18n'
import useConnectionStore from 'stores/connections.js'
import { NSpace, useMessage } from 'naive-ui'
import { NSpace } from 'naive-ui'
import useTabStore from 'stores/tab.js'
import NewStreamValue from '@/components/new_value/NewStreamValue.vue'
import { useMessage } from '@/utils/message.js'
const i18n = useI18n()
const newForm = reactive({

2
frontend/src/components/dialogs/PreferencesDialog.vue
View File

@ -3,7 +3,7 @@ import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import useDialog from 'stores/dialog'
import usePreferencesStore from 'stores/preferences.js'
import { useMessage } from 'naive-ui'
import { useMessage } from '@/utils/message.js'
const prefStore = usePreferencesStore()

2
frontend/src/components/dialogs/RenameKeyDialog.vue
View File

@ -1,7 +1,7 @@
<script setup>
import { reactive, watch } from 'vue'
import useDialog from 'stores/dialog'
import { useMessage } from 'naive-ui'
import { useMessage } from '@/utils/message.js'
import { useI18n } from 'vue-i18n'
import useConnectionStore from 'stores/connections.js'

4
frontend/src/components/sidebar/BrowserPane.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { useMessage, useThemeVars } from 'naive-ui'
import { useThemeVars } from 'naive-ui'
import AddLink from '@/components/icons/AddLink.vue'
import BrowserTree from './BrowserTree.vue'
import IconButton from '@/components/common/IconButton.vue'
@ -9,7 +9,6 @@ import { get } from 'lodash'
import Delete from '@/components/icons/Delete.vue'
import Refresh from '@/components/icons/Refresh.vue'
import useDialogStore from 'stores/dialog.js'
import { useConfirmDialog } from '@/utils/confirm_dialog.js'
import { useI18n } from 'vue-i18n'
import useConnectionStore from 'stores/connections.js'
import { types } from '@/consts/support_redis_type.js'
@ -36,7 +35,6 @@ const onNewKey = () => {
const i18n = useI18n()
const connectionStore = useConnectionStore()
const message = useMessage()
const onDeleteKey = () => {
browserTreeRef.value?.handleSelectContextMenu('value_remove')
}

154
frontend/src/components/sidebar/BrowserTree.vue
View File

@ -1,7 +1,7 @@
<script setup>
import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
import { ConnectionType } from '@/consts/connection_type.js'
import { NIcon, NSpace, NTag, useDialog, useMessage } from 'naive-ui'
import { NIcon, NSpace, NTag, useDialog } from 'naive-ui'
import Key from '@/components/icons/Key.vue'
import ToggleDb from '@/components/icons/ToggleDb.vue'
import { find, get, includes, indexOf, isEmpty, remove } from 'lodash'
@ -23,6 +23,7 @@ import Close from '@/components/icons/Close.vue'
import { typesBgColor, typesColor } from '@/consts/support_redis_type.js'
import useTabStore from 'stores/tab.js'
import IconButton from '@/components/common/IconButton.vue'
import { useMessage } from '@/utils/message.js'
const props = defineProps({
server: String,
@ -218,6 +219,82 @@ const expandKey = (key) => {
}
}
const confirmDialog = useConfirmDialog()
const handleSelectContextMenu = (key) => {
contextMenuParam.show = false
const selectedKey = get(selectedKeys.value, 0)
if (selectedKey == null) {
return
}
const node = connectionStore.getNode(selectedKey)
const { db, key: nodeKey, redisKey } = node || {}
switch (key) {
case 'server_reload':
expandedKeys.value = [props.server]
tabStore.setSelectedKeys(props.server)
connectionStore.openConnection(props.server, true).then(() => {
message.success(i18n.t('reload_succ'))
})
break
case 'server_close':
connectionStore.closeConnection(props.server)
break
case 'db_open':
nextTick().then(() => expandKey(nodeKey))
break
case 'db_reload':
connectionStore.reopenDatabase(props.server, db)
break
case 'db_close':
remove(expandedKeys.value, (k) => k === `${props.server}/db${db}`)
connectionStore.closeDatabase(props.server, db)
break
case 'db_newkey':
case 'key_newkey':
dialogStore.openNewKeyDialog(redisKey, props.server, db)
break
case 'db_filter':
const { match: pattern, type } = connectionStore.getKeyFilter(props.server, db)
dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
break
case 'key_reload':
connectionStore.loadKeys(props.server, db, redisKey)
break
case 'value_reload':
connectionStore.loadKeyValue(props.server, db, redisKey)
break
case 'key_remove':
dialogStore.openDeleteKeyDialog(props.server, db, isEmpty(redisKey) ? '*' : redisKey + ':*')
break
case 'value_remove':
confirmDialog.warning(i18n.t('remove_tip', { name: redisKey }), () => {
connectionStore.deleteKey(props.server, db, redisKey).then((success) => {
if (success) {
message.success(i18n.t('delete_key_succ', { key: redisKey }))
}
})
})
break
case 'key_copy':
case 'value_copy':
ClipboardSetText(redisKey)
.then((succ) => {
if (succ) {
message.success(i18n.t('copy_succ'))
}
})
.catch((e) => {
message.error(e.message)
})
break
default:
console.warn('TODO: handle context menu:' + key)
}
}
defineExpose({
handleSelectContextMenu,
})
const message = useMessage()
const dialog = useDialog()
const onUpdateExpanded = (value, option, meta) => {
@ -505,81 +582,6 @@ const onLoadTree = async (node) => {
}
}
const confirmDialog = useConfirmDialog()
defineExpose({
handleSelectContextMenu: (key) => {
contextMenuParam.show = false
const selectedKey = get(selectedKeys.value, 0)
if (selectedKey == null) {
return
}
const node = connectionStore.getNode(selectedKey)
const { db, key: nodeKey, redisKey } = node || {}
switch (key) {
case 'server_reload':
expandedKeys.value = [props.server]
tabStore.setSelectedKeys(props.server)
connectionStore.openConnection(props.server, true).then(() => {
message.success(i18n.t('reload_succ'))
})
break
case 'server_close':
connectionStore.closeConnection(props.server)
break
case 'db_open':
nextTick().then(() => expandKey(nodeKey))
break
case 'db_reload':
connectionStore.reopenDatabase(props.server, db)
break
case 'db_close':
remove(expandedKeys.value, (k) => k === `${props.server}/db${db}`)
connectionStore.closeDatabase(props.server, db)
break
case 'db_newkey':
case 'key_newkey':
dialogStore.openNewKeyDialog(redisKey, props.server, db)
break
case 'db_filter':
const { match: pattern, type } = connectionStore.getKeyFilter(props.server, db)
dialogStore.openKeyFilterDialog(props.server, db, pattern, type)
break
case 'key_reload':
connectionStore.loadKeys(props.server, db, redisKey)
break
case 'value_reload':
connectionStore.loadKeyValue(props.server, db, redisKey)
break
case 'key_remove':
dialogStore.openDeleteKeyDialog(props.server, db, isEmpty(redisKey) ? '*' : redisKey + ':*')
break
case 'value_remove':
confirmDialog.warning(i18n.t('remove_tip', { name: redisKey }), () => {
connectionStore.deleteKey(props.server, db, redisKey).then((success) => {
if (success) {
message.success(i18n.t('delete_key_succ', { key: redisKey }))
}
})
})
break
case 'key_copy':
case 'value_copy':
ClipboardSetText(redisKey)
.then((succ) => {
if (succ) {
message.success(i18n.t('copy_succ'))
}
})
.catch((e) => {
message.error(e.message)
})
break
default:
console.warn('TODO: handle context menu:' + key)
}
},
})
const handleOutsideContextMenu = () => {
contextMenuParam.show = false
}

3
frontend/src/components/sidebar/ConnectionTree.vue
View File

@ -2,7 +2,7 @@
import useDialogStore from 'stores/dialog.js'
import { h, nextTick, reactive, ref } from 'vue'
import useConnectionStore from 'stores/connections.js'
import { NIcon, useDialog, useMessage, useThemeVars } from 'naive-ui'
import { NIcon, useDialog, useThemeVars } from 'naive-ui'
import { ConnectionType } from '@/consts/connection_type.js'
import ToggleFolder from '@/components/icons/ToggleFolder.vue'
import ToggleServer from '@/components/icons/ToggleServer.vue'
@ -16,6 +16,7 @@ import { useI18n } from 'vue-i18n'
import useTabStore from 'stores/tab.js'
import Edit from '@/components/icons/Edit.vue'
import { useConfirmDialog } from '@/utils/confirm_dialog.js'
import { useMessage } from '@/utils/message.js'
const themeVars = useThemeVars()
const i18n = useI18n()

23
frontend/src/utils/message.js Normal file
View File

@ -0,0 +1,23 @@
import { createDiscreteApi } from 'naive-ui'
const { message } = createDiscreteApi(['message'])
export function useMessage() {
return {
error: (content, option = null) => {
message.error(content, option)
},
info: (content, option = null) => {
message.info(content, option)
},
loading: (content, option = null) => {
message.loading(content, option)
},
success: (content, option = null) => {
message.success(content, option)
},
warning: (content, option = null) => {
message.warning(content, option)
},
}
}