feat: add Docker environment detection to network interface handling

Author: linyuchen

src/webui/BE/routes/config.ts

@@ -5,6 +5,7 @@ import { getConfigUtil, webuiTokenUtil } from '@/common/config'
 import { selfInfo } from '@/common/globalVars'
 import { ReqConfig, ResConfig } from '../types'
 import { Config } from '@/common/types'
+import { isDockerEnvironment } from '@/common/utils/environment'
 
 function isListenAllInterfaces(host: string | undefined): boolean {
   return !host || host === '0.0.0.0' || host === '::'
@@ -41,16 +42,19 @@ export function createConfigRoutes(ctx: Context): Router {
   // 获取网卡列表
   router.get('/network-interfaces', (req, res) => {
     try {
+      const isDocker = isDockerEnvironment()
       const interfaces = networkInterfaces()
       const addresses: string[] = []
-      for (const name in interfaces) {
-        for (const iface of interfaces[name] || []) {
-          if (iface.family === 'IPv4' && !iface.internal) {
-            addresses.push(iface.address)
+      if (!isDocker) {
+        for (const name in interfaces) {
+          for (const iface of interfaces[name] || []) {
+            if (iface.family === 'IPv4' && !iface.internal) {
+              addresses.push(iface.address)
+            }
           }
         }
       }
-      res.json({ success: true, data: addresses })
+      res.json({ success: true, data: addresses, isDocker })
     } catch (e) {
       res.status(500).json({ success: false, message: '获取网卡列表失败', error: e })
     }

src/webui/FE/components/common/HostSelector.tsx

@@ -13,9 +13,11 @@ interface Option {
 }
 
 let cachedNetworkInterfaces: string[] | null = null
+let cachedIsDocker: boolean = false
 
 export const HostSelector: React.FC<HostSelectorProps> = ({ value, onChange }) => {
   const [networkInterfaces, setNetworkInterfaces] = useState<string[]>(cachedNetworkInterfaces || [])
+  const [isDocker, setIsDocker] = useState(cachedIsDocker)
   const [isOpen, setIsOpen] = useState(false)
   const [isCustom, setIsCustom] = useState(false)
   const [customHost, setCustomHost] = useState('')
@@ -26,9 +28,16 @@ export const HostSelector: React.FC<HostSelectorProps> = ({ value, onChange }) =
       apiFetch<string[]>('/api/network-interfaces').then(res => {
         if (res.success) {
           cachedNetworkInterfaces = res.data
+          cachedIsDocker = !!(res as any).isDocker
           setNetworkInterfaces(res.data)
+          setIsDocker(cachedIsDocker)
+          if (cachedIsDocker && value !== '') {
+            onChange('')
+          }
         }
       })
+    } else if (isDocker && value !== '') {
+      onChange('')
     }
   }, [])
 
@@ -84,6 +93,16 @@ export const HostSelector: React.FC<HostSelectorProps> = ({ value, onChange }) =
     onChange(val)
   }
 
+  if (isDocker) {
+    return (
+      <div className='flex items-center gap-2'>
+        <div className='input-field w-full text-left opacity-70 cursor-not-allowed'>
+          全部 (0.0.0.0 和 ::)
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className='flex items-center gap-2'>
       <div className='relative flex-1 z-[9999]' ref={dropdownRef}>