Skip to content
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/base/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@
<meta charset="UTF-8" />
<link id="dms-logo-favicon" rel="icon" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 禁止移动端Safari中的手机号、邮箱识别 避免页面里出现“自动加下划线/变蓝/可点”的号码或邮箱 -->
<meta name="format-detection" content="telephone=no, email=no" />
<!-- 当用户把网站“添加到主屏幕”后,从主屏图标启动时,允许以类似 App 的独立模式运行(通常会隐藏 Safari 地址栏/工具栏)。-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅在 iOS 主屏幕启动的独立模式下生效,用来设置状态栏样式 -->
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<title><%= title %></title>
</head>
<body>
Expand Down
16 changes: 14 additions & 2 deletions packages/base/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ import { ConfigProvider, Spin, theme as antdTheme } from 'antd';
import { ThemeData } from './theme';
import {
StyleProvider,
legacyLogicalPropertiesTransformer
legacyLogicalPropertiesTransformer,
px2remTransformer
} from '@ant-design/cssinjs';
import { useRequest } from 'ahooks';
import BasicInfo from '@actiontech/shared/lib/api/base/service/BasicInfo';
Expand All @@ -53,6 +54,7 @@ import sharedEmitterKey from '@actiontech/dms-kit/es/data/EmitterKey';
import useRecentlySelectedZone from '@actiontech/dms-kit/es/features/useRecentlySelectedZone';
import { debounce } from 'lodash';
import ErrorBoundary from './page/ErrorBoundary';
import { useMedia } from '@actiontech/shared';
import './index.less';
dayjs.extend(updateLocale);
dayjs.updateLocale('zh-cn', {
Expand Down Expand Up @@ -95,7 +97,13 @@ export const Wrapper: React.FC<{
}, [initRenderApp, location.pathname, location.search, navigate, token]);
return <>{!initRenderApp && children}</>;
};

const px2rem = px2remTransformer({
rootValue: 16 // 16px = 1rem;
});

function App() {
const { isMobile } = useMedia();
const { isAfterLoggingIn } = useSelector((state: IReduxState) => ({
isAfterLoggingIn: !state.user.isLoggingIn && !!state.user.token
}));
Expand Down Expand Up @@ -239,7 +247,11 @@ function App() {
<Wrapper>
<StyleProvider
hashPriority="high"
transformers={[legacyLogicalPropertiesTransformer]}
transformers={
isMobile
? [legacyLogicalPropertiesTransformer, px2rem]
: [legacyLogicalPropertiesTransformer]
}
>
<ConfigProvider
locale={antdLanguage}
Expand Down
50 changes: 50 additions & 0 deletions packages/base/src/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,53 @@ body * {
width: max-content;
max-width: 100vw;
}

/*
antd DatePicker和RangePicker的移动端适配样式
在移动端中,DatePicker和RangePicker的弹窗会超出移动端屏幕宽度,导致部分选项被遮盖
所以在移动端中采用上下排列方式,避免此问题
可参考issue:https://github.com/ant-design/ant-design/issues/26758
issue目前一直在open状态,暂无官方的处理方案,后续如果官方修复此问题,可删除此样式
*/
.ant-picker-panel-container {
.ant-picker-presets {
min-height: 25rem !important;
}

@media (max-width: 768px) {
overflow: scroll !important;
height: 400px;

.ant-picker-panel-layout {
flex-direction: column !important;

.ant-picker-presets {
max-width: 100% !important;
min-height: 10rem !important;
}

.ant-picker-panels,
.ant-picker-datetime-panel {
flex-direction: column !important;
}
}
}
}

/*
设置ios 独立模式的安全区域内边距
可参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Values/env
*/
:root {
--sat: env(safe-area-inset-top);
--sar: env(safe-area-inset-right);
--sab: env(safe-area-inset-bottom);
--sal: env(safe-area-inset-left);
}

body {
padding-top: var(--sat);
padding-right: var(--sar);
padding-bottom: var(--sab);
padding-left: var(--sal);
}
8 changes: 6 additions & 2 deletions packages/base/src/page/Nav/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { ReactNode } from 'react';
import { LayoutStyleWrapper } from '@actiontech/dms-kit';
import useBrowserVersionTips from '../../hooks/useBrowserVersionTips';
import UserGuideModal from './UserGuideModal';
import { useMedia } from '@actiontech/shared';
import { EmptyBox } from '@actiontech/dms-kit';

// #if [ee]
import EESideMenu from './SideMenu';
Expand All @@ -15,11 +17,13 @@ import CopyrightInformation from './Copyright';

const Nav: React.FC<{ children?: ReactNode }> = (props) => {
useBrowserVersionTips();

const { isMobile } = useMedia();
return (
<LayoutStyleWrapper>
{/* #if [ee] */}
<EESideMenu />
<EmptyBox if={!isMobile}>
<EESideMenu />
</EmptyBox>
{/* #else */}
<CESideMenu />
{/* #endif */}
Expand Down
6 changes: 5 additions & 1 deletion packages/dms-kit/docs/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,8 @@ nav:
- ConfigItem组件descNode类型由string改为React.ReactNode
- CustomAvatar中Tooltip title改动,用于适配用户名的空格展示
- CustomSelect样式变更,用于适配用户名的空格展示
- BasicSelect样式变更,用于适配用户名的空格展示
- BasicSelect样式变更,用于适配用户名的空格展示

## 1.0.3
Comment thread
LZS911 marked this conversation as resolved.
Outdated

- ActiontechTable新增prop:enableOnlyRenderMoreButtons
2 changes: 1 addition & 1 deletion packages/dms-kit/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@actiontech/dms-kit",
"version": "1.0.3",
"version": "1.0.4",
"description": "DMS Kit - React UI Components Library",
"main": "lib/index.js",
"module": "es/index.js",
Expand Down
5 changes: 5 additions & 0 deletions packages/dms-kit/src/components/ActiontechTable/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@ group:

<code src="./demo/moreActions.tsx"></code>

### 仅渲染更多按钮(enableOnlyRenderMoreButtons)

<code src="./demo/enableOnlyRenderMoreButtons.tsx"></code>

## API

ActiontechTable 继承 Ant Design Table 的所有属性,完整 API 请参考 [Table 文档](https://ant.design/components/table-cn)。
Expand All @@ -58,6 +62,7 @@ ActiontechTable 继承 Ant Design Table 的所有属性,完整 API 请参考 [
| actions | 操作列配置,自动生成操作列 | `ActiontechTableActionsConfig` \| `ActiontechTableActionMeta[]` | - | - |
| setting | 列设置配置,用户的列选择会存储到 localStorage | `ColumnsSettingProps` \| `false` | - | - |
| isPaginationFixed | 分页器是否固定在页面底部 | `boolean` | `true` | - |
| enableOnlyRenderMoreButtons | 是否只渲染更多按钮。默认为 `false`:当 `actions.buttons` 为空时,会从 `moreButtons` 中自动“外露”最多 2 个按钮到表格内联按钮;设置为 `true` 时不会外露,全部操作都放入更多按钮中(适配窄屏/移动端)。 | `boolean` | `false` | - |
| errorMessage | 错误消息,用于请求失败时显示 | `string` | - | - |

### 常用 Table 属性
Expand Down
13 changes: 11 additions & 2 deletions packages/dms-kit/src/components/ActiontechTable/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const ActiontechTable = <
isPaginationFixed = true,
toolbar,
filterContainerProps,
enableOnlyRenderMoreButtons = false,
...props
}: ActiontechTableProps<T, F, OtherColumnKeys>) => {
const { t } = useTranslation();
Expand All @@ -40,12 +41,20 @@ const ActiontechTable = <
>(tableName, username);

const mergerColumns = useMemo(() => {
const operatorColumn = renderActionInTable<T>(props.actions);
const operatorColumn = renderActionInTable<T>(
props.actions,
enableOnlyRenderMoreButtons
);

return (
operatorColumn ? [...columns, operatorColumn] : columns
) as ActiontechTableColumn<T, F, OtherColumnKeys>;
}, [columns, props.actions, renderActionInTable]);
}, [
columns,
props.actions,
renderActionInTable,
enableOnlyRenderMoreButtons
]);

const innerColumns = useMemo(() => {
if (!tableSetting) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import React, { useMemo, useState } from 'react';
import { ActiontechTable, ConfigProvider } from '@actiontech/dms-kit';
import type { ActiontechTableColumn } from '@actiontech/dms-kit';
import { Space, Switch, Tag, Typography, message } from 'antd';
import {
EditOutlined,
DeleteOutlined,
EyeOutlined,
MoreOutlined
} from '@ant-design/icons';

interface RecordItem {
id: number;
name: string;
status: 'enabled' | 'disabled';
}

const mockData: RecordItem[] = [
{ id: 1, name: '示例数据 A', status: 'enabled' },
{ id: 2, name: '示例数据 B', status: 'disabled' },
{ id: 3, name: '示例数据 C', status: 'enabled' }
];

const EnableOnlyRenderMoreButtonsDemo: React.FC = () => {
const [enableOnlyRenderMoreButtons, setEnableOnlyRenderMoreButtons] =
useState(false);

const columns: ActiontechTableColumn<
RecordItem,
Record<string, any>
> = useMemo(
() => [
{ title: 'ID', dataIndex: 'id', width: 80 },
{ title: '名称', dataIndex: 'name', width: 200 },
{
title: '状态',
dataIndex: 'status',
width: 120,
render: (status) => (
<Tag color={status === 'enabled' ? 'green' : 'default'}>
{status === 'enabled' ? '启用' : '禁用'}
</Tag>
)
}
],
[]
);

return (
<ConfigProvider>
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Space align="center">
<Typography.Text strong>enableOnlyRenderMoreButtons</Typography.Text>
<Switch
checked={enableOnlyRenderMoreButtons}
onChange={setEnableOnlyRenderMoreButtons}
/>
<Typography.Text type="secondary">
{enableOnlyRenderMoreButtons
? '所有操作都在“更多”里(不自动外露按钮)'
: '当 buttons 为空时,会从 moreButtons 自动外露最多 2 个按钮'}
</Typography.Text>
</Space>

<ActiontechTable<RecordItem, Record<string, any>>
rowKey="id"
dataSource={mockData}
columns={columns}
pagination={false}
enableOnlyRenderMoreButtons={enableOnlyRenderMoreButtons}
actions={{
title: '操作',
width: 220,
fixed: 'right',
// 关键点:buttons 为空数组
buttons: [],
moreButtons: (record) => [
{
key: 'view',
text: '查看',
icon: <EyeOutlined />,
onClick: () => message.info(`查看:${record.name}`)
},
{
key: 'edit',
text: '编辑',
icon: <EditOutlined />,
onClick: () => message.info(`编辑:${record.name}`)
},
{
key: 'more',
text: '更多信息',
icon: <MoreOutlined />,
onClick: () => message.info(`更多信息:${record.name}`)
},
{
key: 'delete',
text: '删除',
icon: <DeleteOutlined />,
confirm: () => ({
title: `确定删除 "${record.name}" 吗?`,
onConfirm: () => message.success(`已删除:${record.name}`)
})
}
]
}}
/>
</Space>
</ConfigProvider>
);
};

export default EnableOnlyRenderMoreButtonsDemo;
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,8 @@ const useTableAction = () => {

const renderActionInTable = useCallback(
<T extends Record<string, any>>(
actions: ActiontechTableProps<T>['actions']
actions: ActiontechTableProps<T>['actions'],
enableOnlyRenderMoreButtons = false
):
| ActiontechTableColumn<
T,
Expand Down Expand Up @@ -151,7 +152,11 @@ const useTableAction = () => {
checkButtonPermissions(button.permissions, record)
);
}
if (visibleButtons.length === 0 && visibleMoreButtons.length > 0) {
if (
visibleButtons.length === 0 &&
visibleMoreButtons.length > 0 &&
!enableOnlyRenderMoreButtons
) {
//todo 文档记录. 当 visibleButtons 为 0 时,从 moreButtons 中 move 两个 button 到外层。
const maxIndex = Math.min(visibleMoreButtons.length, 2);

Expand Down
6 changes: 6 additions & 0 deletions packages/dms-kit/src/components/ActiontechTable/index.type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -419,4 +419,10 @@ export interface ActiontechTableProps<
* 控制表格的分页器是否固定于页面底部,默认为true,固定在页面底部,注意:只有在表格有pagination时,设置isPaginationFixed才有意义
*/
isPaginationFixed?: boolean;
/**
* 是否只渲染更多按钮,默认为false,如果action.buttons为空数组,会从moreButtons中移动两个按钮到buttons中
* 如果设置为true,则不会移动
* 为了适配移动端窄屏幕的场景,将全部操作都放入moreButtons中
*/
enableOnlyRenderMoreButtons?: boolean;
}
6 changes: 6 additions & 0 deletions packages/dms-kit/src/styleWrapper/nav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -390,6 +390,12 @@ export const LayoutStyleWrapper = styled('section')`
display: flex;
flex-direction: column;

/* 移动端适配 */
@media (max-width: 768px) {
width: 100% !important;
min-width: 100% !important;
}

.copyright-information {
color: ${({ theme }) => theme.sharedTheme.uiToken.colorTextTertiary};
font-size: 13px;
Expand Down
2 changes: 2 additions & 0 deletions packages/shared/lib/hooks/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export { default as usePrompt } from './usePrompt';
export { default as useBack } from './useBack';
export { default as useNotificationContext } from './useNotificationContext';
export { default as useMedia } from './useMedia';
export { default as useViewport } from './useViewport';
11 changes: 11 additions & 0 deletions packages/shared/lib/hooks/useMedia/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { useMediaQuery, useTheme } from '@mui/material';

const useMedia = () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md')); // 768px
const isSmallMobile = useMediaQuery(theme.breakpoints.down('sm')); // 480px

return { isMobile, isSmallMobile };
};

export default useMedia;
Loading