feat: update care/request version (#706)

arextest · Jul 22, 2024 · 071fd18 · 071fd18
1 parent c85729b
commit 071fd18
Show file tree

Hide file tree

Showing 24 changed files with 708 additions and 174 deletions.
diff --git a/packages/arex-core/package.json b/packages/arex-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@arextest/arex-core",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "homepage": "https://github.com/arextest/arex",
   "main": "dist/arex-core.js",
   "module": "dist/arex-core.js",
@@ -16,7 +16,6 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "vanilla-jsoneditor": "0.23.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
@@ -35,6 +34,7 @@
     "react-i18next": "^12.2.0",
     "react-transition-group": "^4.4.5",
     "use-immer": "^0.8.1",
+    "vanilla-jsoneditor": "0.23.0",
     "vconsole": "^3.15.0"
   },
   "devDependencies": {
@@ -48,7 +48,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "antd": "^5.16.1",
+    "antd": "^5.19.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

diff --git a/packages/arex-core/src/components/ArexLogo.tsx b/packages/arex-core/src/components/ArexLogo.tsx
@@ -7,6 +7,7 @@ import { Theme } from '../theme';
 
 export type ArexLogoProps = {
   href?: string;
+  title?: string;
 };
 const ArexLogo: FC<ArexLogoProps> = (props) => {
   const { theme } = useArexCoreConfig();
@@ -83,9 +84,14 @@ const ArexLogo: FC<ArexLogoProps> = (props) => {
       </svg>
       <Typography.Text
         strong
-        style={{ lineHeight: '14px', paddingLeft: '2px', transform: 'scale(0.7)' }}
+        style={{
+          lineHeight: '14px',
+          textWrap: 'nowrap',
+          paddingLeft: '2px',
+          transform: 'scale(0.7)',
+        }}
       >
-        AREX
+        {props.title || 'AREX'}
       </Typography.Text>
     </a>
   );

diff --git a/packages/arex-core/src/components/PanesTitle.tsx b/packages/arex-core/src/components/PanesTitle.tsx
@@ -43,7 +43,7 @@ const PanesTitle = styled((props: PanesTitleProps) => {
             onChange={(e) => setEditableTitle(e.target.value)}
           />
         ) : (
-          <Typography.Title ellipsis level={4} style={{ marginBottom: 0 }}>
+          <Typography.Title ellipsis level={4} style={{ marginBottom: 0, overflow: 'visible' }}>
             {title}
           </Typography.Title>
         )}

diff --git a/packages/arex-core/src/components/SmallTextButton.tsx b/packages/arex-core/src/components/SmallTextButton.tsx
@@ -3,14 +3,13 @@ import { TextProps } from 'antd/es/typography/Text';
 import React, { ReactNode } from 'react';
 
 const SmallTextButton = React.forwardRef<
-  HTMLElement,
+  HTMLButtonElement,
   Omit<ButtonProps, 'title'> & {
     color?: TextProps['color'];
     title?: ReactNode;
   }
 >((props, ref) => {
   const { title, ...restProps } = props;
-  const { token } = theme.useToken();
 
   return (
     <Button

diff --git a/packages/arex-core/src/components/StructuredFilter/StructuredOption.tsx b/packages/arex-core/src/components/StructuredFilter/StructuredOption.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { Carousel, Menu } from 'antd';
 import { CarouselRef } from 'antd/es/carousel';
 import { SizeType } from 'antd/es/config-provider/SizeContext';
-import { ItemType } from 'antd/es/menu/hooks/useItems';
+import { ItemType } from 'antd/es/menu/interface';
 import React, {
   forwardRef,
   ForwardRefRenderFunction,

diff --git a/packages/arex-core/src/components/StructuredFilter/StructuredTag.tsx b/packages/arex-core/src/components/StructuredFilter/StructuredTag.tsx
@@ -57,7 +57,7 @@ const StructuredTagWrapper = styled.div`
 const StructuredTag = (props: StructuredTagProps) => {
   const { token } = theme.useToken();
 
-  const categoryRef = useRef<HTMLDivElement>(null);
+  const categoryRef = useRef<HTMLButtonElement>(null);
   const closeIconRef = useRef<HTMLDivElement>(null);
   const categoryNodeRef = useRef(null);
 

diff --git a/packages/arex-core/src/components/index.ts b/packages/arex-core/src/components/index.ts
@@ -45,6 +45,7 @@ export { default as SmallBadge } from './SmallBadge';
 export { default as SmallTextButton } from './SmallTextButton';
 export { default as SpaceBetweenWrapper } from './SpaceBetweenWrapper';
 export type { SearchDataType } from './StructuredFilter';
+export type { StructuredFilterRef } from './StructuredFilter';
 export { default as StructuredFilter } from './StructuredFilter';
 export { CategoryKey, Operator } from './StructuredFilter/keyword';
 export * from './StructuredFilter/keyword';

diff --git a/packages/arex-core/src/layout/ArexHeader.tsx b/packages/arex-core/src/layout/ArexHeader.tsx
@@ -10,6 +10,7 @@ export interface AppHeaderProps {
     | boolean
     | {
         href?: string;
+        title?: string;
       };
   githubStar?: boolean;
   menu?: React.ReactNode;
@@ -23,7 +24,7 @@ const HeaderWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   -webkit-app-region: drag;
-  border-bottom: 1px solid ${(props) => props.theme.colorBorder}};
+  border-bottom: 1px solid ${(props) => props.theme.colorBorder};
     .left,
     .right {
       display: flex;
@@ -45,7 +46,12 @@ const ArexHeader: FC<AppHeaderProps> = (props) => {
   return (
     <HeaderWrapper className={props.className}>
       <div className={'left'}>
-        {logo && <ArexLogo href={typeof logo === 'boolean' ? undefined : logo.href} />}
+        {logo && (
+          <ArexLogo
+            title={typeof logo === 'boolean' ? undefined : logo.title}
+            href={typeof logo === 'boolean' ? undefined : logo.href}
+          />
+        )}
         {githubStar && <GithubStarButton />}
         {props.menu}
       </div>

diff --git a/packages/arex-core/src/layout/ArexMenuContainer.tsx b/packages/arex-core/src/layout/ArexMenuContainer.tsx
@@ -1,8 +1,9 @@
 import { LeftOutlined } from '@ant-design/icons';
 import { css } from '@emotion/react';
+import { SerializedStyles } from '@emotion/serialize';
 import styled from '@emotion/styled';
-import { Menu, MenuProps, Tabs, TabsProps } from 'antd';
-import React, { FC, ReactNode, useMemo } from 'react';
+import { Menu, MenuProps, Tabs, TabsProps, theme } from 'antd';
+import React, { CSSProperties, FC, ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ErrorBoundary } from '../components';
@@ -13,9 +14,12 @@ export type ArexMenuContainerProps = {
   value?: string;
   activeKey?: string;
   collapsed?: boolean;
+  extraMenu?: ReactNode;
   onChange?: (menuType: string) => void;
   onCollapsed?: (collapse: boolean) => void;
   onSelect?: (paneType: string, id: string, data: unknown) => void;
+  style?: CSSProperties;
+  sx?: SerializedStyles;
 };
 
 export type MenuItemType = {
@@ -30,6 +34,7 @@ const ICON_KEY = '__ExpandIcon';
 const ArexMenuContainer: FC<ArexMenuContainerProps> = (props) => {
   // 规定: ArexMenu 翻译文本需要配置在 locales/[lang]/arex-menu.json 下, 且 key 为 Menu.types
   const { t } = useTranslation([ArexMenuNamespace]);
+  const { token } = theme.useToken();
 
   const tabsItems = useMemo<MenuItemType[]>(
     () =>
@@ -80,25 +85,44 @@ const ArexMenuContainer: FC<ArexMenuContainerProps> = (props) => {
   return (
     <div
       id='arex-menu-wrapper'
-      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+      className='sidebar'
+      css={props.sx}
+      style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        paddingLeft: '1.5px',
+        ...props.style,
+      }}
     >
       <div style={{ display: 'flex', flex: '1', minHeight: '0' }}>
-        <StyledMenu
-          mode='inline'
-          id='arex-menu'
-          selectedKeys={props.activeKey ? [props.activeKey] : []}
-          inlineCollapsed={props.collapsed}
-          items={tabsItems}
-          onClick={handleMenuClick}
-        />
+        <div
+          style={{
+            // @ts-ignore
+            '-webkit-app-region': 'drag',
+          }}
+        >
+          <StyledMenu
+            mode='inline'
+            id='arex-menu'
+            selectedKeys={props.activeKey ? [props.activeKey] : []}
+            inlineCollapsed={props.collapsed}
+            items={tabsItems}
+            onClick={handleMenuClick}
+            style={{ backgroundColor: 'transparent' }}
+          />
+
+          {props.extraMenu}
+        </div>
+
         {/* 此处利用 Tabs 做组件缓存 */}
         <Tabs
           activeKey={props.activeKey}
           items={items}
-          popupClassName={''}
           css={css`
             width: 100%;
             overflow-y: hidden;
+            background-color: ${token.colorBgLayout};
             .ant-tabs-nav {
               display: none; // 隐藏 Tabs 的导航栏
             }
@@ -111,6 +135,7 @@ const ArexMenuContainer: FC<ArexMenuContainerProps> = (props) => {
 
 const StyledMenu = styled(Menu)`
   width: auto;
+  height: 100%;
   position: relative;
   .ant-menu-root,
   :not(.ant-menu-inline-collapsed) {
@@ -120,6 +145,7 @@ const StyledMenu = styled(Menu)`
   }
   .ant-menu-item,
   .ant-menu-submenu-title {
+    -webkit-app-region: no-drag;
     height: auto !important;
     flex-direction: column;
     padding-top: ${(props) => (props.inlineCollapsed ? 0 : '12px')};
@@ -138,7 +164,7 @@ const StyledMenu = styled(Menu)`
 
     &[data-menu-id$=${ICON_KEY}] {
       position: absolute;
-      bottom: 36px;
+      bottom: 48px;
       left: 0;
     }
     span {

diff --git a/packages/arex-core/src/layout/ArexPanesContainer.tsx b/packages/arex-core/src/layout/ArexPanesContainer.tsx
@@ -71,6 +71,7 @@ export interface ArexPanesContainerProps extends Omit<TabsProps, 'items' | 'onDr
 
 const ArexPanesContainerWrapper = styled.div`
   height: 100%;
+  background-color: ${(props) => props.theme.colorBgContainer};
   // 工作区 Tabs 全局样式调整
   .ant-tabs-tab {
     .ant-tabs-tab-btn {
@@ -112,26 +113,26 @@ const ArexPanesContainerWrapper = styled.div`
     padding: 0 16px;
   }
 
-  .ant-tabs-nav-operations {
+  .ant-tabs-nav {
     margin-bottom: 0 !important;
-    .ant-tabs-nav-more {
-      padding: 8px 12px;
-      border: 1px solid ${(props) => props.theme.colorBorderSecondary};
-      border-bottom-color: ${(props) => props.theme.colorBorder};
-      border-radius: ${(props) => props.theme.borderRadius}px
-        ${(props) => props.theme.borderRadius}px 0 0;
-    }
-    .ant-tabs-nav-add {
-      margin-left: -1px;
-      border-bottom-color: ${(props) => props.theme.colorBorderSecondary};
+    .ant-tabs-nav-operations {
+      margin-bottom: 0 !important;
+      .ant-tabs-nav-more {
+        height: 36px;
+        border-left: #000c17 1px solid;
+        padding: 8px 12px;
+        border: 1px solid ${(props) => props.theme.colorBorderSecondary};
+        border-bottom-color: ${(props) => props.theme.colorBorder};
+        border-radius: ${(props) => props.theme.borderRadius}px
+          ${(props) => props.theme.borderRadius}px 0 0;
+      }
+      .ant-tabs-nav-add {
+        margin-left: -1px;
+        border-bottom-color: ${(props) => props.theme.colorBorderSecondary};
+      }
     }
   }
 
-  .ant-tabs-nav-more {
-    height: 36px;
-    border-left: #000c17 1px solid;
-  }
-
   .ant-tabs-content {
     height: 100%;
     .ant-tabs-tabpane {
@@ -226,38 +227,52 @@ const ArexPanesContainer = (props: ArexPanesContainerProps) => {
             .ant-tabs-nav {
               margin-bottom: 0;
             }
-            .ant-tabs-tab .anticon {
-              margin-right: ${token.marginXXS}px;
+            .ant-tabs-tab {
+              height: 36px;
+              .anticon {
+                margin-right: ${token.marginXXS}px;
+              }
             }
           `}
           popupClassName='arex-pane-popup'
           renderTabBar={(tabBarProps, DefaultTabBar) => (
-            <DndContext sensors={[sensor]} onDragEnd={onDragEnd}>
-              <SortableContext
-                items={panesItems?.map((i) => i.key) || []}
-                strategy={horizontalListSortingStrategy}
-              >
-                <DefaultTabBar {...tabBarProps}>
-                  {(node) => (
-                    <DraggableTabNode {...node.props} key={node.key}>
-                      <div>
-                        {React.createElement(
-                          dropdownMenu ? Dropdown : 'div',
-                          {
-                            menu: {
-                              ...dropdownMenu,
-                              onClick: (e) => dropdownMenu?.onClick?.(e, node.key),
+            <div
+              css={css`
+                -webkit-app-region: drag;
+                .ant-tabs-nav-list,
+                .ant-tabs-nav-operations {
+                  height: 36px !important;
+                  -webkit-app-region: no-drag;
+                }
+              `}
+            >
+              <DndContext sensors={[sensor]} onDragEnd={onDragEnd}>
+                <SortableContext
+                  items={panesItems?.map((i) => i.key) || []}
+                  strategy={horizontalListSortingStrategy}
+                >
+                  <DefaultTabBar {...tabBarProps}>
+                    {(node) => (
+                      <DraggableTabNode {...node.props} key={node.key}>
+                        <div>
+                          {React.createElement(
+                            dropdownMenu ? Dropdown : 'div',
+                            {
+                              menu: {
+                                ...dropdownMenu,
+                                onClick: (e) => dropdownMenu?.onClick?.(e, node.key),
+                              },
+                              trigger: ['contextMenu'],
                             },
-                            trigger: ['contextMenu'],
-                          },
-                          node,
-                        )}
-                      </div>
-                    </DraggableTabNode>
-                  )}
-                </DefaultTabBar>
-              </SortableContext>
-            </DndContext>
+                            node,
+                          )}
+                        </div>
+                      </DraggableTabNode>
+                    )}
+                  </DefaultTabBar>
+                </SortableContext>
+              </DndContext>
+            </div>
           )}
           size='small'
           type='editable-card'

diff --git a/packages/arex-core/src/panes/index.ts b/packages/arex-core/src/panes/index.ts
@@ -32,7 +32,9 @@ export type ArexPaneOptions = {
 
 export type ArexPane<D extends PanesData = PanesData> = ArexPaneFC<D> & ArexPaneOptions;
 
-export type ArexPaneFC<D extends PanesData = PanesData> = React.FC<{ data: D; paneKey: string }>;
+export type ArexPaneFC<D extends PanesData = PanesData, P = unknown> = React.FC<
+  { data: D; paneKey: string } & P
+>;
 
 export type PanesData = any;