queenshow/src/pages/website/MyCollection/components/CollectionItem.tsx

import { css, cx } from "@linaria/core";
import Select from "@queenjs-modules/queditor/components/FormUI/Items/Select";
import { IconMore } from "@queenjs/icons";
import { Image, View } from "@queenjs/ui";
import { Dropdown, Menu } from "ant-design-vue";
import dayjs from "dayjs";
import { defineUI } from "queenjs";
import { any } from "vue-types";

export default defineUI({
  props: {
    record: any(),
  },
  emits: ["edit", "preview", "menu"],
  setup(props, { emit }) {
    return () => {
      const { record } = props;
      const options = record?.statues?.map((e: string) => {
        return { label: e, value: e };
      });
      return (
        <div class={cx(itemStyles, "relative")}>
          <View ratio={1.4} class=" relative">
            <Image class="h-1/1 w-1/1  bg-[#ebebeb]" src={record?.cover} />
            <div class="absolute inset-0 flex items-center justify-center  transition-opacity">
              <div
                class="text-white icon_action w-60px leading-60px  cursor-pointer rounded-1/2 text-center transition-opacity hover:opacity-90 active:opacity-80"
                onClick={() => emit("preview", record)}
              >
                查看
              </div>
              {record.statues && record.statues.length > 0 && (
                <div class={"select_box w-100px"}>
                  <Select
                    class={"w-full"}
                    value={record.status}
                    options={options}
                    onChange={(v) => {
                      record.status = v;
                      emit("edit", record);
                    }}
                  ></Select>
                </div>
              )}
            </div>
          </View>
          <div class="item_footer rounded-b-4px flex items-center justify-between p-15px">
            <div class="w-0 flex-1">
              <div class="text-white text-bold truncate">{record.title}</div>
              <div class="flex items-center text-opacity-60 text-white text-12px mt-5px">
                {dayjs(record.updateTime).format("YYYY.MM.DD")}
              </div>
            </div>
            <Dropdown
              placement="bottom"
              overlay={
                <Menu class="w-90px">
                  <Menu.Item>
                    <div onClick={() => emit("menu", "update")}>编辑</div>
                  </Menu.Item>
                  <Menu.Item>
                    <div onClick={() => emit("menu", "delete")}>删除</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);
  }
  .select_box {
    position: absolute;
    left: 10px;
    top: 10px;
    .ant-select {
      font-size: 12px;
      .ant-select-selector {
        height: 24px;
        background-color: @inf-component-bg;
        .ant-select-selection-item {
          line-height: 22px;
        }
      }
    }
  }
`;