feat: 新增AI问答聊天页面及相关接口

1. 新增AI对话接口sendChatMessage
2. 新增pages/ai/index问答页面
3. 在pages.json中注册AI问答页面路由

src/api/ai/ai.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// AI 对话
+export function sendChatMessage(data) {
+  return request({
+    url: '/ai/chat',
+    method: 'post',
+    data: data
+  })
+}

src/pages.json

@@ -255,6 +255,12 @@
       }
     },
     {
+      "path": "pages/ai/index",
+      "style": {
+        "navigationBarTitleText": "AI问答"
+      }
+    },
+    {
       "path": "pages/announcement/index",
       "style": {
         "navigationBarTitleText": "公告"

src/pages/ai/index.vue

@@ -0,0 +1,323 @@
+<template>
+  <view class="ai-chat-page">
+    <!-- 消息列表 -->
+    <scroll-view
+      class="message-list"
+      scroll-y
+      :scroll-into-view="scrollToId"
+      @scrolltoupper="loadMore"
+      enable-back-to-top
+    >
+      <view class="messages-wrapper">
+        <view
+          v-for="(msg, index) in messages"
+          :key="msg.id"
+          :id="'msg-' + msg.id"
+          class="message-item"
+          :class="msg.role === 'user' ? 'user-msg' : 'ai-msg'"
+        >
+          <!-- AI 头像 -->
+          <view v-if="msg.role !== 'user'" class="avatar ai-avatar">
+            <text class="avatar-text">AI</text>
+          </view>
+          <view class="bubble-wrapper">
+            <view class="bubble" :class="msg.role === 'user' ? 'user-bubble' : 'ai-bubble'">
+              <text class="bubble-text">{{ msg.content }}</text>
+              <view v-if="msg.role === 'assistant' && index === messages.length - 1 && loading" class="typing-dots">
+                <text class="dot">.</text>
+                <text class="dot">.</text>
+                <text class="dot">.</text>
+              </view>
+            </view>
+          </view>
+          <!-- 用户头像 -->
+          <view v-if="msg.role === 'user'" class="avatar user-avatar">
+            <text class="avatar-text">我</text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 输入区域 -->
+    <view class="input-area">
+      <view class="input-wrapper">
+        <input
+          v-model="inputText"
+          class="chat-input"
+          type="text"
+          placeholder="请输入您的问题..."
+          placeholder-class="placeholder-style"
+          :disabled="loading"
+          @confirm="sendMessage"
+          confirm-type="send"
+        />
+        <view class="send-btn" :class="{ disabled: !inputText.trim() || loading }" @click="sendMessage">
+          <text class="send-icon">↑</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { sendChatMessage } from '@/api/ai/ai'
+
+let msgId = 0
+
+export default {
+  data() {
+    return {
+      inputText: '',
+      messages: [],
+      loading: false,
+      scrollToId: ''
+    }
+  },
+  onLoad() {
+    this.addWelcomeMessage()
+  },
+  methods: {
+    addWelcomeMessage() {
+      this.messages.push({
+        id: ++msgId,
+        role: 'assistant',
+        content: '您好！我是智慧安检 AI 助手，有什么可以帮助您的吗？'
+      })
+      this.$nextTick(() => {
+        this.scrollToBottom()
+      })
+    },
+    async sendMessage() {
+      const text = this.inputText.trim()
+      if (!text || this.loading) return
+
+      // 添加用户消息
+      this.messages.push({
+        id: ++msgId,
+        role: 'user',
+        content: text
+      })
+      this.inputText = ''
+      this.scrollToBottom()
+
+      // 添加占位 AI 消息
+      this.loading = true
+      const aiMsgId = ++msgId
+      this.messages.push({
+        id: aiMsgId,
+        role: 'assistant',
+        content: ''
+      })
+      this.scrollToBottom()
+
+      try {
+        const res = await sendChatMessage({
+          message: text,
+          history: this.messages
+            .filter(m => m.content)
+            .slice(-10)
+            .map(m => ({
+              role: m.role,
+              content: m.content
+            }))
+        })
+        const reply = res?.data?.reply || res?.data?.content || '抱歉，我暂时无法回答这个问题，请稍后再试。'
+        // 更新 AI 回复
+        const aiMsg = this.messages.find(m => m.id === aiMsgId)
+        if (aiMsg) {
+          aiMsg.content = reply
+        }
+      } catch (error) {
+        const aiMsg = this.messages.find(m => m.id === aiMsgId)
+        if (aiMsg) {
+          aiMsg.content = '网络开小差了，请稍后再试。'
+        }
+      } finally {
+        this.loading = false
+        this.$nextTick(() => {
+          this.scrollToBottom()
+        })
+      }
+    },
+    scrollToBottom() {
+      if (this.messages.length > 0) {
+        this.scrollToId = 'msg-' + this.messages[this.messages.length - 1].id
+      }
+    },
+    loadMore() {
+      // 预留加载更多历史消息
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ai-chat-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f5f5f5;
+  padding-top: var(--status-bar-height);
+}
+
+.message-list {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.messages-wrapper {
+  padding: 20rpx 30rpx;
+  padding-bottom: 30rpx;
+}
+
+.message-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30rpx;
+
+  &.user-msg {
+    justify-content: flex-end;
+  }
+
+  &.ai-msg {
+    justify-content: flex-start;
+  }
+}
+
+.avatar {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  .avatar-text {
+    font-size: 24rpx;
+    font-weight: bold;
+    color: #fff;
+  }
+}
+
+.ai-avatar {
+  background: linear-gradient(135deg, #409EFF, #36cfc9);
+  margin-right: 16rpx;
+}
+
+.user-avatar {
+  background: linear-gradient(135deg, #36d399, #409EFF);
+  margin-left: 16rpx;
+}
+
+.bubble-wrapper {
+  max-width: 70%;
+  display: flex;
+}
+
+.bubble {
+  padding: 20rpx 24rpx;
+  border-radius: 12rpx;
+  font-size: 28rpx;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.user-bubble {
+  background: linear-gradient(135deg, #409EFF, #36cfc9);
+  color: #fff;
+  border-bottom-right-radius: 4rpx;
+}
+
+.ai-bubble {
+  background: #fff;
+  color: #333;
+  border-bottom-left-radius: 4rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+}
+
+.bubble-text {
+  white-space: pre-wrap;
+}
+
+.typing-dots {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 4rpx;
+
+  .dot {
+    font-size: 40rpx;
+    line-height: 1;
+    color: #999;
+    animation: blink 1.4s infinite both;
+
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+  }
+}
+
+@keyframes blink {
+  0%, 80%, 100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+/* 输入区域 */
+.input-area {
+  padding: 16rpx 24rpx;
+  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+  background: #fff;
+  border-top: 1rpx solid #eee;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.chat-input {
+  flex: 1;
+  height: 72rpx;
+  background: #f5f5f5;
+  border-radius: 36rpx;
+  padding: 0 30rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.placeholder-style {
+  color: #999;
+  font-size: 28rpx;
+}
+
+.send-btn {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #409EFF, #36cfc9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &.disabled {
+    opacity: 0.4;
+  }
+
+  .send-icon {
+    color: #fff;
+    font-size: 36rpx;
+    font-weight: bold;
+  }
+}
+</style>