// 插件接口定義
interface Plugin {
  name: string;
  install: (app: Application, config?: any) => (() => void) | void;
}

// 應(yīng)用實(shí)例類型定義
interface Application {
  // ... 其他屬性和方法
  use: (plugin: Plugin, config?: any) => void;
  uninstall: (pluginName: string) => void;
}

// 創(chuàng)建應(yīng)用實(shí)例
const app: Application = {
  plugins: [], // 存儲(chǔ)已安裝的插件名稱
  installedPlugins: {}, // 存儲(chǔ)已安裝的插件實(shí)例及其卸載函數(shù)

  // 注冊(cè)、配置并安裝插件的方法
  use(plugin: Plugin, config?: any) {
    // 檢查插件是否已注冊(cè)
    if (this.plugins.includes(plugin.name)) {
      console.warn(`Plugin ${plugin.name} is already registered.`);
      return;
    }

    // 執(zhí)行插件的安裝方法，并傳入配置對(duì)象
    const uninstall = plugin.install(this, config);
    if (typeof uninstall !== 'function') {
      console.warn(`Plugin ${plugin.name} did not provide an uninstall function.`);
    }

    // 將插件添加到已安裝插件列表中
    this.plugins.push(plugin.name);
    this.installedPlugins[plugin.name] = { uninstall };

    // 輸出安裝信息
    console.log(`${plugin.name} plugin installed and ready to use.`);
  },

  // 卸載插件的方法
  uninstall(pluginName: string) {
    // 檢查插件是否已安裝
    if (!this.plugins.includes(pluginName)) {
      console.warn(`Plugin ${pluginName} is not installed.`);
      return;
    }

    // 獲取插件的卸載函數(shù)并執(zhí)行
    const uninstall = this.installedPlugins[pluginName].uninstall;
    if (typeof uninstall === 'function') {
      uninstall();
    }

    // 從已安裝插件列表中移除插件
    const pluginIndex = this.plugins.indexOf(pluginName);
    this.plugins.splice(pluginIndex, 1);
    delete this.installedPlugins[pluginName];

    // 輸出卸載信息
    console.log(`${pluginName} plugin uninstalled.`);
  }
};

// 自定義插件示例
const myPlugin: Plugin = {
  name: 'my-plugin',
  install(app, config) {
    // 使用配置對(duì)象進(jìn)行初始化
    const defaultConfig = { color: 'blue' };
    const finalConfig = Object.assign(defaultConfig, config);

    // 插件安裝邏輯
    // 例如：添加一個(gè)新的方法到應(yīng)用實(shí)例中，并使用配置對(duì)象的屬性
    app.myNewMethod = function() {
      console.log(`This is a new method added by ${this.name} with color ${finalConfig.color}.`);
    }.bind({ name: 'my-plugin' });

    // 返回一個(gè)卸載函數(shù)，用于清理安裝時(shí)添加的內(nèi)容
    return function() {
      // 卸載邏輯
      delete app.myNewMethod;
      console.log(`${this.name} has been uninstalled and cleaned up.`);
    }.bind({ name: 'my-plugin' });
  }
};

// 注冊(cè)、配置并安裝插件
app.use(myPlugin, { color: 'red' }); // 配置對(duì)象的color屬性覆蓋默認(rèn)配置

// 現(xiàn)在可以調(diào)用由插件添加的新方法了
app.myNewMethod(); // 輸出: "This is a new method added by my-plugin with color red."

// 卸載插件
app.uninstall('my-plugin'); // 輸出: "my-plugin has been uninstalled and cleaned up."

// 嘗試調(diào)用已卸載插件的方法將會(huì)失敗
// TypeError: app.myNewMethod is not a function
// app.myNewMethod(); // 注意：此行代碼會(huì)導(dǎo)致錯(cuò)誤，因?yàn)閙yNewMethod已被刪除

// vue-plugin-system.js
const VuePluginSystem = {
  install(Vue, options) {
    // 插件安裝邏輯
  }
};

export default VuePluginSystem;

// vue-plugin-system.js
const VuePluginSystem = {
  installedPlugins: [],

  install(Vue, options = {}) {
    // 添加一個(gè)用于注冊(cè)插件的方法到Vue原型上
    Vue.prototype.$registerPlugin = function(plugin, config) {
      if (this.installedPlugins.includes(plugin.name)) {
        console.warn(`Plugin ${plugin.name} is already registered.`);
        return;
      }

      // 執(zhí)行插件的安裝邏輯
      const uninstall = plugin.install(this, config);

      // 添加到已安裝插件列表中
      this.installedPlugins.push({ name: plugin.name, uninstall });

      console.log(`${plugin.name} plugin installed and ready to use in Vue.`);
    };

    // 添加一個(gè)用于卸載插件的方法到Vue原型上
    Vue.prototype.$unregisterPlugin = function(pluginName) {
      const plugin = this.installedPlugins.find(p => p.name === pluginName);
      if (!plugin) {
        console.warn(`Plugin ${pluginName} is not installed.`);
        return;
      }

      // 執(zhí)行卸載邏輯
      if (typeof plugin.uninstall === 'function') {
        plugin.uninstall();
      }

      // 從已安裝插件列表中移除
      const index = this.installedPlugins.findIndex(p => p.name === pluginName);
      this.installedPlugins.splice(index, 1);

      console.log(`${pluginName} plugin uninstalled from Vue.`);
    };

    // 如果有默認(rèn)插件或配置，可以在這里進(jìn)行注冊(cè)和安裝
  }
};

export default VuePluginSystem;

// main.js
import Vue from 'vue';
import VuePluginSystem from './vue-plugin-system';
import MyVuePlugin from './my-vue-plugin'; // 假設(shè)我們有一個(gè)Vue插件

// 使用Vue插件系統(tǒng)
Vue.use(VuePluginSystem);

// 注冊(cè)并配置Vue插件
new Vue({
  created() {
    this.$registerPlugin(MyVuePlugin, { someConfig: 'value' });
  },
  beforeDestroy() {
    this.$unregisterPlugin('my-vue-plugin'); // 假設(shè)MyVuePlugin.name是'my-vue-plugin'
  },
  // ...
}).$mount('#app');

// my-vue-plugin.js
const MyVuePlugin = {
  name: 'my-vue-plugin',
  install(vueInstance, config) {
    // 插件安裝邏輯，可以添加全局混入、指令、原型方法等
  }
};

export default MyVuePlugin;