shkong/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev synced 2025-05-05 04:43:44 +08:00
Code Packages Projects Releases Activity

feat: Optimize UI layout and page hierarchy

Browse Source
This commit is contained in:
wonfen 2025-02-07 09:13:30 +08:00
parent 67ae10b593
commit db593fb188
5 changed files with 126 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/connection/connection-table.tsx
View File

@ -115,9 +115,6 @@ export const ConnectionTable = (props: Props) => {
sx={{ sx={{
border: "none", border: "none",
"div:focus": { outline: "none !important" }, "div:focus": { outline: "none !important" },
"& div[aria-rowindex]": {
backgroundColor: `${backgroundColor} !important`,
},
}} }}
columnVisibilityModel={columnVisible} columnVisibilityModel={columnVisible}
onColumnVisibilityModelChange={(e) => setColumnVisible(e)} onColumnVisibilityModelChange={(e) => setColumnVisible(e)}

65
src/pages/connections.tsx
View File

@ -139,7 +139,15 @@ const ConnectionsPage = () => {
<BasePage <BasePage
full full
title={<span style={{ whiteSpace: "nowrap" }}>{t("Connections")}</span>} title={<span style={{ whiteSpace: "nowrap" }}>{t("Connections")}</span>}
contentStyle={{ height: "100%" }} contentStyle={{
height: "100%",
display: "flex",
flexDirection: "column",
overflow: "auto",
// margin: "0 10px",
// backgroundColor: isDark ? "#282a36" : "#ffffff",
borderRadius: "8px",
}}
header={ header={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}> <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Box sx={{ mx: 1 }}> <Box sx={{ mx: 1 }}>
@ -185,6 +193,10 @@ const ConnectionsPage = () => {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
userSelect: "text", userSelect: "text",
// backgroundColor: isDark ? "#282a36" : "#ffffff",
position: "sticky",
top: 0,
zIndex: 2,
}} }}
> >
{!isTableLayout && ( {!isTableLayout && (
@ -202,34 +214,29 @@ const ConnectionsPage = () => {
<BaseSearchBox onSearch={(match) => setMatch(() => match)} /> <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
</Box> </Box>
<Box {filterConn.length === 0 ? (
height="calc(100% - 65px)" <BaseEmpty />
sx={{ ) : isTableLayout ? (
userSelect: "text", <ConnectionTable
margin: "10px", connections={filterConn}
borderRadius: "8px", onShowDetail={(detail) => detailRef.current?.open(detail)}
bgcolor: isDark ? "#282a36" : "#ffffff", />
}} ) : (
> <Virtuoso
{filterConn.length === 0 ? ( style={{
<BaseEmpty /> flex: 1,
) : isTableLayout ? ( // backgroundColor: isDark ? "#282a36" : "#ffffff",
<ConnectionTable borderRadius: "8px",
connections={filterConn} }}
onShowDetail={(detail) => detailRef.current?.open(detail)} data={filterConn}
/> itemContent={(_, item) => (
) : ( <ConnectionItem
<Virtuoso value={item}
data={filterConn} onShowDetail={() => detailRef.current?.open(item)}
itemContent={(_, item) => ( />
<ConnectionItem )}
value={item} />
onShowDetail={() => detailRef.current?.open(item)} )}
/>
)}
/>
)}
</Box>
<ConnectionDetail ref={detailRef} /> <ConnectionDetail ref={detailRef} />
</BasePage> </BasePage>
); );

43
src/pages/logs.tsx
View File

@ -44,7 +44,12 @@ const LogPage = () => {
<BasePage <BasePage
full full
title={t("Logs")} title={t("Logs")}
contentStyle={{ height: "100%" }} contentStyle={{
height: "100%",
display: "flex",
flexDirection: "column",
overflow: "auto",
}}
header={ header={
<Box sx={{ display: "flex", alignItems: "center", gap: 2 }}> <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<IconButton <IconButton
@ -102,27 +107,21 @@ const LogPage = () => {
/> />
</Box> </Box>
<Box {filterLogs.length > 0 ? (
height="calc(100% - 65px)" <Virtuoso
sx={{ initialTopMostItemIndex={999}
margin: "10px", data={filterLogs}
borderRadius: "8px", style={{
bgcolor: isDark ? "#282a36" : "#ffffff", flex: 1,
}} }}
> itemContent={(index, item) => (
{filterLogs.length > 0 ? ( <LogItem value={item} searchState={searchState} />
<Virtuoso )}
initialTopMostItemIndex={999} followOutput={"smooth"}
data={filterLogs} />
itemContent={(index, item) => ( ) : (
<LogItem value={item} searchState={searchState} /> <BaseEmpty />
)} )}
followOutput={"smooth"}
/>
) : (
<BaseEmpty />
)}
</Box>
</BasePage> </BasePage>
); );
}; };

85
src/pages/profiles.tsx
View File

@ -367,20 +367,19 @@ const ProfilePage = () => {
{t("New")} {t("New")}
</Button> </Button>
</Stack> </Stack>
<Box
sx={{ <DndContext
pt: 1, sensors={sensors}
mb: 0.5, collisionDetection={closestCenter}
pl: "10px", onDragEnd={onDragEnd}
mr: "10px",
height: "calc(100% - 68px)",
overflowY: "auto",
}}
> >
<DndContext <Box
sensors={sensors} sx={{
collisionDetection={closestCenter} pl: "10px",
onDragEnd={onDragEnd} pr: "10px",
height: "calc(100% - 68px)",
overflowY: "auto",
}}
> >
<Box sx={{ mb: 1.5 }}> <Box sx={{ mb: 1.5 }}>
<Grid2 container spacing={{ xs: 1, lg: 1 }}> <Grid2 container spacing={{ xs: 1, lg: 1 }}>
@ -412,38 +411,38 @@ const ProfilePage = () => {
</SortableContext> </SortableContext>
</Grid2> </Grid2>
</Box> </Box>
</DndContext> <Divider
<Divider variant="middle"
variant="middle" flexItem
flexItem sx={{ width: `calc(100% - 32px)`, borderColor: dividercolor }}
sx={{ width: `calc(100% - 32px)`, borderColor: dividercolor }} ></Divider>
></Divider> <Box sx={{ mt: 1.5 }}>
<Box sx={{ mt: 1.5 }}> <Grid2 container spacing={{ xs: 1, lg: 1 }}>
<Grid2 container spacing={{ xs: 1, lg: 1 }}> <Grid2 size={{ xs: 12, sm: 6, md: 6, lg: 6 }}>
<Grid2 size={{ xs: 12, sm: 6, md: 6, lg: 6 }}> <ProfileMore
<ProfileMore id="Merge"
id="Merge" onSave={async (prev, curr) => {
onSave={async (prev, curr) => { if (prev !== curr) {
if (prev !== curr) { await onEnhance(false);
await onEnhance(false); }
} }}
}} />
/> </Grid2>
<Grid2 size={{ xs: 12, sm: 6, md: 6, lg: 6 }}>
<ProfileMore
id="Script"
logInfo={chainLogs["Script"]}
onSave={async (prev, curr) => {
if (prev !== curr) {
await onEnhance(false);
}
}}
/>
</Grid2>
</Grid2> </Grid2>
<Grid2 size={{ xs: 12, sm: 6, md: 6, lg: 6 }}> </Box>
<ProfileMore
id="Script"
logInfo={chainLogs["Script"]}
onSave={async (prev, curr) => {
if (prev !== curr) {
await onEnhance(false);
}
}}
/>
</Grid2>
</Grid2>
</Box> </Box>
</Box> </DndContext>
<ProfileViewer <ProfileViewer
ref={viewerRef} ref={viewerRef}

56
src/pages/rules.tsx
View File

@ -39,7 +39,12 @@ const RulesPage = () => {
<BasePage <BasePage
full full
title={t("Rules")} title={t("Rules")}
contentStyle={{ height: "100%" }} contentStyle={{
height: "100%",
display: "flex",
flexDirection: "column",
overflow: "auto",
}}
header={ header={
<Box display="flex" alignItems="center" gap={1}> <Box display="flex" alignItems="center" gap={1}>
<ProviderButton /> <ProviderButton />
@ -59,34 +64,27 @@ const RulesPage = () => {
<BaseSearchBox onSearch={(match) => setMatch(() => match)} /> <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
</Box> </Box>
<Box {rules.length > 0 ? (
height="calc(100% - 65px)" <>
sx={{ <Virtuoso
margin: "10px", ref={virtuosoRef}
borderRadius: "8px", data={rules}
bgcolor: isDark ? "#282a36" : "#ffffff", style={{
position: "relative", flex: 1,
}} }}
> itemContent={(index, item) => (
{rules.length > 0 ? ( <RuleItem index={index + 1} value={item} />
<> )}
<Virtuoso followOutput={"smooth"}
ref={virtuosoRef} scrollerRef={(ref) => {
data={rules} if (ref) ref.addEventListener("scroll", handleScroll);
itemContent={(index, item) => ( }}
<RuleItem index={index + 1} value={item} /> />
)} <ScrollTopButton onClick={scrollToTop} show={showScrollTop} />
followOutput={"smooth"} </>
scrollerRef={(ref) => { ) : (
if (ref) ref.addEventListener("scroll", handleScroll); <BaseEmpty />
}} )}
/>
<ScrollTopButton onClick={scrollToTop} show={showScrollTop} />
</>
) : (
<BaseEmpty />
)}
</Box>
</BasePage> </BasePage>
); );
}; };