perf: add copy value button for complex type #23

This commit is contained in:
Lykin 2023-12-02 00:58:15 +08:00
parent 988e8e3339
commit 2d3225dbcf
12 changed files with 79 additions and 36 deletions

View File

@ -4,6 +4,7 @@ import Delete from '@/components/icons/Delete.vue'
import Edit from '@/components/icons/Edit.vue' import Edit from '@/components/icons/Edit.vue'
import Close from '@/components/icons/Close.vue' import Close from '@/components/icons/Close.vue'
import Save from '@/components/icons/Save.vue' import Save from '@/components/icons/Save.vue'
import Copy from '@/components/icons/Copy.vue'
const props = defineProps({ const props = defineProps({
bindKey: String, bindKey: String,
@ -11,7 +12,7 @@ const props = defineProps({
readonly: Boolean, readonly: Boolean,
}) })
const emit = defineEmits(['edit', 'delete', 'save', 'cancel']) const emit = defineEmits(['edit', 'delete', 'copy', 'save', 'cancel'])
</script> </script>
<template> <template>
@ -21,13 +22,14 @@ const emit = defineEmits(['edit', 'delete', 'save', 'cancel'])
<icon-button :icon="Close" @click="emit('cancel')" /> <icon-button :icon="Close" @click="emit('cancel')" />
</div> </div>
<div v-else class="flex-box-h edit-column-func"> <div v-else class="flex-box-h edit-column-func">
<icon-button v-if="!props.readonly" :icon="Edit" @click="emit('edit')" /> <icon-button :icon="Copy" :title="$t('interface.copy_value')" @click="emit('copy')" />
<icon-button v-if="!props.readonly" :icon="Edit" :title="$t('interface.edit_row')" @click="emit('edit')" />
<n-popconfirm <n-popconfirm
:negative-text="$t('common.cancel')" :negative-text="$t('common.cancel')"
:positive-text="$t('common.confirm')" :positive-text="$t('common.confirm')"
@positive-click="emit('delete')"> @positive-click="emit('delete')">
<template #trigger> <template #trigger>
<icon-button :icon="Delete" /> <icon-button :icon="Delete" :title="$t('interface.delete_row')" />
</template> </template>
{{ $t('dialogue.remove_tip', { name: props.bindKey }) }} {{ $t('dialogue.remove_tip', { name: props.bindKey }) }}
</n-popconfirm> </n-popconfirm>

View File

@ -65,7 +65,7 @@ const onCopyKey = () => {
ClipboardSetText(props.keyPath) ClipboardSetText(props.keyPath)
.then((succ) => { .then((succ) => {
if (succ) { if (succ) {
$message.success(i18n.t('dialogue.copy_succ')) $message.success(i18n.t('interface.copy_succ'))
} }
}) })
.catch((e) => { .catch((e) => {

View File

@ -19,6 +19,7 @@ import Edit from '@/components/icons/Edit.vue'
import FormatSelector from '@/components/content_value/FormatSelector.vue' import FormatSelector from '@/components/content_value/FormatSelector.vue'
import { decodeRedisKey } from '@/utils/key_convert.js' import { decodeRedisKey } from '@/utils/key_convert.js'
import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue' import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
const i18n = useI18n() const i18n = useI18n()
const themeVars = useThemeVars() const themeVars = useThemeVars()
@ -163,7 +164,7 @@ const saveEdit = async (field, value, decode, format) => {
}) })
if (success) { if (success) {
currentEditRow.value = value currentEditRow.value = value
$message.success(i18n.t('dialogue.save_value_succ')) $message.success(i18n.t('interface.save_value_succ'))
} else { } else {
$message.error(msg) $message.error(msg)
} }
@ -183,7 +184,7 @@ const resetEdit = () => {
const actionColumn = { const actionColumn = {
key: 'action', key: 'action',
title: i18n.t('interface.action'), title: i18n.t('interface.action'),
width: 100, width: 120,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
fixed: 'right', fixed: 'right',
@ -191,6 +192,16 @@ const actionColumn = {
return h(EditableTableColumn, { return h(EditableTableColumn, {
editing: false, editing: false,
bindKey: row.k, bindKey: row.k,
onCopy: async () => {
try {
const succ = await ClipboardSetText(row.v)
if (succ) {
$message.success(i18n.t('interface.copy_succ'))
}
} catch (e) {
$message.error(e.message)
}
},
onEdit: () => startEdit(index + 1, row.k, row.v), onEdit: () => startEdit(index + 1, row.k, row.v),
onDelete: async () => { onDelete: async () => {
try { try {

View File

@ -18,6 +18,7 @@ import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vu
import FormatSelector from '@/components/content_value/FormatSelector.vue' import FormatSelector from '@/components/content_value/FormatSelector.vue'
import Edit from '@/components/icons/Edit.vue' import Edit from '@/components/icons/Edit.vue'
import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue' import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
const i18n = useI18n() const i18n = useI18n()
const themeVars = useThemeVars() const themeVars = useThemeVars()
@ -142,7 +143,7 @@ const saveEdit = async (pos, value, decode, format) => {
format, format,
}) })
if (success) { if (success) {
$message.success(i18n.t('dialogue.save_value_succ')) $message.success(i18n.t('interface.save_value_succ'))
} else { } else {
$message.error(msg) $message.error(msg)
} }
@ -159,7 +160,7 @@ const resetEdit = () => {
const actionColumn = { const actionColumn = {
key: 'action', key: 'action',
title: i18n.t('interface.action'), title: i18n.t('interface.action'),
width: 100, width: 120,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
fixed: 'right', fixed: 'right',
@ -167,6 +168,16 @@ const actionColumn = {
return h(EditableTableColumn, { return h(EditableTableColumn, {
editing: false, editing: false,
bindKey: `#${index + 1}`, bindKey: `#${index + 1}`,
onCopy: async () => {
try {
const succ = await ClipboardSetText(row.v)
if (succ) {
$message.success(i18n.t('interface.copy_succ'))
}
} catch (e) {
$message.error(e.message)
}
},
onEdit: () => { onEdit: () => {
startEdit(index + 1, row.v) startEdit(index + 1, row.v)
}, },

View File

@ -18,6 +18,7 @@ import Edit from '@/components/icons/Edit.vue'
import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue' import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vue'
import FormatSelector from '@/components/content_value/FormatSelector.vue' import FormatSelector from '@/components/content_value/FormatSelector.vue'
import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue' import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
const i18n = useI18n() const i18n = useI18n()
const themeVars = useThemeVars() const themeVars = useThemeVars()
@ -139,7 +140,7 @@ const saveEdit = async (pos, value, decode, format) => {
retFormat: props.format, retFormat: props.format,
}) })
if (success) { if (success) {
$message.success(i18n.t('dialogue.save_value_succ')) $message.success(i18n.t('interface.save_value_succ'))
} else { } else {
$message.error(msg) $message.error(msg)
} }
@ -156,7 +157,7 @@ const resetEdit = () => {
const actionColumn = { const actionColumn = {
key: 'action', key: 'action',
title: i18n.t('interface.action'), title: i18n.t('interface.action'),
width: 100, width: 120,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
fixed: 'right', fixed: 'right',
@ -164,6 +165,16 @@ const actionColumn = {
return h(EditableTableColumn, { return h(EditableTableColumn, {
editing: false, editing: false,
bindKey: `#${index + 1}`, bindKey: `#${index + 1}`,
onCopy: async () => {
try {
const succ = await ClipboardSetText(row.v)
if (succ) {
$message.success(i18n.t('interface.copy_succ'))
}
} catch (e) {
$message.error(e.message)
}
},
onEdit: () => { onEdit: () => {
startEdit(index + 1, row.v) startEdit(index + 1, row.v)
}, },

View File

@ -15,6 +15,7 @@ import LoadList from '@/components/icons/LoadList.vue'
import LoadAll from '@/components/icons/LoadAll.vue' import LoadAll from '@/components/icons/LoadAll.vue'
import IconButton from '@/components/common/IconButton.vue' import IconButton from '@/components/common/IconButton.vue'
import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue' import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
const i18n = useI18n() const i18n = useI18n()
const themeVars = useThemeVars() const themeVars = useThemeVars()
@ -99,7 +100,7 @@ const valueColumn = computed(() => ({
const actionColumn = { const actionColumn = {
key: 'action', key: 'action',
title: i18n.t('interface.action'), title: i18n.t('interface.action'),
width: 60, width: 80,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
fixed: 'right', fixed: 'right',
@ -107,6 +108,16 @@ const actionColumn = {
return h(EditableTableColumn, { return h(EditableTableColumn, {
bindKey: row.id, bindKey: row.id,
readonly: true, readonly: true,
onCopy: async () => {
try {
const succ = await ClipboardSetText(JSON.stringify(row.v))
if (succ) {
$message.success(i18n.t('interface.copy_succ'))
}
} catch (e) {
$message.error(e.message)
}
},
onDelete: async () => { onDelete: async () => {
try { try {
const { success, msg } = await browserStore.removeStreamValues( const { success, msg } = await browserStore.removeStreamValues(
@ -175,20 +186,6 @@ defineExpose({
@rename="emit('rename')" /> @rename="emit('rename')" />
<div class="tb2 value-item-part flex-box-h"> <div class="tb2 value-item-part flex-box-h">
<div class="flex-box-h"> <div class="flex-box-h">
<!-- <n-input-group>-->
<!-- <n-select-->
<!-- v-model:value="filterType"-->
<!-- :consistent-menu-width="false"-->
<!-- :options="filterOption"-->
<!-- style="width: 120px"-->
<!-- @update:value="onChangeFilterType" />-->
<!-- <n-input-->
<!-- v-model:value="filterValue"-->
<!-- :placeholder="$t('interface.search')"-->
<!-- clearable-->
<!-- @clear="clearFilter"-->
<!-- @update:value="onFilterInput" />-->
<!-- </n-input-group>-->
<content-search-input <content-search-input
ref="searchInputRef" ref="searchInputRef"
@filter-changed="onFilterInput" @filter-changed="onFilterInput"

View File

@ -111,7 +111,7 @@ const onCopyValue = () => {
ClipboardSetText(displayValue.value) ClipboardSetText(displayValue.value)
.then((succ) => { .then((succ) => {
if (succ) { if (succ) {
$message.success(i18n.t('dialogue.copy_succ')) $message.success(i18n.t('interface.copy_succ'))
} }
}) })
.catch((e) => { .catch((e) => {
@ -144,7 +144,7 @@ const onSave = async () => {
}) })
if (success) { if (success) {
// await browserStore.loadKeyDetail({ server: props.name, db: props.db, key: keyName.value }) // await browserStore.loadKeyDetail({ server: props.name, db: props.db, key: keyName.value })
$message.success(i18n.t('dialogue.save_value_succ')) $message.success(i18n.t('interface.save_value_succ'))
} else { } else {
$message.error(msg) $message.error(msg)
} }

View File

@ -18,6 +18,7 @@ import ContentEntryEditor from '@/components/content_value/ContentEntryEditor.vu
import FormatSelector from '@/components/content_value/FormatSelector.vue' import FormatSelector from '@/components/content_value/FormatSelector.vue'
import Edit from '@/components/icons/Edit.vue' import Edit from '@/components/icons/Edit.vue'
import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue' import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
const i18n = useI18n() const i18n = useI18n()
const themeVars = useThemeVars() const themeVars = useThemeVars()
@ -185,7 +186,7 @@ const saveEdit = async (field, value, decode, format) => {
format, format,
}) })
if (success) { if (success) {
$message.success(i18n.t('dialogue.save_value_succ')) $message.success(i18n.t('interface.save_value_succ'))
} else { } else {
$message.error(msg) $message.error(msg)
} }
@ -205,7 +206,7 @@ const resetEdit = () => {
const actionColumn = { const actionColumn = {
key: 'action', key: 'action',
title: i18n.t('interface.action'), title: i18n.t('interface.action'),
width: 100, width: 120,
align: 'center', align: 'center',
titleAlign: 'center', titleAlign: 'center',
fixed: 'right', fixed: 'right',
@ -213,6 +214,16 @@ const actionColumn = {
return h(EditableTableColumn, { return h(EditableTableColumn, {
editing: false, editing: false,
bindKey: row.v, bindKey: row.v,
onCopy: async () => {
try {
const succ = await ClipboardSetText(row.v)
if (succ) {
$message.success(i18n.t('interface.copy_succ'))
}
} catch (e) {
$message.error(e.message)
}
},
onEdit: () => startEdit(index + 1, row.s, row.v), onEdit: () => startEdit(index + 1, row.s, row.v),
onDelete: async () => { onDelete: async () => {
try { try {

View File

@ -220,7 +220,7 @@ const handleSelectContextMenu = (key) => {
ClipboardSetText(redisKey) ClipboardSetText(redisKey)
.then((succ) => { .then((succ) => {
if (succ) { if (succ) {
$message.success(i18n.t('dialogue.copy_succ')) $message.success(i18n.t('interface.copy_succ'))
} }
}) })
.catch((e) => { .catch((e) => {

View File

@ -94,6 +94,8 @@
"open_connection": "Open Connection", "open_connection": "Open Connection",
"copy_path": "Copy Path", "copy_path": "Copy Path",
"copy_key": "Copy Key", "copy_key": "Copy Key",
"save_value_succ": "Value Saved !",
"copy_succ": "Value Copied !",
"binary_key": "Binary Key Name", "binary_key": "Binary Key Name",
"remove_key": "Remove Key", "remove_key": "Remove Key",
"new_key": "Add Key", "new_key": "Add Key",
@ -130,8 +132,6 @@
"remove_tip": "{type} \"{name}\" will be deleted", "remove_tip": "{type} \"{name}\" will be deleted",
"remove_group_tip": "Group \"{name}\" and all connections in it will be deleted", "remove_group_tip": "Group \"{name}\" and all connections in it will be deleted",
"delete_key_succ": "\"{key}\" has been deleted", "delete_key_succ": "\"{key}\" has been deleted",
"save_value_succ": "Value Saved !",
"copy_succ": "Value Copied !",
"rename_binary_key_fail": "Rename binary key name is unsupported", "rename_binary_key_fail": "Rename binary key name is unsupported",
"handle_succ": "Success!", "handle_succ": "Success!",
"reload_succ": "Reloaded!", "reload_succ": "Reloaded!",

View File

@ -88,6 +88,8 @@
"open_connection": "Abrir Conexão", "open_connection": "Abrir Conexão",
"copy_path": "Copiar Caminho", "copy_path": "Copiar Caminho",
"copy_key": "Copiar Chave", "copy_key": "Copiar Chave",
"save_value_succ": "Valor Salvo!",
"copy_succ": "Valor Copiado!",
"binary_key": "Nome da Chave Binária", "binary_key": "Nome da Chave Binária",
"remove_key": "Remover Chave", "remove_key": "Remover Chave",
"new_key": "Adicionar Chave", "new_key": "Adicionar Chave",
@ -122,8 +124,6 @@
"remove_tip": "{type} \"{name}\" será excluído", "remove_tip": "{type} \"{name}\" será excluído",
"remove_group_tip": "O grupo \"{name}\" e todas as conexões nele serão excluídos", "remove_group_tip": "O grupo \"{name}\" e todas as conexões nele serão excluídos",
"delete_key_succ": "\"{key}\" foi excluída", "delete_key_succ": "\"{key}\" foi excluída",
"save_value_succ": "Valor Salvo!",
"copy_succ": "Valor Copiado!",
"rename_binary_key_fail": "Renomear nome de chave binária não é suportado", "rename_binary_key_fail": "Renomear nome de chave binária não é suportado",
"handle_succ": "Sucesso!", "handle_succ": "Sucesso!",
"reload_succ": "Recarregado!", "reload_succ": "Recarregado!",

View File

@ -94,6 +94,8 @@
"open_connection": "打开连接", "open_connection": "打开连接",
"copy_path": "复制路径", "copy_path": "复制路径",
"copy_key": "复制键名", "copy_key": "复制键名",
"save_value_succ": "已保存值",
"copy_succ": "已复制到剪切板",
"binary_key": "二进制键名", "binary_key": "二进制键名",
"remove_key": "删除键", "remove_key": "删除键",
"new_key": "添加新键", "new_key": "添加新键",
@ -130,8 +132,6 @@
"remove_tip": "{type} \"{name}\" 将会被删除", "remove_tip": "{type} \"{name}\" 将会被删除",
"remove_group_tip": "分组 \"{name}\"及其所有连接将会被删除", "remove_group_tip": "分组 \"{name}\"及其所有连接将会被删除",
"delete_key_succ": "{key} 已被删除", "delete_key_succ": "{key} 已被删除",
"save_value_succ": "已保存值",
"copy_succ": "已复制到剪切板",
"rename_binary_key_fail": "不支持重命名二进制键名", "rename_binary_key_fail": "不支持重命名二进制键名",
"handle_succ": "操作成功", "handle_succ": "操作成功",
"reload_succ": "已重新载入", "reload_succ": "已重新载入",