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

import Thumbnail from "@/components/Thumbnail";
import { css, cx } from "@linaria/core";
import { IconDelete } from "@queenjs/icons";
import { View } from "@queenjs/ui";
import { defineUI } from "queenjs";
import { any, string } from "vue-types";

const renderStatus = {
  succ: "",
  error: "渲染失败",
  default: "渲染中…",
};

export default defineUI({
  props: {
    record: any(),
    use: string<"show" | "select" | "task">(),
  },
  emits: ["delete", "download", "use", "preview"],
  setup(props, { emit }) {
    return () => {
      const { record, use } = props;

      const thumbnailUrl =
        record?.thumbnail || record?.thumbnailUrl || record.file?.url;

      return (
        <div class={cx(itemStyles, "relative")}>
          <View ratio={1.4} class="overflow-hidden card rounded-2px">
            <Thumbnail
              src={thumbnailUrl}
              class="h-1/1 w-1/1"
              objectContain={record.fileType == "image" ? true : false}
            />
            {use == "task" && record.status !== "succ" && (
              <div class="waiting absolute inset-0 z-2 flex items-center justify-center text-white">
                {(renderStatus as any)[record.status || "default"]}
              </div>
            )}
            {use !== "task" && (
              <div class="absolute inset-0 flex items-center justify-center z-2 opacity-0 hover:opacity-100 transition-all text-white">
                {use == "show" && (
                  <IconDelete
                    class="icon_del absolute right-5px top-5px p-3px rounded-2px text-14px cursor-pointer"
                    onClick={() => emit("delete")}
                  />
                )}
                <div
                  class="rounded-1/2 text-center w-56px leading-56px cursor-pointer orange"
                  onClick={() => emit("preview")}
                >
                  预览
                </div>
                {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`
  .card {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .orange {
    background-color: rgba(232, 139, 0, 0.5);
    &:hover {
      background-color: rgba(232, 139, 0, 0.7);
    }
  }
  .btn_circle {
    background-color: rgba(0, 0, 0, 0.7);
    &:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
    &:not(:nth-of-type(1)) {
      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);
  }
`;