fix: 1.修复上传问题。2.优化样式单位，增加百分比、vw/vh等。

JackySoft · Sep 1, 2024 · 38c27ec · 38c27ec
1 parent 8f0dc43
commit 38c27ec
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 22 deletions.
diff --git a/packages/editor/src/components/StyleConfig/BackgroundImage.tsx b/packages/editor/src/components/StyleConfig/BackgroundImage.tsx
@@ -23,7 +23,7 @@ const BackgroundImage = (props: any) => {
     }
   };
 
-  return <Input value={value} onChange={(e) => handleChange(e.target.value)} />;
+  return <Input value={value} onChange={(e) => handleChange(e.target.value)} placeholder="http://xxx.png" />;
 };
 
 export default BackgroundImage;
diff --git a/packages/editor/src/components/StyleConfig/BackgroundSize.tsx b/packages/editor/src/components/StyleConfig/BackgroundSize.tsx
@@ -32,7 +32,7 @@ const BackgroundSize = (props: any) => {
     props.onChange(val);
   };
   return (
-    <Flex gap={5}>
+    <Flex gap={3}>
       <Select
         placeholder="请选择"
         value={type}

diff --git a/packages/editor/src/components/StyleConfig/InputPx.tsx b/packages/editor/src/components/StyleConfig/InputPx.tsx
@@ -1,25 +1,44 @@
 import { useEffect, useState } from 'react';
-import { InputNumber } from 'antd';
-
+import { InputNumber, Select } from 'antd';
+const { Option } = Select;
 const InputPx = ({ value, onChange, ...props }: any) => {
   const [num, setNum] = useState<null | number | string>('');
+  const [unit, setUnit] = useState<string>('px');
 
   useEffect(() => {
-    const num = value?.toString().replace('px', '');
+    const num = value?.toString().replace(/(px|%|vw|vh|rem|em)/, '');
     if (num) setNum(num);
   }, [value]);
 
+  // 输入框改变
   const handleChange = (value: null | number | string) => {
     if (value) {
       setNum(value);
-      onChange(value + 'px');
+      onChange(value + unit);
     } else {
       setNum(null);
       onChange('');
     }
   };
 
-  return <InputNumber placeholder="输入尺寸: 10" {...props} addonAfter="px" value={num} onChange={(val) => handleChange(val)} />;
+  // 下拉框改变
+  const handleSelect = (value: string) => {
+    setUnit(value);
+    if (num !== null && num !== '') onChange(num + value);
+  };
+
+  const selectAfter = (
+    <Select defaultValue="px" onChange={handleSelect} size="small">
+      <Option value="px">px</Option>
+      <Option value="%">%</Option>
+      <Option value="vw">vw</Option>
+      <Option value="vh">vh</Option>
+      <Option value="em">em</Option>
+      <Option value="rem">rem</Option>
+    </Select>
+  );
+
+  return <InputNumber placeholder="输入尺寸: 10" {...props} addonAfter={selectAfter} value={num} onChange={(val) => handleChange(val)} />;
 };
 
 export default InputPx;
diff --git a/packages/editor/src/components/StyleConfig/MarginInput.tsx b/packages/editor/src/components/StyleConfig/MarginInput.tsx
@@ -16,9 +16,13 @@ const MarginInput = ({ form }: { form: FormInstance }) => {
   const handleChange = (value: string) => {
     setType(value);
   };
+  const basicLayout = {
+    labelCol: { span: 5 },
+    wrapperCol: { span: 18 },
+  };
   return (
     <>
-      <Form.Item label="边距">
+      <Form.Item label="边距" layout="horizontal" {...basicLayout}>
         <Radio.Group optionType="button" value={type} buttonStyle="solid" onChange={(e) => handleChange(e.target.value)}>
           <Radio.Button value="all">
             <BorderOuterOutlined />
@@ -34,7 +38,7 @@ const MarginInput = ({ form }: { form: FormInstance }) => {
         )}
         {type === 'single' && (
           <>
-            <Flex gap={10} style={{ marginTop: 10 }}>
+            <Flex gap={3} style={{ marginTop: 10 }}>
               <Form.Item name={['scopeStyle', 'margin']} hidden>
                 <InputPx />
               </Form.Item>
@@ -45,7 +49,7 @@ const MarginInput = ({ form }: { form: FormInstance }) => {
                 <InputPx placeholder="R: 10" />
               </Form.Item>
             </Flex>
-            <Flex gap={10} style={{ marginTop: 10 }}>
+            <Flex gap={3} style={{ marginTop: 10 }}>
               <Form.Item name={['scopeStyle', 'marginBottom']} noStyle>
                 <InputPx placeholder="B: 10" />
               </Form.Item>

diff --git a/packages/editor/src/components/StyleConfig/PaddingInput.tsx b/packages/editor/src/components/StyleConfig/PaddingInput.tsx
@@ -17,9 +17,14 @@ const PaddingInput = ({ form }: { form: FormInstance }) => {
     setType(value);
   };
 
+  const basicLayout = {
+    labelCol: { span: 5 },
+    wrapperCol: { span: 18 },
+  };
+
   return (
     <>
-      <Form.Item label="填充">
+      <Form.Item label="填充" {...basicLayout}>
         <Radio.Group optionType="button" value={type} buttonStyle="solid" onChange={(e) => handleChange(e.target.value)}>
           <Radio.Button value="all">
             <BorderOuterOutlined />
@@ -35,7 +40,7 @@ const PaddingInput = ({ form }: { form: FormInstance }) => {
         )}
         {type === 'single' && (
           <>
-            <Flex gap={10} style={{ marginTop: 10 }}>
+            <Flex gap={3} style={{ marginTop: 10 }}>
               <Form.Item name={['scopeStyle', 'padding']} hidden>
                 <InputPx placeholder="M" />
               </Form.Item>
@@ -46,7 +51,7 @@ const PaddingInput = ({ form }: { form: FormInstance }) => {
                 <InputPx placeholder="R: 10" />
               </Form.Item>
             </Flex>
-            <Flex gap={10} style={{ marginTop: 10 }}>
+            <Flex gap={3} style={{ marginTop: 10 }}>
               <Form.Item name={['scopeStyle', 'paddingBottom']} noStyle>
                 <InputPx placeholder="B: 10" />
               </Form.Item>

diff --git a/packages/editor/src/components/StyleConfig/StyleConfig.tsx b/packages/editor/src/components/StyleConfig/StyleConfig.tsx
@@ -80,22 +80,26 @@ const StyleConfig = () => {
     labelCol: { span: 7 },
     wrapperCol: { span: 16 },
   };
+  const basicLayout = {
+    labelCol: { span: 5 },
+    wrapperCol: { span: 18 },
+  };
   return (
     <Form className={styles.ui} {...formLayout} form={form} layout="horizontal" labelAlign="right" onValuesChange={run}>
       <TitleStyle>自定义样式</TitleStyle>
       <Form.Item name="scopeCss" noStyle>
         <VsEditor language="css" />
       </Form.Item>
       <TitleStyle>基础</TitleStyle>
-      <Form.Item name={['scopeStyle', 'width']} label={'宽度'}>
+      <Form.Item name={['scopeStyle', 'width']} label={'宽度'} {...basicLayout}>
         <InputPx />
       </Form.Item>
-      <Form.Item name={['scopeStyle', 'height']} label={'高度'}>
+      <Form.Item name={['scopeStyle', 'height']} label={'高度'} {...basicLayout}>
         <InputPx />
       </Form.Item>
       <MarginInput form={form} />
       <PaddingInput form={form} />
-      <Form.Item key={'opacity'} name={['scopeStyle', 'opacity']} label={'透明度'}>
+      <Form.Item key={'opacity'} name={['scopeStyle', 'opacity']} label={'透明'} {...basicLayout}>
         <Slider min={0} max={1} step={0.1} />
       </Form.Item>
       <TitleStyle>布局</TitleStyle>
@@ -236,7 +240,7 @@ const StyleConfig = () => {
         ></Select>
       </Form.Item>
       <TitleStyle>定位</TitleStyle>
-      <Form.Item key={'position'} name={['scopeStyle', 'position']} label={'定位'}>
+      <Form.Item key={'position'} name={['scopeStyle', 'position']} label={'定位'} {...basicLayout}>
         <Select
           placeholder={'请选择'}
           options={[
@@ -264,20 +268,20 @@ const StyleConfig = () => {
           suffixIcon={<CaretDownOutlined />}
         />
       </Form.Item>
-      <Form.Item key={'zIndex'} name={['scopeStyle', 'zIndex']} label={'zIndex'}>
-        <InputNumber />
+      <Form.Item key={'zIndex'} name={['scopeStyle', 'zIndex']} label={'zIndex'} {...basicLayout}>
+        <InputNumber placeholder="层级" />
       </Form.Item>
       {!['', undefined, 'static'].includes(form.getFieldValue(['scopeStyle', 'position'])) && (
-        <Form.Item label="位置">
-          <Flex gap={10}>
+        <Form.Item label="位置" {...basicLayout}>
+          <Flex gap={3}>
             <Form.Item name="top" noStyle>
               <InputPx placeholder="T: 10" />
             </Form.Item>
             <Form.Item name="right" noStyle>
               <InputPx placeholder="R: 10" />
             </Form.Item>
           </Flex>
-          <Flex gap={10} style={{ marginTop: 10 }}>
+          <Flex gap={3} style={{ marginTop: 10 }}>
             <Form.Item name="bottom" noStyle>
               <InputPx placeholder="B: 10" />
             </Form.Item>

diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx
@@ -84,6 +84,7 @@ const Header = memo(() => {
       const file = new File([blob], `${pageId}-${Date.now()}.png`, { type: 'image/png' });
       const res = await uploadImg({
         file: file, // File 对象
+        id: userInfo.userId + '_' + pageId, // 页面ID
       });
       return res.url;
     } catch (error) {