feat: 移动端顶部导航装修

src/pages/pageCustomized/components/ComponentsPreview.tsx

@@ -39,7 +39,9 @@ const AllComponents = () => {
     return (
       <div className={cx(styles.components_item, (selectedInfo && selectedInfo.selectedKey === item.key) ? styles.active : {})} key={item.title} onClick={() => handleSelectComponent(item.key)}>
         <span className={styles.components_item_text}>{item.title}</span>
-        <EyeInvisibleOutlined className={cx(styles.components_item_icon, styles.disable)} />
+        {
+          item.canHide && <EyeInvisibleOutlined className={cx(styles.components_item_icon, styles.disable)} />
+        }
       </div>
     )
   }

src/pages/pageCustomized/components/MobileDesignPanel.tsx

 import React from 'react'
-import { BrickDesign } from 'lingxi-design';
-// import { useSelector } from 'lingxi-editor-core';
-import MobileUIDemo from './mobileUIDemo'
+import { BrickDesign } from 'lingxi-design'
+// import MobileUIDemo from './mobileUIDemo'
 import styles from './index.less'
 
 const MobileDesignPanel = (props) => {
@@ -10,7 +9,6 @@ const MobileDesignPanel = (props) => {
   return (
     <div className={styles.mobileDesignWrap}>
       <BrickDesign theme={theme} mobile />
-      {/* <MobileUIDemo /> */}
       <div className={styles.appBottom}>
         <div className={styles.appBottomStrip}></div>
       </div>

src/pages/pageCustomized/components/mobileUIDemo/index.tsx

@@ -5,10 +5,6 @@ import cx from 'classnames'
 import LogoIcon from './adaptive-icon.png'
 import styles from './index.less'
 
-const MIcon = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2245831_5lnj0j4qk5.js', // 在 iconfont.cn 上生成
-});
-
 const MobileUIDemo: React.FC = () => {
 
   return (

src/pages/pageCustomized/configs/componentConfigs/LingXiUI/MobileHeaderNav.ts

@@ -4,8 +4,12 @@ const MobileHeaderNav: ComponentConfigTypes = {
   propsConfig: {
     componentType: {
       label: '编辑',
-      type: PROPS_TYPES.advert
+      type: PROPS_TYPES.mobileHeaderNav
     },
+    styleType: {
+      label: "样式",
+      type: PROPS_TYPES.objectArray
+    }
   },
 };
 

src/pages/pageCustomized/mallEdit/index.tsx

@@ -116,8 +116,10 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
   */
   const fetchLeadNews = () => {
     return new Promise((resolve) => {
-      //@ts-ignore
-      PublicApi.getManageContentInformationFindAllByRecommendLabel({ recommendLabel: 1 }).then(res => {
+      const param: any = {
+        recommendLabel: 1
+      }
+      PublicApi.getManageContentInformationFindAllByRecommendLabel(param).then(res => {
         if (res.code === 1000) {
           const leadNewsList: any = res.data || []
           if (leadNewsList.length >= 2) {

src/pages/pageCustomized/mobileEdit/defaultData.ts

+import styleThemeImgDefault from './imgs/style_theme_default.png'
+import styleThemeImgScience from './imgs/style_theme_science.png'
 
 export const mallLayoutConfig = {
   key: "0",
@@ -7,7 +9,8 @@ export const mallLayoutConfig = {
       "style": {
         "width": "100%",
         "minHeight": "100%",
-        "background": "#FFF"
+        "background": "#FFF",
+        "overflowX": "hidden",
       }
     },
     "childNodes": ["1"]
@@ -20,8 +23,20 @@ export const mobileHeaderNav = {
     "componentName": "MobileHeaderNav",
     "title": "顶部导航",
     "canEdit": true,
+    "canHide": false,
     "props": {
-      styleTheme: "default"
+      styleTheme: 0,
+      // dataList: [],
+      stylesThemeList: [
+        {
+          key: 0,
+          img: styleThemeImgDefault,
+        },
+        {
+          key: 1,
+          img: styleThemeImgScience,
+        }
+      ]
     },
   }
 }

src/pages/pageCustomized/mobileEdit/index.tsx

@@ -68,7 +68,6 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
           <MobileSettingPanel />
         </div>
       </div>
-      {/* <SettingPanel templateId={id} /> */}
     </LegoProvider>
   ) : <Loading />
 }

src/pages/pageCustomized/mobileSettingPanel/index.tsx

@@ -3,21 +3,20 @@ import { ComponentConfigsType, SelectedInfoType, STATE_PROPS, useSelector } from
 import get from 'lodash/get';
 import cx from 'classnames'
 import { Tabs } from 'antd'
+import StyleSettings from './styleSettings'
+import PropsSettings from './propsSettings'
 import styles from './index.less'
 
 type SettingPanelType = {
   selectedInfo: SelectedInfoType,
   componentConfigs: ComponentConfigsType,
-  templateId: number,
 }
 
 const { TabPane } = Tabs
 
-const MobileSettingPanel: React.FC = () => {
-  const { selectedInfo, componentConfigs } = useSelector<SettingPanelType, STATE_PROPS>(['selectedInfo', 'componentConfigs'])
-  // const [activeKey, setActiveKey] = useState('2');
-  const { props: selectProps, selectedKey } = selectedInfo || {}
-  const style = get(componentConfigs, [selectedKey, 'props', 'style'])
+const MobileSettingPanel: React.FC = ()=> {
+  const { selectedInfo } = useSelector<SettingPanelType, STATE_PROPS>(['selectedInfo', 'componentConfigs'])
+  const { propsConfig } = selectedInfo || {}
 
   useEffect(() => {
     console.log(selectedInfo, "selectedInfo")
@@ -29,12 +28,16 @@ const MobileSettingPanel: React.FC = () => {
         defaultActiveKey="1"
         className={styles.settingTabs}
       >
-        <TabPane tab="编辑" key="1">
-          Content of Tab Pane 1
+        <TabPane tab="编辑" key="props">
+          <PropsSettings selectedInfo={selectedInfo} />
         </TabPane>
-        <TabPane tab="样式" key="2">
-          Content of Tab Pane 2
+        {
+          (propsConfig && propsConfig.styleType) && (
+            <TabPane tab="样式" key="style">
+              <StyleSettings selectedInfo={selectedInfo} />
             </TabPane>
+          )
+        }
      </Tabs>
     </div>
   )

src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/headerNav/index.less

+.setting {
+
+  .setting_title {
+    position: relative;
+    height: 32px;
+    line-height: 32px;
+
+  }
+
+  .setting_line {
+    margin-bottom: 24px;
+    display: flex;
+
+
+    &_main {
+      position: relative;
+      flex: 1;
+
+    }
+
+    &_addItem {
+      flex: 1;
+      padding: 24px 12px 0 12px;
+
+      &_input {
+        width: 100%;
+      }
+
+      &_line {
+        display: flex;
+        margin-bottom: 16px;
+        align-items: center;
+        font-size: 14px;
+        &_label {
+          width: 80px;
+          color: #909399;
+        }
+
+        &_brief {
+          flex: 1;
+        }
+      }
+    }
+
+    &_sort {
+      width: 32px;
+      background-color: #FAFBFC;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      margin-right: 8px;
+    }
+
+    &_name {
+      display: flex;
+      flex: 1;
+      font-size: 14px;
+      height: 32px;
+      color: #303133;
+      align-items: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      background-color: #FAFBFC;
+      padding: 0 8px;
+
+      &>.icon {
+        cursor: pointer;
+        width: 16px;
+        height: 16px;
+        font-size: 12px;
+        margin-right: 8px;
+      }
+    }
+
+    &_operation {
+      margin-left: auto;
+
+      &_btn {
+        margin-left: 16px;
+        width: 16px;
+
+        &_icon {
+          width: 16px;
+          height: 16px;
+
+        }
+      }
+    }
+  }
+
+  .add_btn {
+    width: 100%;
+    border: 1px dashed #DFE1E6;
+  }
+}

src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/headerNav/index.tsx

+import React, { useState, Fragment, useEffect } from 'react'
+import { Button, Input } from 'antd'
+import arrowRightIcon from '@/asserts/icons/arrow_right.png'
+import arrowLeftIcon from '@/asserts/icons/arrow_left.png'
+import arrowUpIcon from '@/asserts/icons/arrow_up.png'
+import arrowDownIcon from '@/asserts/icons/arrow_down.png'
+import sortIcon from '@/asserts/icons/sort_icon.png'
+
+import styles from './index.less'
+
+interface DataItemType {
+  name: string,
+  content: string,
+  status: boolean,
+  sort: number,
+  expand: boolean
+}
+
+interface HeaderNavPropsType {
+  dataList: DataItemType[]
+}
+
+const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
+
+  const { dataList } = props
+  const [list, setList] = useState<DataItemType[]>([])
+
+  const defaultDataList: DataItemType[] = [
+    {
+      name: "我的",
+      content: "",
+      status: true,
+      sort: 1,
+      expand: false,
+    },
+    {
+      name: "进货单",
+      content: "",
+      status: true,
+      sort: 2,
+      expand: false,
+    },
+    {
+      name: "客服",
+      content: "",
+      status: true,
+      sort: 3,
+      expand: false,
+    },
+    {
+      name: "搜索框",
+      content: "",
+      status: true,
+      sort: 4,
+      expand: false,
+    }
+  ]
+
+  useEffect(() => {
+    console.log(dataList, "dataList")
+    initDataList()
+  }, [dataList])
+
+  const initDataList = () => {
+    if(!dataList) {
+      setList(defaultDataList)
+    } else {
+      const newDataList = dataList.map((item: DataItemType, index: number) => {
+        item.sort = index + 1
+        item.expand = false
+        return item
+      })
+      setList(newDataList)
+    }
+  }
+
+  const handleExpand = (sort: number, expand: boolean) => {
+    const newList = [...list]
+    newList.map(item => {
+      if (item.sort === sort) {
+        item.expand = expand
+      } else {
+        item.expand = false
+      }
+    })
+    setList(newList)
+  }
+
+  const sortUp = (index: number, item: DataItemType) => {
+    console.log('sortUp')
+  }
+
+  const sortDown = (index: number, item: DataItemType) => {
+    console.log('sortDown')
+  }
+
+  const handleDeleteItem = (index: number) => {
+    console.log('handleDeleteItem')
+  }
+
+  return (
+    <div className={styles.setting}>
+      {
+        (list && list.length > 0) ? list.map((item, index) => (
+          <div className={styles.setting_line} key={`setting_${index}`}>
+            <div className={styles.setting_line_main}>
+              <div className={styles.setting_line_name} onClick={() => handleExpand(item.sort, !item.expand)}>
+                {
+                  item.expand ? <img className={styles.icon}  src={arrowLeftIcon} /> : <img className={styles.icon} src={arrowRightIcon} />
+                }
+                <span>{item.name}</span>
+                <div className={styles.setting_line_operation}>
+                  <Button type="link" disabled={index === 0} onClick={() => sortUp(index, item)} className={styles.setting_line_operation_btn} icon={<img className={styles.setting_line_operation_btn_icon} src={arrowUpIcon} />}></Button>
+                  <Button type="link" disabled={index === list.length - 1} onClick={() => sortDown(index, item)} className={styles.setting_line_operation_btn} icon={<img className={styles.setting_line_operation_btn_icon} src={arrowDownIcon} />}></Button>
+                  <Button type="link" className={styles.setting_line_operation_btn} onClick={() => handleDeleteItem(index)} icon={<img className={styles.setting_line_operation_btn_icon} src={sortIcon}  />}></Button>
+                </div>
+              </div>
+              {
+                !!item.expand && (
+                  <div className={styles.setting_line_addItem}>
+                    <div className={styles.setting_line_addItem_line}>
+                      <div className={styles.setting_line_addItem_line_label}>名称：</div>
+                      <div className={styles.setting_line_addItem_line_brief}>
+                        {item.name}
+                        {/* <Input className={styles.setting_line_addItem_input} value={item.name} onChange={(e) => handleKeyChange(e.target.value, item.sort, 'name')} maxLength={15} /> */}
+                      </div>
+                    </div>
+                    {
+                     item.name === "搜索框" ? (
+                      <div className={styles.setting_line_addItem_line}>
+                        <div className={styles.setting_line_addItem_line_label}>提示语：</div>
+                        <div className={styles.setting_line_addItem_line_brief}>
+                          <Input />
+                        </div>
+                      </div>
+                     ) : (
+                       <div className={styles.setting_line_addItem_line}>
+                        <div className={styles.setting_line_addItem_line_label}>图标：</div>
+                        <div className={styles.setting_line_addItem_line_brief}>
+                          {/* <UploadImage
+                            imgUrl={item.picUrl}
+                            size={getImgSize()}
+                            fileMaxSize={500}
+                            onChange={(val) => handleKeyChange(val, item.sort, 'picUrl')}
+                          /> */}
+                        </div>
+                      </div>
+                     )
+                    }
+
+                    <div className={styles.setting_line_addItem_line}>
+                      <div className={styles.setting_line_addItem_line_label}>是否显示：</div>
+                      <div className={styles.setting_line_addItem_line_brief}>
+                        {/* <Input className={styles.setting_line_addItem_input} value={item.link} onChange={(e) => handleKeyChange(e.target.value, item.sort, 'link')} /> */}
+                      </div>
+                    </div>
+                  </div>
+                )
+              }
+            </div>
+
+          </div>
+        )) : null
+      }
+    </div>
+  )
+}
+
+export default HeaderNav

src/pages/pageCustomized/mobileSettingPanel/propsSettings/index.less

+.propsSettingsWrapper {
+  padding: 8px 24px 24px 24px;
+
+}

src/pages/pageCustomized/mobileSettingPanel/propsSettings/index.tsx

+import React from 'react'
+import { SelectedInfoType, clearSelectedStatus, PROPS_TYPES } from 'lingxi-editor-core';
+import HeaderNav from './components/headerNav'
+import styles from './index.less'
+
+interface PropsSettingsPropsType {
+  selectedInfo?: SelectedInfoType,
+}
+
+const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
+  const { selectedInfo } = props
+
+  const renderSettingItem = () => {
+    const { props: initProps, propsConfig } = selectedInfo || {};
+    const componentType = propsConfig?.componentType
+    if (componentType) {
+      switch (componentType.type) {
+        case PROPS_TYPES.mobileHeaderNav:
+          return <HeaderNav  {...initProps} />
+        default:
+          return null
+      }
+    }
+  }
+
+  return (
+    <div className={styles.propsSettingsWrapper}>
+      <div className={styles.propsSettingsBody}>
+       {renderSettingItem()}
+      </div>
+    </div>
+  )
+}
+
+export default PropsSettings

src/pages/pageCustomized/mobileSettingPanel/styleSettings/index.less

+.styleSettings {
+  padding-top: 8px;
+
+  .styleList {
+    display: flex;
+    padding: 0 12px;
+    flex-wrap: wrap;
+
+    .styleItem {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 184px;
+      height: 138px;
+      border: 1px solid #E4E6EB;
+      margin: 0 12px;
+      margin-bottom: 24px;
+      cursor: pointer;
+
+      &.active {
+        border: 1px solid #00B382;
+
+        &::after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 0;
+          border-bottom: 12px solid #00B37A;
+          border-left: 12px solid transparent;
+          bottom: 0;
+          right: 0;
+          z-index: 5;
+        }
+      }
+    }
+
+    .themeImg {
+      width: 152px;
+      height: 105px;
+
+    }
+  }
+}

src/pages/pageCustomized/mobileSettingPanel/styleSettings/index.tsx

+import React, { useState } from 'react'
+import cx from 'classnames'
+import { SelectedInfoType, changeProps } from 'lingxi-editor-core'
+import styles from './index.less'
+
+interface StyleSettingsPropsType {
+  selectedInfo: SelectedInfoType,
+}
+
+const StyleSettings: React.FC<StyleSettingsPropsType> = ({ selectedInfo }) => {
+  const { props: selectProps  } = selectedInfo
+  const [ selectKey, setSelectKey ] = useState<number>(0)
+
+  /**
+   * 更换样式模板
+   * @param key
+   */
+  const handleChangeStyleTheme = (key: number) => {
+    if(selectKey !== key) {
+      setSelectKey(key)
+      changeProps({
+        props: {
+          styleTheme: key
+        }
+      })
+    }
+  }
+
+  return (
+    <div className={styles.styleSettings}>
+      <div className={styles.styleList}>
+        {
+          (selectProps && selectProps.stylesThemeList) && selectProps.stylesThemeList.map(item => (
+            <div className={cx(styles.styleItem, selectKey === item.key ? styles.active : {})} key={item.key} onClick={() => handleChangeStyleTheme(item.key)}>
+              <img className={styles.themeImg} src={item.img} title={item.key} />
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  )
+}
+
+export default StyleSettings

src/pages/pageCustomized/settingsPanel/propsSettings/components/GoodsSetting/index.tsx

@@ -5,7 +5,7 @@ import SettingList from '../../../../components/SettingList'
 import GoodsItem from './GoodsItem'
 import SettingPanel from '../../../../components/SettingPanel'
 import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
-import { GetTemplatePlatformFindGoodsListResponseDetail } from '@/services'
+import { GetTemplatePlatformFindGoodsListResponseDetail } from '@/services/TemplateApi'
 import { PublicApi } from '@/services/api'
 import { filterProps } from '../../../../utils'
 import styles from './index.less'