feat(settings): add searchable settings navigation

src/components/setting/mods/controller-viewer.tsx

@@ -12,7 +12,7 @@ import {
   Tooltip,
 } from '@mui/material'
 import { useLockFn } from 'ahooks'
-import { useImperativeHandle, useState, type Ref } from 'react'
+import { useState, type Ref } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { BaseDialog, DialogRef, Switch } from '@/components/base'
@@ -20,6 +20,8 @@ import { useClashInfo } from '@/hooks/use-clash'
 import { useVerge } from '@/hooks/use-verge'
 import { showNotice } from '@/services/notice-service'
 
+import { useSettingDialog } from '../settings-search-context'
+
 export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
@@ -35,7 +37,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
   )
 
   // 对话框打开时初始化配置
-  useImperativeHandle(ref, () => ({
+  useSettingDialog(ref, 'controller-viewer', open, () => ({
     open: async () => {
       setOpen(true)
       setController(clashInfo?.server || '')
@@ -124,8 +126,10 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
       onCancel={() => setOpen(false)}
       onOk={onSave}
     >
+      <span data-settings-dialog="controller-viewer" />
       <List>
         <ListItem
+          data-setting-target="settings.sections.externalController.fields.enable"
           sx={{
             padding: '5px 2px',
             display: 'flex',
@@ -144,6 +148,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
         </ListItem>
 
         <ListItem
+          data-setting-target="settings.sections.externalController.fields.address"
           sx={{
             padding: '5px 2px',
             display: 'flex',
@@ -184,6 +189,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
         </ListItem>
 
         <ListItem
+          data-setting-target="settings.sections.externalController.fields.secret"
           sx={{
             padding: '5px 2px',
             display: 'flex',