chore: text overflow word-wrap & cleanup

This commit is contained in:
dongchengjie 2024-05-20 12:38:41 +08:00
parent b4fddaec7f
commit 08e0d6a34a
6 changed files with 19 additions and 17 deletions

View File

@ -30,6 +30,7 @@ const Item = styled(Box)(({ theme: { palette, typography } }) => ({
}, },
"& .data": { "& .data": {
color: palette.text.primary, color: palette.text.primary,
overflowWrap: "anywhere",
}, },
})); }));

View File

@ -79,7 +79,7 @@ export const HotkeyViewer = forwardRef<DialogRef>((props, ref) => {
return ( return (
<BaseDialog <BaseDialog
open={open} open={open}
title={t("Hotkey Viewer")} title={t("Hotkey Setting")}
contentSx={{ width: 450, maxHeight: 330 }} contentSx={{ width: 450, maxHeight: 330 }}
okBtn={t("Save")} okBtn={t("Save")}
cancelBtn={t("Cancel")} cancelBtn={t("Cancel")}

View File

@ -120,13 +120,15 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
<ListItem sx={{ padding: "5px 2px", alignItems: "start" }}> <ListItem sx={{ padding: "5px 2px", alignItems: "start" }}>
<ListItemText primary={t("Proxy Bypass")} sx={{ padding: "3px 0" }} /> <ListItemText primary={t("Proxy Bypass")} sx={{ padding: "3px 0" }} />
</ListItem>
<ListItem sx={{ padding: "5px 2px" }}>
<TextField <TextField
disabled={!enabled} disabled={!enabled}
size="small" size="small"
autoComplete="off" autoComplete="off"
multiline multiline
rows={3} rows={4}
sx={{ width: 280 }} sx={{ width: "100%" }}
value={value.bypass} value={value.bypass}
placeholder={sysproxy?.bypass || `-`} placeholder={sysproxy?.bypass || `-`}
onChange={(e) => onChange={(e) =>
@ -155,9 +157,17 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
<FlexBox> <FlexBox>
<Typography className="label">{t("Bypass")}</Typography> <Typography className="label">{t("Bypass")}</Typography>
<Typography className="value" style={{ overflowWrap: "anywhere" }}> </FlexBox>
{sysproxy?.bypass || "-"} <FlexBox>
</Typography> <TextField
disabled={true}
size="small"
autoComplete="off"
multiline
rows={4}
sx={{ width: "100%" }}
value={sysproxy?.bypass || "-"}
/>
</FlexBox> </FlexBox>
</Box> </Box>
</BaseDialog> </BaseDialog>

View File

@ -1,4 +1,4 @@
import { forwardRef, useImperativeHandle, useRef, useState } from "react"; import { forwardRef, useImperativeHandle, useState } from "react";
import { useLockFn } from "ahooks"; import { useLockFn } from "ahooks";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {

View File

@ -11,7 +11,6 @@ import { GuardState } from "./mods/guard-state";
import { ServiceViewer } from "./mods/service-viewer"; import { ServiceViewer } from "./mods/service-viewer";
import { SysproxyViewer } from "./mods/sysproxy-viewer"; import { SysproxyViewer } from "./mods/sysproxy-viewer";
import { TunViewer } from "./mods/tun-viewer"; import { TunViewer } from "./mods/tun-viewer";
import getSystem from "@/utils/get-system";
interface Props { interface Props {
onError?: (err: Error) => void; onError?: (err: Error) => void;

View File

@ -1,14 +1,6 @@
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import { import { Box, Button, IconButton, MenuItem } from "@mui/material";
Box,
Button,
IconButton,
MenuItem,
Select,
SelectProps,
styled,
} from "@mui/material";
import { Virtuoso } from "react-virtuoso"; import { Virtuoso } from "react-virtuoso";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {