agent-management/frontend/src/components/agent-thinking/AskforPanel.vue

<script setup>
/**
 * v1.1：区域 ⑤ —— Askfor 用户确认（内嵌式）
 * 全局唯一（同 run 同时只有一个 pending），嵌在 AgentThinkingPanel 内。
 *
 * 行为：
 * - 展示 question + choices 列表（按钮形式，宽度一致）
 * - 自定义输入行与选项按钮外观/高度一致，下方独立一行
 * - 用户点击选项 → 直接提交该选项值
 * - 用户在输入框输入并提交 → 提交自定义文本
 */
import { ref, computed } from 'vue'
import { NInput } from 'naive-ui'

const props = defineProps({
  pending: { type: Object, default: null }, // {clarifyId, question, choices}
})
const emit = defineEmits(['submit'])

const customText = ref('')

const options = computed(() => {
  return Array.isArray(props.pending?.choices) ? [...props.pending.choices] : []
})

function submitChoice(c) {
  emit('submit', c)
}

function submitCustom() {
  const text = customText.value.trim()
  if (!text) return
  emit('submit', text)
  customText.value = ''
}
</script>

<template>
  <div v-if="pending" class="askfor-inline">
    <div class="header">
      <span class="title">需要您的确认</span>
    </div>
    <div class="question">{{ pending.question }}</div>

    <!-- 选项按钮：始终显示，宽度一致 -->
    <div v-if="options.length" class="choices">
      <button
        v-for="(c, i) in options"
        :key="i"
        class="choice-btn"
        @click="submitChoice(c)"
      >
        {{ c }}
      </button>
    </div>

    <!-- 自定义输入行：与选项按钮高度/外观一致 -->
    <div class="custom-row">
      <NInput
        v-model:value="customText"
        class="custom-input"
        placeholder="或输入自定义回答..."
        :bordered="false"
        @keydown.enter.prevent="submitCustom"
      />
      <button
        class="submit-btn"
        :disabled="!customText.trim()"
        @click="submitCustom"
      >
        提交
      </button>
    </div>
  </div>
</template>

<style scoped>
/* v1.1：内嵌式 Askfor，深色风格统一
   整个面板使用同一字体 + 同一号字（选项按钮与输入框完全一致） */
.askfor-inline {
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.05);
  padding: 10px 12px;
  margin: 8px 10px 4px;
  /* 容器统一字体，子元素 NInput/button 全部继承 */
  font-size: 12px;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1.5;
}
.header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.title {
  font-weight: 600;
  font-size: 12px;
  color: #c084fc;
}
.question {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  margin-bottom: 8px;
  color: var(--text-secondary, #b0b0b0);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  border-left: 2px solid rgba(168, 85, 247, 0.5);
}
.choices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}
.choice-btn {
  /* 与 custom-row 同高度、同内边距、同宽度、同字体、同字号 */
  padding: 5px 12px;
  min-height: 32px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  font-size: 12px;
  color: var(--text-primary, #e0e0e0);
  font-family: inherit; /* 继承 .askfor-inline 的字体 */
  width: 100%;
}
.choice-btn:hover {
  border-color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
}

/* 自定义输入行：与选项按钮外观一致，左侧输入 + 右侧提交按钮 */
.custom-row {
  display: flex;
  align-items: stretch;
  margin-top: 4px;
  min-height: 32px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: all 0.15s;
  font-family: inherit; /* 继承字体 */
  font-size: 12px;
}
.custom-row:focus-within {
  border-color: #c084fc;
  background: rgba(168, 85, 247, 0.08);
}
.custom-row :deep(.n-input) {
  flex: 1;
  background: transparent;
  font-family: inherit !important;
  font-size: 12px !important;
  /* NInput 容器本身零内边距，避免与内部输入元素的 padding 叠加产生"中文 padding"错觉 */
  padding: 0 !important;
}
/* NInput 的 wrapper 也是零内边距，让输入元素的 padding 成为唯一水平留白 */
.custom-row :deep(.n-input .n-input-wrapper) {
  padding: 0 !important;
  border: none !important;
  min-height: 32px !important;
}
.custom-row :deep(.n-input .n-input__textarea-el),
.custom-row :deep(.n-input .n-input__input-el) {
  font-size: 12px !important;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace !important;
  color: var(--text-primary, #e0e0e0);
  padding: 5px 12px;
  min-height: 32px !important;
  line-height: 1.5;
  resize: none;
}
/* placeholder 同样字体同字号 */
.custom-row :deep(.n-input .n-input__placeholder),
.custom-row :deep(.n-input textarea::placeholder) {
  font-size: 12px !important;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace !important;
}
/* placeholder 与真实输入光标对齐：因为外层 .n-input / .n-input-wrapper 的 padding
   被清零（见上），只有最内层 input 元素有 padding-left:12px，导致绝对定位的
   placeholder 元素贴在最左边、与输入光标错位。这里给 placeholder 补上同样的左 padding。 */
.custom-row :deep(.n-input .n-input__placeholder) {
  padding-left: 12px !important;
}

/* 提交按钮：纯色背景 + 白字，小尺寸，与"保存"按钮主色一致 */
.submit-btn {
  flex-shrink: 0;
  padding: 0 14px;
  min-height: 32px;
  border: none;
  border-radius: 0;
  background: var(--color-primary, #2563EB);
  color: #ffffff;
  font-size: 12px;
  font-family: inherit; /* 继承字体，与选项/输入框一致 */
  cursor: pointer;
  transition: background 0.15s;
}
.submit-btn:hover:not(:disabled) {
  background: var(--color-primary-light, #3B82F6);
}
.submit-btn:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-tertiary, #666);
  cursor: not-allowed;
}
</style>