🆕 右侧样式调整

src/components/BasicShop/BasicComponents/Form/BasePopoverForm.tsx

@@ -0,0 +1,96 @@
+import styles from './baseForm.less';
+import React, { ReactText } from 'react';
+import { Button } from 'antd';
+import {
+  baseFormDateTpl,
+  baseFormMyRadioTpl,
+  baseFormMyCheckboxTpl,
+  baseFormMySelectTpl,
+  baseFormNumberTpl,
+  baseFormTextAreaTpl,
+  baseFormTextTpl,
+  baseFormUnionType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+// 维护表单控件， 提高form渲染性能
+
+type TBaseForm = {
+  [key in baseFormUnionType]: any;
+};
+
+const BaseForm: TBaseForm = {
+  Text: (props: baseFormTextTpl & { onChange: (v: string | undefined) => void }) => {
+    const { label, onChange } = props;
+    return (
+      <Button
+        style={{
+          color: '#fff',
+          backgroundColor: '#4A4A4A',
+          borderRadius: '2px',
+          lineHeight: '0px',
+        }}
+        onChange={() => onChange}
+      >
+        {label}
+      </Button>
+    );
+  },
+  Textarea: (props: baseFormTextAreaTpl & { onChange: (v: string | undefined) => void }) => {
+    const { label, onChange } = props;
+    return (
+      <Button style={{ color: '#fff', backgroundColor: '#4A4A4A' }} onChange={() => onChange}>
+        {label}
+      </Button>
+    );
+  },
+  Number: (props: baseFormNumberTpl & { onChange: (v: string | undefined | number) => void }) => {
+    const { label, onChange } = props;
+    return (
+      <Button style={{ color: '#fff', backgroundColor: '#4A4A4A' }} onChange={() => onChange}>
+        {label}
+      </Button>
+    );
+  },
+  MyRadio: (props: baseFormMyRadioTpl & { onChange: (v: string | undefined | number) => void }) => {
+    const { label, onChange } = props;
+    return (
+      <div>
+        <Button style={{ color: '#fff', backgroundColor: '#4A4A4A' }} onChange={() => onChange}>
+          {label}
+        </Button>
+      </div>
+    );
+  },
+  MyCheckbox: (
+    props: baseFormMyCheckboxTpl & { onChange: (v: Array<ReactText> | undefined) => void },
+  ) => {
+    const { label, onChange } = props;
+    return (
+      <div>
+        <Button style={{ color: '#fff', backgroundColor: '#4A4A4A' }} onChange={() => onChange}>
+          {label}
+        </Button>
+      </div>
+    );
+  },
+  Date: (props: baseFormDateTpl & { onChange: (v: Date) => void }) => {
+    const { label, onChange } = props;
+    return (
+      <Button style={{ color: '#fff', backgroundColor: '#4A4A4A' }} onChange={() => onChange}>
+        {label}
+      </Button>
+    );
+  },
+  MySelect: (
+    props: baseFormMySelectTpl & { onChange: ((v: Record<string, any>) => void) | undefined },
+  ) => {
+    const { label, onChange } = props;
+    return (
+      <Button style={{ color: '#fff', backgroundColor: '#4A4A4A' }} onChange={() => onChange}>
+        {label}
+      </Button>
+    );
+  },
+};
+
+export default BaseForm;

src/components/BasicShop/BasicComponents/Form/baseForm.less

@@ -1,8 +1,7 @@
 .radioWrap {
   margin-bottom: 10px;
   .radioTitle {
-    padding: 6px 16px;
+    padding: 19px 14px;
-    // font-size: 15px;
   }
   .radioItem {
     margin-top: 10px;

src/components/CommonComponents/VisualComponents/Form/baseForm.less

@@ -1,7 +1,7 @@
 .radioWrap {
   margin-bottom: 10px;
   .radioTitle {
-    padding: 6px 16px;
+    padding: 19px 14px;
     // font-size: 15px;
   }
   .radioItem {

src/components/PanelComponents/Color/index.tsx

@@ -36,7 +36,7 @@ class colorPicker extends React.Component<ColorProps> {
       <div>
         <div
           style={{
-            padding: '5px',
+            // padding: '5px',
             background: '#fff',
             borderRadius: '1px',
             boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
@@ -47,8 +47,8 @@ class colorPicker extends React.Component<ColorProps> {
         >
           <div
             style={{
-              width: '36px',
+              width: '20px',
-              height: '14px',
+              height: '20px',
               borderRadius: '2px',
               background: `rgba(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b}, ${this.state.color.a})`,
             }}

src/components/PanelComponents/FormEditor/index.tsx

@@ -156,7 +156,7 @@ const FormEditor = (props: FormEditorProps) => {
               </Form.Item>
             )}
             {item.type === 'FormItems' && (
-              <Form.Item label={item.name} name={item.key} valuePropName="formList">
+              <Form.Item name={item.key} valuePropName="formList">
                 <FormItems data={item.data} />
               </Form.Item>
             )}

src/components/PanelComponents/FormItems/FormItems.tsx

@@ -1,10 +1,12 @@
 import React, { memo, useState } from 'react';
 import BaseForm from '../../BasicShop/BasicComponents/Form/BaseForm';
+import BasePopoverForm from '../../BasicShop/BasicComponents/Form/BasePopoverForm';
 import EditorModal from './EditorModal';
-import { EditOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import { MinusCircleFilled, EditFilled, PlusOutlined } from '@ant-design/icons';
 import styles from './formItems.less';
 import { baseFormUnion, TFormItemsDefaultType } from '../FormEditor/types';
 import { uuid } from '@/utils/tool';
+import { Button, Popover } from 'antd';
 
 // import { Popconfirm } from 'antd';
 
@@ -65,6 +67,7 @@ const FormItems = (props: FormItemsProps) => {
   const [formData, setFormData] = useState<TFormItemsDefaultType>(formList || []);
   const [visible, setVisible] = useState(false);
   const [curItem, setCurItem] = useState<baseFormUnion>();
+  const [isFormTplVisible, setFormTplVisible] = useState(false);
 
   const handleAddItem = (item: baseFormUnion) => {
     let tpl = formTpl.find(v => v.type === item.type);
@@ -95,8 +98,12 @@ const FormItems = (props: FormItemsProps) => {
     onChange && onChange(newData);
     setVisible(false);
   };
+  const handleVisibleChange = (visible: boolean) => {
+    setFormTplVisible(visible);
+  };
   return (
     <div className={styles.formItemWrap}>
+      <div className={styles.formTitle}>表单控件</div>
       <div className={styles.editForm}>
         {formData.map((item: baseFormUnion, i: number) => {
           let FormItem = BaseForm[item.type];
@@ -105,34 +112,62 @@ const FormItems = (props: FormItemsProps) => {
               <div className={styles.disClick}>
                 <FormItem {...item} />
               </div>
-              <div className={styles.operationWrap}>
+              <div className={styles.deleteWrap}>
-                <span className={styles.operationBtn} onClick={() => handleEditItem(item)}>
-                  <EditOutlined />
-                </span>
                 <span className={styles.operationBtn} onClick={() => handleDelItem(item)}>
-                  <MinusCircleOutlined />
+                  <MinusCircleFilled />
+                </span>
+              </div>
+              <div className={styles.editWrap}>
+                <span className={styles.operationBtn} onClick={() => handleEditItem(item)}>
+                  <EditFilled />
                 </span>
               </div>
             </div>
           );
         })}
+        <div className={styles.formAddWrap}>
+          <Popover
+            content={
+              <>
+                <div className={styles.formTpl} style={{ color: 'red' }}>
+                  {formTpl.map((item, i) => {
+                    let FormItem = BasePopoverForm[item.type];
+                    return (
+                      <div className={styles.formItem} key={i} onClick={() => handleAddItem(item)}>
+                        <div
+                          className={styles.disClick}
+                          style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            overflow: 'row',
+                            marginTop: '10px',
+                          }}
+                        >
+                          <FormItem {...item} />
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+                {/* <a style={{color: 'red'}} onClick={() => setFormTplVisible(false)}>Close</a> */}
+              </>
+            }
+            color="#4A4A4A"
+            overlayStyle={{ width: '200px' }}
+            // title="表单模板"
+            trigger="click"
+            placement="left"
+            visible={isFormTplVisible}
+            autoAdjustOverflow
+            onVisibleChange={handleVisibleChange}
+          >
+            <Button block icon={<PlusOutlined />}>
+              添加
+            </Button>
+          </Popover>
+        </div>
       </div>
-      <div className={styles.formTpl}>
+
-        <h4>表单模版</h4>
-        {formTpl.map((item, i) => {
-          let FormItem = BaseForm[item.type];
-          return (
-            <div className={styles.formItem} key={i}>
-              <div className={styles.disClick}>
-                <FormItem {...item} />
-              </div>
-              <span className={styles.addBtn} onClick={() => handleAddItem(item)}>
-                添加
-              </span>
-            </div>
-          );
-        })}
-      </div>
       <EditorModal
         item={curItem}
         onSave={handleSaveItem}

src/components/PanelComponents/FormItems/formItems.less

@@ -1,55 +1,87 @@
 .formItemWrap {
+  .formTitle {
+    width: 56px;
+    height: 20px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: bold;
+    color: #000000;
+    line-height: 20px;
+  }
   .editForm {
+    text-align: left;
+    width: 251px;
     .formItem {
       position: relative;
-      &:hover {
+      padding-left: 2px;
-        .operationWrap {
+      .common {
-          display: inline-block;
-        }
-      }
-      .operationWrap {
         position: absolute;
-        display: none;
+        top: 19px;
-        right: 0;
-        top: 16px;
         box-shadow: 0 0 20px #fff;
-        background-color: #fff;
         .operationBtn {
           margin-right: 15px;
           display: inline-block;
           cursor: pointer;
         }
       }
+      .deleteWrap {
+        .common;
+        left: 0;
+      }
+      .editWrap {
+        .common;
+        right: -18px;
+      }
+    }
+    .formAddWrap {
+      font-size: 14px;
+      font-weight: 400;
+      color: #4a4a4a;
+      line-height: 20px;
+      background-color: #2f54eb;
     }
   }
-  .formTpl {
+  .formAddWrap {
-    margin-top: 12px;
+    .formTpl {
-    border-top: 1px dashed #ccc;
+      margin-top: 12px;
-    padding-top: 16px;
+      border-top: 1px dashed #ccc;
-    .formItem {
+      padding-top: 16px;
-      position: relative;
+      background-color: #4a4a4a;
-      border: 1px solid #ccc;
+      .formItem {
-      margin-bottom: 2px;
+        button,
-      .disClick {
+        [type='button'] {
-        pointer-events: none;
+          color: #fff;
-      }
+          background-color: #4a4a4a;
-      &:hover {
+          border: 1px solid #fff;
-        border-color: #2f54eb;
+          border-radius: 4px 0px 0px 0px;
-        .addBtn {
-          display: inline-block;
         }
-      }
+        position: relative;
-      .addBtn {
+        border: 1px solid #ccc;
-        position: absolute;
+        margin-bottom: 2px;
-        right: 0;
+        background-color: #4a4a4a;
-        top: 50%;
-        transform: translateY(-50%);
-        display: none;
-        padding: 3px 6px;
-        color: #fff;
-        border-radius: 3px;
-        background-color: #2f54eb;
         cursor: pointer;
+        .disClick {
+          pointer-events: none;
+          color: #fff;
+        }
+        &:hover {
+          border-color: #2f54eb;
+          .addBtn {
+            display: inline-block;
+          }
+        }
+        .addBtn {
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          display: none;
+          padding: 3px 6px;
+          color: #fff;
+          border-radius: 3px;
+          background-color: #2f54eb;
+          cursor: pointer;
+        }
       }
     }
   }

src/global.css

@@ -72,7 +72,56 @@ body {
   padding-right: 10px!important;
   padding-bottom: 40px;
 }
-
+#form_editor .ant-form-item-label > label {
-.ant-form-item-label > label {
+  position: fixed;
-  color: #4A4A4A !important;
+  color: #4A4A4A;
+}
+#form_editor .ant-form-item-label {
+  text-align: start
+}
+#form_editor .ant-form-item-control {
+  text-align: end;
+}
+#form_editor .ant-form-item {
+  margin-bottom: 20px;
+}
+#form_editor .ant-input-number-handler-wrap {
+  width: 12px;
+}
+#form_editor .ant-input, #form_editor .ant-input-number {
+  background-color: #f6f6f6;
+  width: 160px;
+}
+#form_editor .ant-input-number {
+  width: 42px;
+  height: 24px;
+  border: 1px solid #DBDBDB;
+}
+#form_editor .ant-input-number-handler-down-inner  {
+  text-align: right;
+  transform: translateY(-50%) translateX(13%);
+}
+#form_editor .ant-input-number-handler-up-inner  {
+  text-align: right;
+  transform: translateY(-26%) translateX(15%);
+}
+#form_editor .ant-input-number-input  {
+  height: 20px;
+  line-height: 20px;
+  padding-left: 4px;
+}
+#form_editor .ant-form-item-control-input-content  {
+  line-height: 14px;
+}
+#form_editor .ant-form-item-label > label::after {
+  content: '';
+}
+#form_editor .za-cell:after {
+  border-top: 0px;
+}
+#form_editor .za-cell__content {
+  font-size: 14px;
+}
+#form_editor .za-select--arrow .za-select__input:after {
+  display: none;
 }

src/pages/editor/Container.tsx

@@ -542,7 +542,7 @@ const Container = (props: {
           className={styles.rightcolla}
           style={{
             position: 'absolute',
-            right: rightColla ? 0 : '400px',
+            right: rightColla ? 0 : '304px',
             transform: 'translate(0,-50%)',
             transition: 'all ease-in-out 0.5s',
           }}

src/pages/editor/index.less

@@ -232,8 +232,8 @@
       }
     }
     .attrSetting {
-      width: 400px;
+      width: 304px;
-      padding: 20px 0 60px 20px;
+      padding: 23px 0 60px 20px;
       background: #fff;
       height: 100%;
       box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.1);
@@ -243,6 +243,7 @@
       .tit {
         margin-bottom: 16px;
         color: #000;
+        font-weight: bold;
       }
       .posWrap {
         padding: 20px;
@@ -300,7 +301,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      right: 400px;
+      right: 304px;
       top: 50%;
       cursor: pointer;
       &:hover {