From 5b9ee5518cd2ef098853e76321acf33326ef3c54 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Sun, 2 Jul 2023 16:36:22 +0800
Subject: [PATCH] feat: wan interface auto detect

---
 src/components/ConfigFormModal.tsx           | 34 ++++++++++++--------
 src/components/SelectItemWithDescription.tsx | 18 ++++++-----
 src/i18n/locales/en.json                     |  1 +
 src/i18n/locales/zh-Hans.json                |  1 +
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/components/ConfigFormModal.tsx b/src/components/ConfigFormModal.tsx
index 4001b213..2b67f320 100644
--- a/src/components/ConfigFormModal.tsx
+++ b/src/components/ConfigFormModal.tsx
@@ -171,23 +171,29 @@ export const ConfigFormDrawer = forwardRef(({ opened, onClose }: { opened: boole
 
   const { data: generalQuery } = useGeneralQuery()
 
-  const wanInterfacesData: { value: string; label: string }[] = useMemo(() => {
+  const wanInterfacesData = useMemo(() => {
     const interfaces = generalQuery?.general.interfaces
 
     if (interfaces) {
-      return interfaces
-        .filter(({ flag }) => !!flag.default)
-        .map(({ name, ip }) => ({
-          label: name,
-          value: name,
-          description: (
-            <Stack spacing="xs">
-              {ip.map((addr, i) => (
-                <Text key={i}>{addr}</Text>
-              ))}
-            </Stack>
-          ),
-        }))
+      return [
+        {
+          label: '自动',
+          value: 'auto',
+        },
+        ...interfaces
+          .filter(({ flag }) => !!flag.default)
+          .map(({ name, ip }) => ({
+            label: name,
+            value: name,
+            description: (
+              <Stack spacing="xs">
+                {ip.map((addr, i) => (
+                  <Text key={i}>{addr}</Text>
+                ))}
+              </Stack>
+            ),
+          })),
+      ]
     }
 
     return []
diff --git a/src/components/SelectItemWithDescription.tsx b/src/components/SelectItemWithDescription.tsx
index d615e3d1..f6f1f233 100644
--- a/src/components/SelectItemWithDescription.tsx
+++ b/src/components/SelectItemWithDescription.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react'
 
 interface SelectItemWithDescriptionProps extends React.ComponentPropsWithoutRef<'div'> {
   label: React.ReactNode
-  description: React.ReactNode
+  description?: React.ReactNode
   selected?: boolean
 }
 
@@ -12,13 +12,15 @@ export const SelectItemWithDescription = forwardRef<HTMLDivElement, SelectItemWi
     <Stack ref={ref} spacing={4} {...props}>
       <Text>{label}</Text>
 
-      <Input.Description
-        sx={{
-          color: props.selected ? 'white' : undefined,
-        }}
-      >
-        {description}
-      </Input.Description>
+      {description && (
+        <Input.Description
+          sx={{
+            color: props.selected ? 'white' : undefined,
+          }}
+        >
+          {description}
+        </Input.Description>
+      )}
     </Stack>
   )
 )
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 1bfb2139..abba6006 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -34,6 +34,7 @@
   "address": "address",
   "allowInsecure": "Allow Insecure",
   "autoConfigKernelParameter": "Auto Config Kernel Parameter",
+  "autoDetect": "Auto Detect",
   "avatar": "avatar",
   "checkInterval": "Check Interval",
   "checkTolerance": "Check Tolerance",
diff --git a/src/i18n/locales/zh-Hans.json b/src/i18n/locales/zh-Hans.json
index 2a402a7a..126c1220 100644
--- a/src/i18n/locales/zh-Hans.json
+++ b/src/i18n/locales/zh-Hans.json
@@ -34,6 +34,7 @@
   "address": "地址",
   "allowInsecure": "允许不安全",
   "autoConfigKernelParameter": "自动配置内核参数",
+  "autoDetect": "自动识别",
   "avatar": "头像",
   "checkInterval": "检测间隔",
   "checkTolerance": "检测公差",