fix: 样式组件修改

package.json

 {
     "name": "panda-xform",
-    "version": "2.6.8",
-    "description": "2.6.8: 修改版本号",
+    "version": "2.7.0",
+    "description": "2.7.0: 样式组件修改",
     "keywords": [
         "panda-xform"
     ],
@@ -32,7 +32,7 @@
         "antd": "4.20.7",
         "antd-img-crop": "^3.14.1",
         "form-render": "1.14.7",
-        "fr-generator": "2.8.3",
+        "fr-generator": "2.8.4",
         "http-proxy-middleware": "^1.0.6",
         "moment": "^2.29.1",
         "qrcode.react": "^3.1.0",

src/core/FormDesigner/index.js

@@ -8,6 +8,7 @@ import { saveTableConfig, GetTableConfigJson } from '../../apis/process'
 import FormRender from '../FormRender'
 import { isObject } from '../../utils'
 import Drag from '../components/Drag'
+import styles from '../../main.less'
 
 const FormDesigner = (props, ref) => {
 
@@ -218,10 +219,10 @@ const FormDesigner = (props, ref) => {
   }
 
   return (
-    <div className={prefixCls} style={{ width: '100%', height: '100%', background: 'white' }}>
+    <div className={styles.pandaXform} style={{ width: '100%', height: '100%', background: 'white' }}>
       <div style={{ height: '100%' }}>
         <Generator
-          configProvider={{ prefixCls: prefixClsPandaXform }}
+          // configProvider={{ prefixCls: prefixClsPandaXform }}
           mapping={{
             object: 'Header',
           }}

src/core/FormRender/index.js

@@ -10,6 +10,7 @@ import { ConfigProvider, Spin } from 'antd'
 import widgets from '../widgets'
 import { isObject } from '../../utils'
 import { getWatch } from './watch'
+import styles from '../../main.less'
 
 const XRender = (props, ref) => {
 
@@ -102,7 +103,7 @@ const XRender = (props, ref) => {
   }
 
   return (
-    <div className={prefixCls}>
+    <div className={styles.pandaXform}>
       <Spin spinning={loading} tip="Loading...">
         <FormRender
           configProvider={{ prefixCls: pandaXform }}

src/core/FormRender/watch.js

@@ -11,7 +11,9 @@ export const debounce = (fn) => {
       clearTimeout(t)
     }
     t = setTimeout(function () {
+      if (typeof fn === 'function') {
         fn.call(context, ...args)
+      }
     }, 300)
   }
 }

src/core/widgets/text/Coding/index.js

@@ -2,8 +2,7 @@ import React, { useEffect, useContext } from 'react'
 import { Input, Popover, ConfigProvider } from 'antd'
 import { QrcodeOutlined } from '@ant-design/icons'
 import QRcode from 'qrcode.react'
-import './index.less'
-import moment from 'moment'
+import styles from './index.less'
 
 function toUtf8(str) {
   let out = ''
@@ -53,7 +52,7 @@ const Coding = (props) => {
   )
 
   return (
-    <div className={`${prefixCls}-input`} isdisabled={JSON.stringify(disabled)}>
+    <div className={styles.coding} isdisabled={JSON.stringify(disabled)}>
       <Input
         onChange={inputChange}
         value={value}

src/core/widgets/text/Coding/index.less

 @import '~antd/es/style/themes/default.less';
-@pandaXform: ~'@{ant-prefix}-pandaXform';
-.@{pandaXform} {
-  .@{pandaXform}-input[isdisabled='true'] {
+.coding {
+  &[isdisabled='true'] {
     .@{ant-prefix}-input-group-addon {
       border: 1px solid #e9e9e9;
     }

src/core/widgets/text/TextInput/index.js

@@ -3,7 +3,7 @@ import { Input, message, ConfigProvider } from 'antd'
 import Icon, { PlusOutlined } from '@ant-design/icons'
 import * as icons from '@ant-design/icons'
 import { GetFieldValueFromTable } from '../../../../apis/process'
-import './index.less'
+import styles from './index.less'
 
 const iconList = Object.keys(icons).filter((item) => typeof icons[item] === 'object')
 
@@ -24,8 +24,6 @@ const debounce = (fn) => {
 const TextInput = (props) => {
 
   const userInfo = window?.globalConfig?.userInfo || { fullName: '【本人姓名】', depart: { name: '【本人部门】' } }
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext)
-  const prefixCls = getPrefixCls('pandaXform')
   const { value, onChange, schema, addons } = props
   const { title, disabled, placeholder, presetValue, addonBefore, addonAfter, maxLength, rules, uniqueVerify, tableName, fieldName, isStoreID } = schema
 
@@ -95,7 +93,7 @@ const TextInput = (props) => {
   }, [uniqueVerify, tableName, fieldName])
 
   return (
-    <div className={`${prefixCls}-input`} isdisabled={JSON.stringify(disabled)}>
+    <div className={styles.textInput} isdisabled={JSON.stringify(disabled)}>
       <Input
         disabled={disabled}
         value={valueShow}

src/core/widgets/text/TextInput/index.less

 @import '~antd/es/style/themes/default.less';
-@pandaXform: ~'@{ant-prefix}-pandaXform';
-.@{pandaXform} {
-  .@{pandaXform}-input[isdisabled='true'] {
+.textInput {
+  &[isdisabled='true'] {
     .@{ant-prefix}-input-group-addon {
       border: 1px solid #e9e9e9;
     }

src/main.less

@@ -10,8 +10,8 @@ body #app {
   }
 }
 
-@pandaXform-prefix-cls: ~'@{ant-prefix}-pandaXform';
-.@{pandaXform-prefix-cls} {
+// @pandaXform-prefix-cls: ~'@{ant-prefix}-pandaXform';
+.pandaXform {
   background: white;
   .fr-generator-container .left-layout {
     .left-item {
@@ -165,21 +165,20 @@ body #app {
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
-    padding: 10px 10px;
-    .@{pandaXform-prefix-cls}-operate-reset {
-      margin-right: 10px;
-    }
-    .pandaXform-text-area {
-      width: 100% !important;
-    }
+    padding: 10px 10px; // .@{pandaXform-prefix-cls}-operate-reset {
+    //   margin-right: 10px;
+    // }
+    // .pandaXform-text-area {
+    //   width: 100% !important;
+    // }
   }
   &-group {
-    .@{pandaXform-prefix-cls}-title {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 16px;
-    }
+    // .@{pandaXform-prefix-cls}-title {
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: center;
+    //   font-size: 16px;
+    // }
     i {
       width: 3px;
       height: 16px;
@@ -207,16 +206,15 @@ body #app {
     input {
       cursor: default;
     }
-  }
-  .@{pandaXform-prefix-cls}-divider-horizontal {
-    margin: 10px;
-    &:first-child {
-      display: none !important;
-    }
-  }
-  .@{pandaXform-prefix-cls}-input[disabled] {
-    background-color: #ffffff60 !important;
-  }
+  } // .@{pandaXform-prefix-cls}-divider-horizontal {
+  //   margin: 10px;
+  //   &:first-child {
+  //     display: none !important;
+  //   }
+  // }
+  // .@{pandaXform-prefix-cls}-input[disabled] {
+  //   background-color: #ffffff60 !important;
+  // }
   /** @Tips: 在原有框架下，表单渲染后，使用的是flex自动布局，与calc来计算组件宽度，未设置固定宽度，导致页面布局错乱 */
   .fr-content .fr-item-wrapper>div {
     width: 100%;