diff --git a/backend/types/preferences.go b/backend/types/preferences.go index 40d5430..4510ed8 100644 --- a/backend/types/preferences.go +++ b/backend/types/preferences.go @@ -27,11 +27,12 @@ func NewPreferences() Preferences { AllowTrack: true, }, Editor: PreferencesEditor{ - FontSize: consts.DEFAULT_FONT_SIZE, - ShowLineNum: true, - ShowFolding: true, - DropText: true, - Links: true, + FontSize: consts.DEFAULT_FONT_SIZE, + ShowLineNum: true, + ShowFolding: true, + DropText: true, + Links: true, + EntryTextAlign: 0, }, Cli: PreferencesCli{ FontSize: consts.DEFAULT_FONT_SIZE, @@ -67,13 +68,14 @@ type PreferencesGeneral struct { } type PreferencesEditor struct { - Font string `json:"font" yaml:"font,omitempty"` - FontFamily []string `json:"fontFamily" yaml:"font_family,omitempty"` - FontSize int `json:"fontSize" yaml:"font_size"` - ShowLineNum bool `json:"showLineNum" yaml:"show_line_num"` - ShowFolding bool `json:"showFolding" yaml:"show_folding"` - DropText bool `json:"dropText" yaml:"drop_text"` - Links bool `json:"links" yaml:"links"` + Font string `json:"font" yaml:"font,omitempty"` + FontFamily []string `json:"fontFamily" yaml:"font_family,omitempty"` + FontSize int `json:"fontSize" yaml:"font_size"` + ShowLineNum bool `json:"showLineNum" yaml:"show_line_num"` + ShowFolding bool `json:"showFolding" yaml:"show_folding"` + DropText bool `json:"dropText" yaml:"drop_text"` + Links bool `json:"links" yaml:"links"` + EntryTextAlign int `json:"entryTextAlign" yaml:"entry_text_align"` } type PreferencesCli struct { diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue index 7d815bf..c7f9b9c 100644 --- a/frontend/src/components/content_value/ContentValueHash.vue +++ b/frontend/src/components/content_value/ContentValueHash.vue @@ -19,6 +19,10 @@ import { decodeRedisKey } from '@/utils/key_convert.js' import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue' import { formatBytes } from '@/utils/byte_convert.js' import copy from 'copy-text-to-clipboard' +import SwitchButton from '@/components/common/SwitchButton.vue' +import AlignLeft from '@/components/icons/AlignLeft.vue' +import AlignCenter from '@/components/icons/AlignCenter.vue' +import { TextAlignType } from '@/consts/text_align_type.js' const i18n = useI18n() const themeVars = useThemeVars() @@ -45,9 +49,10 @@ const props = defineProps({ decode: String, end: Boolean, loading: Boolean, + textAlign: Number, }) -const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match']) +const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match', 'update:textAlign']) /** * @@ -78,7 +83,7 @@ const fieldFilterOption = ref(null) const fieldColumn = computed(() => ({ key: 'key', title: () => i18n.t('common.field'), - align: 'center', + align: props.textAlign !== TextAlignType.Left ? 'center' : 'left', titleAlign: 'center', resizable: true, ellipsis: { @@ -111,7 +116,7 @@ const isCode = computed(() => { const valueColumn = computed(() => ({ key: 'value', title: () => i18n.t('common.value'), - align: isCode.value ? 'left' : 'center', + align: isCode.value ? 'left' : props.textAlign !== TextAlignType.Left ? 'center' : 'left', titleAlign: 'center', resizable: true, ellipsis: isCode.value @@ -264,7 +269,7 @@ const columns = computed(() => { key: 'no', title: '#', width: 80, - align: 'center', + align: props.textAlign !== TextAlignType.Left ? 'center' : 'left', titleAlign: 'center', render: (row, index) => { return index + 1 @@ -280,7 +285,7 @@ const columns = computed(() => { key: 'no', title: '#', width: 80, - align: 'center', + align: props.textAlign !== TextAlignType.Left ? 'center' : 'left', titleAlign: 'center', render: (row, index) => { if (index + 1 === currentEditRow.no) { @@ -442,6 +447,13 @@ defineExpose({ {{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}
+ ({ key: 'value', title: () => i18n.t('common.value'), - align: isCode.value ? 'left' : 'center', + align: isCode.value ? 'left' : props.textAlign !== TextAlignType.Left ? 'center' : 'left', titleAlign: 'center', ellipsis: isCode.value ? false @@ -214,7 +219,7 @@ const columns = computed(() => { key: 'no', title: '#', width: 80, - align: 'center', + align: props.textAlign !== TextAlignType.Left ? 'center' : 'left', titleAlign: 'center', render: (row, index) => { return index + 1 @@ -229,7 +234,7 @@ const columns = computed(() => { key: 'no', title: '#', width: 80, - align: 'center', + align: props.textAlign !== TextAlignType.Left ? 'center' : 'left', titleAlign: 'center', render: (row, index) => { if (index + 1 === currentEditRow.no) { @@ -391,6 +396,13 @@ defineExpose({ {{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}
+ ({ key: 'value', title: () => i18n.t('common.value'), - align: isCode.value ? 'left' : 'center', + align: isCode.value ? 'left' : props.textAlign !== TextAlignType.Left ? 'center' : 'left', titleAlign: 'center', ellipsis: isCode.value ? false @@ -211,7 +216,7 @@ const columns = computed(() => { key: 'no', title: '#', width: 80, - align: 'center', + align: props.textAlign !== TextAlignType.Left ? 'center' : 'left', titleAlign: 'center', render: (row, index) => { return index + 1 @@ -226,7 +231,7 @@ const columns = computed(() => { key: 'no', title: '#', width: 80, - align: 'center', + align: props.textAlign !== TextAlignType.Left ? 'center' : 'left', titleAlign: 'center', render: (row, index) => { if (index + 1 === currentEditRow.no) { @@ -388,6 +393,13 @@ defineExpose({ {{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}
+ { loadData(true, false, match || '') } +const onEntryTextAlignChanged = (align) => { + prefStore.editor.entryTextAlign = align !== TextAlignType.Left ? TextAlignType.Center : TextAlignType.Left + prefStore.savePreferences() +} + const contentRef = ref(null) const initContent = async () => { // onReload() @@ -225,12 +233,14 @@ watch(() => data.value?.keyPath, initContent) :ttl="data.ttl" :value="data.value" tabindex="0" + :text-align="prefStore.entryTextAlign" @delete="onDelete" @keydown="onKeyShortcut" @loadall="onLoadAll" @loadmore="onLoadMore" @match="onMatch" - @reload="onReload"> + @reload="onReload" + @update:text-align="onEntryTextAlignChanged">