feat: get network interface

src-tauri/src/cmds.rs

@@ -322,6 +322,17 @@ pub fn copy_icon_file(path: String, name: String) -> CmdResult<String> {
     }
 }
 
+#[tauri::command]
+pub fn get_network_interfaces() -> Vec<String> {
+    use sysinfo::Networks;
+    let mut result = Vec::new();
+    let networks = Networks::new_with_refreshed_list();
+    for (interface_name, _) in &networks {
+        result.push(interface_name.clone());
+    }
+    return result;
+}
+
 #[tauri::command]
 pub fn open_devtools(app_handle: tauri::AppHandle) {
     if let Some(window) = app_handle.get_window("main") {

src-tauri/src/main.rs

@@ -51,6 +51,7 @@ fn main() -> std::io::Result<()> {
             cmds::open_web_url,
             cmds::open_core_dir,
             cmds::get_portable_flag,
+            cmds::get_network_interfaces,
             // cmds::kill_sidecar,
             cmds::restart_sidecar,
             // clash

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

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useLockFn } from "ahooks";
 import yaml from "js-yaml";
 import { useTranslation } from "react-i18next";
@@ -30,7 +30,11 @@ import {
   styled,
 } from "@mui/material";
 import { GroupItem } from "@/components/profile/group-item";
-import { readProfileFile, saveProfileFile } from "@/services/cmds";
+import {
+  getNetworkInterfaces,
+  readProfileFile,
+  saveProfileFile,
+} from "@/services/cmds";
 import { Notice, Switch } from "@/components/base";
 import getSystem from "@/utils/get-system";
 import { BaseSearchBox } from "../base/base-search-box";
@@ -60,7 +64,7 @@ export const GroupsEditorViewer = (props: Props) => {
   const [currData, setCurrData] = useState("");
   const [visualization, setVisualization] = useState(true);
   const [match, setMatch] = useState(() => (_: string) => true);
-
+  const [interfaceNameList, setInterfaceNameList] = useState<string[]>([]);
   const { control, watch, register, ...formIns } = useForm<IProxyGroupConfig>({
     defaultValues: {
       type: "select",
@@ -251,6 +255,10 @@ export const GroupsEditorViewer = (props: Props) => {
     setProxyProviderList(Object.keys(provider));
     setGroupList(originGroupsObj?.["proxy-groups"] || []);
   };
+  const getInterfaceNameList = async () => {
+    let list = await getNetworkInterfaces();
+    setInterfaceNameList(list);
+  };
   useEffect(() => {
     fetchProxyPolicy();
   }, [prependSeq, appendSeq, deleteSeq]);
@@ -259,6 +267,7 @@ export const GroupsEditorViewer = (props: Props) => {
     fetchContent();
     fetchProxyPolicy();
     fetchProfile();
+    getInterfaceNameList();
   }, [open]);
 
   const validateGroup = () => {
@@ -485,11 +494,13 @@ export const GroupsEditorViewer = (props: Props) => {
                   render={({ field }) => (
                     <Item>
                       <ListItemText primary={t("Interface Name")} />
-                      <TextField
+                      <Autocomplete
-                        autoComplete="new-password"
                         size="small"
                         sx={{ width: "calc(100% - 150px)" }}
-                        {...field}
+                        options={interfaceNameList}
+                        value={field.value}
+                        onChange={(_, value) => value && field.onChange(value)}
+                        renderInput={(params) => <TextField {...params} />}
                       />
                     </Item>
                   )}

src/components/profile/profile-item.tsx

@@ -475,9 +475,9 @@ export const ProfileItem = (props: Props) => {
           </MenuItem>
         ))}
       </Menu>
-
+      {fileOpen && (
         <EditorViewer
-        open={fileOpen}
+          open={true}
           initialData={readProfileFile(uid)}
           language="yaml"
           schema="clash"
@@ -487,33 +487,43 @@ export const ProfileItem = (props: Props) => {
           }}
           onClose={() => setFileOpen(false)}
         />
+      )}
+      {rulesOpen && (
         <RulesEditorViewer
           groupsUid={option?.groups ?? ""}
           mergeUid={option?.merge ?? ""}
           profileUid={uid}
           property={option?.rules ?? ""}
-        open={rulesOpen}
+          open={true}
           onSave={onSave}
           onClose={() => setRulesOpen(false)}
         />
+      )}
+      {proxiesOpen && (
         <ProxiesEditorViewer
           profileUid={uid}
           property={option?.proxies ?? ""}
-        open={proxiesOpen}
+          open={true}
           onSave={onSave}
           onClose={() => setProxiesOpen(false)}
         />
+      )}
+      {groupsOpen && (
         <GroupsEditorViewer
           mergeUid={option?.merge ?? ""}
           proxiesUid={option?.proxies ?? ""}
           profileUid={uid}
           property={option?.groups ?? ""}
-        open={groupsOpen}
+          open={true}
           onSave={onSave}
-        onClose={() => setGroupsOpen(false)}
+          onClose={() => {
+            setGroupsOpen(false);
+          }}
         />
+      )}
+      {mergeOpen && (
         <EditorViewer
-        open={mergeOpen}
+          open={true}
           initialData={readProfileFile(option?.merge ?? "")}
           language="yaml"
           schema="clash"
@@ -523,8 +533,10 @@ export const ProfileItem = (props: Props) => {
           }}
           onClose={() => setMergeOpen(false)}
         />
+      )}
+      {scriptOpen && (
         <EditorViewer
-        open={scriptOpen}
+          open={true}
           initialData={readProfileFile(option?.script ?? "")}
           language="javascript"
           onSave={async (prev, curr) => {
@@ -533,6 +545,8 @@ export const ProfileItem = (props: Props) => {
           }}
           onClose={() => setScriptOpen(false)}
         />
+      )}
+
       <ConfirmViewer
         title={t("Confirm deletion")}
         message={t("This operation is not reversible")}

src/components/profile/profile-more.tsx

@@ -167,9 +167,9 @@ export const ProfileMore = (props: Props) => {
             </MenuItem>
           ))}
       </Menu>
-
+      {fileOpen && (
         <EditorViewer
-        open={fileOpen}
+          open={true}
           title={`${t("Global " + id)}`}
           initialData={readProfileFile(id)}
           language={id === "Merge" ? "yaml" : "javascript"}
@@ -180,12 +180,14 @@ export const ProfileMore = (props: Props) => {
           }}
           onClose={() => setFileOpen(false)}
         />
-
+      )}
+      {logOpen && (
         <LogViewer
           open={logOpen}
           logInfo={logInfo}
           onClose={() => setLogOpen(false)}
         />
+      )}
     </>
   );
 };

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

@@ -20,9 +20,10 @@ export const ConfigViewer = forwardRef<DialogRef>((_, ref) => {
     close: () => setOpen(false),
   }));
 
+  if (!open) return null;
   return (
     <EditorViewer
-      open={open}
+      open={true}
       title={
         <Box>
           {t("Runtime Config")}

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

@@ -261,8 +261,9 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
               >
                 {t("Edit")} PAC
               </Button>
+              {editorOpen && (
                 <EditorViewer
-                open={editorOpen}
+                  open={true}
                   title={`${t("Edit")} PAC`}
                   initialData={Promise.resolve(value.pac_content ?? "")}
                   language="javascript"
@@ -275,6 +276,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
                   }}
                   onClose={() => setEditorOpen(false)}
                 />
+              )}
             </ListItem>
           </>
         )}

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

@@ -123,8 +123,9 @@ export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
           >
             {t("Edit")} CSS
           </Button>
+          {editorOpen && (
             <EditorViewer
-            open={editorOpen}
+              open={true}
               title={`${t("Edit")} CSS`}
               initialData={Promise.resolve(theme.css_injection ?? "")}
               language="css"
@@ -136,6 +137,7 @@ export const ThemeViewer = forwardRef<DialogRef>((props, ref) => {
                 setEditorOpen(false);
               }}
             />
+          )}
         </Item>
       </List>
     </BaseDialog>

src/services/cmds.ts

@@ -233,3 +233,7 @@ export async function copyIconFile(
 export async function downloadIconCache(url: string, name: string) {
   return invoke<string>("download_icon_cache", { url, name });
 }
+
+export async function getNetworkInterfaces() {
+  return invoke<string[]>("get_network_interfaces");
+}