optimize rule page performance

This commit is contained in:
pompurin404 2024-08-05 15:41:04 +08:00
parent 951cd85c12
commit d68b2686f7
No known key found for this signature in database
2 changed files with 9 additions and 12 deletions

View File

@ -4,7 +4,7 @@ import React from 'react'
const RuleItem: React.FC<IMihomoRulesDetail> = (props) => { const RuleItem: React.FC<IMihomoRulesDetail> = (props) => {
const { type, payload, proxy } = props const { type, payload, proxy } = props
return ( return (
<Card className="m-2"> <Card className="mb-2 mx-2">
<CardBody className="flex justify-between"> <CardBody className="flex justify-between">
<div className="flex justify-between"> <div className="flex justify-between">
<div className="select-none">{type}</div> <div className="select-none">{type}</div>

View File

@ -1,5 +1,6 @@
import BasePage from '@renderer/components/base/base-page' import BasePage from '@renderer/components/base/base-page'
import RuleItem from '@renderer/components/rules/rule-item' import RuleItem from '@renderer/components/rules/rule-item'
import { Virtuoso } from 'react-virtuoso'
import { useMemo, useState } from 'react' import { useMemo, useState } from 'react'
import { Input } from '@nextui-org/react' import { Input } from '@nextui-org/react'
import useSWR from 'swr' import useSWR from 'swr'
@ -31,17 +32,13 @@ const Rules: React.FC = () => {
onValueChange={setFilter} onValueChange={setFilter}
/> />
</div> </div>
{filteredRules.map((rule, index) => { <Virtuoso
return ( style={{ height: 'calc(100vh - 100px)' }}
<RuleItem data={filteredRules}
key={rule.payload + index} itemContent={(_, rule) => (
type={rule.type} <RuleItem type={rule.type} payload={rule.payload} proxy={rule.proxy} size={rule.size} />
payload={rule.payload} )}
proxy={rule.proxy} />
size={rule.size}
/>
)
})}
</BasePage> </BasePage>
) )
} }