refactor(company): extract ExpireOrApp guard component from app.tsx

- Move ExpireOrApp logic into standalone component under components/ExpireOrApp
- Remove unused React hooks and CompanyExpireGuard import from app.tsx
- Use dayjs.utc for validity date to prevent timezone offset issues
- Remove stale console.log from CompanyExpireWarning

.gitignore

@@ -16,6 +16,7 @@ deploy.js
 # misc
 .env
 .DS_Store
+.claude
 npm-debug.log*
 yarn-error.log
 

config/config.ts

@@ -91,7 +91,9 @@ const config: ConfigType = defineConfig({
    * @description Can be used to store global data such as user info or global state. The global initial state is created at the very start of the Umi project.
    * @doc https://umijs.org/docs/max/data-flow#%E5%85%A8%E5%B1%80%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81
    */
-  initialState: {},
+  initialState: {
+    loading: '@/loading',
+  },
   /**
    * @name layout 插件
    * @doc https://umijs.org/docs/max/layout-menu

config/proxy.ts

@@ -15,7 +15,8 @@ export default {
     '/api': {
       // The address to proxy
       // target: 'http://2333z061l7.51mypc.cn',
-      target: 'http://172.20.177.121:8080',
+      // target: 'http://172.20.177.121:8080',
+      target: 'http://172.20.177.121:8082',
       changeOrigin: true,
       pathRewrite: {
         '^/api': '',

config/routes.ts

@@ -52,7 +52,7 @@ export const roleRoutes = [
     meta: {
       permissions: ['rule:list'],
     },
-    wrappers: ['@/wrappers/noBindDataSource'],
+    wrappers: ['@/wrappers/CompanyExpire', '@/wrappers/noBindDataSource'],
     component: './rules',
     routes: [
       {
@@ -166,6 +166,7 @@ export const roleRoutes = [
     meta: {
       permissions: ['data-source:list'],
     },
+    wrappers: ['@/wrappers/CompanyExpire'],
     component: './data-source/index',
   },
   {

example.nginx.conf

@@ -91,7 +91,20 @@ server {
     proxy_set_header X-Forwarded-Proto $scheme;
 
     proxy_pass http://127.0.0.1:8090;
-
-
   }
+
+  location /expo-api/ {
+		proxy_http_version 1.1;
+		proxy_set_header Connection '';
+		proxy_set_header Cache-Control "no-transform";
+		proxy_set_header X-Accel-Buffering "no";
+		proxy_buffering off;
+		proxy_read_timeout 86400s;
+
+		proxy_set_header X-Real-IP $remote_addr;
+		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+		proxy_set_header Host $http_host;
+		proxy_set_header X-Forwarded-Proto $scheme;
+		proxy_pass http://127.0.0.1:4000;
+	}
 }

src/app.tsx

@@ -1,8 +1,9 @@
 import type { Settings as LayoutSettings } from '@ant-design/pro-components';
 import { PageLoading } from '@ant-design/pro-components';
 import type { RequestConfig, RunTimeLayoutConfig } from '@umijs/max';
-import { history, Link, useModel } from '@umijs/max';
+import { history, Link, useAccess, useModel } from '@umijs/max';
 import '@ant-design/v5-patch-for-react-19';
+import React from 'react';
 import { App } from 'antd';
 import { AvatarDropdown, AvatarName, SelectLang } from '@/components';
 import { currentUser as queryCurrentUser } from '@/services/api';
@@ -17,7 +18,10 @@ import ServerErrorPage from './pages/500';
 import { errorConfig } from './requestErrorConfig';
 import { getDeviceId } from './utils/fp';
 import './utils/sentry';
+import ExpireOrApp from './components/ExpireOrApp';
+import CompanyExpireWarning from './components/CompanyExpireWarning';
 import GlobalErrorBoundary from './components/GlobalErrorBoundary';
+import PermissionGuard from './components/PermissionGuard';
 import SSEController from './components/SSEController';
 import VoiceCheck from './components/VoiceCheck';
 
@@ -103,9 +107,14 @@ export function rootContainer(container: React.ReactNode) {
   );
 }
 
+export function innerProvider(container: React.ReactNode) {
+  return <ExpireOrApp>{container}</ExpireOrApp>;
+}
+
 // ProLayout support API https://procomponents.ant.design/components/layout
 export const layout: RunTimeLayoutConfig = ({ initialState }) => {
   const { fetchUnread, initialized } = useModel('useMenuNoticeNum');
+  const { hasPerms } = useAccess() ?? {};
 
   const isDark = initialState?.settings?.navTheme === 'realDark';
   const currentUser = initialState?.currentUser;
@@ -123,8 +132,7 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
         bgLayout: '#f8fafc',
       };
 
-  if (currentUser && !initialized) {
+  if (currentUser && !initialized && hasPerms?.('alert:list')) {
-    console.log('fetchUnread');
     fetchUnread();
   }
   return {
@@ -138,6 +146,7 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
     },
     actionsRender: (_layoutProps) => {
       return [
+        <CompanyExpireWarning key="CompanyExpireWarning" />,
         <VoiceCheck key="VoiceCheck" />,
         needChangePass && <ChangePassTips key="ChangePassTips" />,
         // <ThemeSwitch
@@ -196,9 +205,15 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
     // Add a loading state
     childrenRender: (children) => {
       if (initialState?.loading) return <PageLoading />;
+
       return (
         <>
-          {currentUser && <SSEController />}
+          {currentUser && (
+            <>
+              <SSEController />
+              <PermissionGuard />
+            </>
+          )}
 
           <GlobalErrorBoundary>{children}</GlobalErrorBoundary>
         </>

src/components/CompanyExpireGuard/index.tsx

@@ -0,0 +1,41 @@
+import { Button, Result, Space } from 'antd';
+import { logoutAndToLoginPage } from '@/access';
+import useUserInfo from '@/hooks/useUserInfo';
+import { $t } from '@/utils/i18n';
+
+const fullscreenClass =
+  'fixed-all-center flex align-center justify-center bg-white';
+const CompanyExpireGuard: React.FC<{ fullscreen?: boolean }> = ({
+  fullscreen = true,
+}) => {
+  const { userInfo } = useUserInfo();
+  const isExpired = userInfo?.company?.validityStatus === 2;
+
+  if (!isExpired) return null;
+
+  return (
+    <div className={fullscreen ? fullscreenClass : ''}>
+      <Result
+        status="warning"
+        title={$t('pages.company.expireTitle')}
+        subTitle={$t('pages.company.expireSubTitle')}
+        extra={
+          <Space>
+            <Button type="primary" onClick={() => window.location.reload()}>
+              {$t('pages.refresh')}
+            </Button>
+            <Button
+              onClick={() => {
+                logoutAndToLoginPage();
+              }}
+            >
+              {$t('pages.logout')}
+            </Button>
+          </Space>
+        }
+      />
+    </div>
+  );
+};
+
+export default CompanyExpireGuard;

src/components/CompanyExpireWarning/index.tsx

@@ -0,0 +1,58 @@
+import { ClockCircleOutlined } from '@ant-design/icons';
+import { useBreakpoint } from '@ant-design/pro-components';
+import { history as umiHistory, useAccess } from '@umijs/max';
+import { Alert, Popover, Space } from 'antd';
+import useUserInfo from '@/hooks/useUserInfo';
+import { $t } from '@/utils/i18n';
+import { utcInstance as dayjs } from '@/utils/timeFormat';
+
+const CompanyExpireWarning: React.FC = () => {
+  const { isGlobalCompany } = useAccess();
+  const { userInfo } = useUserInfo();
+  const screens = useBreakpoint();
+  const { validityEndTime, validityStatus } = userInfo?.company || {};
+  if (isGlobalCompany) {
+    return null;
+  }
+
+  const expireInDays = dayjs(`${validityEndTime}T23:59:59`).diff(
+    dayjs().utc(),
+    'day',
+  );
+
+  const tipsNode = (
+    <Alert
+      message={
+        validityStatus === 2
+          ? $t('pages.company.expireTitle')
+          : expireInDays <= 0
+            ? $t('pages.company.expireToday')
+            : `${$t('pages.company.expireInDays', { days: Math.abs(expireInDays) })}`
+      }
+      type={validityStatus === 2 ? 'error' : 'warning'}
+      showIcon
+    />
+  );
+  return (
+    <Space align="center" onClick={() => umiHistory.push('/profile')}>
+      {['xs', 'sm'].includes(screens || '') ? (
+        <Popover
+          content={tipsNode}
+          styles={{
+            body: { padding: 0 },
+          }}
+          zIndex={999}
+          defaultOpen={true}
+        >
+          <ClockCircleOutlined
+            className="flex align-center"
+            style={{ color: '#f59e0b', fontSize: 20 }}
+          />
+        </Popover>
+      ) : (
+        tipsNode
+      )}
+    </Space>
+  );
+};
+export default CompanyExpireWarning;

src/components/ExpireOrApp/index.tsx

@@ -0,0 +1,58 @@
+import { PageLoading } from '@ant-design/pro-components';
+import { history, useModel } from '@umijs/max';
+import React, { useEffect, useRef, useState } from 'react';
+import { LOGIN_URL } from '@/access';
+import CompanyExpireGuard from '@/components/CompanyExpireGuard';
+
+const ExpireOrApp: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { initialState, loading } = useModel('@@initialState');
+  const [location, setLocation] = useState(history.location);
+  const company = initialState?.currentUser?.company;
+  const guardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    return history.listen((update) => {
+      setLocation(update.location);
+    });
+  }, []);
+
+  const isExpired = company?.special !== 0 && company?.validityStatus === 2;
+  const isLoginPage = location.pathname === LOGIN_URL;
+  const shouldBlock = isExpired && !isLoginPage;
+
+  const shouldBlockRef = useRef(shouldBlock);
+  shouldBlockRef.current = shouldBlock;
+
+  useEffect(() => {
+    if (!shouldBlock) return;
+    const el = guardRef.current;
+    if (!el) return;
+
+    const observer = new MutationObserver((mutations) => {
+      if (!shouldBlockRef.current) return;
+      for (const mutation of mutations) {
+        for (const node of Array.from(mutation.removedNodes)) {
+          if (node === el) {
+            window.location.reload();
+            break;
+          }
+        }
+      }
+    });
+
+    observer.observe(document.body, { childList: true });
+    return () => observer.disconnect();
+  }, [shouldBlock]);
+
+  if (loading) return <PageLoading />;
+  if (shouldBlock) {
+    return (
+      <div ref={guardRef} id="company-expire-guard-root">
+        <CompanyExpireGuard />
+      </div>
+    );
+  }
+  return <>{children}</>;
+};
+
+export default ExpireOrApp;

src/components/PermissionGuard.tsx

@@ -0,0 +1,48 @@
+import { history, useAccess } from '@umijs/max';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import useUserInfo from '@/hooks/useUserInfo';
+import { currentUser as queryCurrentUser } from '@/services/api';
+import { getRequiredPermissions } from '@/utils/routePermissions';
+
+export default function PermissionGuard() {
+  const { setUserInfo } = useUserInfo();
+  const access = useAccess();
+  const [checkVersion, setCheckVersion] = useState(0);
+  const pathnameRef = useRef('');
+  const refreshing = useRef(false);
+
+  const onAuthRefresh = useCallback(async () => {
+    if (refreshing.current) return;
+    refreshing.current = true;
+    pathnameRef.current = history.location.pathname;
+
+    const res = (await queryCurrentUser()) as API.BaseResponse<API.CurrentUser>;
+    if (res?.code === 200 && res?.data?.data) {
+      await setUserInfo(res.data.data);
+      setCheckVersion((v) => v + 1);
+    }
+
+    refreshing.current = false;
+  }, [setUserInfo]);
+
+  useEffect(() => {
+    if (checkVersion === 0) return;
+
+    const required = getRequiredPermissions(pathnameRef.current);
+    if (required?.length) {
+      const hasAccess = required.some(
+        (perm) => access?.hasPerms?.(perm) ?? false,
+      );
+      if (!hasAccess) {
+        history.replace('/404', { from: pathnameRef.current });
+      }
+    }
+  }, [checkVersion, access]);
+
+  useEffect(() => {
+    window.addEventListener('auth:refresh', onAuthRefresh);
+    return () => window.removeEventListener('auth:refresh', onAuthRefresh);
+  }, [onAuthRefresh]);
+
+  return null;
+}

src/components/SSEController/index.tsx

@@ -1,4 +1,4 @@
-import { useModel } from '@umijs/max';
+import { useAccess, useModel } from '@umijs/max';
 import React, { useEffect, useRef } from 'react';
 import { useMessageBuffer } from '@/hooks/useMessage';
 import useUserInfo from '@/hooks/useUserInfo';
@@ -11,11 +11,13 @@ const SSEController: React.FC = () => {
   const { disconnectSSE } = useModel('useSSE');
   const { startConnection } = useMessageBuffer();
   const { userInfo } = useUserInfo();
+  const { hasPerms } = useAccess();
   const userConfig = userInfo?.userConfig;
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const { setUnreadCountWithSign } = useModel('useMenuNoticeNum');
 
   const refreshCount = async () => {
+    if (!hasPerms('alert:list')) return;
     try {
       const { data } = await getAlertPages({
         pageNum: 1,
@@ -30,6 +32,7 @@ const SSEController: React.FC = () => {
   };
   const startPolling = () => {
     stopPolling();
+    if (!hasPerms('alert:list')) return;
     timerRef.current = setInterval(() => {
       refreshCount();
     }, TIMER_INTERVAL);

src/components/VoiceCheck/index.tsx

@@ -1,6 +1,17 @@
 import { ChromeOutlined, SoundOutlined } from '@ant-design/icons';
+import { useBreakpoint } from '@ant-design/pro-components';
 import { getLocale, Icon } from '@umijs/max';
-import { Alert, Divider, Image, Modal, Space, Tabs, Typography } from 'antd';
+import {
+  Alert,
+  Divider,
+  Flex,
+  Image,
+  Modal,
+  Popover,
+  Space,
+  Tabs,
+  Typography,
+} from 'antd';
 import { useCallback, useEffect, useState } from 'react';
 import useRichI18n from '@/hooks/useRichI18n';
 import { checkAudioPermission } from '@/utils';
@@ -8,9 +19,9 @@ import bus from '@/utils/eventBus';
 import { $t } from '@/utils/i18n';
 
 const { Paragraph } = Typography;
-const ChangePassTips: React.FC = () => {
+const VoiceCheck: React.FC = () => {
   const { richFormat } = useRichI18n();
-
+  const screens = useBreakpoint();
   const [visible, setVisible] = useState(false);
   const [hasAudioPermission, setHasAudioPermission] = useState(true);
 
@@ -69,25 +80,46 @@ const ChangePassTips: React.FC = () => {
       ),
     },
   ];
-
+  const tipsNode = (
+    <>
+      <Alert
+        message={$t('pages.voiceCheck.alertMessage')}
+        type="warning"
+        showIcon
+      />
+    </>
+  );
   return (
     <>
-      <Space align="center" onClick={() => setVisible(true)}>
+      <Flex align="center" onClick={() => setVisible(true)}>
-        {!hasAudioPermission && (
+        {!hasAudioPermission &&
-          <>
+          (['xs', 'sm'].includes(screens || '') ? (
-            <Alert
+            <Popover
-              message={$t('pages.voiceCheck.alertMessage')}
+              content={tipsNode}
-              type="warning"
+              styles={{
-              showIcon
+                body: { padding: 0 },
-            />
+              }}
-            <Icon
+              zIndex={999}
-              icon="local:silence"
+              defaultOpen={true}
-              height="20px"
+            >
-              fill="#f59e0b"
+              <Icon
-              className="flex align-center"
+                icon="local:silence"
-            />
+                height="20px"
-          </>
+                fill="#f59e0b"
-        )}
+                className="flex align-center"
+              />
+            </Popover>
+          ) : (
+            <>
+              {tipsNode}
+              <Icon
+                icon="local:silence"
+                height="20px"
+                fill="#f59e0b"
+                className="flex align-center"
+              />
+            </>
+          ))}
         {/* {hasAudioPermission ? (
           <Icon
             icon="local:voice"
@@ -103,7 +135,7 @@ const ChangePassTips: React.FC = () => {
             className="flex align-center"
           />
         )} */}
-      </Space>
+      </Flex>
 
       <Modal
         title={
@@ -154,4 +186,4 @@ const ChangePassTips: React.FC = () => {
     </>
   );
 };
-export default ChangePassTips;
+export default VoiceCheck;

src/global.less

@@ -135,6 +135,16 @@ ol {
   padding-inline: 15px;
 }
 
+.fixed-all-center {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-color: #fff;
+}
+
 @media (max-width: 768px) {
   .ant-table {
     width: 100%;

src/hooks/useUserInfo.ts

@@ -1,4 +1,5 @@
 import { useModel } from '@umijs/max';
+import { useMemo } from 'react';
 
 export default function useUserInfo() {
   const { initialState, setInitialState } = useModel('@@initialState');
@@ -14,5 +15,24 @@ export default function useUserInfo() {
     setUserInfo(info);
   };
 
-  return { userInfo, refreshUserInfo, setUserInfo };
+  const userPlatform = useMemo(() => {
+    const company = userInfo?.company;
+    const originalPlatform = [
+      {
+        label: 'MT5',
+        value: 5,
+        isOpen: company?.mt5Open === 1,
+      },
+      {
+        label: 'MT4',
+        value: 4,
+        isOpen: company?.mt4Open === 1,
+      },
+    ];
+
+    // return originalPlatform.filter((item) => item.isOpen);
+    return originalPlatform;
+  }, [userInfo]);
+
+  return { userInfo, refreshUserInfo, setUserInfo, userPlatform };
 }

src/locales/en_US/menu.ts

@@ -7,6 +7,14 @@ export default {
   'menu.rules': 'Rules',
   'menu.rule': 'Rule',
   'menu.rules.desc': 'Manage Rules',
+  'menu.rules.desc2':
+    'Add, edit, enable/disable, delete, and clone rules. View Rules will be selected automatically.',
+  'menu.rules.edit.badge': 'Write access',
+  'menu.rules.edit': 'Manage Rules',
+  'menu.rules.view.badge': 'Read only',
+  'menu.rules.view': 'View Rules',
+  'menu.rules.view.desc':
+    'Enter Rule Management and view rule settings. No create, edit, clone, or delete actions.',
   'menu.rules.largeTradeLots': 'Large Trade (Lots)',
   'menu.rules.largeTradeLots.desc':
     'Monitor trades with lots exceeding threshold',

src/locales/en_US/pages.ts

@@ -2,6 +2,7 @@ export default {
   'common.loading': 'Loading...',
   'common.content.noRules': 'No rules available',
   'common.content.noData': 'No data available',
+  'table.platformAccess': 'Platform Quota',
   'table.group': 'Group',
   'table.operatorRecords': 'Operator Records',
   'table.operatorAction': 'Operator Action',
@@ -46,6 +47,8 @@ export default {
   'table.contactEmail': 'Contact Email',
   'table.dataSourceCount': 'Data Sources',
   'table.userCount': 'Users',
+  'table.validityEndTime': 'Expire At (UTC+0)',
+  'table.validityEndTime.tips': 'Company subscription expiry date ',
   'table.createTime': 'Create Time',
   'table.name': 'Name',
   'table.ipAddress': 'IP Address',
@@ -87,6 +90,13 @@ export default {
   'pages.totalAlertCount': 'Total Alerts',
   'pages.totalCompanyCount': 'Total Companies',
   'pages.activeCompanyCount': 'Active Companies',
+  'pages.company.expired': 'Expired',
+  'pages.company.permanent': 'Permanent',
+  'pages.company.expireTitle': 'Company Subscription Expired',
+  'pages.company.expireSubTitle':
+    "Your company's license has expired. All features are temporarily locked. Please contact your sales representative to renew.",
+  'pages.company.expireInDays': 'Subscription expires in {days} days',
+  'pages.company.expireToday': 'Subscription expiring soon; it expires today.',
   'pages.totalDataSourceCount': 'Total Data Sources',
   'pages.activeDataSourceCount': 'Active Data Sources',
   'pages.mt4DataSourceCount': 'MT4 Data Sources',
@@ -329,6 +339,11 @@ export default {
   'form.role.placeholder2': 'System roles cannot modify permission levels',
   'form.role.badgeColor': 'Badge Color',
   'form.role.menuIds': 'Bound Permissions (Menus)',
+  'form.company.validityEndTime': 'Expiry At (UTC+0)',
+  'form.company.validityEndTime.placeholder': 'Select expiry date',
+  'form.company.validityEndTime.tips': 'Blank for Permanent',
+  'form.role.permissionGuide': 'Permission Guide',
+  'form.role.otherPermissions': 'Other Menu Permissions',
 
   'form.config.timezone': 'Timezone Settings',
   'form.config.timezone.title': 'Default Timezone',
@@ -601,6 +616,10 @@ export default {
     'Enter verified sender emails (comma separated)',
   'pages.email.status.normal': 'Active',
   'pages.email.status.disabled': 'Inactive',
+  'pages.email.platformAccess': ' Platform Access',
+  'pages.email.platformAccessEnable': ' Access',
+  'pages.email.platformMax': 'Quota Limit',
+  'pages.email.platformAssigned': 'Assigned',
   'pages.email.notification': 'Email Notification Config',
   'pages.email.notificationEmail': 'Notification Email',
   'pages.email.notificationEmail.tips':

src/locales/zh_CN/menu.ts

@@ -7,6 +7,14 @@ export default {
   'menu.rules': '规则管理',
   'menu.rule': '规则',
   'menu.rules.desc': '管理规则',
+  'menu.rules.desc2':
+    '新增、编辑、启停、删除、克隆规则；系统会自动包含“查看规则”。',
+  'menu.rules.edit.badge': '写权限',
+  'menu.rules.edit': '管理规则',
+  'menu.rules.view.badge': '只读',
+  'menu.rules.view': '查看规则',
+  'menu.rules.view.desc':
+    '进入规则管理并查看配置；不能新增、编辑、克隆、删除。',
   'menu.rules.largeTradeLots': '大额交易(手数)',
   'menu.rules.largeTradeLots.desc': '监控单笔开仓手数超过设定阈值的大额交易',
   'menu.rules.largeTradeUSD': '大额交易(USD)',

src/locales/zh_CN/pages.ts

@@ -2,6 +2,7 @@ export default {
   'common.loading': '加载中...',
   'common.content.noRules': '暂无规则',
   'common.content.noData': '暂无数据',
+  'table.platformAccess': '平台配额',
   'table.group': '所属组',
   'table.operatorRecords': '操作记录',
   'table.operatorAction': '操作动作',
@@ -46,6 +47,8 @@ export default {
   'table.contactEmail': '联系邮箱',
   'table.dataSourceCount': '数据源',
   'table.userCount': '用户数',
+  'table.validityEndTime': '订阅到期时间(UTC+0)',
+  'table.validityEndTime.tips': '公司订阅服务到期时间',
   'table.createTime': '创建时间',
   'table.name': '名称',
   'table.ipAddress': 'IP地址',
@@ -87,6 +90,13 @@ export default {
   'pages.totalAlertCount': '总告警数',
   'pages.totalCompanyCount': '总公司数',
   'pages.activeCompanyCount': '活跃公司数',
+  'pages.company.expired': '已过期',
+  'pages.company.permanent': '永久有效',
+  'pages.company.expireTitle': '公司订阅已过期',
+  'pages.company.expireSubTitle':
+    '您的公司在该系统的使用授权已到期，各项功能已暂时锁定。请联系商务代表进行续费操作以恢复访问。',
+  'pages.company.expireInDays': '订阅即将到期，剩余 {days}天',
+  'pages.company.expireToday': '订阅即将到期，今天到期',
   'pages.totalDataSourceCount': '数据源总数',
   'pages.activeDataSourceCount': '活跃数据源',
   'pages.mt4DataSourceCount': 'MT4 数据源',
@@ -321,6 +331,11 @@ export default {
   'form.role.placeholder2': '系统角色权限级别不可修改',
   'form.role.badgeColor': '徽章颜色',
   'form.role.menuIds': '绑定权限（菜单）',
+  'form.company.validityEndTime': '到期时间(UTC+0)',
+  'form.company.validityEndTime.placeholder': '请选择到期时间',
+  'form.company.validityEndTime.tips': '留空为永久有效',
+  'form.role.permissionGuide': '权限怎么选',
+  'form.role.otherPermissions': '其他菜单权限',
 
   'form.config.timezone': '时区设置',
   'form.config.timezone.title': '默认时区',
@@ -567,6 +582,10 @@ export default {
   'pages.email.availableEmails.tips': '在服务商已验证的邮箱，多个用逗号分隔',
   'pages.email.status.normal': '正常',
   'pages.email.status.disabled': '停用',
+  'pages.email.platformAccess': '平台接入权限',
+  'pages.email.platformAccessEnable': '接入',
+  'pages.email.platformMax': '最大数量上限',
+  'pages.email.platformAssigned': '已配',
   'pages.email.notification': '邮件通知配置',
   'pages.email.notificationEmail': '通知邮箱',
   'pages.email.notificationEmail.tips':

src/pages/account/index.tsx

@@ -21,7 +21,7 @@ const maxAlertHideCount = 9999;
 
 const Account: React.FC = () => {
   const { isGlobalCompany } = useAccess();
-  const { userInfo } = useUserInfo();
+  const { userInfo, userPlatform } = useUserInfo();
   const companyInfo = userInfo?.company;
 
   const [visible, setVisible] = useState(false);
@@ -122,14 +122,7 @@ const Account: React.FC = () => {
             label: $t('table.all'),
             value: '',
           },
-          // {
+          ...userPlatform,
-          //   label: 'MT4',
-          //   value: '4',
-          // },
-          {
-            label: 'MT5',
-            value: '5',
-          },
         ],
       },
     },

src/pages/alert/index.tsx

@@ -64,7 +64,7 @@ const Alert: React.FC = () => {
   const [dataSourceList, setDataSourceList] = useState<
     API.DataSourceListItem[]
   >([]);
-  const { userInfo } = useUserInfo();
+  const { userInfo, userPlatform } = useUserInfo();
   const userDataSourceList = userInfo?.userDataSourceList;
   const companyInfo = userInfo?.company;
 
@@ -146,6 +146,8 @@ const Alert: React.FC = () => {
     {
       title: $t('table.alertId'),
       dataIndex: 'id',
+      width: 100,
+      fixed: 'left',
       fieldProps: {
         placeholder: $t('table.alertId'),
       },
@@ -158,6 +160,7 @@ const Alert: React.FC = () => {
       dataIndex: 'companyId',
       valueType: 'select',
       sorter: true,
+      width: 140,
       fieldProps: {
         defaultValue: '',
         popupMatchSelectWidth: false,
@@ -182,6 +185,7 @@ const Alert: React.FC = () => {
       dataIndex: 'dataSourceId',
       valueType: 'select',
       sorter: true,
+      width: 160,
       fieldProps: {
         defaultValue: '',
         popupMatchSelectWidth: false,
@@ -215,6 +219,7 @@ const Alert: React.FC = () => {
       dataIndex: 'ruleType',
       valueType: 'select',
       sorter: true,
+      width: 'auto',
       fieldProps: {
         defaultValue: '',
         popupMatchSelectWidth: false,
@@ -234,6 +239,7 @@ const Alert: React.FC = () => {
     {
       title: $t('pages.rules.ruleName'),
       dataIndex: 'ruleName',
+      ellipsis: true,
       // sorter: true,
       fieldProps: {
         placeholder: $t('pages.rules.ruleName'),
@@ -251,14 +257,7 @@ const Alert: React.FC = () => {
             label: $t('table.all'),
             value: '',
           },
-          // {
+          ...userPlatform,
-          //   label: 'MT4',
-          //   value: 4,
-          // },
-          {
-            label: 'MT5',
-            value: 5,
-          },
         ],
       },
       render: (_, { platform }) => {
@@ -300,16 +299,14 @@ const Alert: React.FC = () => {
     {
       title: $t('table.trigger'),
       dataIndex: 'trigger',
-      width: 'auto',
+      ellipsis: true,
       className: 'text-bold',
-      fieldProps: {
-        ellipsis: true,
-      },
       hideInSearch: true,
     },
     {
       title: $t('table.summary'),
       dataIndex: 'summary',
+      ellipsis: true,
       hideInSearch: true,
     },
     {
@@ -318,6 +315,7 @@ const Alert: React.FC = () => {
       valueType: 'dateTime',
       hideInSearch: true,
       sorter: true,
+      width: 170,
       // renderText: (_, { triggerTime }) => {
       //   return formatToUserTimezone(triggerTime);
       // },
@@ -326,6 +324,7 @@ const Alert: React.FC = () => {
       title: $t('table.dataSourceTime'),
       dataIndex: 'dataSourceServerTime',
       hideInSearch: true,
+      width: 180,
       render: (_, { dataSourceServerTime, timeZone }) => {
         if (!dataSourceServerTime) return '-';
         return (
@@ -344,6 +343,8 @@ const Alert: React.FC = () => {
       title: $t('table.status'),
       dataIndex: 'statusId',
       valueType: 'select',
+      fixed: 'right',
+      width: 'auto',
       fieldProps: {
         defaultValue: '',
         popupMatchSelectWidth: false,
@@ -521,7 +522,7 @@ const Alert: React.FC = () => {
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <ProTable
-            scroll={{ x: true }}
+            scroll={{ x: 'max-content' }}
             columns={columns}
             form={{
               initialValues: {

src/pages/company/Popup.tsx

@@ -1,13 +1,16 @@
 import {
   ModalForm,
+  ProFormDatePicker,
   ProFormDependency,
+  ProFormDigit,
   type ProFormInstance,
   ProFormSelect,
   ProFormSwitch,
   ProFormText,
 } from '@ant-design/pro-components';
 import { useAccess } from '@umijs/max';
-import { Divider, Space, Typography } from 'antd';
+import { Card, Col, Divider, Row, Space, Typography } from 'antd';
+import type { Dayjs } from 'dayjs';
 import { useRef } from 'react';
 import useUserInfo from '@/hooks/useUserInfo';
 import {
@@ -16,6 +19,7 @@ import {
   getEmailConfigList,
 } from '@/services/api';
 import { $t } from '@/utils/i18n';
+import { utcInstance as dayjs } from '@/utils/timeFormat';
 
 const { Text } = Typography;
 type CompanyListItem = Partial<API.CompanyListItem>;
@@ -25,7 +29,7 @@ export default (props: {
   onSubmit: (values: CompanyListItem) => void;
   onDone: () => void;
 }) => {
-  const { isGlobalCompany } = useAccess();
+  const { isGlobalCompany, isSuperAdmin } = useAccess();
   const { userInfo } = useUserInfo();
   const { modalVisit, formValues, onSubmit, onDone } = props;
 
@@ -43,6 +47,13 @@ export default (props: {
         if (!isGlobalCompany) {
           values.companyId = userInfo?.companyId;
         }
+
+        if (isSuperAdmin) {
+          values.validityEndTime = values.validityEndTime
+            ? dayjs.utc(values.validityEndTime).format('YYYY-MM-DD')
+            : '';
+          values.validityStartTime = values.validityEndTime ? '2026-01-01' : '';
+        }
         return onSubmit(values);
       }}
       modalProps={{
@@ -70,6 +81,7 @@ export default (props: {
           return {
             ...values,
             ...companyMailHostConfig,
+            validityEndTime: values.validityEndTime || undefined,
           };
         }
         return values || {};
@@ -109,7 +121,96 @@ export default (props: {
 
       {formValues?.id !== void 0 && (
         <>
+          {isSuperAdmin && (
+            <ProFormDatePicker
+              name="validityEndTime"
+              label={`${$t('form.company.validityEndTime')} (${$t('form.company.validityEndTime.tips')})`}
+              placeholder={$t('form.company.validityEndTime.placeholder')}
+              convertValue={(value: string | Dayjs | null | undefined) =>
+                value ? dayjs.utc(value) : undefined
+              }
+              fieldProps={{
+                style: { width: '100%' },
+                disabledDate: (current: Dayjs) => {
+                  // return current?.isBefore(dayjs().startOf('day'));
+                  return (
+                    current?.format('YYYY-MM-DD') <
+                    dayjs.utc().format('YYYY-MM-DD')
+                  );
+                },
+              }}
+            />
+          )}
           <Divider size="small" />
+
+          <Text strong style={{ lineHeight: '40px', fontSize: 16 }}>
+            ⚙️ {$t('pages.email.platformAccess')}
+          </Text>
+          <Row gutter={16}>
+            <Col span={12}>
+              <Card
+                title={`MT4 ${$t('pages.email.platformAccessEnable')}`}
+                extra={
+                  <ProFormSwitch
+                    name="mt4Open"
+                    noStyle
+                    transform={(value) => +value}
+                  />
+                }
+                styles={{
+                  header: { fontSize: 14, minHeight: 40, paddingInline: 14 },
+                  body: { paddingInline: 14 },
+                }}
+              >
+                <ProFormDependency name={['mt4Open']}>
+                  {({ mt4Open }) => (
+                    <ProFormDigit
+                      name="mt4Count"
+                      label={`${$t('pages.email.platformMax')}`}
+                      min={0}
+                      step={1}
+                      disabled={!mt4Open}
+                      formItemProps={{
+                        style: { marginBottom: 0 },
+                      }}
+                    />
+                  )}
+                </ProFormDependency>
+              </Card>
+            </Col>
+            <Col span={12}>
+              <Card
+                title={`MT5 ${$t('pages.email.platformAccessEnable')}`}
+                extra={
+                  <ProFormSwitch
+                    name="mt5Open"
+                    noStyle
+                    transform={(value) => +value}
+                  />
+                }
+                styles={{
+                  header: { fontSize: 14, minHeight: 40, paddingInline: 14 },
+                  body: { paddingInline: 14 },
+                }}
+              >
+                <ProFormDependency name={['mt5Open']}>
+                  {({ mt5Open }) => (
+                    <ProFormDigit
+                      name="mt5Count"
+                      label={`${$t('pages.email.platformMax')}`}
+                      min={0}
+                      step={1}
+                      disabled={!mt5Open}
+                      formItemProps={{
+                        style: { marginBottom: 0 },
+                      }}
+                    />
+                  )}
+                </ProFormDependency>
+              </Card>
+            </Col>
+          </Row>
+          {/* <Divider size="small" /> */}
           <Text strong style={{ lineHeight: '40px', fontSize: 16 }}>
             📧 {$t('pages.email.notification')}
           </Text>

src/pages/company/index.tsx

@@ -5,7 +5,8 @@ import {
   type ProColumns,
   ProTable,
 } from '@ant-design/pro-components';
-import { Badge, Button, Col, Row } from 'antd';
+import { useAccess } from '@umijs/max';
+import { Badge, Button, Col, Row, Space, Typography } from 'antd';
 import React, { useRef, useState } from 'react';
 import HeadStatisticCard, {
   type CardInfo,
@@ -13,9 +14,13 @@ import HeadStatisticCard, {
 import MyTag from '@/components/MyTag';
 import { companyHandle, getCompanyPages } from '@/services/api';
 import { $t } from '@/utils/i18n';
+import { utcInstance as dayjs } from '@/utils/timeFormat';
 import PopUp from './Popup';
 
+const { Text } = Typography;
+
 const Company: React.FC = () => {
+  const { isSuperAdmin } = useAccess();
   const [modalVisit, setModalVisit] = useState(false);
 
   const [cardInfo, setCardInfo] = useState({
@@ -69,6 +74,46 @@ const Company: React.FC = () => {
         );
       },
     },
+    {
+      title: $t('table.platformAccess'),
+      dataIndex: 'platformAccess',
+      render: (
+        _,
+        {
+          mt4Count,
+          mt4Open,
+          mt5Count,
+          mt5Open,
+          sourceType4Count,
+          sourceType5Count,
+        },
+      ) => {
+        return (
+          <Space direction="vertical" size={4}>
+            <MyTag color={mt4Open === 1 ? '#818cf8' : '#94a3b8'}>
+              MT4:{' '}
+              {mt4Open === 1 ? (
+                <span>
+                  {sourceType4Count ?? '-'} / {mt4Count ?? '-'}
+                </span>
+              ) : (
+                $t('pages.rules.disable')
+              )}
+            </MyTag>
+            <MyTag color={mt5Open === 1 ? '#3b82f6' : '#94a3b8'}>
+              MT5:{' '}
+              {mt5Open === 1 ? (
+                <span>
+                  {sourceType5Count ?? '-'} / {mt5Count ?? '-'}
+                </span>
+              ) : (
+                $t('pages.rules.disable')
+              )}
+            </MyTag>
+          </Space>
+        );
+      },
+    },
     {
       title: $t('table.userCount'),
       dataIndex: 'userCount',
@@ -92,6 +137,28 @@ const Company: React.FC = () => {
         );
       },
     },
+    {
+      title: $t('table.validityEndTime'),
+      dataIndex: 'validityEndTime',
+      tooltip: $t('table.validityEndTime.tips'),
+      hideInTable: !isSuperAdmin,
+      render: (_, { validityEndTime, validityStatus }) => {
+        return (
+          <Space>
+            {!validityEndTime ? (
+              <Text type="secondary">{$t('pages.company.permanent')}</Text>
+            ) : (
+              <span>{dayjs(validityEndTime).format('YYYY-MM-DD')}</span>
+            )}
+            {validityStatus === 2 && (
+              <Text type="danger" style={{ fontSize: 11 }}>
+                {$t('pages.company.expired')}
+              </Text>
+            )}
+          </Space>
+        );
+      },
+    },
     {
       title: $t('table.createTime'),
       dataIndex: 'createTime',
@@ -122,7 +189,10 @@ const Company: React.FC = () => {
           size="small"
           key="edit"
           onClick={() => {
-            setFormValues(item);
+            setFormValues({
+              ...item,
+              validityEndTime: item.validityEndTime || undefined,
+            });
             setModalVisit(true);
           }}
         >

src/pages/data-source/Popup.tsx

@@ -6,7 +6,7 @@ import {
 } from '@ant-design/pro-components';
 import { useAccess } from '@umijs/max';
 import { Divider, type FormInstance, Typography } from 'antd';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import useUserInfo from '@/hooks/useUserInfo';
 import { preventScientificNotation } from '@/utils';
 import { $t } from '@/utils/i18n';
@@ -22,7 +22,7 @@ export default (props: {
 }) => {
   const { visible, formValues, onSubmit, onDone, companyList } = props;
 
-  const { userInfo } = useUserInfo();
+  const { userInfo, userPlatform } = useUserInfo();
   const { isGlobalCompany } = useAccess();
   const globalCompanyId = isGlobalCompany ? userInfo?.companyId : 0;
   const formRef = useRef<FormInstance>(null);
@@ -41,6 +41,12 @@ export default (props: {
       message: $t('form.placeholder.ipAddress'),
     },
   ];
+
+  const filteredUserPlatform = useMemo(
+    () => userPlatform.filter((v) => v?.isOpen),
+    [userPlatform],
+  );
+
   return (
     <ModalForm
       width="600px"
@@ -50,7 +56,10 @@ export default (props: {
         formValues?.id
           ? formValues
           : {
-              sourceType: 5,
+              sourceType:
+                filteredUserPlatform.length > 0
+                  ? filteredUserPlatform[0].value
+                  : null,
             }
       }
       open={visible}
@@ -78,16 +87,7 @@ export default (props: {
         label={$t('form.dataSource.type')}
         allowClear={false}
         rules={[{ required: true, message: $t('form.required') }]}
-        options={[
+        options={filteredUserPlatform}
-          // {
-          //   value: 4,
-          //   label: 'MT4',
-          // },
-          {
-            value: 5,
-            label: 'MT5',
-          },
-        ]}
       />
 
       {isGlobalCompany && (

src/pages/data-source/index.tsx

@@ -18,6 +18,7 @@ import {
   dataSourceHandle,
   getCompanyList,
   getDataSourcePages,
+  getPlatformList,
 } from '@/services/api';
 import { $t } from '@/utils/i18n';
 import Popup from './Popup';
@@ -49,6 +50,7 @@ const DataSource: React.FC = () => {
         setCompanyList(data || []);
       });
     }
+    getPlatformList();
   }, []);
   const [cardInfo, setCardInfo] = useState({
     // mt4Count: 0,

src/pages/oper-log/index.tsx

@@ -50,11 +50,11 @@ const OperLog: React.FC = () => {
     },
     'rule insert': (item) => {
       const operParam = parseOperParam(item);
-      return `Add Rule: '${ruleBaseMeta[operParam.type].title || '-'}'`;
+      return `Add Rule: '${ruleBaseMeta[operParam?.type]?.title || '-'}'`;
     },
     'rule update': (item) => {
       const operParam = parseOperParam(item);
-      return `Update Rule: '${ruleBaseMeta[operParam.type].title || '-'}'`;
+      return `Update Rule: '${ruleBaseMeta[operParam?.type]?.title || '-'}'`;
     },
     'rule update status': (item) => {
       const matched = item.operParam.match(/status=(?<status>\d+)/);
@@ -124,7 +124,7 @@ const OperLog: React.FC = () => {
       hideInSearch: true,
       ellipsis: true,
       width: 'auto',
-      renderText: (_, item) => actionMap[item.title]?.(item) || '-',
+      renderText: (_, item) => actionMap[item?.title]?.(item) || '-',
     },
     {
       title: $t('table.ipAddress'),

src/pages/profile/index.tsx

@@ -3,7 +3,7 @@ import {
   ProForm,
   ProFormText,
 } from '@ant-design/pro-components';
-import { history } from '@umijs/max';
+import { history, useAccess } from '@umijs/max';
 import {
   App,
   Button,
@@ -14,16 +14,20 @@ import {
   Row,
   Space,
   Tag,
+  Typography,
 } from 'antd';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { clearAccessToken } from '@/access';
 import PasswordLevel from '@/components/PasswordLevel';
 import useUserInfo from '@/hooks/useUserInfo';
 import { changeUserPass } from '@/services/api';
 import { $t } from '@/utils/i18n';
 
+const { Text } = Typography;
+
 const Profile: React.FC = () => {
   const { userInfo, setUserInfo } = useUserInfo();
+  const { isGlobalCompany } = useAccess();
   const userCompany = userInfo?.company;
   const { message: antdMessage, modal } = App.useApp();
 
@@ -71,6 +75,28 @@ const Profile: React.FC = () => {
     },
   ];
 
+  useEffect(() => {
+    if (!isGlobalCompany) {
+      items.push({
+        key: '6',
+        span: 'filled',
+        label: $t('table.validityEndTime'),
+        children: userCompany?.validityEndTime ? (
+          <Space>
+            {userCompany.validityEndTime}
+            {userCompany?.validityStatus === 2 && (
+              <Text type="danger" style={{ fontSize: '12px' }}>
+                {$t('pages.company.expired')}
+              </Text>
+            )}
+          </Space>
+        ) : (
+          $t('pages.company.permanent')
+        ),
+      });
+    }
+  }, [userCompany, isGlobalCompany]);
+
   const changePasswordSuccessHadle = async () => {
     let countdown = 5;
     let timer: NodeJS.Timeout | null = null;

src/pages/role/Popup.tsx

@@ -1,19 +1,31 @@
 import {
   ModalForm,
   ProForm,
-  ProFormCheckbox,
   ProFormDependency,
   // ProFormDigit,
   ProFormText,
 } from '@ant-design/pro-components';
-// import { useAccess } from '@umijs/max';
 import { ColorPicker, Form, Space } from 'antd';
+import { useMemo } from 'react';
 import MyTag from '@/components/MyTag';
 import useUserInfo from '@/hooks/useUserInfo';
 import { getRoleDetail } from '@/services/api';
 import { $t } from '@/utils/i18n';
 // import { preventScientificNotation } from '@/utils';
 import useCardList from './cardList';
+import PermissionCheckboxGroup from './components/PermissionCheckboxGroup';
+
+function flattenAllIds(nodes: API.MenuListItem[]): (string | number)[] {
+  const ids: (string | number)[] = [];
+  const walk = (items: API.MenuListItem[]) => {
+    items.forEach((item) => {
+      ids.push(item.id);
+      if (item.children?.length) walk(item.children);
+    });
+  };
+  walk(nodes);
+  return ids;
+}
 
 type RolesListItem = Partial<API.RolesListItem>;
 export default (props: {
@@ -22,8 +34,16 @@ export default (props: {
   formValues: Partial<RolesListItem | undefined>;
   onSubmit: (values: RolesListItem) => void;
   onDone: () => void;
+  menuTree?: API.MenuListItem[];
 }) => {
-  const { visible, formValues, onSubmit, onDone, action } = props;
+  const {
+    visible,
+    formValues,
+    onSubmit,
+    onDone,
+    action,
+    menuTree: propMenuTree,
+  } = props;
 
   const { userInfo } = useUserInfo();
   // const { isGlobalCompany } = useAccess();
@@ -31,9 +51,14 @@ export default (props: {
   // const level = userRoleInfo?.level || (isGlobalCompany ? 100 : 80);
 
   const { getMenuMetaByPermissions } = useCardList();
-  const menuList = getMenuMetaByPermissions(
+
-    userInfo?.menuList || ([] as API.MenuListItem[]),
+  const menuTree = useMemo(() => {
-  );
+    const source = propMenuTree?.length
+      ? propMenuTree
+      : getMenuMetaByPermissions(userInfo?.menuList || []);
+    return source as API.MenuListItem[];
+  }, [propMenuTree, userInfo?.menuList]);
+
   const actionMap = {
     add: $t('table.action.add'),
     view: $t('table.action.view'),
@@ -46,7 +71,7 @@ export default (props: {
       initialValues={formValues?.id ? formValues : { color: '#3b82f6' }}
       open={visible}
       onFinish={async (values: any) => {
-        values.menuIds = values.menuIds.join(',') || '';
+        values.menuIds = (values.menuIds || []).join(',') || '';
         return onSubmit(values);
       }}
       modalProps={{
@@ -61,12 +86,10 @@ export default (props: {
           } = await getRoleDetail({
             id: formValues.id,
           });
-          const menuIds = (data?.menuList || []).map(
+          const allSelectedIds = flattenAllIds(data?.menuList || []);
-            (item: API.MenuListItem) => item.id,
-          );
           return {
             ...formValues,
-            menuIds,
+            menuIds: allSelectedIds,
           };
         }
         return formValues || {};
@@ -114,23 +137,16 @@ export default (props: {
           </ProFormDependency>
         </Space>
       </ProForm.Item>
-      <ProFormCheckbox.Group
+      <ProForm.Item
         name="menuIds"
         label={$t('form.role.menuIds')}
         rules={[{ required: true, message: $t('form.required') }]}
-        options={menuList.map((item: API.MenuListItem) => ({
+      >
-          label: `${item.meta?.icon || ''} ${item.meta?.title}（${item?.meta?.describe}）`,
+        <PermissionCheckboxGroup
-          value: item.id,
+          menuTree={menuTree}
-        }))}
+          disabled={action === 'view'}
-        fieldProps={{
+        />
-          style: {
+      </ProForm.Item>
-            display: 'grid',
-            gridTemplateColumns: 'repeat(2, 1fr)',
-            gap: '8px 16px',
-            alignItems: 'center',
-          },
-        }}
-      />
       <ProFormText hidden name="id" label="ID" />
     </ModalForm>
   );

src/pages/role/cardList.ts

@@ -104,5 +104,38 @@ export default function useRoleCardList() {
       return item;
     });
   }
-  return { roleCardList, getMenuMetaByPermissions };
+
+  /**
+   * Build a permission tree from a flat list using id/parentId.
+   * The backend returns a flat list where children reference their parent via parentId.
+   */
+  function buildMenuTree(flatList: API.MenuListItem[]): API.MenuListItem[] {
+    const nodeMap = new Map<string | number, API.MenuListItem>();
+    const roots: API.MenuListItem[] = [];
+
+    flatList.forEach((item) => {
+      nodeMap.set(item.id, { ...item, children: [] });
+    });
+
+    flatList.forEach((item) => {
+      const node = nodeMap.get(item.id);
+      if (!node) return;
+      const pid = Number(item.parentId);
+      if (pid === 0 || !nodeMap.has(item.parentId)) {
+        roots.push(node);
+      } else {
+        const parent = nodeMap.get(item.parentId);
+        if (parent) {
+          if (!parent.children) parent.children = [];
+          parent.children.push(node);
+        } else {
+          roots.push(node);
+        }
+      }
+    });
+
+    return roots;
+  }
+
+  return { roleCardList, getMenuMetaByPermissions, buildMenuTree };
 }

src/pages/role/components/PermissionCheckboxGroup.tsx

@@ -0,0 +1,301 @@
+import { Checkbox, Tag, Typography } from 'antd';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { useCallback, useMemo } from 'react';
+import { $t } from '@/utils/i18n';
+import './style.less';
+
+const { Text } = Typography;
+
+/**
+ * When true, rules permissions are consolidated into 2 summary cards
+ * (View Rules / Manage Rules). Flip to false to show each child node
+ * as an individual checkbox for fine-grained control.
+ */
+const CONSOLIDATE_RULES = true;
+
+interface PermissionCheckboxGroupProps {
+  value?: (string | number)[];
+  onChange?: (checkedIds: (string | number)[]) => void;
+  menuTree: API.MenuListItem[];
+  disabled?: boolean;
+}
+
+function getAllDescendantIds(node: API.MenuListItem): (string | number)[] {
+  const ids: (string | number)[] = [node.id];
+  const walk = (children: API.MenuListItem[]) => {
+    children.forEach((child) => {
+      ids.push(child.id);
+      if (child.children?.length) walk(child.children);
+    });
+  };
+  if (node.children?.length) walk(node.children);
+  return ids;
+}
+
+const isRulesMenu = (node: API.MenuListItem) =>
+  node.path === 'rule' || node.permission === 'rule:list';
+
+const PermissionCheckboxGroup: React.FC<PermissionCheckboxGroupProps> = ({
+  value = [],
+  onChange,
+  menuTree,
+  disabled = false,
+}) => {
+  const checkedSet = useMemo(() => new Set(value), [value]);
+
+  // Split: rules menus (consolidated into cards) vs everything else (preserves original order)
+  const { rulesMenus, belowMenus } = useMemo(() => {
+    const rules: API.MenuListItem[] = [];
+    const below: API.MenuListItem[] = [];
+    menuTree.forEach((node) => {
+      if (CONSOLIDATE_RULES && isRulesMenu(node)) {
+        rules.push(node);
+      } else {
+        below.push(node);
+      }
+    });
+    return { rulesMenus: rules, belowMenus: below };
+  }, [menuTree]);
+
+  // --- Rules: consolidate all descendants into 2 logical cards ---
+
+  const rulesCardData = useMemo(() => {
+    if (!rulesMenus.length) return null;
+    const parent = rulesMenus[0];
+    const viewIds: (string | number)[] = [];
+    const allIds: (string | number)[] = [];
+    const walk = (children: API.MenuListItem[]) => {
+      children.forEach((child) => {
+        allIds.push(child.id);
+        if (child.permission === 'rule:list') viewIds.push(child.id);
+        if (child.children?.length) walk(child.children);
+      });
+    };
+    if (parent.children?.length) walk(parent.children);
+    const manageOnlyIds = allIds.filter((id) => !viewIds.includes(id));
+    return { parentId: parent.id, viewIds, allIds, manageOnlyIds };
+  }, [rulesMenus]);
+
+  const handleRulesViewChange = useCallback(
+    (checked: boolean) => {
+      if (!rulesCardData) return;
+      const { viewIds, manageOnlyIds } = rulesCardData;
+      const newSet = new Set(value);
+      if (checked) {
+        for (const id of viewIds) newSet.add(id);
+      } else {
+        newSet.delete(rulesCardData.parentId);
+        for (const id of viewIds) newSet.delete(id);
+        for (const id of manageOnlyIds) newSet.delete(id);
+      }
+      onChange?.([...newSet]);
+    },
+    [value, onChange, rulesCardData],
+  );
+
+  const handleRulesManageChange = useCallback(
+    (checked: boolean) => {
+      if (!rulesCardData) return;
+      const { parentId, allIds, manageOnlyIds } = rulesCardData;
+      const newSet = new Set(value);
+      if (checked) {
+        newSet.add(parentId);
+        for (const id of allIds) newSet.add(id);
+      } else {
+        newSet.delete(parentId);
+        for (const id of manageOnlyIds) newSet.delete(id);
+      }
+      onChange?.([...newSet]);
+    },
+    [value, onChange, rulesCardData],
+  );
+
+  // --- Other grouped (parent checkbox, children hidden) ---
+
+  const handleGroupedParentChange = useCallback(
+    (parentNode: API.MenuListItem, checked: boolean) => {
+      const newSet = new Set(value);
+      const ids = getAllDescendantIds(parentNode);
+      if (checked) {
+        for (const id of ids) newSet.add(id);
+      } else {
+        for (const id of ids) newSet.delete(id);
+      }
+      onChange?.([...newSet]);
+    },
+    [value, onChange],
+  );
+
+  // --- Flat checkbox ---
+
+  const handleFlatChange = useCallback(
+    (node: API.MenuListItem, checked: boolean) => {
+      const newSet = new Set(value);
+      if (checked) {
+        newSet.add(node.id);
+      } else {
+        newSet.delete(node.id);
+      }
+      onChange?.([...newSet]);
+    },
+    [value, onChange],
+  );
+
+  const hasRules = rulesCardData !== null;
+  const hasBelow = belowMenus.length > 0;
+  const showDivider = hasRules && hasBelow;
+
+  // Derived checked state for the 2 rules cards
+  const rulesViewChecked = rulesCardData
+    ? rulesCardData.viewIds.some((id) => checkedSet.has(id)) ||
+      checkedSet.has(rulesCardData.parentId)
+    : false;
+  const rulesManageChecked = rulesCardData
+    ? checkedSet.has(rulesCardData.parentId)
+    : false;
+
+  return (
+    <div>
+      {hasRules && (
+        <>
+          <div className="perm-help-banner">
+            <div className="perm-help-banner__title">
+              <span>💡</span>
+              <strong>
+                {$t('menu.rules')}
+                {$t('form.role.permissionGuide')}
+              </strong>
+            </div>
+            {$t('menu.rules.desc2')}
+          </div>
+
+          <div className="perm-rules-grid">
+            {/* View card */}
+            <div
+              className="perm-rules-card perm-rules-card--view"
+              style={{ cursor: disabled ? 'default' : 'pointer' }}
+            >
+              <Checkbox
+                checked={rulesViewChecked}
+                disabled={disabled}
+                onChange={(e: CheckboxChangeEvent) =>
+                  handleRulesViewChange(e.target.checked)
+                }
+              >
+                <span className="perm-rules-card__inner">
+                  <span className="perm-rules-card__icon">👁️</span>
+                  <span className="perm-rules-card__body">
+                    <span className="perm-rules-card__header">
+                      <span className="perm-rules-card__title">
+                        {$t('menu.rules.view')}
+                      </span>
+                      <Tag color="blue" style={{ fontSize: 11, lineHeight: '16px', margin: 0 }}>
+                        {$t('menu.rules.view.badge')}
+                      </Tag>
+                    </span>
+                    <Text type="secondary" className="perm-rules-card__desc">
+                      {$t('menu.rules.view.desc')}
+                    </Text>
+                  </span>
+                </span>
+              </Checkbox>
+            </div>
+
+            {/* Manage card */}
+            <div
+              className="perm-rules-card perm-rules-card--manage"
+              style={{ cursor: disabled ? 'default' : 'pointer' }}
+            >
+              <Checkbox
+                checked={rulesManageChecked}
+                disabled={disabled}
+                onChange={(e: CheckboxChangeEvent) =>
+                  handleRulesManageChange(e.target.checked)
+                }
+              >
+                <span className="perm-rules-card__inner">
+                  <span className="perm-rules-card__icon">⚙️</span>
+                  <span className="perm-rules-card__body">
+                    <span className="perm-rules-card__header">
+                      <span className="perm-rules-card__title">
+                        {$t('menu.rules.edit')}
+                      </span>
+                      <Tag color="orange" style={{ fontSize: 11, lineHeight: '16px', margin: 0 }}>
+                        {$t('menu.rules.edit.badge')}
+                      </Tag>
+                    </span>
+                    <Text type="secondary" className="perm-rules-card__desc">
+                      {$t('menu.rules.desc2')}
+                    </Text>
+                  </span>
+                </span>
+              </Checkbox>
+            </div>
+          </div>
+        </>
+      )}
+
+      {showDivider && (
+        <div className="perm-divider">
+          <span className="perm-divider__line" />
+          <span>{$t('form.role.otherPermissions')}</span>
+          <span className="perm-divider__line" />
+        </div>
+      )}
+
+      {hasBelow && (
+        <div className="perm-below-grid">
+          {belowMenus.map((node) => {
+            if (node.children?.length) {
+              const childIds = getAllDescendantIds(node).filter(
+                (id) => id !== node.id,
+              );
+              const checkedCount = childIds.filter((id) =>
+                checkedSet.has(id),
+              ).length;
+              return (
+                <Checkbox
+                  key={node.id}
+                  className="perm-checkbox--grouped"
+                  checked={childIds.length > 0 && checkedCount === childIds.length}
+                  indeterminate={checkedCount > 0 && checkedCount < childIds.length}
+                  disabled={disabled}
+                  onChange={(e: CheckboxChangeEvent) =>
+                    handleGroupedParentChange(node, e.target.checked)
+                  }
+                >
+                  {node.meta?.icon || ''} {node.meta?.title || node.menuName}
+                  {node.meta?.describe && (
+                    <Text type="secondary" className="perm-checkbox-desc">
+                      ({node.meta.describe})
+                    </Text>
+                  )}
+                </Checkbox>
+              );
+            }
+            return (
+              <Checkbox
+                key={node.id}
+                className="perm-checkbox--flat"
+                checked={checkedSet.has(node.id)}
+                disabled={disabled}
+                onChange={(e: CheckboxChangeEvent) =>
+                  handleFlatChange(node, e.target.checked)
+                }
+              >
+                {node.meta?.icon || ''} {node.meta?.title || node.menuName}
+                {node.meta?.describe && (
+                  <Text type="secondary" className="perm-checkbox-desc">
+                    ({node.meta.describe})
+                  </Text>
+                )}
+              </Checkbox>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PermissionCheckboxGroup;

src/pages/role/components/style.less

@@ -0,0 +1,152 @@
+// --- Rules help banner ---
+.perm-help-banner {
+  padding: 12px 14px;
+  margin-bottom: 12px;
+  background: linear-gradient(
+    135deg,
+    rgba(79, 70, 229, 0.08),
+    rgba(14, 165, 233, 0.06)
+  );
+  border: 1px solid rgba(99, 102, 241, 0.18);
+  border-radius: 10px;
+  color: var(--text-secondary, #64748b);
+  font-size: 12px;
+  line-height: 1.65;
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
+
+    strong {
+      color: var(--text-primary, #1e293b);
+      font-size: 13px;
+    }
+  }
+}
+
+// --- Rules cards (2-column) ---
+.perm-rules-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.perm-rules-card {
+  padding: 14px;
+  border-radius: 12px;
+  min-height: 112px;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
+
+  // full-width checkbox so entire card is clickable
+  .ant-checkbox-wrapper {
+    width: 100%;
+    align-items: flex-start;
+  }
+
+  // Card layout: [checkbox-indicator] [icon] [text]
+  &__inner {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+  }
+
+  &__icon {
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    line-height: 1.35;
+    min-width: 0;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  &__title {
+    font-size: 15px;
+    color: var(--text-primary, #1e293b);
+    font-weight: 600;
+  }
+
+  &__desc {
+    font-size: 12px;
+  }
+
+  // View card (blue)
+  &--view {
+    border: 1px solid rgba(59, 130, 246, 0.46);
+    background: rgba(239, 246, 255, 0.92);
+
+    .perm-rules-card__icon {
+      background: rgba(59, 130, 246, 0.12);
+      color: #2563eb;
+    }
+  }
+
+  // Manage card (orange)
+  &--manage {
+    border: 1px solid rgba(245, 158, 11, 0.48);
+    background: rgba(255, 251, 235, 0.92);
+
+    .perm-rules-card__icon {
+      background: rgba(245, 158, 11, 0.12);
+      color: #d97706;
+    }
+  }
+}
+
+// --- Divider between rules and other permissions ---
+.perm-divider {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 12px 0 8px;
+  color: var(--text-muted, #94a3b8);
+  font-size: 12px;
+  font-weight: 600;
+
+  &__line {
+    height: 1px;
+    background: var(--border-color, #e2e8f0);
+    flex: 1;
+  }
+}
+
+// --- Below section: other grouped + flat checkboxes ---
+.perm-below-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px 16px;
+  align-items: center;
+}
+
+.perm-checkbox--grouped {
+  padding: 6px 10px;
+  // font-weight: 600;
+}
+
+.perm-checkbox--flat {
+  padding: 6px 10px;
+  min-width: 190px;
+}
+
+.perm-checkbox-desc {
+  font-size: 12px;
+  margin-left: 8px;
+}

src/pages/role/index.tsx

@@ -15,7 +15,12 @@ import HeadStatisticCard, {
 } from '@/components/HeadStatisticCard';
 import MyTag from '@/components/MyTag';
 import useUserInfo from '@/hooks/useUserInfo';
-import { getCompanyList, getRoleList, roleHandle } from '@/services/api';
+import {
+  getCompanyList,
+  getRoleDetail,
+  getRoleList,
+  roleHandle,
+} from '@/services/api';
 import { $t } from '@/utils/i18n';
 import useRoleCardList from './cardList';
 import Popup from './Popup';
@@ -33,7 +38,24 @@ const Role: React.FC = () => {
   const { isGlobalCompany, isSuperAdmin, isCompanyAdmin } = useAccess();
   const globalCompanyId = isGlobalCompany ? userInfo?.companyId : 0;
   const tableRef = useRef<ActionType>(null);
-  const { roleCardList } = useRoleCardList();
+  const { roleCardList, getMenuMetaByPermissions, buildMenuTree } =
+    useRoleCardList();
+
+  const [completeMenuTree, setCompleteMenuTree] = useState<API.MenuListItem[]>(
+    [],
+  );
+
+  useEffect(() => {
+    const roleId = userInfo?.roleList?.[0]?.id;
+    if (!roleId) return;
+    getRoleDetail({ id: roleId }).then(({ data: { data } }) => {
+      const flatList = data?.menuList || [];
+      if (!flatList.length) return;
+      const tree = buildMenuTree(flatList);
+      const treeWithMeta = getMenuMetaByPermissions(tree);
+      setCompleteMenuTree(treeWithMeta);
+    });
+  }, [userInfo?.roleList?.[0]?.id]);
 
   const [companyType, setCompanyType] = useState<number | ''>(
     userInfo?.companyId ?? '',
@@ -225,7 +247,7 @@ const Role: React.FC = () => {
               📋 {$t('pages.availablePermissionList')}
             </Title>
           </Col> */}
-          <Row wrap gutter={[16, 16]}>
+          <Row wrap gutter={[16, 16]} className="w-100">
             {roleCardList
               .filter((item) => item.curUserShow)
               .map((item) => (
@@ -357,6 +379,7 @@ const Role: React.FC = () => {
         formValues={formValues}
         onDone={handleDone}
         onSubmit={handleSubmit}
+        menuTree={completeMenuTree}
       />
     </PageContainer>
   );

src/pages/rules/components/CopyRule/Multi‌CopyPopup.tsx

@@ -4,7 +4,7 @@ import {
   useBreakpoint,
 } from '@ant-design/pro-components';
 import { Button, Divider, Flex, Input, Modal, Space, Typography } from 'antd';
-import { createContext, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import useRichFormat from '@/hooks/useRichI18n';
 import { $t } from '@/utils/i18n';
 import '../style.less';
@@ -14,26 +14,9 @@ import { handleEmptyValuesFunc } from '../../utils';
 import BatchCloneModal from './comp/BatchCloneModal';
 import Step1 from './comp/Step1';
 import Step2 from './comp/Step2';
+import { MultiCopyPopupContext } from './context';
 
 const { Text, Title } = Typography;
-type MultiCopyPopupContextValue = {
-  ruleMeta: Record<string, any>;
-  dataSourceList: API.DataSourceListItem[];
-  currentRuleType: number;
-  targetDataSourceId: string | number | null;
-  selectRules: API.RuleListItem[];
-  setSelectRules: (rules: API.RuleListItem[]) => void;
-  currentSchemaMap: Record<string, any>;
-};
-export const MultiCopyPopupContext = createContext<MultiCopyPopupContextValue>({
-  ruleMeta: {},
-  dataSourceList: [],
-  currentRuleType: 0,
-  targetDataSourceId: null,
-  selectRules: [],
-  setSelectRules: () => {},
-  currentSchemaMap: {},
-});
 type MultiCopyPopupProps = {
   visible: boolean;
   ruleMeta: Record<string, any>;
@@ -232,22 +215,22 @@ const MultiCopyPopup = ({
             onValuesChange={({ sourceDataSourceId }) => {
               if (sourceDataSourceId) {
                 const curFormRef = formMapRef?.current?.[0]?.current;
-                const curTargetDataSourceId =
+                const curTargetId = curFormRef?.getFieldValue('targetDataSourceId');
-                  curFormRef?.getFieldValue('targetDataSourceId');
+                const sourceItem = dataSourceList.find(
-                if (curTargetDataSourceId === sourceDataSourceId) {
+                  (item) => item.id === sourceDataSourceId,
-                  let targetDataSourceId: string | number | null = null;
+                );
-                  for (const item of dataSourceList) {
+                const targetItem = dataSourceList.find(
-                    if (item.id !== sourceDataSourceId) {
+                  (item) => item.id === curTargetId,
-                      targetDataSourceId = item.id;
+                );
-                      break;
+                if (targetItem && sourceItem && targetItem.sourceType !== sourceItem.sourceType) {
-                    }
+                  const fallback =
-                  }
+                    dataSourceList.find(
-                  if (targetDataSourceId) {
+                      (item) =>
-                    curFormRef?.setFieldsValue({
+                        item.id !== sourceDataSourceId &&
-                      targetDataSourceId,
+                        item.sourceType === sourceItem.sourceType,
-                    });
+                    )?.id || sourceDataSourceId;
-                    setTargetDataSourceId(targetDataSourceId);
+                  curFormRef?.setFieldsValue({ targetDataSourceId: fallback });
-                  }
+                  setTargetDataSourceId(fallback);
                 }
               }
             }}

src/pages/rules/components/CopyRule/SingleCopyPopup.tsx

@@ -17,7 +17,7 @@ import {
   Row,
   Typography,
 } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import useRichFormat from '@/hooks/useRichI18n';
 import { $t } from '@/utils/i18n';
 import { type SchemaType, schemaMap } from '../../ruleFormSchema';
@@ -68,49 +68,83 @@ const SingleCopyPopup = ({
   } =
     schemaMap[currentRuleType as unknown as SchemaType]?.({ richFormat }) || {};
 
-  const rightDataSourceList = dataSourceList.filter(
+  const sourceSourceType = useMemo(() => {
-    (item) => item.id !== formValues?.dataSourceId,
+    return dataSourceList.find((item) => item.id === formValues?.dataSourceId)
-  );
+      ?.sourceType;
+  }, [dataSourceList, formValues?.dataSourceId]);
+
+  const dataSourceOptions = useMemo(() => {
+    return dataSourceList.map((item) => ({
+      ...item,
+      disabled: item.sourceType !== sourceSourceType,
+      label: (
+        <Flex justify="space-between" align="center">
+          <span>{item.sourceName}</span>
+          <Typography.Text
+            type="secondary"
+            style={{ fontSize: 12, marginLeft: 8 }}
+          >
+            MT{item.sourceType}
+          </Typography.Text>
+        </Flex>
+      ),
+    }));
+  }, [dataSourceList, sourceSourceType]);
 
   const initialValues = transformInitialValue?.(formValues) || formValues;
 
-  const rightFirstDataSource = rightDataSourceList[0];
+  const rightFirstDataSource =
+    dataSourceOptions.find(
+      (item) => item.id !== formValues?.dataSourceId && !item.disabled,
+    ) || dataSourceOptions[0];
+  const isSameSource = rightFirstDataSource?.id === formValues?.dataSourceId;
   const copyFormValues = {
     ...initialValues,
     name: initialValues?.name
       ? `${initialValues.name} - ${rightFirstDataSource?.sourceName}`
       : `${Date.now()} - ${rightFirstDataSource?.sourceName}`,
-    groupFilter: '',
     id: void 0,
     dataSourceId: rightFirstDataSource?.id || '',
+    ...(isSameSource
+      ? {}
+      : {
+          groupFilter: '',
+          ...(symbolFormShow ? { param2: '' } : {}),
+          ...(assetFormShow ? { param1: '' } : {}),
+        }),
   };
-  if (symbolFormShow) {
-    copyFormValues.param2 = '';
-  }
-  if (assetFormShow) {
-    copyFormValues.param1 = '';
-  }
 
   const formContent = ({
-    dataSourceList,
+    dataSourceList: options,
     formAttr,
+    onDataSourceChange,
   }: {
-    dataSourceList: API.DataSourceListItem[];
+    dataSourceList: any[];
     formAttr: Record<string, any>;
+    onDataSourceChange?: (dataSourceId: string | number) => void;
   }) => {
     return (
-      <ProForm {...formAttr} submitter={false}>
+      <ProForm
+        {...formAttr}
+        submitter={false}
+        onValuesChange={(changedValues) => {
+          if (changedValues.dataSourceId && onDataSourceChange) {
+            onDataSourceChange(changedValues.dataSourceId);
+          }
+        }}
+      >
         <ProFormSelect
           name="dataSourceId"
           label={$t('table.dataSource')}
-          options={dataSourceList}
+          options={options}
           rules={[{ required: true, message: $t('form.required') }]}
           fieldProps={{
             allowClear: false,
             fieldNames: {
-              label: 'sourceName',
+              label: 'label',
               value: 'id',
             },
+            optionLabelProp: 'label',
           }}
         />
         <BetaSchemaForm layoutType="Embed" columns={leftForm} />
@@ -194,53 +228,64 @@ const SingleCopyPopup = ({
         },
       }}
     >
-      <Row>
+      {visible && (
-        <Col xs={24} sm={11}>
+        <Row>
-          <div style={{ marginBottom: 12 }}>
+          <Col xs={24} sm={11}>
-            <Text strong>📋 {$t('pages.rules.originalRule')}</Text>
+            <div style={{ marginBottom: 12 }}>
-          </div>
+              <Text strong>📋 {$t('pages.rules.originalRule')}</Text>
-          {formContent({
+            </div>
-            dataSourceList,
+            {formContent({
-            formAttr: { initialValues, disabled: true },
+              dataSourceList: dataSourceOptions,
-          })}
+              formAttr: { initialValues, disabled: true },
-        </Col>
+            })}
+          </Col>
 
-        <Col xs={0} sm={1}>
+          <Col xs={0} sm={1}>
-          <Flex vertical align="center" style={{ height: '100%' }}>
+            <Flex vertical align="center" style={{ height: '100%' }}>
-            <ArrowRightOutlined style={{ marginTop: 2, fontSize: 18 }} />
+              <ArrowRightOutlined style={{ marginTop: 2, fontSize: 18 }} />
-            <Divider type="vertical" style={{ flex: 1, marginTop: 16 }} />
+              <Divider type="vertical" style={{ flex: 1, marginTop: 16 }} />
-          </Flex>
+            </Flex>
-        </Col>
+          </Col>
 
-        <Col xs={24} sm={0}>
+          <Col xs={24} sm={0}>
-          <div className="text-center" style={{ marginBottom: 16 }}>
+            <div className="text-center" style={{ marginBottom: 16 }}>
-            <ArrowDownOutlined />
+              <ArrowDownOutlined />
-          </div>
+            </div>
-        </Col>
+          </Col>
 
-        <Col xs={24} sm={12}>
+          <Col xs={24} sm={12}>
-          <div style={{ marginBottom: 12 }}>
+            <div style={{ marginBottom: 12 }}>
-            <Text strong>✏️ {$t('pages.rules.cloneRulePreview')}</Text>
+              <Text strong>✏️ {$t('pages.rules.cloneRulePreview')}</Text>
-          </div>
+            </div>
 
-          {formContent({
+            {formContent({
-            dataSourceList: rightDataSourceList,
+              dataSourceList: dataSourceOptions,
-            formAttr: {
+              formAttr: {
-              initialValues: copyFormValues,
+                initialValues: copyFormValues,
-              formRef: formRef,
+                formRef: formRef,
-              disabled: confirmLoading,
+                disabled: confirmLoading,
-            },
+              },
-          })}
+              onDataSourceChange: (dataSourceId) => {
-          {errMsg && (
+                const isSame = dataSourceId === formValues?.dataSourceId;
-            <Alert
+                if (!isSame) {
-              message={errMsg}
+                  const fields: Record<string, any> = { groupFilter: '' };
-              type="error"
+                  if (symbolFormShow) fields.param2 = '';
-              showIcon
+                  if (assetFormShow) fields.param1 = '';
-              style={{ marginBottom: 16 }}
+                  formRef.current?.setFieldsValue(fields);
-            />
+                }
-          )}
+              },
-        </Col>
+            })}
-      </Row>
+            {errMsg && (
+              <Alert
+                message={errMsg}
+                type="error"
+                showIcon
+                style={{ marginBottom: 16 }}
+              />
+            )}
+          </Col>
+        </Row>
+      )}
     </Modal>
   );
 };

src/pages/rules/components/CopyRule/comp/BatchCloneModal.tsx

@@ -17,10 +17,13 @@ import {
   Tag,
   Tooltip,
 } from 'antd';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { processSingleRule } from '@/pages/rules/utils';
 import { $t } from '@/utils/i18n';
 
+type TaskStatus = 'waiting' | 'processing' | 'success' | 'warning' | 'error';
+type Task = { name: string; status: TaskStatus; errorMsg: string };
+
 type BatchCloneModalProps = {
   visible: boolean;
   selectedRows: Partial<API.RuleListItem>[];
@@ -33,26 +36,33 @@ const BatchCloneModal = ({
   onClose,
   onFinish,
 }: BatchCloneModalProps) => {
-  const [tasks, setTasks] = useState<any[]>([]);
+  const [tasks, setTasks] = useState<Task[]>([]);
   const [isRunning, setIsRunning] = useState(false);
   const [currentRunning, setCurrentRunning] = useState(0);
+  const selectedRowsRef = useRef(selectedRows);
+  selectedRowsRef.current = selectedRows;
 
   useEffect(() => {
-    const initialTasks = selectedRows.map((row) => ({
+    if (visible) {
-      name: row.name,
+      setTasks(
-      status: 'waiting', // waiting, processing, success, error
+        selectedRows.map((row) => ({
-      errorMsg: '',
+          name: row.name || '',
-    }));
+          status: 'waiting',
-    setTasks(initialTasks);
+          errorMsg: '',
-  }, [visible, selectedRows]);
+        })),
+      );
+      setIsRunning(false);
+      setCurrentRunning(0);
+    }
+  }, [visible]);
 
   const finishedTasks = useMemo(
-    () => tasks.filter((t) => ['success', 'warning'].includes(t.status)),
+    () => tasks.filter((t) => t.status === 'success' || t.status === 'warning'),
     [tasks],
   );
 
   const finishedMessage = useMemo(() => {
-    const hasWarning = finishedTasks.find((t) => t.status === 'warning');
+    const hasWarning = finishedTasks.some((t) => t.status === 'warning');
     const type: AlertProps['type'] = hasWarning
       ? 'warning'
       : finishedTasks.length === tasks.length
@@ -69,9 +79,10 @@ const BatchCloneModal = ({
     };
   }, [finishedTasks, tasks]);
 
-  const startBatch = async () => {
+  const startBatch = useCallback(async () => {
+    const rows = selectedRowsRef.current;
     setIsRunning(true);
-    for (let i = 0; i < selectedRows.length; i++) {
+    for (let i = 0; i < rows.length; i++) {
       setCurrentRunning(i + 1);
       setTasks((prev) => {
         const next = [...prev];
@@ -79,8 +90,7 @@ const BatchCloneModal = ({
         return next;
       });
       try {
-        await processSingleRule({ payload: selectedRows[i] });
+        await processSingleRule({ payload: rows[i] });
-
         setTasks((prev) => {
           const next = [...prev];
           next[i].status = 'success';
@@ -96,13 +106,13 @@ const BatchCloneModal = ({
       }
     }
     setIsRunning(false);
-  };
+  }, []);
 
-  const handleReset = () => {
+  const handleReset = useCallback(() => {
     setTasks([]);
     setIsRunning(false);
     setCurrentRunning(0);
-  };
+  }, []);
 
   return (
     <Modal

src/pages/rules/components/CopyRule/comp/RuleCheckCard.tsx

@@ -1,22 +1,20 @@
 import { CheckCard, ProCard } from '@ant-design/pro-components';
 import { useRequest } from '@umijs/max';
 import { Col, Row, Spin } from 'antd';
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { getRuleList } from '@/services/api';
 import { $t } from '@/utils/i18n';
 import { RuleCardBodyInfo } from '../../RuleCardBody';
-import { MultiCopyPopupContext } from '../Multi‌CopyPopup';
+import { MultiCopyPopupContext } from '../context';
 
 type RuleCheckCardProps = {
   dataSourceId: string | number;
-  onChange?: (id: string | number) => void;
 };
 const RuleCheckCard = ({ dataSourceId }: RuleCheckCardProps) => {
-  const [ruleList, setRuleList] = useState<API.RuleListItem[]>([]);
-
   const { ruleMeta, currentRuleType, setSelectRules } = useContext(
     MultiCopyPopupContext,
   );
+  const [ruleList, setRuleList] = useState<API.RuleListItem[]>([]);
 
   const { loading } = useRequest(
     () =>
@@ -25,7 +23,6 @@ const RuleCheckCard = ({ dataSourceId }: RuleCheckCardProps) => {
         dataSourceId,
       }),
     {
-      // manual: true,
       refreshDeps: [dataSourceId, currentRuleType],
       onSuccess: ({ data = [] }: { data: API.RuleListItem[] }) => {
         setRuleList(data);
@@ -37,15 +34,17 @@ const RuleCheckCard = ({ dataSourceId }: RuleCheckCardProps) => {
     },
   );
 
+  useEffect(() => {
+    return () => setSelectRules([]);
+  }, []);
+
   if (!dataSourceId) return <div>{$t('pages.clones.step1.tips')}</div>;
   if (loading) return <Spin />;
 
-  // const
-
   return (
     <ProCard
       title={$t('pages.clones.step1.sourceRules', {
-        count: ruleList?.length,
+        count: ruleList.length,
         ruleType: ruleMeta?.title || '-',
       })}
       collapsible

src/pages/rules/components/CopyRule/comp/Step1.tsx

@@ -1,9 +1,9 @@
 import { ArrowDownOutlined } from '@ant-design/icons';
 import { ProFormDependency, ProFormSelect } from '@ant-design/pro-components';
-import { Divider, Tag } from 'antd';
+import { Divider, Flex, Tag, Typography } from 'antd';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import { $t } from '@/utils/i18n';
-import { MultiCopyPopupContext } from '../Multi‌CopyPopup';
+import { MultiCopyPopupContext } from '../context';
 import RuleCheckCard from './RuleCheckCard';
 
 type Step1Props = {
@@ -13,11 +13,52 @@ type Step1Props = {
 const Step1 = ({ formMapRef, setTargetDataSourceId }: Step1Props) => {
   const { dataSourceList } = useContext(MultiCopyPopupContext);
 
+  const buildOptions = (sourceId?: string | number) => {
+    const sourceType = dataSourceList.find((item) => item.id === sourceId)
+      ?.sourceType;
+    return dataSourceList.map((item) => ({
+      ...item,
+      disabled: item.sourceType !== sourceType,
+      label: (
+        <Flex justify="space-between" align="center">
+          <span>{item.sourceName}</span>
+          <Typography.Text
+            type="secondary"
+            style={{ fontSize: 12, marginLeft: 8 }}
+          >
+            MT{item.sourceType}
+          </Typography.Text>
+        </Flex>
+      ),
+    }));
+  };
+
+  const sourceOptions = useMemo(
+    () => dataSourceList.map((item) => ({
+      ...item,
+      label: (
+        <Flex justify="space-between" align="center">
+          <span>{item.sourceName}</span>
+          <Typography.Text
+            type="secondary"
+            style={{ fontSize: 12, marginLeft: 8 }}
+          >
+            MT{item.sourceType}
+          </Typography.Text>
+        </Flex>
+      ),
+    })),
+    [dataSourceList],
+  );
+
   useEffect(() => {
     if (dataSourceList?.length) {
-      // waitTime(1000).then(() => {
+      const sourceItem = dataSourceList[0];
-      const sourceDataSourceId = dataSourceList[0]?.id || '';
+      const sourceDataSourceId = sourceItem?.id || '';
-      const targetDataSourceId = dataSourceList[1]?.id || '';
+      const sameTypeItem = dataSourceList.find(
+        (item) => item.id !== sourceDataSourceId && item.sourceType === sourceItem?.sourceType,
+      );
+      const targetDataSourceId = sameTypeItem?.id || sourceDataSourceId;
       const curFormRef = formMapRef?.current?.[0]?.current;
       if (curFormRef) {
         curFormRef?.setFieldsValue({
@@ -26,7 +67,6 @@ const Step1 = ({ formMapRef, setTargetDataSourceId }: Step1Props) => {
         });
         setTargetDataSourceId(targetDataSourceId);
       }
-      // });
     }
   }, [dataSourceList]);
 
@@ -35,14 +75,15 @@ const Step1 = ({ formMapRef, setTargetDataSourceId }: Step1Props) => {
       <ProFormSelect
         name="sourceDataSourceId"
         label={$t('pages.clones.step1.source')}
-        options={dataSourceList}
+        options={sourceOptions}
         rules={[{ required: true, message: $t('form.required') }]}
         fieldProps={{
           allowClear: false,
           fieldNames: {
-            label: 'sourceName',
+            label: 'label',
             value: 'id',
           },
+          optionLabelProp: 'label',
         }}
       />
       <ProFormDependency name={['sourceDataSourceId']}>
@@ -61,21 +102,20 @@ const Step1 = ({ formMapRef, setTargetDataSourceId }: Step1Props) => {
       <ProFormDependency name={['sourceDataSourceId']}>
         {({ sourceDataSourceId }) => {
           if (!sourceDataSourceId) return null;
-          const dataSourceOptions = dataSourceList.filter(
+          const targetOptions = buildOptions(sourceDataSourceId);
-            (item) => item.id !== sourceDataSourceId,
-          );
           return (
             <ProFormSelect
               name="targetDataSourceId"
               label={$t('pages.clones.step1.target')}
-              options={dataSourceOptions}
+              options={targetOptions}
               rules={[{ required: true, message: $t('form.required') }]}
               fieldProps={{
                 allowClear: false,
                 fieldNames: {
-                  label: 'sourceName',
+                  label: 'label',
                   value: 'id',
                 },
+                optionLabelProp: 'label',
               }}
               onChange={(value: string | number | null) => {
                 setTargetDataSourceId(value || null);

src/pages/rules/components/CopyRule/comp/Step2.tsx

@@ -16,7 +16,7 @@ import {
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { $t } from '@/utils/i18n';
 import { RuleCardBodyInfo } from '../../RuleCardBody';
-import { MultiCopyPopupContext } from '../Multi‌CopyPopup';
+import { MultiCopyPopupContext } from '../context';
 
 const { Text } = Typography;
 

src/pages/rules/components/CopyRule/context.ts

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+
+type MultiCopyPopupContextValue = {
+  ruleMeta: Record<string, any>;
+  dataSourceList: API.DataSourceListItem[];
+  currentRuleType: number;
+  targetDataSourceId: string | number | null;
+  selectRules: API.RuleListItem[];
+  setSelectRules: (rules: API.RuleListItem[]) => void;
+  currentSchemaMap: Record<string, any>;
+};
+
+export const MultiCopyPopupContext = createContext<MultiCopyPopupContextValue>({
+  ruleMeta: {},
+  dataSourceList: [],
+  currentRuleType: 0,
+  targetDataSourceId: null,
+  selectRules: [],
+  setSelectRules: () => {},
+  currentSchemaMap: {},
+});

src/pages/rules/index.tsx

@@ -50,7 +50,7 @@ const RuleCommon: React.FC = () => {
   const { ruleType: CURRENT_RULE_TYPE } = useRouteProps();
   const { getAllMetaByType } = useRuleMeta();
   const { userInfo } = useUserInfo();
-  const { isGlobalCompany } = useAccess();
+  const { isGlobalCompany, hasPerms } = useAccess();
   const [rules, setRules] = useState<API.RuleListItem[]>([]);
   const [alerts, setAlerts] = useState<API.AlertListItem[]>([]);
   const [visible, setVisible] = useState(false);
@@ -253,62 +253,60 @@ const RuleCommon: React.FC = () => {
         </Space>
       </div>
 
-      {!isGlobalCompany && (
+      {!isGlobalCompany &&
-        <>
+        hasPerms('rule:edit') &&
-          <Divider style={{ margin: '14px 0' }} />
+        companyInfo?.validityStatus !== 2 && (
-          <Flex justify="end">
+          <>
-            <Space wrap style={{ justifyContent: 'flex-end' }}>
+            <Divider style={{ margin: '14px 0' }} />
-              <Button
+            <Flex justify="end">
-                variant="solid"
+              <Space wrap style={{ justifyContent: 'flex-end' }}>
-                color={rule.status === 2 ? 'cyan' : 'orange'}
+                <Button
-                disabled={
+                  variant="solid"
-                  ![1, 2].includes(rule.status) || ruleStatusHandleLoading
+                  color={rule.status === 2 ? 'cyan' : 'orange'}
-                }
+                  disabled={
-                onClick={() => handleToggleStatus(rule)}
+                    ![1, 2].includes(rule.status) || ruleStatusHandleLoading
-              >
-                {rule.status === 1
-                  ? $t('pages.rules.disable')
-                  : $t('pages.rules.enable')}
-              </Button>
-              <Button
-                disabled={
-                  ![1, 2].includes(rule.status) || ruleStatusHandleLoading
-                }
-                onClick={() => {
-                  setAction('edit');
-                  setFormValues(rule);
-                  setVisible(true);
-                }}
-              >
-                {$t('table.action.edit')}
-              </Button>
-              <Button
-                color="danger"
-                variant="solid"
-                disabled={
-                  ![1, 2].includes(rule.status) || ruleStatusHandleLoading
-                }
-                onClick={() => handleDelete(rule)}
-              >
-                {$t('table.action.delete')}
-              </Button>
-              <Button
-                icon={<CopyOutlined />}
-                onClick={() => {
-                  if (dataSourceList.length < 2) {
-                    message.warning($t('pages.rules.cloneRuleWarning'));
-                    return;
                   }
-                  setFormValues(rule);
+                  onClick={() => handleToggleStatus(rule)}
-                  setCopyVisible(true);
+                >
-                }}
+                  {rule.status === 1
-              >
+                    ? $t('pages.rules.disable')
-                {$t('pages.rules.clone')}
+                    : $t('pages.rules.enable')}
-              </Button>
+                </Button>
-            </Space>
+                <Button
-          </Flex>
+                  disabled={
-        </>
+                    ![1, 2].includes(rule.status) || ruleStatusHandleLoading
-      )}
+                  }
+                  onClick={() => {
+                    setAction('edit');
+                    setFormValues(rule);
+                    setVisible(true);
+                  }}
+                >
+                  {$t('table.action.edit')}
+                </Button>
+                <Button
+                  color="danger"
+                  variant="solid"
+                  disabled={
+                    ![1, 2].includes(rule.status) || ruleStatusHandleLoading
+                  }
+                  onClick={() => handleDelete(rule)}
+                >
+                  {$t('table.action.delete')}
+                </Button>
+                <Button
+                  icon={<CopyOutlined />}
+                  onClick={() => {
+                    setFormValues(rule);
+                    setCopyVisible(true);
+                  }}
+                >
+                  {$t('pages.rules.clone')}
+                </Button>
+              </Space>
+            </Flex>
+          </>
+        )}
     </ProCard>
   );
 
@@ -438,34 +436,32 @@ const RuleCommon: React.FC = () => {
             icon={<RedoOutlined />}
             onClick={() => refreshRules(1)}
           />
-          {!isGlobalCompany && (
+          {!isGlobalCompany &&
-            <>
+            hasPerms('rule:edit') &&
-              <Button
+            companyInfo?.validityStatus !== 2 && (
-                key="1"
+              <>
-                type="primary"
+                <Button
-                onClick={() => {
+                  key="1"
-                  setAction('add');
+                  type="primary"
-                  setFormValues({});
+                  onClick={() => {
-                  setVisible(true);
+                    setAction('add');
-                }}
+                    setFormValues({});
-              >
+                    setVisible(true);
-                <PlusOutlined />
+                  }}
-                {`${$t('table.action.add')}${$t('menu.rule')}`}
+                >
-              </Button>
+                  <PlusOutlined />
-              <Button
+                  {`${$t('table.action.add')}${$t('menu.rule')}`}
-                icon={<CopyOutlined />}
+                </Button>
-                onClick={() => {
+                <Button
-                  if (dataSourceList.length < 2) {
+                  icon={<CopyOutlined />}
-                    message.warning($t('pages.rules.cloneRuleWarning'));
+                  onClick={() => {
-                    return;
+                    setMultiCopyVisible(true);
-                  }
+                  }}
-                  setMultiCopyVisible(true);
+                >
-                }}
+                  {$t('pages.clones.title')}
-              >
+                </Button>
-                {$t('pages.clones.title')}
+              </>
-              </Button>
+            )}
-            </>
-          )}
         </Space>
       </Space>
 

src/requestErrorConfig.ts

@@ -12,7 +12,6 @@ export const errorConfig: RequestConfig = {
   errorConfig: {
     // Error reception and processing
     errorHandler: async (error: any) => {
-      console.log('error', error);
       const response = error?.response;
       const config = error?.config;
       if (response?.status === 401) {
@@ -58,15 +57,20 @@ export const errorConfig: RequestConfig = {
       const { data } = response as { data: API.BaseResponse };
       const config = response?.config as RequestConfig & {
         skip417Error?: boolean;
+        skip401Refresh?: boolean;
       };
-      const skip417Error = config?.skip417Error;
+      if (config?.skip417Error && data?.code === 417) {
-      if (skip417Error && data?.code === 417) {
         return response;
       }
 
       if (data?.success === false) {
         antdMessage.error(data?.message || 'Error');
       }
+
+      if (data?.code === 401 && !config?.skip401Refresh) {
+        window.dispatchEvent(new CustomEvent('auth:refresh'));
+      }
+
       return response;
     },
   ],

src/services/api/api.ts

@@ -83,6 +83,8 @@ export async function companyHandle(
     name?: string;
     email?: string;
     status?: number;
+    validityStartTime?: string | null;
+    validityEndTime?: string | null;
   },
   options?: ObjType,
 ) {
@@ -254,6 +256,7 @@ export async function getAlertPages(
     method: "GET",
     params,
     skip417Error: true,
+    skip401Refresh: true,
     ...(options || {}),
   });
 }
@@ -261,6 +264,7 @@ export async function getAlertDetail(id: number | string, options?: ObjType) {
   return request(`/alert-record/${id}`, {
     method: "GET",
     skip417Error: true,
+    skip401Refresh: true,
     ...(options || {}),
   });
 }
@@ -376,6 +380,7 @@ export async function getRulePages(
 export async function getRuleDetail(id: number | string, options?: ObjType) {
   return request(`/rule/${id}`, {
     method: "GET",
+    skip401Refresh: true,
     ...(options || {}),
   });
 }
@@ -609,6 +614,12 @@ export async function closeSSEWithApi(options?: ObjType) {
   });
 }
 
+export async function getPlatformList(options?: ObjType) {
+  return request("/system/platform-list", {
+    method: "GET",
+    ...(options || {}),
+  });
+}
 export async function getDashboardTotal(options?: ObjType) {
   return request("/dashboard/total", {
     method: "GET",

src/services/typings.d.ts

@@ -113,6 +113,16 @@ declare namespace API {
     fromName: string | null;
     mailHostConfigId: number | string | null;
     mailStatus: number | null;
+    validityStartTime?: string | null;
+    validityEndTime?: string | null;
+    validityStatus?: number | null;
+
+    mt4Count: number;
+    mt4Open: number;
+    mt5Count: number;
+    mt5Open: number;
+    sourceType4Count: number;
+    sourceType5Count: number;
   };
 
   // "DataSource" Type

src/utils/routePermissions.ts

@@ -0,0 +1,61 @@
+import { commonRoutes, roleRoutes } from '../../config/routes';
+
+interface RouteItem {
+  path?: string;
+  access?: string;
+  meta?: { permissions?: string[] };
+  routes?: RouteItem[];
+}
+
+function flattenPermissions(
+  routes: RouteItem[],
+  parentPath = '',
+  inheritedPermissions?: string[],
+): Map<string, string[]> {
+  const map = new Map<string, string[]>();
+  for (const route of routes) {
+    const fullPath = parentPath + (route.path || '');
+    const ownPermissions =
+      route.access === 'normalRouteFilter' && route.meta?.permissions?.length
+        ? route.meta.permissions
+        : undefined;
+    const effectivePermissions = ownPermissions ?? inheritedPermissions;
+
+    if (effectivePermissions?.length) {
+      map.set(fullPath, effectivePermissions);
+    }
+
+    if (route.routes) {
+      const children = flattenPermissions(
+        route.routes,
+        `${fullPath}/`,
+        effectivePermissions,
+      );
+      for (const [path, perms] of children) {
+        map.set(path, perms);
+      }
+    }
+  }
+  return map;
+}
+
+export const routePermissions = flattenPermissions([
+  ...commonRoutes,
+  ...roleRoutes,
+]);
+
+/**
+ * Look up the required permissions for a pathname.
+ * Falls back to parent paths if the exact path isn't found (e.g. /rules/liquidity-trade → /rules).
+ */
+export function getRequiredPermissions(pathname: string): string[] | undefined {
+  let path = pathname.replace(/\/$/, '') || '/';
+  while (path) {
+    const perms = routePermissions.get(path);
+    if (perms) return perms;
+    const i = path.lastIndexOf('/');
+    if (i <= 0) break;
+    path = path.slice(0, i);
+  }
+  return undefined;
+}

src/wrappers/CompanyExpire.tsx

@@ -0,0 +1,13 @@
+import { Outlet, useAccess } from '@umijs/max';
+import CompanyExpireGuard from '@/components/CompanyExpireGuard';
+import useUserInfo from '@/hooks/useUserInfo';
+
+export default () => {
+  const { isGlobalCompany } = useAccess();
+  const { userInfo } = useUserInfo();
+  const { company } = userInfo || {};
+  if (!isGlobalCompany && company?.validityStatus === 2) {
+    return <CompanyExpireGuard fullscreen={false} />;
+  }
+  return <Outlet />;
+};

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
     "baseUrl": "./",
     "target": "esnext",
     "moduleResolution": "node",