feat: make proxies material you

LibNyanpasu · Jan 5, 2024 · 2600772 · 2600772
1 parent a7ddd3a
commit 2600772
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 89 deletions.
diff --git a/src/assets/styles/page.scss b/src/assets/styles/page.scss
@@ -34,20 +34,17 @@
 
       .base-content {
         width: calc(100% - 28px * 2);
-        // max-width: 850px;
         margin: 0 auto;
-        // animation: var(--base-content-animation, opacity-content-in) var(base-content-in, 300ms) normal 1 forwards;
+      }
+    }
 
-        @keyframes base-content-in {
-          0% {
-            opacity: 0;
-            transform: translateY(50%) scale(0.9);
-          }
+    &.no-padding {
+      > section {
+        padding: 0;
+        overflow: visible;
 
-          100% {
-            opacity: 1;
-            transform: translateY(0) scale(1);
-          }
+        .base-content {
+          width: 100%;
         }
       }
     }

diff --git a/src/components/base/base-page.tsx b/src/components/base/base-page.tsx
@@ -7,10 +7,11 @@ interface Props {
   header?: React.ReactNode; // something behind title
   contentStyle?: React.CSSProperties;
   children?: ReactNode;
+  full?: boolean;
 }
 
 export const BasePage: React.FC<Props> = (props) => {
-  const { title, header, contentStyle, children } = props;
+  const { title, header, contentStyle, full, children } = props;
 
   return (
     <BaseErrorBoundary>
@@ -23,7 +24,7 @@ export const BasePage: React.FC<Props> = (props) => {
           {header}
         </header>
 
-        <div className="base-container">
+        <div className={full ? "base-container no-padding" : "base-container"}>
           <section>
             <div className="base-content" style={contentStyle} data-windrag>
               {children}

diff --git a/src/components/proxy/proxy-group.module.scss b/src/components/proxy/proxy-group.module.scss
@@ -0,0 +1,7 @@
+.proxyVirtuoso {
+  :global(div[data-viewport-type="element"]) {
+    width: calc(100% - 28px * 2) !important;
+    height: calc(100% - 28px) !important;
+    padding: 14px 28px;
+  }
+}
diff --git a/src/components/proxy/proxy-groups.tsx b/src/components/proxy/proxy-groups.tsx
@@ -13,6 +13,8 @@ import { BaseEmpty } from "../base";
 import { useRenderList } from "./use-render-list";
 import { ProxyRender } from "./proxy-render";
 import delayManager from "@/services/delay";
+import { classNames } from "@/utils";
+import styles from "./proxy-group.module.scss";
 
 interface Props {
   mode: string;
@@ -117,6 +119,7 @@ export const ProxyGroups = (props: Props) => {
     <Virtuoso
       ref={virtuosoRef}
       style={{ height: "100%" }}
+      className={classNames(styles.proxyVirtuoso)}
       totalCount={renderList.length}
       increaseViewportBy={256}
       itemContent={(index) => (

diff --git a/src/components/proxy/proxy-item-mini.tsx b/src/components/proxy/proxy-item-mini.tsx
@@ -47,8 +47,8 @@ export const ProxyItemMini = (props: Props) => {
       sx={[
         {
           height: 56,
-          borderRadius: 1,
-          pl: 1.5,
+          borderRadius: 7,
+          pl: 2,
           pr: 1,
           justifyContent: "space-between",
           alignItems: "center",

diff --git a/src/components/proxy/proxy-item.tsx b/src/components/proxy/proxy-item.tsx
@@ -74,7 +74,7 @@ export const ProxyItem = (props: Props) => {
         selected={selected}
         onClick={() => onClick?.(proxy.name)}
         sx={[
-          { borderRadius: 1 },
+          { borderRadius: 7 },
           ({ palette: { mode, primary } }) => {
             const bgcolor =
               mode === "light"

diff --git a/src/components/proxy/proxy-render.tsx b/src/components/proxy/proxy-render.tsx
@@ -5,6 +5,7 @@ import {
   ListItemButton,
   Typography,
   styled,
+  Paper,
 } from "@mui/material";
 import {
   ExpandLessRounded,
@@ -33,57 +34,89 @@ export const ProxyRender = (props: RenderProps) => {
 
   if (type === 0) {
     return (
-      <ListItemButton
-        dense
-        onClick={() => onHeadState(group.name, { open: !headState?.open })}
+      <Paper
+        sx={{
+          boxShadow: 2,
+          borderRadius: 7,
+          marginTop: 2,
+          marginBottom: 2,
+        }}
       >
-        <ListItemText
-          primary={group.name}
-          secondary={
-            <ListItemTextChild
-              sx={{
-                overflow: "hidden",
-                display: "flex",
-                alignItems: "center",
-                pt: "2px",
-              }}
-            >
-              <StyledTypeBox>{group.type}</StyledTypeBox>
-              <StyledSubtitle>{group.now}</StyledSubtitle>
-            </ListItemTextChild>
-          }
-          secondaryTypographyProps={{
-            sx: { display: "flex", alignItems: "center" },
+        <ListItemButton
+          dense
+          onClick={() => onHeadState(group.name, { open: !headState?.open })}
+          sx={{
+            borderRadius: 7,
           }}
-        />
-        {headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
-      </ListItemButton>
+        >
+          <ListItemText
+            primary={group.name}
+            secondary={
+              <ListItemTextChild
+                sx={{
+                  overflow: "hidden",
+                  display: "flex",
+                  alignItems: "center",
+                  pt: "2px",
+                }}
+              >
+                <StyledTypeBox>{group.type}</StyledTypeBox>
+                <StyledSubtitle>{group.now}</StyledSubtitle>
+              </ListItemTextChild>
+            }
+            secondaryTypographyProps={{
+              sx: { display: "flex", alignItems: "center" },
+            }}
+          />
+          {headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
+        </ListItemButton>
+      </Paper>
     );
   }
 
   if (type === 1) {
     return (
-      <ProxyHead
-        sx={{ pl: indent ? 4.5 : 2.5, pr: 3, mt: indent ? 1 : 0.5, mb: 1 }}
-        groupName={group.name}
-        headState={headState!}
-        onLocation={() => onLocation(group)}
-        onCheckDelay={() => onCheckAll(group.name)}
-        onHeadState={(p) => onHeadState(group.name, p)}
-      />
+      <Paper
+        sx={{
+          boxShadow: 2,
+          borderTopLeftRadius: "28px",
+          borderTopRightRadius: "28px",
+          borderBottomLeftRadius: "0",
+          borderBottomRightRadius: "0",
+        }}
+      >
+        <ProxyHead
+          sx={{
+            padding: 2,
+            mt: indent ? 1 : 0.5,
+          }}
+          groupName={group.name}
+          headState={headState!}
+          onLocation={() => onLocation(group)}
+          onCheckDelay={() => onCheckAll(group.name)}
+          onHeadState={(p) => onHeadState(group.name, p)}
+        />
+      </Paper>
     );
   }
 
   if (type === 2) {
     return (
-      <ProxyItem
-        groupName={group.name}
-        proxy={proxy!}
-        selected={group.now === proxy?.name}
-        showType={headState?.showType}
-        sx={{ py: 0, pl: indent ? 4 : 2 }}
-        onClick={() => onChangeProxy(group, proxy!)}
-      />
+      <Paper
+        sx={{
+          boxShadow: 2,
+          borderRadius: "0",
+        }}
+      >
+        <ProxyItem
+          groupName={group.name}
+          proxy={proxy!}
+          selected={group.now === proxy?.name}
+          showType={headState?.showType}
+          sx={{ py: 0, pl: 2, pb: 1 }}
+          onClick={() => onChangeProxy(group, proxy!)}
+        />
+      </Paper>
     );
   }
 
@@ -107,28 +140,50 @@ export const ProxyRender = (props: RenderProps) => {
 
   if (type === 4) {
     return (
-      <Box
+      <Paper
         sx={{
-          height: 56,
-          display: "grid",
-          gap: 1,
-          pl: indent ? 4 : 2,
-          pr: 2,
-          pb: 1,
-          gridTemplateColumns: `repeat(${item.col! || 2}, 1fr)`,
+          boxShadow: 2,
+          borderRadius: "0",
         }}
       >
-        {proxyCol?.map((proxy) => (
-          <ProxyItemMini
-            key={item.key + proxy.name}
-            groupName={group.name}
-            proxy={proxy!}
-            selected={group.now === proxy.name}
-            showType={headState?.showType}
-            onClick={() => onChangeProxy(group, proxy!)}
-          />
-        ))}
-      </Box>
+        <Box
+          sx={{
+            height: 56,
+            display: "grid",
+            gap: 1.5,
+            pl: 4,
+            pr: 4,
+            pb: 1.5,
+            gridTemplateColumns: `repeat(${item.col! || 2}, 1fr)`,
+          }}
+        >
+          {proxyCol?.map((proxy) => (
+            <ProxyItemMini
+              key={item.key + proxy.name}
+              groupName={group.name}
+              proxy={proxy!}
+              selected={group.now === proxy.name}
+              showType={headState?.showType}
+              onClick={() => onChangeProxy(group, proxy!)}
+            />
+          ))}
+        </Box>
+      </Paper>
+    );
+  }
+
+  if (type === 5) {
+    return (
+      <Paper
+        sx={{
+          boxShadow: 2,
+          borderTopLeftRadius: "0",
+          borderTopRightRadius: "0",
+          borderBottomLeftRadius: "28px",
+          borderBottomRightRadius: "28px",
+          height: 28,
+        }}
+      />
     );
   }
 

diff --git a/src/components/proxy/use-render-list.ts b/src/components/proxy/use-render-list.ts
@@ -11,8 +11,8 @@ import {
 } from "./use-head-state";
 
 export interface IRenderItem {
-  // 组 ｜ head ｜ item ｜ empty | item col
-  type: 0 | 1 | 2 | 3 | 4;
+  // 组 ｜ head ｜ item ｜ empty | item col | item bottom
+  type: 0 | 1 | 2 | 3 | 4 | 5;
   key: string;
   group: IProxyGroupItem;
   proxy?: IProxyItem;
@@ -89,7 +89,7 @@ export const useRenderList = (mode: string) => {
 
         // 支持多列布局
         if (col > 1) {
-          return ret.concat(
+          const lists = ret.concat(
             groupList(proxies, col).map((proxyCol) => ({
               type: 4,
               key: `col-${group.name}-${proxyCol[0].name}`,
@@ -99,9 +99,18 @@ export const useRenderList = (mode: string) => {
               proxyCol,
             })),
           );
+
+          lists.push({
+            type: 5,
+            key: `footer-${group.name}`,
+            group,
+            headState,
+          });
+
+          return lists;
         }
 
-        return ret.concat(
+        const lists = ret.concat(
           proxies.map((proxy) => ({
             type: 2,
             key: `${group.name}-${proxy!.name}`,
@@ -110,6 +119,15 @@ export const useRenderList = (mode: string) => {
             headState,
           })),
         );
+
+        lists.push({
+          type: 5,
+          key: `footer-${group.name}`,
+          group,
+          headState,
+        });
+
+        return lists;
       }
       return ret;
     });

diff --git a/src/pages/proxies.tsx b/src/pages/proxies.tsx
@@ -55,6 +55,7 @@ export default function ProxyPage() {
 
   return (
     <BasePage
+      full
       contentStyle={{ height: "100%" }}
       title={t("Proxy Groups")}
       header={
@@ -76,17 +77,7 @@ export default function ProxyPage() {
         </Box>
       }
     >
-      <Paper
-        sx={{
-          borderRadius: 1,
-          boxShadow: 2,
-          height: "100%",
-          boxSizing: "border-box",
-          py: 1,
-        }}
-      >
-        <ProxyGroups mode={curMode!} />
-      </Paper>
+      <ProxyGroups mode={curMode!} />
     </BasePage>
   );
 }