refactor(global): better i18n (#575)

* refactor(global): better i18n

* Update src/locale/index.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* refactor: i18n

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: ZonaHex

src/assets/icons.js

@@ -12,12 +12,23 @@ a-layout-footer.footer
       img.icon(:src="getIconUrl(region.country)")
       .text {{ region.location }}
   .right
-    StatusList(:items="statusRight")
+    a-space(:size="10")
+      a-select(
+        v-if="dev"
+        v-model="currentLocale"
+        size="mini"
+        :style="{ width: '112px' }"
+        @change="onChangeLocale"
+      )
+        a-option(value="en-US") English
+        a-option(value="zh-CN") 中文
+      StatusList(:items="statusRight")
 </template>
 
 <script lang="ts" setup>
   import { getIconUrl } from '@/utils'
   import { useStorage } from '@vueuse/core'
+  import useLocale from '@/hooks/locale'
 
   const { regionVendor, regionLocation, regionCountry, serviceName }: any = useStorage('config', {}).value
   const { host } = storeToRefs(useAppStore())
@@ -31,6 +42,11 @@ a-layout-footer.footer
   })
 
   const vendorIcon = getIconUrl(region.value.vendor)
+
+  const { currentLocale, onChangeLocale } = useLocale()
+
+  // Not yet used in production
+  const dev = import.meta.env.MODE === 'development'
 </script>
 
 <style lang="less" scoped>

src/components/footer/index.vue

@@ -38,22 +38,24 @@ a-layout.navbar
                 | {{ label }}
             a-doption.news(@click="showNews")
               | {{ $t('menu.news') }}
-NewsModal(ref="newsModal" :news-list="newsList" :loading="isLoadingNews")
+NewsModal(ref="newsModal" :news-list="newsListMutable" :loading="isLoadingNews")
 </template>
 
 <script lang="ts" setup name="NavBar">
+  import { useI18n } from 'vue-i18n'
   import { listenerRouteChange } from '@/utils/route-listener'
   import { useNews } from '@/hooks/news'
   import useMenuTree from '../menu/use-menu-tree'
   import NewsModal from './news-modal.vue'
 
   const router = useRouter()
+  const { t } = useI18n()
   const { updateSettings } = useAppStore()
   const { menuSelectedKey, globalSettings, hideSidebar } = storeToRefs(useAppStore())
   const { activeTab: ingestTab } = storeToRefs(useIngestStore())
   const { menuTree } = useMenuTree()
   const { newsList, isLoadingNews } = useNews()
-
+  const newsListMutable = computed(() => (newsList.value ? [...newsList.value] : []))
   const newsModal = ref()
 
   const menu = menuTree.value[0].children

src/components/navbar/index.vue

@@ -43,12 +43,15 @@ a-trigger#time-select(
           :class="isSingleTimeSelected(time.value) ? 'selected' : ''"
           @click="selectTimeLength(time.value)"
         ) {{ time.label }}
-        a-doption(:class="!isRelative ? 'selected' : ''" @click="rangePickerVisible = !rangePickerVisible") Custom
+        a-doption(:class="!isRelative ? 'selected' : ''" @click="rangePickerVisible = !rangePickerVisible") {{ t('time-select.custom') }}
 </template>
 
 <script lang="ts" setup name="TimeSelect">
   import type { OptionsType } from '@/types/global'
   import dayjs from 'dayjs'
+  import { useI18n } from 'vue-i18n'
+
+  const { t } = useI18n()
 
   const props = defineProps({
     timeLength: {

src/components/time-select/index.vue

@@ -1,19 +1,20 @@
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { Message } from '@arco-design/web-vue'
+import { useLocalStorage } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
 
 export default function useLocale() {
-  const i18 = useI18n()
-  const currentLocale = computed(() => {
-    return i18.locale.value
+  const { t, locale } = useI18n()
+
+  const STORAGE_KEY = 'greptime-locale'
+
+  const currentLocale = useLocalStorage(STORAGE_KEY, 'en-US')
+
+  watch(currentLocale, (val) => {
+    locale.value = val
   })
-  const changeLocale = (value: string) => {
-    i18.locale.value = value
-    localStorage.setItem('arco-locale', value)
-    Message.success(i18.t('navbar.action.locale'))
-  }
-  return {
-    currentLocale,
-    changeLocale,
+
+  const onChangeLocale = () => {
+    Message.success(t('navbar.action.locale'))
   }
+  return { currentLocale, onChangeLocale }
 }

src/hooks/locale.ts

@@ -3,17 +3,55 @@ import settings from './en-US/settings'
 import menu from './en-US/menu'
 import playground from './en-US/playground'
 import logsQuery from './en-US/logs-query'
+import flow from './en-US/flow'
 
 export default {
-  'navbar.action.locale': 'Switch to English',
-  'navbar.docs': 'Docs',
+  'copy': 'Copy',
   'copied': 'Copied',
   'guide.confirm': 'Confirm',
   'guide.welcome': 'Welcome!',
+  'navbar.action.locale': 'Switch to English',
+  'navbar.docs': 'Docs',
+  'navbar.newQuery': 'New Query',
   'news.seeAll': 'See all news',
+  'common.retry': 'Retry',
+  'common.cancel': 'Cancel',
+  'common.edit': 'Edit',
+  'common.delete': 'Delete',
+  'common.refresh': 'Refresh',
+  'common.save': 'Save',
+  'common.usage': 'Usage',
+  'common.search': 'Search',
+  'common.clearFilter': 'Clear Filter',
+  'common.export': 'Export',
+  'common.limit': 'Limit',
+  'common.time': 'Time',
+  'common.cost': 'Cost',
+  'common.level': 'Level',
+  'common.message': 'Message',
+  'common.autoRefresh': 'Auto Refresh',
+  'common.stop': 'Stop',
+  'common.all': 'All',
+  'common.pleaseInput': 'Please input...',
+  'time-select.custom': 'Custom',
+  'logs.copyQuery': 'Copy Query',
+  'logs.explainQuery': 'Explain Query',
+  'time-select.last1Minute': 'Last 1 minute',
+  'time-select.last10Minutes': 'Last 10 minutes',
+  'time-select.last30Minutes': 'Last 30 minutes',
+  'time-select.last1Hour': 'Last 1 hour',
+  'time-select.last3Hours': 'Last 3 hours',
+  'time-select.last6Hours': 'Last 6 hours',
+  'time-select.last12Hours': 'Last 12 hours',
+  'time-select.last24Hours': 'Last 24 hours',
+  'time-select.last2Days': 'Last 2 days',
+  'time-select.last7Days': 'Last 7 days',
+  'time-select.last3Days': 'Last 3 days',
+  'time-select.anyTime': 'Any time',
   ...dashboard,
   ...settings,
   ...menu,
   ...playground,
   ...logsQuery,
+  ...flow,
 }

src/locale/en-US.ts

@@ -55,7 +55,6 @@ export default {
   'dashboard.step': 'step',
   'dashboard.supportedDurations': 'Supported Durations',
   'dashboard.table': 'Table',
-  'dashboard.tableTree': 'TABLES',
   'dashboard.total': 'Total: {time} ms',
   'dashboard.xType': 'X-Axis Type',
   'dashboard.yType': 'Y-Axis Types',
@@ -77,9 +76,9 @@ export default {
   'dashboard.importExplain': 'Import Result JSON',
   'dashboard.exportCSV': 'Export Result as CSV',
   'dashboard.wrapLines': 'Wrap Lines',
-  'dashboard.copy': 'Copy',
   'dashboard.hideSidebar': 'Hide sidebar',
   'dashboard.rerunQuery': 'Rerun Query',
   'dashboard.clearResults': 'Clear results?',
   'dashboard.timeAssistance': 'Time Input Assistance',
+  'dashboard.fetchingDatabases': 'Fetching databases...',
 }

src/locale/en-US/dashboard.ts

@@ -0,0 +1,10 @@
+export default {
+  'flow.header.readMore': "GreptimeDB's Flow engine enables real-time computation of data streams, read more",
+  'flow.createSql': 'Flow Create SQL',
+  'flow.save': 'Save',
+  'flow.props': 'Flow Props',
+  'flow.confirmDelete': 'Are you sure you want to delete?',
+  'flow.delete': 'Delete',
+  'flow.sinkData': 'Sink Table Data',
+  'flow.createTitle': 'Create Flow',
+}

src/locale/en-US/flow.ts

@@ -1,38 +1,27 @@
 export default {
+  'menu.dashboard': 'Dashboard',
+  'menu.settings': 'Settings',
   'menu.dashboard.playground': 'Playground',
   'menu.dashboard.query': 'Query',
   'menu.dashboard.metrics': 'Metrics Query',
   'menu.dashboard.tables': 'Tables',
   'menu.dashboard.scripts': 'Scripts',
+  'menu.dashboard.deployment': 'Deployment',
   'menu.dashboard.status': 'Status',
   'menu.dashboard.ingest': 'Ingest',
   'menu.dashboard.influxdb': 'InfluxDB Line Protocol',
   'menu.dashboard.write': 'Write',
   'menu.dashboard.upload': 'Upload',
   'menu.dashboard.input': 'Input',
-  'menu.dashboard': 'Dashboard',
-  'menu.exception': 'Exception',
-  'menu.faq': 'FAQ',
-  'menu.form': 'Form',
-  'menu.list': 'List',
-  'menu.profile': 'Profile',
-  'menu.result': 'Result',
-  'menu.server.dashboard': 'Dashboard-Server',
-  'menu.server.monitor': 'Monitor-Server',
-  'menu.server.workplace': 'Workplace-Server',
-  'menu.user': 'User Center',
-  'menu.visualization': 'Data Visualization',
-  'menu.newQuery': 'New Query',
-  'menu.tour.query':
-    'Check full list of tables and their metadata of your instance. Place SQL and PromQL query in our query editor.',
-  'menu.tour.tables': 'Full list of tables and their metadata of your instance.',
-  'menu.tour.ingest': 'Ingest time-series data from the Ingest UI.',
-  'menu.tour.workbench': 'Build advanced dashboard using UI builder and YAML based configuration, all managed by git.',
+  'menu.dashboard.management': 'Management',
+  'menu.dashboard.log-ingestion': 'Log Ingestion',
   'menu.dashboard.logsQuery': 'Logs Query',
   'menu.dashboard.logPipeline': 'Logs Pipelines',
-  'menu.traces.list': 'Traces Query',
-  'menu.dashboard.log-ingestion': 'Log Ingestion',
-  'menu.news': 'Latest News',
   'menu.dashboard.flow': 'Flow',
   'menu.dashboard.traces': 'Traces Query',
+  'menu.tour.query':
+    'Check full list of tables and their metadata of your instance. Place SQL and PromQL query in our query editor.',
+  'menu.tour.ingest': 'Ingest time-series data from the Ingest UI.',
+  'menu.news': 'Latest News',
+  'menu.feedback': 'Send Feedback',
 }

src/locale/en-US/menu.ts

@@ -6,10 +6,32 @@ export const LOCALE_OPTIONS = [
   { label: '中文', value: 'zh-CN' },
   { label: 'English', value: 'en-US' },
 ]
-const defaultLocale = localStorage.getItem('arco-locale') || import.meta.env.VITE_LANG || 'en-US'
+
+const STORAGE_KEY = 'greptime-locale'
+
+function detectLocale(): string {
+  // 1) explicit storage
+  const stored = localStorage.getItem(STORAGE_KEY)
+  if (stored) return stored
+
+  // 2) env default
+  const envLang = import.meta.env.VITE_LANG
+  if (envLang) return envLang
+
+  // 3) enterprise and browser
+  const appName = import.meta.env.VITE_APP_NAME
+  if (appName === 'enterprise') {
+    const navLang = (navigator.language || navigator.languages?.[0] || '').toLowerCase()
+    if (navLang.startsWith('zh')) return 'zh-CN'
+    return 'en-US'
+  }
+
+  // 4) default to en-US
+  return 'en-US'
+}
 
 const i18n = createI18n({
-  locale: defaultLocale,
+  locale: detectLocale(),
   fallbackLocale: 'en-US',
   allowComposition: true,
   messages: {