feat: add language switch

2026-02-12 04:18:54 +00:00 · 2023-01-06 15:00:42 +08:00
parent 334aaa2d87
commit 3d5f239e4e
9 changed files with 184 additions and 134 deletions
--- a/packages/app/src/components/workspace-modal/index.tsx
+++ b/packages/app/src/components/workspace-modal/index.tsx
@@ -2,6 +2,7 @@ import { styled } from '@/styles';
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useEffect, useState } from 'react';
+import { LanguageMenu } from './languageMenu';
 import {
  getWorkspaces,
  Workspace,
@@ -56,6 +57,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
        >
          <Header>
            <ContentTitle>My Workspaces</ContentTitle>
+            <LanguageMenu />
            <ModalCloseButton
              top={6}
              right={6}
--- a/packages/app/src/components/workspace-modal/languageMenu.tsx
+++ b/packages/app/src/components/workspace-modal/languageMenu.tsx
@@ -0,0 +1,95 @@
+import { LOCALES } from '@/libs/i18n/resources/index';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import type { TooltipProps } from '@mui/material';
+import { styled } from '@/styles';
+import { Button, Tooltip } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const LanguageMenu = () => {
+  const { i18n } = useTranslation();
+  const changeLanguage = (event: string) => {
+    i18n.changeLanguage(event);
+  };
+  const [show, setShow] = useState(false);
+  const currentLanguage = LOCALES.find(item => item.tag === i18n.language);
+  const [languageName, setLanguageName] = useState(
+    currentLanguage?.originalName
+  );
+  return (
+    <StyledTooltip
+      title={
+        <>
+          {LOCALES.map(option => {
+            return (
+              <ListItem
+                key={option.name}
+                title={option.name}
+                onClick={() => {
+                  changeLanguage(option.tag);
+                  setShow(false);
+                  setLanguageName(option.originalName);
+                }}
+              >
+                {option.originalName}
+              </ListItem>
+            );
+          })}
+        </>
+      }
+      open={show}
+    >
+      <StyledTitleButton
+        variant="text"
+        onClick={() => {
+          setShow(!show);
+        }}
+      >
+        <StyledContainer>
+          <StyledText>{languageName}</StyledText>
+          <UnfoldMoreIcon />
+        </StyledContainer>
+      </StyledTitleButton>
+    </StyledTooltip>
+  );
+};
+
+const StyledContainer = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+const StyledText = styled('span')(({ theme }) => ({
+  marginRight: '4px',
+  marginLeft: '16px',
+  fontSize: theme.font.sm,
+  fontWeight: '500',
+  textTransform: 'capitalize',
+}));
+const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  zIndex: theme.zIndex.modal,
+  '& .MuiTooltip-tooltip': {
+    backgroundColor: theme.colors.popoverBackground,
+    boxShadow: theme.shadow.modal,
+    color: theme.colors.popoverColor,
+  },
+}));
+
+const ListItem = styled(Button)(({ theme }) => ({
+  display: 'block',
+  width: '100%',
+  color: theme.colors.popoverColor,
+  fontSize: theme.font.sm,
+  textTransform: 'capitalize',
+}));
+
+const StyledTitleButton = styled(Button)(({ theme }) => ({
+  position: 'absolute',
+  right: '50px',
+  color: theme.colors.popoverColor,
+  fontSize: theme.font.sm,
+}));
--- a/packages/app/src/components/workspace-modal/styles.ts
+++ b/packages/app/src/components/workspace-modal/styles.ts
@@ -1,4 +1,7 @@
 import { displayFlex, styled } from '@/styles';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';

 export const StyledTitle = styled.div(() => {
  return {
@@ -36,3 +39,20 @@ export const StyledButton = styled.div(({ theme }) => {
    ...displayFlex('center', 'center'),
  };
 });
+export const StyledFormControl = styled(FormControl)(({ theme }) => {
+  return {
+    position: 'absolute',
+    minWidth: '100px',
+    right: '50px',
+    backgroundColor: theme.colors.popoverBackground,
+  };
+});
+export const StyledSelect = styled(Select)(({ theme }) => {
+  return {
+    backgroundColor: theme.colors.popoverBackground,
+    color: theme.colors.popoverColor,
+  };
+});
+export const StyledMenuItem = styled(MenuItem)(() => {
+  return {};
+});
--- a/packages/app/src/libs/i18n/resources/bn.json
+++ b/packages/app/src/libs/i18n/resources/bn.json
@@ -1,22 +1 @@
-{
-    "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
-    "Add A Below Block": "নীচে একটি ব্লক যোগ করুন",
-    "WarningTips": {
-        "IsNotfsApiSupported": "অ্যাফাইন ডেমোতে স্বাগতম। পরিবর্তনগুলি সংরক্ষণ করা শুরু করতে আপনি Chrome/Edge এর মতো ক্রোমিয়াম ভিত্তিক ব্রাউজারের সর্বশেষ সংস্করণের মাধ্যমে ডিস্কে ডেটা সিঙ্ক করতে পারেন",
-        "DoNotStore": "অ্যাফাইন সক্রিয় ডেভেলপমেন্ট এর অধীনে এবং বর্তমান সংস্করণটি অস্থিতিশীল।  দয়া করে কোন তথ্য বা ডেটা সঞ্চয় করবেন না"
-    },
-    "Language": "ভাষা",
-    "Settings": "সেটিংস",
-    "Share": "শেয়ার করুন",
-    "Comment": "মন্তব্য",
-    "Delete": "মুছে ফেলুন",
-    "Copy Page Link": "পেজ লিংক কপি করুন",
-    "Duplicate Page": "সদৃশ পৃষ্ঠা তৈরি করুন",
-    "Logout": "লগআউট",
-    "Divide Here As A New Group": "একটি নতুন গ্রুপ হিসেবে বিভক্ত করুন",
-    "ComingSoon": "লেআউট সেটিংস শীঘ্রই আসছে...",
-    "Clear Workspace": "ওয়ার্কস্পেস পরিষ্কার করুন",
-    "Layout": "লেআউট",
-    "Turn into": "রূপান্তর করুন",
-    "Sync to Disk": "ডিস্ক এ সিঙ্ক করুন"
-}
+{}
--- a/packages/app/src/libs/i18n/resources/fr.json
+++ b/packages/app/src/libs/i18n/resources/fr.json
@@ -1,29 +1 @@
-{
-    "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
-    "ComingSoon": "Bientôt disponible",
-    "Duplicate Page": "Dupliquer la page",
-    "Copy Page Link": "Copier le lien de la page",
-    "Delete": "Supprimer",
-    "Comment": "Commentaire",
-    "Export As HTML": "Exporter en HTML",
-    "Export As Markdown": "Exporter en Markdown",
-    "Export As PDF (Unsupported)": "exporter en PDF (non supporté)",
-    "Logout": "Déconnexion",
-    "Export Workspace": "Exporter l'espace de travail",
-    "Import Workspace": "Importer l'espace de travail",
-    "Language": "Langue",
-    "Last edited by": "Dernière édition par {{name}}",
-    "Layout": "Mise en forme",
-    "Settings": "Réglages",
-    "Share": "Partager",
-    "Sync to Disk": "Synchroniser sur le disque",
-    "Turn into": "Transformer en",
-    "WarningTips": {
-        "DoNotStore": "Affine est en développement actif ; la version actuelle est INSTABLE. Veuillez NE PAS stocker d'informations ou de données",
-        "IsNotLocalWorkspace": "Bienvenue sur la démo d'AFFiNE. Pour commencer à sauvegarder vos modifications, vous pouvez SYNCHRONISER SUR LE DISQUE",
-        "IsNotfsApiSupported": "Bienvenue sur la démo d'AFFiNE. Pour commencer à sauvegarder vos modifications, vous pouvez SYNCHRONISER SUR LE DISQUE\navec la dernière version d'un navigateur basé sur Chromium tel que Chrome ou Edge."
-    },
-    "Add A Below Block": "Ajouter un bloc en-dessous",
-    "Divide Here As A New Group": "Séparer ici en un nouveau groupe",
-    "Clear Workspace": "Vider l'espace de travail"
-}
+{}
--- a/packages/app/src/libs/i18n/resources/sr.json
+++ b/packages/app/src/libs/i18n/resources/sr.json
@@ -1,27 +1 @@
-{
-    "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
-    "Clear Workspace": "Očisti radni prostor",
-    "ComingSoon": "Podešavanja za izgled dolaze",
-    "Comment": "Komentar",
-    "Copy Page Link": "Kopiraj link stranice",
-    "Delete": "Obriši",
-    "Duplicate Page": "Dupliraj stranicu",
-    "Export As HTML": "Izvezi kao HTML",
-    "Export As Markdown": "Izvezi kao Markdown",
-    "Export As PDF (Unsupported)": "Izvezi kao PDF (nepodržano)",
-    "Export Workspace": "Izvezi radnu površinu",
-    "Import Workspace": "Poboljšaj radnu površinu",
-    "Language": "Jezik",
-    "Last edited by": "Zadnju promenu uradio {{ime}}",
-    "Layout": "Izgled",
-    "Logout": "Odjava",
-    "Settings": "Podešavanja",
-    "Share": "Podeli",
-    "Sync to Disk": "Sinhroniziraj sa diskom",
-    "Turn into": "Promeni u",
-    "WarningTips": {
-        "DoNotStore": "AFFiNE je u stanju aktivnog razvoja i trenutna verzija je NESTABILNA. Molimo vas, NEMOJTE čuvati informacije ili podatke.",
-        "IsNotLocalWorkspace": "Dobrodošli u AFFiNE demo. Da bi započeli proces čuvanja promena možete kliknuti SINHRONIZUJ SA DISKOM.",
-        "IsNotfsApiSupported": "Dobrodošli u AFFiNE demo. Da bi započeli proces čuvanja promena možete SINHRONIZOVATI NA DISK sa poslednjom verzijom pretraživača tipa Chromium, kao što su Chrome/Edge."
-    }
-}
+{}
--- a/packages/app/src/libs/i18n/resources/zh-Hans.json
+++ b/packages/app/src/libs/i18n/resources/zh-Hans.json
@@ -1,29 +1,65 @@
 {
-  "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
-  "Sync to Disk": "同步到磁盘",
-  "Share": "分享",
-  "WarningTips": {
-    "IsNotfsApiSupported": "欢迎来到AFFiNE 的演示界面。您可以使用最新版本的基于Chrome的浏览器（如Chrome/Edge）将数据同步到磁盘来进行保存",
-    "IsNotLocalWorkspace": "欢迎来到AFFiNE 的演示界面，您可以同步到磁盘来进行保存操作。",
-    "DoNotStore": "AFFiNE 正在积极开发中，当前版本不稳定。请不要存储信息或数据。"
-  },
-  "ComingSoon": "布局设置即将到来",
-  "Layout": "布局",
-  "Comment": "评论",
-  "Settings": "设置",
-  "Duplicate Page": "复制页面",
-  "Copy Page Link": "复制页面链接",
-  "Language": "当前语言",
-  "Clear Workspace": "清空工作区域",
-  "Export As Markdown": "导出 markdown",
-  "Export As HTML": "导出 HTML",
-  "Export As PDF (Unsupported)": "导出 PDF (暂不支持)",
-  "Import Workspace": "导入 Workspace",
-  "Export Workspace": "导出 Workspace",
-  "Last edited by": "最后编辑者为 {{name}}",
-  "Logout": "退出登录",
+  "Quick search": "快速搜索",
+  "All pages": "全部页面",
+  "Favourites": "收藏夹",
+  "No item": "没有项目",
+  "Import": "导入",
+  "Trash": "回收站",
+  "New Page": "新建文章",
+  "New Keyword Page": "新建 '{{query}}' 为标题的文章",
+  "Find 0 result": "找到 0 个结果",
+  "Find results": "找到 {{number}} 个结果",
+  "Collapse sidebar": "关闭侧边栏",
+  "Expand sidebar": "展开侧边栏",
+  "Removed from Favourites": "已从收藏中移除",
+  "Remove from favourites": "从收藏中移除",
+  "Added to Favourites": "已添加到收藏",
+  "Add to favourites": "添加到收藏",
+  "Paper": "文章",
+  "Edgeless": "无边模式",
+  "Switch to": "跳转到",
+  "Convert to ": "转换成 ",
+  "Page": "文章",
+  "Export": "导出",
+  "Export to HTML": "导出到 HTML",
+  "Export to Markdown": "导出到 Markdown",
  "Delete": "删除",
-  "Turn into": "转换为",
-  "Add A Below Block": "在下方添加一个新块",
-  "Divide Here As A New Group": "从这里划分一个新组"
+  "Title": "标题",
+  "Untitled": "无标题",
+  "Created": "创建时间",
+  "Updated": "更新时间",
+  "Open in new tab": "在新页面打开",
+  "Favourite": "收藏",
+  "Favourited": "已收藏",
+  "Delete page?": "删除文章?",
+  "Delete permanently?": "永久删除?",
+  "will be moved to Trash": "{{title}} 将被移动到回收站",
+  "Once deleted, you can't undo this action.": "一次性删除，无法恢复。",
+  "Moved to Trash": "已移动到回收站",
+  "Permanently deleted": "已永久删除",
+  "restored": "{{title}} 已恢复",
+  "Cancel": "取消",
+  "Keyboard Shortcuts": "快捷键",
+  "Contact Us": "联系我们",
+  "Official Website": "官网",
+  "Get in touch!": "Get in touch!",
+  "AFFiNE Community": "AFFiNE Community",
+  "How is AFFiNE Alpha different?": "How is AFFiNE Alpha different?",
+  "Shortcuts": "Shortcuts",
+  "Undo": "Undo",
+  "Redo": "Redo",
+  "Bold": "Bold",
+  "Italic": "Italic",
+  "Underline": "Underline",
+  "Strikethrough": "Strikethrough",
+  "Inline code": "Inline code",
+  "Code block": "Code block",
+  "Link": "Link",
+  "Body text": "Body text",
+  "Heading": "Heading {{number}}",
+  "Increase indent": "Increase indent",
+  "Reduce indent": "Reduce indent",
+  "Markdown Syntax": "Markdown Syntax",
+  "Divider": "Divider",
+  "404 - Page Not Found": "404 - Page Not Found"
 }
--- a/packages/app/src/libs/i18n/resources/zh-Hant.json
+++ b/packages/app/src/libs/i18n/resources/zh-Hant.json
@@ -1,29 +1 @@
-{
-  "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
-  "Add A Below Block": "在下方新添塊",
-  "Clear Workspace": "清空工作區",
-  "ComingSoon": "自定義佈局功能即將與您見面",
-  "Comment": "評論",
-  "Copy Page Link": "拷貝頁面鏈接",
-  "Delete": "刪除",
-  "Divide Here As A New Group": "從此地劃分成新組",
-  "Duplicate Page": "複製界面",
-  "Export As HTML": "導出 HTML",
-  "Export As Markdown": "以 Markdown 導出",
-  "Export As PDF (Unsupported)": "導出為 PDF（即將可用）",
-  "Export Workspace": "導出 Workspace",
-  "Import Workspace": "導入 Workspace",
-  "Language": "語言",
-  "Last edited by": "最後編輯者為  {{name}}",
-  "Layout": "佈局",
-  "Logout": "退出登錄",
-  "Settings": "設置",
-  "Share": "分享",
-  "Sync to Disk": "同步到磁盤",
-  "Turn into": "轉換為",
-  "WarningTips": {
-    "DoNotStore": "我們正在積極開發 AFFiNE，目前版本尚不穩定，請避免存儲信息或數據。",
-    "IsNotLocalWorkspace": "歡迎來到 AFFiNE 演示界面。您可以通過「同步到磁盤」來保存更改。",
-    "IsNotfsApiSupported": "歡迎進入AFFiNE演示！使用最新版本的基於 Chromium 內核的瀏覽器如Chrome/Edge，您可以通過「同步到磁盤」來保存更改"
-  }
-}
+{}
--- a/packages/app/src/ui/confirm/Confirm.tsx
+++ b/packages/app/src/ui/confirm/Confirm.tsx
@@ -52,7 +52,7 @@ export const Confirm = ({
            }}
            style={{ marginRight: '24px' }}
          >
-            {cancelText}
+            {cancelText === 'Cancel' ? t('Cancel') : cancelText}
          </Button>
          <Button
            type={confirmType}