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
feat(profile): fix expired text show
2026-07-30 21:33:48 +08:00 · 2026-07-29 20:59:47 +08:00 · 2026-07-29 20:38:13 +08:00 · 2026-07-29 20:28:06 +08:00 · 2026-07-29 16:15:58 +08:00 · 2026-06-15 23:05:56 +08:00
45 changed files with 1600 additions and 331 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,7 @@ deploy.js
 # misc
 .env
 .DS_Store
+.claude
 npm-debug.log*
 yarn-error.log

--- a/config/config.ts
+++ b/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
--- a/config/proxy.ts
+++ b/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': '',
--- a/config/routes.ts
+++ b/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',
  },
  {
--- a/example.nginx.conf
+++ b/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;
+	}
 }
--- a/src/app.tsx
+++ b/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) {
-    console.log('fetchUnread');
+  if (currentUser && !initialized && hasPerms?.('alert:list')) {
    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>
        </>
--- a/src/components/CompanyExpireGuard/index.tsx
+++ b/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;
--- a/src/components/CompanyExpireWarning/index.tsx
+++ b/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;
--- a/src/components/ExpireOrApp/index.tsx
+++ b/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;
--- a/src/components/PermissionGuard.tsx
+++ b/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;
+}
--- a/src/components/SSEController/index.tsx
+++ b/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);
--- a/src/components/VoiceCheck/index.tsx
+++ b/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)}>
-        {!hasAudioPermission && (
-          <>
-            <Alert
-              message={$t('pages.voiceCheck.alertMessage')}
-              type="warning"
-              showIcon
-            />
-            <Icon
-              icon="local:silence"
-              height="20px"
-              fill="#f59e0b"
-              className="flex align-center"
-            />
-          </>
-        )}
+      <Flex align="center" onClick={() => setVisible(true)}>
+        {!hasAudioPermission &&
+          (['xs', 'sm'].includes(screens || '') ? (
+            <Popover
+              content={tipsNode}
+              styles={{
+                body: { padding: 0 },
+              }}
+              zIndex={999}
+              defaultOpen={true}
+            >
+              <Icon
+                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;
--- a/src/global.less
+++ b/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%;
--- a/src/hooks/useUserInfo.ts
+++ b/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 };
 }
--- a/src/locales/en_US/menu.ts
+++ b/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',
--- a/src/locales/en_US/pages.ts
+++ b/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':
--- a/src/locales/zh_CN/menu.ts
+++ b/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)',
--- a/src/locales/zh_CN/pages.ts
+++ b/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':
--- a/src/pages/account/index.tsx
+++ b/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: '',
          },
-          // {
-          //   label: 'MT4',
-          //   value: '4',
-          // },
-          {
-            label: 'MT5',
-            value: '5',
-          },
+          ...userPlatform,
        ],
      },
    },
--- a/src/pages/alert/index.tsx
+++ b/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: '',
          },
-          // {
-          //   label: 'MT4',
-          //   value: 4,
-          // },
-          {
-            label: 'MT5',
-            value: 5,
-          },
+          ...userPlatform,
        ],
      },
      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: {
--- a/src/pages/company/Popup.tsx
+++ b/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>
--- a/src/pages/company/index.tsx
+++ b/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);
          }}
        >
--- a/src/pages/data-source/Popup.tsx
+++ b/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={[
-          // {
-          //   value: 4,
-          //   label: 'MT4',
-          // },
-          {
-            value: 5,
-            label: 'MT5',
-          },
-        ]}
+        options={filteredUserPlatform}
      />

      {isGlobalCompany && (
--- a/src/pages/data-source/index.tsx
+++ b/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,
--- a/src/pages/oper-log/index.tsx
+++ b/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'),
--- a/src/pages/profile/index.tsx
+++ b/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;
--- a/src/pages/role/Popup.tsx
+++ b/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(
-            (item: API.MenuListItem) => item.id,
-          );
+          const allSelectedIds = flattenAllIds(data?.menuList || []);
          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}）`,
-          value: item.id,
-        }))}
-        fieldProps={{
-          style: {
-            display: 'grid',
-            gridTemplateColumns: 'repeat(2, 1fr)',
-            gap: '8px 16px',
-            alignItems: 'center',
-          },
-        }}
-      />
+      >
+        <PermissionCheckboxGroup
+          menuTree={menuTree}
+          disabled={action === 'view'}
+        />
+      </ProForm.Item>
      <ProFormText hidden name="id" label="ID" />
    </ModalForm>
  );
--- a/src/pages/role/cardList.ts
+++ b/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 };
 }
--- a/src/pages/role/components/PermissionCheckboxGroup.tsx
+++ b/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;
--- a/src/pages/role/components/style.less
+++ b/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;
+}
--- a/src/pages/role/index.tsx
+++ b/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>
  );
--- a/src/pages/rules/components/CopyRule/Multi‌CopyPopup.tsx
+++ b/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 =
-                  curFormRef?.getFieldValue('targetDataSourceId');
-                if (curTargetDataSourceId === sourceDataSourceId) {
-                  let targetDataSourceId: string | number | null = null;
-                  for (const item of dataSourceList) {
-                    if (item.id !== sourceDataSourceId) {
-                      targetDataSourceId = item.id;
-                      break;
-                    }
-                  }
-                  if (targetDataSourceId) {
-                    curFormRef?.setFieldsValue({
-                      targetDataSourceId,
-                    });
-                    setTargetDataSourceId(targetDataSourceId);
-                  }
+                const curTargetId = curFormRef?.getFieldValue('targetDataSourceId');
+                const sourceItem = dataSourceList.find(
+                  (item) => item.id === sourceDataSourceId,
+                );
+                const targetItem = dataSourceList.find(
+                  (item) => item.id === curTargetId,
+                );
+                if (targetItem && sourceItem && targetItem.sourceType !== sourceItem.sourceType) {
+                  const fallback =
+                    dataSourceList.find(
+                      (item) =>
+                        item.id !== sourceDataSourceId &&
+                        item.sourceType === sourceItem.sourceType,
+                    )?.id || sourceDataSourceId;
+                  curFormRef?.setFieldsValue({ targetDataSourceId: fallback });
+                  setTargetDataSourceId(fallback);
                }
              }
            }}
--- a/src/pages/rules/components/CopyRule/SingleCopyPopup.tsx
+++ b/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(
-    (item) => item.id !== formValues?.dataSourceId,
-  );
+  const sourceSourceType = useMemo(() => {
+    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>
-        <Col xs={24} sm={11}>
-          <div style={{ marginBottom: 12 }}>
-            <Text strong>📋 {$t('pages.rules.originalRule')}</Text>
-          </div>
-          {formContent({
-            dataSourceList,
-            formAttr: { initialValues, disabled: true },
-          })}
-        </Col>
+      {visible && (
+        <Row>
+          <Col xs={24} sm={11}>
+            <div style={{ marginBottom: 12 }}>
+              <Text strong>📋 {$t('pages.rules.originalRule')}</Text>
+            </div>
+            {formContent({
+              dataSourceList: dataSourceOptions,
+              formAttr: { initialValues, disabled: true },
+            })}
+          </Col>

-        <Col xs={0} sm={1}>
-          <Flex vertical align="center" style={{ height: '100%' }}>
-            <ArrowRightOutlined style={{ marginTop: 2, fontSize: 18 }} />
-            <Divider type="vertical" style={{ flex: 1, marginTop: 16 }} />
-          </Flex>
-        </Col>
+          <Col xs={0} sm={1}>
+            <Flex vertical align="center" style={{ height: '100%' }}>
+              <ArrowRightOutlined style={{ marginTop: 2, fontSize: 18 }} />
+              <Divider type="vertical" style={{ flex: 1, marginTop: 16 }} />
+            </Flex>
+          </Col>

-        <Col xs={24} sm={0}>
-          <div className="text-center" style={{ marginBottom: 16 }}>
-            <ArrowDownOutlined />
-          </div>
-        </Col>
+          <Col xs={24} sm={0}>
+            <div className="text-center" style={{ marginBottom: 16 }}>
+              <ArrowDownOutlined />
+            </div>
+          </Col>

-        <Col xs={24} sm={12}>
-          <div style={{ marginBottom: 12 }}>
-            <Text strong>✏️ {$t('pages.rules.cloneRulePreview')}</Text>
-          </div>
+          <Col xs={24} sm={12}>
+            <div style={{ marginBottom: 12 }}>
+              <Text strong>✏️ {$t('pages.rules.cloneRulePreview')}</Text>
+            </div>

-          {formContent({
-            dataSourceList: rightDataSourceList,
-            formAttr: {
-              initialValues: copyFormValues,
-              formRef: formRef,
-              disabled: confirmLoading,
-            },
-          })}
-          {errMsg && (
-            <Alert
-              message={errMsg}
-              type="error"
-              showIcon
-              style={{ marginBottom: 16 }}
-            />
-          )}
-        </Col>
-      </Row>
+            {formContent({
+              dataSourceList: dataSourceOptions,
+              formAttr: {
+                initialValues: copyFormValues,
+                formRef: formRef,
+                disabled: confirmLoading,
+              },
+              onDataSourceChange: (dataSourceId) => {
+                const isSame = dataSourceId === formValues?.dataSourceId;
+                if (!isSame) {
+                  const fields: Record<string, any> = { groupFilter: '' };
+                  if (symbolFormShow) fields.param2 = '';
+                  if (assetFormShow) fields.param1 = '';
+                  formRef.current?.setFieldsValue(fields);
+                }
+              },
+            })}
+            {errMsg && (
+              <Alert
+                message={errMsg}
+                type="error"
+                showIcon
+                style={{ marginBottom: 16 }}
+              />
+            )}
+          </Col>
+        </Row>
+      )}
    </Modal>
  );
 };
--- a/src/pages/rules/components/CopyRule/comp/BatchCloneModal.tsx
+++ b/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) => ({
-      name: row.name,
-      status: 'waiting', // waiting, processing, success, error
-      errorMsg: '',
-    }));
-    setTasks(initialTasks);
-  }, [visible, selectedRows]);
+    if (visible) {
+      setTasks(
+        selectedRows.map((row) => ({
+          name: row.name || '',
+          status: 'waiting',
+          errorMsg: '',
+        })),
+      );
+      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
--- a/src/pages/rules/components/CopyRule/comp/RuleCheckCard.tsx
+++ b/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
--- a/src/pages/rules/components/CopyRule/comp/Step1.tsx
+++ b/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 { useContext, useEffect } from 'react';
+import { Divider, Flex, Tag, Typography } from 'antd';
+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 sourceDataSourceId = dataSourceList[0]?.id || '';
-      const targetDataSourceId = dataSourceList[1]?.id || '';
+      const sourceItem = dataSourceList[0];
+      const sourceDataSourceId = sourceItem?.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(
-            (item) => item.id !== sourceDataSourceId,
-          );
+          const targetOptions = buildOptions(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);
--- a/src/pages/rules/components/CopyRule/comp/Step2.tsx
+++ b/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;

--- a/src/pages/rules/components/CopyRule/context.ts
+++ b/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: {},
+});
--- a/src/pages/rules/index.tsx
+++ b/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 && (
-        <>
-          <Divider style={{ margin: '14px 0' }} />
-          <Flex justify="end">
-            <Space wrap style={{ justifyContent: 'flex-end' }}>
-              <Button
-                variant="solid"
-                color={rule.status === 2 ? 'cyan' : 'orange'}
-                disabled={
-                  ![1, 2].includes(rule.status) || ruleStatusHandleLoading
-                }
-                onClick={() => handleToggleStatus(rule)}
-              >
-                {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;
+      {!isGlobalCompany &&
+        hasPerms('rule:edit') &&
+        companyInfo?.validityStatus !== 2 && (
+          <>
+            <Divider style={{ margin: '14px 0' }} />
+            <Flex justify="end">
+              <Space wrap style={{ justifyContent: 'flex-end' }}>
+                <Button
+                  variant="solid"
+                  color={rule.status === 2 ? 'cyan' : 'orange'}
+                  disabled={
+                    ![1, 2].includes(rule.status) || ruleStatusHandleLoading
                  }
-                  setFormValues(rule);
-                  setCopyVisible(true);
-                }}
-              >
-                {$t('pages.rules.clone')}
-              </Button>
-            </Space>
-          </Flex>
-        </>
-      )}
+                  onClick={() => handleToggleStatus(rule)}
+                >
+                  {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={() => {
+                    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 && (
-            <>
-              <Button
-                key="1"
-                type="primary"
-                onClick={() => {
-                  setAction('add');
-                  setFormValues({});
-                  setVisible(true);
-                }}
-              >
-                <PlusOutlined />
-                {`${$t('table.action.add')}${$t('menu.rule')}`}
-              </Button>
-              <Button
-                icon={<CopyOutlined />}
-                onClick={() => {
-                  if (dataSourceList.length < 2) {
-                    message.warning($t('pages.rules.cloneRuleWarning'));
-                    return;
-                  }
-                  setMultiCopyVisible(true);
-                }}
-              >
-                {$t('pages.clones.title')}
-              </Button>
-            </>
-          )}
+          {!isGlobalCompany &&
+            hasPerms('rule:edit') &&
+            companyInfo?.validityStatus !== 2 && (
+              <>
+                <Button
+                  key="1"
+                  type="primary"
+                  onClick={() => {
+                    setAction('add');
+                    setFormValues({});
+                    setVisible(true);
+                  }}
+                >
+                  <PlusOutlined />
+                  {`${$t('table.action.add')}${$t('menu.rule')}`}
+                </Button>
+                <Button
+                  icon={<CopyOutlined />}
+                  onClick={() => {
+                    setMultiCopyVisible(true);
+                  }}
+                >
+                  {$t('pages.clones.title')}
+                </Button>
+              </>
+            )}
        </Space>
      </Space>

--- a/src/requestErrorConfig.ts
+++ b/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 (skip417Error && data?.code === 417) {
+      if (config?.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;
    },
  ],
--- a/src/services/api/api.ts
+++ b/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",
--- a/src/services/typings.d.ts
+++ b/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
--- a/src/utils/routePermissions.ts
+++ b/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;
+}
--- a/src/wrappers/CompanyExpire.tsx
+++ b/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 />;
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
  "compilerOptions": {
+    "ignoreDeprecations": "6.0",
    "baseUrl": "./",
    "target": "esnext",
    "moduleResolution": "node",
Author	SHA1	Message	Date
Johnton Chen	318728b121	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	2026-07-30 21:33:48 +08:00
Johnton Chen	2a8d213c0f	feat(profile): fix expired text show	2026-07-29 20:59:47 +08:00
Johnton Chen	2589205efd	Merge branches 'feat/company-expire' and 'feat/platform-limit' into dev/2.0 Resolved conflicts: - typings.d.ts: Keep both validity fields and platform quota fields in CompanyListItem - company/Popup.tsx: Merge imports (Card, Col, Row from platform-limit + Dayjs from company-expire) - company/index.tsx: Keep useAccess and Typography imports needed by company-expire - rules/index.tsx: Keep validityStatus check from company-expire, adopt simplified clone button from platform-limit Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-07-29 20:38:13 +08:00
Johnton Chen	4085393db1	feat(company): add expiry warning banner, route wrapper, and conditional UI for expired companies - Add CompanyExpireWarning component to layout header for expiring subscription alerts - Add CompanyExpire wrapper to guard rules and data-source routes - Refactor CompanyExpireGuard to support optional fullscreen mode via prop - Add responsive Popover support to VoiceCheck for mobile breakpoints - Hide rule CRUD action buttons when company validity is expired - Update profile page to display expiry status alongside validity date - Update i18n strings for clearer expiry messaging Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-07-29 20:28:06 +08:00
Johnton Chen	fc55965555	feat(company): add subscription expiry management and expired company guard Add validity period fields to company CRUD, display expiry info in table and profile, and block access for expired companies via a full-screen guard component. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-07-29 16:15:58 +08:00
Johnton Chen	3c636bcaa2	refactor(copy-rule): extract context and improve batch clone modal - Extract MultiCopyPopupContext to standalone context.ts file - Add Task type and improve type safety in BatchCloneModal - Use useRef/useCallback to stabilize batch clone handlers - Add cleanup effect for selectRules in RuleCheckCard on unmount Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-15 23:05:56 +08:00
Jhonton Chen	16999ca583	feat(clone): allow same-source cloning and disable cross-sourceType targets - Remove the restriction that prevents cloning to the same data source - Disable (instead of hide) target options with different sourceType - Add sourceType label (MT4/MT5) to data source select options - Preserve groupFilter/param1/param2 when cloning to same source - Auto-reset target when source changes to incompatible sourceType - Remove parent-level check requiring at least 2 data sources Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-14 21:39:01 +08:00
Jhonton Chen	dfcba94cf5	feat(platform): add platform access control with quota management - Add userPlatform hook to derive available platforms from company config - Add platform access section in company popup with MT4/MT5 switch and quota limits - Add platform access column in company list showing quota usage - Replace hardcoded platform options with dynamic userPlatform in account/alert/data-source pages - Add getPlatformList API and extend CompanyListItem typings - Add i18n translations for platform access related keys - Update dev proxy target port to 8082 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-06-12 17:57:25 +08:00
Jhonton Chen	43d6e9207a	feat: add permission-based access control and improve alert table UI - Implement PermissionGuard component for route-level permission enforcement - Add tree-based permission checkbox group in role management popup - Gate SSE connection, unread count fetch, and rule edit actions on user permissions - Add skip401Refresh option and auto token refresh on 401 response - Improve alert table with fixed columns, explicit widths, and text ellipsis - Add i18n entries for permission guide and rule menu descriptions (en/zh) - Add expo-api nginx proxy configuration - Add .claude to .gitignore Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-29 18:04:07 +08:00
Jhonton Chen	710da86521	fix(oper-log): fix json.parse error again	2026-05-24 16:22:42 +08:00