feat: disable input autocompletion and ui improvement (#133)

feat: disable input autocompletion and ui improvement - disable autocapitalize autocompletion - setup secondary background - several ui improvement Refs: #16 --------- Signed-off-by: seven <[email protected]>
geek-fun · Nov 10, 2024 · 6763e78 · 6763e78
1 parent 2f1ab01
commit 6763e78
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 35 deletions.
diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
@@ -13,6 +13,7 @@ body,
 }
 :root[theme='light'] {
   --bg-color: #f1f1f1;
+  --bg-color-secondary: #fFfFfF;
   --text-color: #333;
   --border-color: #d1d1d1;
   --gray-color: #999;
@@ -21,6 +22,7 @@ body,
 }
 :root[theme='dark'] {
   --bg-color: #101014;
+  --bg-color-secondary: #1b1b1f;
   --text-color: #f1f1f1;
   --border-color: #363b41;
   --gray-color: #c1c1c1;

diff --git a/src/common/pureObject.ts b/src/common/pureObject.ts
@@ -1 +1,8 @@
 export const pureObject = (obj: unknown) => JSON.parse(JSON.stringify(obj));
+export const inputProps = {
+  autocapitalize: 'off',
+  autocomplete: 'off',
+  // @ts-ignore
+  spellCheck: false,
+  autocorrect: 'off',
+};
diff --git a/src/views/connect/components/connect-dialog.vue b/src/views/connect/components/connect-dialog.vue
@@ -29,6 +29,7 @@
                   v-model:value="formData.name"
                   clearable
                   :placeholder="$t('connection.name')"
+                  :input-props="inputProps"
                 />
               </n-form-item>
             </n-grid-item>
@@ -45,6 +46,7 @@
                     clearable
                     v-model:value="formData.host"
                     placeholder="http://localhost"
+                    :input-props="inputProps"
                   />
                   <n-popover trigger="hover" placement="top-start">
                     <template #trigger>
@@ -82,6 +84,7 @@
                   v-model:value="formData.username"
                   clearable
                   :placeholder="$t('connection.username')"
+                  :input-props="inputProps"
                 />
               </n-form-item>
             </n-grid-item>
@@ -92,6 +95,7 @@
                   type="password"
                   show-password-on="mousedown"
                   :placeholder="$t('connection.password')"
+                  :input-props="inputProps"
                 />
               </n-form-item>
             </n-grid-item>
@@ -101,6 +105,7 @@
                   v-model:value="formData.indexName"
                   clearable
                   :placeholder="$t('connection.indexName')"
+                  :input-props="inputProps"
                 />
               </n-form-item>
             </n-grid-item>
@@ -110,6 +115,7 @@
                   v-model:value="formData.queryParameters"
                   clearable
                   :placeholder="$t('connection.queryParameters')"
+                  :input-props="inputProps"
                 />
               </n-form-item>
             </n-grid-item>
@@ -148,7 +154,7 @@
 <script setup lang="ts">
 import { reactive, ref, watch } from 'vue';
 import { Close, Locked, Unlocked } from '@vicons/carbon';
-import { CustomError } from '../../../common';
+import { CustomError, inputProps } from '../../../common';
 import { Connection, useConnectionStore } from '../../../store';
 import { useLang } from '../../../lang';
 import { FormItemRule, FormRules, FormValidationError } from 'naive-ui';

diff --git a/src/views/file/components/file-list.vue b/src/views/file/components/file-list.vue
@@ -134,6 +134,7 @@ onUnmounted(() => {
   flex: 1;
   height: 0;
   padding-bottom: 10px;
+  background-color: var(--bg-color-secondary);
 
   .scroll-container {
     .file-item {

diff --git a/src/views/file/components/new-file-dialog.vue b/src/views/file/components/new-file-dialog.vue
@@ -16,7 +16,7 @@
       </template>
       <div class="modal-content">
         <n-form
-          ref="connectFormRef"
+          ref="fileFormRef"
           label-placement="left"
           label-width="100"
           :model="formData"
@@ -25,7 +25,18 @@
           <n-grid cols="8" item-responsive responsive="screen" x-gap="10" y-gap="10">
             <n-grid-item span="8">
               <n-form-item :label="$t('file.name')" path="path">
-                <n-input v-model:value="formData.path" clearable :placeholder="$t('file.name')" />
+                <n-input
+                  v-model:value="formData.path"
+                  clearable
+                  :input-props="{
+                    autocapitalize: 'off',
+                    autocomplete: 'off',
+                    // @ts-ignore
+                    spellCheck: false,
+                    autocorrect: 'off',
+                  }"
+                  :placeholder="$t('file.name')"
+                />
               </n-form-item>
             </n-grid-item>
           </n-grid>
@@ -60,7 +71,7 @@ const lang = useLang();
 const fileStore = useSourceFileStore();
 const { createFileOrFolder, renameFileOrFolder } = fileStore;
 
-const connectFormRef = ref();
+const fileFormRef = ref();
 const showModal = ref(false);
 const modalTitle = ref('');
 const saveLoading = ref(false);
@@ -107,15 +118,15 @@ const closeModal = () => {
 
 const validationPassed = watch(formData.value, async () => {
   try {
-    return await connectFormRef.value?.validate((errors: Array<FormValidationError>) => !errors);
+    return await fileFormRef.value?.validate((errors: Array<FormValidationError>) => !errors);
   } catch (e) {
     return false;
   }
 });
 
 const submitNewFile = (event: MouseEvent) => {
   event.preventDefault();
-  connectFormRef.value?.validate(async (errors: boolean) => {
+  fileFormRef.value?.validate(async (errors: boolean) => {
     try {
       if (!errors) {
         saveLoading.value = true;

diff --git a/src/views/file/components/tool-bar.vue b/src/views/file/components/tool-bar.vue
@@ -72,7 +72,7 @@ const handleToolBarAction = async (id: ToolBarAction) => {
     color: gray;
 
     &:hover {
-      color: lightcyan;
+      color: var(--theme-color);
     }
   }
 }

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
@@ -4,14 +4,20 @@
       <h1>DocKit</h1>
       <n-form ref="loginFormRef" :model="loginForm" :rules="loginRules" :show-label="false">
         <n-form-item path="name">
-          <n-input v-model:value="loginForm.name" clearable :placeholder="$t('login.enterName')" />
+          <n-input
+            v-model:value="loginForm.name"
+            clearable
+            :placeholder="$t('login.enterName')"
+            :input-props="inputProps"
+          />
         </n-form-item>
         <n-form-item path="password">
           <n-input
             v-model:value="loginForm.password"
             type="password"
             show-password-on="mousedown"
             :placeholder="$t('login.enterPwd')"
+            :input-props="inputProps"
           />
         </n-form-item>
         <n-button type="primary" @click="handleLogin">
@@ -30,6 +36,7 @@
 import { useUserStore } from '../../store';
 import { router } from '../../router';
 import { useLang } from '../../lang';
+import { inputProps } from '../../common';
 
 const userStore = useUserStore();
 const lang = useLang();

diff --git a/src/views/manage/components/alias-dialog.vue b/src/views/manage/components/alias-dialog.vue
@@ -26,11 +26,7 @@
             <n-grid-item span="8">
               <n-form-item :label="$t('manage.index.newAliasForm.aliasName')" path="aliasName">
                 <n-input
-                  :input-props="{
-                    autocorrect: 'off',
-                    autocapitalize: 'off',
-                    autocomplete: 'disabled',
-                  }"
+                  :input-props="inputProps"
                   v-model:value="formData.aliasName"
                   clearable
                   :placeholder="$t('manage.index.newAliasForm.aliasName')"
@@ -123,7 +119,7 @@
 import { storeToRefs } from 'pinia';
 import { FormRules, FormValidationError, NButton, NIcon, FormItemRule } from 'naive-ui';
 import { Close } from '@vicons/carbon';
-import { CustomError } from '../../../common';
+import { CustomError, inputProps } from '../../../common';
 import { useClusterManageStore } from '../../../store';
 import { useLang } from '../../../lang';
 

diff --git a/src/views/manage/components/index-dialog.vue b/src/views/manage/components/index-dialog.vue
@@ -26,11 +26,7 @@
             <n-grid-item span="8">
               <n-form-item :label="$t('manage.index.newIndexForm.indexName')" path="indexName">
                 <n-input
-                  :input-props="{
-                    autocorrect: 'off',
-                    autocapitalize: 'off',
-                    autocomplete: 'disabled',
-                  }"
+                  :input-props="inputProps"
                   v-model:value="formData.indexName"
                   clearable
                   :placeholder="$t('manage.index.newIndexForm.indexName')"
@@ -122,7 +118,7 @@
 <script setup lang="ts">
 import { FormRules, FormValidationError, NButton, NIcon, FormItemRule } from 'naive-ui';
 import { Close } from '@vicons/carbon';
-import { CustomError } from '../../../common';
+import { CustomError, inputProps } from '../../../common';
 import { useClusterManageStore } from '../../../store';
 import { useLang } from '../../../lang';
 

diff --git a/src/views/manage/components/switch-alias-dialog.vue b/src/views/manage/components/switch-alias-dialog.vue
@@ -25,13 +25,13 @@
           <n-grid cols="8" item-responsive responsive="screen" x-gap="10" y-gap="10">
             <n-grid-item span="8">
               <n-form-item :label="$t('manage.index.switchAliasForm.aliasName')" path="aliasName">
-                <n-input v-model:value="formData.aliasName" disabled />
+                <n-input v-model:value="formData.aliasName" disabled :input-props="inputProps" />
               </n-form-item>
               <n-form-item
                 :label="$t('manage.index.switchAliasForm.sourceIndex')"
                 path="sourceIndex"
               >
-                <n-input v-model:value="formData.sourceIndex" disabled />
+                <n-input v-model:value="formData.sourceIndex" disabled :input-props="inputProps" />
               </n-form-item>
             </n-grid-item>
             <n-grid-item span="8">
@@ -66,7 +66,7 @@
 import { storeToRefs } from 'pinia';
 import { FormRules, FormValidationError, NButton, NIcon } from 'naive-ui';
 import { Close } from '@vicons/carbon';
-import { CustomError } from '../../../common';
+import { CustomError, inputProps } from '../../../common';
 import { useClusterManageStore } from '../../../store';
 import { useLang } from '../../../lang';
 

diff --git a/src/views/manage/components/template-dialog.vue b/src/views/manage/components/template-dialog.vue
@@ -30,11 +30,7 @@
               <n-grid-item span="8">
                 <n-form-item :label="$t('manage.index.newTemplateForm.templateName')" path="name">
                   <n-input
-                    :input-props="{
-                      autocorrect: 'off',
-                      autocapitalize: 'off',
-                      autocomplete: 'disabled',
-                    }"
+                    :input-props="inputProps"
                     v-model:value="indexFormData.name"
                     clearable
                     :placeholder="$t('manage.index.newTemplateForm.templateName')"
@@ -87,11 +83,7 @@
               <n-grid-item span="8">
                 <n-form-item :label="$t('manage.index.newTemplateForm.templateName')" path="name">
                   <n-input
-                    :input-props="{
-                      autocorrect: 'off',
-                      autocapitalize: 'off',
-                      autocomplete: 'disabled',
-                    }"
+                    :input-props="inputProps"
                     v-model:value="componentFormData.name"
                     clearable
                     :placeholder="$t('manage.index.newTemplateForm.templateName')"
@@ -149,7 +141,7 @@
 <script setup lang="ts">
 import { FormRules, FormValidationError, NButton, NIcon, FormItemRule } from 'naive-ui';
 import { Close } from '@vicons/carbon';
-import { CustomError } from '../../../common';
+import { CustomError, inputProps } from '../../../common';
 import { TemplateType, useClusterManageStore } from '../../../store';
 import { useLang } from '../../../lang';
 

diff --git a/src/views/setting/components/aigc.vue b/src/views/setting/components/aigc.vue
@@ -7,6 +7,7 @@
             <n-input
               v-model:value="openAi.model"
               :placeholder="$t('setting.ai.modelPlaceholder')"
+              :input-props="inputProps"
             />
           </n-form-item-row>
           <n-form-item-row :label="$t('setting.ai.apiKey')">
@@ -15,18 +16,24 @@
               show-password-on="click"
               v-model:value="openAi.apiKey"
               :placeholder="$t('setting.ai.apiKeyPlaceholder')"
+              :input-props="inputProps"
             />
           </n-form-item-row>
           <n-form-item-row :label="$t('setting.ai.prompt')">
             <n-input
               type="textarea"
               v-model:value="openAi.prompt"
               :placeholder="$t('setting.ai.defaultPrompt')"
+              :input-props="inputProps"
             />
           </n-form-item-row>
           <n-divider />
           <n-form-item-row :label="$t('setting.ai.proxy')">
-            <n-input v-model:value="openAi.httpProxy" placeholder="http://127.0.0.1:7890" />
+            <n-input
+              v-model:value="openAi.httpProxy"
+              placeholder="http://127.0.0.1:7890"
+              :input-props="inputProps"
+            />
           </n-form-item-row>
           <n-button type="error" @click="reset" class="action-button">
             {{ $t('setting.ai.form.reset') }}
@@ -47,6 +54,7 @@
 import { useAppStore, useChatStore } from '../../../store';
 import { storeToRefs } from 'pinia';
 import { useMessage } from 'naive-ui';
+import { inputProps } from '../../../common';
 
 const appStore = useAppStore();
 const { fetchAigcConfig, saveAigcConfig } = appStore;