style: fix styles

2025-05-05 04:33:45 +08:00 · 2024-03-10 23:45:23 +08:00 · 2024-03-10 23:45:23 +08:00 · 7186575cb1
commit 7186575cb1
parent 2ecae40130
9 changed files with 147 additions and 82 deletions
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@ -35,6 +35,9 @@ body {
  border-radius: 6px;
  background-color: var(--scroller-color);
 }
+*::-webkit-scrollbar-corner {
+  background-color: transparent;
+}

 body {
  overflow: hidden;
--- a/src/components/connection/connection-item.tsx
+++ b/src/components/connection/connection-item.tsx
@ -38,6 +38,7 @@ export const ConnectionItem = (props: Props) => {
  return (
    <ListItem
      dense
+      sx={{ borderBottom: "1px solid var(--divider-color)" }}
      secondaryAction={
        <IconButton edge="end" color="inherit" onClick={onDelete}>
          <CloseRounded />
--- a/src/components/proxy/proxy-groups.tsx
+++ b/src/components/proxy/proxy-groups.tsx
@ -7,6 +7,7 @@ import {
  updateProxy,
  deleteConnection,
 } from "@/services/api";
+import { Box } from "@mui/material";
 import { useProfiles } from "@/hooks/use-profiles";
 import { useVerge } from "@/hooks/use-verge";
 import { BaseEmpty } from "../base";
@ -117,7 +118,7 @@ export const ProxyGroups = (props: Props) => {
  return (
    <Virtuoso
      ref={virtuosoRef}
-      style={{ height: "100%" }}
+      style={{ height: "calc(100% - 12px)" }}
      totalCount={renderList.length}
      increaseViewportBy={256}
      itemContent={(index) => (
--- a/src/components/rule/rule-item.tsx
+++ b/src/components/rule/rule-item.tsx
@ -34,7 +34,7 @@ const RuleItem = (props: Props) => {
  const { index, value } = props;

  return (
-    <Item>
+    <Item sx={{ borderBottom: "1px solid var(--divider-color)" }}>
      <Typography
        color="text.secondary"
        variant="body2"
--- a/src/pages/connections.tsx
+++ b/src/pages/connections.tsx
@ -25,6 +25,7 @@ import {
  ConnectionDetailRef,
 } from "@/components/connection/connection-detail";
 import parseTraffic from "@/utils/parse-traffic";
+import { useCustomTheme } from "@/components/layout/use-custom-theme";

 const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };

@ -33,7 +34,8 @@ type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[];
 const ConnectionsPage = () => {
  const { t, i18n } = useTranslation();
  const { clashInfo } = useClashInfo();
-
+  const { theme } = useCustomTheme();
+  const isDark = theme.palette.mode === "dark";
  const [filterText, setFilterText] = useState("");
  const [curOrderOpt, setOrderOpt] = useState("Default");
  const [connData, setConnData] = useState<IConnections>(initConn);
@ -106,7 +108,6 @@ const ConnectionsPage = () => {

  useEffect(() => {
    if (!clashInfo) return;
-
    const { server = "", secret = "" } = clashInfo;
    connect(`ws://${server}/connections?token=${encodeURIComponent(secret)}`);

@ -198,7 +199,15 @@ const ConnectionsPage = () => {
        />
      </Box>

-      <Box height="calc(100% - 50px)" sx={{ userSelect: "text" }}>
+      <Box
+        height="calc(100% - 70px)"
+        sx={{
+          userSelect: "text",
+          margin: "12px",
+          borderRadius: "8px",
+          bgcolor: isDark ? "#282a36" : "#ffffff",
+        }}
+      >
        {filterConn.length === 0 ? (
          <BaseEmpty text="No Connections" />
        ) : isTableLayout ? (
--- a/src/pages/logs.tsx
+++ b/src/pages/logs.tsx
@ -18,12 +18,14 @@ import {
 import { atomEnableLog, atomLogData } from "@/services/states";
 import { BaseEmpty, BasePage } from "@/components/base";
 import LogItem from "@/components/log/log-item";
+import { useCustomTheme } from "@/components/layout/use-custom-theme";

 const LogPage = () => {
  const { t } = useTranslation();
  const [logData, setLogData] = useRecoilState(atomLogData);
  const [enableLog, setEnableLog] = useRecoilState(atomEnableLog);
-
+  const { theme } = useCustomTheme();
+  const isDark = theme.palette.mode === "dark";
  const [logState, setLogState] = useState("all");
  const [filterText, setFilterText] = useState("");

@ -107,7 +109,14 @@ const LogPage = () => {
        />
      </Box>

-      <Box height="calc(100% - 50px)">
+      <Box
+        height="calc(100% - 70px)"
+        sx={{
+          margin: "12px",
+          borderRadius: "8px",
+          bgcolor: isDark ? "#282a36" : "#ffffff",
+        }}
+      >
        {filterLogs.length > 0 ? (
          <Virtuoso
            initialTopMostItemIndex={999}
--- a/src/pages/profiles.tsx
+++ b/src/pages/profiles.tsx
@ -238,7 +238,9 @@ const ProfilePage = () => {

  return (
    <BasePage
+      full
      title={t("Profiles")}
+      contentStyle={{ height: "100%" }}
      header={
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <IconButton
@ -270,7 +272,18 @@ const ProfilePage = () => {
        </Box>
      }
    >
-      <Stack direction="row" spacing={1} sx={{ mb: 2 }}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          pt: 1,
+          mb: 0.5,
+          mx: "10px",
+          height: "36px",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
        <TextField
          hiddenLabel
          fullWidth
@ -322,55 +335,66 @@ const ProfilePage = () => {
          {t("New")}
        </Button>
      </Stack>
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={onDragEnd}
+      <Box
+        sx={{
+          pt: 1,
+          mb: 0.5,
+          pl: "10px",
+          mr: "10px",
+          height: "calc(100% - 20px)",
+          overflowY: "auto",
+        }}
      >
-        <Box sx={{ mb: 4.5 }}>
-          <Grid container spacing={{ xs: 1, lg: 1 }}>
-            <SortableContext
-              items={regularItems.map((x) => {
-                return x.uid;
-              })}
-            >
-              {regularItems.map((item) => (
-                <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
-                  <ProfileItem
-                    id={item.uid}
-                    selected={profiles.current === item.uid}
-                    activating={activating === item.uid}
-                    itemData={item}
-                    onSelect={(f) => onSelect(item.uid, f)}
-                    onEdit={() => viewerRef.current?.edit(item)}
-                  />
-                </Grid>
-              ))}
-            </SortableContext>
-          </Grid>
-        </Box>
-      </DndContext>
-
-      {enhanceItems.length > 0 && (
-        <Grid container spacing={{ xs: 2, lg: 2 }}>
-          {enhanceItems.map((item) => (
-            <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
-              <ProfileMore
-                selected={!!chain.includes(item.uid)}
-                itemData={item}
-                enableNum={chain.length || 0}
-                logInfo={chainLogs[item.uid]}
-                onEnable={() => onEnable(item.uid)}
-                onDisable={() => onDisable(item.uid)}
-                onDelete={() => onDelete(item.uid)}
-                onMoveTop={() => onMoveTop(item.uid)}
-                onMoveEnd={() => onMoveEnd(item.uid)}
-                onEdit={() => viewerRef.current?.edit(item)}
-              />
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={onDragEnd}
+        >
+          <Box sx={{ mb: 4.5 }}>
+            <Grid container spacing={{ xs: 1, lg: 1 }}>
+              <SortableContext
+                items={regularItems.map((x) => {
+                  return x.uid;
+                })}
+              >
+                {regularItems.map((item) => (
+                  <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
+                    <ProfileItem
+                      id={item.uid}
+                      selected={profiles.current === item.uid}
+                      activating={activating === item.uid}
+                      itemData={item}
+                      onSelect={(f) => onSelect(item.uid, f)}
+                      onEdit={() => viewerRef.current?.edit(item)}
+                    />
+                  </Grid>
+                ))}
+              </SortableContext>
            </Grid>
-          ))}
-        </Grid>
-      )}
+          </Box>
+        </DndContext>
+
+        {enhanceItems.length > 0 && (
+          <Grid container spacing={{ xs: 2, lg: 2 }}>
+            {enhanceItems.map((item) => (
+              <Grid item xs={12} sm={6} md={4} lg={3} key={item.file}>
+                <ProfileMore
+                  selected={!!chain.includes(item.uid)}
+                  itemData={item}
+                  enableNum={chain.length || 0}
+                  logInfo={chainLogs[item.uid]}
+                  onEnable={() => onEnable(item.uid)}
+                  onDisable={() => onDisable(item.uid)}
+                  onDelete={() => onDelete(item.uid)}
+                  onMoveTop={() => onMoveTop(item.uid)}
+                  onMoveEnd={() => onMoveEnd(item.uid)}
+                  onEdit={() => viewerRef.current?.edit(item)}
+                />
+              </Grid>
+            ))}
+          </Grid>
+        )}
+      </Box>
      <ProfileViewer ref={viewerRef} onChange={() => mutateProfiles()} />
      <ConfigViewer ref={configRef} />
    </BasePage>
--- a/src/pages/rules.tsx
+++ b/src/pages/rules.tsx
@ -7,11 +7,13 @@ import { getRules } from "@/services/api";
 import { BaseEmpty, BasePage } from "@/components/base";
 import RuleItem from "@/components/rule/rule-item";
 import { ProviderButton } from "@/components/rule/provider-button";
+import { useCustomTheme } from "@/components/layout/use-custom-theme";

 const RulesPage = () => {
  const { t } = useTranslation();
  const { data = [] } = useSWR("getRules", getRules);
-
+  const { theme } = useCustomTheme();
+  const isDark = theme.palette.mode === "dark";
  const [filterText, setFilterText] = useState("");

  const rules = useMemo(() => {
@ -53,7 +55,14 @@ const RulesPage = () => {
        />
      </Box>

-      <Box height="calc(100% - 50px)">
+      <Box
+        height="calc(100% - 70px)"
+        sx={{
+          margin: "12px",
+          borderRadius: "8px",
+          bgcolor: isDark ? "#282a36" : "#ffffff",
+        }}
+      >
        {rules.length > 0 ? (
          <Virtuoso
            data={rules}
--- a/src/pages/test.tsx
+++ b/src/pages/test.tsx
@ -111,6 +111,7 @@ const TestPage = () => {

  return (
    <BasePage
+      full
      title={t("Test")}
      header={
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
@ -131,32 +132,40 @@ const TestPage = () => {
        </Box>
      }
    >
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragEnd={onDragEnd}
+      <Box
+        sx={{
+          pt: 1,
+          mb: 0.5,
+          px: "10px",
+        }}
      >
-        <Box sx={{ mb: 4.5 }}>
-          <Grid container spacing={{ xs: 1, lg: 1 }}>
-            <SortableContext
-              items={testList.map((x) => {
-                return x.uid;
-              })}
-            >
-              {testList.map((item) => (
-                <Grid item xs={6} sm={4} md={3} lg={2} key={item.uid}>
-                  <TestItem
-                    id={item.uid}
-                    itemData={item}
-                    onEdit={() => viewerRef.current?.edit(item)}
-                    onDelete={onDeleteTestListItem}
-                  />
-                </Grid>
-              ))}
-            </SortableContext>
-          </Grid>
-        </Box>
-      </DndContext>
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={onDragEnd}
+        >
+          <Box sx={{ mb: 4.5 }}>
+            <Grid container spacing={{ xs: 1, lg: 1 }}>
+              <SortableContext
+                items={testList.map((x) => {
+                  return x.uid;
+                })}
+              >
+                {testList.map((item) => (
+                  <Grid item xs={6} sm={4} md={3} lg={2} key={item.uid}>
+                    <TestItem
+                      id={item.uid}
+                      itemData={item}
+                      onEdit={() => viewerRef.current?.edit(item)}
+                      onDelete={onDeleteTestListItem}
+                    />
+                  </Grid>
+                ))}
+              </SortableContext>
+            </Grid>
+          </Box>
+        </DndContext>
+      </Box>
      <TestViewer ref={viewerRef} onChange={onTestListItemChange} />
    </BasePage>
  );