更新部分小 bug 和英文

zsio · Aug 19, 2024 · 6b7e8d8 · 6b7e8d8
1 parent d1af216
commit 6b7e8d8
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
     "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",

diff --git a/src/app/admin/machines/page.tsx b/src/app/admin/machines/page.tsx
@@ -147,7 +147,7 @@ export default function Page() {
               <TableCell>
                 <div className="flex items-center">
                   <DotFilledIcon className={cn("w-6 h-6 text-gray-400", machine.online && "text-green-600")}/>
-                  <TimeAgo time={machine.lastSeen} text={machine.online ? "在线" : undefined}/>
+                  <TimeAgo time={machine.lastSeen} text={machine.online ? "Online" : undefined}/>
                 </div>
               </TableCell>
               <TableCell>
@@ -167,12 +167,12 @@ export default function Page() {
                     </AlertDialogTrigger>
                     <AlertDialogContent>
                       <AlertDialogHeader>
-                        <AlertDialogTitle>确定要删除此设备吗？</AlertDialogTitle>
+                        <AlertDialogTitle className="text-red-500">Are you sure you want to delete this device?</AlertDialogTitle>
                         <AlertDialogDescription/>
                       </AlertDialogHeader>
                       <AlertDialogFooter>
-                        <AlertDialogCancel>取 消</AlertDialogCancel>
-                        <AlertDialogAction onClick={() => handleDelete(machine.id)}>确 定</AlertDialogAction>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction onClick={() => handleDelete(machine.id)}>Confirm</AlertDialogAction>
                       </AlertDialogFooter>
                     </AlertDialogContent>
                   </AlertDialog>

diff --git a/src/components/change-name/change-name.tsx b/src/components/change-name/change-name.tsx
@@ -1,4 +1,4 @@
-import React, {Fragment, useState} from "react";
+import React, {Fragment, useEffect, useState} from "react";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -41,18 +41,22 @@ export default function ChangeName(
 ) {
   const [open, setOpen] = useState(false)
   const [name, setName] = useState("")
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setName("");
+  }, [open]);
 
 
   const handleRename = () => {
     if (!oldName) return
     setLoading(true)
     renameAPI?.(id ?? oldName, name)
       .then(res => {
-        toast.success("修改成功")
+        toast.success("success to change")
       })
       .catch(err => {
-        toast.error("修改失败")
+        toast.error("failed to change")
       })
       .finally(() => {
         onClose?.()
@@ -65,10 +69,10 @@ export default function ChangeName(
     setLoading(true)
     createNameAPI?.(name)
       .then(res => {
-        toast.success("创建成功")
+        toast.success("success")
       })
       .catch(err => {
-        toast.error("创建失败")
+        toast.error("failed")
       })
       .finally(() => {
         onClose?.()
@@ -84,7 +88,7 @@ export default function ChangeName(
 
 
   return (
-    <AlertDialog open={open}>
+    <AlertDialog open={open} onOpenChange={setOpen}>
       <AlertDialogTrigger asChild>
         <div onClick={() => setOpen(true)}>
           {
@@ -98,7 +102,7 @@ export default function ChangeName(
             {
               oldName ? (
                 <Fragment>
-                  <span>当前名称：</span>
+                  <span>current name:</span>
                   <Badge
                     variant="secondary"
                     className="text-sm">
@@ -107,7 +111,7 @@ export default function ChangeName(
                 </Fragment>
               ) : (
                 <Fragment>
-                  <span>{title ?? "请输入新的名称："}</span>
+                  <span>{title ?? "please input new name"}</span>
                 </Fragment>
               )
             }
@@ -117,7 +121,8 @@ export default function ChangeName(
               autoFocus
               value={name}
               className="my-2"
-              placeholder={placeholder?? "请输入"}
+              type="text"
+              placeholder={placeholder ?? "please input"}
               onChange={e => setName(e.target.value)}
               onKeyDown={(e) => {
                 if (e.key === "Enter") {
@@ -130,11 +135,11 @@ export default function ChangeName(
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel disabled={loading} onClick={() => setOpen(false)}>
-            <span>取 消</span>
+            <span>cancel</span>
           </AlertDialogCancel>
           <AlertDialogAction disabled={loading} onClick={handleClick}>
             {loading && <UpdateIcon className="animate-spin"/>}
-            <span>确 定</span>
+            <span>confirm</span>
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}