work-order-monitor/src/components/LoginForm.vue

<script setup lang="ts">
import { ref } from "vue";
import { useMonitorStore } from "@/stores/monitor";

const store = useMonitorStore();
/** 表单操作加载状态 */
const isLoading = ref(false);

async function handleSaveSettings() {
  isLoading.value = true;
  await store.saveSettings();
  isLoading.value = false;
}

async function handleStartMonitoring() {
  isLoading.value = true;
  await store.startMonitoring();
  isLoading.value = false;
}

async function handleStopMonitoring() {
  isLoading.value = true;
  await store.stopMonitoring();
  isLoading.value = false;
}
</script>

<template>
  <a-form layout="vertical">
    <a-form-item>
      <a-radio-group v-model:value="store.loginMode" :disabled="store.isMonitoring">
        <a-radio-button value="password"> 账号密码登录 </a-radio-button>
        <a-radio-button value="token"> Token 登录 </a-radio-button>
      </a-radio-group>
    </a-form-item>

    <template v-if="store.loginMode === 'password'">
      <a-form-item label="用户名">
        <a-input v-model:value="store.username" placeholder="请输入用户名" :disabled="isLoading" />
      </a-form-item>
      <a-form-item label="密码">
        <a-input-password v-model:value="store.password" placeholder="请输入密码" :disabled="isLoading" />
      </a-form-item>
    </template>

    <template v-else>
      <a-form-item label="ASP.NET_SessionId">
        <a-input
          v-model:value="store.tokenSessionId"
          placeholder="请输入 ASP.NET_SessionId"
          :disabled="isLoading"
          allow-clear
        />
      </a-form-item>
      <a-typography-text type="secondary" style="font-size: 12px; display: block; margin-bottom: 12px">
        从浏览器开发者工具 (F12) → Application → Cookies 中复制 ASP.NET_SessionId 的值
      </a-typography-text>
    </template>

    <a-form-item>
      <a-checkbox v-model:checked="store.rememberPassword">
        记住{{ store.loginMode === "password" ? "密码" : "Token" }}
      </a-checkbox>
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button type="primary" :loading="isLoading" @click="handleSaveSettings()"> 保存设置 </a-button>
        <a-button
          type="primary"
          :loading="isLoading"
          :disabled="store.isMonitoring"
          style="background: #52c41a; border-color: #52c41a"
          @click="handleStartMonitoring()"
        >
          开始监测
        </a-button>
        <a-button danger :disabled="isLoading || !store.isMonitoring" @click="handleStopMonitoring()">
          停止监测
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>