queenshow/src/modules/editor/components/Viewport/Slider/SliderLeft/SourceItem.tsx

import { css, cx } from "@linaria/core";
import { IconMore } from "@queenjs/icons";
import { Divider, Dropdown, Menu, Tag } from "ant-design-vue";
import { EyeOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
import { defineUI } from "queenjs";
import { any, bool, object } from "vue-types";
import { useAuth } from "@queenjs-modules/auth";
import Thumbnail from "@/components/Thumbnail";
import { reactive, defineComponent} from "vue";


const VideoItem = defineComponent({
    props: {
      record: object<any>(),
    },
    emits: ["click"],
    setup(props, { emit }) {
      const state = reactive({
        play: false,
      });
  
      return () => {
        const { record } = props;
        const { play } = state;
  
        return (
          <div
            style={{ aspectRatio: 1.5 }}
            class="overflow-hidden cursor-pointer"
            onMouseenter={() => (state.play = true)}
            onMouseleave={() => (state.play = false)}
            onClick={() => emit("click", record.file.url)}
          >
            {!play ? (
              <Thumbnail
                class="w-1/1 h-1/1"
                size={240}
                objectContain={false}
                src={record.thumbnail}
              />
            ) : (
              <video
                muted
                autoplay
                controls={false}
                src={record.file.url}
                class="w-1/1 h-1/1 object-cover"
              />
            )}
          </div>
        );
      };
    },
  });
  
  const ImageItem = defineComponent({
    props: {
      record: object<any>(),
    },
    emits: ["click"],
    setup(props, { emit }) {
      return () => {
        const { record } = props;
  
        return (
          <Thumbnail
            size={240}
            class="draggable-item"
            style={{ aspectRatio: 1 }}
            onClick={() => emit("click", record.file.url)}
            objectContain={true}
            src={record.file.url}
          />
        );
      };
    },
  });

  
export default defineUI({
  props: {
    record: any(),
    tagable: bool().def(false),
    isVideo: bool().def(false),
  },
  emits: ["edit", "preview", "menu", "click"],
  setup(props, { emit }) {
    const auth = useAuth();
    const state = reactive({
        play: false,
    });


    return () => {
      const { record } = props;

      //@ts-ignore
      const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;

      return (
        <div class={cx(itemStyles, "relative")}>
         {
            props.isVideo ? <VideoItem onClick={()=>emit("click")}  record={props.record} /> : <ImageItem onClick={()=>emit("click")}  record={props.record} />
         }

          {isSys && props.tagable && (
            <Tag
              color={record.published? "green": "#E88B00" }
              // color="rgba(0, 0, 0, 0.4)"
              class="absolute top-0 left-0 z-1 !rounded-none"
            >
              {record.published ? "已发布" : "未发布"}
            </Tag>
          )}

          {props.tagable && (
            <div class="item_footer rounded-b-4px flex items-center justify-between p-4px">
              <div class="flex-1 w-0">
                {/* <div class="text-white text-bold truncate">{record.title}</div> */}
                <div class="flex items-center text-opacity-60 text-white text-12px">
                  {dayjs(record.createTime).format("YYYY.MM.DD")}
                </div>
              </div>
              <Dropdown
                placement="bottom"
                overlay={
                  <Menu class="w-90px">
                    <Menu.Item>
                      <div onClick={() => emit("menu", "delete")}>删除</div>
                    </Menu.Item>

                    {isSys && !record.published && (
                      <Menu.Item>
                        <div onClick={() => emit("menu", "publish")}>
                          发布平台
                        </div>
                      </Menu.Item>
                    )}

                    {isSys && record.published && (
                      <Menu.Item>
                        <div onClick={() => emit("menu", "unpublish")}>
                          取消发布
                        </div>
                      </Menu.Item>
                    )}
                  </Menu>
                }
              >
                <IconMore class="ml-10px text-22px cursor-pointer" />
              </Dropdown>
            </div>
          )}
        </div>
      );
    };
  },
});

const itemStyles = css`
  .item_footer {
    background: #414141;
  }
  .icon_action {
    background-color: rgba(0, 0, 0, 0.8);
    &.orange {
      background-color: rgba(232, 139, 0, 0.8);
    }
  }
`;