Merge branch 'dev' of http://192.168.1.41:3000/outaozhen/cldV2react into dev

config/config.js

@@ -9,10 +9,13 @@ import defaultSettings from './defaultSettings'
 import proxy from './proxy'
 import routes from './routes'
 import windicss from 'windicss-webpack-plugin/dist/index'
-const { NODE_ENV, REACT_APP_ENV } = process.env
+const { REACT_APP_ENV } = process.env
 export default defineConfig({
   hash: true,
   antd: {},
+  define: {
+    REACT_APP_ENV: REACT_APP_ENV || false
+  },
   layout: {
     // https://umijs.org/zh-CN/plugins/plugin-layout
     locale: true,
@@ -76,14 +79,25 @@ export default defineConfig({
         libraryName: '@icon-park/react',
         libraryDirectory: 'es/icons',
         camel2DashComponentName: false
-      }
+      },
+      '@icon-park/react'
+    ],
+    [
+      'import',
+      {
+        libraryName: '@arco-design/web-react',
+        libraryDirectory: 'es',
+        camel2DashComponentName: false,
+        style: true // 样式按需加载
+      },
+      '@arco-design/web-react'
     ]
   ],
   chainWebpack(config) {
     config.plugin('windicss').use(windicss)
     config.plugin('antd-dayjs-webpack-plugin').use(AntdDayjsWebpackPlugin)
 
-    if (NODE_ENV === 'production') {
+    if (REACT_APP_ENV === 'prod') {
       config.merge({
         optimization: {
           minimize: true,

package.json

@@ -5,9 +5,9 @@
   "description": "An out-of-box UI solution for enterprise applications",
   "scripts": {
     "analyze": "cross-env ANALYZE=1 umi build",
-    "build": "cross-env REACT_APP_ENV=prod umi build",
-    "deploy:qa": "cross-env REACT_APP_ENV=qa auto-deploy build -t qa",
-    "deploy:prod": "auto-deploy build -t prod",
+    "build": "umi build",
+    "deploy:qa": "cross-env REACT_APP_ENV=dev auto-deploy build -t qa",
+    "deploy:prod": "cross-env REACT_APP_ENV=prod auto-deploy build -t prod",
     "deploy-gh-pages": "npm run site && npm run gh-pages",
     "dev": "npm run start:dev",
     "fetch:blocks": "pro fetch-blocks && npm run prettier",
@@ -72,7 +72,6 @@
     "react-helmet-async": "^1.0.4",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^7.1.0",
-    "react-window": "^1.8.6",
     "umi": "3.5.4",
     "vditor": "^3.8.7"
   },

src/components/RightContent/AvatarDropdown.tsx

@@ -86,10 +86,10 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
 
   const menuHeaderDropdown = (
     <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
-      <Menu.Item key="settings">
+      {/* <Menu.Item key="settings">
         <SettingOutlined />
         个人设置
-      </Menu.Item>
+      </Menu.Item> */}
       {/* {menu && (
         <Menu.Item key="settings">
           <SettingOutlined />

src/components/Table/src/VirtualTable.tsx

@@ -1,105 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { VariableSizeGrid as Grid } from 'react-window'
-import ResizeObserver from 'rc-resize-observer'
-import classNames from 'classnames'
-import { Table } from 'antd'
-import type { TableProps } from 'antd'
-
-function VirtualTable<RecordType extends Record<string, unknown>>(props: TableProps<RecordType>) {
-  const { columns, scroll } = props
-  const [state, setState] = useState({
-    tableWidth: 0,
-    current: 1
-  })
-  const widthColumnCount = columns.filter(({ width }) => !width).length
-  const mergedColumns = columns.map(column => {
-    if (column.width) {
-      return column
-    }
-
-    return { ...column, width: Math.floor(state.tableWidth / widthColumnCount) }
-  })
-  const gridRef = useRef()
-  const [connectObject] = useState(() => {
-    const obj = {}
-    Object.defineProperty(obj, 'scrollLeft', {
-      get: () => null,
-      set: scrollLeft => {
-        if (gridRef.current) {
-          gridRef.current.scrollTo({
-            scrollLeft
-          })
-        }
-      }
-    })
-    return obj
-  })
-
-  const resetVirtualGrid = () => {
-    gridRef.current?.resetAfterIndices({
-      columnIndex: 0,
-      shouldForceUpdate: true
-    })
-  }
-
-  useEffect(() => resetVirtualGrid, [state.tableWidth])
-
-  const renderVirtualList = (rawData, { scrollbarSize, ref, onScroll }) => {
-    // eslint-disable-next-line no-param-reassign
-    ref.current = connectObject
-    const totalHeight = rawData.length * 54
-    return (
-      <Grid
-        ref={gridRef}
-        className="virtual-grid"
-        columnCount={mergedColumns.length}
-        columnWidth={index => {
-          const { width } = mergedColumns[index]
-          return totalHeight > scroll.y && index === mergedColumns.length - 1
-            ? width - scrollbarSize - 1
-            : width
-        }}
-        height={scroll.y}
-        rowCount={rawData.length}
-        rowHeight={() => 54}
-        width={state.tableWidth}
-        onScroll={({ scrollLeft }) => {
-          onScroll({
-            scrollLeft
-          })
-        }}
-      >
-        {({ columnIndex, rowIndex, style }) => (
-          <div
-            className={classNames('virtual-table-cell', {
-              'virtual-table-cell-last': columnIndex === mergedColumns.length - 1
-            })}
-            style={style}
-          >
-            {rawData[rowIndex][mergedColumns[columnIndex].dataIndex]}
-          </div>
-        )}
-      </Grid>
-    )
-  }
-
-  return (
-    <ResizeObserver
-      onResize={({ width }) => {
-        setState({ ...state, tableWidth: width })
-      }}
-    >
-      <Table
-        {...props}
-        className="virtual-table"
-        columns={mergedColumns}
-        pagination={false}
-        components={{
-          body: renderVirtualList
-        }}
-      />
-    </ResizeObserver>
-  )
-} // Usage
-
-export default VirtualTable

src/components/Table/src/hooks/useTableScroll.ts

@@ -69,6 +69,7 @@ export function useTableScroll(
     // )
 
     setTableHeight(dataSource?.length ? height : null)
+
     if (!dataSource?.length) {
       // TODO:针对无数据的情况下，特别设置tboody
       const tbodyEl: HTMLElement = tableElRef.current
@@ -78,7 +79,12 @@ export function useTableScroll(
       let hasScrollBar = el?.style.width !== '100%'
 
       if (el?.style.width !== '100%') {
-        hasScrollBar = el?.clientWidth > el?.style.width
+        const contentWidth =
+          tableElRef.current
+            ?.querySelector('.ant-table-container')
+            ?.querySelector('div.ant-table-content')?.clientWidth || 0
+
+        hasScrollBar = el?.clientWidth > contentWidth
       }
 
       const notDataHeight = `${height - (hasScrollBar ? 8 : 0)}px`

src/utils/env.ts

@@ -1,5 +1,4 @@
 import pkg from '../../package.json'
-import { isDevOrQa } from './is'
 
 // Generate cache key according to version
 export function getStorageShortName() {
@@ -8,19 +7,19 @@ export function getStorageShortName() {
 /**
  * @description: Development model
  */
-export const devMode = 'development'
+export const devMode = 'dev'
 
 /**
  * @description: Production mode
  */
-export const prodMode = 'production'
+export const prodMode = 'prod'
 /**
  * @description: Get environment variables
  * @returns:
  * @example:
  */
 export function getEnv(): string {
-  return process.env
+  return REACT_APP_ENV
 }
 
 /**
@@ -29,8 +28,7 @@ export function getEnv(): string {
  * @example:
  */
 export function isDevMode(): boolean {
-  // isDevOrQa
-  return isDevOrQa()
+  return REACT_APP_ENV === devMode
 }
 
 /**
@@ -39,6 +37,5 @@ export function isDevMode(): boolean {
  * @example:
  */
 export function isProdMode(): boolean {
-  const { NODE_ENV } = process.env
-  return NODE_ENV === prodMode
+  return REACT_APP_ENV === prodMode
 }

src/utils/is.ts

@@ -55,8 +55,3 @@ export function isEmpty<T = unknown>(val: T): val is T {
 export function isMobile() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
 }
-
-export function isDevOrQa() {
-  const { host } = window.location
-  return /^(cld2qa)|(localhost)/.test(host)
-}