queenshow/src/components/AssetsList.tsx

import { css } from "@linaria/core";
import { List } from "@queenjs/ui";
import { Empty, Pagination } from "ant-design-vue";
import { defineUI } from "queenjs";
import { any, number, string } from "vue-types";

export default defineUI({
  props: {
    columns: number().def(5),
    gap: string().def("15px"),
    item: any().isRequired,
    control: any().isRequired,
  },
  setup(props) {
    return () => {
      const { control, columns, gap } = props;

      return (
        <div class={styles}>
          <List data={control.state.list} columns={columns} gap={gap}>
            {{
              item: (record: any) => props.item?.(record),
              empty: () => <Empty class="py-50px" description="暂无数据" />,
            }}
          </List>
          <div class="text-center my-30px">
            <Pagination
              size="default"
              hideOnSinglePage
              pageSize={control.state.size}
              total={control.state.total}
              onChange={(p) => control.loadPage(p)}
            />
          </div>
        </div>
      );
    };
  },
});

const styles = css`
  /*  */
`;