FIX #29

2026-08-20 23:03:44 +08:00 · 2026-08-16 15:16:45 +08:00
parent 505ee1eac0
commit ae3a2a6eea
12 changed files with 605 additions and 43 deletions
@@ -0,0 +1,126 @@
+import { SearchRegular } from "@fluentui/react-icons";
+import { useEffect, useMemo, useState } from "react";
+import type { Country, CountryRule, UpstreamProxy } from "../../types";
+import { Button, EmptyState, Input, Modal, Select } from "../ui";
+import { useI18n } from "../../lib/i18n";
+
+export interface CountryRulesDialogProps {
+  open: boolean;
+  proxies: UpstreamProxy[];
+  countries: Country[];
+  rules: CountryRule[];
+  busy: boolean;
+  onSave: (assignments: Record<string, string>) => void;
+  onClose: () => void;
+}
+
+export function CountryRulesDialog(props: CountryRulesDialogProps) {
+  const { t, lang } = useI18n();
+  const { open, proxies, countries, rules, busy, onSave, onClose } = props;
+  const [query, setQuery] = useState("");
+  const [assignments, setAssignments] = useState<Record<string, string>>({});
+  const regionNames = useMemo(() => {
+    try {
+      return new Intl.DisplayNames([lang === "zh" ? "zh-CN" : "en"], { type: "region" });
+    } catch {
+      return null;
+    }
+  }, [lang]);
+  const countryLabel = (country: Country) => regionNames?.of(country.countryCode) || country.countryName || country.countryCode;
+  const proxyOptions = useMemo(() => [
+    { value: "", label: t("直连") },
+    ...proxies.map((proxy) => ({
+      value: proxy.id,
+      label: proxy.enabled ? (proxy.name || proxy.id) : `${proxy.name || proxy.id}（${t("已禁用")}）`,
+      disabled: !proxy.enabled,
+    })),
+  ], [proxies, t, lang]);
+
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setAssignments({});
+      return;
+    }
+    setAssignments(Object.fromEntries(rules.filter((rule) => rule.enabled).map((rule) => [rule.countryCode, rule.upstreamProxyId])));
+    // Sample rules only when opening. Polling must not discard in-progress edits.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLocaleLowerCase();
+    return [...countries]
+      .sort((a, b) => countryLabel(a).localeCompare(countryLabel(b), lang === "zh" ? "zh-CN" : "en"))
+      .filter((country) => {
+        if (!needle) return true;
+        return [country.countryCode, country.countryName, countryLabel(country), ...country.mccs]
+          .some((value) => String(value || "").toLocaleLowerCase().includes(needle));
+      });
+  }, [countries, query, lang, regionNames]);
+
+  const configuredCount = Object.values(assignments).filter(Boolean).length;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={t("MCC 国家规则")}
+      width="max-w-5xl"
+      footer={(
+        <>
+          <Button onClick={onClose} disabled={busy}>{t("取消")}</Button>
+          <Button variant="primary" loading={busy} onClick={() => onSave(assignments)}>{t("保存规则")}</Button>
+        </>
+      )}
+    >
+      <div className="space-y-4 pb-1">
+        <div className="rounded-lg border border-sky-200/70 bg-sky-50 px-3 py-2 text-xs leading-5 text-sky-800 dark:border-sky-800/50 dark:bg-sky-900/20 dark:text-sky-200">
+          {t("为每个国家的 MCC 选择代理。未配置时直连；已有 ICCID 绑定始终优先，首次命中国家规则后会生成独立的 ICCID 绑定。")}
+        </div>
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="text-xs text-gray-500">{configuredCount} {t("个国家规则")}</div>
+          <Input
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={t("搜索国家、地区代码或 MCC")}
+            prefix={<SearchRegular />}
+            className="w-full sm:w-72"
+          />
+        </div>
+        <div className="overflow-hidden rounded-xl border border-gray-100 dark:border-white/10">
+          <div className="max-h-[55vh] overflow-auto">
+            <table className="w-full min-w-[680px] text-left text-sm">
+              <thead className="sticky top-0 z-10 bg-gray-50 text-xs uppercase tracking-wide text-gray-500 dark:bg-[#202027]">
+                <tr>
+                  <th className="px-4 py-3">{t("国家 / 地区")}</th>
+                  <th className="px-4 py-3">MCC</th>
+                  <th className="w-72 px-4 py-3">{t("规则")}</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100 dark:divide-white/10">
+                {filtered.map((country) => (
+                  <tr key={country.countryCode} className="hover:bg-sky-50/40 dark:hover:bg-sky-500/[0.04]">
+                    <td className="px-4 py-3">
+                      <span className="font-medium">{countryLabel(country)}</span>
+                      <span className="ml-2 font-mono text-xs text-gray-400">{country.countryCode}</span>
+                    </td>
+                    <td className="px-4 py-3 font-mono text-xs text-gray-600 dark:text-gray-300">{country.mccs.join(", ")}</td>
+                    <td className="px-4 py-2">
+                      <Select
+                        value={assignments[country.countryCode] || ""}
+                        options={proxyOptions}
+                        disabled={busy}
+                        onChange={(value) => setAssignments((current) => ({ ...current, [country.countryCode]: value }))}
+                      />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          {filtered.length === 0 ? <EmptyState title={t("没有匹配的国家或 MCC")} /> : null}
+        </div>
+      </div>
+    </Modal>
+  );
+}
@@ -1,4 +1,4 @@
-import { DeleteRegular, DesktopRegular, EditRegular, GlobeRegular } from "@fluentui/react-icons";
+import { DeleteRegular, DesktopRegular, EditRegular, GlobeRegular, PauseRegular, PlayRegular } from "@fluentui/react-icons";
 import type { UpstreamProxy } from "../../types";
 import { Button, Tag } from "../ui";
 import type { LoadError, UpstreamRow } from "./shared";
@@ -12,9 +12,11 @@ export interface UpstreamSectionProps {
  onEdit: (proxy: UpstreamProxy) => void;
  onDelete: (proxy: UpstreamProxy) => void;
  onOpenBindings: (proxy: UpstreamProxy) => void;
+  onToggle: (proxy: UpstreamProxy) => void;
+  toggleBusyId?: string;
 }

-export function UpstreamSection({ rows, loading, error, onRetry, onEdit, onDelete, onOpenBindings }: UpstreamSectionProps) {
+export function UpstreamSection({ rows, loading, error, onRetry, onEdit, onDelete, onOpenBindings, onToggle, toggleBusyId }: UpstreamSectionProps) {
  const { t } = useI18n();
  return (
    <div className="ui-card overflow-hidden">
@@ -30,15 +32,14 @@ export function UpstreamSection({ rows, loading, error, onRetry, onEdit, onDelet
        </div>
      ) : null}
      <div className="overflow-x-auto">
-        <table className="w-full min-w-[900px] text-left text-sm">
+        <table className="w-full min-w-[760px] text-left text-sm">
          <thead className="border-b border-gray-100 bg-gray-50/70 text-xs uppercase tracking-wide text-gray-500 dark:border-white/10 dark:bg-white/[0.025]">
            <tr>
              <th className="px-4 py-3">{t("名称")}</th>
-              <th className="px-4 py-3">{t("协议")}</th>
              <th className="px-4 py-3">{t("地址")}</th>
-              <th className="px-4 py-3">{t("鉴权")}</th>
              <th className="px-4 py-3">{t("状态")}</th>
              <th className="px-4 py-3">{t("SIM / Profile 绑定")}</th>
+              <th className="px-4 py-3">{t("国家规则")}</th>
              <th className="px-4 py-3 text-right">{t("操作")}</th>
            </tr>
          </thead>
@@ -46,18 +47,28 @@ export function UpstreamSection({ rows, loading, error, onRetry, onEdit, onDelet
            {rows.map((row) => (
              <tr key={row.id} className="hover:bg-sky-50/40 dark:hover:bg-sky-500/[0.04]">
                <td className="px-4 py-3 font-semibold">{row.name || row.id}</td>
-                <td className="px-4 py-3"><Tag type="primary">SOCKS5</Tag></td>
                <td className="px-4 py-3 font-mono text-xs">{row.addr}</td>
-                <td className="px-4 py-3">{row.username || t("无")}</td>
                <td className="px-4 py-3"><Tag type={row.enabled ? "success" : "info"}>{row.enabled ? t("已启用") : t("已禁用")}</Tag></td>
                <td className="px-4 py-3">
-                  <div className="inline-flex items-center gap-1 rounded border border-indigo-200/60 bg-indigo-50 px-2 py-0.5 text-[11px] font-medium text-indigo-600 dark:border-indigo-800/40 dark:bg-indigo-900/20 dark:text-indigo-400">
-                    <DesktopRegular className="text-[14px]" />
-                    <span>{row.bindingCount} {t("个 SIM / Profile")}</span>
-                  </div>
+                  {row.bindingCount}
+                </td>
+                <td className="px-4 py-3">
+                  {row.countryNames.length ? (
+                    <div className="flex max-w-sm flex-wrap gap-1">
+                      {row.countryNames.map((countryName) => <Tag key={countryName} type="primary">{countryName}</Tag>)}
+                    </div>
+                  ) : <span className="text-gray-400">—</span>}
                </td>
                <td className="px-4 py-3">
                  <div className="flex justify-end gap-2">
+                    <Button
+                      size="small"
+                      variant={row.enabled ? "warning" : "success"}
+                      plain
+                      icon={row.enabled ? <PauseRegular /> : <PlayRegular />}
+                      loading={toggleBusyId === row.id}
+                      onClick={() => onToggle(row)}
+                    >{row.enabled ? t("禁用") : t("启用")}</Button>
                    <Button size="small" icon={<DesktopRegular />} onClick={() => onOpenBindings(row)}>{t("SIM / Profile 绑定")}</Button>
                    <Button size="small" icon={<EditRegular />} onClick={() => onEdit(row)}>{t("编辑")}</Button>
                    <Button size="small" variant="danger" plain icon={<DeleteRegular />} onClick={() => onDelete(row)}>{t("删除")}</Button>
@@ -72,7 +83,7 @@ export function UpstreamSection({ rows, loading, error, onRetry, onEdit, onDelet
        <div className="flex flex-col items-center justify-center px-6 py-16 text-center text-gray-400">
          <GlobeRegular className="mb-3 text-4xl" />
          <div className="text-sm">{t("暂无上游代理")}</div>
-          <div className="mt-1 text-xs">{t("点击“新增代理”创建 SOCKS5 上游代理，再按 ICCID 绑定实体 SIM 或 eSIM Profile；未绑定的卡默认直连。")}</div>
+          <div className="mt-1 text-xs">{t("点击“新增代理”创建 SOCKS5 上游代理，再配置国家规则或 ICCID 绑定；未匹配的卡默认直连。")}</div>
        </div>
      ) : null}
      {loading ? <div className="px-6 py-16 text-center text-sm text-gray-400">{t("加载中...")}</div> : null}
@@ -29,6 +29,7 @@ export interface UpstreamProbeResult {

 export interface UpstreamRow extends UpstreamProxy {
  bindingCount: number;
+  countryNames: string[];
 }

 export function ipv6Hint(): string {