fix: displays rule lineNo instead of index in rule page (#6230) (#6286)

* fix: displays rule lineNo instead of index in rule page (#6230)

* fix(rules): derive line numbers in view model without mutating shared rules

* doc: update changelog

---------

Co-authored-by: Slinetrac <realakayuki@gmail.com>

Changelog.md

@@ -10,6 +10,7 @@
 - 修复恢复休眠后无法操作托盘
 - 修复首页当前节点图标语义显示不一致
 - 修复使用 URL scheme 导入订阅时没有及时重载配置
+- 修复规则界面里的行号展示逻辑
 
 <details>
 <summary><strong> ✨ 新增功能 </strong></summary>

src/components/rule/rule-item.tsx

@@ -1,4 +1,5 @@
 import { styled, Box, Typography } from "@mui/material";
+import { Rule } from "tauri-plugin-mihomo-api";
 
 const Item = styled(Box)(({ theme }) => ({
   display: "flex",
@@ -15,8 +16,7 @@ const COLOR = [
 ];
 
 interface Props {
-  index: number;
-  value: IRuleItem;
+  value: Rule & { lineNo: number };
 }
 
 const parseColor = (text: string) => {
@@ -31,7 +31,7 @@ const parseColor = (text: string) => {
 };
 
 const RuleItem = (props: Props) => {
-  const { index, value } = props;
+  const { value } = props;
 
   return (
     <Item sx={{ borderBottom: "1px solid var(--divider-color)" }}>
@@ -40,7 +40,7 @@ const RuleItem = (props: Props) => {
         variant="body2"
         sx={{ lineHeight: 2, minWidth: 30, mr: 2.25, textAlign: "center" }}
       >
-        {index}
+        {value.lineNo}
       </Typography>
 
       <Box sx={{ userSelect: "text" }}>

src/pages/rules.tsx

@@ -30,7 +30,13 @@ const RulesPage = () => {
   }, [refreshRules, refreshRuleProviders, pageVisible]);
 
   const filteredRules = useMemo(() => {
-    return rules.filter((item) => match(item.payload));
+    const rulesWithLineNo = rules.map((item, index) => ({
+      ...item,
+      // UI-only derived data; keep app context/SWR data immutable
+      lineNo: index + 1,
+    }));
+
+    return rulesWithLineNo.filter((item) => match(item.payload ?? ""));
   }, [rules, match]);
 
   const scrollToTop = () => {
@@ -81,9 +87,7 @@ const RulesPage = () => {
             style={{
               flex: 1,
             }}
-            itemContent={(index, item) => (
-              <RuleItem index={index + 1} value={item} />
-            )}
+            itemContent={(_index, item) => <RuleItem value={item} />}
             followOutput={"smooth"}
             scrollerRef={(ref) => {
               if (ref) ref.addEventListener("scroll", handleScroll);

src/providers/app-data-provider.tsx

@@ -298,7 +298,7 @@ export const AppDataProvider = ({
       // 数据
       proxies: proxiesData,
       clashConfig,
-      rules: rulesData?.rules || [],
+      rules: rulesData?.rules ?? [],
       sysproxy,
       runningMode,
       uptime: uptimeData || 0,

src/types/global.d.ts

@@ -82,12 +82,6 @@ interface IConfigData {
   "proxy-groups"?: IProxyGroupItem[];
 }
 
-interface IRuleItem {
-  type: string;
-  payload: string;
-  proxy: string;
-}
-
 interface IProxyItem {
   name: string;
   type: string;