feat: 新增 AI数据助手 聊天页面

- src/pages/ai-chat/index.vue：完整聊天界面
  - SSE流式接收（fetch + ReadableStream）
  - 进度步骤展示、数据表格、SQL折叠块、知识库回答
  - 意图澄清提示、加载动画、对话历史
- pages.json：注册 ai-chat 路由（自定义导航栏）
- home/index.vue：右下角悬浮 AI 按钮入口

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages.json

@@ -1,6 +1,13 @@
 {
   "pages": [
     {
+      "path": "pages/ai-chat/index",
+      "style": {
+        "navigationBarTitleText": "AI数据助手",
+        "navigationStyle": "custom"
+      }
+    },
+    {
       "path": "pages/login",
       "style": {
         "navigationBarTitleText": "登录"

src/pages/ai-chat/index.vue

@@ -0,0 +1,548 @@
+<template>
+  <view class="ai-chat-page">
+    <!-- 顶部导航 -->
+    <view class="nav-bar">
+      <view class="back-btn" @click="goBack">
+        <text class="back-icon">‹</text>
+      </view>
+      <text class="nav-title">AI数据助手</text>
+      <view class="nav-right" @click="clearChat">
+        <text class="clear-btn">清空</text>
+      </view>
+    </view>
+
+    <!-- 消息列表 -->
+    <scroll-view
+      class="msg-list"
+      scroll-y
+      :scroll-top="scrollTop"
+      :scroll-with-animation="true"
+      @scrolltolower="onScrollBottom"
+    >
+      <!-- 欢迎语 -->
+      <view v-if="messages.length === 0" class="welcome">
+        <image class="welcome-icon" src="/static/images/logo.png" mode="aspectFit" />
+        <text class="welcome-title">您好！我是机场安检数据助手</text>
+        <text class="welcome-sub">请问有什么可以帮您查询的？</text>
+        <view class="example-tags">
+          <view
+            v-for="tag in exampleTags"
+            :key="tag"
+            class="tag"
+            @click="sendExample(tag)"
+          >{{ tag }}</view>
+        </view>
+      </view>
+
+      <!-- 消息气泡 -->
+      <view
+        v-for="(msg, idx) in messages"
+        :key="idx"
+        :class="['msg-row', msg.role === 'user' ? 'msg-user' : 'msg-assistant']"
+      >
+        <!-- AI头像 -->
+        <view v-if="msg.role === 'assistant'" class="avatar">
+          <text class="avatar-text">AI</text>
+        </view>
+
+        <view class="bubble-wrap">
+          <!-- 进度提示（流式过程中） -->
+          <view v-if="msg.steps && msg.steps.length" class="steps">
+            <view v-for="(step, si) in msg.steps" :key="si" :class="['step', step.status]">
+              <text class="step-dot">{{ step.status === 'done' ? '✓' : step.status === 'running' ? '…' : '·' }}</text>
+              <text class="step-name">{{ step.name }}</text>
+              <text v-if="step.duration" class="step-time"> {{ step.duration }}s</text>
+            </view>
+          </view>
+
+          <!-- 文字回答（知识库/AI直接回答） -->
+          <view v-if="msg.answer" class="bubble knowledge">
+            <text class="bubble-text" selectable>{{ msg.answer }}</text>
+            <view v-if="msg.sources && msg.sources.length" class="sources">
+              <text class="source-label">来源：</text>
+              <text class="source-item" v-for="s in msg.sources" :key="s.filename">{{ s.filename }}</text>
+            </view>
+          </view>
+
+          <!-- 数据查询结果 -->
+          <view v-else-if="msg.role === 'assistant' && !msg.loading" class="bubble data">
+            <text v-if="msg.message" class="result-msg" :class="{ error: msg.isError }">{{ msg.message }}</text>
+
+            <!-- 数据表格 -->
+            <view v-if="msg.rows && msg.rows.length" class="data-table">
+              <scroll-view scroll-x class="table-scroll">
+                <view class="table-head">
+                  <text v-for="col in msg.columns" :key="col" class="th">{{ col }}</text>
+                </view>
+                <view v-for="(row, ri) in msg.rows" :key="ri" :class="['table-row', ri % 2 === 0 ? 'even' : '']">
+                  <text v-for="col in msg.columns" :key="col" class="td">{{ row[col] ?? '-' }}</text>
+                </view>
+              </scroll-view>
+            </view>
+
+            <!-- SQL 折叠 -->
+            <view v-if="msg.sql" class="sql-block">
+              <view class="sql-toggle" @click="toggleSql(idx)">
+                <text class="sql-label">SQL</text>
+                <text class="sql-arrow">{{ msg.showSql ? '▲' : '▼' }}</text>
+              </view>
+              <view v-if="msg.showSql" class="sql-code">
+                <text selectable>{{ msg.sql }}</text>
+              </view>
+            </view>
+          </view>
+
+          <!-- 用户消息气泡 -->
+          <view v-if="msg.role === 'user'" class="bubble user">
+            <text class="bubble-text" selectable>{{ msg.text }}</text>
+          </view>
+
+          <!-- 加载中 -->
+          <view v-if="msg.loading" class="bubble loading">
+            <view class="dot-loader">
+              <view class="dot" /><view class="dot" /><view class="dot" />
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部留白 -->
+      <view style="height: 20rpx;" />
+    </scroll-view>
+
+    <!-- 意图澄清 -->
+    <view v-if="clarifyQuestion" class="clarify-bar">
+      <text class="clarify-text">{{ clarifyQuestion }}</text>
+    </view>
+
+    <!-- 输入区 -->
+    <view class="input-bar">
+      <input
+        v-model="inputText"
+        class="input"
+        placeholder="请输入您的问题..."
+        :disabled="loading"
+        confirm-type="send"
+        @confirm="sendMessage"
+      />
+      <view :class="['send-btn', loading ? 'disabled' : '']" @click="sendMessage">
+        <text class="send-text">{{ loading ? '…' : '发送' }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+const AI_URL = 'https://airport.samsundot.com/api/query-stream'
+
+export default {
+  name: 'AiChat',
+  data() {
+    return {
+      inputText: '',
+      messages: [],
+      loading: false,
+      scrollTop: 0,
+      clarifyQuestion: '',
+      sessionId: 'app_' + Date.now(),
+      history: [],
+      exampleTags: ['各班组查获排名', '打火机查获数量', '旅检一部人员资质', '全站党员人数'],
+    }
+  },
+  methods: {
+    goBack() {
+      uni.navigateBack()
+    },
+
+    clearChat() {
+      this.messages = []
+      this.history = []
+      this.clarifyQuestion = ''
+      this.sessionId = 'app_' + Date.now()
+    },
+
+    sendExample(text) {
+      this.inputText = text
+      this.sendMessage()
+    },
+
+    toggleSql(idx) {
+      this.$set(this.messages[idx], 'showSql', !this.messages[idx].showSql)
+    },
+
+    onScrollBottom() {},
+
+    scrollToBottom() {
+      this.$nextTick(() => {
+        this.scrollTop = 999999
+      })
+    },
+
+    getUserId() {
+      try {
+        const userStr = uni.getStorageSync('userInfo') || uni.getStorageSync('user')
+        if (userStr) {
+          const u = typeof userStr === 'string' ? JSON.parse(userStr) : userStr
+          return String(u.userId || u.user_id || u.id || 1)
+        }
+      } catch (e) {}
+      return '1'
+    },
+
+    async sendMessage() {
+      const question = this.inputText.trim()
+      if (!question || this.loading) return
+
+      this.inputText = ''
+      this.clarifyQuestion = ''
+      this.loading = true
+
+      // 添加用户消息
+      this.messages.push({ role: 'user', text: question })
+
+      // 添加 AI 占位消息
+      const aiIdx = this.messages.length
+      this.messages.push({
+        role: 'assistant',
+        loading: true,
+        steps: [],
+        message: '',
+        sql: '',
+        columns: [],
+        rows: [],
+        answer: '',
+        sources: [],
+        showSql: false,
+      })
+      this.scrollToBottom()
+
+      try {
+        const response = await fetch(AI_URL, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            question,
+            user_id: this.getUserId(),
+            llm_type: 'qwen',
+            session_id: this.sessionId,
+            history: this.history.slice(-3),
+          }),
+        })
+
+        if (!response.ok) throw new Error('请求失败 ' + response.status)
+
+        const reader = response.body.getReader()
+        const decoder = new TextDecoder()
+        let buffer = ''
+
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) break
+
+          buffer += decoder.decode(value, { stream: true })
+          const lines = buffer.split('\n')
+          buffer = lines.pop()
+
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              try {
+                const data = JSON.parse(line.slice(6))
+                this.handleEvent(aiIdx, data)
+              } catch (e) {}
+            }
+          }
+        }
+      } catch (err) {
+        this.$set(this.messages, aiIdx, {
+          ...this.messages[aiIdx],
+          loading: false,
+          isError: true,
+          message: '请求失败，请检查网络后重试',
+        })
+      }
+
+      this.loading = false
+      this.scrollToBottom()
+    },
+
+    handleEvent(aiIdx, data) {
+      const msg = this.messages[aiIdx]
+
+      if (data.step !== undefined && data.name) {
+        // 进度步骤
+        const steps = [...(msg.steps || [])]
+        const si = steps.findIndex(s => s.name === data.name)
+        const step = { name: data.name, status: data.status, duration: data.duration }
+        if (si >= 0) steps[si] = step
+        else steps.push(step)
+        this.$set(this.messages, aiIdx, { ...msg, steps })
+        return
+      }
+
+      if (data.question) {
+        // 意图澄清
+        this.clarifyQuestion = data.question
+        this.$set(this.messages, aiIdx, { ...msg, loading: false })
+        return
+      }
+
+      if (data.columns !== undefined || data.answer !== undefined) {
+        // 最终结果
+        this.$set(this.messages, aiIdx, {
+          ...msg,
+          loading: false,
+          message: data.message || '',
+          sql: data.sql || '',
+          columns: data.columns || [],
+          rows: data.rows || [],
+          answer: data.answer || '',
+          sources: data.sources || [],
+          isError: !data.success,
+          showSql: false,
+        })
+        // 记录历史
+        this.history.push({
+          question: this.messages[aiIdx - 1]?.text || '',
+          sql: data.sql || '',
+        })
+        this.scrollToBottom()
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$primary: #1890ff;
+$bg: #f5f6fa;
+$bubble-user: #1890ff;
+$bubble-ai: #ffffff;
+$text-main: #333;
+$text-sub: #999;
+
+.ai-chat-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: $bg;
+  font-size: 28rpx;
+}
+
+/* 导航栏 */
+.nav-bar {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 30rpx;
+  padding-top: calc(20rpx + env(safe-area-inset-top));
+  background: #fff;
+  border-bottom: 1rpx solid #eee;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.back-btn { width: 80rpx; display: flex; align-items: center; }
+.back-icon { font-size: 50rpx; color: $primary; line-height: 1; }
+.nav-title { flex: 1; text-align: center; font-size: 32rpx; font-weight: 600; color: $text-main; }
+.nav-right { width: 80rpx; text-align: right; }
+.clear-btn { font-size: 26rpx; color: $text-sub; }
+
+/* 消息列表 */
+.msg-list {
+  flex: 1;
+  overflow: hidden;
+  padding: 20rpx 0;
+}
+
+/* 欢迎区 */
+.welcome {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80rpx 40rpx 40rpx;
+  gap: 16rpx;
+}
+.welcome-icon { width: 120rpx; height: 120rpx; border-radius: 24rpx; }
+.welcome-title { font-size: 32rpx; font-weight: 600; color: $text-main; }
+.welcome-sub { font-size: 26rpx; color: $text-sub; }
+.example-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16rpx;
+  margin-top: 20rpx;
+}
+.tag {
+  padding: 12rpx 24rpx;
+  background: #fff;
+  border: 1rpx solid #d0e8ff;
+  border-radius: 40rpx;
+  font-size: 24rpx;
+  color: $primary;
+}
+
+/* 消息行 */
+.msg-row {
+  display: flex;
+  padding: 16rpx 24rpx;
+  gap: 16rpx;
+}
+.msg-user { flex-direction: row-reverse; }
+.msg-assistant { flex-direction: row; }
+
+/* 头像 */
+.avatar {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: $primary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.avatar-text { color: #fff; font-size: 22rpx; font-weight: 700; }
+
+/* 气泡包裹 */
+.bubble-wrap { flex: 1; display: flex; flex-direction: column; gap: 8rpx; max-width: 90%; }
+
+/* 气泡 */
+.bubble {
+  border-radius: 16rpx;
+  padding: 20rpx 24rpx;
+  word-break: break-all;
+}
+.bubble.user {
+  background: $bubble-user;
+  border-bottom-right-radius: 4rpx;
+  .bubble-text { color: #fff; }
+}
+.bubble.data, .bubble.knowledge {
+  background: $bubble-ai;
+  border-bottom-left-radius: 4rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,.06);
+}
+.bubble-text { line-height: 1.6; color: $text-main; }
+
+/* 进度步骤 */
+.steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+  padding: 0 4rpx;
+}
+.step {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  font-size: 22rpx;
+  color: $text-sub;
+  &.done { color: #52c41a; }
+  &.running { color: $primary; }
+}
+.step-dot { font-size: 20rpx; width: 24rpx; }
+.step-time { font-size: 20rpx; }
+
+/* 结果状态 */
+.result-msg {
+  font-size: 24rpx;
+  color: $text-sub;
+  display: block;
+  margin-bottom: 12rpx;
+  &.error { color: #ff4d4f; }
+}
+
+/* 表格 */
+.data-table { margin-top: 8rpx; }
+.table-scroll { width: 100%; }
+.table-head, .table-row {
+  display: flex;
+  min-width: max-content;
+}
+.table-head { background: #f0f7ff; }
+.table-row.even { background: #fafafa; }
+.th, .td {
+  min-width: 120rpx;
+  padding: 12rpx 16rpx;
+  font-size: 24rpx;
+  white-space: nowrap;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+.th { font-weight: 600; color: $primary; }
+.td { color: $text-main; }
+
+/* SQL 折叠 */
+.sql-block { margin-top: 12rpx; }
+.sql-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 8rpx 0;
+}
+.sql-label { font-size: 22rpx; color: $text-sub; background: #f0f0f0; padding: 2rpx 12rpx; border-radius: 6rpx; }
+.sql-arrow { font-size: 20rpx; color: $text-sub; }
+.sql-code {
+  background: #1e1e1e;
+  border-radius: 8rpx;
+  padding: 16rpx;
+  text { font-size: 22rpx; color: #d4d4d4; line-height: 1.5; }
+}
+
+/* 知识库来源 */
+.sources { margin-top: 12rpx; padding-top: 12rpx; border-top: 1rpx solid #f0f0f0; }
+.source-label { font-size: 22rpx; color: $text-sub; }
+.source-item { font-size: 22rpx; color: $primary; }
+
+/* 加载动画 */
+.loading { background: $bubble-ai !important; box-shadow: 0 2rpx 8rpx rgba(0,0,0,.06); }
+.dot-loader { display: flex; gap: 8rpx; align-items: center; height: 32rpx; }
+.dot {
+  width: 12rpx; height: 12rpx; border-radius: 50%; background: #ccc;
+  animation: bounce 1.2s infinite ease-in-out;
+  &:nth-child(2) { animation-delay: 0.2s; }
+  &:nth-child(3) { animation-delay: 0.4s; }
+}
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* 澄清提示 */
+.clarify-bar {
+  background: #fff7e6;
+  border-top: 1rpx solid #ffe58f;
+  padding: 16rpx 30rpx;
+}
+.clarify-text { font-size: 26rpx; color: #d46b08; }
+
+/* 输入栏 */
+.input-bar {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 24rpx;
+  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+  background: #fff;
+  border-top: 1rpx solid #eee;
+  gap: 16rpx;
+}
+.input {
+  flex: 1;
+  height: 72rpx;
+  padding: 0 24rpx;
+  background: #f5f6fa;
+  border-radius: 36rpx;
+  font-size: 28rpx;
+  color: $text-main;
+  border: 1rpx solid #e8e8e8;
+}
+.send-btn {
+  width: 100rpx;
+  height: 72rpx;
+  background: $primary;
+  border-radius: 36rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.disabled { background: #ccc; }
+}
+.send-text { color: #fff; font-size: 26rpx; }
+</style>

src/pages/home/index.vue

@@ -37,6 +37,11 @@
       </div>
     </div>
 
+    <!-- AI助手悬浮按钮 -->
+    <view class="ai-float-btn" @click="openAiChat">
+      <text class="ai-float-icon">AI</text>
+    </view>
+
     <Notice ref="notice" />
     <!--  今日待办  -->
     <!-- <myToDo /> -->
@@ -118,6 +123,9 @@ export default {
 
   },
   methods: {
+    openAiChat() {
+      uni.navigateTo({ url: '/pages/ai-chat/index' });
+    },
     goworkDocu() {
       uni.navigateTo({
         url: '/pages/workDocu/index'
@@ -367,4 +375,25 @@ img {
   width: 100%;
   margin-bottom: 32rpx;
 }
+
+.ai-float-btn {
+  position: fixed;
+  right: 40rpx;
+  bottom: 180rpx;
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #1890ff, #096dd9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.45);
+  z-index: 99;
+}
+.ai-float-icon {
+  color: #fff;
+  font-size: 28rpx;
+  font-weight: 700;
+  letter-spacing: 2rpx;
+}
 </style>