refactor: adjust config tabs

src/config/common.rs

@@ -475,6 +475,16 @@ pub struct BasicConf {
     pub cache_max_size: Option<ByteSize>,
 }
 
+impl BasicConf {
+    pub fn get_pid_file(&self) -> String {
+        if let Some(pid_file) = &self.pid_file {
+            pid_file.clone()
+        } else {
+            format!("/tmp/{}.pid", util::get_pkg_name())
+        }
+    }
+}
+
 #[derive(Deserialize, Debug, Serialize)]
 struct TomlConfig {
     basic: Option<BasicConf>,

src/main.rs

@@ -103,7 +103,7 @@ fn new_server_conf(
 ) -> server::configuration::ServerConf {
     let basic_conf = &conf.basic;
     let mut server_conf = server::configuration::ServerConf {
-        pid_file: format!("/tmp/{}.pid", util::get_pkg_name()),
+        pid_file: basic_conf.get_pid_file(),
         upgrade_sock: format!("/tmp/{}_upgrade.sock", util::get_pkg_name()),
         user: basic_conf.user.clone(),
         group: basic_conf.group.clone(),
@@ -121,9 +121,6 @@ fn new_server_conf(
     {
         server_conf.upstream_keepalive_pool_size = upstream_keepalive_pool_size;
     }
-    if let Some(pid_file) = &basic_conf.pid_file {
-        server_conf.pid_file = pid_file.to_string();
-    }
     if let Some(upgrade_sock) = &basic_conf.upgrade_sock {
         server_conf.upgrade_sock = upgrade_sock.to_string();
     }

src/plugin/admin.rs

@@ -418,12 +418,11 @@ impl Plugin for AdminServe {
                 } else {
                     "x86"
                 };
-            let mut pid = "".to_string();
             let current_config = get_current_config();
-            if let Some(pid_file) = &current_config.basic.pid_file {
-                let data = tokio::fs::read(pid_file).await.unwrap_or_default();
-                pid = std::string::String::from_utf8_lossy(&data).to_string();
-            }
+            let data = tokio::fs::read(current_config.basic.get_pid_file())
+                .await
+                .unwrap_or_default();
+            let pid = std::string::String::from_utf8_lossy(&data).to_string();
             let mut threads = 0;
             let cpu_count = num_cpus::get();
             let mut default_threads = current_config.basic.threads.unwrap_or(1);

web/package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",

web/src/components/ex-form.tsx

@@ -482,10 +482,20 @@ export function ExForm({
   let showButton: JSX.Element = <> </>;
   if (defaultShow > 0 && defaultShow < maxCount) {
     let tips = t("moreSettings");
-    let icon = <UnfoldVertical />;
+    let icon = (
+      <>
+        <UnfoldVertical />
+        <span className="ml-2">{tips}</span>
+      </>
+    );
     if (showCount > defaultShow) {
       tips = t("lessSettings");
-      icon = <FoldVertical />;
+      icon = (
+        <>
+          <FoldVertical />
+          <span className="ml-2">{tips}</span>
+        </>
+      );
     }
 
     showButton = (

web/src/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

web/src/pages/Locations.tsx

@@ -10,6 +10,7 @@ import { pascal } from "radash";
 import { z } from "zod";
 import { ExFormItemCategory, newStringOptions } from "@/constants";
 import { newZodBytes } from "@/helpers/util";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 function getLocationConfig(name: string, locations?: Record<string, Location>) {
   if (!locations) {
@@ -60,11 +61,14 @@ export default function Locations() {
   };
 
   const tabs = (
-    <Tabs value={currentLocation} onValueChange={handleSelectLocation}>
-      <TabsList className="grid grid-flow-col auto-cols-max">
-        {triggers}
-      </TabsList>
-    </Tabs>
+    <ScrollArea className="pb-3">
+      <Tabs value={currentLocation} onValueChange={handleSelectLocation}>
+        <TabsList className="grid grid-flow-col auto-cols-max">
+          {triggers}
+        </TabsList>
+      </Tabs>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
   );
 
   const plugins = newStringOptions(

web/src/pages/Plugins.tsx

@@ -14,6 +14,7 @@ import {
   PluginCategory,
   getPluginSteps,
 } from "@/constants";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 function getPluginConfig(
   name: string,
@@ -74,11 +75,14 @@ export default function Plugins() {
   };
 
   const tabs = (
-    <Tabs value={currentPlugin} onValueChange={handleSelectPlugin}>
-      <TabsList className="grid grid-flow-col auto-cols-max">
-        {triggers}
-      </TabsList>
-    </Tabs>
+    <ScrollArea className="pb-3">
+      <Tabs value={currentPlugin} onValueChange={handleSelectPlugin}>
+        <TabsList className="grid grid-flow-col auto-cols-max">
+          {triggers}
+        </TabsList>
+      </Tabs>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
   );
 
   const items: ExFormItem[] = [];

web/src/pages/Upstreams.tsx

@@ -13,6 +13,7 @@ import {
   newBooleanOptions,
 } from "@/constants";
 import { newZodBytes, newZodDuration } from "@/helpers/util";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 function getUpstreamConfig(name: string, upstreams?: Record<string, Upstream>) {
   if (!upstreams) {
@@ -58,11 +59,14 @@ export default function Upstreams() {
   };
 
   const tabs = (
-    <Tabs value={currentUpstream} onValueChange={handleSelectUpstream}>
-      <TabsList className="grid grid-flow-col auto-cols-max">
-        {triggers}
-      </TabsList>
-    </Tabs>
+    <ScrollArea className="pb-3">
+      <Tabs value={currentUpstream} onValueChange={handleSelectUpstream}>
+        <TabsList className="grid grid-flow-col auto-cols-max">
+          {triggers}
+        </TabsList>
+      </Tabs>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
   );
 
   const upstreamConfig = getUpstreamConfig(currentUpstream, config.upstreams);