From bb3316a67a00dcee6deaa2ca92dc6fd8a1ff0c06 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Wed, 23 Aug 2023 12:00:02 +0800
Subject: [PATCH] perf: moved all labels in form item to the top for adjust
 long text

---
 .../content_value/ContentValueString.vue      |  2 +-
 .../components/dialogs/AddFieldsDialog.vue    | 10 +-------
 .../components/dialogs/ConnectionDialog.vue   | 21 ++---------------
 .../components/dialogs/DeleteKeyDialog.vue    |  8 +------
 .../src/components/dialogs/GroupDialog.vue    |  8 +------
 .../components/dialogs/KeyFilterDialog.vue    |  5 +---
 .../src/components/dialogs/NewKeyDialog.vue   |  5 +---
 .../components/dialogs/PreferencesDialog.vue  | 23 ++++---------------
 .../components/dialogs/RenameKeyDialog.vue    |  4 ++--
 .../src/components/dialogs/SetTtlDialog.vue   |  9 +-------
 frontend/src/langs/en.json                    |  1 -
 frontend/src/langs/zh-cn.json                 |  1 -
 frontend/src/utils/theme.js                   | 17 ++++++++++++++
 13 files changed, 32 insertions(+), 82 deletions(-)

diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 312ca4f..f6fffbe 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -199,7 +199,7 @@ const onSaveValue = async () => {
                     <template #icon>
                         <n-icon :component="Close" size="18" />
                     </template>
-                    {{ $t('cancel_update') }}
+                    {{ $t('cancel') }}
                 </n-button>
             </n-button-group>
         </div>
diff --git a/frontend/src/components/dialogs/AddFieldsDialog.vue b/frontend/src/components/dialogs/AddFieldsDialog.vue
index 3234ba2..89c6052 100644
--- a/frontend/src/components/dialogs/AddFieldsDialog.vue
+++ b/frontend/src/components/dialogs/AddFieldsDialog.vue
@@ -24,7 +24,6 @@ const newForm = reactive({
     reload: true,
 })
 
-const formLabelWidth = '60px'
 const addValueComponent = {
     [types.STRING]: NewStringValue,
     [types.HASH]: AddHashValue,
@@ -202,14 +201,7 @@ const onClose = () => {
         @negative-click="onClose"
     >
         <n-scrollbar style="max-height: 500px">
-            <n-form
-                :label-width="formLabelWidth"
-                :model="newForm"
-                :show-require-mark="false"
-                label-align="right"
-                label-placement="left"
-                style="padding-right: 15px"
-            >
+            <n-form :model="newForm" :show-require-mark="false" label-placement="top" style="padding-right: 15px">
                 <n-form-item :label="$t('key')" path="key" required>
                     <n-input v-model:value="newForm.key" placeholder="" readonly />
                 </n-form-item>
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index cc8c33c..24beefc 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -52,19 +52,6 @@ const tab = ref('general')
 const testing = ref(false)
 const showTestResult = ref(false)
 const testResult = ref('')
-const showTestConnSuccResult = computed(() => {
-    return isEmpty(testResult.value) && showTestResult.value === true
-})
-const showTestConnFailResult = computed(() => {
-    return !isEmpty(testResult.value) && showTestResult.value === true
-})
-const formLabelWidth = computed(() => {
-    // compatible with long english word
-    if (tab.value === 'advanced' && i18n.locale.value === 'en') {
-        return '140px'
-    }
-    return '80px'
-})
 const predefineColors = ref(['', '#F75B52', '#F7A234', '#F7CE33', '#4ECF60', '#348CF7', '#B270D3'])
 const generalFormRef = ref(null)
 const advanceFormRef = ref(null)
@@ -163,12 +150,10 @@ const onClose = () => {
                 <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
                     <n-form
                         ref="generalFormRef"
-                        :label-width="formLabelWidth"
                         :model="generalForm"
                         :rules="generalFormRules()"
                         :show-require-mark="false"
-                        label-align="right"
-                        label-placement="left"
+                        label-placement="top"
                     >
                         <n-form-item :label="$t('conn_name')" path="name" required>
                             <n-input v-model:value="generalForm.name" :placeholder="$t('conn_name_tip')" />
@@ -203,12 +188,10 @@ const onClose = () => {
                 <n-tab-pane :tab="$t('advanced')" display-directive="show" name="advanced">
                     <n-form
                         ref="advanceFormRef"
-                        :label-width="formLabelWidth"
                         :model="generalForm"
                         :rules="generalFormRules()"
                         :show-require-mark="false"
-                        label-align="right"
-                        label-placement="left"
+                        label-placement="top"
                     >
                         <n-form-item :label="$t('conn_advn_filter')" path="defaultFilter">
                             <n-input
diff --git a/frontend/src/components/dialogs/DeleteKeyDialog.vue b/frontend/src/components/dialogs/DeleteKeyDialog.vue
index ee98767..1683923 100644
--- a/frontend/src/components/dialogs/DeleteKeyDialog.vue
+++ b/frontend/src/components/dialogs/DeleteKeyDialog.vue
@@ -79,13 +79,7 @@ const onClose = () => {
         preset="dialog"
         transform-origin="center"
     >
-        <n-form
-            :model="deleteForm"
-            :show-require-mark="false"
-            label-align="right"
-            label-placement="left"
-            label-width="auto"
-        >
+        <n-form :model="deleteForm" :show-require-mark="false" label-placement="top">
             <n-form-item :label="$t('server')">
                 <n-input :value="deleteForm.server" readonly />
             </n-form-item>
diff --git a/frontend/src/components/dialogs/GroupDialog.vue b/frontend/src/components/dialogs/GroupDialog.vue
index 19b1aac..536e178 100644
--- a/frontend/src/components/dialogs/GroupDialog.vue
+++ b/frontend/src/components/dialogs/GroupDialog.vue
@@ -80,13 +80,7 @@ const onClose = () => {
         @positive-click="onConfirm"
         @negative-click="onClose"
     >
-        <n-form
-            :model="groupForm"
-            :show-require-mark="false"
-            label-align="left"
-            label-placement="left"
-            label-width="auto"
-        >
+        <n-form :model="groupForm" :show-label="false" :show-require-mark="false" label-placement="top">
             <n-form-item :label="$t('group_name')" required>
                 <n-input v-model:value="groupForm.name" placeholder="" />
             </n-form-item>
diff --git a/frontend/src/components/dialogs/KeyFilterDialog.vue b/frontend/src/components/dialogs/KeyFilterDialog.vue
index cc0eab4..9858806 100644
--- a/frontend/src/components/dialogs/KeyFilterDialog.vue
+++ b/frontend/src/components/dialogs/KeyFilterDialog.vue
@@ -25,7 +25,6 @@ const typeOptions = computed(() => {
     return options
 })
 
-const formLabelWidth = '100px'
 const dialogStore = useDialog()
 watch(
     () => dialogStore.keyFilterDialogVisible,
@@ -72,11 +71,9 @@ const onClose = () => {
     >
         <n-form
             ref="filterFormRef"
-            :label-width="formLabelWidth"
             :model="filterForm"
             :show-require-mark="false"
-            label-align="right"
-            label-placement="left"
+            label-placement="top"
             style="padding-right: 15px"
         >
             <n-form-item :label="$t('server')" path="key">
diff --git a/frontend/src/components/dialogs/NewKeyDialog.vue b/frontend/src/components/dialogs/NewKeyDialog.vue
index efcf52c..a3ecd0d 100644
--- a/frontend/src/components/dialogs/NewKeyDialog.vue
+++ b/frontend/src/components/dialogs/NewKeyDialog.vue
@@ -41,7 +41,6 @@ const dbOptions = computed(() =>
 const newFormRef = ref(null)
 const subFormRef = ref(null)
 
-const formLabelWidth = '100px'
 const options = computed(() => {
     return Object.keys(types).map((t) => ({
         value: t,
@@ -157,12 +156,10 @@ const onClose = () => {
         <n-scrollbar style="max-height: 500px">
             <n-form
                 ref="newFormRef"
-                :label-width="formLabelWidth"
                 :model="newForm"
                 :rules="formRules"
                 :show-require-mark="false"
-                label-align="right"
-                label-placement="left"
+                label-placement="top"
                 style="padding-right: 15px"
             >
                 <n-form-item :label="$t('key')" path="key" required>
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index e97c633..5d4c73f 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -9,7 +9,6 @@ const prefStore = usePreferencesStore()
 
 const prevPreferences = ref({})
 const tab = ref('general')
-const formLabelWidth = '80px'
 const dialogStore = useDialog()
 const i18n = useI18n()
 const message = useMessage()
@@ -76,14 +75,7 @@ const onClose = () => {
         <!-- <n-spin :show="loading"> -->
         <n-tabs v-model:value="tab" animated type="line">
             <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
-                <n-form
-                    :disabled="loading"
-                    :label-width="formLabelWidth"
-                    :model="prefStore.general"
-                    :show-require-mark="false"
-                    label-align="right"
-                    label-placement="left"
-                >
+                <n-form :disabled="loading" :model="prefStore.general" :show-require-mark="false" label-placement="top">
                     <n-form-item :label="$t('theme')" required>
                         <n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
                             <n-radio-button v-for="opt in prefStore.themeOption" :key="opt.value" :value="opt.value">
@@ -123,14 +115,7 @@ const onClose = () => {
             </n-tab-pane>
 
             <n-tab-pane :tab="$t('editor')" display-directive="show" name="editor">
-                <n-form
-                    :disabled="loading"
-                    :label-width="formLabelWidth"
-                    :model="prefStore.editor"
-                    :show-require-mark="false"
-                    label-align="right"
-                    label-placement="left"
-                >
+                <n-form :disabled="loading" :model="prefStore.editor" :show-require-mark="false" label-placement="top">
                     <n-form-item :label="$t('font')" required>
                         <n-select v-model:value="prefStore.editor.font" :options="prefStore.fontOption" filterable />
                     </n-form-item>
@@ -144,8 +129,8 @@ const onClose = () => {
 
         <template #action>
             <div class="flex-item-expand">
-                <n-button :disabled="loading" @click="prefStore.restorePreferences"
-                    >{{ $t('restore_defaults') }}
+                <n-button :disabled="loading" @click="prefStore.restorePreferences">
+                    {{ $t('restore_defaults') }}
                 </n-button>
             </div>
             <div class="flex-item n-dialog__action">
diff --git a/frontend/src/components/dialogs/RenameKeyDialog.vue b/frontend/src/components/dialogs/RenameKeyDialog.vue
index 8dd884e..757c3dc 100644
--- a/frontend/src/components/dialogs/RenameKeyDialog.vue
+++ b/frontend/src/components/dialogs/RenameKeyDialog.vue
@@ -70,9 +70,9 @@ const onClose = () => {
         <n-form
             :model="renameForm"
             :show-require-mark="false"
+            :show-label="false"
             label-align="left"
-            label-placement="left"
-            label-width="auto"
+            label-placement="top"
         >
             <n-form-item :label="$t('new_key_name')" required>
                 <n-input v-model:value="renameForm.newKey" />
diff --git a/frontend/src/components/dialogs/SetTtlDialog.vue b/frontend/src/components/dialogs/SetTtlDialog.vue
index 0c4f22a..aebc0e7 100644
--- a/frontend/src/components/dialogs/SetTtlDialog.vue
+++ b/frontend/src/components/dialogs/SetTtlDialog.vue
@@ -8,7 +8,6 @@ const ttlForm = reactive({
     ttl: -1,
 })
 
-const formLabelWidth = '80px'
 const dialogStore = useDialog()
 const connectionStore = useConnectionStore()
 const tabStore = useTabStore()
@@ -74,13 +73,7 @@ const onConfirm = async () => {
         preset="dialog"
         transform-origin="center"
     >
-        <n-form
-            :label-width="formLabelWidth"
-            :model="ttlForm"
-            :show-require-mark="false"
-            label-align="right"
-            label-placement="left"
-        >
+        <n-form :model="ttlForm" :show-require-mark="false" label-placement="top">
             <n-form-item :label="$t('key')">
                 <n-input :value="currentKey" readonly />
             </n-form-item>
diff --git a/frontend/src/langs/en.json b/frontend/src/langs/en.json
index df5b049..8311af1 100644
--- a/frontend/src/langs/en.json
+++ b/frontend/src/langs/en.json
@@ -32,7 +32,6 @@
   "copy_value": "Copy Value",
   "edit_value": "Edit Value",
   "save_update": "Save Update",
-  "cancel_update": "Cancel Update",
   "score_filter_tip": "Support operator list below:\n= equal\n!= not equal\n> greater than\n>= greater than or equal to\n< less than\n<= less than or equal to\nfor example you want to filter results which greater than 3, input: >3",
   "add_row": "Add Row",
   "edit_row": "Edit Row",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index be3b2d3..37b3d96 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -32,7 +32,6 @@
   "copy_value": "复制值",
   "edit_value": "修改值",
   "save_update": "保存修改",
-  "cancel_update": "取消修改",
   "score_filter_tip": "支持如下运算符比较匹配范围\n＝：等于\n!=：不等于\n>：大于\n<：小于\n>=：大于等于\n<=：小于等于\n如查询分值大于3的结果，则输入：>3",
   "add_row": "插入行",
   "edit_row": "编辑行",
diff --git a/frontend/src/utils/theme.js b/frontend/src/utils/theme.js
index 1d56dd8..7647cec 100644
--- a/frontend/src/utils/theme.js
+++ b/frontend/src/utils/theme.js
@@ -21,4 +21,21 @@ export const themeOverrides = {
         tabGapMediumCard: '1px',
         tabGapLargeCard: '1px',
     },
+    Form: {
+        labelFontSizeTopSmall: '12px',
+        labelFontSizeTopMedium: '13px',
+        labelFontSizeTopLarge: '13px',
+        labelHeightSmall: '18px',
+        labelHeightMedium: '18px',
+        labelHeightLarge: '18px',
+        labelPaddingVertical: '0 0 5px 2px',
+        feedbackHeightSmall: '18px',
+        feedbackHeightMedium: '18px',
+        feedbackHeightLarge: '20px',
+        feedbackFontSizeSmall: '11px',
+        feedbackFontSizeMedium: '12px',
+        feedbackFontSizeLarge: '12px',
+        labelTextColor: 'rgb(113,120,128)',
+        labelFontWeight: '450',
+    },
 }