queenshow/src/modules/resource/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 { defineComponent } from "vue";
import { any, bool, string } from "vue-types";

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

      return (
        <div class={cx(itemStyles, "relative", active && "active")}>
          {active && (
            <Checkbox
              checked
              class="!-mt-0.2em absolute top-0 left-0 text-20px text-red-200 z-3"
            />
          )}
          {use == "show" && (
            <div class="waiting absolute inset-0 z-2 flex items-center justify-center text-white hidden">
              生成中…
            </div>
          )}
          <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("select");
                }}
              >
                使用
              </div>
            )}
          </div>
          <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
                }
              />
            )}
          </View>
          {/* <div class="py-8px px-10px bg-dark-900">{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.2);
  }
`;