queenshow/src/pages/website/Material2/components/MaterialItem.tsx

import { css, cx } from "@linaria/core";
import { IconDelete } from "@queenjs/icons";
import { Image, View } from "@queenjs/ui";
import { Checkbox } from "ant-design-vue";
import { defineUI } from "queenjs";
import { any, bool, string } from "vue-types";

export default defineUI({
  props: {
    active: bool().def(false),
    record: any(),
    use: string<"show" | "select" | "task">(),
  },
  emits: ["delete", "select", "download", "use"],
  setup(props, { emit }) {
    return () => {
      const { active, record, use } = props;
      // console.error("record: ", record);

      return (
        <div class={cx(itemStyles, "relative", active && "active")}>
          <View ratio={1.4} class="overflow-hidden">
            {record.fileType == "video" ? (
              <video src={record.file?.url} class="h-1/1 w-1/1" />
            ) : (
              <Image
                class="h-1/1 w-1/1"
                src={
                  record?.thumbnail || record?.thumbnailUrl || record.file?.url
                }
              />
            )}
            {active && (
              <Checkbox
                checked
                class="!-mt-0.2em absolute top-0 left-0 text-20px text-red-200 z-3"
              />
            )}
            {use == "task" && (
              <div class="waiting absolute inset-0 z-2 flex items-center justify-center text-white">
                渲染中…
              </div>
            )}
            {use !== "task" && (
              <div
                class="absolute inset-0 flex items-center justify-center z-2 opacity-0 hover:opacity-100 transition-all text-white"
                onClick={() => emit("select")}
              >
                {use == "show" && (
                  <IconDelete
                    class="icon_del absolute right-5px top-5px p-3px rounded-2px text-14px cursor-pointer"
                    onClick={() => emit("delete")}
                  />
                )}
                {use == "show" && (
                  <div
                    class="btn_circle rounded-1/2 text-center w-56px leading-56px cursor-pointer"
                    onClick={() => emit("download")}
                  >
                    下载
                  </div>
                )}
                {use == "select" && (
                  <div
                    class="btn_circle  rounded-1/2 text-center w-56px leading-56px cursor-pointer"
                    onClick={(e) => {
                      e.stopPropagation();
                      emit("use");
                    }}
                  >
                    使用
                  </div>
                )}
              </div>
            )}
          </View>
          {record.name && (
            <div class="py-8px px-10px" style={{ backgroundColor: "#262626" }}>
              {record.name}
            </div>
          )}
        </div>
      );
    };
  },
});

const itemStyles = css`
  border: 1px solid transparent;
  &.active {
    border-color: @inf-primary-color;
  }

  .btn_circle {
    background-color: rgba(0, 0, 0, 0.7);
    &:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
    &:not(:first-child) {
      margin-left: 10px;
    }
  }
  .icon_del {
    background-color: rgba(0, 0, 0, 0.5);
    &:hover {
      background-color: rgba(0, 0, 0, 0.6);
    }
  }
  .waiting {
    background-color: rgba(0, 0, 0, 0.3);
  }
`;