mirror of
https://github.com/cloudreve/frontend.git
synced 2025-12-26 04:02:47 +00:00
i18n: theme settings
This commit is contained in:
HFO4
parent
a14cee53b2
commit
d54533e150
|
|
@ -159,6 +159,28 @@
|
|||
"heartbeatRecoverModeIntervalDes": "Interval between master attempts to reconnect to a node after the node has been marked as recovery mode.",
|
||||
"slaveTransitExpiration": "Slave transfer timeout (seconds)",
|
||||
"slaveTransitExpirationDes": "Maximum time that can be consumed by a slave to execute a file transfer task.",
|
||||
"nodesCommunication": "Node communication"
|
||||
"nodesCommunication": "Node communication",
|
||||
"cannotDeleteDefaultTheme": "Cannot delete default theme.",
|
||||
"keepAtLeastOneTheme": "Please reserve at least one theme.",
|
||||
"duplicatedThemePrimaryColor": "Duplicated primart color.",
|
||||
"themes": "Themes",
|
||||
"colors": "Colors",
|
||||
"themeConfig": "Configs",
|
||||
"actions": "Actions",
|
||||
"wrongFormat": "Incorrect format.",
|
||||
"createNewTheme": "Create new theme",
|
||||
"themeConfigDoc": "https://v4.mui.com/customization/default-theme/",
|
||||
"themeConfigDes": "Full available configurations can be referred at <0>Default Theme - Material-UI</0>.",
|
||||
"defaultTheme": "Default theme",
|
||||
"defaultThemeDes": "The default them to use when the user does not specify a preferred one.",
|
||||
"appearance": "Appearance",
|
||||
"personalFileListView": "Default view for personal file list",
|
||||
"personalFileListViewDes": "The default display view to use when the user does not specify a preferred one.",
|
||||
"sharedFileListView": "Default view for shared file list",
|
||||
"sharedFileListViewDes": "The default display view to use when the user does not specify a preferred one.",
|
||||
"primaryColor": "Primary color",
|
||||
"primaryColorText": "Text on primary color",
|
||||
"secondaryColor": "Secondary color",
|
||||
"secondaryColorText": "Text on secondary color"
|
||||
}
|
||||
}
|
||||
|
|
@ -159,6 +159,28 @@
|
|||
"heartbeatRecoverModeIntervalDes": "节点因异常被主机标记为恢复模式后，主机尝试重新连接节点的间隔",
|
||||
"slaveTransitExpiration": "从机中转超时（秒）",
|
||||
"slaveTransitExpirationDes": "从机执行文件中转任务可消耗的最长时间",
|
||||
"nodesCommunication": "节点通信"
|
||||
"nodesCommunication": "节点通信",
|
||||
"cannotDeleteDefaultTheme": "不能删除默认配色",
|
||||
"keepAtLeastOneTheme": "请至少保留一个配色方案",
|
||||
"duplicatedThemePrimaryColor": "主色调不能与已有配色重复",
|
||||
"themes": "主题配色",
|
||||
"colors": "关键色",
|
||||
"themeConfig": "色彩配置",
|
||||
"actions": "操作",
|
||||
"wrongFormat": "格式不正确",
|
||||
"createNewTheme": "新建配色方案",
|
||||
"themeConfigDoc": "https://v4.mui.com/zh/customization/default-theme/",
|
||||
"themeConfigDes": "完整的配置项可在 <0>默认主题 - Material-UI</0> 查阅。",
|
||||
"defaultTheme": "默认配色",
|
||||
"defaultThemeDes": "用户未指定偏好配色时，站点默认使用的配色方案",
|
||||
"appearance": "界面",
|
||||
"personalFileListView": "个人文件列表默认样式",
|
||||
"personalFileListViewDes": "用户未指定偏好样式时，个人文件页面列表默认样式",
|
||||
"sharedFileListView": "目录分享页列表默认样式",
|
||||
"sharedFileListViewDes": "用户未指定偏好样式时，目录分享页面的默认样式",
|
||||
"primaryColor": "主色调",
|
||||
"primaryColorText": "主色调文字",
|
||||
"secondaryColor": "辅色调",
|
||||
"secondaryColorText": "辅色调文字"
|
||||
}
|
||||
}
|
||||
|
|
@ -14,6 +14,7 @@ import { Add, Menu } from "@material-ui/icons";
|
|||
import { ThemeProvider } from "@material-ui/styles";
|
||||
import React, { useCallback, useState } from "react";
|
||||
import { CompactPicker } from "react-color";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
picker: {
|
||||
|
|
@ -37,6 +38,8 @@ const useStyles = makeStyles((theme) => ({
|
|||
}));
|
||||
|
||||
export default function CreateTheme({ open, onClose, onSubmit }) {
|
||||
const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
|
||||
const { t: tGlobal } = useTranslation("common");
|
||||
const classes = useStyles();
|
||||
const [theme, setTheme] = useState({
|
||||
palette: {
|
||||
|
|
@ -66,7 +69,7 @@ export default function CreateTheme({ open, onClose, onSubmit }) {
|
|||
<Grid spacing={2} md={8} xs={12} container>
|
||||
<Grid md={6} xs={12} item>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
主色调
|
||||
{t("primaryColor")}
|
||||
</Typography>
|
||||
<TextField
|
||||
value={theme.palette.primary.main}
|
||||
|
|
@ -142,7 +145,7 @@ export default function CreateTheme({ open, onClose, onSubmit }) {
|
|||
</Grid>
|
||||
<Grid md={6} xs={12} item>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
辅色调
|
||||
{t("secondaryColor")}
|
||||
</Typography>
|
||||
<TextField
|
||||
value={theme.palette.secondary.main}
|
||||
|
|
@ -218,7 +221,7 @@ export default function CreateTheme({ open, onClose, onSubmit }) {
|
|||
</Grid>
|
||||
<Grid md={6} xs={12} item>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
主色调文字
|
||||
{t("primaryColorText")}
|
||||
</Typography>
|
||||
<TextField
|
||||
value={theme.palette.primary.contrastText}
|
||||
|
|
@ -256,7 +259,7 @@ export default function CreateTheme({ open, onClose, onSubmit }) {
|
|||
</Grid>
|
||||
<Grid md={6} xs={12} item>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
辅色调文字
|
||||
{t("secondaryColorText")}
|
||||
</Typography>
|
||||
<TextField
|
||||
value={theme.palette.secondary.contrastText}
|
||||
|
|
@ -324,7 +327,7 @@ export default function CreateTheme({ open, onClose, onSubmit }) {
|
|||
<TextField
|
||||
fullWidth
|
||||
color={"secondary"}
|
||||
label={"文字输入"}
|
||||
label={"Text input"}
|
||||
/>
|
||||
<div
|
||||
className={classes.fab}
|
||||
|
|
@ -341,10 +344,10 @@ export default function CreateTheme({ open, onClose, onSubmit }) {
|
|||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={onClose} color="default">
|
||||
取消
|
||||
{tGlobal("cancel")}
|
||||
</Button>
|
||||
<Button onClick={() => onSubmit(theme)} color="primary">
|
||||
创建
|
||||
{tGlobal("ok")}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import { useDispatch } from "react-redux";
|
|||
import { toggleSnackbar } from "../../../redux/explorer";
|
||||
import API from "../../../middleware/Api";
|
||||
import CreateTheme from "../Dialogs/CreateTheme";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
|
|
@ -51,6 +52,8 @@ const useStyles = makeStyles((theme) => ({
|
|||
}));
|
||||
|
||||
export default function Theme() {
|
||||
const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
|
||||
const { t: tApp } = useTranslation();
|
||||
const classes = useStyles();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [theme, setTheme] = useState({});
|
||||
|
|
@ -73,11 +76,16 @@ export default function Theme() {
|
|||
|
||||
const deleteTheme = (color) => {
|
||||
if (color === options.defaultTheme) {
|
||||
ToggleSnackbar("top", "right", "不能删除默认配色", "warning");
|
||||
ToggleSnackbar(
|
||||
"top",
|
||||
"right",
|
||||
t("cannotDeleteDefaultTheme"),
|
||||
"warning"
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (Object.keys(theme).length <= 1) {
|
||||
ToggleSnackbar("top", "right", "请至少保留一个配色方案", "warning");
|
||||
ToggleSnackbar("top", "right", t("keepAtLeastOneTheme"), "warning");
|
||||
return;
|
||||
}
|
||||
const themeCopy = { ...theme };
|
||||
|
|
@ -95,7 +103,7 @@ export default function Theme() {
|
|||
ToggleSnackbar(
|
||||
"top",
|
||||
"right",
|
||||
"主色调不能与已有配色重复",
|
||||
t("duplicatedThemePrimaryColor"),
|
||||
"warning"
|
||||
);
|
||||
return;
|
||||
|
|
@ -157,7 +165,7 @@ export default function Theme() {
|
|||
options: option,
|
||||
})
|
||||
.then(() => {
|
||||
ToggleSnackbar("top", "right", "设置已更改", "success");
|
||||
ToggleSnackbar("top", "right", t("saved"), "success");
|
||||
})
|
||||
.catch((error) => {
|
||||
ToggleSnackbar("top", "right", error.message, "error");
|
||||
|
|
@ -172,16 +180,18 @@ export default function Theme() {
|
|||
<form onSubmit={submit}>
|
||||
<div className={classes.root}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
主题配色
|
||||
{t("themes")}
|
||||
</Typography>
|
||||
<div className={classes.formContainer}>
|
||||
<div className={classes.form}>
|
||||
<Table aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>关键色</TableCell>
|
||||
<TableCell>色彩配置</TableCell>
|
||||
<TableCell>操作</TableCell>
|
||||
<TableCell>{t("colors")}</TableCell>
|
||||
<TableCell>
|
||||
{t("themeConfig")}
|
||||
</TableCell>
|
||||
<TableCell>{t("actions")}</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
|
|
@ -225,7 +235,7 @@ export default function Theme() {
|
|||
error={themeConfigError[k]}
|
||||
helperText={
|
||||
themeConfigError[k] &&
|
||||
"格式不正确"
|
||||
t("wrongFormat")
|
||||
}
|
||||
fullWidth
|
||||
multiline
|
||||
|
|
@ -307,21 +317,22 @@ export default function Theme() {
|
|||
style={{ marginTop: 8 }}
|
||||
onClick={() => setCreate(true)}
|
||||
>
|
||||
新建配色方案
|
||||
{t("createNewTheme")}
|
||||
</Button>
|
||||
</div>
|
||||
<Alert severity="info" style={{ marginTop: 8 }}>
|
||||
<Typography variant="body2">
|
||||
完整的配置项可在{" "}
|
||||
<Link
|
||||
href={
|
||||
"https://material-ui.com/zh/customization/default-theme/"
|
||||
}
|
||||
target={"_blank"}
|
||||
>
|
||||
默认主题 - Material-UI
|
||||
</Link>{" "}
|
||||
查阅。
|
||||
<Trans
|
||||
i18nKey={"settings.themeConfigDes"}
|
||||
ns={"dashboard"}
|
||||
components={[
|
||||
<Link
|
||||
key={0}
|
||||
href={t("themeConfigDoc")}
|
||||
target={"_blank"}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
</Typography>
|
||||
</Alert>
|
||||
</div>
|
||||
|
|
@ -329,7 +340,7 @@ export default function Theme() {
|
|||
<div className={classes.form}>
|
||||
<FormControl>
|
||||
<InputLabel htmlFor="component-helper">
|
||||
默认配色
|
||||
{t("defaultTheme")}
|
||||
</InputLabel>
|
||||
<Select
|
||||
value={options.defaultTheme}
|
||||
|
|
@ -363,7 +374,7 @@ export default function Theme() {
|
|||
))}
|
||||
</Select>
|
||||
<FormHelperText id="component-helper-text">
|
||||
用户未指定偏好配色时，站点默认使用的配色方案
|
||||
{t("defaultThemeDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
|
@ -372,28 +383,32 @@ export default function Theme() {
|
|||
|
||||
<div className={classes.root}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
界面
|
||||
{t("appearance")}
|
||||
</Typography>
|
||||
|
||||
<div className={classes.formContainer}>
|
||||
<div className={classes.form}>
|
||||
<FormControl>
|
||||
<InputLabel htmlFor="component-helper">
|
||||
个人文件列表默认样式
|
||||
{t("personalFileListView")}
|
||||
</InputLabel>
|
||||
<Select
|
||||
value={options.home_view_method}
|
||||
onChange={handleChange("home_view_method")}
|
||||
required
|
||||
>
|
||||
<MenuItem value={"icon"}>大图标</MenuItem>
|
||||
<MenuItem value={"smallIcon"}>
|
||||
小图标
|
||||
<MenuItem value={"icon"}>
|
||||
{tApp("fileManager.gridViewLarge")}
|
||||
</MenuItem>
|
||||
<MenuItem value={"smallIcon"}>
|
||||
{tApp("fileManager.gridViewSmall")}
|
||||
</MenuItem>
|
||||
<MenuItem value={"list"}>
|
||||
{tApp("fileManager.listView")}
|
||||
</MenuItem>
|
||||
<MenuItem value={"list"}>列表</MenuItem>
|
||||
</Select>
|
||||
<FormHelperText id="component-helper-text">
|
||||
用户未指定偏好样式时，个人文件页面列表默认样式
|
||||
{t("personalFileListViewDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
|
@ -403,21 +418,25 @@ export default function Theme() {
|
|||
<div className={classes.form}>
|
||||
<FormControl>
|
||||
<InputLabel htmlFor="component-helper">
|
||||
目录分享页列表默认样式
|
||||
{t("sharedFileListView")}
|
||||
</InputLabel>
|
||||
<Select
|
||||
value={options.share_view_method}
|
||||
onChange={handleChange("share_view_method")}
|
||||
required
|
||||
>
|
||||
<MenuItem value={"icon"}>大图标</MenuItem>
|
||||
<MenuItem value={"smallIcon"}>
|
||||
小图标
|
||||
<MenuItem value={"icon"}>
|
||||
{tApp("fileManager.gridViewLarge")}
|
||||
</MenuItem>
|
||||
<MenuItem value={"smallIcon"}>
|
||||
{tApp("fileManager.gridViewSmall")}
|
||||
</MenuItem>
|
||||
<MenuItem value={"list"}>
|
||||
{tApp("fileManager.listView")}
|
||||
</MenuItem>
|
||||
<MenuItem value={"list"}>列表</MenuItem>
|
||||
</Select>
|
||||
<FormHelperText id="component-helper-text">
|
||||
用户未指定偏好样式时，目录分享页面的默认样式
|
||||
{t("sharedFileListViewDes")}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</div>
|
||||
|
|
@ -431,7 +450,7 @@ export default function Theme() {
|
|||
variant={"contained"}
|
||||
color={"primary"}
|
||||
>
|
||||
保存
|
||||
{t("save")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Reference in New Issue