New Interface (initial commit)

src/components/rule/provider-button.tsx

@@ -1,30 +1,36 @@
 import { useState } from "react";
-import {
-  Button,
-  Box,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  IconButton,
-  List,
-  ListItem,
-  ListItemText,
-  Typography,
-  Divider,
-  alpha,
-  styled,
-  useTheme,
-} from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useLockFn } from "ahooks";
-import { ruleProviderUpdate } from "@/services/api";
-import { StorageOutlined, RefreshRounded } from "@mui/icons-material";
-import { useAppData } from "@/providers/app-data-provider";
 import dayjs from "dayjs";
+import { useAppData } from "@/providers/app-data-provider";
+import { ruleProviderUpdate } from "@/services/api";
 import { showNotice } from "@/services/noticeService";
 
-// 定义规则提供者类型
+// Компоненты shadcn/ui
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogTrigger,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Separator } from "@/components/ui/separator";
+
+// Иконки
+import { Database, RefreshCw } from "lucide-react";
+import { cn } from "@root/lib/utils";
+
+// Интерфейс для провайдера (взят из вашего файла)
 interface RuleProviderItem {
   behavior: string;
   ruleCount: number;
@@ -32,250 +38,153 @@ interface RuleProviderItem {
   vehicleType: string;
 }
 
-// 辅助组件 - 类型框
-const TypeBox = styled(Box)<{ component?: React.ElementType }>(({ theme }) => ({
-  display: "inline-block",
-  border: "1px solid #ccc",
-  borderColor: alpha(theme.palette.secondary.main, 0.5),
-  color: alpha(theme.palette.secondary.main, 0.8),
-  borderRadius: 4,
-  fontSize: 10,
-  marginRight: "4px",
-  padding: "0 2px",
-  lineHeight: 1.25,
-}));
-
 export const ProviderButton = () => {
   const { t } = useTranslation();
-  const theme = useTheme();
   const [open, setOpen] = useState(false);
   const { ruleProviders, refreshRules, refreshRuleProviders } = useAppData();
   const [updating, setUpdating] = useState<Record<string, boolean>>({});
 
-  // 检查是否有提供者
-  const hasProviders = Object.keys(ruleProviders || {}).length > 0;
+  const hasProviders = ruleProviders && Object.keys(ruleProviders).length > 0;
 
-  // 更新单个规则提供者
   const updateProvider = useLockFn(async (name: string) => {
     try {
-      // 设置更新状态
       setUpdating((prev) => ({ ...prev, [name]: true }));
-
       await ruleProviderUpdate(name);
-
-      // 刷新数据
       await refreshRules();
       await refreshRuleProviders();
-
-      showNotice("success", `${name} 更新成功`);
+      showNotice("success", `${name} ${t("Update Successful")}`);
     } catch (err: any) {
       showNotice(
         "error",
-        `${name} 更新失败: ${err?.message || err.toString()}`,
+        `${name} ${t("Update Failed")}: ${err?.message || err.toString()}`,
       );
     } finally {
-      // 清除更新状态
       setUpdating((prev) => ({ ...prev, [name]: false }));
     }
   });
 
-  // 更新所有规则提供者
   const updateAllProviders = useLockFn(async () => {
-    try {
-      // 获取所有provider的名称
-      const allProviders = Object.keys(ruleProviders || {});
-      if (allProviders.length === 0) {
-        showNotice("info", "没有可更新的规则提供者");
-        return;
+    const allProviders = Object.keys(ruleProviders || {});
+    if (allProviders.length === 0) return;
+
+    const newUpdating = allProviders.reduce(
+      (acc, key) => ({ ...acc, [key]: true }),
+      {},
+    );
+    setUpdating(newUpdating);
+
+    for (const name of allProviders) {
+      try {
+        await ruleProviderUpdate(name);
+      } catch (err) {
+        console.error(`Failed to update ${name}`, err);
       }
-
-      // 设置所有provider为更新中状态
-      const newUpdating = allProviders.reduce(
-        (acc, key) => {
-          acc[key] = true;
-          return acc;
-        },
-        {} as Record<string, boolean>,
-      );
-      setUpdating(newUpdating);
-
-      // 改为串行逐个更新所有provider
-      for (const name of allProviders) {
-        try {
-          await ruleProviderUpdate(name);
-          // 每个更新完成后更新状态
-          setUpdating((prev) => ({ ...prev, [name]: false }));
-        } catch (err) {
-          console.error(`更新 ${name} 失败`, err);
-          // 继续执行下一个，不中断整体流程
-        }
-      }
-
-      // 刷新数据
-      await refreshRules();
-      await refreshRuleProviders();
-
-      showNotice("success", "全部规则提供者更新成功");
-    } catch (err: any) {
-      showNotice("error", `更新失败: ${err?.message || err.toString()}`);
-    } finally {
-      // 清除所有更新状态
-      setUpdating({});
     }
-  });
 
-  const handleClose = () => {
-    setOpen(false);
-  };
+    await refreshRules();
+    await refreshRuleProviders();
+    setUpdating({});
+    showNotice("success", t("All Rule Providers Updated"));
+  });
 
   if (!hasProviders) return null;
 
   return (
-    <>
-      <Button
-        variant="outlined"
-        size="small"
-        startIcon={<StorageOutlined />}
-        onClick={() => setOpen(true)}
-      >
-        {t("Rule Provider")}
-      </Button>
-
-      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
-        <DialogTitle>
-          <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Typography variant="h6">{t("Rule Providers")}</Typography>
-            <Button
-              variant="contained"
-              size="small"
-              onClick={updateAllProviders}
-            >
+    <Dialog open={open} onOpenChange={setOpen}>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DialogTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Database className="h-5 w-5" />
+              </Button>
+            </DialogTrigger>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{t("Rule Provider")}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          {/* --- НАЧАЛО ИЗМЕНЕНИЙ --- */}
+          {/* Убираем justify-between и используем gap для отступа */}
+          <div className="flex items-center gap-4">
+            <DialogTitle>{t("Rule Providers")}</DialogTitle>
+            <Button size="sm" onClick={updateAllProviders}>
               {t("Update All")}
             </Button>
-          </Box>
-        </DialogTitle>
+          </div>
+          {/* --- КОНЕЦ ИЗМЕНЕНИЙ --- */}
+        </DialogHeader>
 
-        <DialogContent>
-          <List sx={{ py: 0, minHeight: 250 }}>
-            {Object.entries(ruleProviders || {}).map(([key, item]) => {
-              const provider = item as RuleProviderItem;
-              const time = dayjs(provider.updatedAt);
-              const isUpdating = updating[key];
+        <div className="max-h-[60vh] overflow-y-auto -mx-6 px-6 py-4 space-y-2">
+          {Object.entries(ruleProviders || {}).map(([key, item]) => {
+            const provider = item as RuleProviderItem;
+            const time = dayjs(provider.updatedAt);
+            const isUpdating = updating[key];
 
-              return (
-                <ListItem
-                  key={key}
-                  sx={[
-                    {
-                      p: 0,
-                      mb: "8px",
-                      borderRadius: 2,
-                      overflow: "hidden",
-                      transition: "all 0.2s",
-                    },
-                    ({ palette: { mode, primary } }) => {
-                      const bgcolor = mode === "light" ? "#ffffff" : "#24252f";
-                      const hoverColor =
-                        mode === "light"
-                          ? alpha(primary.main, 0.1)
-                          : alpha(primary.main, 0.2);
-
-                      return {
-                        backgroundColor: bgcolor,
-                        "&:hover": {
-                          backgroundColor: hoverColor,
-                          borderColor: alpha(primary.main, 0.3),
-                        },
-                      };
-                    },
-                  ]}
-                >
-                  <ListItemText
-                    sx={{ px: 2, py: 1 }}
-                    primary={
-                      <Box
-                        sx={{
-                          display: "flex",
-                          justifyContent: "space-between",
-                          alignItems: "center",
-                        }}
-                      >
-                        <Typography
-                          variant="subtitle1"
-                          component="div"
-                          noWrap
-                          title={key}
-                          sx={{ display: "flex", alignItems: "center" }}
-                        >
-                          <span style={{ marginRight: "8px" }}>{key}</span>
-                          <TypeBox component="span">
-                            {provider.ruleCount}
-                          </TypeBox>
-                        </Typography>
-
-                        <Typography
-                          variant="body2"
-                          color="text.secondary"
-                          noWrap
-                        >
-                          <small>{t("Update At")}: </small>
-                          {time.fromNow()}
-                        </Typography>
-                      </Box>
-                    }
-                    secondary={
-                      <Box sx={{ display: "flex" }}>
-                        <TypeBox component="span">
-                          {provider.vehicleType}
-                        </TypeBox>
-                        <TypeBox component="span">{provider.behavior}</TypeBox>
-                      </Box>
-                    }
-                  />
-                  <Divider orientation="vertical" flexItem />
-                  <Box
-                    sx={{
-                      width: 40,
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
-                    }}
-                  >
-                    <IconButton
-                      size="small"
-                      color="primary"
-                      onClick={() => updateProvider(key)}
-                      disabled={isUpdating}
-                      sx={{
-                        animation: isUpdating
-                          ? "spin 1s linear infinite"
-                          : "none",
-                        "@keyframes spin": {
-                          "0%": { transform: "rotate(0deg)" },
-                          "100%": { transform: "rotate(360deg)" },
-                        },
-                      }}
-                      title={t("Update Provider") as string}
+            return (
+              <div
+                key={key}
+                className="flex items-center rounded-lg border bg-card p-3"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex justify-between items-center">
+                    <div className="flex items-center gap-2">
+                      <p className="font-semibold truncate" title={key}>
+                        {key}
+                      </p>
+                      <Badge variant="secondary">{provider.ruleCount}</Badge>
+                    </div>
+                    <p
+                      className="text-xs text-muted-foreground"
+                      title={time.format("YYYY-MM-DD HH:mm:ss")}
                     >
-                      <RefreshRounded />
-                    </IconButton>
-                  </Box>
-                </ListItem>
-              );
-            })}
-          </List>
-        </DialogContent>
+                      {t("Update At")}: {time.fromNow()}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2 mt-2">
+                    <Badge variant="outline">{provider.vehicleType}</Badge>
+                    <Badge variant="outline">{provider.behavior}</Badge>
+                  </div>
+                </div>
 
-        <DialogActions>
-          <Button onClick={handleClose} variant="outlined">
-            {t("Close")}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
+                <Separator orientation="vertical" className="h-8 mx-4" />
+
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => updateProvider(key)}
+                        disabled={isUpdating}
+                      >
+                        <RefreshCw
+                          className={cn(
+                            "h-5 w-5",
+                            isUpdating && "animate-spin",
+                          )}
+                        />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{t("Update Provider")}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+            );
+          })}
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">{t("Close")}</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };

src/components/rule/rule-item.tsx

@@ -1,71 +1,65 @@
-import { styled, Box, Typography } from "@mui/material";
+// RuleItem.tsx
 
-const Item = styled(Box)(({ theme }) => ({
-  display: "flex",
-  padding: "4px 16px",
-  color: theme.palette.text.primary,
-}));
+import { cn } from "@root/lib/utils"; // Импортируем утилиту для классов
 
-const COLOR = [
-  "primary",
-  "secondary",
-  "info.main",
-  "warning.main",
-  "success.main",
+// Массив CSS-классов для раскрашивания названий прокси
+const PROXY_COLOR_CLASSES = [
+  "text-sky-500",
+  "text-violet-500",
+  "text-amber-500",
+  "text-lime-500",
+  "text-emerald-500",
 ];
 
+// Новая функция для получения CSS-класса цвета на основе названия
+const getProxyColorClass = (proxyName: string): string => {
+  if (proxyName === "REJECT" || proxyName === "REJECT-DROP") {
+    return "text-destructive"; // Стандартный "опасный" цвет из shadcn
+  }
+  if (proxyName === "DIRECT") {
+    return "text-primary"; // Стандартный основной цвет из shadcn
+  }
+
+  // Хеширующая функция для выбора случайного цвета из массива (логика сохранена)
+  let sum = 0;
+  for (let i = 0; i < proxyName.length; i++) {
+    sum += proxyName.charCodeAt(i);
+  }
+  return PROXY_COLOR_CLASSES[sum % PROXY_COLOR_CLASSES.length];
+};
+
 interface Props {
   index: number;
   value: IRuleItem;
 }
 
-const parseColor = (text: string) => {
-  if (text === "REJECT" || text === "REJECT-DROP") return "error.main";
-  if (text === "DIRECT") return "text.primary";
-
-  let sum = 0;
-  for (let i = 0; i < text.length; i++) {
-    sum += text.charCodeAt(i);
-  }
-  return COLOR[sum % COLOR.length];
-};
-
 const RuleItem = (props: Props) => {
   const { index, value } = props;
 
   return (
-    <Item sx={{ borderBottom: "1px solid var(--divider-color)" }}>
-      <Typography
-        color="text.secondary"
-        variant="body2"
-        sx={{ lineHeight: 2, minWidth: 30, mr: 2.25, textAlign: "center" }}
-      >
+    // Корневой элемент, стилизованный с помощью Tailwind
+    <div className="flex p-4 border-b border-border">
+      {/* Номер правила */}
+      <p className="w-10 text-center text-sm text-muted-foreground mr-4 pt-0.5">
         {index}
-      </Typography>
+      </p>
 
-      <Box sx={{ userSelect: "text" }}>
-        <Typography component="h6" variant="subtitle1" color="text.primary">
+      {/* Основной контент */}
+      <div className="flex-1">
+        {/* Полезная нагрузка (условие правила) */}
+        <p className="font-semibold text-sm break-all">
           {value.payload || "-"}
-        </Typography>
+        </p>
 
-        <Typography
-          component="span"
-          variant="body2"
-          color="text.secondary"
-          sx={{ mr: 3, minWidth: 120, display: "inline-block" }}
-        >
-          {value.type}
-        </Typography>
-
-        <Typography
-          component="span"
-          variant="body2"
-          color={parseColor(value.proxy)}
-        >
-          {value.proxy}
-        </Typography>
-      </Box>
-    </Item>
+        {/* Нижняя строка с типом правила и названием прокси */}
+        <div className="flex items-center text-xs mt-1.5">
+          <p className="text-muted-foreground w-32 mr-4">{value.type}</p>
+          <p className={cn("font-medium", getProxyColorClass(value.proxy))}>
+            {value.proxy}
+          </p>
+        </div>
+      </div>
+    </div>
   );
 };