FranklinWH-Toolbox/src/views/ai-assistant/components/WelcomePanel.vue

<script setup lang="ts">
defineOptions({
  name: 'AiAssistantWelcomePanel',
})

defineProps<{
  disabled?: boolean
}>()

const emit = defineEmits<{
  send: [text: string]
  fill: [text: string]
}>()

interface Example {
  icon: string
  text: string
  /** 带占位符的示例只填入输入框，由用户补全后发送 */
  needsInput: boolean
}

const examples: Example[] = [
  { icon: 'i-ph:warning-circle', text: '查一下站点 【SN】 最近 7 天的告警和事件', needsInput: true },
  { icon: 'i-ph:chart-bar', text: '统计昨天停机站点按国家分布', needsInput: false },
  { icon: 'i-ph:chart-line', text: '分析站点 【SN】 本月的功率流，生成趋势图', needsInput: true },
  { icon: 'i-ph:book-open', text: '告警码 【告警码】 是什么意思，通常怎么处理', needsInput: true },
  { icon: 'i-ph:calendar', text: '对比生产服和测试服的 TOU 模版 【模版 ID】', needsInput: true },
  { icon: 'i-ph:file-doc', text: '帮我把上传的 Excel 整理成一份 Word 报告', needsInput: false },
]

function pick(e: Example) {
  if (e.needsInput) emit('fill', e.text)
  else emit('send', e.text)
}
</script>

<template>
  <div class="mx-auto px-4 py-8 text-left max-w-180">
    <div class="text-xl font-semibold mb-2 flex gap-2 items-center">
      <span class="i-ph:sparkle text-2xl" />
      AI 助手
    </div>
    <div class="text-sm text-neutral-500 leading-6 mb-6">
      可以查询站点、告警、停机、功率流、日志、录波、TOU 模版、SIM 卡数据，解答产品问题，分析上传的文件并生成报告。
    </div>

    <div class="gap-3 grid grid-cols-1 lg:grid-cols-3 sm:grid-cols-2">
      <button
        v-for="e in examples"
        :key="e.text"
        type="button"
        class="example-card text-sm leading-5 p-3 text-left rounded-lg flex flex-col gap-2 transition-colors items-start disabled:opacity-50 disabled:cursor-not-allowed"
        :disabled="disabled"
        @click="pick(e)"
      >
        <span class="text-lg" :class="e.icon" />
        <span>{{ e.text }}</span>
        <span v-if="e.needsInput" class="text-xs text-neutral-500">填写后发送</span>
      </button>
    </div>

    <div class="text-xs text-neutral-500 mt-6">
      数据来自 FWH 平台，结果仅供参考；涉及修改数据的操作会先请你确认。
    </div>
  </div>
</template>

<style scoped>
.example-card {
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.example-card:not(:disabled):hover {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}
</style>