From 091b92cc50779c393a500f6288a8c6ae53babb3f Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Sat, 3 Aug 2024 21:44:07 +0800
Subject: [PATCH] rule page

---
 .../src/components/rules/rule-item.tsx        | 19 ++++++++
 src/renderer/src/pages/rules.tsx              | 44 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/src/components/rules/rule-item.tsx

diff --git a/src/renderer/src/components/rules/rule-item.tsx b/src/renderer/src/components/rules/rule-item.tsx
new file mode 100644
index 0000000..a4dbbd8
--- /dev/null
+++ b/src/renderer/src/components/rules/rule-item.tsx
@@ -0,0 +1,19 @@
+import { Card, CardBody } from '@nextui-org/react'
+import React from 'react'
+
+const RuleItem: React.FC<IMihomoRulesDetail> = (props) => {
+  const { type, payload, proxy } = props
+  return (
+    <Card className="m-2">
+      <CardBody className="flex justify-between">
+        <div className="flex justify-between">
+          <div className="select-none">{type}</div>
+          <div className="select-none">{payload}</div>
+          <div className="select-none">{proxy}</div>
+        </div>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default RuleItem
diff --git a/src/renderer/src/pages/rules.tsx b/src/renderer/src/pages/rules.tsx
index 9a3bba7..bc83b94 100644
--- a/src/renderer/src/pages/rules.tsx
+++ b/src/renderer/src/pages/rules.tsx
@@ -1,7 +1,49 @@
 import BasePage from '@renderer/components/base/base-page'
+import RuleItem from '@renderer/components/rules/rule-item'
+import { useMemo, useState } from 'react'
+import { Input } from '@nextui-org/react'
+import useSWR from 'swr'
+import { mihomoRules } from '@renderer/utils/ipc'
 
 const Rules: React.FC = () => {
-  return <BasePage title="分流规则"></BasePage>
+  const { data: rules = { rules: [] } } = useSWR<IMihomoRulesInfo>('/rules', mihomoRules, {
+    refreshInterval: 5000
+  })
+  const [filter, setFilter] = useState('')
+
+  const filteredRules = useMemo(() => {
+    if (filter === '') return rules.rules
+    return rules.rules.filter((rule) => {
+      return (
+        rule.payload.includes(filter) || rule.type.includes(filter) || rule.proxy.includes(filter)
+      )
+    })
+  }, [rules, filter])
+
+  return (
+    <BasePage title="分流规则">
+      <div className="sticky top-[48px] z-40 backdrop-blur bg-background/40 flex p-2">
+        <Input
+          variant="bordered"
+          size="sm"
+          value={filter}
+          placeholder="筛选过滤"
+          onValueChange={setFilter}
+        />
+      </div>
+      {filteredRules.map((rule, index) => {
+        return (
+          <RuleItem
+            key={rule.payload + index}
+            type={rule.type}
+            payload={rule.payload}
+            proxy={rule.proxy}
+            size={rule.size}
+          />
+        )
+      })}
+    </BasePage>
+  )
 }
 
 export default Rules