queenshow/src/pages/website/Material2/UI.tsx

import { css, cx } from "@linaria/core";
import { Button } from "ant-design-vue";
import { defineComponent, onMounted } from "vue";
import { any } from "vue-types";
import MaterialItem from "@/modules/resource/components/MaterialItem";
import { SourceController } from "./SourceController";
import AssetsList from "@/components/AssetsList";

const TabNames = {
    "video":"视频",
    "image": "图片",
    "task": "渲染任务"
}
const BtnNames = {
    "video":"生成视频",
    "image": "生成图片",
    "upload": "上传素材"
}


export default defineComponent({
    props: {
        Controller: any<SourceController>().isRequired
    },
    setup(props) {
        onMounted(() =>{
           const ctrl = props.Controller.getCurrControl()
           ctrl.loadPage(1);
        });

    return () => {
      const state = props.Controller.state;
      const control = props.Controller.getCurrControl()

      return (
        <div class={rootStyles}>
          <h3 class="text-22px">我的素材</h3>
          <div class="flex items-center justify-between mt-20px">
            <div class="filter space-x-60px">
              {state.tabs.map((d) => (
                <span
                  key={d}
                  onClick={() => props.Controller.switchTab(d)}
                  class={cx(
                        state.currTab == d && "active",
                       "cursor-pointer btn_tab"
                    )}
                >
                  {TabNames[d as "video"]}
                </span>
              ))}
            </div>
            <div>
              {
                state.btns.map((name, index)=>
                    <Button
                        ghost
                        key={name}
                        type="primary"
                        class={"primary" + (index > 0 ? " ml-25px" : "")}
                        onClick={()=>props.Controller.onBtnClick(name)}
                  >
                     {BtnNames[name as "video"]}
                  </Button>
                )
              }
            </div>
          </div>
          <AssetsList
            columns={6}
            class="mt-30px"
            control={control}
            item={(record: any) => (
              <MaterialItem
                record={record}
                use={ state.currTab == "task" ? "task" : "show"}
                onDelete={() => props.Controller.onItemClick("delete", record)}
                onDownload={() =>props.Controller.onItemClick("download", record)}
              /> 
            )}
          />
        </div>
      );
    };
  },
});

const rootStyles = css`
  .btn_tab {
    padding: 3px 5px;
    &:hover,
    &.active {
      color: @inf-primary-color;
    }
  }
`;