<!-- text-input.vue  子组件 应该存在多个 -->
<template>
  <input type="text" />
</template>
<script setup lang="ts" name="TextInput"></script>

// factories.js --- 创建工厂函数
import TextInput from '@/components/text-input.vue'
import SelectInput from '@/components/select-input.vue'

const componentFactory = {
    createComponent(type){
        const components = {
            'A': TextInput,
            'B': SelectInput
            // 可扩展其他组件
        }
        if(!components[type]){
            console.error(`未找到类型为${type}的组件`)
            return null // 或返回默认组件
        }
        return components[type]
    }
}
export default componentFactory

<!-- parent.vue --- 在组件中使用工厂模式 -->
<template>
  <div>
    <!-- 动态组件渲染 -->
    <component :is="currentComponent" v-if="currentComponent"></component>
  </div>
</template>
<script setup lang="ts">
import componentFactory from "./factories.js";

const props = defineProps({
  type: {
    type: String,
    default: "",
  },
});

// 工厂函数动态获取组件
const currentComponent = computed(() => {
  return componentFactory.createComponent(props.type);
});
</script>

// menu-factory.js

// 定义基础导航菜单类
class BaseNavMenu {
  constructor() {
    this.lists = [];
  }
  render() {
    return this.lists;
  }
}

// 定义普通用户导航菜单类
class NormalUserNavMenu extends BaseNavMenu {
  constructor() {
    super();
    this.lists = [
      {
        name: "首页",
        path: "/",
      },
      {
        name: "关于我们",
        path: "/about",
      },
      {
        name: "联系我们",
        path: "/contact",
      },
    ];
  }
}

// 定义管理员用户导航菜单类
class AdminUserNavMenu extends BaseNavMenu {
  constructor() {
    super();
    this.lists = [
      {
        name: "首页",
        path: "/",
      },
      {
        name: "用户管理",
        path: "/users",
      },
      {
        name: "文章管理",
        path: "/articles",
      },
      {
        name: "关于我们",
      },
    ];
  }
}

// 定义导航菜单工厂函数
function NavMenuFactory(role){
    switch (role) {
        case 1:
            return new NormalUserNavMenu();
        case 0:
            return new AdminUserNavMenu();
        default:
            throw new Error('Invalid role');
    }
}

<!-- menu.vue -->
<template>
  <div class="menu-container">
    <div
      v-for="item in menuList"
      :key="item.name"
      @click.stop="toPage(item.path)"
    >
      {{ item.name }}
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import menuFactory from "./menu-factory.js";

const props = defineProps({
  userLevel: {
    type: Number,
    required: true,
  },
});

const menuList = ref([]);

menuList.value = menuFactory(props.userLevel).render();
</script>

// factories.js

import EmptyComponent from "./empty-component.vue";
import NormalComponent from "./normal-component.vue";
import PromotionComponent from "./promotion-component.vue";

class Product {
  showComponents() {
    console.log("该方法必须被重写");
    return EmptyComponent;
  }
}
// 产品子类
class NormalProduct extends Product {
  showComponents() {
    return NormalComponent;
  }
}
class promotionProduct extends Product {
  showComponents() {
    return PromotionComponent;
  }
}

class ProductFactory {
  createProduct() {
    throw new Error("抽象类不能实例化，该方法必须重写");
  }
}
class NormalProductFactory extends ProductFactory {
  createProduct() {
    return new NormalProduct();
  }
}
class PromotionProductFactory extends ProductFactory {
  createProduct() {
    return new promotionProduct();
  }
}

export { NormalProductFactory, PromotionProductFactory };

<!-- detail.vue -->
<template>
  <div class="detail-container">
    <component :is="currentComponents"></component>
  </div>
</template>
<script lang="ts" setup>
import { NormalProductFactory, PromotionProductFactory } from "./factories.js";
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
    required: true,
  },
});
const currentComponents = computed(() => {
  let _facotry;
　// 这里可以用简单工厂模式的思想，写个方法
  if (props.detail.productType === "promotion") {
    _facotry = new PromotionProductFactory();
  } else {
    _facotry = new NormalProductFactory();
  }
  const _computer = _facotry.createComputer();
  return _computer.showComponents();
});
</script>

// ui-theme-factory.js
// 产品族
class Button {
  render() {
    throw new Error("该方法必须被重写!");
  }
}
class LightButton extends Button {
  render() {
    console.log("LightButton");
  }
}
class DarkButton extends Button {
  render() {
    console.log("DarkButton");
  }
}

// 产品族
class Input {
    render() {
        throw new Error("该方法必须被重写!");
    }
}
class LightInput extends Input {
    render() {
        console.log("LightInput");
    }
}
class DarkInput extends Input {
    render() {
        console.log("DarkInput");
    }
}

class ThemeFactory {
    createButton() {
        throw new Error("该方法必须被重写!");
    }
    createInput() {
        throw new Error("该方法必须被重写!");
    }
}
class LightThemeFactory extends ThemeFactory {
    createButton() {
        return new LightButton();
    }
    createInput() {
        return new LightInput();
    }
}
class DarkThemeFactory extends ThemeFactory {
    createButton() {
        return new DarkButton();
    }
    createInput() {
        return new DarkInput();
    }
}

const lightFactory = new LightThemeFactory();
const lightButton = lightFactory.createButton();
const lightInput = lightFactory.createInput();
lightButton.render(); // LightButton
lightInput.render(); // LightInput