From 3c1727db3e84dc96673c3d025aa91d06fd2ddab9 Mon Sep 17 00:00:00 2001 From: Lykin <137850705+tiny-craft@users.noreply.github.com> Date: Tue, 14 Nov 2023 22:58:44 +0800 Subject: [PATCH] perf: add pin and fullscreen supported for entry editor --- frontend/src/components/common/IconButton.vue | 18 ++-- .../content_value/ContentEntryEditor.vue | 95 +++++++++++++++---- .../content_value/ContentValueHash.vue | 16 +++- .../content_value/ContentValueList.vue | 15 ++- .../content_value/ContentValueSet.vue | 15 ++- .../content_value/FormatSelector.vue | 2 +- frontend/src/components/icons/Cluster.vue | 2 - frontend/src/components/icons/Database.vue | 2 - frontend/src/components/icons/Detail.vue | 2 - frontend/src/components/icons/Folder.vue | 2 - frontend/src/components/icons/FullScreen.vue | 39 ++++++++ frontend/src/components/icons/OffScreen.vue | 39 ++++++++ frontend/src/components/icons/Pin.vue | 32 +++++++ frontend/src/components/icons/Server.vue | 2 - frontend/src/components/icons/Terminal.vue | 2 - frontend/src/components/icons/WindowClose.vue | 20 +++- frontend/src/langs/en-us.json | 4 + frontend/src/langs/zh-cn.json | 4 + frontend/src/styles/style.scss | 8 +- frontend/src/utils/discrete.js | 2 +- 20 files changed, 267 insertions(+), 54 deletions(-) create mode 100644 frontend/src/components/icons/FullScreen.vue create mode 100644 frontend/src/components/icons/OffScreen.vue create mode 100644 frontend/src/components/icons/Pin.vue diff --git a/frontend/src/components/common/IconButton.vue b/frontend/src/components/common/IconButton.vue index 7a17520..567f64f 100644 --- a/frontend/src/components/common/IconButton.vue +++ b/frontend/src/components/common/IconButton.vue @@ -24,6 +24,7 @@ const props = defineProps({ loading: Boolean, border: Boolean, disabled: Boolean, + buttonStyle: [String, Object], }) const hasTooltip = computed(() => { @@ -39,13 +40,16 @@ const hasTooltip = computed(() => { :disabled="disabled" :focusable="false" :loading="loading" + :style="props.buttonStyle" :text="!border" :type="type" @click.prevent="emit('click')"> - - - + + + + + @@ -61,9 +65,11 @@ const hasTooltip = computed(() => { :type="type" @click.prevent="emit('click')"> - - - + + + + + diff --git a/frontend/src/components/content_value/ContentEntryEditor.vue b/frontend/src/components/content_value/ContentEntryEditor.vue index d4961f8..442a6d7 100644 --- a/frontend/src/components/content_value/ContentEntryEditor.vue +++ b/frontend/src/components/content_value/ContentEntryEditor.vue @@ -1,11 +1,16 @@ - + @@ -136,14 +168,41 @@ const onSave = () => { onFormatChanged(d, f)" /> + + + + + + + + + - + - + {{ $t('common.update') }} @@ -181,7 +240,7 @@ const onSave = () => { background-color: unset; } -:deep(.n-card--bordered) { - border-radius: 0; -} +//:deep(.n-card--bordered) { +// border-radius: 0; +//} diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue index 94fab1e..e2ded75 100644 --- a/frontend/src/components/content_value/ContentValueHash.vue +++ b/frontend/src/components/content_value/ContentValueHash.vue @@ -88,6 +88,11 @@ const currentEditRow = reactive({ const inEdit = computed(() => { return currentEditRow.no > 0 }) +const fullEdit = ref(false) +const inFullEdit = computed(() => { + return inEdit.value && fullEdit.value +}) + const tableRef = ref(null) const fieldColumn = reactive({ key: 'key', @@ -99,6 +104,7 @@ const fieldColumn = reactive({ tooltip: true, }, filterOptionValue: null, + className: inEdit ? 'clickable' : '', filter: (value, row) => { return !!~row.k.indexOf(value.toString()) }, @@ -116,6 +122,7 @@ const valueColumn = reactive({ tooltip: true, }, filterOptionValue: null, + className: inEdit ? 'clickable' : '', filter: (value, row) => { return !!~row.v.indexOf(value.toString()) }, @@ -162,8 +169,6 @@ const saveEdit = async (field, value, decode, format) => { } } catch (e) { $message.error(e.message) - } finally { - resetEdit() } } @@ -318,6 +323,7 @@ defineExpose({ - +