Merge pull request #40 from MrXujiang/yehuozhiliwork

style: optimize left pannel
2026-01-04 18:28:11 +00:00 · 2020-10-07 17:49:36 +08:00 · 2020-10-07 17:49:36 +08:00 · 4b1c6b100d
commit 4b1c6b100d
parent f5b2132620 620063cdc5
10 changed files with 142 additions and 81 deletions
--- a/src/components/BasicShop/BasicComponents/Footer/index.tsx
+++ b/src/components/BasicShop/BasicComponents/Footer/index.tsx
@ -2,7 +2,6 @@ import React, { memo } from 'react';
 import { IFooterConfig } from './schema';
 const Footer = memo((props: IFooterConfig) => {
  const { bgColor, text, color, align, fontSize, height } = props;
-  console.log(props);
  return (
    <>
      {props.isTpl && (
--- a/src/components/BasicShop/BasicComponents/WhiteTpl/index.tsx
+++ b/src/components/BasicShop/BasicComponents/WhiteTpl/index.tsx
@ -9,7 +9,6 @@ interface IProps extends IWhiteTplConfig {

 const WhiteTpl = memo((props: IProps) => {
  const { bgColor, text, fontSize, color, height, isTpl } = props;
-  console.log('data', bgColor, text, fontSize, color, height);
  return (
    <div
      className={styles.whiteTpl}
--- a/src/global.css
+++ b/src/global.css
@ -41,4 +41,27 @@ body {

 .react-grid-item{
  overflow: hidden;
+}
+
+.ant-tabs-nav 
+,.ant-tabs-nav-list{
+  width: 40px!important;
+  min-width: 40px!important;
+}
+.ant-tabs-left{
+  height: 100%;
+}
+
+.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab{
+  padding:20px 0px !important;
+ 
+}
+.ant-tabs-tab{
+  margin:auto!important;
+}
+.ant-tabs-tab   div{
+  display: inline-block;
+}
+.ant-tabs-content-holder{
+  overflow: auto;
 }
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@ -84,7 +84,6 @@ export default function Layout({ children }: IRouteComponentProps) {
  );

  const [state, setState] = useState<dooringContextType>('h5');
-  debugger;
  return (
    <dooringContext.Provider
      value={{
--- a/src/pages/editor/Container.tsx
+++ b/src/pages/editor/Container.tsx
@ -6,6 +6,8 @@ import {
  PlayCircleOutlined,
  HighlightOutlined,
  ReloadOutlined,
+  DoubleRightOutlined,
+  DoubleLeftOutlined,
 } from '@ant-design/icons';
 import TextLoop from 'react-text-loop';
 import { connect } from 'dva';
@ -49,6 +51,12 @@ const Container = (props: {
  const pointData = pstate ? pstate.pointData : [];
  const cpointData = cstate ? cstate.pointData : [];

+  const changeCollapse = useMemo(() => {
+    return (c: boolean) => {
+      setCollapsed(c);
+    };
+  }, []);
+
  const context = useContext(dooringContext);
  const curPoint = useMemo(() => {
    if (context.theme === 'h5') {
@ -62,7 +70,6 @@ const Container = (props: {
    if (context.theme === 'h5') {
      return schema1;
    } else {
-      console.log(schema2);
      return schema2;
    }
  }, [context.theme]);
@ -98,24 +105,21 @@ const Container = (props: {
    setScale(1);
  };

-  const toggleCollapsed = (checked: boolean) => {
-    console.log(checked);
-    setCollapsed(checked);
-  };
-
  const CpIcon = {
    base: <HighlightOutlined />,
    media: <PlayCircleOutlined />,
    visible: <PieChartOutlined />,
  };

-  const generateHeader = (type: componentsType, text: string) => {
-    return (
-      <div>
-        {CpIcon[type]} {text}
-      </div>
-    );
-  };
+  const generateHeader = useMemo(() => {
+    return (type: componentsType, text: string) => {
+      return (
+        <div>
+          {CpIcon[type]} {text}
+        </div>
+      );
+    };
+  }, [CpIcon]);

  const handleSliderChange = (v: number) => {
    setScale(prev => (v >= 150 ? 1.5 : v / 100));
@ -198,7 +202,7 @@ const Container = (props: {
      arr.push(v.type);
    });
    return arr;
-  }, []);
+  }, [graphTpl, mediaTpl, template]);

  const [dragstate, setDragState] = useState({ x: 0, y: 0 });
  const [render] = useGetBall(setDragState, {
@ -207,8 +211,6 @@ const Container = (props: {
    intervalDelay: 5,
  });

-  const [display] = useAnimation(collapsed, 500);
-
  const renderRight = useMemo(() => {
    if (context.theme === 'h5') {
      return (
@ -263,6 +265,64 @@ const Container = (props: {
    }
  }, [context.theme, cpointData.length, curPoint, handleDel, handleFormSave, pointData.length]);

+  const tabRender = useMemo(() => {
+    if (collapsed) {
+      return (
+        <>
+          <TabPane tab={generateHeader('base', '')} key="1"></TabPane>
+          <TabPane tab={generateHeader('media', '')} key="2"></TabPane>
+          <TabPane tab={generateHeader('visible', '')} key="3"></TabPane>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <TabPane tab={generateHeader('base', '')} key="1">
+            <div className={styles.ctitle}>基础组件</div>
+            {template.map((value, i) => {
+              return (
+                <TargetBox item={value} key={i} canvasId={canvasId}>
+                  <DynamicEngine
+                    {...value}
+                    config={schema[value.type as keyof typeof schema].config}
+                    componentsType="base"
+                    isTpl={true}
+                  />
+                </TargetBox>
+              );
+            })}
+          </TabPane>
+          <TabPane tab={generateHeader('media', '')} key="2">
+            <div className={styles.ctitle}>媒体组件</div>
+            {mediaTpl.map((value, i) => (
+              <TargetBox item={value} key={i} canvasId={canvasId}>
+                <DynamicEngine
+                  {...value}
+                  config={schema[value.type as keyof typeof schema].config}
+                  componentsType="media"
+                  isTpl={true}
+                />
+              </TargetBox>
+            ))}
+          </TabPane>
+          <TabPane tab={generateHeader('visible', '')} key="3">
+            <div className={styles.ctitle}>可视化组件</div>
+            {graphTpl.map((value, i) => (
+              <TargetBox item={value} key={i} canvasId={canvasId}>
+                <DynamicEngine
+                  {...value}
+                  config={schema[value.type as keyof typeof schema].config}
+                  componentsType={'visible' as componentsType}
+                  isTpl={true}
+                />
+              </TargetBox>
+            ))}
+          </TabPane>
+        </>
+      );
+    }
+  }, [canvasId, collapsed, generateHeader, graphTpl, mediaTpl, schema, template]);
+
  return (
    <div className={styles.editorWrap}>
      <HeaderComponent
@ -271,72 +331,42 @@ const Container = (props: {
        pointData={context.theme === 'h5' ? pointData : cpointData}
        clearData={clearData}
        location={props.location}
-        toggleCollapsed={toggleCollapsed}
      />
      <div className={styles.container}>
        <div
          className={styles.list}
          style={{
-            transform: collapsed ? 'translate(0,0)' : 'translate(-100%,0)',
            transition: 'all ease-in-out 0.5s',
-            display: display ? 'none' : 'block',
+            position: 'fixed',
+            width: collapsed ? '50px' : '350px',
+            zIndex: 200,
+            boxShadow: 'none',
          }}
        >
-          <div className={styles.searchBar}>
-            <Alert
-              banner
-              message={
-                <TextLoop mask>
-                  <div>Dooring升级啦！</div>
-                  <div>已有1000+人使用</div>
-                  <div>持续迭代中...</div>
-                </TextLoop>
-              }
-            />
-          </div>
          <div className={styles.componentList}>
-            <Tabs defaultActiveKey="1">
-              <TabPane tab={generateHeader('base', '基础组件')} key="1">
-                {template.map((value, i) => {
-                  return (
-                    <TargetBox item={value} key={i} canvasId={canvasId}>
-                      <DynamicEngine
-                        {...value}
-                        config={schema[value.type as keyof typeof schema].config}
-                        componentsType="base"
-                        isTpl={true}
-                      />
-                    </TargetBox>
-                  );
-                })}
-              </TabPane>
-              <TabPane tab={generateHeader('media', '媒体组件')} key="2">
-                {mediaTpl.map((value, i) => (
-                  <TargetBox item={value} key={i} canvasId={canvasId}>
-                    <DynamicEngine
-                      {...value}
-                      config={schema[value.type as keyof typeof schema].config}
-                      componentsType="media"
-                      isTpl={true}
-                    />
-                  </TargetBox>
-                ))}
-              </TabPane>
-              <TabPane tab={generateHeader('visible', '可视化组件')} key="3">
-                {graphTpl.map((value, i) => (
-                  <TargetBox item={value} key={i} canvasId={canvasId}>
-                    <DynamicEngine
-                      {...value}
-                      config={schema[value.type as keyof typeof schema].config}
-                      componentsType={'visible' as componentsType}
-                      isTpl={true}
-                    />
-                  </TargetBox>
-                ))}
-              </TabPane>
+            <Tabs
+              onTabClick={() => changeCollapse(false)}
+              defaultActiveKey="1"
+              tabPosition={'left'}
+            >
+              {tabRender}
            </Tabs>
          </div>
+          <div
+            className={styles.collapsed}
+            style={{ position: 'absolute', bottom: '80px', left: '25px' }}
+            onClick={() => changeCollapse(!collapsed)}
+          >
+            {collapsed ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
+          </div>
        </div>
+        <div
+          style={{
+            width: collapsed ? '50px' : '350px',
+            transition: 'all ease-in-out 0.5s',
+          }}
+        ></div>
+
        <div className={styles.tickMark} id="calibration">
          <div className={styles.tickMarkTop}>
            <Calibration direction="up" id="calibrationUp" multiple={scaleNum} />
--- a/src/pages/editor/SourceBox.tsx
+++ b/src/pages/editor/SourceBox.tsx
@ -58,7 +58,6 @@ const SourceBox = memo((props: SourceBoxProps) => {
          },
        });
      } else {
-        console.log(item.x);
        dispatch({
          type: 'editorPcModal/addPointData',
          payload: {
--- a/src/pages/editor/components/Header/index.less
+++ b/src/pages/editor/components/Header/index.less
@ -1,6 +1,6 @@
 .header {
  position: relative;
-  z-index: 10;
+  z-index: 201;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
@ -32,6 +32,6 @@
  }
  .btnArea {
    width: 320px;
-    text-align: right;
+    text-align: left;
  }
 }
--- a/src/pages/editor/components/Header/index.tsx
+++ b/src/pages/editor/components/Header/index.tsx
@ -29,11 +29,10 @@ interface HeaderComponentProps {
  clearData: any;
  undohandler: any;
  redohandler: any;
-  toggleCollapsed: any;
 }

 const HeaderComponent = memo((props: HeaderComponentProps) => {
-  const { pointData, location, clearData, undohandler, redohandler, toggleCollapsed } = props;
+  const { pointData, location, clearData, undohandler, redohandler } = props;
  const iptRef = useRef<Input>(null);

  const toPreview = () => {
@ -137,7 +136,6 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
          <ArrowLeftOutlined />
        </div>
        <div className={styles.logo}>Dooring</div>
-        <Switch defaultChecked onChange={toggleCollapsed} style={{ marginLeft: '100px' }} />
      </div>
      <div className={styles.controlArea}>
        <Button type="primary" style={{ marginRight: '9px' }} onClick={useTemplate}>
--- a/src/pages/editor/index.less
+++ b/src/pages/editor/index.less
@ -25,11 +25,24 @@
    .list {
      width: 350px;
      height: 100%;
-      padding: 10px 16px 16px;
+      padding: 10px;
      box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
      display: inline-block;
      background-color: #fff;
-      overflow: auto;
+      & > div:nth-child(1) {
+        height: 100%;
+      }
+      .ctitle {
+        font-weight: bold;
+        line-height: 50px;
+        font-family: PingFangSC-Medium, PingFang SC;
+      }
+      .collapsed {
+        cursor: pointer;
+        &:hover {
+          color: #06c;
+        }
+      }
      .searchBar {
        margin-bottom: 20px;
      }
--- a/src/utils/tool.ts
+++ b/src/utils/tool.ts
@ -85,6 +85,7 @@ export function useAnimation(state: boolean, delay: number) {
 export function unParams(params = '?a=1&b=2&c=3') {
  let obj: any = {};
  params &&
+    // eslint-disable-next-line no-useless-escape
    params.replace(/((\w*)=([\.a-z0-9A-Z]*)?)?/g, (m, a, b, c): any => {
      if (b || c) obj[b] = c;
    });