Release v2.5.4-rc

- Remove non-exist devcontainer feature of `pnpm`
- Introduce custom managers for catching up `pnpm` version

Assisted-by: vscode-copilot-chat:deepseek-flash

.github/workflows/autobuild.yml

@@ -3,8 +3,8 @@ name: Auto Build
 on:
   workflow_dispatch:
   schedule:
-    # UTC+8 12:00, 18:00 -> UTC 4:00, 10:00
-    - cron: '0 4,10 * * *'
+    # UTC+8 06:00, 18:00 -> UTC 22:00, 10:00
+    - cron: '0 10,22 * * *'
 permissions: write-all
 env:
   TAG_NAME: autobuild

Cargo.lock

@@ -1079,7 +1079,7 @@ checksum = "c8d4a3bb8b1e0c1050499d1815f5ab16d04f0959b233085fb31653fbfc9d98f9"
 
 [[package]]
 name = "clash-verge"
-version = "2.5.4"
+version = "2.5.4-rc"
 dependencies = [
  "aes-gcm",
  "anyhow",

Changelog.md

@@ -27,6 +27,7 @@
 
 **🖥️ Windows**
 
+- 修复 Windows 管理员运行时，服务权限校验失败后无法继续使用代理的问题
 - 修复 Windows 便携版或 Scoop 安装后服务内核无法启动的问题
 - 修复 Windows 系统代理设置偶发失败的问题
 - 修复 Windows 关机被应用阻止的问题

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clash-verge",
-  "version": "2.5.4",
+  "version": "2.5.4-rc",
   "license": "GPL-3.0-only",
   "scripts": {
     "prepare": "husky || true",

renovate.json

@@ -78,7 +78,7 @@
     },
     {
       "description": "Group PNPM version updates across package.json, tool-versions, workflows, and devcontainer",
-      "matchPackageNames": ["pnpm", "ghcr.io/devcontainers/features/pnpm"],
+      "matchPackageNames": ["pnpm"],
       "groupName": "pnpm"
     },
     {
@@ -131,6 +131,16 @@
       ],
       "depNameTemplate": "rust-lang/rust",
       "datasourceTemplate": "github-releases"
+    },
+    {
+      "customType": "regex",
+      "description": "Update pnpm in devcontainer.json",
+      "fileMatch": ["^\\.devcontainer/devcontainer\\.json$"],
+      "matchStrings": [
+        "\"ghcr\\.io/devcontainers/features/node:[^\"]+\":\\s*\\{[^}]*\"pnpmVersion\":\\s*\"(?<currentValue>[^\"]+)\""
+      ],
+      "depNameTemplate": "pnpm",
+      "datasourceTemplate": "npm"
     }
   ],
   "postUpdateOptions": ["pnpmDedupe"],

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "clash-verge"
-version = "2.5.4"
+version = "2.5.4-rc"
 description = "clash verge"
 authors = ["zzzgydi", "Tunglies", "wonfen", "MystiPanda"]
 license = "GPL-3.0-only"

src-tauri/src/cmd/service.rs

@@ -57,6 +57,11 @@ pub async fn continue_with_sidecar() -> CmdResult {
         .map_err(|error| proxy_aware_coded_error(&error, "SERVICE_SIDECAR_FAILED"))
 }
 
+#[tauri::command]
+pub fn take_service_fallback_notice() -> bool {
+    crate::core::service::take_service_fallback_notice()
+}
+
 #[tauri::command]
 pub fn sync_runtime_providers() {
     if matches!(*CoreManager::global().get_running_mode(), RunningMode::Service) {

src-tauri/src/core/manager/lifecycle.rs

@@ -185,6 +185,42 @@ where
     apply_proxy().await
 }
 
+#[cfg(target_os = "windows")]
+async fn run_service_start_with_sidecar_fallback<Start, StartFuture, Fallback, FallbackFuture>(
+    is_admin: bool,
+    start_service: Start,
+    start_sidecar: Fallback,
+) -> Result<()>
+where
+    Start: FnOnce() -> StartFuture,
+    StartFuture: std::future::Future<Output = Result<()>>,
+    Fallback: FnOnce(anyhow::Error) -> FallbackFuture,
+    FallbackFuture: std::future::Future<Output = Result<()>>,
+{
+    let Err(error) = start_service().await else {
+        return Ok(());
+    };
+    // A transport failure cannot establish whether the service already started the core.
+    let location_refused = error
+        .downcast_ref::<crate::core::service::ServiceStartRefusal>()
+        .is_some_and(|refusal| {
+            refusal.code == clash_verge_service_ipc::ServiceErrorCode::InvalidInstallLocation as u16
+        });
+    if !is_admin || !location_refused {
+        return Err(error);
+    }
+
+    logging!(
+        warn,
+        Type::Core,
+        "service refused the core location while app is elevated; falling back to sidecar: {error:#}"
+    );
+    let reason = format!("{error:#}");
+    start_sidecar(error)
+        .await
+        .map_err(|error| error.context(format!("sidecar fallback failed after service refusal: {reason}")))
+}
+
 async fn run_sidecar_termination_transition<Clear, ClearFuture, Terminate>(
     clear_proxy: Clear,
     terminate_sidecar: Terminate,
@@ -550,7 +586,30 @@ impl CoreManager {
         }
 
         let result = match startup {
-            StartupDecision::Service => self.start_core_by_service().await,
+            StartupDecision::Service => {
+                #[cfg(target_os = "windows")]
+                {
+                    run_service_start_with_sidecar_fallback(
+                        crate::core::runstate::RUN_STATE.state().is_admin,
+                        || self.start_core_by_service(),
+                        |error| async move {
+                            use crate::core::runstate::RUN_STATE;
+
+                            RUN_STATE.allow_sidecar_after_service_refusal(format!("{error:#}"))?;
+                            let result = self.start_core_by_sidecar().await;
+                            if result.is_err() {
+                                SERVICE_MANAGER.withdraw_sidecar_allowance();
+                            } else {
+                                crate::core::service::notify_service_fallback();
+                            }
+                            result
+                        },
+                    )
+                    .await
+                }
+                #[cfg(not(target_os = "windows"))]
+                self.start_core_by_service().await
+            }
             StartupDecision::Sidecar => self.start_core_by_sidecar().await,
             StartupDecision::Wait => Ok(()),
         };

src-tauri/src/core/manager/state.rs

@@ -18,6 +18,44 @@ use tauri_plugin_shell::ShellExt as _;
 
 const SIDECAR_READINESS_ATTEMPTS: usize = 30;
 
+#[cfg(target_os = "windows")]
+async fn retry_service_start<Start, StartFuture>(
+    attempts: usize,
+    retry_delay: std::time::Duration,
+    mut start: Start,
+) -> Result<()>
+where
+    Start: FnMut() -> StartFuture,
+    StartFuture: std::future::Future<Output = Result<()>>,
+{
+    let mut last_error = None;
+    for attempt in 0..attempts {
+        match start().await {
+            Ok(()) => return Ok(()),
+            Err(error) => {
+                logging!(
+                    warn,
+                    Type::Core,
+                    "service start attempt {}/{} failed: {error:#}",
+                    attempt + 1,
+                    attempts
+                );
+                if error
+                    .downcast_ref::<service::ServiceStartRefusal>()
+                    .is_some_and(|refusal| service::StageRequest::is_about_the_bundle(refusal.code))
+                {
+                    return Err(error);
+                }
+                last_error = Some(error);
+                if attempt + 1 < attempts {
+                    tokio::time::sleep(retry_delay).await;
+                }
+            }
+        }
+    }
+    Err(last_error.unwrap_or_else(|| anyhow::anyhow!("service start failed")))
+}
+
 impl CoreManager {
     /// Restores profile selections before callers enable the system proxy.
     /// The bounded first pass continues in the background, and later calls supersede earlier ones.
@@ -269,30 +307,15 @@ impl CoreManager {
         #[cfg(target_os = "windows")]
         {
             use crate::constants::timing;
-            let mut last_err = None;
-            for attempt in 0..timing::SERVICE_START_RETRIES {
-                match service::run_core_by_service(config_file).await {
-                    Ok(()) => {
-                        self.mark_core_ready();
-                        self.core_started(RunningMode::Service);
-                        self.restore_selected_nodes().await;
-                        service::request_runtime_provider_sync(crate::constants::timing::RUNTIME_PROVIDER_SYNC_DELAY);
-                        return Ok(());
-                    }
-                    Err(e) => {
-                        logging!(
-                            warn,
-                            Type::Core,
-                            "service start attempt {}/{} failed: {e:#}",
-                            attempt + 1,
-                            timing::SERVICE_START_RETRIES
-                        );
-                        last_err = Some(e);
-                        tokio::time::sleep(timing::SERVICE_START_RETRY_DELAY).await;
-                    }
-                }
-            }
-            Err(last_err.unwrap_or_else(|| anyhow::anyhow!("service start failed")))
+            retry_service_start(timing::SERVICE_START_RETRIES, timing::SERVICE_START_RETRY_DELAY, || {
+                service::run_core_by_service(config_file)
+            })
+            .await?;
+            self.mark_core_ready();
+            self.core_started(RunningMode::Service);
+            self.restore_selected_nodes().await;
+            service::request_runtime_provider_sync(timing::RUNTIME_PROVIDER_SYNC_DELAY);
+            Ok(())
         }
 
         #[cfg(not(target_os = "windows"))]

src-tauri/src/core/runstate/mod.rs

@@ -323,6 +323,21 @@ impl<E: RunStateEnv> RunStateStore<E> {
         Ok(())
     }
 
+    #[cfg(target_os = "windows")]
+    pub fn allow_sidecar_after_service_refusal(&self, reason: String) -> Result<()> {
+        let mut state = self.service.lock();
+        if self.operation_running.load(Ordering::Acquire) || state.service.pending.is_some() {
+            bail!("cannot fall back while a service operation is pending");
+        }
+        // Publish the refusal and allowance together so it never asks the UI for a repair.
+        state.service.health = ServiceHealth::Unavailable(reason);
+        state.service.allow_sidecar();
+        state.bump();
+        drop(state);
+        self.announce();
+        Ok(())
+    }
+
     /// Requests installation only for a confirmed absent Service.
     pub fn require_install_for_session(&self) -> Result<()> {
         let mut state = self.service.lock();

src-tauri/src/core/service.rs

@@ -39,6 +39,17 @@ use std::{
 
 static OWNER_MONITOR_GENERATION: AtomicU64 = AtomicU64::new(0);
 static ACTIVE_SERVICE_SESSION: Lazy<Mutex<Option<ActiveServiceSession>>> = Lazy::new(|| Mutex::new(None));
+static PENDING_SERVICE_FALLBACK_NOTICE: AtomicBool = AtomicBool::new(false);
+
+#[cfg(target_os = "windows")]
+pub(crate) fn notify_service_fallback() {
+    PENDING_SERVICE_FALLBACK_NOTICE.store(true, Ordering::Relaxed);
+    Handle::notice_message("service_core::sidecar_fallback", "");
+}
+
+pub(crate) fn take_service_fallback_notice() -> bool {
+    PENDING_SERVICE_FALLBACK_NOTICE.swap(false, Ordering::Relaxed)
+}
 
 /// Capabilities of the service session that owns the running Core.
 /// They are discarded with that session rather than cached across service upgrades.
@@ -1076,6 +1087,25 @@ pub(super) async fn stage_runtime_by_service(config_file: &Path) -> Result<Stage
         .context("Clash Verge Service 未返回运行时暂存结果")
 }
 
+#[derive(Debug)]
+pub(super) struct ServiceStartRefusal {
+    pub code: u16,
+    pub core_path: String,
+    pub message: String,
+}
+
+impl std::fmt::Display for ServiceStartRefusal {
+    fn fmt(&self, formatter: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(
+            formatter,
+            "failed to start Service core at {} (code {}): {}",
+            self.core_path, self.code, self.message
+        )
+    }
+}
+
+impl std::error::Error for ServiceStartRefusal {}
+
 /// 尝试使用服务启动core
 #[tracing::instrument(skip_all, level = "info", fields(generation = tracing::field::Empty, staging = tracing::field::Empty, code = tracing::field::Empty, outcome = tracing::field::Empty))]
 pub(super) async fn start_with_existing_service(config_file: &Path) -> Result<()> {
@@ -1111,10 +1141,12 @@ pub(super) async fn start_with_existing_service(config_file: &Path) -> Result<()
             err_msg
         );
         start_owner_monitor();
-        bail!(
-            "failed to start Service core at {}: {err_msg}",
-            request.runtime.core_path
-        );
+        return Err(ServiceStartRefusal {
+            code: response.code,
+            core_path: request.runtime.core_path,
+            message: err_msg,
+        }
+        .into());
     }
 
     let result = response.data.context("Clash Verge Service 未返回会话信息")?;
@@ -1133,6 +1165,7 @@ pub(super) async fn start_with_existing_service(config_file: &Path) -> Result<()
     // PAC follows the Running Mode; the caller opens it via `core_started(Service)`.
     start_owner_monitor();
     tracing::Span::current().record("outcome", "started");
+    PENDING_SERVICE_FALLBACK_NOTICE.store(false, Ordering::Relaxed);
     logging!(
         info,
         Type::Service,

src-tauri/src/lib.rs

@@ -163,6 +163,7 @@ mod app_init {
             cmd::apply_dns_config,
             cmd::set_dns_override,
             cmd::take_dns_override_notice,
+            cmd::take_service_fallback_notice,
             cmd::get_dns_config_content,
             cmd::validate_dns_config,
             cmd::get_clash_logs,

src-tauri/tauri.conf.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.4",
+  "version": "2.5.4-rc",
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "bundle": {
     "active": true,

src/components/base/sortable-item.tsx

@@ -13,12 +13,24 @@ interface SortableItemProps {
   index: number
   group?: string
   disabled?: boolean
+  // 用于给 tanstack virtual 列表测量当前拖动元素尺寸
+  measureElement?: (element: HTMLDivElement | null) => void
+  dataIndex?: number
   style?: CSSProperties
   children: ReactNode | ((props: SortableItemRenderProps) => ReactNode)
 }
 
 export const SortableItem = (props: SortableItemProps) => {
-  const { id, index, group, disabled, children, style } = props
+  const {
+    id,
+    index,
+    group,
+    disabled,
+    measureElement,
+    dataIndex,
+    children,
+    style,
+  } = props
   const { ref, handleRef, sortable, isDragging } = useSortable({
     id,
     index,
@@ -30,8 +42,9 @@ export const SortableItem = (props: SortableItemProps) => {
     (element: HTMLDivElement | null) => {
       handleRef(element?.querySelector('[data-sortable-handle]') ?? null)
       ref(element)
+      measureElement?.(element)
     },
-    [handleRef, ref],
+    [handleRef, ref, measureElement],
   )
 
   const mergedStyle: CSSProperties = {
@@ -53,7 +66,7 @@ export const SortableItem = (props: SortableItemProps) => {
   }
 
   return (
-    <div ref={setRef} style={mergedStyle}>
+    <div ref={setRef} data-index={dataIndex} style={mergedStyle}>
       {children}
     </div>
   )

src/components/layout/sysproxy-privilege-dialog.tsx

@@ -20,6 +20,7 @@ import {
   type ServiceRequest,
   type ServiceRequestReason,
 } from '@/services/service-request'
+import getSystem from '@/utils/get-system'
 
 type Remedy = 'installAndRestart' | 'restartOnly'
 
@@ -98,19 +99,25 @@ export const SysproxyPrivilegeDialog = () => {
       setStep('restarting')
       await restartCore()
 
-      // Verify that restart actually moved the core into the service.
       const runState = await getRuntimeState()
-      if (runState.mode === 'Service') {
-        // Retry the original request now that the service can apply it.
+      const usingAdminFallback =
+        getSystem() === 'windows' &&
+        runState.mode === 'Sidecar' &&
+        runState.isAdmin &&
+        runState.sidecarAllowed &&
+        runState.service === 'unavailable'
+      if (runState.mode === 'Service' || usingAdminFallback) {
         if (restoring !== undefined) {
           setStep('applying')
           await patchVergeConfig(restoring)
         }
-        showNotice.success(
-          restoring === undefined
-            ? 'settings.sections.proxyControl.messages.installedCheckProxy'
-            : 'settings.sections.proxyControl.messages.installedProxyRestored',
-        )
+        if (!usingAdminFallback) {
+          showNotice.success(
+            restoring === undefined
+              ? 'settings.sections.proxyControl.messages.installedCheckProxy'
+              : 'settings.sections.proxyControl.messages.installedProxyRestored',
+          )
+        }
         close()
       } else {
         showNotice.error(

src/components/profile/grouped-virtual-list.tsx

@@ -0,0 +1,184 @@
+import { move } from '@dnd-kit/helpers'
+import {
+  DragDropProvider,
+  type DragEndEvent,
+  type DragOverEvent,
+  KeyboardSensor,
+  PointerSensor,
+} from '@dnd-kit/react'
+import { isSortable, isSortableOperation } from '@dnd-kit/react/sortable'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { type CSSProperties, type ReactNode, useRef, useState } from 'react'
+
+import { SortableItem } from '../base'
+
+type GroupedVirtualCategory = 'prepend' | 'original' | 'append'
+
+export interface GroupedVirtualItem<T> {
+  id: string
+  category: GroupedVirtualCategory
+  item: T
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function buildGroupedItems<T>(
+  prepend: T[],
+  original: T[],
+  append: T[],
+  getKey: (item: T) => string,
+): GroupedVirtualItem<T>[] {
+  const build = (
+    category: GroupedVirtualCategory,
+    list: T[],
+  ): GroupedVirtualItem<T>[] =>
+    list.map((item) => ({
+      id: `${category}:${getKey(item)}`,
+      category,
+      item,
+    }))
+
+  return [
+    ...build('prepend', prepend),
+    ...build('original', original),
+    ...build('append', append),
+  ]
+}
+
+interface GroupedVirtualListProps<T> {
+  items: GroupedVirtualItem<T>[]
+  estimateSize?: number
+  renderItem: (entry: GroupedVirtualItem<T>) => ReactNode
+  onReorder: (
+    category: 'prepend' | 'append',
+    activeIndex: number,
+    overIndex: number,
+  ) => void
+  style?: CSSProperties
+}
+
+/**
+ * 用于编辑规则/节点/代理组功能的 prepend/original/append 分组虚拟化列表
+ */
+export function GroupedVirtualList<T>(props: GroupedVirtualListProps<T>) {
+  const {
+    items: itemsProp,
+    estimateSize = 56,
+    renderItem,
+    onReorder,
+    style,
+  } = props
+  const [items, setItems] = useState(itemsProp)
+  const [prevItemsProp, setPrevItemsProp] = useState(itemsProp)
+  const snapshotRef = useRef(itemsProp)
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  if (itemsProp !== prevItemsProp) {
+    setPrevItemsProp(itemsProp)
+    setItems(itemsProp)
+  }
+
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => estimateSize,
+    overscan: 15,
+    gap: 8,
+    getItemKey: (index) => items[index]?.id ?? index,
+  })
+
+  const onDragStart = () => {
+    snapshotRef.current = items
+  }
+
+  const onDragOver = (event: DragOverEvent) => {
+    const { operation } = event
+    if (!isSortableOperation(operation)) return
+
+    const { source, target } = operation
+    if (!source || !target) return
+
+    const sourceEntry = items.find((entry) => entry.id === source.id)
+    const targetEntry = items.find((entry) => entry.id === target.id)
+    if (
+      !sourceEntry ||
+      !targetEntry ||
+      sourceEntry.category !== targetEntry.category
+    ) {
+      event.preventDefault()
+      return
+    }
+
+    setItems((current) => move(current, event))
+  }
+
+  const onDragEnd = (event: DragEndEvent) => {
+    const source = event.operation.source
+
+    if (event.canceled) {
+      setItems(snapshotRef.current)
+      return
+    }
+
+    if (!isSortable(source)) return
+
+    const snapshot = snapshotRef.current
+    const sourceEntry = snapshot.find((entry) => entry.id === source.id)
+    if (!sourceEntry) return
+
+    const { category } = sourceEntry
+    if (category !== 'prepend' && category !== 'append') return
+
+    const activeIndex = snapshot
+      .filter((entry) => entry.category === category)
+      .findIndex((entry) => entry.id === source.id)
+    const overIndex = items
+      .filter((entry) => entry.category === category)
+      .findIndex((entry) => entry.id === source.id)
+    if (activeIndex < 0 || overIndex < 0 || activeIndex === overIndex) return
+
+    onReorder(category, activeIndex, overIndex)
+  }
+
+  return (
+    <DragDropProvider
+      sensors={[PointerSensor, KeyboardSensor]}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDragEnd={onDragEnd}
+    >
+      <div ref={scrollRef} style={{ ...style, overflow: 'auto' }}>
+        <div
+          style={{
+            height: virtualizer.getTotalSize(),
+            position: 'relative',
+            marginRight: '4px',
+          }}
+        >
+          {virtualizer.getVirtualItems().map((vi) => {
+            const entry = items[vi.index]
+            if (!entry) return null
+
+            return (
+              <SortableItem
+                key={vi.key}
+                id={entry.id}
+                index={vi.index}
+                disabled={entry.category === 'original'}
+                measureElement={virtualizer.measureElement}
+                dataIndex={vi.index}
+                style={{
+                  position: 'absolute',
+                  top: `${vi.start}px`,
+                  left: 0,
+                  width: '100%',
+                }}
+              >
+                {renderItem(entry)}
+              </SortableItem>
+            )
+          })}
+        </div>
+      </div>
+    </DragDropProvider>
+  )
+}

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

@@ -1,12 +1,4 @@
 import { arrayMove } from '@dnd-kit/helpers'
-import {
-  DragDropProvider,
-  type DragOverEvent,
-  KeyboardSensor,
-  PointerSensor,
-  type DragEndEvent,
-} from '@dnd-kit/react'
-import { isSortable, isSortableOperation } from '@dnd-kit/react/sortable'
 import {
   VerticalAlignBottomRounded,
   VerticalAlignTopRounded,
@@ -43,13 +35,7 @@ import {
 import { Controller, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 
-import {
-  BaseSearchBox,
-  MonacoEditor,
-  SortableItem,
-  Switch,
-  VirtualList,
-} from '@/components/base'
+import { BaseSearchBox, MonacoEditor, Switch } from '@/components/base'
 import { GroupItem } from '@/components/profile/group-item'
 import {
   getNetworkInterfaces,
@@ -63,6 +49,12 @@ import type { MonacoEditorInstance } from '@/types/monaco'
 import { MONACO_FONT_FAMILY } from '@/utils/font-family'
 import { parseYamlSafe } from '@/utils/yaml'
 
+import {
+  buildGroupedItems,
+  type GroupedVirtualItem,
+  GroupedVirtualList,
+} from './grouped-virtual-list'
+
 interface Props {
   proxiesUid: string
   mergeUid: string
@@ -203,106 +195,71 @@ export const GroupsEditorViewer = (props: Props) => {
     [appendSeq, match],
   )
 
-  const renderItem = (index: number): React.ReactNode => {
-    const shift = filteredPrependSeq.length > 0 ? 1 : 0
-    if (filteredPrependSeq.length > 0 && index === 0) {
+  const items = useMemo(
+    () =>
+      buildGroupedItems(
+        filteredPrependSeq,
+        filteredGroupList,
+        filteredAppendSeq,
+        (group) => group.name,
+      ),
+    [filteredPrependSeq, filteredGroupList, filteredAppendSeq],
+  )
+
+  const renderItem = (entry: GroupedVirtualItem<IProxyGroupConfig>) => {
+    const { category, item } = entry
+
+    if (category === 'original') {
+      const isDeleted = deleteSeq.includes(item.name)
       return (
-        <>
-          {filteredPrependSeq.map((item, itemIndex) => {
-            return (
-              <SortableItem
-                key={item.name}
-                id={`prepend:${item.name}`}
-                index={itemIndex}
-                group="prepend"
-                style={{ margin: '8px 0' }}
-              >
-                <GroupItem
-                  type="prepend"
-                  group={item}
-                  onDelete={() => {
-                    setPrependSeq(
-                      prependSeq.filter((v) => v.name !== item.name),
-                    )
-                  }}
-                />
-              </SortableItem>
-            )
-          })}
-        </>
-      )
-    } else if (index < filteredGroupList.length + shift) {
-      const newIndex = index - shift
-      return (
-        <Box sx={{ margin: '8px 0' }}>
-          <GroupItem
-            key={filteredGroupList[newIndex].name}
-            type={
-              deleteSeq.includes(filteredGroupList[newIndex].name)
-                ? 'delete'
-                : 'original'
+        <GroupItem
+          type={isDeleted ? 'delete' : 'original'}
+          group={item}
+          onDelete={() => {
+            if (isDeleted) {
+              setDeleteSeq(deleteSeq.filter((v) => v !== item.name))
+            } else {
+              setDeleteSeq((prev) => [...prev, item.name])
             }
-            group={filteredGroupList[newIndex]}
-            onDelete={() => {
-              if (deleteSeq.includes(filteredGroupList[newIndex].name)) {
-                setDeleteSeq(
-                  deleteSeq.filter(
-                    (v) => v !== filteredGroupList[newIndex].name,
-                  ),
-                )
-              } else {
-                setDeleteSeq((prev) => [
-                  ...prev,
-                  filteredGroupList[newIndex].name,
-                ])
-              }
-            }}
-          />
-        </Box>
+          }}
+        />
       )
-    } else {
+    }
+
+    if (category === 'prepend') {
       return (
-        <>
-          {filteredAppendSeq.map((item, itemIndex) => {
-            return (
-              <SortableItem
-                key={item.name}
-                id={`append:${item.name}`}
-                index={itemIndex}
-                group="append"
-                style={{ margin: '8px 0' }}
-              >
-                <GroupItem
-                  type="append"
-                  group={item}
-                  onDelete={() => {
-                    setAppendSeq(appendSeq.filter((v) => v.name !== item.name))
-                  }}
-                />
-              </SortableItem>
-            )
-          })}
-        </>
+        <GroupItem
+          type="prepend"
+          group={item}
+          onDelete={() => {
+            setPrependSeq(prependSeq.filter((v) => v.name !== item.name))
+          }}
+        />
       )
     }
+
+    return (
+      <GroupItem
+        type="append"
+        group={item}
+        onDelete={() => {
+          setAppendSeq(appendSeq.filter((v) => v.name !== item.name))
+        }}
+      />
+    )
   }
 
-  const onPrependDragEnd = async (event: DragEndEvent) => {
-    const { operation, canceled } = event
-    const { source, target } = operation
-    if (canceled || !target || !isSortable(source)) return
-
-    const { index: overIndex, initialIndex: activeIndex } = source.sortable
-    const activeRealIndex = findRealIndex(
-      prependSeq,
-      filteredPrependSeq,
-      activeIndex,
-    )
-    const overRealIndex = findRealIndex(
-      prependSeq,
-      filteredPrependSeq,
-      overIndex,
-    )
+  const onReorder = (
+    category: 'prepend' | 'append',
+    activeIndex: number,
+    overIndex: number,
+  ) => {
+    const list = category === 'prepend' ? prependSeq : appendSeq
+    const filtered =
+      category === 'prepend' ? filteredPrependSeq : filteredAppendSeq
+    const setList = category === 'prepend' ? setPrependSeq : setAppendSeq
+    const activeRealIndex = findRealIndex(list, filtered, activeIndex)
+    const overRealIndex = findRealIndex(list, filtered, overIndex)
     if (
       activeRealIndex < 0 ||
       overRealIndex < 0 ||
@@ -311,55 +268,9 @@ export const GroupsEditorViewer = (props: Props) => {
       return
     }
 
-    setPrependSeq(arrayMove(prependSeq, activeRealIndex, overRealIndex))
-  }
-  const onAppendDragEnd = async (event: DragEndEvent) => {
-    const { operation, canceled } = event
-    const { source, target } = operation
-    if (canceled || !target || !isSortable(source)) return
-
-    const { index: overIndex, initialIndex: activeIndex } = source.sortable
-    const activeRealIndex = findRealIndex(
-      appendSeq,
-      filteredAppendSeq,
-      activeIndex,
-    )
-    const overRealIndex = findRealIndex(appendSeq, filteredAppendSeq, overIndex)
-    if (
-      activeRealIndex < 0 ||
-      overRealIndex < 0 ||
-      activeRealIndex === overRealIndex
-    ) {
-      return
-    }
-
-    setAppendSeq(arrayMove(appendSeq, activeRealIndex, overRealIndex))
+    setList(arrayMove(list, activeRealIndex, overRealIndex))
   }
 
-  // prevent drag over if source and target are in different groups
-  const onDragOver = (event: DragOverEvent) => {
-    const { operation } = event
-    if (!isSortableOperation(operation)) return
-
-    const { source, target } = operation
-    if (source?.group !== target?.group) {
-      event.preventDefault()
-    }
-  }
-
-  const onDragEnd = async (event: DragEndEvent) => {
-    const source = event.operation.source
-    if (!isSortable(source)) return
-
-    const { initialGroup, group } = source.sortable
-    if (initialGroup !== group) return
-
-    if (group === 'prepend') {
-      await onPrependDragEnd(event)
-    } else if (group === 'append') {
-      await onAppendDragEnd(event)
-    }
-  }
   const fetchContent = useCallback(async () => {
     hasLoadedSeqConfigRef.current = false
     const data = await readProfileFile(property)
@@ -1152,22 +1063,12 @@ export const GroupsEditorViewer = (props: Props) => {
               }}
             >
               <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
-              <DragDropProvider
-                sensors={[PointerSensor, KeyboardSensor]}
-                onDragOver={onDragOver}
-                onDragEnd={onDragEnd}
-              >
-                <VirtualList
-                  count={
-                    filteredGroupList.length +
-                    (filteredPrependSeq.length > 0 ? 1 : 0) +
-                    (filteredAppendSeq.length > 0 ? 1 : 0)
-                  }
-                  estimateSize={56}
-                  renderItem={renderItem}
-                  style={{ height: 'calc(100% - 24px)', marginTop: '8px' }}
-                />
-              </DragDropProvider>
+              <GroupedVirtualList
+                items={items}
+                renderItem={renderItem}
+                onReorder={onReorder}
+                style={{ height: 'calc(100% - 24px)', marginTop: '8px' }}
+              />
             </List>
           </>
         ) : (

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

@@ -1,12 +1,4 @@
 import { arrayMove } from '@dnd-kit/helpers'
-import {
-  DragDropProvider,
-  type DragOverEvent,
-  KeyboardSensor,
-  PointerSensor,
-  type DragEndEvent,
-} from '@dnd-kit/react'
-import { isSortable, isSortableOperation } from '@dnd-kit/react/sortable'
 import {
   VerticalAlignBottomRounded,
   VerticalAlignTopRounded,
@@ -35,12 +27,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import {
-  BaseSearchBox,
-  MonacoEditor,
-  SortableItem,
-  VirtualList,
-} from '@/components/base'
+import { BaseSearchBox, MonacoEditor } from '@/components/base'
 import { ProxyItem } from '@/components/profile/proxy-item'
 import { readProfileFile, saveProfileFile } from '@/services/cmds'
 import { showNotice } from '@/services/notice-service'
@@ -50,6 +37,12 @@ import { MONACO_FONT_FAMILY } from '@/utils/font-family'
 import parseUri from '@/utils/uri-parser'
 import { parseYamlSafe } from '@/utils/yaml'
 
+import {
+  buildGroupedItems,
+  type GroupedVirtualItem,
+  GroupedVirtualList,
+} from './grouped-virtual-list'
+
 interface Props {
   profileUid: string
   property: string
@@ -107,106 +100,71 @@ export const ProxiesEditorViewer = (props: Props) => {
     [appendSeq, match],
   )
 
-  const renderItem = (index: number): React.ReactNode => {
-    const shift = filteredPrependSeq.length > 0 ? 1 : 0
-    if (filteredPrependSeq.length > 0 && index === 0) {
+  const items = useMemo(
+    () =>
+      buildGroupedItems(
+        filteredPrependSeq,
+        filteredProxyList,
+        filteredAppendSeq,
+        (proxy) => proxy.name,
+      ),
+    [filteredPrependSeq, filteredProxyList, filteredAppendSeq],
+  )
+
+  const renderItem = (entry: GroupedVirtualItem<IProxyConfig>) => {
+    const { category, item } = entry
+
+    if (category === 'original') {
+      const isDeleted = deleteSeq.includes(item.name)
       return (
-        <>
-          {filteredPrependSeq.map((item, itemIndex) => {
-            return (
-              <SortableItem
-                key={item.name}
-                id={`prepend:${item.name}`}
-                index={itemIndex}
-                group="prepend"
-                style={{ margin: '8px 0' }}
-              >
-                <ProxyItem
-                  type="prepend"
-                  proxy={item}
-                  onDelete={() => {
-                    setPrependSeq(
-                      prependSeq.filter((v) => v.name !== item.name),
-                    )
-                  }}
-                />
-              </SortableItem>
-            )
-          })}
-        </>
-      )
-    } else if (index < filteredProxyList.length + shift) {
-      const newIndex = index - shift
-      return (
-        <Box sx={{ margin: '8px 0' }}>
-          <ProxyItem
-            key={filteredProxyList[newIndex].name}
-            type={
-              deleteSeq.includes(filteredProxyList[newIndex].name)
-                ? 'delete'
-                : 'original'
+        <ProxyItem
+          type={isDeleted ? 'delete' : 'original'}
+          proxy={item}
+          onDelete={() => {
+            if (isDeleted) {
+              setDeleteSeq(deleteSeq.filter((v) => v !== item.name))
+            } else {
+              setDeleteSeq((prev) => [...prev, item.name])
             }
-            proxy={filteredProxyList[newIndex]}
-            onDelete={() => {
-              if (deleteSeq.includes(filteredProxyList[newIndex].name)) {
-                setDeleteSeq(
-                  deleteSeq.filter(
-                    (v) => v !== filteredProxyList[newIndex].name,
-                  ),
-                )
-              } else {
-                setDeleteSeq((prev) => [
-                  ...prev,
-                  filteredProxyList[newIndex].name,
-                ])
-              }
-            }}
-          />
-        </Box>
+          }}
+        />
       )
-    } else {
+    }
+
+    if (category === 'prepend') {
       return (
-        <>
-          {filteredAppendSeq.map((item, itemIndex) => {
-            return (
-              <SortableItem
-                key={item.name}
-                id={`append:${item.name}`}
-                index={itemIndex}
-                group="append"
-                style={{ margin: '8px 0' }}
-              >
-                <ProxyItem
-                  type="append"
-                  proxy={item}
-                  onDelete={() => {
-                    setAppendSeq(appendSeq.filter((v) => v.name !== item.name))
-                  }}
-                />
-              </SortableItem>
-            )
-          })}
-        </>
+        <ProxyItem
+          type="prepend"
+          proxy={item}
+          onDelete={() => {
+            setPrependSeq(prependSeq.filter((v) => v.name !== item.name))
+          }}
+        />
       )
     }
+
+    return (
+      <ProxyItem
+        type="append"
+        proxy={item}
+        onDelete={() => {
+          setAppendSeq(appendSeq.filter((v) => v.name !== item.name))
+        }}
+      />
+    )
   }
 
-  const onPrependDragEnd = async (event: DragEndEvent) => {
-    const { operation, canceled } = event
-    const { source, target } = operation
-    if (canceled || !target || !isSortable(source)) return
-
-    const { index: overIndex, initialIndex: activeIndex } = source.sortable
-    const activeRealIndex = findRealIndex(
-      prependSeq,
-      filteredPrependSeq,
-      activeIndex,
-    )
-    const overRealIndex = findRealIndex(
-      prependSeq,
-      filteredPrependSeq,
-      overIndex,
-    )
+  const onReorder = (
+    category: 'prepend' | 'append',
+    activeIndex: number,
+    overIndex: number,
+  ) => {
+    const list = category === 'prepend' ? prependSeq : appendSeq
+    const filtered =
+      category === 'prepend' ? filteredPrependSeq : filteredAppendSeq
+    const setList = category === 'prepend' ? setPrependSeq : setAppendSeq
+    const activeRealIndex = findRealIndex(list, filtered, activeIndex)
+    const overRealIndex = findRealIndex(list, filtered, overIndex)
     if (
       activeRealIndex < 0 ||
       overRealIndex < 0 ||
@@ -215,52 +173,9 @@ export const ProxiesEditorViewer = (props: Props) => {
       return
     }
 
-    setPrependSeq(arrayMove(prependSeq, activeRealIndex, overRealIndex))
+    setList(arrayMove(list, activeRealIndex, overRealIndex))
   }
-  const onAppendDragEnd = async (event: DragEndEvent) => {
-    const { operation, canceled } = event
-    const { source, target } = operation
-    if (canceled || !target || !isSortable(source)) return
 
-    const { index: overIndex, initialIndex: activeIndex } = source.sortable
-    const activeRealIndex = findRealIndex(
-      appendSeq,
-      filteredAppendSeq,
-      activeIndex,
-    )
-    const overRealIndex = findRealIndex(appendSeq, filteredAppendSeq, overIndex)
-    if (
-      activeRealIndex < 0 ||
-      overRealIndex < 0 ||
-      activeRealIndex === overRealIndex
-    ) {
-      return
-    }
-
-    setAppendSeq(arrayMove(appendSeq, activeRealIndex, overRealIndex))
-  }
-  const onDragOver = (event: DragOverEvent) => {
-    const { operation } = event
-    if (!isSortableOperation(operation)) return
-
-    const { source, target } = operation
-    if (source?.group !== target?.group) {
-      event.preventDefault()
-    }
-  }
-  const onDragEnd = async (event: DragEndEvent) => {
-    const source = event.operation.source
-    if (!isSortable(source)) return
-
-    const { initialGroup, group } = source.sortable
-    if (initialGroup !== group) return
-
-    if (group === 'prepend') {
-      await onPrependDragEnd(event)
-    } else if (group === 'append') {
-      await onAppendDragEnd(event)
-    }
-  }
   // 优化：异步分片解析，避免主线程阻塞，解析完成后批量setState
   const handleParseAsync = (cb: (proxies: IProxyConfig[]) => void) => {
     const proxies: IProxyConfig[] = []
@@ -522,22 +437,12 @@ export const ProxiesEditorViewer = (props: Props) => {
               }}
             >
               <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
-              <DragDropProvider
-                sensors={[PointerSensor, KeyboardSensor]}
-                onDragOver={onDragOver}
-                onDragEnd={onDragEnd}
-              >
-                <VirtualList
-                  count={
-                    filteredProxyList.length +
-                    (filteredPrependSeq.length > 0 ? 1 : 0) +
-                    (filteredAppendSeq.length > 0 ? 1 : 0)
-                  }
-                  estimateSize={56}
-                  renderItem={renderItem}
-                  style={{ height: 'calc(100% - 24px)', marginTop: '8px' }}
-                />
-              </DragDropProvider>
+              <GroupedVirtualList
+                items={items}
+                renderItem={renderItem}
+                onReorder={onReorder}
+                style={{ height: 'calc(100% - 24px)', marginTop: '8px' }}
+              />
             </List>
           </>
         ) : (

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

@@ -1,11 +1,4 @@
-import {
-  DragDropProvider,
-  type DragOverEvent,
-  KeyboardSensor,
-  PointerSensor,
-  type DragEndEvent,
-} from '@dnd-kit/react'
-import { isSortable, isSortableOperation } from '@dnd-kit/react/sortable'
+import { arrayMove } from '@dnd-kit/helpers'
 import {
   VerticalAlignBottomRounded,
   VerticalAlignTopRounded,
@@ -36,13 +29,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import {
-  BaseSearchBox,
-  MonacoEditor,
-  SortableItem,
-  Switch,
-  VirtualList,
-} from '@/components/base'
+import { BaseSearchBox, MonacoEditor, Switch } from '@/components/base'
 import { RuleItem } from '@/components/profile/rule-item'
 import { readProfileFile, saveProfileFile } from '@/services/cmds'
 import { showNotice } from '@/services/notice-service'
@@ -54,6 +41,12 @@ import getSystem from '@/utils/get-system'
 import { isValidIpCidr } from '@/utils/network'
 import { parseYamlSafe } from '@/utils/yaml'
 
+import {
+  buildGroupedItems,
+  type GroupedVirtualItem,
+  GroupedVirtualList,
+} from './grouped-virtual-list'
+
 interface Props {
   groupsUid: string
   mergeUid: string
@@ -302,117 +295,83 @@ export const RulesEditorViewer = (props: Props) => {
     [appendSeq, match],
   )
 
-  const renderItem = (index: number): React.ReactNode => {
-    const shift = filteredPrependSeq.length > 0 ? 1 : 0
-    if (filteredPrependSeq.length > 0 && index === 0) {
+  const items = useMemo(
+    () =>
+      buildGroupedItems(
+        filteredPrependSeq,
+        filteredRuleList,
+        filteredAppendSeq,
+        (rule) => rule,
+      ),
+    [filteredPrependSeq, filteredRuleList, filteredAppendSeq],
+  )
+
+  const renderItem = (entry: GroupedVirtualItem<string>) => {
+    const { category, item } = entry
+
+    if (category === 'original') {
+      const isDeleted = deleteSeq.includes(item)
       return (
-        <>
-          {filteredPrependSeq.map((item, itemIndex) => {
-            return (
-              <SortableItem
-                key={item}
-                id={`prepend:${item}`}
-                index={itemIndex}
-                group="prepend"
-                style={{ margin: '8px 0' }}
-              >
-                <RuleItem
-                  type="prepend"
-                  ruleRaw={item}
-                  onDelete={() => {
-                    setPrependSeq(prependSeq.filter((v) => v !== item))
-                  }}
-                  onAppend={() => {
-                    setAppendSeq((prev) =>
-                      prev.includes(item) ? prev : [...prev, item],
-                    )
-                    setPrependSeq(prependSeq.filter((v) => v !== item))
-                  }}
-                />
-              </SortableItem>
-            )
-          })}
-        </>
-      )
-    } else if (index < filteredRuleList.length + shift) {
-      const newIndex = index - shift
-      return (
-        <Box sx={{ margin: '8px 0' }}>
-          <RuleItem
-            key={filteredRuleList[newIndex]}
-            type={
-              deleteSeq.includes(filteredRuleList[newIndex])
-                ? 'delete'
-                : 'original'
+        <RuleItem
+          type={isDeleted ? 'delete' : 'original'}
+          ruleRaw={item}
+          onDelete={() => {
+            if (isDeleted) {
+              setDeleteSeq(deleteSeq.filter((v) => v !== item))
+            } else {
+              setDeleteSeq((prev) => [...prev, item])
             }
-            ruleRaw={filteredRuleList[newIndex]}
-            onDelete={() => {
-              if (deleteSeq.includes(filteredRuleList[newIndex])) {
-                setDeleteSeq(
-                  deleteSeq.filter((v) => v !== filteredRuleList[newIndex]),
-                )
-              } else {
-                setDeleteSeq((prev) => [...prev, filteredRuleList[newIndex]])
-              }
-            }}
-          />
-        </Box>
+          }}
+        />
       )
-    } else {
+    }
+
+    if (category === 'prepend') {
       return (
-        <>
-          {filteredAppendSeq.map((item, itemIndex) => {
-            return (
-              <SortableItem
-                key={item}
-                id={`append:${item}`}
-                index={itemIndex}
-                group="append"
-                style={{ margin: '8px 0' }}
-              >
-                <RuleItem
-                  type="append"
-                  ruleRaw={item}
-                  onDelete={() => {
-                    setAppendSeq(appendSeq.filter((v) => v !== item))
-                  }}
-                  onPrepend={() => {
-                    setPrependSeq((prev) =>
-                      prev.includes(item) ? prev : [...prev, item],
-                    )
-                    setAppendSeq(appendSeq.filter((v) => v !== item))
-                  }}
-                />
-              </SortableItem>
+        <RuleItem
+          type="prepend"
+          ruleRaw={item}
+          onDelete={() => {
+            setPrependSeq(prependSeq.filter((v) => v !== item))
+          }}
+          onAppend={() => {
+            setAppendSeq((prev) =>
+              prev.includes(item) ? prev : [...prev, item],
             )
-          })}
-        </>
+            setPrependSeq(prependSeq.filter((v) => v !== item))
+          }}
+        />
       )
     }
+
+    return (
+      <RuleItem
+        type="append"
+        ruleRaw={item}
+        onDelete={() => {
+          setAppendSeq(appendSeq.filter((v) => v !== item))
+        }}
+        onPrepend={() => {
+          setPrependSeq((prev) =>
+            prev.includes(item) ? prev : [...prev, item],
+          )
+          setAppendSeq(appendSeq.filter((v) => v !== item))
+        }}
+      />
+    )
   }
 
-  const reorder = (list: string[], startIndex: number, endIndex: number) => {
-    const result = Array.from(list)
-    const [removed] = result.splice(startIndex, 1)
-    result.splice(endIndex, 0, removed)
-    return result
-  }
-  const onPrependDragEnd = async (event: DragEndEvent) => {
-    const { operation, canceled } = event
-    const { source, target } = operation
-    if (canceled || !target || !isSortable(source)) return
-
-    const { index: overIndex, initialIndex: activeIndex } = source.sortable
-    const activeRealIndex = findRealIndex(
-      prependSeq,
-      filteredPrependSeq,
-      activeIndex,
-    )
-    const overRealIndex = findRealIndex(
-      prependSeq,
-      filteredPrependSeq,
-      overIndex,
-    )
+  const onReorder = (
+    category: 'prepend' | 'append',
+    activeIndex: number,
+    overIndex: number,
+  ) => {
+    const list = category === 'prepend' ? prependSeq : appendSeq
+    const filtered =
+      category === 'prepend' ? filteredPrependSeq : filteredAppendSeq
+    const setList = category === 'prepend' ? setPrependSeq : setAppendSeq
+    const activeRealIndex = findRealIndex(list, filtered, activeIndex)
+    const overRealIndex = findRealIndex(list, filtered, overIndex)
     if (
       activeRealIndex < 0 ||
       overRealIndex < 0 ||
@@ -421,52 +380,9 @@ export const RulesEditorViewer = (props: Props) => {
       return
     }
 
-    setPrependSeq(reorder(prependSeq, activeRealIndex, overRealIndex))
+    setList(arrayMove(list, activeRealIndex, overRealIndex))
   }
-  const onAppendDragEnd = async (event: DragEndEvent) => {
-    const { operation, canceled } = event
-    const { source, target } = operation
-    if (canceled || !target || !isSortable(source)) return
 
-    const { index: overIndex, initialIndex: activeIndex } = source.sortable
-    const activeRealIndex = findRealIndex(
-      appendSeq,
-      filteredAppendSeq,
-      activeIndex,
-    )
-    const overRealIndex = findRealIndex(appendSeq, filteredAppendSeq, overIndex)
-    if (
-      activeRealIndex < 0 ||
-      overRealIndex < 0 ||
-      activeRealIndex === overRealIndex
-    ) {
-      return
-    }
-
-    setAppendSeq(reorder(appendSeq, activeRealIndex, overRealIndex))
-  }
-  const onDragOver = (event: DragOverEvent) => {
-    const { operation } = event
-    if (!isSortableOperation(operation)) return
-
-    const { source, target } = operation
-    if (source?.group !== target?.group) {
-      event.preventDefault()
-    }
-  }
-  const onDragEnd = async (event: DragEndEvent) => {
-    const source = event.operation.source
-    if (!isSortable(source)) return
-
-    const { initialGroup, group } = source.sortable
-    if (initialGroup !== group) return
-
-    if (group === 'prepend') {
-      await onPrependDragEnd(event)
-    } else if (group === 'append') {
-      await onAppendDragEnd(event)
-    }
-  }
   const fetchContent = useCallback(async () => {
     hasLoadedSeqConfigRef.current = false
     const data = await readProfileFile(property)
@@ -854,22 +770,12 @@ export const RulesEditorViewer = (props: Props) => {
               }}
             >
               <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
-              <DragDropProvider
-                sensors={[PointerSensor, KeyboardSensor]}
-                onDragOver={onDragOver}
-                onDragEnd={onDragEnd}
-              >
-                <VirtualList
-                  count={
-                    filteredRuleList.length +
-                    (filteredPrependSeq.length > 0 ? 1 : 0) +
-                    (filteredAppendSeq.length > 0 ? 1 : 0)
-                  }
-                  estimateSize={56}
-                  renderItem={renderItem}
-                  style={{ height: 'calc(100% - 24px)', marginTop: '8px' }}
-                />
-              </DragDropProvider>
+              <GroupedVirtualList
+                items={items}
+                renderItem={renderItem}
+                onReorder={onReorder}
+                style={{ height: 'calc(100% - 24px)', marginTop: '8px' }}
+              />
             </List>
           </>
         ) : (

src/locales/ar/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "تم تثبيت الخدمة بنجاح",
+        "sidecarFallback": "تعذّر على الخدمة تشغيل النواة بسبب أذونات المسار. تم التبديل إلى وضع المسؤول لمواصلة التشغيل.",
         "uninstallSuccess": "تم إلغاء تثبيت الخدمة بنجاح"
       },
       "updater": {

src/locales/de/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "Service erfolgreich installiert",
+        "sidecarFallback": "Der Dienst konnte den Kern aufgrund der Pfadberechtigungen nicht starten. Die Anwendung läuft im Administratormodus weiter.",
         "uninstallSuccess": "Service erfolgreich deinstalliert"
       },
       "updater": {

src/locales/en/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "Service Installed Successfully",
+        "sidecarFallback": "The service could not start the core due to path permissions. Switched to administrator mode to continue running.",
         "uninstallSuccess": "Service Uninstalled Successfully"
       },
       "updater": {

src/locales/es/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "Servicio instalado con éxito",
+        "sidecarFallback": "El servicio no pudo iniciar el núcleo debido a los permisos de la ruta. Se ha cambiado al modo administrador para continuar.",
         "uninstallSuccess": "Servicio desinstalado con éxito"
       },
       "updater": {

src/locales/fa/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "سرویس با موفقیت نصب شد",
+        "sidecarFallback": "سرویس به‌دلیل مجوزهای مسیر نتوانست هسته را اجرا کند. برای ادامهٔ اجرا به حالت مدیر تغییر یافت.",
         "uninstallSuccess": "سرویس با موفقیت حذف نصب شد"
       },
       "updater": {

src/locales/id/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "Layanan Berhasil Diinstal",
+        "sidecarFallback": "Layanan tidak dapat memulai inti karena izin jalur. Beralih ke mode administrator untuk melanjutkan.",
         "uninstallSuccess": "Layanan Berhasil Dicopot"
       },
       "updater": {

src/locales/jp/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "サービスのインストールに成功しました。",
+        "sidecarFallback": "パスの権限によりサービスがコアを起動できなかったため、管理者モードに切り替えて動作を継続しています。",
         "uninstallSuccess": "サービスのアンインストールに成功しました。"
       },
       "updater": {

src/locales/ko/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "서비스가 설치되었습니다",
+        "sidecarFallback": "경로 권한 문제로 서비스가 코어를 시작하지 못해 관리자 모드로 전환하여 계속 실행합니다.",
         "uninstallSuccess": "서비스가 제거되었습니다"
       },
       "updater": {

src/locales/ru/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "Служба успешно установлена",
+        "sidecarFallback": "Служба не смогла запустить ядро из-за прав доступа к пути. Работа продолжена в режиме администратора.",
         "uninstallSuccess": "Служба успешно удалена"
       },
       "updater": {

src/locales/tr/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "Hizmet Başarıyla Kuruldu",
+        "sidecarFallback": "Hizmet, yol izinleri nedeniyle çekirdeği başlatamadı. Çalışmaya devam etmek için yönetici moduna geçildi.",
         "uninstallSuccess": "Hizmet Başarıyla Kaldırıldı"
       },
       "updater": {

src/locales/tt/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "Сервис уңышлы урнаштырылды",
+        "sidecarFallback": "Хезмәт юлга керү хокуклары аркасында төшне эшләтеп җибәрә алмады. Эшне дәвам итү өчен администратор режимына күчелде.",
         "uninstallSuccess": "Сервис уңышлы салдырылды"
       },
       "updater": {

src/locales/zh/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "已成功安装服务",
+        "sidecarFallback": "服务因路径权限问题无法启动内核，已切回管理员模式继续运行。",
         "uninstallSuccess": "已成功卸载服务"
       },
       "updater": {

src/locales/zhtw/settings.json

@@ -683,6 +683,7 @@
       },
       "clashService": {
         "installSuccess": "已成功安裝服務",
+        "sidecarFallback": "服務因路徑權限問題無法啟動核心，已切回管理員模式繼續執行。",
         "uninstallSuccess": "已成功解除安裝服務"
       },
       "updater": {

src/pages/_layout/hooks/use-layout-events.test.ts

@@ -13,7 +13,10 @@ vi.mock('react', () => ({ useEffect: (effect: () => void) => effect() }))
 vi.mock('@/hooks/use-profiles', () => ({ revalidateProfiles: vi.fn() }))
 vi.mock('@/hooks/use-system-state', () => ({ runStateQueryKey: ['state'] }))
 vi.mock('@/services/events', () => ({ subscribeVergeEvents: vi.fn() }))
-vi.mock('@/services/cmds', () => ({ takeDnsOverrideNotice: vi.fn() }))
+vi.mock('@/services/cmds', () => ({
+  takeDnsOverrideNotice: vi.fn(),
+  takeServiceFallbackNotice: vi.fn().mockResolvedValue(false),
+}))
 vi.mock('@/services/notice-service', () => ({
   showNotice: { info: vi.fn() },
 }))

src/pages/_layout/hooks/use-layout-events.ts

@@ -64,6 +64,7 @@ export const useLayoutEvents = (
       () => {
         revalidateKeys(['getRuntimeState', 'getVergeConfig'])
         handleNotice(['dns_override::auto_disabled', ''])
+        handleNotice(['service_core::sidecar_fallback', ''])
       },
     )
   }, [handleNotice])

src/pages/_layout/utils/notification-handlers.ts

@@ -1,4 +1,7 @@
-import { takeDnsOverrideNotice } from '@/services/cmds'
+import {
+  takeDnsOverrideNotice,
+  takeServiceFallbackNotice,
+} from '@/services/cmds'
 import { showNotice } from '@/services/notice-service'
 
 type NavigateFunction = (path: string, options?: any) => void
@@ -25,6 +28,22 @@ export const handleNoticeMessage = (
       showNotice.error(msg)
     },
     'set_config::error': () => showNotice.error(msg),
+    'service_core::sidecar_fallback': () => {
+      void takeServiceFallbackNotice()
+        .then((pending) => {
+          if (pending) {
+            showNotice.warning(
+              'settings.feedback.notifications.clashService.sidecarFallback',
+            )
+          }
+        })
+        .catch((error) => {
+          console.error(
+            'Failed to read the pending service fallback notice',
+            error,
+          )
+        })
+    },
     'dns_override::auto_disabled': () => {
       void takeDnsOverrideNotice()
         .then((pending) => {

src/services/cmds.ts

@@ -182,6 +182,10 @@ export async function takeDnsOverrideNotice() {
   return invoke<boolean>('take_dns_override_notice')
 }
 
+export async function takeServiceFallbackNotice() {
+  return invoke<boolean>('take_service_fallback_notice')
+}
+
 export async function getSystemProxy() {
   return invoke<{
     enable: boolean

src/types/generated/i18n-keys.ts

@@ -793,6 +793,7 @@ export const translationKeys = [
   'settings.feedback.notifications.clash.changeFailed',
   'settings.feedback.notifications.clash.geoDataUpdated',
   'settings.feedback.notifications.clashService.installSuccess',
+  'settings.feedback.notifications.clashService.sidecarFallback',
   'settings.feedback.notifications.clashService.uninstallSuccess',
   'settings.feedback.notifications.updater.withClashProxySuccess',
   'settings.feedback.notifications.updater.withClashProxyFailed',

src/types/generated/i18n-resources.ts

@@ -831,6 +831,7 @@ export interface TranslationResources {
           }
           clashService: {
             installSuccess: string
+            sidecarFallback: string
             uninstallSuccess: string
           }
           updater: {