our/clash-proxy
2
0
Fork 0
Code Pull Requests Activity

chore: i18n for theme settings

Browse Source
This commit is contained in:
Slinetrac
2025-11-01 10:57:27 +08:00
Unverified
parent 930a4b4d80
commit 21f67f6a45
14 changed files with 325 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/setting/mods/theme-viewer.tsx
View File

@@ -9,7 +9,7 @@ import {
useTheme,
} from "@mui/material";
import { useLockFn } from "ahooks";
import { useImperativeHandle, useState } from "react";
import { useImperativeHandle, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { BaseDialog, DialogRef } from "@/components/base";
@@ -62,9 +62,48 @@ export function ThemeViewer(props: { ref?: React.Ref<DialogRef> }) {
type ThemeKey = keyof typeof theme & keyof typeof defaultTheme;
const renderItem = (label: string, key: ThemeKey) => {
const fieldDefinitions: Array<{ labelKey: string; key: ThemeKey }> = useMemo(
() => [
{
labelKey: "components.settings.verge.theme.fields.primaryColor",
key: "primary_color",
},
{
labelKey: "components.settings.verge.theme.fields.secondaryColor",
key: "secondary_color",
},
{
labelKey: "components.settings.verge.theme.fields.primaryText",
key: "primary_text",
},
{
labelKey: "components.settings.verge.theme.fields.secondaryText",
key: "secondary_text",
},
{
labelKey: "components.settings.verge.theme.fields.infoColor",
key: "info_color",
},
{
labelKey: "components.settings.verge.theme.fields.warningColor",
key: "warning_color",
},
{
labelKey: "components.settings.verge.theme.fields.errorColor",
key: "error_color",
},
{
labelKey: "components.settings.verge.theme.fields.successColor",
key: "success_color",
},
],
[],
);
const renderItem = (labelKey: string, key: ThemeKey) => {
const label = t(labelKey);
return (
<Item>
<Item key={key}>
<ListItemText primary={label} />
<Round sx={{ background: theme[key] || dt[key] }} />
<TextField
@@ -81,7 +120,7 @@ export function ThemeViewer(props: { ref?: React.Ref<DialogRef> }) {
return (
<BaseDialog
open={open}
title={t("Theme Setting")}
title={t("components.settings.verge.theme.title")}
okBtn={t("Save")}
cancelBtn={t("Cancel")}
contentSx={{ width: 400, maxHeight: 505, overflow: "auto", pb: 0 }}
@@ -90,24 +129,12 @@ export function ThemeViewer(props: { ref?: React.Ref<DialogRef> }) {
onOk={onSave}
>
<List sx={{ pt: 0 }}>
{renderItem(t("Primary Color"), "primary_color")}
{renderItem(t("Secondary Color"), "secondary_color")}
{renderItem(t("Primary Text"), "primary_text")}
{renderItem(t("Secondary Text"), "secondary_text")}
{renderItem(t("Info Color"), "info_color")}
{renderItem(t("Warning Color"), "warning_color")}
{renderItem(t("Error Color"), "error_color")}
{renderItem(t("Success Color"), "success_color")}
{fieldDefinitions.map((field) => renderItem(field.labelKey, field.key))}
<Item>
<ListItemText primary={t("Font Family")} />
<ListItemText
primary={t("components.settings.verge.theme.fields.fontFamily")}
/>
<TextField
{...textProps}
value={theme.font_family ?? ""}
@@ -116,7 +143,9 @@ export function ThemeViewer(props: { ref?: React.Ref<DialogRef> }) {
/>
</Item>
<Item>
<ListItemText primary={t("CSS Injection")} />
<ListItemText
primary={t("components.settings.verge.theme.fields.cssInjection")}
/>
<Button
startIcon={<EditRounded />}
variant="outlined"
@@ -124,12 +153,12 @@ export function ThemeViewer(props: { ref?: React.Ref<DialogRef> }) {
setEditorOpen(true);
}}
>
{t("Edit")} CSS
{t("components.settings.verge.theme.actions.editCss")}
</Button>
{editorOpen && (
<EditorViewer
open={true}
title={`${t("Edit")} CSS`}
title={t("components.settings.verge.theme.dialogs.editCssTitle")}
initialData={Promise.resolve(theme.css_injection ?? "")}
language="css"
onSave={(_prev, curr) => {