@lingxiteam/lcdp-ueditor-react 1.0.3-alpha.9 → 1.0.4-alpha.2

package/es/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;
+}

package/es/ToolBottomBar/ProgressModal/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.less';
+export interface ProgressModalRef {
+    updateProgress: (progress: number, title?: string) => void;
+    updateVisible: (open: boolean) => void;
+}
+export interface ProgressModalProps {
+}
+declare const ProgressModal: React.ForwardRefExoticComponent<ProgressModalProps & React.RefAttributes<ProgressModalRef>>;
+export default ProgressModal;

package/es/ToolBottomBar/ProgressModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,kBAAkB;CAClC;AAGD,QAAA,MAAM,aAAa,6FAkCjB,CAAC;AAIH,eAAe,aAAa,CAAC"}

package/es/ToolBottomBar/ProgressModal/index.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import { Modal, Progress } from 'antd';
+import "./index.less";
+var suffixCls = 'ueditor-progress-modal';
+var ProgressModal = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    progress = _useState4[0],
+    setProgress = _useState4[1];
+  var _useState5 = useState('准备中...'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    title = _useState6[0],
+    setTitle = _useState6[1];
+  useImperativeHandle(ref, function () {
+    return {
+      updateProgress: function updateProgress(newProgress, title) {
+        if (!visible) {
+          setVisible(true);
+        }
+        setProgress(newProgress);
+        if (title) {
+          setTitle(title);
+        }
+      },
+      updateVisible: function updateVisible(open) {
+        setVisible(open);
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(Modal, {
+    title: null,
+    visible: visible,
+    footer: null,
+    closable: false,
+    maskClosable: false,
+    wrapClassName: suffixCls
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(suffixCls, "-title")
+  }, "\u6B63\u5728\u751F\u6210PDF\u6587\u4EF6..."), /*#__PURE__*/React.createElement(Progress, {
+    percent: progress,
+    status: "active",
+    showInfo: false
+  }), title && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(suffixCls, "-sub-title")
+  }, title, " ", progress, "%"));
+});
+ProgressModal.displayName = 'ProgressModal';
+export default ProgressModal;

package/es/ToolBottomBar/ProgressModal/index.less

@@ -0,0 +1,16 @@
+@suffixCls: ~'ueditor-progress-modal';
+
+.@{suffixCls} {
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 12px;
+    color: #333;
+  }
+  &-sub-title {
+    font-size: 14px;
+    color: #666;
+    text-align: center;
+    margin-top: 8px;
+  }
+}

package/es/ToolBottomBar/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import './index.less';
+import { ILcdpUeditorProps } from '../type';
+declare const ToolBottomBar: (props: {
+    /**
+     * 编辑器实例
+     */
+    ueditorInst: any;
+    /**
+     * 前缀类名
+     */
+    prefixCls?: string | undefined;
+    /**
+     * 容器引用
+     */
+    containerRef?: React.RefObject<HTMLDivElement> | undefined;
+    defaultSetting?: Record<"chineseCount" | "charCount" | "pageWidth" | "formatSetting" | "exportPdf" | "fullScreen" | "copy", any> | undefined;
+    onSettingChange?: ((setting: Partial<Record<Required<ILcdpUeditorProps>['bottomTypes'][number], any>>) => void) | undefined;
+    /**
+     * 是否准备就绪
+     */
+    isReady?: boolean | undefined;
+    /**
+     * 底部功能类型
+     */
+    bottomTypes?: ILcdpUeditorProps['bottomTypes'];
+    /**
+     * 导出文件名
+     */
+    exportFileName?: string | undefined;
+}) => JSX.Element;
+export default ToolBottomBar;

package/es/ToolBottomBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAY3D,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAU5C,QAAA,MAAM,aAAa;IAEjB;;OAEG;iBACU,GAAG;IAEhB;;OAEG;;IAGH;;OAEG;;;iCAGyB,QAAQ,OAAO,SAAS,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC,KAAK,IAAI;IAE7G;;OAEG;;IAGH;;OAEG;kBACW,iBAAiB,CAAC,aAAa,CAAC;IAE9C;;OAEG;;iBA4PJ,CAAC;AAEF,eAAe,aAAa,CAAC"}