create-koa-boot 1.0.0

package/templates/example/frontend/src/components/AiAssistant.vue

@@ -0,0 +1,640 @@
+<template>
+  <div class="ai-assistant">
+    <!-- 右侧悬浮按钮 -->
+    <el-tooltip content="AI 业务助手" placement="left" :show-after="300">
+      <div class="ai-fab" @click="open = !open">
+        <el-icon :size="22" color="#ffffff"><Headset /></el-icon>
+        <span v-if="unreadTips" class="ai-fab-dot"></span>
+      </div>
+    </el-tooltip>
+
+    <!-- 对话面板 -->
+    <transition name="ai-pop">
+      <div v-if="open" class="ai-panel">
+        <div class="ai-header">
+          <div class="ai-header-title">
+            <el-icon :size="18"><ChatDotRound /></el-icon>
+            <span>AI 业务助手</span>
+          </div>
+          <div class="ai-header-actions">
+            <el-tooltip content="清空对话" placement="bottom">
+              <el-button link :disabled="!messages.length" @click="clearChat">
+                <el-icon><Delete /></el-icon>
+              </el-button>
+            </el-tooltip>
+            <el-button link @click="open = false">
+              <el-icon><Close /></el-icon>
+            </el-button>
+          </div>
+        </div>
+
+        <!-- 消息区 -->
+        <div ref="bodyRef" class="ai-body">
+          <!-- 空状态 + 快捷问题 -->
+          <div v-if="!messages.length" class="ai-empty">
+            <el-icon :size="42" color="#10B981"><Headset /></el-icon>
+            <p class="ai-empty-title">供应链业务智能问答</p>
+            <p class="ai-empty-sub">可查询门店、订单、订货统计、商品销售数据</p>
+            <div class="ai-suggestions">
+              <div
+                v-for="q in suggestions"
+                :key="q"
+                class="ai-suggestion"
+                @click="quickAsk(q)"
+              >
+                {{ q }}
+              </div>
+            </div>
+          </div>
+
+          <!-- 消息列表 -->
+          <div
+            v-for="(m, index) in messages"
+            :key="index"
+            :class="['ai-msg', m.role]"
+          >
+            <div class="ai-msg-avatar">
+              <el-icon v-if="m.role === 'assistant'" :size="16"><MagicStick /></el-icon>
+              <span v-else>{{ (userStore.userInfo?.name || '我')[0] }}</span>
+            </div>
+            <div class="ai-msg-main">
+              <!-- 工具调用标签 -->
+              <div v-if="m.role === 'assistant' && m.toolCalls.length" class="ai-tool-badge">
+                <el-icon :size="12"><DataAnalysis /></el-icon>
+                <span>已查询：{{ m.toolCalls.map(t => toolLabel(t.name)).join('、') }}</span>
+              </div>
+              <!-- 消息气泡 -->
+              <div class="ai-bubble" :class="{ 'is-markdown': m.role === 'assistant' }">
+                <template v-if="m.role === 'assistant' && loadingIndex === index && !m.display">
+                  <span class="ai-thinking">正在查询业务数据</span>
+                  <span class="ai-dots"><i></i><i></i><i></i></span>
+                </template>
+                <!-- AI 回复：Markdown 渲染（表格/列表/代码块） -->
+                <div v-else-if="m.role === 'assistant'" class="ai-markdown" v-html="m.html"></div>
+                <template v-else>{{ m.display }}</template>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 输入区 -->
+        <div class="ai-footer">
+          <el-input
+            v-model="input"
+            type="textarea"
+            :rows="2"
+            resize="none"
+            maxlength="500"
+            placeholder="输入问题，如：近 7 天各门店订货排行"
+            @keydown.enter.exact.prevent="send"
+          />
+          <div class="ai-footer-bar">
+            <span class="ai-footer-tip">Enter 发送 / Shift+Enter 换行</span>
+            <el-button type="primary" :loading="loading" :disabled="!input.trim()" @click="send">
+              发送
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, watch, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
+import { aiChat, type AiChatMessage, type AiToolCallRecord } from '../api/ai'
+import { useUserStore } from '../stores/user'
+
+/** Markdown 渲染：GFM（含表格）+ HTML 消毒（防 XSS） */
+marked.setOptions({ gfm: true, breaks: true })
+function renderMarkdown(text: string): string {
+  return DOMPurify.sanitize(marked.parse(text) as string)
+}
+
+/** 消息项（display 为打字机当前展示内容，html 为 Markdown 渲染结果） */
+interface ChatItem {
+  role: 'user' | 'assistant'
+  content: string
+  display: string
+  html: string
+  toolCalls: AiToolCallRecord[]
+  /** 思考模式推理内容（保存后于下轮请求原样回传，防止 thinking 模式 400） */
+  reasoningContent: string
+  /** 请求失败的错误气泡：不进入发送历史（无 reasoningContent，回传会触发 thinking 400） */
+  error: boolean
+}
+
+const userStore = useUserStore()
+
+/** 历史对话本地存储 key（按用户隔离） */
+const HISTORY_KEY = () => `ai_chat_history_${userStore.userInfo?.id || 'default'}`
+/** 历史保留条数上限 */
+const HISTORY_LIMIT = 50
+
+/** 从 localStorage 恢复历史对话（字段缺失时补默认值，兼容旧数据） */
+function restoreHistory() {
+  try {
+    const raw = localStorage.getItem(HISTORY_KEY())
+    if (!raw) return
+    const list = JSON.parse(raw)
+    if (!Array.isArray(list)) return
+    messages.value = list.map(m => ({
+      role: m.role === 'user' ? 'user' : 'assistant',
+      content: m.content || '',
+      display: m.display || m.content || '',
+      html: m.html || '',
+      toolCalls: m.toolCalls || [],
+      reasoningContent: m.reasoningContent || '',
+      error: !!m.error,
+    }))
+  } catch {
+    // 数据损坏时静默忽略
+  }
+}
+
+const open = ref(false)
+const input = ref('')
+const loading = ref(false)
+const bodyRef = ref<HTMLElement>()
+const messages = ref<ChatItem[]>([])
+/** 正在打字机渲染的消息下标 */
+const loadingIndex = ref<number | null>(null)
+/** 面板是否收到过新的 AI 回复（用于悬浮按钮小红点提示） */
+const unreadTips = ref(false)
+
+/** 快捷问题 */
+const suggestions = [
+  '近 7 天各门店订货排行',
+  '查询待审核的销售订单',
+  '哪些商品卖得最好',
+  '华东门店最近有哪些订单',
+]
+
+/** 工具名 → 中文标签 */
+const TOOL_LABELS: Record<string, string> = {
+  query_stores: '门店列表',
+  query_sale_orders: '销售订单',
+  query_order_statistics: '订货统计',
+  query_sku_sale_analysis: '商品销售分析',
+}
+function toolLabel(name: string): string {
+  return TOOL_LABELS[name] || name
+}
+
+function scrollToBottom() {
+  nextTick(() => {
+    const el = bodyRef.value
+    if (el) el.scrollTop = el.scrollHeight
+  })
+}
+
+/** 打字机效果（含表格/代码块的结构化回复直接整体渲染，避免逐字抖动） */
+function typewrite(item: ChatItem): Promise<void> {
+  return new Promise(resolve => {
+    const full = item.content
+    // 检测表格（行首 |）或代码块（```）：结构化内容跳过打字机
+    if (/```|^\s*\|/m.test(full)) {
+      item.display = full
+      item.html = renderMarkdown(full)
+      resolve()
+      return
+    }
+    let i = 0
+    item.display = ''
+    item.html = ''
+    const timer = window.setInterval(() => {
+      i += 2
+      item.display = full.slice(0, i)
+      item.html = renderMarkdown(item.display)
+      scrollToBottom()
+      if (i >= full.length) {
+        window.clearInterval(timer)
+        item.display = full
+        item.html = renderMarkdown(full)
+        resolve()
+      }
+    }, 24)
+  })
+}
+
+async function send() {
+  const text = input.value.trim()
+  if (!text || loading.value) return
+  input.value = ''
+  unreadTips.value = false
+
+  messages.value.push({ role: 'user', content: text, display: text, html: '', toolCalls: [], reasoningContent: '', error: false })
+  const assistant: ChatItem = { role: 'assistant', content: '', display: '', html: '', toolCalls: [], reasoningContent: '', error: false }
+  messages.value.push(assistant)
+  loadingIndex.value = messages.value.length - 1
+  loading.value = true
+  scrollToBottom()
+
+  try {
+    // 发送最近一轮完整对话（含历史），最新一条为用户问题
+    // 过滤空占位与请求失败的错误气泡；历史 assistant 消息携带 reasoningContent 原样回传（thinking 模式协议要求）
+    const history: AiChatMessage[] = messages.value
+      .filter(m => m.content && !m.error)
+      .map(m => ({
+        role: m.role,
+        content: m.content,
+        reasoningContent: m.reasoningContent || undefined,
+      }))
+    const res = await aiChat(history)
+    const result = res.data.data
+    assistant.content = result.reply
+    assistant.toolCalls = result.toolCalls || []
+    assistant.reasoningContent = result.reasoningContent || ''
+    loadingIndex.value = null
+    await typewrite(assistant)
+    if (!open.value) unreadTips.value = true
+  } catch (e) {
+    loadingIndex.value = null
+    assistant.content = (e as Error).message || '请求失败，请稍后重试'
+    assistant.display = assistant.content
+    assistant.html = renderMarkdown(assistant.content)
+    assistant.error = true
+    ElMessage.error(assistant.content)
+  } finally {
+    loading.value = false
+    scrollToBottom()
+  }
+}
+
+function quickAsk(q: string) {
+  input.value = q
+  send()
+}
+
+function clearChat() {
+  messages.value = []
+  input.value = ''
+  unreadTips.value = false
+  try {
+    localStorage.removeItem(HISTORY_KEY())
+  } catch {
+    // 忽略
+  }
+}
+
+/** 挂载时恢复历史对话 */
+onMounted(() => {
+  restoreHistory()
+})
+
+/** 对话变化时持久化（最多保留 HISTORY_LIMIT 条） */
+watch(
+  messages,
+  () => {
+    try {
+      const list = messages.value.slice(-HISTORY_LIMIT).map(m => ({
+        role: m.role,
+        content: m.content,
+        display: m.display || m.content,
+        html: m.html || '',
+        toolCalls: m.toolCalls || [],
+        reasoningContent: m.reasoningContent || '',
+        error: !!m.error,
+      }))
+      localStorage.setItem(HISTORY_KEY(), JSON.stringify(list))
+    } catch {
+      // 存储失败（容量超限等）静默忽略
+    }
+  },
+  { deep: true },
+)
+</script>
+
+<style scoped>
+.ai-assistant {
+  position: fixed;
+  right: 24px;
+  bottom: 32px;
+  z-index: 2100;
+}
+
+/* 悬浮按钮 */
+.ai-fab {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #10b981, #059669);
+  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  position: relative;
+}
+.ai-fab:hover {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.5);
+}
+.ai-fab-dot {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #ff4d4f;
+  border: 2px solid #fff;
+}
+
+/* 面板 */
+.ai-panel {
+  position: absolute;
+  right: 0;
+  bottom: 68px;
+  width: 400px;
+  height: 600px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.ai-pop-enter-active,
+.ai-pop-leave-active {
+  transition: opacity 0.25s, transform 0.25s;
+}
+.ai-pop-enter-from,
+.ai-pop-leave-to {
+  opacity: 0;
+  transform: translateY(16px);
+}
+
+/* 头部 */
+.ai-header {
+  height: 52px;
+  padding: 0 14px;
+  background: linear-gradient(135deg, #10b981, #059669);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+.ai-header-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 600;
+}
+.ai-header-actions {
+  display: flex;
+  align-items: center;
+}
+.ai-header-actions :deep(.el-button) {
+  color: #fff;
+}
+.ai-header-actions :deep(.el-button.is-disabled) {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+/* 消息区 */
+.ai-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: #f5f7fa;
+}
+
+/* 空状态 */
+.ai-empty {
+  padding-top: 48px;
+  text-align: center;
+}
+.ai-empty-title {
+  margin: 12px 0 4px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+.ai-empty-sub {
+  margin: 0 0 20px;
+  font-size: 13px;
+  color: #909399;
+}
+.ai-suggestions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+.ai-suggestion {
+  width: 80%;
+  padding: 10px 14px;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #10b981;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.ai-suggestion:hover {
+  border-color: #10b981;
+  background: #ecfdf5;
+}
+
+/* 消息 */
+.ai-msg {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.ai-msg-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #fff;
+}
+.ai-msg.user .ai-msg-avatar {
+  background: #10b981;
+}
+.ai-msg.assistant .ai-msg-avatar {
+  background: linear-gradient(135deg, #10b981, #059669);
+}
+.ai-msg-main {
+  max-width: calc(100% - 42px);
+}
+.ai-msg.user {
+  flex-direction: row-reverse;
+}
+.ai-msg.user .ai-bubble {
+  background: #10b981;
+  color: #fff;
+}
+.ai-bubble {
+  padding: 10px 12px;
+  background: #fff;
+  border-radius: 10px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: #303133;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+/* ---- AI 回复 Markdown 渲染样式 ---- */
+.ai-markdown {
+  white-space: normal;
+  overflow-x: auto;
+  max-width: 100%;
+}
+.ai-markdown :deep(p) {
+  margin: 4px 0;
+}
+.ai-markdown :deep(p:first-child) {
+  margin-top: 0;
+}
+.ai-markdown :deep(h1),
+.ai-markdown :deep(h2),
+.ai-markdown :deep(h3),
+.ai-markdown :deep(h4) {
+  margin: 10px 0 6px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.ai-markdown :deep(h1) {
+  font-size: 16px;
+}
+.ai-markdown :deep(h2) {
+  font-size: 15px;
+}
+.ai-markdown :deep(h3) {
+  font-size: 14px;
+}
+.ai-markdown :deep(h4) {
+  font-size: 13px;
+}
+.ai-markdown :deep(ul),
+.ai-markdown :deep(ol) {
+  margin: 6px 0;
+  padding-left: 20px;
+}
+.ai-markdown :deep(li) {
+  margin: 2px 0;
+}
+.ai-markdown :deep(table) {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: collapse;
+  margin: 8px 0;
+  font-size: 12px;
+}
+.ai-markdown :deep(th),
+.ai-markdown :deep(td) {
+  border: 1px solid #dcdfe6;
+  padding: 6px 8px;
+  text-align: left;
+  word-break: break-word;
+}
+.ai-markdown :deep(th) {
+  background: #ecfdf5;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.ai-markdown :deep(tr:nth-child(even) td) {
+  background: #fafafa;
+}
+.ai-markdown :deep(code) {
+  padding: 1px 5px;
+  background: #f0f2f5;
+  border-radius: 4px;
+  font-family: Consolas, Monaco, monospace;
+  font-size: 12px;
+}
+.ai-markdown :deep(pre) {
+  margin: 8px 0;
+  padding: 10px;
+  background: #f6f8fa;
+  border-radius: 6px;
+  overflow-x: auto;
+}
+.ai-markdown :deep(pre code) {
+  padding: 0;
+  background: none;
+}
+.ai-markdown :deep(a) {
+  color: #10b981;
+  text-decoration: none;
+}
+.ai-tool-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 6px;
+  padding: 3px 10px;
+  background: #ecfdf5;
+  border: 1px solid #a7f3d0;
+  border-radius: 12px;
+  font-size: 12px;
+  color: #10b981;
+}
+
+/* 思考中动画 */
+.ai-thinking {
+  font-size: 13px;
+  color: #909399;
+}
+.ai-dots {
+  display: inline-flex;
+  gap: 4px;
+  margin-left: 6px;
+}
+.ai-dots i {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #10b981;
+  animation: ai-bounce 1s infinite ease-in-out;
+}
+.ai-dots i:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.ai-dots i:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@keyframes ai-bounce {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* 输入区 */
+.ai-footer {
+  padding: 12px;
+  border-top: 1px solid #ebeef5;
+  background: #fff;
+  flex-shrink: 0;
+}
+.ai-footer-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+}
+.ai-footer-tip {
+  font-size: 12px;
+  color: #c0c4cc;
+}
+</style>