Refactor compare config

packages/arex/src/components/MenuSelect.tsx

@@ -35,6 +35,9 @@ const MenuList = styled(Menu, {
 }>`
   border: none !important;
   background: transparent !important;
+  .ant-menu-title-content {
+    width: 100%;
+  }
   .ant-menu-item {
     color: ${(props) => props.theme.colorTextSecondary}!important;
     padding-left: 8px;

packages/arex/src/i18n/locales/cn/common.json

@@ -65,6 +65,7 @@
   "modifiedTime": "修改时间",
   "monday": "周一",
   "more": "更多...",
+  "neverExpired": "永不过期",
   "new": "新",
   "no": "否",
   "noSave": "不保存",
@@ -79,6 +80,7 @@
   "remove": "移除",
   "replay": "回放",
   "request": "请求",
+  "reset": "重置",
   "response": "响应",
   "saturday": "周六",
   "save": "保存",

packages/arex/src/i18n/locales/cn/components.json

@@ -1,8 +1,11 @@
 {
   "appSetting": {
     "QPSTips": "有效范围 1 - 20",
+    "action": "操作",
+    "addCategoryIgnore": "添加类型忽略",
     "addKey": "添加节点",
-    "addSortKey": "添加 List 节点",
+    "addListSort": "添加数组排序",
+    "addNodesIgnore": "添加忽略节点",
     "addTransformNode": "添加转换节点",
     "advanced": "高级",
     "agentHost": "Agent 地址",
@@ -71,10 +74,14 @@
     "importYaml": "Yaml 配置导入",
     "inclusion": "包含规则",
     "inclusionTooltip": "选择要录制的路径。",
+    "inputIgnorePath": "请输入忽略路径",
+    "inputListSortKeys": "请输入数组排序键名",
+    "inputListSortPath": "请输入数组节点路径",
     "interface": "接口",
     "keyFormula": "参数组合表达式",
     "keyFormulaTooltip": "非必填，参数组合，多个用’,‘隔开，支持 SpEL 表达式。",
     "keys": "节点",
+    "listSort": "数组排序",
     "maxQPS": "最大QPS",
     "methodName": "方法名",
     "methodNameTooltip": "需要 Mock 的方法名",
@@ -103,6 +110,8 @@
     "recordMachineNum": "录制机器数量",
     "replay": "回放",
     "runningStatus": "运行状态",
+    "selectDependency": "请选择一个外部依赖",
+    "selectInterface": "请选择一个接口",
     "selectMethodTip": "请选择一个方法以保存",
     "selectNodePath": "选择节点路径",
     "selectRangeTip": "请选择录制时间范围",

packages/arex/src/i18n/locales/en/common.json

@@ -68,6 +68,7 @@
   "modifiedTime": "Modified Time",
   "monday": "Mon.",
   "more": "More...",
+  "neverExpired": "Never Expired",
   "new": "New",
   "no": "No",
   "noSave": "Don't save",
@@ -82,6 +83,7 @@
   "remove": "Remove",
   "replay": "Replay",
   "request": "Request",
+  "reset": "Reset",
   "response": "Response",
   "saturday": "Sat.",
   "save": "Save",

packages/arex/src/i18n/locales/en/components.json

@@ -2,8 +2,10 @@
   "appSetting": {
     "QPSTips": "Allowable value range 1 - 20",
     "action": "Action",
+    "addCategoryIgnore": "Add Category Ignore",
     "addKey": "Add Key",
-    "addSortKey": "Add Sort Key",
+    "addListSort": "Add List Sort ",
+    "addNodesIgnore": "Add Nodes Ignore",
     "addTransformNode": "Add Transform Node",
     "advanced": "Advanced",
     "agentHost": "Agent Host",
@@ -72,10 +74,14 @@
     "importYaml": "Import Yaml",
     "inclusion": "Inclusion",
     "inclusionTooltip": "Select the paths to record",
+    "inputIgnorePath": "Please input the ignore path",
+    "inputListSortKeys": "Please input List Sort Keys",
+    "inputListSortPath": "Please input list node path",
     "interface": "Interfaces",
     "keyFormula": "Key Formula",
     "keyFormulaTooltip": "Not required, parameter combination, multiple separated by ',' , support SpEL expression.",
     "keys": "keys",
+    "listSort": "List Sort",
     "maxQPS": "Max QPS",
     "methodName": "Method Name",
     "methodNameTooltip": "The method name to be mocked.",
@@ -104,6 +110,8 @@
     "recordMachineNum": "Record Machine Count",
     "replay": "Replay",
     "runningStatus": "Running Status",
+    "selectDependency": "Please select an external dependency",
+    "selectInterface": "Please select an interface",
     "selectMethodTip": "Please select a method to save",
     "selectNodePath": "Select Node Path",
     "selectRangeTip": "Please select record time range",

packages/arex/src/menus/Replay.tsx

@@ -70,8 +70,8 @@ const MenuItem = styled((props: MenuItemProps) => {
     </SpaceBetweenWrapper>
   );
 })`
+  width: 100%;
   .menu-item-heart {
-    padding-right: 8px;
     .menu-item-heart-outlined {
       opacity: 0;
       transition: opacity ease 0.3s;

packages/arex/src/panes/AppSetting/AppSetting.tsx

@@ -5,7 +5,7 @@ import {
   setLocalStorage,
   useTranslation,
 } from '@arextest/arex-core';
-import { Tabs } from 'antd';
+import { Badge, Tabs } from 'antd';
 import React, { useEffect, useMemo } from 'react';
 
 import { APP_ID_KEY, PanesType } from '@/constant';
@@ -14,6 +14,7 @@ import CompareConfig from '@/panes/AppSetting/CompareConfig';
 import { useMenusPanes } from '@/store';
 import { decodePaneKey } from '@/store/useMenusPanes';
 
+import CompareConfigNew from './CompareConfigNew';
 import SettingImportYaml from './ImportYaml';
 import SettingOther from './Other';
 import SettingRecord from './Record';
@@ -43,6 +44,15 @@ const AppSetting: ArexPaneFC<{ key: string }> = (props) => {
         label: t('appSetting.compareConfig'),
         children: <CompareConfig appId={appId} />,
       },
+      {
+        key: 'compareConfigNew',
+        label: (
+          <Badge size='small' count='new' offset={[12, 0]}>
+            {t('appSetting.compareConfig')}
+          </Badge>
+        ),
+        children: <CompareConfigNew appId={appId} />,
+      },
       {
         key: 'importYaml',
         label: t('appSetting.importYaml'),