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

perf: bind message and dialog to window

This commit is contained in:
tiny-craft 2023-08-24 00:44:19 +08:00
parent 22f71e4676
commit 95e48e75d3
24 changed files with 182 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/package-lock.json generated
View File

@ -1090,9 +1090,9 @@
}
},
"node_modules/immutable": {
"version": "4.3.2",
"resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.2.tgz",
"integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA=="
"version": "4.3.3",
"resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.3.tgz",
"integrity": "sha512-808ZFYMsIRAjLAu5xkKo0TsbY9LBy9H5MazTKIEHerNkg0ymgilGfBPMR/3G7d/ihGmuK2Hw8S1izY2d3kd3wA=="
},
"node_modules/is-binary-path": {
"version": "2.1.0",
@ -2720,9 +2720,9 @@
"dev": true
},
"immutable": {
"version": "4.3.2",
"resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.2.tgz",
"integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA=="
"version": "4.3.3",
"resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.3.tgz",
"integrity": "sha512-808ZFYMsIRAjLAu5xkKo0TsbY9LBy9H5MazTKIEHerNkg0ymgilGfBPMR/3G7d/ihGmuK2Hw8S1izY2d3kd3wA=="
},
"is-binary-path": {
"version": "2.1.0",

28
frontend/src/App.vue
View File

@ -11,11 +11,11 @@ import AddFieldsDialog from './components/dialogs/AddFieldsDialog.vue'
import AppContent from './AppContent.vue'
import GroupDialog from './components/dialogs/GroupDialog.vue'
import DeleteKeyDialog from './components/dialogs/DeleteKeyDialog.vue'
import { computed, onBeforeMount, ref } from 'vue'
import { onMounted, ref, watch } from 'vue'
import usePreferencesStore from './stores/preferences.js'
import useConnectionStore from './stores/connections.js'
import { useI18n } from 'vue-i18n'
import { darkTheme, lightTheme, useOsTheme } from 'naive-ui'
import { darkTheme } from 'naive-ui'
import KeyFilterDialog from './components/dialogs/KeyFilterDialog.vue'
import { WindowSetDarkTheme, WindowSetLightTheme } from 'wailsjs/runtime/runtime.js'
import { themeOverrides } from '@/utils/theme.js'
@ -27,12 +27,10 @@ const prefStore = usePreferencesStore()
const connectionStore = useConnectionStore()
const i18n = useI18n()
const initializing = ref(false)
onBeforeMount(async () => {
onMounted(async () => {
try {
initializing.value = true
await prefStore.loadPreferences()
i18n.locale.value = prefStore.currentLanguage
await prefStore.loadFontList()
await connectionStore.initConnections()
if (prefStore.autoCheckUpdate) {
prefStore.checkForUpdate()
@ -42,27 +40,17 @@ onBeforeMount(async () => {
}
})
const osTheme = useOsTheme()
const theme = computed(() => {
if (prefStore.general.theme === 'auto') {
if (osTheme.value === 'dark') {
WindowSetDarkTheme()
return darkTheme
}
} else if (prefStore.general.theme === 'dark') {
WindowSetDarkTheme()
return darkTheme
}
WindowSetLightTheme()
return lightTheme
})
watch(
() => prefStore.isDark,
(isDark) => (isDark ? WindowSetDarkTheme() : WindowSetLightTheme()),
)
</script>
<template>
<n-config-provider
:hljs="hljs"
:inline-theme-disabled="true"
:theme="theme"
:theme="prefStore.isDark ? darkTheme : undefined"
:theme-overrides="themeOverrides"
class="fill-height"
>

4
frontend/src/components/content/ContentPane.vue
View File

@ -11,7 +11,6 @@ import useTabStore from 'stores/tab.js'
import { useDialog } from 'naive-ui'
import useConnectionStore from 'stores/connections.js'
import { useI18n } from 'vue-i18n'
import { useConfirmDialog } from '@/utils/confirm_dialog.js'
import ContentServerStatus from '@/components/content_value/ContentServerStatus.vue'
import ContentValueStream from '@/components/content_value/ContentValueStream.vue'
@ -125,9 +124,8 @@ const onReloadKey = async () => {
}
const i18n = useI18n()
const confirmDialog = useConfirmDialog()
const onCloseTab = (tabIndex) => {
confirmDialog.warning(i18n.t('close_confirm'), () => {
$dialog.warning(i18n.t('close_confirm'), () => {
const tab = get(tabStore.tabs, tabIndex)
if (tab != null) {
connectionStore.closeConnection(tab.name)

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

@ -9,10 +9,8 @@ import RedisTypeTag from '@/components/common/RedisTypeTag.vue'
import { useI18n } from 'vue-i18n'
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,
@ -33,7 +31,6 @@ const props = defineProps({
const dialogStore = useDialog()
const connectionStore = useConnectionStore()
const message = useMessage()
const i18n = useI18n()
const onReloadKey = () => {
@ -44,20 +41,19 @@ const onCopyKey = () => {
ClipboardSetText(props.keyPath)
.then((succ) => {
if (succ) {
message.success(i18n.t('copy_succ'))
$message.success(i18n.t('copy_succ'))
}
})
.catch((e) => {
message.error(e.message)
$message.error(e.message)
})
}
const confirmDialog = useConfirmDialog()
const onDeleteKey = () => {
confirmDialog.warning(i18n.t('remove_tip', { name: props.keyPath }), () => {
$dialog.warning(i18n.t('remove_tip', { name: props.keyPath }), () => {
connectionStore.deleteKey(props.server, props.db, props.keyPath).then((success) => {
if (success) {
message.success(i18n.t('delete_key_succ', { key: props.keyPath }))
$message.success(i18n.t('delete_key_succ', { key: props.keyPath }))
}
})
})

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

@ -8,10 +8,8 @@ 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,
@ -125,7 +123,7 @@ const actionColumn = {
)
if (success) {
connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
message.success(i18n.t('delete_key_succ', { key: row.key }))
$message.success(i18n.t('delete_key_succ', { key: row.key }))
// update display value
// if (!isEmpty(removed)) {
// for (const elem of removed) {
@ -133,10 +131,10 @@ const actionColumn = {
// }
// }
} else {
message.error(msg)
$message.error(msg)
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
}
},
onSave: async () => {
@ -151,7 +149,7 @@ const actionColumn = {
)
if (success) {
connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
message.success(i18n.t('save_value_succ'))
$message.success(i18n.t('save_value_succ'))
// update display value
// if (!isEmpty(updated)) {
// for (const key in updated) {
@ -159,10 +157,10 @@ const actionColumn = {
// }
// }
} else {
message.error(msg)
$message.error(msg)
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
} finally {
currentEditRow.value.no = 0
}

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

@ -9,10 +9,8 @@ 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,
@ -82,16 +80,16 @@ const actionColumn = {
)
if (success) {
connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
message.success(i18n.t('delete_key_succ', { key: '#' + row.no }))
$message.success(i18n.t('delete_key_succ', { key: '#' + row.no }))
// update display value
// if (!isEmpty(removed)) {
// props.value.splice(removed[0], 1)
// }
} else {
message.error(msg)
$message.error(msg)
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
}
},
onSave: async () => {
@ -105,7 +103,7 @@ const actionColumn = {
)
if (success) {
connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
message.success(i18n.t('save_value_succ'))
$message.success(i18n.t('save_value_succ'))
// update display value
// if (!isEmpty(updated)) {
// for (const key in updated) {
@ -113,10 +111,10 @@ const actionColumn = {
// }
// }
} else {
message.error(msg)
$message.error(msg)
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
} finally {
currentEditRow.value.no = 0
}

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

@ -9,10 +9,8 @@ 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,
@ -84,14 +82,14 @@ const actionColumn = {
)
if (success) {
connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
message.success(i18n.t('delete_key_succ', { key: row.value }))
$message.success(i18n.t('delete_key_succ', { key: row.value }))
// update display value
// props.value.splice(row.no - 1, 1)
} else {
message.error(msg)
$message.error(msg)
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
}
},
onSave: async () => {
@ -105,14 +103,14 @@ const actionColumn = {
)
if (success) {
connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
message.success(i18n.t('save_value_succ'))
$message.success(i18n.t('save_value_succ'))
// update display value
// props.value[row.no - 1] = currentEditRow.value.value
} else {
message.error(msg)
$message.error(msg)
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
} finally {
currentEditRow.value.no = 0
}

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

@ -9,10 +9,8 @@ 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,
@ -92,7 +90,7 @@ const actionColumn = {
)
if (success) {
connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
message.success(i18n.t('delete_key_succ', { key: row.id }))
$message.success(i18n.t('delete_key_succ', { key: row.id }))
// update display value
// if (!isEmpty(removed)) {
// for (const elem of removed) {
@ -100,10 +98,10 @@ const actionColumn = {
// }
// }
} else {
message.error(msg)
$message.error(msg)
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
}
},
})

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

@ -13,10 +13,8 @@ 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({
@ -117,11 +115,11 @@ const onCopyValue = () => {
ClipboardSetText(viewValue.value)
.then((succ) => {
if (succ) {
message.success(i18n.t('copy_succ'))
$message.success(i18n.t('copy_succ'))
}
})
.catch((e) => {
message.error(e.message)
$message.error(e.message)
})
}
@ -154,12 +152,12 @@ const onSaveValue = async () => {
)
if (success) {
await connectionStore.loadKeyValue(props.name, props.db, props.keyPath)
message.success(i18n.t('save_value_succ'))
$message.success(i18n.t('save_value_succ'))
} else {
message.error(msg)
$message.error(msg)
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
} finally {
inEdit.value = false
saving.value = false

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

@ -9,10 +9,8 @@ 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,
@ -155,19 +153,19 @@ const actionColumn = {
)
if (success) {
connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
message.success(i18n.t('delete_key_succ', { key: row.value }))
$message.success(i18n.t('delete_key_succ', { key: row.value }))
} else {
message.error(msg)
$message.error(msg)
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
}
},
onSave: async () => {
try {
const newValue = currentEditRow.value.value
if (isEmpty(newValue)) {
message.error(i18n.t('spec_field_required', { key: i18n.t('value') }))
$message.error(i18n.t('spec_field_required', { key: i18n.t('value') }))
return
}
const { success, msg } = await connectionStore.updateZSetItem(
@ -180,12 +178,12 @@ const actionColumn = {
)
if (success) {
connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
message.success(i18n.t('save_value_succ'))
$message.success(i18n.t('save_value_succ'))
} else {
message.error(msg)
$message.error(msg)
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
} finally {
currentEditRow.value.no = 0
}

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

@ -5,7 +5,6 @@ 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 '@/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'
@ -78,7 +77,6 @@ watch(
)
const connectionStore = useConnectionStore()
const message = useMessage()
const onAdd = async () => {
try {
const { server, db, key, type } = newForm
@ -100,9 +98,9 @@ const onAdd = async () => {
if (newForm.reload) {
connectionStore.loadKeyValue(server, db, key).then(() => {})
}
message.success(i18n.t('handle_succ'))
$message.success(i18n.t('handle_succ'))
} else {
message.error(msg)
$message.error(msg)
}
}
break
@ -114,9 +112,9 @@ const onAdd = async () => {
if (newForm.reload) {
connectionStore.loadKeyValue(server, db, key).then(() => {})
}
message.success(i18n.t('handle_succ'))
$message.success(i18n.t('handle_succ'))
} else {
message.error(msg)
$message.error(msg)
}
}
break
@ -128,9 +126,9 @@ const onAdd = async () => {
if (newForm.reload) {
connectionStore.loadKeyValue(server, db, key).then(() => {})
}
message.success(i18n.t('handle_succ'))
$message.success(i18n.t('handle_succ'))
} else {
message.error(msg)
$message.error(msg)
}
}
break
@ -142,9 +140,9 @@ const onAdd = async () => {
if (newForm.reload) {
connectionStore.loadKeyValue(server, db, key).then(() => {})
}
message.success(i18n.t('handle_succ'))
$message.success(i18n.t('handle_succ'))
} else {
message.error(msg)
$message.error(msg)
}
}
break
@ -163,9 +161,9 @@ const onAdd = async () => {
if (newForm.reload) {
connectionStore.loadKeyValue(server, db, key).then(() => {})
}
message.success(i18n.t('handle_succ'))
$message.success(i18n.t('handle_succ'))
} else {
message.error(msg)
$message.error(msg)
}
}
}
@ -173,7 +171,7 @@ const onAdd = async () => {
}
dialogStore.closeAddFieldsDialog()
} catch (e) {
message.error(e.message)
$message.error(e.message)
}
}

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

@ -4,7 +4,6 @@ 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 '@/utils/message.js'
import Close from '@/components/icons/Close.vue'
import useConnectionStore from 'stores/connections.js'
@ -14,7 +13,6 @@ import useConnectionStore from 'stores/connections.js'
const dialogStore = useDialog()
const connectionStore = useConnectionStore()
const message = useMessage()
const i18n = useI18n()
const editName = ref('')
@ -74,11 +72,11 @@ const onSaveConnection = async () => {
// store new connection
const { success, msg } = await connectionStore.saveConnection(editName.value, generalForm.value)
if (!success) {
message.error(msg)
$message.error(msg)
return
}
message.success(i18n.t('handle_succ'))
$message.success(i18n.t('handle_succ'))
onClose()
}

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

@ -1,7 +1,6 @@
<script setup>
import { reactive, watch } from 'vue'
import useDialog from 'stores/dialog'
import { useMessage } from '@/utils/message.js'
import { useI18n } from 'vue-i18n'
import useConnectionStore from 'stores/connections.js'
import { isEmpty, size } from 'lodash'
@ -49,16 +48,15 @@ const resetAffected = () => {
}
const i18n = useI18n()
const message = useMessage()
const onConfirmDelete = async () => {
try {
const { server, db, key } = deleteForm
const success = await connectionStore.deleteKeyPrefix(server, db, key)
if (success) {
message.success(i18n.t('handle_succ'))
$message.success(i18n.t('handle_succ'))
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
}
dialogStore.closeDeleteKeyDialog()
}

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

@ -1,7 +1,6 @@
<script setup>
import { computed, reactive, ref, watch } from 'vue'
import useDialog from 'stores/dialog'
import { useMessage } from '@/utils/message.js'
import { useI18n } from 'vue-i18n'
import useConnectionStore from 'stores/connections.js'
import { isEmpty } from 'lodash'
@ -29,27 +28,26 @@ watch(
)
const i18n = useI18n()
const message = useMessage()
const onConfirm = async () => {
try {
const { name } = groupForm
if (isRenameMode.value) {
const { success, msg } = await connectionStore.renameGroup(editGroup.value, name)
if (success) {
message.success(i18n.t('handle_succ'))
$message.success(i18n.t('handle_succ'))
} else {
message.error(msg)
$message.error(msg)
}
} else {
const { success, msg } = await connectionStore.createGroup(name)
if (success) {
message.success(i18n.t('handle_succ'))
$message.success(i18n.t('handle_succ'))
} else {
message.error(msg)
$message.error(msg)
}
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
}
onClose()
}

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

@ -13,7 +13,6 @@ import useConnectionStore from 'stores/connections.js'
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({
@ -103,13 +102,12 @@ const renderTypeLabel = (option) => {
const connectionStore = useConnectionStore()
const tabStore = useTabStore()
const message = useMessage()
const onAdd = async () => {
await newFormRef.value?.validate().catch((err) => {
message.error(err.message)
$message.error(err.message)
})
if (subFormRef.value?.validate && !subFormRef.value?.validate()) {
message.error(i18n.t('spec_field_required', { key: i18n.t('element') }))
$message.error(i18n.t('spec_field_required', { key: i18n.t('element') }))
return false
}
try {
@ -124,7 +122,7 @@ const onAdd = async () => {
tabStore.setSelectedKeys(server, nodeKey)
connectionStore.loadKeyValue(server, db, key).then(() => {})
} else if (!isEmpty(msg)) {
message.error(msg)
$message.error(msg)
}
dialogStore.closeNewKeyDialog()
} catch (e) {}

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

@ -3,7 +3,6 @@ import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import useDialog from 'stores/dialog'
import usePreferencesStore from 'stores/preferences.js'
import { useMessage } from '@/utils/message.js'
const prefStore = usePreferencesStore()
@ -11,7 +10,6 @@ const prevPreferences = ref({})
const tab = ref('general')
const dialogStore = useDialog()
const i18n = useI18n()
const message = useMessage()
const loading = ref(false)
const initPreferences = async () => {
@ -41,7 +39,7 @@ watch(
const onSavePreferences = async () => {
const success = await prefStore.savePreferences()
if (success) {
message.success(i18n.t('handle_succ'))
$message.success(i18n.t('handle_succ'))
dialogStore.closePreferencesDialog()
}
}

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

@ -1,7 +1,6 @@
<script setup>
import { reactive, watch } from 'vue'
import useDialog from 'stores/dialog'
import { useMessage } from '@/utils/message.js'
import { useI18n } from 'vue-i18n'
import useConnectionStore from 'stores/connections.js'
@ -28,19 +27,18 @@ watch(
)
const i18n = useI18n()
const message = useMessage()
const onRename = async () => {
try {
const { server, db, key, newKey } = renameForm
const { success, msg } = await connectionStore.renameKey(server, db, key, newKey)
if (success) {
await connectionStore.loadKeyValue(server, db, newKey)
message.success(i18n.t('handle_succ'))
$message.success(i18n.t('handle_succ'))
} else {
message.error(msg)
$message.error(msg)
}
} catch (e) {
message.error(e.message)
$message.error(e.message)
}
dialogStore.closeRenameKeyDialog()
}

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

@ -15,7 +15,6 @@ import Connect from '@/components/icons/Connect.vue'
import useDialogStore from 'stores/dialog.js'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
import useConnectionStore from 'stores/connections.js'
import { useConfirmDialog } from '@/utils/confirm_dialog.js'
import ToggleServer from '@/components/icons/ToggleServer.vue'
import Unlink from '@/components/icons/Unlink.vue'
import Filter from '@/components/icons/Filter.vue'
@ -23,7 +22,6 @@ 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,
@ -219,7 +217,6 @@ const expandKey = (key) => {
}
}
const confirmDialog = useConfirmDialog()
const handleSelectContextMenu = (key) => {
contextMenuParam.show = false
const selectedKey = get(selectedKeys.value, 0)
@ -233,7 +230,7 @@ const handleSelectContextMenu = (key) => {
expandedKeys.value = [props.server]
tabStore.setSelectedKeys(props.server)
connectionStore.openConnection(props.server, true).then(() => {
message.success(i18n.t('reload_succ'))
$message.success(i18n.t('reload_succ'))
})
break
case 'server_close':
@ -267,10 +264,10 @@ const handleSelectContextMenu = (key) => {
dialogStore.openDeleteKeyDialog(props.server, db, isEmpty(redisKey) ? '*' : redisKey + ':*')
break
case 'value_remove':
confirmDialog.warning(i18n.t('remove_tip', { name: redisKey }), () => {
$dialog.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 }))
$message.success(i18n.t('delete_key_succ', { key: redisKey }))
}
})
})
@ -280,11 +277,11 @@ const handleSelectContextMenu = (key) => {
ClipboardSetText(redisKey)
.then((succ) => {
if (succ) {
message.success(i18n.t('copy_succ'))
$message.success(i18n.t('copy_succ'))
}
})
.catch((e) => {
message.error(e.message)
$message.error(e.message)
})
break
default:
@ -295,7 +292,6 @@ defineExpose({
handleSelectContextMenu,
})
const message = useMessage()
const dialog = useDialog()
const onUpdateExpanded = (value, option, meta) => {
expandedKeys.value = value
@ -566,7 +562,7 @@ const onLoadTree = async (node) => {
try {
await connectionStore.openDatabase(props.server, node.db)
} catch (e) {
message.error(e.message)
$message.error(e.message)
node.isLeaf = undefined
} finally {
loading.value = false

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

@ -15,8 +15,6 @@ import Connect from '@/components/icons/Connect.vue'
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()
@ -24,7 +22,6 @@ const openingConnection = ref(false)
const connectionStore = useConnectionStore()
const tabStore = useTabStore()
const dialogStore = useDialogStore()
const message = useMessage()
const expandedKeys = ref([])
const selectedKeys = ref([])
@ -187,7 +184,7 @@ const openConnection = async (name) => {
server: name,
})
} catch (e) {
message.error(e.message)
$message.error(e.message)
// node.isLeaf = undefined
} finally {
openingConnection.value = false
@ -196,21 +193,20 @@ const openConnection = async (name) => {
const dialog = useDialog()
const removeConnection = (name) => {
confirmDialog.warning(i18n.t('remove_tip', { type: i18n.t('conn_name'), name }), async () => {
$dialog.warning(i18n.t('remove_tip', { type: i18n.t('conn_name'), name }), async () => {
connectionStore.deleteConnection(name).then(({ success, msg }) => {
if (!success) {
message.error(msg)
$message.error(msg)
}
})
})
}
const confirmDialog = useConfirmDialog()
const removeGroup = async (name) => {
confirmDialog.warning(i18n.t('remove_tip', { type: i18n.t('conn_group'), name }), async () => {
$dialog.warning(i18n.t('remove_tip', { type: i18n.t('conn_group'), name }), async () => {
connectionStore.deleteGroup(name).then(({ success, msg }) => {
if (!success) {
message.error(msg)
$message.error(msg)
}
})
})
@ -268,7 +264,7 @@ const handleSelectContextMenu = (key) => {
case 'server_edit':
// ask for close relevant connections before edit
if (connectionStore.isConnected(name)) {
confirmDialog.warning(i18n.t('edit_close_confirm'), () => {
$dialog.warning(i18n.t('edit_close_confirm'), () => {
connectionStore.closeConnection(name)
dialogStore.openEditDialog(name)
})

10
frontend/src/main.js
View File

@ -6,11 +6,21 @@ import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import relativeTime from 'dayjs/plugin/relativeTime'
import { i18n } from '@/utils/i18n.js'
import { setupDiscreteApi } from '@/utils/discrete.js'
import usePreferencesStore from 'stores/preferences.js'
dayjs.extend(duration)
dayjs.extend(relativeTime)
async function setupApp() {
const app = createApp(App)
app.use(i18n)
app.use(createPinia())
const prefStore = usePreferencesStore()
await prefStore.loadPreferences()
await setupDiscreteApi()
app.mount('#app')
}
setupApp()

24
frontend/src/stores/preferences.js
View File

@ -7,11 +7,11 @@ import {
RestorePreferences,
SetPreferences,
} from 'wailsjs/go/services/preferencesService.js'
import { useMessage } from '@/utils/message.js'
import { useConfirmDialog } from '@/utils/confirm_dialog.js'
import { BrowserOpenURL } from 'wailsjs/runtime/runtime.js'
import { i18nGlobal } from '@/utils/i18n.js'
import { useOsTheme } from 'naive-ui'
const osTheme = useOsTheme()
const usePreferencesStore = defineStore('preferences', {
/**
* @typedef {Object} FontItem
@ -132,6 +132,18 @@ const usePreferencesStore = defineStore('preferences', {
return lang || 'en'
},
isDark() {
const th = get(this.general, 'theme', 'auto')
if (th === 'auto') {
if (osTheme.value === 'dark') {
return true
}
} else if (th === 'dark') {
return true
}
return false
},
autoCheckUpdate() {
return get(this.general, 'checkUpdate', false)
},
@ -222,11 +234,9 @@ const usePreferencesStore = defineStore('preferences', {
},
async checkForUpdate(manual = false) {
const message = useMessage()
const confirmDialog = useConfirmDialog()
let msgRef = null
if (manual) {
msgRef = message.loading('Retrieving for new version', { duration: 0 })
msgRef = $message.loading('Retrieving for new version', { duration: 0 })
}
let respObj = null
try {
@ -243,12 +253,12 @@ const usePreferencesStore = defineStore('preferences', {
// TODO: check current version is older then remote
if (respObj != null && !isEmpty(respObj['html_url'])) {
confirmDialog.warning(i18nGlobal.t('new_version_tip'), () => {
$dialog.warning(i18nGlobal.t('new_version_tip'), () => {
BrowserOpenURL(respObj['html_url'])
})
} else {
if (manual) {
message.info(i18nGlobal.t('no_update'))
$message.info(i18nGlobal.t('no_update'))
}
}
},

28
frontend/src/utils/confirm_dialog.js
View File

@ -1,28 +0,0 @@
import { createDiscreteApi } from 'naive-ui'
import { i18nGlobal } from '@/utils/i18n.js'
import { themeOverrides } from '@/utils/theme.js'
const { dialog } = createDiscreteApi(['dialog'], {
configProviderProps: {
themeOverrides,
},
})
export function useConfirmDialog() {
return {
warning: (content, onConfirm) => {
dialog.warning({
title: i18nGlobal.t('warning'),
content: content,
closable: false,
autoFocus: false,
transformOrigin: 'center',
positiveText: i18nGlobal.t('confirm'),
negativeText: i18nGlobal.t('cancel'),
onPositiveClick: () => {
onConfirm && onConfirm()
},
})
},
}
}

60
frontend/src/utils/discrete.js Normal file
View File

@ -0,0 +1,60 @@
import usePreferencesStore from 'stores/preferences.js'
import { createDiscreteApi, darkTheme } from 'naive-ui'
import { themeOverrides } from '@/utils/theme.js'
import { i18nGlobal } from '@/utils/i18n.js'
import { computed } from 'vue'
function setupMessage(message) {
return {
error: (content, option = null) => {
return message.error(content, option)
},
info: (content, option = null) => {
return message.info(content, option)
},
loading: (content, option = null) => {
return message.loading(content, option)
},
success: (content, option = null) => {
return message.success(content, option)
},
warning: (content, option = null) => {
return message.warning(content, option)
},
}
}
function setupDialog(dialog) {
return {
warning: (content, onConfirm) => {
return dialog.warning({
title: i18nGlobal.t('warning'),
content: content,
closable: false,
autoFocus: false,
transformOrigin: 'center',
positiveText: i18nGlobal.t('confirm'),
negativeText: i18nGlobal.t('cancel'),
onPositiveClick: () => {
onConfirm && onConfirm()
},
})
},
}
}
/**
* setup discrete api and bind global component (like dialog, message, alert) to window
* @return {Promise<void>}
*/
export async function setupDiscreteApi() {
const prefStore = usePreferencesStore()
const configProviderProps = computed(() => ({
theme: prefStore.isDark ? darkTheme : undefined,
themeOverrides,
}))
const { message, dialog } = createDiscreteApi(['message', 'dialog'], { configProviderProps })
window.$message = setupMessage(message)
window.$dialog = setupDialog(dialog)
}

28
frontend/src/utils/message.js
View File

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