fix: 工作台优化

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/Group/index.js

@@ -3,6 +3,7 @@ import styles from './index.less'
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
 import { GlobalStore } from '../../index'
 import { message } from 'antd'
+import TipBox from '../TipBox'
 
 const Group = (props) => {
 
@@ -132,21 +133,23 @@ const Group = (props) => {
         )
       }
       {
-        props.children.map(v => {
-          return (
-            <div
-              key={v.id}
-              className={styles.card}
-              widget={v.widget}
-              onClick={(e) => cardClick(e, v)}
-              active={`${v.active}`}
-            >
-              {
-                v.active && <span className={styles.deleted} onClick={(e) => deleteCrad(e, v)}>删除</span>
-              }
-            </div>
-          )
-        })
+        props.children?.length > 0 ? (
+          props.children?.map(v => {
+            return (
+              <div
+                key={v.id}
+                className={styles.card}
+                widget={v.widget}
+                onClick={(e) => cardClick(e, v)}
+                active={`${v.active}`}
+              >
+                {
+                  v.active && <span className={styles.deleted} onClick={(e) => deleteCrad(e, v)}>删除</span>
+                }
+              </div>
+            )
+          })
+        ) : <TipBox text='左侧拖拽组件到这里' />
       }
     </div>
   )

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/TipBox/index.js

+import React from 'react'
+import styles from './index.less'
+
+const TipBox = (props) => {
+  return (
+    <div className={styles.TipBox} style={props.style}>
+      <div className={styles.TipBoxText}>{props.text}</div>
+    </div>
+  )
+}
+
+export default TipBox
\ No newline at end of file

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/TipBox/index.less

+.TipBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .TipBoxText {
+    width: 180px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    border: 1px dashed #DDDDDD;
+    background: #F4F4F4;
+  }
+}
\ No newline at end of file

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.js

@@ -11,6 +11,7 @@ import {
 import { useDrag, useDrop, DndProvider } from 'react-dnd'
 import { GlobalStore } from '../index'
 import Group from './Group'
+import TipBox from './TipBox'
 import moment from 'moment'
 import { getSiteTree } from '@/services/siteManage/api'
 import { Carousel } from 'antd'
@@ -32,7 +33,7 @@ const Container = (props, ref) => {
   const moblieRef = useRef(null)
   const [currentSite, setCurrentSite] = useState('永吉水务有限公司')
   const { shema, setShema } = useContext(GlobalStore)
-  const { carousel } = shema
+  const { work, carousel } = shema
 
   const [, drop] = useDrop(() => {
     return {
@@ -50,7 +51,7 @@ const Container = (props, ref) => {
     shema?.work.forEach(v => {
       array.push({ ...v, active: false, children: v.children.map(s => ({ ...s, active: false })) })
     })
-    setShema({ ...shema, work: array, active: true })
+    setShema({ ...shema, work: array, active: true, carousel: { ...shema.carousel, active: false } })
   }
 
   const getSite = async () => {
@@ -120,7 +121,9 @@ const Container = (props, ref) => {
           </div>
           <div style={{ padding: '10px' }}>
             {
-              shema?.work?.map((v, i) => <Group key={v.id} index={i} {...v} />)
+              work?.length > 0 ? (
+                work?.map((v, i) => <Group key={v.id} index={i} {...v} />)
+              ) : <TipBox style={{ marginTop: '10px' }} text='左侧拖拽布局到这里' />
             }
           </div>
         </div>
@@ -135,6 +138,7 @@ const Container = (props, ref) => {
           className={styles.slideShow}
           onClick={(e) => carouselClick(e)}
           active={`${carousel?.active}`}
+          style={!carousel?.active && !carousel?.imgUrls?.length > 0 ? { borderBottom: '1px dashed #DDDDDD' } : {}}
         >
           <div className={styles.top}>
             <div className={styles['top-left']}>
@@ -147,21 +151,27 @@ const Container = (props, ref) => {
               <span className={styles['r-text']}>{currentDate}</span>
             </div>
           </div>
-          <Carousel autoplay>
-            {
-              shema?.carousel?.imgUrls?.map(v => {
-                return (
-                  <div className={styles['carousel-item']}>
-                    <img style={{ width: '100%', height: '100%' }} src={`${window.origin}/PandaOMS/OMS/FileCenter/DownLoadFiles?module=图库&filePath=${v}`} />
-                  </div>
-                )
-              })
-            }
-          </Carousel>
+          {
+            carousel?.imgUrls?.length > 0 ? (
+              <Carousel autoplay>
+                {
+                  carousel?.imgUrls?.map(v => {
+                    return (
+                      <div className={styles['carousel-item']}>
+                        <img style={{ width: '100%', height: '100%' }} src={`${window.origin}/PandaOMS/OMS/FileCenter/DownLoadFiles?module=图库&filePath=${v}`} />
+                      </div>
+                    )
+                  })
+                }
+              </Carousel>
+            ) : <TipBox text='点击此处设置轮播图' />
+          }
         </div>
-        <div style={{ padding: '10px' }}>
+        <div className={styles.groups}>
           {
-            shema?.work?.map((v, i) => <Group key={v.id} index={i} {...v} />)
+            work?.length > 0 ? (
+              work?.map((v, i) => <Group key={v.id} index={i} {...v} />)
+            ) : <TipBox text='左侧拖拽布局到这里' />
           }
         </div>
       </div>
@@ -171,14 +181,17 @@ const Container = (props, ref) => {
   return (
     <div className={styles.container}>
       <div className={styles.content}>
-        <div
-          ref={moblieRef}
-          className={styles.moblie}
-          onClick={() => pageClick()}
-          active={`${shema.active}`}
-          style={{ background: shema?.background }}
-        >
-          {getMoblieCenter()}
+        <div className={styles.moblieBox}>
+          <div className={styles.moblieBoxTop}></div>
+          <div
+            ref={moblieRef}
+            className={styles.moblie}
+            onClick={() => pageClick()}
+            active={`${shema.active}`}
+            style={{ background: shema?.background }}
+          >
+            {getMoblieCenter()}
+          </div>
         </div>
         <div className={styles['c-btns']}>
           {

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Container/index.less

@@ -38,8 +38,26 @@
         }
       }
     }
+    .moblieBox {
+      position: relative;
+      padding: 15px 10px;
+      background: url('@{imgSrc}/手机壳.png');
+      background-size: 100% 100%;
+      .moblieBoxTop {
+        position: absolute;
+        z-index: 99;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 20px;
+        width: 85%;
+        height: 10px;
+        background: url('@{imgSrc}/手机状态.png');
+        background-size: 100% 100%;
+      }
+    }
     .moblie {
       width: 330px;
+      border-radius: 15px;
       overflow: auto;
       background: #f7f7f7;
       border: 1px solid #e4e1e1;
@@ -98,13 +116,16 @@
         height: 650px;
         position: relative;
         .slideShow {
+          border-radius: 15px 15px 0 0;
           position: relative;
           width: 100%;
-          height: 150px;
+          height: 160px;
+          overflow: hidden;
           .top {
             position: absolute;
             width: 100%;
             padding: 10px;
+            padding-top: 22px;
             z-index: 99;
             display: flex;
             justify-content: space-between;
@@ -150,10 +171,12 @@
             border: 2px solid #001bff;
           }
           .carousel-item {
-            height: 150px;
-            background: #52A2E5;
+            height: 160px;
           }
         }
+        .groups {
+          padding: 10px;
+        }
       }
       &[active='true'] {
         border: 2px solid #001bff;

src/pages/productCenter/mobileConfig/menuconfig/WorkDesign/components/Designer/Right/index.js

@@ -92,7 +92,7 @@ const Right = () => {
   }
 
   const changeThemeStyles = (v) => {
-    setShema({ ...shema, themeStyle: v.name })
+    setShema({ ...shema, themeStyle: v.name, background: shema.background || '#daebfe' })
   }
 
   const groupChange = ({ attr, value }) => {
@@ -276,6 +276,7 @@ const Right = () => {
           <div className={styles['g-title']}>轮播图</div>
           <div className={styles['g-content']}>
             <Upload
+              multiple
               name="singleFile"
               listType="picture-card"
               className="avatar-uploader"