feat: add region switcher

Author: antalike

app/components/AppHeader.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ContentNavigationItem } from '@nuxt/content'
 import { getHomePath } from '~/utils'
+import SiteSwitcher from './SiteSwitcher.vue'
 
 const { t, locale } = useI18n()
 const { header } = useAppConfig()
@@ -61,8 +62,9 @@ function gotoHome() {
     <!-- <AssistantCollapse class="ml-2.5" /> -->
 
     <template #right>
+      <SiteSwitcher />
       <LanguageSwitcher />
-      <JoinCommunityButton />
+      <JoinCommunityButton class="hidden sm:flex" />
       <button
         class="hidden sm:flex items-center gap-1.5 h-7 px-2.5 bg-linear-270 from-15% from-linear-primary to-118% to-primary-light rounded-md cursor-pointer"
         @click="gotoHome"

app/components/SiteSwitcher.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+type Site = 'cn' | 'intl'
+interface ItemProps {
+  value: Site
+  label: string
+  description: string
+  to: string
+}
+
+const { t, locale } = useI18n()
+const { docsUrl, docsIntl } = useRuntimeConfig().public
+const langPrefix = locale.value === 'cn' ? '/cn' : ''
+const items = computed<ItemProps[]>(() => [
+  {
+    value: 'cn',
+    label: t('sites.cn.label'),
+    description: t('sites.cn.description'),
+    to: docsUrl as string
+  },
+  {
+    value: 'intl',
+    label: t('sites.intl.label'),
+    description: t('sites.intl.description'),
+    to: docsIntl as string
+  }
+])
+const value = ref<Site>(isIntl() ? 'intl' : 'cn')
+const selected = computed<ItemProps | undefined>(() => items.value.find(item => item.value === value.value))
+
+function onClick(item: ItemProps) {
+  if (item.value === value.value) {
+    return
+  }
+  value.value = item.value
+  navigateTo(`${item.to}${langPrefix}/?site=${item.value}`, { external: true })
+}
+</script>
+
+<template>
+  <UPopover
+    mode="hover"
+    :content="{
+      align: 'start'
+    }"
+    :ui="{
+      content: 'min-w-46 p-2 bg-[#192337] border-1 border-white/10'
+    }"
+  >
+    <button
+      class="group flex items-center h-7 px-2.5 space-x-1.5 text-[#E2E8F0] text-xs font-medium cursor-pointer border border-slate-600 rounded-md hover:border-slate-100 data-[state=open]:border-slate-100"
+    >
+      <UIcon
+        name="i-ri-earth-line"
+        class="size-4"
+      />
+      <span>{{ selected?.label }}</span>
+    </button>
+    <template #content>
+      <div
+        v-for="item in items"
+        :key="item.value"
+        class="flex flex-col gap-0.5 p-1.5 hover:bg-white/10 rounded-md cursor-pointer"
+        @click="onClick(item)"
+      >
+        <span class="text-sm leading-5 text-slate-50">{{ item.label }}</span>
+        <span class="text-sm leading-5 text-[#6A7584]">{{ item.description }}</span>
+      </div>
+    </template>
+  </UPopover>
+</template>

app/composables/useCommon.ts

@@ -51,3 +51,8 @@ export function useCdnUrl(path = '/') {
   const baseUrl = $config.public.cdnUrl || 'https://cdn.memtensor.com.cn'
   return `${baseUrl}${path}`
 }
+
+export function isIntl() {
+  const { $config } = useNuxtApp()
+  return $config.public.env === 'intl'
+}

envConfig/config.intl.ts

@@ -7,5 +7,7 @@ export default {
   playgroundUrl: 'https://memos-playground.memtensor.net',
   staticCdnUrl: 'https://cdn.memt.ai/static',
   cdnUrl: 'https://cdn.memt.ai',
+  docsUrl: 'https://docs-pre.openmem.net',
+  docsIntl: 'https://memos-docs.memtensor.net',
   baseUrl: 'https://api.memt.ai'
 }

envConfig/config.pre.ts

@@ -6,5 +6,7 @@ export default {
   githubMemosUrl: 'https://github.com/MemTensor/MemOS',
   dashboardUrl: 'https://memos-dashboard-pre.openmem.net',
   playgroundUrl: 'https://memos-playground-pre.openmem.net',
+  docsUrl: 'https://docs-pre.openmem.net',
+  docsIntl: 'https://memos-docs.memtensor.net',
   baseUrl: 'https://apigw-pre.memtensor.cn'
 }

envConfig/config.prod.ts

@@ -5,5 +5,7 @@ export default {
   githubMemosUrl: 'https://github.com/MemTensor/MemOS',
   dashboardUrl: 'https://memos-dashboard.openmem.net',
   playgroundUrl: 'https://memos-playground.openmem.net',
+  docsUrl: 'https://memos-docs.openmem.net',
+  docsIntl: 'https://memos-docs.memtensor.net',
   baseUrl: 'https://memos.memtensor.cn'
 }

i18n/locales/cn.js

@@ -100,5 +100,15 @@ export default {
     inputPlaceholder: '请输入你想了解的问题...',
     welcome: 'Hi，我是MemOS知识库助手小忆，您有什么问题可以直接向我提问！',
     systemError: '系统繁忙，请稍后再试'
+  },
+  sites: {
+    cn: {
+      label: '中国大陆',
+      description: '阿里云服务'
+    },
+    intl: {
+      label: '全球',
+      description: '亚马逊云服务'
+    }
   }
 }

i18n/locales/en.js

@@ -100,5 +100,15 @@ export default {
     inputPlaceholder: 'Type your messages here...',
     welcome: 'Hi, I\'m Xiao Yi, your MemOS Knowledge Base Assistant. Feel free to ask me anything you\'d like to know!',
     systemError: 'System is busy, please try again later'
+  },
+  sites: {
+    cn: {
+      label: 'Mainland China',
+      description: 'Alibaba Cloud'
+    },
+    intl: {
+      label: 'Global',
+      description: 'AWS'
+    }
   }
 }