actiontech · zzyangh · Dec 26, 2025 · Dec 26, 2025 · Dec 26, 2025
diff --git a/packages/base/index.html b/packages/base/index.html
@@ -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>

diff --git a/packages/base/src/App.tsx b/packages/base/src/App.tsx
@@ -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';
@@ -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', {
@@ -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
   }));
@@ -239,7 +247,11 @@ function App() {
     <Wrapper>
       <StyleProvider
         hashPriority="high"
-        transformers={[legacyLogicalPropertiesTransformer]}
+        transformers={
+          isMobile
+            ? [legacyLogicalPropertiesTransformer, px2rem]
+            : [legacyLogicalPropertiesTransformer]
+        }
       >
         <ConfigProvider
           locale={antdLanguage}

diff --git a/packages/base/src/index.less b/packages/base/src/index.less
@@ -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);
+}
diff --git a/packages/base/src/page/Nav/index.tsx b/packages/base/src/page/Nav/index.tsx
@@ -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';
@@ -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 */}

diff --git a/packages/dms-kit/docs/CHANGELOG.md b/packages/dms-kit/docs/CHANGELOG.md
@@ -32,4 +32,8 @@ nav:
 - ConfigItem组件descNode类型由string改为React.ReactNode
 - CustomAvatar中Tooltip title改动，用于适配用户名的空格展示
 - CustomSelect样式变更，用于适配用户名的空格展示
-- BasicSelect样式变更，用于适配用户名的空格展示
+- BasicSelect样式变更，用于适配用户名的空格展示
+
+## 1.0.4
+
+- ActiontechTable新增prop:enableOnlyRenderMoreButtons
diff --git a/packages/dms-kit/package.json b/packages/dms-kit/package.json
@@ -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",

diff --git a/packages/dms-kit/src/components/ActiontechTable/README.md b/packages/dms-kit/src/components/ActiontechTable/README.md
@@ -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)。
@@ -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 属性

diff --git a/packages/dms-kit/src/components/ActiontechTable/Table.tsx b/packages/dms-kit/src/components/ActiontechTable/Table.tsx
@@ -21,6 +21,7 @@ const ActiontechTable = <
   isPaginationFixed = true,
   toolbar,
   filterContainerProps,
+  enableOnlyRenderMoreButtons = false,
   ...props
 }: ActiontechTableProps<T, F, OtherColumnKeys>) => {
   const { t } = useTranslation();
@@ -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) {

diff --git a/packages/dms-kit/src/components/ActiontechTable/demo/enableOnlyRenderMoreButtons.tsx b/packages/dms-kit/src/components/ActiontechTable/demo/enableOnlyRenderMoreButtons.tsx
@@ -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;
diff --git a/packages/dms-kit/src/components/ActiontechTable/hooks/useTableAction.tsx b/packages/dms-kit/src/components/ActiontechTable/hooks/useTableAction.tsx
@@ -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,
@@ -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);
 

diff --git a/packages/dms-kit/src/components/ActiontechTable/index.type.ts b/packages/dms-kit/src/components/ActiontechTable/index.type.ts
@@ -419,4 +419,10 @@ export interface ActiontechTableProps<
    * 控制表格的分页器是否固定于页面底部，默认为true，固定在页面底部，注意：只有在表格有pagination时，设置isPaginationFixed才有意义
    */
   isPaginationFixed?: boolean;
+  /**
+   * 是否只渲染更多按钮，默认为false，如果action.buttons为空数组，会从moreButtons中移动两个按钮到buttons中
+   * 如果设置为true，则不会移动
+   * 为了适配移动端窄屏幕的场景，将全部操作都放入moreButtons中
+   */
+  enableOnlyRenderMoreButtons?: boolean;
 }
diff --git a/packages/dms-kit/src/styleWrapper/nav.ts b/packages/dms-kit/src/styleWrapper/nav.ts
@@ -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;

diff --git a/packages/shared/lib/hooks/index.ts b/packages/shared/lib/hooks/index.ts
@@ -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';
diff --git a/packages/shared/lib/hooks/useMedia/index.ts b/packages/shared/lib/hooks/useMedia/index.ts
@@ -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;