chore: update i18n keys

2026-07-19 19:16:29 +08:00 · 2023-01-10 14:29:18 +08:00
parent bc6cf648f6
commit 9fe4b066f9
23 changed files with 210 additions and 102 deletions
@@ -1,6 +1,6 @@
 import { styled } from '@/styles';
 import { Workspace } from '@affine/datacenter';
-
+import { Trans } from 'react-i18next';
 export const ExportPageTitleContainer = styled('div')(() => {
  return {
    display: 'flex',
@@ -12,8 +12,13 @@ export const ExportPageTitleContainer = styled('div')(() => {
 export const ExportPage = ({ workspace }: { workspace: Workspace }) => {
  return (
    <ExportPageTitleContainer>
-      Export Workspace{' '}
-      <code style={{ margin: '0 10px' }}>{workspace.name}</code> Is Comming
+      <Trans i18nKey="Export Workspace">
+        Export Workspace
+        <code style={{ margin: '0 10px' }}>
+          {{ workspace: workspace.name }}
+        </code>
+        Is Comming
+      </Trans>
    </ExportPageTitleContainer>
  );
 };
@@ -27,6 +27,7 @@ import { Workspace } from '@affine/datacenter';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { StyledMemberWarp } from './general/style';
 import { useConfirm } from '@/providers/ConfirmProvider';
+import { useTranslation } from 'react-i18next';

 // import { useAppState } from '@/providers/app-state-provider';
 export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
@@ -36,6 +37,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
  ]);
  const { user, login, updateWorkspaceMeta } = useTemporaryHelper();
  const { confirm } = useConfirm();
+  const { t } = useTranslation();
  // const refreshMembers = useCallback(() => {
  //   getDataCenter()
  //     .then(dc =>
@@ -66,9 +68,11 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
        <>
          <StyledMemberTitleContainer>
            <StyledMemberNameContainer>
-              Users({members.length})
+              {t('Users')} ({members.length})
            </StyledMemberNameContainer>
-            <StyledMemberRoleContainer>Access level</StyledMemberRoleContainer>
+            <StyledMemberRoleContainer>
+              {t('Access level')}
+            </StyledMemberRoleContainer>
          </StyledMemberTitleContainer>
          <StyledMemberListContainer>
            {members.length ? (
@@ -92,7 +96,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
                          ? 'Member'
                          : 'Workspace Owner'
                        : 'Pending'} */}
-                      Pending
+                      {t('Pending')}
                    </StyledMemberRoleContainer>
                    <StyledMoreVerticalButton>
                      <Menu
@@ -123,7 +127,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
                              }}
                              icon={<TrashIcon />}
                            >
-                              Delete
+                              {t('Delete')}
                            </MenuItem>
                          </>
                        }
@@ -154,7 +158,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
              type="primary"
              shape="circle"
            >
-              Invite Members
+              {t('Invite Members')}
            </Button>
            <InviteMembers
              onClose={() => {
@@ -172,19 +176,17 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
        </>
      ) : (
        <StyledMemberWarp>
-          <div style={{ flex: 1 }}>
-            Collaborating with other members requires AFFiNE Cloud service.
-          </div>
+          <div style={{ flex: 1 }}>{t('Collaboration Description')}</div>
          <div style={{ height: '40px' }}>
            <Button
              type="primary"
              shape="circle"
              onClick={() => {
                confirm({
-                  title: 'Enable AFFiNE Cloud?',
-                  content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
-                  confirmText: user ? 'Enable' : 'Sign in and Enable',
-                  cancelText: 'Skip',
+                  title: `${t('Enable AFFiNE Cloud')}?`,
+                  content: t('Enable AFFiNE Cloud Description'),
+                  confirmText: user ? t('Enable') : t('Sign in and Enable'),
+                  cancelText: t('Skip'),
                }).then(confirm => {
                  if (confirm) {
                    if (user) {
@@ -197,7 +199,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
                });
              }}
            >
-              Enable AFFiNE Cloud
+              {t('Enable AFFiNE Cloud')}
            </Button>
          </div>
        </StyledMemberWarp>
@@ -13,12 +13,13 @@ import { useConfirm } from '@/providers/ConfirmProvider';
 // import { useAppState } from '@/providers/app-state-provider3';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { Workspace } from '@affine/datacenter';
+import { useTranslation } from 'react-i18next';

 export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
  const shareUrl =
    window.location.host + '/workspace/' + workspace.id + '?share=true';
  const { publishWorkspace } = useWorkspaceHelper();
-
+  const { t } = useTranslation();
  const { confirm } = useConfirm();

  const togglePublic = (flag: boolean) => {
@@ -32,11 +33,11 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {

  const enableAffineCloud = () => {
    confirm({
-      title: 'Enable AFFiNE Cloud?',
-      content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
+      title: `${t('Enable AFFiNE Cloud')}?`,
+      content: t('Enable AFFiNE Cloud Description'),
      confirmText:
-        workspace.provider === 'local' ? 'Enable' : 'Sign in and Enable',
-      cancelText: 'Skip',
+        workspace.provider === 'local' ? t('Enable') : t('Sign in and Enable'),
+      cancelText: t('Skip'),
    }).then(confirm => {
      if (confirm) {
        // if (user) {
@@ -56,22 +57,21 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
            {workspace?.isPublish ? (
              <>
                <StyledPublishExplanation>
-                  Publishing to web requires AFFiNE Cloud service .
+                  {t('Publishing')}
                </StyledPublishExplanation>
-                <StyledSettingH2>Share with link</StyledSettingH2>
+                <StyledSettingH2>{t('Share with link')}</StyledSettingH2>
                <StyledPublishCopyContainer>
                  <Input width={500} value={shareUrl} disabled={true}></Input>
                  <StyledCopyButtonContainer>
                    <Button onClick={copyUrl} type="primary" shape="circle">
-                      Copy Link
+                      {t('Copy Link')}
                    </Button>
                  </StyledCopyButtonContainer>
                </StyledPublishCopyContainer>
              </>
            ) : (
              <StyledPublishExplanation>
-                After publishing to the web, everyone can view the content of
-                this workspace through the link.
+                {'Publishing Description'}
              </StyledPublishExplanation>
            )}
          </StyledPublishContent>
@@ -83,7 +83,7 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
              type="primary"
              shape="circle"
            >
-              Stop publishing
+              {t('Stop publishing')}
            </Button>
          ) : (
            <Button
@@ -93,7 +93,7 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
              type="primary"
              shape="circle"
            >
-              Publish to web
+              {t('Publish to web')}
            </Button>
          )}
        </div>
@@ -101,7 +101,7 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
        <StyledPublishContent>
          <>
            <StyledPublishExplanation>
-              Publishing to web requires AFFiNE Cloud service.
+              {t('Publishing')}
            </StyledPublishExplanation>

            <StyledPublishCopyContainer>
@@ -112,7 +112,7 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
                type="primary"
                shape="circle"
              >
-                Enable AFFiNE Cloud
+                {t('Enable AFFiNE Cloud')}
              </Button>
            </StyledPublishCopyContainer>
          </>
@@ -8,9 +8,11 @@ import { Button } from '@/ui/button';
 import { Menu, MenuItem } from '@/ui/menu';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { Workspace } from '@affine/datacenter';
+import { Trans, useTranslation } from 'react-i18next';
 export const SyncPage = ({ workspace }: { workspace: Workspace }) => {
  console.log('workspace: ', workspace);
  const { currentWorkspace, updateWorkspaceMeta } = useTemporaryHelper();
+  const { t } = useTranslation();

  return (
    <div>
@@ -17,6 +17,7 @@ import { Upload } from '@/components/file-upload';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { Workspace } from '@affine/datacenter';
+import { useTranslation } from 'react-i18next';
 export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
  // const { refreshWorkspacesMeta } = useAppState();
  const { updateWorkspaceMeta } = useTemporaryHelper();
@@ -24,6 +25,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
  const [showLeave, setShowLeave] = useState<boolean>(false);
  const [uploading, setUploading] = useState<boolean>(false);
  const [workspaceName, setWorkspaceName] = useState<string>('');
+  const { t } = useTranslation();
  // const debouncedRefreshWorkspacesMeta = debounce(() => {
  //   refreshWorkspacesMeta();
  // }, 100);
@@ -68,7 +70,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {

  return workspace ? (
    <div>
-      <StyledSettingH2 marginTop={56}>Workspace Icon</StyledSettingH2>
+      <StyledSettingH2 marginTop={56}>{t('Workspace Icon')}</StyledSettingH2>
      <StyledSettingAvatarContent>
        <div
          style={{
@@ -83,16 +85,16 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
          accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
          fileChange={fileChange}
        >
-          <Button loading={uploading}>Upload</Button>
+          <Button loading={uploading}>{t('Upload')}</Button>
        </Upload>
        {/* TODO: add upload logic */}
      </StyledSettingAvatarContent>
-      <StyledSettingH2 marginTop={20}>Workspace Name</StyledSettingH2>
+      <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
      <StyledSettingInputContainer>
        <Input
          width={327}
          value={workspaceName}
-          placeholder="Workspace Name"
+          placeholder={t('Workspace Name')}
          maxLength={14}
          minLength={1}
          onChange={handleChangeWorkSpaceName}
@@ -122,7 +124,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
        ''
      )} */}

-      <StyledSettingH2 marginTop={20}>Workspace Type</StyledSettingH2>
+      <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
      <StyledSettingInputContainer>
        <code>{workspace.provider} </code>
      </StyledSettingInputContainer>
@@ -130,7 +132,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
        {isOwner ? (
          <>
            <Button type="danger" shape="circle" onClick={handleClickDelete}>
-              Delete Workspace
+              {t('Delete Workspace')}
            </Button>
            <WorkspaceDelete
              open={showDelete}
@@ -141,7 +143,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
        ) : (
          <>
            <Button type="danger" shape="circle" onClick={handleClickLeave}>
-              Leave Workspace
+              {t('Leave Workspace')}
            </Button>
            <WorkspaceLeave
              open={showLeave}
@@ -18,7 +18,7 @@ import {
  // Workspace,
 } from '@/hooks/mock-data/mock';
 import { Workspace } from '@affine/datacenter';
-
+import { Trans, useTranslation } from 'react-i18next';
 interface WorkspaceDeleteProps {
  open: boolean;
  onClose: () => void;
@@ -31,6 +31,7 @@ export const WorkspaceDelete = ({
  workspace,
 }: WorkspaceDeleteProps) => {
  const [deleteStr, setDeleteStr] = useState<string>('');
+  const { t } = useTranslation();
  const router = useRouter();

  const handlerInputChange = (workspaceName: string) => {
@@ -55,31 +56,40 @@ export const WorkspaceDelete = ({
    <Modal open={open} onClose={onClose}>
      <StyledModalWrapper>
        <ModalCloseButton onClick={onClose} />
-        <StyledModalHeader>Delete Workspace</StyledModalHeader>
+        <StyledModalHeader>{t('Delete Workspace')}</StyledModalHeader>
        {workspace.provider === 'local' ? (
          <StyledTextContent>
-            Deleting (
-            <StyledWorkspaceName>{workspace.name}</StyledWorkspaceName>) cannot
-            be undone, please proceed with caution. along with all its content.
+            <Trans i18nKey="Delete Workspace Description">
+              Deleting (
+              <StyledWorkspaceName>
+                {{ workspace: workspace.name }}
+              </StyledWorkspaceName>
+              ) cannot be undone, please proceed with caution. along with all
+              its content.
+            </Trans>
          </StyledTextContent>
        ) : (
          <StyledTextContent>
-            Deleting (
-            <StyledWorkspaceName>{workspace.name}</StyledWorkspaceName>) will
-            delete both local and cloud data, this operation cannot be undone,
-            please proceed with caution.
+            <Trans i18nKey="Delete Workspace Description2">
+              Deleting (
+              <StyledWorkspaceName>
+                {{ workspace: workspace.name }}
+              </StyledWorkspaceName>
+              ) will delete both local and cloud data, this operation cannot be
+              undone, please proceed with caution.
+            </Trans>
          </StyledTextContent>
        )}
        <StyledInputContent>
          <Input
            onChange={handlerInputChange}
-            placeholder="Please type “Delete” to confirm"
+            placeholder={t('Delete Workspace placeholder')}
            value={deleteStr}
          ></Input>
        </StyledInputContent>
        <StyledButtonContent>
          <Button shape="circle" onClick={onClose}>
-            Cancel
+            {t('Cancel')}
          </Button>
          <Button
            disabled={deleteStr.toLowerCase() !== 'delete'}
@@ -88,7 +98,7 @@ export const WorkspaceDelete = ({
            shape="circle"
            style={{ marginLeft: '24px' }}
          >
-            Delete
+            {t('Delete')}
          </Button>
        </StyledButtonContent>
      </StyledModalWrapper>
@@ -7,6 +7,7 @@ import {
 } from './style';
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
+import { useTranslation } from 'react-i18next';
 // import { getDataCenter } from '@affine/datacenter';
 // import { useAppState } from '@/providers/app-state-provider';

@@ -22,6 +23,7 @@ export const WorkspaceLeave = ({
  onClose,
  workspaceId,
 }: WorkspaceDeleteProps) => {
+  const { t } = useTranslation();
  console.log('workspaceId: ', workspaceId);
  // const router = useRouter();
  // const { refreshWorkspacesMeta } = useAppState();
@@ -37,14 +39,13 @@ export const WorkspaceLeave = ({
    <Modal open={open} onClose={onClose}>
      <StyledModalWrapper>
        <ModalCloseButton onClick={onClose} />
-        <StyledModalHeader>Leave Workspace</StyledModalHeader>
+        <StyledModalHeader>{t('Leave Workspace')}</StyledModalHeader>
        <StyledTextContent>
-          After you leave, you will not be able to access all the contents of
-          this workspace.
+          {t('Leave Workspace Description')}
        </StyledTextContent>
        <StyledButtonContent>
          <Button shape="circle" onClick={onClose}>
-            Cancel
+            {t('Cancel')}
          </Button>
          <Button
            onClick={handleLeave}
@@ -52,7 +53,7 @@ export const WorkspaceLeave = ({
            shape="circle"
            style={{ marginLeft: '24px' }}
          >
-            Leave
+            {t('Leave')}
          </Button>
        </StyledButtonContent>
      </StyledModalWrapper>