perf: moved all labels in form item to the top for adjust long text

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>

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
+            <n-form :model="newForm" :show-require-mark="false" label-placement="top" style="padding-right: 15px">
-                :label-width="formLabelWidth"
-                :model="newForm"
-                :show-require-mark="false"
-                label-align="right"
-                label-placement="left"
-                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>

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="top"
-                        label-placement="left"
                     >
                         <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="top"
-                        label-placement="left"
                     >
                         <n-form-item :label="$t('conn_advn_filter')" path="defaultFilter">
                             <n-input

frontend/src/components/dialogs/DeleteKeyDialog.vue

@@ -79,13 +79,7 @@ const onClose = () => {
         preset="dialog"
         transform-origin="center"
     >
-        <n-form
+        <n-form :model="deleteForm" :show-require-mark="false" label-placement="top">
-            :model="deleteForm"
-            :show-require-mark="false"
-            label-align="right"
-            label-placement="left"
-            label-width="auto"
-        >
             <n-form-item :label="$t('server')">
                 <n-input :value="deleteForm.server" readonly />
             </n-form-item>

frontend/src/components/dialogs/GroupDialog.vue

@@ -80,13 +80,7 @@ const onClose = () => {
         @positive-click="onConfirm"
         @negative-click="onClose"
     >
-        <n-form
+        <n-form :model="groupForm" :show-label="false" :show-require-mark="false" label-placement="top">
-            :model="groupForm"
-            :show-require-mark="false"
-            label-align="left"
-            label-placement="left"
-            label-width="auto"
-        >
             <n-form-item :label="$t('group_name')" required>
                 <n-input v-model:value="groupForm.name" placeholder="" />
             </n-form-item>

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="top"
-            label-placement="left"
             style="padding-right: 15px"
         >
             <n-form-item :label="$t('server')" path="key">

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="top"
-                label-placement="left"
                 style="padding-right: 15px"
             >
                 <n-form-item :label="$t('key')" path="key" required>

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
+                <n-form :disabled="loading" :model="prefStore.general" :show-require-mark="false" label-placement="top">
-                    :disabled="loading"
-                    :label-width="formLabelWidth"
-                    :model="prefStore.general"
-                    :show-require-mark="false"
-                    label-align="right"
-                    label-placement="left"
-                >
                     <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
+                <n-form :disabled="loading" :model="prefStore.editor" :show-require-mark="false" label-placement="top">
-                    :disabled="loading"
-                    :label-width="formLabelWidth"
-                    :model="prefStore.editor"
-                    :show-require-mark="false"
-                    label-align="right"
-                    label-placement="left"
-                >
                     <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"
+                <n-button :disabled="loading" @click="prefStore.restorePreferences">
-                    >{{ $t('restore_defaults') }}
+                    {{ $t('restore_defaults') }}
                 </n-button>
             </div>
             <div class="flex-item n-dialog__action">

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-placement="top"
-            label-width="auto"
         >
             <n-form-item :label="$t('new_key_name')" required>
                 <n-input v-model:value="renameForm.newKey" />

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
+        <n-form :model="ttlForm" :show-require-mark="false" label-placement="top">
-            :label-width="formLabelWidth"
-            :model="ttlForm"
-            :show-require-mark="false"
-            label-align="right"
-            label-placement="left"
-        >
             <n-form-item :label="$t('key')">
                 <n-input :value="currentKey" readonly />
             </n-form-item>

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",

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": "编辑行",

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',
+    },
 }