feat: allow moving rules between prepend and append (#7214)

* feat: allow moving rules between prepend and append

* chore: merge import

---------

Co-authored-by: ❤是纱雾酱哟～ <49941141+Dragon1573@users.noreply.github.com>

Changelog.md

@@ -26,5 +26,6 @@
 - 优化核心启动、停止及更新流程，减少竞态与残留进程
 - 优化首页当前节点的交互
 - Linux 代理设置缺失必要命令时，给出明确命令缺失信息，避免模糊报错
+- 支持在前置规则与后置规则之间直接切换规则位置
 
 </details>

src/components/profile/rule-item.tsx

@@ -1,6 +1,11 @@
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { DeleteForeverRounded, UndoRounded } from '@mui/icons-material'
+import {
+  DeleteForeverRounded,
+  UndoRounded,
+  VerticalAlignBottomRounded,
+  VerticalAlignTopRounded,
+} from '@mui/icons-material'
 import {
   Box,
   IconButton,
@@ -13,10 +18,12 @@ interface Props {
   type: 'prepend' | 'original' | 'delete' | 'append'
   ruleRaw: string
   onDelete: () => void
+  onPrepend?: () => void
+  onAppend?: () => void
 }
 
 export const RuleItem = (props: Props) => {
-  const { type, ruleRaw, onDelete } = props
+  const { type, ruleRaw, onDelete, onPrepend, onAppend } = props
   const sortable = type === 'prepend' || type === 'append'
   const rule = ruleRaw.replace(',no-resolve', '')
 
@@ -105,6 +112,16 @@ export const RuleItem = (props: Props) => {
           },
         }}
       />
+      {type === 'prepend' && (
+        <IconButton onClick={onAppend}>
+          <VerticalAlignBottomRounded />
+        </IconButton>
+      )}
+      {type === 'append' && (
+        <IconButton onClick={onPrepend}>
+          <VerticalAlignTopRounded />
+        </IconButton>
+      )}
       <IconButton onClick={onDelete}>
         {type === 'delete' ? <UndoRounded /> : <DeleteForeverRounded />}
       </IconButton>

src/components/profile/rules-editor-viewer.tsx

@@ -315,6 +315,12 @@ export const RulesEditorViewer = (props: Props) => {
                   onDelete={() => {
                     setPrependSeq(prependSeq.filter((v) => v !== item))
                   }}
+                  onAppend={() => {
+                    setAppendSeq((prev) =>
+                      prev.includes(item) ? prev : [...prev, item],
+                    )
+                    setPrependSeq(prependSeq.filter((v) => v !== item))
+                  }}
                 />
               )
             })}
@@ -364,6 +370,12 @@ export const RulesEditorViewer = (props: Props) => {
                   onDelete={() => {
                     setAppendSeq(appendSeq.filter((v) => v !== item))
                   }}
+                  onPrepend={() => {
+                    setPrependSeq((prev) =>
+                      prev.includes(item) ? prev : [...prev, item],
+                    )
+                    setAppendSeq(appendSeq.filter((v) => v !== item))
+                  }}
                 />
               )
             })}