🆕 右侧样式调整

2026-01-04 18:28:11 +00:00 · 2020-10-13 22:54:11 +08:00 · 2020-10-13 22:54:11 +08:00 · cc2c9b72cf
commit cc2c9b72cf
parent 937a0d9bf3
10 changed files with 284 additions and 72 deletions
--- a/src/components/BasicShop/BasicComponents/Form/BasePopoverForm.tsx
+++ b/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;
--- a/src/components/BasicShop/BasicComponents/Form/baseForm.less
+++ b/src/components/BasicShop/BasicComponents/Form/baseForm.less
@ -1,8 +1,7 @@
 .radioWrap {
  margin-bottom: 10px;
  .radioTitle {
-    padding: 6px 16px;
-    // font-size: 15px;
+    padding: 19px 14px;
  }
  .radioItem {
    margin-top: 10px;
--- a/src/components/CommonComponents/VisualComponents/Form/baseForm.less
+++ b/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 {
--- a/src/components/PanelComponents/Color/index.tsx
+++ b/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',
-              height: '14px',
+              width: '20px',
+              height: '20px',
              borderRadius: '2px',
              background: `rgba(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b}, ${this.state.color.a})`,
            }}
--- a/src/components/PanelComponents/FormEditor/index.tsx
+++ b/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>
            )}
--- a/src/components/PanelComponents/FormItems/FormItems.tsx
+++ b/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}>
-                <span className={styles.operationBtn} onClick={() => handleEditItem(item)}>
-                  <EditOutlined />
-                </span>
+              <div className={styles.deleteWrap}>
                <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}
--- a/src/components/PanelComponents/FormItems/formItems.less
+++ b/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 {
-        .operationWrap {
-          display: inline-block;
-        }
-      }
-      .operationWrap {
+      padding-left: 2px;
+      .common {
        position: absolute;
-        display: none;
-        right: 0;
-        top: 16px;
+        top: 19px;
        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 {
-    margin-top: 12px;
-    border-top: 1px dashed #ccc;
-    padding-top: 16px;
-    .formItem {
-      position: relative;
-      border: 1px solid #ccc;
-      margin-bottom: 2px;
-      .disClick {
-        pointer-events: none;
-      }
-      &:hover {
-        border-color: #2f54eb;
-        .addBtn {
-          display: inline-block;
+  .formAddWrap {
+    .formTpl {
+      margin-top: 12px;
+      border-top: 1px dashed #ccc;
+      padding-top: 16px;
+      background-color: #4a4a4a;
+      .formItem {
+        button,
+        [type='button'] {
+          color: #fff;
+          background-color: #4a4a4a;
+          border: 1px solid #fff;
+          border-radius: 4px 0px 0px 0px;
        }
-      }
-      .addBtn {
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        display: none;
-        padding: 3px 6px;
-        color: #fff;
-        border-radius: 3px;
-        background-color: #2f54eb;
+        position: relative;
+        border: 1px solid #ccc;
+        margin-bottom: 2px;
+        background-color: #4a4a4a;
        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;
+        }
      }
    }
  }
--- a/src/global.css
+++ b/src/global.css
@ -72,7 +72,56 @@ body {
  padding-right: 10px!important;
  padding-bottom: 40px;
 }
-
-.ant-form-item-label > label {
-  color: #4A4A4A !important;
+#form_editor .ant-form-item-label > label {
+  position: fixed;
+  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;
 }
--- a/src/pages/editor/Container.tsx
+++ b/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',
          }}
--- a/src/pages/editor/index.less
+++ b/src/pages/editor/index.less
@ -232,8 +232,8 @@
      }
    }
    .attrSetting {
-      width: 400px;
-      padding: 20px 0 60px 20px;
+      width: 304px;
+      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 {