antd#Card TypeScript Examples

CustomAppLayouts = () => {
    return (
      <div className={appStyles.narrowLayout}>
        <Space direction="vertical" style={{width: "100%"}}>
          <Card title="App layouts" size="small">
              <AppLayout >
                  <Header className={styles.header}>Header</Header>
                  <AppLayout>
                      <Sidebar className={styles.sider}>Sidebar</Sidebar>
                      <Content className={styles.content}>Content</Content>
                  </AppLayout>
                  <Footer className={styles.footer}>Footer</Footer>
              </AppLayout>
          </Card>
        </Space>
      </div>
    )
}

Login: React.FC = () => {
  const { login, loading } = useStore((state) => ({ ...state }));

  return (
    <div className={cls.loginBox}>
      <Card className="_bg" bordered={false}>
        <Form
          onFinish={({ username, password }) => {
            if (username === 'admin' && password === '123456') {
              return login({ username, password });
            }
            message.error('账号或密码错误，请重试！');
          }}>
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}>
            <Input prefix={<UserOutlined />} placeholder="请输入用户名：admin" />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
            <Input prefix={<LockOutlined />} placeholder="请输入密码：123456" />
          </Form.Item>
          <Form.Item>
            <Button
              loading={loading}
              type="primary"
              htmlType="submit"
              className={cls.button}>
              登陆
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}

export function BillingEnrollment(): JSX.Element | null {
    const { plans, plansLoading, billingSubscriptionLoading } = useValues(billingLogic)
    const { subscribe } = useActions(billingLogic)

    const handleBillingSubscribe = (plan: PlanInterface): void => {
        subscribe(plan.key)
    }

    if (!plans.length && !plansLoading) {
        // If there are no plans to which enrollment is available, no point in showing the component
        return null
    }

    return (
        <>
            <div className="space-top" />
            {plansLoading ? (
                <Card>
                    <Skeleton active />
                </Card>
            ) : (
                <Card title="Billing Plan Enrollment">
                    <Row gutter={16} className="space-top" style={{ display: 'flex', justifyContent: 'center' }}>
                        {plans.map((plan: PlanInterface) => (
                            <Col sm={8} key={plan.key} className="text-center">
                                {billingSubscriptionLoading ? (
                                    <Spinner />
                                ) : (
                                    <Plan plan={plan} onSubscribe={handleBillingSubscribe} />
                                )}
                            </Col>
                        ))}
                    </Row>
                </Card>
            )}
        </>
    )
}

export default function ServiceProviderCard({ task }) {
  const { serviceProviders } = task
  const [showAllSps, setShowAllSps] = useState(false)
  return (
    <Card title="Connect with Service Providers" bordered={false}>
      <span>{showAllSps}</span>
      {serviceProviders?.map((serviceProvider, index) => {
        if (index < 3 || showAllSps)
          return (
            <ServiceProvider
              task={task}
              key={serviceProvider.serviceProviderId}
              serviceProvider={serviceProvider}
            />
          )
        return null
      })}
      {serviceProviders?.length > 3 ? (
        <Button block onClick={() => setShowAllSps(!showAllSps)}>
          {!showAllSps
            ? 'See all service providers'
            : 'show less service providers'}
        </Button>
      ) : null}
    </Card>
  )
}

FormPanel = () => {
  return (
    <WorkspacePanel position={{ top: 0, left: 0, bottom: 0, width: 230 }} className="panel">
      <Card title="Group Options" size="small" bordered={false}>
        <CmdForm />
      </Card>
    </WorkspacePanel>
  )
}

export default function hoverPanel(hoverStyle: React.CSSProperties | undefined, nodeData: any) {
 
  const getList = (data: any) => {
    if (!data) {
      return
    }
    const properties = nodeData.properties;
    // @ts-ignore
    return <Card title={nodeType[nodeData.type]} style={{ width: 300 }}>
      <p>{properties.usernameZh}{properties.username ? <span>({properties.username})</span> : ''}</p>
      <p>{properties.time}</p>
      {properties.result ? <p>
        {properties.result === '通过' ? <CheckCircleFilled style={{color: 'green'}} /> : <CloseCircleFilled style={{color: 'red'}}/>}
        <span style={{marginLeft: '10px'}}>{properties.result}</span>
      </p> : ''}
      {properties.desc ? <p>说明: {properties.desc}</p> : ''}
    </Card>
  }

  return <div className="hover-panel" style={{ ...hoverStyle }}>
    {getList(nodeData)}
  </div>
}

protected _render(): void {
    // istanbul ignore else
    if (this.isConnected) {
      ReactDOM.render(
        <BrickWrapper>
          {this.showCard ? (
            <Card bordered={false}>{this.renderAdvanceListContainer()}</Card>
          ) : (
            this.renderAdvanceListContainer()
          )}
        </BrickWrapper>,
        this
      );
    }
  }

RenderMainContent = React.memo(
  ({
    noWrapper,
    customMain,
    route,
    layout,
  }: {
    noWrapper: boolean;
    customMain: Function | JSX.Element | null;
    route: RouteConfig;
    layout: {
      [k: string]: any;
    };
  }) => {
    return (
      <ErrorBoundary>
        <DndProvider backend={HTML5Backend}>
          {noWrapper ? (
            <>
              {typeof customMain === 'function' ? customMain() : customMain}
              {renderRoutes(route.routes)}
            </>
          ) : (
            <Card className={layout && layout.fullHeight ? 'h-full overflow-auto' : ''}>
              {typeof customMain === 'function' ? customMain() : customMain}
              {renderRoutes(route.routes)}
            </Card>
          )}
        </DndProvider>
      </ErrorBoundary>
    );
  },
)

render() {
    const {
      loading = false,
      contentHeight,
      title,
      avatar,
      action,
      total,
      footer,
      children,
      ...rest
    } = this.props;
    return (
      <Card loading={loading} bodyStyle={{ padding: '20px 24px 8px 24px' }} {...rest}>
        {this.renderContent()}
      </Card>
    );
  }

CarCardsGrid = observer(() => {
  const {
    items,
    count,
    executeListQuery,
    listQueryResult: { loading, error },
    handlePaginationChange,
    entityListState
  } = useEntityList<Car>({
    listQuery: SCR_CAR_LIST,
    entityName: ENTITY_NAME,
    routingPath: ROUTING_PATH,
    paginationConfig: defaultGridPaginationConfig,
    onPagination: saveHistory
  });

  if (error != null) {
    console.error(error);
    return <RetryDialog onRetry={executeListQuery} />;
  }

  if (loading || items == null) {
    return <Spinner />;
  }

  return (
    <div className={styles.narrowLayout}>
      <Row gutter={[12, 12]} role="grid">
        {items.map(item => (
          <Col key={item.id ? getStringId(item.id) : undefined} xl={8} sm={24}>
            <Card
              title={item._instanceName}
              style={{ height: "100%" }}
              tabIndex={0}
              className={styles.focusInnerHighlight}
              role="gridcell"
            >
              {getFields(item).map(fieldName => (
                <EntityProperty
                  entityName={Car.NAME}
                  propertyName={fieldName}
                  value={item[fieldName]}
                  key={fieldName}
                />
              ))}
            </Card>
          </Col>
        ))}
      </Row>

      <div style={{ margin: "12px 0 12px 0", float: "right" }}>
        <Paging
          paginationConfig={entityListState.pagination ?? {}}
          onPagingChange={handlePaginationChange}
          total={count}
        />
      </div>
    </div>
  );
})

AbputPage = () => {
  return <Card>About Page</Card>;
}

ProductCard: FC<PropTypes> = props => {
  const { Meta } = Card;
  const { id, title, coverImage, price } = props.product;
  const { onClick } = props;
  const [carted, setCarted] = useState<boolean>(false);

  useEffect(() => {
    if (storageService.checkCart(id)) {
      setCarted(true);
    }
  }, [onClick]);

  const handleIconClick = useCallback(
    (id: ProductModel['id']) => {
      onClick(id);
      if (storageService.checkCart(id)) {
        setCarted(true);
      } else {
        setCarted(false);
      }
    },
    [onClick],
  );

  return (
    <Card
      style={{ width: 320, marginBottom: 10 }}
      cover={
        <div style={{ overflow: 'hidden', width: 320, height: 180 }}>
          <img
            alt={title}
            src={coverImage}
            style={{ width: '100%', height: 'auto' }}
          />
        </div>
      }
      actions={[
        <span>
          <PriceLabel value={price} strong={true} />
        </span>,
        <span
          onClick={() => handleIconClick(id)}
          style={carted ? { color: '#1890ff', fontWeight: 'bold' } : {}}
        >
          <Icon
            type="shopping-cart"
            style={{
              fontSize: '20px',
              marginRight: '4px',
            }}
          />
          {carted ? '빼기' : '담기'}
        </span>,
      ]}
      hoverable={true}
    >
      <Tooltip placement="bottom" title={title}>
        <Meta title={title} />
      </Tooltip>
    </Card>
  );
}

export function BillingAlerts(): JSX.Element | null {
    const { billing } = useValues(billingLogic)
    const { alertToShow, percentage, strokeColor } = useValues(billingLogic)

    if (!alertToShow) {
        return null
    }

    return (
        <>
            <div style={{ marginTop: 32 }} />
            {alertToShow === BillingAlertType.SetupBilling && (
                <Card>
                    <div style={{ display: 'flex' }}>
                        <div style={{ flexGrow: 1, display: 'flex', alignItems: 'center' }}>
                            <WarningOutlined className="text-warning" style={{ paddingRight: 8 }} />
                            <b>Action needed!&nbsp;</b>
                            {billing?.plan?.custom_setup_billing_message ||
                                'Please finish setting up your billing information.'}
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Button type="primary" href={billing?.subscription_url} icon={<ToolFilled />}>
                                Set up now
                            </Button>
                        </div>
                    </div>
                </Card>
            )}
            {alertToShow === BillingAlertType.UsageNearLimit && (
                <Card>
                    <div style={{ display: 'flex' }}>
                        <div style={{ flexGrow: 1, display: 'flex', alignItems: 'center' }}>
                            <WarningOutlined className="text-warning" style={{ paddingRight: 16 }} />
                            <div>
                                <b>Warning!</b> Nearing the monthly limit of events for your organization. You have
                                already used{' '}
                                <b style={{ color: typeof strokeColor === 'string' ? strokeColor : 'inherit' }}>
                                    {percentage && percentage * 100}%
                                </b>{' '}
                                of your event allocation this month. To avoid losing access to your data,{' '}
                                <b>we recommend upgrading</b> your billing plan now.
                            </div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', paddingLeft: 16 }}>
                            <LinkButton type="primary" to="/organization/billing">
                                <ToolFilled /> Manage billing
                            </LinkButton>
                        </div>
                    </div>
                </Card>
            )}
        </>
    )
}

export default function TaskGuideCard({ guide }) {
  const guideLink = (
    <>
      <a
        href={guide?.detailsUrl}
        target="_blank"
        rel="noopener noreferrer"
      >
        <img
          width={16}
          alt="external link"
          src="https://image.flaticon.com/icons/svg/25/25284.svg"
        />
      </a>
    </>
  )
  return (
    <>
      <Card
        title={guide?.title}
        bordered={false}
        style={{ marginBottom: 24 }}
        extra={guideLink}
      >
        <Space direction="vertical">
          <img
            width="100%"
            src={guide?.imageUrl}
            alt={guide?.title || 'Guide title'}
          />
          <div>{guide?.about}</div>
          <a
            href={guide?.detailsUrl as string}
            target="_blank"
            rel="noopener noreferrer"
          >
            Read More
          </a>
        </Space>
      </Card>
    </>
  )
}

ToSketchLayout: FC<FooterProps> = ({ elements, children, buttons }) => {
  const { sketchJSON, generateGroup, generateSymbol } = useSketchJSON();
  const [showJSON, setShowJSON] = useState(false);

  return (
    <div>
      {children}
      <Divider dashed />
      <Row style={{ zIndex: 99999 }}>
        <Col span={24}>
          <Row justify="space-between">
            <Col>
              <Button
                disabled={!sketchJSON}
                onClick={() => {
                  setShowJSON(!showJSON);
                }}
              >
                {showJSON ? '隐藏' : '显示'} JSON
              </Button>
            </Col>
            <Col>
              <Space>
                {buttons?.map((button) => (
                  <Button key={button.name} onClick={button.onClick}>
                    {button.name}
                  </Button>
                ))}
                <Button
                  onClick={() => {
                    generateGroup(elements);
                  }}
                >
                  转换为 Group
                </Button>
                <Button
                  type="primary"
                  onClick={() => {
                    generateSymbol(elements);
                  }}
                >
                  转换为 Symbol
                </Button>
              </Space>
            </Col>
          </Row>
        </Col>
        {showJSON ? (
          <Col span={24}>
            <Card>
              <ReactJson name="Sketch JSON" src={sketchJSON || {}} />
            </Card>
          </Col>
        ) : null}
      </Row>
    </div>
  );
}

render() {
    const { children, className, ...otherProps } = this.props;
    return (
      <Card className={classNames(className, 'antdp-KCardPro')} {...otherProps}>
        {children}
      </Card>
    );
  }

CustomSort: React.FC<CustomSortProps> = (props) => {
  const { splitOrders = [], setSplitOrders } = props;
  const upHandler = (value) => {
    const res = splitOrders.concat();
    res.splice(res.indexOf(value), 1);
    res.unshift(value);
    setSplitOrders(res);
  };
  const downHandler = (value) => {
    const res = splitOrders.concat();
    let index = res.indexOf(value);
    res.splice(res.indexOf(value), 1);
    res.splice((index += 1), 0, value);
    setSplitOrders(res);
  };
  const toTopHandler = (value) => {
    const res = splitOrders.concat();
    let index = res.indexOf(value);
    if (index > 0) {
      res.splice(res.indexOf(value), 1);
      res.splice((index -= 1), 0, value);
      setSplitOrders(res);
    }
  };

  const renderItem = (value) => {
    return (
      <>
        <span className="split-text">{value}</span>
        <span
          className={`${ADVANCED_SORT_PRE_CLS}-split-icon`}
          onClick={() => {
            upHandler(value);
          }}
        >
          <HtmlIcon name="groupAsc" />
        </span>
        <span
          className={`${ADVANCED_SORT_PRE_CLS}-split-icon`}
          onClick={() => {
            downHandler(value);
          }}
        >
          <HtmlIcon name="groupDesc" />
        </span>
        <span
          className={`${ADVANCED_SORT_PRE_CLS}-split-icon`}
          onClick={() => {
            toTopHandler(value);
          }}
        >
          <HtmlIcon name="globalAsc" />
        </span>
      </>
    );
  };

  return (
    <Card className={`${ADVANCED_SORT_PRE_CLS}-card-content`}>
      {splitOrders.map((value) => (
        <li
          key={value}
          className={`${ADVANCED_SORT_PRE_CLS}-split-value`}
          title={value}
        >
          {renderItem(value)}
        </li>
      ))}
    </Card>
  );
}

NodeDescription = (props: { name: string }) => {
  return (
    <Card size="small" title="算法组件介绍" style={{ width: '200px' }} bordered={false}>
      欢迎使用：{props.name}
      这里可以根据服务端返回的数据显示不同的内容
    </Card>
  )
}

export function BrickDoc({ doc }: BrickDocProps): React.ReactElement {
  const { t } = useTranslation(NS_DEVELOPERS);
  const [rotate, setRotate] = useState(180);

  const handleCreateButtonClick = (): void => {
    if (rotate === 180) {
      setRotate(360);
    }
  };

  const empty = (
    <Empty description={<span>Customize Documentation</span>}>
      <Button type="primary" onClick={handleCreateButtonClick}>
        Create Now
        <SmileTwoTone
          className={style.rotate}
          rotate={rotate}
          twoToneColor="#52c41a"
        />
      </Button>
    </Empty>
  );

  return (
    <>
      <Card className={style.brickDocCard}>
        {doc ? (
          <div
            className={style.brickDocContainer}
            // We trust `doc` which is written by developers.
            dangerouslySetInnerHTML={{
              __html: doc,
            }}
          />
        ) : (
          empty
        )}
      </Card>
    </>
  );
}

{ Meta } = Card

render (): React.ReactNode {
    let layout: 'horizontal' | 'vertical' = 'horizontal'
    let labelLineHeight = '14px'
    const contentLineHeight = '14px'
    if (this.props.hasLongValues !== undefined && this.props.hasLongValues) {
      layout = 'vertical'
      labelLineHeight = '20px'
    }
    const items = this.props.attributes.map((item: Attribute, index: number) => {
      const uid = generateUUID()
      return (
        <Descriptions.Item
          key={uid}
          label={item.name}
          labelStyle={{
            lineHeight: labelLineHeight
          }}
          contentStyle={{
            fontWeight: 600,
            whiteSpace: 'pre-line',
            lineHeight: contentLineHeight
          }}
          span={1}
        >
          {item.value}
        </Descriptions.Item>
      )
    })
    let icon = null
    if (this.props.icon !== undefined) {
      icon = <this.props.icon />
    }
    return (
      <Card
        title={this.props.header}
        extra={icon}
        size='small'
        hoverable={this.props.selectable}
        bordered={this.props.header !== undefined}
        actions={this.props.methods}
      >
        <Descriptions
          column={1}
          size='small'
          layout={layout}
          bordered={false}
        >
          {items}
        </Descriptions>
        {this.props.children}
      </Card>
    )
  }

Basic: React.FC<IProps> = (props) => {
  const { selectedCell, flowChart } = props;
  const [data, setData] = useState<IBasicData>(selectedCell.getData());
  const { label, trigger, dependencies, configSchema } = data || {};

  // life
  useEffect(() => {
    setData(selectedCell.getData());
  }, [selectedCell]);
  useEffect(() => {
    const handler = () => setData(selectedCell.getData());
    flowChart.on('settingBar.basicPanel:forceUpdate', handler);
    return () => {
      flowChart.off('settingBar.basicPanel:forceUpdate', handler);
    };
  }, [selectedCell]);

  // events
  const batchUpdate = (newData: { [key: string]: any }): void => {
    selectedCell.setData(newData);
    setData(Object.assign({}, data, newData));
  };
  const commonChange = (key: string, val: string): void => {
    batchUpdate({ [key]: val });
  };
  const onChangeLabel = (val: string): void => {
    commonChange('label', val);
    selectedCell.setAttrs({ label: { text: val } });
  };
  const onChangeConfigSchema = (val: string): void => {
    commonChange('configSchema', val);
  };
  const onChangeTrigger = (val: string): void => {
    commonChange('trigger', val);
  };
  const onChangeDependencies = (val: string): void => {
    commonChange('dependencies', val);
  };

  return (
    <div className={styles.container}>
      <Card title="名称">
        <Input
          name={'label'}
          title={'节点显示名称'}
          value={label}
          onValueChange={onChangeLabel}
        />
        {selectedCell.shape === 'imove-start' && (
          <div className={styles.input}>
            <Input
              name={'trigger'}
              title={'逻辑触发名称'}
              value={trigger}
              onValueChange={onChangeTrigger}
            />
          </div>
        )}
      </Card>
      <Json
        name={'dependencies'}
        title={'依赖'}
        value={dependencies}
        isConfig={false}
        onValueChange={onChangeDependencies}
      />
      <Json
        name={'configSchema'}
        title={'投放配置'}
        selectedCell={selectedCell}
        value={configSchema}
        isConfig={true}
        onValueChange={onChangeConfigSchema}
      />
    </div>
  );
}

index = () => {
    const actionRef = useRef<ActionType>();
    return (
        <PageContainer>
            <Card>
                <ProTable<GithubIssueItem>
                    columns={columns}
                    actionRef={actionRef}
                    request={async (params = {}, sort, filter) => {
                        console.log(sort, filter);
                        return request<{
                            data: GithubIssueItem[];
                        }>('https://proapi.azurewebsites.net/github/issues', {
                            params,
                        });
                    }}
                    editable={{
                        type: 'multiple',
                    }}
                    columnsState={{
                        persistenceKey: 'pro-table-singe-demos',
                        persistenceType: 'localStorage',
                    }}
                    rowKey="id"
                    search={{
                        labelWidth: 'auto',
                    }}
                    form={{
                        // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                        syncToUrl: (values, type) => {
                            if (type === 'get') {
                                return {
                                    ...values,
                                    created_at: [values.startTime, values.endTime],
                                };
                            }
                            return values;
                        },
                    }}
                    pagination={{
                        pageSize: 5,
                    }}
                    dateFormatter="string"
                    headerTitle="高级表格"
                    toolBarRender={() => [
                        <Button key="button" icon={<PlusOutlined />} type="primary">
                            新建
                        </Button>,
                        <Dropdown key="menu" overlay={menu}>
                            <Button>
                                <EllipsisOutlined />
                            </Button>
                        </Dropdown>,
                    ]}
                />
            </Card>
        </PageContainer>
    );
}

TestDemo = ({
   rangePickerValue,
   salesData,
   isActive,
   handleRangePickerChange,
   loading,
   selectDate,
 }: {
  rangePickerValue: RangePickerValue;
  isActive: (key: 'today' | 'week' | 'month' | 'year') => string;
  salesData: ISalesData[];
  loading: boolean;
  handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
  selectDate: (key: 'today' | 'week' | 'month' | 'year') => void;
}) => (
  <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
    <div className={styles.salesCard}>
      <Tabs
        tabBarExtraContent={
          <div className={styles.salesExtraWrap}>
            <div className={styles.salesExtra}>
              <Radio.Group defaultValue="all">
                <Radio.Button value="all">
                  全部设备
                </Radio.Button>
                <Radio.Button value="online">
                  在线
                </Radio.Button>
                <Radio.Button value="stores">
                  离线
                </Radio.Button>
              </Radio.Group>
            </div>
            <RangePicker
              value={rangePickerValue}
              onChange={handleRangePickerChange}
              style={{ width: 256 }}
            />
          </div>
        }
        size="large"
        tabBarStyle={{ marginBottom: 24 }}
      >
        <TabPane
          tab={'设备数量'}
          key="sales"
        >
          <Row>
            <Col xl={16} lg={12} md={12} sm={24} xs={24}>
              <div className={styles.salesBar}>
                <h4 className={styles.rankingTitle}>
                  物联网设备连接排行
                </h4>
                <Bar
                  height={295}
                  title={
                    '连接数量'
                  }
                  data={salesData}
                />
              </div>
            </Col>
          </Row>
        </TabPane>
      </Tabs>
    </div>
  </Card>
)

ReadLayout: React.FC = () => {
  const [current, setCurrent] = useState('app1')

  const handleClick: MenuClickEventHandler = (event) => {
    console.log('click ', event)
    setCurrent(event.key)
  }
  const onSearch = (value: string) => console.log(value)
  const callback = (key: string) => {
    console.log(key)
  }

  const data = [
    {
      icon: <FormOutlined />,
      title: '投稿',
    },
    {
      icon: <QuestionCircleOutlined />,
      title: '帮助',
    },
  ]

  return (
    <Layout>
      <Header>
        <div style={{ display: 'flex' }}>
          <div>
            <Menu
              onClick={handleClick}
              selectedKeys={[current]}
              mode="horizontal"
              style={{ borderBottom: '1px solid #fff' }}
            >
              <Menu.Item key="index" icon={<img width="40px" src={avatar} alt="" />}>
                Shippo
              </Menu.Item>
              <Menu.Item key="app1">导航1</Menu.Item>
              <Menu.Item key="app2">导航2</Menu.Item>
              <Menu.Item key="app3">导航3</Menu.Item>
              <Menu.Item key="app4">导航4</Menu.Item>
            </Menu>
          </div>
          <div style={{ flex: '1 1 0%', backgroundColor: '#fff' }}>
            <Search
              placeholder=""
              allowClear
              onSearch={onSearch}
              style={{ width: '100%', maxWidth: '500px', padding: '12px 10px 0 50px' }}
              size="large"
            />
          </div>
          <div style={{ backgroundColor: '#fff', padding: '0 20px' }}>
            <Space size={30}>
              <Dropdown
                placement="bottomCenter"
                overlay={
                  <Menu>
                    <Menu.Item>个人中心</Menu.Item>
                    <Menu.Item>投稿管理</Menu.Item>
                    <Menu.Divider />
                    <Menu.Item>退出登录</Menu.Item>
                  </Menu>
                }
              >
                <Avatar size={40} icon={<UserOutlined />} />
              </Dropdown>

              <Button type="primary">投稿</Button>
            </Space>
          </div>
        </div>
      </Header>
      <Layout>
        <Sider width="250px" theme="light" style={{ paddingTop: '20px' }}>
          <Affix offsetTop={20} onChange={(affixed) => console.log(affixed)}>
            <Menu
              // onClick={handleClick}
              style={{ width: '250px' }}
              defaultSelectedKeys={['home']}
              mode="inline"
            >
              <Menu.Item key="home" icon={<MailOutlined />}>
                推荐
              </Menu.Item>
              <Menu.Item key="a" icon={<MailOutlined />}>
                动画
              </Menu.Item>
              <Menu.Item key="c" icon={<MailOutlined />}>
                漫画
              </Menu.Item>
              <Menu.Item key="g" icon={<MailOutlined />}>
                游戏
              </Menu.Item>
              <Menu.Item key="n" icon={<MailOutlined />}>
                轻小说
              </Menu.Item>
            </Menu>
          </Affix>
        </Sider>
        <Content>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
          <p style={{ height: '200px', padding: '30px' }}>内容</p>
        </Content>
        <Sider theme="light" width="300px" style={{ paddingTop: '20px' }}>
          <Affix offsetTop={20} onChange={(affixed) => console.log(affixed)}>
            <div style={{ overflow: 'auto', maxHeight: '100vh' }}>
              <Search
                placeholder="input search text"
                allowClear
                onSearch={onSearch}
                style={{ width: '300px' }}
              />
              <Card title="排行榜" bordered={false} style={{ width: '300px' }}>
                <Tabs defaultActiveKey="1" onChange={callback}>
                  <TabPane tab="日榜" key="1">
                    日榜
                  </TabPane>
                  <TabPane tab="周榜" key="2">
                    周榜
                  </TabPane>
                  <TabPane tab="月榜" key="3">
                    月榜
                  </TabPane>
                </Tabs>
              </Card>
              <Card title="更多" bordered={false} style={{ width: '300px' }}>
                <List
                  itemLayout="horizontal"
                  dataSource={data}
                  split={false}
                  renderItem={(item) => (
                    <List.Item>
                      <List.Item.Meta
                        avatar={<Avatar shape="square" icon={item.icon} />}
                        title={<a href="https://ant.design">{item.title}</a>}
                      />
                    </List.Item>
                  )}
                />
              </Card>
            </div>
          </Affix>
        </Sider>
      </Layout>
    </Layout>
  )
}

AssociationM2MEditor = observer(
  (props: EntityEditorProps<AssociationM2MTestEntity>) => {
    const {
      onCommit,
      entityInstance,
      submitBtnCaption = "common.submit",
      disabled: readOnlyMode
    } = props;
    const [form] = useForm();
    const onSubmitFailed = useSubmitFailedCallback();
    const {
      executeLoadQuery,
      loadQueryResult: { loading: queryLoading, error: queryError },
      upsertMutationResult: { loading: upsertLoading },
      serverValidationErrors,
      intl,
      handleSubmit,
      handleCancelBtnClick
    } = useEntityEditor<AssociationM2MTestEntity>({
      loadQuery: LOAD_SCR_ASSOCIATIONM2MTESTENTITY,
      upsertMutation: UPSERT_SCR_ASSOCIATIONM2MTESTENTITY,
      entityName: ENTITY_NAME,
      routingPath: ROUTING_PATH,
      onCommit,
      entityInstance,
      persistEntityCallbacks: useEntityPersistCallbacks(),
      uiKit_to_jmixFront: ant_to_jmixFront,
      useEntityEditorForm: createUseAntdForm(form),
      useEntityEditorFormValidation: createUseAntdFormValidation(form)
    });

    useDefaultEditorHotkeys({ saveEntity: form.submit });

    if (queryLoading) {
      return <Spinner />;
    }

    if (queryError != null) {
      console.error(queryError);
      return <RetryDialog onRetry={executeLoadQuery} />;
    }

    return (
      <Card className={styles.narrowLayout}>
        <Form
          onFinish={handleSubmit}
          onFinishFailed={onSubmitFailed}
          layout="vertical"
          form={form}
          validateMessages={createAntdFormValidationMessages(intl)}
        >
          <Field
            entityName={ENTITY_NAME}
            propertyName="name"
            disabled={readOnlyMode}
            formItemProps={{
              style: { marginBottom: "12px" }
            }}
          />

          <GlobalErrorsAlert serverValidationErrors={serverValidationErrors} />

          <Form.Item style={{ textAlign: "center" }}>
            <Space size={8}>
              <Button htmlType="button" onClick={handleCancelBtnClick}>
                <FormattedMessage
                  id={readOnlyMode ? "common.back" : "common.cancel"}
                />
              </Button>
              {!readOnlyMode && (
                <Button
                  type="primary"
                  htmlType="submit"
                  loading={upsertLoading}
                >
                  <FormattedMessage id={submitBtnCaption} />
                </Button>
              )}
            </Space>
          </Form.Item>
        </Form>
      </Card>
    );
  }
)