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/routes/alert-rule.tsx

@@ -144,7 +144,7 @@ export default function AlertRulePage() {
             <div className="flex mt-6 mb-4">
                 <NotificationTab className="flex-1 mr-4 sm:max-w-[40%]" />
                 <HeaderButtonGroup
-                    className="flex-2 flex gap-2 ml-auto"
+                    className="flex ml-auto self-end sm:self-auto gap-2 flex-wrap shrink-0"
                     delete={{
                         fn: deleteAlertRules,
                         id: selectedRows.map((r) => r.original.id),

src/routes/cron.tsx

@@ -208,11 +208,11 @@ export default function CronPage() {
     const selectedRows = table.getSelectedRowModel().rows
 
     return (
-        <div className="px-3">
-            <div className="flex mt-6 mb-4">
-                <h1 className="flex-1 text-3xl font-bold tracking-tight">{t("Task")}</h1>
+        <div className="px-3 max-w-7xl mx-auto">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between w-full gap-3 mt-6 mb-4">
+                <h1 className="text-3xl font-bold tracking-tight">{t("Task")}</h1>
                 <HeaderButtonGroup
-                    className="flex-2 flex ml-auto gap-2"
+                    className="flex gap-2 flex-wrap shrink-0"
                     delete={{
                         fn: deleteCron,
                         id: selectedRows.map((r) => r.original.id),

src/routes/ddns.tsx

@@ -149,7 +149,7 @@ export default function DDNSPage() {
             <div className="flex mt-6 mb-4">
                 <h1 className="flex-1 text-3xl font-bold tracking-tight">{t("DDNS")}</h1>
                 <HeaderButtonGroup
-                    className="flex-2 flex ml-auto gap-2"
+                    className="flex ml-auto self-end sm:self-auto gap-2 flex-wrap shrink-0"
                     delete={{
                         fn: deleteDDNSProfiles,
                         id: selectedRows.map((r) => r.original.id),

src/routes/nat.tsx

@@ -132,7 +132,7 @@ export default function NATPage() {
             <div className="flex mt-6 mb-4">
                 <h1 className="flex-1 text-3xl font-bold tracking-tight"> {t("NATT")}</h1>
                 <HeaderButtonGroup
-                    className="flex-2 flex ml-auto gap-2"
+                    className="flex ml-auto self-end sm:self-auto gap-2 flex-wrap shrink-0"
                     delete={{
                         fn: deleteNAT,
                         id: selectedRows.map((r) => r.original.id),

src/routes/notification-group.tsx

@@ -125,7 +125,7 @@ export default function NotificationGroupPage() {
             <div className="flex mt-6 mb-4">
                 <GroupTab className="flex-1 mr-4 sm:max-w-[40%]" />
                 <HeaderButtonGroup
-                    className="flex-2 flex gap-2 ml-auto"
+                    className="flex ml-auto self-end sm:self-auto gap-2 flex-wrap shrink-0"
                     delete={{
                         fn: deleteNotificationGroups,
                         id: selectedRows.map((r) => r.original.group.id),

src/routes/notification.tsx

@@ -140,7 +140,7 @@ export default function NotificationPage() {
             <div className="flex mt-6 mb-4">
                 <NotificationTab className="flex-1 mr-4 sm:max-w-[40%]" />
                 <HeaderButtonGroup
-                    className="flex-2 flex gap-2 ml-auto"
+                    className="flex ml-auto self-end sm:self-auto gap-2 flex-wrap shrink-0"
                     delete={{
                         fn: deleteNotification,
                         id: selectedRows.map((r) => r.original.id),

src/routes/online-user.tsx

@@ -40,7 +40,7 @@ export default function OnlineUserPage() {
     // 计算 offset
     const offset = (page - 1) * pageSize
 
-    const { data, mutate, error, isLoading } = useSWR<ModelOnlineUserApi>(
+    const { data, mutate, error, isLoading } = useSWR<ModelOnlineUserApi, Error>(
         `/api/v1/online-user?offset=${offset}&limit=${pageSize}`,
         swrFetcher,
     )
@@ -128,7 +128,7 @@ export default function OnlineUserPage() {
         return data?.value ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useReactTable<ModelOnlineUser>({
         data: dataCache,
         columns,
         getCoreRowModel: getCoreRowModel(),

src/routes/server-group.tsx

@@ -125,7 +125,7 @@ export default function ServerGroupPage() {
             <div className="flex mt-6 mb-4">
                 <GroupTab className="flex-1 mr-4 sm:max-w-[40%]" />
                 <HeaderButtonGroup
-                    className="flex-2 flex ml-auto gap-2"
+                    className="flex ml-auto self-end sm:self-auto gap-2 flex-wrap shrink-0"
                     delete={{
                         fn: deleteServerGroups,
                         id: selectedRows.map((r) => r.original.group.id),

src/routes/server.tsx

@@ -11,6 +11,12 @@ import { ServerConfigCard } from "@/components/server-config"
 import { ServerConfigCardBatch } from "@/components/server-config-batch"
 import { TerminalButton } from "@/components/terminal"
 import { Checkbox } from "@/components/ui/checkbox"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import {
     Table,
     TableBody,
@@ -31,7 +37,10 @@ import useSWR from "swr"
 
 export default function ServerPage() {
     const { t } = useTranslation()
-    const { data, mutate, error, isLoading } = useSWR<Server[]>("/api/v1/server", swrFetcher)
+    const { data, mutate, error, isLoading } = useSWR<Server[]>("/api/v1/server", swrFetcher, {
+        revalidateOnFocus: false,
+        revalidateOnReconnect: false,
+    })
     const { serverGroups } = useServer()
 
     useEffect(() => {
@@ -144,9 +153,27 @@ export default function ServerPage() {
                         delete={{ fn: deleteServer, id: s.id, mutate: mutate }}
                     >
                         <>
-                            <TerminalButton id={s.id} />
                             <ServerCard mutate={mutate} data={s} />
-                            <ServerConfigCard sid={s.id} variant="outline" />
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <IconButton
+                                        icon="more"
+                                        variant="outline"
+                                        aria-label="More actions"
+                                    />
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                    <DropdownMenuItem asChild>
+                                        <TerminalButton id={s.id} menuItem />
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem asChild>
+                                        <ServerConfigCard sid={s.id} variant="ghost" menuItem />
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem asChild>
+                                        <InstallCommandsMenu uuid={s.uuid} menuItem />
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
                         </>
                     </ActionButtonGroup>
                 )
@@ -167,11 +194,11 @@ export default function ServerPage() {
     const selectedRows = table.getSelectedRowModel().rows
 
     return (
-        <div className="px-3">
-            <div className="flex mt-6 mb-4">
+        <div className="px-3 max-w-7xl mx-auto">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between w-full gap-3 mt-6 mb-4">
                 <h1 className="text-3xl font-bold tracking-tight">{t("Server")}</h1>
                 <HeaderButtonGroup
-                    className="flex-2 flex ml-auto gap-2"
+                    className="flex gap-2 flex-wrap shrink-0"
                     delete={{
                         fn: deleteServer,
                         id: selectedRows.map((r) => r.original.id),
@@ -222,51 +249,59 @@ export default function ServerPage() {
                     <InstallCommandsMenu className="shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] bg-blue-700 text-white hover:bg-blue-600 dark:hover:bg-blue-800 rounded-lg" />
                 </HeaderButtonGroup>
             </div>
-            <Table>
-                <TableHeader>
-                    {table.getHeaderGroups().map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
-                            {headerGroup.headers.map((header) => {
-                                return (
-                                    <TableHead key={header.id} className="text-sm">
-                                        {header.isPlaceholder
-                                            ? null
-                                            : flexRender(
-                                                  header.column.columnDef.header,
-                                                  header.getContext(),
-                                              )}
-                                    </TableHead>
-                                )
-                            })}
-                        </TableRow>
-                    ))}
-                </TableHeader>
-                <TableBody>
-                    {isLoading ? (
-                        <TableRow>
-                            <TableCell colSpan={columns.length} className="h-24 text-center">
-                                {t("Loading")}...
-                            </TableCell>
-                        </TableRow>
-                    ) : table.getRowModel().rows?.length ? (
-                        table.getRowModel().rows.map((row) => (
-                            <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
-                                {row.getVisibleCells().map((cell) => (
-                                    <TableCell key={cell.id} className="text-xsm">
-                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                    </TableCell>
-                                ))}
+            <div className="rounded-md border overflow-x-auto">
+                <Table className="min-w-[960px]">
+                    <TableHeader className="sticky top-0 bg-background z-10">
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id} className="text-sm">
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef.header,
+                                                      header.getContext(),
+                                                  )}
+                                        </TableHead>
+                                    )
+                                })}
                             </TableRow>
-                        ))
-                    ) : (
-                        <TableRow>
-                            <TableCell colSpan={columns.length} className="h-24 text-center">
-                                {t("NoResults")}
-                            </TableCell>
-                        </TableRow>
-                    )}
-                </TableBody>
-            </Table>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {isLoading ? (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    {t("Loading")}...
+                                </TableCell>
+                            </TableRow>
+                        ) : table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={row.getIsSelected() && "selected"}
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id} className="text-xsm">
+                                            {flexRender(
+                                                cell.column.columnDef.cell,
+                                                cell.getContext(),
+                                            )}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    {t("NoResults")}
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
         </div>
     )
 }

src/routes/service.tsx

@@ -174,11 +174,11 @@ export default function ServicePage() {
     const selectedRows = table.getSelectedRowModel().rows
 
     return (
-        <div className="px-3">
-            <div className="flex mt-6 mb-4">
-                <h1 className="flex-1 text-3xl font-bold tracking-tight">{t("Services")}</h1>
+        <div className="px-3 max-w-7xl mx-auto">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between w-full gap-3 mt-6 mb-4">
+                <h1 className="text-3xl font-bold tracking-tight">{t("Service")}</h1>
                 <HeaderButtonGroup
-                    className="flex-2 flex ml-auto gap-2"
+                    className="flex gap-2 flex-wrap shrink-0"
                     delete={{
                         fn: deleteService,
                         id: selectedRows.map((r) => r.original.id),

src/routes/settings.tsx

@@ -64,8 +64,8 @@ export default function SettingsPage() {
         navigate("/dashboard/settings/online-user")
     }
 
-    const form = useForm<z.infer<typeof settingFormSchema>>({
-        resolver: zodResolver(settingFormSchema),
+    const form = useForm({
+        resolver: zodResolver(settingFormSchema) as any,
         defaultValues: config
             ? {
                   ...config.config,
@@ -92,7 +92,7 @@ export default function SettingsPage() {
         }
     }, [config?.config, form])
 
-    const onSubmit = async (values: z.infer<typeof settingFormSchema>) => {
+    const onSubmit = async (values: any) => {
         try {
             await updateSettings(values)
             form.reset()

src/routes/user.tsx

@@ -77,7 +77,8 @@ export default function UserPage() {
         {
             header: t("LastLogin"),
             accessorKey: "updated_at",
-            accessorFn: (row) => row.updated_at ? new Date(row.updated_at).toLocaleString() : t("Never"),
+            accessorFn: (row) =>
+                row.updated_at ? new Date(row.updated_at).toLocaleString() : t("Never"),
         },
         {
             id: "actions",