ForcePilot/web/src/views/AgentSingleView.vue

<template>
  <div class="agent-single-view">
    <!-- Token验证弹窗 -->
    <a-modal
      v-model:visible="tokenModalVisible"
      title="访问验证"
      :closable="false"
      :maskClosable="false"
      :keyboard="false"
      :footer="null"
    >
      <div class="token-verify-form">
        <p>需要输入访问令牌才能使用该智能体</p>
        <a-input-password
          v-model:value="tokenInput"
          placeholder="请输入访问令牌"
          @pressEnter="verifyToken"
        />
        <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
        <div class="token-actions">
          <a-button type="primary" :loading="verifying" @click="verifyToken">验证</a-button>
        </div>
      </div>
    </a-modal>

    <!-- 智能体聊天界面 -->
    <AgentChatComponent v-if="isVerified" :agent-id="agentId" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import AgentChatComponent from '@/components/AgentChatComponent.vue';
import { message } from 'ant-design-vue';

const route = useRoute();
const router = useRouter();
const agentId = computed(() => route.params.agent_id);

// Token验证相关状态
const tokenModalVisible = ref(false);
const tokenInput = ref('');
const isVerified = ref(false);
const verifying = ref(false);
const errorMessage = ref('');

// 验证Token
const verifyToken = async () => {
  if (!tokenInput.value) {
    errorMessage.value = '请输入访问令牌';
    return;
  }

  verifying.value = true;
  errorMessage.value = '';

  try {
    const response = await fetch('/api/chat/verify_token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        agent_id: agentId.value,
        token: tokenInput.value
      })
    });

    if (response.ok) {
      // 验证成功
      isVerified.value = true;
      tokenModalVisible.value = false;

      // 保存验证状态到localStorage
      localStorage.setItem(`agent-token-verified-${agentId.value}`, 'true');
    } else {
      // 验证失败
      const data = await response.json();
      errorMessage.value = data.detail || '令牌验证失败';
    }
  } catch (error) {
    console.error('验证令牌出错:', error);
    errorMessage.value = '验证令牌时发生错误';
  } finally {
    verifying.value = false;
  }
};

// 检查是否已经验证
const checkVerification = () => {
  const verified = localStorage.getItem(`agent-token-verified-${agentId.value}`);
  if (verified === 'true') {
    isVerified.value = true;
  } else {
    tokenModalVisible.value = true;
  }
};

// 组件挂载时检查验证状态
onMounted(() => {
  checkVerification();
});
</script>

<style lang="less" scoped>
.agent-single-view {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.token-verify-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  .error-message {
    color: #ff4d4f;
    font-size: 0.85rem;
  }

  .token-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
  }
}
</style>