Merge pull request #37 from SubBoost/ryan/dev

Polish proxy group layout

Author: Ryson-32

packages/ui/src/product/converter/advanced-mode/sections/proxy-group-advanced-panel.test.ts

@@ -122,6 +122,7 @@ describe("ProxyGroupAdvancedPanel", () => {
     expect(html).toContain("DIRECT");
     expect(html).toContain("rules-content");
     expect(html).toContain("还没有分流规则");
+    expect(html).toContain("max-h-52 space-y-1.5 overflow-y-auto pr-1 custom-scrollbar");
     expect(mocks.inputs.map((input) => input.value)).toEqual(["Source", "Japan"]);
 
     mocks.inputs[0].onChange({ target: { value: "IEPL" } });
@@ -198,6 +199,55 @@ describe("ProxyGroupAdvancedPanel", () => {
     expect(html).toContain("暂无已启用的节点或代理组");
   });
 
+  it("previews enabled members for a disabled built-in proxy group", () => {
+    mocks.store = {
+      ...mocks.store,
+      enabledProxyGroups: [],
+      customProxyGroups: [],
+      proxyGroupAdvanced: {},
+    };
+
+    const html = renderToStaticMarkup(
+      React.createElement(ProxyGroupAdvancedPanel, {
+        target: { kind: "module", id: "auto", name: "⚡ Auto" },
+        advanced: {},
+        onChange: vi.fn(),
+        rulesCount: 0,
+        rulesContent: null,
+      }),
+    );
+
+    expect(html).toContain("US Source");
+    expect(html).toContain("Japan Source");
+    expect(html).toContain("max-h-52 overflow-y-auto pr-1 custom-scrollbar flex flex-wrap gap-1.5");
+    expect(html).not.toContain("暂无已启用的节点或代理组");
+  });
+
+  it("previews enabled members for a disabled custom proxy group", () => {
+    mocks.store = {
+      ...mocks.store,
+      enabledProxyGroups: [],
+      customProxyGroups: [
+        { id: "media", name: "Media", emoji: "", groupType: "select", enabled: false },
+      ],
+      proxyGroupAdvanced: {},
+    };
+
+    const html = renderToStaticMarkup(
+      React.createElement(ProxyGroupAdvancedPanel, {
+        target: { kind: "custom", id: "media", name: "Media" },
+        advanced: {},
+        onChange: vi.fn(),
+        rulesCount: 0,
+        rulesContent: null,
+      }),
+    );
+
+    expect(html).toContain("US Source");
+    expect(html).toContain("Japan Source");
+    expect(html).not.toContain("暂无已启用的节点或代理组");
+  });
+
   it("normalizes advanced member helpers without rendering the panel", () => {
     const nodes = [node("US Source")];
     const moduleNames = { auto: "Auto", select: "Select" };

packages/ui/src/product/converter/advanced-mode/sections/proxy-group-advanced-panel.tsx

@@ -182,6 +182,16 @@ export function ProxyGroupAdvancedPanel({
     () => customProxyGroups.filter((group) => group.enabled !== false),
     [customProxyGroups],
   );
+  const previewEnabledProxyGroups = React.useMemo(() => {
+    if (target.kind !== "module" || enabledProxyGroups.includes(target.id)) return enabledProxyGroups;
+    return [...enabledProxyGroups, target.id];
+  }, [enabledProxyGroups, target.id, target.kind]);
+  const previewCustomProxyGroups = React.useMemo(() => {
+    if (target.kind !== "custom") return customProxyGroups;
+    return customProxyGroups.map((group) =>
+      group.id === target.id && group.enabled === false ? { ...group, enabled: true } : group,
+    );
+  }, [customProxyGroups, target.id, target.kind]);
 
   const activeNodes = React.useMemo(
     () => nodes.filter((node) => !isSubscriptionInfoNodeName(node.name)),
@@ -202,11 +212,11 @@ export function ProxyGroupAdvancedPanel({
     if (nodes.length === 0) return [];
     const generated = generateProxyGroups({
       nodes,
-      enabledModules: enabledProxyGroups,
+      enabledModules: previewEnabledProxyGroups,
       ruleProviderBaseUrl,
       testUrl,
       testInterval,
-      customProxyGroups: activeCustomProxyGroups,
+      customProxyGroups: previewCustomProxyGroups,
       customRuleSets,
       proxyGroupAdvanced,
       builtinRuleEdits,
@@ -215,11 +225,11 @@ export function ProxyGroupAdvancedPanel({
     return generated.find((group) => group.name === target.name)?.proxies ?? [];
   }, [
     nodes,
-    enabledProxyGroups,
+    previewEnabledProxyGroups,
     ruleProviderBaseUrl,
     testUrl,
     testInterval,
-    activeCustomProxyGroups,
+    previewCustomProxyGroups,
     customRuleSets,
     proxyGroupAdvanced,
     builtinRuleEdits,
@@ -325,7 +335,7 @@ export function ProxyGroupAdvancedPanel({
       <div className="grid gap-0 md:grid-cols-[1fr_1fr_1fr]">
         <div className="p-3">
           <div className={ADVANCED_PANEL_TITLE_CLASS}>导入源</div>
-          <div className="space-y-1.5">
+          <div className="max-h-52 space-y-1.5 overflow-y-auto pr-1 custom-scrollbar">
             {sourceOptions.length === 0 ? (
               <div className="text-[11px] text-white/35">暂无可匹配的导入源</div>
             ) : (
@@ -453,7 +463,7 @@ export function ProxyGroupAdvancedPanel({
           {excludedMembers.length === 0 ? (
             <div className="text-[11px] text-white/35">暂无未启用的节点或代理组</div>
           ) : (
-            <div className="flex flex-wrap gap-1.5">
+            <div className="max-h-52 overflow-y-auto pr-1 custom-scrollbar flex flex-wrap gap-1.5">
               {excludedMembers.map((member) => {
                 return (
                   <button

packages/ui/src/product/converter/advanced-mode/sections/proxy-groups-added-rule-sets.test.ts

@@ -323,6 +323,7 @@ describe("ProxyGroupsAddedRuleSets", () => {
     expect(html).toContain(RULE_EDIT_PRIMARY_FIELD_CLASS);
     expect(html).toContain(RULE_EDIT_TRAILING_CONTROLS_CLASS);
     expect(html).toContain(RULE_EDIT_ACTIONS_CLASS);
+    expect(html).toContain("proxy-group-rule-no-resolve-label");
     expect(mocks.captures.inputs).toHaveLength(0);
     expect(mocks.captures.selects).toHaveLength(1);
     expect(RULE_TARGET_SELECT_TRIGGER_CLASS).toContain("w-[120px]");

packages/ui/src/product/converter/advanced-mode/sections/proxy-groups-added-rule-sets.tsx

@@ -332,7 +332,7 @@ export function ProxyGroupsAddedRuleSets({
                           )
                         }
                       />
-                      <span className="text-[10px] text-white/50">
+                      <span className="proxy-group-rule-no-resolve-label text-[10px] text-white/50">
                         no-resolve
                       </span>
                     </div>

packages/ui/src/product/converter/advanced-mode/sections/proxy-groups-categories.test.ts

@@ -263,7 +263,12 @@ describe("ProxyGroupsCategories", () => {
     renderCategories({ 0: new Set(["core"]) });
 
     expect(mocks.captures.inputs).toHaveLength(0);
-    expect(renderCategories({ 0: new Set(["core"]) }).html).toContain("https://rules.example/base/");
+    const html = renderCategories({ 0: new Set(["core"]) }).html;
+    expect(html).toContain("https://rules.example/base/");
+    expect(html).toContain("grid-cols-[minmax(0,1fr)_96px]");
+    expect(html).not.toContain("md:grid-cols-[minmax(0,1fr)_96px]");
+    expect(html).toContain("min-w-0 space-y-1");
+    expect(html).toContain("h-9 w-full");
     expect(mocks.store.setRuleProviderBaseUrl).not.toHaveBeenCalled();
 
     expect(mocks.captures.moduleCards).toHaveLength(1);

packages/ui/src/product/converter/advanced-mode/sections/proxy-groups-categories.tsx

@@ -290,8 +290,8 @@ export function ProxyGroupsCategories() {
 
   return (
     <>
-      <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_96px]">
-        <div className="space-y-1">
+      <div className="grid grid-cols-[minmax(0,1fr)_96px] gap-3">
+        <div className="min-w-0 space-y-1">
           <div className={PROXY_GROUP_SECTION_LABEL_ROW_CLASS}>
             <label className={PROXY_GROUP_SECTION_LABEL_CLASS}>规则集 URL</label>
           </div>
@@ -302,11 +302,11 @@ export function ProxyGroupsCategories() {
             <span className="block truncate">{ruleProviderBaseUrl}</span>
           </div>
         </div>
-        <div className="space-y-1">
+        <div className="min-w-0 space-y-1">
           <div className={PROXY_GROUP_SECTION_LABEL_ROW_CLASS}>
             <label className="text-xs text-amber-300">高级模式</label>
           </div>
-          <div className="flex h-9 items-center justify-center gap-1 rounded-md border border-white/10 bg-white/5 px-2">
+          <div className="flex h-9 w-full items-center justify-center gap-1 rounded-md border border-white/10 bg-white/5 px-2">
             <span className="text-[10px] text-white/65">
               {proxyGroupAdvancedModeEnabled ? "已开启" : "未开启"}
             </span>

packages/ui/src/product/converter/advanced-mode/sections/proxy-groups-custom-rules.test.ts

@@ -242,6 +242,7 @@ describe("ProxyGroupsCustomRules", () => {
     expect(html).toContain(RULE_HEADER_ROW_CLASS);
     expect(html).toContain(RULE_EDIT_PRIMARY_GROUP_CLASS);
     expect(html).toContain(RULE_EDIT_TRAILING_CONTROLS_CLASS);
+    expect(html).toContain("proxy-group-rule-no-resolve-label");
     expect(RULE_EDIT_TRAILING_CONTROLS_CLASS).toContain(
       "proxy-group-custom-rule-editor-trailing",
     );

packages/ui/src/product/converter/advanced-mode/sections/proxy-groups-custom-rules.tsx

@@ -296,7 +296,7 @@ export function ProxyGroupsCustomRules() {
                 checked={newRuleNoResolve}
                 onCheckedChange={setNewRuleNoResolve}
               />
-              <span className="text-[10px] text-white/50">no-resolve</span>
+              <span className="proxy-group-rule-no-resolve-label text-[10px] text-white/50">no-resolve</span>
             </div>
             <Button
               type="button"
@@ -414,7 +414,7 @@ export function ProxyGroupsCustomRules() {
                             )
                           }
                         />
-                        <span className="text-[10px] text-white/50">
+                        <span className="proxy-group-rule-no-resolve-label text-[10px] text-white/50">
                           no-resolve
                         </span>
                       </div>