refactor: adjust admin web pages

- refactor: adjust admin web pages
vicanso · Oct 1, 2024 · 8ce9b29 · 8ce9b29
1 parent 1e57ebf
commit 8ce9b29
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 82 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -48,10 +48,10 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
-    "@types/node": "^22.7.2",
-    "@types/react": "^18.3.9",
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitejs/plugin-react-swc": "^3.7.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
@@ -60,7 +60,7 @@
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.2",
-    "typescript-eslint": "^8.7.0",
+    "typescript-eslint": "^8.8.0",
     "vite": "^5.4.8"
   }
 }
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
@@ -63,7 +63,7 @@ export function MainHeader({
   const tips = (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="link">
+        <Button variant="ghost" size="icon">
           <Cog />
         </Button>
       </DropdownMenuTrigger>
@@ -142,11 +142,13 @@ export function MainHeader({
           src={Logo}
         />
         <Link to={HOME} className="font-bold">
-          Pingap
-          {!initialized && (
-            <LoaderCircle className="ml-2 h-4 w-4 inline animate-spin" />
-          )}
-          <span className="ml-2">{basicInfo.version}</span>
+          <Button variant="link" className="px-0">
+            Pingap
+            {!initialized && (
+              <LoaderCircle className="ml-2 h-4 w-4 inline animate-spin" />
+            )}
+            <span className="ml-2">{basicInfo.version}</span>
+          </Button>
         </Link>
         <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end mr-5">
           {tips}

diff --git a/web/src/components/kv-inputs.tsx b/web/src/components/kv-inputs.tsx
@@ -56,7 +56,7 @@ export const KvInputs = React.forwardRef<HTMLInputElement, KvInputsProps>(
       arr.forEach((item) => {
         const { key, value } = item;
         if (key || value) {
-          values.push(`${key}${separator}${value}`);
+          values.push(`${key}${separator}${value}`.trim());
         }
       });
       onValueChange(values);

diff --git a/web/src/pages/Basic.tsx b/web/src/pages/Basic.tsx
@@ -235,6 +235,7 @@ export default function Basic() {
         <MainSidebar className="h-screen flex-none w-[230px]" />
         <div className="grow lg:border-l overflow-auto p-4">
           <ExForm
+            category="basic"
             items={items}
             schema={schema}
             defaultShow={9}

diff --git a/web/src/pages/Certificates.tsx b/web/src/pages/Certificates.tsx
@@ -27,7 +27,7 @@ function getCertificateConfig(
 
 export default function Certificates() {
   const certificateI18n = useI18n("certificate");
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   const [config, initialized, update, remove] = useConfigState((state) => [
     state.data,
@@ -51,6 +51,12 @@ export default function Certificates() {
 
   const handleSelectCertificate = (name: string) => {
     setCurrentCertificate(name);
+    if (name === newCertificate) {
+      searchParams.delete("name");
+    } else {
+      searchParams.set("name", name);
+    }
+    setSearchParams(searchParams);
   };
 
   const certificateConfig = getCertificateConfig(

diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
@@ -15,6 +15,7 @@ import { LoadingPage } from "@/components/loading";
 import useBasicState from "@/states/basic";
 import { useI18n } from "@/i18n";
 import { listify } from "radash";
+import { Button } from "@/components/ui/button";
 
 interface Summary {
   name: string;
@@ -167,7 +168,9 @@ export default function Home() {
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative">
           <CardTitle className="text-sm font-medium ">{item.title}</CardTitle>
           <Link to={item.path} className="absolute top-3 right-3">
-            <FilePlus2 className="w-5 h-5" />
+            <Button variant="ghost" size="icon">
+              <FilePlus2 className="w-5 h-5" />
+            </Button>
           </Link>
         </CardHeader>
         <CardContent>
@@ -177,10 +180,12 @@ export default function Home() {
               {item.summary.map((item) => {
                 return (
                   <li key={item.name} className="break-all mt-2">
-                    <span className="text-muted-foreground mr-1">
-                      {item.value}
-                    </span>
-                    <Link to={item.link}>{item.name}</Link>
+                    <Link className="mr-1" to={item.link}>
+                      <Button variant="link" size={null}>
+                        [{item.name}]
+                      </Button>
+                    </Link>
+                    <span className="text-muted-foreground">{item.value}</span>
                   </li>
                 );
               })}

diff --git a/web/src/pages/Locations.tsx b/web/src/pages/Locations.tsx
@@ -22,7 +22,7 @@ function getLocationConfig(name: string, locations?: Record<string, Location>) {
 
 export default function Locations() {
   const locationI18n = useI18n("location");
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   const [config, initialized, update, remove] = useConfigState((state) => [
     state.data,
@@ -50,6 +50,12 @@ export default function Locations() {
 
   const handleSelectLocation = (name: string) => {
     setCurrentLocation(name);
+    if (name === newLocation) {
+      searchParams.delete("name");
+    } else {
+      searchParams.set("name", name);
+    }
+    setSearchParams(searchParams);
   };
 
   const plugins = newStringOptions(