Vue3+TypeScript实现中介者模式的详细过程

// src/mediators/RepairMediator.ts
export interface RepairMediator {
  sendRequest(sender: Colleague, request: string): void;
  registerColleague(colleague: Colleague): void;
}

// src/mediators/RepairDispatchCenter.ts
import { RepairMediator } from './RepairMediator';
import { Colleague } from './Colleague';
export class RepairDispatchCenter implements RepairMediator {
  private colleagues: Colleague[] = [];
  registerColleague(colleague: Colleague): void {
    this.colleagues.push(colleague);
    colleague.setMediator(this);
  }
  sendRequest(sender: Colleague, request: string): void {
    this.colleagues.forEach(colleague => {
      if (colleague !== sender) {
        colleague.receiveRequest(sender.getName(), request);
      }
    });
  }
}

// src/mediators/Colleague.ts
import { RepairMediator } from './RepairMediator';
export abstract class Colleague {
  protected mediator: RepairMediator | null = null;
  protected name: string;
  constructor(name: string) {
    this.name = name;
  }
  setMediator(mediator: RepairMediator): void {
    this.mediator = mediator;
  }
  getName(): string {
    return this.name;
  }
  abstract receiveRequest(from: string, request: string): string;
}
export class Customer extends Colleague {
  sendRequest(request: string): string {
    if (this.mediator) {
      this.mediator.sendRequest(this, request);
      return `📢 ${this.name}发送请求：${request}`;
    }
    return '😅 未连接调度中心！';
  }
  receiveRequest(from: string, request: string): string {
    return `📩 ${this.name}收到${from}的回复：${request}`;
  }
}
export class Technician extends Colleague {
  sendRequest(request: string): string {
    if (this.mediator) {
      this.mediator.sendRequest(this, request);
      return `📢 ${this.name}发送请求：${request}`;
    }
    return '😅 未连接调度中心！';
  }
  receiveRequest(from: string, request: string): string {
    return `🛠️ ${this.name}收到${from}的请求：${request}，开始维修！`;
  }
}

// src/components/RepairDispatch.vue
<script setup lang="ts">
import { ref } from 'vue';
import { RepairDispatchCenter } from '../mediators/RepairDispatchCenter';
import { Customer, Technician } from '../mediators/Colleague';
const mediator = new RepairDispatchCenter();
const customer = new Customer('张三');
const technician = new Technician('李技师');
mediator.registerColleague(customer);
mediator.registerColleague(technician);
const request = ref('');
const results = ref<string[]>([]);
const sendRequest = () => {
  if (request.value) {
    results.value.push(customer.sendRequest(request.value));
    results.value.push(technician.receiveRequest(customer.getName(), request.value));
    request.value = '';
  }
};
</script>
<template>
  <div>
    <h2>电脑维修调度中心</h2>
    <div>
      <label>客户请求：</label>
      <input v-model="request" placeholder="输入维修请求" />
    </div>
    <button @click="sendRequest">发送请求</button>
    <pre>{{ results.join('\n') }}</pre>
  </div>
</template>