improve internationalization

geek-fun · Aug 7, 2023 · 264e188 · 264e188
1 parent 4405edc
commit 264e188
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lang/index.ts b/src/lang/index.ts
@@ -15,6 +15,13 @@ const enUS = {
     username: 'Username',
     password: 'Password',
     queryParameters: 'query parameters',
+    add: 'Add connection',
+    testSuccess: 'connect success',
+    formValidation: {
+      nameRequired: 'Name is required',
+      hostRequired: 'Host is required',
+      portRequired: 'Port is required',
+    },
   },
   form: {
     confirm: 'Confirm',
@@ -38,6 +45,13 @@ const zhCN = {
     username: '用户名',
     password: '密码',
     queryParameters: '查询参数',
+    add: '添加连接',
+    testSuccess: '连接成功',
+    formValidation: {
+      nameRequired: '请输入连接名称',
+      hostRequired: '请输入主机地址',
+      portRequired: '请输入端口号',
+    },
   },
   form: {
     confirm: '确认',
@@ -51,12 +65,16 @@ if (langType === 'auto') {
   langName = navigator.language === 'zh-CN' ? 'zhCN' : 'enUS';
 }
 
-const i18n = createI18n({
+const lang = createI18n({
   globalInjection: true,
   locale: langName,
+  legacy: false,
   messages: {
     zhCN,
     enUS,
   },
 });
-export default i18n;
+import { useI18n } from 'vue-i18n';
+const useLang = useI18n;
+
+export { lang, useLang };
diff --git a/src/main.ts b/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
-import i18n from './lang';
+import { lang } from './lang';
 
 import './assets/styles/normalize.css';
 import './assets/styles/theme.scss';
@@ -11,6 +11,6 @@ const app = createApp(App);
 
 app.use(router);
 app.use(store);
-app.use(i18n);
+app.use(lang);
 
 app.mount('#app');
diff --git a/src/store/connectionStore.ts b/src/store/connectionStore.ts
@@ -6,10 +6,10 @@ export type Connection = {
   id?: number;
   name: string;
   host: string;
-  port: number;
+  port: number | string;
   username?: string;
   password?: string;
-  linkUrl?: '';
+  queryParameters?: string;
 };
 const { storeAPI } = window;
 export const useConnectionStore = defineStore('connectionStore', {

diff --git a/src/views/connect/components/add-dialog.vue b/src/views/connect/components/add-dialog.vue
@@ -83,13 +83,23 @@
       <template #footer>
         <div class="card-footer">
           <div class="left">
-            <n-button type="info" :loading="testLoading" @click="testConnect">
+            <n-button
+              type="info"
+              :loading="testLoading"
+              :disabled="!validationPassed"
+              @click="testConnect"
+            >
               {{ $t('connection.test') }}
             </n-button>
           </div>
           <div class="right">
             <n-button @click="closeModal">{{ $t('form.cancel') }}</n-button>
-            <n-button type="primary" :loading="saveLoading" @click="saveConnect">
+            <n-button
+              type="primary"
+              :loading="saveLoading"
+              :disabled="!validationPassed"
+              @click="saveConnect"
+            >
               {{ $t('form.confirm') }}
             </n-button>
           </div>
@@ -102,104 +112,77 @@
 <script setup lang="ts">
 import { Close } from '@vicons/carbon';
 import { CustomError } from '../../../common/customError';
-import { useConnectionStore } from '../../../store/connectionStore';
-import { useAppStore } from '../../../store';
-const { testConnection, saveConnection } = useConnectionStore();
+import { Connection, useConnectionStore } from '../../../store/connectionStore';
+import { useLang } from '../../../lang';
+import { FormValidationError } from 'naive-ui';
 
-const appStore = useAppStore();
+const { testConnection, saveConnection } = useConnectionStore();
+const lang = useLang();
 // DOM
 const connectFormRef = ref();
 
 const showModal = ref(false);
-const modalTitle = ref('添加连接');
+const modalTitle = ref(lang.t('connection.add'));
 const testLoading = ref(false);
 const saveLoading = ref(false);
 
-const formOriginData = ref({
+const formData = ref<Connection>({
   name: '',
   host: '',
   port: '9200',
   username: '',
   password: '',
   queryParameters: '',
 });
-const formData = ref(formOriginData.value);
 const formRules = reactive({
   name: [
     {
       required: true,
-      renderMessage: () =>
-        appStore.languageType === 'zhCN' ? '请填写连接名称' : 'Name is required',
+      renderMessage: () => lang.t('connection.formValidation.nameRequired'),
       trigger: ['input', 'blur'],
     },
   ],
   host: [
     {
       required: true,
-      renderMessage: () =>
-        appStore.languageType === 'zhCN' ? '请填写主机地址' : 'Hose is required',
+      renderMessage: () => lang.t('connection.formValidation.hostRequired'),
       trigger: ['input', 'blur'],
     },
   ],
   port: [
     {
       required: true,
-      renderMessage: () => (appStore.languageType === 'zhCN' ? '请填写端口号' : 'Port is required'),
-      trigger: ['input', 'blur'],
-    },
-  ],
-  username: [
-    {
-      required: true,
-      renderMessage: () =>
-        appStore.languageType === 'zhCN' ? '请填写用户名' : 'Username is required',
-      trigger: ['input', 'blur'],
-    },
-  ],
-  password: [
-    {
-      required: true,
-      renderMessage: () =>
-        appStore.languageType === 'zhCN' ? '请填写密码' : 'Password is required',
-      trigger: ['input', 'blur'],
-    },
-  ],
-  queryParameters: [
-    {
-      required: true,
-      renderMessage: () =>
-        appStore.languageType === 'zhCN' ? '请填写查询参数' : 'queryParameters is required',
+      renderMessage: () => lang.t('connection.formValidation.portRequired'),
       trigger: ['input', 'blur'],
     },
   ],
 });
 const message = useMessage();
 
-const showMedal = (obj: object) => {
+const showMedal = (con: Connection | null) => {
   showModal.value = true;
-  if (obj) {
-    // TODO:
-    formData.value = { ...obj };
+  if (con) {
+    formData.value = con;
   }
 };
 const closeModal = () => {
   showModal.value = false;
 };
 
-const formValidation = async (event: MouseEvent): Promise<boolean> => {
-  event.preventDefault();
-  return connectFormRef.value?.validate(errors => {
-    return errors ? false : true;
-  });
-};
+const validationPassed = watch(formData.value, async () => {
+  try {
+    return await connectFormRef.value?.validate((errors: Array<FormValidationError>) => !errors);
+  } catch (e) {
+    return false;
+  }
+});
 
 const testConnect = async (event: MouseEvent) => {
-  const validation = await formValidation(event);
-  if (validation) return;
+  event.preventDefault();
   testLoading.value = !testLoading.value;
   try {
-    await testConnection({ ...formData.value, port: parseInt(formData.value.port) });
-    message.success('connect success');
+    await testConnection({ ...formData.value, port: parseInt(formData.value.port as string) });
+    message.success(lang.t('connection.testSuccess'));
   } catch (e) {
     const error = e as CustomError;
     message.error(`status: ${error.status}, details: ${error.details}`, {
@@ -213,9 +196,9 @@ const testConnect = async (event: MouseEvent) => {
 };
 
 const saveConnect = async (event: MouseEvent) => {
-  await formValidation(event);
+  event.preventDefault();
   saveLoading.value = !saveLoading.value;
-  saveConnection({ ...formData.value, port: parseInt(formData.value.port) });
+  saveConnection({ ...formData.value, port: parseInt(formData.value.port as string) });
   saveLoading.value = !saveLoading.value;
   showModal.value = false;
 };