@cqsjjb/jjb-react-admin-component 3.3.12 → 3.4.0-dev.1

package/Layout/index.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+
+/**
+ * LayoutHeader 组件属性
+ */
+export interface LayoutHeaderProps {
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 标题文本 */
+  title?: React.ReactNode;
+  /** 右侧额外内容 */
+  extra?: React.ReactNode;
+  /** 是否显示返回按钮 */
+  previous?: boolean;
+  /** 头部下方内容 */
+  content?: React.ReactNode;
+  /** 自定义类名 */
+  className?: string;
+  /** 内容区域样式 */
+  contentStyle?: React.CSSProperties;
+}
+
+/**
+ * LayoutBlock 组件属性
+ */
+export interface LayoutBlockProps {
+  /** 标题文本 */
+  title?: React.ReactNode;
+  /** 描述文本 */
+  description?: React.ReactNode;
+  /** 右侧额外内容 */
+  extra?: React.ReactNode;
+  /** 内容区域 */
+  content?: React.ReactNode;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+  /** 内容区域样式 */
+  contentStyle?: React.CSSProperties;
+  /** 头部区域样式 */
+  headerStyle?: React.CSSProperties;
+  /** 头部区域类名 */
+  headerClassName?: string;
+}
+
+/**
+ * Layout 组件属性
+ */
+export interface LayoutProps {
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 数据节点ID */
+  'data-node-id'?: string;
+  /** 子元素 */
+  children?: React.ReactNode;
+  /** 自定义类名 */
+  className?: string;
+  /** 内容区域样式 */
+  contentStyle?: React.CSSProperties;
+  /** 内容区域类名 */
+  contentClassName?: string;
+}
+
+/**
+ * 布局头部组件
+ */
+export const LayoutHeader: React.FC<LayoutHeaderProps>;
+
+/**
+ * 布局块组件
+ */
+export const LayoutBlock: React.FC<LayoutBlockProps>;
+
+/**
+ * 布局容器组件
+ */
+declare const Layout: React.FC<LayoutProps>;
+
+export default Layout;
+

package/Layout/index.js

@@ -0,0 +1,99 @@
+import React, { useContext } from 'react';
+import { Space } from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { useField } from '@cqsjjb/jjb-data-provider';
+import './index.less';
+import { getPrefixCls } from '../tools/index.js';
+const prefixCls = getPrefixCls();
+export const LayoutHeader = props => {
+  const {
+    style,
+    title,
+    extra,
+    previous,
+    content,
+    className,
+    contentStyle,
+    contentClassName
+  } = props;
+  const {
+    checkField
+  } = useField();
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: `${prefixCls}-layout-container-head${className ? ` ${className}` : ''}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-header`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-header-left`
+  }, previous && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-header-back`,
+    onClick: () => window.history.back()
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "button",
+    className: `${prefixCls}-layout-container-header-back-icon`
+  }, /*#__PURE__*/React.createElement(ArrowLeftOutlined, null))), /*#__PURE__*/React.createElement("span", {
+    className: `${prefixCls}-layout-container-header-title`
+  }, checkField('DEFAULT_MENU', title))), extra && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-header-right`
+  }, /*#__PURE__*/React.createElement(Space, null, extra))), content && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 16,
+      ...(contentStyle || {})
+    },
+    className: contentClassName
+  }, content));
+};
+LayoutHeader.displayName = 'LayoutHeader';
+export const LayoutBlock = props => {
+  const {
+    title,
+    description,
+    extra,
+    content,
+    style,
+    className,
+    contentStyle,
+    contentClassName,
+    headerStyle,
+    headerClassName
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: `${prefixCls}-layout-container-block${className ? ` ${className}` : ''}`
+  }, title && /*#__PURE__*/React.createElement("div", {
+    style: headerStyle,
+    className: `${prefixCls}-layout-container-block-header${headerClassName ? ` ${headerClassName}` : ''}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-block-header-left`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-block-header-title`
+  }, title), description && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-block-header-description`
+  }, description)), extra && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-layout-container-block-header-right`
+  }, /*#__PURE__*/React.createElement(Space, null, extra))), content && /*#__PURE__*/React.createElement("div", {
+    style: contentStyle,
+    className: `${prefixCls}-layout-container-block-content${contentClassName ? ` ${contentClassName}` : ''}`
+  }, content));
+};
+LayoutBlock.displayName = 'LayoutBlock';
+const Layout = props => {
+  const {
+    style = {},
+    'data-node-id': dataNodeId,
+    className,
+    contentStyle,
+    contentClassName
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: `${prefixCls}-layout-container${className ? ` ${className}` : ''}`,
+    "data-node-id": dataNodeId
+  }, /*#__PURE__*/React.createElement("div", {
+    style: contentStyle,
+    className: `${prefixCls}-layout-container-content${contentClassName ? ` ${contentClassName}` : ''}`
+  }, props.children));
+};
+Layout.displayName = 'Layout';
+export default Layout;

package/Layout/index.less

@@ -0,0 +1,112 @@
+@com-prefix-cls: if(isdefined(@ant-prefix), @ant-prefix, ant);
+
+.@{com-prefix-cls}-layout-container {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.@{com-prefix-cls}-layout-container-head {
+  padding: 24px;
+  border-radius: 12px 12px 12px 12px;
+  background: #FFFFFF;
+}
+
+.@{com-prefix-cls}-layout-container-header {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.88);
+  font-size: 14px;
+  line-height: 1.5714285714285714;
+  list-style: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &-left {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  &-back {
+    margin-inline-end: 16px;
+    font-size: 16px;
+    line-height: 1;
+
+    &-icon {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.88);
+      outline: none;
+      cursor: pointer;
+      transition: color 0.3s;
+    }
+  }
+  &-title {
+    margin-inline-end: 12px;
+    margin-block-end: 0;
+    color: rgba(0, 0, 0, 0.88);
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 32px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-right {
+    white-space: nowrap;
+  }
+}
+
+.@{com-prefix-cls}-layout-container-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.@{com-prefix-cls}-layout-container-block {
+  border-radius: 12px 12px 12px 12px;
+  background: #FFFFFF;
+  padding: 24px;
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    &-left {
+      display: flex;
+      align-items: center;
+      line-height: 32px;
+      gap: 8px;
+    }
+    
+    &-title {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 0.9);
+      font-weight: 600;
+    }
+
+    &-description {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  &:has(.@{com-prefix-cls}-layout-container-block-header) {
+    .@{com-prefix-cls}-layout-container-block-content {
+      margin-top: 12px;
+    }
+  }
+}

package/ListDataContainer/index.js

@@ -1,49 +1,48 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useState, useEffect, useCallback, useImperativeHandle, forwardRef, useRef } from 'react';
-import { Table, Row, Col, Form } from 'antd';
-import { isEqual } from 'lodash';
-import SearchForm from '@cqsjjb/jjb-react-admin-component/SearchForm';
 import ProTable from '@cqsjjb/jjb-react-admin-component/Table';
+import SearchForm from '@cqsjjb/jjb-react-admin-component/SearchForm';
+import React, { useState, useEffect, useCallback, useImperativeHandle, forwardRef, useRef } from 'react';
+import { Table, Form } from 'antd';
 
-/**
- * @component ListDataContainer
- * @description 通用列表数据容器组件，提供搜索表单、数据表格、分页等功能的完整列表页面解决方案
- * 
- * @props {Array} columns - 表格列配置，遵循Ant Design Table组件的columns规范
- * @props {Function} fetchDataApi - 数据获取API函数，接收分页和搜索参数，返回包含list和total的对象
- * @props {Array} searchFormConfig - 搜索表单配置数组
- *   @param {React.Component} searchFormConfig[].field - 表单项组件(如ControlWrapper.Select)
- *   @param {string} searchFormConfig[].name - 表单项字段名
- *   @param {string} searchFormConfig[].label - 表单项标签
- *   @param {Object} searchFormConfig[].fieldProps - 传递给字段组件的属性
- *   @param {Object} searchFormConfig[].itemProps - 传递给Form.Item的属性
- *   @param {React.ReactNode} searchFormConfig[].content - 字段组件的子元素(如Select.Option列表)
- *   @param {boolean} searchFormConfig[].required - 是否必填
- * @props {string} rowKey - 表格行键值，默认为'id'
- * @props {Object} initialPagination - 初始分页配置，包含current、pageSize等分页属性
- * @props {Object} tableProps - 传递给Table组件的属性
- * @props {Object} searchFormProps - 传递给SearchForm组件的属性
- * @props {boolean} proTable - 是否使用ProTable组件，默认为false
- * @example
- * // 基础用法
- * <ListDataContainer
- *   columns={tableColumns}
- *   fetchDataApi={getCourseList}
- *   searchFormConfig={[
- *     {
- *       field: Select,
- *       name: 'status',
- *       label: '状态',
- *     }
- *     {
- *       field: Input,
- *       name: 'name',
- *       label: '名称',
- *       required: true,
- *     }
- *   ]}
- * />
- * 
+/**
+ * @component ListDataContainer
+ * @description 通用列表数据容器组件，提供搜索表单、数据表格、分页等功能的完整列表页面解决方案
+ *
+ * @props {Array} columns - 表格列配置，遵循Ant Design Table组件的columns规范
+ * @props {Function} fetchDataApi - 数据获取API函数，接收分页和搜索参数，返回包含list和total的对象
+ * @props {Array} searchFormConfig - 搜索表单配置数组
+ *   @param {React.Component} searchFormConfig[].field - 表单项组件(如ControlWrapper.Select)
+ *   @param {string} searchFormConfig[].name - 表单项字段名
+ *   @param {string} searchFormConfig[].label - 表单项标签
+ *   @param {Object} searchFormConfig[].fieldProps - 传递给字段组件的属性
+ *   @param {Object} searchFormConfig[].itemProps - 传递给Form.Item的属性
+ *   @param {React.ReactNode} searchFormConfig[].content - 字段组件的子元素(如Select.Option列表)
+ *   @param {boolean} searchFormConfig[].required - 是否必填
+ * @props {string} rowKey - 表格行键值，默认为'id'
+ * @props {Object} initialPagination - 初始分页配置，包含current、pageSize等分页属性
+ * @props {Object} tableProps - 传递给Table组件的属性
+ * @props {Object} searchFormProps - 传递给SearchForm组件的属性
+ * @props {boolean} proTable - 是否使用ProTable组件，默认为false
+ * @example
+ * // 基础用法
+ * <ListDataContainer
+ *   columns={tableColumns}
+ *   fetchDataApi={getCourseList}
+ *   searchFormConfig={[
+ *     {
+ *       field: Select,
+ *       name: 'status',
+ *       label: '状态',
+ *     }
+ *     {
+ *       field: Input,
+ *       name: 'name',
+ *       label: '名称',
+ *       required: true,
+ *     }
+ *   ]}
+ * />
+ *
  */
 
 const SELECT_COMPONENTS = ['Select', 'TreeSelect', 'Cascader', 'DatePicker', 'TimePicker', 'Checkbox', 'Radio', 'Switch', 'Slider', 'Upload'];
@@ -76,10 +75,10 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
     return Component.displayName || Component.constructor.name;
   };
 
-  /**
-   * 数据加载与刷新方法
-   * @param {Object} [overrideParams={}] - 可选，用于覆盖内部参数的键值对
-   *   若传入，会覆盖同名的表单参数和分页参数（如page、pageSize或搜索字段）
+  /**
+   * 数据加载与刷新方法
+   * @param {Object} [overrideParams={}] - 可选，用于覆盖内部参数的键值对
+   *   若传入，会覆盖同名的表单参数和分页参数（如page、pageSize或搜索字段）
    */
   const loadDataSource = useCallback(async (overrideParams = {}) => {
     if (!fetchDataApi) return;
@@ -95,7 +94,7 @@ const ListDataContainer = /*#__PURE__*/forwardRef(({
 
       // 1. 获取组件内部的表单参数
       const formValues = await form.current.validateFields();
-      console.warn("formValues", formValues);
+      console.warn('formValues', formValues);
 
       // 2. 构造基础参数：分页参数 + 表单参数
       const baseParams = {

package/MediaQuery/index.js

@@ -7,11 +7,16 @@ const MEDIA_QUERY_LIST = {
   MIN_WIDTH_1200_AND_MAX_WIDTH_1439: '(min-width: 1200px) and (max-width: 1439px)',
   MIN_WIDTH_1440: '(min-width: 1440px)'
 };
-export default function MediaQuery({
+function MediaQuery({
   children,
   disabled
 }) {
   const [media, setMedia] = useState(undefined);
+
+  /** 显示弃用警告 */
+  useEffect(() => {
+    console.warn('[MediaQuery] 警告：该组件已弃用！');
+  }, []);
   const mediaQueries = useMemo(() => {
     if (disabled) return {};
     return Object.fromEntries(Object.entries(MEDIA_QUERY_LIST).map(([key, query]) => [key, window.matchMedia(query)]));
@@ -39,4 +44,6 @@ export default function MediaQuery({
     key: index,
     'data-media-query': media
   }) : item));
-}
+}
+MediaQuery.displayName = 'MediaQuery';
+export default MediaQuery;

package/PageLayout/index.js

@@ -1,5 +1,6 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useContext } from 'react';
 import { PageHeader } from '@ant-design/pro-layout';
+import { AppDataContext } from '@cqsjjb/jjb-data-provider';
 import './index.less';
 import { getPrefixCls } from '../tools/index.js';
 const prefixCls = getPrefixCls();
@@ -24,6 +25,9 @@ const PageLayout = /*#__PURE__*/memo(props => {
     onBack,
     'data-node-id': dataNodeId
   } = props;
+  const {
+    checkField
+  } = useContext(AppDataContext);
   const containerClass = [`${prefixCls}-layout-container`, transparent && `${prefixCls}-layout-container-transparent`, noStyle && `${prefixCls}-layout-container-no-style`].filter(Boolean).join(' ');
   const backHandler = useCallback(() => {
     if (onBack) {
@@ -40,21 +44,22 @@ const PageLayout = /*#__PURE__*/memo(props => {
     className: containerClass,
     "data-node-id": dataNodeId
   }, !header ? /*#__PURE__*/React.createElement(PageHeader, {
-    title: title,
+    title: checkField('DEFAULT_MENU', title),
     extra: extra,
     style: pageHeaderStyle,
     onBack: previous || onBack ? backHandler : undefined
   }) : header, formLine && /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-layout-container-tools`,
-    style: formLineStyle
+    style: formLineStyle,
+    className: `${prefixCls}-layout-container-tools`
   }, formLine), /*#__PURE__*/React.createElement("div", {
     style: contentStyle,
     className: `${prefixCls}-layout-container-content`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-layout-container-content-abs`
   }, children)), footer && /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-lay-container-bottom`,
-    style: footerStyle
+    style: footerStyle,
+    className: `${prefixCls}-lay-container-bottom`
   }, footer));
 });
+PageLayout.displayName = 'PageLayout';
 export default PageLayout;

package/PhoneBox/index.js

@@ -1,14 +1,14 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Empty, Space, message, Tooltip, Button, QRCode } from 'antd';
-import { SyncOutlined } from '@ant-design/icons';
 import { http } from '@cqsjjb/jjb-common-lib';
-import shexiang from './shexiang.svg';
+import { SyncOutlined } from '@ant-design/icons';
+import { Empty, Space, Tooltip, Button, QRCode } from 'antd';
+import phone from './phone.svg';
 import xinhao from './xinhao.svg';
 import wangluo from './wangluo.svg';
 import dianchi from './dianchi.svg';
-import phone from './phone.svg';
+import shexiang from './shexiang.svg';
 import './index.less';
-export default props => {
+function PhoneBox(props) {
   const {
     iframeUrl,
     // 展示内容url
@@ -118,7 +118,7 @@ export default props => {
   return /*#__PURE__*/React.createElement("div", {
     className: `phone-box ${size === 'small' ? 'phone-box-small' : ''}`
   }, /*#__PURE__*/React.createElement("img", {
-    alt: "",
+    alt: "\u624B\u673A",
     src: phone,
     width: 356,
     height: 720
@@ -130,23 +130,23 @@ export default props => {
     className: "phone-header-time"
   }, currentTime), /*#__PURE__*/React.createElement("img", {
     src: shexiang,
+    alt: "\u6444\u50CF\u5934",
     width: 76,
-    height: 23,
-    alt: ""
+    height: 23
   }), /*#__PURE__*/React.createElement(Space, {
     className: "phone-header-status"
   }, /*#__PURE__*/React.createElement("img", {
-    className: "status-xinhao",
     src: xinhao,
-    alt: ""
+    alt: "\u4FE1\u53F7",
+    className: "status-xinhao"
   }), /*#__PURE__*/React.createElement("img", {
-    className: "status-wangluo",
     src: wangluo,
-    alt: ""
+    alt: "\u4E92\u8054\u7F51\u8FDE\u63A5",
+    className: "status-wangluo"
   }), /*#__PURE__*/React.createElement("img", {
-    className: "status-dianchi",
     src: dianchi,
-    alt: ""
+    alt: "\u7535\u6C60",
+    className: "status-dianchi"
   }))), showEmpty && !iframeUrl ? /*#__PURE__*/React.createElement("div", {
     style: {
       width: 316,
@@ -165,10 +165,8 @@ export default props => {
     className: "phone-box-action"
   }, showPerview && /*#__PURE__*/React.createElement(Tooltip, {
     open: qrcodeVisible,
-    placement: "bottom",
     arrow: false,
     color: "#FFF",
-    rootClassName: "qrcode-preview-tooltip",
     title: /*#__PURE__*/React.createElement("div", {
       className: "qrcode-preview-container"
     }, /*#__PURE__*/React.createElement(QRCode, {
@@ -198,14 +196,18 @@ export default props => {
       style: {
         marginRight: '4px'
       }
-    }), "\u91CD\u65B0\u751F\u6210"))
+    }), "\u91CD\u65B0\u751F\u6210")),
+    placement: "bottom",
+    rootClassName: "qrcode-preview-tooltip"
   }, /*#__PURE__*/React.createElement(Button, {
     ref: qrcodeButtonRef,
+    color: "primary",
+    variant: "outlined",
     onClick: () => {
       setQrcodeVisible(!qrcodeVisible);
       getQrCodeUrl();
-    },
-    color: "primary",
-    variant: "outlined"
+    }
   }, "\u626B\u7801\u9884\u89C8")), extraAction));
-};
+}
+PhoneBox.displayName = 'PhoneBox';
+export default PhoneBox;

package/SearchForm/index.js

@@ -58,6 +58,7 @@ const SearchForm = ({
   }, [formRef, onRef]);
   const isControlled = expand !== undefined;
   const isOpen = isControlled ? expand : internalOpen;
+  // 展开/收起
   const handleToggle = () => {
     if (isControlled) {
       onExpand && onExpand(!expand);
@@ -72,8 +73,8 @@ const SearchForm = ({
   const getButtons = () => /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
-    htmlType: "submit",
-    loading: loading
+    loading: loading,
+    htmlType: "submit"
   }, "\u67E5\u8BE2"), /*#__PURE__*/React.createElement(Button, {
     icon: /*#__PURE__*/React.createElement(UndoOutlined, null),
     loading: loading,
@@ -91,21 +92,28 @@ const SearchForm = ({
     onClick: handleToggle
   }, isOpen ? '收起' : '展开'));
 
-  /**
-   * 处理 formLine，确保所有 Form.Item 都有 noStyle 属性
-   * @param {ReactNode[]} nodes - 表单节点数组
-   * @returns {ReactNode[]} - 处理后的节点数组
+  /**
+   * 处理 formLine，确保所有 Form.Item 都有 noStyle 属性
+   * @param {ReactNode[]} nodes - 表单节点数组
+   * @returns {ReactNode[]} - 处理后的节点数组
    */
   const processFormLine = nodes => {
     return nodes.map(node => {
       // 检查是否是 Form.Item 组件
       if (/*#__PURE__*/React.isValidElement(node) && node.type === Form.Item) {
         // 如果没有 noStyle 属性，则克隆并添加
-        if (!node.props.noStyle) {
-          return /*#__PURE__*/React.cloneElement(node, {
-            noStyle: true
-          });
-        }
+        const control = React.Children.only(node.props.children);
+        return /*#__PURE__*/React.cloneElement(node, {
+          noStyle: true,
+          children: /*#__PURE__*/React.cloneElement(control, {
+            style: {
+              ...(control.props.style || {}),
+              width: '100%'
+            },
+            allowClear: true,
+            ...control.props
+          })
+        });
       }
       return node;
     });
@@ -156,4 +164,5 @@ const SearchForm = ({
     }
   }, getButtons()))));
 };
+SearchForm.displayName = 'SearchForm';
 export default SearchForm;