X-Financial/web/src/views/HermesEmployeeSettingsPanel.vue

<template>
  <div class="hermes-settings-container">
    <!-- 主控制卡片 -->
    <section class="settings-card hermes-hero-card" :class="{ active: hermesForm.masterEnabled }">
      <div class="card-head">
        <div class="card-title-with-icon">
          <div class="model-icon-box" :class="{ active: hermesForm.masterEnabled }">
            <i class="mdi mdi-robot"></i>
            <span class="status-pulse-dot" :class="{ active: hermesForm.masterEnabled }"></span>
          </div>
          <div>
            <h4>数字员工自动任务主控</h4>
            <p>开启后系统将自动按计划调度后台数字员工执行知识同步、规则待审、风险扫描及数据统计任务。</p>
          </div>
        </div>
        <div class="card-head-actions">
          <span class="status-badge" :class="{ active: hermesForm.masterEnabled }">
            {{ hermesForm.masterEnabled ? '调度服务运行中' : '调度服务已禁用' }}
          </span>
          <button
            class="switch-btn"
            type="button"
            :class="{ active: hermesForm.masterEnabled }"
            aria-label="切换全局自动任务"
            @click="$emit('toggle-master')"
          >
            <i></i>
          </button>
        </div>
      </div>
    </section>

    <!-- 任务网格控制 -->
    <section class="settings-card hermes-tasks-section" :class="{ disabled: !hermesForm.masterEnabled }">
      <div class="card-head">
        <div class="card-title-with-icon">
          <div class="model-icon-box">
            <i class="mdi mdi-clipboard-list-outline"></i>
          </div>
          <div>
            <h4>自动任务项管理</h4>
            <p>配置并调度具体的后台异步任务，在设定的周期与执行时间定时运行。</p>
          </div>
        </div>
        <div class="card-head-actions">
          <span class="section-badge">已启用 {{ activeTasksCount }} / {{ HERMES_SIMPLE_TASKS.length }} 项</span>
        </div>
      </div>

      <ul class="hermes-task-grid">
        <li
          v-for="task in HERMES_SIMPLE_TASKS"
          :key="task.id"
          class="hermes-task-card"
          :class="{ active: isTaskOn(task.id), disabled: !hermesForm.masterEnabled }"
        >
          <div class="task-card-header">
            <div class="task-icon-box" :class="getTaskColorClass(task.id)">
              <i class="mdi" :class="getTaskIcon(task.id)"></i>
            </div>
            <div class="task-meta-info">
              <strong>{{ task.label }}</strong>
              <small>{{ task.hint }}</small>
            </div>
            <button
              class="switch-btn mini"
              type="button"
              :class="{ active: isTaskOn(task.id) }"
              :disabled="!hermesForm.masterEnabled"
              :aria-label="`${isTaskOn(task.id) ? '关闭' : '开启'}${task.label}`"
              @click="$emit('toggle-task', task.id)"
            >
              <i></i>
            </button>
          </div>

          <div class="task-card-footer">
            <div class="frequency-badge" :class="{ active: isTaskOn(task.id) }">
              <i class="mdi mdi-clock-outline"></i>
              <span>{{ task.frequencyLabel }}</span>
            </div>
            <div v-if="isTaskOn(task.id)" class="time-picker-wrapper">
              <input
                :value="taskTime(task.id)"
                type="time"
                :disabled="!hermesForm.masterEnabled"
                aria-label="设置执行时间"
                @input="$emit('update-task-time', { taskId: task.id, time: $event.target.value })"
              />
            </div>
            <div v-else class="time-picker-placeholder">
              <span>未开启</span>
            </div>
          </div>
        </li>
      </ul>
    </section>

    <!-- 额外设置 (任务告警通知) -->
    <section class="settings-card hermes-extra-settings">
      <div class="card-head">
        <div class="card-title-with-icon">
          <div class="model-icon-box">
            <i class="mdi mdi-bell-ring-outline"></i>
          </div>
          <div>
            <h4>任务告警通知</h4>
            <p>配置自动任务运行出现故障、限频或执行失败时的管理员实时提醒通知渠道。</p>
          </div>
        </div>
      </div>

      <div class="switch-group">
        <button
          class="switch-row"
          type="button"
          :class="{ active: hermesForm.notifyOnFailure }"
          aria-label="切换邮件通知"
          @click="$emit('toggle-flag', 'notifyOnFailure')"
        >
          <span class="switch-copy">
            <strong>任务失败时发送邮件通知管理员</strong>
            <small>仅在自动任务执行出现故障或异常时触发告警，保障后台服务的高可用性。</small>
          </span>
          <span class="switch-btn" :class="{ active: hermesForm.notifyOnFailure }"><i></i></span>
        </button>
      </div>
    </section>
  </div>
</template>

<script src="./scripts/HermesEmployeeSettingsPanel.js"></script>

<style scoped src="../assets/styles/views/settings-view-form.css"></style>
<style scoped src="../assets/styles/views/settings-view.css"></style>
<style scoped src="../assets/styles/views/settings-view-hermes.css"></style>