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

pref: support text alignment config for HASH/LIST/SET/ZSET (#264)

This commit is contained in:
Lykin 2024-07-26 17:19:28 +08:00
parent ee398d4d98
commit 5deb6ce443
19 changed files with 201 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
backend/types/preferences.go
View File

@ -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 {

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

@ -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({
<n-divider v-if="showMemoryUsage" vertical />
<n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}</n-text>
<div class="flex-item-expand"></div>
<switch-button
:icons="[AlignCenter, AlignLeft]"
:stroke-width="3.5"
:t-tooltips="['interface.text_align_center', 'interface.text_align_left']"
:value="props.textAlign"
unselect-stroke-width="3"
@update:value="(val) => emit('update:textAlign', val)" />
<format-selector
v-show="!inEdit"
:decode="props.decode"

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

@ -18,6 +18,10 @@ import Edit from '@/components/icons/Edit.vue'
import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
import { formatBytes } from '@/utils/byte_convert.js'
import copy from 'copy-text-to-clipboard'
import { TextAlignType } from '@/consts/text_align_type.js'
import AlignLeft from '@/components/icons/AlignLeft.vue'
import AlignCenter from '@/components/icons/AlignCenter.vue'
import SwitchButton from '@/components/common/SwitchButton.vue'
const i18n = useI18n()
const themeVars = useThemeVars()
@ -51,9 +55,10 @@ const props = defineProps({
},
end: Boolean,
loading: Boolean,
textAlign: Number,
})
const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match'])
const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match', 'update:textAlign'])
/**
*
@ -84,7 +89,7 @@ const valueFilterOption = ref(null)
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',
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({
<n-divider v-if="showMemoryUsage" vertical />
<n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}</n-text>
<div class="flex-item-expand"></div>
<switch-button
:icons="[AlignCenter, AlignLeft]"
:stroke-width="3.5"
:t-tooltips="['interface.text_align_center', 'interface.text_align_left']"
:value="props.textAlign"
unselect-stroke-width="3"
@update:value="(val) => emit('update:textAlign', val)" />
<format-selector
v-show="!inEdit"
:decode="props.decode"

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

@ -18,6 +18,10 @@ import FormatSelector from '@/components/content_value/FormatSelector.vue'
import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
import { formatBytes } from '@/utils/byte_convert.js'
import copy from 'copy-text-to-clipboard'
import AlignLeft from '@/components/icons/AlignLeft.vue'
import AlignCenter from '@/components/icons/AlignCenter.vue'
import SwitchButton from '@/components/common/SwitchButton.vue'
import { TextAlignType } from '@/consts/text_align_type.js'
const i18n = useI18n()
const themeVars = useThemeVars()
@ -50,9 +54,10 @@ const props = defineProps({
},
end: Boolean,
loading: Boolean,
textAlign: Number,
})
const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match'])
const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match', 'update:textAlign'])
/**
*
@ -83,7 +88,7 @@ const valueFilterOption = ref(null)
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',
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({
<n-divider v-if="showMemoryUsage" vertical />
<n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}</n-text>
<div class="flex-item-expand"></div>
<switch-button
:icons="[AlignCenter, AlignLeft]"
:stroke-width="3.5"
:t-tooltips="['interface.text_align_center', 'interface.text_align_left']"
:value="props.textAlign"
unselect-stroke-width="3"
@update:value="(val) => emit('update:textAlign', val)" />
<format-selector
v-show="!inEdit"
:decode="props.decode"

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

@ -14,10 +14,13 @@ import useDialogStore from 'stores/dialog.js'
import { useI18n } from 'vue-i18n'
import ContentToolbar from '@/components/content_value/ContentToolbar.vue'
import ContentValueJson from '@/components/content_value/ContentValueJson.vue'
import usePreferencesStore from 'stores/preferences.js'
import { TextAlignType } from '@/consts/text_align_type.js'
const themeVars = useThemeVars()
const browserStore = useBrowserStore()
const dialogStore = useDialogStore()
const prefStore = usePreferencesStore()
const props = defineProps({
blank: Boolean,
@ -178,6 +181,11 @@ const onMatch = (match) => {
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">
<template #toolbar>
<content-toolbar
:db="data.db"

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

@ -18,6 +18,10 @@ import Edit from '@/components/icons/Edit.vue'
import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
import { formatBytes } from '@/utils/byte_convert.js'
import copy from 'copy-text-to-clipboard'
import { TextAlignType } from '@/consts/text_align_type.js'
import AlignLeft from '@/components/icons/AlignLeft.vue'
import AlignCenter from '@/components/icons/AlignCenter.vue'
import SwitchButton from '@/components/common/SwitchButton.vue'
const i18n = useI18n()
const themeVars = useThemeVars()
@ -50,9 +54,10 @@ const props = defineProps({
},
end: Boolean,
loading: Boolean,
textAlign: Number,
})
const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match'])
const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match', 'update:textAlign'])
/**
*
@ -82,7 +87,7 @@ const fullEdit = ref(false)
const scoreColumn = computed(() => ({
key: 'score',
title: () => i18n.t('common.score'),
align: 'center',
align: props.textAlign !== TextAlignType.Left ? 'center' : 'left',
titleAlign: 'center',
resizable: true,
sorter: (row1, row2) => row1.s - row2.s,
@ -131,7 +136,7 @@ const valueFilterOption = ref(null)
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
@ -256,7 +261,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
@ -272,7 +277,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) {
@ -421,6 +426,13 @@ defineExpose({
<n-divider v-if="showMemoryUsage" vertical />
<n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}</n-text>
<div class="flex-item-expand"></div>
<switch-button
:icons="[AlignCenter, AlignLeft]"
:stroke-width="3.5"
:t-tooltips="['interface.text_align_center', 'interface.text_align_left']"
:value="props.textAlign"
unselect-stroke-width="3"
@update:value="(val) => emit('update:textAlign', val)" />
<format-selector
v-show="!inEdit"
:decode="props.decode"

39
frontend/src/components/icons/AlignCenter.vue Normal file
View File

@ -0,0 +1,39 @@
<script setup>
const props = defineProps({
strokeWidth: {
type: [Number, String],
default: 3,
},
})
</script>
<template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path
:stroke-width="props.strokeWidth"
d="M36 19H12"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M42 9H6"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M42 29H6"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M36 39H12"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</template>
<style lang="scss" scoped></style>

39
frontend/src/components/icons/AlignLeft.vue Normal file
View File

@ -0,0 +1,39 @@
<script setup>
const props = defineProps({
strokeWidth: {
type: [Number, String],
default: 3,
},
})
</script>
<template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path
:stroke-width="props.strokeWidth"
d="M42 9H6"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M34 19H6"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M42 29H6"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M34 39H6"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</template>
<style lang="scss" scoped></style>

8
frontend/src/consts/text_align_type.js Normal file
View File

@ -0,0 +1,8 @@
/**
* all types of text alignment
* @enum {number}
*/
export const TextAlignType = {
Center: 0,
Left: 1,
}

2
frontend/src/langs/en-us.json
View File

@ -126,6 +126,8 @@
"length": "Length",
"entries": "Entries",
"memory_usage": "Memory Usage",
"text_align_left": "Text Align Left",
"text_align_center": "Text Align Center",
"view_as": "View As",
"decode_with": "Decode / Decompress",
"custom_decoder": "New Custom Decoder",

2
frontend/src/langs/es-es.json
View File

@ -126,6 +126,8 @@
"length": "Longitud",
"entries": "Entradas",
"memory_usage": "Uso de memoria",
"text_align_left": "Alinear a la izquierda",
"text_align_center": "Centrar",
"view_as": "Ver como",
"decode_with": "Decodificar / Descomprimir",
"custom_decoder": "Nuevo decodificador personalizado",

2
frontend/src/langs/fr-fr.json
View File

@ -126,6 +126,8 @@
"length": "Longueur",
"entries": "Entrées",
"memory_usage": "Utilisation de la mémoire",
"text_align_left": "Aligner à gauche",
"text_align_center": "Centrer",
"view_as": "Voir comme",
"decode_with": "Décoder / Décompresser",
"custom_decoder": "Nouveau décodeur personnalisé",

2
frontend/src/langs/ja-jp.json
View File

@ -126,6 +126,8 @@
"length": "長さ",
"entries": "エントリ",
"memory_usage": "メモリ使用量",
"text_align_left": "左揃え",
"text_align_center": "中央揃え",
"view_as": "表示形式",
"decode_with": "デコード/解凍",
"custom_decoder": "新しいカスタムデコーダー",

2
frontend/src/langs/ko-kr.json
View File

@ -126,6 +126,8 @@
"length": "길이",
"entries": "항목 수",
"memory_usage": "메모리 사용량",
"text_align_left": "텍스트 왼쪽 정렬",
"text_align_center": "텍스트 가운데 정렬",
"view_as": "보기",
"decode_with": "디코딩/압축 해제",
"custom_decoder": "새 사용자 정의 디코더",

2
frontend/src/langs/pt-br.json
View File

@ -126,6 +126,8 @@
"length": "Tamanho",
"entries": "Entradas",
"memory_usage": "Uso de Memória",
"text_align_left": "Alinhar à esquerda",
"text_align_center": "Centralizar",
"view_as": "Visualizar Como",
"decode_with": "Decodificar / Descompressão",
"custom_decoder": "Novo Decodificador Personalizado",

2
frontend/src/langs/ru-ru.json
View File

@ -126,6 +126,8 @@
"length": "Длина",
"entries": "Записи",
"memory_usage": "Использование памяти",
"text_align_left": "Выравнивание по левому краю",
"text_align_center": "Выравнивание по центру",
"view_as": "Вид",
"decode_with": "Декодировать/Распаковать",
"custom_decoder": "Новый пользовательский декодер",

2
frontend/src/langs/zh-cn.json
View File

@ -126,6 +126,8 @@
"length": "长度",
"entries": "条目",
"memory_usage": "内存占用",
"text_align_left": "文本居左",
"text_align_center": "文本居中",
"view_as": "查看方式",
"decode_with": "解码/解压方式",
"custom_decoder": "添加自定义解码",

2
frontend/src/langs/zh-tw.json
View File

@ -126,6 +126,8 @@
"length": "長度",
"entries": "條目",
"memory_usage": "記憶體使用量",
"text_align_left": "文字靠左",
"text_align_center": "文字置中",
"view_as": "檢視方式",
"decode_with": "解碼/解壓方式",
"custom_decoder": "新增自定義解碼",

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

@ -15,6 +15,7 @@ import { enUS, NButton, NSpace, useOsTheme, zhCN } from 'naive-ui'
import { h, nextTick } from 'vue'
import { compareVersion } from '@/utils/version.js'
import { typesIconStyle } from '@/consts/support_redis_type.js'
import { TextAlignType } from '@/consts/text_align_type.js'
const osTheme = useOsTheme()
const usePreferencesStore = defineStore('preferences', {
@ -63,6 +64,7 @@ const usePreferencesStore = defineStore('preferences', {
showFolding: true,
dropText: true,
links: true,
entryTextAlign: TextAlignType.Center,
},
cli: {
fontFamily: [],
@ -271,6 +273,10 @@ const usePreferencesStore = defineStore('preferences', {
keyIconType() {
return get(this.general, 'keyIconStyle', typesIconStyle.SHORT)
},
entryTextAlign() {
return get(this.editor, 'entryTextAlign', TextAlignType.Center)
},
},
actions: {
_applyPreferences(data) {