15308555518/ frontend
1
0
Fork 0
mirror of https://github.com/cloudreve/frontend.git synced 2025-12-25 19:52:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

i18n: navbar related components

This commit is contained in:
HFO4 2022-05-02 10:26:15 +08:00
parent 8a172a69f0
commit bb23d3e55b
14 changed files with 321 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
public/locales/en-US/application.json
View File

@ -31,6 +31,57 @@
"sinUpTitle": "Sign up to {{title}}",
"activateTitle": "Activate your account",
"activateDescription": "An activation email has been sent to your email address, please visit the link in the email to complete your sign-up.",
"continue": "Next"
"continue": "Next",
"logout": "Sign out",
"loggedOut": "You are signed out now."
},
"navbar": {
"myFiles": "My Files",
"myShare": "Shared",
"remoteDownload": "Remote Download",
"connect": "Connect",
"taskQueue": "Task Queue",
"setting": "Settings",
"videos": "Videos",
"photos": "Photos",
"music": "Music",
"documents": "Documents",
"addATag": "Add a tag...",
"addTagDialog": {
"selectFolder": "Select a Folder",
"fileSelector": "File Selector",
"folderLink": "Folder Shortcut",
"tagName": "Tag name",
"matchPattern": "Match pattern(s) of file name",
"matchPatternDescription": "You can use <0>*</0> as a wildcard. For example, <1>*.png</1> means match png format images. Multi-line rules will operate in an \"or\" relationship with each other.",
"icon": "Icon:",
"color": "Color:",
"folderPath": "Path to the folder"
},
"storage": "Storage",
"storageDetail": "{{used}} of {{total}} used",
"notLoginIn": "Not sign in",
"visitor": "Anonymous",
"objectsSelected": "{{num}} objects selected",
"searchPlaceholder": "Search...",
"searchInFiles": "Search <0>{{name}}</0> in my files",
"searchInFolders": "Search <0>{{name}}</0> under current folder",
"searchInShares": "Search <0>{{name}}</0> in other users’ shares",
"backToHomepage": "Back to homepage",
"toDarkMode": "Switch to dark theme",
"toLightMode": "Switch to light theme",
"myProfile": "My profile",
"dashboard": "Dashboard",
"exceedQuota": "Your used capacity has exceeded the quota, please delete the extra files."
},
"fileManager": {
"open": "Open",
"download": "Download",
"batchDownload": "Download in batch",
"share": "Share",
"rename": "Rename",
"move": "Move",
"delete": "Remove",
"moreActions": "More actions..."
}
}

3
public/locales/en-US/common.json
View File

@ -5,6 +5,9 @@
"newVersionRefresh": "A new version of the current page is available and ready to be refreshed.",
"errorDetails": "Error details",
"renderError": "There is an error in the page rendering, please try refreshing this page.",
"ok": "OK",
"cancel": "Cancel",
"select": "Select",
"errors": {
"40020": "Wrong password or email address.",
"40017": "This account has been blocked.",

53
public/locales/zh-CN/application.json
View File

@ -31,6 +31,57 @@
"sinUpTitle": "注册 {{title}}",
"activateTitle": "邮件激活",
"activateDescription": "一封激活邮件已经发送至您的邮箱，请访问邮件中的链接以继续完成注册。",
"continue": "下一步"
"continue": "下一步",
"logout": "退出登录",
"loggedOut": "您已退出登录"
},
"navbar": {
"myFiles": "我的文件",
"myShare": "我的分享",
"remoteDownload": "离线下载",
"connect": "连接",
"taskQueue": "任务队列",
"setting": "个人设置",
"videos": "视频",
"photos": "图片",
"music": "音乐",
"documents": "文档",
"addATag": "添加标签...",
"addTagDialog": {
"selectFolder": "选择目录",
"fileSelector": "文件分类",
"folderLink": "目录快捷方式",
"tagName": "标签名",
"matchPattern": "文件名匹配规则",
"matchPatternDescription": "你可以使用 <0>*</0> 作为通配符。比如 <1>*.png</1> 表示匹配 png 格式图像。多行规则间会以 “或” 的关系进行运算。",
"icon": "图标：",
"color": "颜色：",
"folderPath": "目录路径"
},
"storage": "存储空间",
"storageDetail": "已使用 {{used}}, 共 {{total}}",
"notLoginIn": "未登录",
"visitor": "游客",
"objectsSelected": "{{num}} 个对象",
"searchPlaceholder": "搜索...",
"searchInFiles": "在我的文件中搜索 <0>{{name}}</0>",
"searchInFolders": "在当前目录中搜索 <0>{{name}}</0>",
"searchInShares": "在全站分享中搜索 <0>{{name}}</0>",
"backToHomepage": "返回主页",
"toDarkMode": "切换到深色模式",
"toLightMode": "切换到浅色模式",
"myProfile": "个人主页",
"dashboard": "管理面板",
"exceedQuota": "您的已用容量已超过容量配额，请尽快删除多余文件"
},
"fileManager": {
"open": "打开",
"download": "下载",
"batchDownload": "打包下载",
"share": "分享",
"rename": "重命名",
"move": "移动",
"delete": "删除",
"moreActions": "更多操作"
}
}

3
public/locales/zh-CN/common.json
View File

@ -5,6 +5,9 @@
"newVersionRefresh": "当前页面有新版本可用，准备刷新。",
"errorDetails": "错误详情",
"renderError": "页面渲染出现错误，请尝试刷新此页面。",
"ok": "确定",
"cancel": "取消",
"select": "选择",
"errors": {
"40020": "用户邮箱或密码错误",
"40017": "该账号已被封禁",

51
src/component/Modals/AddTag.js
View File

@ -1,12 +1,13 @@
import React, { useState, useCallback } from "react";
import { makeStyles, useTheme } from "@material-ui/core";
import React, { useCallback, useState } from "react";
import {
Button,
CircularProgress,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
CircularProgress,
makeStyles,
useTheme,
} from "@material-ui/core";
import PathSelector from "../FileManager/PathSelector";
import { useDispatch } from "react-redux";
@ -35,6 +36,7 @@ import {
Triangle,
} from "mdi-material-ui";
import { toggleSnackbar } from "../../redux/explorer";
import { Trans, useTranslation } from "react-i18next";
const useStyles = makeStyles((theme) => ({
contentFix: {
@ -93,6 +95,7 @@ const icons = {
export default function AddTag(props) {
const theme = useTheme();
const { t } = useTranslation();
const [value, setValue] = React.useState(0);
const [loading, setLoading] = React.useState(false);
@ -229,7 +232,9 @@ export default function AddTag(props) {
onClose={() => setPathSelectDialog(false)}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">选择目录</DialogTitle>
<DialogTitle id="form-dialog-title">
{t("navbar.addTagDialog.selectFolder")}
</DialogTitle>
<PathSelector
presentPath="/"
selected={[]}
@ -238,14 +243,14 @@ export default function AddTag(props) {
<DialogActions>
<Button onClick={() => setPathSelectDialog(false)}>
取消
{t("common:cancel")}
</Button>
<Button
onClick={selectPath}
color="primary"
disabled={selectedPath === ""}
>
确定
{t("common:ok")}
</Button>
</DialogActions>
</Dialog>
@ -257,14 +262,14 @@ export default function AddTag(props) {
variant="fullWidth"
aria-label="full width tabs example"
>
<Tab label="文件分类" />
<Tab label="目录快捷方式" />
<Tab label={t("navbar.addTagDialog.fileSelector")} />
<Tab label={t("navbar.addTagDialog.folderLink")} />
</Tabs>
</AppBar>
{value === 0 && (
<DialogContent className={classes.dialogContent}>
<TextField
label="标签名"
label={t("navbar.addTagDialog.tagName")}
id="filled-name"
value={input["tagName"]}
onChange={handleInputChange("tagName")}
@ -273,21 +278,21 @@ export default function AddTag(props) {
/>
<TextField
id="filled-name"
label="文件名匹配规则"
label={t("navbar.addTagDialog.matchPattern")}
value={input["filename"]}
onChange={handleInputChange("filename")}
fullWidth
rows="4"
multiline
variant="filled"
className={classes.textField}
/>
<Typography variant="caption" color={"textSecondary"}>
你可以使用<code>*</code>作为通配符。比如
<code>*.png</code>
表示匹配png格式图像。多行规则间会以“或”的关系进行运算。
<Trans i18nKey="navbar.addTagDialog.matchPatternDescription">
{[<code key={0} />, <code key={1} />]}
</Trans>
</Typography>
<FormLabel className={classes.marginTop}>图标：</FormLabel>
<FormLabel className={classes.marginTop}>
{t("navbar.addTagDialog.icon")}
</FormLabel>
<div className={classes.scroll}>
<ToggleButtonGroup
size="small"
@ -303,7 +308,9 @@ export default function AddTag(props) {
))}
</ToggleButtonGroup>
</div>
<FormLabel className={classes.marginTop}>颜色：</FormLabel>
<FormLabel className={classes.marginTop}>
{t("navbar.addTagDialog.color")}
</FormLabel>
<div className={classes.scroll}>
<ToggleButtonGroup
size="small"
@ -344,7 +351,7 @@ export default function AddTag(props) {
{value === 1 && (
<DialogContent className={classes.dialogContent}>
<TextField
label="标签名"
label={t("navbar.addTagDialog.tagName")}
id="filled-name"
value={input["tagName"]}
onChange={handleInputChange("tagName")}
@ -353,7 +360,7 @@ export default function AddTag(props) {
/>
<div className={classes.pathSelect}>
<TextField
label="目录路径"
label={t("navbar.addTagDialog.folderPath")}
id="filled-name"
value={input["path"]}
onChange={handleInputChange("path")}
@ -369,13 +376,13 @@ export default function AddTag(props) {
color="primary"
variant="outlined"
>
选择
{t("common:select")}
</Button>
</div>
</DialogContent>
)}
<DialogActions>
<Button onClick={props.onClose}>取消</Button>
<Button onClick={props.onClose}>{t("common:cancel")}</Button>
<div className={classes.wrapper}>
<Button
onClick={submit}
@ -389,7 +396,7 @@ export default function AddTag(props) {
(input.tagName === "" || input.path === ""))
}
>
确定
{t("common:ok")}
{loading && (
<CircularProgress
size={24}

6
src/component/Navbar/DarkModeSwitcher.js
View File

@ -7,6 +7,7 @@ import Tooltip from "@material-ui/core/Tooltip";
import Auth from "../../middleware/Auth";
import classNames from "classnames";
import { toggleDaylightMode } from "../../redux/explorer";
import { useTranslation } from "react-i18next";
const useStyles = makeStyles(() => ({
icon: {
@ -16,6 +17,7 @@ const useStyles = makeStyles(() => ({
}));
const DarkModeSwitcher = ({ position }) => {
const { t } = useTranslation();
const ThemeType = useSelector(
(state) => state.siteConfig.theme.palette.type
);
@ -32,7 +34,9 @@ const DarkModeSwitcher = ({ position }) => {
const classes = useStyles();
return (
<Tooltip
title={isDayLight ? "切换到深色模式" : "切换到浅色模式"}
title={
isDayLight ? t("navbar.toDarkMode") : t("navbar.toLightMode")
}
placement="bottom"
>
<IconButton

14
src/component/Navbar/FileTags.js
View File

@ -45,6 +45,7 @@ import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import IconButton from "@material-ui/core/IconButton";
import API from "../../middleware/Api";
import { navigateTo, searchMyFile, toggleSnackbar } from "../../redux/explorer";
import { useTranslation } from "react-i18next";
const ExpansionPanel = withStyles({
root: {
@ -135,6 +136,7 @@ const AddTag = React.lazy(() => import("../Modals/AddTag"));
export default function FileTag() {
const classes = useStyles();
const { t } = useTranslation();
const location = useLocation();
const history = useHistory();
@ -243,7 +245,7 @@ export default function FileTag() {
<FolderShared className={classes.iconFix} />
)}
</ListItemIcon>
<ListItemText primary="我的文件" />
<ListItemText primary={t("navbar.myFiles")} />
</ListItem>
<Divider />
</ExpansionPanelSummary>
@ -272,7 +274,7 @@ export default function FileTag() {
</ListItem>
{[
{
key: "视频",
key: t("navbar.videos"),
id: "video",
icon: (
<VideoIcon
@ -284,7 +286,7 @@ export default function FileTag() {
),
},
{
key: "图片",
key: t("navbar.photos"),
id: "image",
icon: (
<ImageIcon
@ -296,7 +298,7 @@ export default function FileTag() {
),
},
{
key: "音频",
key: t("navbar.music"),
id: "audio",
icon: (
<MusicIcon
@ -308,7 +310,7 @@ export default function FileTag() {
),
},
{
key: "文档",
key: t("navbar.documents"),
id: "doc",
icon: (
<DocIcon
@ -379,7 +381,7 @@ export default function FileTag() {
<ListItemIcon className={classes.subMenu}>
<TagPlus className={classes.iconFix} />
</ListItemIcon>
<ListItemText primary={"添加标签..."} />
<ListItemText primary={t("navbar.addATag")} />
</ListItem>
</List>{" "}
<Divider />

91
src/component/Navbar/Navbar.js
View File

@ -64,6 +64,7 @@ import {
toggleSnackbar,
} from "../../redux/explorer";
import { startBatchDownload, startDownload } from "../../redux/explorer/action";
import { withTranslation } from "react-i18next";
vhCheck();
const drawerWidth = 240;
@ -343,7 +344,7 @@ class NavbarCompoment extends Component {
this.props.toggleSnackbar(
"top",
"right",
"您已退出登录",
this.props.t("login.loggedOut"),
"success"
);
Auth.signout();
@ -364,7 +365,7 @@ class NavbarCompoment extends Component {
};
render() {
const { classes } = this.props;
const { classes, t } = this.props;
const user = Auth.GetUser(this.props.isLogin);
const isHomePage = pathHelper.isHomePage(this.props.location.pathname);
const isSharePage = pathHelper.isSharePage(
@ -392,7 +393,9 @@ class NavbarCompoment extends Component {
className={classes.iconFix}
/>
</ListItemIcon>
<ListItemText primary="我的分享" />
<ListItemText
primary={t("navbar.myShare")}
/>
</ListItem>
<ListItem
button
@ -406,7 +409,9 @@ class NavbarCompoment extends Component {
className={classes.iconFix}
/>
</ListItemIcon>
<ListItemText primary="离线下载" />
<ListItemText
primary={t("navbar.remoteDownload")}
/>
</ListItem>
{user.group.webdav && (
<ListItem
@ -421,7 +426,9 @@ class NavbarCompoment extends Component {
className={classes.iconFix}
/>
</ListItemIcon>
<ListItemText primary="WebDAV" />
<ListItemText
primary={t("navbar.connect")}
/>
</ListItem>
)}
@ -437,7 +444,9 @@ class NavbarCompoment extends Component {
className={classes.iconFix}
/>
</ListItemIcon>
<ListItemText primary="任务队列" />
<ListItemText
primary={t("navbar.taskQueue")}
/>
</ListItem>
{pathHelper.isMobile() && (
<>
@ -456,7 +465,9 @@ class NavbarCompoment extends Component {
className={classes.iconFix}
/>
</ListItemIcon>
<ListItemText primary="个人设置" />
<ListItemText
primary={t("navbar.setting")}
/>
</ListItem>
<ListItem
@ -469,7 +480,9 @@ class NavbarCompoment extends Component {
className={classes.iconFix}
/>
</ListItemIcon>
<ListItemText primary="退出登录" />
<ListItemText
primary={t("login.logout")}
/>
</ListItem>
</>
)}
@ -493,7 +506,7 @@ class NavbarCompoment extends Component {
className={classes.iconFix}
/>
</ListItemIcon>
<ListItemText primary="登录" />
<ListItemText primary={t("login.signIn")} />
</ListItem>
{this.props.registerEnabled && (
<ListItem
@ -506,7 +519,7 @@ class NavbarCompoment extends Component {
<ListItemIcon>
<AccountPlus className={classes.iconFix} />
</ListItemIcon>
<ListItemText primary="注册" />
<ListItemText primary={t("login.signUp")} />
</ListItem>
)}
</div>
@ -605,7 +618,9 @@ class NavbarCompoment extends Component {
{this.props.selected.length > 1 &&
!pathHelper.isMobile() && (
<Typography variant="h6" color="inherit" noWrap>
{this.props.selected.length} 个对象
{t("navbar.objectsSelected", {
num: this.props.selected.length,
})}
</Typography>
)}
{this.props.selected.length === 0 && <SezrchBar />}
@ -628,7 +643,11 @@ class NavbarCompoment extends Component {
)
}
>
<Tooltip title="打开">
<Tooltip
title={t(
"fileManager.open"
)}
>
<IconButton
color="inherit"
onClick={() =>
@ -651,7 +670,11 @@ class NavbarCompoment extends Component {
this.props.withFile
}
>
<Tooltip title="下载">
<Tooltip
title={t(
"fileManager.download"
)}
>
<IconButton
color="inherit"
onClick={() =>
@ -671,7 +694,11 @@ class NavbarCompoment extends Component {
this.props.withFolder
}
>
<Tooltip title="打包下载">
<Tooltip
title={t(
"fileManager.batchDownload"
)}
>
<IconButton
color="inherit"
disableClickAway
@ -688,7 +715,11 @@ class NavbarCompoment extends Component {
!pathHelper.isMobile() &&
!isSharePage && (
<Grow in={!this.props.isMultiple}>
<Tooltip title="分享">
<Tooltip
title={t(
"fileManager.share"
)}
>
<IconButton
color="inherit"
onClick={() =>
@ -702,7 +733,9 @@ class NavbarCompoment extends Component {
)}
{!this.props.isMultiple && !isSharePage && (
<Grow in={!this.props.isMultiple}>
<Tooltip title="重命名">
<Tooltip
title={t("fileManager.rename")}
>
<IconButton
color="inherit"
onClick={() =>
@ -724,7 +757,11 @@ class NavbarCompoment extends Component {
!pathHelper.isMobile()
}
>
<Tooltip title="移动">
<Tooltip
title={t(
"fileManager.move"
)}
>
<IconButton
color="inherit"
onClick={() =>
@ -743,7 +780,11 @@ class NavbarCompoment extends Component {
.length !== 0
}
>
<Tooltip title="删除">
<Tooltip
title={t(
"fileManager.delete"
)}
>
<IconButton
color="inherit"
onClick={() =>
@ -763,7 +804,11 @@ class NavbarCompoment extends Component {
pathHelper.isMobile()
}
>
<Tooltip title="更多操作">
<Tooltip
title={t(
"fileManager.moreActions"
)}
>
<IconButton
color="inherit"
onClick={() =>
@ -786,7 +831,7 @@ class NavbarCompoment extends Component {
!(!this.props.isMultiple && this.props.withFile) &&
this.props.audioPreviewPlayingName != null && (
<IconButton
title="音乐"
title={t("navbar.music")}
className={classes.sideButton}
onClick={this.props.audioPreviewOpen}
color={"inherit"}
@ -855,6 +900,10 @@ NavbarCompoment.propTypes = {
const Navbar = connect(
mapStateToProps,
mapDispatchToProps
)(withTheme(withStyles(styles)(withRouter(NavbarCompoment))));
)(
withTheme(
withStyles(styles)(withRouter(withTranslation()(NavbarCompoment)))
)
);
export default Navbar;

50
src/component/Navbar/SearchBar.js
View File

@ -22,6 +22,7 @@ import pathHelper from "../../utils/page";
import { configure, HotKeys } from "react-hotkeys";
import { searchMyFile } from "../../redux/explorer";
import FolderIcon from "@material-ui/icons/Folder";
import { Trans, withTranslation } from "react-i18next";
configure({
ignoreTags: [],
@ -144,7 +145,7 @@ class SearchBarCompoment extends Component {
};
render() {
const { classes } = this.props;
const { classes, t } = this.props;
const { anchorEl } = this.state;
const id = this.state.input !== "" ? "simple-popper" : null;
const isHomePage = pathHelper.isHomePage(this.props.location.pathname);
@ -156,7 +157,7 @@ class SearchBarCompoment extends Component {
</div>
<HotKeys keyMap={keyMap} handlers={this.handlers}>
<InputBase
placeholder="搜索..."
placeholder={t("navbar.searchPlaceholder")}
classes={{
root: classes.inputRoot,
input: classes.inputInput,
@ -187,10 +188,16 @@ class SearchBarCompoment extends Component {
}}
primary={
<Typography noWrap>
在我的文件中搜索{" "}
<strong>
{this.state.input}
</strong>
<Trans
i18nKey="navbar.searchInFiles"
values={{
name: this.state
.input,
}}
components={[
<strong key={0} />,
]}
/>
</Typography>
}
/>
@ -216,10 +223,18 @@ class SearchBarCompoment extends Component {
}}
primary={
<Typography noWrap>
在当前目录中搜索{" "}
<strong>
{this.state.input}
</strong>
<Trans
i18nKey="navbar.searchInFolders"
values={{
name: this.state
.input,
}}
components={[
<strong
key={0}
/>,
]}
/>
</Typography>
}
/>
@ -234,10 +249,15 @@ class SearchBarCompoment extends Component {
classes={{ primary: classes.primary }}
primary={
<Typography noWrap>
在全站分享中搜索{" "}
<strong>
{this.state.input}
</strong>
<Trans
i18nKey="navbar.searchInShares"
values={{
name: this.state.input,
}}
components={[
<strong key={0} />,
]}
/>
</Typography>
}
/>
@ -258,6 +278,6 @@ SearchBarCompoment.propTypes = {
const SearchBar = connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(withRouter(SearchBarCompoment)));
)(withStyles(styles)(withRouter(withTranslation()(SearchBarCompoment))));
export default SearchBar;

32
src/component/Navbar/StorageBar.js
View File

@ -15,6 +15,8 @@ import {
import ButtonBase from "@material-ui/core/ButtonBase";
import { withRouter } from "react-router";
import { toggleSnackbar } from "../../redux/explorer";
import { Link as RouterLink } from "react-router-dom";
import { withTranslation } from "react-i18next";
const mapStateToProps = (state) => {
return {
@ -108,7 +110,7 @@ class StorageBarCompoment extends Component {
this.props.toggleSnackbar(
"top",
"right",
"您的已用容量已超过容量配额，请尽快删除多余文件或购买容量",
this.props.t("navbar.exceedQuota"),
"warning"
);
} else {
@ -125,7 +127,7 @@ class StorageBarCompoment extends Component {
};
render() {
const { classes } = this.props;
const { classes, t } = this.props;
return (
<div
onMouseEnter={() => this.setState({ showExpand: true })}
@ -137,7 +139,9 @@ class StorageBarCompoment extends Component {
<div className={classes.storageContainer}>
<StorageIcon className={classes.iconFix} />
<div className={classes.detail}>
存储空间{" "}
<Typography variant={"subtitle2"}>
{t("navbar.storage")}
</Typography>
<LinearProgress
className={classes.bar}
color="secondary"
@ -146,16 +150,16 @@ class StorageBarCompoment extends Component {
/>
<div className={classes.info}>
<Tooltip
title={
"已使用 " +
(this.state.used === null
? " -- "
: this.state.used) +
", 共 " +
(this.state.total === null
? " -- "
: this.state.total)
}
title={t("navbar.storageDetail", {
used:
this.state.used === null
? " -- "
: this.state.used,
total:
this.state.total === null
? " -- "
: this.state.total,
})}
placement="top"
>
<Typography
@ -188,6 +192,6 @@ StorageBarCompoment.propTypes = {
const StorageBar = connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(withRouter(StorageBarCompoment)));
)(withStyles(styles)(withRouter(withTranslation()(StorageBarCompoment))));
export default StorageBar;

16
src/component/Navbar/UserAvatar.js
View File

@ -6,17 +6,18 @@ import UserAvatarPopover from "./UserAvatarPopover";
import { AccountCircle } from "mdi-material-ui";
import Auth from "../../middleware/Auth";
import {
withStyles,
Grow,
Avatar,
Grow,
IconButton,
Tooltip,
withStyles,
} from "@material-ui/core";
import { withRouter } from "react-router-dom";
import pathHelper from "../../utils/page";
import DarkModeSwitcher from "./DarkModeSwitcher";
import { Home } from "@material-ui/icons";
import { setUserPopover } from "../../redux/explorer";
import { withTranslation } from "react-i18next";
const mapStateToProps = (state) => {
return {
@ -91,7 +92,7 @@ class UserAvatarCompoment extends Component {
};
render() {
const { classes } = this.props;
const { classes, t } = this.props;
const loginCheck = Auth.Check(this.props.isLogin);
const user = Auth.GetUser(this.props.isLogin);
const isAdminPage = pathHelper.isAdminPage(
@ -113,7 +114,7 @@ class UserAvatarCompoment extends Component {
{loginCheck && (
<>
<Tooltip
title={"设置"}
title={t("navbar.setting")}
placement="bottom"
>
<IconButton
@ -132,7 +133,10 @@ class UserAvatarCompoment extends Component {
</>
)}
{isAdminPage && (
<Tooltip title={"返回主页"} placement="bottom">
<Tooltip
title={t("navbar.backToHomepage")}
placement="bottom"
>
<IconButton
color="inherit"
onClick={this.returnHome}
@ -167,6 +171,6 @@ UserAvatarCompoment.propTypes = {
const UserAvatar = connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(withRouter(UserAvatarCompoment)));
)(withStyles(styles)(withRouter(withTranslation()(UserAvatarCompoment))));
export default UserAvatar;

43
src/component/Navbar/UserAvatarPopover.js
View File

@ -2,27 +2,32 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import {
LogoutVariant,
HomeAccount,
DesktopMacDashboard,
AccountArrowRight,
AccountPlus,
DesktopMacDashboard,
HomeAccount,
LogoutVariant,
} from "mdi-material-ui";
import { withRouter } from "react-router-dom";
import Auth from "../../middleware/Auth";
import {
withStyles,
Avatar,
Popover,
Typography,
Chip,
Divider,
ListItemIcon,
MenuItem,
Divider,
Popover,
Typography,
withStyles,
} from "@material-ui/core";
import API from "../../middleware/Api";
import pathHelper from "../../utils/page";
import { setSessionStatus, setUserPopover, toggleSnackbar } from "../../redux/explorer";
import {
setSessionStatus,
setUserPopover,
toggleSnackbar,
} from "../../redux/explorer";
import { withTranslation } from "react-i18next";
const mapStateToProps = (state) => {
return {
@ -105,7 +110,7 @@ class UserAvatarPopoverCompoment extends Component {
};
render() {
const { classes } = this.props;
const { classes, t } = this.props;
const user = Auth.GetUser();
const isAdminPage = pathHelper.isAdminPage(
this.props.location.pathname
@ -134,16 +139,18 @@ class UserAvatarPopoverCompoment extends Component {
<ListItemIcon>
<AccountArrowRight />
</ListItemIcon>
登录
{t("login.signIn")}
</MenuItem>
{this.props.registerEnabled && (
<MenuItem
onClick={() => this.props.history.push("/signup")}
onClick={() =>
this.props.history.push("/signup")
}
>
<ListItemIcon>
<AccountPlus />
</ListItemIcon>
注册
{t("login.signUp")}
</MenuItem>
)}
</div>
@ -198,7 +205,7 @@ class UserAvatarPopoverCompoment extends Component {
<ListItemIcon>
<HomeAccount />
</ListItemIcon>
个人主页
{t("navbar.myProfile")}
</MenuItem>
)}
{user.group.id === 1 && (
@ -214,7 +221,7 @@ class UserAvatarPopoverCompoment extends Component {
<ListItemIcon>
<DesktopMacDashboard />
</ListItemIcon>
管理面板
{t("navbar.dashboard")}
</MenuItem>
)}
@ -227,7 +234,7 @@ class UserAvatarPopoverCompoment extends Component {
<ListItemIcon>
<LogoutVariant />
</ListItemIcon>
退出登录
{t("login.logout")}
</MenuItem>
</div>
</div>
@ -244,6 +251,10 @@ UserAvatarPopoverCompoment.propTypes = {
const UserAvatarPopover = connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(withRouter(UserAvatarPopoverCompoment)));
)(
withStyles(styles)(
withRouter(withTranslation()(UserAvatarPopoverCompoment))
)
);
export default UserAvatarPopover;

11
src/component/Navbar/UserInfo.js
View File

@ -6,6 +6,7 @@ import Auth from "../../middleware/Auth";
import DarkModeSwitcher from "./DarkModeSwitcher";
import Avatar from "@material-ui/core/Avatar";
import { setUserPopover } from "../../redux/explorer";
import { withTranslation } from "react-i18next";
const mapStateToProps = (state) => {
return {
@ -70,7 +71,6 @@ const styles = (theme) => ({
},
nickName: {
color: "#fff",
marginLeft: "10px",
marginTop: "15px",
fontSize: "17px",
},
@ -80,7 +80,6 @@ const styles = (theme) => ({
alignItems: "flex-start",
},
groupName: {
marginLeft: "10px",
color: "#ffffff",
opacity: "0.54",
},
@ -95,7 +94,7 @@ class UserInfoCompoment extends Component {
};
render() {
const { classes } = this.props;
const { classes, t } = this.props;
const isLogin = Auth.Check(this.props.isLogin);
const user = Auth.GetUser(this.props.isLogin);
@ -125,7 +124,7 @@ class UserInfoCompoment extends Component {
component="h2"
noWrap
>
{isLogin ? user.nickname : "未登录"}
{isLogin ? user.nickname : t("navbar.notLoginIn")}
</Typography>
<Typography
className={classes.groupName}
@ -133,7 +132,7 @@ class UserInfoCompoment extends Component {
color="textSecondary"
noWrap
>
{isLogin ? user.group.name : "游客"}
{isLogin ? user.group.name : t("navbar.visitor")}
</Typography>
</div>
</div>
@ -148,6 +147,6 @@ UserInfoCompoment.propTypes = {
const UserInfo = connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(UserInfoCompoment));
)(withStyles(styles)(withTranslation()(UserInfoCompoment)));
export default UserInfo;

4
src/i18n.ts
View File

@ -18,4 +18,8 @@ i18n.use(Backend)
},
});
i18n.on("languageChanged", (lng) => {
document.documentElement.setAttribute("lang", lng);
});
export default i18n;