feat: 当用户复制配置项成功时弹窗提醒

app/components/EnvVariableConfig.tsx

@@ -2,6 +2,9 @@
 
 import { useState } from 'react';
 import copy from 'copy-to-clipboard';
+import iziToast from 'izitoast';
+import 'izitoast/dist/css/iziToast.min.css';
+import '@fortawesome/fontawesome-free/css/all.min.css'; // 引入 Font Awesome
 
 export function EnvVariableConfig({ variableNames, format }: { variableNames: { key: string; name: string;defaultVal?: string }[]; format?: "yaml" | "env" }) {
   const [values, setValues] = useState(variableNames.map((name) => name.defaultVal || ''));
@@ -10,10 +13,20 @@ export function EnvVariableConfig({ variableNames, format }: { variableNames: {
     if (format === 'yaml') {
       const yamlContent = variableNames.map((name, index) => `- ${name.key}=${values[index]}`).join('\n');
       copy(yamlContent);
-      return;
+    } else {
+      const envContent = variableNames.map((name, index) => `${name.key}=${values[index]}`).join('\n');
+      copy(envContent);
     }
-    const envContent = variableNames.map((name, index) => `${name.key}=${values[index]}`).join('\n');
-    copy(envContent);
+    iziToast.success({
+      title: '复制成功',
+      message: '请继续下一步操作',
+      position: 'topRight',
+      backgroundColor: '#4CAF50', // 背景颜色
+      color: '#FFFFFF', // 字体颜色
+      timeout: 3000, // 自动关闭时间
+      icon: 'fas fa-check', // 图标
+      iconColor: '#FFFFFF' // 图标颜色
+    });
   };
 
   const handleChange = (index: number, value: string) => {
@@ -31,12 +44,16 @@ export function EnvVariableConfig({ variableNames, format }: { variableNames: {
             className="border rounded-lg px-2 py-2 w-1/2 bg-transparent focus:outline-none focus:border-black hover:border-white-400 transition duration-300 font-[400] font-sans text-sm cursor-not-allowed dark:border-gray-700 dark:text-gray-300 dark:bg-gray-800"
             value={name.name || name.key}
             data-tip={name.key}
+            title={name.name || name.key}
+            placeholder={name.name || name.key}
             onMouseOver={(e: any) => {
-              e.target.style.color = 'transparent';
-              setTimeout(() => {
-                e.target.style.color = 'inherit';
-                e.target.value = e.target.dataset.tip;
-              }, 300);
+              if (typeof window !== 'undefined') {
+                e.target.style.color = 'transparent';
+                setTimeout(() => {
+                  e.target.style.color = 'inherit';
+                  e.target.value = e.target.dataset.tip;
+                }, 0);
+              }
             }}
             onMouseLeave={(e: any) => {
               e.target.style.color = 'transparent';
@@ -49,8 +66,7 @@ export function EnvVariableConfig({ variableNames, format }: { variableNames: {
           />
           <input
             type="text"
-            className="border rounded-lg px-2 py-2 w-1/2 focus:outline-none focus:border-black hover:border-gray-400 transition duration-300 font-[400] font-sans text-sm dark:border-gray-700 dark:text-gray-300 dark:bg-gray-800" 
-            style={{ outline: "none", boxShadow: "none" }}
+            className="border rounded-lg px-2 py-2 w-1/2 focus:outline-none focus:border-black hover:border-gray-400 transition duration-300 font-[400] font-sans text-sm dark:border-gray-700 dark:text-gray-300 dark:bg-gray-800 focus:shadow-none"
             placeholder={`Enter value...`}
             value={values[index]}
             onChange={(e) => handleChange(index, e.target.value)}