feat: page ListSearch all

ListSearchApplications/src/_mock.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import type { Request, Response } from 'express';
 import type { ListItemDataType } from './data.d';
 

ListSearchApplications/src/components/StandardFormRow/index.style.ts

@@ -0,0 +1,60 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+  return {
+    standardFormRow: {
+      display: 'flex',
+      marginBottom: '16px',
+      paddingBottom: '16px',
+      borderBottom: `1px dashed ${token.colorSplit}`,
+      '.ant-form-item, .ant-legacy-form-item': { marginRight: '24px' },
+      '.ant-form-item-label, .ant-legacy-form-item-label': {
+        label: {
+          marginRight: '0',
+          color: token.colorText,
+        },
+      },
+      '.ant-form-item-label, .ant-legacy-form-item-label, .ant-form-item-control, .ant-legacy-form-item-control':
+        { padding: '0', lineHeight: '32px' },
+    },
+    label: {
+      flex: '0 0 auto',
+      marginRight: '24px',
+      color: token.colorTextHeading,
+      fontSize: token.fontSize,
+      textAlign: 'right',
+      '& > span': {
+        display: 'inline-block',
+        height: '32px',
+        lineHeight: '32px',
+        '&::after': {
+          content: "'：'",
+        },
+      },
+    },
+    content: {
+      flex: '1 1 0',
+      '.ant-form-item, .ant-legacy-form-item': {
+        '&:last-child': {
+          marginRight: '0',
+        },
+      },
+    },
+    standardFormRowLast: {
+      marginBottom: '0',
+      paddingBottom: '0',
+      border: 'none',
+    },
+    standardFormRowBlock: {
+      '.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
+        { display: 'block' },
+    },
+    standardFormRowGrid: {
+      '.ant-form-item, .ant-legacy-form-item, div.ant-form-item-control-wrapper, div.ant-legacy-form-item-control-wrapper':
+        { display: 'block' },
+      '.ant-form-item-label, .ant-legacy-form-item-label': { float: 'left' },
+    },
+  };
+});
+
+export default useStyles;

ListSearchApplications/src/components/StandardFormRow/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import styles from './index.less';
+import useStyles from './index.style';
 
 type StandardFormRowProps = {
   title?: string;
@@ -18,6 +18,7 @@ const StandardFormRow: React.FC<StandardFormRowProps> = ({
   grid,
   ...rest
 }) => {
+  const { styles } = useStyles();
   const cls = classNames(styles.standardFormRow, {
     [styles.standardFormRowBlock]: block,
     [styles.standardFormRowLast]: last,
@@ -31,6 +32,7 @@ const StandardFormRow: React.FC<StandardFormRowProps> = ({
           <span>{title}</span>
         </div>
       )}
+
       <div className={styles.content}>{children}</div>
     </div>
   );

ListSearchApplications/src/components/TagSelect/index.style.ts

@@ -0,0 +1,35 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => {
+  return {
+    tagSelect: {
+      position: 'relative',
+      maxHeight: '32px',
+      marginLeft: '-8px',
+      overflow: 'hidden',
+      lineHeight: '32px',
+      transition: 'all 0.3s',
+      userSelect: 'none',
+      '.ant-tag': {
+        marginRight: '24px',
+        padding: '0 8px',
+        fontSize: token.fontSize,
+      },
+    },
+    trigger: {
+      position: 'absolute',
+      top: '0',
+      right: '0',
+      'span.anticon': { fontSize: '12px' },
+    },
+    expanded: {
+      maxHeight: '200px',
+      transition: 'all 0.3s',
+    },
+    hasExpandTag: {
+      paddingRight: '50px',
+    },
+  };
+});
+
+export default useStyles;

ListSearchApplications/src/components/TagSelect/index.tsx

@@ -4,7 +4,7 @@ import { Tag } from 'antd';
 import classNames from 'classnames';
 import type { FC } from 'react';
 import React from 'react';
-import styles from './index.less';
+import useStyles from './index.style';
 
 const { CheckableTag } = Tag;
 
@@ -48,6 +48,7 @@ export interface TagSelectProps {
 }
 
 const TagSelect: FC<TagSelectProps> & { Option: typeof TagSelectOption } = (props) => {
+  const { styles } = useStyles();
   const { children, hideCheckAll = false, className, style, expandable, actionsText = {} } = props;
 
   const [expand, { toggle }] = useBoolean();
@@ -102,6 +103,7 @@ const TagSelect: FC<TagSelectProps> & { Option: typeof TagSelectOption } = (prop
           {selectAllText}
         </CheckableTag>
       )}
+
       {children &&
         React.Children.map(children, (child: TagSelectOptionElement) => {
           if (isTagSelectOption(child)) {

ListSearchApplications/src/index.tsx

@@ -13,7 +13,7 @@ import StandardFormRow from './components/StandardFormRow';
 import TagSelect from './components/TagSelect';
 import type { ListItemDataType } from './data.d';
 import { queryFakeList } from './service';
-import styles from './style.less';
+import useStyles from './style.style';
 
 const { Option } = Select;
 
@@ -53,20 +53,24 @@ const formItemLayout = {
 const CardInfo: React.FC<{
   activeUser: React.ReactNode;
   newUser: React.ReactNode;
-}> = ({ activeUser, newUser }) => (
-  <div className={styles.cardInfo}>
-    <div>
-      <p>活跃用户</p>
-      <p>{activeUser}</p>
-    </div>
-    <div>
-      <p>新增用户</p>
-      <p>{newUser}</p>
+}> = ({ activeUser, newUser }) => {
+  const { styles } = useStyles();
+  return (
+    <div className={styles.cardInfo}>
+      <div>
+        <p>活跃用户</p>
+        <p>{activeUser}</p>
+      </div>
+      <div>
+        <p>新增用户</p>
+        <p>{newUser}</p>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export const PAGE_NAME_UPPER_CAMEL_CASE: FC<Record<string, any>> = () => {
+  const { styles } = useStyles();
   const { data, loading, run } = useRequest((values: any) => {
     console.log('form data', values);
     return queryFakeList({