xihuaDesign/src/views/admin/detail/index.tsx

import { css } from "@linaria/core";
import { Card } from "ant-design-vue";
import { defineComponent } from "vue";
import Editor from "../components/Editor";
import { useArticle, useCategory } from "@/modules/admin";
import { useRoute } from "vue-router";
import { CategoryItem } from "@/typings/asset";
import DetailEditor from "./components/DetailEditor";
import ListEditor from "./components/ListEditor";
import DownloadEditor from "./components/DownloadEditor";

export default defineComponent({
  setup() {
    const route = useRoute();

    const categoryStore = useCategory();

    return () => {
      const id = route.params.id;
      const currCategory = categoryStore.listController.state.list.find(
        (e: CategoryItem) => {
          return e._id == id;
        }
      );
      return (
        <Card class={Page}>
          {currCategory?.type == "detail" && (
            <DetailEditor key={currCategory._id} data={currCategory} />
          )}
          {currCategory?.type == "list" && (
            <ListEditor key={currCategory._id} data={currCategory} />
          )}
          {currCategory?.type == "download" && (
            <DownloadEditor key={currCategory._id} data={currCategory} />
          )}
        </Card>
      );
    };
  },
});
const Page = css`
  height: 100%;
  .ant-card-body {
    height: 100%;
  }
`;