feat(forward): support tunnel-group collapse and ordering in full mode (#243)

## Summary
- add collapsible tunnel groups in the forward page when compact mode is
disabled
- add drag-and-drop ordering for tunnel groups within each user section
in full mode
- persist group order/collapse by current login user (admins: local +
global config, normal users: local only)

## Testing
- npm run build (vite-frontend)

vite-frontend/src/pages/config.tsx

@@ -117,6 +117,12 @@ const CONFIG_ITEMS: ConfigItem[] = [
     description: "用于浏览器标签页图标，上传后会自动转换为 PNG 并持久化保存",
     type: "input",
   },
+  {
+    key: "forward_compact_mode",
+    label: "转发页面精简模式",
+    description: "开启后，转发页面列表使用 2.1.6-alpha8 样式（全局配置）",
+    type: "switch",
+  },
   {
     key: "captcha_enabled",
     label: "启用验证码",
@@ -167,6 +173,7 @@ const getInitialConfigs = (): Record<string, string> => {
     "captcha_enabled",
     "cloudflare_site_key",
     "cloudflare_secret_key",
+    "forward_compact_mode",
     "ip",
     "panel_domain",
     "app_logo",

vite-frontend/src/pages/settings.tsx

@@ -6,12 +6,15 @@ import { Input } from "@/shadcn-bridge/heroui/input";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Card, CardBody } from "@/shadcn-bridge/heroui/card";
 import { Select, SelectItem } from "@/shadcn-bridge/heroui/select";
+import { Switch } from "@/shadcn-bridge/heroui/switch";
 import { reinitializeBaseURL } from "@/api/network";
+import { getConfigByName, updateConfig } from "@/api";
 import {
   type UpdateReleaseChannel,
   getUpdateReleaseChannel,
   setUpdateReleaseChannel,
 } from "@/utils/version-update";
+import { isAdmin } from "@/utils/auth";
 import {
   getPanelAddresses,
   savePanelAddress,
@@ -26,6 +29,8 @@ interface PanelAddress {
   inx: boolean;
 }
 
+const FORWARD_COMPACT_MODE_CONFIG_KEY = "forward_compact_mode";
+
 export const SettingsPage = () => {
   const navigate = useNavigate();
   const [panelAddresses, setPanelAddresses] = useState<PanelAddress[]>([]);
@@ -34,6 +39,11 @@ export const SettingsPage = () => {
   const [updateChannel, setUpdateChannel] = useState<UpdateReleaseChannel>(
     getUpdateReleaseChannel(),
   );
+  const [forwardCompactMode, setForwardCompactMode] = useState(false);
+  const [forwardCompactModeSaving, setForwardCompactModeSaving] =
+    useState(false);
+
+  const admin = isAdmin();
 
   const setPanelAddressesFunc = (newAddress: PanelAddress[]) => {
     setPanelAddresses(newAddress);
@@ -86,8 +96,57 @@ export const SettingsPage = () => {
   // 页面加载时获取数据
   useEffect(() => {
     loadPanelAddresses();
+    loadForwardCompactMode();
   }, []);
 
+  const loadForwardCompactMode = async () => {
+    try {
+      const res = await getConfigByName(FORWARD_COMPACT_MODE_CONFIG_KEY);
+      const enabled =
+        res.code === 0 &&
+        typeof res.data?.value === "string" &&
+        res.data.value === "true";
+
+      setForwardCompactMode(enabled);
+    } catch {
+      setForwardCompactMode(false);
+    }
+  };
+
+  const handleForwardCompactModeChange = async (enabled: boolean) => {
+    if (!admin || forwardCompactModeSaving) {
+      return;
+    }
+
+    const previous = forwardCompactMode;
+
+    setForwardCompactMode(enabled);
+    setForwardCompactModeSaving(true);
+    try {
+      const response = await updateConfig(
+        FORWARD_COMPACT_MODE_CONFIG_KEY,
+        enabled ? "true" : "false",
+      );
+
+      if (response.code === 0) {
+        toast.success(`转发页面精简模式已${enabled ? "开启" : "关闭"}`);
+        window.dispatchEvent(
+          new CustomEvent("forwardCompactModeChanged", {
+            detail: { enabled },
+          }),
+        );
+      } else {
+        setForwardCompactMode(previous);
+        toast.error(response.msg || "保存精简模式失败");
+      }
+    } catch {
+      setForwardCompactMode(previous);
+      toast.error("保存精简模式失败");
+    } finally {
+      setForwardCompactModeSaving(false);
+    }
+  };
+
   const handleUpdateChannelChange = (channel: UpdateReleaseChannel) => {
     setUpdateChannel(channel);
     setUpdateReleaseChannel(channel);
@@ -164,6 +223,37 @@ export const SettingsPage = () => {
             </CardBody>
           </Card>
 
+          <Card className="border border-gray-200 dark:border-gray-700">
+            <CardBody className="p-6">
+              <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+                显示设置
+              </h2>
+              <div className="rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3">
+                <div className="flex items-center justify-between gap-4">
+                  <div>
+                    <p className="text-sm font-medium text-gray-900 dark:text-white">
+                      转发页面精简模式
+                    </p>
+                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                      开启后，转发页面列表使用 2.1.6-alpha8 样式。
+                    </p>
+                  </div>
+                  <Switch
+                    color="primary"
+                    isDisabled={!admin || forwardCompactModeSaving}
+                    isSelected={forwardCompactMode}
+                    onValueChange={handleForwardCompactModeChange}
+                  />
+                </div>
+                {!admin && (
+                  <p className="mt-2 text-xs text-amber-600 dark:text-amber-400">
+                    仅管理员可修改该全局配置。
+                  </p>
+                )}
+              </div>
+            </CardBody>
+          </Card>
+
           {/* 添加新地址 */}
           <Card className="border border-gray-200 dark:border-gray-700">
             <CardBody className="p-6">