调整Vue前端以适配Azure VM按需启停的Python后端

看起来你已经搞定了Python后端的逻辑，现在只需要把前端从「定时调度」模式切换成「按需启停+8小时自动关机」的交互就可以了。原来的SetSchedule.vue是为定时任务设计的，我们需要把它改得更简洁，聚焦在直接的VM启停操作上，下面是具体的修改步骤：

一、彻底替换前端UI：从调度表单到极简启停按钮 #

首先把原来的时间选择、星期勾选这些调度相关的元素全部移除，换成更贴合新需求的交互——核心就是一个「Turn on」按钮，再加上VM状态和自动关机提示。

修改<template>部分 #

<template>
  <div v-if="vmData">
    <h1 class="title">{{ vmData.name }}</h1>
    <hr />

    <!-- 操作加载进度条 -->
    <progress
      v-if="formDisabled"
      class="progress is-small is-primary"
      max="100"
    >
      处理中...
    </progress>

    <!-- VM状态提示栏 -->
    <div class="notification" :class="vmData.isRunning ? 'is-success' : 'is-light'">
      <p>当前状态：{{ vmData.isRunning ? '已运行' : '已停止' }}</p>
      <p v-if="vmData.autoShutdownTime" class="mt-2">
        <i class="fa-solid fa-clock"></i>&nbsp;预计自动关机时间：{{ vmData.autoShutdownTime }}
      </p>
    </div>

    <!-- 核心操作按钮组 -->
    <div class="field is-grouped is-grouped-right mt-4">
      <div class="control">
        <!-- 未运行时显示「Turn on」按钮 -->
        <button
          v-if="!vmData.isRunning"
          @click="startVmWithAutoShutdown()"
          class="button is-success"
          :disabled="formDisabled"
        >
          <i class="fa-solid fa-play"></i>&nbsp;Turn on (8小时后自动关机)
        </button>
        <!-- 运行中时显示「立即关机」按钮 -->
        <button
          v-else
          @click="stopVmImmediately()"
          class="button is-danger"
          :disabled="formDisabled"
        >
          <i class="fa-solid fa-stop"></i>&nbsp;立即关机
        </button>
      </div>
    </div>
  </div>
</template>

二、更新脚本逻辑：适配新的后端API #

原来的脚本是处理调度数据的，现在要改成和「启停+自动关机」对应的逻辑，包括状态判断、API调用、结果同步这些部分。

修改<script>部分 #

<script>
export default {
  props: ["vm"],
  emits: ["applied"],
  watch: {
    // 监听VM数据变化，实时同步状态
    vm: function (newVal) {
      this.vmData = {
        ...JSON.parse(JSON.stringify(newVal)),
        isRunning: this.getVmRunningStatus(newVal)
      };
    }
  },
  mounted() {
    // 初始化VM数据及运行状态
    this.vmData = JSON.parse(JSON.stringify(this.vm));
    this.vmData.isRunning = this.getVmRunningStatus(this.vm);
  },
  methods: {
    // 辅助函数：根据后端返回的VM数据判断运行状态
    // 这里需要和你的后端返回字段匹配，比如后端返回powerState字段
    getVmRunningStatus(vm) {
      return vm.powerState === "Running";
    },
    // 启动VM并触发8小时自动关机
    startVmWithAutoShutdown() {
      this.formDisabled = true;
      const headers = new Headers({
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      });

      // 调用后端的启停API（需要和你后端的路由对应）
      fetch(`/api/vm/start-auto-shutdown`, {
        method: "POST",
        headers: headers,
        body: JSON.stringify({
          vmId: this.vmData.id,
          autoShutdownHours: 8
        }),
      })
      .then(res => res.ok ? res.json() : Promise.reject("启动请求失败"))
      .then(data => {
        // 同步后端返回的状态和关机时间
        this.vmData.isRunning = true;
        this.vmData.autoShutdownTime = data.autoShutdownTime;
        this.$emit("applied");
      })
      .catch(err => {
        alert(`操作失败：${err}`);
      })
      .finally(() => {
        this.formDisabled = false;
      });
    },
    // 立即关闭VM
    stopVmImmediately() {
      this.formDisabled = true;
      const headers = new Headers({
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      });

      fetch(`/api/vm/stop`, {
        method: "POST",
        headers: headers,
        body: JSON.stringify({ vmId: this.vmData.id }),
      })
      .then(res => res.ok ? res.json() : Promise.reject("关机请求失败"))
      .then(() => {
        this.vmData.isRunning = false;
        this.vmData.autoShutdownTime = null;
        this.$emit("applied");
      })
      .catch(err => {
        alert(`操作失败：${err}`);
      })
      .finally(() => {
        this.formDisabled = false;
      });
    }
  },
  data() {
    return {
      formDisabled: false,
      vmData: null
    };
  },
};
</script>

三、和后端的配合要点 #

1. API路由对齐：确保前端调用的/api/vm/start-auto-shutdown、/api/vm/stop和你后端的路由一致，后端需要接收VM ID，返回运行状态和自动关机时间。
2. 状态字段同步：后端要把VM的实时运行状态（比如powerState）返回给前端，这样前端才能正确显示按钮和状态提示。
3. 自动关机逻辑：后端启动VM后，要通过Azure的自动关机功能或者定时任务触发8小时后的关机操作，并把预计关机时间返回给前端。

四、可选优化建议 #

• 实时状态刷新：可以加个定时器，每30秒调用一次API刷新VM状态，避免前端状态和实际VM状态脱节。
• 倒计时显示：把预计关机时间转换成倒计时（比如「剩余7小时23分钟」），用户体验会更直观。
• 友好错误提示：把alert换成和页面风格统一的notification组件，视觉上更协调。

备注：内容来源于stack exchange，提问作者Michael Shepard