queenshow/src/pages/website/EditMaterial/components/ComponentPanel.tsx

import { useResource } from "@/modules/resource";
import { Image, List } from "@queenjs/ui";
import { Button } from "ant-design-vue";
import { defineComponent } from "vue";
import { any } from "vue-types";

export default defineComponent({
  setup() {
    const resource = useResource();

    return () => {
      const list = resource.store.sourceDetail.webEditor?.matSlots || [];
      return (
        <div class="w-300px flex flex-col">
          <div class="p-15px text-16px text-white border-dark-800 border-0 border-b-1 border-solid">
            组件列表
          </div>
          <List data={list} gap="10px" class="scrollbar flex-1 py-15px px-15px">
            {{
              item: (record: any) => <CompItem record={record} />,
              loadmore: () => (
                <div class="text-center py-20px text-12px opacity-80">
                  没有更多了
                </div>
              ),
            }}
          </List>
        </div>
      );
    };
  },
});

const CompItem = defineComponent({
  props: {
    record: any().isRequired,
  },
  setup(props) {
    return () => {
      const { record } = props;
      return (
        <div
          class="flex items-center py-6px px-12px rounded-4px"
          style={{ backgroundColor: "#303030" }}
        >
          <Image src={record.thumbnail} class="w-48px rounded-4px" />
          <div class="ml-10px flex-1 mr-5px w-0">{record.name || "未命名"}</div>
          <Button type="primary" ghost size="small">
            替换
          </Button>
        </div>
      );
    };
  },
});