@lingxiteam/lcdp-ueditor-react 1.0.3-alpha.8 → 1.0.4-alpha.1

package/lib/LcdpUeditor.js

@@ -33,11 +33,13 @@ __export(LcdpUeditor_exports, {
 });
 module.exports = __toCommonJS(LcdpUeditor_exports);
 var import_react = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
 var import_const = require("./const");
 var import_defaultConfig = __toESM(require("./defaultConfig.json"));
 var import_UeditorResourceLoader = __toESM(require("./tools/UeditorResourceLoader"));
 var import_debounce = __toESM(require("lodash/debounce"));
 var import_filterHtmlNode = require("./tools/filterHtmlNode");
+var import_ToolBottomBar = __toESM(require("./ToolBottomBar"));
 var LcdpUeditor = class extends import_react.default.Component {
   constructor(props) {
     super(props);
@@ -66,20 +68,24 @@ var LcdpUeditor = class extends import_react.default.Component {
      */
     this.currentContent = "";
     /**
-     * 是否加载完成
+     * 是否全屏
      */
-    this.isReady = false;
+    this.prefixCls = "pcfactory";
     /**
      * 初始加载失败
      */
     this.state = {
-      initError: false
+      initError: false,
+      /**
+      * 是否加载完成
+      */
+      isReady: false
     };
     /**
      * 编辑器配置项
      */
     this.editorConfig = {};
-    const { config } = props;
+    const { config, prefixCls, onFormatChange } = props;
     this.containerId = `ueditor_${Date.now()}_${String(Math.random()).slice(2, 6)}`;
     if (this.props.ueditorPath) {
       this.ueditorPath = this.props.ueditorPath;
@@ -103,6 +109,7 @@ var LcdpUeditor = class extends import_react.default.Component {
       }
       return null;
     };
+    this.prefixCls = prefixCls || "pcfactory";
     this.editorConfig = {
       ...import_defaultConfig.default,
       maximumWords: (config == null ? void 0 : config.maximumWords) || 1e4,
@@ -113,7 +120,9 @@ var LcdpUeditor = class extends import_react.default.Component {
       },
       uploadFunction: this.uploadFunction,
       initialContent: "",
-      pasteplain: (config == null ? void 0 : config.pasteplain) === true
+      pasteplain: (config == null ? void 0 : config.pasteplain) === true,
+      onFormatChange,
+      exportFileName: (config == null ? void 0 : config.exportFileName) || "未命名"
     };
     this.debounceContentChange = (0, import_debounce.default)(this.onContentChange.bind(this), 300);
   }
@@ -121,7 +130,7 @@ var LcdpUeditor = class extends import_react.default.Component {
     this.initUeditor();
   }
   componentWillReceiveProps(nextProps) {
-    if (this.isReady) {
+    if (this.state.isReady) {
       if ("value" in nextProps && this.currentContent !== nextProps.value) {
         this.isReportFlag = false;
         this.ueditorInst.setContent((0, import_filterHtmlNode.filterHtmlNode)(nextProps.value || "").str);
@@ -135,9 +144,15 @@ var LcdpUeditor = class extends import_react.default.Component {
       }
     }
   }
+  componentDidUpdate(prevProps) {
+    var _a, _b, _c;
+    if (this.state.isReady && (prevProps.defaultFormatSetting !== this.props.defaultFormatSetting || prevProps.bottomTypes !== this.props.bottomTypes || ((_a = prevProps == null ? void 0 : prevProps.config) == null ? void 0 : _a.exportFileName) !== ((_c = (_b = this.props) == null ? void 0 : _b.config) == null ? void 0 : _c.exportFileName))) {
+      this.renderStatusBar();
+    }
+  }
   componentWillUnmount() {
     var _a, _b, _c;
-    if (this.isReady) {
+    if (this.state.isReady) {
       const editorBody = (_a = this.ueditorInst) == null ? void 0 : _a.body;
       if (editorBody && this.compositionEndHandler) {
         editorBody.removeEventListener("compositionend", this.compositionEndHandler);
@@ -259,7 +274,9 @@ var LcdpUeditor = class extends import_react.default.Component {
         if (nextValue) {
           this.ueditorInst.setContent(nextValue);
         }
-        this.isReady = true;
+        this.setState({
+          isReady: true
+        });
         if (this.props.disabled) {
           this.ueditorInst.setDisabled();
         } else {
@@ -277,6 +294,7 @@ var LcdpUeditor = class extends import_react.default.Component {
         }
         this.initStyle();
         this.mountRef();
+        this.renderStatusBar();
       });
     };
     import_UeditorResourceLoader.default.onReady(readyFunc);
@@ -288,6 +306,42 @@ var LcdpUeditor = class extends import_react.default.Component {
     });
     import_UeditorResourceLoader.default.startLoad(jsList);
   }
+  /**
+   * 渲染状态栏
+   */
+  renderStatusBar() {
+    var _a, _b, _c, _d;
+    const { id } = this.ueditorInst.ui || {};
+    const bottomBarContainer = (_a = this.containerRef.current) == null ? void 0 : _a.querySelector(`#${id}_bottombar`);
+    const comp = /* @__PURE__ */ import_react.default.createElement(
+      import_ToolBottomBar.default,
+      {
+        ueditorInst: this.ueditorInst,
+        prefixCls: this.prefixCls,
+        containerRef: this.containerRef,
+        defaultFormatSetting: this.props.defaultFormatSetting,
+        onFormatChange: this.editorConfig.onFormatChange,
+        isReady: this.state.isReady,
+        bottomTypes: this.props.bottomTypes,
+        exportFileName: (_c = (_b = this.props) == null ? void 0 : _b.config) == null ? void 0 : _c.exportFileName
+      }
+    );
+    if (bottomBarContainer) {
+      let statusContainer = bottomBarContainer.querySelector(`#${id}_bottomStatusBar`);
+      bottomBarContainer.classList.remove("ueditor-bottom-bar-with-status");
+      if ((_d = this.props.bottomTypes) == null ? void 0 : _d.length) {
+        bottomBarContainer.classList.add("ueditor-bottom-bar-with-status");
+        if (!statusContainer) {
+          statusContainer = document.createElement("div");
+          statusContainer.id = `${id}_bottomStatusBar`;
+          bottomBarContainer.appendChild(statusContainer);
+        }
+        import_react_dom.default.render(comp, statusContainer);
+      } else if (statusContainer) {
+        statusContainer.remove();
+      }
+    }
+  }
   render() {
     const { initError } = this.state;
     if (initError) {

package/lib/ToolBottomBar/FormatModal/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.less';
+import { FormatSettings } from '../../tools/generateStylesFromSettings';
+interface FormatSettingsPanelProps {
+    onApply: (settings: FormatSettings) => void;
+    initialSettings?: Partial<FormatSettings>;
+}
+declare const FormatSettingsPanel: React.FC<React.PropsWithChildren<FormatSettingsPanelProps>>;
+export default FormatSettingsPanel;

package/lib/ToolBottomBar/FormatModal/index.js

@@ -0,0 +1,261 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ToolBottomBar/FormatModal/index.tsx
+var FormatModal_exports = {};
+__export(FormatModal_exports, {
+  default: () => FormatModal_default
+});
+module.exports = __toCommonJS(FormatModal_exports);
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_index = require("./index.less");
+var suffixCls = "ueditor-format";
+var SYSTEM_FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Helvetica, Arial, sans-serif";
+var defaultSettings = {
+  headings: {
+    h1: { fontSize: "28px", fontFamily: "系统字体", fontWeight: "700", lineHeight: "1.3", color: "#1a202c", marginTop: "2.5rem", marginBottom: "1.2rem" },
+    h2: { fontSize: "24px", fontFamily: "系统字体", fontWeight: "600", lineHeight: "1.3", color: "#1a202c", marginTop: "2.5rem", marginBottom: "1.2rem" },
+    h3: { fontSize: "20px", fontFamily: "系统字体", fontWeight: "600", lineHeight: "1.3", color: "#1a202c", marginTop: "2rem", marginBottom: "0.8rem" },
+    h4: { fontSize: "18px", fontFamily: "系统字体", fontWeight: "600", lineHeight: "1.3", color: "#1a202c", marginTop: "2rem", marginBottom: "0.8rem" },
+    h5: { fontSize: "16px", fontFamily: "系统字体", fontWeight: "600", lineHeight: "1.3", color: "#1a202c", marginTop: "2rem", marginBottom: "0.8rem" },
+    h6: { fontSize: "16px", fontFamily: "系统字体", fontWeight: "600", lineHeight: "1.3", color: "#1a202c", marginTop: "2rem", marginBottom: "0.8rem" }
+  },
+  paragraph: { fontSize: "16px", fontFamily: "系统字体", fontWeight: "normal", lineHeight: "1.7", color: "#2c3e50" },
+  lists: {
+    ul: { fontSize: "16px", fontFamily: "系统字体", fontWeight: "normal", lineHeight: "1.7", color: "#2c3e50", paddingLeft: "1rem", marginTop: "1rem", marginBottom: "1rem" },
+    ol: { fontSize: "16px", fontFamily: "系统字体", fontWeight: "normal", lineHeight: "1.7", color: "#2c3e50", paddingLeft: "1rem", marginTop: "1rem", marginBottom: "1rem" }
+  }
+};
+var getOSType = () => {
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (userAgent.includes("win"))
+    return "windows";
+  if (userAgent.includes("mac"))
+    return "mac";
+  if (userAgent.includes("linux"))
+    return "linux";
+  return "unknown";
+};
+var isFontAvailable = (fontName) => {
+  if (fontName === "系统字体" || fontName.includes(",") || fontName.includes("sans-serif") || fontName.includes("serif") || fontName.includes("monospace")) {
+    return true;
+  }
+  if ("fonts" in document) {
+    try {
+      return document.fonts.check(`12px "${fontName}"`);
+    } catch (e) {
+    }
+  }
+  try {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context)
+      return false;
+    const testText = "abcdefghijklmnopqrstuvwxyz测试字体ABCDEFG";
+    context.font = "72px monospace";
+    const baselineWidth = context.measureText(testText).width;
+    context.font = `72px "${fontName}", monospace`;
+    const testWidth = context.measureText(testText).width;
+    return Math.abs(testWidth - baselineWidth) > 2;
+  } catch (e) {
+    console.warn(`字体检测失败: ${fontName}`, e);
+    return false;
+  }
+};
+var generateFontOptions = () => {
+  const osType = getOSType();
+  const baseFonts = [
+    { value: "系统字体", label: "系统字体(推荐)" },
+    { value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Helvetica, Arial, sans-serif", label: "完整系统字体栈" }
+  ];
+  const platformFonts = {
+    windows: [
+      { value: "微软雅黑", label: "微软雅黑" },
+      { value: "仿宋", label: "仿宋" },
+      { value: "黑体", label: "黑体" },
+      { value: "楷体", label: "楷体" },
+      { value: "宋体", label: "宋体" },
+      { value: "等线", label: "等线" },
+      { value: "Segoe UI", label: "Segoe UI" },
+      { value: "Calibri", label: "Calibri" }
+    ],
+    mac: [
+      { value: "PingFang SC", label: "苹方(简)" },
+      { value: "PingFang TC", label: "苹方(繁)" },
+      { value: "Hiragino Sans GB", label: "冬青黑体" },
+      { value: "STHeiti", label: "华文黑体" },
+      { value: "STKaiti", label: "华文楷体" },
+      { value: "STSong", label: "华文宋体" },
+      { value: "STFangsong", label: "华文仿宋" },
+      { value: "San Francisco", label: "旧金山字体" },
+      { value: "Helvetica Neue", label: "Helvetica Neue" }
+    ],
+    linux: [
+      { value: "Noto Sans CJK SC", label: "思源黑体" },
+      { value: "Noto Serif CJK SC", label: "思源宋体" },
+      { value: "Source Han Sans", label: "Source Han Sans" },
+      { value: "WenQuanYi Micro Hei", label: "文泉驿微米黑" },
+      { value: "WenQuanYi Zen Hei", label: "文泉驿正黑" },
+      { value: "DejaVu Sans", label: "DejaVu Sans" },
+      { value: "Liberation Sans", label: "Liberation Sans" }
+    ]
+  };
+  const webSafeFonts = [
+    { value: "Arial", label: "Arial" },
+    { value: "Helvetica", label: "Helvetica" },
+    { value: "Times New Roman", label: "Times New Roman" },
+    { value: "Times", label: "Times" },
+    { value: "Courier New", label: "Courier New" },
+    { value: "Georgia", label: "Georgia" },
+    { value: "Verdana", label: "Verdana" },
+    { value: "sans-serif", label: "系统无衬线字体" },
+    { value: "serif", label: "系统衬线字体" },
+    { value: "monospace", label: "系统等宽字体" }
+  ];
+  const allFonts = [...baseFonts];
+  if (platformFonts[osType]) {
+    allFonts.push(...platformFonts[osType]);
+  }
+  allFonts.push(...webSafeFonts);
+  const availableFonts = allFonts.map((font) => ({
+    ...font,
+    available: isFontAvailable(font.value)
+  }));
+  return availableFonts.map((font) => ({
+    value: font.value,
+    label: font.available ? font.label : `${font.label} (不可用)`,
+    disabled: !font.available && !["系统字体", "完整系统字体栈"].includes(font.label)
+  }));
+};
+var fontFamilyOptions = generateFontOptions();
+var fontWeightOptions = [
+  { value: "normal", label: "常规" },
+  { value: "500", label: "中等" },
+  { value: "600", label: "半粗" },
+  { value: "bold", label: "粗体" }
+];
+var fontSizeOptions = [
+  { value: "12px", label: "12px" },
+  { value: "14px", label: "14px" },
+  { value: "16px", label: "16px" },
+  { value: "18px", label: "18px" },
+  { value: "20px", label: "20px" },
+  { value: "22px", label: "22px" },
+  { value: "24px", label: "24px" },
+  { value: "28px", label: "28px" },
+  { value: "32px", label: "32px" },
+  { value: "36px", label: "36px" },
+  { value: "1.0em", label: "1.0em" },
+  { value: "1.2em", label: "1.2em" },
+  { value: "1.5em", label: "1.5em" },
+  { value: "1.8em", label: "1.8em" }
+];
+var FormatSettingsPanel = ({ onApply, initialSettings, children }) => {
+  const [form] = import_antd.Form.useForm();
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [settings, setSettings] = (0, import_react.useState)({
+    ...defaultSettings
+  });
+  const [currentOS, setCurrentOS] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    if (initialSettings) {
+      const processFontFamily = (obj) => {
+        for (const key in obj) {
+          if (typeof obj[key] === "object" && obj[key] !== null) {
+            processFontFamily(obj[key]);
+          } else if (key === "fontFamily" && obj[key] === SYSTEM_FONT_STACK) {
+            obj[key] = "系统字体";
+          }
+        }
+      };
+      processFontFamily(initialSettings);
+      setSettings((pre) => ({
+        ...pre,
+        ...initialSettings
+      }));
+    }
+  }, [initialSettings]);
+  (0, import_react.useEffect)(() => {
+    const osType = getOSType();
+    const osNames = {
+      windows: "Windows",
+      mac: "macOS",
+      linux: "Linux",
+      unknown: "未知系统"
+    };
+    setCurrentOS(osNames[osType] || "未知系统");
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (open) {
+      form.setFieldsValue(settings);
+    }
+  }, [open, form, settings]);
+  const handleValuesChange = (changedValues, allValues) => {
+    setSettings((prev) => ({
+      ...prev,
+      ...allValues
+    }));
+  };
+  const handleApply = () => {
+    form.validateFields().then((values) => {
+      const processedValues = JSON.parse(JSON.stringify(values));
+      const processFontFamily = (obj) => {
+        for (const key in obj) {
+          if (typeof obj[key] === "object" && obj[key] !== null) {
+            processFontFamily(obj[key]);
+          } else if (key === "fontFamily" && obj[key] === "系统字体") {
+            obj[key] = SYSTEM_FONT_STACK;
+          }
+        }
+      };
+      processFontFamily(processedValues);
+      onApply(processedValues);
+      setOpen(false);
+    });
+  };
+  const handleCancel = () => {
+    setOpen(false);
+  };
+  const renderStyleRow = (prefix, label, style) => /* @__PURE__ */ import_react.default.createElement("div", { className: `${suffixCls}-style-row` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${suffixCls}-row-label` }, label), /* @__PURE__ */ import_react.default.createElement(import_antd.Row, { gutter: 12 }, /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: 7 }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: [...prefix.split("."), "fontFamily"], noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_antd.Select, { placeholder: "字体", options: fontFamilyOptions, size: "small" }))), /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: 5 }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: [...prefix.split("."), "fontSize"], noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_antd.Select, { placeholder: "字号", options: fontSizeOptions, size: "small" }))), /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: 4 }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: [...prefix.split("."), "fontWeight"], noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_antd.Select, { placeholder: "字重", options: fontWeightOptions, size: "small" }))), /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: 4 }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: [...prefix.split("."), "lineHeight"], noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_antd.InputNumber, { placeholder: "行高", step: 0.1, min: 1, max: 3, size: "small", style: { width: "100%" } }))), /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: 4 }, /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, { name: [...prefix.split("."), "color"], noStyle: true }, /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { type: "color", style: { width: "100%", padding: 0, height: 24 } })))));
+  const content = /* @__PURE__ */ import_react.default.createElement("div", { className: `${suffixCls}-popover-content` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${suffixCls}-system-info` }, "当前系统: ", currentOS, " | 字体选项已针对您的系统优化"), /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { form, layout: "vertical", initialValues: settings, onValuesChange: handleValuesChange, size: "small" }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${suffixCls}-section` }, renderStyleRow("paragraph", "正文", settings.paragraph), renderStyleRow("headings.h1", "主标题", settings.headings.h1), renderStyleRow("headings.h2", "二级标题", settings.headings.h2), renderStyleRow("headings.h3", "三级标题", settings.headings.h3), renderStyleRow("headings.h4", "四级标题", settings.headings.h4), renderStyleRow("headings.h5", "五级标题", settings.headings.h5), renderStyleRow("headings.h6", "六级标题", settings.headings.h6), renderStyleRow("lists.ul", "无序列表", settings.lists.ul), renderStyleRow("lists.ol", "有序列表", settings.lists.ol)), /* @__PURE__ */ import_react.default.createElement("div", { className: `${suffixCls}-footer` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { size: "small", onClick: handleCancel }, "取消"), /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { size: "small", type: "primary", onClick: handleApply }, "应用"))));
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Popover,
+    {
+      content,
+      title: "格式设置",
+      trigger: "click",
+      visible: open,
+      onVisibleChange: setOpen,
+      placement: "bottomRight",
+      overlayClassName: `${suffixCls}-settings-popover`
+    },
+    children
+  );
+};
+var FormatModal_default = FormatSettingsPanel;

package/lib/ToolBottomBar/FormatModal/index.less

@@ -0,0 +1,276 @@
+@prefixCls: pcfactory;
+@suffixCls: ueditor-format;
+.@{suffixCls}-settings-popover {
+  max-width: 720px;
+
+  input[type="color"] {
+    -webkit-appearance: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+      border-radius: 2px;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+      border-radius: 2px;
+    }
+  }
+
+  .@{prefixCls}-form-item {
+    margin-bottom: 0;
+  }
+
+  .@{prefixCls}-form-item-control-input {
+    min-height: 28px;
+  }
+
+  .@{suffixCls}-popover-content {
+    width: 680px;
+    padding: 0;
+  }
+
+  .@{prefixCls}-popover-inner-content {
+    padding: 16px 20px;
+    border-radius: 8px;
+  }
+
+  .@{prefixCls}-popover-title {
+    font-weight: 600;
+    text-align: center;
+    font-size: 16px;
+    color: #1a202c;
+    padding: 16px 20px 12px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 0;
+  }
+}
+
+.@{suffixCls}-section {
+  overflow-y: auto;
+  padding: 0;
+  max-height: 400px;
+}
+
+.@{suffixCls}-style-row {
+  margin-bottom: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid #f0f0f0;
+  border-radius: 6px;
+  background-color: #fafbfc;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: #f1f5f9;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  }
+
+  &:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  .@{suffixCls}-row-label {
+    font-weight: 600;
+    font-size: 14px;
+    width: 80px;
+    color: #374151;
+    flex-shrink: 0;
+    margin-right: 12px;
+    margin-bottom: 0;
+  }
+
+  .@{prefixCls}-row {
+    flex: 1;
+    align-items: center;
+    margin: 0;
+    .@{prefixCls}-select-selector {
+      width: 100%;
+    }
+  }
+
+  .@{prefixCls}-col {
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .@{prefixCls}-select {
+    width: 100%;
+
+    .@{prefixCls}-select-selector {
+      border-radius: 4px;
+      border-color: #d1d5db;
+      transition: all 0.2s ease;
+      height: 28px;
+
+      .@{prefixCls}-select-selection-item {
+        line-height: 26px;
+      }
+
+      &:hover {
+        border-color: #6366f1;
+      }
+    }
+
+    &.@{prefixCls}-select-focused .@{prefixCls}-select-selector {
+      border-color: #6366f1 !important;
+      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
+    }
+  }
+
+  .@{prefixCls}-input-number {
+    width: 100%;
+    border-radius: 4px;
+    border-color: #d1d5db;
+    height: 28px;
+
+    .@{prefixCls}-input-number-input {
+      height: 26px;
+    }
+
+    &:hover {
+      border-color: #6366f1;
+    }
+
+    &:focus,
+    &.@{prefixCls}-input-number-focused {
+      border-color: #6366f1 !important;
+      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
+    }
+  }
+
+  input[type="color"] {
+    width: 100%;
+    height: 28px;
+    border-radius: 4px;
+    border: 1px solid #d1d5db;
+    cursor: pointer;
+
+    &:hover {
+      border-color: #6366f1;
+    }
+  }
+}
+
+.@{suffixCls}-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #e2e8f0;
+
+  .@{prefixCls}-btn {
+    height: 32px;
+    padding: 0 16px;
+    border-radius: 4px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+
+    &.@{prefixCls}-btn-default {
+      border-color: #d1d5db;
+      color: #6b7280;
+
+      &:hover {
+        border-color: #9ca3af;
+        color: #374151;
+      }
+    }
+
+    &.@{prefixCls}-btn-primary {
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+      border: none;
+      box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
+
+      &:hover {
+        background: linear-gradient(135deg, #5b61f0 0%, #7c3aed 100%);
+        box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
+        transform: translateY(-1px);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .@{suffixCls}-settings-popover {
+    max-width: 95vw;
+
+    .@{suffixCls}-popover-content {
+      width: calc(95vw - 40px);
+    }
+  }
+
+  .@{suffixCls}-style-row {
+    flex-direction: column;
+    align-items: stretch;
+
+    .@{suffixCls}-row-label {
+      width: 100%;
+      margin-right: 0;
+      margin-bottom: 8px;
+    }
+
+    .@{prefixCls}-row {
+      width: 100%;
+    }
+
+    .@{prefixCls}-col {
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.@{suffixCls}-style-section {
+  margin-bottom: 15px;
+}
+
+.@{suffixCls}-section-title {
+  font-weight: 500;
+  margin-bottom: 10px;
+  font-size: 15px;
+}
+
+.@{suffixCls}-system-info {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  color: white !important;
+  border-radius: 8px !important;
+  padding: 12px 16px !important;
+  margin-bottom: 16px !important;
+  text-align: center !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
+}
+
+.@{suffixCls}-section::-webkit-scrollbar {
+  width: 6px;
+}
+
+.@{suffixCls}-section::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 3px;
+}
+
+.@{suffixCls}-section::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+
+  &:hover {
+    background: #94a3b8;
+  }
+}
+
+.@{suffixCls}-section.loading {
+  opacity: 0.6;
+  pointer-events: none;
+}