rule page

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

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