Fix and update (#139)

* refactor(ui): 统一组件引用类型为ComponentRef

更新所有UI组件中的forwardRef类型，从ElementRef改为ComponentRef以保持一致性
迁移postcss配置至mjs格式并更新依赖版本

* refactor: 优化表单类型定义和验证逻辑

移除自定义的 asOptionalField 工具函数，直接使用 Zod 的 optional() 方法，并明确定义表单数据类型。

* style: 更新UI主题配置和样式变量

将主题风格从default切换为new-york，并重构CSS变量使用OKLCH色彩空间。同时添加tailwindcss-animate插件支持。

* style: 统一页面头部按钮组样式

优化多个页面头部按钮组的布局样式，增加响应式设计和flex-wrap支持

* fix(server): 修复对话框交互问题并优化SWR配置

修复对话框关闭逻辑并阻止外部交互，同时禁用SWR的自动重新验证功能以提升性能。

* feat: 添加日历组件及账单相关国际化

实现基于 react-day-picker 的日历组件，并添加账单管理相关的多语言支持

* style(components): 统一按钮样式并格式化代码

为删除和禁用按钮添加text-white类名，同时调整ServerCard组件中的代码缩进格式。

* perf(build): 优化Vite打包配置与代码分割策略

调整Vite构建配置，改进第三方依赖的分组逻辑并添加UUID支持到安装命令组件

* fix: 修正页面标题翻译不一致问题

将CronPage和ServicePage的标题从"Server"分别改为"Task"和"Service"，并优化NotificationGroupPage的按钮组布局。

* fix(auth): 改进登录错误处理和国际化支持

优化登录错误提示，添加多语言支持并移除控制台错误日志。同时修复头部组件透明度样式问题。

* feat: 添加服务器操作下拉菜单

为服务器卡片添加统一的下拉菜单操作入口，整合终端、配置和安装命令功能。

* feat[alert-rule]: 优化告警规则组件性能

重构告警规则组件代码结构，提升渲染效率并减少内存占用。

* docs(i18n): 新增翻译字段

为界面添加"Add"、"Delete"、"AdvancedJSON"和"Save"等关键操作的翻译字段，支持中英文双语显示。

* perf(vite): 优化分包策略以提升构建性能

重构 manualChunks 逻辑，按功能类别分组依赖项，并增加大型库的独立分包规则。

* style: 统一危险操作按钮的文字颜色

在所有确认操作的弹窗按钮中添加白色文字样式，保持视觉一致性。

* fix(components): 调整下拉菜单对齐方式

根据菜单项状态动态设置下拉菜单的对齐方向和起始位置。

* fix(types): 修复在线用户API分页类型

添加ModelOnlineUserApi接口类型，包含分页信息，并移除index.ts中重复的类型定义。

* chore: auto-fix linting and formatting issues

* feat(locales): 添加无过期相关翻译项

为英文和中文翻译文件添加"NoExpiry"、"SetNoExpiry"等无过期相关字段的翻译。

fix(components): 移除重复的图标按钮选项

从IconButton组件中删除重复的"more"图标选项。

* feat(ServerCard): 优化日期选择器并添加下拉提示

为日期选择器添加下拉布局和年份范围限制，并在公共笔记区域增加下拉项生效提示文本。

* chore: auto-fix linting and formatting issues

* style: 优化多个组件的UI交互细节

统一按钮悬停样式并简化国际化文本调用，移除冗余的单位显示和空值判断逻辑。

* refactor(ServerCard): 移除网络路由相关代码

删除 ServerCard 组件中与 plan.networkRoute 相关的字段验证和错误显示逻辑。

* chore: auto-fix linting and formatting issues

* feat(ui): 添加Switch组件并改进服务器表单交互

- 新增Radix UI Switch组件依赖及实现
- 将IPv4/IPv6输入改为开关控件，优化用户体验
- 添加"按量付费"选项和新的翻译字段
- 改进网络路由和备注输入的占位提示
- 修复暗黑模式下的按钮背景色

* style(components): 为禁止按钮添加白色文本样式

* chore: auto-fix linting and formatting issues

* fix(ServerCard): 修复日期选择器样式和滚动问题

调整日期选择器的宽度和高度限制，添加滚动容器以解决内容溢出问题

* refactor(server-config): 简化复选框checked属性的布尔转换

使用!!操作符简化controllerField.value的布尔值转换，使代码更简洁

* feat(国际化): 添加告警规则和搜索框的国际化支持

为告警规则组件添加多语言支持，包括服务器监控选项、忽略提示和示例文本。同时将搜索框的占位文本替换为国际化字段。

* chore: auto-fix linting and formatting issues

* fix(switch): 修正 Switch 组件 ref 类型定义错误

---------

Co-authored-by: Guccen <171530509+Chillln@users.noreply.github.com>

src/components/install-commands.tsx

@@ -10,7 +10,7 @@ import useSettings from "@/hooks/useSetting"
 import { copyToClipboard } from "@/lib/utils"
 import { ModelProfile, ModelSetting } from "@/types"
 import i18next from "i18next"
-import { Check, Clipboard } from "lucide-react"
+import { Check, Copy, Download } from "lucide-react"
 import { forwardRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -21,82 +21,137 @@ enum OSTypes {
     Windows,
 }
 
-export const InstallCommandsMenu = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-    const [copy, setCopy] = useState(false)
-    const { data: settings } = useSettings()
-    const { profile } = useAuth()
+type InstallCommandsMenuProps = ButtonProps & {
+    uuid?: string
+    iconOnly?: boolean
+    menuItem?: boolean
+}
 
-    const { t } = useTranslation()
+export const InstallCommandsMenu = forwardRef<HTMLButtonElement, InstallCommandsMenuProps>(
+    ({ uuid, iconOnly = false, menuItem = false, ...props }, ref) => {
+        const [copy, setCopy] = useState(false)
+        const { data: settings } = useSettings()
+        const { profile } = useAuth()
 
-    const switchState = async (type: number) => {
-        if (!copy) {
-            try {
-                setCopy(true)
-                if (!profile) throw new Error("Profile is not found.")
-                if (!settings?.config) throw new Error("Settings is not found.")
-                await copyToClipboard(generateCommand(type, settings!.config, profile) || "")
-            } catch (e: Error | any) {
-                console.error(e)
-                toast(t("Error"), {
-                    description: e.message,
-                })
-            } finally {
-                setTimeout(() => {
-                    setCopy(false)
-                }, 2 * 1000)
+        const { t } = useTranslation()
+
+        const switchState = async (type: number) => {
+            if (!copy) {
+                try {
+                    setCopy(true)
+                    if (!profile) throw new Error("Profile is not found.")
+                    if (!settings?.config) throw new Error("Settings is not found.")
+                    await copyToClipboard(
+                        generateCommand(type, settings!.config, profile, uuid) || "",
+                    )
+                } catch (e: Error | any) {
+                    console.error(e)
+                    toast(t("Error"), {
+                        description: e.message,
+                    })
+                } finally {
+                    setTimeout(() => {
+                        setCopy(false)
+                    }, 2 * 1000)
+                }
             }
         }
-    }
 
-    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button {...props} ref={ref}>
-                    {copy ? <Check /> : <Clipboard />}
-                    {t("InstallCommands")}
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-                <DropdownMenuItem
-                    className="nezha-copy"
-                    onClick={async () => {
-                        switchState(OSTypes.Linux)
-                    }}
+        return (
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    {menuItem ? (
+                        <button
+                            type="button"
+                            className="flex w-full items-center text-sm px-2 py-2 hover:bg-accent hover:text-accent-foreground"
+                            title={i18next.t("InstallCommands")}
+                        >
+                            {copy ? (
+                                <Check className="h-4 w-4 mr-2" />
+                            ) : (
+                                <Copy className="h-4 w-4 mr-2" />
+                            )}
+                            <span>{i18next.t("InstallCommands")}</span>
+                        </button>
+                    ) : iconOnly ? (
+                        <Button
+                            ref={ref}
+                            title={i18next.t("InstallCommands")}
+                            size="icon"
+                            {...props}
+                        >
+                            {copy ? (
+                                <Check className="h-4 w-4" />
+                            ) : (
+                                <Download className="h-4 w-4" />
+                            )}
+                        </Button>
+                    ) : (
+                        <Button ref={ref} title={i18next.t("InstallCommands")} {...props}>
+                            {copy ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+                            <span className="ml-2">{i18next.t("InstallCommands")}</span>
+                        </Button>
+                    )}
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                    side={menuItem ? "right" : undefined}
+                    align={menuItem ? "start" : undefined}
                 >
-                    Linux
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                    className="nezha-copy"
-                    onClick={async () => {
-                        switchState(OSTypes.macOS)
-                    }}
-                >
-                    macOS
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                    className="nezha-copy"
-                    onClick={async () => {
-                        switchState(OSTypes.Windows)
-                    }}
-                >
-                    Windows
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
-    )
-})
+                    <DropdownMenuItem
+                        className="nezha-copy"
+                        onClick={async () => {
+                            switchState(OSTypes.Linux)
+                        }}
+                    >
+                        Linux
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        className="nezha-copy"
+                        onClick={async () => {
+                            switchState(OSTypes.macOS)
+                        }}
+                    >
+                        macOS
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        className="nezha-copy"
+                        onClick={async () => {
+                            switchState(OSTypes.Windows)
+                        }}
+                    >
+                        Windows
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        )
+    },
+)
 
 const generateCommand = (
     type: number,
     { install_host, tls }: ModelSetting,
     { agent_secret }: ModelProfile,
+    uuid?: string,
 ) => {
     if (!install_host) throw new Error(i18next.t("Results.InstallHostRequired"))
 
     if (!agent_secret) throw new Error(i18next.t("Results.AgentSecretRequired"))
 
-    const env = `NZ_SERVER=${install_host} NZ_TLS=${tls || false} NZ_CLIENT_SECRET=${agent_secret}`
-    const env_win = `$env:NZ_SERVER=\"${install_host}\";$env:NZ_TLS=\"${tls || false}\";$env:NZ_CLIENT_SECRET=\"${agent_secret}\";`
+    const envParts = [
+        `NZ_SERVER=${install_host}`,
+        `NZ_TLS=${tls || false}`,
+        `NZ_CLIENT_SECRET=${agent_secret}`,
+    ]
+    if (uuid) envParts.push(`NZ_UUID=${uuid}`)
+    const env = envParts.join(" ")
+
+    const envWinParts = [
+        `$env:NZ_SERVER=\"${install_host}\";`,
+        `$env:NZ_TLS=\"${tls || false}\";`,
+        `$env:NZ_CLIENT_SECRET=\"${agent_secret}\";`,
+    ]
+    if (uuid) envWinParts.push(`$env:NZ_UUID=\"${uuid}\";`)
+    const env_win = envWinParts.join("")
 
     switch (type) {
         case OSTypes.Linux: