fix file select

Merge pull request #16 from gexin1/main
fix: 首页展示问题和授权管理弹窗无法滚动
2024-09-11 07:35:19 +08:00 · 2024-09-11 06:37:38 +08:00 · 2024-09-10 22:56:54 +08:00
9 changed files with 120 additions and 89 deletions
--- a/ui/dist/assets/index-Cg0yCJnh.css
+++ b/ui/dist/assets/index-Cg0yCJnh.css
--- a/ui/dist/assets/index-D8T6Buyh.js
+++ b/ui/dist/assets/index-D8T6Buyh.js
--- a/ui/dist/assets/index-Kh_0Jotc.css
+++ b/ui/dist/assets/index-Kh_0Jotc.css
--- a/ui/dist/index.html
+++ b/ui/dist/index.html
@@ -5,8 +5,8 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Certimate - Your Trusted SSL Automation Partner</title>
-    <script type="module" crossorigin src="/assets/index-BKUIxIk5.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Kh_0Jotc.css">
+    <script type="module" crossorigin src="/assets/index-D8T6Buyh.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Cg0yCJnh.css">
  </head>
  <body class="bg-background">
    <div id="root"></div>
--- a/ui/src/components/certimate/AccessEdit.tsx
+++ b/ui/src/components/certimate/AccessEdit.tsx
@@ -5,6 +5,7 @@ import {
  DialogTitle,
  DialogTrigger,
 } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";

 import { useState } from "react";

@@ -136,44 +137,46 @@ export function AccessEdit({
        <DialogHeader>
          <DialogTitle>{op == "add" ? "添加" : "编辑"}授权</DialogTitle>
        </DialogHeader>
-        <div className="container">
-          <Label>服务商</Label>
+        <ScrollArea className="max-h-[80vh]">
+          <div className="container py-3">
+            <Label>服务商</Label>

-          <Select
-            onValueChange={(val) => {
-              console.log(val);
-              setConfigType(val);
-            }}
-            defaultValue={configType}
-          >
-            <SelectTrigger className="mt-3">
-              <SelectValue placeholder="请选择服务商" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>服务商</SelectLabel>
-                {typeKeys.map((key) => (
-                  <SelectItem value={key} key={key}>
-                    <div
-                      className={cn(
-                        "flex items-center space-x-2 rounded cursor-pointer",
-                        getOptionCls(key)
-                      )}
-                    >
-                      <img
-                        src={accessTypeMap.get(key)?.[1]}
-                        className="h-6 w-6"
-                      />
-                      <div>{accessTypeMap.get(key)?.[0]}</div>
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
+            <Select
+              onValueChange={(val) => {
+                console.log(val);
+                setConfigType(val);
+              }}
+              defaultValue={configType}
+            >
+              <SelectTrigger className="mt-3">
+                <SelectValue placeholder="请选择服务商" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel>服务商</SelectLabel>
+                  {typeKeys.map((key) => (
+                    <SelectItem value={key} key={key}>
+                      <div
+                        className={cn(
+                          "flex items-center space-x-2 rounded cursor-pointer",
+                          getOptionCls(key)
+                        )}
+                      >
+                        <img
+                          src={accessTypeMap.get(key)?.[1]}
+                          className="h-6 w-6"
+                        />
+                        <div>{accessTypeMap.get(key)?.[0]}</div>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>

-          {form}
-        </div>
+            {form}
+          </div>
+        </ScrollArea>
      </DialogContent>
    </Dialog>
  );
--- a/ui/src/components/certimate/AccessSSHForm.tsx
+++ b/ui/src/components/certimate/AccessSSHForm.tsx
@@ -18,6 +18,7 @@ import { save } from "@/repository/access";
 import { ClientResponseError } from "pocketbase";
 import { PbErrorData } from "@/domain/base";
 import { readFileContent } from "@/lib/file";
+import { useRef, useState } from "react";

 const AccessSSHForm = ({
  data,
@@ -27,6 +28,11 @@ const AccessSSHForm = ({
  onAfterReq: () => void;
 }) => {
  const { addAccess, updateAccess } = useConfig();
+
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const [fileName, setFileName] = useState("");
+
  const formSchema = z.object({
    id: z.string().optional(),
    name: z.string().min(1).max(64),
@@ -38,7 +44,7 @@ const AccessSSHForm = ({
    username: z.string().min(1).max(64),
    password: z.string().min(0).max(64),
    key: z.string().min(0).max(20480),
-    keyFile: z.string().optional(),
+    keyFile: z.any().optional(),
    command: z.string().min(1).max(2048),
    certPath: z.string().min(0).max(2048),
    keyPath: z.string().min(0).max(2048),
@@ -127,9 +133,16 @@ const AccessSSHForm = ({
  ) => {
    const file = event.target.files?.[0];
    if (!file) return;
-    const content = await readFileContent(file);
+    const savedFile = file;
+    setFileName(savedFile.name);
+    const content = await readFileContent(savedFile);
    form.setValue("key", content);
-    form.setValue("keyFile", "");
+  };
+
+  const handleSelectFileClick = () => {
+    console.log(fileInputRef.current);
+
+    fileInputRef.current?.click();
  };

  return (
@@ -279,12 +292,26 @@ const AccessSSHForm = ({
                <FormItem>
                  <FormLabel>Key（使用证书登录）</FormLabel>
                  <FormControl>
-                    <Input
-                      placeholder="请输入Key"
-                      {...field}
-                      type="file"
-                      onChange={handleFileChange}
-                    />
+                    <div>
+                      <Button
+                        type={"button"}
+                        variant={"secondary"}
+                        size={"sm"}
+                        className="w-48"
+                        onClick={handleSelectFileClick}
+                      >
+                        {fileName ? fileName : "请选择文件"}
+                      </Button>
+                      <Input
+                        placeholder="请输入Key"
+                        {...field}
+                        ref={fileInputRef}
+                        className="hidden"
+                        hidden
+                        type="file"
+                        onChange={handleFileChange}
+                      />
+                    </div>
                  </FormControl>

                  <FormMessage />
--- a/ui/src/pages/DashboardLayout.tsx
+++ b/ui/src/pages/DashboardLayout.tsx
@@ -227,7 +227,7 @@ export default function Dashboard() {
                    href="https://github.com/usual2970/certimate/releases"
                    target="_blank"
                  >
-                    Certimate v0.1.2
+                    Certimate v0.1.3
                  </a>
                </div>
              </div>
--- a/ui/src/pages/dashboard/Dashboard.tsx
+++ b/ui/src/pages/dashboard/Dashboard.tsx
@@ -58,8 +58,8 @@ const Dashboard = () => {
      <div className="flex justify-between items-center">
        <div className="text-muted-foreground">控制面板</div>
      </div>
-      <div className="flex mt-10 gap-5 flex-col md:flex-row">
-        <div className="w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg border">
+      <div className="flex mt-10 gap-5 flex-col flex-wrap md:flex-row">
+        <div className="w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg border">
          <div className="p-3">
            <SquareSigma size={48} strokeWidth={1} className="text-blue-400" />
          </div>
@@ -80,7 +80,7 @@ const Dashboard = () => {
          </div>
        </div>

-        <div className="w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg border">
+        <div className="w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg border">
          <div className="p-3">
            <CalendarX2 size={48} strokeWidth={1} className="text-red-400" />
          </div>
@@ -101,7 +101,7 @@ const Dashboard = () => {
          </div>
        </div>

-        <div className="border w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg">
+        <div className="border w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg">
          <div className="p-3">
            <LoaderPinwheel
              size={48}
@@ -126,7 +126,7 @@ const Dashboard = () => {
          </div>
        </div>

-        <div className="border w-full md:w-[300px] flex items-center rounded-md p-3 shadow-lg">
+        <div className="border w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg">
          <div className="p-3">
            <Ban size={48} strokeWidth={1} className="text-gray-400" />
          </div>
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
      padding: "2rem",
      screens: {
        "2xl": "1400px",
+        '3xl': '1920px',
      },
    },
    extend: {
Author	SHA1	Message	Date
yoan	844347acf9	fix file select	2024-09-11 07:35:19 +08:00
usual2970	eeae9b4405	Merge pull request #16 from gexin1/main fix: 首页展示问题和授权管理弹窗无法滚动	2024-09-11 06:37:38 +08:00
river	feef94f873	fix: 1. 修复首页控制面板在md和2xl的时候会超出屏幕 2.修复授权管理-添加授权选择ssh 弹窗过长超出屏幕无法滚动	2024-09-10 22:56:54 +08:00