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

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

const store = useMonitorStore();
</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="store.isLoading"
        />
      </a-form-item>
      <a-form-item label="密码">
        <a-input-password
          v-model:value="store.password"
          placeholder="请输入密码"
          :disabled="store.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="store.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="store.isLoading" @click="store.saveSettings()">
          保存设置
        </a-button>
        <a-button type="primary" :loading="store.isLoading" :disabled="store.isMonitoring" style="background: #52c41a; border-color: #52c41a" @click="store.startMonitoring()">
          开始监测
        </a-button>
        <a-button danger :disabled="store.isLoading || !store.isMonitoring" @click="store.stopMonitoring()">
          停止监测
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>