fix: turn off spellcheck on macOS #99

frontend/package.json

@@ -12,21 +12,21 @@
     "bytes": "^3.1.2",
     "dayjs": "^1.11.10",
     "lodash": "^4.17.21",
-    "monaco-editor": "^0.44.0",
+    "monaco-editor": "^0.45.0",
     "pinia": "^2.1.7",
     "sass": "^1.69.5",
-    "vue": "^3.3.9",
+    "vue": "^3.3.11",
     "vue-i18n": "^9.8.0",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.0",
+    "@vitejs/plugin-vue": "^4.5.2",
     "naive-ui": "^2.35.0",
     "prettier": "^3.1.0",
-    "unplugin-auto-import": "^0.16.7",
+    "unplugin-auto-import": "^0.17.2",
-    "unplugin-icons": "^0.17.4",
+    "unplugin-icons": "^0.18.1",
-    "unplugin-vue-components": "^0.25.2",
+    "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.0.2"
+    "vite": "^5.0.6"
   }
 }

frontend/package.json.md5

@@ -1 +1 @@
-d5ec7e0103cfa8c99bc40c20ffdcb4fb
+5d7ef4625da99af1c918196c905459d4

frontend/src/components/common/EditableTableRow.vue

@@ -17,8 +17,7 @@ const handleUpdateValue = (val) => {
 <template>
     <div style="min-height: 22px">
         <template v-if="props.isEdit">
-            <!-- TODO: ADD FULL SCREEN EDIT SUPPORT -->
+            <n-input :input-props="{ spellcheck: 'false' }" :value="props.value" @update:value="handleUpdateValue" />
-            <n-input :value="props.value" @update:value="handleUpdateValue" />
         </template>
         <template v-else>
             {{ props.value }}

frontend/src/components/common/FileOpenInput.vue

@@ -23,7 +23,12 @@ const handleSelectFile = async () => {
 
 <template>
     <n-input-group>
-        <n-input v-model:value="props.value" :disabled="props.disabled" :placeholder="placeholder" clearable />
+        <n-input
+            v-model:value="props.value"
+            :disabled="props.disabled"
+            :input-props="{ spellcheck: 'false' }"
+            :placeholder="placeholder"
+            clearable />
         <n-button :disabled="props.disabled" :focusable="false" @click="handleSelectFile">...</n-button>
     </n-input-group>
 </template>

frontend/src/components/content/ContentLogPane.vue

@@ -148,7 +148,7 @@ defineExpose({
                     style="min-width: 100px" />
             </n-form-item>
             <n-form-item :label="$t('log.filter_keyword')">
-                <n-input v-model:value="data.keyword" clearable placeholder="" />
+                <n-input v-model:value="data.keyword" :input-props="{ spellcheck: 'false' }" clearable placeholder="" />
             </n-form-item>
             <n-form-item label="&nbsp;">
                 <icon-button :icon="Refresh" border t-tooltip="log.refresh" @click="loadHistory" />

frontend/src/components/content_value/ContentEntryEditor.vue

@@ -164,6 +164,7 @@ const onSave = () => {
                     <div class="editor-content-item-label">{{ props.fieldLabel }}</div>
                     <n-input
                         v-model:value="viewAs.field"
+                        :input-props="{ spellcheck: 'false' }"
                         :placeholder="props.field + ''"
                         :readonly="props.fieldReadonly"
                         class="editor-content-item-input"

frontend/src/components/content_value/ContentSearchInput.vue

@@ -88,6 +88,7 @@ defineExpose({
         <slot name="prepend" />
         <n-input
             v-model:value="inputData.filter"
+            :input-props="{ spellcheck: 'false' }"
             :placeholder="$t('interface.filter')"
             :size="props.small ? 'small' : ''"
             clearable

frontend/src/components/content_value/ContentServerStatus.vue

@@ -186,7 +186,7 @@ const infoFilter = ref('')
             </n-card>
             <n-card :title="$t('status.all_info')" embedded>
                 <template #header-extra>
-                    <n-input v-model:value="infoFilter" clearable placeholder="">
+                    <n-input v-model:value="infoFilter" :input-props="{ spellcheck: 'false' }" clearable placeholder="">
                         <template #prefix>
                             <icon-button :icon="Filter" size="18" />
                         </template>

frontend/src/components/content_value/ContentSlog.vue

@@ -176,7 +176,7 @@ const onListLimitChanged = (limit) => {
                 </n-tooltip>
             </n-form-item>
             <n-form-item :label="$t('slog.filter')">
-                <n-input v-model:value="data.keyword" clearable placeholder="" />
+                <n-input v-model:value="data.keyword" :input-props="{ spellcheck: 'false' }" clearable placeholder="" />
             </n-form-item>
         </n-form>
         <div class="content-value fill-height flex-box-h">

frontend/src/components/content_value/ContentToolbar.vue

@@ -78,7 +78,7 @@ const onCopyKey = () => {
     <div class="content-toolbar flex-box-h">
         <n-input-group>
             <redis-type-tag :binary-key="binaryKey" :type="props.keyType" size="large" />
-            <n-input v-model:value="props.keyPath" readonly>
+            <n-input v-model:value="props.keyPath" :input-props="{ spellcheck: 'false' }" readonly>
                 <template #suffix>
                     <icon-button
                         :icon="Refresh"

frontend/src/components/dialogs/AddFieldsDialog.vue

@@ -202,7 +202,11 @@ const onClose = () => {
         <n-scrollbar style="max-height: 500px">
             <n-form :model="newForm" :show-require-mark="false" label-placement="top" style="padding-right: 15px">
                 <n-form-item :label="$t('common.key')" path="key" required>
-                    <n-input v-model:value="newForm.key" placeholder="" readonly />
+                    <n-input
+                        v-model:value="newForm.key"
+                        :input-props="{ spellcheck: 'false' }"
+                        placeholder=""
+                        readonly />
                 </n-form-item>
                 <component
                     :is="addValueComponent[newForm.type]"

frontend/src/components/dialogs/ConnectionDialog.vue

@@ -271,6 +271,7 @@ const onClose = () => {
                                 required>
                                 <n-input
                                     v-model:value="generalForm.name"
+                                    :input-props="{ spellcheck: 'false' }"
                                     :placeholder="$t('dialogue.connection.name_tip')" />
                             </n-form-item-gi>
                             <n-form-item-gi
@@ -283,6 +284,7 @@ const onClose = () => {
                             <n-form-item-gi :label="$t('dialogue.connection.addr')" :span="24" path="addr" required>
                                 <n-input
                                     v-model:value="generalForm.addr"
+                                    :input-props="{ spellcheck: 'false' }"
                                     :placeholder="$t('dialogue.connection.addr_tip')" />
                                 <n-text style="width: 40px; text-align: center">:</n-text>
                                 <n-input-number
@@ -294,6 +296,7 @@ const onClose = () => {
                             <n-form-item-gi :label="$t('dialogue.connection.pwd')" :span="12" path="password">
                                 <n-input
                                     v-model:value="generalForm.password"
+                                    :input-props="{ spellcheck: 'false' }"
                                     :placeholder="$t('dialogue.connection.pwd_tip')"
                                     show-password-on="click"
                                     type="password" />
@@ -301,6 +304,7 @@ const onClose = () => {
                             <n-form-item-gi :label="$t('dialogue.connection.usr')" :span="12" path="username">
                                 <n-input
                                     v-model:value="generalForm.username"
+                                    :input-props="{ spellcheck: 'false' }"
                                     :placeholder="$t('dialogue.connection.usr_tip')" />
                             </n-form-item-gi>
                         </n-grid>
@@ -322,6 +326,7 @@ const onClose = () => {
                                 path="defaultFilter">
                                 <n-input
                                     v-model:value="generalForm.defaultFilter"
+                                    :input-props="{ spellcheck: 'false' }"
                                     :placeholder="$t('dialogue.connection.advn.filter_tip')" />
                             </n-form-item-gi>
                             <n-form-item-gi
@@ -330,6 +335,7 @@ const onClose = () => {
                                 path="keySeparator">
                                 <n-input
                                     v-model:value="generalForm.keySeparator"
+                                    :input-props="{ spellcheck: 'false' }"
                                     :placeholder="$t('dialogue.connection.advn.separator_tip')" />
                             </n-form-item-gi>
                             <n-form-item-gi
@@ -386,6 +392,7 @@ const onClose = () => {
                                     v-model:value="dbFilterList"
                                     :clearable="true"
                                     :disabled="generalForm.dbFilterType === 'none'"
+                                    :input-props="{ spellcheck: 'false' }"
                                     :placeholder="$t('dialogue.connection.advn.dbfilter_input_tip')"
                                     :show="false"
                                     :show-arrow="false"
@@ -464,6 +471,7 @@ const onClose = () => {
                         <n-form-item :label="$t('dialogue.connection.addr')" required>
                             <n-input
                                 v-model:value="generalForm.ssh.addr"
+                                :input-props="{ spellcheck: 'false' }"
                                 :placeholder="$t('dialogue.connection.ssh.addr_tip')" />
                             <n-text style="width: 40px; text-align: center">:</n-text>
                             <n-input-number
@@ -483,11 +491,13 @@ const onClose = () => {
                             :label="$t('dialogue.connection.usr')">
                             <n-input
                                 v-model:value="generalForm.ssh.username"
+                                :input-props="{ spellcheck: 'false' }"
                                 :placeholder="$t('dialogue.connection.ssh.usr_tip')" />
                         </n-form-item>
                         <n-form-item v-if="sshLoginType === 'pwd'" :label="$t('dialogue.connection.pwd')">
                             <n-input
                                 v-model:value="generalForm.ssh.password"
+                                :input-props="{ spellcheck: 'false' }"
                                 :placeholder="$t('dialogue.connection.ssh.pwd_tip')"
                                 show-password-on="click"
                                 type="password" />
@@ -501,6 +511,7 @@ const onClose = () => {
                         <n-form-item v-if="sshLoginType === 'pkfile'" :label="$t('dialogue.connection.ssh.passphrase')">
                             <n-input
                                 v-model:value="generalForm.ssh.passphrase"
+                                :input-props="{ spellcheck: 'false' }"
                                 :placeholder="$t('dialogue.connection.ssh.passphrase_tip')"
                                 show-password-on="click"
                                 type="password" />
@@ -524,6 +535,7 @@ const onClose = () => {
                             <n-input-group>
                                 <n-select
                                     v-model:value="generalForm.sentinel.master"
+                                    :input-props="{ spellcheck: 'false' }"
                                     :options="masterNameOptions"
                                     filterable
                                     tag />
@@ -535,6 +547,7 @@ const onClose = () => {
                         <n-form-item :label="$t('dialogue.connection.sentinel.password')">
                             <n-input
                                 v-model:value="generalForm.sentinel.password"
+                                :input-props="{ spellcheck: 'false' }"
                                 :placeholder="$t('dialogue.connection.sentinel.pwd_tip')"
                                 show-password-on="click"
                                 type="password" />
@@ -542,6 +555,7 @@ const onClose = () => {
                         <n-form-item :label="$t('dialogue.connection.sentinel.username')">
                             <n-input
                                 v-model:value="generalForm.sentinel.username"
+                                :input-props="{ spellcheck: 'false' }"
                                 :placeholder="$t('dialogue.connection.sentinel.usr_tip')" />
                         </n-form-item>
                     </n-form>

frontend/src/components/dialogs/DeleteKeyDialog.vue

@@ -109,7 +109,11 @@ const onClose = () => {
                     v-if="!(deleteForm.key instanceof Array)"
                     :label="$t('dialogue.key.key_expression')"
                     required>
-                    <n-input v-model:value="deleteForm.key" placeholder="" @input="resetAffected" />
+                    <n-input
+                        v-model:value="deleteForm.key"
+                        :input-props="{ spellcheck: 'false' }"
+                        placeholder=""
+                        @input="resetAffected" />
                 </n-form-item>
                 <!--                <n-form-item :label="$t('dialogue.key.async_delete')" required>-->
                 <!--                    <n-checkbox v-model:checked="deleteForm.async">-->

frontend/src/components/dialogs/GroupDialog.vue

@@ -112,7 +112,7 @@ const onClose = () => {
             :show-require-mark="false"
             label-placement="top">
             <n-form-item :label="$t('dialogue.group.name')" path="name" required>
-                <n-input v-model:value="groupForm.name" placeholder="" />
+                <n-input v-model:value="groupForm.name" :input-props="{ spellcheck: 'false' }" placeholder="" />
             </n-form-item>
         </n-form>
     </n-modal>

frontend/src/components/dialogs/KeyFilterDialog.vue

@@ -85,6 +85,7 @@ const onClose = () => {
                         <template #trigger>
                             <n-input
                                 v-model:value="filterForm.pattern"
+                                :input-props="{ spellcheck: 'false' }"
                                 :placeholder="$t('dialogue.filter.filter_pattern')"
                                 clearable />
                         </template>

frontend/src/components/dialogs/NewKeyDialog.vue

@@ -178,10 +178,14 @@ const onClose = () => {
                 label-placement="top"
                 style="padding-right: 15px">
                 <n-form-item :label="$t('common.key')" path="key" required>
-                    <n-input v-model:value="newForm.key" placeholder="" />
+                    <n-input v-model:value="newForm.key" :input-props="{ spellcheck: 'false' }" placeholder="" />
                 </n-form-item>
                 <n-form-item :label="$t('dialogue.key.db_index')" path="db" required>
-                    <n-select v-model:value="newForm.db" :options="dbOptions" filterable />
+                    <n-select
+                        v-model:value="newForm.db"
+                        :input-props="{ spellcheck: 'false' }"
+                        :options="dbOptions"
+                        filterable />
                 </n-form-item>
                 <n-form-item :label="$t('interface.type')" path="type" required>
                     <n-select v-model:value="newForm.type" :options="options" :render-label="renderTypeLabel" />

frontend/src/components/dialogs/PreferencesDialog.vue

@@ -88,12 +88,14 @@ const onClose = () => {
                         <n-form-item-gi :label="$t('preferences.general.language')" :span="24" required>
                             <n-select
                                 v-model:value="prefStore.general.language"
+                                :input-props="{ spellcheck: 'false' }"
                                 :options="prefStore.langOption"
                                 filterable />
                         </n-form-item-gi>
                         <n-form-item-gi :label="$t('preferences.general.font')" :span="12" required>
                             <n-select
                                 v-model:value="prefStore.general.font"
+                                :input-props="{ spellcheck: 'false' }"
                                 :options="prefStore.fontOption"
                                 filterable />
                         </n-form-item-gi>
@@ -104,7 +106,10 @@ const onClose = () => {
                             <n-input-number v-model:value="prefStore.general.scanSize" :min="1" />
                         </n-form-item-gi>
                         <n-form-item-gi :label="$t('preferences.general.key_icon_style')" :span="12">
-                            <n-select v-model:value="prefStore.general.keyIconStyle" :options="keyOptions" />
+                            <n-select
+                                v-model:value="prefStore.general.keyIconStyle"
+                                :input-props="{ spellcheck: 'false' }"
+                                :options="keyOptions" />
                         </n-form-item-gi>
                         <n-form-item-gi :label="$t('preferences.general.proxy')" :span="24">
                             <n-space>
@@ -128,7 +133,11 @@ const onClose = () => {
             <n-tab-pane :tab="$t('preferences.editor.name')" display-directive="show" name="editor">
                 <n-form :disabled="loading" :model="prefStore.editor" :show-require-mark="false" label-placement="top">
                     <n-form-item :label="$t('preferences.general.font')" required>
-                        <n-select v-model:value="prefStore.editor.font" :options="prefStore.fontOption" filterable />
+                        <n-select
+                            v-model:value="prefStore.editor.font"
+                            :input-props="{ spellcheck: 'false' }"
+                            :options="prefStore.fontOption"
+                            filterable />
                     </n-form-item>
                     <n-form-item :label="$t('preferences.general.font_size')">
                         <n-input-number v-model:value="prefStore.editor.fontSize" :max="65535" :min="1" />

frontend/src/components/dialogs/RenameKeyDialog.vue

@@ -74,7 +74,7 @@ const onClose = () => {
             label-align="left"
             label-placement="top">
             <n-form-item :label="$t('dialogue.key.new_name')" required>
-                <n-input v-model:value="renameForm.newKey" />
+                <n-input v-model:value="renameForm.newKey" :input-props="{ spellcheck: 'false' }" />
             </n-form-item>
         </n-form>
     </n-modal>

frontend/src/components/dialogs/SetTtlDialog.vue

@@ -80,7 +80,7 @@ const onConfirm = async () => {
         transform-origin="center">
         <n-form :model="ttlForm" :show-require-mark="false" label-placement="top">
             <n-form-item :label="$t('common.key')">
-                <n-input :value="ttlForm.key" readonly>
+                <n-input :input-props="{ spellcheck: 'false' }" :value="ttlForm.key" readonly>
                     <template #prefix>
                         <n-icon v-if="!!ttlForm.keyCode" :component="Binary" size="20" />
                     </template>

frontend/src/components/new_value/AddZSetValue.vue

@@ -65,6 +65,7 @@ const onUpdate = () => {
             <template #default="{ value }">
                 <n-input
                     v-model:value="value.value"
+                    :input-props="{ spellcheck: 'false' }"
                     :placeholder="$t('dialogue.field.enter_value')"
                     type="text"
                     @update:value="onUpdate" />

frontend/src/components/new_value/NewStreamValue.vue

@@ -41,7 +41,7 @@ defineExpose({
 
 <template>
     <n-form-item label="ID">
-        <n-input v-model:value="id" />
+        <n-input v-model:value="id" :input-props="{ spellcheck: 'false' }" />
     </n-form-item>
     <n-form-item :label="$t('common.field') + ':' + $t('common.value')" required>
         <n-dynamic-input

frontend/src/components/new_value/NewStringValue.vue

@@ -9,6 +9,7 @@ const emit = defineEmits(['update:value'])
 <template>
     <n-form-item :label="$t('common.value')">
         <n-input
+            :input-props="{ spellcheck: 'false' }"
             :rows="6"
             :value="props.value"
             placeholder=""

frontend/src/components/new_value/NewZSetValue.vue

@@ -46,6 +46,7 @@ defineExpose({
             <template #default="{ value }">
                 <n-input
                     v-model:value="value.value"
+                    :input-props="{ spellcheck: 'false' }"
                     :placeholder="$t('dialogue.field.enter_member')"
                     type="text"
                     @update:value="onUpdate" />

frontend/src/components/sidebar/BrowserPane.vue

@@ -284,6 +284,7 @@ onMounted(() => onReload())
                     <n-select
                         :consistent-menu-width="false"
                         :filter="(pattern, option) => option.value.toString() === pattern"
+                        :input-props="{ spellcheck: 'false' }"
                         :options="dbSelectOptions"
                         :value="props.db"
                         filterable

frontend/src/components/sidebar/ConnectionPane.vue

@@ -33,7 +33,11 @@ const filterPattern = ref('')
                 stroke-width="4"
                 t-tooltip="interface.new_group"
                 @click="dialogStore.openNewGroupDialog()" />
-            <n-input v-model:value="filterPattern" :placeholder="$t('interface.filter')" clearable>
+            <n-input
+                v-model:value="filterPattern"
+                :input-props="{ spellcheck: 'false' }"
+                :placeholder="$t('interface.filter')"
+                clearable>
                 <template #prefix>
                     <n-icon :component="Filter" size="20" />
                 </template>

frontend/src/styles/content.scss

@@ -1,16 +1,16 @@
 .content-container {
-  height: 100%;
+    height: 100%;
-  overflow: hidden;
+    overflow: hidden;
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 .empty-content {
-  height: 100%;
+    height: 100%;
-  justify-content: center;
+    justify-content: center;
 }
 
 .content-value {
-  user-select: text;
+    user-select: text;
 }
 
 .tab-content {

frontend/src/styles/style.scss

@@ -1,170 +1,170 @@
 :root {
-  //--bg-color: #f8f8f8;
+    //--bg-color: #f8f8f8;
-  //--bg-color-accent: #fff;
+    //--bg-color-accent: #fff;
-  //--bg-color-page: #f2f3f5;
+    //--bg-color-page: #f2f3f5;
-  //--text-color-regular: #606266;
+    //--text-color-regular: #606266;
-  //--border-color: #dcdfe6;
+    //--border-color: #dcdfe6;
-  --transition-duration-fast: 0.2s;
+    --transition-duration-fast: 0.2s;
-  --transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+    --transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 html {
-  //text-align: center;
+    //text-align: center;
-  cursor: default;
+    cursor: default;
-  -webkit-user-select: none; /* Chrome, Safari */
+    -webkit-user-select: none; /* Chrome, Safari */
-  -moz-user-select: none; /* Firefox */
+    -moz-user-select: none; /* Firefox */
-  user-select: none;
+    user-select: none;
 }
 
 body {
-  margin: 0;
+    margin: 0;
-  padding: 0;
+    padding: 0;
-  background-color: #0000;
+    background-color: #0000;
-  line-height: 1.5;
+    line-height: 1.5;
-  font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  overflow: hidden;
+    overflow: hidden;
 }
 
 @mixin bottom-shadow($transparent) {
-  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, $transparent);
+    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, $transparent);
 }
 
 @mixin top-shadow($transparent) {
-  box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, $transparent);
+    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, $transparent);
 }
 
 #app {
-  height: 100vh;
+    height: 100vh;
 }
 
 .flex-box {
-  display: flex;
+    display: flex;
 }
 
 .flex-box-v {
-  @extend .flex-box;
+    @extend .flex-box;
-  flex-direction: column;
+    flex-direction: column;
 }
 
 .flex-box-h {
-  @extend .flex-box;
+    @extend .flex-box;
-  flex-direction: row;
+    flex-direction: row;
 }
 
 .flex-item {
-  flex: 0 0 auto;
+    flex: 0 0 auto;
 }
 
 .flex-item-expand {
-  flex-grow: 1;
+    flex-grow: 1;
 }
 
 .clickable {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .icon-btn {
-  @extend .clickable;
+    @extend .clickable;
-  line-height: 100%;
+    line-height: 100%;
 }
 
 .ellipsis {
-  white-space: nowrap;
+    white-space: nowrap;
-  overflow: hidden;
+    overflow: hidden;
-  text-overflow: ellipsis;
+    text-overflow: ellipsis;
 }
 
 .fill-height {
-  height: 100%;
+    height: 100%;
 }
 
 .text-block {
-  white-space: pre-line;
+    white-space: pre-line;
 }
 
 .content-wrapper {
-  height: 100%;
+    height: 100%;
-  flex-grow: 1;
+    flex-grow: 1;
-  overflow: hidden;
+    overflow: hidden;
-  gap: 5px;
-  padding-top: 5px;
-  //padding: 5px;
-  box-sizing: border-box;
-  position: relative;
-
-  .tb2 {
     gap: 5px;
-    justify-content: flex-end;
+    padding-top: 5px;
-    align-items: center;
+    //padding: 5px;
-  }
-
-  .value-wrapper {
-    //border-top: v-bind('themeVars.borderColor') 1px solid;
-    user-select: text;
-    //height: 100%;
     box-sizing: border-box;
-  }
+    position: relative;
 
-  .value-item-part {
+    .tb2 {
-    padding: 0 5px;
+        gap: 5px;
-  }
+        justify-content: flex-end;
+        align-items: center;
+    }
 
-  .value-footer {
+    .value-wrapper {
-    @include top-shadow(0.1);
+        //border-top: v-bind('themeVars.borderColor') 1px solid;
-    align-items: center;
+        user-select: text;
-    gap: 0;
+        //height: 100%;
-    padding: 3px 10px 3px 10px;
+        box-sizing: border-box;
-    height: 30px;
+    }
-  }
+
+    .value-item-part {
+        padding: 0 5px;
+    }
+
+    .value-footer {
+        @include top-shadow(0.1);
+        align-items: center;
+        gap: 0;
+        padding: 3px 10px 3px 10px;
+        height: 30px;
+    }
 }
 
 .n-dynamic-input-item {
-  align-items: center;
+    align-items: center;
-  gap: 10px;
+    gap: 10px;
 }
 
 .n-tree-node-content__text {
-  @extend .ellipsis;
+    @extend .ellipsis;
 }
 
 .context-menu-item {
-  min-width: 100px;
+    min-width: 100px;
-  padding-right: 10px;
+    padding-right: 10px;
 }
 
 .nav-pane-container {
-  overflow: hidden;
+    overflow: hidden;
 
-  .nav-pane-func {
+    .nav-pane-func {
-    align-items: center;
+        align-items: center;
-    justify-content: flex-end;
+        justify-content: flex-end;
-    gap: 3px;
+        gap: 3px;
-    padding: 3px 8px;
+        padding: 3px 8px;
-    min-height: 30px;
+        min-height: 30px;
 
-    .nav-pane-func-btn {
+        .nav-pane-func-btn {
-      padding: 3px;
+            padding: 3px;
-      border-radius: 3px;
+            border-radius: 3px;
-      box-sizing: border-box;
+            box-sizing: border-box;
+        }
     }
-  }
 }
 
 .n-modal-mask {
-  --wails-draggable: drag;
+    --wails-draggable: drag;
 }
 
 .n-tabs .n-tabs-nav {
-  line-height: 1.3;
+    line-height: 1.3;
 }
 
 // animations
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s ease;
+    transition: opacity 0.3s ease;
 }
 
 .fade-enter-from,
 .fade-leave-to {
-  opacity: 0;
+    opacity: 0;
 }