feat: 顶部导航添加可拖动排序

.npmrc

-registry="http://10.0.0.19:7001"
+registry="http://10.0.0.19:4873"

package.json

@@ -53,9 +53,9 @@
     "classnames": "^2.2.6",
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
-    "god": "^0.1.29",
+    "god": "^0.2.3",
     "lingxi-design": "^1.0.8",
-    "lingxi-design-ui": "^1.1.15",
+    "lingxi-design-ui": "^1.1.16",
     "lingxi-editor-core": "^1.0.6",
     "lingxi-web": "^1.0.6",
     "lint-staged": "^10.0.7",
@@ -66,18 +66,20 @@
     "query-string": "^6.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-sortablejs": "^6.0.0",
+    "sortablejs": "^1.12.0",
     "styled-components": "^5.2.1",
     "umi": "^3.2.0",
-    "yorkie": "^2.0.0",
-    "react-sortablejs": "^6.0.0"
+    "yorkie": "^2.0.0"
   },
   "devDependencies": {
+    "@types/sortablejs": "^1.10.6",
     "axios": "^0.19.2",
     "connect-history-api-fallback": "^1.6.0",
     "cross-env": "^7.0.2",
     "express": "^4.17.1",
-    "god-upload-scp": "1.2.0",
-    "god-yapi2ts": "^1.9.0",
+    "god-upload-scp": "1.0.1",
+    "god-yapi2ts": "^1.0.0",
     "gulp": "^4.0.2",
     "http-proxy-middleware": "^1.0.5",
     "json2ts": "^0.0.7",

src/pages/pageCustomized/components/ComponentsPreview.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import map from 'lodash/map'
 import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'
 import cx from 'classnames'
-import { selectComponent, useSelector, ComponentConfigsType, SelectedInfoBaseType, SelectedInfoType, ROOT, STATE_PROPS, VirtualDOMType } from 'lingxi-editor-core';
+import { selectComponent, useSelector, ComponentConfigsType, SelectedInfoBaseType, SelectedInfoType, clearSelectedStatus, STATE_PROPS, VirtualDOMType } from 'lingxi-editor-core';
 import styles from './index.less'
 
 type SettingPanelType = {
@@ -26,13 +26,17 @@ const AllComponents = () => {
   }, [componentConfigs, selectedInfo])
 
   const handleSelectComponent = (key: string) => {
-    const specialProps: SelectedInfoBaseType = {
-      parentKey: "0",
-      key,
-      domTreeKeys: ["0", key],
-      draggable: false,
+    if(!selectedInfo || selectedInfo.selectedKey !== key) {
+      const specialProps: SelectedInfoBaseType = {
+        parentKey: "0",
+        key,
+        domTreeKeys: ["0", key],
+        draggable: false,
+      }
+      selectComponent(specialProps)
+    } else {
+      clearSelectedStatus()
     }
-    selectComponent(specialProps)
   }
 
   const renderCompontentItem = (item: VirtualDOMType) => {
@@ -40,7 +44,7 @@ const AllComponents = () => {
       <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>
         {
-          item.canHide && <EyeInvisibleOutlined className={cx(styles.components_item_icon, styles.disable)} />
+          item.canHide && (item.props.visible !== false ? <EyeOutlined className={cx(styles.components_item_icon)} /> : <EyeInvisibleOutlined className={cx(styles.components_item_icon, styles.disable)} />)
         }
       </div>
     )

src/pages/pageCustomized/components/MobileDesignPanel.tsx

@@ -7,13 +7,15 @@ const MobileDesignPanel = (props) => {
   const { theme } = props
 
   return (
-    <div className={styles.mobileDesignWrap}>
-      {/* <BrickDesign theme={theme} mobile /> */}
-      <MobileUIDemo />
+    <div className={styles.mobileDesignContainer}>
+      <div className={styles.mobileDesignWrap}>
+        <BrickDesign theme={theme} mobile />
+        {/* <MobileUIDemo /> */}
+      </div>
       <div className={styles.appBottom}>
         <div className={styles.appBottomStrip}></div>
+        </div>
       </div>
-    </div>
   )
 }
 

src/pages/pageCustomized/components/index.less

@@ -53,18 +53,30 @@
   }
 }
 
-.mobileDesignWrap {
+.mobileDesignContainer {
   position: relative;
-  padding-bottom: 30px;
   width: 100%;
-  background-color: #FFF;
+  height: calc(100vh - 156px);
 
-  .appBottom {
+  .mobileDesignWrap {
     position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    background-color: #F7F8FA;
+    padding-bottom: 25px;
+
+  }
+
+  .appBottom {
+    position: absolute;
     background-color: #FFF;
+    bottom: 0;
+    width: 100%;
     height: 30px;
     margin-top: 0;
-    clear: both;
+    z-index: 99;
+
 
     .appBottomStrip {
       position: relative;

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

@@ -9,120 +9,42 @@
   background-color: #F7F8FA;
 }
 
-.@{prefixCls}-recommend-shop {
-  padding: 0 8px;
-
-  &-title {
-    font-size: 14px;
-    color: #303133;
-    font-weight: bold;
-    padding: 12px 4px;
-  }
+.@{prefixCls}-bottom-navigation {
+  position: fixed;
+  bottom: 0;
+  width: 375px;
+  left: 0;
+  height: 50px;
+  background-color: #FFF;
 
   &-list {
     display: flex;
-    flex-direction: column;
 
     &-item {
-      background-color: #FFF;
-      border-radius: 8px;
-      margin-bottom: 8px;
-      padding: 0 12px;
-
-      &-shopheader {
-        display: flex;
-        padding: 12px 0;
-        align-items: center;
-
-        &-shoplogo {
-          width: 40px;
-          height: 40px;
-          overflow: hidden;
-          border-radius: 4px;
-          border: 1px solid #EEF0F3;
-          background-color: #FFF;
-          margin-right: 8px;
-
-        }
-
-        &-shopinfo {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-        }
-
-        &-shopname {
-          font-size: 12px;
-          font-weight: bold;
-          margin-bottom: 4px;
-        }
-
-        &-shopdetail {
-          display: flex;
-          border-radius: 2px;
+      flex: 1;
+      display: flex;
+      height: 50px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
 
-          &-info {
-            background-color: rgba(219, 153, 84, 0.08);
-            margin-right: 16px;
-            padding-right: 4px;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            color: #DB9954;
+      &.hide {
+        display: none;
 
-            &.year {
-              background: rgba(211, 47, 47, 0.08);
-              color: #D32F2F;
-            }
-
-            &-icon {
-              width: 16px;
-              height: 16px;
-              margin-right: 4px;
-            }
-          }
-        }
-
-        &-enterbtn {
-          background-color: @headerNavScienceColor;
-          border-radius: 34px;
-          height: 24px;
-          width: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: #FFF;
-
-        }
       }
 
-      &-goodslist {
-        display: flex;
-        padding-bottom: 12px;
-
-        &-item {
-          display: flex;
-          flex-direction: column;
-
-          width: 106px;
-          overflow: hidden;
-
-          &:not(:last-child) {
-            margin-right: 8px;
-          }
-
-          &-goodsname {
-            margin-top: 8px;
-            font-size: 14px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
+      &-icon {
+        width: 24px;
+        margin-bottom: 2px;
+        height: 24px;
+        border: none;
+        outline: none;
+      }
 
-          &-goodsprice {
-            font-size: 14px;
-          }
-        }
+      &-name {
+        font-size: 12px;
+        line-height: 16px;
+        color: #909399;
       }
     }
   }

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

+import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
+
+const MobileBanner: ComponentConfigTypes = {
+  propsConfig: {
+    componentType: {
+      label: '编辑',
+      type: PROPS_TYPES.mobileBanner
+    },
+  },
+};
+
+export default MobileBanner;

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

+import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
+
+const MobileBottomNavigation: ComponentConfigTypes = {
+  propsConfig: {
+    componentType: {
+      label: '编辑',
+      type: PROPS_TYPES.mobileBottomNavigation
+    },
+  },
+};
+
+export default MobileBottomNavigation;

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

+import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
+
+const MobileInformation: ComponentConfigTypes = {
+  propsConfig: {
+    componentType: {
+      label: '编辑',
+      type: PROPS_TYPES.mobileInformation
+    },
+  },
+};
+
+export default MobileInformation;

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

+import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
+
+const MobileQuality: ComponentConfigTypes = {
+  propsConfig: {
+    componentType: {
+      label: '编辑',
+      type: PROPS_TYPES.mobileQuality
+    },
+  },
+};
+
+export default MobileQuality;

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

+import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
+
+const MobileQuickNav: ComponentConfigTypes = {
+  propsConfig: {
+    componentType: {
+      label: '编辑',
+      type: PROPS_TYPES.mobileQuickNav
+    },
+  },
+};
+
+export default MobileQuickNav;

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

+import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
+
+const MobileRecommendShops: ComponentConfigTypes = {
+  propsConfig: {
+    componentType: {
+      label: '编辑',
+      type: PROPS_TYPES.mobileRecommentShops
+    },
+  },
+};
+
+export default MobileRecommendShops;

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

+import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
+
+const MobileShowCase: ComponentConfigTypes = {
+  propsConfig: {
+    componentType: {
+      label: '编辑',
+      type: PROPS_TYPES.mobileShowCase
+    },
+  },
+};
+
+export default MobileShowCase;

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

@@ -17,6 +17,13 @@ import FindMore from './FindMore'
 import Information from './Information'
 import Footer from './Footer'
 import MobileHeaderNav from './MobileHeaderNav'
+import MobileBanner from './MobileBanner'
+import MobileBottomNavigation from './MobileBottomNavigation'
+import MobileInformation from './MobileInformation'
+import MobileQuality from './MobileQuality'
+import MobileQuickNav from './MobileQuickNav'
+import MobileRecommendShops from './MobileRecommendShops'
+import MobileShowCase from './MobileShowCase'
 
 export default {
   TopBar,
@@ -38,4 +45,11 @@ export default {
   ...ShopFloorLine,
   ...ShowCase,
   MobileHeaderNav,
+  MobileBanner,
+  MobileBottomNavigation,
+  MobileInformation,
+  MobileQuality,
+  MobileQuickNav,
+  MobileRecommendShops,
+  MobileShowCase,
 }

src/pages/pageCustomized/mobileEdit/defaultData.ts

-import styleThemeImgDefault from './imgs/style_theme_default.png'
-import styleThemeImgScience from './imgs/style_theme_science.png'
-
-import mineIcon from './imgs/mine_icon.png'
-import orderIcon from './imgs/order_icon.png'
-import kefuIcon from './imgs/kefu_icon.png'
-
-export const mallLayoutConfig = {
-  key: "0",
-  "0": {
-    "componentName": "MallLayout",
-    "props": {
-      "style": {
-        "width": "100%",
-        "minHeight": "100%",
-        "background": "#FFF",
-        "overflowX": "hidden",
-      }
-    },
-    "childNodes": ["1"]
-  },
-}
-
-export const mobileHeaderNav = {
-  key: "1",
-  "1": {
-    "componentName": "MobileHeaderNav",
-    "title": "顶部导航",
-    "canEdit": true,
-    "canHide": false,
-    "props": {
-      styleTheme: 0,
-      dataList: [
-         {
-          name: "我的",
-          content: mineIcon,
-          status: true,
-        },
-        {
-          name: "进货单",
-          content: orderIcon,
-          status: true,
-        },
-        {
-          name: "客服",
-          content: kefuIcon,
-          status: true,
-        },
-        {
-          name: "搜索框",
-          content: "",
-          status: true,
-        }
-      ],
-      stylesThemeList: [
-        {
-          key: 0,
-          img: styleThemeImgDefault,
-        },
-        {
-          key: 1,
-          img: styleThemeImgScience,
-        }
-      ]
-    },
-  }
-}
-
-export const topBarConfig = {
-  key: "1",
-  "1": {
-    "componentName": "TopBar",
-    "props": {
-      linkdisable: true
-    },
-  }
-}
-
-export const topAdvertConfig = {
-  key: "2",
-  "2": {
-    "componentName": "Advert",
-    "props": {
-      "type": "top",
-      "linkdisable": true,
-      "advertList": []
-    },
-  },
-}
-
-const shopInfo = {
-  "id": 3,
-  "logo": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/8225da43b0bb4d6199a028a63d9f8da91603161481060.jpg",
-  "describe": "广州市数商云网络科技有限公司（软件企业编号：粤RO-2018-0284 | 高新科技企业编号：GR201844008227），简称「数商云」，是一家领先的企业全链数字化运营服务提供商。致力于通过大数据、云计算等新技术协助企业打造渠道端—营销端—数据端等全链数字化运营体系，全面提升企业运营效益与智慧数字化商业转型。自2013年成立以来，数商云致力于提供企业数字化运营产品及解决方案。",
-  "workshopPics": [
-    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/1fd1b242c72d45ac8c4950fe45ead3641602840737765.jpg"
-  ],
-  "honorPics": [
-    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/bc9ebf96f3444063ab38456fd384c6511601286280869.jpg",
-    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/ed78a5e0cf984d8b9b0e2901c7eaf7331601286289517.jpg",
-    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/5d960eb644da493a82c820cde44055621601286293632.jpg",
-    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/d8b2dd1f6d204d7ea9e48f97551feb2c1601286299031.jpg",
-    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/2ef2306619304e7e8bfd505a092bfe3b1601286331100.jpg",
-    "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/140027f0881d4a2dbeb1dd4214d761f51601286345616.jpg"
-  ],
-  "shopId": 2,
-  "storeUrl": "http://lingxi.shushangyun.com/shop/pointsMall?shopId=eyJzaG9wSWQiOjMsIm1lbWJlcklkIjo5fQ==",
-  "customerUrl": " http://10.0.0.25:4396/shop?shopId=eyJzaG9wSWQiOm51bGwsIm1lbWJlcklkIjpudWxsfQ==",
-  "allStatus": 0,
-  "company": "广州市数商云网络科技有限公司",
-  "templateId": 3,
-  "fileName": "science",
-  "memberId": 9,
-  "levelTag": "青铜会员",
-  "outerStatus": 3,
-  "registerYears": 1,
-}
-
-export const headerConfig = {
-  key: "3",
-  "3": {
-    "componentName": "ShopHeader",
-    "props": {
-      "shopInfo": shopInfo,
-      "logoUrl": ""
-    },
-  },
-}
-
-export const mainNavConfig = {
-  key: "4",
-  "4": {
-    "componentName": "MainNav",
-    "title": "顶部导航",
-    "canEdit": true,
-    "props": {},
-  },
-}
-
-export const bannerAdvertConfig = {
-  key: "5",
-  "5": {
-    "componentName": "Advert",
-    "title": "轮播广告",
-    "canEdit": true,
-    "props": {
-      "type": "banner",
-      "linkdisable": true,
-      "advertList": [
-        {
-          "id": 27,
-          "type": 1,
-          "name": "1",
-          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/fb5b67cab9794cf2a0fefd3e60e17afb1601281348273.jpg",
-          "link": "",
-          "sort": 1
-        },
-        {
-          "id": 28,
-          "type": 1,
-          "name": "2",
-          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/6385b53673734c779aed1548e275bbd21601281360139.jpg",
-          "link": "",
-          "sort": 2
-        },
-        {
-          "id": 29,
-          "type": 1,
-          "name": "3",
-          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/f695c27b7ada424292baff4de01468331601281356852.jpg",
-          "link": "",
-          "sort": 3
-        }
-      ]
-    }
-  },
-}
-
-export const CommonTitle1Config = {
-  key: "6",
-  "6": {
-    "componentName": "CommonTitle",
-    "props": {
-      "title": "热销商品",
-      "type": "primary"
-    },
-  },
-}
-
-export const serviceAdvertConfig = {
-  key: "16",
-  "16": {
-    "componentName": "Advert",
-    "props": {
-      "type": "service",
-      "linkdisable": true,
-      "advertList": [
-        {
-          "id": 23,
-          "type": 2,
-          "name": "1",
-          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/84de6571697843a7accc2144cc3866741601281306690.jpg",
-          "link": "",
-          "sort": 1
-        },
-        {
-          "id": 24,
-          "type": 2,
-          "name": "2",
-          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a3e9ad36257448729b3fe566537bc3221601281314878.jpg",
-          "link": "3",
-          "sort": 2
-        },
-        {
-          "id": 25,
-          "type": 2,
-          "name": "3",
-          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/5ba394af86d444ac98d93a66404cbc521601281321253.jpg",
-          "link": "",
-          "sort": 3
-        },
-        {
-          "id": 26,
-          "type": 2,
-          "name": "4",
-          "picUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/c97a56016c9c440087d4bb2ca6e76f3b1601281327363.jpg",
-          "link": "",
-          "sort": 4
-        }
-      ]
-    }
-  },
-}
-
-
-export const CommonTitle2Config = {
-  key: "17",
-  "17": {
-    "componentName": "CommonTitle",
-    "props": {
-      "title": "关于我们",
-      "type": "primary"
-    },
-  },
-}
-
-export const AboutUsConfig = {
-  key: "18",
-  "18": {
-    "componentName": "AboutUs",
-    "props": {
-      "shopInfo": shopInfo
-    },
-  },
-}
-
-export const InformationConfig = {
-  key: '19',
-  "19": {
-    "componentName": "Information",
-    "props": {},
-  },
-}
-
-export const FooterConfig = {
-  key: '20',
-  "20": {
-    "componentName": "Footer",
-    "props": {},
-  },
-}
-
+export const menuData = [
+  {
+    "path": "/shop",
+    "name": "首页",
+    "key": "shopHome",
+  },
+  {
+    "path": "/shop/commodity",
+    "name": "商品",
+    "key": "shopCommodity",
+  },
+  {
+    "path": "/shop/pointsMall",
+    "name": "积分兑换",
+    "key": "shopPointsMall",
+  },
+  {
+    "path": "/shop/infomation",
+    "name": "资讯",
+    "key": "shopInfomation",
+  },
+  {
+    "path": "/shop/about",
+    "name": "关于我们",
+    "key": "shopAbout",
+  },
+]
\ No newline at end of file

src/pages/pageCustomized/mobileEdit/defaultMenu.ts

-export const menuData = [
-  {
-    "path": "/shop",
-    "name": "首页",
-    "key": "shopHome",
-  },
-  {
-    "path": "/shop/commodity",
-    "name": "商品",
-    "key": "shopCommodity",
-  },
-  {
-    "path": "/shop/pointsMall",
-    "name": "积分兑换",
-    "key": "shopPointsMall",
-  },
-  {
-    "path": "/shop/infomation",
-    "name": "资讯",
-    "key": "shopInfomation",
-  },
-  {
-    "path": "/shop/about",
-    "name": "关于我们",
-    "key": "shopAbout",
-  },
-]
\ No newline at end of file

src/pages/pageCustomized/mobileEdit/index.tsx

@@ -4,12 +4,20 @@ import ToolBar from '../components/toolBar'
 import MobileDesignPanel from '../components/MobileDesignPanel'
 import AllComponents from '../components/ComponentsPreview'
 import config from '../configs'
-import SettingPanel from '../settingsPanel'
-import { LAYOUT_TYPE } from '@/constants'
-import {mallLayoutConfig, mobileHeaderNav } from './defaultData'
-import { menuData } from './defaultMenu'
+import {
+  mallLayoutConfig,
+  divWrap,
+  mobileHeaderNav,
+  mobileBanner,
+  mobileQuickNav,
+  mobileShowCase,
+  mobileInformation,
+  mobileRecommendShops,
+  mobileQuality,
+  mobileBottomNavigation,
+} from './config'
 import Loading from '../components/Loading'
-import { GlobalConfig } from '@/global/config'
+// import { GlobalConfig } from '@/global/config'
 import MobileSettingPanel from '../mobileSettingPanel'
 import styles from './index.less'
 
@@ -48,7 +56,15 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
   const getComponentsConfig = async () => {
     const config = {
       ...mallLayoutConfig,
+      ...divWrap,
       ...mobileHeaderNav,
+      ...mobileBanner,
+      ...mobileQuickNav,
+      ...mobileShowCase,
+      ...mobileInformation,
+      ...mobileRecommendShops,
+      ...mobileQuality,
+      ...mobileBottomNavigation,
     }
     setComponentConfigs(config)
     setLoading(false)
@@ -59,7 +75,7 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
       <div className={styles['wrapper']}>
         <ToolBar type={2} title="APP首页" showActions={true} />
         <div className={styles['content']}>
-         <AllComponents />
+          <AllComponents />
           <div className={styles['app-wrapper']}>
             <div className={styles['app-canvas-container']}>
               <MobileDesignPanel theme={theme} />

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

@@ -2,6 +2,9 @@ import React, { useState, useEffect } from 'react'
 import { Button, Input, Radio } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 import { changeProps } from 'lingxi-editor-core'
+import { ReactSortable } from "react-sortablejs"
+import cx from 'classnames'
+import isEmpty from 'lodash/isEmpty'
 import UploadImage from '@/components/UploadImage'
 import arrowRightIcon from '@/asserts/icons/arrow_right.png'
 import arrowLeftIcon from '@/asserts/icons/arrow_left.png'
@@ -12,10 +15,10 @@ import sortIcon from '@/asserts/icons/sort_icon.png'
 import styles from './index.less'
 
 interface DataItemType {
+  id: number,
   name: string,
   content: string,
   status: boolean,
-  sort: number,
   expand: boolean
 }
 
@@ -35,7 +38,7 @@ const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
   const initDataList = () => {
     if(dataList) {
       const newDataList = dataList.map((item: DataItemType, index: number) => {
-        item.sort = index + 1
+        item.id = index + 1
         item.expand = item.expand || false
         return item
       })
@@ -43,10 +46,10 @@ const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
     }
   }
 
-  const handleExpand = (sort: number, expand: boolean) => {
+  const handleExpand = (id: number, expand: boolean) => {
     const newList = [...list]
     newList.map(item => {
-      if (item.sort === sort) {
+      if (item.id === id) {
         item.expand = expand
       } else {
         item.expand = false
@@ -60,9 +63,9 @@ const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
     const tempItem = JSON.parse(JSON.stringify(item))
     const temp = newList[index - 1]
     newList[index - 1] = item
-    newList[index - 1].sort = temp.sort
+    newList[index - 1].id = temp.id
     newList[index] = temp
-    newList[index].sort = tempItem.sort
+    newList[index].id = tempItem.id
     setList(newList)
     changeProps({
       props:Object.assign({...props}, {dataList: newList })
@@ -74,9 +77,9 @@ const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
     const temp = newList[index + 1]
     const tempItem = JSON.parse(JSON.stringify(item))
     newList[index + 1] = item
-    newList[index + 1].sort = temp.sort
+    newList[index + 1].id = temp.id
     newList[index] = temp
-    newList[index].sort = tempItem.sort
+    newList[index].id = tempItem.id
     setList(newList)
     changeProps({
       props:Object.assign({...props}, {dataList: newList })
@@ -128,14 +131,31 @@ const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
     })
   }
 
+  const handleSortableChange = (evt, sortable, store) => {
+    console.log(evt, sortable, store)
+  }
+
   return (
     <div className={styles.setting}>
-      {
-        (list && list.length > 0) ? list.map((item, index) => (
+      <ReactSortable
+        list={list}
+        setList={(newList) => {
+          setList(newList)
+          if(!isEmpty(newList)) {
+            changeProps({
+              props:Object.assign({ ...props }, { dataList: newList })
+            })
+          }
+
+        }}
+        onChange={handleSortableChange}
+        handle=".draghandle"
+      >
+        {list.map((item, index) => (
           <div className={styles.setting_line} key={`setting_${index}`}>
             <div className={styles.setting_line_main}>
               <div className={styles.setting_line_name} >
-                <div style={{ flex: 1 }} onClick={() => handleExpand(item.sort, !item.expand)}>
+                <div style={{ flex: 1 }} onClick={() => handleExpand(item.id, !item.expand)}>
                   {
                     item.expand ? <img className={styles.icon}  src={arrowLeftIcon} /> : <img className={styles.icon} src={arrowRightIcon} />
                   }
@@ -144,7 +164,7 @@ const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
                 <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>
+                  <Button type="link" className={cx(styles.setting_line_operation_btn, "draghandle")} onClick={() => handleDeleteItem(index)} icon={<img className={styles.setting_line_operation_btn_icon} src={sortIcon}  />}></Button>
                 </div>
               </div>
               {
@@ -154,7 +174,6 @@ const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
                       <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>
                     {
@@ -206,10 +225,9 @@ const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
                 )
               }
             </div>
-
           </div>
-        )) : null
-      }
+        ))}
+      </ReactSortable>
     </div>
   )
 }