fix: naive i18n

.vscode/settings.json

@@ -66,8 +66,7 @@
     "yaml",
     "toml"
   ],
-  "i18n-ally.displayLanguage": "zh",
+  "i18n-ally.displayLanguage": "zhCN",
-  // "i18n-ally.enabledParsers": ["ts"],
   "i18n-ally.enabledFrameworks": ["vue"],
   "i18n-ally.editor.preferEditor": true,
   "i18n-ally.keystyle": "nested",

locales/enUS.json

@@ -50,7 +50,8 @@
     "closeOther": "Close other",
     "closeAll": "Close all",
     "closeLeft": "Close left",
-    "closeRight": "Close right"
+    "closeRight": "Close right",
+    "backHome": "Back to the homepage"
   },
   "login": {
     "signInTitle": "Login",

locales/zhCN.json

@@ -50,7 +50,8 @@
     "closeOther": "关闭其他",
     "closeLeft": "关闭左侧",
     "closeRight": "关闭右侧",
-    "closeAll": "全部关闭"
+    "closeAll": "全部关闭",
+    "backHome": "回到首页"
   },
   "login": {
     "signInTitle": "登录",

src/App.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { darkTheme, dateZhCN, zhCN } from 'naive-ui'
+import { darkTheme } from 'naive-ui'
 import { useAppStore } from './store'
+import { naiveI18nOptions } from '@/utils'
 
-const locale = zhCN
-const dateLocale = dateZhCN
 const appStore = useAppStore()
+
+const naiveLocale = computed(() => naiveI18nOptions[appStore.lang])
 </script>
 
 <template>
   <n-config-provider
     class="wh-full" inline-theme-disabled :theme="appStore.colorMode === 'dark' ? darkTheme : null"
-    :locale="locale" :date-locale="dateLocale" :theme-overrides="appStore.theme"
+    :locale="naiveLocale.locale" :date-locale="naiveLocale.dateLocale" :theme-overrides="appStore.theme"
   >
     <naive-provider>
       <router-view />

src/components/common/DarkModeSwitch.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NFlex, NText } from 'naive-ui'
+import { NFlex } from 'naive-ui'
 import { useAppStore } from '@/store'
 import { renderIcon } from '@/utils'
 

src/components/common/ErrorTip.vue

@@ -30,7 +30,7 @@ const router = useRouter()
       type="primary"
       @click="router.push('/')"
     >
-      回到首页
+      {{ $t('app.backHome') }}
     </n-button>
   </div>
 </template>

src/components/common/langsSwitch.vue

@@ -5,11 +5,11 @@ const appStore = useAppStore()
 const options = [
   {
     label: 'English',
-    value: 'en',
+    value: 'enUS',
   },
   {
     label: '中文',
-    value: 'zh',
+    value: 'zhCN',
   },
 ]
 </script>

src/components/custom/CopyText.vue

@@ -1,31 +1,17 @@
 <script setup lang="ts">
 const props = defineProps<{
-  modelValue: string
   maxLength?: string
 }>()
-const emit = defineEmits(['update:modelValue'])
+const modelValue = defineModel<string>()
-
-const text = useVModel(props, 'modelValue', emit)
 </script>
 
 <template>
-  <div v-if="text" class="copy-wrap">
+  <div v-if="modelValue" class="inline-flex items-center gap-0.5em">
-    <n-ellipsis :style="{ 'max-width': maxLength || '12em' }">
+    <n-ellipsis :style="{ 'max-width': props.maxLength || '12em' }">
-      {{ text }}
+      {{ modelValue }}
     </n-ellipsis>
-    <span v-copy="text" class="copy_icon">
+    <span v-copy="modelValue" class="cursor-pointer">
       <icon-park-outline-copy />
     </span>
   </div>
 </template>
-
-<style scoped>
-.copy-wrap{
-  display: inline-flex;
-  align-items: center;
-  gap:0.5em;
-}
-.copy_icon{
-  cursor: pointer;
-}
-</style>

src/components/custom/IconSelect/index.vue

@@ -36,7 +36,7 @@ function handleSelectIcon(icon: string) {
           <nova-icon :icon="item" :size="24" />
         </div>
       </div>
-      <n-empty v-else class="w-full" description="没有符合条件的图标" />
+      <n-empty v-else class="w-full" />
     </div>
   </n-popover>
 </template>

src/components/custom/Pagination.vue

@@ -9,24 +9,6 @@ const emit = defineEmits(['change'])
 const page = ref(1)
 const pageSize = ref(10)
 const displayOrder: Array<'pages' | 'size-picker' | 'quick-jumper'> = ['size-picker', 'pages']
-const pageSizes = [
-  {
-    label: '10 每页',
-    value: 10,
-  },
-  {
-    label: '20 每页',
-    value: 20,
-  },
-  {
-    label: '30 每页',
-    value: 30,
-  },
-  {
-    label: '50 每页',
-    value: 50,
-  },
-]
 
 function changePage() {
   emit('change', page.value, pageSize.value)
@@ -41,7 +23,6 @@ function changePage() {
     :item-count="props.count"
     :display-order="displayOrder"
     show-size-picker
-    :page-sizes="pageSizes"
     @update-page="changePage"
     @update-page-size="changePage"
   />

src/modules/i18n.ts

@@ -1,16 +1,16 @@
 import { createI18n } from 'vue-i18n'
 import type { App } from 'vue'
-import en from '../../locales/en.json'
+import enUS from '../../locales/enUS.json'
-import zh from '../../locales/zh.json'
+import zhCN from '../../locales/zhCN.json'
 import { local } from '@/utils'
 
 export const i18n = createI18n({
   legacy: false,
-  locale: local.get('lang') || 'zh', // 默认显示语言
+  locale: local.get('lang') || 'zhCN', // 默认显示语言
-  fallbackLocale: 'en',
+  fallbackLocale: 'enUS',
   messages: {
-    zh,
+    zhCN,
-    en,
+    enUS,
   },
 })
 

src/service/http/config.ts

@@ -8,7 +8,7 @@ export const DEFAULT_ALOVA_OPTIONS = {
 export const DEFAULT_BACKEND_OPTIONS = {
   codeKey: 'code',
   dataKey: 'data',
-  msgKey: 'msg',
+  msgKey: 'message',
   successCode: 200,
 }
 

src/service/http/handle.ts

@@ -17,12 +17,12 @@ export function handleResponseError(response: Response) {
   const error: Service.RequestError = {
     errorType: 'Response Error',
     code: 0,
-    msg: ERROR_STATUS.default,
+    message: ERROR_STATUS.default,
     data: null,
   }
   const errorCode: ErrorStatus = response.status as ErrorStatus
-  const msg = ERROR_STATUS[errorCode] || ERROR_STATUS.default
+  const message = ERROR_STATUS[errorCode] || ERROR_STATUS.default
-  Object.assign(error, { code: errorCode, msg })
+  Object.assign(error, { code: errorCode, message })
 
   showError(error)
 
@@ -40,7 +40,7 @@ export function handleBusinessError(data: Record<string, any>, config: Required<
   const error: Service.RequestError = {
     errorType: 'Business Error',
     code: data[codeKey],
-    msg: data[msgKey],
+    message: data[msgKey],
     data: data.data,
   }
 
@@ -87,5 +87,5 @@ export function showError(error: Service.RequestError) {
   if (ERROR_NO_TIP_STATUS.includes(code))
     return
 
-  window.$message.error(error.msg)
+  window.$message.error(error.message)
 }

src/store/app/index.ts

@@ -18,7 +18,7 @@ export const useAppStore = defineStore('app-store', {
   state: () => {
     return {
       footerText: 'Copyright © 2024 chansee97',
-      lang: 'zh',
+      lang: 'enUS' as App.lang,
       theme: themeConfig as GlobalThemeOverrides,
       primaryColor: themeConfig.common.primaryColor,
       collapsed: false,

src/store/auth.ts

@@ -54,10 +54,8 @@ export const useAuthStore = defineStore('auth-store', {
     /* 用户登录 */
     async login(userName: string, password: string) {
       const { isSuccess, data } = await fetchLogin({ userName, password })
-      if (!isSuccess) {
+      if (!isSuccess)
-        window.$message.error('登录失败，请检查用户名和密码')
         return
-      }
 
       // 处理登录信息
       await this.handleAfterLogin(data)

src/store/route.ts

@@ -1,7 +1,7 @@
 import type { MenuOption } from 'naive-ui'
 import { RouterLink } from 'vue-router'
 import { h } from 'vue'
-import { clone, construct, min } from 'radash'
+import { clone, construct } from 'radash'
 import type { RouteRecordRaw } from 'vue-router'
 import { $t, arrayToTree, local, renderIcon } from '@/utils'
 import { router } from '@/router'

src/typings/global.d.ts

@@ -46,5 +46,5 @@ declare namespace Storage {
 }
 
 declare namespace App {
-  type lang = 'zh' | 'en'
+  type lang = 'zhCN' | 'enUS'
 }

src/typings/service.d.ts

@@ -29,7 +29,7 @@ declare namespace Service {
     /** 错误码 */
     code: RequestCode
     /** 错误信息 */
-    msg: string
+    message: string
     /** 返回的数据 */
     data?: any
   }
@@ -42,7 +42,7 @@ declare namespace Service {
     /** 错误码 */
     code: RequestCode
     /** 错误信息 */
-    msg: string
+    message: string
     /** 返回的数据 */
     data: T
   }

src/utils/i18n.ts

@@ -1,3 +1,5 @@
+import type { NDateLocale, NLocale } from 'naive-ui'
+import { dateZhCN, zhCN } from 'naive-ui'
 import { i18n } from '@/modules/i18n'
 
 export function setLocale(locale: App.lang) {
@@ -5,3 +7,14 @@ export function setLocale(locale: App.lang) {
 }
 
 export const $t = i18n.global.t
+
+export const naiveI18nOptions: Record<App.lang, { locale: NLocale | null, dateLocale: NDateLocale | null }> = {
+  zhCN: {
+    locale: zhCN,
+    dateLocale: dateZhCN,
+  },
+  enUS: {
+    locale: null,
+    dateLocale: null,
+  },
+}

src/views/login/components/ResetPwd/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { FormInst } from 'naive-ui'
+
 const emit = defineEmits(['update:modelValue'])
 function toLogin() {
   emit('update:modelValue', 'login')