Update from Vibe Studio

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/BlockCheckbox.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type BlockCheckboxProps = {
+    value: string;
+    onChange: (key: string) => void;
+    list?: {
+        title: string;
+        key: string;
+        icon?: React.ReactNode;
+    }[];
+    configType: string;
+    prefixCls: string;
+    hashId: string;
+};
+declare const BlockCheckbox: React.FC<BlockCheckboxProps>;
+export { BlockCheckbox };

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/BlockCheckbox.js

@@ -0,0 +1,44 @@
+import { CheckOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BlockCheckbox = function BlockCheckbox(_ref) {
+  var value = _ref.value,
+    configType = _ref.configType,
+    onChange = _ref.onChange,
+    list = _ref.list,
+    prefixCls = _ref.prefixCls,
+    hashId = _ref.hashId;
+  var baseClassName = "".concat(prefixCls, "-block-checkbox");
+  var dom = useMemo(function () {
+    var domList = (list || []).map(function (item) {
+      return /*#__PURE__*/_jsx(Tooltip, {
+        title: item.title,
+        children: /*#__PURE__*/_jsxs("div", {
+          className: classNames(hashId, "".concat(baseClassName, "-item"), "".concat(baseClassName, "-item-").concat(item.key), "".concat(baseClassName, "-").concat(configType, "-item")),
+          onClick: function onClick() {
+            return onChange(item.key);
+          },
+          children: [/*#__PURE__*/_jsx(CheckOutlined, {
+            className: "".concat(baseClassName, "-selectIcon ").concat(hashId).trim(),
+            style: {
+              display: value === item.key ? 'block' : 'none'
+            }
+          }), item !== null && item !== void 0 && item.icon ? /*#__PURE__*/_jsx("div", {
+            className: "".concat(baseClassName, "-icon ").concat(hashId).trim(),
+            children: item.icon
+          }) : null]
+        })
+      }, item.key);
+    });
+    return domList;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, list === null || list === void 0 ? void 0 : list.length, onChange]);
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(baseClassName, hashId),
+    children: dom
+  });
+};
+export { BlockCheckbox };

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/LayoutChange.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ProSettings } from '../../defaultSettings';
+import type { SettingItemProps } from './index';
+export declare const renderLayoutSettingItem: (item: SettingItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayoutSetting: React.FC<{
+    settings: Partial<ProSettings>;
+    changeSetting: (key: string, value: any, hideLoading?: boolean) => void;
+    hashId: string;
+    prefixCls: string;
+}>;
+export { LayoutSetting };

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/LayoutChange.js

@@ -0,0 +1,117 @@
+import { List, Select, Switch, Tooltip } from 'antd';
+import React from 'react';
+import { defaultSettings } from "../../defaultSettings";
+import { getFormatMessage } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var renderLayoutSettingItem = function renderLayoutSettingItem(item) {
+  var action = /*#__PURE__*/React.cloneElement(item.action, {
+    disabled: item.disabled
+  });
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: item.disabled ? item.disabledReason : '',
+    placement: "left",
+    children: /*#__PURE__*/_jsx(List.Item, {
+      actions: [action],
+      children: /*#__PURE__*/_jsx("span", {
+        style: {
+          opacity: item.disabled ? 0.5 : 1
+        },
+        children: item.title
+      })
+    })
+  });
+};
+var LayoutSetting = function LayoutSetting(_ref) {
+  var settings = _ref.settings,
+    prefixCls = _ref.prefixCls,
+    changeSetting = _ref.changeSetting,
+    hashId = _ref.hashId;
+  var formatMessage = getFormatMessage();
+  var _ref2 = settings || defaultSettings,
+    contentWidth = _ref2.contentWidth,
+    splitMenus = _ref2.splitMenus,
+    fixedHeader = _ref2.fixedHeader,
+    layout = _ref2.layout,
+    fixSiderbar = _ref2.fixSiderbar;
+  return /*#__PURE__*/_jsx(List, {
+    className: "".concat(prefixCls, "-list ").concat(hashId).trim(),
+    split: false,
+    dataSource: [{
+      title: formatMessage({
+        id: 'app.setting.content-width',
+        defaultMessage: 'Content Width'
+      }),
+      action: /*#__PURE__*/_jsxs(Select, {
+        value: contentWidth || 'Fixed',
+        size: "small",
+        className: "content-width ".concat(hashId).trim(),
+        onSelect: function onSelect(value) {
+          changeSetting('contentWidth', value);
+        },
+        style: {
+          width: 80
+        },
+        children: [layout === 'side' ? null : /*#__PURE__*/_jsx(Select.Option, {
+          value: "Fixed",
+          children: formatMessage({
+            id: 'app.setting.content-width.fixed',
+            defaultMessage: 'Fixed'
+          })
+        }), /*#__PURE__*/_jsx(Select.Option, {
+          value: "Fluid",
+          children: formatMessage({
+            id: 'app.setting.content-width.fluid',
+            defaultMessage: 'Fluid'
+          })
+        })]
+      })
+    }, {
+      title: formatMessage({
+        id: 'app.setting.fixedheader',
+        defaultMessage: 'Fixed Header'
+      }),
+      action: /*#__PURE__*/_jsx(Switch, {
+        size: "small",
+        className: "fixed-header",
+        checked: !!fixedHeader,
+        onChange: function onChange(checked) {
+          changeSetting('fixedHeader', checked);
+        }
+      })
+    }, {
+      title: formatMessage({
+        id: 'app.setting.fixedsidebar',
+        defaultMessage: 'Fixed Sidebar'
+      }),
+      disabled: layout === 'top',
+      disabledReason: formatMessage({
+        id: 'app.setting.fixedsidebar.hint',
+        defaultMessage: 'Works on Side Menu Layout'
+      }),
+      action: /*#__PURE__*/_jsx(Switch, {
+        size: "small",
+        className: "fix-siderbar",
+        checked: !!fixSiderbar,
+        onChange: function onChange(checked) {
+          return changeSetting('fixSiderbar', checked);
+        }
+      })
+    }, {
+      title: formatMessage({
+        id: 'app.setting.splitMenus'
+      }),
+      disabled: layout !== 'mix',
+      action: /*#__PURE__*/_jsx(Switch, {
+        size: "small",
+        checked: !!splitMenus,
+        className: "split-menus",
+        onChange: function onChange(checked) {
+          changeSetting('splitMenus', checked);
+        }
+      })
+    }],
+    renderItem: renderLayoutSettingItem
+  });
+};
+export { LayoutSetting };

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/RegionalChange.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ProSettings } from '../../defaultSettings';
+declare const RegionalSetting: React.FC<{
+    settings: Partial<ProSettings>;
+    changeSetting: (key: string, value: any, hideLoading?: boolean) => void;
+    hashId: string;
+    prefixCls: string;
+}>;
+export { RegionalSetting };

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/RegionalChange.js

@@ -0,0 +1,34 @@
+import { List, Switch } from 'antd';
+import React from 'react';
+import { renderLayoutSettingItem } from "./LayoutChange";
+import { getFormatMessage } from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+var RegionalSetting = function RegionalSetting(_ref) {
+  var settings = _ref.settings,
+    prefixCls = _ref.prefixCls,
+    changeSetting = _ref.changeSetting,
+    hashId = _ref.hashId;
+  var formatMessage = getFormatMessage();
+  var regionalSetting = ['header', 'footer', 'menu', 'menuHeader'];
+  return /*#__PURE__*/_jsx(List, {
+    className: "".concat(prefixCls, "-list ").concat(hashId).trim(),
+    split: false,
+    renderItem: renderLayoutSettingItem,
+    dataSource: regionalSetting.map(function (key) {
+      return {
+        title: formatMessage({
+          id: "app.setting.regionalsettings.".concat(key)
+        }),
+        action: /*#__PURE__*/_jsx(Switch, {
+          size: "small",
+          className: "regional-".concat(key, " ").concat(hashId).trim(),
+          checked: settings["".concat(key, "Render")] || settings["".concat(key, "Render")] === undefined,
+          onChange: function onChange(checked) {
+            return changeSetting("".concat(key, "Render"), checked === true ? undefined : false);
+          }
+        })
+      };
+    })
+  });
+};
+export { RegionalSetting };

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/ThemeColor.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export type TagProps = {
+    color: string;
+    check: boolean;
+    className?: string;
+    onClick?: () => void;
+};
+export type ThemeColorProps = {
+    colorList?: {
+        key: string;
+        color: string;
+        title?: string;
+    }[];
+    prefixCls: string;
+    value: string;
+    onChange: (color: string) => void;
+    formatMessage: (data: {
+        id: any;
+        defaultMessage?: string;
+    }) => string;
+    hashId: string;
+};
+declare const ThemeColor: React.ForwardRefRenderFunction<HTMLDivElement, ThemeColorProps>;
+export { ThemeColor };

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/ThemeColor.js

@@ -0,0 +1,54 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["color", "check"];
+import { CheckOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var color = _ref.color,
+    check = _ref.check,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
+    style: {
+      backgroundColor: color
+    },
+    ref: ref,
+    children: check ? /*#__PURE__*/_jsx(CheckOutlined, {}) : ''
+  }));
+});
+var ThemeColor = function ThemeColor(_ref2) {
+  var value = _ref2.value,
+    colorList = _ref2.colorList,
+    onChange = _ref2.onChange,
+    prefixCls = _ref2.prefixCls,
+    formatMessage = _ref2.formatMessage,
+    hashId = _ref2.hashId;
+  if (!colorList || (colorList === null || colorList === void 0 ? void 0 : colorList.length) < 1) {
+    return null;
+  }
+  var baseClassName = "".concat(prefixCls, "-theme-color");
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(baseClassName, " ").concat(hashId).trim(),
+    children: colorList === null || colorList === void 0 ? void 0 : colorList.map(function (_ref3) {
+      var key = _ref3.key,
+        color = _ref3.color,
+        title = _ref3.title;
+      if (!key) return null;
+      return /*#__PURE__*/_jsx(Tooltip, {
+        title: title !== null && title !== void 0 ? title : formatMessage({
+          id: "app.setting.themecolor.".concat(key)
+        }),
+        children: /*#__PURE__*/_jsx(Tag, {
+          className: "".concat(baseClassName, "-block ").concat(hashId).trim(),
+          color: color,
+          check: value === color,
+          onClick: function onClick() {
+            return onChange && onChange(color);
+          }
+        })
+      }, color);
+    })
+  });
+};
+export { ThemeColor };

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/icon/group.d.ts

@@ -0,0 +1 @@
+export declare function GroupIcon(): import("react/jsx-runtime").JSX.Element;

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/icon/group.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function GroupIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 104 104",
+    children: [/*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsx("rect", {
+        id: "path-1",
+        width: "90",
+        height: "72",
+        x: "0",
+        y: "0",
+        rx: "10"
+      }), /*#__PURE__*/_jsxs("filter", {
+        id: "filter-2",
+        width: "152.2%",
+        height: "165.3%",
+        x: "-26.1%",
+        y: "-27.1%",
+        filterUnits: "objectBoundingBox",
+        children: [/*#__PURE__*/_jsx("feMorphology", {
+          in: "SourceAlpha",
+          radius: "0.25",
+          result: "shadowSpreadOuter1"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dy: "1",
+          in: "shadowSpreadOuter1",
+          result: "shadowOffsetOuter1"
+        }), /*#__PURE__*/_jsx("feGaussianBlur", {
+          in: "shadowOffsetOuter1",
+          result: "shadowBlurOuter1",
+          stdDeviation: "1"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          in: "shadowBlurOuter1",
+          result: "shadowMatrixOuter1",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
+        }), /*#__PURE__*/_jsx("feMorphology", {
+          in: "SourceAlpha",
+          radius: "1",
+          result: "shadowSpreadOuter2"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dy: "2",
+          in: "shadowSpreadOuter2",
+          result: "shadowOffsetOuter2"
+        }), /*#__PURE__*/_jsx("feGaussianBlur", {
+          in: "shadowOffsetOuter2",
+          result: "shadowBlurOuter2",
+          stdDeviation: "4"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          in: "shadowBlurOuter2",
+          result: "shadowMatrixOuter2",
+          values: "0 0 0 0 0.098466735 0 0 0 0 0.0599695403 0 0 0 0 0.0599695403 0 0 0 0.07 0"
+        }), /*#__PURE__*/_jsx("feMorphology", {
+          in: "SourceAlpha",
+          radius: "2",
+          result: "shadowSpreadOuter3"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dy: "4",
+          in: "shadowSpreadOuter3",
+          result: "shadowOffsetOuter3"
+        }), /*#__PURE__*/_jsx("feGaussianBlur", {
+          in: "shadowOffsetOuter3",
+          result: "shadowBlurOuter3",
+          stdDeviation: "8"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          in: "shadowBlurOuter3",
+          result: "shadowMatrixOuter3",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+        }), /*#__PURE__*/_jsxs("feMerge", {
+          children: [/*#__PURE__*/_jsx("feMergeNode", {
+            in: "shadowMatrixOuter1"
+          }), /*#__PURE__*/_jsx("feMergeNode", {
+            in: "shadowMatrixOuter2"
+          }), /*#__PURE__*/_jsx("feMergeNode", {
+            in: "shadowMatrixOuter3"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      stroke: "none",
+      strokeWidth: "1",
+      children: [/*#__PURE__*/_jsxs("g", {
+        children: [/*#__PURE__*/_jsx("use", {
+          fill: "#000",
+          filter: "url(#filter-2)",
+          xlinkHref: "#path-1"
+        }), /*#__PURE__*/_jsx("use", {
+          fill: "#F0F2F5",
+          xlinkHref: "#path-1"
+        })]
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "#FFF",
+        d: "M25 15h65v47c0 5.523-4.477 10-10 10H25V15z"
+      }), /*#__PURE__*/_jsx("path", {
+        stroke: "#E6EAF0",
+        strokeLinecap: "square",
+        d: "M0.5 15.5L90.5 15.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "14",
+        height: "3",
+        x: "4",
+        y: "26",
+        fill: "#D7DDE6",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "9",
+        height: "3",
+        x: "4",
+        y: "32",
+        fill: "#D7DDE6",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "9",
+        height: "3",
+        x: "4",
+        y: "42",
+        fill: "#E6EAF0",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "9",
+        height: "3",
+        x: "4",
+        y: "21",
+        fill: "#E6EAF0",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "9",
+        height: "3",
+        x: "4",
+        y: "53",
+        fill: "#D7DDE6",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "14",
+        height: "3",
+        x: "4",
+        y: "47",
+        fill: "#D7DDE6",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("path", {
+        stroke: "#E6EAF0",
+        strokeLinecap: "square",
+        d: "M25.5 15.5L25.5 72.5"
+      })]
+    })]
+  });
+}

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/icon/sub.d.ts

@@ -0,0 +1 @@
+export declare function SubIcon(): import("react/jsx-runtime").JSX.Element;

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/icon/sub.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function SubIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 104 104",
+    children: [/*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsx("rect", {
+        id: "path-1",
+        width: "90",
+        height: "72",
+        x: "0",
+        y: "0",
+        rx: "10"
+      }), /*#__PURE__*/_jsxs("filter", {
+        id: "filter-2",
+        width: "152.2%",
+        height: "165.3%",
+        x: "-26.1%",
+        y: "-27.1%",
+        filterUnits: "objectBoundingBox",
+        children: [/*#__PURE__*/_jsx("feMorphology", {
+          in: "SourceAlpha",
+          radius: "0.25",
+          result: "shadowSpreadOuter1"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dy: "1",
+          in: "shadowSpreadOuter1",
+          result: "shadowOffsetOuter1"
+        }), /*#__PURE__*/_jsx("feGaussianBlur", {
+          in: "shadowOffsetOuter1",
+          result: "shadowBlurOuter1",
+          stdDeviation: "1"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          in: "shadowBlurOuter1",
+          result: "shadowMatrixOuter1",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
+        }), /*#__PURE__*/_jsx("feMorphology", {
+          in: "SourceAlpha",
+          radius: "1",
+          result: "shadowSpreadOuter2"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dy: "2",
+          in: "shadowSpreadOuter2",
+          result: "shadowOffsetOuter2"
+        }), /*#__PURE__*/_jsx("feGaussianBlur", {
+          in: "shadowOffsetOuter2",
+          result: "shadowBlurOuter2",
+          stdDeviation: "4"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          in: "shadowBlurOuter2",
+          result: "shadowMatrixOuter2",
+          values: "0 0 0 0 0.098466735 0 0 0 0 0.0599695403 0 0 0 0 0.0599695403 0 0 0 0.07 0"
+        }), /*#__PURE__*/_jsx("feMorphology", {
+          in: "SourceAlpha",
+          radius: "2",
+          result: "shadowSpreadOuter3"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dy: "4",
+          in: "shadowSpreadOuter3",
+          result: "shadowOffsetOuter3"
+        }), /*#__PURE__*/_jsx("feGaussianBlur", {
+          in: "shadowOffsetOuter3",
+          result: "shadowBlurOuter3",
+          stdDeviation: "8"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          in: "shadowBlurOuter3",
+          result: "shadowMatrixOuter3",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+        }), /*#__PURE__*/_jsxs("feMerge", {
+          children: [/*#__PURE__*/_jsx("feMergeNode", {
+            in: "shadowMatrixOuter1"
+          }), /*#__PURE__*/_jsx("feMergeNode", {
+            in: "shadowMatrixOuter2"
+          }), /*#__PURE__*/_jsx("feMergeNode", {
+            in: "shadowMatrixOuter3"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      stroke: "none",
+      strokeWidth: "1",
+      children: [/*#__PURE__*/_jsxs("g", {
+        children: [/*#__PURE__*/_jsx("use", {
+          fill: "#000",
+          filter: "url(#filter-2)",
+          xlinkHref: "#path-1"
+        }), /*#__PURE__*/_jsx("use", {
+          fill: "#F0F2F5",
+          xlinkHref: "#path-1"
+        })]
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "#FFF",
+        d: "M26 0h55c5.523 0 10 4.477 10 10v8H26V0z"
+      }), /*#__PURE__*/_jsx("path", {
+        fill: "#001529",
+        d: "M10 0h19v72H10C4.477 72 0 67.523 0 62V10C0 4.477 4.477 0 10 0z"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "14",
+        height: "3",
+        x: "5",
+        y: "18",
+        fill: "#D7DDE6",
+        opacity: "0.2",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "14",
+        height: "3",
+        x: "5",
+        y: "42",
+        fill: "#D7DDE6",
+        opacity: "0.2",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "9",
+        height: "3",
+        x: "9",
+        y: "24",
+        fill: "#D7DDE6",
+        opacity: "0.2",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "9",
+        height: "3",
+        x: "9",
+        y: "48",
+        fill: "#D7DDE6",
+        opacity: "0.2",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "9",
+        height: "3",
+        x: "9",
+        y: "36",
+        fill: "#D7DDE6",
+        opacity: "0.2",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "14",
+        height: "3",
+        x: "9",
+        y: "30",
+        fill: "#D7DDE6",
+        opacity: "0.2",
+        rx: "1.5"
+      }), /*#__PURE__*/_jsx("rect", {
+        width: "14",
+        height: "3",
+        x: "9",
+        y: "54",
+        fill: "#D7DDE6",
+        opacity: "0.2",
+        rx: "1.5"
+      })]
+    })]
+  });
+}

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/index.d.ts

@@ -0,0 +1,50 @@
+import { DrawerProps } from 'antd';
+import React from 'react';
+import type { ProSettings } from '../../defaultSettings';
+type MergerSettingsType<T> = Partial<T> & {
+    colorPrimary?: string;
+    colorWeak?: boolean;
+};
+export type SettingItemProps = {
+    title: React.ReactNode;
+    action: React.ReactElement;
+    disabled?: boolean;
+    disabledReason?: React.ReactNode;
+};
+export type SettingDrawerProps = {
+    defaultSettings?: MergerSettingsType<ProSettings>;
+    settings?: MergerSettingsType<ProSettings>;
+    collapse?: boolean;
+    onCollapseChange?: (collapse: boolean) => void;
+    getContainer?: any;
+    hideHintAlert?: boolean;
+    hideCopyButton?: boolean;
+    /** 使用实验性质的黑色主题 */
+    enableDarkTheme?: boolean;
+    prefixCls?: string;
+    colorList?: false | {
+        key: string;
+        color: string;
+        title?: string;
+    }[];
+    onSettingChange?: (settings: MergerSettingsType<ProSettings>) => void;
+    pathname?: string;
+    disableUrlParams?: boolean;
+    themeOnly?: boolean;
+    drawerProps?: DrawerProps;
+};
+export type SettingDrawerState = {
+    collapse?: boolean;
+    language?: string;
+} & MergerSettingsType<ProSettings>;
+export declare const getFormatMessage: () => (data: {
+    id: string;
+    defaultMessage?: string;
+}) => string;
+/**
+ * 可视化配置组件
+ *
+ * @param props
+ */
+export declare const SettingDrawer: React.FC<SettingDrawerProps>;
+export {};

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/index.js

@@ -0,0 +1,512 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { CloseOutlined, CopyOutlined, NotificationOutlined, SettingOutlined } from '@ant-design/icons';
+import { compareVersions, isBrowser, merge, openVisibleCompatible } from '@ant-design/pro-utils';
+import { useUrlSearchParams } from '@umijs/use-params';
+import { Alert, ConfigProvider as AntConfigProvider, Button, Divider, Drawer, List, Switch, message, version } from 'antd';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import omit from "rc-util/es/omit";
+import React, { useEffect, useRef, useState } from 'react';
+import { defaultSettings } from "../../defaultSettings";
+import { gLocaleObject, getLanguage } from "../../locales";
+import { genStringToTheme } from "../../utils/utils";
+import { BlockCheckbox } from "./BlockCheckbox";
+import { LayoutSetting, renderLayoutSettingItem } from "./LayoutChange";
+import { RegionalSetting } from "./RegionalChange";
+import { ThemeColor } from "./ThemeColor";
+import { GroupIcon } from "./icon/group";
+import { SubIcon } from "./icon/sub";
+import { useStyle } from "./style/index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Body = function Body(_ref) {
+  var children = _ref.children,
+    hashId = _ref.hashId,
+    prefixCls = _ref.prefixCls,
+    title = _ref.title;
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      marginBlockEnd: 12
+    },
+    children: [/*#__PURE__*/_jsx("h3", {
+      className: "".concat(prefixCls, "-body-title ").concat(hashId).trim(),
+      children: title
+    }), children]
+  });
+};
+var getDifferentSetting = function getDifferentSetting(state) {
+  var stateObj = {};
+  Object.keys(state).forEach(function (key) {
+    if (state[key] !== defaultSettings[key] &&
+    //@ts-ignore
+    key !== 'collapse') {
+      stateObj[key] = state[key];
+    } else {
+      stateObj[key] = undefined;
+    }
+    if (key.includes('Render')) stateObj[key] = state[key] === false ? false : undefined;
+  });
+  stateObj.menu = undefined;
+  return stateObj;
+};
+export var getFormatMessage = function getFormatMessage() {
+  var formatMessage = function formatMessage(_ref2) {
+    var id = _ref2.id;
+    var locales = gLocaleObject();
+    return locales[id];
+  };
+  return formatMessage;
+};
+
+/**
+ * 初始化的时候需要做的工作
+ *
+ * @param param0
+ */
+var initState = function initState(urlParams, settings, onSettingChange) {
+  if (!isBrowser()) return;
+  var replaceSetting = {};
+  Object.keys(urlParams).forEach(function (key) {
+    if (defaultSettings[key] || defaultSettings[key] === undefined) {
+      if (key === 'colorPrimary') {
+        replaceSetting[key] = genStringToTheme(urlParams[key]);
+        return;
+      }
+      replaceSetting[key] = urlParams[key];
+    }
+  });
+  var newSettings = merge({}, settings, replaceSetting);
+  delete newSettings.menu;
+  delete newSettings.title;
+  delete newSettings.iconfontUrl;
+
+  // 同步数据到外部
+  onSettingChange === null || onSettingChange === void 0 || onSettingChange(newSettings);
+};
+var getParamsFromUrl = function getParamsFromUrl(urlParams, settings) {
+  if (!isBrowser()) return defaultSettings;
+  return _objectSpread(_objectSpread(_objectSpread({}, defaultSettings), settings || {}), urlParams);
+};
+var genCopySettingJson = function genCopySettingJson(settingState) {
+  return JSON.stringify(omit(_objectSpread(_objectSpread({}, settingState), {}, {
+    colorPrimary: settingState.colorPrimary
+  }), ['colorWeak']), null, 2);
+};
+
+/**
+ * 可视化配置组件
+ *
+ * @param props
+ */
+export var SettingDrawer = function SettingDrawer(props) {
+  var _props$defaultSetting = props.defaultSettings,
+    propsDefaultSettings = _props$defaultSetting === void 0 ? undefined : _props$defaultSetting,
+    _props$settings = props.settings,
+    propsSettings = _props$settings === void 0 ? undefined : _props$settings,
+    hideHintAlert = props.hideHintAlert,
+    hideCopyButton = props.hideCopyButton,
+    _props$colorList = props.colorList,
+    colorList = _props$colorList === void 0 ? [{
+      key: 'techBlue',
+      color: '#1677FF'
+    }, {
+      key: 'daybreak',
+      color: '#1890ff'
+    }, {
+      key: 'dust',
+      color: '#F5222D'
+    }, {
+      key: 'volcano',
+      color: '#FA541C'
+    }, {
+      key: 'sunset',
+      color: '#FAAD14'
+    }, {
+      key: 'cyan',
+      color: '#13C2C2'
+    }, {
+      key: 'green',
+      color: '#52C41A'
+    }, {
+      key: 'geekblue',
+      color: '#2F54EB'
+    }, {
+      key: 'purple',
+      color: '#722ED1'
+    }] : _props$colorList,
+    getContainer = props.getContainer,
+    onSettingChange = props.onSettingChange,
+    enableDarkTheme = props.enableDarkTheme,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'ant-pro' : _props$prefixCls,
+    _props$pathname = props.pathname,
+    pathname = _props$pathname === void 0 ? isBrowser() ? window.location.pathname : '' : _props$pathname,
+    _props$disableUrlPara = props.disableUrlParams,
+    disableUrlParams = _props$disableUrlPara === void 0 ? true : _props$disableUrlPara,
+    themeOnly = props.themeOnly,
+    drawerProps = props.drawerProps;
+  var firstRender = useRef(true);
+  var _useMergedState = useMergedState(false, {
+      value: props.collapse,
+      onChange: props.onCollapseChange
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    open = _useMergedState2[0],
+    setOpen = _useMergedState2[1];
+  var _useState = useState(getLanguage()),
+    _useState2 = _slicedToArray(_useState, 2),
+    language = _useState2[0],
+    setLanguage = _useState2[1];
+  var _useUrlSearchParams = useUrlSearchParams({}, {
+      disabled: disableUrlParams
+    }),
+    _useUrlSearchParams2 = _slicedToArray(_useUrlSearchParams, 2),
+    urlParams = _useUrlSearchParams2[0],
+    setUrlParams = _useUrlSearchParams2[1];
+  var _useMergedState3 = useMergedState(function () {
+      return getParamsFromUrl(urlParams, propsSettings || propsDefaultSettings);
+    }, {
+      value: propsSettings,
+      onChange: onSettingChange
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    settingState = _useMergedState4[0],
+    setSettingState = _useMergedState4[1];
+  var _ref3 = settingState || {},
+    navTheme = _ref3.navTheme,
+    colorPrimary = _ref3.colorPrimary,
+    siderMenuType = _ref3.siderMenuType,
+    layout = _ref3.layout,
+    colorWeak = _ref3.colorWeak;
+  useEffect(function () {
+    // 语言修改，这个是和 locale 是配置起来的
+    var onLanguageChange = function onLanguageChange() {
+      if (language !== getLanguage()) {
+        setLanguage(getLanguage());
+      }
+    };
+
+    /** 如果不是浏览器 都没有必要做了 */
+    if (!isBrowser()) return function () {
+      return null;
+    };
+    initState(getParamsFromUrl(urlParams, propsSettings), settingState, setSettingState);
+    window.document.addEventListener('languagechange', onLanguageChange, {
+      passive: true
+    });
+    return function () {
+      return window.document.removeEventListener('languagechange', onLanguageChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    if (compareVersions(version, '5.0.0') < 0) {
+      AntConfigProvider.config({
+        theme: {
+          primaryColor: settingState.colorPrimary
+        }
+      });
+    }
+  }, [settingState.colorPrimary, settingState.navTheme]);
+  /**
+   * 修改设置
+   *
+   * @param key
+   * @param value
+   */
+  var changeSetting = function changeSetting(key, value) {
+    var nextState = {};
+    nextState[key] = value;
+    if (key === 'layout') {
+      nextState.contentWidth = value === 'top' ? 'Fixed' : 'Fluid';
+    }
+    if (key === 'layout' && value !== 'mix') {
+      nextState.splitMenus = false;
+    }
+    if (key === 'layout' && value === 'mix') {
+      nextState.navTheme = 'light';
+    }
+    if (key === 'colorWeak' && value === true) {
+      var dom = document.querySelector('body');
+      if (dom) {
+        dom.dataset.prosettingdrawer = dom.style.filter;
+        dom.style.filter = 'invert(80%)';
+      }
+    }
+    if (key === 'colorWeak' && value === false) {
+      var _dom = document.querySelector('body');
+      if (_dom) {
+        _dom.style.filter = _dom.dataset.prosettingdrawer || 'none';
+        delete _dom.dataset.prosettingdrawer;
+      }
+    }
+    delete nextState.menu;
+    delete nextState.title;
+    delete nextState.iconfontUrl;
+    delete nextState.logo;
+    delete nextState.pwa;
+    setSettingState(_objectSpread(_objectSpread({}, settingState), nextState));
+  };
+  var formatMessage = getFormatMessage();
+  useEffect(function () {
+    /** 如果不是浏览器 都没有必要做了 */
+    if (!isBrowser()) return;
+    if (disableUrlParams) return;
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+
+    /** 每次从url拿最新的防止记忆 */
+    var urlSearchParams = new URLSearchParams(window.location.search);
+    var params = Object.fromEntries(urlSearchParams.entries());
+    var diffParams = getDifferentSetting(_objectSpread(_objectSpread({}, params), settingState));
+    delete diffParams.logo;
+    delete diffParams.menu;
+    delete diffParams.title;
+    delete diffParams.iconfontUrl;
+    delete diffParams.pwa;
+    setUrlParams(diffParams);
+  }, [setUrlParams, settingState, urlParams, pathname, disableUrlParams]);
+  var baseClassName = "".concat(prefixCls, "-setting-drawer");
+  var _useStyle = useStyle(baseClassName),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var drawerOpenProps = openVisibleCompatible(open);
+  return wrapSSR( /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "".concat(baseClassName, "-handle ").concat(hashId).trim(),
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      style: {
+        width: 48,
+        height: 48
+      },
+      children: open ? /*#__PURE__*/_jsx(CloseOutlined, {
+        style: {
+          color: '#fff',
+          fontSize: 20
+        }
+      }) : /*#__PURE__*/_jsx(SettingOutlined, {
+        style: {
+          color: '#fff',
+          fontSize: 20
+        }
+      })
+    }), /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread(_objectSpread({}, drawerOpenProps), {}, {
+      width: 300,
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      closable: false,
+      placement: "right",
+      getContainer: getContainer,
+      style: {
+        zIndex: 999
+      }
+    }, drawerProps), {}, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "".concat(baseClassName, "-drawer-content ").concat(hashId).trim(),
+        children: [/*#__PURE__*/_jsx(Body, {
+          title: formatMessage({
+            id: 'app.setting.pagestyle',
+            defaultMessage: 'Page style setting'
+          }),
+          hashId: hashId,
+          prefixCls: baseClassName,
+          children: /*#__PURE__*/_jsx(BlockCheckbox, {
+            hashId: hashId,
+            prefixCls: baseClassName,
+            list: [{
+              key: 'light',
+              title: formatMessage({
+                id: 'app.setting.pagestyle.light',
+                defaultMessage: '亮色菜单风格'
+              })
+            }, {
+              key: 'realDark',
+              title: formatMessage({
+                id: 'app.setting.pagestyle.realdark',
+                defaultMessage: '暗色菜单风格'
+              })
+            }].filter(function (item) {
+              if (item.key === 'dark' && settingState.layout === 'mix') return false;
+              if (item.key === 'realDark' && !enableDarkTheme) return false;
+              return true;
+            }),
+            value: navTheme,
+            configType: "theme",
+            onChange: function onChange(value) {
+              return changeSetting('navTheme', value);
+            }
+          }, "navTheme")
+        }), colorList !== false && /*#__PURE__*/_jsx(Body, {
+          hashId: hashId,
+          title: formatMessage({
+            id: 'app.setting.themecolor',
+            defaultMessage: 'Theme color'
+          }),
+          prefixCls: baseClassName,
+          children: /*#__PURE__*/_jsx(ThemeColor, {
+            hashId: hashId,
+            prefixCls: baseClassName,
+            colorList: colorList,
+            value: genStringToTheme(colorPrimary),
+            formatMessage: formatMessage,
+            onChange: function onChange(color) {
+              return changeSetting('colorPrimary', color);
+            }
+          })
+        }), !themeOnly && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Body, {
+            hashId: hashId,
+            prefixCls: baseClassName,
+            title: formatMessage({
+              id: 'app.setting.navigationmode'
+            }),
+            children: /*#__PURE__*/_jsx(BlockCheckbox, {
+              prefixCls: baseClassName,
+              value: layout,
+              hashId: hashId,
+              configType: "layout",
+              list: [{
+                key: 'side',
+                title: formatMessage({
+                  id: 'app.setting.sidemenu'
+                })
+              }, {
+                key: 'top',
+                title: formatMessage({
+                  id: 'app.setting.topmenu'
+                })
+              }, {
+                key: 'mix',
+                title: formatMessage({
+                  id: 'app.setting.mixmenu'
+                })
+              }],
+              onChange: function onChange(value) {
+                return changeSetting('layout', value);
+              }
+            }, "layout")
+          }), settingState.layout == 'side' || settingState.layout == 'mix' ? /*#__PURE__*/_jsx(Body, {
+            hashId: hashId,
+            prefixCls: baseClassName,
+            title: formatMessage({
+              id: 'app.setting.sidermenutype'
+            }),
+            children: /*#__PURE__*/_jsx(BlockCheckbox, {
+              prefixCls: baseClassName,
+              value: siderMenuType,
+              hashId: hashId,
+              configType: "siderMenuType",
+              list: [{
+                key: 'sub',
+                icon: /*#__PURE__*/_jsx(SubIcon, {}),
+                title: formatMessage({
+                  id: 'app.setting.sidermenutype-sub'
+                })
+              }, {
+                key: 'group',
+                icon: /*#__PURE__*/_jsx(GroupIcon, {}),
+                title: formatMessage({
+                  id: 'app.setting.sidermenutype-group'
+                })
+              }],
+              onChange: function onChange(value) {
+                return changeSetting('siderMenuType', value);
+              }
+            }, "siderMenuType")
+          }) : null, /*#__PURE__*/_jsx(LayoutSetting, {
+            prefixCls: baseClassName,
+            hashId: hashId,
+            settings: settingState,
+            changeSetting: changeSetting
+          }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Body, {
+            hashId: hashId,
+            prefixCls: baseClassName,
+            title: formatMessage({
+              id: 'app.setting.regionalsettings'
+            }),
+            children: /*#__PURE__*/_jsx(RegionalSetting, {
+              hashId: hashId,
+              prefixCls: baseClassName,
+              settings: settingState,
+              changeSetting: changeSetting
+            })
+          }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Body, {
+            hashId: hashId,
+            prefixCls: baseClassName,
+            title: formatMessage({
+              id: 'app.setting.othersettings'
+            }),
+            children: /*#__PURE__*/_jsx(List, {
+              className: "".concat(baseClassName, "-list ").concat(hashId).trim(),
+              split: false,
+              size: "small",
+              renderItem: renderLayoutSettingItem,
+              dataSource: [{
+                title: formatMessage({
+                  id: 'app.setting.weakmode'
+                }),
+                action: /*#__PURE__*/_jsx(Switch, {
+                  size: "small",
+                  className: "color-weak",
+                  checked: !!colorWeak,
+                  onChange: function onChange(checked) {
+                    changeSetting('colorWeak', checked);
+                  }
+                })
+              }]
+            })
+          }), hideHintAlert && hideCopyButton ? null : /*#__PURE__*/_jsx(Divider, {}), hideHintAlert ? null : /*#__PURE__*/_jsx(Alert, {
+            type: "warning",
+            message: formatMessage({
+              id: 'app.setting.production.hint'
+            }),
+            icon: /*#__PURE__*/_jsx(NotificationOutlined, {}),
+            showIcon: true,
+            style: {
+              marginBlockEnd: 16
+            }
+          }), hideCopyButton ? null : /*#__PURE__*/_jsx(Button, {
+            block: true,
+            icon: /*#__PURE__*/_jsx(CopyOutlined, {}),
+            style: {
+              marginBlockEnd: 24
+            },
+            onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.prev = 0;
+                    _context.next = 3;
+                    return navigator.clipboard.writeText(genCopySettingJson(settingState));
+                  case 3:
+                    message.success(formatMessage({
+                      id: 'app.setting.copyinfo'
+                    }));
+                    _context.next = 8;
+                    break;
+                  case 6:
+                    _context.prev = 6;
+                    _context.t0 = _context["catch"](0);
+                  case 8:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[0, 6]]);
+            })),
+            children: formatMessage({
+              id: 'app.setting.copy'
+            })
+          })]
+        })]
+      })
+    }))]
+  }));
+};

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/style/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '@ant-design/pro-provider';
+export interface SettingDrawerToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

node_modules/@ant-design/pro-layout/es/components/SettingDrawer/style/index.js

@@ -0,0 +1,159 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
+var genSettingDrawerStyle = function genSettingDrawerStyle(token) {
+  return _defineProperty(_defineProperty({}, "".concat(token.componentCls, "-handle"), {
+    position: 'fixed',
+    insetBlockStart: '240px',
+    insetInlineEnd: '0px',
+    zIndex: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '48px',
+    height: '48px',
+    fontSize: '16px',
+    textAlign: 'center',
+    backgroundColor: token.colorPrimary,
+    borderEndStartRadius: token.borderRadiusLG,
+    borderStartStartRadius: token.borderRadiusLG,
+    '-webkit-backdropilter': 'saturate(180%) blur(20px)',
+    backdropFilter: 'saturate(180%) blur(20px)',
+    cursor: 'pointer',
+    pointerEvents: 'auto'
+  }), token.componentCls, {
+    '&-content': {
+      position: 'relative',
+      minHeight: '100%',
+      color: token.colorText
+    },
+    '&-body-title': {
+      marginBlock: token.marginXS,
+      fontSize: '14px',
+      lineHeight: '22px',
+      color: token.colorTextHeading
+    },
+    '&-block-checkbox': {
+      display: 'flex',
+      minHeight: 42,
+      gap: token.marginSM,
+      '& &-item': {
+        position: 'relative',
+        width: '44px',
+        height: '36px',
+        overflow: 'hidden',
+        borderRadius: '4px',
+        boxShadow: token.boxShadow,
+        cursor: 'pointer',
+        fontSize: 56,
+        lineHeight: '56px',
+        '&::before': {
+          position: 'absolute',
+          insetBlockStart: 0,
+          insetInlineStart: 0,
+          width: '33%',
+          height: '100%',
+          content: "''"
+        },
+        '&::after': {
+          position: 'absolute',
+          insetBlockStart: 0,
+          insetInlineStart: 0,
+          width: '100%',
+          height: '25%',
+          content: "''"
+        },
+        '&-realDark': {
+          backgroundColor: 'rgba(0, 21, 41, 0.85)',
+          '&::before': {
+            backgroundColor: 'rgba(0, 0, 0, 0.65)'
+          },
+          '&::after': {
+            backgroundColor: 'rgba(0, 0, 0, 0.85)'
+          }
+        },
+        '&-light': {
+          backgroundColor: '#fff',
+          '&::before': {
+            backgroundColor: '#fff'
+          },
+          '&::after': {
+            backgroundColor: '#fff'
+          }
+        },
+        '&-dark,&-side': {
+          backgroundColor: token.colorBgElevated,
+          '&::before': {
+            zIndex: '1',
+            backgroundColor: '#001529'
+          },
+          '&::after': {
+            backgroundColor: token.colorBgContainer
+          }
+        },
+        '&-top': {
+          backgroundColor: token.colorBgElevated,
+          '&::before': {
+            backgroundColor: 'transparent'
+          },
+          '&::after': {
+            backgroundColor: '#001529'
+          }
+        },
+        '&-mix': {
+          backgroundColor: token.colorBgElevated,
+          '&::before': {
+            backgroundColor: token.colorBgContainer
+          },
+          '&::after': {
+            backgroundColor: '#001529'
+          }
+        }
+      },
+      '& &-selectIcon': {
+        position: 'absolute',
+        insetInlineEnd: '6px',
+        bottom: '4px',
+        color: token.colorPrimary,
+        fontWeight: 'bold',
+        fontSize: '14px',
+        pointerEvents: 'none',
+        '.action': {
+          color: token.colorPrimary
+        }
+      },
+      '& &-icon': {
+        fontSize: 56,
+        lineHeight: '56px'
+      }
+    },
+    '&-theme-color': {
+      marginBlockStart: '16px',
+      overflow: 'hidden',
+      '& &-block': {
+        float: 'left',
+        width: '20px',
+        height: '20px',
+        marginBlockStart: 8,
+        marginInlineEnd: 8,
+        color: '#fff',
+        fontWeight: 'bold',
+        textAlign: 'center',
+        borderRadius: '2px',
+        cursor: 'pointer'
+      }
+    },
+    '&-list': _defineProperty({}, "li".concat(token.antCls, "-list-item"), {
+      paddingInline: 0,
+      paddingBlock: 8
+    })
+  });
+};
+export function useStyle(prefixCls) {
+  return useAntdStyle('ProLayoutSettingDrawer', function (token) {
+    var settingDrawerToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genSettingDrawerStyle(settingDrawerToken)];
+  });
+}