Austin/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2024-11-16 11:42:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: new setting page

Browse Source
This commit is contained in:
GyDi 2021-12-12 01:13:08 +08:00
parent 74b51509b6
commit adc634e5ea
1 changed files with 69 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/pages/setting.tsx
View File

@ -1,22 +1,81 @@
import { Box } from "@mui/system";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import {
Box,
List,
ListItem,
ListItemText,
ListSubheader,
Typography,
TextField,
styled,
Switch,
Select,
MenuItem,
} from "@mui/material";
import { atomPaletteMode } from "../states/setting"; import { atomPaletteMode } from "../states/setting";
import PaletteSwitch from "../components/palette-switch"; import PaletteSwitch from "../components/palette-switch";
const MiniListItem = styled(ListItem)(({ theme }) => ({
paddingTop: 5,
paddingBottom: 5,
}));
const SettingPage = () => { const SettingPage = () => {
const [mode, setMode] = useRecoilState(atomPaletteMode); const [mode, setMode] = useRecoilState(atomPaletteMode);
return ( return (
<Box> <Box sx={{ width: 0.9, maxWidth: "850px", mx: "auto", mb: 2 }}>
<h1>Setting</h1> <Typography variant="h4" component="h1" sx={{ py: 2 }}>
Setting
</Typography>
<Box> <List sx={{ borderRadius: 1, boxShadow: 2 }}>
<ListSubheader>通用设置</ListSubheader>
<MiniListItem>
<ListItemText primary="外观主题" />
<PaletteSwitch <PaletteSwitch
edge="end"
checked={mode !== "light"} checked={mode !== "light"}
onChange={(_e, c) => setMode(c ? "dark" : "light")} onChange={(_e, c) => setMode(c ? "dark" : "light")}
inputProps={{ "aria-label": "controlled" }}
/> />
</Box> </MiniListItem>
<MiniListItem>
<ListItemText primary="开机自启" />
<Switch edge="end" />
</MiniListItem>
<MiniListItem>
<ListItemText primary="设置系统代理" />
<Switch edge="end" />
</MiniListItem>
<MiniListItem>
<ListItemText primary="局域网连接" />
<Switch edge="end" />
</MiniListItem>
<MiniListItem>
<ListItemText primary="IPv6" />
<Switch edge="end" />
</MiniListItem>
<MiniListItem>
<ListItemText primary="日志等级" />
<Select size="small" sx={{ width: 120 }}>
<MenuItem value="debug">Debug</MenuItem>
<MenuItem value="info">Info</MenuItem>
<MenuItem value="warning">Warning</MenuItem>
<MenuItem value="error">Error</MenuItem>
</Select>
</MiniListItem>
<MiniListItem>
<ListItemText primary="混合代理端口" />
<TextField size="small" defaultValue={7890} sx={{ width: 120 }} />
</MiniListItem>
</List>
</Box> </Box>
); );
}; };