chatgpt-web-dev · BobDu · Jun 22, 2025 · Jun 22, 2025 · Jun 22, 2025 · Jun 22, 2025
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -69,6 +69,7 @@ declare global {
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
   const useDialog: typeof import('naive-ui')['useDialog']
+  const useI18n: typeof import('vue-i18n')['useI18n']
   const useId: typeof import('vue')['useId']
   const useLink: typeof import('vue-router')['useLink']
   const useLoadingBar: typeof import('naive-ui')['useLoadingBar']

diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "lint-staged": "^16.1.0",
     "markdown-it": "^14.1.0",
     "markdown-it-link-attributes": "^4.0.1",
-    "naive-ui": "^2.41.1",
+    "naive-ui": "^2.42.0",
     "pinia": "^3.0.2",
     "qrcode.vue": "^3.6.0",
     "rimraf": "^6.0.1",
@@ -60,7 +60,7 @@
     "vite": "6.3.4",
     "vue": "^3.5.16",
     "vue-chartjs": "^5.3.2",
-    "vue-i18n": "11.1.2",
+    "vue-i18n": "^11.1.6",
     "vue-router": "^4.5.1",
     "vue-tsc": "^2.2.10"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/common/PromptStore/index.vue b/src/components/common/PromptStore/index.vue
@@ -4,11 +4,16 @@ import { NButton } from 'naive-ui'
 import { fetchClearUserPrompt, fetchDeleteUserPrompt, fetchImportUserPrompt, fetchUpsertUserPrompt, fetchUserPromptList } from '@/api'
 import { UserPrompt } from '@/components/common/Setting/model'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
-import { t } from '@/locales'
 import { useAuthStoreWithout, usePromptStore } from '@/store'
 import { SvgIcon } from '..'
 import PromptRecommend from '../../../assets/recommend.json'
 
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emit>()
+
+const { t } = useI18n()
+
 interface DataProps {
   _id?: string
   title: string
@@ -24,10 +29,6 @@ interface Emit {
   (e: 'update:visible', visible: boolean): void
 }
 
-const props = defineProps<Props>()
-
-const emit = defineEmits<Emit>()
-
 const message = useMessage()
 
 const show = computed({
@@ -399,7 +400,7 @@ async function handleGetUserPromptList() {
   <NModal v-model:show="show" style="width: 90%; max-width: 900px;" preset="card">
     <div class="space-y-4">
       <NTabs type="segment">
-        <NTabPane name="local" :tab="$t('store.local')">
+        <NTabPane name="local" :tab="t('store.local')">
           <div
             class="flex gap-3 mb-4"
             :class="[isMobile ? 'flex-col' : 'flex-row justify-between']"
@@ -410,28 +411,28 @@ async function handleGetUserPromptList() {
                 size="small"
                 @click="changeShowModal('add')"
               >
-                {{ $t('common.add') }}
+                {{ t('common.add') }}
               </NButton>
               <NButton
                 size="small"
                 @click="changeShowModal('local_import')"
               >
-                {{ $t('common.import') }}
+                {{ t('common.import') }}
               </NButton>
               <NButton
                 size="small"
                 :loading="exportLoading"
                 @click="exportPromptTemplate()"
               >
-                {{ $t('common.export') }}
+                {{ t('common.export') }}
               </NButton>
               <NPopconfirm @positive-click="clearPromptTemplate">
                 <template #trigger>
                   <NButton size="small">
-                    {{ $t('common.clear') }}
+                    {{ t('common.clear') }}
                   </NButton>
                 </template>
-                {{ $t('store.clearStoreConfirm') }}
+                {{ t('store.clearStoreConfirm') }}
               </NPopconfirm>
             </div>
             <div class="flex items-center">
@@ -474,9 +475,9 @@ async function handleGetUserPromptList() {
             </NListItem>
           </NList>
         </NTabPane>
-        <NTabPane name="download" :tab="$t('store.online')">
+        <NTabPane name="download" :tab="t('store.online')">
           <p class="mb-4">
-            {{ $t('store.onlineImportWarning') }}
+            {{ t('store.onlineImportWarning') }}
           </p>
           <div class="flex items-center gap-4">
             <NInput v-model:value="downloadURL" placeholder="" />
@@ -487,7 +488,7 @@ async function handleGetUserPromptList() {
               :loading="importLoading"
               @click="downloadPromptTemplate()"
             >
-              {{ $t('common.download') }}
+              {{ t('common.download') }}
             </NButton>
           </div>
           <NDivider />

diff --git a/src/components/common/PromptTypeTag/index.vue b/src/components/common/PromptTypeTag/index.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { t } from '@/locales'
+defineProps<Props>()
+
+const { t } = useI18n()
 
 interface Props {
   type: 'built-in' | 'user-defined'
 }
-
-defineProps<Props>()
 </script>
 
 <template>

diff --git a/src/components/common/Setting/About.vue b/src/components/common/Setting/About.vue
@@ -1,8 +1,9 @@
 <script setup lang='ts'>
 import { fetchChatConfig, fetchUpdateBaseSetting } from '@/api'
-import { t } from '@/locales'
 import { ConfigState } from './model'
 
+const { t } = useI18n()
+
 const ms = useMessage()
 
 const loading = ref(false)
@@ -46,45 +47,45 @@ onMounted(() => {
     <div class="p-4 space-y-5 min-h-[200px]">
       <div class="space-y-6">
         <div class="flex items-center space-x-4">
-          <span class="shrink-0 w-[100px]">{{ $t('setting.apiBaseUrl') }}</span>
+          <span class="shrink-0 w-[100px]">{{ t('setting.apiBaseUrl') }}</span>
           <div class="flex-1">
             <NInput :value="config.apiBaseUrl" placeholder="https://api.openai.com, Only used by ChatGPTAPI" @input="(val) => { config.apiBaseUrl = val }" />
           </div>
         </div>
         <div class="flex items-center space-x-4">
-          <span class="shrink-0 w-[100px]">{{ $t('setting.reverseProxy') }}</span>
+          <span class="shrink-0 w-[100px]">{{ t('setting.reverseProxy') }}</span>
           <div class="flex-1">
             <NInput :value="config.reverseProxy" placeholder="Only used by ChatGPTUnofficialProxyAPI" @input="(val) => { config.reverseProxy = val }" />
           </div>
         </div>
         <div class="flex items-center space-x-4">
-          <span class="shrink-0 w-[100px]">{{ $t('setting.timeout') }}</span>
+          <span class="shrink-0 w-[100px]">{{ t('setting.timeout') }}</span>
           <div class="flex-1">
             <NInput :value="config.timeoutMs !== undefined ? String(config.timeoutMs) : undefined" placeholder="" @input="(val) => { config.timeoutMs = typeof val === 'string' ? Number(val) : undefined }" />
           </div>
         </div>
         <div class="flex items-center space-x-4">
-          <span class="shrink-0 w-[100px]">{{ $t('setting.socks') }}</span>
+          <span class="shrink-0 w-[100px]">{{ t('setting.socks') }}</span>
           <div class="flex-1">
             <NInput :value="config.socksProxy" placeholder="ip:port" @input="(val) => { config.socksProxy = val }" />
           </div>
         </div>
         <div class="flex items-center space-x-4">
-          <span class="shrink-0 w-[100px]">{{ $t('setting.socksAuth') }}</span>
+          <span class="shrink-0 w-[100px]">{{ t('setting.socksAuth') }}</span>
           <div class="flex-1">
             <NInput :value="config.socksAuth" placeholder="name:pasword" @input="(val) => { config.socksAuth = val }" />
           </div>
         </div>
         <div class="flex items-center space-x-4">
-          <span class="shrink-0 w-[100px]">{{ $t('setting.httpsProxy') }}</span>
+          <span class="shrink-0 w-[100px]">{{ t('setting.httpsProxy') }}</span>
           <div class="flex-1">
             <NInput :value="config.httpsProxy" placeholder="" @input="(val) => { config.httpsProxy = val }" />
           </div>
         </div>
         <div class="flex items-center space-x-4">
           <span class="shrink-0 w-[100px]" />
           <NButton :loading="saving" type="primary" @click="updateBaseSetting(config)">
-            {{ $t('common.save') }}
+            {{ t('common.save') }}
           </NButton>
         </div>
       </div>

diff --git a/src/components/common/Setting/Advanced.vue b/src/components/common/Setting/Advanced.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { t } from '@/locales'
 import { useUserStore } from '@/store'
 
+const { t } = useI18n()
+
 const userStore = useUserStore()
 
 const ms = useMessage()
@@ -22,20 +23,20 @@ function handleReset() {
   <div class="p-4 space-y-5 min-h-[200px]">
     <div class="space-y-6">
       <div class="flex items-center space-x-4">
-        <span class="shrink-0 w-[120px]">{{ $t('setting.role') }}</span>
+        <span class="shrink-0 w-[120px]">{{ t('setting.role') }}</span>
         <div class="flex-1">
           <NInput v-model:value="userStore.userInfo.advanced.systemMessage" type="textarea" :autosize="{ minRows: 1, maxRows: 4 }" />
         </div>
       </div>
       <div class="flex items-center space-x-4">
-        <span class="shrink-0 w-[120px]">{{ $t('setting.temperature') }} </span>
+        <span class="shrink-0 w-[120px]">{{ t('setting.temperature') }} </span>
         <div class="flex-1">
           <NSlider v-model:value="userStore.userInfo.advanced.temperature" :max="1" :min="0" :step="0.1" />
         </div>
         <span>{{ userStore.userInfo.advanced.temperature }}</span>
       </div>
       <div class="flex items-center space-x-4">
-        <span class="shrink-0 w-[120px]">{{ $t('setting.top_p') }} </span>
+        <span class="shrink-0 w-[120px]">{{ t('setting.top_p') }} </span>
         <div class="flex-1">
           <NSlider v-model:value="userStore.userInfo.advanced.top_p" :max="1" :min="0" :step="0.1" />
         </div>
@@ -44,13 +45,13 @@ function handleReset() {
       <div class="flex items-center space-x-4">
         <span class="shrink-0 w-[120px]">&nbsp;</span>
         <NButton type="primary" @click="updateSettings(false)">
-          {{ $t('common.save') }}
+          {{ t('common.save') }}
         </NButton>
         <NButton v-if="userStore.userInfo.root" type="info" @click="updateSettings(true)">
-          {{ $t('common.sync') }}
+          {{ t('common.sync') }}
         </NButton>
         <NButton type="warning" @click="handleReset">
-          {{ $t('common.reset') }}
+          {{ t('common.reset') }}
         </NButton>
       </div>
     </div>

diff --git a/src/components/common/Setting/Anonuncement.vue b/src/components/common/Setting/Anonuncement.vue
@@ -1,7 +1,8 @@
 <script setup lang='ts'>
 import type { AnnounceConfig, ConfigState } from './model'
 import { fetchChatConfig, fetchUpdateAnnounce } from '@/api'
-import { t } from '@/locales'
+
+const { t } = useI18n()
 
 const ms = useMessage()
 
@@ -43,7 +44,7 @@ onMounted(() => {
   <NSpin :show="loading">
     <div class="space-y-6">
       <div class="flex items-center space-x-4">
-        <span class="shrink-0 w-[100px]">{{ $t('setting.announceEnabled') }}</span>
+        <span class="shrink-0 w-[100px]">{{ t('setting.announceEnabled') }}</span>
         <div class="flex-1">
           <NSwitch
             :round="false" :value="config && config.enabled"
@@ -52,7 +53,7 @@ onMounted(() => {
         </div>
       </div>
       <div class="flex items-center space-x-4">
-        <span class="shrink-0 w-[100px]">{{ $t('setting.announceWords') }}</span>
+        <span class="shrink-0 w-[100px]">{{ t('setting.announceWords') }}</span>
         <div class="flex-1">
           <NInput
             :value="config && config.announceWords"
@@ -66,7 +67,7 @@ onMounted(() => {
       <span class="shrink-0 w-[100px]" />
       <div class="flex flex-wrap items-center gap-4">
         <NButton :loading="saving" type="primary" @click="updateAnnouncement()">
-          {{ $t('common.save') }}
+          {{ t('common.save') }}
         </NButton>
       </div>
     </div>