update 响应式处理

web-react/src/assets/style/lib/list.less

@@ -26,7 +26,7 @@
       }
     }
   }
-  >.ant-pagination {
+  .ant-pagination {
     margin: @padding-md 0;
   }
   .ant-descriptions {
@@ -44,6 +44,14 @@
       }
     }
   }
+  &--scroll {
+    position: relative;
+
+    overflow-x: auto;
+  }
+  .ant-list-items {
+    min-width: 1000px;
+  }
   .ant-list-item {
     transition: @animation-duration-slow;
     transition-property: background, border-bottom-color;
@@ -52,4 +60,36 @@
       background: linear-gradient(90deg, transparent 10%, @background-color-light 70%, transparent);
     }
   }
+  &-container {
+    position: relative;
+    &::before,
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      z-index: 3;
+
+      width: 30px;
+
+      content: '';
+      transition: box-shadow @animation-duration-slow;
+      pointer-events: none;
+    }
+    &::before {
+      left: 0;
+    }
+    &::after {
+      right: 0;
+    }
+    &.yo-list--ping-left {
+      &::before {
+        box-shadow: inset 10px 0 8px -8px fade(@black, 15%);
+      }
+    }
+    &.yo-list--ping-right {
+      &::after {
+        box-shadow: inset -10px 0 8px -8px fade(@black, 15%);
+      }
+    }
+  }
 }

web-react/src/assets/style/lib/table.less

@@ -22,6 +22,14 @@
     }
   }
 }
+.ant-table {
+  .ant-table-container {
+    &::before,
+    &::after {
+      z-index: 3;
+    }
+  }
+}
 .ant-table-thead {
   th.ant-table-column-has-sorters {
     &:hover {

web-react/src/assets/style/lib/tree-layout.less

@@ -19,6 +19,20 @@
       }
     }
   }
+  &--collapsed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 4;
+
+    transform: translateX(-100%);
+    &.open {
+      transform: translateX(0);
+
+      box-shadow: 2px 0 8px fade(@black , 20%);
+    }
+  }
   &--bar {
     line-height: 20px;
 

web-react/src/components/query-list/index.jsx

@@ -43,6 +43,8 @@ export default class QueryList extends Component {
     state = {
         loading: false,
         dataSource: [],
+
+        ping: [],
     }
 
     // 查询表单实例
@@ -91,6 +93,12 @@ export default class QueryList extends Component {
         if (this.autoLoad) {
             this.onLoadData()
         }
+
+        window.addEventListener('resize', this.onResizeScroll)
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.onResizeScroll)
     }
 
     /**
@@ -108,9 +116,14 @@ export default class QueryList extends Component {
             this.query
         )
 
-        this.setState({
+        this.setState(
-            dataSource: res.rows || res.data || res.items,
+            {
-        })
+                dataSource: res.rows || res.data || res.items,
+            },
+            () => {
+                this.onResizeScroll()
+            }
+        )
 
         this.pagination.total = res.totalCount
 
@@ -174,7 +187,26 @@ export default class QueryList extends Component {
         this.onLoadData()
     }
 
+    onResizeScroll = () => {
+        this.onListScrollX({ target: this.refs['scroll-x'] })
+    }
+
+    onListScrollX(e) {
+        const { offsetWidth, scrollWidth, scrollLeft } = e.target
+        const ping = []
+        if (offsetWidth + scrollLeft < scrollWidth && scrollLeft > 0) {
+            ping.push(...['left', 'right'])
+        } else if (offsetWidth + scrollLeft < scrollWidth) {
+            ping.push('right')
+        } else if (offsetWidth + scrollLeft >= scrollWidth && offsetWidth < scrollWidth) {
+            ping.push('left')
+        }
+        this.setState({ ping })
+    }
+
     render() {
+        const { loading, dataSource, ping } = this.state
+
         const attrs = {}
         Object.keys(this.props).forEach(key => {
             if (!propsMap.includes(key)) {
@@ -206,9 +238,21 @@ export default class QueryList extends Component {
                     </div>
                 </div>
                 <div className="yo-list">
-                    <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                    <Spin spinning={loading} indicator={<AntIcon type="loading" />}>
-                        <List {...props} />
+                        <div
-                        {!!this.state.dataSource && !!this.state.dataSource.length && (
+                            className={['yo-list-container', ...ping.map(p => `yo-list--ping-${p}`)]
+                                .filter(p => p)
+                                .join(' ')}
+                        >
+                            <div
+                                className="yo-list--scroll"
+                                ref="scroll-x"
+                                onScroll={e => this.onListScrollX(e)}
+                            >
+                                <List {...props} />
+                            </div>
+                        </div>
+                        {!!dataSource && !!dataSource.length && (
                             <Pagination
                                 size="small"
                                 {...this.pagination}

web-react/src/components/query-tree-layout/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
-import { Breadcrumb, Empty, Input, Layout, Spin, Tooltip, Tree } from 'antd'
+import { Breadcrumb, Button, Col, Empty, Input, Layout, Row, Spin, Tooltip, Tree } from 'antd'
 import { AntIcon, Container } from 'components'
+import { SIDER_BREAK_POINT } from 'util/global'
 
 function generateKey(data, level) {
     const n = level || [0]
@@ -23,7 +24,7 @@ function generateList(data) {
         this.list.push({
             key,
             [this.replaceFields.value]: data[i][this.replaceFields.value],
-            [this.replaceFields.title]: data[i][this.replaceFields.title]
+            [this.replaceFields.title]: data[i][this.replaceFields.title],
         })
         if (data[i][this.replaceFields.children]) {
             generateList.call(this, data[i][this.replaceFields.children])
@@ -32,7 +33,7 @@ function generateList(data) {
 }
 
 function getParentKey(key, tree) {
-    let parentKey;
+    let parentKey
     for (let i = 0; i < tree.length; i++) {
         const node = tree[i]
         if (node[this.replaceFields.children]) {
@@ -43,23 +44,26 @@ function getParentKey(key, tree) {
             }
         }
     }
-    return parentKey;
+    return parentKey
 }
 
 function renderTitle(nodeData) {
     const title = nodeData[this.replaceFields.title]
     if (this.state.searchValue && title.indexOf(this.state.searchValue) > -1) {
-        return <>
+        return (
-            {title.substr(0, title.indexOf(this.state.searchValue))}
+            <>
-            <span style={{ color: '#f50' }}>{this.state.searchValue}</span>
+                {title.substr(0, title.indexOf(this.state.searchValue))}
-            {title.substr(title.indexOf(this.state.searchValue) + this.state.searchValue.length)}
+                <span style={{ color: '#f50' }}>{this.state.searchValue}</span>
-        </>
+                {title.substr(
+                    title.indexOf(this.state.searchValue) + this.state.searchValue.length
+                )}
+            </>
+        )
     }
     return <>{title}</>
 }
 
 function renderBreadcrumbItem() {
-
     const path = ['顶级']
 
     const findPath = (data, level) => {
@@ -91,14 +95,16 @@ function renderBreadcrumbItem() {
 }
 
 export default class QueryTreeLayout extends Component {
-
     state = {
         loading: false,
         dataSource: [],
         expandedKeys: [],
         selectedKey: '',
         autoExpandParent: true,
-        searchValue: ''
+        searchValue: '',
+
+        collapsed: false,
+        showSider: false,
     }
 
     list = []
@@ -108,16 +114,18 @@ export default class QueryTreeLayout extends Component {
     replaceFields = {
         value: 'id',
         title: 'title',
-        children: 'children'
+        children: 'children',
     }
 
     constructor(props) {
         super(props)
 
         this.autoLoad = typeof this.props.autoLoad === 'boolean' ? this.props.autoLoad : true
-        this.loadData = typeof this.props.loadData === 'function' ? this.props.loadData : async () => { }
+        this.loadData =
+            typeof this.props.loadData === 'function' ? this.props.loadData : async () => {}
 
-        this.defaultExpanded = typeof this.props.defaultExpanded === 'boolean' ? this.props.defaultExpanded : false
+        this.defaultExpanded =
+            typeof this.props.defaultExpanded === 'boolean' ? this.props.defaultExpanded : false
 
         if (this.props.replaceFields) {
             this.replaceFields = this.props.replaceFields
@@ -131,6 +139,13 @@ export default class QueryTreeLayout extends Component {
         if (this.autoLoad) {
             this.onLoadData()
         }
+
+        window.addEventListener('resize', this.onResizeLayout)
+        this.onResizeLayout()
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.onResizeLayout)
     }
 
     /**
@@ -151,7 +166,7 @@ export default class QueryTreeLayout extends Component {
         }
         this.setState({
             dataSource: data,
-            expandedKeys
+            expandedKeys,
         })
         this.onLoaded()
     }
@@ -162,8 +177,8 @@ export default class QueryTreeLayout extends Component {
     onLoading = () => {
         this.setState({
             loading: {
-                indicator: <AntIcon type="loading" />
+                indicator: <AntIcon type="loading" />,
-            }
+            },
         })
     }
 
@@ -178,28 +193,28 @@ export default class QueryTreeLayout extends Component {
         this.onLoadData()
     }
 
-    onExpand = (expandedKeys) => {
+    onExpand = expandedKeys => {
         this.setState({
             expandedKeys,
-            autoExpandParent: false
+            autoExpandParent: false,
         })
     }
 
-    onSelect = (selectedKeys) => {
+    onSelect = selectedKeys => {
         const selectedIds = []
         selectedKeys.forEach(p => {
             const data = this.list.find(m => m.key === p)
             selectedIds.push(data[this.replaceFields.value])
         })
         this.setState({
-            selectedKey: selectedIds[0]
+            selectedKey: selectedIds[0],
         })
         if (this.props.onSelect) {
             this.props.onSelect(selectedIds[0])
         }
     }
 
-    onSearch = (value) => {
+    onSearch = value => {
         const expandedKeys = this.list
             .map(p => {
                 if (p[this.replaceFields.title].indexOf(value) > -1) {
@@ -212,34 +227,49 @@ export default class QueryTreeLayout extends Component {
         this.setState({
             expandedKeys,
             autoExpandParent: !!value,
-            searchValue: value
+            searchValue: value,
+        })
+    }
+
+    onResizeLayout = () => {
+        this.setState({
+            collapsed: window.innerWidth <= SIDER_BREAK_POINT,
         })
     }
 
     render() {
-
+        const { loading, dataSource, expandedKeys, autoExpandParent, collapsed, showSider } =
-        const { dataSource, expandedKeys, autoExpandParent } = this.state
+            this.state
 
         const props = {
             treeData: dataSource,
             expandedKeys,
-            autoExpandParent
+            autoExpandParent,
         }
 
         const on = {
-            onExpand: (expandedKeys) => this.onExpand(expandedKeys),
+            onExpand: expandedKeys => this.onExpand(expandedKeys),
-            onSelect: (selectedKeys) => this.onSelect(selectedKeys)
+            onSelect: selectedKeys => this.onSelect(selectedKeys),
         }
 
         return (
             <Layout className="yo-tree-layout">
-                <Layout.Sider width="240px">
+                <Layout.Sider
+                    width="240px"
+                    className={[
+                        collapsed ? 'yo-tree-layout--collapsed' : '',
+                        showSider ? 'open' : '',
+                    ]
+                        .filter(p => p)
+                        .join(' ')}
+                    onMouseLeave={() => this.setState({ showSider: false })}
+                >
                     <Layout.Header>
                         <div className="header-actions">
                             <Input.Search
                                 allowClear={true}
                                 placeholder="请输入检索关键字"
-                                onSearch={(value) => this.onSearch(value)}
+                                onSearch={value => this.onSearch(value)}
                             />
                         </div>
                     </Layout.Header>
@@ -248,37 +278,56 @@ export default class QueryTreeLayout extends Component {
                             <AntIcon type="undo" onClick={() => this.onReloadData()} />
                         </Tooltip>
                         <Tooltip placement="bottom" title="折叠全部">
-                            <AntIcon type="switcher" onClick={() => this.setState({ expandedKeys: [] })} />
+                            <AntIcon
+                                type="switcher"
+                                onClick={() => this.setState({ expandedKeys: [] })}
+                            />
                         </Tooltip>
                     </div>
                     <div className="yo-tree-layout--content">
-                        <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />} wrapperClassName="h-100-p">
+                        <Spin
-                            {
+                            spinning={loading}
-                                !this.state.loading && !this.state.dataSource.length ?
+                            indicator={<AntIcon type="loading" />}
-                                    <Empty
+                            wrapperClassName="h-100-p"
-                                        image={
+                        >
-                                            <div className="text-center pt-md">
+                            {!loading && !dataSource.length ? (
-                                                <AntIcon className="h3 mt-xl mb-md" type="smile" />
+                                <Empty
-                                                <p>暂无数据</p>
+                                    image={
-                                            </div>
+                                        <div className="text-center pt-md">
-                                        }
+                                            <AntIcon className="h3 mt-xl mb-md" type="smile" />
-                                        description={false}
+                                            <p>暂无数据</p>
-                                    />
+                                        </div>
-                                    :
+                                    }
-                                    <Tree
+                                    description={false}
-                                        {...props}
+                                />
-                                        {...on}
+                            ) : (
-                                        titleRender={(nodeData) => renderTitle.call(this, nodeData)}
+                                <Tree
-                                    />
+                                    {...props}
-                            }
+                                    {...on}
+                                    titleRender={nodeData => renderTitle.call(this, nodeData)}
+                                />
+                            )}
                         </Spin>
                     </div>
                 </Layout.Sider>
                 <Layout.Content>
                     <Container mode="fluid">
-                        <Breadcrumb className="mt-md mb-md">
+                        <Row gutter={16} align="middle">
-                            {renderBreadcrumbItem.call(this)}
+                            {collapsed && (
-                        </Breadcrumb>
+                                <Col>
+                                    <Button
+                                        type="text"
+                                        icon={<AntIcon type="menu" />}
+                                        onClick={() => this.setState({ showSider: true })}
+                                    />
+                                </Col>
+                            )}
+                            <Col flex="1">
+                                <Breadcrumb className="mt-md mb-md">
+                                    {renderBreadcrumbItem.call(this)}
+                                </Breadcrumb>
+                            </Col>
+                        </Row>
                     </Container>
                     {this.props.children}
                 </Layout.Content>

web-react/src/store/reducer/layout.js

@@ -1,6 +1,21 @@
-const layout = (state = {
+import { SETTING_KEY } from "common/storage"
-    siderCollapsed: false
+import { SIDER_BREAK_POINT } from "util/global"
-}, action) => {
+
+const defaultState = {
+    siderCollapsed: false,
+    allowSiderCollapsed: true
+}
+
+const localStorageState = () => {
+    return JSON.parse(window.localStorage.getItem(SETTING_KEY))
+}
+
+const mergeState = {
+    ...defaultState,
+    ...localStorageState()
+}
+
+const layout = (state = mergeState, action) => {
     switch (action.type) {
         // 打开窗口
         case 'OPEN_WINDOW':
@@ -13,8 +28,23 @@ const layout = (state = {
             return state
         // 侧边收起状态
         case 'TOGGLE_COLLAPSED':
-            const _state = { ...state, siderCollapsed: action.siderCollapsed }
+            {
-            return _state
+                if (window.innerWidth <= SIDER_BREAK_POINT) {
+                    return state
+                }
+                const _state = { ...state, siderCollapsed: action.siderCollapsed }
+                window.localStorage.setItem(SETTING_KEY, JSON.stringify(_state))
+                return _state
+            }
+        case 'AUTO_TOGGLE_COLLAPSED':
+            {
+                const _state = {
+                    ...state,
+                    siderCollapsed: localStorageState().siderCollapsed || action.siderCollapsed,
+                    allowSiderCollapsed: !action.siderCollapsed
+                }
+                return _state
+            }
         default:
             return state
     }

web-react/src/util/global/index.js

@@ -36,4 +36,6 @@ export const RSA_PUBLIC_KEY = '-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQU
 /**
  * 城市名称
  */
-export const CITY = '黄石市'
+export const CITY = '黄石市'
+
+export const SIDER_BREAK_POINT = 1366

web-react/src/views/main/_layout/header/index.jsx

@@ -33,13 +33,20 @@ export default class index extends Component {
     }
 
     render() {
+        const { allowSiderCollapsed } = this.state
+
         return (
             <Layout.Header>
                 <Container mode="fluid">
                     <div className="header-actions">
-                        <span className="header-action mr-md" onClick={() => this.onCollapsed()}>
+                        {allowSiderCollapsed && (
-                            <AntIcon type="menu" />
+                            <span
-                        </span>
+                                className="header-action mr-md"
+                                onClick={() => this.onCollapsed()}
+                            >
+                                <AntIcon type="menu" />
+                            </span>
+                        )}
                         <Logo />
                         <Search />
                     </div>

web-react/src/views/main/index.jsx

@@ -1,10 +1,9 @@
 import React, { Component } from 'react'
 import { Spin, Layout } from 'antd'
-import { LoadingOutlined } from '@ant-design/icons'
 import { api } from 'common/api'
 import { cloneDeep, groupBy, findIndex, last } from 'lodash'
 import store from 'store'
-import { EMPTY_ID } from 'util/global'
+import { EMPTY_ID, SIDER_BREAK_POINT } from 'util/global'
 
 import Header from './_layout/header'
 import Sider from './_layout/sider'
@@ -83,6 +82,9 @@ export default class index extends Component {
                 })
             })
         })
+
+        window.addEventListener('resize', this.onResizeSider)
+        this.onResizeSider()
     }
 
     /**
@@ -231,6 +233,13 @@ export default class index extends Component {
         })
     }
 
+    onResizeSider = () => {
+        dispatch({
+            type: 'AUTO_TOGGLE_COLLAPSED',
+            siderCollapsed: window.innerWidth <= SIDER_BREAK_POINT,
+        })
+    }
+
     render() {
         const { loading, panes, actived } = this.state