chore: identify sing-box (#373)

* chore: identify sing-box

* feat(config): hide form elements when endpoint version is sing-box

---------

Co-authored-by: kunish <kunish.butt@gmail.com>

src/helpers/global.ts

@@ -1,5 +1,9 @@
 import { createSignal } from 'solid-js'
 
+export const isSingBox = (version: string) => {
+  return version.includes('sing-box')
+}
+
 export const transformEndpointURL = (url: string) =>
   /^https?/.test(url) ? url : `${window.location.protocol}//${url}`
 

src/pages/Config.tsx

@@ -2,6 +2,8 @@ import { createForm } from '@felte/solid'
 import { validator } from '@felte/validator-zod'
 import { useNavigate } from '@solidjs/router'
 import {
+  Accessor,
+  Component,
   For,
   Show,
   createEffect,
@@ -29,6 +31,7 @@ import {
 } from '~/apis'
 import { Button, ConfigTitle } from '~/components'
 import { LANG, MODE_OPTIONS, ROUTES, themes } from '~/constants'
+import { isSingBox } from '~/helpers'
 import { locale, setLocale, useI18n } from '~/i18n'
 import {
   autoSwitchTheme,
@@ -114,7 +117,9 @@ const configFormSchema = z.object({
   'mixed-port': z.number(),
 })
 
-const ConfigForm = () => {
+const ConfigForm: Component<{ backendVersion: Accessor<string> }> = ({
+  backendVersion,
+}) => {
   const [t] = useI18n()
   const navigate = useNavigate()
 
@@ -196,6 +201,7 @@ const ConfigForm = () => {
         <option value={MODE_OPTIONS.Direct}>{t('direct')}</option>
       </select>
 
+      <Show when={!isSingBox(backendVersion())}>
         <form class="grid grid-cols-3 gap-2 sm:grid-cols-5" use:form={form}>
           <For each={portList}>
             {(item) => (
@@ -299,6 +305,7 @@ const ConfigForm = () => {
             />
           </div>
         </div>
+      </Show>
 
       <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
         <Button
@@ -325,6 +332,7 @@ const ConfigForm = () => {
           {t('flushFakeIP')}
         </Button>
 
+        <Show when={!isSingBox(backendVersion())}>
           <Button
             class="btn-error"
             loading={upgradingBackend()}
@@ -332,6 +340,7 @@ const ConfigForm = () => {
           >
             {t('upgradeCore')}
           </Button>
+        </Show>
 
         <Button
           class="btn-warning"
@@ -453,14 +462,13 @@ const ConfigForXd = () => {
   )
 }
 
-const Versions = () => {
+const Versions: Component<{ backendVersion: Accessor<string> }> = ({
-  const [backendVersion, setBackendVersion] = createSignal('')
+  backendVersion,
+}) => {
   const [isUpdateAvailable, setIsUpdateAvailable] = createSignal(false)
 
   onMount(async () => {
-    const version = await fetchBackendVersionAPI()
+    setIsUpdateAvailable(await isUpdateAvailableAPI(backendVersion()))
-    setBackendVersion(version)
-    setIsUpdateAvailable(await isUpdateAvailableAPI(version))
   })
 
   return (
@@ -486,17 +494,26 @@ const Versions = () => {
 }
 
 export default () => {
+  const [backendVersion, setBackendVersion] = createSignal('')
+
+  onMount(async () => {
+    const version = await fetchBackendVersionAPI()
+    setBackendVersion(version)
+  })
+
   const [t] = useI18n()
 
   return (
     <div class="mx-auto flex max-w-screen-md flex-col gap-4">
+      <Show when={!isSingBox(backendVersion())}>
         <ConfigTitle withDivider>{t('dnsQuery')}</ConfigTitle>
 
         <DNSQueryForm />
+      </Show>
 
       <ConfigTitle withDivider>{t('coreConfig')}</ConfigTitle>
 
-      <ConfigForm />
+      <ConfigForm backendVersion={backendVersion} />
 
       <ConfigTitle withDivider>{t('xdConfig')}</ConfigTitle>
 
@@ -504,7 +521,7 @@ export default () => {
 
       <ConfigTitle withDivider>{t('version')}</ConfigTitle>
 
-      <Versions />
+      <Versions backendVersion={backendVersion} />
     </div>
   )
 }