display size 4 GeoSite

MetaCubeX · May 8, 2023 · 95aaf0f · 95aaf0f
1 parent 252f173
commit 95aaf0f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/src/api/rules.ts b/src/api/rules.ts
@@ -11,6 +11,7 @@ type RuleAPIItem = {
   type: string;
   payload: string;
   proxy: string;
+  size: number;
 };
 
 function normalizeAPIResponse(json: { rules: Array<RuleAPIItem> }): Array<RuleItem> {

diff --git a/src/components/Rule.module.scss b/src/components/Rule.module.scss
@@ -19,20 +19,31 @@
 .a {
   display: flex;
   align-items: center;
-  font-size: 12px;
+  font-size: 1em;
   opacity: 0.8;
 }
 
 .b {
+  flex-grow: 1;
   padding: 10px 0;
   font-family: 'Roboto Mono', Menlo, monospace;
-  font-size: 12px;
+  font-size: 1em;
   @media (--breakpoint-not-small) {
-    font-size: 12px;
+    font-size: 1em;
   }
 }
 
 .type {
   width: 110px;
   color: #3b5f76;
 }
+
+.size {
+  width: 110px;
+  color: #3b5f76a1;
+}
+
+.payloadAndSize {
+  display: inline-flex;
+  align-items: center;
+}
diff --git a/src/components/Rule.tsx b/src/components/Rule.tsx
@@ -21,15 +21,19 @@ type Props = {
   type?: string;
   payload?: string;
   proxy?: string;
+  size?: number;
 };
 
-function Rule({ type, payload, proxy, id }: Props) {
+function Rule({ type, payload, proxy, id, size }: Props) {
   const styleProxy = getStyleFor({ proxy });
   return (
     <div className={s0.rule}>
       <div className={s0.left}>{id}</div>
-      <div>
-        <div className={s0.b}>{payload}</div>
+      <div className={s0.content}>
+        <div className={s0.payloadAndSize}>
+          <div className={s0.payload}>{payload}</div>
+          {type === 'GeoSite' && <div className={s0.size}> : {size}</div>}
+        </div>
         <div className={s0.a}>
           <div className={s0.type}>{type}</div>
           <div style={styleProxy}>{proxy}</div>