fix: 代码优化

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

@@ -5,57 +5,62 @@ import { CaretRightOutlined } from '@ant-design/icons'
 import styles from './index.less'
 import { GlobalStore } from '../index'
 import { getCardVersion, upgradeCardVersion } from '@/services/mobileConfig/api'
-import moment from 'moment'
 
 const cardTypes = ['管理', '执行', '运营']
+const tabs = ['产品组件', '项目组件']
 
 const cards = [
-  {
-    title: '运营总览',
-    count: 1,
-    children: [
-      { name: '运营总览', widget: 'OVERVIEW', type: '运营' }
-    ]
-  },
-  {
-    title: '水厂',
-    count: 2,
-    children: [
-      { name: '水厂总览', widget: 'WATER_OVERVIEW', type: '运营' },
-      { name: '供水量曲线', widget: 'WATER_CHART', type: '运营' },
-    ]
-  },
-  {
-    title: '管网',
-    count: 4,
-    children: [
-      { name: '管网监控', widget: 'PIPEMONITORING', type: '运营' },
-      { name: '管网采集', widget: 'PIPEGATHER', type: '运营' },
-      { name: '管网巡检', widget: 'PIPEINSPECTION', type: '运营' },
-      { name: '维修工单', widget: 'MAINTENANCEORDER', type: '运营' },
-    ]
-  },
-  {
-    title: '二供',
-    count: 3,
-    children: [
-      { name: '二供总览', widget: 'OPERATIONAL_OVERVIEW', type: '运营' },
-      { name: '泵房运行状态', widget: 'PUMP_STATUS', type: '运营' },
-      { name: '泵房维修保养', widget: 'PUMP_MAINTAIN', type: '运营' },
-    ]
-  },
-  {
-    title: '营收',
-    count: 1,
-    children: [
-      { name: '营收总览', widget: 'REVENUE_OVERVIEW', type: '运营' },
-    ]
-  },
-  {
-    title: 'DMA',
-    count: 1,
-    children: [{ name: '大表监控', widget: 'LARGE_MONITORING', type: '运营' }],
-  },
+  [
+    {
+      title: '运营总览',
+      count: 1,
+      children: [
+        { name: '运营总览', widget: 'OVERVIEW', type: '运营' }
+      ]
+    },
+    {
+      title: '水厂',
+      count: 2,
+      children: [
+        { name: '水厂总览', widget: 'WATER_OVERVIEW', type: '运营' },
+        { name: '供水量曲线', widget: 'WATER_CHART', type: '运营' },
+      ]
+    },
+    {
+      title: '管网',
+      count: 4,
+      children: [
+        { name: '管网监控', widget: 'PIPEMONITORING', type: '运营' },
+        { name: '管网采集', widget: 'PIPEGATHER', type: '运营' },
+        { name: '管网巡检', widget: 'PIPEINSPECTION', type: '运营' },
+        { name: '维修工单', widget: 'MAINTENANCEORDER', type: '运营' },
+      ]
+    },
+    {
+      title: '二供',
+      count: 3,
+      children: [
+        { name: '二供总览', widget: 'OPERATIONAL_OVERVIEW', type: '运营' },
+        { name: '泵房运行状态', widget: 'PUMP_STATUS', type: '运营' },
+        { name: '泵房维修保养', widget: 'PUMP_MAINTAIN', type: '运营' },
+      ]
+    },
+    {
+      title: '营收',
+      count: 1,
+      children: [
+        { name: '营收总览', widget: 'REVENUE_OVERVIEW', type: '运营' },
+      ]
+    },
+    {
+      title: 'DMA',
+      count: 1,
+      children: [{ name: '大表监控', widget: 'LARGE_MONITORING', type: '运营' }],
+    },
+  ],
+  [
+    
+  ]
 ]
 
 const getNanoid = (len = 10) => {
@@ -163,17 +168,18 @@ const Left = () => {
   const { shema, setShema } = useContext(GlobalStore)
   const [cardType, setCardType] = useState(cardTypes)
   const [version, setVersion] = useState({ Version: '', lastVersion: '' })
+  const [activeIndex, setActiveIndex] = useState(0)
 
   const cardsFilter = useMemo(() => {
     let array = []
-    cards.forEach(v => {
+    cards[activeIndex].forEach(v => {
       let children = v.children.filter(s => cardType.includes(s.type))
       if (children.length) {
         array.push({ ...v, children })
       }
     })
     return array
-  }, [cards, cardType])
+  }, [cards, cardType, activeIndex])
 
   const cardTypeChange = (value) => {
     setCardType(value)
@@ -223,8 +229,21 @@ const Left = () => {
             <Group></Group>
           </div>
         </div>
+        <div className={styles.tabs}>
+          {tabs.map((v, i) => {
+            return (
+              <div
+                className={styles.tab}
+                active={`${activeIndex === i}`}
+                onClick={() => setActiveIndex(i)}
+              >
+                {v}
+              </div>
+            )
+          })}
+        </div>
         <div className={styles.item}>
-          <div className={styles['g-title']} style={{ paddingBottom: '0' }}>卡片组件</div>
+          {/* <div className={styles['g-title']} style={{ paddingBottom: '0' }}>卡片组件</div> */}
           <div className={styles['g-checks']}>
             <Checkbox.Group
               style={{ width: '100%' }}
@@ -235,7 +254,7 @@ const Left = () => {
                 {
                   cardTypes.map(v => {
                     return (
-                      <Col key={v} span={8} style={{ display: 'flex', justifyContent: 'center' }}>
+                      <Col key={v} style={{ display: 'flex', justifyContent: 'center', marginLeft: '10px' }}>
                         <Checkbox value={v}>{v}</Checkbox>
                       </Col>
                     )

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

@@ -17,6 +17,28 @@
     }
     .r-right {}
   }
+  .tabs {
+    display: flex;
+    margin-top: 10px;
+    background: #F5F5F5;
+    color: #A5A5A5;
+    font-size: 14px;
+    font-weight: 500;
+    height: 35px;
+    line-height: 35px;
+    &:hover {
+      cursor: pointer;
+    }
+    .tab {
+      flex: 1;
+      text-align: center;
+      &[active='true'] {
+        border-top: 2px solid #0082F0;
+        color: #0082F0;
+        background: linear-gradient(to bottom, #EEF7FF, #FFFFFF);
+      }
+    }
+  }
   .l-content {
     height: calc(100% - 40px);
     overflow: auto;
@@ -28,8 +50,8 @@
         font-weight: 700;
       }
       .g-checks {
-        padding: 9px 0;
-        background: linear-gradient(to top, #F3F3F3, #FFFFFF);
+        // padding: 9px 0;
+        // background: linear-gradient(to top, #F3F3F3, #FFFFFF);
       }
       .g-content {
         padding: 0 10px;
@@ -165,11 +187,11 @@
 }
 
 .cardGroup {
-  padding-left: 10px;
   font-size: 14px;
   margin-top: 3px;
   .g-top {
     display: inline;
+    font-size: 15px;
     &:hover {
       cursor: pointer;
       color: #1890ff;